#masqueur{position: fixed; top: 0px; width: 100%; height: 100%; z-index: 2000; background-color: white; margin: 0; padding: 0; text-align: center; vertical-align: center;}
#masqueursmall{display:none; z-index: 2000;}


html
{
  position: relative;
  height: 100%;
}
body{
  height: 100%;
}
footer
{
  position: relative;
}
nav.navbar
{
  margin-bottom: 0;
}

#div_consigne{
  position: relative; margin: auto; margin-bottom: 8px; font-size: 1.2em;
  max-width: 95%;
}
#div_consigne_head {text-align: center; font-weight: bold;}
#div_consigne_head h2{
  display: inline-block; 
  margin: 0px; 
  font-size: 40px; 
  min-width: 500px;
  padding: 0;
  padding-bottom: 5px;
  /*background-color: rgba(240,240,240,0.7);
  border: 1px solid #ccc;*/
  background-color: #e85c5c;
  border: 1px solid #ce4c4c;
  border-radius: 0 0 10px 10px;
  border-top: none;
  height: 50px;
  margin-bottom: 5px;
  color: white;
}
#div_consigne_head h2 a{
  color: #135a97;
  text-decoration: none;
}
#div_consigne_head h2 a:hover{
  color: #23527c;;
}
#div_consigne_suite
{
  margin-top: 9px;
  min-height: 31px;
}
#div_consigne_suite.grande_suite
{
  min-height: 105px;
}
#div_consigne_contenu, #div_consigne_info{white-space: normal;  font-size: 1.1em; position: relative; margin-bottom: 9px; padding: 1px 8px;/*border: 1px dotted;*/}
.btn.disabled
{
  opacity: 1;
}
.fb_iframe_widget, .fb-share-button{display: inline-block; vertical-align: top;}
#div_partage{display: block; text-align: center; color: rgba(0,0,0,0);}
#div_partage p{color: black; display: inline-block; margin-right: 1em; font-size: 0.8em;}
#div_partage_buttons{min-width: 200px;display: inline-block;}
#div_partage a{color: rgba(0,0,0,0);}
.fb-share-button span[style]{
  vertical-align: top !important;
}

@keyframes mymove {
    0%  {bottom: 0px;}
    20% {bottom: 8px;}
    40% {bottom: 0px;}
    100%  {bottom: 0px;}
    /*0%  {box-shadow: 0px 0px 0px #aaa; bottom: 0px;}
    20% {box-shadow: 0px 0px 10px #aaa; bottom: 5px;}
    40% {box-shadow: 0px 0px 0px #aaa; bottom: 0px;}
    100%  {box-shadow: 0px 0px 0px #aaa; bottom: 0px;}*/
}
/*#div_consigne_contenu{ background-color: rgba(83,119,122,0.2);}
#div_consigne_info{border-color: #53777A; background-color: rgba(83,140,160,0.2);}*/
/*#div_consigne_restants {text-align: center; color: rgb(128,50,50); clear:both; bottom: 0px; width: 100%;}
#div_consigne_illustration img {width: 100%; border: 1px dotted black;}
#div_consigne_illustration {display: block; float:left; font-size: 0.7em; text-align: center; margin-right: 15px; width: 15%; max-width: 200px; min-width: 100px;}*/

#div_consigne_suivant,  #div_consigne_precedent{font-size: 1.2em; display: inline-block; height: 40px; vertical-align: top;}
/*#div_consigne_suivant a, #div_consigne_precedent a{color: white; text-decoration: none;}*/
#div_consigne_precedent{
  border-radius: 0 0 0 4px;
}
#div_consigne_suivant{
  border-radius: 0 0 4px 0;
}
/*#div_consigne_suivant{right: 0; top: 0;}
#div_consigne_precedent{left: 0; top: 0;}*/

#code {font-family: Lucida Console, serif; color: rgb(60,60,120);}

.grille
{
    position: absolute;
    background-color: grey;
    z-index: 1;
}
.grilleP
{
    position: absolute;
    z-index: 1;
    color: white;
    font-size: 12px;
}
#grille
{
  z-index: 1;
  opacity: 0.2;
  position: absolute;
}

/* Positionnement des gros éléments*/
/*#div_action {position: relative; height: 90%; min-height: 500px; padding: 0; background-color: rgba(84,36,55,0.3); color: black; margin-bottom: 20px; border-top: 1px solid rgb(84,36,55); border-bottom: 1px solid rgb(84,36,55);}
#div_code, #div_resultat {display: block; height: 100%;}*/

