/* Le thème est affiché en haut de la zone informations*/
.afficheTheme {
    text-align: center;
	background-color: rgb(255, 255, 255);
	color: black;
	padding: 5px;
	border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

/** Carton *********************************/
#cartonImpro {
    padding-left: 30px;
}

.titreCarton {
    font-size: 14px;
    display: inline-block;
    width:150px;
	height:35px;
    vertical-align: middle;
    text-align: right;
}
.titreTemps {
    font-size: 14px;  
}

.inputCarton {
    width: 380px;
    padding: 5px 10px;
    margin: 3px;
    margin-left: 12px;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 14px;
    vertical-align: middle;
}

.inputCartonTemps {
    width: 75px;
    padding: 5px 10px;
    margin: 3px;
    margin-left: 12px;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 14px;
}

#txtTheme {
   /* height:50px;*/
    resize: none;
    font-family: sans-serif;
    font-weight: bold;
}

input[type=submit] {
   /* width: 100%;*/
    background-color: #4CAF50;
    color: white;
  /*  padding: 14px 20px;
    margin: 8px 0;*/
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

input[type=submit]:hover {
    background-color: #45a049;
}



/** Caucus *********************************/
/*#chronometreCaucus {
    position:absolute;
    margin: auto;
    left:0px;
    right: 0px;
	top: 100px;
    display: block;
}*/

.chronometre {
	background-color:#CCC;
	width:220px;
	height:220px;
	box-shadow: 0 0 0 1.875vmin, inset 3.75vmin 3.75vmin 7.5vmin rgba(0, 0, 0, 0.125), 3.75vmin 3.75vmin 7.5vmin rgba(0, 0, 0, 0.125);
	position: relative;
	top: 50px;
	left: 200px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	color: white;
	border-radius: 50%;
	font-size: 100px;
	font-weight: 700;	
	font-family: "Montserrat", sans-serif;
	text-shadow: 15px 15px 30px rgba(0, 0, 0, 0.3);
}

/* Barre transparente verticale */
.barreTemps {
  position: absolute;
  top: 220px;
  left: 0;
  z-index: 100;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);

}

.temps_animation {
  -webkit-animation: 0.3s 0s 1 timer_beat;
          animation: 0.3s 0s 1 timer_beat;	
}

@keyframes background_color {
  6.6666666667% {/* = 15sec. / 100 %   = 6.67% */
    background-color: #c8c6cc;
  }
  13.3333333333% {
    background-color: #c6ccc6;
  }
  20% {
    background-color: #bfc9bd;
  }
  26.6666666667% {
    background-color: #bfc9bd;
  }
  33.3333333333% {
    background-color: #c7c9bd
  }
  40% {
    background-color: #c9c8bd;
  }
  46.6666666667% {
    background-color: #c9bfbd;
  }
  53.3333333333% {
    background-color: #c9b5b1;
  }
  60% {
    background-color: #c9ada7;
  }
  66.6666666667% {
    background-color: #c9a39b;
  }
  73.3333333333% {
    background-color:#c78c7f;
  }
  80% {
    background-color: #c77967;
  }
  86.6666666667% {
    background-color: #c95d44;
  }
  93.3333333333% {
    background-color: #b84328;
  }
  100% {
    background-color: #bd3a1c;
  }
  106.6666666667% {
    background-color: #c42e0c;
  }
}



@-webkit-keyframes timer_beat {
  10%, 60% {
    transform: none;
  }
  50% {
    transform: scale(1.2);
  }
}
@keyframes timer_beat {
  10%, 60% {
    transform: none;
  }
  50% {
    transform: scale(1.2);
  }
}


@keyframes timer_indicator {
  0% {
 	 top:0px;
  }
  100% {
  	 top:220px;
  }
}





/** Hasard *********************************/
.hasard {
	position:absolute;
	width: 180px;
	height: 180px;
	background-repeat: no-repeat;
	background-position: center;	
}

/*
#hasardGo {
	position: absolute;
	width: 100px;
	height: 100px;
	background-repeat: no-repeat;
	background-position: center;
	left:272px;
	top: 130px;
	background-image: url("images/play.png");
}
*/
#hasardGauche {
	left: 50px;
	top: 100px;
}

#hasardDroit {
	left: 415px;
	top: 100px;
	
}
#divGagnant {
	position:absolute;
	width:620px;
	top: 300px;
	text-align:center;
}

/** Impro **********************************/
#divChronometreImpro {
	border-radius:0%;	
	width: 530px;
	left: 50px;
	
}
/** Punition *******************************/
#imgPrison {
	position:absolute;
	left: 125px;
	top: 75px;
	z-index: 2;
}
#infoJoueurPun {
	position:absolute;
	left: 100px;
	top: 300px;
	width:450px;
	background-color:#ddd;
	color: #333;
	text-align:center;
	padding: 5px;
	z-index: 3;	
}
#imgJoueurPun {
	position:absolute;
	left: 250px;
	top: 100px;
	z-index: 1;	
}

/*
.colonneInfo {
    position: absolute;
    width:320px;
    
    padding:5px;
}

#colonnePunGauche {
    left:20px;
    top: 100px;
}
#colonnePunDroite {
    left:330px;
    top: 100px;
}

.listePunition {
    height:140px;
    
    font-family: sans-serif;
    font-size: 18px;
    
   
}

.inputPunition {
    padding: 2px 5px;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 12px;
    vertical-align: middle;
}

.encadre {
    border-color: black;
    border-style: solid;
    border-width: 1px;
    vertical-align: middle;
}*/

/** Vote ***********************************/
.vote {
	position:absolute;
	width: 180px;
	height: 180px;
	background-repeat: no-repeat;
	background-position: center;	
}


#renverseArbitre {
	position: absolute;
	width: 100px;
	height: 140px;
	background-repeat: no-repeat;
	background-position: center;
	left:272px;
	top: 100px;
	background-image: url("images/renverseArbitreNon.png");
}

#voteGauche {
	left: 75px;
	top: 120px;
}

#voteDroit {
	left: 390px;
	top:120px;
	
}