/* styles for Guide section */

/* page containers with Background images */
@media only screen and (max-device-width: 480px) {
    .mobile-background {
        background-color: #474d4f !important;
        background-image: none !important;
    }
}

div#WhiteBackground {
    width: 100%;
    background-color: White;
    z-index: -1;
}

div#HealthEffects {
    background-image: url('/LondonAir/Images/Guide/HealthEffects-L.jpg');
    background-color: #474d4f;
    background-repeat: no-repeat;
    min-height: 628px;
    height: auto !important;
    _height: 628px;
    z-index: 0;
    overflow: hidden;
    background-size: 100%;
}

div#signpost {
    width: 100%;
    background-image: url('/LondonAir/Images/Guide/signpost.jpg');
   /* background-color: White; */
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center top;
    min-height: 562px;
    height: auto !important;
    _height: 562px;
    z-index: 0;
    overflow: hidden;
}

div#ShortTermEffects {
    width: 100%;
    background-image: url('/LondonAir/Images/Guide/ShortTermEffects.jpg');
    background-color: #474d4f;
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center top;
    min-height: 670px;
    height: auto !important;
    _height: 670px;
    z-index: 0;
    overflow: hidden;
}

div#LongTermEffects {
    width: 100%;
    background-image: url('/LondonAir/Images/Guide/LongTermEffects.jpg');
    background-color: #474d4f;
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center top;
    min-height: 580px;
    height: auto !important;
    _height: 580px;
    z-index: 0;
    overflow: hidden;
}

div#GuideIn30Seconds {
    width: 100%;
    background-image: url('/LondonAir/Images/Guide/GuideIn30Seconds.jpg');
    background-color: #474d4f;
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center top;
    min-height: 580px;
    height: auto !important;
    _height: 580px;
    z-index: 0;
    overflow: hidden;
}

div#ActionsOverview {
    width: 100%;
    background-image: url('/LondonAir/Images/Guide/ActionsOverview.jpg');
    background-color: #474d4f;
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center top;
    min-height: 580px;
    height: 100% !important;
    _height: 580px;
    z-index: 0;
    overflow: hidden;
}

div#AirQualityBands {
    width: 100%;
    background-image: url('/LondonAir/Images/Guide/AirQualityBands.jpg');
    background-color: #474d4f;
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center top;
    min-height: 580px;
    height: auto !important;
    _height: 580px;
    z-index: 0;
    overflow: hidden;
}

div#BusyRoad {
    width: 100%;
    background-image: url('/LondonAir/Images/Guide/BusyRoad.jpg');
    background-color: #474d4f;
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center top;
    min-height: 580px;
    height: auto !important;
    _height: 580px;
    z-index: 0;
    overflow: hidden;
}

div#CanImonitor {
    width: 100%;
    background-image: url('/LondonAir/Images/Guide/CanImonitor.jpg');
    background-color: #474d4f;
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center top;
    min-height: 580px;
    height: auto !important;
    _height: 580px;
    z-index: 0;
    overflow: hidden;
}

div#ClimateChange {
    width: 100%;
    background-image: url('/LondonAir/Images/Guide/ClimateChange.jpg');
    background-color: #474d4f;
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center top;
    min-height: 580px;
    height: auto !important;
    _height: 580px;
    z-index: 0;
    overflow: hidden;
}

div#Episodes {
    width: 100%;
    background-image: url('/LondonAir/Images/Guide/Episodes.jpg');
    background-color: #474d4f;
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center top;
    min-height: 580px;
    height: auto !important;
    _height: 580px;
    z-index: 0;
    overflow: hidden;
}

div#Exercise {
    width: 100%;
    background-image: url('/LondonAir/Images/Guide/Exercise.jpg');
    background-color: #474d4f;
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center top;
    min-height: 650px;
    height: auto !important;
    _height: 650px;
    z-index: 0;
    overflow: hidden;
}

div#Fireworks {
    width: 100%;
    background-image: url('/LondonAir/Images/Guide/Fireworks.jpg');
    background-color: #474d4f;
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center top;
    min-height: 580px;
    height: auto !important;
    _height: 580px;
    z-index: 0;
    overflow: hidden;
}

div#FirstOzone {
    width: 100%;
    background-image: url('/LondonAir/Images/Guide/FirstOzone.jpg');
    background-color: #474d4f;
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center top;
    min-height: 580px;
    height: auto !important;
    _height: 580px;
    z-index: 0;
    overflow: hidden;
}

