/*-----------------------------------------------------
 *  RESET
 *-----------------------------------------------------*/


article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
[hidden] { display: none; }

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
body { margin: 0; font-size: 13px; line-height: 1.231; }
body, button, input, select, textarea { font-family: sans-serif; color: #222; }

/* a { color: #00e; }
a:visited { color: #551a8b; }
a:hover { color: #06e; } */
a:focus { outline: thin dotted; }
a:hover, a:active { outline: 0; }

abbr[title] { border-bottom: 1px dotted; }
b, strong { font-weight: bold; }
blockquote { margin: 1em 40px; }
dfn { font-style: italic; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
ins { background: #ff9; color: #000; text-decoration: none; }
mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }
pre, code, kbd, samp { font-family: monospace, monospace; _font-family: 'courier new', monospace; font-size: 1em; }
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
q { quotes: none; }
q:before, q:after { content: ""; content: none; }
small { font-size: 85%; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }
ul, ol { margin: 1em 0; padding: 0 0 0 40px; }
dd { margin: 0 0 0 40px; }
nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }
img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }
svg:not(:root) { overflow: hidden; }
figure { margin: 0; }

form { margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; }
label { cursor: pointer; }
legend { border: 0; *margin-left: -7px; padding: 0; }
button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }
button, input { line-height: normal; *overflow: visible; }
table button, table input { *overflow: auto; }
button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; }
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; }
input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
textarea { overflow: auto; vertical-align: top; resize: vertical; }
input:valid, textarea:valid {  }
input:invalid, textarea:invalid { background-color: #f0dddd; }

table { border-collapse: collapse; border-spacing: 0; }
td { vertical-align: top; }


/*-----------------------------------------------------
 *  PROJECT STYLES
 *-----------------------------------------------------*/

/* ---------------- Site Fonts ---------------- */

@font-face {
    font-family: "carto";
    src: url('../fonts/cartogothicstd-book-webfont.eot');
    src: url('../fonts/cartogothicstd-book-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/cartogothicstd-book-webfont.woff') format('woff'),
         url('../fonts/cartogothicstd-book-webfont.ttf') format('truetype'),
         url('../fonts/cartogothicstd-book-webfont.svg#cartogothic_stdbold') format('svg');
    font-weight: normal;
    font-style: normal;

}


/* ---------------- Basic Site Styles ---------------- */

body {
    font: 12px/18px Arial, sans-serif;
    color: #5c5c5c;
    background: #efefef url("../images/bg-body.png") 0 0 repeat-x;
    padding: 0;
    margin: 0;
}

p { padding:0 0 9px 0; margin: 12px 0; }


a { color: #11955c; text-decoration: none;}

a:hover { color: #99cab5; text-decoration: none; }

.clear { clear: both; }
.center { text-align: center; }
.img_r {
    position: relative;
    float: right;
    padding: 0 0 10px 25px;
}
.img_l {
    position: relative;
    float: left;
    padding: 0 10px 10px 0;
}

.watersmart-icon {
    padding:0px 20px 20px 5px;
    max-width:225px;
}
.left {
    position: relative;
    float: left;
}

.right {
    position: relative;
    float: right;
}

img.right {
    width: inherit;
}

h1 { font: 24px/24px "carto", Arial, sans-serif; }
h2 { font: 22px/24px "carto", Arial, sans-serif; color: #003876; font-weight: normal; }
h3 { font: 22px/22px "carto", Arial, sans-serif; color: #ffffff; font-weight: normal; }
h4 { font: 18px/15px "carto", Arial, sans-serif; }
h1, h2, h3 { margin: 0; padding: 0 0 13px 0; }

.hide { display: none; }

hr { border-color: #dde0e3; margin: 2em 0;}

p + hr {
    margin: 0.7em 0px 2em 0px;
}

ul.green li{
    font-weight: bold;
}

.pad-top {
    padding-top: 16px;
}

.pad-bottom {
    padding-bottom: 32px;
}
.right-content {
    display: inline-block;
}

.pad-right {
    padding-right: 20px;
}
.pad-left {
    padding-left: 20px;
}

.large-number {
    font-size: 25px;
    line-height: 18px;
    color: #5c5c5c;
    margin-top: 10px !important;
}

.column.one ul.page {
    margin: 0;
    padding: 0;  
}

.column.one ul.page li {
    padding-left: 37px;
    padding-top: 8px;
    margin-bottom: 4px;
    padding-bottom: 14px;
    list-style: none;
    background: url("../images/icon-page.png") 0 3px no-repeat;
}
.column.one ul.pay {
    margin: 0 0 20px;
    padding: 0;
}

.column.one .pad p {
	padding-bottom: 16px;
	margin:0;
}

.table_pad {
    padding: 5px;
}

.add-border .table-results td{
    padding: 10px;
    border: 1px solid #CCC;
}

/* ---------------- Btns - Oval ---------------- */

a.btn-oval, button.btn-oval  {
    position: relative;
    float: left;
    padding: 6px 15px;
    color: #ffffff;
    font-size: 14px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    font-family: "carto";
}

a:hover.btn-oval  {
    text-decoration: none;
}

a.green {
    background: #12a364; /* Old browsers */
    background: -moz-linear-gradient(top,  #12a364 0%, #11985e 68%, #107f4f 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#12a364), color-stop(68%,#11985e), color-stop(100%,#107f4f)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #12a364 0%,#11985e 68%,#107f4f 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #12a364 0%,#11985e 68%,#107f4f 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #12a364 0%,#11985e 68%,#107f4f 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #12a364 0%,#11985e 68%,#107f4f 100%); /* W3C */
    -webkit-box-shadow:  1px 1px 4px 1px rgba(0,0,0,0.4);
    -moz-box-shadow:  1px 1px 4px 0px rgba(0,0,0,0.4);
    box-shadow:  1px 1px 4px 1px rgba(0,0,0,0.4);
    text-shadow: 1px 1px 0 rgba(0,0,0,0.4);
}

a:hover.green {
    background: #55bb8f; /* Old browsers */
    background: -moz-linear-gradient(top,  #55bb8f 0%, #53af87 68%, #50a27f 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#55bb8f), color-stop(68%,#53af87), color-stop(100%,#50a27f)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #55bb8f 0%,#53af87 68%,#50a27f 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #55bb8f 0%,#53af87 68%,#50a27f 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #55bb8f 0%,#53af87 68%,#50a27f 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #55bb8f 0%,#53af87 68%,#50a27f 100%); /* W3C */
}



a.blue, button.blue {
    background: #00a7e2; /* Old browsers */
    background: -moz-linear-gradient(top,  #00a7e2 0%, #009ed5 68%, #0098cd 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00a7e2), color-stop(68%,#009ed5), color-stop(100%,#0098cd)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #00a7e2 0%,#009ed5 68%,#0098cd 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #00a7e2 0%,#009ed5 68%,#0098cd 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #00a7e2 0%,#009ed5 68%,#0098cd 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #00a7e2 0%,#009ed5 68%,#0098cd 100%); /* W3C */
    -webkit-box-shadow:  1px 1px 4px 1px #c2c2c2;
    -moz-box-shadow:  1px 1px 4px 0px #c2c2c2;
    box-shadow:  1px 1px 4px 1px #c2c2c2;
    text-shadow: 1px 1px 0 #c2c2c2;
}

a:hover.blue {
    background: #61c5e9; /* Old browsers */
       background: -moz-linear-gradient(top,  #61c5e9 0%, #5dbee1 68%, #56b2d2 100%); /* FF3.6+ */
       background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#61c5e9), color-stop(68%,#5dbee1), color-stop(100%,#56b2d2)); /* Chrome,Safari4+ */
       background: -webkit-linear-gradient(top,  #61c5e9 0%,#5dbee1 68%,#56b2d2 100%); /* Chrome10+,Safari5.1+ */
       background: -o-linear-gradient(top,  #61c5e9 0%,#5dbee1 68%,#56b2d2 100%); /* Opera 11.10+ */
       background: -ms-linear-gradient(top,  #61c5e9 0%,#5dbee1 68%,#56b2d2 100%); /* IE10+ */
       background: linear-gradient(to bottom,  #61c5e9 0%,#5dbee1 68%,#56b2d2 100%); /* W3C */
}

/*-----------------------------------------------------
 *  FORMS
 *-----------------------------------------------------*/

.selector,
.radio,
.checker,
.uploader,
.button,
.selector *,
.radio *,
.checker *,
.uploader *,
.button *{
  margin: 0;
  padding: 0;
}

form {
    margin: 0;
    padding: 0;
    /*float: left;*/
    position: relative;
}

form ul, .column.one form ul{
    margin: 0;
    padding: 0;
}

form li {
    float: left;
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
}

.dd-container {
  position: relative;
}

.dd-select {
    float: left;
    cursor: pointer;
    position: relative;
}

#dropdown-state .dd-container {
    border: none;
    width: 296px;
}

#dropdown-state .dd-options {
    width: 174px;
    padding-top: 5px;
    top: -10px;
}

#dropdown-state .dd-options a {
    width: 125px;
}

#dropdown-state select, #dropdown-state label, #dropdown-state .dd-select, #dropdown-state .dd-container {
    font-size: 13px;
}

#dropdown-state .dd-select {
    margin-left: -3px;
    width: 220px;
    height: 43px;
    background: transparent url("../images/form-select-small.png") left top no-repeat;
}

#dropdown-state .dd-select:hover {
    background: transparent url("../images/form-select-small.png") left bottom no-repeat;
}

#dd_billpay .dd-select, #dd_dashbillpay .dd-select {
  width: 220px;
  height: 41px;
  background: transparent url("../images/form-select-small.png") left top no-repeat;
}

#dd_billpay .dd-select:hover, #dd_dashbillpay .dd-select:hover {
  background: transparent url("../images/form-select-small.png") left bottom no-repeat;
}

#dropdown-state .dd-options, #dd_billpay .dd-options, #dd_dashbillpay .dd-options {
  padding-left: 0;
  margin: 0;
  list-style: none;
}

#dd_billpay .dd-options, #dd_dashbillpay .dd-options {
  position:absolute;
  left: 0;
  top: 30px;
  width: 177px;
  padding-top: 12px;
  padding-bottom: 6px;
}


#aquaonline #dd_billpay .dd-options {
  position:absolute;
  left: 4px;
  top: 32px;
  width: 134px;
}

#dd_billpay .dd-options a, #dd_dashbillpay .dd-options a {
  width: 130px;
}

#dd_billpay .dd-select a, #dd_dashbillpay .dd-select a {
  font-size: 13px;
  line-height: 34px;
}

#contentmain-left .dd-select, #callout-pay .dd-select {
    width: 225px;
    height: 43px;
}

