/* Global and Common Settings
-----------------------------------------------------------------------------*/
html, body { border:0; margin:0; padding:0; }

/* 
'Root' font size - use the 16px default.
IE uses 100% - so that the user text sizing works (browser base font size is set at 16px)
FF, Safari, Opera etc uses 16px - because the browser base font size can be reset at will in the Preferences.
The setting of 16px will be picked up by FF, Safari, Opera. 
Conditional comments for IE will override this with 100%. See the iKit template.
*/
body { font:16px/1.25em arial, helvetica, sans-serif; color: #000000; text-align: center; background: #CBE0EA url('../images/bg-repeat-blue.gif') repeat;}

img { border:0; }
a, a:visited { text-decoration:none; }
a img,:link img,:visited img { border:none }
:link,:visited { text-decoration:none }
ul { list-style:none } /* Remove OL from this. Not sure way the number needs to be removed */
address { font-style:normal }

.clear-bg      { clear:both; margin-bottom: 5px; }
.clear         { clear:both; line-height:0;height:0px; }
.clear-right   { clear:right; }
.float-left    { float:left; }
.float-right   { float:right; }
.hide 				 { display: none; }
.text-left     { text-align:left; }
.text-right    { text-align:right; }
.text-center   { text-align:center; }
.text-justify  { text-align:justify; }
.bold          { font-weight:bold; }
.italic        { font-style:italic; }
.underline     { border-bottom:1px solid; }
.highlight     { background:#ffc; }
.img-left      { float:left;margin:4px 10px 4px 0; }
.img-right     { float:right;margin:4px 0 4px 10px; }
.nopadding     { padding:0; }
.noindent      { margin-left:0;padding-left:0; }
.nobullet      { list-style:none;list-style-image:none; }

/* Typography
-----------------------------------------------------------------------------*/

h1, h2, h3, h4, h5, h6 { margin:0; padding:0; font-weight:normal; }
h1 { font-size: 2.2em; }
h2 { font-size: 2.0em; }
h3 { font-size: 1.8em; }
h4 { font-size: 1.6em; }
h5 { font-size: 1.4em; }
p { font-size: inherit; } /* No relative sizing here. Moved up to parent and rely on inheritance. See #content. */

/* Forms
-----------------------------------------------------------------------------*/
form { margin:0; padding:0; display:inline; }
input, select, textarea { font:1em arial, helvetica, sans-serif; }
textarea { line-height:1.25; }
label { cursor:pointer; }
 
/* Tables
-----------------------------------------------------------------------------*/
table { border:0; margin:0 0 18px 0; padding:0; border-spacing: 0; border-collapse: collapse; }
table tr td { padding: 2px; text-align: left; font-weight: normal; }


/* Homepage
-----------------------------------------------------------------------------*/
#wrapper { background: transparent url('../images/bg-drop-fade-blue.gif') repeat-x scroll 0% 0%;; }
#container { width: 925px; margin:0 auto; padding:10px 0pt 0pt; text-align:left;  }


/* Header
-----------------------------------------------------------------------------*/
#header {position: relative; background: white url('../images/wrapper-top.gif') no-repeat scroll 0pt 0; padding: 10px;} /* Will be container for absolutely positioned elements */

#header h1 { margin: 0; background-color: transparent;}
/*#header h1 a { display: block; text-indent: -9999px; text-decoration: none; width: 352px; height: 66px; }
*/

/* Ideally bottom : 0px would be better, but IE 6 puts it @ bottom of page */
#searchbar {
	padding: 10px 10px 0 0;
	height: 25px;
	width: 50%;
	position:absolute;
	top: 18px;
	right: -7px;
}
#searchbar ul { display: block; float: right; color: #2D69B7; margin:0; }
#searchbar ul li { float: left; margin-left: 6px; }
#searchbar li a, #searchbar li a:visited { color: #3E82CB; text-decoration: none; outline: none; font-size: 0.8em; }
#searchbar li a:hover, #searchbar li a:focus { color: #000; border-bottom: 1px solid #D8E5F4; }

#search { float: right; padding: 0 0 0 0; }
#keywords { border: 1px solid #D0E7F5 ; margin: -2px 5px 0pt 10px; padding: 3px; color: rgb(51, 51, 51); font-size: 0.7em; float: left; height: 15px; }
#searchTitle { display: none; }
#btnSearch { border: 0pt none ; margin: -1px 0pt 0pt; padding: 0pt; background: transparent url('../images/btn_search.gif') no-repeat; overflow: hidden; float: left; height: 18px; width: 50px; display: inline; text-indent: -9999px; cursor: pointer; }
#btnSearch:hover { background: transparent url('../images/btn_search.gif') no-repeat scroll 0pt -18px; }

#othersites {display:inline;width:auto; margin: 0px 0pt 0pt 30px;  font-size:12px;color:#013366;}
#othersites a, #othersites a:visited { color: #3E82CB; text-decoration: none; outline: none;  }
#othersites a:hover, #othersites a:focus { color: #000; border-bottom: 1px solid #D8E5F4; }

/* BODY
-----------------------------------------------------------------------------*/
#wrapper-body { border-top: 1px solid rgb(255, 255, 255); background: transparent url('../images/wrapper-page.gif') repeat-y scroll left top; }
#wrapper-body #gooey { background: transparent url('../images/wrapper-bottom.gif') no-repeat left bottom; }

#banner-feature { background: rgb(255, 255, 255) url('../images/banner-house.jpg') no-repeat left top; height: 271px; width: 900px; padding: 0 25px 0 0; margin: 0 0 0 0;}
#banner-feature ul { float: right; width: 215px; margin-top: 60px; }
#banner-feature ul li { clear: left;  line-height: 15px; }
#banner-feature ul li a { padding: 5px 5px 10px; color: #0E2E54; display: block; width: 200px; }
#banner-feature ul li a:hover { background: transparent url('../images/png_hover.png') no-repeat scroll right top; text-decoration: none; }
#banner-feature ul .icon { padding: 0pt; float: left; width: 50px; margin-right: 0px; }
#banner-feature ul a em { font-size: 11px; color: rgb(76, 102, 23); font-style: normal; }

#banner-feature .feature { font-size: 13px; font-weight: bold; width: 140px; height: 13px; float: left; display: block; padding-bottom: 2px; text-shadow: rgb(255, 255, 255) 0px 0px 0px; }

#wrapper-body #pageNav { float: left; width: 302px; position:relative;}

/*
   Set the padding on the content div so that we don't have to worry aout padding and margin on child elements.
   Also makes it compatible as a container for iKit content.
   Note: IE 6+ is in stds compliant mode, so width is the width of content, not content + padding+ border.
   Total width should add up to 623 px. 
   So 600 + 12 + 11 = 623 px.
   Set the font size on this container. This will be the base font size for all child elements. All child elements
   will have their relative font sizes calculated from the computed value of this element ie 16px * 0.8 = 12.8 px.
   Inheritance  will be used to avoid compounding when elements get nested eg ul, ol. 
*/
#wrapper-body #content { padding: 10px 12px 0 11px; width: 600px; float: right; font-size: 0.8em;  font-style: normal; font-variant: normal; font-weight: normal; line-height: 1.3em; font-size-adjust: none; font-stretch: normal; color: #333333; }

#pageNav .banner { margin: 0; padding: 0 0 8px 12px; }

#content .banner { margin: 0; padding: 0 0 10px 11px; }

/* Banner in the column - not the across both columns */
.columnbanner {margin-top:5px }

/* 
   #content is the base and uses 0.8 em = 12.8px 
   Headers are therefore calculated based on 12.8 px.
*/
/* Font size = 22.4px/12.8px = 1.75 */
#content h1 { margin: 0; padding: 0 0 5px 0px; font-size: 1.75em; font-family: Arial,Verdana,sans-serif; font-weight: bold; letter-spacing: 0.01em; line-height: 1em; text-align: left; color: #001D2C;}


/* Font size = 19.2px/12.8px = 1.5 */
#content h2 { margin: 0; padding: 10px 0 10px 0px; font-size: 1.5em; font-family: Arial,Verdana,sans-serif; font-weight: normal; letter-spacing: -0.01em; line-height: 1em; text-align: left; color: #809C38;}

/* Font size = 16.2px/12.8px = 1.26 */
#content h3 { margin: 0; padding: 0 0 5px 0px; font-size: 1.26em; font-family: Arial,Verdana,sans-serif; font-weight: bold; letter-spacing: -0.01em; line-height: 1em; text-align: left; color: #3F3D3D;}

/* No relative sizing here. Moved up to parent and rely on inheritance. See wikitext. */
#content p { font-size: inherit; font-family: verdana, arial, sans-serif; font-style: normal; font-variant: normal; font-weight: normal; line-height: 1.3em; font-size-adjust: none; font-stretch: normal; color: #333333; margin: 0 0px 15px 0px;}

/* This doesn't work in IE6. Border is shown.
#content hr { clear:both; margin: 0 0 0 0; padding: 0 0 30px 0; background: transparent url('../images/divider.jpg') no-repeat scroll center bottom; line-height: 1.4; border: none; }
*/
#content div.hr {
  height: 24px;
  background: #fff url('../images/divider.jpg') no-repeat scroll center;
}
#content div.hr hr {
  display: none;
}

