/* Typography */
body
{
    background-color: #265629;
    background: #265629 url('../img/background-low45-resize.jpg') no-repeat;
    font-family: 'Gotham SSm 4r','Gotham SSm A','Gotham SSm B',Helvetica,sans-serif;
    font-size:14px;
}
.slim-footer-nav-section *
{
    font-family: 'Gotham SSm 4r' , 'Gotham SSm A' , 'Gotham SSm B' , Helvetica, sans-serif;
    font-family: 'Montserrat',Helvetica,sans-serif\9;
}
.font-large
{
    font-size: 1.8em;
}
.font-medium
{
    font-size: 1.3em;
}
.font-small
{
    font-size: 0.8em;
}
.disclaimer
{
    line-height: 2.5em;
}
/* IE 8 hack to enable font smoothing */
/* https://gist.github.com/DanielWright/1370958 */
.dontuse {
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OTJBQkFGRUZFOTIyMTFFMEJDRDNEQzkxOTVGOTNBODAiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OTJBQkFGRjBFOTIyMTFFMEJDRDNEQzkxOTVGOTNBODAiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo5MkFCQUZFREU5MjIxMUUwQkNEM0RDOTE5NUY5M0E4MCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo5MkFCQUZFRUU5MjIxMUUwQkNEM0RDOTE5NUY5M0E4MCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PtrV+I8AAAAQSURBVHjaYvj//z8DQIABAAj8Av7bok0WAAAAAElFTkSuQmCC',sizingMethod=crop);
    zoom: 1;
}
/******************************************************** Header elements ********************************************************/
#header-container
{
    font-family: Roboto Slab,Times New Roman,Times,serif;
    padding-top:50px; /**Increased fromn 20px to 50px to align Header-Contaner with Ergon Retail site, by B.Petersen 2 July 2020**/
    font-weight: 700;     
    max-width:870px;  
    margin:auto;
}
.application-description-container
{
    float:left;
    max-width: 760px;
    min-height: 190px;
    background-color: #34aa45;
}
.application-name
{
    color: #223a2a;
    padding: 25px;
    font-size: 2.5em;
    padding-bottom:0px;
}
.application-description
{
    padding: 25px;
    padding-top:0px;
    color: #fff;
    font-weight:normal;
    font-size:14px;
}
.title-icon-container
{
    float:left;
    width:180px;
    height:190px;  
    text-align:center;  
    display:table;   
}
.title-icon
{
    font-size:80px; 
    display: table-cell;
    vertical-align:middle;    
}
.logo-site {
    margin-left: -55px;
    position: absolute;
    top: 60px; /**Altered Top properties to align Header Logo with Ergon Retail site, by B.Petersen  3 July 2020**/
    /**Added Top & Position properties to align Header Logo with Ergon Retail site, by B.Petersen 2 July 2020**/
}
/******************************************************** Main body ********************************************************/
#main-container
{
    max-width:760px;
    margin:auto;
}
#errors-container
{
    width: 600px;
}
#navbar-container, #content-container
{
    position: relative;
}
#content-container
{
    width: 600px;
    min-height: 450px;
}
.loader
{
    width: 100%;
    height: 400px;
    background: #fff url(../img/loader.gif) no-repeat center;
}
.formbody-content
{
    background-color: #fff;
    clear: both;
    padding: 20px;
}
footer
{
    max-width:760px;
    margin:auto;
    background-color:#323232;
    text-align:center;
    color:#fff;
    padding:10px;
    margin-top:20px;
}
footer a{
    color:#fff;
}
footer .list-inline {
    font-size:0.9em;
}
footer .logo-tagline{
    font-size:0.7em;
    line-height:40px;
}
footer .copyright {
    font-size:0.9em;
}
/******************************************************** Top nav ********************************************************/
#navbar-container
{   
    margin-top:20px; 
    height: 120px;
}
#navbar
{ 
    height: 100%;
}
#navbar li
{
    text-align:center;    
    top: 0px;
    padding-top:20px;
    list-style: none;
    position: absolute;
    font-size:50px;
    height: 100%;  
    background-color:#2e7c3a;    
    color:#fff;
    border-right:1px solid #256e30;
}
#navbar li:last-child
{
    border-right:none;
}
#navbar li.active
{
    background-color:#fff !important;    
    color:#000 !important;
}
#navbar li, #navbar span
{
    width: 100px;
    display: block;
}
#navbar li span.nav-label
{
    padding-top:10px;
    font-family: 'Gotham SSm 4r','Gotham SSm A','Gotham SSm B',Helvetica,sans-serif;
    font-size: 11px;
    width: 100%;
    left: 0;
    -webkit-transition: background-color ease-in-out .15s;
    transition: background-color ease-in-out .15s;
    cursor: default;
}

