html, body {
    margin: 0;
    padding: 0;
}

body {
    background-color: #BDEBFF;
    overflow: hidden;
    color: #2E3641;
    font-family: "museo-sans", sans-serif;
    font-size: 62.5%;
}

.full {
    width: 100%;
    height: 100%;
}

.full-padding {
    padding: 20px;
    width: -webkit-calc(100% - 40px);
    width: calc(100% - 40px);
    height: -webkit-calc(100% - 40px);
    height: calc(100% - 40px);
}

.lightbox {
    z-index: 9999;
    position: absolute;
    top: 55px;
    left: 0;
    height: -webkit-calc(100% - 55px);
    height: calc(100% - 55px);
    background-color: rgba(46, 54, 65, 0.95);
    display: none;
}

.textCenter {
    text-align: center;
}

h1, h2, h3, h4, h5, h6 {
    color: #00A1E4;
    margin: 0;
    padding: 0;
    text-transform: uppercase;
    padding-bottom: 20px;
}

h1 {
    font-size: 26px;
}

h2 {
    font-size: 24px;
}

h3 {
    font-size: 22px;
}

h4 {
    font-size: 20px;
}

h5 {
    font-size: 18px;
}

h6 {
    font-size: 16px;
    font-weight: 800;
}

.wrapper {
    margin: 30px;
}

a img {
    border: none;
}

#header {
    width: 100%;
    height: 55px;
    background-color: #FFF;
    position: relative;
    z-index: 1001;
}

    #header #headerBtns {
        position: absolute;
        right: 0;
        top: 0;
    }

    #header #home_btn {
        display: inline-block;
        position: absolute;
    }

.navButton {
    display: block;
    line-height: 55px;
    float: left;
    font-size: 16px;
    padding: 0 19px;
    text-decoration: none;
}

    .navButton:last-child {
        padding-right: 0;
    }

    .navButton:hover {
        background-color: #EEFAFF;
    }

    .navButton img {
        float: left;
    }

    .navButton p {
        display: inline;
        color: #00A1E4;
    }

button {
    background: none;
    margin: 0;
    padding: 0;
    font-family: "museo-sans",sans-serif;
}

    button span {
        font-family: "museo-sans",sans-serif;
    }

    button, button:hover, button:active, button:focus {
        border: none;
        outline: none;
        cursor: pointer;
    }

#content {
    position: relative;
    margin: 0 auto;
    width: 1280px;
    height: 720px;
}

.loadingScreen {
    background-color: #FFF;
    position: absolute;
    z-index: 9999;
}

    .loadingScreen img {
        display: block;
        margin: 0 auto;
        margin-top: 25%;
    }

    .loadingScreen p {
        color: #008CD0;
        text-transform: uppercase;
        text-align: center;
        font-weight: 700;
        font-size: 1.25em;
    }

.screen {
    position: absolute;
    top: 0;
    left: 0;
    display: none;
}

.menuHotspot {
    position: absolute;
    z-index: 5;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
}

#menuScreen {
    background-image: url(/daikincityweb/images/city.jpg);
    background-size: contain;
}

#buildingMenu {
    position: relative;
}

.buildingFloorMenuContainer {
    width: 300px;
    position: absolute;
    top: 50%;
    left: 5%;
}

    .buildingFloorMenuContainer h3 {
        padding: 0;
        font-weight: 800;
        font-size: 27px;
    }

    .buildingFloorMenuContainer p {
        padding-bottom: 25px;
        font-size: 12px;
        width: 85%;
    }

.floor-menu {
    overflow: hidden;
}

#buildingMenu .floor-menu button {
    background-image: url(/daikincityweb/images/floor-menu-btn.png);
    height: 38px;
    background-repeat: no-repeat;
    margin-bottom: 8px;
    font-weight: 800;
}

    #buildingMenu .floor-menu button:hover {
        background-position: 0 -38px;
    }

.menu-tooltip {
    position: absolute;
    border-radius: 4px;
    background-color: #2E3641;
    color: #FFF;
    display: none;
    padding: 6px 12px;
    z-index: 10;
    text-transform: uppercase;
    font-size: 0.9em;
}

#bottomMenu {
    background-color: rgba(46, 54, 65, 0.95);
    color: #FFF;
    font-size: 14px;
    width: 90%;
    margin: 0 auto;
    padding: 1% 2.5%;
    overflow: hidden;
    position: absolute;
    bottom: 2.5%;
    left: 2.5%;
    z-index: 10;
}

    #bottomMenu a {
        text-decoration: underline;
        font-style: italic;
        font-size: 0.85em;
        color: #0991CB;
        margin-top: 2%;
        display: block;
    }

    #bottomMenu #bottomMenuLeft {
        width: 40%;
        float: left;
    }

        #bottomMenu #bottomMenuLeft h1 {
            margin-top: 12px;
            color: #40C8F4;
            font-weight: 900;
            padding-bottom: 10px;
        }

        #bottomMenu #bottomMenuLeft p {
            font-style: italic;
            font-size: 1em;
            line-height: 1.35em;
            letter-spacing: 1px;
            margin: 0;
            font-weight: 100;
        }

    #bottomMenu button {
        text-transform: uppercase;
        color: #FFF;
        font-size: 0.85em;
        padding: 4px 0;
        width: 80%;
        text-align: left;
    }

    #bottomMenu #bottomMenuRight {
        float: left;
        width: 60%;
    }

    #bottomMenu .divide {
        width: 75%;
        background-color: #FFF;
        margin: 0 auto;
    }