#content p a, #content p a:visited {	color: #3E82CB;	text-decoration: none; outline: none;  }		
#content p a:hover { color: #0E2E54;  border-bottom: 1px solid #D8E5F4;}	

#content .split-left { width: 350px; float: left; padding: 0px 0 0 0; }
#content .split-right { width: 250px; float: right; padding: 0px 0 0 0px; }
/* #content  */
.news { margin: 0; padding: 0 0 5px 0px; clear: both; }
.news .time { margin: 0pt 10px 0pt 0pt; padding: 6px 0pt 6px 0pt; background: transparent url('../images/date_bg.png') no-repeat scroll left top; float: left; text-align: center; width: 45px; height: 45px; line-height: 1em; }
.news .time .month { margin: 0pt 0pt 3px; padding: 0pt; text-transform: uppercase; font-size: 0.75em; color: rgb(160, 160, 160); letter-spacing: 1px; }
.news .time .day { margin: -2px 0 0 0; padding: 0pt; font-size: 1.25em; color: rgb(96, 96, 96); }
.news h1.newstitle { margin: 0pt; padding: 6px 0pt 0pt; font-size: 1.0em; font-weight: normal; line-height: 14px; }
.news h1.newstitle a { margin: 0pt; padding: 0pt; color: #3E82CB;	text-decoration: none; outline: none;  }
.news h1.newstitle a:hover { color: #0E2E54;  border-bottom: 1px solid #D8E5F4; }

/* BODY (SECONDARY PAGES)
-----------------------------------------------------------------------------*/
#banner-page { height: 221px; width: 925px; padding: 0 0 0 0; margin: 0 0 0 0; }
/* Any p surrounding an image in the banner region needs to have maring zeroed */
#banner-page p {margin: 0; padding:0} 
#content .split-page-left { width: 300px; float: left; padding: 15px 0 0 0; }
#content .split-page-right { width: 300px; float: left; padding: 15px 0 0 15px; }


/* 	Renamed ul.list class. Don't want to have to rely on the human editor to take an
	extra step to set the list class - they may forget. General philosophy: automate
	as much as possible within the stylesheet. */
	#content ul, .box ul { list-style-type: none; list-style-image: none; list-style-position: outside; margin: 0 0px 10px 9px; padding: 0; font-family: Verdana, Arial,  sans-serif; font-size: inherit; }
	#content ul li, .box ul li { background: transparent url('../images/bullet-transparency.gif') no-repeat scroll 0px 3px; list-style-type: none; list-style-image: none; list-style-position: outside; padding-left: 20px; padding-bottom: 0.5em; line-height: 1.3em; color: #333333; }
#content ul a, #content ul li a:visited , .box ul a, .box ul li a:visited { color: #3E82CB; text-decoration: none; outline: none; }
#content ul a:hover, #content ul a:focus { color: #000; border-bottom: 1px solid #D8E5F4; }

#content em { font-style: italic; }


	.box ul
	{
		list-style-type: circle;
		list-style-image: url(../images/bullet-transparency.gif);
		list-style-position: outside;
		margin: 0 0px 10px 19px;
		padding: 0;
		font-family: Verdana, Arial, sans-serif;
		font-size: inherit;
	}
	.box ul li
	{
		list-style-type: circle;
		list-style-image: url(../images/bullet-transparency.gif);
		list-style-position: outside;
		
		padding: 0 0 0.5em 0;
		line-height: 1.3em;
		color: #333333;
		background-color: transparent;
		background-image: url('');
	}

/*
************************ Content : Breadcrumb *************************/		
	div.breadcrumb { margin: 0 0 15px 0; padding: 0px; }

  #content .breadcrumb p { font-size: 80%; color: #000; margin: 0 0 0 0; padding: 0px 5px 0 0px; line-height: 15px; text-align: left}

  #content .breadcrumb p a {	color: #3B8CBD;	font-weight: bold; text-decoration: none; outline: none;  }
  #content .breadcrumb p a:hover {	color: #000; }
  #content .breadcrumb p a:active { color: #000; }	

/*
********** SIDEMENU WIDGET  ***********/  
div.sidemenu-widget { margin: 0pt 0pt 10px !important; padding: 15px 10px 0 12px !important; background: transparent url('../images/bg-sidemenu.gif') no-repeat scroll right top !important; border:none !important; }

div.sidemenu-widget .cbox-data {  background: transparent url('../images/bg-sidemenu.gif') no-repeat scroll left bottom; }

.sidemenu-widget h2,.sidemenu-widget .cbox-title  { margin: 0pt 0pt 12px; padding: 0pt 0pt 0pt 1px; font-size: 1.2em; font-family: Arial,Verdana,sans-serif; font-style: normal; font-variant: normal; line-height: normal; font-size-adjust: none; font-stretch: normal; color: #0E89A9; text-transform: capitalize; background-color: transparent; }

.sidemenu-widget h2 a {color: #0E89A9;}
.sidemenu-widget h2 a:visited {color: #0E89A9;}
.sidemenu-widget h2 a:hover { color: #0E2E54;  border-bottom: 1px solid #D8E5F4;}

.sidemenu-widget p { font-size: 0.8em; font-family: verdana, arial, sans-serif; font-style: normal; font-variant: normal; font-weight: normal; line-height: 1.3em; font-size-adjust: none; font-stretch: normal; color: #606060; margin: 0 12px 15px 11px;}

.sidemenu-widget ul { margin: 0pt 10px; padding: 0pt; list-style-image: none; list-style-position: outside; font-family: Verdana, Arial,  sans-serif; font-size: 0.8em; }
.sidemenu-widget li { background: transparent url('../images/arrow_right.gif') no-repeat scroll 0px 6px; padding-left: 20px; padding-bottom: 0.2em; }
.sidemenu-widget ul li a, .sidemenu-widget ul li a:visited {	color: #3E82CB;	text-decoration: none; outline: none;  }		
.sidemenu-widget ul li a:hover { color: #0E2E54;  border-bottom: 1px solid #D8E5F4;}	

.sidemenu-widget .active a.on {font-weight: bold;}
.sidemenu-widget .active a.on:hover {text-decoration:none; border: none; }

/*
********** DAILY WATER WIDGET  ***********/  
div.daily-widget { margin: 0 0 8px 12px; background: #F0F9FB url('../images/banner-dailywaterusage.jpg') no-repeat scroll left top; width: 290px; height: 190px;}

.daily-widget dl.level-target { margin: 0; }
.daily-widget dl.level-target dt { display: none; }
.daily-widget dl.level-target dd { font-family: Arial, Verdana, sans-serif; font-size: 18px; color: #49A5CA; margin: 0; padding: 90px 0 0 80px; }

.daily-widget dl.daily-usage { margin: 0; }
.daily-widget dl.daily-usage dt { display: none; }
.daily-widget dl.daily-usage dd { font-family: Arial, Verdana, sans-serif; font-size: 24px; color: #49A5CA; margin: 0; padding: 0 0 0 153px; }

/*
********** TIPS WIDGET (DO NOT REMOVE) ***********/  
div.tips-widget { margin: 0 0 8px 12px; background: #F0F9FB url('../images/banner-tips.jpg') no-repeat scroll left top; width: 290px; height: 107px;}

.tips-widget p { font-family: Arial, Verdana, sans-serif; font-size: 12px; color: #304102; margin: 0; padding: 38px 30px 0 100px; line-height: 16px; text-align: left}	

.tips-widget  a, .tips-widget li a:visited { color: #3E82CB; text-decoration: none; outline: none; }
.tips-widget  a:hover, .tips-widget  a:focus { color: #000; border-bottom: 1px solid #D8E5F4; }

/*
********** DAM LEVEL WIDGET  ***********/  
div.dam-widget { margin: 0 0 8px 12px; background: #F0F9FB url('../images/banner-damlevels.jpg') no-repeat scroll left top; width: 290px; height: 107px;}

.dam-widget h2 {margin: 0 0 0 0; padding: 15px 0 5px 0px; font-family: arial,sans-serif; font-style: normal; font-variant: normal; font-weight: normal; font-size: 28px; font-size-adjust: none; font-stretch: normal;  color: #5A96D1; display: block; text-align: center; background-image: none ! important; }

.dam-widget p { font-family: Arial, Verdana, sans-serif; font-size: 12px; font-weight: bold; color: #304102; margin: 30px 0 4px 0; padding: 0 15px 0 20px; line-height: 16px; text-align: left}ÊÊÊ

.dam-widget  a, .dam-widget li a:visited { color: #3E82CB; text-decoration: none; outline: none; }
.dam-widget  a:hover, .dam-widget  a:focus { color: #000; border-bottom: 1px solid #D8E5F4; }

/* Footer
-----------------------------------------------------------------------------*/
#footer { margin: 0; color: #000; font-family: verdana,Arial,Helvetica,sans-serif; font-size: 0.6em; line-height: 18px; text-align: center; }
#footer a, #footer li a:visited { color: #3E82CB; text-decoration: none; outline: none; }
#footer a:hover, #footer a:focus { color: #000; border-bottom: 1px solid #D8E5F4; }


#content .photo { width: auto; float: right; border: 2px solid #DEE9F5;  padding: 2px 2px 2px 2px;  margin: 10px 10px 10px 10px; text-align:center;  }


/* Water usage survey */
#water_survey ul ul { list-style:none }
#water_survey ul li {font-weight: bold; list-style:none }
#water_survey ul ul li {font-weight: normal; background: none; }
#result_summary { color: black; font-weight: bold; font-size: 1.1em}
#results_stats { color: #333333;  font-weight: normal; font-size: 0.8em}
#water_survey .answer_position {font-weight: bold;}

 .header-print  { display: none; }

#t140_take_a_tour_wrapper{position:relative; height:0px;clear:both;} 
#t140_take_a_tour {position: absolute; left: 28px; top: -57px; width: 158px; height: 54px;}

.whatsnew_date, .whatsnew_filetype { font-size: 80%; }

/* Top Navigation
-----------------------------------------------------------------------------*/
/* See menu.css */