@font-face {
	font-family: "Gochi Hand" ;
	src: url("GochiHand-Regular.eot");
}

@font-face {
	font-family: "Gochi Hand" ;
	src: url("GochiHand-Regular.ttf") format("truetype");
}

body{
    background: #191919;
    cursor: default;
    font-size: 14px;
    font-family: 'Gochi Hand', cursive;
    color: #ffffff;
}

#background {
    margin: 0 auto;
    width: 960px;
    height: 400px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 25px;
    position: relative;
    overflow: visible;
    margin-top: 50px;
}
.logo {
    position: absolute;
    top: -101px;
    right: 8px;
}

.placeholder {
    color: #bbb;
}

#main {
    margin: 0 auto;
    width: 960px;
    height: 636px;
    background-image: url("../images/fundo.png");
    background-repeat: no-repeat;
    background-position: center;
}

#main2 {
    margin: 0 auto;
    width: 954px;
    height: 596px;
    background-image: url("../images/fundo_new_register.png");
    background-repeat: no-repeat;
    background-position: center;
    overflow: hidden;
}
#main_register {
    margin: 0 auto;
    width: 954px;
    height: 608px;
    background-image: url("../images/fundo_register.png");
    background-repeat: no-repeat;
    background-position: center;
}


#spacer {
    margin-top: 16px;
    margin-bottom: 10px;
}

#login {
    position: relative;
    top: 242px;
    left: 150px;
    width: 280px;
    height: 265px;
    font-size: 18px;
    color: #373737;
}

.login {
    font-size: 46px;}

a {
    text-decoration: none;
}

.title_big {
    font-size: 28px;
    -webkit-transform:rotate(-1deg);
       -moz-transform:rotate(-1deg);
        -ms-transform:rotate(-1deg);
         -o-transform:rotate(-1deg);
            transform:rotate(-1deg);
}

.title_small {
    font-size: 18px;
    text-align: right !important;
}

.title_register {
    font-size: 27px;
    font-weight: bold;
    text-align: center;
}

.inputLogin {
    padding-left: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    width: 265px;
    height: 25px;
    margin-top: 8px;
}

.inputRegister {
    -moz-border-radius: 16px;
    -webkit-border-radius: 16px;
    border-radius: 16px;
    width: 284px;
    height: 33px;
    /*margin-top: 7px;*/
    padding-left: 16px;
    border: 1px solid #9D9D9D;
    margin-top: 18px;
    font-size: 12px;
    font-family: Arial;
    color: #575757;
}
.inputRegister.focus {
    border: 3px solid #EC650C;
}

.inputRegister2 {
    padding-left: 16px;
    -moz-border-radius: 16px;
    -webkit-border-radius: 16px;
    border-radius: 16px;
    width: 174px;
    height: 33px;
    margin-top: 10px;
    border: 1px solid #9D9D9D;
    font-size: 12px;
    font-family: Arial;
    color: #575757;
}

.inputRegister2.focus {
    border: 3px solid #EC650C;
}

#entrar {
    width: 140px;
    margin-left: 140px;
}

#registar {
    width: 190px;
    margin-left: 100px;
}
.erro {
    font-size: 18px;
    margin-top: 6px;
}
#bt_entrar {
    float: left;
    margin-left: 5px;
}

#bt_voltar {
    float: left;

    margin-left: 40px;
}
#voltar {
    text-align: center;
}

/*** Botão LOGIN ***/
.btn_entrar2 {
    color: #575757;

    padding: 5px;
    text-transform: uppercase;
    width: 100px;
    text-decoration: none;
    -webkit-border-radius: 28px;
    -moz-border-radius: 28px;
    border-radius: 28px;
    -webkit-box-shadow: 0px 1px 3px #666666;
    -moz-box-shadow: 0px 1px 3px #666666;
    box-shadow: 0px 1px 3px #666666;
    text-shadow: 1px 1px 1px #C6C6C6;
    border: solid #02A7E4 2px;
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#D6D6D6), to(#02A7E4));
    background: -moz-linear-gradient(top, #D6D6D6, #02A7E4);
    background-color: #02A7E4;
    display: inline-block;

    font-weight: bold;
    font-size: 20px;
    font-family: 'Gochi Hand';
}
.btn_entrar {
    color: #575757;
    margin-top: 10px;
    padding: 5px;
    padding-left: 10px;
    padding-right: 10px;
    text-align: center;
    width: 120px;
    text-decoration: none;
    -webkit-border-radius: 28px;
    -moz-border-radius: 28px;
    border-radius: 28px;
    -webkit-box-shadow: 0px 1px 3px #666666;
    -moz-box-shadow: 0px 1px 3px #666666;
    box-shadow: 0px 1px 3px #666666;
    text-shadow: 1px 1px 1px #c6c6c6;
    border: solid #02A7E4 2px;
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#D6D6D6), to(#02A7E4));
    background: -moz-linear-gradient(top, #D6D6D6, #02A7E4);
    background-color: #02A7E4;
    display:inline-block;
    font-weight: bold;
    font-size: 20px;
    font-family: 'Gochi Hand';
    cursor: pointer;
}

.btn_entrar:hover, .btn_entrar2:hover {
    background: #02A7E4;
}
#login-form .buttons .btn_entrar {
     margin-left: 165px;
}

/*** Botão REGISTAR ***/
.btn_registar2 {
    color: #575757;
    cursor: pointer;
    padding: 5px;
    text-transform: uppercase;
    width: 140px;
    text-decoration: none;
    -webkit-border-radius: 28px;
    -moz-border-radius: 28px;
    border-radius: 28px;
    -webkit-box-shadow: 0px 1px 3px #666666;
    -moz-box-shadow: 0px 1px 3px #666666;
    box-shadow: 0px 1px 3px #666666;
    text-shadow: 1px 1px 1px #C6C6C6;
    border: solid #EC650C 2px;
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#F89713), to(#EC650C));
    background: -moz-linear-gradient(top, #F89713, #EC650C);
    background-color: #EC650C;
    display: inline-block;

    font-weight: bold;
    font-size: 20px;
    font-family: 'Gochi Hand';
}

.btn_registar {
    color: #575757;
    margin-top: 5px;
    padding: 5px;
    padding-left: 20px;
    width: 120px;
    text-decoration: none;
    -webkit-border-radius: 28px;
    -moz-border-radius: 28px;
    border-radius: 28px;
    -webkit-box-shadow: 0px 1px 3px #666666;
    -moz-box-shadow: 0px 1px 3px #666666;
    box-shadow: 0px 1px 3px #666666;
    text-shadow: 1px 1px 1px #c6c6c6;
    border: solid #EC650C 2px;
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#F89713), to(#EC650C));
    background: -moz-linear-gradient(top, #F89713, #EC650C);
    background-color: #EC650C;
    display:inline-block;
    margin-left: 35px;
    font-weight: bold;
    font-size: 20px;
    font-family: 'Gochi Hand';
}

.btn_registar:hover, .btn_registar2:hover {
    background: #EC650C;
}


/****************************************
* ECRA DE REGISTO (div #main2)
*****************************************/
#rgist_main2 {
    position: absolute;
    top: 215px;
    left: 100px;
    width: 310px;
    height: 310px;
    font-size: 22px;
    color: #373737;
}

#rgist_main3 {
    position: absolute;
    top: 230px;
    left: 540px;
    width: 310px;
    height: 310px;
    font-size: 22px;
    color: #373737;
}

/*.ui-datepicker-calendar {
    display: none;
}*/

.feminino {
    color: #ED6563;
}

.masculino {
    color: #009EE2;
}

.row_genero {
    height: 25px;	
    margin-top: 12px;
}

#gender {
    float: left;
    width: 100px;
    margin-left: 35px;
}

#gender_radios {
    float: left;
    width: 120px;
}
#gender_radios label {
    margin-right: 16px;
}

.row_birthdate {
    height: 50px;
    width: 300px;
    float: left;
    margin-top: 18px;
    margin-bottom: 18px;
}

#birthdate_textField {
    float: left;

    width: 100px;
}

#morada_textField {
    width: 314px;

    float: left;
}

#birthdate {
    width: 97px;
    float: left;
}

