/* #005B7D Blue
   #D9811D Orange
   #E0E0AC Light Green
   #A6A53F Dark Green
   #686461 Dark Grey
   #FAFAF3 Off-White
   #33302E Off-Black */

/* 960 - 593 - 367 - 227 - 140 - 87 - 53 - 33 - 20 - 13 - 8 - 5 - 3 - 2 - 1 */

/**
 * Core Chrome and Layout
** ------------------------------------------------------------------------- */

html, body {
    height:100%; /* needed for container min-height */
}

body, textarea {
    font-family: Verdana, sans-serif;
}

body {
    background: #FAFAF3 url('../img/body_bg.png') 0 0 repeat-x;
}

#content-wrap {
    position: relative;
    background-color: #fff;
    clear: both;
    height: 100%;
    padding-bottom: 125px; /* equal to height of footer (105px) + some fudge */
}

#header-wrap {
    background: #0B3645 url('../img/layout/header_bg_blue.png') 0 bottom repeat-x;
	padding-left: 20px;
}

#footer-wrap {
    clear: both;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 105px;
    background: url("../img/footer_bg.png") top left repeat-x;
}

#container {
    position: relative;
    height:auto !important; /* real browsers */
    height:100%; /* IE6: treaded as min-height*/
    min-height:100%; /* real browsers */
    min-width: 960px;
    background-color: white;
}

#content {
    position: relative;
    padding-top: 20px;
    padding-left: 20px;
    height: 100%;
}

/**
 * Layout Header / Masthead
** ------------------------------------------------------------------------- */

#header {
    margin: 0 auto;
    height: 137px;
    position: relative;
}

#header #header-logo {
    z-index: 0;
    position: absolute;
    top: -64px;
    left: -110px;
}

#header #for-contractors {
    position: absolute;  
    top: 0px;
    right: 143px;  
}

#header #session-status {
    position: absolute;
    top: 46px;
    right: 8px;
}

#header #session-status span, #header #session-status a {
    font-size: 10px;
    color: white;
}

/**
 * Layout Header Navigation Tabs
** ------------------------------------------------------------------------- */

#nav-tabs {
    position: absolute;
    bottom: 0;
    left: 0;
}

#nav-tabs a {
    outline: none;
    cursor: pointer;
    float: left;
    display: block;
    margin: 0 3px 0 0;
    background-color: transparent;
    background-position: top left;
    background-repeat: no-repeat;
    width: 234px;
    height: 44px;
}

#nav-tabs a.active {
    cursor: pointer;
}


#nav-tabs a span {
    text-indent: -3000px;
    display: block;
    font-size: 14px;
    line-height: 42px;
    height: 100%;
    text-align: center;
}

#nav-tabs #estimate-your-savings { background-image: url("../img/layout/tab_estimate_your_savings.png"); }
#nav-tabs #energy-savings-report { background-image: url("../img/layout/tab_energy_savings_report.png"); }
#nav-tabs #energy-estimator      { background-image: url("../img/layout/tab_energy_estimator.png"); }
#nav-tabs #tax-credits-rebates   { background-image: url("../img/layout/tab_tax_credits_rebates.png"); }
#nav-tabs #browse-contractors    { background-image: url("../img/layout/tab_browse_contractors.png"); }
#nav-tabs #topics-community      { background-image: url("../img/layout/tab_topics_community.png"); }

#nav-tabs a:hover { background-position: 0 -44px; }
#nav-tabs a.active { background-position: 0 -88px; }

/**
 * Layout Footer
** ------------------------------------------------------------------------- */

#footer {
    padding: 10px 0 0 20px;
    clear: both;
}
#footer strong { color: #A6A53F; }
#footer .footer-nav { text-align: left; }
#footer .footer-header { font-weight: 700; float: left; width: 175px; border-bottom: 1px solid #E0E0AC; margin-right: 15px;}
#footer .footer-header-2 { font-weight: 700; float: left; width: 365px; border-bottom: 1px solid #E0E0AC; margin-right: 15px;}
#footer .footer-column { float: left; width: 175px; margin-right: 15px; margin-top: 4px;}
#footer .footer-nav a { text-decoration: none;}