#contentmain-left .dd-select{
    background: transparent url("../images/form-select-small.png") left top no-repeat;
}

#callout-pay .dd-select {
    background: transparent url("../images/form-select-small-blue.png") left top no-repeat;
}

.dd-select a {
    color: #9b9b9b;
    font: 18px/18px "carto", Arial, sans-serif;
    padding-left: 18px;
    line-height: 43px;
    width: 227px;
    display: block;
    text-decoration: none;
}

#contentmain-left .dd-select a, #callout-pay .dd-select a {
    font: 13px/37px "carto", Arial, sans-serif;
    display: block;
    width: 161px;
    padding-top: 2px;
}

#contentmain-left .dd-select a:hover, #callout-pay .dd-select a:hover {
    color: #5c5c5c;
}

#callout-pay .dd-select:hover{
    background: transparent url("../images/form-select-small-blue.png") left bottom no-repeat;
}

#contentmain-left .dd-select:hover{
    background: transparent url("../images/form-select-small.png") left bottom no-repeat;
}

#contentmain-right .dd-selected {
	overflow-x: hidden;
	width: 145px;
}


#contentmain-right .dd-selected-text {
	width: 250px;
	display: block;
}

.dd-options {
    float: left;
    position: relative;
    top: -16px;
    left: 1px;
    background:#fff;
    width: 240px;
    z-index: 10;
    -webkit-border-radius: 0px 0px 6px 6px;
    -moz-border-radius: 0px 0px 6px 6px;
    border-radius: 0px 0px 6px 6px;
    -webkit-box-shadow: 1px 1px 0px 0px #e1e3d1;
    -moz-box-shadow: 1px 1px 0px 0px #e1e3d1;
    box-shadow: 1px 1px 0px 0px #e1e3d1;
    padding-bottom: 10px;
    padding-top: 8px;
}

#contentmain-left .dd-options, #callout-pay .dd-options {
    width: 134px;
  padding-left: 40px;
  list-style: none;
  position: absolute;
  left: 4px;
}

#contentmain-left .dd-options
{
    top: 25px;
}

#callout-pay .dd-options
{
    top: 125px;
}

#contentmain-left #dd_dashbillpay .dd-options a {
    width: 136px;
}

#contentmain-left #dd_dashbillpay .dd-select a, #contentmain-left #dd_billpay .dd-select a{
    width: 162px;
}

#contentmain-left #dd_dashbillpay .dd-selected-text, #contentmain-left #dd_billpay .dd-selected-text {
    width: 250px;
    display: block;
}


#contentmain-left #dd_dashbillpay .dd-selected, #contentmain-left #dd_billpay .dd-selected {
    overflow-x: hidden;
}

#contentmain-left #dd_statepage .dd-options
{
    top: 60px;
}

.dd_statebillpay {
  z-index: 300;
}

.dd-options ul li {
    width: 240px;
    font-size: 12px;
    text-indent: 0px;
    cursor: pointer;
    list-style: none;
}


.dd-options a {
    text-decoration: none;
    cursor: pointer;
    float: left;
    position: relative;
    font: 16px/16px "carto", sans-serif;
    z-index: 25;
    padding: 0 12px;
    margin: 0 0 6px 12px;
    font-size: 13px;
    line-height: 30px;
    width: 192px;
    text-align: left;
}

#callout-pay .dd-options a{
    width: 126px;
    left: -39px;
}

#contentmain-left .dd-options a {
    width: 126px;
    left: -45px;
}

#callout-pay .dd-options a{
    color: #00a7e2;
}

#contentmain-left .dd-options a{
    color: #12a364;
}

.dd-options a:hover {
    color: #5c5c5c;
    background: #e4e4e4;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
}

#contentmain-left .dd-options a:hover, #callout-pay .dd-options a:hover {
    color: #5c5c5c;
}

.left input.text, #contentmain-right input.text, #search input.text, #contentmain-left input.text, #footermain input.text {
    float: left;
    position: relative;
    border: none;
    -webkit-border-radius: 6px 0px 0px 6px;
    -moz-border-radius: 6px 0px 0px 6px;
    border-radius: 6px 0px 0px 6px;
    padding: 12px 10px 10px 18px;
    width: 140px;
    font: 13px/13px "carto", Arial, sans-serif;
}

input.text {
    float: left;
    position: relative;
    -webkit-border-radius: 6px 6px 6px 6px;
    -moz-border-radius: 6px 6px 6px 6px;
    border-radius: 6px 6px 6px 6px;
    padding: 8px 6px 6px 14px;
    margin-bottom: 10px;
    box-shadow: inset 1px 1px 0px 0px #9b9b9b;
    -webkit-box-shadow: inset 1px 1px 0px 0px #9b9b9b;
    -moz-box-shadow: inset 1px 1px 0px 0px #9b9b9b;
    font: 13px/13px "carto", Arial, sans-serif;
}

/*input.submit {
    float: left;
    position: relative;
    color: #fff;
    -webkit-border-radius: 6px 6px 6px 6px;
    -moz-border-radius: 6px 6px 6px 6px;
    border-radius: 6px 6px 6px 6px;
    padding: 10px;
    width: 44px;
    height: 36px;
}*/

span.right input.submit {
	margin-right: 20px;
}

.left.large input.submit, .right.large input.submit {
    width: inherit;
}

#contentmain-right input.submit, .left input.submit, #search input.submit, #contentmain-left input.submit, #footermain input.submit {
    float: left;
    position: relative;
    background: #fff;
    color: #fff;
    border: none;
    -webkit-border-radius: 0px 6px 6px 0px;
    -moz-border-radius: 0px 6px 6px 0px;
    border-radius: 0px 6px 6px 0px;
    padding: 10px;
    height: 37px;
}

.left.circle input.submit {
    width: inherit;
    -webkit-border-radius: 6px 6px 6px 6px;
    -moz-border-radius: 6px 6px 6px 6px;
    border-radius: 6px 6px 6px 6px;
}

.left.checkbox input {
   margin-top: 2px;
}

.blue input.text, #contentmain-right .blue input.text, #search .blue input.text{
    color: #878787;
    box-shadow: inset 2px 2px 2px 0px #9B9B9B;
    -webkit-box-shadow: inset 2px 2px 2px 0px #9B9B9B;
       -moz-box-shadow: inset 2px 2px 2px 0px #9B9B9B;
}

.blue input.submit, #contentmain-right .blue input.submit, #search .blue input.submit  {
    text-shadow: 1px 1px 0 #0080AD;
    -webkit-box-shadow: inset -1px 2px 2px 0px #004963;
    box-shadow: inset -1px 2px 2px 0px #004963;
       -moz-box-shadow: inset -1px 2px 2px 0px #004963;
}

