/* ==========================================================================
   NORMALIZE or RESET STYLES 
   ========================================================================== */

@charset "UTF-8";

html {
 font: normal 13px/1.3em Arial, Helvetica, sans-serif; 
 -webkit-text-size-adjust: 100%;
 -ms-text-size-adjust: 100%;
 margin: 0;
 padding: 0;    
}

body { margin: 0; padding: 0; }

* { margin: 0; padding: 0; }

/* Address styling not present in IE 8/9. */
[hidden] { display: none; }

/* Prevent modern browsers from displaying 'audio' without controls. Remove excess height in iOS 5 devices. */

audio:not([controls]) { display: none; height: 0; }

/* Address styling not present in IE 8/9, Safari 5, and Chrome. */
abbr[title] { border-bottom: 1px dotted; }

/* Address styling not present in Safari 5 and Chrome. */
dfn { font-style: italic; }

/* Address styling not present in IE 8/9. */
mark {
 background: #ff0;
 color: #000;
}

/* Correct font family set oddly in Safari 5 and Chrome. */
code,
kbd,
pre,
samp { font-family: monospace, serif; font-size: 1em; }

/* Improve readability of pre-formatted text in all browsers. */
pre { white-space: pre-wrap; }


/* Set consistent quote types. */
q { quotes: "\201C" "\201D" "\2018" "\2019"; }

/* Address inconsistent and variable font size in all browsers. */
small { font-size: 80%; }

/* Prevent 'sub' and 'sup' affecting 'line-height' in all browsers. */
sub,
sup {
 font-size: 75%;
 line-height: 0;
 position: relative;
 vertical-align: baseline;
}
sup { top: -0.5em; }
sub { bottom: -0.25em; }

/* Correct overflow displayed oddly in IE 9. */
svg:not(:root) { overflow: hidden; }

/* Address margin not present in IE 8/9 and Safari 5. */
figure { margin: 0; }

/**
 * 1. Correct 'color' not being inherited in IE 8/9.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */

legend {
 border: 0; /* 1 */
 padding: 0; /* 2 */
}

/**
 * 1. Correct font family not being inherited in all browsers.
 * 2. Correct font size not being inherited in all browsers.
 * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome.
 */
button,
input,
select,
textarea {
 font-family: inherit; /* 1 */
 font-size: 100%; /* 2 */
 margin: 0; /* 3 */
}

/* Address Firefox 4+ setting 'line-height' on 'input' using '!important' in the UA stylesheet. */
button,
input { line-height: normal; }

/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native 'audio'
 *    and 'video' controls.
 * 2. Correct inability to style clickable 'input' types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    'input' and others.
 */
button,
html input[type="button"], /* 1 */
input[type="reset"],
input[type="submit"] {
 -webkit-appearance: button; /* 2 */
 cursor: pointer; /* 3 */
}

/* Re-set default cursor for disabled elements. */
button[disabled],
html input[disabled] {
 cursor: default;
}

/**
 * 1. Address box sizing set to 'content-box' in IE 8/9.
 * 2. Remove excess padding in IE 8/9.
 */
input[type="checkbox"],
input[type="radio"] {
 box-sizing: border-box; /* 1 */
 padding: 0; /* 2 */
}

/**
 * 1. Address 'appearance' set to 'searchfield' in Safari 5 and Chrome.
 * 2. Address 'box-sizing' set to 'border-box' in Safari 5 and Chrome
 *    (include '-moz' to future-proof).
 */
input[type="search"] {
 -webkit-appearance: textfield; /* 1 */
 -moz-box-sizing: content-box;
 -webkit-box-sizing: content-box; /* 2 */
 box-sizing: content-box;
}

/**
 * Remove inner padding and search cancel button in Safari 5 and Chrome
 * on OS X.
 */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }

/* Remove inner padding and border in Firefox 4+. */
button::-moz-focus-inner,
input::-moz-focus-inner { 
 border: 0; padding: 0; 
}

/**
 * 1. Remove default vertical scrollbar in IE 8/9.
 * 2. Improve readability and alignment in all browsers.
 */
textarea {
 overflow: auto; /* 1 */
 vertical-align: top; /* 2 */
}

/* Remove most spacing between table cells. */
table {
 border-collapse: collapse;
 border-spacing: 0;
}





/* ==========================================================================
   CONTENT STYLES 
   ========================================================================== */

body { 
background: #dbeee1; 
}

.page-wrap {
 max-width: 940px;
 margin: 0 auto;
 position: relative; 
}

aside {
 float: left;
 width: 307px;
 margin: 0 20px 0 0;
}

.main-content {
 float: left;
 width: 65%;
}

.content-well {
 float: left;
 width: 61%;
 background: #fff;
 padding: 25px;
 margin-bottom: 20px;
}

.content-well h1 {
 font-size: 29px;
 color: #212121;
 padding: 0 0 20px 0;
 margin: 0;
}
.content-well h2 {
 font-size: 22px;
 color: #336633;
 border: 0;
}
.content-well h3 {
 position: relative;
 font-size: 14px;
 font-weight: normal;
 margin-bottom: 20px;
 border-bottom: 2px solid #212121;
}
.content-well h3 span {
 position: absolute;
 right: 0;
}



