﻿.grj_overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-position: top left !important;
    -moz-background-size: 100% auto;
    -o-background-size: 100% auto;
    -webkit-background-size: 100% auto;
    background-size: 100% auto;
    z-index: 9999;
    display: none;
    background-repeat: no-repeat !important;
}

.grj_wrapper {
    width: 100%;
    margin: 0 auto;
    margin-top: 44px;
    height: 100%;
}

.grj_first_scene {
    width: 100%;
    background: url(../image/loading.jpg) top center no-repeat;
    -moz-background-size: cover;
    -o-background-size: cover;
    -webkit-background-size: cover;
    background-size: cover;
    height: 262px;
    position: relative;
}

    .grj_first_scene .logo {
        opacity: 0;
        position: absolute;
        width: 163px;
        height: 103px;
        background: url(../image/logo.png) top left no-repeat;
        left: 50%;
        margin-left: -82px;
        bottom: 30px;
    }

    .grj_first_scene .grj_start {
        -moz-user-select: none;
        -ms-user-select: none;
        -webkit-user-select: none;
        user-select: none;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: rgba(0,0,0,0);
        position: absolute;
        display: none;
        bottom: -80px;
        background: url(../image/start.png) top left no-repeat;
        -moz-background-size: cover;
        -o-background-size: cover;
        -webkit-background-size: cover;
        background-size: cover;
        left: 50%;
        width: 244px;
        height: 71px;
        margin-left: -122px;
    }


.grj_game {
    width: 100%;
    background: url(../image/game_bg.jpg) top center no-repeat;
    -moz-background-size: cover;
    -o-background-size: cover;
    -webkit-background-size: cover;
    background-size: cover;
    height: 262px;
    position: relative;
    display: none;
}

    .grj_game .player {
        background: url(../image/player.png) top left no-repeat;
        width: 289px;
        height: 236px;
        position: absolute;
        top: 10px;
        left: 50%;
        margin-left: -145px;
        -moz-background-size: cover;
        -o-background-size: cover;
        -webkit-background-size: cover;
        background-size: cover;
    }

    .grj_game .grj_game_scene {
        position: relative;
        float: left;
        width: 250px;
        height: 190px;
        margin: 28px 0 0 18px;
        border-radius: 14px;
        box-shadow: rgba(0, 0, 0, 0.7) 0 0 10px inset;
        background-image: url(../image/sahne.png);
        background-repeat: repeat-x;
        overflow: hidden;
        background-position: 0 0;
    }

    .grj_game .man {
        position: absolute;
        top: 120px;
        left: 19px;
        width: 25px;
        background: url(../image/draman.png) top left no-repeat;
        height: 58px;
    }

        .grj_game .man.flip {
            background-image: url(../image/draman-left.png) !important;
            background-position: 0 0;
            background-repeat: no-repeat;
        }

            .grj_game .man.flip.jump {
                background: url(../image/draman-jump-2.png) top left no-repeat !important;
            }

.grj_game_scene .coko {
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    width: 18px;
    height: 18px;
    background: url(../image/coko-para1.gif) top left no-repeat;
    position: absolute;
}

    .grj_game_scene .coko.first {
        top: 92px;
        left: 139px;
    }

    .grj_game_scene .coko.second {
        top: 92px;
        left: 169px;
    }

    .grj_game_scene .coko.third {
        top: 124px;
        left: 280px;
    }

    .grj_game_scene .coko.fourth {
        top: 152px;
        left: 280px;
    }
    .grj_game_scene .coko.fifth {
        top: 92px;
        left: 379px;
    }

.grj_game_scene .message {
    display: none;
    width: 100%;
    text-align: center;
    font-family: Arial;
    color: #fff;
    font-weight: bold;
    font-size: 28px;
    line-height: 130%;
    margin-top: 20px;
    -webkit-text-shadow: 3px 3px 1px #393939;
    text-shadow: 3px 3px 1px #393939;
}

    .grj_game_scene .message > img {
        width: 250px;
        margin-left: -10px;
    }

.grj_controls {
    position: absolute;
    top: 215px;
    width: 280px;
    left: 50%;
    margin-left: -140px;
}

    .grj_controls .left {
        left: 20px;
        top: 90px;
        background: url(../image/left.png) top left no-repeat;
        -moz-background-size: cover;
        -o-background-size: cover;
        -webkit-background-size: cover;
        background-size: cover;
    }

    .grj_controls .up {
        top: 0;
        left: 50%;
        margin-left: -35px;
        background: url(../image/up.png) top left no-repeat;
        -moz-background-size: cover;
        -o-background-size: cover;
        -webkit-background-size: cover;
        background-size: cover;
    }

    .grj_controls .right {
        top: 90px;
        right: 20px;
        background: url(../image/right.png) top left no-repeat;
        -moz-background-size: cover;
        -o-background-size: cover;
        -webkit-background-size: cover;
        background-size: cover;
    }

    .grj_controls a {
        position: absolute;
        width: 70px;
        height: 70px;
        -moz-user-select: none;
        -ms-user-select: none;
        -webkit-user-select: none;
        user-select: none;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: rgba(0,0,0,0);
    }

.simdi-oyna {
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    width: 242px;
    height: 70px;
    background: url(../image/simdi-oyna.png) top left no-repeat;
    position: absolute;
    -moz-background-size: cover;
    -o-background-size: cover;
    -webkit-background-size: cover;
    background-size: cover;
    top: 250px;
    left: 50%;
    margin-left: -121px;
}
