@charset "utf-8";
/* CSS Document */

/*==========================================
	Common site elements
==========================================*/

body {
	font-family:Arial, Helvetica, sans-serif;
	font-size:13px;
	margin:0;
	background-color:#757575;
}

img {
	border:0;
}

.clear-both {
	clear:both;
}

#wrapper {
	background:url(images/wrapper-background.jpg) top left no-repeat;
	background-color:#e5e5e5;
	width:880px;
	min-height:900px;
	margin:0 auto;
	margin-bottom:0px;
}

#top-vertical-line {
	position:absolute;
	width:120px;
	height:155px;
	top:15px;
	border-right:1px solid #009;
	z-index:1;
}

#middle-vertical-line {
	position:absolute;
	width:120px;
	height:18px;
	border-right:1px solid #fff;
	top:160px;
	z-index:1;
}

#bottom-vertical-line {
	position:absolute;
	width:120px;
	height:120px;
	border-right:1px solid #fff;
	margin-top:-5px;
	z-index:1;
}


/*originally navbar was relative - but won't work b/c other elements
must be offset just as much. this makes dynamic vertical expansion
impossible as longer elements will cover items, like #footer.  
Instead, make the offsets using the margin property.*/
#navbar {
	margin-left:-2px;
	padding-top:135px;
	padding-bottom:30px;
	width:900px;
	z-index:2;
}

#navbar ul {
	margin:0;
	padding:0;
	list-style:none;
	position:absolute;
	z-index:2;
}

#navbar ul li {
	float:left;
	border:1px 0 1px 1px solid #065fa3; /*change colors depending on scheme of site*/
	border-top: 1px solid #065fa3;
	border-right: 1px solid #065fa3;
	border-bottom: 1px solid #065fa3;
}

#navbar ul li#first-menu {
	border-left: 1px solid #065fa3; /*change color to mimic above depending on scheme of site*/
}

#navbar ul a {
	display:block;
	width:125px;       /*width and height need to be set per website if nav elements differ */
	line-height:27px;
	text-decoration:none;
	color:#065fa3; /*change depending on color scheme*/
	font-weight:bold;
	font-size:12px;
	background:url(images/main-nav-off-bg.jpg) no-repeat;
	text-align:center;
}

#navbar ul a:hover {
	background:url(images/main-nav-on-bg.jpg) no-repeat;
	color:#fff;
}

/*css to make current page stay HOVER color (active)*/ /*why did this happen? why do i need the extra css to make it work?*/
.home-page #navbar .home a,
.aboutus #navbar .aboutus a,
.facilities #navbar .facilities a,
.sustainability #navbar .sustainability a,
.events #navbar .events a,
.articles #navbar .articles a,
.handbook #navbar .handbook a,
.contactus #navbar .contactus a {
	background:url(images/main-nav-on-bg.jpg) no-repeat;
	color:#fff;
}

#footer {
	
}

#footer ul#facilities {
	position:relative;
	left:75px;
}

#footer ul li {
	color:#006bb9;
	list-style-type:square;
	list-style-position:outside;
}

#footer-nav {
	text-align:center;
	padding-top:0px;
}

#footer-nav a {
	color:#757575;
}

#footer-nav ul li {
	display:inline;
	list-style:none;
}

#content-background {
	background:url(images/bg-gradient.jpg) bottom left repeat-x;
	background-color:#126bb5;
	padding:10px;
	margin:5px;
}

/*==========================================
	Home-page specific elements.  These hook
	into the BODY id to determin layout
	depending on the page.
==========================================*/



#home-page #content-wrapper {
	background-color:#fff;
	padding:10px;
}

#home-page #home-left-box {
	background-color:#e8ebed;
	border-right:1px solid #065fa3;
	min-height:390px;
	width:290px;
	float:left;
	padding:10px;
	font-size:11px;
	z-index:1;
}

#home-page #home-left-box p.top-p {
	margin:0;
}

#home-page #home-right-box {
	width:495px;
	min-height:395px;
	float:right;
}

#home-page #home-right-box #project-spotlight-img-div {
	
}

#home-page #home-handbooks img {
	position:relative;
	top:10px;
	left:-12px;
}
/*============================
	End home page specific
	layout.
============================*/


/*==========================================
	SUB-page specific elements.  These hook
	into the BODY id to determin layout
	depending on the page.
==========================================*/

#sub-page #left-nav-bar {
	float:left;
	width:120px;
}

.project_title a {
	color:#fff;
	text-decoration:none;
	font-size:13px;
	font-weight:bold;
}

.project_name a {
	font-size:11px;
	font-weight:bold;
	text-decoration:none;
}

#sub-page #left-nav-bar ul {
	margin:0;
	padding:0;
	list-style:none;
}

#sub-page #content-wrapper {
	width:708px;
	min-height:450px;
	float:right;
	background-color:#fff;
	padding:10px;
}

#sub-page #main-picture {
	width:567px;
	float:left;
}

#sub-page #thumbnails {
	float:right;
	margin-left:10px;
	width:120px;
}

#sub-page #thumbnails ul {
	padding:0;
	margin:0;
	list-style:none;
}

#sub-page #thumbnails ul li {
	padding-bottom:10px;
}

#sub-page #description {
	clear:both;
	padding-top:10px;
}

/*left projects navbar styling*/
.show {
	border-top:1px solid #FFFFFF;
	background-color:#a5abca;
	border-bottom:1px solid #FFFFFF;
	width:90px;
	padding:10px 0 10px 0;
	margin-top:5px;
	margin-bottom:5px;
}

.show li {
	list-style:none;
	font-size:11px;
	padding:7px 3px 0;
	
}

.show li a {
	color:#666666;
	font-weight:bold;
	text-decoration:none;
}

.hide {
	display:none;
	margin-top:5px;
}

.project_title {
	color:#FFFFFF;
	font-weight:bold;
	text-decoration:none;
	padding-top:20px;
	display:block;
	text-transform:uppercase;
}


/******************************** sliding menu ***********************************/



/******************************** sliding menu ***********************************/