/*------------------------------------------
GENERAL PREFERENCES
------------------------------------------*/
/*Please check reset.css for other primary settings. 
How this CSS is arranged:
I have laid out the general properties first followed by the default style guide. After this, the CSS is divided according to the sections of a page: Header section, section containing the  left and right contents and then the footer (and then the home only section). Each section declares their unique styles first THEN declares their specific modifications to the style guide afterwards. for other styles concerning IE, please look at the IE CSSes accordingly.
*/

body {
	background-image: url(../_images/tmp-bg-grey-noise.jpg);
}

#top-band {
/*the green band across the top*/
	width:100%;
	height: 5px;
	background: #00703C;
	position: absolute;
	top: 0;
}

#center-wrapper {
	padding: 15px 0 0 0;
/*	position: relative;*/
	margin: auto;
	width: 960px;
}


/* Practicing image hover */


.image:hover > .overlay {
    width:100%;
    height:100%;
    position:absolute;
    background-color:#000;
    opacity:0.5;
    border-radius:30px;

}


	
div.imgswap:hover img {
	/*visibility:hidden;*/
	background-color:#666;
	border: #0F0;
	width:200px;
    height:80px;
   overflow:visible;
   transition: all 0.4s ease-in-out;
   position:relative;
   transition: opacity 0.5s 0s ease-in-out;
   opacity: 1;

}

div.imgswap-mini:hover img {
	/*visibility:hidden;*/
	background-color:#666;
	border: #0F0;
	width:200px;
    height:30px;
   overflow:visible;
   transition: all 0.4s ease-in-out;
   position:relative;
   transition: opacity 0.5s 0s ease-in-out;
   opacity: 1;

}





.third-effect .mask {
   opacity: 0;
   overflow:visible;
   border:100px solid rgba(0,0,0,0.7);
   box-sizing:border-box;
   transition: all 0.4s ease-in-out;
}

.third-effect a.info {
   position:relative;
   top:-10px; /* Center the link */
   opacity: 0;
   transition: opacity 0.5s 0s ease-in-out;
}

.third-effect:hover .mask {
   opacity: 1;
   border:100px solid rgba(0,0,0,0.7);
}

.third-effect:hover a.info {
   opacity:1;
   transition-delay: 0.3s;
}



/* Practicing image hover */

#both-contents-wrapper {
	background-image: url(../_images/tmp-bg-grey-noise.jpg);
	padding: 22px 0 0 0;
	border: 1px solid #b1aeae;
	border-bottom: 10px solid #00703C;
	min-height: 430px;
	margin: 15px 0 0;
	width: 958px;
	height: 100%;
	/*effects*/
	box-shadow: inset 0 0 0 1px #fff;
	-webkit-box-shadow: inset 0 0 0 1px #fff;
	border-radius: 6px;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	
	float: left;
}

/*------------------------------------------
STYLE GUIDE
------------------------------------------*/

/*TYPOGRAPHY & LINKS*/
h1 { /*SECTION TITLE-stylizes the title inside the box*/
	margin: 10px 4px 0 4px;
	color: #a1d884;
	font: 400 2.7em  "Arial", sans-serif;
	text-align: center;
	text-shadow: 0px 1px 0px #000;
}
h2 { /*SUBSECTION TITLE-stylizes the links below the SECTION TITLE, refers to the sections within this group*/
	color: #a1d884;
	font: 400 1.3em   "Arial", sans-serif;
}	
h3 { /*ARTICLE HEADING-stylizes the headings of articles inside the RIGHTCONTENT DIV*/
	color: #424242;
	font: bold 2em   "Arial", sans-serif;
}
h4 { /*ARTICLE SUBHEADING- stylizes subsequent subheadings of an article inside the RIGHTCONTENT DIV*/
	color: #5C5C5C;
	font: bold 1.5em   "Arial", sans-serif;
}
h5 { /*ARTICLE SUBHEADING- stylizes subsequent subheadings of an article inside the RIGHTCONTENT DIV*/
	color: #5C5C5C;
	font: bold 1.5em   "Arial", sans-serif;
	text-indent: 30px;
}
h6 { /*ARTICLE SUBHEADING- stylizes subsequent subheadings of an article inside the RIGHTCONTENT DIV*/
	color: #00703C;
	font: bold 1.5em   "Arial", sans-serif;
}
p {/*paragraph text in the right-content*/
	margin: 10px 0 5px 0;
	color: #5C5C5C;
	font: 1.3em   "Arial", sans-serif;
	line-height: 1.4em;
}
p.caption {
	color: #5C5C5C;
	font: 1.1em   "Arial", sans-serif
}
p.quote {
width: 60%;
margin: 5px 0 5px 100px;
display: inline-block;
border-left: dashed 1px #5C5C5C; 
background: #D9D9D9;
}