.row_morada {
    height: 50px;
    float: left;
    width: 300px;
}

#morada {
    width: 95px;
    float: left;
    margin-top: 15px;
}

.row_mail {
    height: 140px;
    float: left;
    width: 320px;
}

#mail_textField {
    float: left;
}

#mail {
    /*padding-bottom: 10px;*/
    margin-top: 20px;
}

.row_buttons {
    height: 40px;
    float: left;
    width: 100%;
    margin-top: 35px;
}
/****************************************
* ECRA DO QUARTO (div #main3)
*****************************************/
#main3 {
    margin: 0 auto;
    width: 960px;
    height: 530px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    border-radius: 25px;

    -webkit-box-shadow: 1px 5px 20px 5px #000;
    -moz-box-shadow: 1px 5px 20px 5px #000;
    box-shadow: 1px 5px 20px 5px #000;
}

#header {
    margin: 0 auto;
    background-image: url("../images/top.png");
    background-repeat: no-repeat;
    height: 75px;
    overflow: hidden;
    position: relative;
}
#header #logo {
    position: absolute;
    top: 15px;
    left: 10px;
}
.logosapo {
    position: absolute;
    top: 50px;
    right: 26px;
}

#bottom {
    background-image: url("../images/bottom.png");
    background-repeat: no-repeat;
    height: 34px;
}

#footer {
    background-image: url("../images/footer.png");
    background-repeat: no-repeat;
    height: 84px;
    margin-top: 20px;
}

#links {
    font-family: arial;
    font-size: 12px;
    color: #333333;
    float: right;
    margin-top: 30px;
    margin-right: 30px;
}

#links li {
    display: inline;
    text-decoration: none;
    cursor: pointer;
}
#links li,
#links li a {
    font-family: arial;
    font-size: 12px;
    color: #333333;
}

#links li:hover {
    text-decoration: underline;
}

#mute_btn {
    cursor: pointer;
    background-image: url("../images/mute.png");
    background-repeat: no-repeat;
    width: 21px;
    height: 19px;
    float: right;
    margin-right: 45px;
    margin-top: 3px;
}
/*#mute_btn:hover {
    background-image: url("../images/mute_over.png");
    background-repeat: no-repeat;
}
#mute_btn_active {
    background-image: url("../images/mute_active.png");
    background-repeat: no-repeat;
}*/
/****************************************
****** TOP_NAV **************************
*****************************************/
#topNav {
    font-size: 19px;
    margin-left: 214px;
    float: left;
    height: 50px;
}

#topNav ul li {
    list-style: none;
    color: #ffffff;
    float: left;
}

#topNav ul li a {
    display: inline;
    float: left;
    color: #009EE2;
}	

.tab1 {
    background-image: url("../images/menu_white_tab.png");
    background-repeat: no-repeat;
    cursor: pointer;
    height: 52px;
    width: 82px;
    padding-left: 18px;
    padding-top: 10px;
}

.tab1:hover, .tab1_active {
    background-image: url("../images/menu_tab.png");
    background-repeat: no-repeat;
}

.tab2 {
    background-image: url("../images/menu_white_tab2.png");
    background-repeat: no-repeat;
    cursor: pointer;
    height: 52px;
    width: 120px;
    padding-left: 20px;
    padding-top: 10px;
}

.tab2:hover, .tab2_active {
    background-image: url("../images/menu_tab2.png");
    background-repeat: no-repeat;
}

.item1 {
    width: 100px;
}

.item2 {
    width: 140px;
}

.item3 {
    width: 140px;
}

.item4 {
    width: 100px;
}

.item5 {
    width: 140px;
}

.item6 {
    width: 100px;
}

/****************************************
****** BREADCRUMB ***********************
*****************************************/
.breadcrumbs {
    position: absolute;
    top: 55px;
    left: 214px;
    color: #FFFFFF;
    font-size: 18px;
    font-weight: bold;
    font-family: 'Gochi Hand';
}
.breadcrumbs a {
    color: #FFFFFF;
    font-size: 18px;
    font-weight: bold;
    font-family: 'Gochi Hand';
}
.breadcrumbs a:hover {
    color: #FDC600;
}


/****************************************
****** QUARTO CONTAINER *****************
*****************************************/
#quarto_container {
    width: 960px;
    height: 500px;
    background-image: url("../images/quarto.jpg");
    background-repeat: no-repeat;
    opacity:0;
    filter:alpha(opacity=0);
}

#quarto_left {
    float: left;
    width: 520px;
    height: 495px;
}

#quarto_right {
    float: right;
    width: 436px;
    height: 495px;
}

#left_top {
    float: left;	
    height: 60px;
    width: 480px;
}

#left_bottom {
    float: left;	  
    height: 260px;
    width: 170px;
}

.pikoroom {
    position: absolute;
    top: 155px;
    left: 370px;
}
.pikolab {
    position: absolute;
    top: 160px;
    left: 200px;
}
.pikoquiz {
    position: absolute;
    top: 200px;
    left: 550px;
    -webkit-transform:scale(0.8);
    -moz-transform:scale(0.8);
    -ms-transform:scale(0.8);
    -o-transform:scale(0.8);
    transform:scale(0.8);
}

/****************************************
****** SABIAS QUE? **********************
*****************************************/
@-webkit-keyframes resize {
    0% {
        width: 64px;
        height: 49px;
    }
    50% {
        width: 84px;
        height: 63px;
    }
    100% {
        width: 85px;
        height: 64px;
    }
}
@-moz-keyframes resize {
    0% {
    width: 64px;
    height: 49px;
}
50% {
    width: 84px;
    height: 63px;
}
100% {
    width: 85px;
    height: 64px;
}
}
@-ms-keyframes resize {
    0% {
    width: 64px;
    height: 49px;
}
50% {
    width: 84px;
    height: 63px;
}
100% {
    width: 85px;
    height: 64px;
}
}
@keyframes resize {  
    0% {
    width: 64px;
    height: 49px;
}
50% {
    width: 84px;
    height: 63px;
}
100% {
    width: 85px;
    height: 64px;
}
}

#sabias_wrapper {
    float: left;
    height: 127px;
    width: 240px;
    padding-top: 40px;
}

#sabias_wrapper #sabiasQue {
    width: 70px;	
    height: 50px;
    margin-left: 142px;
    margin-top: 46px;
    cursor: pointer;
}

/*#sabias_wrapper:hover #sabiasQue img,
#sabias_wrapper.hover_effect #sabiasQue img{
    -webkit-animation-name:resize;
    -moz-animation-name:resize;
    -ms-animation-name:resize;
    -o-animation-name:resize;
    animation-name:resize;

    -webkit-animation-duration:1s;
    -moz-animation-duration:1s;
    -ms-animation-duration:1s;
    -o-animation-duration:1s;
    animation-duration:1s;

    -webkit-animation-iteration-count:4;
    -moz-animation-iteration-count:4;
    -ms-animation-iteration-count:4;
    -o-animation-iteration-count:4;
    animation-iteration-count:4;

    -webkit-animation-direction:alternate;
    -moz-animation-direction:alternate;
    -ms-animation-direction:alternate;
    -o-animation-direction:alternate;
    animation-direction:alternate;
}*/


/****************************************
****** PRATELEIRAS **********************
*****************************************/
@-webkit-keyframes resize_saco {
    0% {
    width: 33px;
    height: 53px;
}
100% {
    width: 40px;
    height: 60px;
}
}
@-moz-keyframes resize_saco {
    0% {
    width: 33px;
    height: 53px;
}
100% {
    width: 40px;
    height: 60px;
}
}
@-ms-keyframes resize_saco {
    0% {
    width: 33px;
    height: 53px;
}
100% {
    width: 40px;
    height: 60px;
}
}
@keyframes resize_saco {  
    0% {
    width: 33px;
    height: 53px;
}
100% {
    width: 40px;
    height: 60px;
}
}

#prateleiras {
    float: left;
    height: 135px;
    width: 234px;
    cursor: pointer;
}
.prateleirastop {
    height: 135px;
    width: 234px;
    display: block;
    position: absolute;
    top: 40px;
    left: 240px;
    z-index: 100;
}

#saco_room {
    position: absolute;  
    top: 53px;  
    left: 297px;  
}

