@CHARSET "UTF-8";

#main {
	font-size: 1.2em;
}
label {
	display: inline-block;
	width : 25%;
	
	vertical-align: top;
	font-weight: bold;
}
#dialog-choose-house label {
	width : 90%;
	padding : 0.5em;
	text-align: left;
}
input,textarea {
	font-size: 1.2em;
	width: 70%;
}
button { 
	border : none;
	padding : 0.7em 0;
	display : inline-block;
	background-color: #aabbcc;
	width : 20%;
	font-size: 1em;
/* 	min-width : 200px; */
	cursor: pointer;
	margin: 2%;
	border-radius: 50px;
}
button.ui-button {
	width: auto;
}
#indicateur {
	background-color: none;
	margin: 0 0 1em 0;
}

#indicateur h2 {
    text-align: right;
    margin: 0;
}
#selectPartExercice{
	min-height : 250px;
	padding: 0 5%;
	position: relative;
}
#frmExercice {
   margin: auto;
   width : 80%; 
}

#selectPartNiveau, #selectPartPiste{
	padding: 0 5%;
}

#frmErreur {
    position: absolute;
	width: 82%;
	background-color: #ccc;
	left: 9%;
	bottom: 10px;
	box-shadow: 4px 4px 25px #999;
	border: solid 1px #999;
}
#frmExercice div {
    margin-bottom : 1em;
}
#frmErreur p {
    margin-top: 0;
}
#bodyErreur {
	padding : 5%;
	background-color:#eeffee; 
}
#bodyErreur span{
	padding : 0.3em;
	background-color: white;
	margin : 0.5em 1em;
	display: block;
}
cite{
	display: inline-block;
	text-decoration: line-through;
	margin-left: 1em;
	color : black;
}
#barreBoutonsErreur {
	text-align : right;
}
#closeErreur{
	cursor: pointer;
}
#closeErreur:hover{
	text-decoration: underline;
}
#listeErreurs {
/* 				font-size: 0.8em; */
/* 				padding: 0 2%; */
}
.teacherVoice {
    padding: 0 2%;
	background-color: #e6e7eb;
	border-radius: 25px;
	max-width: 60%;
	padding: 18px;
	position: relative;
	min-width: 15%;
	display: inline-block;
	margin-left: 50px;
	margin-right: 30%;
}
.teacherVoice::after {
	content: "";
	background-image: url('../images/flecheGrise.png');
	width: 40px;
	height: 20px;
	display: block;
	position: absolute;
	left: -15px;
	margin-top: 0;
	bottom: 0px;
}
.teacherVoice::before {
	content: "";
	background-image: url('../images/profs_def.png');
	width: 50px;
	height: 50px;
	display: block;
	position: absolute;
	left: -65px;
	margin-top: 0;
	bottom: 0px;
	background-position: 190px 0px;
	background-size: 2600%;
	border-radius: 25px;
	box-shadow: 2px 2px 2px #ccc;
}
.teacherVoice.n1t4::before {
	background-position: 1px 0px;
}
.teacherVoice.n1t3::before {
	background-position: -63px 0px;
}
.teacherVoice.n1t2::before {
	background-position: -128px 0px;
}
.teacherVoice.n1t1::before {
	background-position: -196px 0px;
}
.teacherVoice.n2t4::before {
	background-position: -261px 0px;
}
.teacherVoice.n2t3::before {
	background-position: -327px 0px;
}
.teacherVoice.n2t2::before {
	background-position: -392px 0px;
}
.teacherVoice.n2t1::before {
	background-position: -455px 0px;
}
.teacherVoice.n3t4::before {
	background-position: -521px 0px;
}
.teacherVoice.n3t3::before {
	background-position: -588px 0px;
}
.teacherVoice.n3t2::before {
	background-position: -654px 0px;
}
.teacherVoice.n3t1::before {
	background-position: -722px 0px;
}
.teacherVoice.n4t4::before {
	background-position: -788px 0px;
}
.teacherVoice.n4t3::before {
	background-position: -853px 0px;
}
.teacherVoice.n4t2::before {
	background-position: -917px 0px;
}
.teacherVoice.n4t1::before {
	background-position: -984px 0px;
}
.teacherVoice.n5t4::before {
	background-position: -1048px 0px;
}
.teacherVoice.n5t3::before {
	background-position: -1111px 0px;
}
.teacherVoice.n5t2::before {
	background-position: -1177px 0px;
}
.teacherVoice.n5t1::before {
	background-position: -1244px 0px;
}
.teacherVoice.p0::before {
	background-position-y: 0px;
}
.teacherVoice.p1::before {
	background-position-y: 52px;
}
.pupilVoice {
	background-color: #3facfc;
	padding: 1em;
	border-radius: 25px;
	margin-left: 25%;
	color: #fff;
	position: relative;
}
.pupilVoice::after {
	content: "";
	background-image: url('../images/fleche.png');
	width: 40px;
	height: 20px;
	display: block;
	position: absolute;
	right: -20px;
	margin-top: 0;
	bottom: 0px;
}

#listeErreurs ul {
	padding : 0;
}
#listeErreurs li {
	margin : 1em 0;
	list-style: none;
}
#listeErreurs em {
	display: block;
	margin: 0 0.2em;
	padding: 0 0 0 0.5em;
}

#selectPartBilan {
	padding : 0 5%;
}
#bodyPartBilan {

}
#score {
	font-weight: bold;
	font-size:  2em;
}
#correction, 
.correction {
	color : green;
	font-weight : bold;
	margin-left: 30%
}

.red {
	background-color : red;
	color : white;
}
.green {
	background-color : green;
	color : white;
}
.black {
	background-color : black;
	color : white;
}
.off-piste {
	background-color : yellow;
	color : black;
}
#titlePiste strong {
	padding: 5px 40px;
	border-radius: 63px;
	border: solid 1px #333;
}

.ligneScore span {
	display : inline-block;
	padding : 0.1em;
}
.ligneScore .compteur {
	width : 10%;
}
.ligneScore .name {
	width : 25%;
}
.ligneScore .house {
    width: 40%;
/*     padding: 0.5em 0; */
	line-height : 2em;
}
.ligneScore .point {
	width : 20%;
}
.ligneScore .temps {
	width : 20%;
}
.ligneScore .score {
	width : 20%;
}
.ligneValeur .point,
.ligneValeur .temps,
.ligneValeur .compteur {
	text-align: center;
}

.ligneScore.self {
	font-weight : bold;
	color: #fff;
	background-color: #555;
}
.ligneTitre {
	font-weight : bold;
	background-color: #ccc;
	margin-top : 1em;
	text-align : center;
}
.scoreBoard .message {
	color: #090;
	font-weight: bold;
	margin: 1em 0 0 0;
}
.scoreBoard .house .content {
	background-size: contain;
	background-repeat: no-repeat;
	padding-left: 40px;
}

@media all and (max-width: 750px)
{
	label {
		width : 100%;
	}
    input {
        width: 100%;
    }
    button {
    	width: 95%;
    }

	#barreBoutonsExercices {
		margin-top : 4em;
		display: inline-grid;
		grid-template-columns: 95%;
/* 		grid-template-rows: 80px 80px; */
		width: 100%;
	}
	#barreBoutonsExercices button {
		width: 95%;
	}
    .left {
    	grid-column-start: 1; 
		grid-row-start: 2; 
	}
	.col3 .right, .right {
		grid-column-start: 1; 
		grid-row-start: 1; 
	}

	#correction,.correction {
		margin-left: 0;
	}
}