h1 { 
 font-size: 34px;
 color: #336633;
}
h1 span {
 font-size: 16px;
 color: #000;
}

h2 {
 font-size: 18px;
 color: #336633;
 padding: 0 0 6px 0;
 margin: 0;
 border-bottom: 2px solid #212121;
}
h2 span {
 float: right;
 font-size: 14px;
 font-weight: normal;
 color: #000;
}

h2 div {
 display: inline-block;
 font-weight: normal;
}
.promo h2 {
 border: 0;
}

h3 {
 font-size: 1.3em;
 color: #212121;
 padding: 0 0 6px 0;
 margin: 15px 0 0 0;
 border: 0;
}

h4 {
 font-size: 14px;
 color: #212121;
 padding: 2px 0 5px 0;
 margin: 0;
}

h5 {
 color: #7d6d6b;
}


hr {
    clear: both;
    display: block;
    width: auto;
    height: 2px;
    background: #ddd;
    border: 0;
    margin-bottom: 15px;
}

hr:before, 
hr:after {
    content: '';
    float: left;
    height: 4px;
    width: 4px;
    background: #ddd;
    margin-top: -1px;
}
hr:after { float: right; }


img { border: 0; }

p { 
 clear:both;
 display: block;
 margin: 15px 0;
}

.clear {
  clear: both; 
  line-height: 1px; 
  display: block;
}