#termometro_room {
    position: absolute;  
    top: 120px;  
    left: 347px; 
}

#maos_room {
    position: absolute;  
    top: 62px;  
    left: 335px;
}

#mel_room {
    position: absolute;  
    top: 120px;  
    left: 390px; 
}

#lencos_room {
    position: absolute;   
    top: 130px;
    left: 292px;
}

#vitamina_room {
    position: absolute;  
    top: 50px;  
    left: 390px;
}


.room_trophy {
    float: left;
    width: 34px;
    height: 46px;
    cursor: pointer;
}

#saco img:hover,
#saco.hover_effect #saco img{
    -webkit-animation-name:resize_saco;
    -moz-animation-name:resize_saco;
    -ms-animation-name:resize_saco;
    -o-animation-name:resize_saco;
    animation-name:resize_saco;

    -webkit-animation-duration:1s;
    -moz-animation-duration:1s;
    -ms-animation-duration:1s;
    -o-animation-duration:1s;
    animation-duration:1s;

    -webkit-animation-iteration-count:2;
    -moz-animation-iteration-count:2;
    -ms-animation-iteration-count:2;
    -o-animation-iteration-count:2;
    animation-iteration-count:2;

    -webkit-animation-direction:alternate;
    -moz-animation-direction:alternate;
    -ms-animation-direction:alternate;
    -o-animation-direction:alternate;
    animation-direction:alternate;
}


/****************************************
****** SECRETARIA ***********************
*****************************************/
#secretaria {
    float: left;
    width: 310px;
    height: 260px;
}


/****************************************
****** COMPUTADOR ***********************
*****************************************/
#computador {
    float: left;	
    width: 100px;
    height: 70px;
    margin-left: 80px;
    margin-top: 32px;
    background-image: url("../images/envelope_com_termometro.png");
    background-position: 24px 6px; 
    background-repeat: no-repeat;
    cursor: pointer;
}

#luz_wrapper {
    width: 155px;
    height: 200px;
    float: left;
}

#luz {
    width: 95px;
    height: 100px;
    float: left;
}
.luz {
    background-image: url("../images/luz.png");
    background-repeat: no-repeat;
}
/****************************************
****** POPUP DO QUARTO ******************
*****************************************/

#didYouKnow_popup_container {
    width: 100%;
    height: 100%;
   background-color: #FFCC00;
}

#didYouKnow_popup {
   background-color: #ffffff;
   -webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
    color: #FFCB33;
   width: 856px;
    
   height: 446px;
    position: absolute;
    
   margin-left: -447px;
    left: 50%;
    
   margin-top: 25px;
}

#trophy_popup_container {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: yellow;
    top: 0px;
    left: 0px;
    z-index: 1100;
}

#trophy_popup {
    width: 50%;
    height: 620px;
    position: absolute;
    left: 25%;
    top: 25%;
    z-index: 2000;
    border: 15px solid yellow;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;
}

.opacidade {
    opacity: .8;
    -moz-opacity: 0.8;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    filter: alpha(opacity=80);
}

@-webkit-keyframes resize_close {
    0% {
    height: 41px;
}
100% {
    height: 44px;
}
}
@-moz-keyframes resize_close {
    0% {
    height: 41px;
}
100% {
    height: 44px;
}
}
@-ms-keyframes resize_close {
    0% {
    height: 41px;
}
100% {
    height: 44px;
}
}
@keyframes resize_close {  
    0% {
    height: 41px;
}
100% {
    height: 44px;
}
}

#close_trofeus {
    width: 43px;
    height: 41px;
    float: right;
    margin-top: 8px;
    cursor: pointer;
    margin-right: 5px;
}

#close_popup {
    width: 43px;
    height: 41px;
    float: right;
    margin-right: 8px;
    margin-top: 22px;
    cursor: pointer;
}
#close_gallery,
#close_prevention,
#close_game {
    width: 43px;
    height: 41px;
    position: absolute;
	top: 18px;
	right: 16px;
    margin-top: 0;
    cursor: pointer;
}
#close_trofeus img:hover,
#close_trofeus.hover_effect #close_trofeus img,
#close_popup img:hover,
#close_popup.hover_effect #close_popup img,
#close_gallery img:hover,
#close_gallery.hover_effect #close_gallery img,
#close_prevention img:hover,
#close_prevention.hover_effect #close_prevention img {
    -webkit-animation-name:resize_close;
    -moz-animation-name:resize_close;
    -ms-animation-name:resize_close;
    -o-animation-name:resize_close;
    animation-name:resize_close;

    -webkit-animation-duration:1s;
    -moz-animation-duration:1s;
    -ms-animation-duration:1s;
    -o-animation-duration:1s;
    animation-duration:1s;

    -webkit-animation-iteration-count:2;
    -moz-animation-iteration-count:2;
    -ms-animation-iteration-count:2;
    -o-animation-iteration-count:2;
    animation-iteration-count:2;

    -webkit-animation-direction:alternate;
    -moz-animation-direction:alternate;
    -ms-animation-direction:alternate;
    -o-animation-direction:alternate;
    animation-direction:alternate;
}

#didYouKnow_popup object {
    margin-left: 28px;
    margin-top: 23px;
    float: left;
}

.achiev_wraper {
    padding-bottom: 10px;
    min-height: 77px;
}

#achievements {
    /*float: left;*/
    float: none;
    clear: both;
    width: 520px;
    height: 285px;
    margin-left: 260px;
    overflow: auto;
    position: relative;
}

#img_1 {
    /*background-image: url("../images/trofeuGaleria.png");
    background-repeat: no-repeat;*/
    width: 77px;
    height: 77px;
    float: left;
    margin-right: 10px;
}

#img_2 {
    /*background-image: url("../images/trofeuVideo.png");
    background-repeat: no-repeat;*/
    width: 77px;
    height: 77px;
    float: left;
    margin-right: 10px;
}

#img_3 {
    /*background-image: url("../images/trofeuLogin.png");
    background-repeat: no-repeat;*/
    width: 77px;
    height: 77px;
    float: left;
    margin-right: 10px;
}

#img_4 {
    /*background-image: url("../images/trofeuLogin.png");
    background-repeat: no-repeat;*/
    width: 77px;
    height: 77px;
    float: left;
    margin-right: 10px;
}

.achiev_content {
    width: 410px;
}

.title {
    font-size: 24px; 
    margin-left: 10px;
    /*float: left;*/
}

.descripton {
    font-size: 12px;
    margin-left: 10px;
    /*float: left;  */
    font-family: arial;
}
/****************************************
****** ARMARIO *************************
*****************************************/
#armario {
    float: left;
    width: 170px;
    height: 385px;
    cursor: pointer;
    margin-top: 38px;
}

#porta_fechada {
    background-image: url("../images/porta_fechada.png");
    background-repeat: no-repeat;
    width: 170px;
    height: 385px;
    -webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    -o-transition: opacity 0.5s ease-in-out;
    -ms-transition: opacity 0.5s ease-in-out;	
    transition: opacity 0.5s ease-in-out;
}

#porta_fechada:hover {
    opacity:0;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
}

.door_open {
    background-image: url("../images/porta_aberta.png");
    background-repeat: no-repeat;
}

/****************************************
****** LABORATORIO **********************
*****************************************/
@-webkit-keyframes resize_lab {
    0% {
    width: 234px;
    height: 453px;
}
100% {
    width: 238px;
    height: 458px;
}
}
@-moz-keyframes resize_lab {
    0% {
    width: 234px;
    height: 453px;
}
100% {
    width: 238px;
    height: 458px;
}
}
@-ms-keyframes resize_lab {
    0% {
    width: 234px;
    height: 453px;
}
100% {
    width: 238px;
    height: 458px;
}
}

@keyframes resize_lab {  
    0% {
    width: 234px;
    height: 453px;
}
100% {
    width: 238px;
    height: 458px;
}
}

#laboratorio_wrapper {
    float: right;
    width: 260px;
    height: 443px;
    cursor: pointer;
    margin-top: 43px;
}