div#GettingInformation {
    width: 100%;
    background-image: url('/LondonAir/Images/Guide/GettingInformation.jpg');
    background-color: #474d4f;
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center top;
    min-height: 580px;
    height: auto !important;
    _height: 580px;
    z-index: 0;
    overflow: hidden;
}

div#GovernmentAction {
    width: 100%;
    background-image: url('/LondonAir/Images/Guide/GovernmentAction.jpg');
    background-color: #474d4f;
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center top;
    min-height: 528px;
    height: auto !important;
    _height: 528px;
    z-index: 0;
    overflow: hidden;
}

div#IndoorHealth {
    width: 100%;
    background-image: url('/LondonAir/Images/Guide/IndoorHealth.jpg');
    background-color: #474d4f;
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center top;
    min-height: 580px;
    height: auto !important;
    _height: 580px;
    z-index: 0;
    overflow: hidden;
}

div#London {
    width: 100%;
    background-image: url('/LondonAir/Images/Guide/London.jpg');
    background-color: #474d4f;
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center top;
    min-height: 580px;
    height: auto !important;
    _height: 580px;
    z-index: 0;
    overflow: hidden;
}

div#LondonHistory {
    width: 100%;
    background-image: url('/LondonAir/Images/Guide/LondonHistory.jpg');
    background-color: #474d4f;
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center top;
    min-height: 580px;
    height: auto !important;
    _height: 580px;
    z-index: 0;
    overflow: hidden;
}

div#Monitoring {
    width: 100%;
    background-image: url('/LondonAir/Images/Guide/Monitoring.jpg');
    background-color: #474d4f;
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center top;
    min-height: 580px;
    height: auto !important;
    _height: 580px;
    z-index: 0;
    overflow: hidden;
}

div#MyActionsForOthers {
    width: 100%;
    background-image: url('/LondonAir/Images/Guide/MyActionsForOthers.jpg');
    background-color: #474d4f;
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center top;
    min-height: 580px;
    height: auto !important;
    _height: 580px;
    z-index: 0;
    overflow: hidden;
}

div#MyActionsForMe {
    width: 100%;
    background-image: url('/LondonAir/Images/Guide/MyActionsForMe.jpg');
    background-color: #474d4f;
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center top;
    min-height: 580px;
    height: auto !important;
    _height: 580px;
    z-index: 0;
    overflow: hidden;
}

div#ObjectivesForHealth {
    width: 100%;
    background-image: url('/LondonAir/Images/Guide/ObjectivesForHealth.jpg');
    background-color: #474d4f;
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center top;
    min-height: 580px;
    height: auto !important;
    _height: 580px;
    z-index: 0;
    overflow: hidden;
}

div#SensitiveEffects {
    width: 100%;
    background-image: url('/LondonAir/Images/Guide/SensitiveEffects.jpg');
    background-color: #474d4f;
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center top;
    min-height: 580px;
    height: auto !important;
    _height: 580px;
    z-index: 0;
    overflow: hidden;
}

div#SportsDay {
    width: 100%;
    background-image: url('/LondonAir/Images/Guide/SportsDay.jpg');
    background-color: #474d4f;
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center top;
    min-height: 580px;
    height: auto !important;
    _height: 580px;
    z-index: 0;
    overflow: hidden;
}

div#SummerSmog {
    width: 100%;
    background-image: url('/LondonAir/Images/Guide/SummerSmog.jpg');
    background-color: #474d4f;
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center top;
    min-height: 580px;
    height: auto !important;
    _height: 580px;
    z-index: 0;
    overflow: hidden;
}

div#WhatIsCO {
    width: 100%;
    background-image: url('/LondonAir/Images/Guide/WhatIsCO.jpg');
    background-color: #474d4f;
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center top;
    min-height: 580px;
    height: auto !important;
    _height: 580px;
    z-index: 0;
    overflow: hidden;
}

div#WhatIsLAQN {
    width: 100%;
    background-image: url('/LondonAir/Images/Guide/WhatIsLAQN.jpg');
    background-color: #474d4f;
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center top;
    min-height: 580px;
    height: auto !important;
    _height: 580px;
    z-index: 0;
    overflow: hidden;
}

div#WhatIsNO2 {
    width: 100%;
    background-image: url('/LondonAir/Images/Guide/WhatIsNO2.jpg');
    background-color: #474d4f;
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center top;
    min-height: 580px;
    height: auto !important;
    _height: 580px;
    z-index: 0;
    overflow: hidden;
}