#functionalBuildingsMenu {
    list-style-image: url(/daikincityweb/images/bullet-circle.png);
}

#applicationBuildingsMenu {
    list-style-image: url(/daikincityweb/images/bullet-star.png);
}

    #applicationBuildingsMenu li button {
        color: #40C8F4;
    }

#bottomMenuRight ul {
    width: 90%;
    display: block;
    overflow: hidden;
    margin-left: 10%;
}

    #bottomMenuRight ul li {
        float: left;
        width: 28%;
        line-height: 1.25em;
        margin-right: 2%;
    }

        #bottomMenuRight ul li button:hover {
            color: #00A1E4;
        }

#functionalBuilding {
    overflow: hidden;
}

#configurationDescription {
    margin: 0;
    padding: 0;
}

.calculatorTemplateLeft {
    position: absolute;
    left: 0;
    width: 35%;
    height: -webkit-calc(60% + 30px);
    height: calc(60% + 30px);
    margin-right: 2.5%;
    float: left;
    background-color: #FFF;
    overflow: hidden;
}

.calculatorTemplateCentre {
    position: absolute;
    left: 37.5%;
    width: 44%;
    height: -webkit-calc(60% + 30px);
    height: calc(60% + 30px);
    margin-right: 2.5%;
    float: left;
    background-color: #BDEBFF;
}

    .calculatorTemplateCentre h2 {
        padding: 0 0 0 25px;
        margin: 2.5% 0;
        color: #FFF;
        font-size: 2em;
    }

.calculatorTemplateRight {
    position: absolute;
    left: 84%;
    width: 16%;
    height: -webkit-calc(60% + 30px);
    height: calc(60% + 30px);
    float: left;
    color: #FFF;
}

.calculatorTemplateBottom {
    width: 100%;
    height: 27.5%;
    margin-top: 2.5%;
    text-align: center;
    overflow: hidden;
    position: absolute;
    top: -webkit-calc(60% + 30px);
    top: calc(60% + 30px);
}

.floorNavigation {
    width: 100%;
    height: 40px;
    z-index: 1000;
    position: relative;
}

.floorButton {
    width: 300px;
    height: 40px;
    background-color: #2FB3EA;
    color: #FFF;
    text-transform: uppercase;
    float: left;
}

.floorNavigation .floorButton, .floorNavigation .floorButton:hover {
    border-right: 1px solid #5ec6f1;
}

.floorNavigation .floorButtonHighlighted {
    background-color: #5EC6F1;
}

.floorImageContainer {
    position: absolute;
    top: 0.83%;
    left: 35.9375%;
    width: 47.1875%;
    height: 60%;
    z-index: 1000;
}

    .floorImageContainer img {
        display: block;
        width: 100%;
    }

#buildingView #zoomBtn {
    position: absolute;
    left: 5%;
    bottom: 5%;
    z-index: 1001;
}

.zoom-close-btn {
    position: absolute;
    top: 80%;
    left: 12%;
    width: 53px;
    height: 53px;
    background-image: url(/daikincityweb/images/zoom_out.png);
    background-repeat: no-repeat;
}

#buildingSavings .savingsKWHWidget, #buildingSavings .buildingEnergyComparison {
    width: 100%;
    height: 46.6%;
}

#buildingEnergyComparison {
    margin: 0;
    padding: 0;
}

#buildingEnergyComparison {
    position: relative;
    background-color: #DEF5FF;
}

#savingsPercentLabel {
    position: absolute;
    width: 100%;
    top: 18%;
    text-align: center;
    font-style: italic;
    font-size: 15px;
    font-weight: normal;
    font-style: italic;
    line-height: normal;
}

#savingsPercent {
    font-size: 70px;
    font-weight: bold;
    text-align: center;
    top: 45%;
    position: absolute;
    width: 100%;
}

    #savingsPercent span {
        font-size: 45px;
        color: #D6F3FD;
        font-weight: normal;
    }

#buildingSavingsKWH {
    position: relative;
    margin-bottom: 14.2%; /* magic number */
}

.savingsKWHWidget {
    position: relative;
    background-color: #2E3641;
}

.energySavingsWidgetInfo {
    position: absolute;
    top: 35%;
    text-align: center;
    width: 100%;
    font-size: 1em;
}

    .energySavingsWidgetInfo p {
        margin: 0;
        padding: 0;
        margin-bottom: 0.2%;
    }

.savingsKWHWidget p span {
    font-size: 16px;
    font-weight: normal;
    font-style: italic;
}

.savingsKWHWidget img {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 86%;
}