/*#laboratorio_wrapper:hover #laboratorio img,
#laboratorio_wrapper.hover_effect #laboratorio img{
    -webkit-animation-name:resize_lab;
    -moz-animation-name:resize_lab;
    -ms-animation-name:resize_lab;
    -o-animation-name:resize_lab;
    animation-name:resize_lab;

    -webkit-animation-duration:1s;
    -moz-animation-duration:1s;
    -ms-animation-duration:1s;
    -o-animation-duration:1s;
    animation-duration:1s;

    -webkit-animation-iteration-count:2;
    -moz-animation-iteration-count:2;
    -ms-animation-iteration-count:2;
    -o-animation-iteration-count:2;
    animation-iteration-count:2;

    -webkit-animation-direction:alternate;
    -moz-animation-direction:alternate;
    -ms-animation-direction:alternate;
    -o-animation-direction:alternate;
    animation-direction:alternate;
}*/

#laboratorio img {
    padding-left: 10px;
}

/****************************************
* ECRA DO ARMARIO (div #main4)
*****************************************/
#main4 {
    margin: 0 auto;
    width: 960px;
    height: 530px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;

    -webkit-box-shadow: 1px 5px 20px 5px #000;
    -moz-box-shadow: 1px 5px 20px 5px #000;
    box-shadow: 1px 5px 20px 5px #000;
}
#armario_container {
    opacity:0;
    filter:alpha(opacity=0);
}


/****************************************
****** QUARTO CONTAINER *****************
*****************************************/
#armario_container {
    width: 960px;
    height: 500px;
    background-image: url("../images/armario.jpg");
    background-repeat: no-repeat;
}


/****************************************
* ECRA DO LABORATORIO (div #main5)
*****************************************/
#main5 {
    margin: 0 auto;
    width: 960px;

    height: 530px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;

    border-radius: 25px;

    -webkit-box-shadow: 1px 5px 20px 5px #000;
    -moz-box-shadow: 1px 5px 20px 5px #000;
    box-shadow: 1px 5px 20px 5px #000;
}

/****************************************
****** LABORATORIO CONTAINER ************
*****************************************/
#laboratorio_container {
    width: 952px;
    height: 500px;
    background-image: url("../images/laboratorio.jpg");
    background-repeat: no-repeat;
    opacity:0;
    filter:alpha(opacity=0);
}

/****************************************
* ECRA DOS TROFÉUS (div #main8)
*****************************************/

#trofeus_container {
    width: 952px;
    height: 500px;
    background-color: #FFFF99;
    background-image: url("../images/trofeus_fundo.gif");
    background-repeat: no-repeat;
    opacity:0;
    filter:alpha(opacity=0);
}

.trophy_title {
    float: left;
    font-size: 56px;
    color: #197B30;
    margin-left: 205px;
    margin-top: 42px;
}

#trofeus_top {
    float: left;
    margin-top: 20px;
    width: 515px;
    margin-left: 20px;
    margin-bottom: 28px;
}

.trofeu {
    margin-right: 24px;
}

.r {
    float: left;
}

#mainmenu {
    margin-left: 205px;
}
#mainmenu ul li {
    float: left;
    list-style: none;
    margin-right: 2px;
}
#mainmenu ul li a {
    font-size: 22px;
    color: #666666;
    font-weight: bold;
    text-align: center;
    line-height: 49px;
}
#mainmenu ul li a:hover {
    color: #ffffff;
}
#mainmenu ul li.active a {
    color: #009EE2;
}
/*#mainmenu ul li a.room {
    background-image: url(../images/home.png);
    background-repeat: no-repeat;
    background-position: top left;
    width: 60px;
    height: 52px;
    display: block;
}*/
#mainmenu ul li a.room {
    background-image: url(../images/menu_small.png);
    background-repeat: no-repeat;
    background-position: top left;
    width: 94px;
    height: 49px;
    display: block;
}
#mainmenu ul li a.shutDown {
    background-image: url(../images/off.png);
    background-repeat: no-repeat;
    background-position: top left;
    width: 60px;
    height: 52px;
    display: block;
    margin-left: 6px;
}
#mainmenu ul li a.trophy {
    background-image: url(../images/trophy.png);
    background-repeat: no-repeat;
    background-position: top left;
    width: 47px;
    height: 65px;
    display: block;
    margin-top: 7px;
    margin-left: 5px;
}
#mainmenu ul li a.cabinet {
    background-image: url(../images/menu_small.png);
    background-repeat: no-repeat;
    background-position: top left;
    width: 98px;
    height: 49px;
    display: block;
}
#mainmenu ul li a.shutDown:hover {
    background-image: url(../images/off_over.png);
    background-repeat: no-repeat;
    background-position: top left;
}
/*#mainmenu ul li a.room:hover {
    background-image: url(../images/home_over.png);
    background-repeat: no-repeat;
    background-position: top left;
}
#mainmenu ul li.active a.room {
    background-image: url(../images/home_active.png);
    background-repeat: no-repeat;
    background-position: top left;
}*/
#mainmenu ul li a.room:hover,
#mainmenu ul li.active a.room {
    background-image: url(../images/menu_small_hover.png);
    background-repeat: no-repeat;
    background-position: top left;
}
#mainmenu ul li a.cabinet:hover,
#mainmenu ul li.active a.cabinet {
    background-image: url(../images/menu_small_hover.png);
    background-repeat: no-repeat;
    background-position: top left;
}
#mainmenu ul li a.didyouknow {
    background-image: url(../images/sabias.png);
    background-repeat: no-repeat;
    background-position: top left;
    width: 64px;
    height: 50px;
    display: block;
    margin-top: 5px;
    margin-left: 5px;
}
#mainmenu ul li a.handsquiz {
    background-image: url(../images/hands.png);
    background-repeat: no-repeat;
    background-position: top left;
    width: 46px;
    height: 50px;
    display: block;
    margin-top: 5px;
    margin-left: 5px;
}
#mainmenu ul li a.desk,
#mainmenu ul li a.lab {
    background-image: url(../images/menu_medium.png);
    background-repeat: no-repeat;
    background-position: top left;
    width: 140px;
    height: 49px;
    display: block;
}
#mainmenu ul li a.desk:hover,
#mainmenu ul li.active a.desk,
#mainmenu ul li a.lab:hover,
#mainmenu ul li.active a.lab {
    background-image: url(../images/menu_medium_hover.png);
    background-repeat: no-repeat;
    background-position: top left;
}

#username {
    position: absolute;
    top: 53px;
    left: 210px;
    font-size: 20px;
}

.content {
    height: 500px;
    width: 960px;
    position: relative;
    background-image: url(../images/contentpx.png);
    background-repeat: repeat-y;
    background-position: top right;
}
.content .contentshadowtop {
    position: absolute;
    top: 0;
    left: 0;
}
.content .contentshadowbottom {
    position: absolute;
    bottom: 0;
    left: 0;
}
.contentcolor {
    background-color: #082233;
    width: 952px;
    height: 500px;
}
.ttw {
    margin-top: 6px;
}
.ttw a {
    color: #ffffff;
}
.dragarea {
    position: absolute;
    top: 36px;
    left: 408px;
    width: 476px;
    height: 321px;
    padding: 17px 0 0 0;
}

#boxes {
	margin-left: 22px;
}

#boxes li {
    cursor: pointer;
    list-style: none;
    width: 120px;
    height: 120px;
    /*background-color: yellow;*/
    margin-right: 31px;
    margin-top: 34px;
    color: #000000;
    float: left;
    font-size: 30px;
    font-family: 'Gochi Hand', cursive;
    color: #FFCB33;
    text-align: center;
}

