/* 
    Created on : 26/06/2014, 12:03:41 AM
    Author     : Caballeo
*/


@font-face {
    font-family: "fingerFontWoff";
    src:url("../font/fingerFontmayor.woff");
}

body {
    font-family: "fingerFontWoff";
    background-color: #ffd36d;
    background-repeat:no-repeat;
    .wrapper, .container {        
        height: 410px;
        width: 300px;
    }
    .wrapper {
        bottom: 50%;
        right: 50%;
        position: absolute;
    }

    .container {                             
        left: 50%;        
        position: relative;
        top: 50%;
        overflow: hidden;
        img {
            display: block;

            margin: 0 auto; 
        }
        p {
            text-align: center;
            font-size: 30px;

            margin: 0px 0px 10px 0px;
        }
    }
    #game {
        display: none;
    }
    #fingerP{

        img {
            opacity: 0.4;
            filter: alpha(opacity=40);
            position: absolute;
            z-index: 999;
        }
    }

    #mainMenu, #firstMenu, #secondMenu, #thirdMenu {
        display: none;
        .opMainMenu {
            border: 1px solid #808080;
            background-color: hsla(0,0%,100%,0.5);
            border-radius: 10px;
            text-align: center;
            font-size: 32px;
            margin-top: 50px;            
        }        
        .opMainMenu:active {
            background-color: hsla(0,0%,100%,0.8);
        }
        .return {
            border: 1px solid #808080;
            text-align: center;
            font-size: 32px;
            background-color: hsla(0,87%,58%,0.5);          
            border-radius: 10px;
            width: 90px;
        }
        .return:active {
            background-color: hsla(0,87%,58%,0.8);  
        }      
        img {
            width: 35px;
            height: 35px;
            margin: 30px 0px 0px 0px;
        }
    }
    #resultFail, #fourthMenu {
        display: none;        
        .opResult {
            margin-top: 50px;
            border: 1px solid #808080;
            background-color: hsla(0,0%,100%,0.5);
            border-radius: 10px;
            text-align: center;
            font-size: 42px;
        }
        .return {
            border: 1px solid #808080;
            text-align: center;
            font-size: 32px;
            background-color: hsla(0,87%,58%,0.5);          
            border-radius: 10px;
            width: 90px;
        }
        .return:active {
            background-color: hsla(0,87%,58%,0.8);  
        }  
    }
    .minText {
        font-size: 32px !important;
    }
    
    #marcadores {
        display: none;        
        .opResult {
            margin-top: 50px;
            border: 1px solid #808080;
            background-color: hsla(0,0%,100%,0.5);
            border-radius: 10px;
            text-align: center;
            font-size: 16px;
        }
        .return {
            border: 1px solid #808080;
            text-align: center;
            font-size: 32px;
            background-color: hsla(0,87%,58%,0.5);          
            border-radius: 10px;
            width: 90px;
        }
        .return:active {
            background-color: hsla(0,87%,58%,0.8);  
        }  
    }
        
    #creditos {
        display: none;        
        .opResult {
            margin-top: 50px;
            border: 1px solid #808080;
            background-color: hsla(0,0%,100%,0.5);
            border-radius: 10px;
            text-align: center;
            font-size: 22px;
        }
        .return {
            border: 1px solid #808080;
            text-align: center;
            font-size: 32px;
            background-color: hsla(0,87%,58%,0.5);          
            border-radius: 10px;
            width: 90px;
        }
        .return:active {
            background-color: hsla(0,87%,58%,0.8);  
        }  
    }
    
    .final {
        margin-bottom: 5px;
    }
    .btoRadio {

        height: 53px;
        width: 150px;
        margin: 0 auto;
        text-align: left;
        margin-top: 5px;
        div {
            width: 25px;

            float: left;
        }
        p {

            width: 100px;
            float: left;
            margin-left: 10px;
            margin-top: 0px;
            padding: 4px;
        }        
    }
    .clear {
        clear: both;
    }
}
