/*
Copyright (c) 2008, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.net/yui/license.txt
version: 3.0.0pr2
*/

/* reset */
html {
	color:#000;
	background:#FFF;
}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, 
table {
	border-collapse:collapse;
	border-spacing:0;
		
}

td {padding:5px; font-size:90%;}
tr {border-bottom:1px solid #009933;}
fieldset, img {
	border:0;
}
address, caption, cite, code, dfn, em, strong, th, var {
	font-style:normal;
	font-weight:normal;
}

caption, th {
	text-align:left;
}
h1, h2, h3, h4, h5, h6 {
	font-size:100%;
	font-weight:normal;
}
q:before, q:after {
	content:'';
}
abbr, acronym {
	border:0;
	font-variant:normal;
}
sup {
	vertical-align:text-top;
}
sub {
	vertical-align:text-bottom;
}
input, textarea, select {
	font-family:inherit;
	font-size:inherit;
	font-weight:inherit;
}
input, textarea, select {
*font-size:100%;
}
legend {
	color:#000;
}
/* fonts body{font:13px/1.231 arial,helvetica,clean,sans-serif;*font-size:small;*font:x-small;}select,input,button,textarea{font:99% arial,helvetica,clean,sans-serif;}table{font-size:inherit;font:100%;}pre,code,kbd,samp,tt{font-family:monospace;*font-size:108%;line-height:100%;}*/

body {
	font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;
	background-image: url(images/swoosh.png);
	background-repeat: no-repeat;
}
/* **************** TEMPLATE ***************** */
/* ====== Page Head, Body, and Foot ====== */
body {
	_text-align:center;
	background-image: url(../images/swoosh.png);
	background-repeat: no-repeat;
}
/* IE5.5 */
.main {
	display:table-cell;
*display:block;
	width:auto;
}
.body, .main {
*zoom:1;
}
.body:after, .main:after {
	clear:both;
	display:block;
	visibility:hidden;
	overflow:hidden;
	height:0 !important;
	line-height:0;
	font-size:xx-large;
	content:" x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x ";
}
.page {
	margin:0 auto;
	width:950px;
	_text-align:left;
	margin-top: 1em;
} /* wraps other template elems to set width */ /* text-align IE5.5 */
/* "old school" and "liquid" extend page to allow for different page widths */
.oldSchool {
	width:750px;
}
.gs960 {
	width:960px;
}
.liquid {
	width:auto;
	margin:0;
}

/* ****************HEADER*************** */
.head {
	width:100%;
	border-bottom:#009933 solid 3px;
}
.pump {
	width:500px;
	position:absolute;
	margin-left:400px;
	margin-top: 10px;
}
/* **************** CONTENT OBJECTS ***************** */
/* ====== Default spacing ====== */
h1, h2, h3, h5, h6, ul, ol, dl, p, blockquote {
	padding:10px;
}
h1, h2, h3, h4, h5, h6, img {
	padding-bottom:0px;
}
pre {
	margin: 10px;
}
table h1, table h2, table h3, table h4, table h5, table h6, table p, table ul, table ol, table dl {
	padding:0;
}
/* ====== Elements ====== */
img {
	display:block;
}

img.photo {margin-left:1em;}
img.right{float:right;}

em {
	font-style: italic;
}
strong {
	font-weight:bold;
}
hr {
	border: 5px solid #e2e2e2;
	border-width: 0 0 5px 0;
	margin: 20px 10px 10px 10px;
}
code {
	color:#0B8C8F;
}
/* ====== Headings ====== */
/* .h1-.h6 classes should be used to maintain the semantically appropriate heading levels - NOT for use on non-headings */
h1, .h1 {
	font-size:196%;
	font-weight:normal;
	font-style: normal;
	color:#003300;
	text-transform:uppercase;
	display: block;
	border-bottom: solid #009933 2px;
}
h2, .h2 {
	font-size:125%;
	font-weight:bold;
	font-style: normal;
	color:#003300;
}
h3, .h3 {
	font-size:115%;
	font-weight:bold;
	font-style: normal;
	color: #017359;
}
h4, .h4 {
	font-size:105%;
	font-weight:normal;
	font-style: normal;
	color:#003300;
	text-transform:uppercase;
	padding:0px 10px;
		margin:0 auto;
}
h5, .h5 {
	font-size:108%;
	font-weight:bold;
	font-style: normal;
	color:#669933;
}
.tagline {font-size:118%;
	font-weight:bold;
	font-style: normal;
	color:#009933;
	text-transform:uppercase}
	
h6, .h6 {
	font-size:108%;
	font-weight:normal;
	font-style: italic;
	color:#669933;
	
}
.row {
	clear:both;
}

p {
	font-size:13px;
	color:#000000;
	line-height: 1.5em;
}

p.small {
	font-size:0.85em;
	
	color:#017359;
}


.small a {
	font-weight:bold;
	color:#003300;
}

p.dropcap:first-child:first-line,   
p.dropcap > .ad:first-child + p:first-line  
 {  
     text-transform:uppercase;  
    position:relative;  
     font-size:0.95em;  
    letter-spacing:1px;  
  }  
 p.dropcap:first-child:first-letter,   
p.dropcap > .ad:first-child + p:first-letter  
   {  
     letter-spacing:0;  
     text-transform:uppercase;  
     color:#017359; 
      font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;
      font-size:3.5em;  
       float:left;  
       margin:0.13em 0.2em 0 0;  
     line-height:0.7;  
  }  





ul.indent_plain {
	font-size:13px;
	color:#000000;
	list-style-type: none;
	line-height: 1.2em;
	margin-left:0px;
}

ul.indent_plain li {
	margin-bottom:8px;
}

ol {font-size:0.8em;
	color:#000000;
	margin-left:25px;
	line-height: 1.5em;}


ul.indent {
	font-size:0.8em;
	color:#000000;
	margin-left:25px;
	list-style-type: circle;
	line-height: 1.5em;
}



/* if additional headings are needed they should be created via additional classes, never via location dependant styling */
.category {
	font-size:108%;
	font-weight:normal;
	font-style: normal;
	text-transform:uppercase;
	color: #333;
}
.category a {
	color: #333;
}
.important a {
	font-weight:bold;
}
/* links */
a {
	color: #017359;
	font-weight:bold;
	text-decoration: underline;
}
/*a:focus, a:hover {
	color:#003300;
}
a:focus {
	background-color:#FFFFCC;
}*/
a:visited {
	color:#666666;
}
/* ====== Lists ======*/
/* numbered list */
ol.simpleList li {
	list-style-type: decimal;
	margin-left:40px;
}
/* standard list */
ul.simpleList li {
	list-style-type:disc;
	margin-left:40px;
	font-size:.9em;
}
/* ====== Tables ====== */
.data {
	padding: 20px;
	position:relative;
	zoom:1;
	vertical-align: top;
	border-right:solid 1px transparent;/* border fixes a FF2 bug which causes the data table to overlay its borders*/
}
.data table {
	width:100%;
	border:1px solid #AE0345;
}
th, td {
	vertical-align:top;
	font-size: 80%;
}

.tdborder {border-left:1px solid #009933;}
.txtC, .data .txtC td, .data .txtC th {
	text-align:center;
}
.txtL, .data .txtL td, .data .txtL th {
	text-align:left;
}
.txtR, .data .txtR td, .data .txtR th {
	text-align:right;
}
.txtT, .data .txtT td, .data .txtT th {
	vertical-align:top;
}
.txtB, .data .txtB td, .data .txtB th {
	vertical-align:bottom;
}
.txtM, .data .txtM td, .data .txtM th {
	vertical-align:middle;
}
.data th, .data td {
	padding:3px 20px
}
.data thead tr {
	background-color: #fff0f8;
}
.data th {
	color: #000;
	font-weight:bold
}
/* specification table - extends data table */
.spec {
	padding:10px;
}
.spec table {
	border-top: 1px solid #e2e2e2;
	border-bottom-color:#fff;
	border-left:none;
	border-right:none;
}
.spec th, .spec td {
	border:1px solid #e2e2e2;
	border-width: 1px 0;
	padding-left:0;
}
.spec .odd, .spec .even {
	background-color: #fff;
}
/* ====== blockquote ====== */
cite {
	display:block;
	text-align:right;
	padding-top: 10px;
}
/* ====== callout ====== */
.callout {
	font-size:189%;
	color:#999999;
	font-style:italic;
}
.callout cite {
	display:block;
	text-align:right;
	padding-top: 30px;
	font-size:69.25%;
}
.callout span.quot {
	font-size: 500%;
	vertical-align: sub;
	color:#e2e2e2;
	line-height:25px;
	font-weight:bold;
}
.callout span.quotLast {
	vertical-align:middle;
}
/* ====== image treatments (get more from jason santa maria) ====== */
.caption {
	font-size:13px;
	color:#666666;
	font-style:italic;
	padding-top:0;
}
/* will need to either
1. find a way to capture the width of the caption in the width of the image or flash
2. Set some default widths, mby use flickr widths?
*/
/* ====== media ====== */
.media {
	overflow:hidden;
	overflow:visible;
	zoom:1;
	margin:10px;
}
.media .img {
	float:left;
	margin-right: 10px;
}
.media .img img {
	display:block;
}
.media .imgExt {
	float:right;
	margin-left: 10px;
}
/* ====== special formatting classes ====== */
.detail {
	color: #777;
	font-size:11px;
	display:block;
}


.breadcrumb li{ display: inline; font-size:75%;}

.breadcrumb a {
	color: #006633 !important;
}

/* Navigation*/

/*** Title bar _ navigation ***/
.titlebar {
	width:55%;
	padding:0px 0px 0px 0px;
}


ul#topnav {
	margin: 0; padding: 0;
	float: left;
	width: 60%;
	list-style: none;
	position: relative; /*--Set relative positioning on the unordered list itself - not on the list item--*/
	font-size: .9em;
	text-transform:uppercase;
	
	
}
ul#topnav li {
	float: left;
	margin: 0; padding: 0;
	
}
ul#topnav li a {
	padding: 8px 15px;
	display: block;
	color:#003300;
	text-decoration: none;
}