.avatar_body {
    position: absolute;
    top: 210px;
    left: 140px;
}
.avatar_face {
    position: absolute;
    top: 124px;
    left: 160px;
}
.avatar_hair {
    position: absolute;
    top: 112px;
    left: 112px;
}
#canvas {
    margin-top: 120px;
    margin-left: 180px;
}
.avatar {
    position: absolute;
    top: 78px; 
    left: 376px;
    width: 546px;
    height: 397px;
    overflow: hidden;
}
.avatar_wear {
    width: 2184px;
    position: absolute;
    top: 0;
    left: 0;
}
.avatar_wear .choice {
    float: left;
    width: 546px;
}
.choice_header {
    color: #02431e;
    font-size: 75px;
    background-image: url(../images/choice_header.png);
    background-repeat: repeat-x;
    background-position: top left;
    height: 132px;
    width: 546px;
    text-align: center;
    line-height: 132px;
    border-radius: 5px;
    margin-bottom: 21px;
}
.choice_header .left {
    margin-left: 10px;
    margin-top: 48px;
    float: left;
    cursor: pointer;
}
.choice_header .right {
    margin-right: 10px;
    margin-top: 48px;
    float: right;
    cursor: pointer;
}
.choice_options {
    color: #02431e;
    font-size: 75px;
    background-image: url(../images/choice_options.png);
    background-repeat: repeat-x;
    background-position: top left;
    height: 244px;
    width: 546px;
    text-align: center;
    line-height: 132px;
    border-radius: 5px;
}
.choice_options .left {
    margin-left: 10px;
    margin-top: 104px;
    float: left;
}
.choice_options .right {
    margin-right: 10px;
    margin-top: 104px;
    float: right;
}
#corpele1 {
    width: 86px;
    height: 80px;
    border: 4px solid #ffffff;
    border-radius: 5px;
    background-color: #fff6c8;
    float: left;
    margin-right: 31px;
    margin-left: 38px;
    margin-top: 78px;
    cursor: pointer;
}
#corpele2 {
    width: 86px;
    height: 80px;
    border: 4px solid #ffffff;
    border-radius: 5px;
    background-color: #fddab6;
    float: left;
    margin-right: 31px;
    margin-top: 78px;
    cursor: pointer;
}
#corpele3 {
    width: 86px;
    height: 80px;
    border: 4px solid #ffffff;
    border-radius: 5px;
    background-color: #fbc78c;
    float: left;
    margin-right: 31px;
    margin-top: 78px;
    cursor: pointer;
}
#corpele4 {
    width: 86px;
    height: 80px;
    border: 4px solid #ffffff;
    border-radius: 5px;
    background-color: #b67833;
    float: left;
    margin-right: 31px; 
    margin-top: 78px;
    cursor: pointer;
}
#choice4 .roupafirst {
    margin-left: 34px;
}
.roupa {
    background-image: url(../images/roupa.png);
    background-repeat: no-repeat;
    background-position: top left;
    width: 147px;
    height: 194px;
    float: left;
    margin-right: 20px;
    margin-top: 16px;
    padding-top: 15px;
    cursor: pointer;
}
#corcabelo1 {
    width: 66px;
    height: 60px;
    border: 4px solid #ffffff;
    border-radius: 5px;
    background-color: #f5b51b;
    float: left;
    margin-right: 26px;
    margin-left: 35px;
    margin-top: 88px;
    cursor: pointer;
}
#corcabelo2 {
    width: 66px;
    height: 60px;
    border: 4px solid #ffffff;
    border-radius: 5px;
    background-color: #d0470a;
    float: left;
    margin-right: 26px;
    margin-top: 88px;
    cursor: pointer;
}
#corcabelo3 {
    width: 66px;
    height: 60px;
    border: 4px solid #ffffff;
    border-radius: 5px;
    background-color: #90401c;
    float: left;
    margin-right: 26px;
    margin-top: 88px;
    cursor: pointer;
}
#corcabelo4 {
    width: 66px;
    height: 60px;
    border: 4px solid #ffffff;
    border-radius: 5px;
    background-color: #6f3632;
    float: left;
    margin-right: 26px;
    margin-top: 88px;
    cursor: pointer;
}
#corcabelo5 {
    width: 66px;
    height: 60px;
    border: 4px solid #ffffff;
    border-radius: 5px;
    background-color: #3b3735;
    float: left;
    margin-right: 26px;
    margin-top: 88px;
    cursor: pointer;
}

#choice1 .hairfirst {
    margin-left: 44px;
}
.hair {
    background-image: url(../images/hair.png);
    background-repeat: no-repeat;
    background-position: top left;
    width: 139px;
    height: 131px;
    float: left;
    margin-right: 20px;
    margin-top: 56px;
    padding-top: 0;
    cursor: pointer;
}


/****************************************
* ECRA DA SECRETÁRIA
*****************************************/
#questionnaire_container {
    background-image: url(../images/secretaria.jpg);
    background-repeat: no-repeat;
    height: 500px;
    opacity:0;
    filter:alpha(opacity=0);
}

.answer {
    cursor: pointer;
    padding: 5px 0 5px 0 !important;
    width: 160px;
    text-align: center;
    -webkit-border-radius: 28px;
    -moz-border-radius: 28px;
    -webkit-box-shadow: 0px 1px 3px #666666;
    -moz-box-shadow: 0px 1px 3px #666666; 
    border: solid #07a9df 2px;
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#05e3f3), to(#07a9df));
    background: -moz-linear-gradient(top, #05e3f3, #07a9df);
    -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#05e3f3, endColorStr=#07a9df);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#05e3f3, endColorStr=#07a9df);
    display:inline-block;
    margin-left: 90px;
    float: left;
    
    text-decoration: none;
    text-shadow: 1px 1px 3px #bdbdbd;
    color: #3d3d3d;
    font-size: 25px;
    margin-top: 10px;
}
/*
.answer:active,
.answer:hover {
    background: #07a9df;
    color: #ffffff;
    text-shadow: 1px 1px 3px #d3d3d3;
}
*/
.clicked {
    background: #07a9df;
    color: #ffffff;
    text-shadow: 1px 1px 3px #d3d3d3;
}

.btn_quarto,
.questionnaire_nav {
    cursor: pointer;
    padding: 5px;
    width: 120px;
    -webkit-border-radius: 28px;
    -moz-border-radius: 28px;
    -webkit-box-shadow: 0px 1px 3px #666666;
    -moz-box-shadow: 0px 1px 3px #666666; 
    border: solid #70a000 2px;
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#aee001), to(#70a000));
    background: -moz-linear-gradient(top, #aee001, #70a000);
    -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#aee001, endColorStr=#70a000);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#aee001, endColorStr=#70a000);
    display:inline-block;
    float: right;
    
    text-decoration: none;
    text-shadow: 1px 1px 3px #bdbdbd;
    color: #3d3d3d;
    font-size: 25px;
    padding-left: 35px;
}

.answer div {
    padding-left: 3px;
}

.btn_quarto:active,
.questionnaire_nav:active {
    background: #70a000;
    color: #ffffff;
    text-shadow: 1px 1px 3px #d3d3d3;
}

#question_container {
    height: 360px;
    width: 560px;
    float: left;
    margin-left: 65px;
}

#hello {
    position: absolute;
    top: 31px;
    left: 130px;
}

#nav {
    text-align: center;
}

#nav a {
    background-image: url(../images/bullet.png);
    background-repeat: no-repeat;
    margin: 0;
    padding: 3px 7px;
}

#nav a.activeSlide {
    background-image: url(../images/bullet_active.png);
    background-repeat: no-repeat;
}

#nav a:focus {
    outline: none;
}

#slider_container {
    position: absolute;
    top: 80px;
    left: 255px;
    color: black;
    font-size: 27px;
    width: 400px;
    height: 160px;
}

#slider_container ul {
    height: 155px;
    list-style-type: none;
    width: 400px;
}

#slider_container ul li {
    width: 100%;
    text-align: center;
}

#slider_container p {
    text-align: center;
}

#hello img {
    width: 705px;
    height: 375px;
}

#question {
    font-size: 28px;
    float: left;
    width: 470px;
    margin-top: 50px;
    color: black;
    margin-left: 50px;
    height: 200px;
}

#result {
    color: black;
    font-size: 20px;
    text-align: center;
    float: left;
    margin-left: 20px;
    margin-top: 35px;
    width: 560px;
}

.result_text {
    float:left;
    width: 380px;
    padding-top: 5px;
    font-size: 20px;
}

.result_text :nth-child(2)  {
    /*margin-top: 20px;*/
}

.result_text :nth-child(3)  {
    /*margin-top: 20px;*/
}

#result img {
    float: right;
    width: 106px;
    height: 291px;
}

#result canvas {
    margin-top: 1px;
    margin-left: 1px;
}

