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

body
{
background-color:#1e1e15;
}

h1 input
{
	background-color:transparent;
	border:none;
	font-size:24px;
}
#game
{

background-color:black;

	width:1200px;
	height:600px;
	
	z-index:1;
	position:absolute;
top:5%;
left:10%;
  border:solid 2px;

  
}

#menu
{
background-color:#339966;
	width:1200px;
	height:600px;
	position:absolute;
	left:0%;
	top:0%;
	z-index:18;
	text-align:center;
display:block;
font-size:20px;
}
#regles
{
background-color:#339966;
	width:1200px;
	height:600px;
	position:absolute;
	left:0%;
	top:0%;
	z-index:18;
	text-align:center;
display:none;
font-size:20px;
}
#home
{
background-image:url(images/home.png);
	width:1200px;
	height:600px;
	position:absolute;
	left:0%;
	top:0%;
	z-index:20;
	text-align:center;
display:block;
}
#end
{
background-image:url(images/end.png);
	width:1200px;
	height:600px;
	position:absolute;
	left:0%;
	top:0%;
	z-index:20;
	text-align:center;
display:none;
}
.classindice {
	background-color:transparent;
	
z-index:5;
	cursor:pointer;
	
		
}

.classclue {
	background-color:#339966;
		width:200px;
	height:280px;
	
	color:black;
	font-family:Arial;
	font-size:17px;
	padding-right:0px;
	top:0px;
	left:0px;
	display:none;
		
}


#control
{
background-color:black;
	width:200px;
	height:600px;
	
	z-index:1;
	position:absolute;
top:0%;
left:20px;
text-align:center;


}

#indice
{
background-color:#339966;
	width:200px;
	height:280px;
		border-radius:3px;
	z-index:1;
margin-top:10px;
text-align:center;
color:black;
	font-family:Arial;
	font-size:15px;
}
#reponse
{
background-color:#339966;
	width:200px;
	height:100px;
		border-radius:3px;
	z-index:1;
margin-top:10px;
text-align:center;
padding-top:5px;
color:black;
	font-family:Arial;
	font-size:15px;
}
#objets
{
background-color:#339966;
	width:200px;
	height:130px;
		border-radius:3px;
	z-index:1;
margin-top:10px;
text-align:center;
padding-top:5px;
color:black;
	font-family:Arial;
	font-size:15px;
}


#pieces
{
background-color:white;
	width:900px;
	height:500px;
	
	z-index:1;
position:absolute;
top:50px;
left:300px;

}

#salon
{
	background-image:url(images/salon.png);
	width:900px;
	height:500px;
	
	z-index:4;
position:absolute;
top:0%;
left:0%;
display:none;
}
#cuisine
{
	background-image:url(images/cuisine.png);
	width:900px;
	height:500px;
	
	z-index:4;
position:absolute;
top:0%;
left:0%;
display:none;
}
#chambre
{
	background-image:url(images/chambre.png);
	width:900px;
	height:500px;
	
	z-index:4;
position:absolute;
top:0%;
left:0%;
display:none;
}
#jardin
{
	background-image:url(images/jardin.png);
	width:900px;
	height:500px;
	
	z-index:4;
position:absolute;
top:0%;
left:0%;
display:none;
}
#bureau
{
	background-image:url(images/bureau2.png);
	width:900px;
	height:500px;
	
	z-index:4;
position:absolute;
top:0%;
left:0%;
display:none;
}
#salledebain
{
	background-image:url(images/salledebain.png);
	width:900px;
	height:500px;
	
	z-index:4;
position:absolute;
top:0%;
left:0%;
display:none;
}
#map
{
background-color:#339966;
	width:900px;
	height:600px;
	
	z-index:3;
position:absolute;
top:0%;
left:300px;
display:none;
}


#salonmap
{
background-color:#ffff66;
	width:150px;
	height:200px;
	border:solid 1px;
	z-index:3;
position:absolute;
top:10%;
left:20%;
font-size:12px;
text-align:center;
}


#cuisinemap
{
background-color:orange;
	width:150px;
	height:200px;
	border:solid 1px;
	z-index:3;
position:absolute;
top:10%;
left:40%;
font-size:12px;
text-align:center;
}

#chambremap
{
background-color:#d9b3ff;
	width:200px;
	height:200px;
	border:solid 1px;
	z-index:3;
position:absolute;
top:50%;
left:20%;
font-size:12px;
text-align:center;
}
#jardinmap
{
background-color:#ccff99;
	width:50px;
	height:150px;
	border:solid 1px;
	z-index:3;
position:absolute;
top:35%;
left:60%;
font-size:12px;
text-align:center;
}
#bureaumap
{
background-color:#c4ff4d;
	width:100px;
	height:100px;
	border:solid 1px;
	z-index:3;
position:absolute;
top:50%;
left:45%;
font-size:12px;
text-align:center;
}
#salledebainmap
{
background-color:#80d4ff;
	width:100px;
	height:80px;
	border:solid 1px;
	z-index:3;
position:absolute;
top:70%;
left:45%;
font-size:12px;
text-align:center;
}