a { color: #003399; text-decoration: underline; }
a:hover { color: #022365; text-decoration: none; }

.green {  color: #266d2f; }

a.green {
  display: inline;
  position:relative;
  font-size: 14px;
  font-weight: bold;
  color: #008c00;
  top: 3px;
  text-decoration: none;
}
a.green:hover { color: #4d194d; }
a.green:visited { color: #008c00; }



.lft { 
 float: left; 
 margin-right: 30px;
}

.rt { float: right; }

.alert { color: #c62127; }

.alert-status {
 color: #c62127;
 text-transform: uppercase;
 font-weight: bold;
 margin: 0 5px;
}



/* ==========================================================================
   HEADER STYLES 
   ========================================================================== */

header {
  width: auto;
  padding: 5px 0 20px 0;
  margin: 0 0 22px 0;
  background: #fefefe; /* for non-css3 browsers */ 
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#efefef", endColorstr="#fefefe"); /* for IE */
  background: -webkit-gradient(linear, left top, left bottom, from(#efefef), to(#fefefe)); /* for webkit browsers */
  background: -moz-linear-gradient(top,  #efefef,  #fefefe); /* for firefox 3.6+ */ 
  border-top: 10px solid #266d2f;
  border-bottom: 4px solid #ccc;
}

.logged-in {
 float: left;
 font-size: 20px;
 font-weight: bold;
 color: #336633;
 margin: 15px 0 0 0;
}

.logged-in span {
 font-size: 12px;
 font-weight: normal;
 color: #000;
}

.help-ctr {
 float: right;
 margin: 10px 20px 0 0;

}
.help-ctr a {
 color: #202020;
 font-weight: bold;
 text-decoration: underline;
 padding: 0;
 margin: 0;
}
.help-ctr a:hover {
 color: #202020;
 text-decoration: none;
}



/* ==========================================================================
   NAVIGATION STYLES 
   ========================================================================== */

nav {
 position: absolute;
 width: 100%;
 display: block; 
 top: 45px;  
 z-index:1000;
}

#search-wrap { 
 float: right;
 width: auto;
 margin-top: 5px;
}
#search-wrap input { 
 float: left;
 width: 220px;
 padding: 10px 3px 10px 7px;
 font-size: 13px;
 background: #fff;  
 border: 1px solid #ccc;  
}
.search-glass-wrap {
 position: absolute;
 width: 33px;
 height: 32px;
 top: 5px;
 right: 0;
 padding-top: 6px;
 border-left: 1px solid #ccc;
}
.search-glass-wrap:hover {
 -moz-box-shadow: inset 0 0 3px #999;
 -webkit-box-shadow: inset 0 0 3px #999;
 box-shadow: inset 0 0 3px #999;
}


nav ul li:hover .arrow {
 background: url("../img/spritesheet.png") no-repeat -98px -336px;
}

nav > ul {
 display: -webkit-box;
 -webkit-box-orient: horizontal;

 display: -moz-box;
 -moz-box-orient: horizontal;

 display: box;
 -moz-box-orient: horizontal;
}

nav ul {
 list-style:none;
 margin:0; 
 padding:0;
 position:relative;
 z-index:1000;
 display: block;
 float: left;
 margin-left: 132px;
}

nav ul > li { 
 float: left;
 width: auto;
 font-size: 13px;
 border-left: 1px solid #d2d2d2; 
 -webkit-box-flex: 1;
 -moz-box-flex: 1;
 box-flex: 1;
 position: relative; 
 padding-right: 20px;
}
nav ul > li:first-child { 
 padding-right: 0;
}
nav ul > li:nth-child(2) { 
 padding-right: 5px;
}
nav ul li div {
 font-size: 18px;
}

nav ul li span {
 position: absolute;
 top: 30px;
 right: 10px;
}


nav > ul > li > a {
 background: transparent;
 display:block;
 padding: 7px 13px;
 text-decoration:none;
 color: #336633; 

 /* make the background-color fade in on roll-over */
 -webkit-transition: background-color 0.3s ease;
 -moz-transition: background-color 0.3s ease;
 -o-transition: background-color 0.3s ease;
 -ms-transition: background-color 0.3s ease;
 transition: background-color 0.3s ease;
}

nav > ul > li:hover {
 background: #fff;
 -webkit-box-shadow: 0px 0px 7px 2px rgba(0, 0, 0, 0.2);
 -moz-box-shadow:    0px 0px 7px 2px rgba(0, 0, 0, 0.2);
 box-shadow:         0px 0px 7px 2px rgba(0, 0, 0, 0.2);
}


nav > ul > li > a:hover {
 background:#fff;
 color:#000;
}


/* the show/hide effects */
/* the drop-down box */

nav ul ul {
 width:auto; 
 position:absolute;
 z-index: 100;
 top:100%;
 left: -132px;
 height: 0;
 overflow: hidden;
 background: #fff; 
 -webkit-transition: height 0.3s ease-in;
 -moz-transition: height 0.3s ease-in;
 -o-transition: height 0.3s ease-in;
 -ms-transition: height 0.3s ease-in;
 transition: height 0.3s ease-in;
}


nav > ul > li:hover ul, 
nav > ul > li > a:hover ul {
 height:0;
 -webkit-box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.3);
 -moz-box-shadow:    0px 3px 8px 0px rgba(0, 0, 0, 0.3);
 box-shadow:         0px 3px 8px 0px rgba(0, 0, 0, 0.3);
}


nav > ul > li:hover ul.my-bill, 
nav > ul > li > a:hover ul.my-bill {
 height:283px;
}
nav > ul > li:hover ul.service, 
nav > ul > li > a:hover ul.service {
 height:155px;
}
nav > ul > li:hover ul.save, 
nav > ul > li > a:hover ul.save {
 height:140px;
}
nav > ul > li:hover ul.my-account, 
nav > ul > li > a:hover ul.my-account {
 height:130px;
}

/* drop-down item styles */
nav ul ul li {
 background:#fff;
 width: 200px; 
 border: 0;

 /* make the background-color fade in on roll-over */
 -webkit-transition: background-color 0.3s ease;
 -moz-transition: background-color 0.3s ease;
 -o-transition: background-color 0.3s ease;
 -ms-transition: background-color 0.3s ease;
 transition: background-color 0.3s ease;
}

nav ul ul li:hover {
 background: #dbeee1;
}
nav ul ul li:active {
 color: #fff !important;
 background: #266d2f !important; 
}

nav ul ul li a {
 display:block;
 text-decoration:none;
 margin:0;
 padding:5px 12px;
 color: #336633; 
}

nav ul ul li a:active {
 color: #fff !important;
 background: #266d2f !important; 
}


nav ul ul li a:hover, 
nav ul ul li:hover > a {
 color:#000;
}

li.bdr {
 border: none;
 border: 0;
 width: 100%;
 height: 1px;
 color: #5a5a5a; 
 background: #5a5a5a;
 padding: 0;
 margin: 0;
}



/* ==========================================================================
   GREEN STEP BAR STYLES 
   ========================================================================== */


.steps-3 {
 display: block;
 list-style-type: none;
 width: 658px;
 height: 70px;
 padding: 10px 0 0 12px;
 margin: 0 0 0 0;
 position: relative; 
 background: url(../img/computer-steps-3-bg.png) no-repeat top left; 
}

.steps-6 {
 display: block;
 list-style-type: none;
 width: 940px;
 height: 70px;
 padding: 10px 0 0 10px;
 margin: 0 0 0 0;
 position: relative; 
 background: url(../img/computer-steps-6-bg.png) no-repeat top left; 
}

.steps-3 li {
 float: left;
 width: 229px;
 height: 50px; 
 padding: 0;
 margin: 0;
}
.steps-3 li:first-child {
 width: 231px;
}


.steps-6 li {
 float: left;
 width: 174px;
 height: 50px; 
 padding: 0;
 margin: 0;
}

.steps-6 li:first-child {
 width: 174px;
}
.steps-6 li:last-child {
 width: 174px;
}

.steps-3 li a,
.steps-6 li a {
 display: block;
 color: #a9c8ab;
 font-size: 18px;
 font-weight: bold; 
 padding: 0;
 margin: 0;
 text-decoration: none;
 padding: 16px 0 !important;
 vertical-align: middle;
 text-align: center;
}
.steps-3 li a:hover {
 color: #fff;
}

.steps-3 li a.on,
.steps-6 li a.on {
 color: #fff;
}

.steps-3 li:first-child + li,
.steps-3 li:first-child + li + li {
 margin-left: -32px;
}

.steps-6 li:first-child + li,
.steps-6 li:first-child + li + li,
.steps-6 li:first-child + li + li + li,
.steps-6 li:first-child + li + li + li + li,
.steps-6 li:first-child + li + li + li + li + li {
 margin-left: -26px;
}




/* ==========================================================================
   VARIOUS MODULE STYLES 
   ========================================================================== */


.acct-details,
.messages,
.pay-bill,
.manage-payments,
.assist-programs,
.view-bill-info,
.options,
.view-bill-module,
.account-message,
.bill-period,
.currant-usage {
 width: auto;
 background: #fff;
 padding: 25px;
 margin: 0 0 20px 0;
}

.acct-details h1 {
 margin-top: 0;
}
.acct-details h2 {
 margin-top: 30px;
}

.view-bill-module h1 {
 color: #212121;
 font-size: 29px;
 padding: 0;
 margin: 0 0 20px 0;
}

.hdr-bill {
 width: auto;
 height: 88px;
 padding: 0;
 margin: 0 0 20px 0;
 background: #fff url(../img/woman-at-laptop.jpg) no-repeat right top;
}

.hdr-bill h1 {
 display: block;
 padding: 35px 0 20px 30px;
 margin: 0;
}

.pay-bill h2,
.manage-payments h2,
.assist-programs h2,
.view-bill-info h2,
.options h2,
.bill-period h2 {
 padding: 10px 0 0 0;
 margin: 0;
 border: 0;
 color: #212121;
}

.currant-usage h2 {
 padding: 10px 0 0 0;
 margin: 0 0 20px 0;
 border: 0;
 color: #212121;
}

.pay-bill ul,
.manage-payments ul,
.assist-programs ul,
.view-bill-info ul,
.options ul {
 clear: both;
 list-style: none;
 padding: 0;
 margin: 0 0 0 69px; 
}

.pay-bill ul li,
.manage-payments ul li,
.assist-programs ul li,
.view-bill-info ul li,
.options ul li {
 padding: 0;
 margin: 0 0 10px 0;
 font-weight: normal;
}

.pay-bill ul li:nth-child(3n+1) {
 list-style: disc;
 font-weight: bold;
}

.manage-payments ul li:nth-child(2n+1),
.assist-programs ul li:nth-child(2n+1),
.view-bill-info ul li:nth-child(2n+1),
.options ul li:nth-child(2n+1) {
 list-style: disc;
 font-weight: bold;
}

.pay-bill ul li:nth-child(3) {
 display: inline-block; 
}


ul.msgs {
 clear: both;
 display: block;
 list-style:none;
 padding: 0;
 margin: 15px 0;
}

ul.msgs > li {
 clear: both;
 display: block;
 margin: 15px 0;
}

ul.msgs > li > div {
 margin-bottom: 10px;
}

.promo {
 padding: 25px;
 margin: 0 0 20px 0;
 background: #fff url(../img/man-winter-hat.jpg) no-repeat right top;
}

.accounts-list-box {
 display: block;
 height: 20px; 
 margin-bottom: 20px;
}
.accounts-date-box {
 padding: 0;
 margin-bottom: 10px; 
}


aside .to-do,
aside .property-compare {
 background: #fff;
 padding: 25px;
 margin: 0 0 20px 0;
}
aside .to-do ul {
 list-style: none;
 padding: 0;
 margin: 0;
}
aside .to-do ul li span {
 display: inline-block;
 vertical-align: middle;
 margin: 0 5px 0 0;
}
aside .property-compare {
 height: 245px;
 background: #fff url(../img/graph-property.gif) no-repeat center 83px;
}
aside h3 {
 font-size: 1.3em;
 color: #212121;
 padding: 0 0 10px 0;
 margin: 0 0 0 0;
 border: 0;
}
aside ul {
 list-style: none;
 padding: 0;
 margin: 0;
}

.funnel-btns {
 list-style:none;
 padding: 20px 0 0 0;
 margin: 20px 0 0 0;
 border-top: 2px solid #212121;
}
.funnel-btns li:first-of-type {
 float: left;
 margin-top: 10px;
}


.homeowner,
.adult-present {
 display: block;
 list-style: none;
 padding: 20px 15px 40px 15px !important;
 margin: 0 0 20px 0;
 background: #e2e2e2;
}

.adult-present li,
.homeowner li {
 float: left;
 font-weight: bold;
 margin-right: 20px;
}
.adult-present li + li {
 margin-right: 30px;
}





/* ------ LANDING PAGE ACCOUNT DATA ------ */

.availability {
 width: auto;
 padding: 10px;
 background: #e2e2e2;
}

.availability > p {
 font-weight: bold; 
 margin: 5px 0;
}

input[type="radio"] + label  { 
font-weight: normal; 
margin: 0 2px;
}


table#account {
 clear: both;
 width: 100%;
 margin: 10px 0 0 0;  
 border-collapse: separate;
 border-spacing: 0 10px; 
}

table#account tr {
 background: #eeeeee;
}

table#account td { 
 vertical-align: top;
 font-size: 13px; 
 padding: 10px; 
}
table#account td + td { 
 text-align: right;
 white-space: nowrap; 
}


table#account dl { 
 padding: 0; 
 margin: 0; 
}

table#account dt { 
 float: left;
 text-align: left;
 width: 38%;
 font-size: 16px;
}
table#account dd { 
 float: left;
 text-align: right;
 font-size: 16px;
 padding: 0;
 white-space: nowrap; 
} 
table#account dd + dd { 
 float: left;
 font-size: 13px;
 padding: 0;
 margin-left: 1%;
 white-space: nowrap; 
}
 

