h1{color:green;}


body {background-color: #4d1a00;
}


#board1{
	position:absolute;
left:0px;
top:0%;

}

#board2{
	position:absolute;
left:600px;
top:0%;

}

/****************case****************/
.case{background-color:#F0FFFF; position:absolute; border:solid 1px black; box-sizing: border-box; opacity:30%}

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

}

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



.mur
{background-image:url('img/mur1.png'); position:absolute; z-index:6;border:solid 1px black; box-sizing: border-box;}

.canon
{background-image:url('img/canonsprite.png'); position:absolute; z-index:6;border:solid 1px black; box-sizing: border-box;}

.boulet
{background-image:url('img/boulet1.png'); position:absolute; z-index:6; opacity:80%;border:solid 1px black; box-sizing: border-box;}

#btnmur{
	position:absolute;
	background-image:url('img/mur2.png');
	left:10%;
	top:8%;
width:80px;
height:100px;
border:solid 1px black; box-sizing: border-box;
z-index:6;
}




#btncanon{
	position:absolute;
	background-image:url('img/canon2.png');
	left:67%;
	top:8%;
width:80px;
height:100px;
border:solid 1px black; box-sizing: border-box;
}
#btnvigie{
	position:absolute;
	background-image:url('img/vigie3.png');
	left:38%;
	top:8%;
width:80px;
height:100px;
border:solid 1px black; box-sizing: border-box;
}
#btnfeu{
	position:absolute;
	background-image:url('img/btnfeu1.png');
	left:0%;
	top:75%;
width:350px;
height:60px;
border:solid 1px black; box-sizing: border-box;
}
#vigie1{
	position:absolute;
	border:solid 1px black; box-sizing: border-box;
	background-image:url('img/vigie2.png');
	left:0%;
	top:0%;
width:60px;
height:60px;
z-index:7;
display:none;

}

#vigie2{
	position:absolute;
	border:solid 1px black; box-sizing: border-box;
	background-image:url('img/vigie2.png');
	left:0%;
	top:0%;
width:60px;
height:60px;
z-index:7;
display:none;

}


#treve{
	position:absolute;
	background-color:grey;
	opacity:60%;
	left:0%;
	top:75%;
width:350px;
height:60px;
z-index:3;

}
#piraterie{
	position:absolute;
	display:none;
	left:0%;
	top:75%;
width:350px;
height:60px;
z-index:2;
opacity:100%;

}
#endturn{
	position:absolute;
	background-image:url('img/btnend1.png');
	left:0%;
	top:89%;
width:350px;
height:60px;
border:solid 1px black; box-sizing: border-box;
}

#place{
	position:absolute;
	background-image:url('img/place1.png');
	left:180px;
	top:0%;
	z-index:6;
width:300px;
height:420px;
display:none;
border:solid 1px black;
text-align:center;
}
#placesabotage{
	position:absolute;
	background-image:url('img/sabotage1.png');
	left:180px;
	top:0%;
	z-index:6;
width:300px;
height:420px;
display:none;
border:solid 1px black;
text-align:center;
}
#tempete{
	position:absolute;
	background-image:url('img/tempete1.png');
	left:180px;
	top:0%;
	z-index:7;
width:300px;
height:420px;
display:none;
border:solid 1px black;
text-align:center;
}
#alerte{
	position:absolute;
	background-image:url('img/alerte1.png');
	left:180px;
	top:0%;
	z-index:6;
width:300px;
height:420px;
display:none;
border:solid 1px black;
text-align:center;
}
#bateauj1{
	position:absolute;
	background-color:white;
	z-index:2;
	left:0px;
	top:0%;
width:60px;
height:620px;
opacity:0%;

}
#sang1{
	position:absolute;
	background-color:red;
	z-index:3;
	left:0px;
	top:0%;
width:60px;
height:420px;
opacity:20%;
display:none;

}
#sang2{
	position:absolute;
	background-color:red;
	z-index:3;
	left:600px;
	top:0%;
width:60px;
height:420px;
opacity:20%;
display:none;
}
#bateauj2{
	position:absolute;
	
	z-index:2;
	left:780px;
	top:0%;
width:60px;
height:620px;
opacity:0%;
}

#fogj2{
	position:absolute;
	background-color:#4d1a00;
	background-image:url('img/fogj2.png');
	z-index:7;
	left:1145px;
	top:6%;
width:185px;
height:620px;
display:none;
border:solid 1px black;
}
#fogj1{
	position:absolute;
			background-color:#4d1a00;
			background-image:url('img/fogj1.png');
	z-index:7;
	left:29%;
	top:6%;
width:178px;
height:620px;
display:none;
border:solid 1px black;
}
#masque1{
	position:absolute;
	
	z-index:8;
	left:0px;
	top:0%;
