/* CSS Document */
body { background-color:#08255e; }
#outback {width:100%; height:100%; background-color:#788cad; background-image:url(../images/back.jpg);background-repeat:no-repeat; background-position: top center; position:relative; float:left; display:inline;

}
#outer{
	width:963px; margin:0px auto;
	text-align:left;/* reset text back to left due to ie5.x fix */
	background-image:url(../images/back_content_tile2.jpg); 
	background-position:0 480px; background-repeat:no-repeat;
}
#header{
	width:948px; height:100px; padding:0; margin:0 auto; position:relative; z-index:100;
	background-image:url(../images/hdr_nav_back2.jpg); background-repeat:repeat-x; background-position:top left;
}
div#outer div#ocw-header {height:114px; padding:0; text-align:center;}
div#outer div#ocw-header img { text-align:center; padding:0; margin:0 auto; }
#content {width:948px;margin:0 auto;position:relative; float:left;  padding-top:1px;  margin-left:9px;}
#home #content {padding-top:0;}

a {color:#2b3990;}
input, select, textarea {font-family:Arial, Helvetica, sans-serif; font-size:11px; border:1px solid #DDD; padding:1px 3px;}
button { background-color:#EEE; padding:1px 10px; cursor:crosshair;}

/*  NAVIGATION ----------------------------------------- */
ul#nav{
	height:26px; margin:0; padding:0; text-align:left; background:url(../images/hdr_nav_back2.jpg);
}
ul#nav li ul { z-index:20;}
ul#nav li{display:inline; margin:0; padding:0; text-align:center;z-index:20;}
ul#nav li a{color:#333; padding:0px 7px 0px 7px; font-size:78%; height:26px;border-right:1px solid #FFF;  line-height:26px;
			background-image:url(../images/nav_btn.jpg); background-repeat:repeat-x; background-position:top left;}
ul#nav li#firstnav a { padding-right:30px; }
ul#nav li a img{display:inline; position:absolute; margin-top:4px;}
ul#nav li.midnav a{ border-right:4px solid #FFF; }
ul#nav li.lastnav a{ border-right:0px; }
ul#nav li a:hover, ul#nav li.current a:hover,  ul#nav li.altnav a:hover {	color:#000; background-image:url(../images/nav_btn_hi.jpg); background-repeat:repeat-x; color:#333;  }
ul#nav li.currentx a { background-image:url(../images/nav_btn_sel.jpg); background-repeat:repeat-x; }
#home ul#nav li.nav-home a,  #residents ul#nav li.nav-residents a, #kids ul#nav li.nav-kids a, #business ul#nav li.nav-business a,#schools ul#nav li.nav-schools a,
#news ul#nav li.nav-news a, #resources ul#nav li.nav-resources a, #contacts ul#nav li.nav-contacts a, body#residents.storm101 ul#nav li#topnav-storm101 a 
{background-image:url(../images/nav_btn_sel.jpg); background-repeat:repeat-x;}
#residents ul#nav li.nav-residents ul li a, #kids ul#nav li.nav-kids ul li a, #business ul#nav li.nav-business ul li a, #schools ul#nav li.nav-schools ul li a, #news ul#nav li.nav-news ul li a, 
#resources ul#nav li.nav-resources ul li a, body#residents.storm101 ul#nav li.nav-residents a 
{background-image:none;}

ul#nav li.altnav  {font-size:76%; }
ul#nav li.altnav a{ padding-top:8px; padding-bottom:3px;  padding:1px 4px 1px 4px;text-transform:uppercase;  color:#000;
background-image:url(../images/nav_btn.jpg); background-repeat:repeat-x; background-position:top left;}
	#nav li {
		float:left; 
		display:block; 
		position:relative;
		z-index:1; width:88px;
	}
	#nav li.nav-home {width:40px;}
	#nav li.nav-residents {width:76px;}
	#nav li.nav-kids {width:90px;}
	#nav li.nav-schools {width:64px;}
	#nav li.nav-business  {width:70px;}
	#nav li.nav-resources {width:80px;}
	#nav li.altnav {width:123px;}
	#nav li#altnav-stormwater101xxx {width:102px;}
	#nav li#topnav-storm101 {width:108px;}
	#nav li#altnav-contacts {width:85px;}
	#nav li#altnav-contacts a{border-right:none;}
	/* this is the parent menu */
	#nav li a {
		display:block; 
		font-weight:700;  
		text-decoration:none; 
		color:#fff; 
		text-align:center; 
		color:#333;
	}

	#nav li a:hover {
		color:#fff;
	}
	
	/* you can make a different style for default selected value */
	#nav a.selected {
		color:#f00;
	}
	#residents ul#nav li.nav-residents ul li a{background-image:none;}
		/* submenu, it's hidden by default */
		ul#nav ul {
			position:absolute; 
			left:0; 
			display:none; 
			margin:0 0 0 -1px; 
			padding:0; 
			list-style:none;
		}
		
		ul#nav ul li {
			 width:200px;
			background-image:none;
			font-size:13px;			 
			float:left; 
			border-top:1px solid #fff;
			z-index:25;
		}
		
		/* display block will make the link fill the whole area of LI */
		ul#nav ul li a {
			display:block;  
			background-image:none;
			color:#000;
			background-color:#EB8;
			text-align:left;
			z-index:27;
		}
		
		ul#nav ul li a:hover {
			text-decoration:underline;	
			background-image:none;
			background-color:#FC9;
			text-align:left;
		}