/*Contenu du div_code*/
/*.action_top {height: 35px; overflow: hidden;}
#div_code #code {display: block; width: 100%; position:absolute; top: 35px; bottom: 10px; left: 5px; right: 5px; margin: 0;}
#textarea_code, .CodeMirror, #blocklyArea {height: 100%; display: block; width:100%; overflow:auto; resize: none; font-family : Lucida Console, monospace, serif; box-shadow: 1px 1px 4px #333; border: 1px solid black;}
*/
#div_action
{
  width: 100%;
  margin: 0;
  padding: 0;
  min-height: 400px;
  max-height: 600px;
  height: 500px;
  overflow: hidden; 
  padding-bottom: 2px;
  background: rgba(0,0,0,0.1);
  border-top: 1px solid rgba(0,0,0,0.2);
  border-bottom: 1px solid rgba(0,0,0,0.2);
}
#div_resultat, #div_code
{
  /*position: absolute;*/
  margin: 0;
  min-height: 10px;
}
#div_resultat
{
  min-width: 250px;
  max-width: 450px;
  width: 40%;
  float: left;
  margin-left: 2px;
  position: relative;
}
#deleteblocks, #switcherblocks
{
  padding: 2px;
  font-size: 0.8em;
  position: relative;
  bottom: 6px;
  display: none;
}



@media (max-height: 750px) and (min-width: 1100px){ 
  #div_resultat
  {
    max-width: 370px;
  }
}
@media (max-height: 650px) and (min-width: 1100px){ 
  #div_resultat
  {
    max-width: 300px;
  }
}
@media (max-height: 600px){ 
  #div_resultat
  {
    max-width: 250px;
  }
}


#div_code
{
  /*width: 70%;
  right: 0;
  height: 100%*/
  overflow: hidden;
  position: relative;
  height: 100%;
}
#action_top_console, #action_top
{
  height: 30px;
}

canvas
{
  width: 100%;
}
#code
{
  position: absolute;
  left: 0;
  right: 0;
  top: 30px;
  bottom: 0;
}
#blocklyArea
{
  width: 100%;
  height: 100%;
}
#textarea_code, .CodeMirror
{
  width: 100%;
  height: 100%;
}