.currant-usage table:nth-of-type(2) {
 margin-top: 40px !important;
}

table.ledger,
table.ledger-alt {
 clear: both;
 width: 100%;
 margin: 10px 0 0 0;  
 border-collapse: separate;
}
/* Zebra striping */
table.ledger tr:nth-of-type(even) { 
  background: #e8f0f5;
}

table.ledger-alt tr:nth-of-type(odd),
table.ledger-alt tbody { 
  background: #e8f0f5 !important;
  font-weight: normal !important;
}



table.ledger tr:last-of-type,
table.ledger-alt tr:last-of-type { 
  font-weight: bold; 
}
table.ledger th { 
  color: #336633; 
  font-weight: bold; 
}

table.ledger-alt th { 
  background: #fff;
  color: #336633; 
  font-weight: bold; 
}
table.ledger td, 
table.ledger th, 
table.ledger-alt td, 
table.ledger-alt th { 
  padding: 6px; 
  text-align: left; 
  border: 1px solid #ccc; 
}
table.ledger th:first-of-type,
table.ledger td:first-of-type,
table.ledger-alt th:first-of-type,
table.ledger-alt td:first-of-type { 
  border-left: 0; 
}
table.ledger th:first-of-type + th,
table.ledger td:first-of-type + td,
table.ledger-alt th:first-of-type +th,
table.ledger-alt td:first-of-type +td { 
  border-right: 0;   
}
table.ledger td:first-of-type +td { 
 text-align: right;   
}

