﻿body 
{
	margin: 0px;
	padding: 0px;
	background: #ffffff;
	font-family: Arial, Verdana, tahoma, Sans-Serif;
	font-size: 0.8em;
	color: #000000;
}

a {color: #000000;}
a:visited {color: #000000;}
a:hover {color: #000000; text-decoration: none;}

/* Main Structure */
.wrapper		{width: 1000px; margin: 0 auto; position: relative;}
header			{width: 100%; height: 183px; display: block; position: relative; background: #ffffff url(images/header.png) no-repeat center top;}
nav				{width: 1000px; position: relative; z-index: 9999; display: block; background-color: #ffffff;}
.main			{width: 980px; padding: 10px; background-color: #ffffff;}

footer			{background-color: #ffffff;  width: 100%; min-height: 229px; display: block; clear: both; color: #666666;  font-size: 0.9em;}
.rightcol		{float: right; width: 705px;}
.leftcol		{float: left; width: 255px;}
.righthalf		{float: right; width: 430px;}
.lefthalf		{float: left; width: 530px;}


.backgroundimage	{position: relative; background: url(images/background.jpg) no-repeat center top; width: 100%;}


/* Header */
header						{color: #ffffff;}
header .logo				{position: absolute; top: 69px; left: 27px;} 
header .searchfield			{position: absolute; top: 80px; right: 83px; z-index: 10; height: 26px;} 
header .searchfield .field	{width: 180px; padding: 2px 2px 3px 2px; border: 1px solid #e7e8e9; height: 19px;}	
header .searchbutton	    {position: absolute; top: 80px; right: 0; z-index: 10; height: 26px;} 
header .sitename			{position: absolute; top: 40px; right: 0; z-index: 10; color: #999999;}
header .sitename A:link     {color: #999999; text-decoration: none;}
header .sitename A:visited  {color: #999999; text-decoration: none;}
header .sitename A:hover    {color: #999999; text-decoration: none;}


header .mainnav					{position: absolute;top: 115px; left: 330px; z-index: 10;  width: 670px; height: 53px;}
header .mainnav	a:link			{display: block; float: left; height: 53px; color: #40B4FF!important; font-size: 0.9em;}
header .mainnav	a				{display: block; float: left; height: 53px; color: #40B4FF!important; font-size: 0.9em;}
header .mainnav	a:hover			{color: #ffffff!important; background-color: #40B4FF;}


header .mainnav .myaccount				{width: 85px; border-left: 1px solid  #40B4FF;}
header .mainnav .aboutus				{width: 60px; border-right: 1px solid  #40B4FF;}
header .mainnav .environment			{width: 98px; border-right: 1px solid  #40B4FF;}
header .mainnav .serviceannouncements	{width: 120px; border-right: 1px solid #40B4FF;}
header .mainnav .informus				{width: 65px; border-right: 1px solid  #40B4FF;}
header .mainnav .community				{width: 95px; border-right: 1px solid  #40B4FF;}
header .mainnav .waterquality			{width: 70px; border-right: 1px solid #40B4FF;}
header .mainnav .contactus				{width: 70px;}

header .mainnav	a span					{padding: 0 11px; display: inline-block;}

header .mainnav .active					{text-align: center; color: #ffffff!important; background-color: #40B4FF;}
header .mainnav .active span			{text-align: center; padding-top: 10px;}

header a:link	{color: #ffffff;}
header a:hover	{color: #ffffff;}
header a:visited{color: #ffffff;}

/* Nav */
nav .bigbutton				{width: 320px;  text-align: center;    min-height: 61px; float: left; line-height: 61px; font-size: 1.8em; padding: 0  0 0 10px;}
nav .bigbutton .buttonshape	{width: 320px; display: block; color: #ffffff!important; text-decoration: none;}
nav .bigbutton .blue		{background-color: #0099ff; }
nav .bigbutton .green		{background-color: #007c5a;}
nav .bigbutton .orange		{background-color: #ff6600;}
nav .bigbutton .blue:hover	{background-color: #40B4FF; }
nav .bigbutton .green:hover	{background-color: #2FBE96;}
nav .bigbutton .orange:hover{background-color: #FF8D40;}
nav .lastinrow {width: 320px;}

/* serviceannouncements */
.serviceannouncements			{background-color: #ffffff;}
.serviceannouncements .left		{width: 310px; padding-left: 10px; font-size: 1.8em; color: #999999;}
.serviceannouncements .right	{width: 660px; padding-right: 10px; padding-top: 0.4em; color: #999999;}

/* Secondary Nav */
.secondarynav							{background-color: #ffffff; width: 1000px; padding: 10px 0 10px 0;}
.secondarynav .bigbutton				{width: 188px;  text-align: left;  min-height: 61px; float: left; font-size: 1.4em; padding: 0  0 0 10px;}
.secondarynav .bigbutton .buttonshape	{width: 158px; padding: 8px 15px; display: block; color: #ffffff!important; text-decoration: none; min-height: 2.4em;}
.secondarynav .bigbutton .blue			{background-color: #0099ff; }
.secondarynav .bigbutton .green			{background-color: #007c5a;}
.secondarynav .bigbutton .orange		{background-color: #ff6600;}
.secondarynav .bigbutton .blue:hover	{background-color: #40B4FF; }
.secondarynav .bigbutton .green:hover	{background-color: #2FBE96;}
.secondarynav .bigbutton .orange:hover	{background-color: #FF8D40;}

.secondarynav .bigbutton .howtopay			{background-color: #717074; min-height: 6em; font-size: 1.2em;}
.secondarynav .bigbutton .howtopay:hover	{background-color: #0099ff; }

.inbodynav								{}
.inbodynav .bigbutton					{width: 188px;  text-align: left;  min-height: 61px; float: left; font-size: 1.4em; padding: 0  10px 0 0;}
.inbodynav .bigbutton .buttonshape		{width: 158px; padding: 8px 15px; display: block; color: #ffffff!important; text-decoration: none; min-height: 2.4em;}
.inbodynav .bigbutton .blue			{background-color: #0099ff; }
.inbodynav .bigbutton .green		{background-color: #007c5a;}
.inbodynav .bigbutton .orange		{background-color: #ff6600;}
.inbodynav .bigbutton .blue:hover	{background-color: #40B4FF; }
.inbodynav .bigbutton .green:hover	{background-color: #2FBE96;}
.inbodynav .bigbutton .orange:hover	{background-color: #FF8D40;}

.inbodynav .bigbutton .serviceannouncements			{background-color: #717074; min-height: 5em; font-size: 1.2em;}
.inbodynav .bigbutton .serviceannouncements:hover	{background-color: #0099ff; }

/* Arrow Nav */
.arrownav						{width: 980px; height: 61px; overflow: hidden; position: relative; background: url(/images/nav/arrow-nav.png);}
.arrownav .howtopay				{position: absolute; width: 245px; height: 61px; top: 0; left: 0; background-image: url(/images/nav/how-to-pay.png);}
.arrownav .moving-home			{position: absolute; width: 247px; height: 61px; top: 0; left: 243px; background-image: url(/images/nav/moving-home.png);}
.arrownav .report-a-leak			{position: absolute; width: 248px; height: 61px; top: 0; left: 487px; background-image: url(/images/nav/report-a-leak.png);}
.arrownav .calculate-water		{position: absolute; width: 248px; height: 61px; top: 0; left: 732px; background-image: url(/images/nav/calculate-water.png);}
.arrownav .howtopay:hover		{background-position: 0 -61px;}
.arrownav .moving-home:hover		{background-position: 0 -61px;}
.arrownav .report-a-leak:hover		{background-position: 0 -61px;}
.arrownav .calculate-water:hover		{background-position: 0 -61px;}
.arrownav .active {background-position: 0 -61px;}


/* Right Col */


/* Left Col */
.leftcol .navtitle			{background-color: #e7e8e9; padding: 5px 15px 5px 10px; color: #0099ff; font-size: 1.4em; display: inline-block;}
.leftcol .sidenav a			{background-color: #e7e8e9; padding: 5px 10px; color: #0099ff; font-size: 1em; display: block; width: 235px; margin-bottom: 1px; color: #717072; text-decoration: none;}
.leftcol .sidenav a:hover	{background-color: #0099ff; color: #ffffff;}

/* Left Half */
.lefthalf .left	{width: 235px;}
.lefthalf .right	{width: 285px;}

/* Right Half */



.col1	{float: left; width: 260px;}
.col2	{float: left; width: 260px; padding-left: 20px;}
.col3	{float: right; width: 420px;}

.col1 h2, .col2 h2, .col3 h2	{font-size: 1.6em;}

/* Footer */
footer				{color: #666666;}
footer .wrapper		{padding-top: 30px;}
footer .right		{text-align: right;}
footer a			{color: #666666!important; font-weight: normal; text-decoration: none;}
footer a:visited	{color: #666666!important; text-decoration: none;}
footer a:hover		{color: #666666!important; text-decoration: underline;}



h1			{font-family: arial; font-size: 2.4em; font-weight: normal; color: #717073; padding: 0; margin: 0 0 10px 0;}
h2			{font-family: arial; font-size: 2.4em; font-weight: normal; color: #717073; padding: 0; margin: 0 0 10px 0;}
h3			{font-family: arial; font-size: 1.4em; font-weight: normal; color: #717073; padding: 0; margin: 0 0 0 0;}


.heading				{width: 100%; position: relative;}
.heading .breadcrumbs	{position: absolute; bottom: 10px; right:0; z-index: 10;}



/* Tabs */
#tabs ul {background: none repeat scroll 0 0 #FFFFFF; float: left; width: 100%; margin: 0; padding: 0;}
#tabs li {list-style: none;}
#tabs li {display: inline; 
	background-color: #e7e8e9; margin-right: 1px;}
#tabs li, #tabs li a {float: left;}
#tabs ul li.active {
	background: #0099ff!important;
}
#tabs ul li.active a {
	color: #ffffff;
}
#tabs div {
	background: #FFFFff;
	clear: both;
	padding: 15px;
	min-height: 200px;
	border: 1px solid #0099ff;
}
#tabs div h3 {
	margin-bottom: 12px;
}
#tabs div p {
	line-height: 150%;
}
#tabs ul li a {
	text-decoration: none;
	padding: 8px;
	color: #717073;
	font-weight: normal;
}

/* Pop Ups */
.popupcol1	{width: 190px; float: left;}
.popupcol2	{width: 190px; float: left;}
.popupcol3	{width: 190px; float: left;}

.popup {padding: 10px;}
.popup h3	{font-weight: bold; font-size: 1.2em;}

.button	
{
background: #ffaa36; 
background: -moz-linear-gradient(top, rgba(255,187,94,1) 0%, rgba(255,187,94,1) 50%, rgba(255,173,62,1) 51%, rgba(255,170,54,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,187,94,1)), color-stop(50%,rgba(255,187,94,1)), color-stop(51%,rgba(255,173,62,1)), color-stop(100%,rgba(255,170,54,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(255,187,94,1) 0%,rgba(255,187,94,1) 50%,rgba(255,173,62,1) 51%,rgba(255,170,54,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(255,187,94,1) 0%,rgba(255,187,94,1) 50%,rgba(255,173,62,1) 51%,rgba(255,170,54,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(255,187,94,1) 0%,rgba(255,187,94,1) 50%,rgba(255,173,62,1) 51%,rgba(255,170,54,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(255,187,94,1) 0%,rgba(255,187,94,1) 50%,rgba(255,173,62,1) 51%,rgba(255,170,54,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffbb5e', endColorstr='#ffaa36',GradientType=0 ); /* IE6-9 */
display: inline-block;
padding: 5px 17px;
border: 2px solid #ffffff;
color: #ffffff!important;
text-transform: uppercase;
font-weight: bold!important;
font-size: 0.9em;
text-decoration: none;
}

.button:hover	{background: #ffaa36!important; text-decoration: none!important;}

img {border: none;}
.clearer	{clear: both; width: 100%; height: 0px;}
.five		{height: 5px;}
.nine		{height: 9px;}
.ten		{height: 10px;}
.twenty		{height: 20px;}
.thirty		{height: 30px;}
.forty		{height: 40px;}
.fifty		{height: 50px;}
.hundred	{height: 100px;}
.right		{float: right;}
.left		{float: left;}
.underline	{text-decoration: underline;}
.center		{text-align: center;}
.nopad		{padding: 0; margin: 0;}

.orange		{color: #ffaa36;}
.blue		{color: #7dabd2;}
.italics	{font-style:italic;}

hr.dotted   { color:#fff; background-color:#fff; border-top:1px dotted #afafaf; height:1px; }
.dottedline	{width: 100%; height: 1px; clear: both; border-top:1px dotted #afafaf;}

.blue	{color: #0099ff!important;}
.green	{color: #007c5a!important;}
.orange	{color: #ff6600!important;}

.whiteonblue	{color: #ffffff; background-color: #0099ff!important; display: inline-block; padding: 5px 10px; margin: 0;}

/* Home Page */
.sliderwrapper				{height: 144px; width: 1000px; position: relative; background-image: url(/images/page/slider-wrapper.png); margin-bottom: 10px;}
.sliderwrapper .leftarrow	{height: 144px; width: 30px; position: absolute; left: 0; top: 0; background-image: url(/images/buttons/slider-left.png);}
.sliderwrapper .rightarrow	{height: 144px; width: 30px; position: absolute; right: 0; top: 0; background-image: url(/images/buttons/slider-right.png);}
.sliderholder				{position: relative; width: 2000px;}
.middlesection				{position: absolute; top: 7px; left: 30px; height: 140px; width: 940px; overflow: hidden;}
.fozslider 					{margin: 0; padding: 0; list-style: none;}
.fozslider li				{width: 180px; height: 130px; float: left; background-color: #0099ff; margin: 0 10px 0 0; padding: 0; position: relative;}
.fozslider li .padding		{position: absolute; top: 8px; left: 8px; width: 164px; height: 114px;  color: #ffffff;}
.fozslider li .padding	span	{display: block; text-align:right; width: 164px; height: 114px; bottom: 0; left: 0; color: #000000; position: absolute; z-index: 10;}
.fozslider li .padding	strong	{color: #000000; font-size: 16px; font-weight: normal;}
.fozslider li .padding a	{display: block; text-align:right; width: 164px; height: 114px; bottom: 0; left: 0; color: #000000; position: absolute; z-index: 100; line-height: 200px;} 
/* Contact Page */

/* News */

.newslisting .title	{color: #0099ff!important; font-size: 1.4em; text-decoration: none;}
.newslisting p	{margin-top: 0;}
.newslisting .downloadpdf {line-height: 26px; color: #ff6600!important;}
.newslisting hr {clear: both; width: 100%;border:0;height:1px;color:#0099ff;background:#0099ff;margin-top: 5px; margin-bottom: 5px; padding: 0px;}
.newslisting .left	{padding-right: 20px;}
/* Ask us a question */
.askusaquestion .field	{width: 300px; padding: 5px; border: 1px solid #e7e8e9; height: 19px;}
.field180        
{
    width: 180px; height: 19px;
    background-image:url(images/form_bg.jpg);
	background-repeat:repeat-x;
	border:1px solid #717074;	
	color:#333333;
	padding:5px;
	margin-right:4px;
	margin-bottom:8px;
	font-family: Arial, Helvetica, sans-serif;
    }
.field180m       
{
    width: 180px; height: 60px;
    background-image:url(images/form_bg.jpg);
	background-repeat:repeat-x;
	border:1px solid #717074;	
	color:#333333;
	padding:5px;
	margin-right:4px;
	margin-bottom:8px;
	font-family: Arial, Helvetica, sans-serif;
}
.field90 
{
    width: 90px; height: 19px;
    background-image:url(images/form_bg.jpg);
	background-repeat:repeat-x;
	border:1px solid #717074;	
	color:#333333;
	padding:5px;
	margin-right:4px;
	margin-bottom:8px;
	font-family: Arial, Helvetica, sans-serif;
}
.field30         
{
    width: 30px; height: 19px;
    background-image:url(images/form_bg.jpg);
	background-repeat:repeat-x;
	border:1px solid #717074;	
	color:#333333;
	padding:5px;
	margin-right:4px;
	margin-bottom:8px;
	font-family: Arial, Helvetica, sans-serif;
}

.styled-select select {   
   width: 180px;
   height: 34px;
   background-image:url(images/form_bg.jpg);
	background-repeat:repeat-x;
	border:1px solid #717074;	
	color:#333333;
	padding:5px;
	margin-right:4px;
	margin-bottom:8px;
	font-family: Arial, Helvetica, sans-serif;
}
.styled-select60 select {

   width: 60px;
   height: 34px;
   background-image:url(images/form_bg.jpg);
	background-repeat:repeat-x;
	border:1px solid #717074;	
	color:#333333;
	padding:5px;
	margin-right:4px;
	margin-bottom:8px;
	font-family: Arial, Helvetica, sans-serif;
}
table.webform
{
	border-spacing: 0px; 	
	table-layout:fixed;
	width: 700px;
	margin-left: auto;
	margin-right: auto;
	padding: 5px;
	text-align: left;	
}

fieldset
{
    width: 800px;
    margin-bottom: auto; 
    margin-left: auto; 
    margin-right: auto;   
}

.leftcol 
{
    width: 200px;
}

th, td {      
        text-align: left;
}

.cellbg
{
    border:1px solid #e7e8e9;
    background-color: #8ed8f8;
}


