/* To avoid ios styling */
input[type=button], input[type=submit]{-webkit-appearance: none;}

#game_outer{ position:relative; background-size: 900px 600px;}

#winIntro.popup {left:50%; margin-left: -150px;}

#topLayer{position:absolute; top:0px; left:0px; z-index:100; width:900px; height:600px;}

#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;}

/*
#questionLabelBloc{position: relative; left:50%; top:100px; width:700px;  
        text-align:center;
        font-size:1.4em;
        text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);}
*/

#exerciceNoteLabel{display: flex;
                  align-items: center;
                  justify-content: space-around;

                  background: #e6f8fe;
                  border-radius:20px;
                  webkit-box-shadow: 2px 3px 0px rgba(0,0,0,0.2);
                  box-shadow: 2px 3px 0px rgba(0,0,0,0.2);

                  position:absolute; top:72px; left:157px;
                  width:547px; height: 50px;
                  /*background: url(images/exerciceNoteLabelBg.png) no-repeat; 
                  background-size: 547px 64px;*/
                  text-align: center;
                  
                  font-size:1.5em; color:#427ecf;
}

#exerciceNoteLabel .prof_image{
  width: 60px;
  height: 60px;
  
  margin-bottom: 7px;
}
.no_kid #exerciceNoteLabel .prof_image{display: none;}



#exerciceNoteLabel .text_content_outer{
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 430px;
  height: 140px;
  padding: 15px;
}

#exerciceNoteLabel.big .text_content{}
#exerciceNoteLabel.big{ display: block;
                        top: 70px; left: 220px;
                        font-size: 2em; text-align: center;
                    
                       width:430px; height: 140px;

                       background: #e6f8fe;
                       border-radius:30px;
                       webkit-box-shadow: 2px 3px 0px rgba(0,0,0,0.2);
                       box-shadow: 2px 3px 0px rgba(0,0,0,0.2);

                      /*
                      padding:0px 20px 290px 20px;
                      background: url(images/exerciceNoteLabel_big_Bg.png) no-repeat; 
                      background-size: 435px 433px;
                      line-height: 1em;*/
                  }
#exerciceNoteLabel.big .prof_image{
  flex: none;
  background-size: 280px 280px;
  margin-bottom: 0px;
  margin-top: 4px;
  width: 280px;
  height: 280px;
  margin-left: 100px;
}


#button_continue_exerciceNoteLabel{position: absolute; top:450px; left:550px;
                                font-size: 2em;
                        }


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

/*
orange : fc7c00
bleu : 427ecf
cyan : dcf2fc
green : 61cd51
brown : dfa000
dark yellow : fee145
dark brown : 994d04
 */

#questionTextLabel{
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute; 
  top: 150px; left: 112px; 
  width: 645px; height: 100px;
  text-align:center; font-size: 2em; color:#684a23;
  /*background: url(images/questionTextLabelBg.png) no-repeat;
  background-size: 645px 133px;*/
  /*padding: 0px 20px 30px 20px;*/
  background: #fef7e4;
  border-radius:30px;
  webkit-box-shadow: 2px 3px 0px rgba(0,0,0,0.2);
  box-shadow: 2px 3px 0px rgba(0,0,0,0.2);
}
#questionTextLabel .text_content{}
#questionTextLabel.keyboardDisplayed{top:410px;}
#questionTextLabel .verb{font-weight: bold; color:#fc7c00; font-style: italic;}
#questionTextLabel .textSup{color:#d6ff7d;}

#speechIconContainerSup{    
  left: calc(50% - 53px);
  position: absolute;
  top: 20px;
}


#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: 568px; height: 67px;
                  /*background: url(images/labelAboveButtonsBg.png) no-repeat;
                  background-size: 588px 67px;*/

                  text-align:center;
                  font-size: 1.6em; color:#ce6bdd;

                  background: #fef7e4;
                  border-radius:20px;
                  webkit-box-shadow: 2px 3px 0px rgba(0,0,0,0.2);
                  box-shadow: 2px 3px 0px rgba(0,0,0,0.2);
}
#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;}

/* no kid */
/*
 A VIRER
.no_kid #questionTextLabel{background: url(images/questionTextLabelBg_nokid.png) no-repeat;
                            background-size: 647px 105px;}
.no_kid #labelAboveButtons{background: url(images/labelAboveButtonsBg_nokid.png) no-repeat;
                            background-size: 546px 67px;}
*/

/*.no_kid #exerciceNoteLabel.big{background: url(images/exerciceNoteLabel_big_Bg_nokid.png) no-repeat;
                            background-size: 435px 433px;}*/
/*.no_kid #exerciceNoteLabel{background: url(images/exerciceNoteLabelBg_nokid.png) no-repeat;
                            background-size: 547px 64px;
                            padding-right:20px;}
*/
/* PERSO */
.perso.big{position: absolute; top: 295px; left: 700px;
                  width: 130px; height: 219px;
                  background-size: 130px 219px;
                }
.perso.small{position: absolute; top: 225px; left: 750px;
                  width: 86px; height: 150px;
                  background-size: 86px 150px;

                }