.blue input.submit, #contentmain-right .blue input.submit, #search .blue input.submit {
    background: #00a7e2; /* Old browsers */
       background: -moz-linear-gradient(top,  #00a7e2 0%, #009ed5 68%, #0098cd 100%); /* FF3.6+ */
       background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00a7e2), color-stop(68%,#009ed5), color-stop(100%,#0098cd)); /* Chrome,Safari4+ */
       background: -webkit-linear-gradient(top,  #00a7e2 0%,#009ed5 68%,#0098cd 100%); /* Chrome10+,Safari5.1+ */
       background: -o-linear-gradient(top,  #00a7e2 0%,#009ed5 68%,#0098cd 100%); /* Opera 11.10+ */
       background: -ms-linear-gradient(top,  #00a7e2 0%,#009ed5 68%,#0098cd 100%); /* IE10+ */
       background: linear-gradient(to bottom,  #00a7e2 0%,#009ed5 68%,#0098cd 100%); /* W3C */
}

.blue input.submit:hover, #contentmain-right .blue input.submit:hover, #search .blue input.submit:hover{
       background: #61c5e9; /* Old browsers */
       background: -moz-linear-gradient(top,  #61c5e9 0%, #5dbee1 68%, #56b2d2 100%); /* FF3.6+ */
       background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#61c5e9), color-stop(68%,#5dbee1), color-stop(100%,#56b2d2)); /* Chrome,Safari4+ */
       background: -webkit-linear-gradient(top,  #61c5e9 0%,#5dbee1 68%,#56b2d2 100%); /* Chrome10+,Safari5.1+ */
       background: -o-linear-gradient(top,  #61c5e9 0%,#5dbee1 68%,#56b2d2 100%); /* Opera 11.10+ */
       background: -ms-linear-gradient(top,  #61c5e9 0%,#5dbee1 68%,#56b2d2 100%); /* IE10+ */
       background: linear-gradient(to bottom,  #61c5e9 0%,#5dbee1 68%,#56b2d2 100%); /* W3C */
}

.green input.text, #contentmain-left input.text, #contentmain-left textarea {
    color: #878787;
    box-shadow: inset 2px 2px 2px 0px #9b9b9b;
    -webkit-box-shadow: inset 2px 2px 2px 0px #9b9b9b;
    -moz-box-shadow: inset 2px 2px 2px 0px #9b9b9b;
}

.green input.text, #contentmain-left .rounded input.text, #contentmain-left .rounded textarea {
     border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px; 
    border: 1px solid #dedede;
}

.green input.submit, #contentmain-left input.submit, #footermain input.submit {
    text-shadow: 1px 1px 0 #0c6b41;
    color: #fff;
    -webkit-box-shadow: inset -1px 2px 2px 0px #0f7146;
    box-shadow: inset -1px 2px 2px 0px #0f7146;
    -moz-box-shadow: inset -1px 2px 2px 0px #0f7146;
}

.green input.submit, #contentmain-left input.submit, #footermain input.submit {
      background: #12a364; /* Old browsers */
      background: -moz-linear-gradient(top,  #12a364 0%, #11985e 68%, #107f4f 100%); /* FF3.6+ */
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#12a364), color-stop(68%,#11985e), color-stop(100%,#107f4f)); /* Chrome,Safari4+ */
      background: -webkit-linear-gradient(top,  #12a364 0%,#11985e 68%,#107f4f 100%); /* Chrome10+,Safari5.1+ */
      background: -o-linear-gradient(top,  #12a364 0%,#11985e 68%,#107f4f 100%); /* Opera 11.10+ */
      background: -ms-linear-gradient(top,  #12a364 0%,#11985e 68%,#107f4f 100%); /* IE10+ */
      background: linear-gradient(to bottom,  #12a364 0%,#11985e 68%,#107f4f 100%); /* W3C */
}

.green input.submit:hover, #contentmain-left input.submit:hover, #footermain input.submit:hover {
    background: #55bb8f; /* Old browsers */
       background: -moz-linear-gradient(top,  #55bb8f 0%, #53af87 68%, #50a27f 100%); /* FF3.6+ */
       background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#55bb8f), color-stop(68%,#53af87), color-stop(100%,#50a27f)); /* Chrome,Safari4+ */
       background: -webkit-linear-gradient(top,  #55bb8f 0%,#53af87 68%,#50a27f 100%); /* Chrome10+,Safari5.1+ */
       background: -o-linear-gradient(top,  #55bb8f 0%,#53af87 68%,#50a27f 100%); /* Opera 11.10+ */
       background: -ms-linear-gradient(top,  #55bb8f 0%,#53af87 68%,#50a27f 100%); /* IE10+ */
       background: linear-gradient(to bottom,  #55bb8f 0%,#53af87 68%,#50a27f 100%); /* W3C */
}

#splash {
    width: 428px;
    height: 622px;
    background: url("../images/bg-splash.png") 0 0 no-repeat;
    right: -60px;
    bottom: 0;
    position: absolute;
}

.shadow-bottom {
    -webkit-box-shadow: 0px 5px 5px 0px #c5c5c5;
    -moz-box-shadow: 0px 5px 5px 0px #c5c5c5;
    box-shadow: 0px 5px 5px 0px #c5c5c5;
}

.form.stacked li{
    display: block;
    width: 608px;
}

.form.stacked label{
    padding-left: 5px;
    padding-right: 10px
}

li.divider {
    border-bottom: 1px solid #ccc;
    margin-bottom: 20px;
}

table td.field-label
{
    font-size: 14px;
    font-weight:bold;
    text-align:right;
}

.error-label
{
    color:Red;
}

span.required
{
    color:#00a7e2;
}

#form_contact td{
    padding: 5px 0 5px 5px;;
}


/* ---------------- Rate Card ---------------- */

.RateCardTable span {
    font-weight: bold;
    display: block;
}

/*-----------------------------------------------------
 *  TABS
 *-----------------------------------------------------*/

ul.tabs {
    margin: -33px 0 0 10px;
    padding: 0;
    float: left;
    position: relative;
    display: block;
}


.tabs li {
    float: left;
    position: relative;
    list-style: none;
    margin: 0 6px;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    z-index: 0;
}

.tabs li.first {
    margin-left: 18px;
}

.tabs li.active {
    z-index: 2;
}

.tabs a {
    color: #fff;
    display: block;
    padding: 0 30px;
    font-size: 15px;
    line-height: 33px;
    -webkit-border-top-left-radius: 6px;
    -webkit-border-top-right-radius: 6px;
    -moz-border-radius-topleft: 6px;
    -moz-border-radius-topright: 6px;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    text-shadow: 1px 1px 0 #1c744e;
    background: #12a364; /* Old browsers */
    background: -moz-linear-gradient(top,  #12a364 0%, #107f4f 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#12a364), color-stop(100%,#107f4f)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #12a364 0%,#107f4f 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #12a364 0%,#107f4f 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #12a364 0%,#107f4f 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #12a364 0%,#107f4f 100%); /* W3C */
}

.tabs a:hover, .tabs li.active a {
    color: #013772;
    text-decoration: none;
    background: #fff;
    text-shadow: none;
    box-shadow:  0px -1px 1px 0px #a1a1a1;
    -webkit-box-shadow:  0px -1px 1px 0px #a1a1a1;
    box-shadow:  0px -1px 1px 0px #a1a1a1;
}

/*-----------------------------------------------------
 *  BREADCRUMBS
 *-----------------------------------------------------*/

.breadcrumbs {
    float: left;
    position: relative;
    padding-bottom: 17px;
    border-bottom: 1px solid #7cd0f0;
    width: 665px;
    font-size: 14px;
    line-height: 18px;
    color: #003876;
    margin-bottom: 22px;
}

.full .breadcrumbs {
    width: 989px;
}

.breadcrumbs ul {
    margin: 0;
    padding: 0;
}

.breadcrumbs li {
    list-style: none;
    float: left;
    position: relative;
}

.breadcrumbs li{
    padding-left: 10px;
}

.breadcrumbs span {
    padding-left: 14px;
    color: #0081ae;
}

.breadcrumbs a, .breadcrumbs a:visited {
    color: #0081ae;
}

.breadcrumbs a:hover {
    color: #003876;
}

/*-----------------------------------------------------
 *  BASIC STRUCTURE
 *-----------------------------------------------------*/

#wrapper {
    width: 1200px;
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto;
    border-top: 6px solid #ffffff;
    padding-top: 18px;
    -webkit-box-shadow:  0px 0px 10px 0px #cacaca;
    -moz-box-shadow:  0px 0px 10px 0px #cacaca;
    box-shadow:  0px 0px 10px 0px #cacaca;
    overflow-x: hidden;
}

#wrapper-top {
    float: left;
    position: relative;
    width: 1200px;
    height: 328px;
    margin-top: -18px;
}

.home #wrapper-top {
    float: left;
    position: relative;
    width: 1200px;
    height: 460px;
    margin-top: -18px;
}

/* ---------------- Banner Images ---------------- */

.news #wrapper-top, .state #wrapper-top {
    background: #ffffff url("../images/bg-banner-news.jpg") 0 0 no-repeat;
}

.resources #wrapper-top {
    background: #ffffff url("../images/bg-banner-resources.jpg") 0 0 no-repeat;
}

#wrapper-bottom {
    float: left;
    position: relative;
    width: 1200px;
    background: #f3fbff url("../images/bg-gradient-blue-sub.png") 0 0 repeat-x;
    padding-top: 40px;
    height:auto !important; 
}

.home #wrapper-bottom {
    float: left;
    position: relative;
    width: 1200px;
    background: #ffffff url("../images/bg-gradient-blue.png") 0 0 repeat-x;
}

header {
    position: relative;
    height: 327px;
    width: 955px;
    margin: 0 auto;
}

.home header {
    position: relative;
    height: 530px;
    width: 955px;
    margin: 0 auto;
}

header h1 {
    font: 50px/50px "carto", Arial, sans-serif;
    color: #fff;
    text-shadow: 2px 1px 4px #1b1b1b;
    font-weight: bold;
    position: absolute;
    margin-top: 158px;
    margin-left: 10px;
    font-weight: normal;
}

#dropdown-state {
    position: relative;
}

.home #dropdown-state {
    position: absolute;
    top: 365px;
    left: 370px;
}

#logo {
    position: relative;
    width: 222px;
    height: 69px;
    z-index: 10;
    text-align: center;
    margin: 0 18px 18px 18px;
    top: 30px;
}

#logo a {
    display: block;
    background: transparent;
}

#contentmain, #contentsub {
    position: relative;
    padding: 0;
    width: 989px;
    margin: 0 auto;
    min-height: 1300px;
}