#savingsKWHValue {
    font-size: 2.5em;
    font-weight: bold;
}

#buildingConfigurationOptions {
    position: relative;
    overflow: hidden;
}

#configurationButtonsCanvas {
    position: absolute;
    top: 0;
    left: 0;
}

#configurationContainerLeft {
    float: left;
    width: 18%;
    text-align: left;
}

#configurationContainerRight {
    float: left;
    width: 82%;
    height: 138px;
    background-color: #DEF5FF;
    overflow: hidden;
    position: relative;
}

    #configurationContainerRight .layoutLabels {
        width: 13%;
        height: 100%;
        float: left;
        margin-top: 2%;
        color: #00A1E4;
        text-transform: uppercase;
        font-size: 13px;
        font-weight: 700;
    }

.layoutLabels p {
    margin: 15px 0 33px 0;
}

#configurationContainerRight .layoutColumn {
    position: relative;
    width: 29%;
    height: 100%;
    float: left;
    z-index: 1;
    margin-top: 2%;
}

.layoutColumn .configurationButton {
    width: 90%;
}

.configurationButton {
    width: 96%;
    height: 38px;
    background-color: #2E3641;
    color: #FFF;
    text-transform: uppercase;
    font-weight: 800;
    margin-bottom: 12px;
}

.configurationButtonSelected {
    width: 100%;
    color: #008CD0;
    background-color: #FFF;
    background-image: url(/daikincityweb/images/configuration-selected-arrow.gif);
    background-position: right;
    background-repeat: no-repeat;
}

.systemButton {
    width: -webkit-calc(90% - 30px);
    width: calc(90% - 30px);
    height: 38px;
    text-align: center;
    font-weight: 800;
    color: #00A1E4;
    background-color: #FFF;
    text-transform: uppercase;
    float: left;
    margin: 0 0 12px 30px;
    position: relative;
    overflow: visible;
    font-size: 10px;
}

    .systemButton span {
        width: 85%;
        display: block;
        margin-left: 30px;
    }

.systemButtonOff span {
    position: relative;
    margin-left: 12px;
}

.systemButtonOff {
    background-color: #4D545D;
    color: #ACAEB1;
}

.systemButtonOn {
    background-color: #FFF;
    color: #00A1E4;
}

.systemButtonAvailable {
    background-color: #2E3641;
    color: #ACAEB1;
}

.systemButtonSwitch {
    width: 66px;
    height: 38px;
    background-image: url(/daikincityweb/images/configuration-button-switch.png);
    background-repeat: no-repeat;
    position: absolute;
    left: 0;
    top: 0;
    margin-left: -30px;
}

.systemButtonOn .systemButtonSwitch {
    background-position: 0 -76px;
}

.systemButtonAvailable .systemButtonSwitch {
    background-position: 0 -38px;
}

.systemButtonOff .systemButtonSwitch {
    background-position: 0 0;
}

#configurationIcons {
    float: left;
    width: 60px;
    height: 100%;
    background-color: #2E3641;
    overflow: hidden;
}

#configurationInformation {
    float: left;
    width: -webkit-calc(100% - 120px);
    width: calc(100% - 120px);
    height: -webkit-calc(100% - 60px);
    height: calc(100% - 60px);
    padding: 30px;
    overflow: hidden;
    position: relative;
}

    #configurationInformation h3 {
        font-size: 14px;
        padding: 0;
        color: #00A1E4;
    }

#configurationTitle {
    padding: 0;
    margin-bottom: 5%;
}

#configurationTabs {
    width: 100%;
    text-align: center;
    overflow: hidden;
    margin: 5% 0 5% 0;
    height: 44px;
    position: relative;
}

.tab-button {
    position: absolute;
    height: 100%;
    background: #F1F1F1;
    background: -moz-linear-gradient(top, #f1f1f1 0%, #d2d2d2 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f1f1f1), color-stop(100%,#d2d2d2));
    background: -webkit-linear-gradient(top, #f1f1f1 0%,#d2d2d2 100%);
    background: -o-linear-gradient(top, #f1f1f1 0%,#d2d2d2 100%);
    background: -ms-linear-gradient(top, #f1f1f1 0%,#d2d2d2 100%);
    background: linear-gradient(to bottom, #f1f1f1 0%,#d2d2d2 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F1F1F1', endColorstr='#D2D2D2',GradientType=0 );
    border: 1px solid #B8B8B8;
    border-right: none;
    font-size: 11px;
    text-transform: uppercase;
    padding: 0 2px;
    line-height: 1em;
}

    .tab-button, .tab-button:hover, .tab-button:active, .tab-button:focus {
        border: 1px solid #B8B8B8;
        border-right: none;
    }

@media all and (max-height: 665px), all and (max-width:1024px) {
    #configurationInformation {
        width: calc(100% - 80px);
        padding: 30px 10px;
    }

    #configurationTabs {
        height: 30px;
    }

    .tab-button {
        line-height: 1.25em;
        font-size: 8px;
    }
}

.tab-button:hover {
    background: #F1F1F1;
    border: 1px solid #B8B8B8;
    border-right: none;
}

.tab-button:last-child {
    border: 1px solid #B8B8B8;
}

.tab-button-selected, .tab-button-selected:hover {
    background: #FFF;
    border: 1px solid #B8B8B8;
    border-right: none;
}

    .tab-button-selected:last-child {
        border: 1px solid #B8B8B8;
    }

#configurationInformation p {
    line-height: 1.5em;
    font-size: 11px;
}

@media all and (min-height: 800px) and (min-width: 1240px) {
    #configurationInformation p {
        line-height: 1.5em;
        font-size: 14px;
    }
}

#configurationImage {
    width: 60%;
    display: block;
    margin: 0 auto;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 2%;
}

