/* MENU DEROULANT NE PAS TOUCHER */

*{
	margin:									0px;
	padding:								0px;
	font_family:							sans-serif;
}

nav{
	width:									100%;
	margin:									0 auto;
	background-color:						white;
	position:								sticky;
	top:									0px;
}

nav ul{
	list-style-type:						none;
}

nav ul li{
	float:									left;
	width:									25%;
	text-align:								center;
}

nav ul::after{
	content:								"";
	display:								table;
	clear:									both;
}

nav a{
	display:								block;
	text-decoration:						none;
	color:									black;
	border-bottom:							2px solid transparent;
	padding:								10px 0px;
}

nav a:hover{
	color:									orange;
	border-bottom:							2px solid gold;
}

.sous{
	display:								none;
	box-shadow:								0px 1px 2px #CCC;
	background-color:						white;
}

nav > ul li:hover .sous{
	display:								block;
}

.sous li{
	float:									none;
	width:									100%;
	text-align:								left;
}

.sous a{
	padding:								10px;
	border-bottom:							none;
}

.sous a:hover{
	border-bottom:							none;
	background-color:						RGBa(200,200,200,0.1);
}

.deroulant > a::after{
	content:								"▼";
	font-size:								12px;
}

.sous{
	display:								none;
	box-shadow:								0px 1px 2px #CCC;
	background-color:						white;
	position:								absolute;
	width:									100%;
	z-index:								1000;
}

nav ul li{
	float:									left;
	width:									25%;
	text-align:								center;
	position:								relative;
}

/* MENU DEROULANT NE PAS TOUCHER */

/*GENERATEUR D'HISTOIRE */

#saisieMots{
	float:									left;
	width :									45%;
}

#saisieMots li{
	line-height:							2em;
	text-transform:							uppercase;
	margin-top:								8px;
}

input[type=text]{
	border-width:							0 0 1px 0;
	border-color:							#333;
}

#dixButton{
	text-align:								center
}

#btnRemplacer{
	margin-top:								30px;
	width:									200px;
}

#divHistoire{
	margin-top:								12px;
	width:									45%;
	border:									1px dashed blue;
	padding:								8px;
	float:									left;
}

.remplacement{
	text-decoration:						underline;
	text-transform:							uppercase;
}

/* GENERATEUR D'HISTOIRE */

/* TRAIN */

#conteneur{
	padding:								10%;
	margin:									center;
	
	width:									720px;
	height:									80%;
	background-color:						#00FF00;
}

#rails{
	width:									700px;
	border-top:								2px solid white;
	border-bottom:							2px solid white;
	margin:									20px auto;
}

#train{
	height:									92px;
	width:									100px;
	position:								relative;
	left:									0px;
}

#btnStopper{
	padding-top:							15px;
	margin:									10 px auto;
	background-color:						white;
	width:									100px;
	height:									50px;
	color:									red;
	text-align:								center;
	font-size:								24px;
	line-height:							30px;
}

/* TRAIN */

/* HISTOIRE SUR MARS */

#hHistoire {
    width: 									100%;
    color: 									yellow;
    height: 								80%;
    background-color:						#348;
    overflow-y:								scroll;
}
#hPied, .hHistoire:after {
    position:								static;
    bottom: 								0;
    height: 								20%;
}
#hQuestion {
    padding: 								10px 0;
    width: 									100%;
    background-color: 						#EEE;
    color: 									#333;
}
#hReponse {
    padding: 								10px 0;
    width: 									100%;
    background-color: 						#333;
    color: 									#FFF;
    text-align: 							center;
    display: 								none;
}
.hEpisode {
    display:								none;
}

/* HISTOIRE SUR MARS */

/* CASSE BRIQUE */

canvas{
	background:								#eee;
	display:								block;
	
	margin:									0 auto;
	
	padding-bottom:							20px;
	margin-bottom:							40px;
}

/* CASSE BRIQUE */

/* BRAIN */

.brain{
	display:								block;
	float:									right;
	
	margin-bottom:							40px;
	padding-top:							40px;
}

.paragraphe{
	margin-top:							10px;
}

#question{
	margin-top:								10px;
	margin-bottom:							10px;
	
	display:								block;
	height:									auto;
	text-align:								center;
	font-size:								50px;
	color:									blue;
	
	border:									2px dashed blue;
	background-color:						#DDDDDD;
	
}

#tmp{
	display:								block;
	width:									90%;
	height:									auto;
	font-size:								medium;
	border-color:							blue;
	text-align:								center;
}

#assertion1, #assertion2, #assertion3, #assertion4, #assertion5{
	width:									19%;
}

#resultat{
	margin-top:								1%;
	padding-top:							6px;
	padding-bottom:							6px;
	
	display:								block;
	width:									90%;
	height:									auto;
	font-size:								large;
	border:									2px solid blue;
	border-radius:							10px;
	text-align:								center;
}

#score{
	margin-top: 							2px;
	margin-bottom:							10px;
	padding-top:							6px;
	padding-bottom:							6px;
	
	display: 								block;
	width:									90%;
	height: 								auto;
	font-size:								large;
	margin-rigth: 							2px;
	text-decoration-color:					purple;
	
	border:									2px solid blue;
	border-radius:							10px;
	text-align:								center;
}

#Recomm{
	width:									auto;
}

#ann{
	width:									auto;
	
}

/* BRAIN */

body{
	width:									60%;
	margin:									auto;
}

h1{
	text-align:								center;
	font-size:								50px;
	
	color:									blue;
}

p span{
	display:								block;
}

h2{
	color:									orange;
	
	margin:									10px 0px 10px 0px;
	padding:								5px 0px 5px 0px;
	
	text-align:								center;
	
	border-bottom:							2px solid black;
	border-top:								2px solid black;
}

.locomotive{
	margin-bottom:							40px;
}

.mars{
	margin-bottom:							40px;
}

.number{
	margin-bottom:							40px;
}

.generateur{
	padding-bottom:							40px;
}

.explication{
	text-align:								center;
}

#photo{
	display:								block;
	width:									150px;
	height:									150px;
	
	margin-top:								20px;
	margin-bottom:							20px;
	
}

.jeu{
	margin-bottom:							20px;
	margin-top:								20px;
	
	color:									#C22D31;
}

.materiel{
	margin-bottom:							10px;
	margin-top:								10px;
	
	font-weight:							bold;
}

h4{
	text-decoration:						underline;
}