#contentmain-left {
    position: relative;
    width: 695px;
    padding: 0;
    float: left;
}

#contentmain-left.full {
    width: 989px;
}

#contentmain-left-left {
    position: relative;
    width: 356px;
    padding: 0;
    float: left;
}

#contentmain-left-right {
    position: relative;
    width: 306px;
    padding-left: 33px;
    float: left;
    text-align: center;
}

.home #contentmain-right {
	position: relative;
	width: 294px;
	float: right;
	padding: 0;
	left: 51px;
	top: 247px;
	z-index: 20;
}

#contentmain-right {
	position: relative;
	width: 294px;
	float: right;
	padding: 0;
	margin-top: -151px;
	left: 51px;
	top: 247px;
	z-index: 20;
}

/*-----------------------------------------------------
 *  IMAGES
 *-----------------------------------------------------*/

img.frame {
    padding: 10px;
    -webkit-box-shadow: 2px 3px 3px 0px #cacaca;
    -moz-box-shadow: 2px 3px 3px 0px #cacaca;
    box-shadow: 2px 3px 3px 0px #cacaca;
}

img.frame:hover {
    opacity: 0.7;
    filter:alpha(opacity=70);
}

img.frame.left {
    margin: 0 20px 20px 0;
}

img.quote {
    margin-left: 25px;
}

ol.thumb-grid {
    float: left;
    display: block;
    margin: 0 0 14px 0;
    padding: 0;
    width: 637px;
}

ol.thumb-grid li {
    float: left;
    display: block;
    position: relative;
    margin: 0;
    list-style: none;
}

ol.thumb-grid li a{
    margin-right: 35px;
}

ol.thumb-grid li.last a{
    margin-left: 0;
}

/* -------------- COLOR BOX ---------------- */

.inline_content {
    width: 800px;
    padding: 10px 15px 40px 15px;
    background:#fff;
    border: 3px solid #d5f4fd;
}

/* -------------- OVERLAY ---------------- */

#cboxOverlay {
    background: rgba(191, 226, 236, .8);
}

#cboxContent {
    -webkit-box-shadow:  0px 0px 40px 3px rgba(0, 0, 0, .46);
    box-shadow:  0px 0px 40px 3px rgba(0, 0, 0, .46);
}

/* -------------- REMOVES BORDER ---------------- */

#cboxTopLeft, #cboxTopRight, #cboxBottomLeft, #cboxBottomRight {
    width: 40px;
    height: 40px;
    background: none;
}

#cboxMiddleLeft, #cboxMiddleRight {
    width: 40px;
    background: none;
}

#cboxTopCenter, #cboxBottomCenter {
    height: 40px;
    background: none;
}

#cboxLoadedContent {
    margin-bottom: 0;
}

/* -------------- ALERT HEADER ---------------- */

#alerthead h1 {
    color: #d88b45;
    font-size: 25px;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
    padding: 25px 40px 15px 155px;
}

#alerthead img {
    position: absolute;
    left: 56px;
    top: 40px;
}

/* Inline content stuff */

.inline_content hr {
    margin-top: 50px;
}

.inline_content h2 {
    color: #00a7e2;
    font-size: 18px;
    font-weight: normal;
    font-family: Arial, Helvetica, sans-serif;
    text-shadow: none;
    padding: 15px 40px 0 40px;
}

.inline_content p {
    color: #5c5c5c;
    font-size: 14px;
    font-weight: normal;
    font-family: Arial, Helvetica, sans-serif;
    padding-left: 40px;
    padding-right: 55px;
}

.inline_content img#state-full {
    margin: 0 auto;
}

/* -------------- COLOR BOX ---------------- */

.inline_content {
    width: 800px;
    padding: 10px 15px 40px 15px;
    background:#fff;
    border: 3px solid #d5f4fd;
}

/* Overlay */
#cboxOverlay {
    background: rgba(191, 226, 236, .8);
}

#cboxContent {
    -webkit-box-shadow:  0px 0px 40px 3px rgba(0, 0, 0, .46);
    box-shadow:  0px 0px 40px 3px rgba(0, 0, 0, .46);
}

/* Gets rid of original border */
#cboxTopLeft, #cboxTopRight, #cboxBottomLeft, #cboxBottomRight {
    width: 40px;
    height: 40px;
    background: none;
}

#cboxMiddleLeft, #cboxMiddleRight {
    width: 40px;
    background: none;
}

#cboxTopCenter, #cboxBottomCenter {
    height: 40px;
    background: none;
}

#cboxLoadedContent {
    margin-bottom: 0;
}

#cboxCurrent, #cboxPrevious, #cboxNext{
    display: none;
}

/* Close button */
#cboxClose {
    position:absolute;
    top: 15px;
    right: 15px;
    background:url("../images/colorbox/close.png") no-repeat;
    text-indent:-9999px;
    height: 37px;
    width: 85px;
    border: none;
}

#cboxClose:hover {
    background:url("../images/colorbox/closeover.png") no-repeat;
}

/* Alert Header */

.alerthead h1 {
    color: #d88b45;
    font-size: 25px;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
    padding: 25px 40px 15px 155px;
}

.alerthead img {
    position: absolute;
    left: 56px;
    top: 40px;
}

/* Content stuff */

.inline_content hr {
    margin-top: 50px;
}

.inline_content h2 {
    color: #00a7e2;
    font-size: 18px;
    font-weight: normal;
    font-family: Arial, Helvetica, sans-serif;
    text-shadow: none;
    padding: 15px 40px 0 40px;
}

.inline_content p {
    color: #5c5c5c;
    font-size: 14px;
    font-weight: normal;
    font-family: Arial, Helvetica, sans-serif;
    padding-left: 40px;
    padding-right: 55px;
}

.inline_content img#state {
    float: right;
    padding: 20px 40px 20px 20px;
}

.alerthead h1 {
    color: #d88b45;
    font-size: 25px;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
    padding: 25px 40px 15px 155px;
}

.alerthead img {
    position: absolute;
    left: 56px;
    top: 40px;
}

/* Content stuff */

.inline_content hr {
    margin-top: 50px;
}

.inline_content h2 {
    color: #00a7e2;
    font-size: 18px;
    font-weight: normal;
    font-family: Arial, Helvetica, sans-serif;
    text-shadow: none;
    padding: 15px 40px 0 40px;
}

.inline_content p {
    color: #5c5c5c;
    font-size: 14px;
    font-weight: normal;
    font-family: Arial, Helvetica, sans-serif;
    padding-left: 40px;
    padding-right: 55px;
}

.inline_content img#state {
    float: right;
    padding: 20px 40px 20px 20px;
}

/*-----------------------------------------------------
 *  COLUMNS
 *-----------------------------------------------------*/

.column {
    float: left;
    position: relative;
}

.column.two, .column.one {
    width: 664px;
    margin-top: 22px;
    -webkit-border-top-left-radius: 6px;
    -webkit-border-top-right-radius: 6px;
    -moz-border-radius-topleft: 6px;
    -moz-border-radius-topright: 6px;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}

.full .column.two,.full .column.one {
    width: 989px;
}

.column.one {
    background: #fff;
    -webkit-box-shadow: 0px 1px 4px 0px #cacaca;
    -moz-box-shadow: 0px 1px 4px 0px #cacaca;
    box-shadow: 0px 1px 4px 0px #cacaca;
    /*height:auto !important; */
    /*min-height: 804px;*/
}

.column.one .pad {
    padding: 0 14px 20px 14px;
}

.column.one .spotlight .pad {
    padding: 0 28px 20px 28px;
}

.column.one .section .pad {
    padding: 0 28px 20px 28px;
}

.column.one h3 {
    color: #00a7e2;
    font: 18px/18px "carto", Arial, sans-serif;
    padding: 0;
    margin: 0px 0px 5px 0px;
}

.column.one h3.dark-blue {
    color: #061f5c;
}

.column.one h4 {
    color: #033e7f;
    font: 18px/18px "carto", Arial, sans-serif;
    padding: 0;
}

.column.one .detail h4 {
    margin: 0;
}

.column.one .two-columns {
    float: left;
    position: relative;
}

.column.one p + ul {
    margin-top: -12px;
}

.column.one ul {
    padding: 0 0 0 14px;
    margin-left: 20px;
}

