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

.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: 8370px;*/
    height: 7580px;
    overflow: hidden;
    background: #0097db url(../images/repeat.png) repeat-x;
}

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

/* 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 {
    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;
    top: 240px;
    right: -732px;
    width: 580px;
    height: 401px;
}

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

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

#collection-marker {
    left: 196px;
    top: 128px;
}

#storage-marker {
    left: 62px;
    top: 143px;
}

#usage-marker {
    left: 236px;
    top: 210px;
}

#treatment-plant-marker {
    left: 380px;
    top: 136px;
}

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

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

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

.nav-button {
    cursor: pointer;
}

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

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

.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);
}

.main-background .six {
    background-image: url(../images/background_06.png);
}


/* layers */
/* default for a sprite 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-foreground.front {
    z-index: 33;
}

.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,
#again-section .sprite {
    background-image:url(../images/sprite0.png);
}
.button {width:174px; height:40px; background-position: -2px -2px}
.cloud1 {width:399px; height:129px; background-position: -608px -2px}
.cloud2 {width:877px; height:284px; background-position: -737px -178px}
.cloud3 {width:733px; height:237px; background-position: -2px -178px}
.cloud4 {width:537px; height:174px; background-position: -1009px -2px}
.cloud5 {width:877px; height:284px; background-position: -2px -464px}
.down {width:97px; height:97px; background-position: -509px -2px}
.down2 {width:97px; height:97px; background-position: -311px -2px}
.map {width:687px; height:401px; background-position: -881px -464px}
.map-close {width:45px; height:47px; background-position: -178px -2px}
.marker0 {width:41px; height:66px; background-position: -268px -2px}
.marker1 {width:41px; height:66px; background-position: -225px -2px}
.up {width:97px; height:97px; background-position: -410px -2px}

#collection-section .sprite,
#storage-section .sprite,
#treatment-plant-section .sprite {
    background-image:url(../images/sprite1.png);
}
.cloud6 {width:877px; height:284px; background-position: -2px -2px}
.cloud7 {width:730px; height:237px; background-position: -881px -2px}
.mountains-left {width:1172px; height:493px; background-position: -2px -288px}
.mountains-right {width:1632px; height:513px; background-position: -2px -783px}
.purplepipe {width:924px; height:124px; background-position: -2px -1298px}
.tanktop {width:261px; height:17px; background-position: -928px -1298px}
.valve {width:145px; height:146px; background-position: -1191px -1298px}

/*#intro-section .sprite.raincloud,*/
/*#collection-section .sprite.raincloud,*/
/*#storage-section .sprite.raincloud,*/
/*#usage-section .sprite.raincloud,*/
/*#treatment--section .sprite.raincloud,*/
/*#again-section .sprite.raincloud {*/
    /*background-image:url(../images/sprite-rainclouds.png)*/
/*}*/
/*.raincloud1 {width:536px; height:299px; background-position: -2px -2px}*/
/*.raincloud2 {width:583px; height:376px; background-position: -540px -2px}*/
/*.raincloud3 {width:661px; height:326px; background-position: -2px -380px}*/
/*.raincloud4 {width:612px; height:292px; background-position: -2px -708px}*/

/* override */
#again-section .sprite.mountains-left,
#again-section .sprite.mountains-right {
    background-image:url(../images/sprite1.png);
}

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

.anisprite.float {
    background-image: url('../images/ani/float.png');
    width: 250px;
    height: 150px;
}
.anisprite.raincloud {
    background-image: url('../images/ani/raincloud.png');
    width: 420px;
    height: 340px;
}
.anisprite.raincloud2 {
    background-image: url('../images/ani/raincloud2.png');
    width: 420px;
    height: 340px;
}
.anisprite.pipebulge {
    background-image: url('../images/ani/pipebulge.png');
    width: 190px;
    height: 548px;
}
.anisprite.tanklevel {
    background-image: url('../images/ani/tanklevel.png');
    width: 100px;
    height: 260px;
}
.anisprite.valve {
    background-image: url('../images/ani/valve.png');
    width: 145px;
    height: 146px;
}
.anisprite.sign2 {
    background-image: url('../images/ani/sign2.png');
    width: 112px;
    height: 159px;
}
/* usage */
.anisprite.bath {
    background-image: url('../images/ani/bath.png');
    width: 170px;
    height: 150px;
}
.anisprite.cake {
    background-image: url('../images/ani/cake.png');
    width: 80px;
    height: 102px;
}
.anisprite.gutter {
    background-image: url('../images/ani/gutter.png');
    width: 230px;
    height: 40px;
}
.anisprite.hose {
    background-image: url('../images/ani/hose.png');
    width: 130px;
    height: 90px;
}
.anisprite.shower {
    background-image: url('../images/ani/shower.png');
    width: 130px;
    height: 160px;
}
.anisprite.skateboarder {
    background-image: url('../images/ani/skateboarder.png');
    width: 115px;
    height: 125px;
}
.anisprite.toilet {
    background-image: url('../images/ani/toilet.png');
    width: 82px;
    height: 110px;
}
/* treatment-plant */
.anisprite.sign1 {
    background-image: url('../images/ani/sign1.png');
    width: 110px;
    height: 159px;
}
.anisprite.sign3 {
    background-image: url('../images/ani/sign3.png');
    width: 70px;
    height: 100px;
}
.anisprite.pipewater {
    background-image: url('../images/ani/pipewater.png');
    width: 460px;
    height: 220px;
}
.anisprite.float2 {
    background-image: url('../images/ani/float2.png');
    width: 250px;
    height: 150px;
}

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

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

