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

/* IE8 gets the html class, "ie8". IE9+ gets the class, "ie9".  This adjusts the styling for these browsers. */


html {max-height:1200px;}
	 
body {
	font: 62.5% /* Arial, Helvetica, sans-serif;*/  Verdana, Geneva, sans-serif; 
	margin:0 auto;
	padding: 0;
	color:#333;
	height:auto;
} 


/* -------------------------------------------------------- Container -------------------------------------------------- */

#container { /* container keeps everything in the main area where it should be */
	position:relative;
	width:954px;
	border:0; 
	height:auto;
	min-height:900px;
/*	max-height:1350px; */
/*	min-height: 700px; */
	margin-top:0;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:0;
	padding-bottom:0;
	text-align:left;
}

/* need this breadcrumb container position relative to keep the breadcrumbs on top of the photo with z-index while still using float on the newBreadcrumbs div inside it (so that it resizes based on content) */


#breadcrumbContainer {display: block; position:relative; z-index:60000; width:auto; top: -5px; right:170px; } 
.ie8 #breadcrumbContainer {top: -3px;} 
.ie9 #breadcrumbContainer {top: -3px;}

#newBreadcrumbs {
	float:right;
	overflow:visible;
	min-width: 100px; 
	max-width: 1100px;
	text-align:right;
	padding:8px;
	font-family:Verdana, Geneva, sans-serif;
	font-size:10px;
	color:#fff;
	z-index:100;
}

#breadcrumbContainer #newBreadcrumbs a {color:#fff;}
#breadcrumbContainer #newBreadcrumbs a:visited {color:#fff;}

#newBreadcrumbs a {
	color:#666;
	text-decoration:underline;
}

#newBreadcrumbs a:visited {
	color:#666;
}

#newBreadcrumbs a:hover {
	color:#339;
}

/* ----------------------------------------------------------- Content -------------------------------------------------------- */


h1 {
	font-family:"Times New Roman", Times, serif;
	font-size:18pt; 
	color:#fff;
	line-height:22pt;
	margin: 10px 0 10px 0;
	z-index:2;
	padding: 24px 0 0 12px;
	}

.ie8 h1 {padding: 24px 0 0 12px;}
.ie9 h1 {padding: 24px 0 0 12px;}

h2 {
	color:#174c6b;
	position:absolute;
	top: -4px;
	left: 10px;
	font-size: 13px;
	font-weight:normal;
}

.ie8 h2 {top: -6px;}
.ie9 h2 {top: -6px;}

h2 a {color:#174c6b;}
h2 a:visited {color:#174c6b;}

#leftContent { /* main content goes in here */
	position:relative;
	top:0;
	left:0;
	width: 730px;
	height:auto;
	text-align:left;
	padding-bottom:30px;
}
.ie8 #leftContent {top: 4px; }
.ie9 #leftContent {top: 4px; }

#leftContent #h1image { /* the div containing the banner image on the top of the page and the h1 text */
	position: relative;
	top:-6px;
	left:-2px;
	background-image:url(/bridge/abc/images/indexbg.jpg);
	background-position:0 0;
	background-repeat:no-repeat;
	background-attachment:scroll;
	width: 960px;
	height: 179px;
/*	old image:
	width:960px;
	height:170px;
	z-index:1;
	background-image:url(/bridge/abc/images/indexbannerimg.jpg);
	background-position: 0 0;
	background-repeat:no-repeat;
	background-attachment:scroll; */
	margin-bottom:10px;
}

.ie8 #leftContent #h1image { top:-7px;}
.ie9 #leftContent #h1image { top:-7px;}

#leftContent p {
	font-size: 1.2em; 
}

#leftContent ul.columnList {
	display:inline;
	overflow:visible;
	position:relative;
	top: 10px;
	left:0;
	width:730px; /* should match width of #leftContent */
} 

#leftContent ul.columnList li {
	list-style:none; 
	float:left; 
	text-align:center;
	margin: 10px 10px -10px 3px; /* aligns the text boxes. the first number moves them down to make room for the breadcrumbs. the third number is negative to bump the text below the unordered list higher. */
	padding: 0 0 5px 3px;  
/*	width: 120px; */
	height:auto;
	min-height:190px; 
	overflow:visible;
	border-left: 1px solid #d5d5d5;
} 

