/*This one of the style sheets for FHWA Work Zone.  These are styles that need to be hidden from older browsers, mostly Netscape 4x.  

This style sheet is divided into the following sections: 

1. Elements
2. Lists
3. Tables
4. Links
5. Major sections of the template. This section has several sub-sections.
6. Classes

More information is available in the FHWA Work Zone Style and Maintenance Guide and the FHWA Work Zone Developer's Guide.  */

/* ******** SECTION 1: Elements ******** */

body {
	margin: 0;
	}
	
p, ul, ol, h1, h2, h3, h4, h5, h6, td, th, div {
	line-height: 135%;
	}
	
p {
	margin: 1em 0;
	}

/* ******** SECTION 2: Lists ******** */

ol.survey li {
	padding-bottom: 80px;
	}

ul.noindent {
	margin: 1em;
	}

/* ******** SECTION 3: Tables ******** */

.site-map {
	font-size: 86%;
	font-family:  verdana, arial, helvetica, sans-serif;
   background-color: #AAA;
	margin-top: 25px;
	}
	
.site-map th {
	background-color: #e4e4e4;
	text-align: left;
	padding: 2px 5px;
	}

.site-map td {
	background-color: #fff;
	padding: 5px;
	}
	
/* these styles are for data tables. make sure to apply a class="datatable" for these styles to work */

.datatable {
	font-size: 86%;
	font-family:  verdana, arial, helvetica, sans-serif;
	}
	
.datatable th {
	background-color: #e4e4e4;
	color: #000;
	text-align: left;
	padding: 4px 10px 4px 10px;
	border-right: 2px solid #fff;
	}
	
.datatable td {
	padding: 6px 12px 5px 12px;
	}
	
.datatable caption {
	text-align: left;
	font-weight: bold;
	padding-bottom: 3px;
	font-size: 110%;
	}
	
.datatableteam, .datatableteam-scoperow {
	font-size: 95%;
	font-family:  verdana, arial, helvetica, sans-serif;
	background-color: #ccc;
	text-align: left;
	margin-top: 0 !important;
	margin-top: 15px;
	}
	
.datatableteam-scoperow th {
	text-align: left;
	font-weight: bold;
	padding: 4px;
	background-color: #fff;
	}

.datatableteam th {
	background-color: #e4e4e4;
	color: #000;
	font-weight: bold;
	text-align: left;
	padding: 4px;
	}
	
.datatableteam td.empty-header-cell {
	background-color: #e4e4e4;
	}
	
.datatableteam td, .datatable-scoperow td {
	padding: 5px 10px;
	background-color: #fff;
	}
	
.datatableteam caption, .datatableteam-scoperow caption {
	text-align: left;
	font-weight: bold;
	padding-bottom: 3px;
	margin-top: 15px;
	}

/* these styles are for workshop data tables. make sure to apply a class="datatablewksp" for these styles to work */

.datatablewksp, .datatablewksp-scoperow {
	font-size: 95%;
	font-family:  verdana, arial, helvetica, sans-serif;
	background-color: #ccc;
	text-align: left;
	margin-top: 0 !important;
	margin-top: 15px;
	}
	
.datatablewksp-scoperow th {
	text-align: left;
	font-weight: bold;
	padding: 4px;
	background-color: #fff;
	}

.datatablewksp th {
	background-color: #e4e4e4;
	color: #000;
	font-weight: bold;
	text-align: left;
	padding: 4px;
	}
	
.datatablewksp td.empty-header-cell {
	background-color: #e4e4e4;
}
	
.datatablewksp td, .datatable-scoperow td {
	padding: 5px 10px;
	background-color: #fff;
	}
	
.datatablewksp caption, .datatablewksp-scoperow caption {
	text-align: left;
	font-weight: bold;
	padding-bottom: 3px;
	margin-top: 15px;
	}
	
/* These styles are for the Workzone Workshop index tables */

.toc-table caption, .author-table caption {
	text-align: left;
	font-size: 90%;
	color: #000;
	font-weight: bold;
	padding-bottom: 5px;
	}
	
.toc-table, .author-table {
	margin-bottom: 1em;
	border: #ccc 1px solid;
	border-right: none;
	}
	
.toc-table td, .author-table td {
	border-right: 1px solid #ccc;
	border-top: 1px solid #ccc;
	}
	
