.long-scroll {
    font-family: Tahoma, Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: lighter;
    color: #ffffff;
    text-align: center;
    background: #0097db;
}

.long-scroll h1,
.long-scroll h2,
.long-scroll h3,
.long-scroll h4,
.long-scroll h5,
.long-scroll h6 {
    font-family: omnes_mediumregular, Helvetica, Arial, sans-serif;
    font-weight: normal;
    margin: 0;
}

.long-scroll h1 {
    font-size: 80px;
    line-height: 72px;
}

.long-scroll h2 {
    font-size: 42px;
    line-height: 35px;
}

#viewport {
    position: relative;
    width: 100%;
    height: 6850px;
    overflow: hidden;
    background: #0097db url(../images/repeat.png) repeat-x;
}

#main {
    position: relative;
    left: 50%;
    margin-left: -1000px;
    /*margin: 0 auto;*/
    width: 2000px;
    height: 7030px;
}

/* generic */

.text-holder {
    display: block;
    position: absolute;
    left: 50%;
    margin-left: -300px;
    width: 600px;
}

.text {
    /*position: absolute;*/
    display: block;
}

.object-text {
    position: relative;
    display: block;
}

.heading h2 {
    margin-bottom: 25px;
}

.button {
    display: block;
    font-size: 18px;
    line-height: 40px;
    text-align: center;
    left: 50%;
    margin-left: -87px;
    cursor: pointer;
}

.sprite,
.anisprite {
    position: absolute;
    background-repeat: no-repeat;
    z-index: 10;
}

/* map */
#map-open {
    position: fixed;
    bottom: 240px;
    right: 50px;
    cursor: pointer;
}

#map-holder {
    position: fixed;
    bottom: 240px;
    right: -740px;
    width: 515px;
    height: 403px;
}

#map {
    position: absolute;
    top: 0;
    right: -225px;
}

.marker {
    position: absolute;
    cursor: pointer;
}

#evaporation-marker {
    left: 363px;
    top: 287px;
}

#condensation-marker {
    left: 365px;
    top: 115px;
}

#precipitation-marker {
    left: 158px;
    top: 16px;
}

#runoff-marker {
    left: 210px;
    top: 245px;
}

#map-close {
    position: absolute;
    top: -25px;
    left: 25px;
    cursor: pointer;
    z-index: 99999;
}

/* nav */
#nav-section {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 100px;
    height: 180px;
}

#nav-down {
    margin-top: 90px;
}

.nav-button {
    cursor: pointer;
}

/* background */

.main-background {
    position: absolute;
    left: 50%;
    top: 0;
    margin-left: -1000px;
    width: 2000px;
    height: 6730px;
    z-index: 1;
}

.main-background .slice {
    width: 100%;
    height: 1346px;
}

.main-background .one {
    background-image: url(../images/background_01.png);
}

.main-background .two {
    background-image: url(../images/background_02.png);
}

.main-background .three {
    background-image: url(../images/background_03.png);
}


.main-background .four {
    background-image: url(../images/background_04.png);
}


.main-background .five {
    background-image: url(../images/background_05.png);
}


/* layers */
/* default is 10 */
.layer-midground.back {
    z-index: 15;
}
.layer-midground {
    z-index: 20;
}
.layer-midground.front {
    z-index: 25;
}

.layer-foreground {
    z-index: 30;
}

.layer-cloud.back {
    z-index: 42;
}
.layer-cloud {
    z-index: 45;
}
.layer-cloud.front {
    z-index: 48;
}

.layer-ui.back {
    z-index: 98;
}
.layer-ui {
    z-index: 100;
}

.layer-ui.front {
    z-index: 110;
}

#map-section .sprite,
#nav-section .sprite,
#intro-section .sprite,
#evaporation-section .sprite,
#again-section .sprite {
    background-image:url(../images/sprite0.png);
}
.button {width:174px; height:40px; background-position: -299px -652px}
.cloud1 {width:489px; height:137px; background-position: -1280px -362px}
.cloud2 {width:554px; height:178px; background-position: -1280px -182px}
.cloud3 {width:723px; height:150px; background-position: -1043px -501px}
.cloud4 {width:554px; height:178px; background-position: -1280px -2px}
.down {width:97px; height:97px; background-position: -200px -584px}
.down2 {width:97px; height:97px; background-position: -101px -584px}
.map {width:695px; height:403px; background-position: -583px -2px}
.map-close {width:45px; height:47px; background-position: -385px -584px}
.marker0 {width:41px; height:66px; background-position: -342px -584px}
.marker1 {width:41px; height:66px; background-position: -299px -584px}
.sun {width:579px; height:580px; background-position: -2px -2px}
.up {width:97px; height:97px; background-position: -2px -584px}
.vapours1 {width:239px; height:288px; background-position: -583px -407px}
.vapours2 {width:217px; height:239px; background-position: -824px -407px}