/* Nav Items */
#navGeneralAndHotWater
{
    left: 0px;
}
#navKitchenAndLaundry
{
    left: 100px;
}
#navLighting
{
    left: 200px;
}
#navEntertainment
{
    left: 300px;
}
#navThermostat
{
    left: 400px;
}
#navOutdoors
{
    left: 500px;
}

/******************************************************** Forms ********************************************************/
.question-container-title
{
    text-transform: uppercase;
    width: 200px;
    background-color: #777;
    color: #fff;
    float: right;
    font-weight: bold;
    text-align: center;
    line-height: 30px;
    text-shadow: 1px 1px #444;
}
.question-container
{
    border: 1px solid #e7e8ea;
    background-color: #f1f2f5;
    float: left;
    width: 100%;
    padding: 15px;
    margin-bottom: 10px;
}
.label-container
{
    float: left;
    font-size: 1.0em;
    color: #333;
    text-align: right;
    width: 370px;
    text-shadow: 1px 1px #fff;
}
.label-help
{
    font-size: 0.8em;
    color: #333;
    text-align: right;
    width: 370px;
}
label
{
    line-height: 30px;
}
.input-container
{
    float: right;
    width: 130px;
}
.input-textbox
{
    border: 1px solid #ccc;
    background-color: #e4e6eb;
    height: 30px;
    line-height: 30px;
    width: 70px;
    float: left;
    text-align: center;
    -webkit-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    margin-top: 1px;
}
.input-help
{
    font-size: 0.8em;
    color: #333;
    margin-top: -12px; /*     display:none;     display:inherit\9;*/ /* hack to show this on IE 6,7,8 */
}
.prompt-container
{
    color: #333;
    text-shadow: 1px 1px #fff;
    font-weight: bold;
}
/* placeholder font browser overrides */
::-webkit-input-placeholder
{
    color: #999;
    font-size: 11px !important;
    line-height: 30px;
    text-align: center;
}
::-moz-placeholder
{
    color: #999;
    font-size: 11px !important;
    line-height: 30px;
    text-align: center;
}
/* firefox 19+ */
:-ms-input-placeholder
{
    color: #999;
    font-size: 11px !important;
    line-height: 30px;
    text-align: center;
}
/* ie */
input:-moz-placeholder
{
    color: #999;
    font-size: 11px !important;
    line-height: 30px;
    text-align: center;
}

.mandatory
{
    color: #e10000;
    font-weight: bold;
    font-size: 1.3em;
    padding-left: 5px;
    float: left;
    position: relative;
}
.validation-container
{
}

/* form buttons */
.button-container
{
    clear: left;
    padding-top: 10px;
    width: 100%;
    height: 40px;
    display: block;
}
.form-button
{
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 1.0em;
    cursor: pointer;
    margin: 0;
    padding: 0;
}

/* next and back buttons */
.back-button
{
    float: left;
    color: #444;
    background-color: #fff;
    border: 1px solid #ddd;
    height: 35px;
    padding-left: 10px;
    padding-right: 10px;
}
.back-button-label
{
    float: right;
    line-height: 19px;
    font-weight: bold;
    text-align: center;
    width: 60px;
}
.back-button:hover
{
    color: #333;
    background-color: #E8E8E8;
    -webkit-transition: background-color ease-in-out .15s;
    transition: background-color ease-in-out .15s;
}

.next-button
{
    float: right;
    color: #fff;
    background-color: #006710;
    border: 1px solid #ddd;
    height: 35px;
    padding-left: 10px;
    padding-right: 10px;
}
.next-button-label
{
    float: left;
    line-height: 19px;
    font-weight: bold;
    text-align: center;
    width: 60px;
}
.next-button:hover
{
    color: #333;
    background-color: #E8E8E8;
    -webkit-transition: background-color ease-in-out .15s;
    transition: background-color ease-in-out .15s;
}