/* fix ie6 small issue */
/* we should always avoid using hack like this */
/* should put it into separate file : ) */
*html #nav ul {
	margin:0 0 0 -2px;
}
img, div { behavior: url(../js/iepngfix.htc) }

/* ------------------------------  SUB-NAV HIGHLIGHTS ----------------------------------------- */
body#business.food div#sidebar1 ul li.sub-bus-food a ,
body#business.pool div#sidebar1 ul li.sub-bus-pool a ,
body#business.mobile div#sidebar1 ul li.sub-bus-mobile a ,
body#business.pet div#sidebar1 ul li.sub-bus-pet a ,
body#business.land div#sidebar1 ul li.sub-bus-land a ,
body#business.auto div#sidebar1 ul li.sub-bus-auto a ,
body#business.construction div#sidebar1 ul li.sub-bus-construction a,
body#business.office div#sidebar1 ul li.sub-bus-office a,
body#kids.items div#sidebar1 ul li.sub-kids-items a,
body#kids.water div#sidebar1 ul li.sub-kids-water a,
body#kids.pollution div#sidebar1 ul li.sub-kids-pollution a,
body#kids.recycle div#sidebar1 ul li.sub-kids-recycle a,
body#residents.storm101 div#sidebar1 ul li.sub-res-storm101 a,
body#residents.watershed div#sidebar1 ul li.sub-res-watershed a,
body#residents.sewer div#sidebar1 ul li.sub-res-sewer a,
body#residents.pollutants div#sidebar1 ul li.sub-res-pollutants a,
body#residents.green div#sidebar1 ul li.sub-res-green a,
body#residents.better div#sidebar1 ul li.sub-res-better a,
body#residents.testiq div#sidebar1 ul li.sub-res-testiq a,
body#residents.steward div#sidebar1 ul li.sub-res-steward a,
body#schools.drip div#sidebar1 ul li.sub-school-drip a,
body#schools.water div#sidebar1 ul li.sub-school-water a,
body#schools.wet div#sidebar1 ul li.sub-school-wet a,
body#schools.wow div#sidebar1 ul li.sub-school-wow a,
body#schools.outdoor div#sidebar1 ul li.sub-school-outdoor a,
body#schools.discovery div#sidebar1 ul li.sub-school-discovery a,
body#schools.enviro div#sidebar1 ul li.sub-school-enviro a

