@charset "utf-8";
/* CSS Document */
body
{
background-color:#333333;
/*background-color:#ebebe0;*/
}


#menuj1
{

	width:430px;
	height:450px;
	text-align:center;
	left:5%;
	top:15%;
	z-index:6;
	position:absolute;
}
#menuj2
{
	
	width:430px;
	height:450px;
	text-align:center;
	left:60%;
	top:15%;
	z-index:6;
	position:absolute;
}
#menuboard
{

	width:300px;
	height:300px;
	text-align:center;
	left:38%;
	top:23%;
	z-index:6;
	position:absolute;
	color:#c2d6d6;
}

#skin1
{
	background-image:url(images/iconplayer1def.png);
	width:303px;
	height:303px;
	text-align:center;
	left:15%;
	top:10%;
	z-index:6;
	position:absolute;
	 border-style: solid;
  border-width: 1px;
}
#skin2
{
	background-image:url(images/iconplayer2def.png);
	width:303px;
	height:303px;
	text-align:center;
	left:15%;
	top:10%;
	z-index:6;
	position:absolute;
	 border-style: solid;
  border-width: 1px;
}
#board
{
background-image:url(images/boardfond2.png);
	width:700px;
	height:550px;
	text-align:center;
	left:500px;
	top:11%;
	z-index:2;
	position:absolute;
	 border-style: solid;
  border-width: 1px;
}
#header
{
	background-image: linear-gradient(to top, #d1d1d1, #b6b6b6, #9c9c9c, #838383, #6b6b6b);
	width:1240px;
	height:60px;
	text-align:center;
	left:20px;
	top:5px;
	z-index:6;
	position:absolute;
	 border-style: solid;
  border-width: 1px;
  box-sizing: border-box;
}
#contientjoueur
{
	background-color:#e6e6e6;

	width:130px;
	height:58px;
	text-align:center;
	padding-top:15px;
		padding-left:15px;
	left:140px;
	top:0px;
	z-index:5;
	position:absolute;
	 border-style: solid;
  border-width: 1px;
  box-sizing: border-box;
}
#lifes
{
	
	width:700px;
	height:60px;
	text-align:center;
	left:470px;
	
	z-index:5;
	position:absolute;
}
#iconebouclier
{
	background-image:url(images/iconbouclieractiv.png);
	width:50px;
	height:50px;
	text-align:center;
		z-index:6;
	position:absolute;
	display:none;
	 border-style: solid;
  border-width: 1px;
  box-sizing: border-box;
}
#iconeesquive
{
	background-image:url(images/iconesquiveactiv.png);
	width:50px;
	height:50px;
	text-align:center;
		z-index:6;
	position:absolute;
	display:none;
	 border-style: solid;
  border-width: 1px;
  box-sizing: border-box;
}
#currentjoueur
{
	
	width:300px;
	height:60px;
	text-align:left;
	left:2%;
	top:10px;
	z-index:5;
	position:absolute;
}

#help
{
	
	width:50px;
	height:60px;
	text-align:center;
	left:96%;
	top:10px;
	z-index:5;
	position:absolute;
}

#page1
{

	width:200px;
	height:60px;
	text-align:center;
	left:3%;
	top:20px;
	z-index:7;
	position:absolute;
	
}
#page3
{

	width:200px;
	height:60px;
	text-align:center;
	left:25%;
	top:20px;
	z-index:7;
	position:absolute;
	
}
#page2
{

	width:200px;
	height:60px;
	text-align:center;
	left:83%;
	top:20px;
	z-index:7;
	position:absolute;
	
}

#etatjoueur
{
	
	background-color:#e6e6e6;

	width:130px;
	height:58px;
	text-align:center;
	padding-top:10px;
		padding-left:3px;
	left:295px;
	top:0px;
	z-index:5;
	position:absolute;
	 border-style: solid;
  border-width: 1px;
  box-sizing: border-box;
}

#bord1
{

	width:60px;
	height:550px;
	text-align:center;
	left:440px;
	top:70px;
	z-index:2;
	position:absolute;
}
#bord2
{
	
	width:60px;
	height:550px;
	text-align:center;
	left:1200px;
	top:70px;
	z-index:4;
	position:absolute;
}
#bord3
{
	
	width:700px;
	height:60px;
	text-align:center;
	left:500px;
	top:10px;
	z-index:4;
	position:absolute;
}
#bord4
{
	
	width:700px;
	height:60px;
	text-align:center;
	left:500px;
	top:620px;
	z-index:4;
	position:absolute;
}

#ecran
{
	background-color:#333333;
	width:1250px;
	height:650px;
	text-align:center;
	left:1%;
	top:0%;
	z-index:6;
	position:absolute;
}
#fondstory1
{
background-image:url(images/story2.png);
	width:1250px;
	height:650px;
	text-align:center;
	left:1%;
	top:0%;
	z-index:7;
	position:absolute;
	display:none;
}
#fondstory2
{
background-image:url(images/fondstory3.png);
	width:1250px;
	height:650px;
	text-align:center;
	left:0%;
	top:0%;
	z-index:7;
	position:absolute;
		display:none;
}
#inforegles
{
background-image:url(images/iconregles16.png);
	width:1250px;
	height:650px;
	text-align:center;
	left:1%;
	top:0%;
	z-index:6;
	position:absolute;
		display:none;
}
#inforegles2
{
	background-image:url(images/iconregles12.png);
	width:1250px;
	height:650px;
	text-align:center;
	left:1%;
	top:0%;
	z-index:6;
	position:absolute;
	display:none;
	
	
}
#inforegles4
{
	background-image:url(images/iconregles13.png);
	width:1250px;
	height:650px;
	text-align:center;
	left:1%;
	top:0%;
	z-index:6;
	position:absolute;
	display:none;
	
	
}
#inforegles5
{
background-image:url(images/iconregles15.png);
	width:1250px;
	height:650px;
	text-align:center;
	left:1%;
	top:0%;
	z-index:6;
	position:absolute;
	display:none;
	
	
}
#inforegles3
{
background-image:url(images/iconregles14.png);
	width:1250px;
	height:650px;
	text-align:center;
	left:1%;
	top:0%;
	z-index:6;
	position:absolute;
display:none;
	
}
#infointerface
{
	background-image:url(images/fondinterface.png);
	width:1250px;
	height:650px;
	text-align:center;
	left:1%;
	top:0%;
	z-index:6;
	position:absolute;
	display:none;
}
#ecranfin
{
	background-color:white;
	width:1250px;
	height:650px;
	text-align:center;
	left:1%;
	top:1%;
	z-index:9;
	position:absolute;
	display:none;
}
#victory
{
	background-image:url(images/accueil1.png);
	width:627px;
	height:555px;
	text-align:center;
	left:0%;
	top:10%;
	z-index:9;
	position:absolute;
	
}
#joueurgain
{
	background-color:#cccccc;
	width:200px;
	height:260px;
	text-align:center;
	left:70%;
	top:30%;
	z-index:9;
	position:absolute;
	
	
}
#iconwin
{
		background-image:url(images/iconwin1.png);
	width:200px;
	height:200px;
	text-align:center;
	
	z-index:9;
	position:absolute;
	
	
}
#textefin
{
		
	width:200px;
	height:60px;
	text-align:center;
	top:200px;
	z-index:9;
	position:absolute;
	padding-top:10px;
	
}

#valida
{
		
	width:320px;
	height:80px;
	text-align:center;
	top:90%;
	
	z-index:8;
	position:absolute;
	padding-top:10px;
	
}

#homepage
{
	background: black;
	width:1250px;
	height:650px;
	text-align:center;
	left:1%;
	top:1%;
	z-index:8;
	position:absolute;
}
#champions
{
	background-color: #333333;
	width:1270px;
	height:630px;
	text-align:center;
	left:1%;
	top:1%;
	z-index:8;
	position:absolute;
	display:none;
}
#championscrea
{
	background-image: linear-gradient(to top, #d1d1d1, #b6b6b6, #9c9c9c, #838383, #6b6b6b);
	width:1275px;
	height:630px;
	text-align:center;
	left:0%;
	top:1%;
	z-index:9;
	position:absolute;
	display:none;
}

#champions3
{
	background-color: #333333;
	width:1270px;
	height:630px;
	text-align:center;
	left:1%;
	top:1%;
	z-index:9;
	position:absolute;
	display:none;
}
#championsmasque
{
		background-color: green;
	width:1240px;
	height:400px;
	text-align:center;
	opacity:0.2;
	left:2%;
	top:12%;
	z-index:11;
	position:absolute;
	display:none;
}

#champion1
{
	background-image:url(images/champion7.png);
	width:250px;
	height:350px;
	text-align:center;
	left:3%;
	top:15%;
	z-index:8;
	position:absolute;
	
}

#champion2
{
	background-image:url(images/champion6.png);
	width:250px;
	height:350px;
	text-align:center;
	left:28%;
	top:15%;
	z-index:8;
	position:absolute;
	
}
#champion3
{
	background-image:url(images/champion11.png);
	width:250px;
	height:350px;
	text-align:center;
	left:53%;
	top:15%;
	z-index:8;
	position:absolute;
	
}
#champion4
{
	background-image:url(images/champion4bis.png);
	width:250px;
	height:350px;
	text-align:center;
	left:78%;
	top:15%;
	z-index:8;
	position:absolute;
	
	
}

#explain1
{
	background-color:#d9d9d9;
	width:250px;
	height:160px;
	text-align:center;
	left:3%;
	top:75%;
	z-index:8;
	position:absolute;
	 border-style: solid;
  border-width: 1px;
  box-sizing: border-box;
	
}
#explain2
{
	background-color:#d9d9d9;
	width:250px;
	height:160px;
	text-align:center;
	left:28%;
	top:75%;
	z-index:8;
	position:absolute;
	 border-style: solid;
  border-width: 1px;
  box-sizing: border-box;
}
#explain3
{
	background-color:#d9d9d9;
	width:250px;
	height:160px;
	text-align:center;
	left:53%;
	top:75%;
	z-index:8;
	position:absolute;
	 border-style: solid;
  border-width: 1px;
  box-sizing: border-box;
}
#explain4
{
	background-color:#d9d9d9;
	
	width:250px;
	height:160px;
	text-align:center;
	left:78%;
	top:75%;
	z-index:8;
	position:absolute;
	 border-style: solid;
  border-width: 1px;
  box-sizing: border-box;
}

#champion9
{
	background-image:url(images/championloup.png);
	width:250px;
	height:350px;
	text-align:center;
	left:28%;
	top:15%;
	z-index:8;
	position:absolute;
	
}

#champion10
{
	background-image:url(images/championpied3.png);
	width:250px;
	height:350px;
	text-align:center;
	left:28%;
	top:15%;
	z-index:8;
	position:absolute;
	
}
#champion11
{
	background-image:url(images/championpiege.png);
	width:250px;
	height:350px;
	text-align:center;
	left:78%;
	top:15%;
	z-index:8;
	position:absolute;
	
}
#champion12
{
	background-image:url(images/champion4.png);
	width:250px;
	height:350px;
	text-align:center;
	left:78%;
	top:15%;
	z-index:8;
	position:absolute;
	
	
}

#explain9
{
	background-color:#d9d9d9;
	width:250px;
	height:160px;
	text-align:center;
	left:3%;
	top:75%;
	z-index:8;
	position:absolute;
	 border-style: solid;
  border-width: 1px;
  box-sizing: border-box;
	
}
#explain10
{
	background-color:#d9d9d9;
	width:250px;
	height:160px;
	text-align:center;
	left:28%;
	top:75%;
	z-index:8;
	position:absolute;
	 border-style: solid;
  border-width: 1px;
  box-sizing: border-box;
}
#explain11
{
	background-color:#d9d9d9;
	width:250px;
	height:160px;
	text-align:center;
	left:53%;
	top:75%;
	z-index:8;
	position:absolute;
	 border-style: solid;
  border-width: 1px;
  box-sizing: border-box;
}
#explain12
{
	background-color:#d9d9d9;
	
	width:250px;
	height:160px;
	text-align:center;
	left:78%;
	top:75%;
	z-index:8;
	position:absolute;
	 border-style: solid;
  border-width: 1px;
  box-sizing: border-box;
}



#champions2
{
	background-color: #333333;
	width:1270px;
	height:630px;
	text-align:center;
	left:1%;
	top:1%;
	z-index:9;
	position:absolute;
	display:none;
}
#champion5
{
	background-image:url(images/champion7bis.png);
	width:250px;
	height:350px;
	text-align:center;
	left:3%;
	top:15%;
	z-index:8;
	position:absolute;
	
}

#champion6
{
	background-image:url(images/champion12.png);
	width:250px;
	height:350px;
	text-align:center;

		left:3%;
	top:15%;
	z-index:8;
	position:absolute;
	
}
#champion7
{
	background-image:url(images/champion7ter.png);
	width:250px;
	height:350px;
	text-align:center;
	left:53%;
	top:15%;
	z-index:8;
	position:absolute;
	
}
#champion8
{
	background-image:url(images/champ44.png);
	width:250px;
	height:350px;
	text-align:center;
	left:78%;
	top:15%;
		left:53%;
	top:15%;
	z-index:8;
	position:absolute;
	
	
}

#explain5
{
	background-color:#d9d9d9;
	width:250px;
	height:160px;
	text-align:center;
	left:3%;
	top:75%;
	z-index:8;
	position:absolute;
	 border-style: solid;
  border-width: 1px;
  box-sizing: border-box;
}
#explain6
{
	background-color:#d9d9d9;
	width:250px;
	height:160px;
	text-align:center;
	left:28%;
	top:75%;
	z-index:8;
	position:absolute;
	 border-style: solid;
  border-width: 1px;
  box-sizing: border-box;
}
#explain7
{
	background-color:#d9d9d9;
	width:250px;
	height:160px;
	text-align:center;
	left:53%;
	top:75%;
	z-index:8;
	position:absolute;
	 border-style: solid;
  border-width: 1px;
  box-sizing: border-box;
}
#explain8
{
	background-color:#d9d9d9;
	
	width:250px;
	height:160px;
	text-align:center;
	left:78%;
	top:75%;
	z-index:8;
	position:absolute;
	 border-style: solid;
  border-width: 1px;
  box-sizing: border-box;
}



#boutonstory
{

	width:80px;
	height:80px;
	text-align:center;
	left:95%;
	top:1%;
	z-index:9;
	position:absolute;
	
}

#histoire
{
background-color:#333333;
	width:1250px;
	height:650px;
	text-align:center;
	left:1%;
	top:1%;
	z-index:9;
	position:absolute;
	display:none;
	
}






#affiche
{
		background-image:url(images/accueil1.png);
	width:627px;
	height:555px;
	text-align:center;
	left:0%;
	top:0%;
	z-index:8;
	position:absolute;
}
#face
{
		background-color:white;
	width:1250px;
	height:555px;
	text-align:center;
	left:0%;
	top:7%;
	z-index:8;
	position:absolute;
}
#logo
{
		background-image:url(images/logodef.png);
	width:200px;
	height:200px;
	text-align:center;
	left:75%;
	top:25%;
	z-index:8;
	position:absolute;
}
#name
{
		background-image:url(images/name1.png);
	width:200px;
	height:100px;
	text-align:center;
	left:75%;
	top:65%;
	z-index:8;
	position:absolute;
}

#play
{
	background-image: linear-gradient(to top, #d1d1d1, #b6b6b6, #9c9c9c, #838383, #6b6b6b);
	width:430px;
	height:550px;
	text-align:center;
	left:20px;
	top:11%;
	z-index:5;
	position:absolute;
	 border-style: solid;
  border-width: 1px;
  box-sizing: border-box;
}
#footer
{
	
	width:430px;
	height:50px;
	text-align:center;
	
	top:500px;
	z-index:5;
	position:absolute;
}
#action
{
	background-color:grey;
	width:370px;
	height:120px;
	text-align:center;
	left:30px;
	top:370px;
	z-index:3;
	position:absolute;
}
#masque
{
	background-color:grey;
	opacity:0.5;
	width:370px;
	height:120px;
	text-align:center;
	left:30px;
	top:370px;
	z-index:6;
	position:absolute;
}
#masqueboard
{
	

	width:200px;
	height:300px;
	text-align:center;
	left:42%;
	top:25%;
	z-index:7;
	position:absolute;
	display:none;
}
#masque3
{
	background-color:white;
	opacity:0.5;
	width:150px;
	height:150px;
	text-align:center;
	display:none;
	z-index:6;
	position:absolute;
}
#masque4
{
	background-color:white;
	opacity:0.5;
	width:150px;
	height:150px;
	text-align:center;
	display:none;
	z-index:6;
	position:absolute;
}

#masque2
{
	
	
	width:430px;
	height:360px;
	text-align:center;
	
	z-index:6;
	position:absolute;
	display:none;
}


#action1
{
	background-color:black;
	width:100px;
	height:100px;
	text-align:center;
	left:20px;
	top:10px;
	z-index:3;
	position:absolute;
}

#action2
{
	background-color:black;
	width:100px;
	height:100px;
	text-align:center;
	left:135px;
	top:10px;
	z-index:3;
	position:absolute;
}

#action3
{
	background-color:black;
	width:100px;
	height:100px;
	text-align:center;
	left:250px;
	top:10px;
	z-index:3;
	position:absolute;
}


#trou
{
		background-image:url(images/icongrille5.png);
	width:100px;
	height:100px;
	text-align:center;
	opacity:0.6;
	z-index:9;
	position:absolute;
display:none;

}
#mur1
{
		background-color:grey;
	width:200px;
	height:200px;
	text-align:center;
	opacity:0.7;
	z-index:9;
	position:absolute;
	top:100px;
	left:300px;
	display:none;
}
#mur2
{
	background-image:url(images/iconmur3.png);
	width:200px;
	height:200px;
	text-align:center;
	opacity:0.8;
	z-index:9;
	position:absolute;
	top:250px;
	left:150px;
	display:none;
}
#mur3
{
		background-image:url(images/iconmur2.png);
width:200px;
	height:200px;
	text-align:center;
	opacity:0.7;
	z-index:9;
	position:absolute;
	top:100px;
	left:350px;
	display:none;
}

#mur4
{
		background-color:#d5ddd5;
	width:150px;
	height:150px;
	text-align:center;
	opacity:0.8;
	z-index:9;
	position:absolute;
	top:50px;
	left:50px;
	display:none;
}
#mur5
{
		background-color:#d5ddd5;
	width:150px;
	height:150px;
	text-align:center;
	opacity:0.8;
	z-index:9;
	position:absolute;
	top:600px;
	left:450px;
	display:none;
}


#soin1
{
		background-image:url(images/iconsoin3.png);
	width:41px;
	height:41px;
	text-align:center;
	left:604px;
	top:55px;
	z-index:2;
	position:absolute;
display:none;

}

#soin2
{
		background-image:url(images/iconsoin4.png);
	width:41px;
	height:41px;
	text-align:center;
	left:55px;
	top:455px;
	z-index:2;
	position:absolute;
display:none;

}


#joueur2
{
	background-image:url(images/iconjoueur2.png);
		background-color:green;
	width:50px;
	height:50px;
	text-align:center;
	left:550px;
	top:250px;
	z-index:4;
	position:absolute;
	 border-style: solid;
  border-width: 1px;
  box-sizing: border-box;
  border-color:black;
}

#joueur1
{
	background-image:url(images/iconjoueur1.png);
	width:50px;
	height:50px;
	text-align:center;
	left:100px;
	top:250px;
	z-index:4;
	position:absolute;
	 border-style: solid;
  border-width: 1px;
  box-sizing: border-box;
}

#clone1
{
	background-image:url(images/iconjoueur1.png);
	width:50px;
	height:50px;
	text-align:center;
	
	z-index:4;
	position:absolute;
	display:none;
	border-style: solid;
  border-width: 1px;
  box-sizing: border-box;
}

#clone2
{
	background-image:url(images/iconjoueur2.png);
	width:50px;
	height:50px;
	text-align:center;
	
	z-index:4;
	position:absolute;
	display:none;
	border-style: solid;
  border-width: 1px;
  box-sizing: border-box;
}


#aigle1
{
	background-image:url(images/iconaigle1.png);
	width:50px;
	height:50px;
	text-align:center;
	
	z-index:10;
	position:absolute;
	 border-style: solid;
  border-width: 1px;
  box-sizing: border-box;
  display:none;
}

#aigle2
{
	background-image:url(images/iconaigle2.png);
	width:50px;
	height:50px;
	text-align:center;
	
	z-index:10;
	position:absolute;
	 border-style: solid;
  border-width: 1px;
  box-sizing: border-box;
  display:none;
}


#ours1
{
	background-image:url(images/iconours1.png);
	width:50px;
	height:50px;
	text-align:center;
	
	z-index:10;
	position:absolute;
	 border-style: solid;
  border-width: 1px;
  box-sizing: border-box;
  display:none;
}

#rangeours1
{
	background-color:green;
	width:149px;
	height:149px;
	text-align:center;
	top:-51px;
	left:-50px;
	z-index:4;
	position:absolute;
	display:none;
  opacity:0.5;

}

#ours2
{
		background-image:url(images/iconours2.png);
	width:50px;
	height:50px;
	text-align:center;
	
	z-index:10;
	position:absolute;
	 border-style: solid;
  border-width: 1px;
  box-sizing: border-box;
  display:none;
}

#rangeours2
{
	background-color:green;
	width:149px;
	height:149px;
	text-align:center;
	top:-51px;
	left:-50px;
	z-index:4;
	position:absolute;
	display:none;
  opacity:0.5;

}

#trap1
{
background-image:url(images/icontrap1.png);
	width:150px;
	height:150px;
	text-align:center;
	opacity:0.6;
	z-index:3;
	position:absolute;
	top:0px;
	left:-200px;


}
#trap2
{
background-image:url(images/icontrap2.png);
	width:150px;
	height:150px;
	text-align:center;
	opacity:0.6;
	z-index:3;
	position:absolute;
top:0px;
	
left:-200px;
}
#loup1
{
background-image:url(images/iconloup3.png);
	width:50px;
	height:50px;
	text-align:center;
		display:none;
	
	z-index:11;
	position:absolute;
	 border-style: solid;
  border-width: 1px;
  box-sizing: border-box;
  left:100px;
  top:100px;

}
#rangeloup1
{

	width:149px;
	height:149px;
	text-align:center;
	top:0px;
	left:-200px;
	z-index:4;
	position:absolute;

  opacity:0.5;

}
#loup2
{
background-image:url(images/iconloup2.png);
	width:50px;
	height:50px;
	text-align:center;
		display:none;
		
	z-index:11;
	position:absolute;
	 border-style: solid;
  border-width: 1px;
  box-sizing: border-box;

}
#rangeloup2
{
	
	width:149px;
	height:149px;
	text-align:center;
	top:-0px;
	left:-200px;
	z-index:4;
	position:absolute;

  opacity:0.5;

}

#masqueloup1
{
	background-color:grey;
	width:50px;
	height:50px;
	text-align:center;
	
	z-index:5;
	position:absolute;
display:none;
  opacity:0.5;

}



.caseok
{
	
	background-color:#ff9933;
opacity:0.7;
	width:50px;
	height:50px;
	text-align:center;
	
	z-index:3;
	position:absolute;
	display:none;
}
.range
{

	
	text-align:center;
	
	z-index:3;
	position:absolute;
	display:none;
	opacity:0.6;
}


#case1
{

}





#move1
{
	background-image:url(images/iconmove1.png);
	width:100px;
	height:100px;
	text-align:center;
	left:30px;
	top:30px;
	z-index:5;
	position:absolute;
	 border-style: solid;
  border-width: 1px;
	}
#move2
{
	background-image:url(images/iconmove2.png);
		width:100px;
	height:100px;
	text-align:center;
	left:30%;
	top:40%;
	z-index:5;
	position:absolute;
	display:none;
	 border-style: solid;
  border-width: 1px;
}
#move3
{
	background-image:url(images/iconmove3.png);
		width:100px;
	height:100px;
	text-align:center;
	left:30%;
	top:40%;
	z-index:5;
	position:absolute;
	display:none;
	 border-style: solid;
  border-width: 1px;
}
#move4
{
	background-image:url(images/iconmove4.png);
		width:100px;
	height:100px;
	text-align:center;
	left:30%;
	top:40%;
	z-index:5;
	position:absolute;
	display:none;
	 border-style: solid;
  border-width: 1px;
}
#move5
{
	background-image:url(images/iconmove5.png);
		width:100px;
	height:100px;
	text-align:center;
	left:30%;
	top:40%;
	z-index:5;
	position:absolute;
	display:none;
	 border-style: solid;
  border-width: 1px;
}

#arc
{
	background-image:url(images/iconarc2.png);
	width:100px;
	height:100px;
	text-align:center;
	left:165px;
	top:30px;
	z-index:5;
	position:absolute;
	 border-style: solid;
  border-width: 1px;
	}
	
#lance
{
	background-image:url(images/iconlance3.png);
	width:100px;
	height:100px;
	text-align:center;
	left:165px;
	top:140px;
	z-index:5;
	position:absolute;
	 border-style: solid;
  border-width: 1px;
	}
	#pied
{
	background-image:url(images/iconpied4.png);
	width:100px;
	height:100px;
	text-align:center;
	left:165px;
	top:140px;
	z-index:5;
	position:absolute;
	 border-style: solid;
  border-width: 1px;
	}

#epee
{
	background-image:url(images/iconepee3.png);
	width:100px;
	height:100px;
	text-align:center;
	left:165px;
	top:250px;
	z-index:5;
	position:absolute;
	 border-style: solid;
  border-width: 1px;
	}
	
	#javelot
{
	background-image:url(images/iconjavelot.png);
	width:100px;
	height:100px;
	text-align:center;
	left:165px;
	top:140px;
	z-index:6;
	position:absolute;
	 border-style: solid;
  border-width: 1px;
  display:none;
  
	}

	
#defense1
{
	background-image:url(images/iconbouclier2.png);
	width:100px;
	height:100px;
	text-align:center;
	left:300px;
	top:30px;
	z-index:5;
	position:absolute;
	 border-style: solid;
  border-width: 1px;
   
	}
	
#defense2
{
	background-image:url(images/iconesquive2.png);
	width:100px;
	height:100px;
	text-align:center;

	z-index:5;
	position:absolute;
	display:none;
	 border-style: solid;
  border-width: 1px;
	}

#defense3
{
	background-image:url(images/iconrecup3.png);
	width:100px;
	height:100px;
	text-align:center;
	
	z-index:5;
	position:absolute;
	display:none;
	 border-style: solid;
  border-width: 1px;
	}
	
	#defense4
{
background-image:url(images/iconconcentration2.png);
	width:100px;
	height:100px;
	text-align:center;
	
	z-index:5;
	position:absolute;
	display:none;
	 border-style: solid;
  border-width: 1px;
	}
	
	#defense5
{
	background-image:url(images/icondiversion3.png);
	width:100px;
	height:100px;
	text-align:center;
	
	z-index:5;
	position:absolute;
	display:none;
	 border-style: solid;
  border-width: 1px;
	}
	
		#defense6
{
	background-image:url(images/iconpoison2.png);
	width:100px;
	height:100px;
	text-align:center;
	
	z-index:5;
	position:absolute;
	display:none;
	 border-style: solid;
  border-width: 1px;
	}
	
#rangepied
{
	background: green;
	width:250px;
	height:250px;
	text-align:center;
	opacity:1;
	z-index:3;
	position:absolute;
	display:none;
	opacity:0.6;
	
	}
#rangearc1
{
	background: green;
	width:649px;
	height:149px;
	text-align:center;
	opacity:1;
	z-index:3;
	position:absolute;
	display:none;
	
	}
	
#rangearc2
{
	background: green;
	width:149px;
	height:649px;
	text-align:center;
	opacity:1;
	z-index:3;
	position:absolute;
	display:none;
	
	}
	#rangearc3
{
	background: green;
	width:349px;
	height:349px;
	text-align:center;
	opacity:1;
	z-index:3;
	position:absolute;
	display:none;
	
	}
	
	#rangejav1
{
	background: green;
	width:750px;
	height:50px;
	text-align:center;

	z-index:3;
	position:absolute;
	display:none;
	
	}
		#rangejav2
{
	background: green;
	width:50px;
	height:750px;
	text-align:center;

	z-index:3;
	position:absolute;
	display:none;
	
	}
	
	#rangeepee
{
	background: green;
	width:150px;
	height:150px;
	text-align:center;
	
	z-index:3;
	position:absolute;
	display:none;
	
	}
	
	
	#rangelance1
{
	background: green;
	width:50px;
	height:350px;
	text-align:center;
	
	z-index:3;
	position:absolute;
	display:none;
	
	}
	
		#rangelance2
{
	background: green;
	width:350px;
	height:50px;
	text-align:center;
	
	z-index:3;
	position:absolute;
	display:none;
	
	}
	
		#lance5
{
	background: green;
	width:50px;
	height:50px;
	text-align:center;
	
	z-index:3;
	position:absolute;
	display:none;
	
	}
	
			#lance6
{
	background: green;
	width:50px;
	height:50px;
	text-align:center;
	
	z-index:3;
	position:absolute;
	display:none;
	
	}
			#lance7
{
	background: green;
	width:50px;
	height:50px;
	text-align:center;
	
	z-index:3;
	position:absolute;
	display:none;
	
	}
			#lance8
{
	background: green;
	width:50px;
	height:50px;
	text-align:center;
	
	z-index:3;
	position:absolute;
	display:none;
	
	}



#tableau2
{
left:1%;
	display:inline;
	position:absolute;
	margin-top:2px;

	
}
#tableauanimal
{
left:2%;
	display:inline;
	position:absolute;
	top:45%;
font-size:12px;
	
}
#tableau3
{
left:2%;
top:2%;
	display:inline;
	position:absolute;
font-size:12px;
	 border-style: solid;
  border-width: 1px;
	  border-color:black;
	  	background-color: #e2e29c;
}
#tableau4
{
left:26%;
top:2%;
	display:inline;
	position:absolute;
	font-size:12px;
	 border-style: solid;
  border-width: 1px;
  border-color:black;
		background-color: #e2ae9c;
}
#tableau5
{
	background-color:  	#bddbbd;
left:50%;
top:2%;
	display:inline;
	position:absolute;

font-size:12px;
		 border-style: solid;
  border-width: 1px;
    border-color:black;
}
#tableau6
{
left:6%;
top:55%;
	display:inline;
	position:absolute;

font-size:12px;
		 border-style: solid;
  border-width: 1px;
    border-color:black;
	background-color: #f2f2f2;
}
#tableauboard
{
left:15%;
top:15%;
	display:inline;
	position:absolute;

font-size:12px;
	
}


#crea1
{
left:73%;
top:2%;
	display:inline;
	position:absolute;
width:320px;
height:580px;
font-size:12px;
		 border-style: solid;
  border-width: 1px;
    border-color:black;
		background-color: #d9d9d9;
}
#skincrea
{
left:11%;
top:1%;
	display:inline;
	position:absolute;
width:250px;
height:280px;
font-size:12px;
background-image:url(images/champion5.png);
		 border-style: solid;
  border-width: 1px;
    border-color:black;
}



.avancement
{
display: inline-block;
    -moz-box-sizing: border-box;
         box-sizing: border-box;
    width: 300px;
    height: 20px;
    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);  
	
}
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: 200px;
    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);  
	
}



		
		