#condensation-section .sprite {
    background-image:url(../images/sprite1.png);
}
.bigcloud-left {width:1605px; height:447px; background-position: -1320px -2px}
.bigcloud-right {width:1338px; height:407px; background-position: -1486px -451px}
.bigcloud2-left {width:1316px; height:498px; background-position: -2px -2px}
.bigcloud2-right {width:1482px; height:487px; background-position: -2px -502px}
.darkcloud1 {width:724px; height:152px; background-position: -1486px -860px}
.darkcloud2 {width:461px; height:140px; background-position: -2212px -860px}

#precipitation-section .sprite {
    background-image:url(../images/sprite2.png);
}
.cloud5 {width:371px; height:96px; background-position: -484px -974px}
.cloud6 {width:480px; height:124px; background-position: -2px -974px}
.darkcloud3 {width:168px; height:51px; background-position: -2px -1100px}
.darkcloud4 {width:180px; height:38px; background-position: -2px -1153px}
.mountains-left {width:1277px; height:735px; background-position: -933px -2px}
.mountains-right {width:1261px; height:622px; background-position: -933px -739px}
.stream {width:929px; height:970px; background-position: -2px -2px}

/* animated sprites */
.anisprite {
    display: block;
    background-repeat: no-repeat;
    background-position: 0px 0px;
}

.anisprite.plane {
    background-image: url('../images/ani/plane.png');
    width: 659px;
    height: 155px;
}

.anisprite.boat {
    background-image: url('../images/ani/boat.png');
    width: 245px;
    height: 280px;
}

.anisprite.orb {
    background-image: url('../images/ani/orb.png');
    width: 63px;
    height: 63px;
}

.anisprite.umbrella {
    background-image: url('../images/ani/umbrella.png');
    width: 172px;
    height: 320px;
}

.anisprite.snowcloud {
    background-image: url('../images/ani/snowcloud.png');
    width: 336px;
    height: 272px;
}

.anisprite.sign {
    background-image: url('../images/ani/sign.png');
    width: 160px;
    height: 183px;
}

.anisprite.water {
    background-image: url('../images/ani/water.png');
    width: 600px;
    height: 240px;
}

/* sections */
.position {
    position: absolute;
}
#intro-section .position {
    top: -135px;
}

#evaporation-section .position {
    top: 880px;
}

#condensation-section .position {
    top: 2000px;
}

#precipitation-section .position {
    top: 3090px;
}

#runoff-section .position {
    top: 4150px;
}

#again-section .position {
    top: 5720px;
}

/* positioning */

/* intro */

#cloud1 {
    left: 310px;
    top: 73px;
}

#cloud2 {
    left: 1273px;
    top: 164px;
}

#cloud3 {
    left: 200px;
    top: 736px;
}

#intro-text-holder {
    top: 95px;
    width: 580px;
    margin-left: -290px;
}

#intro-heading {
}

#intro-text {
    margin-top: 20px;
}

#intro-scroll-text {
    margin-top: 20px;
}

#down-holder {
    position: absolute;
    margin-top: 20px;
    left: 50%;
    margin-left: -49px;
}

#down {
    position: absolute;
    cursor: pointer;
}

#down2 {
    position: absolute;
}

/* evaporation */

#cloud4 {
    left: 1305px;
    top: 1036px;
}

#cloud5 {
    left: 105px;
    top: 1159px;
}

#sun-container {
    position: absolute;
    top: 955px;
    width: 100%;
    height: 920px;
    overflow: hidden;
}

#sun {
    left: 710px;
    /*top: 955px;*/
    top: 0px;
}

#sun .inner {
    padding: 175px 110px 100px 110px;
}

#vapours1 {
    left: 627px;
    /*top: 1341px;*/
    top: 1470px;
}

#vapours2 {
    left: 1164px;
    /*top: 1418px;*/
    top: 1550px;
}

/* we need the class like this to properly override the background image */
#evaporation-section #background-waves {
    left: -500px;
    top: 1818px;

    /*this tweens side to side some, so it repeats and it's bigger than its natural size*/
    background-image: url(../images/background-waves.png);
    background-repeat: repeat-x;

    width: 2500px;
    height:136px;
}

#boat {
    left: 885px;
    top: 1611px;
}

#boat-orb {
    left: 120px;
    top: 100px;
}

/* we need the class like this to properly override the background image */
#evaporation-section #foreground-waves {
    left: -500px;
    top: 1843px;

    /*this tweens side to side some, so it repeats and it's bigger than its natural size*/
    background-image: url(../images/foreground-waves.png);
    background-repeat: repeat-x;

    width: 2500px;
    height:136px;
}

/* condensation */
#bigcloud-left {
    left: -260px;
    top: 2025px;
}

#bigcloud-left .inner {
    padding: 215px 50px 20px 900px;
}

#bigcloud-right {
    left: 896px;
    top: 2036px;
}

#darkcloud1 {
    left: 1510px;
    top: 2428px;
}

#plane {
    left: 750px;
    top: 2515px;
}

#darkcloud2 {
    left: 387px;
    top: 2610px;
}

