/* To avoid ios styling */

@font-face {
  font-family: Blogger_Sans_Bold;
  src: url('../../css/fonts/Blogger Sans-Bold.otf');
  text-rendering: optimizeLegibility;
}


input[type=button], input[type=submit]{-webkit-appearance: none;}

#game_outer{position:relative; font-family: Blogger_Sans_Bold;}

#winIntro.popup {background: none;
width: 100%;
text-align: center;
box-shadow: none;
top: 140px;
left: -30px;}



.popup .popupTitle{font-weight: bold; font-size:2em; text-align: center; margin: 10px 0px;}



/* Top layer */
#topLayer{;position:absolute; top:0px; left:0px; z-index:100; width:960px; height:600px;}

/* Top interface */
#topInterface{position: absolute; top:6px; left:0; z-index: 90; width: 900px;}
#mainScoreLabel{position: absolute; right:60px;
    font-size: 2.5em;
    font-weight: bold;
    text-align: right;
    color:#355987;
}

/* Good / Bad */
.green{color:#6fff64;}
.red{color:#f9a656;}



#questionIndexLabel{position: absolute; left:58px; bottom:42px;
    font-size: 1.9em; color:#dcf2fc; font-weight: bold;
    line-height: 0.7em;
}
#questionIndexLabel.buttonsMode{}/* left:380px; */

/*
orange : fc7c00
bleu : 427ecf
cyan : dcf2fc
green : 61cd51
brown : dfa000
dark yellow : fee145
dark brown : 994d04
*/
#questionTextLabel{
  background:url(images/quiz_question_bg.png) repeat-y 50%;
  background-size: 645px 105px;

  display: table; position: absolute; top: 132px; left: 112px; 
  width: 645px; height: 133px;
  text-align:center; font-size: 2em; color:#2d60a4;

  padding: 10px 20px 10px 20px;

  /*text-shadow: -1px 0 1px #355987, 0 1px 1px #355987, 1px 0 1px #355987, 0 -1px 1px #355987;*/
}
#questionTextLabel .text_content{display: table-cell; vertical-align: middle;}
#questionTextLabel.keyboardDisplayed{top:410px;}
#questionTextLabel .verb{font-weight: bold; color:#fc7c00; font-style: italic;}
#questionTextLabel .textSup{color:#d6ff7d;}


#questionTextLabel .line1{font-size:0.8em;}
#questionTextLabel .line2{font-size:1em;}
#questionTextLabel .line3{font-size:1.2em; font-weight: bold;}
#questionTextLabel em{font-style: normal;}
#questionTextLabel .line1 small{font-size:1em;}
#questionTextLabel .line1 em{font-size:1em; font-weight: bold;}
#questionTextLabel .line2 small{font-size:0.8em;}
#questionTextLabel .line2 em{font-size:1.2em; font-weight: bold;}
#questionTextLabel .line3 small{font-size:0.8em; font-weight: normal;}



/* For tablets */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) { 
  #questionLabelBloc{top:7px;}
  #mainScoreLabel{top: -5px; text-align: left; left:50px; right:auto;}



}





/* FOR TABLETS */
/*-----------------------------------*/
@media only screen and (max-device-width : 1300px){
    #topInterface{top:64px !important;}


    #mainScoreLabel{ left:50px; right:auto; font-size:3em; color:#FFF !important;}
    

    .answerButton{line-height: 0.9em !important;}
    
    .answerButton .button_text.small{font-size:0.8em !important;}
    .answerButton .button_text.super_small{letter-spacing: -0.08em !important;}

   /*
   #mainScoreLabel, #questionIndexLabel, #questionTextLabel{ color:#FFF !important;
        text-shadow: -1px 0 2px #000, 0 1px 2px #000, 1px 0 2px #000, 0 -1px 2px #000;}
        */
}

/* FOR IPHONES */
/*-----------------------------------*/
@media only screen and (max-width: 480px), only screen and (max-device-width: 480px) {
   .answerButton{font-size:2.2em !important;  width: 380px !important;
    }
    #questionTextLabel{font-size:2.5em;line-height: 1em ;}
    #button1{left:60px !important;}
    #button3{left:60px !important;}
    #button2{left:470px !important;}
    #button4{left:470px !important;}
}