.column.one li {
    margin-left: 7px;
}

.column.one .green li {
    margin-left: 0px;
}


.column.one .screenshot-video {
    margin: 0;
    padding: 14px 0;
}

.column.one .section .left {
    width: 332px;
}

.full .column.one .section .left {
    width: 392px;
}

#helpful-links ul li {
    margin-bottom: 10px;
}

#new-service h4 {
    color: #00a7e2;
}

#new-service p {
    padding-left: 0px;
    padding-right: 0px;
}
.column.one {
    padding-bottom: 30px;
}

.column.one .section {
    float: left;
    position: relative;
    padding-bottom: 20px;
}

.column.one .section .border-left {
    border-left: 1px solid #e3e2e1;
    padding-bottom: 20px;
    width: 331px;
}

.column.one .section.bottom-grey {
    display: block;
    background: #e8e8e8 url("../images/bg-grey-texture.png") 0 0 repeat-y;
    -webkit-box-shadow: inset 0px 5px 5px 0px #c5c5c5;
    -moz-box-shadow: inset 0px 5px 5px 0px #c5c5c5;
    box-shadow: inset 0px 5px 5px 0px #c5c5c5;
    padding-top: 16px;
    padding-bottom: 30px;
    margin-bottom: -30px;
}

.column.one .section.contact-callout {
    text-align: center;
    width: 100%;
}

.column.one .section.contact-callout .icon {
    margin-top: 30px;
    margin-bottom: 20px;
}

.column.one .section.contact-callout h3 {
    margin-bottom: -10px;
    font-weight: bold;
}

.column.one .section.contact-callout .green {
    font-weight: bold;
}

/* extremely specific alignment request by client */
.column.one.left-gray .section.bottom-grey .border-left p {
    padding-left: 0;
}

.column.one.left-gray .section.bottom-grey .border-left p:first-of-type {
    padding-top: 10px;
}
/**/

div.section.full.bottom-grey a { 
	margin-top: 15px; 
}

div.section.full.bottom-grey li {
	margin-top: 10px;
}

.resources .column.one .section.bottom-grey {
    padding-bottom: 32px;
}

.full .column.one .section.bottom-grey  {
    background: #e8e8e8 url("../images/bg-grey-texture.png") 0 0 repeat;
    width: 785px;
    margin-bottom: -20px;
}

/* alerts and outages page */

.column.one .top-grey {
  display: block;
    background: #e8e8e8 url("../images/bg-grey-texture.png") 0 0 repeat;
    -webkit-box-shadow: inset 0px -3px 5px 0px #C5C5C5;
    -moz-box-shadow: inset 0px -3px 5px 0px #C5C5C5;
    box-shadow: inset 0px -3px 5px 0px #C5C5C5;
    padding-top: 16px;
}

.column.one .top-grey h2 {
  padding-top: 10px;
  padding-bottom: 0;
  text-shadow: none;
}

.column.one .top-grey p {
    padding-left: 0px;
    padding-right: 0px;
}

.column.one #alert.page {
  padding: 5px 0 0 140px;
  background-position: 10px 7px;
}


.column.one #alertsgrey {
  float: left;
  width: 665px;
  position: relative;
  left: -14px;
  top: -26px;
}

.column.one #alertsgrey form {
  padding-left: 20px;
  padding-bottom: 15px;
}

.column.one #alertsgrey img {
  display: block;
  float: left;
  padding-top: 15px;
  padding-left: 30px;
}

.column.one #alertsgrey h2 {
  padding-left: 20px;
}

.column.one #alertsgrey p {
    padding-left: 20px;
}

.column.one #alertsgrey p span.error-label {
    padding-left: 0;
    margin-left: -20px;
}

#alerts-results {
	background: #f5f5f5;
	padding: 25px 20px 10px 20px;
	position: relative;
	float: left;
 margin: 0 20px 30px -100px;
 width: 555px;
}

#alertsgrey #alerts-results p {
	padding: 0;
	margin-top: -5px;
}

#alerts-results h3 {
	color: #003876;
	font-weight: bold;
}

#alerts-results hr {
	margin: 1.5em 0;
}

#alerts-results .enddate {
	padding-left: 20px;
}

#form-outage-wrapper {
    width: 547px;
}

#form-alerts {
    width: 530px;
}

/* end alerts and outages page */
/* bill pay page */

.column.one #aquaonline {
  width: 665px;
  position: relative;
  left: -14px;
  padding-bottom: 16px;
  margin-bottom: 50px;
}





#zipcheck {
  height: 120px;
  width: 620px;
  background: url(../images/zipcheck.jpg) 0 0 no-repeat;
}

#zipcheck a#dlzipcheck {
  float: left;
  position: relative;
  margin: 65px 0 0 43px;
}


#billpaycol .left:first-child p {
  margin-top: 5px;
  font-size: 13px;
  padding: 0;
}

#billpaycol .left {
  width: 49%;
  margin: 0px;
  padding: 0px;
  float: left;
}

#billpaycol .left a {
    margin-top: 5px;
    margin-bottom:10px;
}

#billpaycol .left:first-child .pad {
    padding-left: 0px;
}

#billpaycol .left:last-child .pad {
    padding-right: 0px;
}

#billpaycol .pad {
  padding-bottom: 0;
}

p.grey {
  color: #939393;
}

/* end bill pay page*/


.column.one .link-bottom {
    float: left;
    position: relative;
    width: 665px;
    height: 14px;
    margin-bottom: -13px;
    margin-top: -1px;
    top: 1px;
    background: #65696c;
}

.column.one .link-bottom a {
    position: relative;
    display: block;
    width: 343px;
    height: 52px;
    background: #65696c;
    margin: 0 auto;
    top: -52px;
    -webkit-border-top-left-radius: 6px;
    -webkit-border-top-right-radius: 6px;
    -moz-border-radius-topleft: 6px;
    -moz-border-radius-topright: 6px;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    text-align: center;
    font-size: 16px;
    color: #fff;
    font-weight: bold;
    font-family: "carto", Arial, sans-serif;
    padding-top: 13px;
}

.column.one .link-bottom a:hover {
    text-decoration: none;
    color: #d3d3d3;
}

.column.one .link-bottom a .small {
    font-size: 12px;
    margin-top: 4px;
    display: block;
}

.column.two.has-tabs {
    margin-top: 50px;
}

.column.two.left-blue {
    background: #b9e1f7 url("../images/bg-blue-left.jpg") 0 0 repeat-y;
}

.column.two.left-gray {
    background: #ebebeb;
}

/* ---------------- Column - Left Left ---------------- */

.column.column-left {
    float: left;
    position: relative;
    width: 204px;
}

.cap-bottom {
    position: absolute;
    width: 729px;
    height: 8px;
    bottom: -1px;
    left: -27px;
    background: url("../images/bg-bottom-cap.png") 0 0 no-repeat;
}

.full .cap-bottom {
    width: 1040px;
    left: -29px;
    bottom: -2px;
    background: url("../images/bg-bottom-cap-long.png") 0 0 no-repeat;
}

/* ---------------- Column - Left Right ---------------- */

.column.column-right {
    float: left;
    position: relative;
    width: 460px;
    margin-top: -16px;
    -webkit-border-top-left-radius: 6px;
    -webkit-border-top-right-radius: 6px;
    -moz-border-radius-topleft: 6px;
    -moz-border-radius-topright: 6px;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    -webkit-box-shadow:  0px 1px 4px 0px #cacaca;
    -moz-box-shadow:  0px 1px 4px 0px #cacaca;
    box-shadow:  0px 1px 4px 0px #cacaca;
    background: #fff;
    padding-bottom: 20px;
    min-height: 700px;
    height:auto !important; 
    height: 700px; 
}

.column.one.column-right {
    width: 785px;
}

.column.column-right h3 {
    font: 18px/22px "carto",Arial,sans-serif;
    color: #00a7e2;
    margin: 0 0 -20px 0;
}

/* news article */
.column.column-right .blueheading {
  font: 18px/22px "carto",Arial,sans-serif;
  color: #00A7E2;
  margin: 20px 0 -10px 0;
}

.column.column-right .articledate {
  color: #b1b1b1;
  margin-bottom: -5px;
}
/* end news article */

.full .column.column-right h3 {
    margin: 0;
}

.column.column-right .view-more {
    position: relative;
    padding-bottom: 10px;
}
.column.column-right .view-more h3 {
    margin: 0 0 -9px 0;
    color: #05448b;
}

.column.column-right .pad {
    padding: 0 19px;
}

.column.column-right .pad p {
	padding-bottom: 9px;
}

/* ---------------- Column - Right ---------------- */

#contentmain-right .icon {
    margin-right: 12px;
}

#callout-pay {
    padding-top: 30px;
}

#callout-pay .icon, #callout-alerts .icon, #callout-quality .icon {
    margin-top: -5px;
}

#callout-rates .icon {
    margin-top: 10px;
}

#callout-rates {
    padding-bottom: 10px;
}

#callout-rates p {
    padding-top: 10px;
}

#callout-rates h3 {
    padding: 0;
}

/*-----------------------------------------------------
 *  HEADERS
 *-----------------------------------------------------*/

