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

/*© Marc Oddou - MOddou*/


.fond {position: absolute;
	border: 8px solid #CF6;
	margin-left: 15%;
	height: 768px;
	text-align: center;
	width: 1024px;
	background-color: #CCF;
	border-radius: 10px;
}

.fondliste{
	position: absolute;
	margin-left: auto;
	margin-right: auto;
	background-color : #F7B767;
	margin-left: 5%;
	margin-top: 650px;
	border-radius: 5px;
	height: 65px;
	width: 900px;
	left: -16px;
	top: 53px;
	z-index:-1
}	

#bravo{
	position:absolute;
		color:#FFF;
		font-size:32px;
		box-shadow: 10px 10px 5px #888;
	text-align:center;
background-color :#3C3;
border-radius:2px;	
margin-left:40%;
margin-top:3%;
	height:50px;
	text-align:center;
	width: 200px;
		cursor:pointer;
		visibility:hidden}
		
		
	#coyright{
	position:absolute;
		color:#FFF;
		font-size:12px;
			text-align:center;
background-color:#666;
border-radius:2px;	
margin-left:5%;
margin-top:0%;
	height:15px;
	text-align:center;
	width: 170px;
		cursor:pointer;}	

		
#titre{
	position:relative;
	  margin-left: auto;
  margin-right: auto;
	font-size:30px;
	text-align:center;
	margin-top:20;
	height:40px;
	width: 600px;	
	border-color:#0FF;
	margin-bottom:0.2em;
	background-color:#CF6;
border-radius:2px;
color:#C36}


#mot1{
	position: absolute;
	color: #FFF;
	transition: all 0.4s ease-in-out;
	box-shadow: 10px 10px 5px #888;
	text-align: center;
	background-color : #000;
	border-radius: 5px;
	height: 28px;
	text-align: center;
	width: 159px;
	cursor: pointer;
	left: 211px;
	top: 149px;
	visibility: hidden
}

#mot2{
	position: absolute;
	color: #FFF;
	transition: all 0.4s ease-in-out;
	box-shadow: 10px 10px 5px #888;
	text-align: center;
	background-color : #000;
	border-radius: 5px;
	height: 28px;
	text-align: center;
	width: 205px;
	cursor: pointer;
	left: 610px;
	top: 149px;
	visibility: hidden
}
#mot3{
	position: absolute;
	color: #FFF;
	transition: all 0.4s ease-in-out;
	box-shadow: 10px 10px 5px #888;
	text-align: center;
	background-color : #000;
	border-radius: 5px;
	height: 28px;
	text-align: center;
	width: 142px;
	cursor: pointer;
	left: 740px;
	top: 192px;
	visibility: hidden
}
#mot4{
	position: absolute;
	color: #FFF;
	transition: all 0.4s ease-in-out;
	box-shadow: 10px 10px 5px #888;
	text-align: center;
	background-color : #000;
	border-radius: 5px;
	height: 28px;
	text-align: center;
	width: 174px;
	cursor: pointer;
	left: 697px;
	top: 300px;
	visibility: hidden
}

#mot5{
	position: absolute;
	color: #FFF;
	transition: all 0.4s ease-in-out;
	box-shadow: 10px 10px 5px #888;
	text-align: center;
	background-color : #000;
	height: 24px;
	border-radius: 5px;
	text-align: center;
	width: 139px;
	cursor: pointer;
	left: 421px;
	top: 141px;
	visibility: hidden
}

#mot6{
	position: absolute;
	color: #FFF;
	transition: all 0.4s ease-in-out;
	box-shadow: 10px 10px 5px #888;
	text-align: center;
	background-color : #000;
	border-radius: 5px;
	height: 28px;
	text-align: center;
	width: 205px;
	cursor: pointer;
	left: 442px;
	top: 516px;	visibility:hidden

}
	
#mot1:hover {
  background-color :#33C;
 
}
#mot2:hover {
  background-color : #33C
  
}
#mot3:hover {
  background-color : #33C
}
#mot4:hover {
  background-color :#33C
}
#mot5:hover {
  background-color : #33C
}
#mot6:hover {
  background-color : #33C}

	#etape1{
	position:absolute;
		color:#FFF;
		font-size:25px;
		box-shadow: 10px 10px 5px #888;
	text-align:center;
background-color :#F39;
border-radius:8px;
margin-left:30%;
margin-top:30%;
	height:50px;
	text-align:center;
	width: 400px;
		cursor:pointer;}
		
	#consigne{
	position: absolute;
	color: #FFF;
	font-size: 24px;
	box-shadow: 10px 10px 5px #888;
	text-align: center;
	background-color : #F39;
	border-radius: 8px;
	margin-left: 30%;
	margin-top: 600px;
	height: 30px;
	text-align: center;
	width: 483px;
	cursor: pointer;
	left: -237px;
	top: -440px;
}	

		
			