#collection-section .position {
    top: 882px;
}

#storage-section .position {
    top: 2292px;
}

#usage-section .position {
    top: 3410px;
}

#treatment-plant-section .position {
    top: 4770px;
}

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

/* positioning */

/* intro */

#cloud1 {
    left: 235px;
    top: 150px;
}

#cloud2 {
    left: -350px;
    top: 560px;
}

#cloud3 {
    left: 270px;
    top: 795px;
}

#cloud4 {
    left: 1410px;
    top: 363px;
}

#cloud5 {
    left: 1545px;
    top: 600px;
}

#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,
#down2 {
    position: absolute;
    cursor: pointer;
}

/* collection */
#raincloud1 {
    left: 350px;
    top: 1170px;
}

#raincloud2 {
    left: 1200px;
    top: 965px;
}

#mountains-left {
    left: -200px;
    top: 1130px;
}

#mountains-right {
    left: 994px;
    top: 1108px;
}

#collection-text-holder {
    top: 1114px;
}

#float {
    left: 852px;
    top: 1630px;
}

/* storage */
#storage-text-holder {
    top: 2500px;
    width: 500px;
    margin-left: -250px;
}

#pipebulge {
    left: 910px;
    top: 1950px;
}

#tanktop {
    left: 872px;
    top: 2484px;
}

#tanklevel {
    left: 1153px;
    top: 2732px;
}

#valve {
    left: 931px;
    top: 3061px;
}

#sign2 {
    left: 696px;
    top: 2922px;
}

#cloud6 {
    left: -220px;
    top: 3496px;
}

#cloud7 {
    left: 1434px;
    top: 3173px;
}

#raincloud3 {
    left: 450px;
    top: 3330px;
}

#raincloud4 {
    left: 1015px;
    top: 3450px;
}

/* usage */
#usage-text-holder {
    top: 3630px;
    width: 500px;
    margin-left: -250px;
}

#usage-body-desktop #usage-text-1 {
    top: 3690px;
    width: 400px;
    margin-left: -200px;
}

#usage-body-desktop #usage-text-2 {
    top: 3718px;
    width: 400px;
    margin-left: -200px;
}

#usage-body-desktop #usage-text-3 {
    top: 3745px;
    width: 440px;
    margin-left: -220px;
}

#bath {
    left: 760px;
    top: 3870px;
}

#bath-orb {
    left: 781px;
    top: 3876px;
}

#shower {
    left: 1127px;
    top: 3847px;
}

#shower-orb {
    left: 1205px;
    top: 3880px;
}

#toilet {
    left: 762px;
    top: 4109px;
}

#toilet-orb {
    left: 775px;
    top: 4055px;
}

#washingmachine-orb {
    left: 862px;
    top: 4142px;
}

#cake {
    left: 1095px;
    top: 4127px;
}

#cake-orb {
    left: 1170px;
    top: 4160px;
}

#gutter {
    left: 790px;
    top: 4612px;
}

#tap-orb {
    left: 560px;
    top: 4182px;
}

#hose {
    left: 1186px;
    top: 4306px;
}

#skateboarder {
    left: 473px;
    top: 4517px;
}

/* treatment-plant */
#treatment-plant-text-holder {
    top: 4975px;
    width: 700px;
    margin-left: -350px;
}

#sign1 {
    left: 782px;
    top: 5242px;
}

#sign3 {
    left: 1303px;
    top: 5650px;
}

#sign2-treatment {
    left: 657px;
    top: 5765px;
}

#purplepipe {
    left: 1055px;
    top: 5680px;
}

#purplepipe-orb {
    left: 1105px;
    top: 5670px;
}

#pipewater {
    left: 530px;
    top: 6120px;
}

#pipewater2 {
    left: 1090px;
    top: 6127px;
}

/* again */
#again-text-holder {
    top: 6879px;
}

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

#cloud8 {
    left: 158px;
    top: 6515px;
}

#raincloud5 {
    left: 350px;
    top: 7000px;
}

#raincloud6 {
    left: 1216px;
    top: 6750px;
}

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

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

#mountains-left2 {
    left: -200px;
    top: 6914px;
}

#mountains-right2 {
    left: 994px;
    top: 6880px;
}

#float2 {
    left: 850px;
    top: 7426px;
}

/* 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: 2790px;
    }

    .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;
    }
}

/* fonts */
@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;
}