a { /*general, unless specified, links follow the following rules*/
	color: #5C5C5C;
	font: 1.2em Ms Reference Sans serif,   "Arial", sans-serif;
	text-decoration: none;
}
a:hover, a:visited {
	color: #00703C;
	text-decoration: underline;
}

/*IMAGES*/
#right-content img {
padding: 5px;
}
#right-content img.left {
float: left;
padding: 5px;
}
#right-content img.right {
float: right;
padding: 5px;
}
#right-content img.center {
display: block;
margin: auto;
padding: 5px;
}


/*TABLES*/
table {
margin: 15px auto;
border-bottom: 3px solid #5C5C5C;
}
table caption {
padding: 7px;
background: #D9D9D9;
border-bottom: 1px solid #5C5C5C;
color: #5C5C5C;
font: 1.3em   "Arial", sans-serif;
font-weight: bold;
line-height: 1.4em;
}
thead td {
font-weight: bold;
border-bottom: 1px dotted #5C5C5C;
}
td {
color: #5C5C5C;
font: 1.3em   "Arial", sans-serif;
line-height: 1.4em;
padding: 5px;
/* text-align: center; */
}
table tr:hover {
background: #a1d884;
}

/*LISTS*/
ol {
	font-family:   "Arial", sans-serif;
	/*list-style-position: !important;*/
	/* list-style-type: !important; */
	padding: 0 0 0 15px;
}
#right-content ul {
padding: 0 0 0 15px;
}
ol li, #right-content ul li {
	color: #5C5C5C;
	/*list-style-type: !important; */
	font: 1.3em   "Arial", sans-serif;
	line-height: 1.4em;
	
}
#right-content ul li {
	list-style-type: disc !important; 
	font-family:   "Arial", sans-serif;
	/*font-size: inherit;
   list-style-position: inside;*/
}
	
	#right-content ul li ul li {
		font-size: 12px;
	}

table tbody tr td ul li {
	list-style-type: disc !important;
	font-size: inherit !important;
}

/*OTHERS*/
dd  {/*paragraph text in the right-content*/
	margin: 10px 0 5px 0;
	color: #5C5C5C;
	font: 1.3em   "Arial", sans-serif;
	line-height: 1.4em;
}
dt { /*ARTICLE SUBHEADING- stylizes subsequent subheadings of an article inside the RIGHTCONTENT DIV*/
	color: #5C5C5C;
	font: bold 1.5em   "Arial", sans-serif;
}


/*------------------------------------------
ELEMENTS IN HEADER SECTION
------------------------------------------*/
/*---------------------for the general div*/
#header-section { 
/*wraps and positions the section that contains the header, intranet my lassale and search functions*/
	width: 960px;
	position: relative;
	padding: 10px 0 100px 0;
	left: 50%;
	margin: 0 0 0 -481px;
	z-index: 2;
}

