html {  width: 100% }
body {  background: #fcfcfc; width: 100%; overflow:hidden; }

body.mondadori .el_rizzoli { display: none; }
body.rizzoli .el_mondadori { display: none; }

/* For preload purpose */
body.noloaded * {  background-image: none !important;  }
body.noloaded .container {  display: none !important;  }

body{
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* USEFULL CLASS */

.bordered { border: 1px solid;}

.opacity_0 {
    /* IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";

    /* IE 5-7 */
    filter: alpha(opacity=0);

    /* Netscape */
    -moz-opacity: 0;

    /* Safari 1.x */
    -khtml-opacity: 0;

    /* Good browsers */
    opacity: 0;
}


/*
************************************
OVERLAY ELEMENTS
************************************
*/

#overlay_bg {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 3000;
    background-color: #FCFCFC;

    /* IE 8 */
    //-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=97)";

    /* IE 5-7 */
    //filter: alpha(opacity=97);

    /* Netscape */
    //-moz-opacity: 0.97;

    /* Safari 1.x */
    //-khtml-opacity: 0.97;

    /* Good browsers */
    //opacity: 0.97;
}

#overlay_alert {
    display: none;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1999;
    background-color: #000;
    opacity: 0.6;

    /* IE 8 */
//-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";

    /* IE 5-7 */
//filter: alpha(opacity=60);

    /* Netscape */
//-moz-opacity: 0.60;

    /* Safari 1.x */
//-khtml-opacity: 0.60;

    /* Good browsers */
//opacity: 0.60;
}


#load_overlay {
    display: block;
    position: absolute;
    width: 275px;
    height: 200px;
    z-index: 3001;
    top:40%;
    left:50%;
    margin:-100px 0 0 -150px;
    color: #5a5a5a;
    font-family: "lato", "Verdana", sans-serif;
    text-align: center;
}

    #load_overlay .logo { height: 73px; width: 272px; text-align: center;  }
    body.mondadori #load_overlay .logo {  background: url('../img/logo_mondadori_t2.png') no-repeat top center !important; }
    body.rizzoli #load_overlay .logo {  background: url('../img/logo_rizzoli_t2.png') no-repeat top center !important; }
    #load_overlay .loadimage { height: 128px; text-align: center;  }
    #load_overlay .title { font-size: 21px; color: #5a5a5a; text-transform: uppercase;  font-size: 14px; }
    #load_overlay .subtitle { font-size: 10px; color: #5a5a5a; margin-top: 3px; display: none;  }
    #load_overlay .mainPreloadProgress { height: 34px; }
    #load_overlay .mainPreloadProgress .progressBar { float: left; width: 300px; height: 30px; border: 1px solid #DDD; display: none; }
    #load_overlay .mainPreloadProgress .progressBar .line { float: left; width: 0%; background-color: #ffffff; height: 30px; }
    #load_overlay .mainPreloadProgress .percent { height: 100%; line-height: 30px; font-size: 25px; font-family: "lato-bold", "Verdana", sans-serif; font-size: 24px;  }

/*
************************************
MAIN ELEMENTS
************************************
*/

/* Header */
header { height: 46px; width: 100%; position: absolute;}
    header h1 { margin: 0;}

.bg_header { min-width: 920px; }

.main_logo { width: 124px; height: 40px; float: right; position: relative; right: 35px; top: 4px; background-repeat: no-repeat; background-position: right top;}

body.mondadori .main_logo { background-image: url('../img/logo_mondadori_white.png');}
body.rizzoli .main_logo { background-image: url('../img/logo_rizzoli.png');}

body.rizzoli.theme_ss1 .main_logo { background-image: url('../img/logo_rizzoli_white.png');}
body.rizzoli.theme_ss2 .main_logo { background-image: url('../img/logo_rizzoli_white.png');}