.header {
    position: relative;
    background: transparent url("../images/bg-header-blue.png") 0 0 no-repeat;
    height: 69px;
    margin-top: 16px;
    margin-left: -19px;
    margin-bottom: 10px;
    width: 460px;
}

.header.long
{
    float: left;
    background: transparent url("../images/bg-header-blue-long.png") 0 0 no-repeat;
    width: 666px;
    z-index: 5;
    margin-top: 16px;
  	margin-left: -16px;
}

.header.short
{
    float: left;
    background: transparent url("../images/bg-header-blue-long.png") 0 0 no-repeat;
    width: 666px;
    z-index: 5;
    margin-top: 16px;
  	margin-left: 0px;
}

.header.no-margin-top {
    margin-top: 0px;
}

.header .left, .header .right {
    padding-top: 13px;
}

.header.left {
    width: 450px;
}

.header.left h2{
    text-indent: 41px;
}

.header.split .right.select{
    padding-top: 15px;
}

.header.split div.left {
    width: 230px;
    background: transparent url("../images/divider-header-blue.png") 195px 5px no-repeat;
}

.header.long.split div.left {
    background: transparent url("../images/divider-header-blue.png") 332px 5px no-repeat;
}

.header.long.split div.left {
    width: 333px;
}

.header.long.split div.left .icon{
    margin: -15px 0 0 22px;
}

.header.split .right{
    width: 230px;
}

.header.split .right label{
    color: #fff;
    padding-right: 12px;
}

.header.long.split .right{
    width: 333px;
}

.header.long.split div.right .icon{
    margin: -15px 0 0 22px;
}


.header .cap {
    position: absolute;
    width: 10px;
    height: 61px;
    left: -10px;
    top: 0;
    background: transparent url("../images/bg-header-blue-cap.png") 0 0 no-repeat;
}

.header.long .cap {
    background: transparent url("../images/bg-header-blue-cap.png") 0 0 no-repeat;
}

.header h2 {
    color: #FFFFFF;
    font-family: "carto";
    font-size: 20px;
    text-shadow: none;
    text-indent: 14px;
}

.header.split h2 {
    text-indent: 40px;
}

.header.long.split h2 {
    text-indent: 10px;
}


/*-----------------------------------------------------
 *  CALLOUTS - RIGHT SIDEBAR
 *-----------------------------------------------------*/

.callout {
    position: relative;
    float: left;
    width: 261px;
    color: #595d61;
    font-size: 14px;
    background-image: url(../images/sidebar-bkg.png);
    background-repeat: repeat-y;
}

.callout.first {
    padding-top:30px;
}

.callout.last {
    padding-bottom: 30px; 
    border-bottom: 1px solid  #dddddd;
}

.callout p{
    position: relative;
    float: left;
}

.callout .pad {
    padding: 0px 22px;
}

.callout .divider {
    position: relative;
    float: left;
    width: 260px;
    height: 2px;
    background: transparent url("../images/divider-callout.png") center center no-repeat;
    margin: 29px 0 29px -20px;
}


/* ---------------- Customer Quotes ---------------- */

.quotewrap {
    margin-left: 25px;
    position: relative;
    clear:both;
}

.quotetext {
    width: 542px;
    margin-left: 2px;
    padding: 1px 25px;

    background: #f3f3f5; /* Old browsers */
    background: -moz-linear-gradient(left,  #f3f3f5 0%, #efeef2 58%, #edecef 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#f3f3f5), color-stop(58%,#efeef2), color-stop(100%,#edecef)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left,  #f3f3f5 0%,#efeef2 58%,#edecef 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left,  #f3f3f5 0%,#efeef2 58%,#edecef 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left,  #f3f3f5 0%,#efeef2 58%,#edecef 100%); /* IE10+ */
    background: linear-gradient(to right,  #f3f3f5 0%,#efeef2 58%,#edecef 100%); /* W3C */
}

.quotetext p {
    background: url("../images/img-quoteicon.png") left 40% no-repeat;
    font-style: italic;
    font-weight: normal;
    color: #d88b45;
    font-size: 23px;
    line-height: 28px;
    padding-left: 95px;
    margin-bottom: 0px;
}

.quotetext .author {
    font-style: normal;
    color: #5c5c5c;
    font-size: 14px;
}

.quotetop {
    width: 600px;
    height: 40px;
    background: url("../images/img-quotetop.jpg") no-repeat;
}

.quotebottom {
    width: 600px;
    height: 75px;
    background: url("../images/img-quotebottom.jpg") no-repeat;
}

/*-----------------------------------------------------
 *  MENUS / NAVIGATION
 *-----------------------------------------------------*/


/* ---------------- Navigation - Main ---------------- */

nav#nav-main {
    float: left;
    position: absolute;
    height: 56px;
    width: 979px;
    z-index: 25;
    color: #FFFFFF;
    background: transparent url("../images/bg-nav-main.png") 0 0 no-repeat;
    top: 136px;
	padding-left: 4px;
}

nav#nav-main ul {
    position: relative;
    list-style: none;
    margin: 0 auto;
    padding: 0;
    z-index: 10;
    width: 979px;
}

.resources nav#nav-main {
    background: transparent url("../images/bg-nav-main-resources.png") 0 0 no-repeat;
}

nav#nav-main li {
    position: relative;
    float: left;
    padding: 0;
    margin: 0;
    background: transparent url("../images/divider-nav-main.png") 0 9px no-repeat;
}

nav#nav-main a {
    position: relative;
    font: 14px/14px "carto", sans-serif;
    display: block;
    z-index: 250;
    text-decoration: none;
    color: #FFFFFF;
    text-align: center;
    font-weight: normal;
    line-height: 47px;
    outline: none;
    border: none;
}

nav#nav-main a span {
    padding: 8px 24px;
    margin: 0px 8px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    text-shadow: 1px 1px 0px #0080ad;
}

nav#nav-main li.first {
    background-image: none;
}

nav#nav-main li.first ul.nav-sub {
	margin-left: -4px; 
}

nav#nav-main a:hover span, nav#nav-main li.active a span{
    padding: 8px 24px;
    margin: 0px 8px;
    color: #FFFFFF;
    text-shadow: none;
    background: #4a4b4d; /* Old browsers */
    background: -moz-linear-gradient(top,  #4a4b4d 0%, #161718 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4a4b4d), color-stop(100%,#161718)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #4a4b4d 0%,#161718 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #4a4b4d 0%,#161718 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #4a4b4d 0%,#161718 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #4a4b4d 0%,#161718 100%); /* W3C */
}

nav#nav-main ul.nav-sub {
    position:absolute;
    width: 222px;
    display:none;
    padding: 0;
    margin: 0 0 0 0;
}

nav#nav-main ul.nav-sub:hover {
    display: block;
}

nav#nav-main li.last ul.nav-sub {
    width: 218px;
    margin-left: -10px;
}

nav#nav-main ul.nav-sub .pad{
    background: #ffffff; /* Old browsers */
    background: -moz-linear-gradient(top,  #ffffff 0%, #e9e9e9 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e9e9e9)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #ffffff 0%,#e9e9e9 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #ffffff 0%,#e9e9e9 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #ffffff 0%,#e9e9e9 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #ffffff 0%,#e9e9e9 100%); /* W3C */
    -webkit-border-bottom-right-radius: 6px;
    -webkit-border-bottom-left-radius: 6px;
    -moz-border-radius-bottomright: 6px;
    -moz-border-radius-bottomleft: 6px;
    border-bottom-right-radius: 6px;
    border-bottom-left-radius: 6px;
    -webkit-box-shadow:  3px 3px 10px 0px #000000;
    -moz-box-shadow:  3px 3px 10px 0px #000000;
    box-shadow:  3px 3px 10px 0px #000000;
    padding: 10px 0;
    margin: 0;
    float: left;
    position: relative;
}

nav#nav-main .nav-sub li{
    float: left;
    position: relative;
    background: none;
    width: 196px;
    z-index: 25;
}

nav#nav-main .nav-sub li.last {
    margin-bottom: 6px;
}

nav#nav-main .nav-sub a{
    float: left;
    position: relative;
    color: #009cd3;
    z-index: 25;
    padding: 0 12px;
    margin: 0 0 6px 12px;
    font-size: 13px;
    line-height: 30px;
    width: 176px;
    text-align: left;
    font-size: 12px;
}

nav#nav-main .nav-sub a:hover, nav#nav-main li.active .nav-sub a:hover {
    color: #5c5c5c;
    background: #e4e4e4;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
}

nav#nav-main li.active .nav-sub a span {
    color: #009CD3;
}

nav#nav-main .nav-sub a span, nav#nav-main li.active .nav-sub a span {
    background: none;
    padding: 0;
    margin: 0;
    text-shadow: none;
}

nav#nav-main .nav-sub a:hover span, nav#nav-main li.active .nav-sub a:hover span{
    color: #5c5c5c;
}

nav#nav-main > ul > li.new {
    background: transparent url("../images/divider-nav-new.png") 0 -1px no-repeat;
}

nav#nav-main > ul > li.new > a {
    margin-left: 28px;
}