#leftContent ul.columnList li.narrow {width: 138px; }

#leftContent ul.columnList li.wide {width:270px; }

.ie8 .rightColumn {margin-top:-10px!important }

#leftContent ul.columnList li.wide h3 {width:auto; text-align:center; }

#leftContent ul.columnList li img { 
}

#leftContent .columnToppers {
	width:114px; 
	height:92px; 
	margin-left:auto; 
	margin-right:auto;
	display:block;
	}

#leftContent ul.columnList li h3 {
	display:block;
	position:relative;
	font-size:1.6em;
	font-weight:normal;
	color:#000;/*#464646;;  #333; */
	vertical-align:bottom;
	text-align:center;
	height:auto;
	min-height:70px;
	width:140px;
	z-index:10;
	/* note: the H3 text is positioned individually for each column (by ID name) below */
	left:auto;
	margin:5px 1px -40px 1px;
} 


#leftContent ul.columnList li h3 a {
/*	text-decoration:underline;
	color:#464646; */
	text-decoration:none;
	color:#103C6A;
	padding-bottom: 1px;
}

#leftContent ul.columnList li h3 a:hover { text-decoration:underline; color:#FF6600; /*border-bottom: 1px solid #006;text-decoration:none; */ }

/* Position the H3 text for each column here: */

#h3First {top:-5px; }
#h3Geotech {top: 6px;}
#h3Structural {top:6px;}

#leftContent ul.columnList li p {
	z-index:10;
	margin-top:10px;
	color:#464646; 
	font-size: 1.1em; 
	text-align:left;
	margin-left:10px;

}

#leftContent ul.columnList li a {
/*	color:#464646;  */
	text-decoration:underline;
}


#leftContent ul.columnList li a:visited {
/*	color:#464646;  */
}


#leftContent ul.columnList li a:hover {
	color:#006;
	text-decoration:underline;
	}

#leftContent ul.columnList li ul { /* sublist */
	display:inline;
	overflow:visible;
	margin-left: 2px;
	text-align:left;
}

#leftContent ul.columnList li ul li { /* sublist */
	list-style:none; 
	float:left; 
	text-align:left;
	border-left:none;
	border-right: 1px solid #d5d5d5; 
	margin: 2px 5px; 
	font-size: 1.3em;
	min-height:65px;
	height:auto;
	width:110px;
	background-position: 0 62px; /* moves the border background image that is declared up in ul li (the parent list) */
	padding-left: 5px;
	padding-right: 5px;
}

#leftContent ul.columnList li ul li:first-child {
	padding-right: 12px; }

img.firstCol { /* image in the first sublist */
	padding: 0 5px 0 10px;
}

#leftContent ul.columnList li ul li:last-child { /* last item in the sublist (IE 7 doesn't recognize this!) */
	list-style:none; 
	float:left; 
	border-left:none;
	border-right:none;
}

#leftContent ul.columnList li ul li.lastItem { /* need this class for the last item in a sublist to stop right border from appearing. You need this because IE7 does not support the last-child element */
	color:#464646;
	border-right:none!important
}

.ie8 #leftContent ul.columnList li ul li.lastItem {margin-top:-10px;} /* bumps up the text on the right side of column2 and column3. */

#leftContent ul.columnList li ul li h3{ /* h3 in the sublists, example "Foundation Walls and Elements" "Rapid Embankment Construction" */
	font-size:1em;
	margin:5px 0 -20px -5px; 
	padding: 0 0 5px 0;
	display:inline-block;
	width:auto;
	overflow:visible;
}

#leftContent ul.columnList li ul li h3 a {	border-bottom:none!important; 	text-decoration:none;
	color:#103C6A; padding-bottom:0;}

#leftContent ul.columnList li ul li h3 a:hover { text-decoration:underline; color:#FF6600; }

#leftContent ul.columnList li ul li hr {position: relative; top: -10px; left:0; height:1px; width:100%; color:#999;} /* put a line above the first paragraph item */

#leftContent ul.columnList li ul li p { /* paragraph text in the sublist */
	font-size:0.8em;
	margin-left:0;

}

.belowColumns { /* use this class to get content to go below the columns in Firefox. */
	padding-top:20px; /* separates from the mod date, which is above it */
	clear:both;
}