#bigcloud2-right {
    left: 845px;
    top: 2796px;
}

#bigcloud2-left {
    left: -50px;
    top: 2785px;
}

/* precipitation */
#precipitation-text-holder {
    top: 3325px;
}

#precipitation-heading {
}

#precipitation-text {
}

#darkcloud3 {
    left: 1410px;
    top: 3305px;
}

#darkcloud4 {
    left: 210px;
    top: 3305px;
}

#umbrella {
    left: 915px;
    top: 3500px;
}

#umbrella-orb {
    left: 40px;
    top: 45px;
}

#snowcloud1 {
    left: 420px;
    top: 3455px;
}

#snowcloud2 {
    left: 1210px;
    top: 3455px;
}

#mountains-left {
    left: -144px;
    top: 3545px;
}

#mountains-right {
    left: 935px;
    top: 3557px;
}

#stream {
    left: 572px;
    top: 3790px;
}

/* runoff */
#runoff-text-holder {
    top: 4740px;
}

#runoff-heading {
}

#runoff-text {
}

#sign1 {
    left: 622px;
    top: 4340px;
}

#sign1-orb {
    left: 38px;
    top: 18px;
}

#sign2 {
    left: 1210px;
    top: 4860px;
}

#sign2-orb {
    left: 38px;
    top: 18px;
}

#water {
    left: 693px;
    top: 5395px;
}

/* again */

#cloud8 {
    left: 1305px;
    top: 5990px;
}

#cloud9 {
    left: 105px;
    top: 6120px;
}

#sun2-container {
    position: absolute;
    top: 5890px;
    width: 100%;
    height: 920px;
    overflow: hidden;
}

#sun2 {
    left: 710px;
    /*top: 5890px;*/
    top: 0px;
}

#sun2 .inner {
    padding: 135px 80px 100px 90px;
}

#again-heading h2 {
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
}

#start-again-button {
    margin-top: 20px;
}

#play-the-game-button {
    margin-top: 80px;
}

#play-the-game-button a {
    text-decoration: none;
    color: #FFFFFF;
}

#vapours3 {
    left: 627px;
    /*top: 1341px;*/
    top: 6360px;
}

#vapours4 {
    left: 1164px;
    /*top: 1418px;*/
    top: 6420px;
}

/* we need the class like this to properly override the background image */
#again-section #background-waves2 {
    left: -500px;
    top: 6698px;

    /*this tweens side to side some, so it repeats and it's bigger than its natural size*/
    background-image: url(../images/background-waves.png);
    background-repeat: repeat-x;

    width: 2500px;
    height:136px;
}

#boat2 {
    left: 885px;
    top: 6493px;
}

#boat2-orb {
    left: 120px;
    top: 100px;
}

/* we need the class like this to properly override the background image */
#again-section #foreground-waves2 {
    left: -500px;
    top: 6730px;

    /*this tweens side to side some, so it repeats and it's bigger than its natural size*/
    background-image: url(../images/foreground-waves.png);
    background-repeat: repeat-x;

    width: 2500px;
    height:136px;
}

/* iPad landscape */
@media only screen and (max-width: 1024px) {
    body {
        font-size: 18px;
        font-weight: normal;
    }

    .main-background {
        width: 1024px;
        margin-left: -512px;
    }

    .main-background .slice {
        height: 2243px;
    }

    .main-background .one {
        background-image: url(../images/background-1024_01.png);
    }

    .main-background .two {
        background-image: url(../images/background-1024_02.png);
    }

    .main-background .three {
        background-image: url(../images/background-1024_03.png);
    }

    .main-background .four,
    .main-background .five {
        display:none;
        background-image: none;
    }
}

/* iPad portrait */
@media only screen and (max-width: 768px) {
    body {
        font-size: 18px;
        font-weight: normal;
    }

    .main-background {
        width: 768px;
        margin-left: -384px;
    }

    .main-background .slice {
        height: 3365px;
    }

    .main-background .one {
        background-image: url(../images/background-768_01.png);
    }

    .main-background .two {
        background-image: url(../images/background-768_02.png);
    }

    .main-background .four,
    .main-background .five,
    .main-background .three {
        display:none;
        background-image: none;
    }
}

@media only screen and (min-width: 2000px) {
    #evaporation-section #background-waves,
    #again-section #background-waves2 {
        left: -500px;
        width: 3500px;
    }

    #evaporation-section #foreground-waves,
    #again-section #foreground-waves2 {
        left: -500px;
        width: 3500px;
    }

}

@font-face {
    font-family: 'OmnesMedium';
    src: url('../../fonts/omnes-medium-webfont.eot');
    src: url('../../fonts/omnes-medium-webfont.eot?iefix') format('eot'),
    url('../../fonts/omnes-medium-webfont.woff') format('woff'),
    url('../../fonts/omnes-medium-webfont.ttf') format('truetype'),
    url('../../fonts/omnes-medium-webfont.svg#webfontiTNCx0cG') format('svg');
    font-style: normal;
}