#symptoms {
    height: 360px;    
    width: 250px;  
    float: left;
    margin-left: 20px;
}

#list {
    font-size: 22px;
    float: left;
    width: 210px;
    margin-top: 25px;
    color: #FF3232;
    margin-left: 20px;
    height: 300px;
}
#list .nosym {
    text-decoration:line-through;
    color: #333333;
}
#question_container_3 p:nth-child(1),
#question_container_2 p:nth-child(1) {
    font-size: 28px;
    color: black;
    text-shadow: 1px 1px 3px #BDBDBD;
}

#question_container_3 p:nth-child(2),
#question_container_2 p:nth-child(2) {
    font-size: 18px;
    color: black;
    text-shadow: 1px 1px 3px #BDBDBD;
}

#title {
    margin-left: 60px;
    padding-top: 10px;
    padding-bottom: 10px;
}

#title p {
    color: black;
    text-shadow: 1px 1px 3px #bdbdbd;
}

#nav_quarto,
#next_screen,
#nav_next {
    margin-right: 70px;
    margin-top: 15px;
}
#prev_screen {
    margin-left: 70px;
    float: left;
    clear: left;
    display: none;
    margin-top: 15px;
}
#nav_prev {
    margin-left: 70px;
    float: left;
    clear: left;
    display: none;
    margin-top: 15px;
}

#question_container_2,
#question_container_3 {
    height: 345px;
    width: 560px;
    float: left;
    margin-top: 18px;
    margin-left: 95px;
}

#hero {
    background-image: url(../images/hero.png);
    background-repeat: no-repeat;
    float: left;
    width: 210px;
    height: 320px;
    margin-top: 35px;
    margin-left: 40px;
}


#options {
    float: left;
    height: 280px;
    margin-top: 10px;
}

.option {
  cursor: pointer;
  width: 245px;
  border: solid #6B6B6B 1px;
  -webkit-border-radius: 28px;
  -moz-border-radius: 28px;
  -webkit-box-shadow: 0px 1px 3px #666666;
  -moz-box-shadow: 0px 1px 3px #666666; 
  background: -webkit-gradient(linear, 0 0, 0 100%, from(#5EE3F1), to(#37A1D0));
  background: -moz-linear-gradient(top, #5EE3F1, #37A1D0);
  -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#5EE3F1, endColorStr=#37A1D0);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#5EE3F1, endColorStr=#37A1D0);
  display:inline-block;
  height: 45px;
  margin-bottom: 6px;
  float: left;
  margin-left: 10px;
}

.option:hover {
  background: -webkit-gradient(linear, 0 0, 0 100%, from(#00A100), to(#00E100));
  background: -moz-linear-gradient(top, #00A100, #00E100);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00A100, endColorstr=#00E100);
}

.option_label {
  color: white;
  font-size: 20px;
  line-height: 22px;
  text-decoration: none;
  text-shadow: 1px 1px 3px #666666;
}

#label1_q1 {
    margin-left: 67px;
    margin-top: 12px;
}

#label2_q1 {
    margin-left: 30px;
    margin-top: 12px;   
}

#label4_q1, #label8_q1 {
    margin-left: 57px;  
    margin-top: 10px;
}


#label5_q1 {
    margin-left: 14px;  
    margin-top: 10px;
}

#label10_q1, #label3_q1, #label6_q1 {  
    text-align: center;
}

#label7_q1 {
    margin-left: 21px;  
    margin-top: 9px; 
}

#label9_q1 {
  margin-top: 10px;
  margin-left: 10px;
}

#label1_q2 {
    margin-top: 10px;  
    margin-left: 67px;
}

#label2_q2 {
    margin-top: 10px;  
    margin-left: 45px;    
}

#label3_q2 {
    margin-top: 10px;  
    margin-left: 37px;
}

#label4_q2 {
    margin-top: 10px;  
    margin-left: 15px; 
}

#label5_q2 {
    text-align: center;
    margin-left: 10px;
}

.clicked_2 {
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#00A100), to(#00E100));
  background: -moz-linear-gradient(top, #00A100, #00E100);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00A100, endColorstr=#00E100);
    color: #ffffff;
    text-shadow: 1px 1px 3px #d3d3d3;
}

#thanks p {
    color: black;
    font-size: 30px;
    position: absolute;
    top: 120px;
    left: 122px;
    text-align: center;
}

#thanks img {
    margin-left: 75px;
    margin-top: 50px;
}

#nav_armario {
    margin-right: 60px;
    margin-top: 15px;
}
h2.gallery {
	background-image: url(../images/gallery_h2.png);
	background-repeat: no-repeat;
	background-position: 37px 0;
	padding-left: 101px;
	color: #97CB43;
	font-size: 37px;
	font-family: 'Gochi Hand', cursive;
	line-height: 48px;
	width: 375px;
	padding-bottom: 9px;
	border-bottom: 3px double #82C728;
}
h2.prevention {
	background-image: url(../images/prevention_h2.png);
	background-repeat: no-repeat;
	background-position: 37px 0;
	padding-left: 101px;
	color: #97CB43;
	font-size: 37px;
	font-family: 'Gochi Hand', cursive;
	line-height: 48px;
	width: 375px;
	padding-bottom: 9px;
	border-bottom: 3px double #82C728;
}
h2.game {
	background-image: url(../images/game_h2.png);
	background-repeat: no-repeat;
	background-position: 37px 0;
	padding-left: 101px;
	color: #97CB43;
	font-size: 37px;
	font-family: 'Gochi Hand', cursive;
	line-height: 48px;
	width: 375px;
	padding-bottom: 9px;
	border-bottom: 3px double #82C728;
}
.galdiv {
	margin-top: 1px;
	border-top: 1px solid #82C728;
	margin-bottom: 21px;
}
.gallerymenu {
	background-color: #8FC12F;
	border-radius: 8px;
	width: 405px;
	height: 50px;
	margin-left: 34px;
	margin-top: 7px;
}
.gallerymenu li {
	color: #FFCB33;
	font-size: 20px;
	font-family: 'Gochi Hand', cursive;
	width: 111px;
	list-style: none;
	float: left;
	text-align: center;
	padding: 0 10px 0 10px;
        border-right: 1px solid #CEC731;
        border-left: 1px solid #009900;
}
.gallerymenu li.on {
	color: #ffffff;
}
.gallerymenu li:last-child {
	line-height: 48px;
	background-image: url(../images/upload.png);
	background-repeat: no-repeat;
	background-position: 20px 13px;
	padding-left: 30px;
	width: 91px;
        border-right: none;
        cursor: pointer;
}

#publicgallery {
    cursor: pointer;
}

.gallerymenu li:first-child {
    border-left: none;
    cursor: pointer;
}
.gallerycontent {
	width: 406px;
	height: 220px;
	overflow: auto;
	margin-left: 34px;
	padding-left: 10px;
}
.preventioncontent {
	width: 442px;
	height: 297px;
	overflow: hidden;
	padding-left: 34px;
        padding-top: 10px;
        border-top: 1px solid #82C728;
        margin-top: 1px;
}
.preventioncontentinner {
        width: 420px;
	height: 285px;
        overflow: auto;
        position: relative;
}
.gallerycontent div.foto {
	width: 105px;
	height: 125px;
	/*float: left;*/
	overflow: hidden;
	margin-right: 36px;
}
.gallerycontent img {
	width: 105px;
        margin-bottom: 10px;
}
#Image_image_file {
    opacity:0;
    filter:alpha(opacity=50);
    height: 46px;
    cursor: pointer;
    width: 84px;
}
/**html #Image_image_file {
        width: 100px;
}*/
#filebutton {
    background-image: url(../images/filebtn.png);
    background-repeat: no-repeat;
    background-position: center center;
    margin-bottom: 16px;
    text-align: center;
    width: 117px;
    margin-left: 178px;
    overflow: hidden;
}
#fileconfirm {
    text-align: center;
}
#filename {
    text-align: center;
}

#filepath {
    width:100%;
    text-align: center;
    margin-bottom: 16px;
}