div#WhatIsO3 {
    width: 100%;
    background-image: url('/LondonAir/Images/Guide/WhatIsO3.jpg');
    background-color: #474d4f;
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center top;
    min-height: 580px;
    height: auto !important;
    _height: 580px;
    z-index: 0;
    overflow: hidden;
}

div#WhatIsPM {
    width: 100%;
    background-image: url('/LondonAir/Images/Guide/WhatIsPM.jpg');
    background-color: #474d4f;
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center top;
    min-height: 580px;
    height: auto !important;
    _height: 580px;
    z-index: 0;
    overflow: hidden;
}

div#WhatIsPollution {
    width: 100%;
    background-image: url('/LondonAir/Images/Guide/WhatIsPollution.jpg');
    background-color: #474d4f;
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center top;
    min-height: 580px;
    height: auto !important;
    _height: 580px;
    z-index: 0;
    overflow: hidden;
}

div#WhatIsSO2 {
    width: 100%;
    background-image: url('/LondonAir/Images/Guide/WhatIsSO2.jpg');
    background-color: #474d4f;
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center top;
    min-height: 580px;
    height: auto !important;
    _height: 580px;
    z-index: 0;
    overflow: hidden;
}

div#WhereShouldILive {
    width: 100%;
    background-image: url('/LondonAir/Images/Guide/WhereShouldILive.jpg');
    background-color: #e5e2dd;
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center top;
    min-height: 580px;
    height: auto !important;
    _height: 580px;
    z-index: 0;
    overflow: hidden;
}

div#WhyMonitor {
    width: 100%;
    background-image: url('/LondonAir/Images/Guide/WhyMonitor.jpg');
    background-color: #474d4f;
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center top;
    min-height: 580px;
    height: auto !important;
    _height: 580px;
    z-index: 0;
    overflow: hidden;
}

div#WinterSmog {
    width: 100%;
    background-image: url('/LondonAir/Images/Guide/WinterSmog.jpg');
    background-color: #474d4f;
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center top;
    min-height: 580px;
    height: auto !important;
    _height: 580px;
    z-index: 0;
    overflow: hidden;
}

div#WorstPlace {
    width: 100%;
    background-image: url('/LondonAir/Images/Guide/WorstPlace.jpg');
    background-color: #474d4f;
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center top;
    min-height: 580px;
    height: auto !important;
    _height: 580px;
    z-index: 0;
    overflow: hidden;
}

div#WoodBurning {
    width: 100%;
    background-image: url('/LondonAir/Images/Guide/WoodBurning.jpg');
    background-color: #474d4f;
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center top;
    min-height: 650px;
    height: auto !important;
    _height: 650px;
    z-index: 0;
    overflow: hidden;
}

/* ###########   Guide text - standard  version ##############   */
div#GuideTextLight {
    height: 100%;
    background-color: #fbfbfb;
    padding: 10px;
    margin-bottom: 20px;
    position: relative;
    top: 10px;
    font-size: 1.2em;
    z-index: 5;
    /* for IE */
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=90)";
    filter: alpha(opacity=95);
    /* CSS3 standard */
    opacity: 0.9;
}

    div#GuideTextLight.guide-home {
        width: 100% !important;
        height: 100%;
        margin-left: 15px;
        /* for IE */
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=90)" !important;
        filter: alpha(opacity=95) !important; /* CSS3 standard */
        opacity: 0.9 !important;
    }


        div#GuideTextLight h2, div#GuideTextLight.guide-home h2 {
            font-size: 1.25em !important;
            text-transform: uppercase;
            margin: 15px 0 15px 0 !important;
            padding: 0 0 0 0 !important;
            color: #00275E;
            display: block;
           /* font-family: 'KingsBureauGrotThreeSeven', Arial, Helvetica, sans-serif; */
        }

        div#GuideTextLight p, div#GuideTextLight.guide-home p {
            font-size: 0.9em !important;
        }


        div#GuideTextLight a, div#GuideTextLight.guide-home a {
            color: #7b3400 !important;
            text-decoration: underline;
        }

            div#GuideTextLight a:hover, div#GuideTextLight a:focus, div#GuideTextLight.guide-home a:hover,
            div#GuideTextLight.guide-home a:focus {
                color: #366981 !important;
                /*background-color: #e4c87e !important;*/
            }


/* orange links box */
ul#TopicLinks {
    background-color: #e2e2e2;
    margin: 0;
    padding: 10px;
}

