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

html {
/*	margin:0;  
	padding:0; 
	height:100%; */
	} 
	 
body {
/*	margin:0;
	padding:0;
	width:auto;
	height: 100%;*/ /* to help make the footer stick to the bottom */
	font: 70% Arial, Helvetica, sans-serif;
} 
 
/* Container to control width of window: */
#container {
	width:1030px; 
	margin: auto;
	border: 1px solid #CCC;
	background:#FFF;
	padding: 10px;
	height: 100%;
	}

#wrap {/*min-height: 100%;*/position: relative;	} 
 
#heading { 
	padding-left: 26px;  
} 
 
/*  ---  breadcrumbs  --- */ 
 
/* 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 { position:relative; z-index:600000; width:auto; top: -100px; right:0;} 
.ie8 #breadcrumbContainer { position:relative; z-index:600000; width:auto; top: -118px; right:-1px;}
 
#newBreadcrumbs { 
	float:right; 
	text-align:right; 
/*	margin: -33px 0 10px 0; */ 
	margin: -63px 0 0 0;  
	padding:4px; 
	font-family:Verdana, Geneva, sans-serif; 
	background-color:#333;
	filter:alpha(opacity=80);
	opacity: 0.8;
	-moz-opacity:0.8;
	color:#FFF; 
	border: 1px solid #fff; 
	border-top:none; 
	border-right: none;
	font-size:0.9em; 
	width:auto; 
	max-width:900px; 
} 
 
#newBreadcrumbs a { 
	color:#fff!important;  
	text-decoration:underline; 
} 
 
#newBreadcrumbs a:visited { 
	color:#fff;  
} 
 
/* --- h1 --- */

.abcfirstletter {font-size:32px;} 
 
h1 {
	display:block;
	z-index:9999999999;
	position:relative; 
	top:-6px; 
	left: 2px; 
	width:230px;  
	heigth: 210px;
	padding-top: 6px; 
	padding-left: 4px; 
	margin-bottom:none;
/*	border:none;  */
	text-align:left; 
/*	font-family:  Helvetica, Verdana, Geneva, Arial, sans-serif; */ 
	font-family:"Arial Black", Gadget, sans-serif; 
	font-variant: small-caps; 
	font-size:28px; 
	font-weight:bolder; 
	line-height:1.1em; 
	font-style:italic;  
	color:#fff;  
	text-shadow:  2px 2px 3px #000; /* text shadow for Firefox: 0.1em distance to the right, 0.1em distance down, 0.05em degree of blur (so it's not so sharp), #000 is the color of the shadow. To get a shadow in IE, see the IFIE CSS (filter). */ 
}

/* Adjusts the position of the h1 for ie8/9+ */
html.ie body.ie8 #fhwacontainer #ABCnav.bannerRapid h1 {top:-8px; left:3px}
html.ie body.ie8 #fhwacontainer #ABCnav.bannerFoundation h1 {top:-8px; left:3px}
html.ie body.ie8 #fhwacontainer #ABCnav.bannerPrefab h1 {top:-8px; left:3px}
html.ie body.ie8 #fhwacontainer #ABCnav.bannerStructural h1 {top:-8px; left:3px}
html.ie body.ie8 #fhwacontainer #ABCnav.bannerFast h1 {top:-8px; left:3px}
html.ie body.ie8 #fhwacontainer #ABCnav.bannerGeofoam h1 {top:-8px; left:3px}


h1 a { 
	color:#fff;  
		text-decoration:none;
/* text shadow for Firefox: 0.1em distance to the right, 0.1em distance down, 0.05em degree of blur (so it's not so sharp), #000 is the color of the shadow. To get a shadow in IE, see the IFIE CSS (filter). */ 
} 

.ie8 h1 a {color:#FFF;}
 
 h1 a:hover { 
	color:#fff; 
} 
 
h1 a:visited { 
	color:#fff; 
} 
 
.bumpUpContent {margin-top:-200px;} 
 
/* --- h2 --- */ 
 
#bgImage { 
	position: relative; 
	top: 0; 
	left:0; 
	width: auto; 
	height: 146px;  
	margin-top: 0; 
	margin-bottom:0; /* pushes down the tabs */ 
	padding-top: 1px; /* pushes down the text boxes */ 
/*	overflow:visible; */ 
} 
 