#clue1
{
display:block;
	width:20px;
	height:20px;
	
	
position:absolute;
top:120px;
left:705px;

}
#clue2
{display:block;

	width:90px;
	height:80px;
	
	
position:absolute;
top:190px;
left:130px;

}
#clue3
{
display:block;
	width:30px;
	height:30px;
	
	
position:absolute;
top:45px;
left:320px;

}
#clue4
{
display:block;
	width:30px;
	height:50px;
	
	
position:absolute;
top:12px;
left:235px;

}
#clue5
{
display:block;
	width:40px;
	height:70px;
	
	
position:absolute;
top:380px;
left:665px;

}
#clue6
{
display:block;
	width:150px;
	height:100px;
	cursor:pointer;
	
position:absolute;
top:190px;
left:500px;

}
#clue7
{
display:block;
	width:60px;
	height:10px;
	cursor:pointer;
	
position:absolute;
top:445px;
left:655px;

}
#clue8
{
display:block;
	width:20px;
	height:60px;
	cursor:pointer;
	
position:absolute;
top:170px;
left:757px;

}
#clue9
{
display:block;
	width:30px;
	height:50px;
	cursor:pointer;
	
position:absolute;
top:100px;
left:310px;

}
#clue10
{
display:block;
	width:30px;
	height:50px;
	cursor:pointer;
	
position:absolute;
top:100px;
left:490px;

}
#clue11
{
display:block;
	width:30px;
	height:50px;
	cursor:pointer;
	
position:absolute;
top:140px;
left:580px;

}
#clue12
{
display:block;
	width:100px;
	height:60px;
	cursor:pointer;
	
position:absolute;
top:335px;
left:500px;

}
#clue13
{
display:block;
	width:110px;
	height:70px;
	cursor:pointer;
	
position:absolute;
top:200px;
left:470px;

}

#clue14
{
display:none;
	width:100px;
	height:60px;
	cursor:pointer;
	
position:absolute;
top:300px;
left:450px;

}
#clue15
{
display:block;
	width:20px;
	height:30px;
	cursor:pointer;
	
position:absolute;
top:205px;
left:410px;

}
#clue16
{
display:block;
	width:30px;
	height:30px;
	cursor:pointer;
	
position:absolute;
top:193px;
left:387px;

}
#clue17
{
display:block;
	width:90px;
	height:35px;
	cursor:pointer;
	
position:absolute;
top:320px;
left:363px;

}
#clue18
{
display:none;
	width:30px;
	height:30px;
	cursor:pointer;
	
position:absolute;
top:193px;
left:387px;

}
#clue19
{
display:block;
	width:6px;
	height:6px;
	cursor:pointer;
	
position:absolute;
top:192px;
left:197px;

}
#clue20
{
display:block;
	width:30px;
	height:60px;
	cursor:pointer;
	
position:absolute;
top:60px;
left:320px;

}
#clue21
{
display:block;
	width:70px;
	height:30px;
	cursor:pointer;
	
position:absolute;
top:190px;
left:575px;

}
#clue22
{
display:block;
	width:30px;
	height:60px;
	cursor:pointer;
	
position:absolute;
top:300px;
left:735px;

}
#clue23
{
display:block;
	width:70px;
	height:75px;
	cursor:pointer;
	
position:absolute;
top:290px;
left:340px;

}
#clue24
{
display:none;
	width:30px;
	height:60px;
	cursor:pointer;
	
position:absolute;
top:300px;
left:735px;

}
#clue25
{

	width:20px;
	height:40px;
	cursor:pointer;
	
position:absolute;
top:205px;
left:360px;

}
#clue26
{
display:none;
	width:30px;
	height:60px;
	cursor:pointer;
	
position:absolute;
top:300px;
left:735px;

}
#clue27
{
display:none;
	width:30px;
	height:60px;
	cursor:pointer;
	
position:absolute;
top:300px;
left:735px;

}
#clue28
{
	width:30px;
	height:70px;
	cursor:pointer;
	
position:absolute;
top:70px;
left:238px;

}
#clue29
{
	width:30px;
	height:8px;
	cursor:pointer;
	
position:absolute;
top:160px;
left:288px;

}
#clue30
{
	display:none;
	width:40px;
	height:10px;
	cursor:pointer;
	
position:absolute;
top:150px;
left:310px;

}
#clue31
{
	
	width:15px;
	height:15px;
	cursor:pointer;
	
position:absolute;
top:195px;
left:715px;

}
#clue32
{
	
	width:70px;
	height:50px;
	cursor:pointer;
	
position:absolute;
top:200px;
left:590px;

}
#clue33
{
	
	width:20px;
	height:40px;
	cursor:pointer;
	
position:absolute;
top:150px;
left:350px;

}
#clue34
{
	
	width:70px;
	height:120px;
	cursor:pointer;
	
position:absolute;
top:310px;
left:670px;

}
#clue35
{
	
	width:60px;
	height:70px;
	cursor:pointer;
	
position:absolute;
top:190px;
left:150px;

}
#clue36
{
	
	width:70px;
	height:60px;
	cursor:pointer;
	
position:absolute;
top:230px;
left:345px;

}

#good
{
z-index:8;	
}
#zooming
{
color:white;
}
.btnheader {
	background-color:green;
	border-radius:3px;
	

	cursor:pointer;
	color:black;
	font-family:Arial;
	font-size:17px;
	border:none;
	

	width:160px;
	height:30px;
		margin-top:5px;
		margin-left:0px;
}
.btnheader:hover {
	background-color: orange;
}


.btnzoom {
	background-color:#000000;
	border-radius:120px;
	border:2px solid white;
	display:inline;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:16px;
	font-weight:bold;
	
text-align:center;

	width:40px;
	height:40px;
		
}
.btnzoom:hover {
	background-color: green;
}

.piece:hover {
	opacity:60%;
}