﻿html, body {
    margin: 0px;
    overflow: visible;
    background: #efefef;
    transform: scale(1);
    width: 100%;
    height: 100%;
}

    body * {
        margin: 0px;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        overflow: hidden;
    }

input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none;
}


div#navegadores {
    display: none;
    z-index: 9999;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: black;
    background-image: url(images/navegadores.jpg);
    background-position: center;
    background-repeat: no-repeat;
}



div#loading {
    z-index: 9997;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: black;
    background-color: rgba(0,0,0,0.92);
}

div#loading > div.contenedor {
    position: absolute;
    width: 245px;
    height: 161px;
    background-image: url(images/cargando.png);
    background-color: transparent;
    top: 50%;
    left: 50%;
    margin: -90.5px 0 0 -122.5px;
}
div#loading > div.contenedor > img{
    top: 98px !important;
    position: relative;
    left: 108px;

}




div.fondo {
    width: 1122px;
    height: 655px;
    overflow: hidden;
    background: url(images/fondo.png);
    z-index: 10;
    position: absolute;
    top: 0px;
    left: 0px;
    background-size: 100% auto;
    overflow: visible;
    display: none;
}

    div.fondo > div.fb-like {
        position: absolute;
        left: 983px;
        top: 641px;
    }

#game_over {
    position: absolute;
    widtH: 244px;
    height: 230px;
    background: transparent url(images/puntaje3.png);
    z-index: 20;
    display: none;
    left: auto;
}

    #game_over > div.puntaje {
        position: absolute;
        top: 79px;
        left: 138px;
        width: 112px;
        height: 32px;
        text-align: center;
    }

    #game_over div.fblogin {
        background: transparent;
        text-align: center;
        margin: 168.5px auto 0;
    }

       #game_over > div.boton {
        top: 201px;
        width: 100px;
        text-align: center;
        left: 72px;
        background: transparent;
        height: 24px;
        color: #bbbbbb;
        font-family: Arial;
        text-decoration: underline;
        font-size: 11px;
    }

    #game_over > div.boton:hover {
        color: white;
    }



#game_over2 {
    position: absolute;
    widtH: 245px;
    height: 156px;
    background: transparent url(images/puntaje.png);
    z-index: 20;
    display: none;
    left: auto;
}

    #game_over2 > div.puntaje {
        position: absolute;
        top: 79px;
        left: 138px;
        width: 112px;
        height: 32px;
        text-align: center;
    }


    #game_over2 > div.boton {
        top: 102px;
        left: 28.5px;
        width: 195px;
        height: 44px;
    }

        #game_over2 > div.boton:hover {
            background: url(images/puntaje_hover2.png);
        }


#game_login {
    position: absolute;
    width: 244px;
    height: 183px;
    background: transparent url(images/login2.png);
    z-index: 20;
    display: none;
    left: auto;
}

    #game_login div.fblogin {
        background: transparent;
        text-align: center;
        margin: 121px auto 0;
    }

    #game_login > div.boton {
        top: 151px;
        width: 100px;
        text-align: center;
        left: 72px;
        background: transparent;
        height: 24px;
        color: #bbbbbb;
        font-family: Arial;
        text-decoration: underline;
        font-size: 11px;
    }

        #game_login > div.boton:hover {
            color: white;
        }


#game_start {
    position: absolute;
    widtH: 440px;
    height: 280px;
    background: transparent url(images/juega.png);
    z-index: 20;
    display: none;
    left: auto;
}

    #game_start > div.boton {
        width: 159px;
        height: 88px;
        top: 155px;
        left: 150px;
    }

        #game_start > div.boton:hover {
            background: url(images/juega_hover.png);
        }