/*---------------------HEADER bar itself and its links*/
#header { /*sets up the general properties of the header*/
	top: 42px;
	position: absolute;
	width: 960px;
	height: 60px;
	background: #014023 url(../_images/tmp-bg-green-noise.jpg);
	overflow: hidden;
	border: 1px solid #003f22;
	
	/*below is the height to adjust if links are added or subtracted: this is the height to input in the jquery script 
	height: 220px;*/
	/*effects*/
	-webkit-box-shadow: 0 5px 8px -3px #2d2d2d;
	-moz-box-shadow: 0 5px 8px -3px #2d2d2d;
	box-shadow: 0 5px 8px -3px #2d2d2d;
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;	
}
#header ul { /*arranges the lists in columns horizontally*/
	height: 100%;
	border-right: 1px dotted #b1aeae;
	float: left;
}
#header ul li { /*sets up the normal height of the links & sublinks in the header*/
	width: 150px;
	height: 21px;
	text-align: center;
}
#header #first-column li { /*makes the first list, the homepage column wider than the other columns*/
	width: 356px;
}
#header ul li.first { /*overrides the normal CSS to make the 5 main NAV links taller & with different color*/
	height: 60px;
	background-image:  url(../_images/tmp-bg-darkgreen-noise.jpg);
}
#header .end-nav {/*eliminates the right border on this last column*/
	border-right: none;
}
#hide-text { /*hides the DLSU Text on the home button*/
	text-indent: -9999px; 
	white-space: nowrap;
}

#home-button a { /*shows the GIF and DLSU logo*/
	background-image: url(../_images/tmp-bg-home-page.gif);
}
#header ul li a { /*sets the dimension of the links, esp. the sublinks*/
	width: 100%;
	padding: 3px 0 3px 5px;
	color: #C9C9C9;
	display: block;
	text-align: left;	
}
#header ul li.first a { /*overrides the standard link dimension for the 5 main NAV links*/
	padding: 22px 0 23px 0;
	text-align: center;
}
#header ul li a:hover {
	color: #a1d884;
	text-decoration: underline;
}
#header ul li.first a:hover {
/*can this setting be just applied elswhere or combined with some other style?*/
	text-decoration: none;
}

/*---------------------Intranet and My.Lasalle Buttons*/
#intranet-mylasalle {
margin: 0 0 8px 0;
float: left;
-webkit-box-shadow: 0 5px 8px -5px #2d2d2d;
-moz-box-shadow: 0 5px 8px -5px #2d2d2d;
box-shadow: 0 5px 8px -5px #2d2d2d;
}
#intranet-mylasalle li {
	width: 100px;
	border: 1px solid #b1aeae;
	text-align: center;
	float: left;

	/*effects*/
	box-shadow: inset 0 0 0 1px #fff;
	-moz-box-shadow: inset 0 0 0 1px #fff;
	-webkit-box-shadow: inset 0 0 0 1px #fff;
}
#intranet-mylasalle li a {
	padding: 4px 0;
	display: block;
}
#intranet-mylasalle li a:hover {
	color: #FFF;
	background: #C9C9C9 url(../_images/tmp-bg-darkgrey-noise.jpg);
}

/*--------------------- Search*/
#header-section form {
float: right;
height: 23px;
width: 260px;
border: 1px solid #00703C;
background: #00703C;
/*effects*/
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
-webkit-box-shadow: 0 5px 8px -5px #2d2d2d;
-moz-box-shadow: 0 5px 8px -5px #2d2d2d;
box-shadow: 0 5px 8px -5px #2d2d2d;	
}
#search #text-input {
border-style: none;
height: 21px;
color: #5C5C5C;
text-align: left;
text-indent: 10px;
float: left;
width: 75%;
/*effects*/
border-radius:2px 0 0 2px;
-moz-border-radius: 2px 0 0 2px;
-webkit-border-radius: 2px 0 0 2px;
}
#search #btn {
width: 24%;
border-style: none;
float: right;
background: none;
color: #fff;
/*effects*/
border-radius:0 11px 11px 0;
-moz-border-radius: 0 11px 11px 0;
-webkit-border-radius: 0 11px 11px 0;
padding-top: 4px;
}