#headerAboveABC { /* the word "Bridges" above Accelerated Bridge Construction */ 
	position: absolute; 
	top:-1px; 
	left:0; 
	width:auto; 
	margin-bottom: 0; 
	border-bottom:1px solid #fff; 
	border-right: 1px solid #fff; 
	padding: 2px 6px 2px 6px; 
/*	padding: 8px 8px 8px 22px;  right padding is 2px more than that of #bgImage h2 to account for the 2px border on the latter */ 
	color:#fff; 
	font-size:11px; 
} 
 
#headerAboveABC.bgBox { /* if "Bridges" can't be seen because the photo behind it is too light, use this class to add a shadow behind it  */ 
	background-color:#333; 
	filter:alpha(opacity=70); 
	opacity: 0.7; 
	-moz-opacity:0.7; 
	border-top:1px solid #fff; 
/*	border-right:1px solid #fff;  
	border-bottom:none!important;*/ 
} 
 
.headerImages { 
	position: absolute; 
	top:14px; 
	left:260px; 
	background-color: #eae8e4; 
	padding:0; 
	border: 2px solid #006; 
} 
 
/* --- tabs --- */ 
 
#ABCnav { /* includes the banner image */
	position: relative;
	top:0;
	left:0;
	padding: 0;
	height:140px;
	width:958px;
	overflow:visible;
	border: 1px solid #787770;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	z-index:1;
} 
 
.ie8 #ABCnav {
	margin-bottom: 16px;
	padding-top: 0; /* 15px; */
	padding-bottom: 12px; 
	width:auto;
	overflow:visible;
	background-repeat:repeat-x;
	background-position:0 0; /* left top. bg img position is different for IE 8/9 */ 
	height:129px; /* it needs to be shorter in IE 8 and IE 9 */
}

.ie9 #ABCnav {
	margin-bottom: 16px;
	padding-top: 0; /* 15px; */
	padding-bottom: 12px; 
	width:auto;
	overflow:visible;
	background-repeat:repeat-x;
	background-position:0 0; /* left top. bg img position is different for IE 8/9 */ 
	height:129px; /* it needs to be shorter in IE 8 and IE 9 */
}
 
#ABCnav li a { /* text on tabs */
	color:#000; 
	text-decoration:none; 
} 

#nav { 
	z-index:9; 
	width:auto; 
	margin:0;
	display:inline;
	position:relative;
	left:0;
	top:0;
	overflow:hidden;
} 

 
#ABCnav ul { /* tabs: */
	list-style:none; 
	display:inline; 
	position:relative;
	top: -21px;
	left:0;
	overflow:visible; 
	font-size:10px; 
	margin-left:-50px; /* moves tabs over to the left without moving the banner in the same div */
} 

/* the tabs are 4 pixels too high in Chrome. This media query targets only chrome & safari and moves them down. It also bumps down the breadcrumbs: */
@media screen and (-webkit-min-device-pixel-ratio:0) {
     #ABCnav ul {
		 top:-17px!important
	 }
	 #breadcrumbContainer { top: -97px;}
}

/* move the tabs up in Firefox for MAC (OS X) only: */
@-moz-document url-prefix() {
.OSX #ABCnav ul {top:-20px;}
.OSX #breadcrumbContainer { top: -101px;}
}

/* the tabs are two pixels too low on the iPad and iPhone. This bumps them up: */

@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait) {
  #ABCnav ul li{ margin-top:-2px; } 
}
@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape) {
  #ABCnav ul li{ margin-top:-2px; } 
}

@media only screen and (max-device-width: 480px) {
  #ABCnav ul li{ margin-top:-2px; } 
}

/* iPhone 4 and iPad 3 retina display has pixel ratio 2 */
@media screen and (-webkit-min-device-pixel-ratio: 2) {  #ABCnav ul li{ top:-2px!important } }


#ABCnav li {
	display:inline-block;
	margin-top: 0; /* moves down tabs */
	margin-left: 0; /* spacing between tabs; this is controlled in the #tab1-5 IDs below */

} 