table.ledger td > span,
table.ledger-alt td > span { 
 font-weight: normal;
 margin-left: 15px;
}



#paper { 
 float: right; 
 margin: 5px 0; 
}


/* ------ CALENDAR WIDGET ------ */

table#days  {
 margin: 0;
 background: #212121;
 margin: 1px 0 0 0;
 border-collapse: separate;
 border-spacing: 0 1px; 
}

table#days td {
 width: 98px;
 text-align: center;
 font-weight: bold;
 background: #fff;
 border-bottom: 2px solid #212121;
}

table#days dl {
 padding: 0;
 margin: 0;
}

table#days dt {
 color: #fff;
 padding: 6px 10px;
 vertical-align: middle;
 background: #666;
 border-bottom: 2px solid #212121;
 border-right: 2px solid #212121; 
 white-space: nowrap;
}

table#days dd {
 height: 37px;
 color: #212121;
 padding: 0;
 margin: 0;
 border-bottom: 2px solid #212121;
 border-right: 2px solid #212121; 
 background: transparent;
 white-space: nowrap;
}

table#days dd > div {
 padding-top: 10px; 
}

table#days dd:last-child {
 height: 53px;
}
table#days dd:last-child > a {
 padding: 10px 10px 9px 10px; 
}
table#days td a {
 display: block;
 color: #212121;
 font-weight: bold;
 background: #fff; 
 padding: 10px; 
 text-decoration: none;
}

table#days td dd a:hover {
 background: #ccc; 
}

table#days td dd a:active {
 color: #fff;
 background: #266d2f; 
}

.hilite {
 color: #fff !important;
 background: #266d2f !important;
}

.appointment-box {
 display: block;
 margin: 15px 0;
}

.appointment-box h5 {
 display: inline-block;
 position:relative;
 font-size: 1em;
 color: #212121;
 margin: 5px 0;
}

.targetDiv { 
 display: none;
 font-weight: normal;
 margin: 0 5px; 
}



/* ------ GENERIC ANY LIST SCROLLER ------ */

.als-container {
 position: relative;
 width: 100%;
 margin: 0 auto; 
 background: #212121;
}

.als-viewport {
 position: relative;
 overflow: hidden;
 margin: 0 auto;
}

.als-wrapper {
 position: relative;
 list-style: none; 
}

.als-item {
 position: relative;
 display: block;
 width: auto;
 cursor: pointer;
 float: left; 
}

.als-prev, .als-next {
 position: absolute;
 cursor: pointer;
 clear: both;
}


/* ------ SPECIFIC ANY LIST SCROLLER ------ */

#calendar {
 margin: 0 auto;
}

#calendar .als-item {
 margin: 0;
 min-height: 201px;
 min-width: 40px;
}

.als-prev, 
.als-next {
 top: 40%;
 width: 40px;
}

.als-prev {
 left: 12px;
 width: 0; 
 height: 0;
 border-bottom: 10px solid transparent;  /* left arrow slant */
 border-top: 10px solid transparent; /* right arrow slant */
 border-right: 10px solid #fff; /* bottom, add background color here */
 font-size: 0;
 line-height: 0; 
}

.als-next {
 right: 12px;
 width: 0; 
 height: 0; 
 border-bottom: 10px solid transparent;  /* left arrow slant */
 border-top: 10px solid transparent; /* right arrow slant */
 border-left: 10px solid #fff; /* bottom, add background color here */
 font-size: 0;
 line-height: 0; 
}