.configurationIcon {
    width: 60px;
    height: 60px;
    overflow: hidden;
    background-repeat: no-repeat;
    float: left;
}

.configurationIconOn {
    background-position: 0 -120px;
}

.configurationIconAvailable {
    background-position: 0 -60px;
}

.configurationIconOff {
    background-position: 0 0;
}

.zoomIcon {
    width: 55px;
    height: 55px;
    background-image: url(/daikincityweb/images/zoom.png);
    background-repeat: no-repeat;
}

#scenarioInformation {
    position: relative;
}

    #scenarioInformation p {
        padding: 2% 5%;
    }

    #scenarioInformation .small {
        padding: 0;
    }

    #scenarioInformation p span {
        color: #008CD0;
        font-weight: bold;
    }

#hotelScenarioSelectBtn {
    width: 60%;
    height: 40px;
    margin: 0 auto;
    display: block;
    background-color: #008cd0;
    color: #FFF;
}

.timeline-slider-preview {
    width: 35%;
    display: block;
    margin: 0 auto;
}

#hotelRoomFloorNavigation {
    position: absolute;
    width: 44%;
    left: 37.5%;
}

#hotelRoomView {
    width: 62.5%;
    padding-top: 40px;
    height: -webkit-calc(60% - 10px);
    height: calc(60% - 10px);
    margin-right: 0;
    background-image: url(/daikincityweb/images/buildings/hotel/floor-menu-bg.gif);
    background-repeat: repeat-x;
}

.hotelRoomImage {
    width: 45%;
    position: absolute;
    top: 15%;
    right: 25%;
}

#hotelRoomImage {
    z-index: 1001;
}

#hotelRoomOverlayImage {
    z-index: 1002;
}

.hotelRoomAnimation {
    width: 22%;
    position: absolute;
    left: 5%;
    z-index: 1003;
}

#hotelRoomImage, #hotelRoomOverlayImage, #hotelRoomAnimationImage {
    width: 100%;
}

#scenarioMenu {
    overflow: hidden;
}

    #scenarioMenu h3 {
        width: 90%;
        background-color: #FFF;
        height: 60px;
        line-height: 60px;
        padding: 0% 5%;
        font-size: 18px;
        color: #008CD0;
        text-transform: none;
    }

    #scenarioMenu ul {
        width: 100%;
        height: -webkit-calc(100% - 60px);
        height: calc(100% - 60px);
        background-color: #F3F1EF;
        color: #000;
        margin: 0;
        list-style: none;
        list-style-position: inside;
    }

        #scenarioMenu ul li {
            padding: 1.5%;
            width: 75%;
        }

            #scenarioMenu ul li button {
                text-align: left;
                font-size: 14px;
            }

                #scenarioMenu ul li button:hover {
                    text-decoration: underline;
                }

#scenarioDetails {
    text-align: center;
    background: #f3f1ef;
    background: -moz-linear-gradient(top, #f3f1ef 60%, #c2c2c2 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(60%,#f3f1ef), color-stop(100%,#c2c2c2));
    background: -webkit-linear-gradient(top, #f3f1ef 60%,#c2c2c2 100%);
    background: -o-linear-gradient(top, #f3f1ef 60%,#c2c2c2 100%);
    background: -ms-linear-gradient(top, #f3f1ef 60%,#c2c2c2 100%);
    background: linear-gradient(to bottom, #f3f1ef 60%,#c2c2c2 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f3f1ef', endColorstr='#c2c2c2',GradientType=0 );
}

    #scenarioDetails #scenarioMenuBtn {
        padding-left: 4%;
        width: 100%;
        height: 40px;
        background-color: #FFF;
        color: #008CD0;
        text-align: left;
        font-size: 14px;
    }

    #scenarioDetails #scenarioDescription {
        font-size: 1.15em;
        line-height: 1.15em;
    }

#hotelRoomTimeline {
    background-color: #8BD7F8;
}

#hotelRoomSavings {
    background-color: #2E3641;
    text-align: center;
}

    #hotelRoomSavings .savingsKWHWidget canvas {
        width: 75%;
    }

    #hotelRoomSavings .savingsKWHWidget:first-child {
        margin-top: 5%;
    }

    #hotelRoomSavings .savingsKWHWidget p {
        top: -webkit-calc(35% - 32px);
        top: calc(35% - 32px);
    }

