/**
 * SSMRCA HTML5 stylesheet
 * @author		Greg Tammi <greg@pictographics.com>
 * @copyright	(c) 2010+ SK Group
 * @since		November 30, 2010
 */

* { margin:0; padding:0; }
/* html5 specific elements */
header,footer,section,article,time,nav,aside { display:block; }

/* helper classes */
.gutter { padding:5px; }
.clear { clear:both; }
.wrapper { width:1000px; margin:0 auto; }

/* body style */
body { background:#369; font:0.95em Arial, verdana, sans-serif; color:#000; }

/* site header */
#header, #footer { width:100%; background:#369; }
#header header { position:relative; height:230px; overflow:hidden; background-position:bottom left; background-repeat:no-repeat; }
#header header.i0 { background-image:url(/uploads/image/header-images/water_quality.jpg); }
#header header.i1 { background-image:url(/uploads/image/header-images/flood_plain_mapping.jpg); }
#header header.i2 { background-image:url(/uploads/image/header-images/forest_management.jpg); }
#header header.i3 { background-image:url(/uploads/image/header-images/erosion_control.jpg); }
#header header.i4 { background-image:url(/uploads/image/header-images/drinkingwaterlogo.jpg); }
#header header.i5 { background-image:url(/uploads/image/header-images/conservation_areas.jpg); }
#header header.i6 { background-image:url(/uploads/image/header-images/flood_forecasting_and_warning.jpg); }
#header header.i7 { background-image:url(/uploads/image/header-images/fort_creek_dam.jpg); }
#header header.dw { background-image:url(/uploads/image/header-images/drinkingwaterlogo.jpg); }
#header nav { background:#369; position:absolute; top:10px; left:30px;
  border-radius: 0 0 10px 10px / 0 0 10px 10px; 
  -moz-border-radius: 0 0 10px 10px / 0 0 10px 10px;
  -webkit-border-radius: 0 0 10px 10px / 0 0 10px 10px;
}
#header nav ul { list-style:none; padding:10px 15px; }
#header nav li { display:inline; padding:0 8px; }
#header nav li.first { padding-left:0; }
#header nav li a { font-size:11px; color:#fff; text-transform:uppercase; text-decoration:none;}
#header nav li a:hover, #header nav li.active a { color:#3cf; text-decoration:none; }

/* search form */
section#search { position:absolute; top:10px; right:30px; background:#369;
  border-radius: 0 0 10px 10px / 0 0 10px 10px; 
  -moz-border-radius: 0 0 10px 10px / 0 0 10px 10px;
  -webkit-border-radius: 0 0 10px 10px / 0 0 10px 10px;
}
#search form { padding:10px 15px; }
#search form input#searchValue { width:200px; border:1px solid #ccc; padding:3px; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px;
}

#outer-content-wrapper { background:#fff; width:100%; min-height:400px;}

/* masthead */
#masthead { padding:5px 0; }
#masthead header { float:left;width:190px; height:150px; background:url(/img/logo.jpg) 5px 20px no-repeat; }
#masthead header h1 { text-indent:-999em; }
#masthead ul { width:787px; border:0px solid #000; float:right; list-style:none;  }
/* background images and link positioning */
#masthead li { width:130px; height:150px; background-image:url(/img/nav.jpg); position:relative; float:left; margin:0 0 0 1px; }
li#watershed	{ background-position: 0 0; }
li#planning		{ background-position: -130px 0; }
li#flood 		{ background-position: -260px 0; }
li#drinking 	{ background-position: -390px 0; }
li#recreation 	{ background-position: -520px 0; }
li#children 	{ background-position: -650px 0; }
#masthead li a{ width:130px; color:#fff; position:absolute; bottom:6px; text-align:center; text-transform:uppercase; text-decoration:none; font-size:10px; }
/* submenus */
#masthead li ul { position:absolute; display:none; left:5px; top:150px; width:120px; background:#f3f3f3; border:1px solid #e1e1e1; border-width:0 1px 1px 1px; }
#masthead li li { background-image:none; height:auto; margin:5px 0 0 0;}
#masthead li li a { display:block; color:#777; position:relative; padding:5px 0; width:120px; text-align:center;}
#masthead li li a:hover { color:#fff; }
#masthead li:hover ul { display:block; }
/* now for the background colours of the submenus */
li#watershed li a:hover	{ background-color:#3c8942; }
li#planning  li a:hover	{ background-color:#63bc53; }
li#flood li a:hover		{ background-color:#a2d28a; }
li#drinking li a:hover	{ background-color:#0085c3; }
li#recreation li a:hover{ background-color:#5bb4e5; }
li#children li a:hover	{ background-color:#8ec8e7; }

/* sidebar */
#sidebar { float:left; width:190px; border:0px solid #000; margin-bottom:15px; }
#sidebar div { text-align:left; font-size:75%; }
#sidebar div h2 { text-indent:-20px;text-align:center; font-size:12px; text-transform:uppercase; }
#sidebar div h3 { color:#369; }
#sidebar div p { margin:5px 0; }
#sidebar div h2 span { display:none; }

/* content area */
#content { margin:0 0 0 210px; padding-bottom:15px; width:785px; border:0px solid #000;}
#content h1, #content h2, #content h3, #content h4, #content h5, #content h6 { color:#369; padding-bottom:15px; }
#content h1 { font-size:22px; }
#content h2 { font-size:20px; }
#content h3 { font-size:18px; }
#content h4 { font-size:16px; }
#content h5 { font-size:14px; }
#content h6 { font-size:12px; }
#content ul, #content li { margin:10px 0 10px 22px; }
#content p { line-height:18px; font-size:12px; padding-bottom:20px; }
#content a { color:#004299; font-weight:bold;  }
#content a:hover { color:#800000; text-decoration:underline; }

/* footer */
#footer { clear:both; }
#footer footer { text-align:center; padding-top:15px; }
footer ul { float:left; width:445px; border:0px solid #fff; margin:0 auto; list-style:none; color:#fff; }
footer li { float:left; color:#d6f4fd; position:relative; margin:0 0 0 3px;}
footer li:before { content: '\2022' ; }
footer li.first:before { content:''; }
footer li a { position:relative; top:-2px; color:#eee; text-decoration:none; font-size:11px; text-transform:lowercase; padding: 0 0 0 5px; }
footer li a:hover { color:#fff; text-decoration:none; }
footer p { float:right; width:250px; text-align:right; font-size:10px; text-transform:uppercase; color:#c0bdbd; }
footer p a { color:#fff; text-decoration:none; }
footer p a:hover { color:#3cf; }

/* search results page */
#search_results a { padding-left:10px; }