/* ordered list in aqbands*/
ol#steps {
    list-style: decimal !important;
    display: list-item !important;
}

    ol#steps li {
        display: list-item !important;
    }

/* guide nav */
div#GuideNavigation {
    background-color: #474f51;
    padding: 10px;
    width: 200px;
    margin: 10px auto;
    z-index: 5;
    color: White !important;
    /* for IE */
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=95)";
    filter: alpha(opacity=95);
    /* CSS3 standard */
    opacity: 0.95;
}

@media only screen and (min-width : 480px) {
    div#GuideNavigation {
        float: right;
    }
}



/* guide nav */

div#GuideNavigation ul#guidenav {
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    text-align: left;
}

    div#GuideNavigation ul#guidenav li {
        margin: 0 0 0 0;
        padding: 2px 0 2px 0;
        list-style-type: none;
    }

        div#GuideNavigation ul#guidenav li#home {
            margin: 0 0 0 0;
            padding: 5px 0 5px 0 !important;
        }

div#GuideNavigation img.home-icon {
    margin: 0 5px 0 0;
    float: left;
}

/* hyperlinks */

div#GuideNavigation ul#guidenav li a#guidehome {
    color: #ffffff;
    text-decoration: none;
    font-weight: normal;
    border: 0;
    /*xxfont-family: 'KingsBureauGrotThreeSeven', Arial, Helvetica, sans-serif; */
    text-transform: uppercase;
    font-size: 1.2em;
    padding: 8px 5px 8px 5px !important;
}

    div#GuideNavigation ul#guidenav li a#guidehome:hover,
    div#GuideNavigation ul#guidenav li a#guidehome:focus {
        cursor: pointer;
        color: #e4c87e;
    }

div#GuideNavigation ul#guidenav li h3 {
    color: #ffffff;
    text-decoration: none;
    font-weight: normal;
    font-size: 1.2em;
    border-left-width: 1px;
    border-left-style: solid;
    border-left-color: #FFF;
    padding: 5px !important;
    /* xxfont-family: 'KingsBureauGrotThreeSeven', Arial, Helvetica, sans-serif; */
    text-transform: uppercase;
}

    div#GuideNavigation ul#guidenav li h3:hover, div#GuideNavigation ul#guidenav li h3:focus {
        cursor: pointer;
        color: #e4c87e;
        border-left-color: #e4c87e;
    }

div#GuideNavigation ul.ItemContent li a {
    color: #ffffff;
    text-decoration: none;
    font-weight: normal;
    font-size: 0.9em !important;
    /*border-left-width: 1px; border-left-style: solid; border-left-color: #FFF; */
    font-family: Arial, Helvetica, sans-serif;
    text-transform: capitalize;
}

    div#GuideNavigation ul.ItemContent li a:hover, div#GuideNavigation ul.ItemContent li a:focus {
        cursor: pointer;
        color: #e4c87e;
    }


/* video pages */
.video-container {
    margin-bottom: 20px;
    text-align: center;
}


/* Long term graph page */
#GraphImage img {
    width: 98%;
}

#LongTermGraph {
    width: 80%;
    padding: 10px;
    margin: 10px;
    position: relative;
    font-size: larger;
    z-index: 5;
}

#Birth {
    position: absolute;
    left: 50px;
}

#Childhood {
    position: absolute;
    left: 100px;
}

#MiddleAge {
    position: absolute;
    left: 300px;
}

#OldAge {
    position: absolute;
    left: 500px;
}

#VeryOld {
    position: absolute;
    left: 650px;
}


#Birth {
    left: 5%;
}

#Childhood {
    left: 11%;
}

#MiddleAge {
    left: 35%;
}

#OldAge {
    left: 60%;
}

#VeryOld {
    left: 80%;
}


#GraphText {
    position: relative;
    top: 30px;
    min-height: 100px;
    height: auto;
    _height: 100px;
}

/* top video links */
div#GuideControl {
    margin: 0;
    padding: 5px 5px 5px 40px;
    background-color: #666;
    color: #fff;
    font-size: 1.1em;
    height: 25px;
    background: #666 url('../Images/Icons/video_icon.png') no-repeat scroll 5px 2px;
    vertical-align: middle;
}

    div#GuideControl a {
        display: inline;
        color: #fff;
        padding: 5px;
        font-weight: bold;
    }

        div#GuideControl a:hover, div#GuideControl a:focus {
            color: #e4c87e;
        }