#footer #copyright {
    margin: 5px 0;
    text-align: center;
    color: #A3A37D;
}

#footer #browse-nav {
    font-size:10px;
    padding-bottom: 20px;
    margin-top: 15px;
}

#footer #browse-nav .title {
    font-weight: 700;
	font-size: 12px;
	float: left;
	width: 175px;
	margin-right: 15px;
}

#footer #browse-nav .links {
	width: 760px;
	float: left;
}

/**
 * Layout Content
** ------------------------------------------------------------------------- */

#page-title {
    padding: 5px 0 13px 0;
}

#page-title p {
    margin: 0 0 0 2px;
}

/**
 * Layout State Nav
** ------------------------------------------------------------------------- */
#state-nav {
    padding: 10px 0 0 20px;
    clear: both;
}



/**
 * Flash Notifications 
** ------------------------------------------------------------------------- */

#notifications {
    margin: auto;
    margin-top: -13px;
    text-align: left;
}

#notifications li {
    list-style: none;
    list-style-type: none;
}

.information, .notice, .error, .success, .warning {
    border: 2px solid;
    padding: 6px 6px 6px 30px;
    margin: 8px 0;
    background-position: 8px 8px;
    background-repeat: no-repeat;
}

.information, .notice { 
    background-image: url('../img/icons/information.png');
    background-color: #D9F5F5;
    border-color:#C9E2E2;
    color:#131F51;
}
.error { 
    background-image: url('../img/icons/exclamation.png');
    background-color: #FBE3E4;
    border-color: #FBC2C4;
    color: #8A1F11;
}
.success { 
    background-image: url('../img/icons/accept.png');
    background-color: #E6EFC2;
    border-color: #C6D880;
    color: #264409;
}
.warning { 
    background-image: url('../img/icons/error.png');
    background-color: #FFF6BF;
    border-color:#FFD324;
    color:#514721;
}

#search-notifications {
    margin: auto;
    margin-bottom: 53px;
}

/**
 * Core Anchors / Links
** ------------------------------------------------------------------------- */

