h1{color:green;}


body {background-color:#008080;
}


#board{
	position:absolute;
left:32%;
top:17%;

}

/****************case****************/
.case{background-color:#F0FFFF;background-image:url('img/case1.png');  position:absolute;}

#joueur1{
	position:absolute;
	background-color:red;
	background-image:url('img/spritejoueur1ok.png');

}

#joueur2{
	position:absolute;
	background-color:blue;
	background-image:url('img/spritejoueur2ok.png');
}

#boardecran{
	position:absolute;
left:32%;
top:17%;
width:400px;
height:400px;
z-index:6;
display:none;
background-color:white;
opacity:5%;

}

.mur
{background-color:black;background-image:url('img/murs.png'); position:absolute;}

#Kunai{
	position:absolute;
	background-image:url('img/kunai1.png');
	z-index:2;
	height:100px;
	width:100px;
	display:none;
}
#bloque{
	position:absolute;
	background-color:blue;
	opacity:6%;
	z-index:2;
	height:100px;
	width:100px;
	display:none;
}
#bloquejoueur{
	position:absolute;
	
	
	z-index:2;
	height:100px;
	width:100px;
	display:none;
}

#effect1{
	position:absolute;
	background-color:yellow;
	opacity:40%;
	z-index:5;
	height:100px;
	width:100px;
	display:none;
}
#effect2{
	position:absolute;
	background-color:yellow;
	opacity:40%;
	z-index:5;
	height:100px;
	width:100px;
	display:none;
}
#effect3{
	position:absolute;
	background-color:yellow;
	opacity:40%;
	z-index:5;
	height:100px;
	width:100px;
	display:none;
}
#effect4{
	position:absolute;
	background-color:yellow;
	opacity:40%;
	z-index:5;
	height:100px;
	width:100px;
	display:none;
}

#homepage{
	position:absolute;
background-image:url('img/homepage1.png');
	z-index:7;
	height:600px;
	width:1200px;
	left:1%;
	top:2%;
	border:solid 1px black;
}
#start{
	position:absolute;
background-image:url('img/newgame.png');
	z-index:5;
	height:600px;
	width:1200px;
	left:1%;
	top:2%;
	border:solid 1px black;
}
#fenetre{
	position:absolute;

	
	height:600px;
	width:1200px;
	left:1%;
	top:2%;
	
}
#restart{
	position:absolute;
background-color:#008080;
	z-index:4;
	height:60px;
	width:150px;
	left:3%;
	top:0%;
	background-image:url('img/restart.png');
}
#tourj1{
	position:absolute;
opacity:80%;
	z-index:4;
	height:60px;
	width:220px;
	left:40%;
	top:0%;
	background-image:url('img/tourj1.png');
	display:none;
}
#tourj2{
	position:absolute;
opacity:80%;
	z-index:4;
	height:60px;
	width:220px;
	left:40%;
	top:0%;
	background-image:url('img/tourj2.png');
	display:none;
}

#fin{
	position:absolute;
background-image:url('img/ecranfin1.png');
	z-index:8;
	
	left:1%;
	top:2%;
	display:none;
	height:600px;
	width:1200px;
	border:solid 1px black;
}
#btn_start{
	position:absolute;

	width:80px;
	left:42%;
	top:30%;

}

#control{
	position:absolute;
background-image:url('img/control1.png');
	z-index:3;
	height:400px;
	width:250px;
	left:5%;
	top:17%;
}
#control2{
	position:absolute;
background-image:url('img/control1.png');
	z-index:3;
	height:400px;
	width:250px;
	left:72%;
	top:17%;
}

#moving{
	position:absolute;
	
	z-index:3;
	height:150px;
	width:150px;
	display:none;
	left:50px;
	top:50px;
}

#move1{
	position:absolute;
	
	z-index:3;
	height:50px;
	width:50px;
	background-image:url('img/move1.png');
	left:50px;
	
}
#move2{
	position:absolute;
		background-image:url('img/move2.png');
	z-index:3;
	height:50px;
	width:50px;
	
	left:100px;
	top:50px;
}
#move3{
	position:absolute;
		background-image:url('img/move3.png');
	z-index:3;
	height:50px;
	width:50px;
	
	left:50px;
	top:100px;
}
#move4{
	position:absolute;
		background-image:url('img/move4.png');
	z-index:3;
	height:50px;
	width:50px;
	
	
	top:50px;
}
#rotating{
	position:absolute;
	background-color:black;
	z-index:3;
	height:75px;
	width:150px;
	display:none;
	left:50px;
	top:270px;
}