#questionTextSupLabel{font-size: 1.5em; color:#666; margin-left:10px;}

#buttonRefreshQuestion{position: absolute; right:10px; top:25px;}


#labelAboveButtons{position: absolute; top: 275px; left: 150px; 
  width: 588px; height: 67px;
  background: url(images/labelAboveButtonsBg.png) no-repeat;
  background-size: 588px 67px;
  text-align:center;
  font-size: 1.6em; color:#ce6bdd;
}
#labelAboveButtonsTable{display:table;width: 100%; height: 100%;padding: 0px 60px 0 20px;}
#labelAboveButtonsInner{vertical-align: middle; display:table-cell;line-height: 0.9em;}
#labelAboveButtons.subjectOnly{color:#279e1e; font-size:2em;}

/* winNextEvent */
#game_outer #winNextEvent.popup{left:50%; margin-left: -150px; padding: 0px 20px; height: 220px; top:180px;padding-top: 30px;}
#winNextEvent tr:first-child{height: 300px;}
#winNextEvent tr:last-child{height: 100px; text-align: center;}
#winNextEvent .label{
padding:0px 20px;
color:#1a62b1;
text-align: center;
font-size:1.5em;
font-weight: bold;
}

#game_outer #winNextEvent.popup .note{margin-top: 20px; margin-bottom:30px;}

/* winEndWarmup */
#winEndWarmup{width: 520px !important; left: 188px !important; color:#427ECF;padding:10px 30px;}
#endWarmupBloc_1{margin-top:100px; max-height: 180px; overflow: hidden;}/* margin-top will be modified by js. max-height and overflow are for too big font-size on some devices */
#endWarmupBloc_2{max-height: 180px; overflow: hidden;}/* max-height and overflow are for too big font-size on some devices */
#endWarmupTitle1{margin-bottom: 50px;}
#endWarmupYourScoreNote, #endWarmuptimebonusNote{float:left; margin-right: 40px; margin-left: 40px;}
#endWarmuptimebonusNote{}
#endWarmupScoreBloc{margin-top:10px;margin-left: 20px;}

#endWarmupYourScoreLabel,#endWarmupPlus,#endWarmupTimebonusLabel,#endWarmupEqual,#endWarmupTotalLabel{font-weight:bold; font-size:2em; float:left;}
#endWarmupYourScoreLabel, #endWarmupTimebonusLabel{text-align: right; width:95px;}
#endWarmupPlus, #endWarmupEqual{width:40px; text-align: center;}
#endWarmupTotalLabel{font-size: 3em; margin-top: -11px; margin-left:10px;}


#endWarmupTitle2{margin-top: 50px; margin-bottom: 30px;}

#winEndWarmup .buttonNextEvent{margin-top: 20px;}



/* QUIZ BUTTONS */
.answerButton{
  color:#545454;
  border:solid 3px #FFF;
  background:#ECECEC;
  position: absolute; width: 320px; height: 50px; display: block;
  font-size: 1.7em;
  webkit-box-shadow: 2px 3px 0px rgba(0,0,0,0.2);
  box-shadow: 2px 3px 0px rgba(0,0,0,0.2);
  font-weight: normal;
  padding:5px;

  line-height: 0.7em; /* For quizz images, the double lines buttons */
}
.answerButton.button_text.small{font-size: 1.5em;}