.belowColumns a, .belowColumns a:visited {color:#339; text-decoration:none;}
.belowColumns a:hover {color:#03C; text-decoration:underline;}


#leftContent h4 {
	font-size:1.6em;
	font-weight:bold;
/*	font-style:italic; */
	color:#333;
}

#leftContent .contentAfterList ul li {font-size: 1.2em;} /* makes the ul a normal font size */
#leftContent .contentAfterList ul ul li {margin-left:-25px; } /* makes teh sublists normal font size and moves the bullets left */

#leftContent .contentAfterList ul.noBullet {list-style:none;}

/* ************************************************************ right nav ****************************************************** */

#rightNav { /* the right side column */
	position:absolute;
	top: 180px;
	left:735px;
	width: 223px;
	border-left: 1px solid #ccc;
	text-align:left;
	padding: 0 2px 10px 5px;
	background-image:url(/bridge/abc/images/rightnavbgfade.jpg);
	background-position:0 92px;
	background-repeat:no-repeat;
	padding:5px 0 10px 6px;
	margin-top:17px;
	color:#000;
}

.ie8 #rightNav {top:170px;}
.ie9 #rightNav {top:170px;}

#rightNav h3 { /* applies to most of the h3s in the rightnav, except the ones in divs with classes (such as "Events") */
	font-size:1.6em;
	font-weight:normal;
	color:#000;
	margin-bottom: 6px;
}

#rightNav .events {margin: -6px 3px 20px 0; color:#000;}
.ie8 #rightNav .events {margin: 10px 3px 20px 0; color:#000;}
.ie9 #rightNav .events {margin: 10px 3px 20px 0; color:#000;}
#rightNav .events h3 {margin-bottom:-5px;}
.ie8 #rightNav .events h3 {margin-top:5px;}
.ie9 #rightNav .events h3 {margin-top:5px;}
#rightNav .events ul li {color:#000;}
.ie8 #rightNav .events ul li {margin-left:-40px;}
.ie9 #rightNav .events ul li {margin-left:-40px;}
#rightNav .events p {margin-top:-3px;}

#rightNav .whatsNew p {margin-top:-3px;}

/* #rightNav>:first-child {margin-bottom: -9px;} */

#rightNav h4 {
	font-size: 1.3em;
	color:#000;
	margin-top:17px;
	margin-bottom:2px;
}

#rightNav p {
	font-size: 1.2em;
	color:#000;
	margin-top: 3px;
	margin-bottom: 10px;
}

#rightNav li {font-size: 1.2em;}

/* bg image for the sign up box: */
.signUp {
	position:relative;
	left:-4px;
	top:0;
/* image size:*/
	width: 228px;
	min-height:88px; 
	height:auto;
	overflow: visible;
	background-image:url(/bridge/abc/images/emailbgshorter.png);
	background-position: 0 0;
	background-repeat:no-repeat;
	padding: 5px 0 0 10px;
	color:#fff;
	margin-bottom:8px;
}

.ie8 .signUp {margin-bottom:10px;}
.ie9 .signUp {margin-bottom:10px;}

.signUp #emailSignUp {
	position:relative;
	top:3px;
}

#email {margin:5px 0 3px 0; width: 200px; background-color:#fff; border-color:#2570a3; border-width:1px; color:#666;}
.ie8 #email {margin-top:15px;}
.ie9 #email {margin-top:15px;}
#email:focus {color:#000;}
#emailLabel {font-size: 1em; color:#666;}
.form_button {border:2px outset; margin: 2px 2px;}

#rightNav .signUp h4 {color:#FFF; padding:0; margin:0;}
#rightNav .signUp p {color:#fff; padding:0 4px 0 0; margin:0 10px 0 0;}

#rightNav .events ul {margin-left:-39px; list-style:none;}
#rightNav .events li {margin-top: 1.1em; color:#444;}

.moddate {color: #666; margin-bottom: 3px;}

/* **************************************************** General classes ************************************************** */

.floatRight {float:right;}
.floatLeft{float:left;}
.clearLeft{clear:left;}
.clearBoth {clear:both;}
.smallBottomMargin {margin-bottom:-10px;}
.bigger1 {font-size:1.1em}
.bigger2 {font-size:1.2em}
.bigger3 {font-size:1.3em}