/*------------------------------------------
ELEMENTS IN IMAGE-HOLDER SECTION
------------------------------------------*/
.image-holder {
	border: 1px solid #b1aeae;
	height: 400px;
	margin: 0;
	overflow: hidden;
	width: 958px;
	/*effects*/
	box-shadow: inset 0 0 0 1px #fff;
	-webkit-box-shadow: inset 0 0 0 1px #fff;
	border-radius: 6px;
	-moz-border-radius: 6px;
}
.image-holder > div {
    position: absolute;
    width: inherit;
    height: inherit;
	overflow: hidden;
	/*effects*/
	box-shadow: inset 0 0 0 1px #fff;
	-webkit-box-shadow: inset 0 0 0 1px #fff;
	border-radius: 6px;
	-moz-border-radius: 6px;
}
.image-holder div a {
/*makes the whole image area clickable*/
	width: inherit;
    height: 400px;
	text-decoration:none;
	border-style:none;
	display: block;
}


/*note: photos are placed here as backgrounds. This is for the rounded corners to appear. Please see the HTML if you want the images changed. Slideshow function is only on the home page as of now*/

/*------------------------------------------
ELEMENTS IN LEFT CONTENT
------------------------------------------*/
/*--------------------- Left Content general preferences*/
#left-content {
	float: left;
	width: 256px;
	min-height: 500px;
	height: 100%;
	position: relative;
	top: -50px;
	margin: 0 0 0 10px;
/*
	margin: 0 40px -30px 0;
	float: left;
	position: relative;
	left: 10px;
	top: -50px;
	min-height: 500px;
*/
}

/*---------------------BOX*/
#box {
	min-height: 60px;
	background: url(../_images/tmp-bg-darkgreen-noise.jpg);
	border: 3px solid #fff;
	margin: 0 0 20px 0;
	/*effects*/
	-webkit-box-shadow: 0 8px 6px -6px #888;
	-moz-box-shadow: 0 8px 6px -6px #888;
	box-shadow: 0 8px 6px -6px #888;
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
}
#box h1 {
	padding: 2px 0 10px 0;
	border-bottom: 1px dashed #fff;
	display: block;
}

/*--------------------- INTERNAL list*/
#internal-links ul {
/*
	margin: 0;
	padding: 0;
	list-style: none;
*/
}
#internal-links li {
	border-bottom: 1px solid #074f28;
}
#internal-links li#last {
	border: none;
}

#internal-links ul li a {
	width: inherit;
	padding: 8px 10px;
	color: #C9C9C9; 
	text-align: left;
	display: block;
}
#internal-links li a:hover {
	text-decoration: underline;
	color: #a1d884;
	background: #00703C;
}

/*--------------------- EXTERNAL list*/
#other-links ul {
/*	margin: 10px 0 8px;*/
}
/* 2012-11-28 added 'ul' in the middle of -links & li to prevent style to apply to ol li in the left content*/
#other-links ul li {
	border: 1px solid #b1aeae;
	border-bottom: none;
	/*effects*/
	box-shadow: inset 0 0 0 1px #fff;
	-moz-box-shadow: inset 0 0 0 1px #fff;
	-webkit-box-shadow: inset 0 0 0 1px #fff;
}
#other-links li#first {
	/*effects*/
	border-radius: 3px 3px 0 0;
	-moz-border-radius: 3px 3px 0 0;
	-webkit-border-radius: 3px 3px 0 0;
}
#other-links li#last {
	border: 1px solid #b1aeae;
	/*effects*/
	border-radius: 0 0 3px 3px;
	-moz-border-radius: 0 0 3px 3px;
	-webkit-border-radius: 0 0 3px 3px;
}

#other-links li a {
	padding: 8px 10px;
	text-decoration: none;
	display: block;
}
#other-links li a:hover {
	color: #fff;
	text-decoration: underline;
	background-image: url(../_images/tmp-bg-darkgrey-noise.jpg);

}
#other-links .caption {
text-align: center;
}

#left-content span {
	color: #5C5C5C;
	font: 1.1em   "Arial", sans-serif
}