width:180px;
height:420px;
display:none;

}
#masque2{
	position:absolute;
	
	z-index:8;
	left:480px;
	top:0%;
width:180px;
height:420px;
display:none;

}

#battlefield{
	position:absolute;

	z-index:2;
	left:37%;
	top:22%;
width:660px;
height:420px;

}


#texture{
	position:absolute;
	background-image:url('img/board2.png');
	z-index:1;
	left:29%;
	top:6%;
width:900px;
height:620px;
border:solid 1px black;
}

#control{
	position:absolute;
	background-image:url('img/control1.png');
	z-index:8;
	left:2%;
	top:16%;
width:350px;
height:540px;
border:solid 1px black;
}

#objets{
	position:absolute;

	z-index:2;
	left:0%;
	top:3%;
width:350px;
height:120px;

}

#actions{
	position:absolute;

	z-index:2;
	left:0%;
	top:150px;
width:350px;
height:240px;

}
#vue{
	position:absolute;
	background-image:url('img/vue1.png');
	left:10%;
	top:8%;
width:80px;
height:100px;
border:solid 1px black;

}
#repar{
	position:absolute;
	background-image:url('img/capitaine1.png');
	left:38%;
	top:8%;
width:80px;
height:100px;
border:solid 1px black;
}
#carte{
	position:absolute;
	background-image:url('img/tresor2.png');
	left:10%;
	top:55%;
width:80px;
height:100px;
border:solid 1px black;
}
#pavillon{
	position:absolute;
	background-image:url('img/abordage2.png');
left:67%;
	top:55%;
width:80px;
height:100px;
border:solid 1px black;
}
#baril{
	position:absolute;
	background-image:url('img/baril2.png');
	left:67%;
	top:8%;
width:80px;
height:100px;
border:solid 1px black;
}
#sabotage{
	position:absolute;
		background-image:url('img/sabotage.png');
	left:38%;
	top:55%;
width:80px;
height:100px;
border:solid 1px black;
}

#masqueaction1{
	position:absolute;
	display:none;
	background-color:grey;
	opacity:60%;
	left:10%;
	top:8%;
width:80px;
height:100px;
border:solid 1px black;

}

#masqueaction2{
	position:absolute;
	display:none;
	background-color:grey;
	opacity:60%;
	left:38%;
	top:8%;
width:80px;
height:100px;
border:solid 1px black;
}

#masqueaction3{
	position:absolute;
	display:none;
	background-color:grey;
	opacity:60%;
	left:67%;
	top:8%;
width:80px;
height:100px;
border:solid 1px black;
}

#masqueaction4{
	position:absolute;
	display:none;
	background-color:grey;
	opacity:60%;
	left:10%;
	top:55%;
width:80px;
height:100px;
border:solid 1px black;
}

#masqueaction5{
	position:absolute;
	display:none;
	background-color:grey;
	opacity:60%;
	left:38%;
	top:55%;
width:80px;
height:100px;
border:solid 1px black;
}

#masqueaction6{
	position:absolute;
	display:none;
	background-color:grey;
	opacity:60%;
	left:67%;
	top:55%;
width:80px;
height:100px;
border:solid 1px black;
}

#gold{
	position:absolute;
	background-image:url('img/gold1.png');
	left:60%;
	top:0%;
width:30px;
height:30px;
z-index:6;
}



#start{
	position:absolute;
background-image:url('img/start1.png');
	z-index:9;
	left:1%;
	top:1%;
width:1400px;
height:700px;
border:solid 1px black;

}

#inter{
	position:absolute;
	background-image:url('img/inter1.png');
	z-index:9;
	left:1%;
	top:1%;
width:1400px;
height:700px;
border:solid 1px black;
display:none;
}
#end{
	position:absolute;
	background-image:url('img/endgame2.png');
	z-index:10;
	left:1%;
	top:1%;
width:1400px;
height:700px;
border:solid 1px black;
display:none;
}
#regles1{
	position:absolute;
	background-image:url('img/regles1.png');
	z-index:11;
	left:1%;
	top:1%;
width:1400px;
height:700px;
border:solid 1px black;
display:none;
}
#regles2{
	position:absolute;
	background-image:url('img/regles2.png');
	z-index:9;
	left:1%;
	top:1%;
width:1400px;
height:700px;
border:solid 1px black;
display:none;
}
#regles3{
	position:absolute;
	background-image:url('img/regles3.png');
	z-index:10;
	left:1%;
	top:1%;
width:1400px;
height:700px;
border:solid 1px black;
display:none;
}
#regles4{
	position:absolute;
	background-image:url('img/regles4.png');
	z-index:12;
	left:1%;
	top:1%;