/* ------ HELP BUBBLES ------ */

.r-sidebar {
 float: left;
 width: 285px;
 margin: 0 0 0 20px;
}

/* also called info bubble */
.help-bubble {
 position: relative;
 width: 280px;
 background: #fff;
 border-color: #fff;
 padding: 5px 15px;
 margin: 20px 0 20px 0;
 -webkit-border-radius: 6px;
 -moz-border-radius: 6px;
 border-radius: 6px;
}
.help-bubble:after {
 content: "";
 position: absolute;
 top: 20px;
 left: -28px;
 border: 15px solid;
 border-color: transparent #fff transparent transparent;
}

.help-bubble span, 
.help-bubble ul {
 display: table-cell;
}

.help-bubble ul {
 list-style: none;
 padding: 0;
 margin: 0;
}
ul.dots {
 list-style: disc;
 padding-top: 10px;
 padding-bottom: 10px;
 margin: 0;
}


.help-bubble h6 {
 font-size: 1em !important;
 padding: 0;
 margin: 5px 0 10px 0;
}

.help-bubble ul li {
 padding: 0;
 margin-bottom: 5px;
}
ul.dots li {
 padding: 0;
 margin:0 0 5px 20px;
}
.stopDate {
 position: relative;
}
.help-txt {
 display: none;
 position: absolute;
 z-index: 3000;
 color: #212121;
 padding: 10px;
 margin: -19px 0 0 0;
 background: #e2e2e2;
 -moz-border-radius-bottomleft: 6px;
 -moz-border-radius-bottomright: 6px;
 border-bottom-left-radius: 6px;
 border-bottom-right-radius: 6px;
}

.show {
 display: block;
}


.r-sidebar div {
 margin: 148px 0 20px 0;
}
.r-sidebar div + div {
 margin: 19px 0 20px 0;
}
.r-sidebar div + div + div {
 margin: 53px 0 20px 0;
}

.r-sidebar div + div + div + div {
 margin: 110px 0 20px 0;
}




.help-bubble.not-homeowner-desktop {
 margin-top: 70px;
 padding: 10px 15px 30px 15px;
}
.help-bubble.no-adult-present-desktop:nth-child(2) {
 margin-top: 220px;
 margin-bottom: 10px;
 padding: 10px 15px 30px 15px;
}
.help-bubble.no-adult-present-desktop:last-child {
 margin-top: 53px;
 margin-bottom: 10px;
 padding: 10px 15px 20px 15px;
}



/* works with jQuery */
.formcontent {
    display: none;
}




/* ==========================================================================
   SPRITE STYLES 
   ========================================================================== */


header a.logo {
  float: left;
  width: 100px;
  height: 67px;
  background-position: -6px -213px;
  border: 0;
  margin: 14px 30px 0 0;
}


.sprite {
  background: url(../img/spritesheet.png) no-repeat;
  display: block;
}

.search-glass {
 float: right;
 width: 30px;
 height: 22px;
 background-position: -210px -212px;  
}


.btn {
  float: right;
  width: auto;
  height: 40px;
  border: 0;
  background-position: -10px -50px;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;  
  border-radius: 6px;
}
.btn-alt {
  float: right;
  width: auto;
  height: 40px;
  margin-top: 15px;
  border: 0;
  background-position: -10px -50px;
  -moz-border-radius: 6px;
  border-radius: 6px;
}
#my-acct-home {
  clear: both;
  width: 170px;
  height: 40px;
  text-align: center;
  margin: 0 auto;
  border: 0;
  background-position: -10px -50px;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  border-radius: 6px;
}

#btn-login,
.btn-lft {
  float: left;
  height: 40px;
  text-align: center;
  margin-top: 15px;
  border: 0;
  background-position: -10px -50px;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  border-radius: 6px;
}
.btn:active,
.btn-alt:active,
#btn-login:active,
.btn-lft:active,
#my-acct-home:active,
.btn:hover,
.btn-alt:hover,
#btn-login:hover,
.btn-lft:hover,
#my-acct-home:hover { background-position: -10px -155px; }

.btn > a,
.btn-alt > a,
#btn-login > a,
.btn-lft > a, 
#my-acct-home > a {
 display: block;
 font-size: 14px;
 color: #fff;
 font-weight: bold;
 text-decoration: none;
 padding: 11px 15px 9px 15px;
}

#nextButton > span {
 display: block;
 font-size: 14px;
 color: #fff !important;
 font-weight: bold;
 text-decoration: none;
 padding: 0 4px;
 height: 0;
}

.btn-toggle {
 float: left;
 width: 46px;
 height: 46px;
 border: 0;
 margin: 0 20px 0 0;
 background-position: -197px -93px;
}
.btn-toggle:hover {
 float: left;
 width: 46px;
 height: 46px;
 border: 0;
 margin: 0 20px 0 0;
 background-position: -197px -46px;
}

.icon-green {
 float: left;
 width: 25px;
 height: 28px;
 margin-right: 7px;
 background-position: -78px -5px;
}

