@charset "utf-8";
/* CSS Document */

@font-face {
	font-family:'ExoRegular';
	src:url('fonts/exo-regular-webfont.eot');
	src:url('fonts/exo-regular-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/exo-regular-webfont.woff') format('woff'), url('fonts/exo-regular-webfont.ttf') format('truetype'), url('fonts/exo-regular-webfont.svg#ExoRegular') format('svg');
	font-weight:normal;
	font-style:normal;
}
@font-face {
	font-family:'ExoDemiBold';
	src:url('fonts/exo-DemiBold-webfont.eot');
	src:url('fonts/exo-DemiBold-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/exo-DemiBold-webfont.woff') format('woff'), url('fonts/exo-DemiBold-webfont.ttf') format('truetype'), url('fonts/exo-DemiBold-webfont.svg#ExoDemiBold') format('svg');
	font-weight:normal;
	font-style:normal;
}

html{
	margin : 0;
	width : 100%;
	height : 100%;
}
body{
	text-align : center;
	background-color : #f9f9f9;
	font-family: "ExoRegular",Helvetica,Arial,sans-serif;
}
.selectVar{
	margin : 0 5%;
	padding : 0 2em;
	padding-bottom : 1em;
}
.selectVar, .unePartie, aside, .stats, #boxMsgAtt{
	background-color : white;
	border : 1px solid #675445;
	border-radius : 5px;
}
.var{
	margin : 0.5em;
}
.var a, .boutonRep a, .quitter a, .rejouer a, .questionPrio a{
	text-decoration : none;
	font-size : 1.2em;
	color : #d90101;
}
.var a:hover, .boutonRep a:hover, .quitter a:hover, .rejouer a:hover, .questionPrio a:hover{
	text-decoration : underline;
}
.pagePartie{
	margin-top : 5em;
	display : flex;
	flex-direction : row;
}
.partie{
	width : 65%;
	display : inline-block;
	padding : 0 2em 0;
	vertical-align : top;
	order : 1;
	flex-basis : auto;
	flex-grow : 3;
}
.unePartie{
	padding-bottom : 1em;
	margin-bottom : 1em;
}
body h1{
	font-size : 1.4em;
	color: #6e6e70;
}
.partie h1{
	font-size : 1.4em;
	color: #e7714d;
}
.listRep{
	margin-top : 2em;
}
.boutonRep{
	display : inline-block;
	margin : 0 1em;
}
.questionPrio{
	display : block;
	margin : 0.5em 0;
}
aside{
	display : inline-block;
	margin-right : 2em;
	margin-left : 0;
	padding : 1em;
	text-align : left;
	flex-grow : 1;
	order : 2;
}
aside h1{
	font-size : 1.2em;
	color: #6e6e70;
}
aside h2, .stats h2{
	font-size : 1.1em;
	font-weight : none;
	color: #e7714d;
}
.stats{
	margin : 0 5% 1em;
	padding : 0 1em;
}
.stats p{
	text-align : left;
	text-indent : 4em;
}
#boxMsgAtt{
	z-index : 3;
	position : absolute;
	display : none;
	text-align : center;
	margin-top: 30vh;
	right : 40vw;
	background-color : white;
	padding : 0.5em 1em;
	width : 20vw;
	align-item : center;
}
#filtre{
	position : fixed;
	top : 0;
	left : 0;
	width : 100%;
	height : 100%;
	background-color : black;
	opacity : 0.6;
	z-index : 2;
	filter : alpha(opacity=70);
	display : none;
}
#imgAtt, #msgAtt{
	flex-grow : 1;
	margin : auto;
}
#imgAtt{
	margin : 0.5em;
	flex-basis : auto;
}