/*---------------------INFORMATION */ 
/*details such as contact, procedures, reminders, downloads located within the left-content*/
/*kinds of info*/
.info-contact {
margin: 10px 0 0 0;
border-left: 6px solid #FFFF00;
width: 95%;
background: #D9D9D9;
/*padding: 5px 0 7px 10px;*/
}
.info-procedure {
margin: 10px 0 0 0;
border-left: 6px solid #FFA500;
width: 95%;
background: #D9D9D9;
/*padding: 5px 0 7px 10px;*/
}
.info-reminder {
margin: 10px 0 0 0;
border-left: 6px solid #FF4500;
width: 95%;
background: #D9D9D9;
/*padding: 5px 0 7px 10px;*/
}
.info-downloads {
margin: 10px 0 0 0;
border-left: 6px solid #4CA0B3;
width: 95%;
background: #D9D9D9;
/*padding: 5px 0 7px 10px;*/
}
/*enables a green hue when hovered*/
.info-contact:hover,
.info-procedure:hover,
.info-reminder:hover,
.info-downloads:hover {
background: #a1d884;
}
/*stylizes the title of the info*/
.info-contact .info-title {
display: block;
font: 1.3em   "Arial", sans-serif;
font-weight: bold;
margin: 0;
padding: 5px 0 7px 10px;
border-bottom: 1px dotted #FFFF00;
}
.info-procedure .info-title {
display: block;
font: 1.3em   "Arial", sans-serif;
font-weight: bold;
margin: 0;
padding: 5px 0 7px 10px;
border-bottom: 1px dotted #FFA500;
}
.info-reminder .info-title {
display: block;
font: 1.3em   "Arial", sans-serif;
font-weight: bold;
margin: 0;
padding: 5px 0 7px 10px;
border-bottom: 1px dotted #FF4500;
}
.info-downloads .info-title {
display: block;
font: 1.3em   "Arial", sans-serif;
font-weight: bold;
margin: 0;
padding: 5px 0 7px 10px;
border-bottom: 1px dotted #4CA0B3;
}
/*other tweaks to the style of text inside*/
.info-detail {
margin: 0;
padding: 5px 2px 7px 15px;
}
.info-detail a {
	font: inherit;
	color: #00703C;
}
.info-downloads a {
/* 2012-09-05 to be redited to have ol in mind*/
	font: inherit;
	color: #00703C;
}



/*------------------------------------------
ELEMENTS IN RIGHT CONTENT
------------------------------------------*/
/*--------------------- Right Content general preferences*/
#right-content {
width: 672px;
float: left;
height: 100%;
padding: 0 5px 20px 15px;
display: overflow;
/*width: 97%;*/
}
/*RIGHT CONTENT modifications appended to the styleguide*/
#right-content h3,
#right-content h4,
#right-content h5,
#right-content h6,
#right-content dt {
padding: 15px 0 0 0;
}
#right-content p, dd {

}
#right-content p.quote {
padding: 10px;
}
#right-content a {
	font: inherit;
	color: #00703C;
}



/*------------------------------------------
FOOTER
------------------------------------------*/
#footer {
padding: 10px 0 15px 5px;
	width: 958px;
	height: 40px;
	margin: 28px 0 0 0;
	clear:both;
}
#footer p, #footer a {
	color: #5C5C5C;
	font: 1.1em   "Arial", sans-serif
}
#footer a:hover {
	color: #00703C;
	text-decoration: underline;
}


/*------------------------------------------
HOME ONLY ELEMENTS
------------------------------------------*/
/*---------------------FOR THE FOUR BOXES THAT SERVE AS FEATURED LINKS/ARTICLES/EVENTS*/
.box-home {
/*for the four boxes for other news or features beside the main*/
	width: 220px;
	height: 150px;
	margin: 0 5px;
	border: 1px solid #fff;
	float: left;
	overflow: hidden;
/*effects*/
	-webkit-box-shadow: 0 8px 6px -6px #888;
	-moz-box-shadow: 0 8px 6px -6px #888;
	box-shadow: 0 8px 6px -6px #888;
	border-radius: 3px;
	-moz-border-radius: 3px;
}
.box-home#first { 
	margin-left: 20px;
}
.box-home a img {
	border: none;
 	text-decoration: none;
}

