html{
	overflow: hidden;
}
#main{
	width: 100%;
}
#mediaBox{
	float: left;
	width: calc(100% - 186px);
	top : 0;
	left : 0;
}
#controlBox{
	float: left;
	width: 180px;
	margin-left: 5px;
	margin-right: 0;
}
#qrBox{
	float: left;
	width: 100%;
	margin-left : 0;
	margin-right : 0;
}
#warningBox{
	display: none;
	margin-left : 1%;
	margin-right : 1%;
}
.reponseBox, .introBox{
	overflow-y: auto !important;
	overflow-x: hidden !important;
	max-height: 80vh;
}
#testSize{
	display: none;
}
/* 
Gestion de l'affichage mini
 */
@media screen and (max-height: 699px){
	#controlBox, #mediaBox, #qrBox, .expertJocker, .introBox, .jeuSupp, .newQ, .pauseRep, .reponseBox, .resultat, .statJocker, .endOfTime, #warningBox{
		display: none !important;
	}
	#testSize{
		display: block;
	}
}
@media screen and (max-width: 1023px){
	#controlBox, #mediaBox, #qrBox, .expertJocker, .introBox, .jeuSupp, .newQ, .pauseRep, .reponseBox, .resultat, .statJocker, .endOfTime, #warningBox{
		display: none !important;
	}
	#testSize{
		display: block;
	}
}
/* 
Gestion des hauteurs
 */
@media screen and (min-height: 699px) and (max-height : 767px) {
	#mediaBox, #controlBox{
		height: 450px;
	}
}
@media screen and (min-height : 768px) and (max-height : 849px){
	#mediaBox, #controlBox{
		height: 500px
	}
}
@media screen and (min-height : 850px) and (max-height : 899px){
	#mediaBox, #controlBox{
		height: 600px;
	}
}
@media screen and (min-height : 900px){
	#mediaBox, #controlBox{
		height: 630px;
	}
}
@media screen and (min-height : 1000px){
	#mediaBox, #controlBox{
		height: 650px;
	}
}