#rotate1{
	position:absolute;
		background-image:url('img/rotate2.png');
	z-index:3;
	height:75px;
	width:75px;
}
#rotate2{
	position:absolute;
			background-image:url('img/rotate1.png');
	z-index:3;
	height:75px;
	width:75px;
	left:75px;
}



.ClassName {
	font-weight:bold;
	text-decoration:none;
	font-family:Arial;
	box-shadow:inset #fa5c00 0px 5px 8px -1px,#a8a8a8 1px 3px 2px;
	o-box-shadow:inset #fa5c00 0px 5px 8px -1px,#a8a8a8 1px 3px 2px;
	-moz-box-shadow:inset #fa5c00 0px 5px 8px -1px,#a8a8a8 1px 3px 2px;
	-webkit-box-shadow:inset #fa5c00 0px 5px 8px -1px,#a8a8a8 1px 3px 2px;
	background:#f2de00;
	background:-o-linear-gradient(90deg, #f2de00, #edb600);
	background:-moz-linear-gradient( center top, #f2de00 5%, #edb600 100% );
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #f2de00), color-stop(1, #edb600) );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f2de00', endColorstr='#edb600');
	background:-webkit-linear-gradient(#f2de00, #edb600);
	background:-ms-linear-gradient(#f2de00, #edb600);
	background:linear-gradient(#f2de00, #edb600);
	text-indent:0px;
	line-height:30px;
	-moz-border-radius:9px;
	-webkit-border-radius:9px;
	border-radius:9px;
	text-align:center;
	vertical-align:middle;
	display:inline-block;
	font-size:18px;
	color:#000000;
	width:150px;
	height:50px;
	padding:13px;
	border-color:#000000;
	border-width:2px;
	border-style:solid;
}

.ClassName:active {
	box-shadow:inset #fa5c00 0px 5px 8px -1px,#a8a8a8 1px 0 2px;
	o-box-shadow:inset #fa5c00 0px 5px 8px -1px,#a8a8a8 1px 0 2px;
	-moz-box-shadow:inset #fa5c00 0px 5px 8px -1px,#a8a8a8 1px 0 2px;
	-webkit-box-shadow:inset #fa5c00 0px 5px 8px -1px,#a8a8a8 1px 0 2px;
	position:relative;
	top:3px
}

.ClassName:hover {
	background:#edb600;
	background:-o-linear-gradient(90deg, #edb600, #f2de00);
	background:-moz-linear-gradient( center top, #edb600 5%, #f2de00 100% );
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #edb600), color-stop(1, #f2de00) );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#edb600', endColorstr='#f2de00');
	background:-webkit-linear-gradient(#edb600, #f2de00);
	background:-ms-linear-gradient(#edb600, #f2de00);
	background:linear-gradient(#edb600, #f2de00);
}

.button {
   border-top: 1px solid #000000;
   background: #c77e00;
   background: -webkit-gradient(linear, left top, left bottom, from(#ffd500), to(#c77e00));
   background: -webkit-linear-gradient(top, #ffd500, #c77e00);
   background: -moz-linear-gradient(top, #ffd500, #c77e00);
   background: -ms-linear-gradient(top, #ffd500, #c77e00);
   background: -o-linear-gradient(top, #ffd500, #c77e00);
   padding: 11.5px 23px;
   -webkit-border-radius: 8px;
   -moz-border-radius: 8px;
   border-radius: 8px;
   -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
   -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
   box-shadow: rgba(0,0,0,1) 0 1px 0;
   text-shadow: rgba(0,0,0,.4) 0 1px 0;
   color: #000000;
   font-size: 14px;
   font-family: 'Lucida Grande', Helvetica, Arial, Sans-Serif;
   text-decoration: none;
   vertical-align: middle;
   width:150px;
   height:50px;
   margin-left:50px;
   margin-top:100px;
   }
.button:hover {
   border-top-color: #1e8c00;
   background: #1e8c00;
   color: #ccc;
   }
.button:active {
   border-top-color: #000000;
   background: #000000;
   }