.toc-table td, .toc-table th {
	padding: 3px 3px 3px 7px;
	font-size: 75%;
/* above styles apply to ie5win, other browsers will override w the below code */ voice-family: "\"}\""; 
  	voice-family:inherit;
	font-size: 95%;
	}
	
html>body  .toc-table td, html>body .toc-table th {
	font-size: 95%;
/* ie5win fix ends -- these lines are for Opera */
	}
	
.toc-table th, .author-table th {
	text-align: left;
	font-weight: normal;
	}
	
.author-table td, .author-table th {
	padding: 3px;
	font-size: 75%;
/* above styles apply to ie5win, other browsers will override w the below code */ voice-family: "\"}\""; 
  	voice-family:inherit;
	font-size: 95%;
	}

html>body  .author-table td, .author-table th {
	font-size: 95%;
/* ie5win fix ends -- these lines are for Opera */
	}

/* ******** SECTION 4: Links ******** */
	
/********* SECTION 5:  Major sections of the template. *********** */

/* Each section has beeen assigned its own ID or class */

#tagline, #wzbanner {
	background: #9F0724 url(images/orange-bkgd.gif) repeat top left;
	}
	
#header-pics {
	background: #000 url(images/header-photo-bkgd.jpg) no-repeat top left;
	}

/* Navigation */

#leftnav {
	background-color:#f4f4f4;
	background-image: url(images/curve-corner.gif);
	background-repeat: no-repeat;
	border-right: #E93908 1px solid;
	border-left: #000063 6px solid;
	}

#search {
	margin: 15px 0px 2px 15px;
	padding: 0px 0px 0px 0px;
	font-size: 11px;
	}

#search input {
	font-size: 10px;
	padding: 2px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
	}

.search {
	margin: 15px 0 2px 15px;
	padding: 0;
	font-size: 70%;
	font-weight: bold;
	}

.searchtitle {
	margin-bottom: 0;
	}

#navigation { 
	padding: 0;
	background-color: #f4f4f4;
	width: 182px;
	height: inherit;
	}
	
.navigation {
	font-weight: bold;
	padding: 3px 5px 3px 15px;
	}

.navigation a:link, .navigation a:visited {
	color: #000063;
	text-decoration: none;
	background-color: #f4f4f4;
	line-height: 115%;
	}

.navigation a:hover {
	color: #fff;
	text-decoration: none;
	background-color: #E93908;
	line-height: 115%;
	}

.navdivider {
	background-color: #E93908;
	height: 3px;
	font-size: 3px;
	}
/* id=lastone goes in the last table cell in the navigation area.  This style creates the bottom border for the nav area */

#lastone {
	border-bottom: #FFA473 1px solid;
	}

#content {
	font-family: verdana, arial, helvetica, sans-serif;
	width: 100%;
	padding: 0 40px 30px 40px;
	font-size: 80%;
	margin: 10px 0 0 0 !important;
	margin: 12px 0 0 0;
/* above styles apply to ie5win, other browsers will override with the code below.  this hack includes the html>body #content styles */ voice-family: "\"}\""; 
  	voice-family:inherit;
	padding: 30px;
	padding-top: 0;
	width: 90%;
	}

html>body #content  {
	padding: 30px;
	padding-top: 0;
	width: 90%;
/* ie5win fix ends -- these lines are for Opera */
	}
	
.breadcrumb {
	margin-top: 0;
	}
	
#footer {
	padding: 10px 2px;
	}

#footer-links {
	padding: 10px 2px;
	}

#javadate {
	padding: 10px 0;
	}

.backtotop {
	font-size: 80%;
	font-family: verdana, arial, helvetica, sans-serif;
	text-align: right;
	}	
	
/* Insets (floating boxes, mostly images for garnish */
	
/* Hide from IE-Mac \*/

.inset {	
	font-family: verdana, arial, helvetica, sans-serif;
	font-size: 95%;
	float: right;
	margin: 20px;
  	padding: 0 10px;
	background-color: #f4f4f4;
	width: 35%;
	border: 1px solid #FFA473;
	}

/* End hide */

.inset h2, .imp-guidance h2 {
	margin: 8px 0 0 0;
	padding: 0;
	}

.inset-photo {	
	float: right;
	margin: 30px;
	}
	
.inset-photo-caption {	
	float: right;
	margin: 20px;
  	padding: 10px;
	}

.inset-photo img {
	border: 1px solid #000;
	}

.inset-photo2 {	
	float: right;
	margin: 2px;
	}
	
.inset-photo2-caption {	
	float: right;
	margin: 20px;
  	padding: 10px;
	}