#ABCnav li a {
	display: inline-block;
	padding: 6px; 
} 
#ABCnav ul li a:hover {text-decoration:none;} 

/* ************** for IE 8/9+ ***************** */

.ie8 #ABCnav ul {
	list-style:none;
/*	display:inline; */
	display:inline;
	overflow:visible;
	font-size:10px;
	top:-37px; /* different for IE8/9 */
	left:0; /* -14px; */

/*	border-left: 2px solid #787770;
	border-bottom: 2px solid #787770;
	*/
}

.ie8 #ABCnav li {
	display:inline-block;
}

.ie8 #ABCnav li a {
	display: inline-block;
/*	display: inline;  must be inline-block*/
	padding: 6px;
}

.ie8 #ABCnav ul li a:hover {text-decoration:none;}

/* ******************************************** */



#tab1 {
	margin: 1px 5px 0 1px;
	border:1px solid #787770; 
	-moz-border-radius-topleft: 10px;
	-moz-border-radius-topright: 10px;
	-moz-border-radius-bottomleft: 0;
	-moz-border-radius-bottomright: 0;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	border-bottom-left-radius:0;
	border-bottom-right-radius:0;
} 
#tab1:hover {
	background-color:#dad9cb; 
} 
#tab2 {
	margin: 1px 5px 0 1px;
	border:1px solid #787770; 
	-moz-border-radius-topleft: 10px;
	-moz-border-radius-topright: 10px;
	-moz-border-radius-bottomleft: 0;
	-moz-border-radius-bottomright: 0;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	border-bottom-left-radius:0;
	border-bottom-right-radius:0;
} 
#tab2:hover {
	background-color:#dad9cb;
} 
#tab3 {
	margin: 1px 5px 0 1px;
	border:1px solid #787770; 
	-moz-border-radius-topleft: 10px;
	-moz-border-radius-topright: 10px;
	-moz-border-radius-bottomleft: 0;
	-moz-border-radius-bottomright: 0;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	border-bottom-left-radius:0;
	border-bottom-right-radius:0;
	text-align:center; 
} 
#tab3:hover {
	background-color:#dad9cb;
} 
#tab4 {
	margin: 1px 5px 0 1px;
	border:1px solid #787770; 
	-moz-border-radius-topleft: 10px;
	-moz-border-radius-topright: 10px;
	-moz-border-radius-bottomleft: 0;
	-moz-border-radius-bottomright: 0;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	border-bottom-left-radius:0;
	border-bottom-right-radius:0;
} 
#tab4:hover {
	background-color:#dad9cb;
} 
#tab5 { /* Project Planning */
	margin: 1px 5px 0 1px; 
	border:1px solid #787770; 
	-moz-border-radius-topleft: 10px;
	-moz-border-radius-topright: 10px;
	-moz-border-radius-bottomleft: 0;
	-moz-border-radius-bottomright: 0;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	border-bottom-left-radius:0;
	border-bottom-right-radius:0;
} 

#tab5:hover {
	background-color:#dad9cb;
}