a.answerButton:hover{color:#545454;}

#button1{top:330px; left:115px;}
#button2{top:330px; left:465px;}
#button3{top:410px; left:115px;} /* CAUTION : this left value is directly put in the code of _jeux/_common/QuizWrapper001.js. Search : css('left', 90) */
#button4{top:410px; left:465px;}



.answerButton.big_buttons{height: 65px;-webkit-border-radius: 30px; border-radius: 30px;}
#button1.big_buttons{top:370px; left:90px;}
#button2.big_buttons{top:370px; left:460px;}

.button_centered{left:270px !important;}

.answerButton .dot{width:20px; height: 20px; border-radius:20px; background:#F00; display: inline-block;margin-bottom: -2px; margin-left: 3px;}
.answerButton .dot.dot0{background-color: #FF5439;}
.answerButton .dot.dot1{background-color: #449D44;}
.answerButton .dot.dot2{background-color: #1789CF;}
.answerButton .dot.dot3{background-color: #FED135;}
.answerButton .button_text.button_text_wo_flag{margin-left: 9px;}



/* A VIRER
.answerButton{font-size:2.5em !important; width: 380px !important;
height: 80px;}
#button1{left:60px !important;top:300px;}
#button3{left:60px !important;top:415px;}
#button2{left:470px !important;top:300px;}
#button4{left:470px !important;top:415px;}
 */


/* QUIZ BUTTONSINQUESTION */
.buttonsInQuestion{display: inline-block; cursor: pointer; padding: 0px 5px; margin: 0px 5px; line-height: 1.1em;
 -webkit-border-radius: 8px;
 border-radius: 8px;
}
.buttonsInQuestion:hover{background:#eee;}
.buttonsInQuestion.selected{background: #3f3; color:#333;}
.buttonsInQuestion.selected:hover{background: #d6ff7d;}


/* QUIZ buttonsGroupWords */
.buttonsGroupWords{ cursor: pointer;
}
.buttonsGroupWords:hover{color:#49A2E7;}


/* QUIZ IMG */
.quizImage #button1{top:220px; left:78px;}
.quizImage #button2{top:300px; left:78px;}
.quizImage #button3{top:380px; left:78px !important;}
.quizImage #button4{top:460px; left:78px;}
.quizImage .button_centered{left:100px !important;}

.quizImage #questionTextLabel{ top: 70px;
    right: auto;
    left:70px;
   line-height: 1em;
    height: 123px;
    padding: 0px 70px;
    font-size: 1.9em;}
.quizImage #perso_small{display:none;}
.quizImage #imgContainer{position: absolute; top: 150px; left: auto; right: 80px; width: 370px; height: 430px; line-height: 430px; text-align: center;}
.quizImage #imgContainer img{vertical-align:middle;}
.quizImage #imgContainer img.need_shadow{
box-shadow: 2px 3px 1px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 2px 3px 1px rgba(0, 0, 0, 0.5);
border-radius: 20px;
-webkit-border-radius: 20px;}

/* quizImageHorizontal */




/* RESULT ICOS */
#answerResultBloc{position: absolute; top:100px; left:700px;} /*top: 300px; left: 500px;*/
#answerResultBloc.buttonsMode{top:100px; left:700px;}
#answerResultIcoOk{background:url(images/ico_ok_300.png) no-repeat; background-size:150px 150px;
width: 150px; height: 150px;}
#answerResultIcoError{background:url(images/ico_error_300.png) no-repeat; background-size:150px 150px;
width: 150px; height: 150px;}


/* CELLS */
#cellsBloc{position: absolute; bottom: 42px; left: 50px; width: 770px; text-align: center;}
#cellsBloc.smallCells{position: absolute; bottom: 42px; left: 160px; width: 570px; text-align: center;}
#cellsBloc .cell{background:url(images/cellEmpty.png); width: 20px; height: 21px; display: inline-block;
background-size: 20px 21px;
margin-left: 5px;}

#cellsBloc.smallCells .cell{width: 10px; height: 11px; display: inline-block;
background-size: 10px 11px;
margin-left: 5px;}
#cellsBloc .cellWin{background-image: url(images/cellWin.png);}
#cellsBloc .cellLost{background-image: url(images/cellLost.png);}






/* winSolution */
#winSolutionBloc{position: absolute; top:160px; left:110px; 
width: 650px; height: 278px;
text-align:center;}

#winSolutionWin{width: 650px; height: 278px;
-webkit-border-radius: 40px; border-radius: 40px;
-webkit-box-shadow: 1px 3px 0px rgba(0,0,0,0.2);
box-shadow: 1px 3px 0px rgba(0,0,0,0.2);
border:solid 10px #4ffc5b;
background: #37c30b;
}
#winSolutionLost{
width: 650px;
height: 278px;
-webkit-border-radius: 20px;
border-radius: 20px;
background: #FF5439;
border: solid 5px #FFF;
}
#winSolutionBloc .title{position: absolute; top: 30px; 
font-size:3em;
font-weight: bold;
width: 100%;
color:#fff;
}
#winSolutionWin{text-shadow: 1px 3px 0px #31af0a;}
/*#winSolutionLost{text-shadow: 1px 3px 0px #d16c00;}*/
#winSolutionBloc .baseline{position: absolute; top: 85px; 
text-align:center;
font-size:1.6em; color:#fff;
width: 90%;
left: 5%;
}