.controlLabel {
    padding: 0;
    margin: 0 0 10% 0;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: bold;
}

.timeline {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    background-color: #8BD7F8;
    position: relative;
    overflow: hidden;
}

.timeline-img {
    position: absolute;
    top: 35%;
    width: 100%;
}

    .timeline-img img {
        position: absolute;
        left: 0;
        right: 0;
        display: block;
        margin: 0 auto;
        width: 85%;
    }

.timeline-handle {
    position: absolute;
    left: -webkit-calc(15% - 15px);
    left: calc(15% - 15px);
}

.hotspot-label {
    font-size: 10px;
    color: #FFF;
    background-color: #2E3641;
    padding: 6px 12px;
    margin: 0;
}

#controllerUnit {
    width: 45%;
    top: 38%;
    left: 0;
    right: 0;
    margin: 0 auto;
    display: block;
    position: absolute;
}

    #controllerUnit p {
        margin: 0;
        padding: 0;
        position: absolute;
        font-size: 1em;
        font-weight: bold;
    }

    #controllerUnit .controller {
        width: 100%;
    }

    #controllerUnit .controller-highlight {
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
    }

    #controllerUnit .time {
        top: 18%;
        left: 55%;
        font-size: .85em;
    }

    #controllerUnit .temperatureRoom {
        top: 29%;
        left: 49%;
        font-size: 1.5em;
    }

    #controllerUnit .temperatureSet {
        top: 29%;
        left: 70%;
        font-size: 0.8em;
    }

.scenarioPlayerControls {
    margin-left: -20px;
    position: absolute;
    left: 0;
    bottom: 1%;
    right: 0;
}

.scenarioControlBtn {
    margin-right: -20px;
    vertical-align: middle;
}

/* Library */
.library-menu {
    background-image: url(/daikincityweb/images/buildings/library/library-overview.jpg);
    background-repeat: no-repeat;
    background-size: contain;
}

#libraryMenu {
    position: relative;
}

    #libraryMenu h2 {
        text-align: center;
        padding-top: 58px;
        padding-bottom: 5px;
        color: #00A1E4;
        font-size: 28px;
    }

    #libraryMenu p {
        text-align: center;
        font-style: italic;
        margin: 0;
    }