#ranking {
    position: absolute;
    width: 372px;
    height: 367px;
    background: transparent url(images/ranking2.png);
    z-index: 20;
    display: none;
    left: auto;
    overflow: visible;
}
#ranking.tipo2{
    background: transparent url(images/ranking3.png);
    height: 428px;
    margin-top: -20px;
}

    #ranking > div.flecha_izq {
        background: transparent url(images/flecha_izq.png);
        z-index: 21;
        width: 38px;
        height: 54px;
        position: absolute;
        top: 154px;
        left: -6px;
        cursor: pointer;
        display: none;
    }

        #ranking > div.flecha_izq:hover {
            background: transparent url(images/flecha_izq_hover.png);
        }

    #ranking > div.flecha_der {
        background: transparent url(images/flecha_der.png);
        z-index: 21;
        width: 38px;
        height: 54px;
        position: absolute;
        top: 154px;
        left: 343px;
        cursor: pointer;
        display: none;
    }

        #ranking > div.flecha_der:hover {
            background: transparent url(images/flecha_der_hover.png);
        }

    #ranking > div.marco {
        width: 320px;
        margin: 64px auto 0;
        height: 241px;
        overflow: hidden;
        position: relative;
    }

    #ranking div.contenido {
        width: 9999px;
        margin: 0;
        height: 241px;
        overflow: visible;
        position: relative;
    }

    #ranking div.columna {
        width: 320px;
        float: left;
        height: 241px;
        margin: 0px;
        margin-right: 30px;
        float: left;
    }

    #ranking div.contenido > div.columna > div {
        width: 301px;
        height: 58px;
        margin: 0 0 2px 13px;
        background: transparent url(images/bloque.png);
        position: relative;
    }

        #ranking div.contenido > div.columna > div.yo {
            background: transparent url(images/bloque2.png);
        }

        #ranking div.contenido > div.columna > div > img {
            width: 41px;
            height: 41px;
            position: absolute;
            top: 9px;
            left: 62px;
        }

        #ranking div.contenido > div.columna > div > div.position {
            position: absolute;
            width: 50px;
            height: 22px;
            text-align: center;
            top: 18px;
            left: 7px;
        }

        #ranking div.contenido > div.columna > div > div.name {
            position: absolute;
            width: 178px;
            height: 20px;
            top: 10px;
            color: white;
            left: 112px;
            font-family: arial;
            font-weight: bold;
            overflow: hidden;
            font-size: 12px;
        }

        #ranking div.contenido > div.columna > div > div.puntaje {
            position: absolute;
            width: 112px;
            height: 32px;
            text-align: center;
            top: 31px;
            left: 227px;
        }

    #ranking > div.puntaje{
        display: none;
        position: absolute;
            width: 112px;
            height: 32px;
            text-align: center;
            top: 322px;
            left: 243px;
    }
    #ranking.tipo2 > div.puntaje{
        display: block;
    }

        #ranking > div.boton {
        width: 88px;
        height: 49px;
        top: 310px;
        left: 144px;
    }
    #ranking.tipo2 > div.boton {
        top: 363px;        
    }

        #ranking > div.boton:hover {
            background: url(images/juega_hover2.png);
        }


#video {
    display: none;
    position: absolute;
    background-color: black;
    color: white;
    z-index: 14;
    display: block;
    left: auto;
}

    #video > video {
        width: 100%;
        height: 100%;
        image-fit: fill;
    }

canvas {
    display: none;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 8;
}

#barra {
    width: 1067px;
    height: 56px;
    left: 42px;
    top: 50px;
    position: absolute;
    color: white;
    z-index: 12;
    display: none;
}

#tiempo {
    position: absolute;
    left: 308px;
    top: 18px;
    font-size: 30px;
    line-height: 42px;
    width: 100px;
    text-align: center;
}

#puntaje {
    position: absolute;
    left: 821px;
    top: 18px;
    font-size: 30px;
    line-height: 42px;
    width: 126px;
}

#vidas {
    position: absolute;
    left: 562px;
    top: 18px;
    font-size: 30px;
    line-height: 42px;
    width: 23px;
}

#logos {
    position: absolute;
    top: 561px;
    left: 798px;
    width: 224px;
    height: 56px;
    background: transparent;
}
#logos > a,#logos > span{
    display: none !important;
}