{ color:#F30;}

/* ------------------------------  FORMS ----------------------------------------- */
form#contact label, form#contact textarea {clear:both; font-size:11px; display:block;}
form#contact input {clear:both; font-size:11px; width:95%; margin-bottom:8px; padding:1px; clear:both;}
form#contact textarea {width:95%;}
body#contacts form#contact ul {width:420px; float:left; margin-left:0;}
body#contacts div#main  form#contact li{ list-style:none; margin-bottom:0; padding-bottom:0;}
body#contacts form#contact label {width:90px; float:left; margin-right:5px; text-align:right; clear:none;}
#contactcity {margin-bottom:8px;}
body#contacts form#contact input {width:300px; height:15px;} 
body#contacts form#contact input#chkNewsletter {width:20px; height:15px; display:inline; margin-left:70px; margin-top:10px;} 
body#contacts form#contact textarea {width:300px; float:left; clear:right;} 
body#contacts form#contact #btnSubmit {width:100px; float:left; margin-left:95px; margin-top:10px; height:22px;}
body#contacts .formtextr {display:inline; float:left; margin-left:96px; margin-top:-23px; position:relative;}

body#resources form#contact input, body#resources form#contact textarea {clear:both; font-size:11px; width:300px;}
body#resources form#contact #btnSubmit {width:150px;}
body#resources form#contact input#chkNewsletter {width:20px; height:15px; display:inline; margin-left:0px; margin-top:10px;} 
body#residents form#contact input#chkNewsletter {width:20px; height:15px; display:inline; margin-left:0px; margin-top:10px;} 
body#residents .formtextr {display:inline; float:left; margin-left:30px; margin-top:-23px; position:relative;}
body#resources .formtextr {display:inline; float:left; margin-left:30px; margin-top:-23px; position:relative;}

.formtextr {margin-left:30px;}

/* ------------------------------  CONTENT ----------------------------------------- */

li a { color:#2B3990;}
p {font-size:70%; line-height:125%; color:#555; padding:6px 0 6px 0;}
h2 {font-size:120%;}
h3 {font-size:100%; color:#000; margin:16px 0 0px 0px; padding:10px 0 10px 15px; border-bottom:1px solid #AAA; }
h4 {font-size:70%; color:#000; margin:16px 0 0px 0px; padding:10px 0 10px 0px; border-top:1px dotted #AAA; }

#breadcrumb { height:43px; margin-left:0px;}
#breadcrumb p {color:#888; font-size:70%; margin-left:22px; margin-top:0px;}
#breadcrumb p a { text-decoration:underline;}

div#main { width:484px; margin-left:17px; float:left; display:inline;  border-right:1px solid #AAA;}
div#main ul, div#sidebar1 ul { margin-left:12px; margin-right:8px;}
div#main li {padding:4px 0 4px 0px; margin-left:4px;  line-height:15px; font-size:70%; color:#333; list-style-type:disc; vertical-align:top; display:inline-block;}
.thumbgrid a	{display:block; height:190px;}
body#news div#main a { text-decoration:underline;}
body#news  div#main ul.ui-tabs-nav {margin-left:0;}
body#news  div#main div.ui-tabs-panel h3 {padding-bottom:0;}
body#news #tabs-1 p, body#news #tabs-2 p, body#news #tabs-3 p, body#news #tabs-4 p,
body#news #tabs-5 p, body#news #tabs-6 p, body#news #tabs-7 p, body#news #tabs-8 p,
body#news #tabs-9 p, body#news #tabs-10 p, body#news #tabs-11 p, body#news #tabs-12 p 
{font-size:13px; }
div#main li ul li {font-size:11px; text-transform:capitalize;}
div#main p.nobottom {margin-bottom:0; padding-bottom:0;}
div#main p {padding:6px 12px 6px 0px;}
div#main p.subtitle {padding:0 0 5px 0; margin:-4px 0 0 0; font-size:13px; font-weight:bold;}
body#resources div#main li { list-style-type:none; margin-left:0; display:block;}

/* ------------------------------ SIDEBAR --------------------------------------- */
div#sidebar1 li { padding:5px 0 5px 16px; margin-left:10px; border-top:1px dotted #AAA; font-size:72%; color:#333;
				  background-image:url(../images/arrow.gif); background-position:left 60%; background-repeat:no-repeat; }
div#sidebar1 { width:233px; float:left; display:inline; border-right:1px solid #AAA; line-height:15px;}
div#sidebar2 { width:190px; margin-left:12px; float:left; display:inline;}
div#sidebar1, div#main, div#sidebar2 { min-height:400px;}
div#sidebar1 h2, div#sidebar1 p {margin-left:20px; margin-right:8px;} 
div#sidebar2 ul#related-links, div#sidebar2 ul#archive-links { margin-left:0px; margin-right:8px;}
div#sidebar2 ul#related-links li, div#sidebar2 ul#archive-links li { padding:5px 0 5px 16px; margin-left:0px; border-top:1px dotted #AAA; font-size:72%; color:#2B3990;
				  background-image:url(../images/arrow.gif); background-position:left center; background-repeat:no-repeat; }
div#main li.downloadx, div#sidebar1 li.download {background-image:none; padding-left:0; background-position:left 60%; }
div#sidebar2 ul#related-links li.download {background-image:none; padding-left:0; background-position:left 60%; }
div#sidebar1 a:hover, div#main a:hover, div#sidebar2 a:hover { color:#09C;}
div#sidebar2 p {margin-top:0; padding-top:0;}
ul#thumbs li, ul#thumbs li a, ul#thumbs li a img{display:inline; border:0;}
ul#thumbs li { padding:1px;}
#slideimg { margin-bottom:5px; border:1px solid #DDDDDD;}
#banner{margin:0; padding:0;}
.clear {clear:both} 
#contact-list {width:478px; margin-left:5px;}
#contact-list td {text-align:left;}
div#main #contact-list p{ padding:0px 0 5px 0; margin:0;}
.caps { text-transform:uppercase; color:#111;}
/* ------------------------------ FOOTER --------------------------------------- */
a#contactlink {font-size:80%;width:150px; height:42px; border:1px solid #68a; background-color:#457; color:#FFF; line-height:18px;padding-top:5px;margin:10px auto; text-align:center; display:block; vertical-align:middle;}
a#contactlink:hover { background-color:#568;}
#footer { color:#FFF; clear:both; float:left; width:100%; height:163px; margin:0px auto 0 auto; text-align:center; background-image:url(../images/footer_back.jpg); background-repeat:no-repeat; background-position: top center;}
#footer_btns {color:#FFF;height:70px;position:relative;  width:948px; border-top:2px solid #fff; margin:16px auto 1px auto; text-align:center;}
#footer_btns p, #footer_btns div {color:#FFF;position:static; float:left; display:inline; margin:0px 0px 5px 0; width:231px; height:57px; text-align:left;}
#footer_btns p.p1, #footer_btns p.p12 {width:179px; margin-left:6px;}
#footer_btns p.p2 {width:126px; margin-left:6px; text-align:right; line-height:15px;}
#footer_btns div.p3 {width:184px; margin-left:15px;}
#footer_btns div.p3 table {margin-top:-5px;}
#footer_btns div.p3 td{ font-size:10px; margin-bottom:0px;}
#footer_btns #uname,#footer_btns #uemail {width:156px; background-color:#036; color:#EEE; font-size:11px; border:1px solid #888; padding:0px 4px; margin:0 0 2px 0;}
#footer_btns #submit {background-color:#EE8000; color:#FFFFFF; border:1px solid #58b; padding:0px 6px; cursor:pointer; font-size:11px;}
#footer p#copyr {color:#FFF;position:relative; width:944px; line-height:16px ;height:18px; margin:6px auto 0 auto; padding:0px 0 0 6px; text-align:left; background-color:#ff9000; border-bottom:#cc6000}
#footer p#copyr a{color:#FFF;}

/* ----------------------------------------------- */
.introbold {font-size:90%;}
#homemsg {float:left; width:280px; }
#homemsg p {margin:5px 10px;}
#slider {float:left; width:657px; overflow:hidden; display:inline; }
#slider img{display:inline;}
div#sidebar1 div#tip { border:1px solid #CCC; padding:5px; margin-left:20px; margin-right:10px; margin-bottom:10px; height:130px;}
div#sidebar1 div#tip p.tip { line-height:22px; text-transform:uppercase; font-size:14px; color:#036; padding:0; margin:0 0 0px 5px;}
div#sidebar1 div#tip p.tip img {display:inline;}
div#sidebar1 div#tip li {line-height:15px; margin-left:0px; margin-right:10px; margin-bottom:0; }
div#sidebar1 div#tip ul, div#sidebar1 div#tip ul li {list-style-type:none; list-style-image:none; background-image:none; border-top:none;}
.accent {color:#036;}
.accent strong {font-size:12px;}
.accent2 {color:#EE8000;}
.bigger-text {padding-top:0; font-size:16px;}
img.tiplist {margin-right:10px; display:inline;}

body.better div#content a[href$='.pdf']:after 	{ content: url(../images/icon_pdf.gif);	margin-left: 3px;}
body.better div#content a[href$='.pdf']:before 	{content: ""!important;	margin-right: 0px !important;}
body.better div#content a[href$='http:']:before {content: ""!important;	margin-right: 0px !important;} 
/*div#content a[href^='http://']:after { content: url(../images/icon_link.gif); margin-right: 3px;} */

.related-links img{display:inline;}
div#content a[href$='.pdf']:before 	{ content: url(../images/icon_pdf.gif);	margin-right: 3px;}
div#content a[href$='.doc']:before 	{ content: url(../images/icon_word.gif);	margin-right: 3px;}
div#content a[href$='.docx']:before { content: url(../images/icon_word.gif);	margin-right: 3px;}
div#content a[href$='.ppt']:before 	{ content: url(../images/icon_ppt.gif);	margin-right: 3px;}
div#content a[href$='.zip']:before 	{ content: url(../images/icon_zip.gif);	margin-right: 3px;}
div#content a[href^='http://']:before { content: url(../images/icon_link.gif); margin-right: 3px;} 
div#content .noicon:before { content: ""!important;	margin-right: 0px !important;}
div#content .noicon:after {	content: ""!important;	margin-left: 0px !important;}
div#main ul.leftjust li{margin-left:18px; margin-bottom:5px; padding-left:0; list-style-type:none; display:block;}
div#main ul.leftjust li p {width:90%;font-size:11px; display:block;float:left; padding-top:2px;}
div#main ul.leftjust li img { display:block; float:left;}

.mainimg {margin-right:10px;}
.homeborder {border-top:4px solid #E7E7E7;border-left:4px solid #E7E7E7;border-bottom:4px solid #E7E7E7;border-right:4px solid #E7E7E7;}

p.vidcaption {display:block;font-size:13px;padding-top:25px; border-top:1px solid #DDD;}
p.vidcaption strong {color:#222;}
.videntry {display:inline;float:left;margin:0 10px 10px 0;width:322px;}

#pnlSuccess p { color:#0033AA;}
#pnlError p {color:#FF3300;}
.error {color:#FF3300; font-weight:bold;}
.correct {color:#009900; font-weight:bold; text-transform:uppercase;}
ul#sitemaplist a { text-transform:capitalize; line-height:16px; }
ul#sitemaplist h3 {background:url(../images/arrow.gif) no-repeat left 50% ; margin:10px 0 0 0;padding:0 0 0 14px;}
ul#sitemaplist li {display:block;padding:1px 0;}
ul#sitemaplist li ul li {list-style:disc; display:list-item;}
div#main .ui-tabs-nav li {font-size:90%; white-space:nowrap;}

#folletos #main ul li a, #viet #main ul li a {display:block;}