.calculate-button-label
{
    float: left;
    line-height: 36px;
    font-weight: bold;
    text-align: center;
    width: 170px;    
}
.calculate-button
{
    height:38px;
    padding-left:0px;
    padding-right:15px;
}
.start-again-button
{
    height:38px;
    padding-left:20px;
    padding-right:40px;    
}
.call-to-action {
    position: relative;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    max-width: 100%;
}
.call-to-action:before {
    content: "\e602";
    position: absolute;
    right: 0;
    width: 36px;
    height: 36px;
    top: 0;
    z-index: 1;
    color: white;
    text-align: center;
    line-height: 36px;
    pointer-events: none;
    font-family: ergon-icons;
	text-align: center;
	font-size: 16px;
	background: black;
    background: rgba(0, 0, 0, 0.5);
}
.call-to-action input[type=submit] {
    text-transform:uppercase;
    background: rgba(255, 255, 255, 0.15);
    padding: 10px 56px 10px 20px;
    text-decoration: none;
    display: inline-block;
    position: relative;
    height: 36px;
    float: right;
    max-width: 100%;
    color: white;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border:none;
}
.reset-button-label
{
    float: left;
    line-height: 36px;
    font-weight: bold;
    text-align: center;
    width: 120px;
}

/* plus and minus buttons */
.plus-minus-button
{
    width: 30px;
    height: 30px;
    cursor: pointer;
    text-align: center;
    color: #fff;
}
.dec
{
    float: left;
    background: #d2322d;
    line-height: 30px;
    font-size: 18px;
}
.inc
{
    float: right;
    background: #47a447;
    line-height: 30px;
    font-size: 18px;
    font-weight: bold;
}
.dec:hover, .inc:hover
{
    background: #aaa;
    -webkit-transition: background-color ease-in-out .15s;
    transition: background-color ease-in-out .15s;
}

/* Validation non-JS */
.field-validation-error
{
    color: #a94442;
    font-size: 0.75em;
    font-weight: bold;
    float: left;
    display: block;
    text-align: center;
    width: 100%;
    border: 1px solid #ebccd1;
    background-color: #f2dede;
    border-radius: 2px;
    position: relative;
    padding: 10px;
    margin-bottom: 20px;
    text-shadow: 1px 1px #fff;
}

/* Validation Ajax */
.tooltip-inner
{
    max-width: 200px;
    padding: 0;
}
.tooltip.bottom .tooltip-arrow
{
    top: 0;
    left: 50%;
    margin-left: -5px;
    border-bottom-color: #dca7a7 !important;
    border-width: 0 5px 5px;
}
.tooltip.in
{
    /* override twitter bootstrap opacity settings */
    opacity: 1.0;
    filter: alpha(opacity=100);
}
.validation-tooltip
{
    padding: 8px 10px;
    font-weight: bold;
    color: #a94442;
    text-shadow: 1px 1px #fff;
    border-radius: 4px;
    background-color: #ebccd1;
}
/*.alert{border-radius:0;}*/
.alert-red
{
    background: #ebccd1;
}

/******************************************************** Results Graph ********************************************************/
#YourResultsContent
{
    width: 1000px;
    background-color: #fff;
    display: block;
}
#ContentLeft
{
    float: left;
    background-color: #fff;
    width: 600px;
}
#ContentRight
{
    float: left;
    margin-left: 10px;
    width: 300px;
    margin-top: -120px;
}
#results-graph
{
    padding:0;       
    height: 300px;
    background: #fff;
    background-color: rgba(255,255,255,0.5);    
    margin-bottom: 0;
}
#results-graph li
{
    list-style: none;
    float: left;
    width: 100px;
    border-right: 1px solid #ddd;
    height: 100%;
}

/* graph bar */
#results-graph div
{
    position: relative;
    width: 100px;
    min-height: 35px;
}
#results-graph div
{
    cursor: pointer;
    color: #fff;
    font-weight: bold;
}
#results-graph div:hover
{
    color: #244926;
    background: #eee;
    -webkit-transition: background ease-in-out .15s;
    transition: background ease-in-out .15s;
}
#graphGeneralAndHotWater
{
    background-color: #244926;
    height: 10px;
}
#graphKitchenAndLaundry
{
    background: #216028;
    height: 200px;
}
#graphLighting
{
    background: #338540;
    height: 150px;
}
#graphEntertainment
{
    background: #4D9558;
    height: 250px;
}
#graphThermostat
{
    background: #66A470;
    height: 200px;
}
#graphOutdoors
{
    background: #80B387;
    height: 100px;
}
.graph-font
{
    font-size: 1.5em;
    text-align: center;
    bottom: 3px;
    position: absolute;
    width: 100px;
}