/* ---------------- Navigation - Utility ---------------- */

nav#nav-utility {
    position: absolute;
    top: 0;
    right: -25px;
    font: 12px/16px Arial, sans-serif;
    z-index: 100;
    background: #ffffff;
    -webkit-border-bottom-right-radius: 6px;
    -webkit-border-bottom-left-radius: 6px;
    -moz-border-radius-bottomright: 6px;
    -moz-border-radius-bottomleft: 6px;
    border-bottom-right-radius: 6px;
    border-bottom-left-radius: 6px;
    -webkit-box-shadow: box-shadow: 0px 0px 5px #d6d6d6;
    -moz-box-shadow: box-shadow: 0px 0px 5px #d6d6d6;
    box-shadow: box-shadow: 0px 0px 5px #d6d6d6;
    padding: 4px 0 8px 0;
}

nav#nav-utility ul { position: relative;list-style: none; margin: 0;padding: 0; z-index: 15;line-height: 11px;}
nav#nav-utility li { position: relative;float: left;padding: 0 7px;margin: 0;border-right: 1px solid #d6d6d6; }
nav#nav-utility li.last{ border-right: none; }
nav#nav-utility a {
    padding: 2px 7px;
    color: #009fd6;
    font-size: 12px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
}

nav#nav-utility li:last-child a { margin-right: 0; }
nav#nav-utility a:hover, nav#nav-utility li.active a, nav#nav-utility li.active a:hover {
    padding: 3px 7px;
    text-decoration: none;
    color: #fff;
    background: #4a4b4d; /* Old browsers */
    background: -moz-linear-gradient(top,  #4a4b4d 0%, #161718 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4a4b4d), color-stop(100%,#161718)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #4a4b4d 0%,#161718 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #4a4b4d 0%,#161718 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #4a4b4d 0%,#161718 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #4a4b4d 0%,#161718 100%); /* W3C */
}

.sociallink{
    width:18px; 
    height:18px;
    background:url("../images/social-icons.png") no-repeat transparent;
    margin:-4px 0;
}

#fb{
    background-position:0 0;
    margin-right: -2px;
}

#fb:hover{
    background-position:0 -18px;
}

#twt{
    background-position:-18px 0;
}

#twt:hover{
    background-position:-18px -18px;
}

#linkedin {
    background:url("../images/social-icon-linkedin.png") no-repeat transparent;
    background-position:0 0;
}

#linkedin:hover{
    background-position:0 -18px;
}

li.nav-icon {
    height: 11px;
}

li.nav-icon a {
    display: block;
    padding:0 !important;
}		

li.nav-icon a:hover {
    background:none !important;
}

/* ---------------- Navigation - Left ---------------- */

ul.nav-left {
    padding: 0;
    margin: 0;
}

ul.nav-left li {
    list-style: none;
    margin-left: 10px;
}

.nav-left li.first, .nav-left li:first-child {
    margin-top: 12px;
}

.nav-left a {
    color: #0081ae;
    display: block;
    width: 150px;
    list-style: none;
    padding: 6px 12px;
    margin-bottom: 10px;
    font-size: 12px;
    line-height: 20px;
    color: #0081ae;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
}

.nav-left a.first {
	margin-top:12px;
}

.nav-left a:hover {
    background: #a1dffa;
    text-decoration: none;
}

.nav-left .active a {
    color: #fff;
    background: #009fd7;
    text-decoration: none;
}

/* ---------------- Search ---------------- */

#search {
    position: absolute;
    width: 305px;
    height: 80px;
    top: 56px;
    right: -38px;
    background: transparent url("../images/bg-search.png") 0 0 no-repeat;
    z-index: 2;
}

.resources #search {
    background: none;
}

#search .callout {
    background: none;
}

#search form {
    top: 22px;
    left: 23px;
}

/*-----------------------------------------------------
 *  NEWS & ANNOUNCMENTS
 *-----------------------------------------------------*/
.home ul#list-news {
    float:none;
    margin:0px 0px 30px 0px;
    padding: 0px;
}

.home ul#list-news li {
    display:block;
    margin-bottom: 10px;
    padding: 10px;
    font-family: Arial;
    list-style-type: none;

    background: #fef5b0; /* Old browsers */
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZlZjViMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmN2U3OGEiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top,  #fef5b0 0%, #f7e78a 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fef5b0), color-stop(100%,#f7e78a)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #fef5b0 0%,#f7e78a 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #fef5b0 0%,#f7e78a 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #fef5b0 0%,#f7e78a 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #fef5b0 0%,#f7e78a 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fef5b0', endColorstr='#f7e78a',GradientType=0 ); /* IE6-8 */

    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;

    -webkit-box-shadow: 0px 3px 9px -2px rgba(0,0,0,0.3);
    -moz-box-shadow: 0px 3px 9px -2px rgba(0,0,0,0.3);
    box-shadow: 0px 3px 9px -2px rgba(0,0,0,0.3);
}

.home ul#list-news li:hover {
background: #fef5b0; /* Old browsers */
background: #fcf6c9; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZjZjZjOSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZWY1YjAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top,  #fcf6c9 0%, #fef5b0 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fcf6c9), color-stop(100%,#fef5b0)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #fcf6c9 0%,#fef5b0 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #fcf6c9 0%,#fef5b0 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #fcf6c9 0%,#fef5b0 100%); /* IE10+ */
background: linear-gradient(to bottom,  #fcf6c9 0%,#fef5b0 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcf6c9', endColorstr='#fef5b0',GradientType=0 ); /* IE6-8 */

}

.home #list-news li:after {
    color: transparent;
    content: ">";
    float:right;
    line-height: 26px;
    background: url("../images/alert-arrow.png") center right no-repeat;
}

.home #list-news li .date {
    background: url("../images/icon-flag.png") top left no-repeat;
    height: 26px;
    padding-left: 35px;
    color: #e77612;
    font-size: 14px;
    font-weight:bold;
    display: inline-block;
    line-height: 26px;
}

.home #list-news li .date:after {
    content: ":";
    color: #e77612;
    font-size: 14px;
    font-weight:bold;
    margin-right: 5px;
    margin-left: 1px;
}

#list-news .title a {
    color: black;
    display: inline-block;
    text-overflow: ellipsis;
    width: 510px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
    margin-bottom: 2px;
}

#list-news span.arrow {
    float: right;
    margin-right: 8px;
}

.caps {
    text-transform:capitalize;
}

/*-----------------------------------------------------
 *  WATER SMART TIPS
 *-----------------------------------------------------*/

#list-tips span {
    display: block;
}

ul#list-tips {
    padding: 0;
    margin: 0;
}

#list-tips li {
    list-style-type: none;
    padding: 0;
    margin: 0;
    text-align: center;
}

#list-tips .text-small {
    font-size: 14px;
    line-height: 18px;
    color: #5c5c5c;
    font-family: "carto";
    margin-top: 17px;
    text-align: left;
}

#nav-tips {
    list-style: none;
    margin: 0;
    padding: 0;
}

a.arrow.prev {
    position: absolute;
    width: 22px;
    height: 32px;
    text-indent: -999em;
    border: none;
    outline: none;
    top: 239px;
    left: 33px;
    background: transparent url("../images/arrow-green.png") center left no-repeat;
}

a:hover.arrow.prev  {
    background: transparent url("../images/arrow-green.png") top left no-repeat;
}


a.arrow.next {
    position: absolute;
    width: 22px;
    height: 32px;
    text-indent: -999em;
    border: none;
    outline: none;
    top: 239px;
    right: 22px;
    background: transparent url("../images/arrow-green.png") center right no-repeat;
}

a:hover.arrow.next {
    background: transparent url("../images/arrow-green.png") top right no-repeat;
}

#nav-tips a {
    border: none;
    outline: none;
}

#btn-view-tips {
    margin-bottom: 45px;
    height: 30px;
    margin-top: 18px;
}

#tips { height: 230px; width: 285px;}
#tips .viewport { float: left; width: 100%; height: 230px; margin-left: 27px; overflow: hidden; position: relative;}
#tips .buttons { display: block; margin: 0 10px 0 0; float: left; }
#tips .next { margin: 0 0 0 10px;  }
#tips .prev.disable { background: transparent url("../images/arrow-green.png") bottom left no-repeat; }
#tips .next.disable { background: transparent url("../images/arrow-green.png") bottom right no-repeat; }
#tips .overview { list-style: none; position: absolute; padding: 0; margin: 0; left: 0; top: 0; }

/*-----------------------------------------------------
 *  LISTS
 *-----------------------------------------------------*/

.column-right  ul.list{
    margin: 0;
    padding: 0;
}

.column-right  ul.list li{
    list-style: none;
    float: left;
    position: relative;
    padding-top: 24px;
    padding-bottom: 27px;
    width: 433px;
}

.column-right  ul.list li.even{
    background: #efefef;
}

.column-right  ul.list li.first{
    -webkit-border-top-left-radius: 6px;
    -webkit-border-top-right-radius: 6px;
    -moz-border-radius-topleft: 6px;
    -moz-border-radius-topright: 6px;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}