.category-hotspot-latest {
    background: #8BD7F8;
    background: -moz-linear-gradient(top, #8BD7F8 35%, #8BD7F8 35%, #21ADE9 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(35%,#8BD7F8), color-stop(35%,#8BD7F8), color-stop(100%,#21ADE9));
    background: -webkit-linear-gradient(top, #8BD7F8 35%,#8BD7F8 35%,#21ADE9 100%);
    background: -o-linear-gradient(top, #8BD7F8 35%,#8BD7F8 35%,#21ADE9 100%);
    background: -ms-linear-gradient(top, #8BD7F8 35%,#8BD7F8 35%,#21ADE9 100%);
    background: linear-gradient(to bottom, #8BD7F8 35%,#8BD7F8 35%,#21ADE9 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#21ADE9', endColorstr='#007FCC',GradientType=0 );
    border: 1px solid #21ADE9;
}

.category-hotspot-main {
    background: #21ade9;
    background: -moz-linear-gradient(top, #21ADE9 35%, #21ADE9 35%, #007FCC 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(35%,#21ADE9), color-stop(35%,#21ADE9), color-stop(100%,#007FCC));
    background: -webkit-linear-gradient(top, #21ADE9 35%,#21ADE9 35%,#007FCC 100%);
    background: -o-linear-gradient(top, #21ADE9 35%,#21ADE9 35%,#007FCC 100%);
    background: -ms-linear-gradient(top, #21ADE9 35%,#21ADE9 35%,#007FCC 100%);
    background: linear-gradient(to bottom, #21ADE9 35%,#21ADE9 35%,#007FCC 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#21ADE9', endColorstr='#007FCC',GradientType=0 );
    border: 1px solid #007FCC;
}

.category-hotspot {
    position: absolute;
    border-radius: 2px;
    width: 11%;
    height: 7%;
}

#libraryMenu .category-hotspot:hover {
    border: 1px solid #007FCC;
    background: #21AEE9;
}

.category-hotspot span {
    font-style: normal;
    text-transform: uppercase;
    font-weight: bold;
    color: #FFF;
}

#bookShelfHeader {
    height: 55px;
    background: #f3f1ef;
    background: -moz-linear-gradient(top, #d9d9d9, #ffffff 75%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(#d9d9d9), color-stop(75%, #ffffff));
    background: -webkit-linear-gradient(top, #d9d9d9, #ffffff 75%);
    background: -o-linear-gradient(top, #d9d9d9, #ffffff 75%);
    background: -ms-linear-gradient(top, #d9d9d9, #ffffff 75%);
    background: linear-gradient(to bottom, #d9d9d9, #ffffff 75%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#d9d9d9', endColorstr='#ffffff', GradientType=0);
}

#bookShelfBackBtn {
    text-align: left;
    color: #008CD0;
    font-size: 16px;
    margin-left: 2.5%;
    height: 55px;
    width: 15%;
    float: left;
    position: relative;
    z-index: 100;
}

#bookShelfHeader h3 {
    font-size: 20px;
    line-height: 55px;
    text-align: center;
    color: #00A1E4;
    width: 82.5%;
    float: left;
    padding: 0;
    margin-left: -7.5%;
}

.libraryBreadcrumbs p {
    margin: 0;
    padding: 0;
    font-size: 14px;
}

.libraryTabsMenu {
    width: 100%;
    height: 38px;
    overflow: hidden;
}

.library-tab-btn {
    background-color: #2E3641;
    margin-right: 2px;
    float: left;
    color: #FFF;
    text-transform: uppercase;
    height: 38px;
    padding: 0 20px;
    font-size: 11px;
}

    .library-tab-btn:last-child {
        margin-right: 0;
    }

.library-tab-btn-highlight {
    background-color: #FAFEFF;
    color: #00A1E4;
}

.books-container {
    width: 100%;
    height: -webkit-calc(100% - 38px);
    height: calc(100% - 38px);
    background-color: #FFF;
}

.library-shelves-container {
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    height: -webkit-calc(100% - 111px);
    height: calc(100% - 111px);
}

.library-shelf {
    width: 100%;
    position: relative;
}

    .library-shelf img {
        width: 100%;
        display: block;
    }

.book {
    width: 20%;
    bottom: 12%;
    position: absolute;
    z-index: 100;
}

    .book img {
        width: 70%;
        margin: 0 auto;
    }

.book-directory p {
    margin: 0 0 0 20%;
    padding: 0;
    width: 60%;
    color: #FFF;
    text-align: center;
}

.book-directory .library-num-children {
    position: absolute;
    top: 9.5%;
    font-style: italic;
    color: #BDEBFF;
}

.book-directory .library-directory-title {
    text-transform: uppercase;
    position: absolute;
    bottom: 12%;
}

.book-document {
    display: block;
    color: #FFF;
    text-transform: uppercase;
    height: 100%;
    bottom: 0;
}

    .book-document img {
        width: 56%;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        margin: auto;
    }

.book-document-title-container {
    background-color: rgba(46, 54, 65, 0.97);
    background-image: url(/daikincityweb/images/buildings/library/magnifying-glass.png);
    background-position: right bottom;
    background-repeat: no-repeat;
    width: 85%;
    height: 35%;
    position: absolute;
    bottom: 20%;
    margin-left: 7.5%;
    z-index: 10;
}

    .book-document-title-container p {
        width: 90%;
        text-align: center;
        font-size: 1.1em;
        line-height: 1.4em;
        margin: 7% 0 0 5%;
        word-wrap: break-word;
    }

.library-shelf .book:nth-child(2) {
    left: 0%;
}

.library-shelf .book:nth-child(3) {
    left: 20%;
}

.library-shelf .book:nth-child(4) {
    left: 40%;
}

.library-shelf .book:nth-child(5) {
    left: 60%;
}

.library-shelf .book:nth-child(6) {
    left: 80%;
}

.libraryBreadcrumbs {
    padding: 1.5%;
}

.libraryDirectoryTitle {
    padding-left: 1.5%;
}

.library-breadcrumb-btn {
    float: left;
    color: #00A1E4;
    margin: 0 6px 0 0;
    font-size: 14px;
}

.communications-center {
    background-image: url(/daikincityweb/images/buildings/communications-center/communications.jpg);
    background-repeat: no-repeat;
    background-size: contain;
    position: relative;
}

    .communications-center h2 {
        text-align: center;
        padding-top: 5%;
        font-size: 2em;
        font-weight: 800;
    }

        .communications-center h2 span {
            color: #000;
        }

    .communications-center .communications-btn {
        position: absolute;
        width: 18.1%;
        height: 17.64%;
    }

        .communications-center .communications-btn img {
            width: 100%;
            height: 100%;
        }

    .communications-center .youtube-btn {
        left: 61.4%;
        top: 18.2%;
    }

    .communications-center .contact-btn {
        left: 61.4%;
        top: 38.25%;
    }

.youtube-container {
    padding: 10px;
    background-color: #FFF;
}

    .youtube-container .youtube-video {
        width: 100%;
        height: -webkit-calc(100% - 32px);
        height: calc(100% - 32px);
        clear: both;
    }

    .youtube-container .youtube-close-btn {
        background-image: url(/daikincityweb/images/youtube-close-btn.gif);
        width: 36px;
        height: 36px;
        float: right;
        margin-bottom: 4px;
    }

#billboard {
    position: absolute;
    width: 14%;
    height: 14%;
    top: 45.2%;
    left: 75.25%;
}

.billboard-poster {
    display: block;
    position: absolute;
}

#residenceApplication {
}

.residenceContainer {
    background-color: #FFF;
    position: relative;
}

    .residenceContainer h1 {
        height: 75px;
        line-height: 40px;
        float: left;
    }

.residenceScreen {
    background-color: #f0fbfe;
    overflow: auto;
    position: absolute;
    top: 75px;
    left: 20px;
    padding: 64px 30px 30px 30px;
    width: -webkit-calc(100% - 100px);
    width: calc(100% - 100px);
    height: -webkit-calc(100% - 189px);
    height: calc(100% - 189px);
}

    .residenceScreen h3 {
        font-size: 18px;
        font-weight: normal;
        padding-bottom: 0px;
    }

    .residenceScreen .col50:first-child {
        width: 47.5%;
        padding-right: 2.5%;
    }

.divide {
    margin: 2% 0 3% 0;
    height: 1px;
    background-color: #9CD4EE;
}

.option {
    width: 100%;
    overflow: auto;
    min-height: 28px;
    margin-bottom: 1%;
}

    .option p {
        margin: 0;
        line-height: 45px;
        font-size: 14px;
    }

    .option select {
        height: 28px;
    }

.col50 {
    width: 50%;
    float: left;
}

.residenceImg {
    width: 85%;
    display: block;
    margin: -5% auto 0 auto;
}

.residenceNavButtons {
    clear: both;
    float: right;
    margin-top: 2.5%;
}

.defaultSelect > option:first-child {
    display: none;
}

.home-slider {
    width: 100%;
    height: 8px;
    background-color: #4D545D;
    border-radius: 4px;
    margin-bottom: 2.5%;
}

.home-slider-highlight {
    position: absolute;
    top: 1px;
    left: 1px;
    height: 6px;
    border-radius: 3px;
}

.slider-highlight-blue {
    background: #40c8f4;
    background: -moz-linear-gradient(left, #40c8f4 25%, #0180cd 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(25%,#40c8f4), color-stop(100%,#0180cd));
    background: -webkit-linear-gradient(left, #40c8f4 25%,#0180cd 100%);
    background: -o-linear-gradient(left, #40c8f4 25%,#0180cd 100%);
    background: -ms-linear-gradient(left, #40c8f4 25%,#0180cd 100%);
    background: linear-gradient(to right, #40c8f4 25%,#0180cd 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#40c8f4', endColorstr='#0180cd',GradientType=1 );
}

.slider-highlight-red {
    background: #d70353;
    background: -moz-linear-gradient(left, #d70353 25%, #d70353 25%, #8e0199 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(25%,#d70353), color-stop(25%,#d70353), color-stop(100%,#8e0199));
    background: -webkit-linear-gradient(left, #d70353 25%,#d70353 25%,#8e0199 100%);
    background: -o-linear-gradient(left, #d70353 25%,#d70353 25%,#8e0199 100%);
    background: -ms-linear-gradient(left, #d70353 25%,#d70353 25%,#8e0199 100%);
    background: linear-gradient(to right, #d70353 25%,#d70353 25%,#8e0199 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d70353', endColorstr='#8e0199',GradientType=1 );
}

.sliderInfo {
    width: 100%;
    color: #00A1E4;
    overflow: hidden;
    font-size: 14px;
}

    .sliderInfo .sliderLabel {
        float: left;
    }

    .sliderInfo .sliderValue {
        float: right;
    }

#residenceRates .home-slider {
    background-color: #FFF;
}

.handle {
    margin-top: -8px;
    width: 24px;
}

    .handle p {
        color: #FFF;
        background: #5a5b5b;
        text-align: center;
        font-size: 12px;
        margin: 0 0 0 -50%;
        display: inline-block;
        padding: 4px 16px;
        border-radius: 4px;
    }

input, select {
    height: 28px;
    margin: 8px 0 9px 0;
    padding: 0;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border: 1px solid #b8b8b8;
    box-shadow: inset 0px 1px 2px #e0e0df;
    background: #fcfcfa;
    background: -moz-linear-gradient(top, #ffffff 0%, #f0eee8 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#f0eee8));
    background: -webkit-linear-gradient(top, #ffffff 0%,#f0eee8 100%);
    background: -o-linear-gradient(top, #ffffff 0%,#f0eee8 100%);
    background: -ms-linear-gradient(top, #ffffff 0%,#f0eee8 100%);
    background: linear-gradient(to bottom, #ffffff 0%,#f0eee8 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f0eee8',GradientType=0 );
}

option {
    background: #fcfcfa;
}

#residenceAboutSystem .residenceNavButtons, #residenceRates .residenceNavButtons {
    float: none;
    text-align: center;
}

.nextBtn {
    background-image: url(/daikincityweb/images/next-btn.png);
    background-repeat: no-repeat;
    width: 91px;
    height: 28px;
}

    .nextBtn:hover {
        background-position: 0 -28px;
    }

.previousBtn {
    background-image: url(/daikincityweb/images/back-btn.png);
    background-repeat: no-repeat;
    width: 91px;
    height: 28px;
}

    .previousBtn:hover {
        background-position: 0 -28px;
    }

.refreshBtn {
    background-image: url(/daikincityweb/images/refresh-btn.png);
    background-repeat: no-repeat;
    width: 90px;
    height: 28px;
}

    .refreshBtn:hover {
        background-position: 0 -28px;
    }

#residenceRates h3 {
    margin-top: -2%;
}

.rateContainer {
    margin-top: 3%;
    overflow: hidden;
    height: 75%;
}

.rateConfiguration {
    width: 32%;
    height: 100%;
    margin-right: 2%;
    float: left;
    background-color: #2E3641;
    position: relative;
}

    .rateConfiguration canvas {
        display: block;
        width: 70%;
        margin: 5% auto 5% auto;
    }

    .rateConfiguration .home-slider {
        width: 75%;
    }

.rateConfigurationValues {
    color: #FFF;
    position: absolute;
    text-align: center;
    top: 20%;
    width: 100%;
    font-size: 12px;
}

    .rateConfigurationValues p {
        margin: 0;
    }

.rateType {
    text-transform: uppercase;
    font-weight: bold;
    font-size: 14px;
    color: #FFB847;
}

.rateValue {
    font-size: 48px;
    font-weight: bold;
}

.rateConfiguration .home-slider {
    margin: 0 auto;
}

.rateConfiguration:last-child {
    margin-right: 0;
}

.gas {
    color: #5EC6F1;
}

.oil {
    color: #88d86C;
}

.residenceIndicatorContainer {
    float: right;
    overflow: hidden;
    margin-top: 9px;
}

.residenceIndicator {
    border-radius: 50%;
    width: 14px;
    height: 14px;
    background-color: #DBDBDB;
    float: left;
    margin-right: 6px;
}

.residenceIndicatorSelected {
    background-color: #00A1E4;
}

#residenceSavings.residenceScreen {
    padding: 0;
    width: -webkit-calc(100% - 40px);
    width: calc(100% - 40px);
    height: -webkit-calc(100% - 95px);
    height: calc(100% - 95px);
    background-color: #FFF;
}

.residenceSavingsLeft {
    width: -webkit-calc(35% - 20px);
    width: calc(35% - 20px);
    margin-right: 20px;
    height: 100%;
    float: left;
    background-color: #E1F6FF;
    position: relative;
}

.residenceSavingsRight {
    width: 65%;
    height: 100%;
    float: left;
    background-color: #E1F6FF;
    overflow: hidden;
}

.residenceSavingsLeft .residenceNavButtons {
    position: absolute;
    text-align: center;
    width: 100%;
    bottom: 20px;
}

.accordion {
    width: 100%;
    list-style: none;
    padding: 0;
    margin: 0;
}

.accordionContent {
    overflow: hidden;
}

.accordion li {
    width: 100%;
    height: 44px;
    margin-bottom: 1px;
    overflow: hidden;
    display: block;
}

    .accordion li .menuTitle {
        width: -webkit-calc(100% - 35px);
        width: calc(100% - 35px);
        background-color: #007FCC;
        line-height: 44px;
        font-size: 12px;
        color: #FFF;
        margin: 0;
    }

.accordionContent div:first-child {
    overflow: hidden;
}

    .accordionContent div:first-child * {
        float: left;
    }

#webBuilding {
    background-size: contain;
    text-align: center;
}

.webLinksModal {
    text-align: left;
    height: 280px;
    display: inline-block;
    margin-top: 18%;
    box-shadow: 0px 0px 32px 0px rgba(0, 0, 0, 0.75);
}

.linksContainer {
    overflow: hidden;
    height: 100%;
    background-color: #FFF;
}

.modalTitle {
    float: left;
    width: 300px;
    height: 100%;
    background-color: #2798DE;
    position: relative;
}

    .modalTitle h2 {
        color: #FFF;
        padding: 12%;
        font-size: 27px;
    }

#webLinkIcon {
    position: absolute;
    bottom: 40px;
    right: 30px;
}

.web-link-info {
    position: relative;
    float: left;
    background-color: #FFF;
    width: 335px;
    height: -webkit-calc(100% - 40px);
    height: calc(100% - 40px);
    margin: 20px 0;
    border-right: 1px solid #A6D7EF;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

    .web-link-info h4 {
        margin: 0 0 0 30px;
        text-transform: capitalize;
        font-weight: normal;
    }

.linksContainer .web-link-info:last-child {
    border: none;
}

.web-link-info p {
    margin: 0 0 0 30px;
    font-size: 14px;
    width: 85%;
}

.web-link-button {
    display: block;
    width: 163px;
    height: 38px;
    background-image: url(/daikincityweb/images/launch-btn.png);
    margin: 0 auto;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

    .web-link-button:hover {
        background-position: 0 -38px;
    }

/*Override default google styles*/
.google-visualization-tooltip {
    border: none !important;
    border-radius: 4px !important;
    background-color: #2E3641 !important;
    color: #FFF !important;
    box-shadow: none !important;
    -moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
    margin: 15px 0 0 -42px;
}

#cookie-message {
    background-color:rgba(255,0,0,0.2); 
	padding:5px 0px; 
	width:100%;
	position: absolute;
	bottom: 0px;
	left: 0px;
}


#closeCookieMessageBtn{
	float: right;
	padding-right:10px;
}