html {
  min-height: 100%;
}
body {
  min-height: 100%;
  min-width: 1115px;
  font-family: avenir;
  font-size: 20pt;
  background-image: url(../images/berlin.jpg);
  background-attachment: fixed;

  -moz-user-select: none;/*On empêche la sélection des liens, parce que c'est moche quand on peut le faire*/
 -webkit-user-select: none; 
 -ms-user-select: none; 
 user-select: none; 
}

a {
  text-decoration: none;
  color: #A228FE;
  -moz-user-select: none;/*On empêche la sélection des liens, parce que c'est moche quand on peut le faire*/
 -webkit-user-select: none; 
 -ms-user-select: none; 
 user-select: none; 
}

a:hover {
  color: #FECC28;
  cursor: pointer;
}

/*** MENU HORIZONTAL ***/

#menu {
  background-color: black;
  color: white;
  padding: 15px;
}

#logo {
  float: left;
  margin: 20pt;
  margin-right: 40pt;
}
#logo img {
  width:150pt;
}
#menu ul {
  list-style-type: none;
}
#menu ul li {
  display: inline-block;
  padding: 20px;
}

/*** CONTENU ***/

#content {
  position: relative;
  background-color: rgba(255, 255, 255, 0.9);
  margin-top: 20px;
  margin-bottom: 20px;
  margin-left: 100px;
  margin-right: 100px;
  padding: 20px;
}

#accueil {
  background-color: rgba(255, 255, 255, 0.9);
  margin-top: 20px;
  margin-bottom: 20px;
  margin-left: 100px;
  margin-right: 100px;
  padding: 20px;
  text-align: center;
  word-wrap: break-word;
}

/*** Séléction de/des unités ***/
.selectUnits {
  position: absolute;
  right:260px;
  -moz-user-select: none;/*On empêche la sélection des liens, parce que c'est moche quand on peut le faire*/
 -webkit-user-select: none; 
 -ms-user-select: none; 
 user-select: none; 
}
#listeUnit {
  list-style-type:none; 
  -moz-user-select: none;/*On empêche la sélection des liens, parce que c'est moche quand on peut le faire*/
 -webkit-user-select: none; 
 -ms-user-select: none; 
 user-select: none; 
}
#levels {
  margin-top: 20px; 
}
#pages {
  margin: auto;
  width:240px;
}
#selectButton {
  position: absolute;
  right: 25px;
  top:20px;
  width:164px;
}
#selectButton:hover {
  background-color: #FECC28;
  color: white; 
}
#interval {
  position:absolute;
  right: 25px;
  top:20px;
  width: 117px;
}
.button {
  user-select: none;
  background-color: white;
  cursor: pointer;
  border:1px solid black;
  padding: 5px 10px;
  -moz-user-select: none;/*On empêche la sélection des liens, parce que c'est moche quand on peut le faire*/
 -webkit-user-select: none; 
 -ms-user-select: none; 
 user-select: none; 
}
#goToSelect {
  text-align: right;
  visibility: hidden;
  height: 0px;
  margin:auto;
  width: 150px;
}
#goToSelect:hover {
  background-color: #FECC28;
  color: white;
}
/* La partie pour selectionner les pages*/
#message{
  margin-top: 30px;
  font-size: 15pt;
}
#pageSelection {  
  list-style-type: none;
}
#addPage {
  cursor: pointer;
  position: relative;
  left:50px;

}
#beginPages {
  position: relative;
  margin: auto;
  width:150px;
}
#firstPage, #lastPage {
  width: 50px;
}
#alertDeveloppement {
  font-size:12px; 
  margin-top:30px;
}

/*** CHECKBOXE ***/

   /* The container*/
   .label {
     display: block;
     position: relative;
     margin-bottom: 12px;
     cursor: pointer;
     top: 10px;
     left: 35px;
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
   }

   /* Hide the browser's default checkbox */
   .label input {
     position: absolute;
     opacity: 0;
     cursor: pointer;
     height: 0;
     width: 0;
   }

   /* Create a custom checkbox */
   .checkVu {
     position: absolute;
     top: 0;
     left: 0;
     height: 19px;
     width: 19px;
     background-color: #ccc;
   }

   /* On mouse-over, add a grey background color */
   .label:hover input ~ .checkVu {
     background-color: #B1B2B2;
   }

   /* When the checkbox is checked, add a blue background */
   .label input:checked ~ .checkVu {
     background-color: #A228FE;
   }

   /* Create the checkmark/indicator (hidden when not checked)*/
   .checkVu:after {
     content: "";
     position: absolute;
     display: none;
   }

   /* Show the checkmark when checked */
   .label input:checked ~ .checkVu:after {
     display: block;
   }

   /* Style the checkmark/indicator*/
   .label .checkVu:after {
     left: 7px;
     top: 3px;
     width: 3px;
     height: 8px;
     border: solid white;
     border-width: 0 3px 3px 0;
     -webkit-transform: rotate(45deg);
     -ms-transform: rotate(45deg);
     transform: rotate(45deg);
   }