.icon-info {
 float: left;
 width: 25px;
 height: 28px;
 margin: 0 7px 5px 0;
 background-position: -112px -5px;
}

.icon-secure {
 float: left;
 width: 11px;
 height: 16px;
 margin: 3px 7px 0 0; 
 background-position: -31px -5px;
}

.down-arrow {
 width: 7px;
 height: 4px;
 background-position: -146px -5px;
}

.arrow {
 display: inline-block;
 width: 10px;
 height: 8px;
 margin: 1px 0 0 7px;
 background: url("../img/spritesheet.png") no-repeat -98px -350px;
}
.arrow:hover {
 background: url("../img/spritesheet.png") no-repeat -98px -336px;
}

.step-one {
 width: 174px;
 height: 50px;
 margin: 0;
 background-position: -5px -952px;
}
.step-one:hover,
.step-current {
 background-position: -5px -1014px;
}

.step {
 width: 174px;
 height: 50px;
 margin: 0;
 background-position: -5px -1080px;
}
.step:hover,
.step-current {
 color: #fff;
 background-position: -5px -1140px;
}

.step-long-one {
 width: 229px;
 height: 50px;
 margin: 0;
 background-position: -5px -1257px;
}
.step-long-one:hover,
.step-long-current {
 background-position: -5px -1316px;
}

.step-long {
 width: 229px;
 height: 50px;
 margin: 0;
 background-position: -5px -1377px;
}
.step-long:hover,
.step-long-current {
 color: #fff;
 background-position: -5px -1200px;
}



.calendar {
 float: right;
 width: 32px;
 height: 30px;
 background-position: -160px -5px;
 margin-top: 4px;
}
.calendar-black {
 float: right;
 width: 30px;
 height: 25px;
 background-position: -210px -279px;
}


/* large error icon */
.icon-error {
 float: left;
 width: 44px;
 height: 68px;
 background-position: -5px -501px;
 margin: 0 20px 0 0;
}
.icon-checkmark {
 float: left;
 width: 27px;
 height: 28px;
 background-position: -5px -125px;
 margin: 0 7px 5px 0;
}

.icon-refresh {
 float: left;
 width: 27px;
 height: 20px;
 background-position: -39px -125px;
 margin: 0 7px 5px 0;
}

.icon-audio {
 float: left;
 width: 24px;
 height: 20px;
 background-position: -76px -125px;
 margin: 0 7px 5px 0;
}

.icon-phone {
 float: left;
 width: 45px;
 height: 55px;
 margin: 0 10px 0 0;
 background-position: -139px -373px; 
}

.icon-dollar-sign {
 float: left;
 width: 45px;
 height: 55px;
 margin: 0 10px 0 0;
 background-position: -190px -373px; 
}

.icon-flip-calendar {
 float: left;
 width: 45px;
 height: 55px;
 margin: 0 10px 0 0;
 background-position: -139px -435px; 
}

.icon-life-preserver {
 float: left;
 width: 45px;
 height: 55px;
 margin: 0 10px 0 0;
 background-position: -190px -435px; 
}

.icon-check-list {
 float: left;
 width: 45px;
 height: 55px;
 margin: 0 10px 0 0;
 background-position: -139px -501px; 
}

.icon-laptop {
 float: left;
 width: 44px;
 height: 55px;
 margin: 0 10px 0 0;
 background-position: -190px -501px; 
}

.icon-big-checkmark {
 float: left;
 width: 44px;
 height: 55px;
 margin: 0 10px 0 0;
 background-position: -210px -312px; 
}

.clock {
 width: 36px;
 height: 37px;
 background-position: -127px -212px;
}

.house {
 width: 36px;
 height: 37px;
 background-position: -165px -212px;
}

.x {
 width: 36px;
 height: 37px;
 background-position: -127px -255px;
}

.flame {
 width: 36px;
 height: 37px;
 background-position: -165px -255px;
}

.leaf {
 width: 36px;
 height: 37px;
 background-position: -127px -295px;
}

.icon-chart {
 display: inline-block;
 width: 30px;
 height: 32px;
 vertical-align: middle;
 background-position: -127px -333px;
}

.icon-question {
 display: inline-block;
 width: 30px;
 height: 32px;
 vertical-align: middle;
 background-position: -158px -333px;
}

.aa-accessible {
 float: right;
 width: 82px; 
 height: 69px;
 margin: 0 20px 0 0;
 border: 0;
 background-position: -5px -328px; 
}
.norton {
 float: right;
 width: 129px; 
 height: 82px;
 border: 0;
 background-position: -5px -407px; 
}





/* ==========================================================================
   FORM STYLES 
   ========================================================================== */

label {
 float: left;
 color: #212121; 
 font-weight: bold;
 margin: 4px 10px 0 0;
}