ul#topnav li a:hover {
	color:#FFFFFF;
	text-decoration: underline;
	
}
ul#topnav li:hover { background:url(../images/tabs.png) repeat-x;  }
/*--Notice the hover color is on the list item itself, not on the link. This is so it can stay highlighted even when hovering over the subnav--*/


ul#topnav li.active{ background:url(../images/tabs.png) repeat-x;}
/*--Notice the hover color is on the list item itself, not on the link. This is so it can stay highlighted even when hovering over the subnav--*/

ul#topnav li.active a {color:#FFFFFF; 

}

ul#topnav li.active span a {color:#003300; 

}

ul#topnav li span {
	float: left;
	padding: 8px 0;
	position: absolute;
	left: 0; top:33px;
	display: none; /*--Hide by default--*/
	width: 90%;
	font-size:75%;
	background: url(../images/subtabs.png) repeat-x;;
	color: #fff;
	/*--Bottom right rounded corner--*/
	-moz-border-radius-bottomright: 5px #003300;
	-khtml-border-radius-bottomright: 5px;
	-webkit-border-bottom-right-radius: 5px;
	/*--Bottom left rounded corner--*/
	-moz-border-radius-bottomleft: 5px;
	-khtml-border-radius-bottomleft: 5px;
	-webkit-border-bottom-left-radius: 5px;
	 
}
ul#topnav li:hover span { display: block;  } /*--Show subnav on hover--*/
ul#topnav li span a { display: inline; } /*--Since we declared a link style on the parent list link, we will correct it back to its original state--*/
ul#topnav li span a:hover {text-decoration: underline; color:#FFFFFF;}