/*
#resultOnHoverLabel{position: absolute; top: 240px; left: 50px; width: 770px;
                    color:#ffCded; text-align: center; font-size: 1.5em;}
                    */
#labelAboveButtons .verb{color:#dfa000;}
#labelAboveButtons .subject{color:#279e1e;}

/* INPUT */
#inputBloc{position: absolute; top: 320px; left: 50px; width: 770px;
           text-align:center;
           font-size:1.2em;
           text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);}

/*#inputBloc.keyboardDisplayed{top:360px;}*/

/* buttonSpeechForInputBloc */
#buttonSpeechForInputBloc{position:absolute; top:200px; width:106px; left:50%; margin-left:-73px; }

#inputTitle{font-size:1.2em; color:#ffffff; text-shadow: 0 -1px 0 rgba(50, 50, 100, 1);}
#tf_userAnswer{font-size:1.5em; color:#666666;
               border:none; width:250px;
               -webkit-border-radius: 6px; border-radius: 6px;
               padding:5px 10px;}

#submitButton{position: absolute; bottom: 110px; left: 390px; 
      width: 95px; height:97px;
       
       cursor:pointer;
       border:none;}

/* input assets for ipad */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px)  { 
  #buttonSpeechForInputBloc{ top:330px; left:200px;}
  #submitButton{top:320px; left:630px;}
}



/* QUIZ BUTTONS */
.answerButton{position: absolute; width: 320px; height: 50px;  display: block;
              font-size: 2em;
              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;
              
              }
.answerButton.small{font-size: 1.5em;}
.answerButton.super_small{font-size: 1.2em; padding-left: 10px; padding-right: 10px; line-height: 1em;
}

#button1{top:380px; left:90px;}
#button2{top:380px; left:460px;}
#button3{top:445px; left:90px;}
#button4{top:445px; left:460px;}

.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;}


/* 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;
               text-shadow: none;
               }
.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:200px; left:480px;}
.quizImage #button2{top:280px; left:480px;}
.quizImage #button3{top:360px; left:480px;}
.quizImage #button4{top:440px; left:480px;}
.quizImage .button_centered{left:480px !important;}

.quizImage #questionTextLabel{
  background: none; 
  color:#FFF; 
  top: 70px;
  right: 70px;
  left:auto;
  width: 405px;
  height: 133px;
  padding:0px;
  box-shadow:none;
}
.quizImage #perso_small{display:none;}
.quizImage #imgContainer{position: absolute; top: 70px; left: 40px; 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 .cell{
  /*background:url(images/cellEmpty.png); 
  background-size: 20px 21px;
  width: 20px; 
  height: 21px; */
  width: 18px; 
  height: 18px;
  border: solid 3px #E6F7FE;
  border-radius: 50%;
  box-shadow: 0px 1px 1px rgba(0,0,0,0.2);
  display: inline-block;
  
  margin-left: 5px;
}

#cellsBloc .cellWin{
  /*background-image: url(images/cellWin.png);*/
  background: linear-gradient(180deg, rgba(165,202,2,1) 0%, rgba(92,147,23,1) 100%);
}
#cellsBloc .cellLost{
  /*background-image: url(images/cellLost.png);*/
  background: linear-gradient(180deg, rgba(255,127,6,1) 0%, rgba(205,32,17,1) 100%);
}






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

#winSolutionWin{width: 650px; min-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;
                  padding: 10px 0px;
                  display: flex; justify-content:space-evenly; flex-direction:column;
                }
#winSolutionLost{width: 650px; min-height: 278px;
                 -webkit-border-radius: 40px; border-radius: 40px;
                  webkit-box-shadow: 2px 3px 0px rgba(0,0,0,0.2);
                  box-shadow: 2px 3px 0px rgba(0,0,0,0.2);
                  border:solid 10px #ff0000;
                  background: #ff8400;
                  padding: 10px 0px;
                  display: flex; justify-content:space-evenly; flex-direction:column;
                }
#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 .verb{color:#fcff00;}

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

.winSolutionNextButtonContainer{position:absolute;left:50%;bottom: -26px;}

#winSolutionBloc .nextButton{position: relative;left: -50%; }

#winSolutionBloc .perso_prof{position: absolute; top: 165px; left: 490px;
                  width: 201px; height: 198px;
                  }
 /*                        background: #3b6e86; cursor: pointer; 
                         border: solid 4px #fff;
                         text-align:center; color:#fff;
                         font-size:1.5em;
                         -webkit-border-radius: 8px;
                        border-radius: 8px;
                        -webkit-box-shadow: 0px 1px 4px rgba(0,0,0,0.2);
                        box-shadow: 0px 1px 4px rgba(0,0,0,0.2);}
#winSolutionBloc .nextButton:hover{background: #48a1cb;}
*/


#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:65px; bottom:33px; color:#fff; font-size:2.5em; cursor: pointer;}
#volumeOff{}
#volumeOff i{vertical-align: middle; margin-top: -7px;}
#volumeOff i.volumeMuteCross{margin-left:2px;}