/*for LIBRARIES*/
.box-home-lib {
/*for the four boxes for other news or features beside the main*/
	width: 159px;
	height: 30px;
	margin: 0 5px;
	border: 1px solid #fff;
	float: left;
	overflow: hidden;
/*effects*/
	-webkit-box-shadow: 0 8px 6px -6px #888;
	-moz-box-shadow: 0 8px 6px -6px #888;
	box-shadow: 0 8px 6px -6px #888;
	border-radius: 3px;
	-moz-border-radius: 3px;
}
.box-home-lib#first { 
	margin-left: 55px;
}
.box-home-lib a img {
	border: none;
 	text-decoration: none;
}
.discovery {
width: 650px;
overflow: hidden;
background: #003f22;
margin:auto;
}
/*END LIBRARIES BOX*/



/*for give website*/
.box-home-give {
/*for the three boxes for give website*/
	width: 285px;
	height: 258px;
	margin: 0 5px;
	border: 1px solid #fff;
	float: left;
	overflow: auto;
/*effects*/
	-webkit-box-shadow: 0 8px 6px -6px #888;
	-moz-box-shadow: 0 8px 6px -6px #888;
	box-shadow: 0 8px 6px -6px #888;
	border-radius: 3px;
	-moz-border-radius: 3px;
}
.box-home-give#first { 
	margin-left: 20px;
}
.box-home-give a img {
	border: none;
 	text-decoration: none;
}
/*for give website testimonial*/
.box-home-testi {
/*for the three boxes for give website*/
	width: 640px;
	height: 350px;
	margin: 0 5px;
	border: 1px solid #fff;
	float: left;
	overflow: auto;
/*effects*/
	-webkit-box-shadow: 0 8px 6px -6px #888;
	-moz-box-shadow: 0 8px 6px -6px #888;
	box-shadow: 0 8px 6px -6px #888;
	border-radius: 3px;
	-moz-border-radius: 3px;
}
.box-home-testi#first { 
	margin-left: 20px;
}
.box-home-testi a img {
	border: none;
 	text-decoration: none;
}
#both-contents-wrapper-give {
	background-image: url(../_images/tmp-bg-grey-noise.jpg);
	padding: 22px 0 0 0;
	border: 1px solid #b1aeae;
	border-bottom: 10px solid #00703C;
	min-height: 300px;
	margin: 15px 0 0;
	width: 958px;
	height: 80%;
	/*effects*/
	box-shadow: inset 0 0 0 1px #fff;
	-webkit-box-shadow: inset 0 0 0 1px #fff;
	border-radius: 6px;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	
	float: left;
}


/*for IS website*/
.box-home-is {
/*for the three boxes for give website*/
	width: 285px;
	height: 258px;
	margin: 0 5px;
	border: 1px solid #fff;
	float: left;
	overflow: auto;
/*effects*/
	-webkit-box-shadow: 0 8px 6px -6px #888;
	-moz-box-shadow: 0 8px 6px -6px #888;
	box-shadow: 0 8px 6px -6px #888;
	border-radius: 3px;
	-moz-border-radius: 3px;
}
.box-home-is#first { 
	margin-left: 20px;
}
.box-home-is a img {
	border: none;
 	text-decoration: none;
}
/*for give website testimonial*/
.box-home-testi {
/*for the three boxes for give website*/
	width: 640px;
	height: 350px;
	margin: 0 5px;
	border: 1px solid #fff;
	float: left;
	overflow: auto;
/*effects*/
	-webkit-box-shadow: 0 8px 6px -6px #888;
	-moz-box-shadow: 0 8px 6px -6px #888;
	box-shadow: 0 8px 6px -6px #888;
	border-radius: 3px;
	-moz-border-radius: 3px;
}
.box-home-testi#first { 
	margin-left: 20px;
}
.box-home-testi a img {
	border: none;
 	text-decoration: none;
}
#both-contents-wrapper-is {
	background-image: url(../_images/tmp-bg-grey-noise.jpg);
	padding: 22px 0 0 0;
	border: 1px solid #b1aeae;
	border-bottom: 10px solid #00703C;
	min-height: 300px;
	margin: 15px 0 0;
	width: 958px;
	height: 80%;
	/*effects*/
	box-shadow: inset 0 0 0 1px #fff;
	-webkit-box-shadow: inset 0 0 0 1px #fff;
	border-radius: 6px;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	
	float: left;
}