#nav {
	width:44em;
	height:2em;
	margin:0 auto 0 .5em;
	border-bottom: solid #006633 2px;
	padding-left: 1em;
}
#nav ul {
	width: 100%;
	list-style: none;
	margin: 0;
	padding: 0;
	
}
#nav ul li.tab ul { /* width for sub-nav right side*/
	/*background:url(../images/subnav-tabs_r.png);
	background-position:bottom right;
	background-repeat:no-repeat;*/
	width: 10em;
}
#nav ul li.tab_active ul {
	/*background:url(../images/subnav-tabs_r.png);
	background-position:bottom right;
	background-repeat:no-repeat;*/
	width:10em;
}
#nav a {
	display: block;
	color: #fff;
	text-decoration: none;
	padding: 2px 4px 0px 4px;/*padding in the tab itself*/
	background:none;
}
#nav li {
	padding: 0;
	background:none;
}

/*  HOMEPAGE  */
#homeContent {
	width:44em;
	margin: 0 0 0 1.5em;
	margin-top: 3em;
	
}

/* Feature box image container */
#slides {
	width: 40em;
	height: 310px;
	background:url(../images/featureborder.png);
	background-repeat:repeat-x;
	
	
}
#slides div { width: 275px; padding:10px 14px;}
#slides div img {margin: 0px; width: 275px; height: 170px; padding: 0px; background: #fff }
#slides h3 {margin-bottom:8px;}
div.nav {height:12px;margin-left:10px;margin-top:5px;width:200px;}
div.nav a.activeSlide {background-position:0 -16px;}
div.nav a {background:transparent url(http://www.wsdot.wa.gov/media/images/back/navigator.png) no-repeat scroll 0 0;display:block;float:left;font-size:0px;height:8px;margin:3px;width:8px;color:#e6e6e6;}

/*  MAP  */
#map {
	position:absolute;
	margin-left: 800px;
}
/*  BLOCK SKINS  */
/* ====== Contour blocks ====== */
/* remove background-image:" to default to square corners for IE */
/*-- photo (extends complex) ----- */
.photo .inner {
	border:solid 10px #fff;
	margin:0 4px;
}/* muck with margins to change how the block will align with other blocks, any value between 0-10px */
.photo b {
	background-image:url(file:///HQA1604002/Users/mulhere/Desktop/stubbornella-oocss-4890871/core/skin/photo.png);
}
.photo .tr, .photo .tl {
	width:20px;
}
.photo .top, .photo .bottom {
	height:4px;
	margin-top:0px;
}
.photo .bl, .photo .br {
	height:16px;
	margin-top: -12px;
}
/* ----- flow (extends complex) ----- */
.flow {
	margin:6px;
}
.flow b {
	background-image:url(../images/even.png);
}
.flow .inner {
	padding:0 4px;
}
.flow .top {
	height:4px;
}
.flow .bottom {
	height:4px;
	margin-top:-4px;
}
.flow .br, .flow .bl {
	margin-top:-6px;
}/* margin top = bottom height - corner height */
/* ----- shadow test (experimental attempt to match "flow" cross browser w no img)----- */

/* **************** BLOCK STRUCTURES ***************** */
/* mod */
.mod {
	margin:10px;
}
.mod .inner {/*background: url(skin/transparent.png) repeat left top;*/
}
.inner, .bd, .ft {
*zoom:1;
}
.inner:after, .hd:after, .bd:after, .ft:after {
	clear:both;
	display:block;
	visibility:hidden;
	overflow:hidden;
	height:0 !important;
	line-height:0;
	font-size:xx-large;
	content:" x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x ";
}
.inner {
	position:relative;
}
b {
	display:block;
	background-repeat:no-repeat;
	font-size:1%;
	position:relative;
	z-index:10;
}
.tl, .tr, .bl, .br {
	height:10px;
	width:10px;
	float:left;
}
.tl {
	background-position: left top;
}
.tr {
	background-position: right top;
}
.bl {
	background-position: left bottom;
}
.br {
	background-position: right bottom;
}
.br, .tr {
	float:right;
}
.tr, .tl {
	overflow:hidden;
	margin-bottom:-32000px;
}/* margin bottom needs to be < -9px */
.bl, .br {
	margin-top:-10px;
}
.top {
	background-position:center top;
}
.bottom {
	background-position:center bottom;
	_zoom:1;
}/* this zoom required for IE5.5 only*/
/* complex */
.complex {
	overflow:hidden;
*position:relative;
*zoom:1;
}/* position/zoom required for IE7, 6, 5.5 */
.complex .tl, .complex .tr {
	height:32000px;
	margin-bottom:-32000px;
	width:10px;
}
.complex .bl, .complex .br {/*margin-top:0;*/
}
.complex .top {
	height:5px;
}
.complex .bottom {
	height:5px;/*margin-top:-10px;*/
}
.fixed {height:250px;}
.complex .hd {border-bottom:#006600 solid 1px;}


 @media screen and (max-width: 319px) {
.unit {
float: none !important;
width: auto !important;
}
}
.line:after, .lastUnit:after {
	clear:both;
	display:block;
	visibility:hidden;
	overflow:hidden;
	height:0 !important;
	line-height:0;
	font-size:xx-large;
	content:" x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x ";
}
.line {
*zoom:1;
}
.unit {
	float:left;
}
.size1of1 {
	float:none;
}
.size1of2 {
	width:50%;
}
.size1of3 {
	width:33.33333%;
}
.size2of3 {
	width:66.66666%;
}
.size1of4 {
	width:25%;
}
.size3of4 {
	width:75%;
}
.size1of5 {
	width:20%;
}
.size2of5 {
	width:40%;
}
.size3of5 {
	width:60%;
}
.size4of5 {
	width:80%;
}
.lastUnit {
	display:table-cell;
	float:none;
	width:auto;
*display:block;
*zoom:1;
	_position:relative;
	_left:-3px;
	_margin-right:-3px;
}
/* **************FOOTER************ */
.push {
	width:100%;
	height:7em;
}
.foot {
	width:100%;
	background-color:#006633;
	text-align: center;
	color: #FFFFFF;
	padding-top: 2em;
	padding-bottom: 10px;
	font-size: 0.7em;
	height: 200px;
	background-image: url(../images/bottom.png);
	background-repeat: repeat-x;
}
.navigation {
	width:100%;
	padding: .3em 0;
	margin-top: 80px;
}
.foot h2 {
	color:#FFFFFF;
}
.foot p {
	color:#FFFFFF;
}
.copyright{
	padding:5px 0px;
	font-size:1em;
	color:#FFFFFF;
	text-align:center;
}

.border {border-left: solid 1px #006633; padding-left:5px;}

.WSDOT_logo {
	margin:1.5em auto;
}
.foot a{
color:#FFFFFF;}

/* *****featurebox***** */

/*Slideshow*/	
#slideshow{
	width:704px;
	height:330px;
	margin:25px 0px 0px 25px;
	background-image: url(../images/header-bg.png);
	background-repeat: repeat-x;
}
#slideshow div {
	width: 704px;
	height: 265px;
	margin-top: 30px;
}
#slidesshow div img {margin: 0px; width: 379px; height: 244px; padding: 0px; background: #fff }
div.nav {height:20px;margin-left:340px;width:150px; }
div.nav a.activeSlide {background-position:0 -20px;}
div.nav a {background:transparent url(http://www.westcoastgreenhighway.com/images/navigator.png) no-repeat scroll 0 0;display:block;float:left;font-size:0px;height:20px;margin:3px 5px;width:20px;}

#slideshow img {
	float: left;
}

#slideshow h2 {
	display:block;
	width:45%;
	text-align:left;
	font-size:1.2em;
	padding:0;
	float: right;
	margin-bottom: 10px;
}


#slideshow .readmore {
	display:block;
	width:45%;
	text-align:right;
	font-size:80%;
	margin-top: 20px;
	float: right;
}


#slideshow h2 a {
	color:009933;
	text-decoration:none;
  }
#slideshow p {
	font-size:85%;
	line-height:1.5em;
	color:#777;
	display:block;
	width:45%;
	padding:0;
	border:0;
	color: #000000;
	font-size: 0.8em;
	line-height: 1.3em;
	float: right;
}