a { color: #005B7D; }
a:focus, a:hover { color: #207B9D; }
a:active { outline: none; }

a.promo {
    background: transparent url("../img/bullet_arrow_orange.png") 0% 50% no-repeat;
    padding: 0 0 1px 20px;
    font-size: 14px;
    line-height: 14px;
    text-decoration: none;
}

a.icon-link, .icon-link {
    position: relative;
    display: block;
    height: 40px;
    padding: 2px 0 0 40px;
    font-size: 16px;
    margin: 0 0 6px 0;
    text-decoration: none;
}

a.icon-link img, .icon-link img {
    position: absolute;
    top: 0;
    left: 0;
}

/**
 * Core Header Elements
** ------------------------------------------------------------------------- */

h1, h2, h3, h4, h5 {
    margin: 0; 
    padding: 0;
}

h1 a, h2 a, h3 a, h4 a, h5 a {
    text-decoration: none;
}

h1 {
    color: #33302E;
    font-size: 24px;
    line-height: 24px;
    margin: 0 0 5px 0;
}

h1.small {
    font-size: 20px;
    line-height:20px;
}

h2 {
    line-height: 1em;
    margin: 8px 0 12px 0;
}

h3 {
    color: #33302E;
    border-bottom: 1px solid #E0E0AC;
    margin: 8px 0 12px 0;
    padding-bottom: 1px;
}

h3.section { border-bottom: none; }

h3.step {
    background: transparent url("../img/bullet_big.png") 0% 55% no-repeat;
    padding: 8px 8px 8px 33px;
    margin: 0 0 13px 20px;
    font-size: 21px;
    border: none;
}

h3.rebates {
    background: transparent url("../img/h2_rebates.png") 0% 55% no-repeat;
    border: none;
    padding: 20px 0 20px 63px;
}

h4 { color: #33302E; font-size: 14px; }

h5 { color: #33302E; }

/**
 * Core Tables
** ------------------------------------------------------------------------- */

table, table tr, table tr td, table tr th {
    margin: 0;
    padding: 0;
    vertical-align: top;
}

table tr.alt {
    background-color: #f1f1eb;
}

table.data {
    margin: 0;
}

table.data tr th {
    color: #686461;
    font-size: 14px;
    font-weight: normal;
    border-bottom: 1px solid #e2e3dd;
    padding: 2px 0;
}

table.data tr td {
    font-size: 12px;
    line-height: 16px;
    padding: 2px 2px 2px 0;
}

table.grid h4 {
    border-bottom: 1px solid #e2e3dd;
}

table.grid td {
    padding: 0 13px 13px 0;
}

/**
 * Core Lists
** ------------------------------------------------------------------------- */

ul.generic {
    list-style-image: url("../img/bullet_small.png");
    list-style-position: inside;
    font-size: 14px;
    line-height: 16px;
    margin: 20px 0 20px 0;
}

ul.generic li {
    padding: 0 0 13px 0;
    margin: 0 0 0 13px;
}

ul.generic li a {
    color: #33302E;
    text-decoration: none;
}

ul.generic li a:hover {
    text-decoration: underline;
}

/** ---- **/

dl.keyed {
    margin: 0;
}

dl.keyed dt {
    color: #686461;
    display: inline-block;
    width: 120px;
    text-align: right;
    font-size: 12px;
    padding: 3px 0 0 0;
    height: 18px;
    line-height: 12px;
}

dl.keyed dd {
    margin: 0 0 -20px 120px;
    display: block;
    position: relative;
    top: -21px;
    padding-left: 8px;
}

dl.keyed dd p {
    line-height: 16px;
    margin: 0 0 6px 0;
    padding: 0;
}

dl.keyed dd ul {
    margin: 0;
}

dl.keyed dd ul li {
    display: inline;
}

/** ---- **/

ul.steps {
    list-style: none;
    padding: 0;
    margin: 0 0 0 53px;
}

ul.steps li {
    display: table;
    float: left;
    background: transparent url("../img/bullet_med.png") 0% 50% no-repeat;
    height: 53px;
    width: 227px;
    padding: 0 0 0 20px;
    margin: 0 53px 0 0;
}

ul.steps li .center {
    display: table-cell;
    vertical-align: middle;
    padding-right: 21px;
}

ul.steps li a {
    font-size: 14px;
    line-height: 18px;
    position: relative;
    left: 13px;
    top: -2px;
}

/** ---- **/

ol.steps {
    list-style: none;
    padding: 0;
    margin: 0 0 0 19px;
}

ol.steps li {
    background: transparent url("../img/ol_step.png") 0 0 no-repeat;
    min-height: 32px;
    padding: 0 0 0 44px;
    margin: 0 0 12px 0;
}

ol.steps li.step_1 { background-image: url("../img/ol_step_1.png"); }
ol.steps li.step_2 { background-image: url("../img/ol_step_2.png"); }
ol.steps li.step_3 { background-image: url("../img/ol_step_3.png"); }
ol.steps li.step_4 { background-image: url("../img/ol_step_4.png"); }
ol.steps li.step_5 { background-image: url("../img/ol_step_5.png"); }
ol.steps li.step_6 { background-image: url("../img/ol_step_6.png"); }
ol.steps li.step_7 { background-image: url("../img/ol_step_7.png"); }
ol.steps li.step_8 { background-image: url("../img/ol_step_8.png"); }
ol.steps li.step_9 { background-image: url("../img/ol_step_9.png"); }

/** ---- **/

ul.actions {
    list-style: none;
    margin: 10px 8px 8px 8px;
    padding: 0;
}

ul.actions li {
    padding: 0 0 13px 0;
}

ul.actions li a, ul.actions li .item {
    display: block;
    padding: 0 0 0 20px;
    font-size: 16px;
    line-height: 18px;
    text-decoration: none;
    background: transparent url("../img/bullet_arrow_orange.png") 0% 50% no-repeat;
}

/** ---- **/

ul.bullet-checks {
    list-style: none;
    margin: 10px 0;
}

ul.bullet-checks li {
    background: transparent url("../img/bullet_check.png") 0% 50% no-repeat;
    padding: 2px 0 2px 30px;
}

/**
 * Horizontal Rules
** ------------------------------------------------------------------------- */

hr { background-color: #E0E0AC; }

hr.clear {
    clear: both;
    visibility: hidden;
    border: none;
    height: 0;
    margin: 0; padding: 0;
}

hr.space { /* DO NOT USE THIS!!! */
    visibility: hidden;
    border: none;
    background: none;
    clear: both;
    margin: 33px 0;
}

hr.gradient {
    background: transparent url("../img/gradient_top_grey_small.png") 0 0 repeat-x;
    height: 5px;
    margin: 8px 0 33px 0;
    width: auto;
    border-radius: 2px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
}

div.dotted-separator {
    clear: both;
    background: none;
    border-bottom: dotted 2px #E0E0AC;
    margin-top: 15px;
    padding-top: 15px;
	width: 100%;    
    margin-bottom: 15px;
}

/**
 * Paragraphs
** ------------------------------------------------------------------------- */

p.strong {
    font-size: 16px;
    line-height: 21px;
    margin: 0 0 8px 0;
}

p.less-strong {
    font-size: 14px;
    line-height: 21px;
    margin: 0 0 8px 0;
}

p.step {
    margin: 0 0 13px 53px;
}

/**
 * Microformats
** ------------------------------------------------------------------------- */

address { font-style: normal; }
address .fn, address .org { font-weight: bold; }
address .fn { font-size: 14px; }
address p { margin: 0; padding: 0; }
address p strong {
    display: inline-block;
    text-align: right;
    width: 87px;
}
address .street-address,
address .locality,
address .region,
address .postal-code {
    font-style: italic;
}
address .extras { margin: 8px 0; }

/**
 * Sidebar
** ------------------------------------------------------------------------- */

.sidebar {
    background: transparent url("../img/sidebar_bg.png") 0 38px repeat-x;
    padding: 0 18px 18px 18px;
}

.sidebar h2 {
    display: block;
    position: relative;
    color: white;
    background: transparent url("../img/sidebar_header_bg.png") top left no-repeat;
    margin: 0 0 18px -18px;
    font-size: 16px;
    line-height: 36px;
    height: 38px;
    font-weight: bold;
}

.sidebar h2 span {
    display: block;
    height: 100%;
    position: relative;
    left: 18px;
    display: block;
    background: transparent url("../img/sidebar_header_bg.png") top right no-repeat;
}

.sidebar h2.soft, .sidebar h2.soft span {
    background-image: url("../img/sidebar_header_bg_soft.png");
    color: #33302E;
    font-weight: normal;
}

.sidebar h3 {
    font-size: 16px;
    border: none;
}

.sidebar hr {
    height: 2px;
    background: none;
    margin: 13px 0 20px 0;
    border-bottom: 2px dotted #c3c3b6;
}

.sidebar p {
    color: #696460;
}

/**
 * Liquid Boxes
** ------------------------------------------------------------------------- */

div.section {
    border: 1px solid #ddd9d6;
    padding: 13px;
    -moz-border-radius: 8px;
}

div.sub {
    border: 1px solid #ddd9d6;
    background-color: #f6f7f0;
    padding: 13px;
    -moz-border-radius: 3px;
}

div.sub h4 {
    margin: 0 0 16px 0;
    font-size: 14px;
    line-height: 14px;
    padding-bottom: 4px;
    border-bottom: 1px solid #ddd9d6;
}

/** Homepage popbox **/

.popbox {
    background: transparent url("../img/box.png") no-repeat left 50%;
    margin: 10px 0;    
}

.popbox-top, .popbox-top div, .popbox-bottom, .popbox-bottom div {
    display: block;
    font-size: 1px;
    height: 15px;
    position: relative;
}

.popbox-top {
    background: url("../img/box.png") no-repeat scroll left top;
    left: -7px;
    margin: 0 6px 0 7px;
    top: -10px;
}

.popbox-top div {
    background: url("../img/box.png") no-repeat scroll right top;
    left: 13px;
    top: 0;
}

.popbox-content {
    background: url("../img/box.png") no-repeat right 50%;
    margin: -10px 0 -10px 17px;
    padding: 1px 10px 1px 0;
    text-align: left;
    height: 200px;
    position: relative;
}

.popbox-bottom {
    background: transparent url("../img/box.png") no-repeat scroll left bottom;
    left: -3px;
    margin: 0 6px 0 3px;
    top: 10px;
}

.popbox-bottom div {
    background: transparent url("../img/box.png") no-repeat scroll right bottom;
    left: 9px;
    top: 0;
}

.popbox .header {
	display: block;
	color: black;
    font-size: 16px;
    background-repeat: no-repeat;
    background-position: -5px -6px;
    margin: 0;
    padding: 25px 0 25px 60px;
}

.popbox h3 {
    font-size: 12px;
    font-weight: bold;
    color: #96a121;
    border: none;
}

/** ---- **/

.action-box {
    background: #F1F1BB url("../img/gradient-shadow-long.png") 0 -20px repeat-x;
    padding: 8px;
    border: 2px solid #E1E1AB;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
}

.action-box h3 {
    border: none;
    padding: 8px 8px 10px 13px;
    margin: -10px -10px 18px -10px;
    font-weight: bold;
    font-size: 18px;
    color: #FAFAF3;
    border-bottom: 2px solid #D1D19B;
    border-radius-topleft: 10px;
    border-radius-topright: 10px;
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-topright: 10px;
    -webkit-border-radius-topleft: 10px;
    -webkit-border-radius-topright: 10px;
    background: #6A6461 url("../img/gradient-buttonlike.png") 0 -16px repeat-x;
}

/** ---- **/

.sidebox {
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    background: transparent url("../img/gradient_trans.png") top left repeat-x;
    padding: 13px 18px;
}

/**
 * Buttons, Buttons, Buttons
** ------------------------------------------------------------------------- */

/** Primary and Secondary common buttons **/

.button-primary, .button-secondary {
    outline: none;
    display: inline-block;
    position: relative;
    height: 28px;
    cursor: pointer;
    background: transparent url("../img/button_primary.png") top left no-repeat;
    margin: 0 16px 0 0;
    text-decoration: none;
    font-size: 12px;
    line-height: 25px;
}

.button-primary, 
.button-secondary, 
.button-primary input {
    color: white;
    text-shadow: #873b00 0px 0px 3px;
}

.button-primary span, 
.button-primary input, 
.button-secondary span,
.button-secondary input {
    white-space: nowrap;
    display: block;
    border: none;
    height: 28px;
    position: relative;
    left: 16px;
    padding: 0 16px 0 0;
    background: transparent url("../img/button_primary.png") top right no-repeat;
}

/** button link pseudo classes **/ 

.button-primary:hover, .button-secondary:hover { background-position: left -28px; }

.button-primary:hover span,
.button-primary:hover input,
.button-secondary:hover span,
.button-secondary:hover input { 
    background-position: right -28px; 
}
.button-primary:hover, .button-primary:visited { color: white; }
.button-primary:active, .button-secondary:active { background-position: left -56px;}

.button-primary:active span, 
.button-primary:active input, 
.button-secondary:active span,
.button-secondary:active input { 
    background-position: right -56px; 
}

/** buttons with arrow icon **/

.button-secondary.arrow, 
.button-secondary.arrow span { 
    background-image: url("../img/button_secondary_arrow.png"); 
}
.button-primary.arrow,
.button-primary.arrow span { 
    background-image: url("../img/button_primary_arrow.png"); 
}
.button-primary.arrow span,
.button-secondary.arrow span { 
    padding-right: 35px; 
}

.button-secondary,
.button-secondary span,
.button-secondary input {
    text-shadow: #fff 0px 0px 3px;
    color: #005B7D;
    background-image: url("../img/button_secondary.png");
}

.button-secondary input, .button-primary input {
    cursor: pointer !important;
    font-family: inherit;
    font-size: 12px;
    padding: 0 16px 4px 0;
}

/** Button Supreme **/

.button-supreme {
    outline: none;
    cursor: pointer;
    display: inline-block;
    position: relative;
    height: 46px;
    background: transparent url("../img/button_supreme.png") top left no-repeat;
    margin: 0 16px 0 0;
    text-decoration: none;
    font-size: 18px;
    font-weight: bold;
    line-height: 43px;
}

.button-supreme span,
.button-supreme input {
    color: white;
    text-shadow: #873b00 0px 0px 3px;
    white-space: nowrap;
    display: block;
    border: none;
    height: 46px;
    position: relative;
    left: 16px;
    padding: 0 16px 0 0;
    background: transparent url("../img/button_supreme.png") top right no-repeat;
}

.button-supreme:hover { background-position: left -46px; }
.button-supreme:hover span, .button-supreme:hover input { background-position: right -46px; }

.button-supreme:active { background-position: left -92px; }
.button-supreme:active span, .button-supreme:active input { background-position: right -92px; }

.button-supreme input {
    cursor: pointer;
    font-family: inherit;
    font-weight: bold;    
    font-size: 18px !important;
    padding: 0 16px 6px 0;
}

.button-supreme.arrow,
.button-supreme.arrow span,
.button-supreme.arrow input {
    background-image: url("../img/button_supreme_arrow.png");
}

.button-supreme.arrow input,
.button-supreme.arrow span {
    padding-right: 46px;
}

.button-supreme.waiting,
.button-supreme.waiting span,
.button-supreme.waiting input {
    background-image: url("../img/button_supreme_waiting.png");
    text-shadow: #000 0px 0px 3px;
}

.button-supreme.waiting:hover, 
.button-supreme.waiting:active { 
    background-position: top left; 
}

.button-supreme.waiting:hover span, 
.button-supreme.waiting:active span,
.button-supreme.waiting:hover input,
.button-supreme.waiting:active input {
    background-position: top right; 
}

/* ---- */

/* Dynamic spinner button */

.button-spinning {
    background-image: url("../img/button_spinner.gif") !important;
    cursor: wait;
}

/* Big Orange Email Button */

.button-email {
    display: inline-block;
    font-weight: 600;
    text-shadow: black 0 1px 1px;
    line-height: 39px;
    background: transparent url("../img/button_email_corner.png") center right no-repeat;
    height: 42px;    
    font-size: 18px;
    margin-left: 16px
}
.button-email a {
    display: inline-block;
    background: transparent url("../img/button_email.png") center left no-repeat;
    position: relative;
    left: -16px;
    height: 100%;
    padding-left: 46px;
}
.button-email, .button-email a { color: white; text-decoration: none; }

/**
 * Dialogs
** ------------------------------------------------------------------------- */
.simpledialog {
	background-color: #EFEFD5;
	border: 4px solid #E2E1C7;
	padding: 12px;
	text-align: left;
}

/**
 * Utility Classes
** ------------------------------------------------------------------------- */

.hide { display: none; }

table.center tr td {
    vertical-align: middle;
    text-align: center;
}

.grid-margin {
    margin-right: 33px;
}

.waitbox {
    background: black url("../img/spinner_black.gif") 50% 50% no-repeat;
    opacity: 0.5;
    filter:alpha(opacity=50);
}