.inset-photo2 img {
	border: 1px solid #000;
	}

.inset-nwzawphoto {	
	float: right;
	margin: 10px;
	}
	
.inset-nwzawphoto-caption {	
	float: right;
	margin: 20px;
  	padding: 10px;
	}

.inset-nwzawphoto img {
	border: 1px solid #000;
	}


.inset-trainingguide {
	float: right;
	margin: 0 30px 30px 30px;
  	padding: 0;
	}
	
.inset-trainingguide caption {
	text-align: center;
	font-weight: bold;
	font-size: 80%;
	padding-bottom: .25em;
	margin: 0;
	}	

.inset-infobox {
	font-weight: bold;
	border: 2px solid #000063;
	float: right;
	margin: 3px;
	padding: 0px 0px 0px 10px;
	background-color: #EAEAEA;
	}

.imp-guidance {
	background-color: #FFCC99;
	margin: 7px;
	padding: 5px 10px;
	}

div.wz-inset {
	width: 220px;
	margin: 5px;
  	padding: 0 50px 0 0;
	border: 0;
	float: right;
	}

div.wz-box {
	background-color: #f4f4f4;
	border: 1px solid #FFA473;
	width: 220px;
	margin: 0 0 15px 0;
	}

div.wz-box h2 {
	background: #FF8C00;
	font-size: 12px;
	font-weight: bold;
	color: #000066;
	border-bottom: 1px solid #006; 
	padding: 5px;
	margin: 0;
	}

div.wz-box p {
	margin-top: 0;
	padding: .5em;
	font-size: 90%;
	}
		
div.wz-box li {
	color: #000;
	font-size: 90%;
	margin: 0 10px 0 -.4em;
	}

div.wz-inset-outreach {
	width: 300px;
	margin: 5px;
  	padding: 0 10px 0 10px;
	border: 0;
	float: right;
	}

div.wz-box-outreach {
	background-color: #f4f4f4;
	border: 1px solid #FFA473;
	width: 300px;
	margin: 0 0 15px 0;
	float: right;
	}

div.wz-box-outreach h2 {
	background: #FF8C00;
	font-size: 12px;
	font-weight: bold;
	color: #000066;
	border-bottom: 1px solid #006; 
	padding: 5px;
	margin: 0;
	}

div.wz-box-outreach h2 a:link, h2 a:visited {
	text-decoration: none;
	padding-bottom: 5px;
	color: #000066;
	}
	
div.wz-box-outreach h2 a:hover {
	text-decoration: underline;
	padding-bottom: 5px;
	color: #000066;
	}

div.wz-box-outreach p {
	margin-top: 0;
	padding: .5em;
	font-size: 90%;
		}

div.wz-box-outreach li {
	color: #000;
	font-size: 90%;
	margin: 0 10px 0 -.4em;
	}

/*
	| liquidcorners.css; feel free to adapt the style!
	| ================================================
	| use: 4 corners with borderline outside a contentbox with class="inside"; 
	|      image  = upper half: top left corner, long borderline, top right corner
	|               under half: bottom left corner, long borderline, bottom right corner
	|      CHANGE = you have to change this for fitting to your image
	|      YCC    = You Can Change (or omit), if wanted
	|      DNC    = Do Not Change
	| credits: original by francky kleyneman, see article/tutorial in Francky's Developers Corner:
	|          http://home.tiscali.nl/developerscorner/liquidcorners/liquidcorners.htm
	| adapted
	| by.....: ... (your name and site?!)
	|
	| + please let this text & links intact for a next user +
*/

.cornercontainer1{
	width: 75%;
}

.cornercontainer2{
	width: 100%;
}

.cornercontainer3{
	height: 150px;
}

.cornercontainer4{
	min-height: 240px;
}

.top-left, .top-right, .bottom-left, .bottom-right {
	background-image: url(images/corners2000x18.gif); /* CHANGE: path and name of your image */
	height: 9px;       /* CHANGE: replace by the height of one of your corners (= 1/2 height of the image) */
	font-size: 2px;    /* DNC: correction IE for height of the <div>'s */
	background-repeat: no-repeat;
	}

.top-left, .bottom-left { 
	margin-right: 9px; /* CHANGE: replace by the width of one of your corners */
	}

.top-right, .bottom-right { 
	margin-left: 9px;  /* CHANGE: replace by the width of one of your corners */
	margin-top: -9px;  /* CHANGE: replace by the height of one of your corners */
	}