#slideshow .textbox {
	width:275px;
	float:right;
	margin-top: 30px;
}

#slideshow .cs_push{width:100%; height:30px;}




/*
 * Color, Border, and Button Rules
 */
.contentslider {
  padding:10px; /* This acts as a border for the content slider */
   /* This is the color of said border */
}
.cs_wrapper, .cs_article {
   /* Background color for the entries */
}
.cs_leftBtn, .cs_rightBtn {
  width:30px; /* Should be as wide as the button graphic being used */
  /* This will probably match the contentslider bg color */
}

/*
 * Article styles (font, color, etc.)
 *
 * If textResize is set to TRUE, sizing shouldn't need to be touched. However,
 * depending on the sizes you have defined, additional tweaking may be
 * required in order to get the text to display properly.
 */
.cs_article h2 {
  font-size:200%;
  line-height:1.125em;
}
  .cs_article h2 a {
	color:009933;
	text-decoration:none;
  }
.cs_article p {
  font-size:85%;
  line-height:1.5em;
  color:#777;
}
.cs_article .readmore {
  font-size:80%;
}

/*
 ******************************************************************************
 * These styles may be affected by the plugin, so avoid changing them if 
 * it's not absolutely necessary.
 ******************************************************************************
 */

.cs_article {
	float:left;
	position:relative;
	top:0px;
	left:0;
	display:block;
	width:704px;
	height:300px;
	margin:0 auto;
	padding:0;
}
.cs_article h2 {
	display:block;
	width:35%;
	margin:27px 20px 5px 59%;
	text-align:left;
	font-size:1.2em;
	padding:0;
}
.cs_article img {
	position:absolute;
	top:27px;
	left:30px;
	border:0;
	-ms-interpolation-mode:bicubic;
}
.cs_article p {
	display:block;
	width:35%;
	margin:0 20px 5px 59%;
	padding:0;
	border:0;
	color: #000000;
	font-size: 0.8em;
	line-height: 1.3em;
}
.cs_article .readmore {
	display:block;
	width:35%;
	margin:0 3% 1% 59%;
	text-align:right;
}


/*Photo Gallery - Lightbox*/
#lightbox{	position: absolute;	left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%;  /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left; background: url(../images/prevlabel.gif)left 15% no-repeat; }
#nextLink { right: 0; float: right; background: url(..images/nextlabel.gif) right 15% no-repeat;}
#prevLink:hover, #prevLink:visited:hover { background: url(..images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(..images/nextlabel.gif) right 15% no-repeat; }

#imageDataContainer{ font: 10px "Century Gothic", Arial, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%	; }

#imageData{	padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}	 	

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }