/* ------------------------------------------- */
/*  Gas Hub Calculator 2013 - Screen CSS - IE8 */
/*  Ver          : 9.0                         */
/*  Created      : 12 Nov 2013                 */
/*  Last Updated : 10 Apr 2014                 */
/* ------------------------------------------- */

#l-grand-wrapper {
	overflow: visible;
}

.title {
    font-size: 22px;
}

.btn-path-tile {
    font-size: 14px;
}

.btn-def-wide-iconed {
    font-size: 17px;
}

.graph-running-cost-x-axis-bar {
    right: 4px;
}

/* 
DESKTOP ver. code
=================

Note: Since IE8 is only applicable to desktop, media query codes for desktop ver. are applied here
*/

/* LAYOUT */
/* ------ */

.l-wrapper {
    width: 960px;
}

#l-header {
    width: 960px;
    background-image: url(../Content/img/bg-header-dt.png);
}

.l-header-short .title {
    text-align: left;
}

.l-header--hd-n-step .title {
    width: 685px;
}

.title-db {
    width: 590px;
}

.l-section, .l-db-sect--inner {
    width: 826px;
}

.l-box, .l-calc-nav, .l-db-sect-full--inner {
    width: 902px;
}

.l-box-transparent {
    width: 900px;
}

.l-box-info-grp-75 img {
    right: 91px;
}

.l-db-sect {
    padding-right: 29px;
    padding-left: 29px;
    width: 902px;
}

.l-db-sect-full {
    padding-right: 0;
    padding-left: 0;
    width: 960px;
}

.l-db-sect--2-col {
    padding-left: 52px;
    width: 399px;
}

    .l-db-sect--2-col:first-child {
        padding-right: 52px;
        padding-left: 0;
        width: 398px;
    }

/* MODULES */
/* ------- */

.grouped-els--el {
    margin-left: 24px;
}

.d-box .grouped-els--el, .m-box .grouped-els--el {
    margin-left: 16px;
}

.grouped-els-btn-path-tile {
    width: 826px;
}

.grouped-els-offer-opt {
    width: 534px;
}

    .grouped-els-offer-opt .grouped-els--el {
        margin-left: 67px;
    }

        .grouped-els-offer-opt .grouped-els--el:first-child,
        .d-box .grouped-els--el:first-child, .m-box .grouped-els--el:first-child {
            margin-left: 0;
        }

.grouped-els-m-box-btn .grouped-els--el {
    margin: 0 16px 11px 0;
}

.gem-db-cta-single {
    width: 400px;
}

.grp-mascot-2 {
    margin-left: 30px;
}

.btn-path-tile {
    width: 234px;
}

.btn-path-tile--inner {
    margin-left: -117px;
    width: 234px;
}

.btn-medium {
    width: 298px;
}

.btn-wide {
    width: 398px;
}

.btn-def {
    width: 257px;
}

    .btn-def:hover, .btn-def:active, .selected .btn-def {
        width: 259px;
    }

.btn-def-wide, .btn-def-wide-iconed {
    width: 396px;
}

    .btn-def-wide:hover, .btn-def-wide:active, .selected .btn-def-wide,
    .btn-def-wide-iconed:hover, .btn-def-wide-iconed:active, .selected .btn-def-wide-iconed {
        width: 398px;
    }

.d-box .btn-def-wide {
    width: 317px !important;
}

    .d-box .btn-def-wide:hover, .d-box .btn-def-wide:active, .d-box .selected .btn-def-wide {
        width: 319px !important;
    }

.btn-def-ins-d-box {
    width: 183px !important;
}

    .btn-def-ins-d-box:hover, .btn-def-ins-d-box:active, .selected .btn-def-ins-d-box {
        width: 185px !important;
    }

.btn-def-wide-iconed--ico,
.btn-def-wide-iconed .ico-reload {
    margin-right: 30px;
}

.btn-def-wide-iconed:hover .btn-def-wide-iconed--ico, .btn-def-wide-iconed:active .btn-def-wide-iconed--ico, .selected .btn-def-wide-iconed .btn-def-wide-iconed--ico,
.btn-def-wide-iconed:hover .ico-reload, .btn-def-wide-iconed:active .ico-reload, .selected .btn-def-wide-iconed .ico-reload {
    margin-right: 31px;
}

.btn-def-small {
    width: 113px;
}

    .btn-def-small:hover, .btn-def-small:active, .selected .btn-def-small, .btn-confirm {
        width: 115px;
    }

.btn-def-mdl-dark-bg,
.btn-def-mdl-light-bg:hover, .btn-def-mdl-light-bg:active, .selected .btn-def-mdl-light-bg {
    width: 180px;
}

    .btn-def-mdl-light-bg, .btn-def-mdl-dark-bg:hover, .btn-def-mdl-dark-bg:active, .selected .btn-def-mdl-dark-bg {
        width: 178px;
    }

.btn-def-mdl-dark-bg-big,
.d-box .btn-def:hover, .d-box .btn-def:active, .d-box .selected .btn-def {
    width: 209px;
}

    .btn-def-mdl-dark-bg-big:hover, .btn-def-mdl-dark-bg-big:active, .selected .btn-def-mdl-dark-bg-big,
    .d-box .btn-def {
        width: 207px;
    }

.btn-crsl {
    width: 177px;
}

    .btn-crsl:hover, .btn-crsl:active, .selected .btn-crsl {
        width: 179px;
    }

.s-btn-crsl-disabled:hover {
    width: 177px;
}

.d-box .btn-crsl {
    width: 141px;
}

    .d-box .btn-crsl:hover, .d-box .btn-crsl:active, .d-box .selected .btn-crsl {
        width: 143px;
    }

.d-box .s-btn-crsl-disabled,
.d-box .s-btn-crsl-disabled:hover {
    width: 141px;
}

.btn-reg {
    width: 257px;
}

    .btn-reg:hover, .btn-reg:active, .selected .btn-reg {
        width: 259px;
    }

.btn-goal {
    width: 399px;
}

    .btn-goal:hover, .btn-goal:active, .selected .btn-goal {
        width: 401px;
    }

.step-nav-replacing a {
    width: 155px;
}

.step-nav-replacing .step-nav--bar {
    width: 175px !important;
}

.step-nav-moving a,
.step-nav-building a {
    width: 120px;
}

.step-nav-moving .step-nav--bar,
.step-nav-building .step-nav--bar {
    width: 150px !important;
}

#jsNonNaturalGasAppMBox .m-box-arrow-ver {
    right: 116px;
}

#jsOtherNGUsageMBox .m-box-arrow-ver {
    left: 130px;
}

#jsNoNGStepMBox {
    right: 158px;
}

.crsl {
    width: 824px;
}

    .crsl li {
        padding: 2px 5px;
    }

.crsl--reel {
    width: 756px;
}

.crsl--nav {
    width: 35px;
}

.d-box .crsl {
    width: 660px;
}

    .d-box .crsl li {
        padding: 2px 4px;
    }

.d-box .crsl--reel {
    width: 604px;
}

.d-box .crsl--nav {
    width: 28px;
}

.tm-spcl-offer {
    width: 100%;
}

.tm-sect-div-cta {
    width: 58px;
}

.error-box {
    padding-right: 24px;
    padding-left: 24px;
    width: 774px;
}

.spch-bubble-of-mascot, .spch-bubble-quick-connect {
    width: 620px;
}

.spch-bubble-of-mascot-2 {
    width: 610px;
}

.spch-bubble-of-mascot-3 {
    width: 600px;
}

.tab-nav li {
    margin-left: 10px;
}

.accordion-faq li {
    padding-right: 29px;
    padding-left: 29px;
    width: 902px;
}

#costPerShowerGraphCurrApp, #costPerShowerGraphPrefApp, #costPerShowerGraphAltApp {
    width: 630px;
}

.legend-db-graph {
    width: 300px;
    /* bottom: 60px; */
}

    .legend-db-graph br {
        display: none;
    }

.tbl-bubble-2 .tc-short {
    width: 120px;
}

.tbl-bubble-2 .tc-app {
    width: 120px;
}

.accordion-graph .accordion--hd,
.accordion-graph .accordion--content{
    width: 848px;
}

.scroll-prompt {
    display: none;
}