/*for COSCA website*/
.box-home-cosca {
/*for the three boxes for give website*/
	width: 210px;
	height: 320px;
	margin: 0 3px;
	border: 1px solid #fff;
	float: left;
	overflow: auto;
/*effects*/
	-webkit-box-shadow: 0 8px 6px -6px #888;
	-moz-box-shadow: 0 8px 6px -6px #888;
	box-shadow: 0 8px 6px -6px #888;
	border-radius: 3px;
	-moz-border-radius: 3px;
}
.box-home-cosca#first { 
	margin-left: 20px;
}
.box-home-cosca a img {
	border: none;
 	text-decoration: none;
}


/*for SHORE website*/
.box-home-shore {
/*for the four boxes for shore website*/
	width: 212px;
	height: 353px;
	margin: 0 3px;
	border: 1px solid #fff;
	float: left;
	overflow: auto;
/*effects*/
	-webkit-box-shadow: 0 8px 6px -6px #888;
	-moz-box-shadow: 0 8px 6px -6px #888;
	box-shadow: 0 8px 6px -6px #888;
	border-radius: 2px;
	-moz-border-radius: 3px;
}
.box-home-shore#first { 
	margin-left: 20px;
}
.box-home-shore a img {
	border: none;
 	text-decoration: none;
}
#both-contents-wrapper-shore {
	background-image: url(../_images/tmp-bg-grey-noise.jpg);
	padding: 22px 0 0 0;
	border: 1px solid #b1aeae;
	border-bottom: 10px solid #00703C;
	min-height: 300px;
	margin: 15px 0 0;
	width: 958px;
	height: 80%;
	/*effects*/
	box-shadow: inset 0 0 0 1px #fff;
	-webkit-box-shadow: inset 0 0 0 1px #fff;
	border-radius: 6px;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	
	float: left;
}





/*for lspo website*/
.box-home-lspo {
/*for the three boxes for give website*/
	width: 210px;
	height: 290px;
	margin: 0 3px;
	border: 1px solid #fff;
	float: left;
	overflow: auto;
/*effects*/
	-webkit-box-shadow: 0 8px 6px -6px #888;
	-moz-box-shadow: 0 8px 6px -6px #888;
	box-shadow: 0 8px 6px -6px #888;
	border-radius: 3px;
	-moz-border-radius: 3px;
}
.box-home-lspo#first { 
	margin-left: 20px;
}
.box-home-lspo a img {
	border: none;
 	text-decoration: none;
}
/*for give website testimonial*/
.box-home-testi {
	width: 640px;
	height: 350px;
	margin: 0 5px;
	border: 1px solid #fff;
	float: left;
	overflow: auto;
/*effects*/
	-webkit-box-shadow: 0 8px 6px -6px #888;
	-moz-box-shadow: 0 8px 6px -6px #888;
	box-shadow: 0 8px 6px -6px #888;
	border-radius: 3px;
	-moz-border-radius: 3px;
}
.box-home-testi#first { 
	margin-left: 20px;
}
.box-home-testi a img {
	border: none;
 	text-decoration: none;
}
#both-contents-wrapper-cosca {
	background-image: url(../_images/tmp-bg-grey-noise.jpg);
	padding: 22px 0 0 0;
	border: 1px solid #b1aeae;
	border-bottom: 10px solid #00703C;
	min-height: 300px;
	margin: 15px 0 0;
	width: 958px;
	height: 80%;
	/*effects*/
	box-shadow: inset 0 0 0 1px #fff;
	-webkit-box-shadow: inset 0 0 0 1px #fff;
	border-radius: 6px;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	
	float: left;
}