#filename input {
    text-align: left; 
    color: #999999;
    font-size: 20px;
    font-family: 'Gochi Hand', cursive;
    padding-left: 16px;
    margin: 16px 0 16px 0;
}
.videos {
    margin-left: 17px;
    margin-top: 60px;
}
p.image {
    background-image: url(../images/imagebkg.png);
    background-repeat: no-repeat;
    background-position: center left;
    padding-left: 60px;
    color: #FFCB33;
    font-size: 22px;
    font-family: 'Gochi Hand', cursive;
    padding-top: 14px;
    padding-bottom: 14px;
}
p.pdf {
    background-image: url(../images/pdfbkg.png);
    background-repeat: no-repeat;
    background-position: center left;
    padding-left: 60px;
    color: #FFCB33;
    font-size: 22px;
    font-family: 'Gochi Hand', cursive;
    padding-top: 14px;
    padding-bottom: 14px;
}
p.video {
    background-image: url(../images/videobkg.png);
    background-repeat: no-repeat;
    background-position: center left;
    padding-left: 60px;
    color: #FFCB33;
    font-size: 22px;
    font-family: 'Gochi Hand', cursive;
    padding-top: 14px;
    padding-bottom: 14px;
}
p.link {
    background-image: url(../images/linkbkg.png);
    background-repeat: no-repeat;
    background-position: center left;
    padding-left: 60px;
    color: #FFCB33;
    font-size: 22px;
    font-family: 'Gochi Hand', cursive;
    padding-top: 14px;
    padding-bottom: 14px;
}
p.link a,
p.image a,
p.video a,
p.pdf a {
    color: #FFCB33;
    font-size: 22px;
    font-family: 'Gochi Hand', cursive;
}



/***************************************************
QUIZ
***************************************************/

#container_quiz {
     
    margin: 0 auto;
    width: 952px;
    height: 500px;
    background-color: #000000;
    

}

.init {
    background-image: url("../images/quiz/fundo_vazio.jpg");
    background-repeat: no-repeat;
    background-position: center;
}

.quizstarted {
     background-image: url("../images/quiz/background.jpg");
     background-repeat: no-repeat;
    background-position: center;
}

#container_quiz h4 {
    position: absolute;
    top: 10px;
    left: 50px;
    background-color: #000000;
    width: 570px;
    padding: 2px;
    text-align: center;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;
    -webkit-box-shadow: 2px 2px 2px 1px #ffffff;
    -moz-box-shadow: 2px 2px 2px 1px #ffffff;
    box-shadow: 2px 2px 2px 1px #ffffff;
}

#container_quiz h3 {
    position: relative;
    top: -80px;
    left: 35px;
    text-shadow: 1px 1px 3px #000000;
    filter: dropshadow(color=#000000, offx=1, offy=1);
}

#container_quiz h1 {
    position: relative;
    top: -80px;
    left: 140px;
    font-family: 'Rammetto One', cursive, Arial, serif;
    font-weight: 400;
    text-shadow: 1px 1px 3px #000000;
    filter: dropshadow(color=#000000, offx=1, offy=1);
}

#container_quiz ul {
    position: absolute;
    top: 230px;
    left: 50px;
}

#container_quiz li {
    list-style: none;
    margin: 15px;
    background-color: #000000;
    width: 450px;
    padding:4px;
    text-align: center;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: 1px 1px 1px 3px #ffffff;
    -moz-box-shadow: 1px 1px 1px 3px #ffffff;
    box-shadow: 1px 1px 1px 3px #ffffff;
}

#container_quiz a {
    text-decoration: none; 
    color: #ffffff;
}
#container_quiz li:hover{
    background-color: #457BD9;
}
#container_quiz li.answered {
    background-color: #457BD9;
    color: #000000;
}

#container_quiz li.opt {
    cursor: pointer;
}

#container_quiz #next, #nextLevel, #exitQuiz {
  position: relative;
  top: 430px;
  left: 177px;
  font-family: Arial;
  color: #ffffff;
  font-size: 18px;
  padding: 10px;
  text-decoration: none;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -webkit-box-shadow: 0px 1px 3px #666666;
  -moz-box-shadow: 0px 1px 3px #666666;
  text-shadow: 1px 1px 3px #666666;
  border: solid #528a15 2px;
  background: -webkit-gradient(linear, 0 0, 0 100%, from(#93cd55), to(#528a15));
  background: -moz-linear-gradient(top, #93cd55, #528a15);
  -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#93cd55, endColorStr=#528a15);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#93cd55, endColorStr=#528a15);
  display:inline-block;
}
#container_quiz #next:hover, #nextLevel:hover {
  background: #528a15;
}

#tooltip {
	position:absolute;
	border:1px solid #333;
	background:#ebebeb;
	padding:5px 10px;
	font-size: 14px;
        font-family: 'Lucida Grande', Arial, sans-serif;
        color:#333;
	display:none;
        -webkit-border-radius: 6px;
        -moz-border-radius: 6px;
        border-radius: 6px;
}

#container_quiz #characters {
    margin-left: 190px;
    padding-top: 97px;
    width: 520px;
}

#container_quiz .avatar {
    width: 120px;
    height: 200px;
    float:left;
    position: static;
    margin-top: 60px;
}

#container_quiz .avatar img {
    height: 180px;
    width: 80px;
}

#container_quiz .avatar img:hover {
     width:84px;
     height: 200px;
}

#container_quiz .avatar img.avatarBig{
    width:84px;
    height: 200px;
}

#nomePlayer1 {
    position: absolute;
    top: 16px;
    left: 740px;
    width: 170px; 
    text-align:center;
    font-size: 16px;
    font-weight: bold;
    line-height: 26px;
}

#nomePlayer2 {
    position: absolute;
    top: 140px;
    line-height: 26px;
    left: 740px;
    width: 170px; 
    text-align:center;
    font-size: 16px;
    font-weight: bold;
}

#nomePlayer3 {
    position: absolute;
    top: 264px;
    left: 740px;
    width: 170px; 
    text-align:center;
    font-size: 16px;
    font-weight: bold;
    line-height: 26px;
}

#nomePlayer4 {
    position: absolute;
    top: 387px;
    left: 740px;
    width: 170px; 
    text-align:center;
    font-size: 16px;
    font-weight: bold;
    line-height: 26px;
}