/*Petit menu de sélection des exercices*/

#menuVoc {
 background-color: #272727;
 /***width: 900px;
 margin-left: 220px;***/
 text-align: center;
 padding: 10px;
 /*padding-left: 195px;*/
}
#menuVoc table {
   width: 100%;
}


  /*** page exercices ***/

    #vocTableau {
      width: 100%;
      border-spacing: 30px 15px;
      background-color: white;
      padding: 20px;
      border: 4px solid #D0D1D1;
      -moz-user-select: none;/*On empêche la sélection des liens, parce que c'est moche quand on peut le faire*/
     -webkit-user-select: none; 
     -ms-user-select: none; 
     user-select: none; 
    }
    #title {
      width: 100%;
    }
    #wordNumber {
      width: 150px;
      /*border: 1px solid black;*/
      text-align: right;
    }
    .imageExercice {
      height:20px; 
      cursor:pointer;
    }

  /*** page déterminants ***/

    #contentWords {/*C'est une div qui sert à ce que le contenu qui est en dessous ne descende pas lorsque j'affiche la réponse*/
      height: 140px;
      text-align: center;
      -moz-user-select: none;/*On empêche la sélection des liens, parce que c'est moche quand on peut le faire*/
     -webkit-user-select: none; 
     -ms-user-select: none; 
     user-select: none; 
    }

    #MotEtCorrection {
      /*width: 90%;
      display: inline-block;
      width:600px;*/
      text-align: center;
      background-color: white;
      padding: 30px;
      margin: 0px 100px;
      border: 4px solid #D0D1D1;
    }

    #boiteDeterminants {
      background-color: blue;
    }

    .derdiedas {
      border: 1px solid grey;
      width: 90px;
      padding: 10px;
      text-align: center;
      margin: auto;
    }

    .derdiedas:hover {
      background-color: #FECC28;
      color: white;
      cursor: pointer;
    }

    .tableauDet {
      margin: auto;
      margin-top: 30px;
      width: 90%;
      text-align: center;
      /*border: 1px solid black;*/
    }
    #tableauDet {
      width: 700px;
      margin: auto;

    }


    /*** FLASHCARDS ***/

    #contentCard {
      margin: auto;
      /*border:1px solid black;*/
      text-align: center;
      -moz-user-select: none;/*On empêche la sélection des liens, parce que c'est moche quand on peut le faire*/
       -webkit-user-select: none; 
       -ms-user-select: none; 
       user-select: none;
       /*filter: blur(5px);*/
    }
    /*#contentCard td {
      border:1px solid black;    
    }*/
    .bouton {
      width: 60px;
      /*position: relative;
      right: 30px;*/
      margin-top: 20px;
      cursor: pointer;
    }
    #mot {
      display: table-cell;
      vertical-align: middle;
      width: 400px; 
      height:300px;
      background-color: white;
      text-align: center; 
      transform: rotateY(20deg); 
      box-shadow: 5px 5px 5px; 
      border: 1px solid black;
      cursor: pointer;
      position: relative;
      word-wrap: break-word;
      padding: 50px;
    }
    /*Pour les paramètres*/
    #settings {
      width: 40px;
      height: 40px;
      cursor: pointer;
    }
    #settingsImage {
      width: 40px;
    }
    #popupSettingsFlash {
      background-color: white;
      width: 400px;
      font-size: 15pt;
      padding: 30px;
      text-align: center;
      display: inline-block;
      position: absolute;
      bottom: 60px;
      left: 60px;
      z-index: 100000;
      visibility: hidden;
    }
    #hiddeSettingsFlash {
      position: absolute;
      right: 20px;
      top: 15px;
      cursor: pointer;
    }
    #croix {
      width: 20px;
    }
    #commencerLabel {
      /*background-color: red;*/
      /*position: relative;*/
      /*left: 75px;*/
      /*top:5px;
      margin: 18px 75px;*/
      
      width: 320px;
      margin: auto;
      margin-top: 20px;
    }
    #presentWordSettings {
      /*background-color: red;*/
      /*position: relative;*/
      margin: 15px 0px 5px;
      text-align: center;
      /*top: 30px;
      left: 35px;*/
      /*width: 200px;*/
    }
    #prononciationLabel {
      /*background-color: red;*/
      /*position: relative;
      right: 35px;
      top:5px;*/
      width: 300px;
      margin: auto;
      margin-top: 20px;
    }
    #apply {
      position: relative;
      top: 25px;
      margin-bottom: 30px;
      width: 300px;
      margin: auto;
      margin-bottom: 20px;
    }
    #apply:hover {
      background-color: #FECC28;
      color: white;
    }
    #filter {
      position: absolute;
      background-color: black;
      height: 100%;
      width: 100%;
      right: 0px;
      top: 0px;
      opacity: 0.5;
      filter:blur(10px);
      visibility: hidden;
    }
    /*** RadioBoxes ***/
    .switch {
      position: relative;
      border: 1px solid black;
      border-collapse: collapse;
      margin: auto;
      margin-bottom: 0px;
      font-size: 12pt;
    }
    .switch td {
      border: 1px solid black;
      background-color: white;
      padding: 0px;
    }
    .radioLabel {
      margin: 0px;
      cursor: pointer;
    }
    .radioInput {
      height: 0px;
      width: 0px;
      display: none;
    }
    .radioSpan {
      display:block;
      /*background-color: yellow;
      width: 20px;
      height: 20px;*/
      /*position: absolute;
     top: 0;
     left: 0;
     height: 25px;
     width: 25px;*/
     /*border: 3px solid #A228FE;*/
     padding:10px;
     /*background-color: white;*/
    }
    .radioInput:checked ~ .radioSpan {
      background-color: #A228FE/*#FECC28*/;
      color: white;
    }

    /*** CHECKBOXE ***/

   /* The container*/
   .container {
     display: block;
     position: relative;
     margin-bottom: 12px;
     cursor: pointer;
     /*top: 18px;
     left: 35px;*/
     top: 1px;
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
   }

   /* Hide the browser's default checkbox */
   .container input {
     position: absolute;
     opacity: 0;
     cursor: pointer;
     height: 0;
     width: 0;
   }

   /* Create a custom checkbox */
   .checkmark {
     position: absolute;
     top: 0;
     left: 0;
     height: 25px;
     width: 25px;
     background-color: #ccc;
   }

   /* On mouse-over, add a grey background color */
   .container:hover input ~ .checkmark {
     background-color: #B1B2B2;
   }

   /* When the checkbox is checked, add a blue background */
   .container input:checked ~ .checkmark {
     background-color: #A228FE;
   }

   /* Create the checkmark/indicator (hidden when not checked)*/
   .checkmark:after {
     content: "";
     position: absolute;
     display: none;
   }

   /* Show the checkmark when checked */
   .container input:checked ~ .checkmark:after {
     display: block;
   }

   /* Style the checkmark/indicator*/
   .container .checkmark:after {
     left: 9px;
     top: 5px;
     width: 5px;
     height: 10px;
     border: solid white;
     border-width: 0 3px 3px 0;
     -webkit-transform: rotate(45deg);
     -ms-transform: rotate(45deg);
     transform: rotate(45deg);
   }

    /*** ECRIRE ***/
    .true {
      color:green;
    }
    .false {
      color:red;
    }
    #response a {
      font-size: 15pt;
    }
    #demande {
      margin: 0px 50px;
    }
    #response {
      margin: auto;
      margin-top: 20px;
      width: 90%;
      -moz-user-select: none;/*On empêche la sélection des liens, parce que c'est moche quand on peut le faire*/
     -webkit-user-select: none; 
     -ms-user-select: none; 
     user-select: none; 
    }
    .correction {
      width: 150px;
    }
    #motLire {
      text-align: center;
      margin-top:20px;
      font-size: 20pt;
      -moz-user-select: none;/*On empêche la sélection des liens, parce que c'est moche quand on peut le faire*/
     -webkit-user-select: none; 
     -ms-user-select: none; 
     user-select: none;
     font-size: 25pt; 
    }
    #textInput {
      margin-top: 100px;
      border: 0px solid transparent;
      border-bottom: 5px solid #FECC28;
      background-color: rgba(255, 255, 255, 0);
      height: 50px;
      width: 100%;
      font-size: 25pt;
    }
    #textInput:focus {/*On enlève la bordure bleue moche qu'il y a normalement quand on a le focus*/
      outline: none;
      border-bottom-color:#A228FE;
    }
    #valider {

      margin-top: 30px;
      text-align: right;

    }
    #valider a {
      position: relative;
      right: 50px;
      padding: 10px;
      background-color: #FECC28;
    }
    #valider a:hover {
      background-color: #A228FE;
      color: #FECC28;
    }
    #isCorrect {
      text-align: center;
      font-weight: bold;
    }
    /*#response {
      border: 1px solid black;
    }
    #response td {
      border: 1px solid black;
    }*/
/*** PIED DE PAGE ***/

#pieddepage {
  background-color: #272727;
  color: white;
  font-size: 12pt;
  padding: 20px;
  position: relative;
  line-height: 40px;
   
}
#pieddepage a {
  color: white;
  -moz-user-select: auto;/*On remet la sélection sur les liens du bas de page, au cas où l'utilisateur voudrait copier l'email*/
  -webkit-user-select: auto; 
  -ms-user-select: auto; 
  user-select: auto;
}
#pieddepage a:hover {
  color:#FECC28;
}

  /*** contacts ***/

    #contactDamien {
      position: absolute;
      left: 300px;
      top: 20px;
    }

    #contactMaeva {
      position: absolute;
      left: 700px;
      top: 20px;
    }