.tableau {
  font-size:24px;
  
}	
.tableaujauge {
  font-size:18px;
  
}	
		
.butn {
  background: #a3a3a3;
  background-image: -webkit-linear-gradient(top, #a3a3a3, #ffffff);
  background-image: -moz-linear-gradient(top, #a3a3a3, #ffffff);
  background-image: -ms-linear-gradient(top, #a3a3a3, #ffffff);
  background-image: -o-linear-gradient(top, #a3a3a3, #ffffff);
  background-image: linear-gradient(to bottom, #a3a3a3, #ffffff);
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0px;
  font-family: Arial;
  color: #000000;
  font-size: 16px;
  
  padding: 10px 10px 10px 10px;
  border: solid #000000 1px;
  text-decoration: none;
}

.butn:hover {
  background: #00ad00;
  background-image: -webkit-linear-gradient(top, #00ad00, #5ce663);
  background-image: -moz-linear-gradient(top, #00ad00, #5ce663);
  background-image: -ms-linear-gradient(top, #00ad00, #5ce663);
  background-image: -o-linear-gradient(top, #00ad00, #5ce663);
  background-image: linear-gradient(to bottom, #00ad00, #5ce663);
  text-decoration: none;
}
.butn:active {background-color:#ffe680;}

	
.boardbtn {
  -webkit-border-radius: 60;
  -moz-border-radius: 60;
  border-radius: 60px;
  font-family: Arial;
  color: #050505;
  font-size: 14px;
  background: #dbdbdb;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
}

.boardbtn:hover {
  background: #ffcb47;
  background-image: -webkit-linear-gradient(top, #ffcb47, #ffbf1c);
  background-image: -moz-linear-gradient(top, #ffcb47, #ffbf1c);
  background-image: -ms-linear-gradient(top, #ffcb47, #ffbf1c);
  background-image: -o-linear-gradient(top, #ffcb47, #ffbf1c);
  background-image: linear-gradient(to bottom, #ffcb47, #ffbf1c);
  text-decoration: none;
}

.boardbtn:focus {background-color:#ffe680;}

	
.btn {
  background: #a3a3a3;
  background-image: -webkit-linear-gradient(top, #a3a3a3, #ffffff);
  background-image: -moz-linear-gradient(top, #a3a3a3, #ffffff);
  background-image: -ms-linear-gradient(top, #a3a3a3, #ffffff);
  background-image: -o-linear-gradient(top, #a3a3a3, #ffffff);
  background-image: linear-gradient(to bottom, #a3a3a3, #ffffff);
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0px;
  font-family: Arial;
  color: #000000;
  font-size: 20px;
  top:83%;
  left:33%;
  padding: 10px 20px 10px 20px;
  border: solid #000000 1px;
  text-decoration: none;
  position:absolute;
}

.btn:hover {
  background: #00ad00;
  background-image: -webkit-linear-gradient(top, #00ad00, #5ce663);
  background-image: -moz-linear-gradient(top, #00ad00, #5ce663);
  background-image: -ms-linear-gradient(top, #00ad00, #5ce663);
  background-image: -o-linear-gradient(top, #00ad00, #5ce663);
  background-image: linear-gradient(to bottom, #00ad00, #5ce663);
  text-decoration: none;
}

.valid {
  background: #009999;
  background-image: -webkit-linear-gradient(top, #009999, #003366);
  background-image: -moz-linear-gradient(top, #009999, #003366);
  background-image: -ms-linear-gradient(top, #009999, #003366);
  background-image: -o-linear-gradient(top, #009999, #003366);
  background-image: linear-gradient(to bottom, #009999, #003366);
  -webkit-border-radius: 28;
  -moz-border-radius: 28;
  border-radius: 28px;
  font-family: Arial;
  color: #ffffff;
  font-size: 20px;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
  	left:85%;
	top:88%;
	z-index:3;

}

.valid:hover {
  background: #138f00;
  background-image: -webkit-linear-gradient(top, #138f00, #6ee088);
  background-image: -moz-linear-gradient(top, #138f00, #6ee088);
  background-image: -ms-linear-gradient(top, #138f00, #6ee088);
  background-image: -o-linear-gradient(top, #138f00, #6ee088);
  background-image: linear-gradient(to bottom, #138f00, #6ee088);
  text-decoration: none;
}

.bouton:hover {
 opacity:0.6;

}



.champs {
	
	/*display:block;*/
	display:inline;
	margin-left:5px;
	
	width:40px;
	text-align:center;
	background-color:transparent;
	border:none;
	font-size:20px;
	vertical-align:center;
	
	
}
.champs5 {
	
	/*display:block;*/
	display:inline;
	margin-left:5px;
	
	width:30px;
	text-align:left;
	background-color:transparent;
	border:none;
	font-size:14px;
	vertical-align:center;
	
	
}
.champ1 {
	
	/*display:block;*/
	display:inline;
	margin-left:5px;
	
	width:40px;
	text-align:center;
	background-color:transparent;
	border:none;
	font-size:20px;
	vertical-align:center;
	
	
}

.champ2 {
	
	
	display:inline;
	margin-left:5px;
	margin-top:15px;
	width:150px;
	text-align:center;
	background-color:transparent;
	border:none;
	font-size:12px;
	vertical-align:center;
	
	
}
.champ3 {
	
	
	display:inline;
	margin-left:5px;
	margin-top:230px;
	
	text-align:center;
	background-color:transparent;
	border:none;
	font-size:12px;
	vertical-align:center;
	
	
}

.champ4 {
	
	
	display:inline;
	
	
	width:110px;
	text-align:center;
	background-color:transparent;
	border:none;
	font-size:12px;
	vertical-align:center;
	
	
}

.champ5 {
	
	/*display:block;*/
	display:inline;
	margin-left:5px;
	
	width:80px;
	text-align:center;
	background-color:transparent;
	border:none;
	font-size:12px;
	vertical-align:center;
	
	
}