#variables
{
  position: absolute;
  top: 32px;
  left: 2px;
  background: #7f2d40;
  background: linear-gradient(to bottom, #7f2d40 0%,#6c2636 44%,#531b28 100%);
  color: white;
  padding: 2px;
  border-radius: 4px;
  z-index: 1000;
  border: 1px dashed gray;
  /*box-shadow: 0px 0px 2px 2px #aa5555;*/
}
#variables h5
{
  margin: 0;
  margin-top: 2px;
  margin-bottom: 2px;
}
#variables ul
{
  list-style-type: none;
  padding-left: 0;
  margin-bottom: 0px;
}
#variables li
{
  margin-bottom: 6px;
  margin-top: 4px;
}
.variable
{
  background: linear-gradient(to bottom, #a90329 0%,#8f0222 44%,#6d0019 100%);
  border: 1px solid white;
  border-radius: 4px;
  padding: 4px;
}
#variables li strong
{
  font-size: 1.2em;
}



h3 {display: inline; margin-right: 5px; font-family: 'Cabin', sans-serif;}

/*Bouton*/
#run_code
{
  display: block;
  width: 90%;
  font-size: 1.5em;
  margin-left: 5%;
  margin-right: 5%;
  margin-top: 10px;
}
/*#run_code {font-family: 'Lobster'; width: 120px; height: 30px; margin: 0; margin-top: 1px;  display: inline-block; font-size: 1.4em; border-radius: 5px;  background-image:linear-gradient(110deg, rgb(100,255,100), rgb(100,200,100)); border-color: rgb(80,255,80); border-width: 1px; }
#run_code.rewind{background-image:linear-gradient(110deg, rgb(255,210,80), rgb(192,160,80)); border-color: rgb(140,90,40);}
#run_code.fast{background-image:linear-gradient(110deg, rgb(80,210,255), rgb(80,160,192)); border-color: rgb(40,90,140);}*/
#resultat {display: none;/*border: 1px solid white; background-color: rgb(0,0,20); left: 10px; right: 2px;  position:absolute; top: 35px; bottom: 10px;  font-family : Lucida Console, serif; overflow : auto; white-space: nowrap; color: white; box-shadow: 1px 1px 4px #333;*/ }
canvas {display: none; margin: auto; box-shadow: 1px 1px 4px #333;}
#souris, #vitesse{font-size: 0.8em;}
#infoscanvas{display: inline-block;}
#vitesse_interpreter{display: inline-block; }

#stylo{display: none; position: absolute;}
#parfait{display: none; position: absolute;}

input, button{color: black;}
.afficher:hover {text-decoration: underline;}
.main:hover {cursor: pointer;}


.champdefi{display: inline-block; max-width: 50%}
#defibutton {/*font-family: 'Lobster';*/ display: inline; position: relative; bottom: 13px; left: 4px; /*border-radius: 5px;  background-image:linear-gradient(110deg, rgb(100,255,100), rgb(100,200,100)); border-color: rgb(80,255,80); border-width: 1px;*/ }
#blocdefi{display: none;}

@media (max-width: 768px){	
	#div_consigne_illustration{display: block; float: none; margin: auto;}
}
@media (max-width: 700px){  
 #masqueursmall{display: block; position: fixed; top: 52px; bottom: 0px; width: 100%; height: 100%; z-index: 100; background-color: white; margin: 0; padding: 0; text-align: center; vertical-align: center;}
 body{overflow-y: hidden;}
}

@media (max-width: 992px){ 

  #div_consigne_head h2{
    font-size: 30px; 
    min-width: 300px;
    height: 40px;
  }
  #div_consigne_suivant,  #div_consigne_precedent
  {
    font-size: 1em; 
    height: 30px;
    padding: 3px 12px;
  }


}


.progress
{
  width: 200px;
  height: 20px;
  display: inline-block;
  margin-bottom: 0;
}
.progress-bar
{
  font-size: 0.83em;
  color: black;
}

#commentaire_textarea
{
  width: 100%;
  max-width: 100%;
  min-width: 100%;
  height: 5em;
  min-height: 5em;
  max-height: 5em;
  resize: none;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 4px;
}
#commentaire_attente
{
  position: relative;
  left: 3px;
  top: 3px;
}
.button-center
{
  margin-top: 3px;
}
/* ============================================================================================================================
== BUBBLE WITH AN ISOCELES TRIANGLE
** ============================================================================================================================ */

/* THE SPEECH BUBBLE
------------------------------------------------------------------------------------------------------------------------------- */

.triangle-isosceles {
  position:absolute;
  padding:15px;
  margin:0;
  color:#fff;
  font-size: 1.2em;
  background:#f3961c; /* default background for browsers without gradient support */
  /* css3 */
  background:linear-gradient(#2e88c4, #075698);
  -webkit-border-radius:10px;
  -moz-border-radius:10px;
  border-radius:10px;
  width: 300px;
  z-index: 1001;
}
.triangle-isosceles img {
  max-width: 100%;
}


/* Variant : for top positioned triangle
------------------------------------------ */

.triangle-isosceles.top {
  background:-webkit-gradient(linear, 0 0, 0 100%, from(#f3961c), to(#f9d835));
  background:-moz-linear-gradient(#f3961c, #f9d835);
  background:-o-linear-gradient(#f3961c, #f9d835);
  background:linear-gradient(#f3961c, #f9d835);
}

/* Variant : for left/right positioned triangle
------------------------------------------ */

.triangle-isosceles.left {
  margin-left:50px;
  background:#f3961c;
}

/* Variant : for right positioned triangle
------------------------------------------ */

.triangle-isosceles.right {
  margin-right:50px;
  background:#f3961c;
}

/* THE TRIANGLE
------------------------------------------------------------------------------------------------------------------------------- */

/* creates triangle */
.triangle-isosceles:after {
  content:"";
  position:absolute;
  bottom:-15px; /* value = - border-top-width - border-bottom-width */
  left:45%; /* controls horizontal position */
  border-width:15px 15px 0; /* vary these values to change the angle of the vertex */
  border-style:solid;
  border-color:#075698 transparent;
  /* reduce the damage in FF3.0 */
  display:block;
  width:0;
}

/* Variant : top
------------------------------------------ */

.triangle-isosceles.top:after {
  top:-15px; /* value = - border-top-width - border-bottom-width */
  right:50px; /* controls horizontal position */
  bottom:auto;
  left:auto;
  border-width:0 15px 15px; /* vary these values to change the angle of the vertex */
  border-color:#f3961c transparent;
}

/* Variant : left
------------------------------------------ */

.triangle-isosceles.left:after {
  top:16px; /* controls vertical position */
  left:-50px; /* value = - border-left-width - border-right-width */
  bottom:auto;
  border-width:10px 50px 10px 0;
  border-color:transparent #f3961c;
}

/* Variant : right
------------------------------------------ */

.triangle-isosceles.right:after {
  top:16px; /* controls vertical position */
  right:-50px; /* value = - border-left-width - border-right-width */
  bottom:auto;
  left:auto;
  border-width:10px 0 10px 50px;
  border-color:transparent #f3961c;
}



input[type=range] {
  width: 100px; /* Specific width is required for Firefox. */
  display: inline-block;
  margin-top: 0.5em;
}