/* Play screen */
.container { min-width: 920px; position: relative; margin: auto;}
.play_screen { height: 620px; width: 920px; position: relative; margin: auto;}

    .play_screen header { text-align: center; color: #ffffff; position: relative;}


#timer_box { position: absolute; color: #666666; width: 185px; margin-left: 28px; }
#timer_box .texts { text-transform: uppercase; }
#timer_box .texts .title { font-size: 18px;}
#timer_box .types { font-size: 12px; cursor: pointer; }
#timer_box .types .type.disable { color: #aaaaaa;  }
#timer_box .types .type.disable:hover { color: #666666;  }

#timer_box .timer  { margin-top:  -9px;  }
#timer_box .timer .icon { float: left; background-image: url('../img/ico_time.png'); background-repeat: no-repeat; width: 32px; height: 32px; margin-top: 13px; }
#timer_box .timer .time { font-size: 43px; font-weight: normal; font-family: 'lato-light'; padding-left: 40px; }


#dialogsBox,
#helpPopUp,
#multipBox,
#multipResult,
#finishLeveelBox,
#start_playerBox,
#tipBox { position: absolute; width: 100%; height: 100%; z-index: 2000; padding-left: 3px; padding-top: 140px; display: none; }

#helpPopUp { padding-top: 10px; padding-left: 0px; margin-top: 10px; margin-left: 0px; }
#tipBox {  margin-top: 20px; }
#finishLeveelBox .dialog { text-transform: uppercase; }
#start_playerBox .dialog { text-transform: uppercase; }
#multipBox .dialog { text-transform: uppercase; }
#multipResult .dialog { text-transform: uppercase; }

    #dialogsBox .dialog,
    #finishLeveelBox .dialog,
    #multipBox .dialog,
    #multipResult .dialog,
    #start_playerBox .dialog,
    #helpPopUp .dialog,
    #tipBox .dialog
    { background-color: #ffffff; text-align: center; padding: 20px 50px 35px 50px; width: 500px; margin: auto auto; display: block;

        border: 1px solid #CCCCCC;
        -webkit-box-shadow: 4px 4px 11px 0px rgba(50, 50, 50, 0.75);
        -moz-box-shadow:    4px 4px 11px 0px rgba(50, 50, 50, 0.75);
        box-shadow:         4px 4px 11px 0px rgba(50, 50, 50, 0.75);
    }

#multipBox .dialog, #start_playerBox .dialog
{ padding: 0px 50px; width: 510px;

    border: 1px solid #CCCCCC;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

    #tipBox .buttons .btn { margin: auto; }
    #helpPopUp .dialog { padding: 15px 5px 5px 5px; width: 750px; }

        #dialogsBox .dialog .text,
        #multipBox .dialog .text,
        #multipResult .dialog .text,
        #finishLeveelBox .dialog .text,
        #tipBox .dialog .text,
        #start_playerBox .dialog .text,
        #helpPopUp .dialog .text { padding: 20px; text-transform: uppercase; font-size: 20px; font-weight: bold; }

        #dialogsBox .dialog .buttons,
        #multipBox .dialog .buttons,
        #multipResult .dialog .buttons,
        #finishLeveelBox .dialog .buttons,
        #tipBox .dialog .buttons,
        #start_playerBox .dialog .buttons,
        #helpPopUp .dialog .buttons { margin: 7px 10px;}
        #dialogsBox .dialog .buttons > div , #helpPopUp .dialog .buttons > div { display: inline-block; margin: 0 10px; }


    #helpPopUp .dialog .text { font-size: 17px; margin-bottom: 15px; padding: 5px; overflow: auto; height: 400px; font-weight: normal; }
    #helpPopUp .dialog .text .restart { color: #da787f;  }
    #helpPopUp .dialog .text .new { color: #0fa69f ;  }
    #helpPopUp .dialog .text .solution { color: #f1ca3c;  }
    #helpPopUp .dialog .text .finish { color: #99c329;  }
    #helpPopUp .dialog .text img { margin: 20px 0px; }


#multipBox .dialog, #start_playerBox .dialog { min-height: 200px; }

#multipBox .dialog .step2 { display: none; font-size: 22px; padding: 50px 0; }
#multipBox .dialog .step1 { font-weight:bold; font-size: 22px; padding: 50px 0;  }
#multipBox .dialog .step1 .btn { font-weight:bold; display: inline-block;  }
#multipBox .dialog .step2 .nomeg { background-color: #E5E6E7; border: none; border-bottom:2px solid white; padding: 5px; }
#multipBox .dialog .step2 .nomeg.error { border-bottom: 2px solid red; }
#start_playerBox .dialog .text div{ margin-top: 20px; font-size: 150%; }

#multipResult .dialog .text { font-size: 150%; }

.inputcont.multiresult{ font-size: 150%; text-align: right; width: 90%; margin: 0 auto 30px auto; }
.inputcont.multiresult tr td { padding-bottom: 10px; }
.inputcont.multiresult tr > td:first-child { text-align: left; }
.inputcont.multiresult tr td img { padding-right: 10px; }