.foundationOn {
	background-color:#fff;
	font-weight:bold;
	border-top:2px solid #787770;
	border-left:2px solid #787770;
	border-right:2px solid #787770;
	border-bottom:2px solid #fff !important
} 
.foundationOn:hover {
	border:2px solid #787770;
	background-color: #fff !important /*stops active tab from changing on hover */
} 
.foundationOff {
	background-color:#c1c0b5;
	border:2px solid #787770;
} 
.rapidOn {
	background-color:#fff;
	font-weight:bold;
	border-top:2px solid #787770;
	border-left:2px solid #787770;
	border-right:2px solid #787770;
	border-bottom:2px solid #fff !important
} 
.rapidOn:hover {
	background-color:#fff !important; /*stops active tab from changing on hover */
	border-top:2px solid #787770;
	border-left:2px solid #787770;
	border-right:2px solid #787770;
	border-bottom:2px solid #fff !important
} 
.rapidOff {
	background-color:#c1c0b5;
	border:2px solid #787770;
} 
.prefabOn {
	background-color:#fff;
	font-weight:bold;
	border-bottom:2px solid #fff !important;
	border-top:2px solid #787770;
	border-left:2px solid #787770;
	border-right:2px solid #787770;
} 
.prefabOn:hover {
	background-color:#fff !important; /*stops active tab from changing on hover */
	border:2px solid #787770;
} 
.prefabOff {
	background-color:#c1c0b5;
	border:2px solid #787770;
} 
/* use this class for pages in the structural category, to make the tab look "on": */
.structuralOn {
	background-color:#fff;
	font-weight:bold;
	border-bottom:2px solid #fff !important
} 
.structuralOn:hover {
	background-color:#fff !important; /*stops active tab from changing on hover */
	border:2px solid #787770;
} 
.structuralOff {
	background-color:#c1c0b5;
	border:2px solid #787770;
} 
.fastOn {
	background-color:#fff;
	font-weight:bold;
	border-bottom:2px solid #fff !important;
		border-top:2px solid #787770;
	border-left:2px solid #787770;
	border-right:2px solid #787770;
} 
.fastOn:hover {
	background-color:#fff!important;
	border:2px solid #787770;
} 
.fastOff {
	background-color:#c1c0b5;
	border:2px solid #787770;
} 
.fastOff:hover {
		background-color:#dad9cb;
		border:2px solid #787770;
} 
 
/* banners: (used to reference the h1 in ie8/9+ */
.bannerFoundation {
	background-image:url(/bridge/abc/images/banner_foundation.jpg);
	background-position:0 0;
	background-repeat:no-repeat;
	background-attachment:scroll;
}
 .bannerPrefab { 	
 	background-image:url(/bridge/abc/images/banner_prefab.jpg);
	background-position:0 0; 
	background-repeat:no-repeat; 
	background-attachment:scroll; 
} 
 
.bannerStructural { 
	background-image:url(/bridge/abc/images/banner_structural.jpg); 
	background-position:top left; 
	background-repeat:no-repeat; 
	background-attachment:scroll; 
} 
 
.bannerRapid { 
	background-image:url(/bridge/abc/images/epsgeofoam.jpg); 
	background-position:0 0; 
	background-repeat:no-repeat; 
	background-attachment:scroll; 
	/*border-bottom:none; */ 
} 
 
.bannerFast { 
	background-image:url(/bridge/abc/images/banner_fast.jpg);  
	background-position:-260px -24px; /* image is wide, moving left 260 pixels */
	background-repeat:no-repeat; 
	background-attachment:scroll; 
}

html.ie body.ie8 #fhwacontainer #ABCnav.bannerFast{background-position:-260px -24px; /* image is wide, moving left 260 pixels */}
 
.bannerGeofoam { 
	background-image:url(/bridge/abc/images/banner_epsgeofoam.jpg); 
	background-position:150px 0; 
	background-repeat:no-repeat; 
	background-attachment:scroll; 
} 
 
 
/* --- Main Content --- */ 
#mainContent { 
	margin: 0 0 0 5px; /* pushes down the main text */
	padding: 0 2px 2px 2px;
	background-color:#FFF; 
/*	border: 1px solid #c1c0b5;  */
	color:#333; 
	width:953px;
	text-align:left;
	z-index:10;
} 

/* push down mod date */
#modifieddate {
	clear:both;
	position:relative;
	top: 20px;
	left:0!important;
	width:300px;
	padding:6px 6px 20px 10px;
	margin: 10px auto 10px!important 0;
	text-align:left;
}

br.bumper {
	clear:both;
	padding-top: 240px;
}
 
#mainContent a img {border:none;}
 
#mainContent h2 {font-size: 2.2em; /* 20px */ 	font-weight:bold; } 
/* #mainContent h2:first-letter {font-size: 20px } */
 
#mainContent h2 { 
	color: #003564; 
} 
 
 
#mainContent h3 { 
	margin: 16px 0 1px 0; 
	color:#003564; 
	font-size: 1.6em; 
	margin-top:none;
	} 
 