.top-right {
	background-position: 100% 0;    /* DNC: position right corner at right side, no vertical changes */
	}

.bottom-left  { 
	background-position: 0 -9px;    /* CHANGE: replace second number by negative height of one of your corners */
	}

.bottom-right { 
	background-position: 100% -9px; /* CHANGE: replace second number by negative height of one of your corners */
	}

.inside {
	border-left: 2px solid #c6d7eb; /* YCC: color & properties of the left-borderline */
	border-right: 2px solid #c6d7eb;/* YCC: color & properties of the right-borderline */
	background: #f2f5fc;            /* YCC: background-color of the inside */
	color: #000000;                 /* YCC: default text-color of the inside */
	padding-left: 10px;             /* YCC: all texts at some distance of the left border */
	padding-right:10px;             /* YCC: all texts at some distance of the right border */
	}

.notopgap    {
	margin-top: 0;
	padding-top: 1px;
}    /* DNC: to avoid splitting of the box */

.nobottomgap {
	margin-bottom: -1px;
	padding-bottom: 1px;
	CLEAR: both;
} /* DNC: to avoid splitting of the box */


.containerimage {
	PADDING-RIGHT: 0px;
	PADDING-LEFT: 0px;
	FLOAT: right;
	PADDING-BOTTOM: 0px;
	MARGIN: 0px 0px 10px 10px;
	PADDING-TOP: 0px;
	}

.containertext {
    padding-right: 5px;
}

.container_box {
	BORDER-RIGHT: #c6d7eb 2px solid;
	PADDING-RIGHT: 0px;
	PADDING-LEFT: 0px;
	PADDING-BOTTOM: 0px;
	MARGIN: 0px;
	BORDER-LEFT: #c6d7eb 2px solid;
	PADDING-TOP: 0px; BACKGROUND-COLOR: #f2f5fc;
	}
	
.container_box_top {
	PADDING-RIGHT: 0px;
	BACKGROUND-POSITION: right 50%;
	PADDING-LEFT: 0px;
	BACKGROUND-IMAGE: url(images/crnr_top_right.gif);
	PADDING-BOTTOM: 0px;
	MARGIN: -0.15em;
	PADDING-TOP: 0px;
	}
	
.container_box_top P {
	PADDING-RIGHT: 0px;
	PADDING-LEFT: 0px;
	PADDING-BOTTOM: 0px;
	MARGIN: 0px;
	PADDING-TOP: 0px;
	}

.container_box_content {
	PADDING-RIGHT: 10px;
	PADDING-LEFT: 10px;
	PADDING-BOTTOM: 60px;
	MARGIN: 0px;
	PADDING-TOP: 10px;
	BACKGROUND-COLOR: #f2f5fc;
	}

.container_box_content_small {
	PADDING-RIGHT: 10px;
	PADDING-LEFT: 10px;
	PADDING-BOTTOM: 10px;
	MARGIN: 0px;
	PADDING-TOP: 10px;
	BACKGROUND-COLOR: #f2f5fc;
	}

.container_box_bottom {
	CLEAR: both;
	PADDING-RIGHT: 0px;
	BACKGROUND-POSITION: right 50%;
	PADDING-LEFT: 0px;
	BACKGROUND-IMAGE: url(images/crnr_bot_right.gif);
	PADDING-BOTTOM: 0px;
	MARGIN: -0.15em;
	PADDING-TOP: 0px;
	}

.container_box_bottom P {
	PADDING-RIGHT: 0px;
	PADDING-LEFT: 0px;
	PADDING-BOTTOM: 0px;
	MARGIN: 0px;
	PADDING-TOP: 0px;
	}

/* ******** SECTION 6: Classes ******** */
	
/* Use span class="doc" for the text that describes what file format a link is in. Example: <a href="foo.pdf">Document foo</a> <span class=doc">(PDF)</span> */

.doc {
	font-family: verdana, arial, helvetica, sans-serif;
	font-size: 75%;
	}

.highlight {
	color: #F87A3E;
	}

p.highlight2 {
	font-size: 85%;
	background-color:#EEEEEE;
	color: #000066;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-weight: plain;
	padding: 10px;
	margin-bottom: 10px;
	border: 1px solid #AB2A03;
	}

li div.highlight2 {
	margin-top: 15px;
	margin-left: -1.2em !important;
	margin-left: -1.4em;
	}