#both-contents-wrapper-lspo {
	background-image: url(../_images/tmp-bg-grey-noise.jpg);
	padding: 22px 0 0 0;
	border: 1px solid #b1aeae;
	border-bottom: 10px solid #00703C;
	min-height: 300px;
	margin: 15px 0 0;
	width: 958px;
	height: 80%;
	/*effects*/
	box-shadow: inset 0 0 0 1px #fff;
	-webkit-box-shadow: inset 0 0 0 1px #fff;
	border-radius: 6px;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	
	float: left;
}
/*------------REGULAR CENTER BOX----------*/
.center-box {
	width: 285px;
	height: 110px;
	margin: 0 5px;
	border: 1px solid #fff;
	float: left;
	overflow: auto;
/*effects*/
	-webkit-box-shadow: 0 8px 6px -6px #888;
	-moz-box-shadow: 0 8px 6px -6px #888;
	box-shadow: 0 8px 6px -6px #888;
	border-radius: 3px;
	-moz-border-radius: 3px;
}
}
.center-box#first { 
	margin-left: 50px;
}
.center-box a img {
	border: none;
 	text-decoration: none;
}
/*---------------------FOR more-links*/
#more-links {
	width: 958px;
	height: 245px;
	margin: 3px 0 0 2px;
	float: left;
	

}
#more-links #first-heading {
/*makes the border of the first div disappear*/
	border: none;
}
.section {
	width: 190px;
	height: 275px;
	border-left: 1px dotted #C9C9C9;
	float: left;
	overflow: hidden;
}
.section > p {
	padding: 5px 0;
	background: url(/_assets/_images/tmp-bg-grey-noise.jpg);
	border-bottom: 1px dotted #C9C9C9;
	border-top: 1px dotted #C9C9C9;
	text-align: center;
	font-weight: bold;
}
.section ul li a {
	width: inherit;
	padding: 8px 10px 8px 25px;
	text-decoration: none;
	text-align: left;
	display: block;
}
.section ul li a:hover {
	color: green;
	text-decoration: underline;
	background-image: url(/_assets/_images/tmp-bg-darkgrey-noise.jpg);
	width: inherit;
}
.section ul li img {
	border: none;
 	text-decoration: none;
}
/*Image holder should be different here*/

.image-holder-home {
	border: 1px solid #b1aeae;
	height: 400px;
	margin: 0;
	overflow: hidden;
	width: 958px;
	/*effects*/
	box-shadow: inset 0 0 0 1px #fff;
	-webkit-box-shadow: inset 0 0 0 1px #fff;
	border-radius: 6px;
	-moz-border-radius: 6px;
}
.image-holder-home > div {
    position: absolute;
    width: inherit;
    height: inherit;
	overflow:hidden;
	/*effects*/
	box-shadow: inset 0 0 0 1px #fff;
	-webkit-box-shadow: inset 0 0 0 1px #fff;
	border-radius: 6px;
	-moz-border-radius: 6px;
}
.image-holder-home div a {
/*makes the whole image area clickable*/
	width: inherit;
    height: 400px;
	text-decoration:none;
	border-style:none;
	display: block;
}
/*note: photos are placed here as backgrounds. This is for the rounded corners to appear. Please see the HTML if you want the images changed.*/

.image-holder-home {
	border: 1px solid #b1aeae;
	height: 400px;
	margin: 0;
	overflow: hidden;
	width: 958px;
	/*effects*/
	box-shadow: inset 0 0 0 1px #fff;
	-webkit-box-shadow: inset 0 0 0 1px #fff;
	border-radius: 6px;
	-moz-border-radius: 6px;
}
.image-holder-home > .image-banner {
    position: absolute;
    width: inherit;
    height: inherit;
	overflow:hidden;
	/*effects*/
	box-shadow: inset 0 0 0 1px #fff;
	-webkit-box-shadow: inset 0 0 0 1px #fff;
	border-radius: 6px;
	-moz-border-radius: 6px;
}
.image-holder-home .image-banner a {
/*makes the whole image area clickable*/
	width: inherit;
    height: 400px;
	text-decoration:none;
	border-style:none;
	display: block;
}