label.alt {
 margin: -2px 8px 0 0 !important;
}
label.alt2 {
 margin: 3px 8px 0 0 !important;
}
.inputbox { 
 float: left;
 width: 52%;
 height: 31px;
 margin-bottom: 15px;
 overflow: hidden; 
}
.inputbox.short { 
 width: 10%;
}
.inputbox.long { 
 width: 69%;
}
textarea { 
 float: left;
 width: 69%;
 height: 125px;
 margin: 5px 0 15px 0;
 overflow: hidden; 
 border: 1px solid #ddd;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box; 
}
.inputbox input,
.inputbox select {
 width: 100%;
 padding: 5px;
 margin-bottom: 20px;
 border: 1px solid #ddd;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box; 
}
.inputbox input:focus,
#search-wrap input:focus,
.inputbox select:focus,
textarea:focus {
 color: #212121;
 border: 1px solid #999;
}

input placeholder {
 color: #7a7a7a;
}


input[type="radio"] {
 vertical-align: middle;
 margin-right: 3px;
}

input[type="radio"] + label {
 vertical-align: middle;
}

.instruct {
 clear: both;
 margin: 0 10% 0 27%;
}

.acct-name {  
 float: left;
 margin: 5px 0 20px 0;
}   


#trans-service {
 margin: 0 0 0 5%;
}

#adult-present-info,
#homeowners-information,
#serviceApptForm {
 margin: 0 0 0 1%;
}

#adult-present-info > label,
#serviceApptForm label {
 width: 25%;
 float: left;
 text-align: right;
 margin: 5px 1.2% 0 0;
 display: block;
}


#trans-service > label,
#homeowners-information > label {
 width: 28%;
 float: left;
 text-align: right;
 margin: 5px 1.8% 0 0;
 display: block;
}

label.shorter {
 width: 6% !important; 
 padding: 0;
 margin: 0 0 0 10px;
}


.datepicker-wrap { 
 float: left;
 margin: 2px 0 0 10px;
}



input[type=submit] {
 color: #fff;
 color: #fff;
 font-weight: bold;
 text-decoration: none;
 padding: 9px 15px;
}


/* Form Validation */


#warning { 
 display: none; 
 clear: both;
 width: 61%;
 background: #fff;
 padding: 20px 25px 25px 25px !important;
 margin: 0 0 20px 0;
}
#warning h2 { 
 font-size: 16px;
 color: #212121;
 border: 0;
 margin: 10px 0 20px 0;
 padding: 0;
}

#serviceApptForm .error,
#homeownersForm .error {
 border: 2px solid #ff9f9f;
}

#serviceApptForm div.error,
#homeownersForm div.error {
 display: none;
 float: none;
 margin-left: 26%;
 border: 0 !important;
 width: auto;
 color: #c62127;
 font-weight: bold;
}


/* Form Validation for Static Form Code */

#warning-standalone { 
 display: block; 
 clear: both;
 width: 61%;
 background: #fff;
 padding: 20px 25px 25px 25px !important;
 margin: 0 0 20px 0;
}

/* large error icon */
.icon-error-standalone {
 float: left;
 width: 44px;
 height: 68px;
 background-position: -5px -501px;
 margin: 0 20px 20px 0;
}
#warning-standalone h2.stand { 
 display: inline-block;
 font-size: 16px;
 color: #212121;
 border: 0;
 margin: 2px 0 20px 0;
 padding: 0;
}
#warning-standalone ul {
 display: inline-block;
 margin: 0;
 padding-left: 15px; 
}

#warning-standalone ul li:first-child {
 margin: 0 0 20px 0;
}


input.error-standalone {
 border: 2px solid #ff9f9f;
}
div.error-standalone {
 display: block;
 float: none;
 margin-left: 30%;
 border: 0 !important;
 width: auto;
 color: #c62127;
 font-weight: bold;
}




/* ==========================================================================
   FOOTER STYLES 
   ========================================================================== */

footer {
 clear: both;
 position: fixed;
 bottom: 0;
 width: 100%;
 height: 125px;
 background: #fff;
 font-size: .85em;
 color: #7d7d7d;
 padding: 20px 0;
 overflow: hidden;
}
footer .ftr {
 width: auto;
 float: left;
 color: #7d7d7d;
 top: 0;
 left: 0;
}
footer .ftr ul {
 display: block;
 list-style-type: none;
 padding: 0 0 35px 0;
 margin: 0;
}
footer .ftr ul li {
 float: left;
 padding: 0 4px;
 color: #434343;
}
footer .ftr ul li:first-child {
 padding: 0 4px 0 0;
} 


footer .ftr ul li a {
 display: block;
 color: #003399;
 margin: 0;
 text-decoration: underline;
}
footer .ftr ul li a:hover { 
 color: #003399; 
 text-decoration: none;
}

footer p {
 clear: both;
 display: block;
 padding: 0;
 margin: 0;
 line-height: 1.5em;
}

.ftr-logos {
 float: right;
}





/* ==========================================================================
   CONTENT STYLES on LARGE SCREENS
   ========================================================================== */

.tablet,
.btn-toggle,
.quick-links,
.account-dropdown,
.account-msgs,
.navobile-navigation,
.help-stop-service,
.help-our-technicians,
.property-compare-alt,
.to-do-alt,
.bill-important-info,
.messages-mobile,
.mobile,
.mobile-home,
.mobile-edit,
.mobile-home,
.mobile-person,
.mobile-question,
.mobile-phone { 
 display: none;
}

#tabletHelpTxt {
 display: none; 
}