* {
    display: none;
}

*.visibleBlock {
    display: block;
}

*.visibleInline {
    display: inline;
}

body {
    background-color: rgb( 0, 0, 0 );

    .ui-page {
        background: none;
    }

    * {
       -moz-user-select: none;
       -webkit-user-select: none;
       user-select: none;
    }
}

#osg_layoutWrapper {
    width: 576px;
    height: 426px !important;
    min-height: 426px !important;
    margin-left: auto;
    margin-right: auto;
    background: rgb( 0, 0, 0 );
    position: relative;

    .content {
        width: 556px;
        margin: 10px;
        padding: 0;
        background: none;
        position: absolute;
    }

    #gameScreen {
        height: 400px;
        border: 3px rgb( 255, 255, 255 ) solid;
        overflow: hidden;
        background-image: url( '../images/intro-screen1.png' );
        position: relative;

        #confirmButton {
            width: 205px;
            height: 98px;
            position: absolute;
            left: 341px;
            top: 293px;

            background-image: url( '../images/next-button.png' );
            color: #939393;
            cursor: pointer;
        }

        #confirmButton.play {
            background-image: url( '../images/play-button.png' );
        }

        #shark {
            position: absolute;
            left: 135px;
            top: 262px;
            background-image: url( '../images/shark.png' );
            background-position: top right;
            width: 195px;
            height: 74px;

            .collisionDetectionAgent {
                height: 1px;
                width: 1px;
                top: 37px;
                position: absolute;
            }

            #right { right: 0; }

            #left { left: 0; }
        }

        #shark.left {
            background-position: top left;
        }

        .riverBloat {
            position: absolute;
            left: 0;
            top: 40px;
            z-index: 20;
        }

        #cloud, #cloud2, #cloud9 {
            position: absolute;
        }

        #reefWater {
            width: 100%;
            height: 257px;
            bottom: 0;
            position: absolute;
            background-color: rgba( 0, 0, 255, 0.1 );
            z-index: 30;
        }

        #reefWater.chumlevel1 {
            background-color: rgba( 122, 89, 1, 0.2 );
        }

        #reefWater.chumlevel2 {
            background-color: rgba( 122, 89, 1, 0.4 );
        }

        #reefWater.chumlevel3 {
            background-color: rgba( 122, 89, 1, 0.6 );
        }

        #reefWater.chumlevel4 {
            background-color: rgba( 122, 89, 1, 0.8 );
        }

        #mountain {
            top: -14px;
            position: absolute;
        }

        #water-animation {
            top: 136px;
            position: absolute;
            z-index: 10;
        }

        #riverAnim {
            position: absolute;
            top: 42px;
            left: 4px;
        }

        .score {
            top: 78px;
            position: absolute;
            font-family: Comic Sans MS, Comic Sans, SanSerif;
            font-size: 26px;
            font-weight: bold;
            text-shadow: none;

            color: rgb( 255, 255, 255 );
        }

        #goodBloatSaved {
            left: 314px;
        }

        #badBloatBooted {
            left: 514px;
        }

        #playerScore {
            left: 404px;
        }

        .levelEndScore {
            position: static;
            margin-top: 180px;
            font-size: 72px;
            text-align: center;

            color: rgb( 253, 252, 0 );
        }

        #levelAdvanceButton {
            width: 130px;
            height: 20px;
            position: absolute;
            top: 350px;
            left: 220px;

            color: #939393;
            cursor: pointer;
        }
    }

    #gameScreen.introScreen2 {
        background-image: url( '../images/intro-screen2.png' );
    }

    #gameScreen.introScreen3 {
        background-image: url( '../images/intro-screen3.png' );
    }

    #gameScreen.introScreen4 {
        background-image: url( '../images/intro-screen4.png' );
    }

    #gameScreen.level1 {
        background-image: url( '../images/level-intro1.png' );
    }

    #gameScreen.level2 {
        background-image: url( '../images/level-intro2.png' );
    }

    #gameScreen.level3 {
        background-image: url( '../images/level-intro3.png' );
    }

    #gameScreen.level4 {
        background-image: url( '../images/level-intro4.png' );
    }

    #gameScreen.level {
        background-image: url( '../images/level-background.png' );
    }

    #gameScreen.levelComplete {
        background-image: url( '../images/level-complete.png' );
    }

    #gameScreen.epicWin {
        background-image: url( '../images/epic-win.png' );
    }

    #gameScreen.youLose {
        background-image: url( '../images/you-lose.png' );
    }
}