.column-right  ul.list  li.last{
    -webkit-border-bottom-left-radius: 6px;
    -webkit-border-bottom-right-radius: 6px;
    -moz-border-radius-bottomleft: 6px;
    -moz-border-radius-bottomight: 6px;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
}


.column-right  ul.list li .left {
    float: left;
    position: relative;
    width: 106px;
}

.column-right  ul.list .right {
    float: left;
    position: relative;
    width: 327px;
}

.column-right  ul.list .right p{
    margin: 0;
}

.column-right  ul.list .date {
    float: left;
    position: relative;
    width: 65px;
    height: 66px;
    margin-left: 22px;
    background: transparent url("../images/bg-date.png") 0 0 no-repeat;
}

.column-right  ul.list .date .month{
    float: left;
    position: relative;
    font-size: 15px;
    color: #fff;
    text-align: center;
    text-transform: uppercase;
    width: 61px;
    padding-top: 4px;
}

.column-right  ul.list .date .day{
    float: left;
    position: relative;
    font-size: 20px;
    color: #5c5c5c;
    text-align: center;
    text-transform: uppercase;
    width: 61px;
    padding-top: 10px;
}

a.more {
  margin-left:5px;
}

/*-----------------------------------------------------
 *  STATE
 *-----------------------------------------------------*/

.state-overview-img
{
    float:right;
    margin:0 0 10px 10px;
}

#state #state-map {
    float: left;
    position: relative;
    font-size: 15px;
    line-height: 18px;
    background: #bfe9ff 10px 268px no-repeat;
    -webkit-border-top-left-radius: 6px;
    -moz-border-radius-topleft: 6px;
    border-top-left-radius: 6px;
}

#state #state-map .arrow {
    position: absolute;
    top: -15px;
    left: 83px;
    width: 36px;
    height: 15px;
    background: transparent url("../images/bg-statemap-arrow.png") 0 0 no-repeat;
}

#state #state-map .top {
    float: left;
    position: relative;
    padding: 30px;
    width: 145px;
}

#state #state-map .bottom {
    float: left;
    position: relative;
    padding: 0 30px 24px 30px;
    background: #eceeef; /* Old browsers */
    background: -moz-linear-gradient(top,  #eceeef 0%, #cfcfcf 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eceeef), color-stop(100%,#cfcfcf)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #eceeef 0%,#cfcfcf 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #eceeef 0%,#cfcfcf 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #eceeef 0%,#cfcfcf 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #eceeef 0%,#cfcfcf 100%); /* W3C */
    width: 144px;
}

#state #state-map .bottom p {
    font-weight: bold;
    padding-top: 6px;
}

#state ul.stats {
    float: left;
    position: relative;
    margin: 0;
    padding: 0;
	list-style: none;
}

#state ul.stats li {
    float: left;
    position: relative;
    margin: 0 0 0 21px;
    padding: 16px 0;
    width: 160px;
    border-bottom: 1px solid #d8d8d8;
}

#state ul.stats dt  {
    font-size: 11px;
    line-height: 13px;
    width: 87px;
    position: relative;
    margin-left: 62px;
    margin-bottom: 8px;
}

#state ul.stats dd {
    color: #505050;
    font-size: 26px;
    width: 87px;
    text-shadow: 2px 2px 0px #bebebe;
    margin-left: 62px;
    float: left;
    position: relative;
}

#state ul.stats li {
    background: transparent url("../images/icon-stats.png") no-repeat;
}

#state ul.stats li.served {
    background-position: 2px -722px;
}

#state ul.stats li.water {
    background-position: 3px 13px;
}

#state ul.stats li.consumers {
    background-position: 3px -74px;
}

#state ul.stats li.treatment {
    background-position: 3px -160px;
}

#state ul.stats li.wastewater {
    background-position: 3px -251px;
}

#state ul.stats li.wells {
    background-position: 3px -345px;
}

#state ul.stats li.miles {
    background-position: 3px -430px;
}

#state ul.stats li.public {
    background-position: 3px -519px;
}

#state ul.stats li.employees {
    background-position: 3px -618px;
	padding-bottom: 25px;
}

/*-----------------------------------------------------
 *  STATE DETAILS
 *-----------------------------------------------------*/

.spotlight.last{
    padding-bottom: 14px;
}

.spotlight h3.title {

}

.spotlight-image .image {
    width: 200px;
}

.spotlight-image .detail {
    width: 422px;
}

.spotlight-video {
    background: transparent url("../images/bg-spotlight-grey.png") top right repeat-y;
}

.spotlight-video .video {
    width: 383px;
}

.spotlight-video .detail {
    width: 281px;
}

/*-----------------------------------------------------
 *  ALERT
 *-----------------------------------------------------*/

#alert {
    float: left;
    position: relative;
    width: 480px;
    padding: 35px 0 15px 140px;
    background: transparent url("../images/icon-flag-large.png") 10px 38px no-repeat;
    min-height: 100px;
    height: auto !important;
    height: 100px;
}

#alert.new {
    background: transparent url("../images/icon-flag-large-new.png") 10px 38px no-repeat;
}

#alert h2 {
    font-family: "carto";
    text-shadow: none;
    color: #d88b45;
}

#alert.new h2 {
    color: #033c7c;
}

/*-----------------------------------------------------
 *  SOCIAL FEEDS
 *-----------------------------------------------------*/
#fbfeed, #twitterfeed {
   min-height: 315px;
}

#twitterfeed h2, #fbfeed h2 {
    float: left;
}

#twitter-widget-0 {
    float: right;
}

#fbfeed {
    margin-bottom: 50px;
}

.fb-like-box {
    background: #ffffff;
    border: 1px solid #e1e1e1;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

/*-----------------------------------------------------
 *  SECONDARY FOOTER
 *-----------------------------------------------------*/
#footermain {
    background-color: #00a7e2;
    padding: 40px 0px;
    height: 175px;
    color: #ffffff;
    margin-top: 75px;
    font-size: 14px;
}

.home #footermain {
    margin-top: 0px;
}

#footermain .inner {
   width: 960px;
   margin: 0 auto;
   display: block;
}

#footermain .box {
    width: 259px;
    float: left;
    padding:10px 30px 10px 30px;
    height: 155px;
    display: block;
    border-left: 1px solid #41c5f2;
}

#footermain .box:first-child {
    border-left: none;
}


#footermain .box .last {
   
}


/*-----------------------------------------------------
 *  FOOTER
 *-----------------------------------------------------*/

footer {
    height: 90px;
    width: 100%;
    min-width: 1200px;
    position: relative;
    font: 12px/16px Arial, sans-serif;
    color: #b3b5b7;
    background: transparent url("../images/bg-footer.png") 0 0 repeat-x;
}

#footer-inner {
    margin: 0 auto;
    position: relative;
    width: 1100px;
    height: 90px;
}

#footer-inner img {
    position: absolute;
    display: block;
    top: 10px;
    left: 90px;
}

#copyright { position: relative; float: left; padding-top: 62px; padding-left:90px;}
#copyright img {display: block;}
nav#nav-footer { position: relative; float: right; padding-top: 62px}
nav#nav-footer ul { position: relative;float: left;list-style: none; margin: 0;padding: 0; z-index: 10;line-height: 11px; }
nav#nav-footer li { position: relative;float: left;padding: 0;margin: 0;border-right: 1px solid #b3b5b7;list-style: none; }
nav#nav-footer li:last-child { border-right: none; }
nav#nav-footer a { margin: 0 7px; color: #b3b5b7; }
nav#nav-footer li:last-child a { margin-right: 0; }
nav#nav-footer li:first-child a { margin-left: 0; }
nav#nav-footer a:hover { text-decoration: underline; color: #b3b5b7; }

/*-----------------------------------------------------
 *  MEDIA QUERIES
 *-----------------------------------------------------*/


@media only screen and (min-width: 480px) {


}

@media only screen and (min-width: 768px) {

}


/*-----------------------------------------------------
 *  PRINT STYLES
 *-----------------------------------------------------*/

@media print {
  * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; }
  a, a:visited { text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; }
  tr, img { page-break-inside: avoid; }
  img { max-width: 100% !important; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3 { page-break-after: avoid; }
}

/*-----------------------------------------------------
 *  COOKIE CONSENT BANNER STYLES
 *-----------------------------------------------------*/

#cookie-consent-banner {
    display:none;
    position:fixed;
    width:100%;
    padding:10px 20px;
    background:#EBEBEB;
    bottom:0;
    box-shadow:0px 0px 10px rgba(0,0,0,0.2);
    z-index:30;
}

#cookie-consent-banner.text-center {
    text-align:center;
}

#cookie-consent-banner p {
    display:inline-block;
    padding:0;
    margin:0;
}

#cookie-consent-banner p a.text-link {
    color:#009FD6;
    text-decoration:underline;
}
#cookie-consent-banner p a.text-link:hover {
    text-decoration:none;
}

#cookie-consent-banner button {
    border:0;
    margin-left:10px;
}

#cookie-consent-banner #btn-cookie-consent-accept {
    display:inline-block;
    float:none;
}