width:1400px;
height:700px;
border:solid 1px black;
display:none;
}
#regles5{
	position:absolute;
	background-image:url('img/regles5.png');
	z-index:13;
	left:1%;
	top:1%;
width:1400px;
height:700px;
border:solid 1px black;
display:none;
}
#masqueboard{
	position:absolute;
	background-image:url('img/masqueboard1.png');
	z-index:5;
	left:120px;
	top:0%;
width:420px;
height:420px;


}
#bouton{
	position:absolute;

	z-index:5;
	left:2%;
	top:1%;
width:150px;
height:30px;
font-size:10px;
}
#bouton2{
	position:absolute;

	z-index:5;
	left:15%;
	top:1%;
width:150px;
height:30px;
font-size:10px;
}
#lifes{
	position:absolute;
	

	left:30%;
	top:1%;
width:900px;
height:50px;
z-index:8;

}

#contientjoueur{
	position:absolute;
	border:solid 1px black;
	z-index:5;
	left:2%;
	top:6%;
width:350px;
height:60px;
	background-image:url('img/contientjoueur.png');

}

#contientplayer{
	position:absolute;
	
	z-index:4;
	left:0%;
	top:20px;
width:150px;
height:30px;
text-align:center;


}
#contientgold{
	position:absolute;
	
	z-index:5;
	left:150px;
	top:15px;
width:200px;
height:30px;
text-align:center;


}

progress::-webkit-progress-value{
    border-radius:10px;
    background: #09c;
    background: 
      -moz-repeating-linear-gradient(
        45deg, 
        rgba(255,255,255,.2) 0,
        rgba(255,255,255,.2) 10px, 
        rgba(255,255,255,0) 10px,
        rgba(255,255,255,0) 20px
      ),
      -moz-linear-gradient(
        rgba(255,255,255,.1) 50%,
        rgba(255,255,255,0) 60%
      ),
      #09c;
    background: 
      repeating-linear-gradient(
        45deg, 
        rgba(255,255,255,.2) 0,
        rgba(255,255,255,.2) 10px, 
        rgba(255,255,255,0) 10px,
        rgba(255,255,255,0) 20px
      ),
      linear-gradient(
        rgba(255,255,255,.1) 50%,
        rgba(255,255,255,0) 60%
      ),
      #09c;
    background-size: 300px 20px, auto, auto;
    background-position: -300px 0, top, top;
    background-position: top right, top, top;
    box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, 
                0 -1px 0 rgba(0,0,0,.8) inset,
                0 0 2px black;
  
}

.avancementhead
{
display:inline;
    -moz-box-sizing: border-box;
         box-sizing: border-box;
    width: 150px;
    height: 15px;
    padding: 3px 3px 2px 3px;
    background: #333; 
    background: -webkit-linear-gradient(#2d2d2d,#444);
    background:    -moz-linear-gradient(#2d2d2d,#444);
    background:      -o-linear-gradient(#2d2d2d,#444);
    background:         linear-gradient(#2d2d2d,#444);
    border: 1px solid rgba(0,0,0,.5);
    border-radius: 15px;
    box-shadow: 0 1px 0 rgba(255,255,255,.2);  
	
}





.champ1 {
	
	/*display:block;*/
	display:inline;
	margin-left:5px;
	
	width:40px;
	text-align:center;
	background-color:transparent;
	border:none;
	font-size:16px;
	vertical-align:center;
	z-index:6;
	
}

.champ2 {
	
	/*display:block;*/
	display:inline;
	margin-left:5px;
	font-weight: bold;
	width:60px;
	text-align:left;
	background-color:transparent;
	border:none;
	font-size:26px;
	vertical-align:center;
	z-index:6;
	
}
.champ3 {
	
	/*display:block;*/
	display:inline;
	margin-left:5px;
	
	width:60px;
	text-align:left;
	background-color:transparent;
	border:none;
	font-size:26px;
	vertical-align:center;
	z-index:6;
	color:#ffeb99;
}


/* Tooltip container */
.tooltip {
  position: relative;
  display: inline-block;
  
}

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 160px;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
 bottom: 100%;
  left: 50%;
  margin-left: -80px;
 
  /* Position the tooltip text - see examples below! */
  position: absolute;
  z-index: 10;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
}



.ClassName {
	font-weight:bold;
	text-decoration:none;
	font-family:Trebuchet MS;
	text-indent:0px;
	line-height:30px;
	-moz-border-radius:2px;
	-webkit-border-radius:2px;
	border-radius:2px;
	text-align:center;
	vertical-align:middle;
	display:inline-block;
	font-size:15px;
	color:#000000;
	width:100px;
	height:30px;
	padding:13px;
	border-color:#7a6009;
	border-width:2px;
	border-style:solid;
}

.ClassName:active {
	position:relative;
	top:3px
}

.ClassName:hover {
}