#numero1,#numero2,#numero3,#numero4,#numero5,#numero6{
opacity:0;
z-index:+1}

#numero1{
	position: absolute;
	color: #FFF;
	box-shadow: 10px 10px 5px #888;
	text-align: center;
	background-color : #000;
	margin-left: 630px;
	margin-top: 400px;
	height: 171px;
	text-align: center;
	width: 150px;
	cursor: pointer;
	left: -408px;
	top: -222px;
}
	
#numero2{
	position: absolute;
	color: #FFF;
	box-shadow: 10px 10px 5px #888;
	text-align: center;
	background-color : #000;
	margin-left: 250px;
	margin-top: 500px;
	height: 177px;
	text-align: center;
	width: 145px;
	cursor: pointer;
	left: 351px;
	top: -326px;
}
#numero3{
	position: absolute;
	color: #FFF;
	box-shadow: 10px 10px 5px #888;
	text-align: center;
	background-color : #000;
	margin-left: 100px;
	margin-top: 70px;
	height: 143px;
	text-align: center;
	width: 112px;
	cursor: pointer;
	left: 652px;
	top: 120px;
}
		
	#numero4{
	position: absolute;
	color: #FFF;
	box-shadow: 10px 10px 5px #888;
	text-align: center;
	background-color : #000;
	margin-left: 390px;
	margin-top: 330px;
	height: 290px;
	text-align: center;
	width: 190px;
	cursor: pointer;
	left: 282px;
	top: 4px;
}	
		
	#numero5{
	position: absolute;
	color: #FFF;
	box-shadow: 10px 10px 5px #888;
	text-align: center;
	background-color : #000;
	margin-left: 370px;
	margin-top: 200px;
	height: 200px;
	text-align: center;
	width: 189px;
	cursor: pointer;
	left: 22px;
	top: -33px;
}
		
	#numero6{
	position: absolute;
	color: #FFF;
	box-shadow: 10px 10px 5px #888;
	text-align: center;
	background-color : #000;
	;
	margin-left: 570px;
	margin-top: 420px;
	height: 34px;
	text-align: center;
	width: 80px;
	cursor: pointer;
	left: -107px;
	top: 56px;
}
		
	
#start{
	position:absolute;
		color:#FFF;
		font-size:24px;
		box-shadow: 10px 10px 5px #888;
	text-align:center;
background-color:#33C;
border-radius:3px;	
margin-left:40%;
margin-top:0%;
	height:35px;
	text-align:center;
	width: 200px;
		cursor:pointer;}
		
#source{
	position: absolute;
	color: #FFF;
	font-size: 14px;
	box-shadow: 10px 10px 5px #888;
	text-align: center;
	background-color:#000;
	border-radius: 3px;
	margin-left: 100px;
	margin-top: 500px;
	height: 25px;
	text-align: center;
	width: 631px;
	left: 104px;
	top: 257px;
}
		
#lecteur{
	position:absolute;
		color:#00F;
		font-size:20px;
	text-align:center;
background-color:#FF3;
border-radius:3px;	
margin-left:350px;
margin-top:50px;
	height:25px;
	width: 300px;
		}
		
		
#erreurs{
	position: absolute;
	color: #FFF;
	font-size: 24px;
	box-shadow: 10px 10px 5px #888;
	text-align: center;
	background-color: #F00;
	border-radius: 3px;
	margin-left: 40%;
	margin-top: 0%;
	height: 28px;
	text-align: center;
	width: 159px;
	cursor: pointer;
	left: 27px;
	top: 86px;
	visibility: hidden
}
			
			
			
#non{
	position:absolute;
		color:#FFF;
		font-size:18px;
		box-shadow: 10px 10px 5px #888;
	text-align:center;
background-color :#F00;
border-radius:2px;	
margin-left:83%;
margin-top:32%;
	height:30px;
	text-align:center;
	width: 100px;
		cursor:pointer;}
	
	




#image{
	position: absolute;
	margin-left: 110px;
	margin-top: 2.5cm;
	cursor: pointer;
	left: 66px;
	top: 4px;
}


#logofacebook{
		position:absolute;
		z-index:+3;
	margin-left:570px;
	margin-top:700px;
	
	
}

#logo{
		position:absolute;
	margin-left:730px;
	margin-top:0cm;
	
	
	
}


body {
	background-color: #9CF;
}