#mainContent h4 { 
	margin-left:0; 
	margin-bottom:-1px; 
	font-size: 1.4em; 
	color:#003564; 	 
	} 
	 
#mainContent h5 {
	margin-left:0;
	margin-bottom:1px;
	color:#003564;
	font-size: 1.3em;
	font-weight:bold;
	font-style:italic;
	} 

#mainContent h6 {
	margin-left:0;
	margin-bottom:1px;
	color:#003564;
	font-size:1.2em;
	font-weight:bold;
	} 

#mainContent p {
	font-size:1.2em;
	color:#414141;
	margin:10px 0; /* top margin, left margin */
} 
#mainContent ul {
	font-size:10pt;
	color:#000;
	margin-left:-20px;
	margin:5px 0 /* top and left */
} 
#mainContent li {
	margin: 4px 2px; /* top and left */
	font-size:10pt;
	color:#333; 
	} 

#mainContent ul ul {margin-left:-20px;} 
#mainContent ol {font-size: 10pt;} 

#mainContent th {
	font-size:1.2em;
	font-weight:bold;
} 
 
#mainContent td,  #mainContent td p { font-size: 10pt;} 
 
#mainContent td ul, #mainContent td ul li { 
	font-size:10pt; 
	color:#414141; 
} 

/* #mainContent img { padding: 15px; border: 1px solid #ccc; background-color:#fff; }*/
#mainContent img.noborder {border:none; padding:0;}
span.caption {max-width: 500px;  font-size:11px; color:#666; font-weight:normal; margin:5px 0 20px 0}
#mainContent .captioned {width:532px; font-size:11px; color:#666; font-weight:normal; margin:5px 0 20px 0; margin-bottom:20px!important}

 
#mainContent img.diagram {padding:none; border:1px solid #ccc;} 
#mainContent img.noBorder {border:none; padding:none;}
 
/* 
#mainContent p { 
	font-size:1.1em; 
	color:#414141; 
}*/ 
 

#mainContent ul ul {
	margin-left:-30px;
} 


ul.anchorList {list-style:none;  display:inline;  padding-top:0!important; margin:1px 1px;}

ul.anchorList li { display:inline-block;   padding: 0px 4px 2px 4px; margin-top:2px;} 

.anchorList li h4 {font-size:10px!important; font-weight:normal; border-bottom: 1px solid #c1cfba; padding-top:0; margin-top:1px; }

ul.anchorList li a {text-decoration:none;}

#mainContent table { 
	width:auto; 
	min-width:400px; 
} 
 
/* --- Topic Tables --- */ 
 
tr, td, th { vertical-align : top; } 
 
table.contnav { 
	border : none; 
	border-collapse : collapse; 
	clear : both; 
	margin : 4px 0px 6px 0px; 
	width : 100%; 
} 
table.contnav td, table.contnav td a { 
	border : none; 
	font-size : 10px; 
	line-height : 10px; 
	padding : 0px; 
	width : 33%; 
} 
 
table.datatable, table.datatablesmall { 
	border-collapse : collapse; 
	border-left : 1px solid #aaa; 
	border-bottom : 1px solid #aaa; 
	margin : 12px auto 12px auto; 
} 
table.datatable tbody tr.bottom td, table.datatablesmall tbody tr.bottom td, table.datatable tbody tr.bottom th, table.datatablesmall tbody tr.bottom th, table.datatable tbody tr td.bottom, table.datatable tr td.bottom, table.datatable thead tr.bottom th, table.datatablesmall thead tr.bottom th { 
	vertical-align : bottom; 
} 
table.datatable thead tr.middle th, table.datatable tbody tr.middle td, table.datatablesmall tbody tr.middle td, table.datatable tbody tr.middle th, table.datatablesmall tbody tr.middle th, table.datatable tbody tr td.middle, table.datatable tr td.middle { 
	vertical-align : middle; 
} 
 
 
table.datatable thead th, table.datatable thead th a, table.datatable thead th a:link, table.datatable thead th a:visited, table.datatablesmall thead th, table.datatablesmall thead th a, table.datatablesmall thead th a:link, table.datatablesmall thead th a:visited, table.datatable tbody td table.datatable thead th, table.datatable thead th p { 
	background-color : #264D73; 
	color : #fff; 
	text-align : center; 
	text-decoration : none; 
} 
table.datatable thead th a, table.datatable thead th a:link, table.datatable thead th a:visited, table.datatablesmall thead th a, table.datatablesmall thead th a:link, table.datatablesmall thead th a:visited, table.datatable tbody td table.datatable thead th, table.datatable thead th p { 
	background-color : #264D73; 
	color : #fff; 
	text-align : center; 
	text-decoration : underline; 
} 
table.datatable th.theadleft { 
	background-color : #264D73; 
	color : #fff; 
	text-align : left; 
} 
 