div.highlight2 {
	font-size: 85%;
	background-color:#EEEEEE;
	color: #000066;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-weight: plain;
	padding: 0 10px 0 10px !important;
	padding: 0 10px 0 10px;
	margin-bottom: 10px;
	border: 1px solid #AB2A03;
	}

.photocaption {
	font-family: verdana, arial, helvetica, sans-serif;
	padding: 2px;
	font-size: 75%;
	}

.hilite {
border-right: 1px solid;
border-left: 1px solid;
border-bottom: 1px solid;
border-top: 1px solid;
padding-right: 1px;
padding-left: 1px;
padding-bottom: 1px;
padding-top: 1px;
background: #ffff00;
font-size: 11px;
font-weight: bold;
font-style: normal;
color: #000000;
border-bottom-color: #999999;
border-top-color: #999999;
border-left-color: #999999;
border-right-color: #999999;
font-family: arial, helvetica, sans-serif;
white-space: nowrap;
}

.content-wz-table {
	font-size: 100%;
	font-family:  verdana, arial, helvetica, sans-serif;
	background-color: #fff;
	text-align: left;
	vertical-align: top;
	}
	
/* class=input is currently only used on the best practices forms */	

.input {
	font-family: verdana, arial, helvetica, sans-serif;
	font-size: 85%;
	margin-top: -1em;
	margin-top: 0;
	}

/* apply class="admin" to administrative functions such as "Add News Item" */

.admin {
	font-size: 85%;
	}
	
/* policy_library styles */

	#state_popup {
		position: absolute;
		z-index: 2;
		width: 250px;
		height: 180px;
		border: 3px solid #000063;
		left: 325px;
		top: 380px;
	}
	
	#state_links {
		overflow: auto;
		height: 160px;
		padding: 0px;
		margin: 0px;
	}
	
	#popup_close_link {
		background-color: #666666;
		width: 16px;
		height: 16px;
		float: right;
		color: #FFFFFF;	
		text-align: center;
	}
	
	#popup_close_link a:link, #popup_close_link a:visited, #popup_close_link a:hover {
		width: 16px;
		height: 16px;
		text-decoration: none;	
		text-align: center;
		font-size: 110%;
		color: #FFFFFF;
	}
	
	#state_popup h2 {
		color: #FFFFFF;
		background-color: #000063;
		height: 20px;
		font-size: 85%;
		padding: 0px 5px 0px 3px;
		margin: 0px;
	}
	
	.link_even {
		background-color: #E4E4E4;
		height: 40px;
		padding: 5px;
		margin: 0px;
		font-size: 85%;
	}
	
	.link_odd {
		background-color: #C0C0C0;
		height: 40px;
		padding: 5px;
		margin: 0px;
		font-size: 85%;
	}

/* New Icon Styles */         

.newitemdate {
	color: #d5440f
	}

.newicon {
	vertical-align: bottom;
	}
	
/* Featured Items */	

.featcontainer {
	padding: 2px;
	border: 1px solid #CCCCCC;
	width: 220px;
	margin-bottom: 14px;
	float: right;
	}

.featcontainer a {
	color: #064CBC;
	font-weight: bold;
	text-decoration: none;
	font-size: 105%;
	line-height: 16px;
	}

.featcontainer a:hover{
	text-decoration: underline;
	}

.featcontainer .text {
	font-size: 12px;
	line-height: 14px;
	margin-left: 5px;
	margin-right: 4px;
	margin-bottom: 5px;
	color: ##000066;
	}

.featcontent {
	padding: 5px;
	}

.featcontent2 {
	font-size: 14px;
	font-weight: bold;
	text-align:center;
	line-height: 14px;
	margin-left: 5px;
	margin-right: 4px;
	margin-bottom: 5px;
	padding: 5px;
	color: #4E4E4E;
	}

.exhibitbox {
	background-color:#f4f4f4;
	border: thin solid #e93908;
	padding: 6px;
	width:225px;
	float:right;
	margin-left:6px;
}
.center {
	text-align:center;	
}
.sr-only {
position:absolute;
left:-10000px;
top:auto;
width:1px;
height:1px;
overflow:hidden;
}

.normalcell {
	padding: 5px 10px !important;
	background-color: #fff !important;
	vertical-align: top !important;	
	font-weight:normal !important;
	color:#000 !important;
	text-align:left !important;
}
.tablenote {
	font-size: 85%;
	padding: 10px 0px 20px 0px;
	text-align: left;
	}