/*
#winSolutionWin .baseline{color:#e5ef09;width: 100%;}
#winSolutionLost .baseline{color:#f9a656;}
*/
#winSolutionLost .red{color:#ffe050;}
#winSolutionBloc .label{position: absolute; top: 130px;
    text-align:center; color:#fff;
    font-size:2.2em;
    width: 630px;
    font-weight: bold;
}
#winSolutionBloc .label.alt{top:180px;}
#winSolutionBloc .label.small{font-size:1.7em;}

#winSolutionBloc .baseline .question{ margin-bottom:10px; font-size:1.3em; opacity:0.6; filter:alpha(opacity=60);}
#winSolutionBloc .baseline .question.small{  font-size:1em; line-height: 0.9em; }
#winSolutionBloc .baseline .question.super_small{  font-size:0.8em; line-height: 0.8em;margin-bottom: 0px;}



#winSolutionBloc .flag_centered{margin-bottom: 14px;}

#winSolutionBloc .txtSupSol{opacity:0.7; filter:alpha(opacity=70);}
#winSolutionBloc .txtSupSolPost{font-size:0.8em;}

#winSolutionBloc .nextButton{position: absolute; top: 250px; left: 50%; margin-left: -79px;}



#pinScoreAdd{position: absolute; top: 50px; right: 60px; text-align:right;
   color:#FFFFFF; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
   font-size:2.2em; font-weight:bold;}

   #goodAnswerBloc{position: absolute; top: 470px; left: 50px; width: 770px; text-align:center;}
   #goodAnswerTitle{font-size:1.2em; color:#4485f5; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);}
   #goodAnswerLabel{font-size: 2em; font-weight: bold; color:#fff29c;text-shadow: 0 1px 0 rgba(75, 90, 115, 1);}


   /* soundController */
   #soundController{position:absolute; right:40px; bottom:33px; color:#fff; font-size:2.5em; cursor: pointer;z-index:200}
   #volumeOff{}
   #volumeOff i{vertical-align: middle; margin-top: -7px;}
   #volumeOff i.volumeMuteCross{margin-left:2px;}


   /* WinEndGame */
   /*-----------------------------------*/
   #winEndGame .statsBlocTitle{font-size: 1.2em; color:#72BBF3; text-align: center;}
   #winEndGame .statsBloc{ padding:10px 30px 10px 30px; border:solid 1px #72BBF3; margin: 0 20px;
    border-radius: 10px;}
    #winEndGame .statsBloc .text{font-size:1.2em;}


    /* timer_pie_chart */
    /*-----------------------------------*/
    #timer_pie_chart{position: absolute; right:37px; top:58px;
      -ms-transform: rotate(22deg);
      -webkit-transform: rotate(22deg);
      transform: rotate(22deg);
  }

  #timer_seconds{ position: absolute; right: 61px; width:100px;
top: 114px; font-size:2.4em; color:#FFF; text-align: center;}


/* #btn_fullscreen */
/*-----------------------------------*/
#btn_fullscreen{left:470px;}


/* jeuxhisto */
/*-----------------------------------*/
#game_outer.jeuxhisto.quizImage #questionTextLabel{color:#5f3954;}
#game_outer.jeuxhisto.quizImage .answerButton{color: #5c4573;}