#startQuiz {
   position: absolute;
   top: 443px;
   left: 759px;
  font-family: Arial;
  color: #ffffff;
  font-size: 18px;
  padding: 10px;
  text-decoration: none;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -webkit-box-shadow: 0px 1px 3px #666666;
  -moz-box-shadow: 0px 1px 3px #666666;
  text-shadow: 1px 1px 3px #666666;
  border: solid #528a15 2px;
  background: -webkit-gradient(linear, 0 0, 0 100%, from(#93cd55), to(#528a15));
  background: -moz-linear-gradient(top, #93cd55, #528a15);
  -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#93cd55, endColorStr=#528a15);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#93cd55, endColorStr=#528a15);
  display:inline-block;
}

#startQuiz:hover {
  background: #528a15;
}

.quiz_alert {
   color: #000000;
   display:none;
   position:absolute;
   top:1px;
   left:1px;
   width:300px;
   background-color: #ffffff;
   border-style:solid;
   border-width:1px;
   padding:15px 20px 5px 20px;
   -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
   }

#certasPlayer1 {
    position:absolute;
    top: 75px;
    left: 740px;
    width: 100px; 
    text-align:center;
    font-size: 30px;
    font-weight: bold;
   }
   
 #certasPlayer2 {
    position:absolute;
    top: 200px;
    left: 740px;
    width: 100px; 
    text-align:center;
    font-size: 30px;
    font-weight: bold;
 }
 #certasPlayer3 {
    position:absolute;
    top: 325px;
    left: 740px;
    width: 100px; 
    text-align:center;
    font-size: 30px;
    font-weight: bold;
}
 #certasPlayer4 {
    position:absolute;
    top: 443px;
    left: 740px;
    width: 100px; 
    text-align:center;
    font-size: 30px;
    font-weight: bold;
}
.activeplayer {
    color: #ffffff;
    background-color: #FDC600;
}
#level {
    background-color: #000000;
    border-radius: 7px 7px 7px 7px;
    box-shadow: 2px 2px 2px 1px #FFFFFF;
    right: 245px;
    padding: 2px;
    position: absolute;
    text-align: center;
    top: 10px;
    width: 70px;
    color: #FFFFFF;
    font-family: 'Gochi Hand',cursive;
    font-size: 20px;
}
.popup {
    width: 300px;
    height: 364px;
    background-image: url(../images/popup.png);
    background-repeat: no-repeat;
    background-position: top left;
    padding: 30px 30px 30px 30px;
    color: #000000;
    font-size: 20px;
    line-height: 24px;
    text-align: center;
    font-family: 'Gochi Hand';
    position: absolute;
    left: 300px;
    top: 120px;
    z-index: 10;
}
.popup b {
    color: #FF3232;
}
#closetermometro,
#closemel,
#closesacoagua,
#closelencos,
#closevitc,
#closehands {
    position: absolute;
    top: 20px;
    left: 290px;
}
#closetermometro img:hover,
#closetermometro.hover_effect #closetermometro img,
#closemel img:hover,
#closemel.hover_effect #closemel img,
#closesacoagua img:hover,
#closesacoagua.hover_effect #closesacoagua img,
#closelencos img:hover,
#closelencos.hover_effect #closelencos img,
#closevitc img:hover,
#closevitc.hover_effect #closevitc img,
#closehands img:hover,
#closehands.hover_effect #closehands img {
    -webkit-animation-name:resize_close;
    -moz-animation-name:resize_close;
    -ms-animation-name:resize_close;
    -o-animation-name:resize_close;
    animation-name:resize_close;

    -webkit-animation-duration:1s;
    -moz-animation-duration:1s;
    -ms-animation-duration:1s;
    -o-animation-duration:1s;
    animation-duration:1s;

    -webkit-animation-iteration-count:2;
    -moz-animation-iteration-count:2;
    -ms-animation-iteration-count:2;
    -o-animation-iteration-count:2;
    animation-iteration-count:2;

    -webkit-animation-direction:alternate;
    -moz-animation-direction:alternate;
    -ms-animation-direction:alternate;
    -o-animation-direction:alternate;
    animation-direction:alternate;
}
.popup {
    opacity:0;
    filter:alpha(opacity=0);
    left: -300px;
}
#termometro,
#mel,
#sacoagua,
#lencos,
#vitC,
#hands {
    cursor: pointer;
}
.creditos {
    float: left;
    width: 600px;
    font-size: 11px;
    font-family: Arial;
    color: #858383;
}
.creditos p {
    line-height: 71px;
    margin-left: 21px;
}
.creditos img {
    margin-left: 5px;
    margin-right: 22px;
}
.creditos a img {
    border: none;
}
.heroi {
    position: absolute;
    bottom: 22px;
    right: 38px;
}
.logintext {
    color: #000000;
    font-size: 20px;
    font-family: 'Gochi Hand', cursive;
    height: 265px;
    left: 150px;
    position: relative;
    top: 242px;
    width: 280px;
    text-align: center;
}
.closelogin {
    position: absolute;
    top: -10px;
    right: -28px;
    cursor: pointer;
}
.post1,
.post3,
.post5 {
    background-image: url("../images/post1.png");
    background-repeat: no-repeat;
    background-position: top left;
    width: 408px;
    height: 409px;
    left: 47px;
    position: absolute;
    top: 178px;
}
.post2,
.post4 {
    background-image: url("../images/post2.png");
    background-repeat: no-repeat;
    background-position: top left;
    width: 410px;
    height: 411px;
    left: 492px;
    position: absolute;
    top: 171px;
}
.post4 {
    /*left: 1446px;*/
    display: none;
}
.post3 {
    /*left: 1001px;*/
    display: none;
}
.post5 {
    /*left: 1955px;*/
    display: none;
}
.post1 #rgist_main2,
.post3 #rgist_main2,
.post5 #rgist_main2 {
    position: static;
    margin-top: 35px;
    margin-left: 52px;
}
.post2 #rgist_main3,
.post4 #rgist_main3 {
    position: static;
    margin-top: 39px;
    margin-left: 64px;
}
.post1 .title_register,
.post2 .title_register,
.post3 .title_register,
.post4 .title_register,
.post5 .title_register {
    color: #009EE1;
    font-size: 31px;
    font-family: 'Gochi Hand', cursive;
    text-transform: uppercase;
}
p.nota {
    font-size: 10px;
    font-family: Arial;
    color: #111111;
    float: none;
    clear: both;
    margin-top: 6px;
    margin-left: 12px;
    width: 276px;
}
.post2 .bt_entrar,
.post4 .bt_entrar {
    float: right;
    margin-right: 20px;
}
::-webkit-input-placeholder {
   color: #B8BFC5;
   font-size: 12px !important;
}

:-moz-placeholder {  
   color: #B8BFC5; 
   font-size: 12px !important;
}
.label_register {
    color: #333333;
    font-size: 20px;
    font-family: 'Gochi Hand', cursive;
    line-height: 20px;
}
.nota2 {
    font-size: 12px;
    font-family: Arial;
    color: #333333;
    margin: 0;
    margin-bottom: 14px;
}
.vacine_row input {
    margin-left: 37px;
}
.vacine_row input + label {
    color: #00A0E3;
    font-size: 25px;
}
.vacine_row select {
    margin-right: 10px;
    margin-bottom: 10px;
}
.vacine_row + .vacine_row {
    margin-top: 16px;
}
.linhavacina {
    display: none;
}
#vacineday {
    margin-left: 37px;
}
.respiratory_row input {
    float: left;
    margin-right: 4px;
    clear: left;
}
.respiratory_row input + label {
    font-size: 12px;
    font-family: Arial;
    color: #333333;
    font-weight: bold;
    line-height: 14px;
    display: inline;
    float: left;
    width: 260px;
    margin-bottom: 10px;
}
.respiratory_row input + label span {
    font-size: 10px;   
    font-weight: normal;
}
.encarregado {
    color: #333333;
    font-size: 25px;
    font-family: 'Gochi Hand', cursive;
    font-weight: bold;
}
#parent_gripenet_username_textField {
    padding-top: 38px;
}
#parent_gripenet_username_textField input + label {
    color: #00A0E3;
    font-size: 25px;
}
#parent_gripenet_username_textField input {
    margin-left: 63px;
}
.username_gripenet {
    margin-left: 32px;
    margin-bottom: 5px;
    float: none;
    clear: both;
}
.post5 .bt_entrar {
    position: absolute;
    right: 31px;
    bottom: 38px;
}
.higiene {
    position: absolute;
    top: 96px;
    left: 56px;
}
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    background-image: url(../images/px.png);
    background-repeat: repeat-xy;
    background-position: top left;
    width: 100%;
    height: 100%;
    z-index: 500;
    display: none;
}
.videoframe {
    width: 500px;
    height: 281px;
    margin: auto;
    position: relative;
    top: 50%;
    margin-top: -140px;
    background-color: #ffffff;
    z-index: 500;
}

.btn_game {
    color: #575757;
    cursor: pointer;
    padding: 5px;
    text-transform: uppercase;
    width: 240px;
    text-decoration: none;
    -webkit-border-radius: 28px;
    -moz-border-radius: 28px;
    border-radius: 28px;
    -webkit-box-shadow: 0px 1px 3px #666666;
    -moz-box-shadow: 0px 1px 3px #666666;
    box-shadow: 0px 1px 3px #666666;
    text-shadow: 1px 1px 1px #C6C6C6;
    border: solid #EC650C 2px;
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#F89713), to(#EC650C));
    background: -moz-linear-gradient(top, #F89713, #EC650C);
    background-color: #EC650C;
    display: inline-block;
    font-weight: bold;
    font-size: 20px;
    font-family: 'Gochi Hand';
    float: right;
    text-align: center;
}
.msgerrogripenet {
    display: none;
}
.close_overlay {
    position: absolute;
    top: -45px;
    right: -7px;
}
#birthmonth.focus {
    border: 3px solid #EC650C;
}
#birthyear.focus {
    border: 3px solid #EC650C;
}
.vaclabel.focus {
    color: #EC650C;
}
.resplabel.focus {
    color: #EC650C;
}
.errorMessage {
    font-size: 17px;
    color: #EC650C;
}
#vacinemonth {
    margin-left: 38px;
}