#botonera {
    position: absolute;
    margin: 0 auto 0;
    min-width: 54px;
    height: 49px;
    background: transparent;
    background-image: url(images/botonera.png);
    z-index: 15;
    display: block;
    overflow: visible;
}

#botonera > div{
    float: left;
    display: block;
    position: relative;
    z-index: 16;
    
}
#botonera > div.bordeizq{
    position: absolute;
    z-index:15;
    width: 23px;
    height: 49px;
    background-image: url(images/botonera_izq.png);
    top: 0px;
    left: -8px;
}
#botonera > div.bordeder{
    position: absolute;
    width: 23px;
    height: 49px;
    z-index:15;
    background-image: url(images/botonera_der.png);
    top: 0px;
    right: -8px;
}

#botonera > div.mute{
    background: url(images/audio_on.jpg);
    width: 37px;
    height: 39px;
    margin-top: 5px;
    margin-left: 8px;
    cursor: pointer;
}

#botonera > div.mute.yes{
        background: url(images/audio_off.jpg);
}

#botonera > div.compartir{
    display: none;
        background: #4c69ba; /* Old browsers */
    background: -moz-linear-gradient(top, #4c69ba 0%, #3b55a0 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4c69ba), color-stop(100%,#3b55a0)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #4c69ba 0%,#3b55a0 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #4c69ba 0%,#3b55a0 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #4c69ba 0%,#3b55a0 100%); /* IE10+ */
    background: linear-gradient(to bottom, #4c69ba 0%,#3b55a0 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c69ba', endColorstr='#3b55a0',GradientType=0 ); /* IE6-9 */
    -webkit-font-smoothing: antialiased;
    text-shadow: 0 -1px 0 #354c8c;
    border-radius: 2px;
    font-weight: bold;
    padding: 3px;
    font-family: 'Helvetica Neue', Helvetica, Arial, 'lucida grande', tahoma, verdana, arial, sans-serif;
    font-size:11px;
    color: white;
    width: 170px;
    margin: 14px 3px 0 7px;
}

#botonera > div.compartir:hover {
     background: #4c69ba;
    cursor: pointer;
}
#botonera > div.compartir > div{
    float: left;
    margin: 0;
    line-height: 14px;

}
#botonera > div.compartir > div.img{
    background-image: url(https://fbstatic-a.akamaihd.net/rsrc.php/v2/y1/r/LVx-xkvaJ0b.png);
    background-size: auto;
    background-repeat: no-repeat;
    display: block;
    height: 14px;
    width: 14px;
    background-position: 0 -42px;
    margin-right: 4px;
    
}

#botonera > div.fb_login{
    display: none;
    margin: 13px 3px 0 7px;
}

#botonera > div.fb_like{
    display: none;
    margin: 14px 3px 0;
    min-width: 120px;
    min-height: 26px;
    overflow: visible;
}
#botonera > div.fb_like > div, #botonera > div.fb_like > div > span, #botonera > div.fb_like > div>span>iframe{
    min-height: 22px !important;
    min-width: 120px !important;
}

div.boton {
    border: 0px;
    background: transparent;
    padding: 0px;
    margin: 0px;
    position: absolute;
    cursor: pointer;
}

div.numero {
    width: 16px;
    height: 18px;
    background: transparent url(images/numeros.png);
    float: left;
}

#poweredby {
    z-index: 12;
    position: absolute;
    top: 637px;
    left: 19px;
}

    #poweredby > a {
        color: #878787;
        font-size: 9px;
        font-family: Arial;
        font-weight: bold;
        text-decoration: none;
    }

        #poweredby > a > font {
            color: #3c3c3c;
        }



        #nakaseby {
    z-index: 12;
    position: absolute;
    top: 637px;
    left: 997px;
}

    #nakaseby > a {
        color: #878787;
        font-size: 9px;
        font-family: Arial;
        font-weight: bold;
        text-decoration: none;
    }

        #nakaseby > a > font {
            color: #3c3c3c;
        }