/* results category total */
#results-total
{
    padding:0;
    height: 30px;
    background: #fff;
    background-color: rgba(255,255,255,0.7);
    margin-bottom: 0px;
}
#results-total li
{
    list-style: none;
    float: left;
    width: 100px;
    border-right: 1px solid #ddd;
    min-height: 30px;
}
.subtotal-font
{
    font-size: 1.0em;
    font-weight: bold;
    color: #244926;
    text-align: center;
    position: absolute;
    width: 100px;
    line-height: 30px;
}

/* results total per day */
#results-totalperday
{
    padding:0;
    height: 35px;
    background: #E4F2E6;
}
#results-totalperday li
{
    list-style: none;
    float: left;
    min-height: 35px;
}
#results-totalperday li:nth-child(1)
{
    width: 0px;
}
#results-totalperday li:nth-child(2)
{
    width: 0px;
}
#totalPerDayLabel, .total-font-label
{
    width: 500px;
}
#totalPerDay, .total-font-value
{
    width: 100px;
}
.total-font
{
    font-size: 1.2em;
    font-weight: bold;
    color: #244926;
    position: absolute;
    text-align: center;
    line-height: 35px;
}

.results-button-container
{
    margin-bottom: 15px;
    margin-left: 0px;
    width: 100%;
    height: 50px;
}

/******************************************************** Results Graph - popover ********************************************************/
.popover
{
    max-width: 250px !important;
    width: 250px;
}
/* twitter override */
.popover-title
{
    font-weight: bold;
}
.popover-container
{
    width: 100%;
    background-color: #fff;
    padding: 20px;
}
.label-summary
{
    border-bottom: 1px solid #777;
    padding-bottom: 10px;
    font-weight: bold;
    color: #444;
    font-size: 0.8em;
}
.label-summary-help
{
    font-weight: normal;
    color: #333;
    display: block;
}
.label-costs
{
    float: right;
    margin-top: -20px;
}
.label-summary-total
{
    font-weight: bold;
    font-size: 0.8em;
}
.label-summary-totalcosts
{
    float: right;
}

/******************************************************** Results - recommendation ********************************************************/
.recommendation-title, .emailreport-title
{   
    font-family: Roboto Slab,Times New Roman,Times,serif; 
    background-color: #216028;
    color: #fff;
    font-weight: normal;
    width: 100%;
    padding: 20px;
}
.recommendation-title a
{
    color: #fff;
    font-weight: bold;
}
#recommendations-list
{
    padding:0;    
}
#recommendations-list li
{    
    list-style: none;
    height: 90px;
    background-color: #F0FFF3;
    border-top: 4px solid #fff;
}
#recommendations-list .recommendation-text
{
    position: relative;
    color: #244926;
    font-size: 11px;
    height: 100%;
    font-weight: normal;
    line-height: normal;
    padding: 5px;
}
.more
{
    font-weight: bold;
    position: relative;
    height: 20px;
    width: 20px;
    background-color: #244926;
    color: #fff;
    float: right;
    margin-top: -20px;
    text-align: center;
    padding-top: 1px;
    display: block;
}
.more a
{
    color: #fff;
}
/* recommendation ordered numbers */
#recommendations-list .recommendation-order
{
    float: left;
    font-size: 5em;
    font-weight: bold;
    background-color: #80B387;
    color: #fff;
    width: 65px;
    height: 100%;
    line-height: 80px;
    text-align: center;
    margin-right: 10px;
}
#recommendations-list li:nth-child(2) div.recommendation-order
{
    background-color: #4D9558;
}
#recommendations-list li:nth-child(3) div.recommendation-order
{
    background-color: #244926;
}

/* Email results */
.emailreport-title
{
    position: relative;
    min-height: 110px;
    margin-top: 10px;
}
#email-result
{
    clear: left;
    position: relative;
    top: 5px;
}
.alert-success
{
    margin-bottom: 0;
}
.input-textbox-email
{
    width: 162px;
    height: 35px;
    color: #333;
    text-align: left;
    font-size: 0.9em;
    margin-top: 0px;
}