table.datatable tr.theadcenter th, table.datatable th.theadcenter, table.datatablesmall tr.theadcenter th, table.datatablesmall th.theadcenter { 
	background-color : #264D73; 
	color : #fff; 
	text-align : center; 
} 
table.datatable tbody th, table.datatablesmall tbody th { 
	text-align : left; 
} 
table.datatable tbody th.center, table.datatablesmall tbody th.center { 
	text-align : center; 
} 
table.datatable tbody tr.tablehead, table.datatablesmall tbody tr.tablehead, table.datatablesmall thead th p{ 
	background-color : #264D73; 
	color : #fff; 
} 
table.datatable tbody tr.tablehead a, table.datatable tbody tr.tablehead a:hover, table.datatable tbody tr.tablehead a:link, table.datatable tbody tr.tablehead a:visited, 
table.datatablesmall tbody tr.tablehead a, table.datatablesmall tbody tr.tablehead a:hover, table.datatablesmall tbody tr.tablehead a:link, table.datatablesmall tbody tr.tablehead a:visited { 
	color : #fff; 
	text-decoration : none; 
} 
table.datatable td, table.datatable th, table.datatablesmall td, table.datatablesmall th { 
	border-right : 1px solid #aaa; 
	border-top : 1px solid #aaa; 
	padding : 3px; 
} 
 
 
table.datatable tfoot td, table.datatable tfoot td p, table.datatable tfoot td ol li, table.datatable tfoot td ul li { 
	font-size : 11px; 
} 
table.datatablesmall tfoot td, table.datatablesmall tfoot td p, table.datatablesmall tfoot td ol li, table.datatablesmall tfoot td ul li { 
	font-size : 9px; 
} 
table.datatable td.nopad, table.datatable th.nopad, table.datatablesmall td.nopad, table.datatablesmall th.nopad { 
	padding : 0px; 
} 
table.datatable td.tab1, table.datatable th.tab1, table.datatablesmall td.tab1, table.datatablesmall th.tab1, table.equation td.tab1 { 
	padding-left : 16px; 
} 
table.datatable td.tab2, table.datatable th.tab2, table.datatablesmall td.tab2, table.datatablesmall th.tab2, table.equation td.tab2 { 
	padding-left : 30px; 
} 
/* .tab3 added by Brian Gray for Highway Statistics indents */ 
table.datatable td.tab3, table.datatable th.tab3, table.datatablesmall td.tab3, table.datatablesmall th.tab3, table.equation td.tab3 { 
	padding-left : 45px; 
} 
table.datatablesmall td, table.datatablesmall th, table.datatablesmall td a, table.datatablesmall td li, table.datatablesmall td p, table.datatablesmall th p, table.datatable th p { 
	font-size : 10px; 
} 
table.datatablesmall td.normal { 
	font-size : 13px; 
} 
table.datatable td blockquote.bottom, table.datatable td ol.bottom, table.datatable td p.bottom, table.datatable td ul.bottom, table.datatable td ol.bottom, table.datatable td li.bottom { 
	margin-bottom : 0px; 
} 
table.datatable td ul { 
	margin : 0px 0px 0px 15px !important;  
	padding : 0px 0px 0px 0px !important;  
} 
table.datatable td ul.flush { 
	margin : 0px 0px 0px 0px; 
	padding : 0px 0px 0px 15px; 
} 
table.datatable thead th span.cellyel { color : #000; } 
 
 
table.100wide {width:100%} 
table.90wide {width:90%} 
table.80wide {width:80%} 
 
/* ********* definition lists ********** */ 
 
dl dd {
	/*giving UL's LIs generated numbers*/
	margin-left:1.5em;
}

dl {
	font-size:10pt; 
} 
dt {
	margin-bottom:3px; margin-right: 5px; font-weight:bold;
} 
dd {
	margin-bottom:10px;
} 
.imageFrame {padding: 15px; border: 1px solid #ccc; background-color:#fff; /* palest grey: #eee; */} 
/* copied from topics.css: 
#mainContent table.datatable.flush, #mainContent table.datatablesmall.flush, #mainContent table.equation.flush, #mainContent table.indent.flush, #mainContent table.noborder.flush, #mainContent table.sidebar.flush { margin-top : 0px; margin-bottom : 0px; } 
#mainContent  table.datatable.flush caption { margin-top : 12px; margin-bottom : 12px; }*/ 
.imgcap { font-weight : bold; margin-left : auto; margin-right : auto; text-align : center; max-width : 550px; }  
.nowrap { white-space : nowrap; } 
.col04 { width : 4%; }
.col05 { width : 5%; }
.col06 { width : 6%; }
.col08 { width : 8%; }
.col10 { width : 10%; }
.col12 { width : 12%; }
.col15 { width : 15%; }
.col20 { width : 20%; }
.col24 { width : 24%; }
.col25 { width : 25%; }
.col30 { width : 30%; }
.col33 { width : 33%; }
.col40 { width : 40%; }
.col45 { width : 45%; }
.col50 { width : 50%; }
.col55 { width : 55%; }
.col60 { width : 60%; }
.col70 { width : 70%; }
.col75 { width : 75%; }
.col80 { width : 80%; }
.col90 { width : 90%; }
.col95 { width : 95%; }
.col100 { width : 100%; } 

/*  --- slideshows in main content area ---  */ 
 
.slideShowArea {
/*	position: relative;
	top:10px;
	left:10px; */
	float:left;
	width:auto;
	height:400px;
	margin-right:10px;
	margin-bottom:12px;
	overflow:visible;
}

.slideshow { height: 332px; width: 432px;  margin: 10px 10px 10px 2px;  }
.slideshow img { padding: 15px; border: 1px solid #ccc; background-color:#fff; /* palest grey: #eee; */}

/* previous & next buttons */
.PrevNext { 
	font-size: 1.4em;
	padding: 6px;
	margin: 1px 0 14px 170px;
	position:relative;
	top: 0;
	left:0;
	z-index: 1000000;
}

.PrevNext a { color:#585858; text-decoration:none;}
.PrevNext a:visited {color:#585858}

.PrevNext #next2 { /* prev button */
	margin-left: 10px;
	margin-bottom:2px;
	border: 2px solid #ccc;
	padding: 4px;
	background-color:#fff;
}

.PrevNext #prev2 { /* next button */
	border: 2px solid #ccc;
	padding: 4px;
	background-color:#fff;
	margin-bottom:2px;
}

.slideText { /* class for the group of text boxes */
	position: relative;
	top: -373px;
	left: 450px;
	margin-bottom:5px;
/*	float:right;
	margin-top: -300px;
	margin-left: -200px;*/
	width:50%;
	min-width:200px;
	max-width:300px;
	overflow:visible;
}

.slideText .textbox { /* class for each text box inside the group */
	background-color:#fff;
	border: 1px solid #ccc;
	padding:4px 6px 6px 6px;
	height:auto;
}

.slideText .textbox h4 { margin-top:1px;  color:#333!important}
.slideText .textbox p {font-size:12px!important}
.slideText .textbox p strong { font-weight:bold;} 


 
/* --------- Right Nav --------- */ 
 
 
#rightNav { 
	float:right; 
	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: 17px 1px 10px 20px; /* prevents text in main content area from bumping right up against the right nav */
	color:#000;
	z-index:20;
}

#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 ul {margin-bottom: 20px;} /* bump down the item after an ul */
#rightNav ul li {
	font-size: 1em;  
	margin-bottom:5px;
	list-style:none;}

.ie8 #mainContent #rightNav ul li {
	list-style:none;
	font-family:  Helvetica, Verdana, Geneva, Arial, sans-serif;
	font-size:0.9em;
	padding:5px 0 0 0;
	margin-bottom:1px;
	margin-left:-40px;
}

#rightNav .events h3 {margin-bottom:-5px; margin-left:1px;}
.ie8 #rightNav .events h3 {margin-top:40px; margin-bottom:-15px;}
#rightNav .events {margin: -6px 3px 20px 0; color:#000;}
#rightNav .events ul {margin-bottom:6px;} /* the bottom margin on the events ul needs to be small enough that the paragraph, "View Event Calendar" looks like it belongs with it. The large bottom margin below the other righNav ul pushes that paragraph down too far. */
#rightNav .events ul li {color:#000; font-size: 1em; margin-left:-1px;}
#rightNav .events p {margin:-3px auto auto 2px;}

#rightNav .moreInfo {margin-top:0; margin-bottom:0;}
#rightNav .moreInfo ul li {margin-left:-39px; margin-bottom:0.2em;}
.ie #rightNav .moreInfo ul li {margin-bottom:4px;}
.ie8 #mainContent #rightNav .moreInfo ul li {margin-bottom:-1px!important}
.ie #rightNav .whatsNew {margin-top:-20px; margin-bottom: 20px;}



/* #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 {top:10px;}
.ie8 .signUp h4 {top:10px;}

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

.ie8 .signUp #emailSignUp {top:5px!important}
.ie9 .signUp #emailSignUp {top:5px!important}

#email {margin:5px 0 3px 0; width: 200px; background-color:#fff; border-color:#2570a3; border-width:1px; color:#666;}
#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;} 

/* --- classes --- */ 
 
.imgcap { font-weight : bold; margin-left : auto; margin-right : auto; text-align : center; max-width : 550px; } 
.imgcap img {margin-bottom: 6px;} 
 
.keepLeft {position:fixed; left:5px; margin: 5px 10px 20px 0; width: 180px; height:auto; overflow:visible;} 
 
.divRight {float:right; margin-left:200px !important; width: 600px; overflow:visible;} 
 
.floatRight {float:right; margin: 10px; margin-left:20px;} 

#mainContent table.right, .right {float:right;}

.floatLeft {float:left; margin:10px;} 
 
.alignRight {text-align:right;} 
 
.alignCenter {text-align:center;} 
 
/* .center {margin-left:30%;} */ 
.center { text-align : center; } 
 
.down20pixels {padding-top:20px;} 
.down35pixels {padding-top:35px;} 
 
img.videos {border:2px solid #036;} 
.videos {background:#eee; padding:15px; border: 1px solid #ccc;}
.videosFloatedLeft {float:left; background:#eee; padding:15px; border: 1px solid #ccc;}
 
.width180 {width:180px;} 
.width220 {width: 220px;} 
 
hr.ppt {width: 700px; color:#CCC; height: 1px; margin: 30px 0 30px 1px; text-align:left; } 
 
.bluebox { 
	width: 50%; 
	padding: 10px; 
	background-color: #dbeeff; 
	border: 2px solid #003e75; 
	margin: 10px 4px 10px 3px; 
} 
 
.greyBG {background-color:#CCC;} 
 
.greenText {color:#063;} 
 
table.data {border:1px solid #999; border-collapse:collapse; margin-bottom: 15px;} 
table.data td {border:1px solid #999; padding:4px;} 
table.data th {background-color:#CCC; color:#000; font-size:1.4em; font-weight:bold; padding:4px;} 
table.data caption {font-size:1.4em; font-weight:bold; padding-bottom:7px; color:#000;} 
 
.clearFloats {clear:both;} 
.clearLeft {clear:left} 
.clearRight {clear:right}