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

body
{
background-color:black;
}

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

background-color:#ffe680;

	width:1700px;
	height:850px;
	
	z-index:1;
	position:absolute;
top:4%;
left:2%;
  border:solid 2px white;

  
}
#masquegameall
{

background-color:black;
display:block;
	width:1700px;
	height:850px;
	
	z-index:15;
	position:absolute;
  border:solid 2px white;
  
}
#inutile
{

background-color:transparent;

	width:10px;
	height:10px;
	display:none;
	z-index:1;
	position:absolute;
top:0%;
left:0%;
 

  
}

#masquegame
{

background-color:transparent;
display:none;
	width:1300px;
	height:700px;
	
	
	position:absolute;
top:5%;
left:5%;
  border:solid 2px;
z-index:3;
  
}

#header
{
background-color:transparent;
	background-repeat:no-repeat;
	background-size:100%;
	width:200px;
	height:100px;
	position:absolute;
	left:0px;
	top:70px;
	display:block;
z-index:2;
		
}
#control
{
background-color:#ffe680;
	background-repeat:no-repeat;
	background-size:100%;
	width:200px;
	height:850px;
	position:absolute;
	left:10px;
	top:0px;
	margin:0px;
	
	border-radius:10px;
	
}

#creations
{
background-color:#ffe680;
	background-repeat:no-repeat;
	background-size:100%;
	width:310px;
	height:100px;
	position:absolute;
	left:225px;
	top:2px;
	
	z-index:1;
	

}


#creation1
{
background-color:#00b300;
	background-repeat:no-repeat;
	background-size:100%;
	width:309px;
	height:710px;
	position:absolute;
	left:225px;
	top:100px;
	margin:0px;
	
	
	
	padding-top:40px;
	z-index:2;
}
#creation2
{
background-color:#ffd11a;
	background-repeat:no-repeat;
	background-size:100%;
	width:309px;
	height:710px;
	position:absolute;
	left:225px;
	top:100px;
	margin:0px;
	
	
	
	padding-top:40px;
	z-index:2;
}
#creation3
{
background-color:#cc6600;
	background-repeat:no-repeat;
	background-size:100%;
	width:309px;
	height:710px;
	position:absolute;
	left:225px;
	top:100px;
	margin:0px;
	
	padding-top:40px;
	z-index:2;
}
#transit
{
background-color:red;
	background-repeat:no-repeat;
	background-size:100%;

	width:100px;
	height:800px;
	position:absolute;
	left:260px;
	top:0px;
	margin:0px;
	border:solid 1px #2e2e1f;
	border-radius:10px;
	box-sizing: border-box;
}

#role
{
background-color:yellow;
	background-repeat:no-repeat;
	background-size:100%;
	
	width:250px;
	height:800px;
	position:absolute;
	left:650px;
	top:0px;
	margin:0px;
	border:solid 1px #2e2e1f;
	border-radius:10px;
	box-sizing: border-box;
	z-index:3;
}
#timeline
{
background-image:url(images/timeline.png); 
	background-repeat:no-repeat;
	background-size:100%;
	padding-top:3px;
	width:200px;
	height:30px;
	position:absolute;
	left:0px;
	bottom:5px;
	vertical-align: top;
	text-align:center;
	font-size:18px;
	
	cursor:pointer;

	z-index:5;
}
#timeline:hover {
filter: contrast(1.4);
}
#time
{
background-color:green;
	background-repeat:no-repeat;
	background-size:100%;
	
	width:2px;
	height:26px;
	position:absolute;
	left:1px;
	top:2px;
	
	
	
	box-sizing: border-box;
	z-index:5;
}
#assignement1
{
background-color:black;
	background-repeat:no-repeat;
	background-size:100%;
	
	width:250px;
	height:100px;
	position:absolute;
	left:0px;
	top:50px;
	margin:0px;
	border:solid 1px #2e2e1f;
	border-radius:10px;
	box-sizing: border-box;
}
#assignement2
{
background-color:black;
	background-repeat:no-repeat;
	background-size:100%;
	
	width:250px;
	height:100px;
	position:absolute;
	left:0px;
	top:200px;
	margin:0px;
	border:solid 1px #2e2e1f;
	border-radius:10px;
	box-sizing: border-box;
}
#assignement3
{
background-color:black;
	background-repeat:no-repeat;
	background-size:100%;
	
	width:250px;
	height:100px;
	position:absolute;
	left:0px;
	top:350px;
	margin:0px;
	border:solid 1px #2e2e1f;
	border-radius:10px;
	box-sizing: border-box;
}
#assignement4
{
background-color:black;
	background-repeat:no-repeat;
	background-size:100%;
	
	width:250px;
	height:100px;
	position:absolute;
	left:0px;
	top:500px;
	margin:0px;
	border:solid 1px #2e2e1f;
	border-radius:10px;
	box-sizing: border-box;
}

#role1
{
background-color:red;
	background-repeat:no-repeat;
	background-size:100%;
	
	width:120px;
	height:100px;
	position:absolute;
	left:100px;
	top:100px;
	margin:0px;
	border:solid 1px #2e2e1f;
	border-radius:10px;
	box-sizing: border-box;
}
#role2
{
background-color:red;
	background-repeat:no-repeat;
	background-size:100%;
	
	width:120px;
	height:100px;
	position:absolute;
	left:100px;
	top:100px;
	margin:0px;
	border:solid 1px #2e2e1f;
	border-radius:10px;
	box-sizing: border-box;
}
#role3
{
background-color:red;
	background-repeat:no-repeat;
	background-size:100%;
	
	width:120px;
	height:100px;
	position:absolute;
	left:100px;
	top:100px;
	margin:0px;
	border:solid 1px #2e2e1f;
	border-radius:10px;
	box-sizing: border-box;
}
#role4
{
background-color:white;
	background-repeat:no-repeat;
	background-size:100%;
	
	width:120px;
	height:100px;
	position:absolute;
	left:100px;
	top:100px;
	margin:0px;
	border:solid 1px #2e2e1f;
	border-radius:10px;
	box-sizing: border-box;
}
#role5
{
background-color:white;
	background-repeat:no-repeat;
	background-size:100%;
	
	width:120px;
	height:100px;
	position:absolute;
	left:100px;
	top:100px;
	margin:0px;
	border:solid 1px #2e2e1f;
	border-radius:10px;
	box-sizing: border-box;
}
#role6
{
background-color:white;
	background-repeat:no-repeat;
	background-size:100%;
	
	width:120px;
	height:100px;
	position:absolute;
	left:100px;
	top:100px;
	margin:0px;
	border:solid 1px #2e2e1f;
	border-radius:10px;
	box-sizing: border-box;
}

#crea1
{
background-image:url(images/categorie0.png);
	background-repeat:no-repeat;
	background-size:100%;
		border-top-left-radius:10px;
		border-top-right-radius:10px;
	width:100px;
	height:100px;
	display:inline-block;
	
	z-index:2;

}
#crea2
{
background-image:url(images/categorie1.png);
	background-repeat:no-repeat;
	background-size:100%;
		border-top-left-radius:10px;
		border-top-right-radius:10px;
	width:100px;
	height:100px;
	display:inline-block;
	z-index:2;

}
#crea3
{
background-image:url(images/categorie2.png);
	background-repeat:no-repeat;
	background-size:100%;
		border-top-left-radius:10px;
		border-top-right-radius:10px;
	width:100px;
	height:100px;
	display:inline-block;
z-index:2;
	
}

#evol1
{
background-image:url(images/evolos.png);
background-color:white;
	background-repeat:no-repeat;
	background-size:100%;
	width:100px;
	height:100px;
	display:inline-block;
	left:100px;
	top:100px;
	margin:0px;
	border:solid 6px black;
	border-radius:100px;
	box-sizing: border-box;
	z-index:2;
	position:absolute;
}
#evol11
{
background-image:url(images/evolgriffe.png);
background-color:white;
	background-repeat:no-repeat;
	background-size:100%;
	width:100px;
	height:100px;
	display:inline-block;
	left:100px;
	top:500px;
	margin:0px;
	border:solid 6px black;
	border-radius:100px;
	box-sizing: border-box;
	z-index:2;
	position:absolute;
}
#evol21
{
background-image:url(images/evolprod.png);
background-color:white;
	background-repeat:no-repeat;
	background-size:100%;
	width:100px;
	height:100px;
	display:inline-block;
	left:300px;
	top:0px;
	margin:0px;
	border:solid 6px black;
	border-radius:100px;
	box-sizing: border-box;
	z-index:2;
	position:absolute;
}
#masqueevol21
{
background-image:url(images/lock.png);
	background-repeat:no-repeat;
	background-size:100%;
	width:100px;
	height:100px;
	display:inline-block;
	left:300px;
	top:0px;
	margin:0px;
	border:solid 8px black;
	border-radius:100px;
	box-sizing: border-box;
	z-index:3;
	position:absolute;
}
#evol22
{
background-image:url(images/dino4.png);
background-color:white;
	background-repeat:no-repeat;
	background-size:100%;
	width:100px;
	height:100px;
	display:inline-block;
	left:300px;
	top:200px;
	margin:0px;
	border:solid 6px black;
	border-radius:100px;
	box-sizing: border-box;
	z-index:2;
	position:absolute;
}
#masqueevol22
{
background-image:url(images/lock.png);
	background-repeat:no-repeat;
	background-size:100%;
	width:100px;
	height:100px;
	display:inline-block;
	left:300px;
	top:200px;
	margin:0px;
	border:solid 8px black;
	border-radius:100px;
	box-sizing: border-box;
	z-index:3;
	position:absolute;
}
#evol23
{
background-image:url(images/evolprod.png);
background-color:white;
	background-repeat:no-repeat;
	background-size:100%;
	width:100px;
	height:100px;
	display:inline-block;
	left:300px;
	top:400px;
	margin:0px;
	border:solid 6px black;
	border-radius:100px;
	box-sizing: border-box;
	z-index:2;
	position:absolute;
}
#masqueevol23
{
background-image:url(images/lock.png);
	background-repeat:no-repeat;
	background-size:100%;
	width:100px;
	height:100px;
	display:inline-block;
	left:300px;
	top:400px;
	margin:0px;
	border:solid 8px black;
	border-radius:100px;
	box-sizing: border-box;
	z-index:3;
	position:absolute;
}
#evol24
{
background-image:url(images/dino3.png);
background-color:white;
	background-repeat:no-repeat;
	background-size:100%;
	width:100px;
	height:100px;
	display:inline-block;
	left:300px;
	top:600px;
	margin:0px;
	border:solid 6px black;
	border-radius:100px;
	box-sizing: border-box;
	z-index:2;
	position:absolute;
}
#masqueevol24
{
background-image:url(images/lock.png);
	background-repeat:no-repeat;
	background-size:100%;
	width:100px;
	height:100px;
	display:inline-block;
	left:300px;
	top:600px;
	margin:0px;
	border:solid 8px black;
	border-radius:100px;
	box-sizing: border-box;
	z-index:3;
	position:absolute;
}
#evol31
{
background-image:url(images/dino14.png);
background-color:white;
	background-repeat:no-repeat;
	background-size:100%;
	width:100px;
	height:100px;
	display:inline-block;
	left:500px;
	top:0px;
	margin:0px;
	border:solid 6px black;
	border-radius:100px;
	box-sizing: border-box;
	z-index:2;
	position:absolute;
}
#masqueevol31
{
background-image:url(images/lock.png);
	background-repeat:no-repeat;
	background-size:100%;
	width:100px;
	height:100px;
	display:inline-block;
	left:500px;
	top:0px;
	margin:0px;
	border:solid 8px black;
	border-radius:100px;
	box-sizing: border-box;
	z-index:3;
	position:absolute;
}
#evol32
{
background-image:url(images/evoldna.png);
background-color:white;
	background-repeat:no-repeat;
	background-size:100%;
	width:100px;
	height:100px;
	display:inline-block;
	left:500px;
	top:200px;
	margin:0px;
	border:solid 6px black;
	border-radius:100px;
	box-sizing: border-box;
	z-index:2;
	position:absolute;
}
#masqueevol32
{
background-image:url(images/lock.png);
	background-repeat:no-repeat;
	background-size:100%;
	width:100px;
	height:100px;
	display:inline-block;
	left:500px;
	top:200px;
	margin:0px;
	border:solid 8px black;
	border-radius:100px;
	box-sizing: border-box;
	z-index:3;
	position:absolute;
}
#evol33
{
background-image:url(images/dino13.png);
background-color:white;
	background-repeat:no-repeat;
	background-size:100%;
	width:100px;
	height:100px;
	display:inline-block;
	left:500px;
	top:400px;
	margin:0px;
	border:solid 6px black;
	border-radius:100px;
	box-sizing: border-box;
	z-index:2;
	position:absolute;
}
#masqueevol33
{
background-image:url(images/lock.png);
	background-repeat:no-repeat;
	background-size:100%;
	width:100px;
	height:100px;
	display:inline-block;
	left:500px;
	top:400px;
	margin:0px;
	border:solid 8px black;
	border-radius:100px;
	box-sizing: border-box;
	z-index:3;
	position:absolute;
}
#evol34
{
background-image:url(images/evolmache.png);
background-color:white;
	background-repeat:no-repeat;
	background-size:100%;
	width:100px;
	height:100px;
	display:inline-block;
	left:500px;
	top:600px;
	margin:0px;
	border:solid 6px black;
	border-radius:100px;
	box-sizing: border-box;
	z-index:2;
	position:absolute;
}
#masqueevol34
{
background-image:url(images/lock.png);
	background-repeat:no-repeat;
	background-size:100%;
	width:100px;
	height:100px;
	display:inline-block;
	left:500px;
	top:600px;
	margin:0px;
	border:solid 8px black;
	border-radius:100px;
	box-sizing: border-box;
	z-index:3;
	position:absolute;
}
#evol41
{
background-image:url(images/evoldna.png);
background-color:white;
	background-repeat:no-repeat;
	background-size:100%;
	width:100px;
	height:100px;
	display:inline-block;
	left:700px;
	top:100px;
	margin:0px;
	border:solid 6px black;
	border-radius:100px;
	box-sizing: border-box;
	z-index:2;
	position:absolute;
}
#masqueevol41
{
background-image:url(images/lock.png);
	background-repeat:no-repeat;
	background-size:100%;
	width:100px;
	height:100px;
	display:inline-block;
	left:700px;
	top:100px;
	margin:0px;
	border:solid 8px black;
	border-radius:100px;
	box-sizing: border-box;
	z-index:3;
	position:absolute;
}
#evol42
{
background-image:url(images/dino11.png);
background-color:white;
	background-repeat:no-repeat;
	background-size:100%;
	width:100px;
	height:100px;
	display:inline-block;
	left:700px;
	top:300px;
	margin:0px;
	border:solid 6px black;
	border-radius:100px;
	box-sizing: border-box;
	z-index:2;
	position:absolute;
}
#masqueevol42
{
background-image:url(images/lock.png);
	background-repeat:no-repeat;
	background-size:100%;
	width:100px;
	height:100px;
	display:inline-block;
	left:700px;
	top:300px;
	margin:0px;
	border:solid 8px black;
	border-radius:100px;
	box-sizing: border-box;
	z-index:3;
	position:absolute;
}
#evol43
{
background-image:url(images/dino12.png);
background-color:white;
	background-repeat:no-repeat;
	background-size:100%;
	width:100px;
	height:100px;
	display:inline-block;
	left:700px;
	top:500px;
	margin:0px;
	border:solid 6px black;
	border-radius:100px;
	box-sizing: border-box;
	z-index:2;
	position:absolute;
}
#masqueevol43
{
background-image:url(images/lock.png);
	background-repeat:no-repeat;
	background-size:100%;
	width:100px;
	height:100px;
	display:inline-block;
	left:700px;
	top:500px;
	margin:0px;
	border:solid 8px black;
	border-radius:100px;
	box-sizing: border-box;
	z-index:3;
	position:absolute;
}
#evol44
{
background-image:url(images/evolmache.png);
background-color:white;
	background-repeat:no-repeat;
	background-size:100%;
	width:100px;
	height:100px;
	display:inline-block;
	left:700px;
	top:700px;
	margin:0px;
	border:solid 6px black;
	border-radius:100px;
	box-sizing: border-box;
	z-index:2;
	position:absolute;
}
#masqueevol44
{
background-image:url(images/lock.png);
	background-repeat:no-repeat;
	background-size:100%;
	width:100px;
	height:100px;
	display:inline-block;
	left:700px;
	top:700px;
	margin:0px;
	border:solid 8px black;
	border-radius:100px;
	box-sizing: border-box;
	z-index:3;
	position:absolute;
}
#evol51
{
background-image:url(images/dino15.png);
background-color:white;
	background-repeat:no-repeat;
	background-size:100%;
	width:100px;
	height:100px;
	display:inline-block;
	left:900px;
	top:0px;
	margin:0px;
	border:solid 6px black;
	border-radius:100px;
	box-sizing: border-box;
	z-index:2;
	position:absolute;
}
#masqueevol51
{
background-image:url(images/lock.png);
	background-repeat:no-repeat;
	background-size:100%;
	width:100px;
	height:100px;
	display:inline-block;
	left:900px;
	top:0px;
	margin:0px;
	border:solid 8px black;
	border-radius:100px;
	box-sizing: border-box;
	z-index:3;
	position:absolute;
}
#evol52
{
background-image:url(images/evolgreg.png);
background-color:white;
	background-repeat:no-repeat;
	background-size:100%;
	width:100px;
	height:100px;
	display:inline-block;
	left:900px;
	top:200px;
	margin:0px;
	border:solid 6px black;
	border-radius:100px;
	box-sizing: border-box;
	z-index:2;
	position:absolute;
}
#masqueevol52
{
background-image:url(images/lock.png);
	background-repeat:no-repeat;
	background-size:100%;
	width:100px;
	height:100px;
	display:inline-block;
	left:900px;
	top:200px;
	margin:0px;
	border:solid 8px black;
	border-radius:100px;
	box-sizing: border-box;
	z-index:3;
	position:absolute;
}
#evol53
{
background-image:url(images/evolpred.png);
background-color:white;
	background-repeat:no-repeat;
	background-size:100%;
	width:100px;
	height:100px;
	display:inline-block;
	left:900px;
	top:500px;
	margin:0px;
	border:solid 6px black;
	border-radius:100px;
	box-sizing: border-box;
	z-index:2;
	position:absolute;
}
#masqueevol53
{
background-image:url(images/lock.png);
	background-repeat:no-repeat;
	background-size:100%;
	width:100px;
	height:100px;
	display:inline-block;
	left:900px;
	top:500px;
	margin:0px;
	border:solid 8px black;
	border-radius:100px;
	box-sizing: border-box;
	z-index:3;
	position:absolute;
}
#evol54
{
background-image:url(images/dino5.png);
background-color:white;
	background-repeat:no-repeat;
	background-size:100%;
	width:100px;
	height:100px;
	display:inline-block;
	left:900px;
	top:700px;
	margin:0px;
	border:solid 6px black;
	border-radius:100px;
	box-sizing: border-box;
	z-index:2;
	position:absolute;
}
#masqueevol54
{
background-image:url(images/lock.png);
	background-repeat:no-repeat;
	background-size:100%;
	width:100px;
	height:100px;
	display:inline-block;
	left:900px;
	top:700px;
	margin:0px;
	border:solid 8px black;
	border-radius:100px;
	box-sizing: border-box;
	z-index:3;
	position:absolute;
}
#validevol1
{
background-image:url(images/unlocked.png);
	background-repeat:no-repeat;
	background-size:100%;
	width:100px;
	height:100px;
	display:none;
	left:100px;
	top:100px;
	opacity:60%;
	border:solid 8px black;
	border-radius:100px;
	box-sizing: border-box;
	z-index:3;
	position:absolute;
}
#validevol11
{
background-image:url(images/unlocked.png);
	background-repeat:no-repeat;
	background-size:100%;
	width:100px;
	height:100px;
	display:none;
	left:100px;
	top:500px;
	opacity:60%;
	border:solid 8px black;
	border-radius:100px;
	box-sizing: border-box;
	z-index:3;
	position:absolute;
}
#validevol21
{
background-image:url(images/unlocked.png);
	background-repeat:no-repeat;
	background-size:100%;
	width:100px;
	height:100px;
	display:none;
	left:300px;
	top:0px;
	opacity:60%;
	border:solid 8px black;
	border-radius:100px;
	box-sizing: border-box;
	z-index:3;
	position:absolute;
}
#validevol22
{
background-image:url(images/unlocked.png);
	background-repeat:no-repeat;
	background-size:100%;
	width:100px;
	height:100px;
	display:none;
	left:300px;
	top:200px;
	opacity:60%;
	border:solid 8px black;
	border-radius:100px;
	box-sizing: border-box;
	z-index:3;
	position:absolute;
}
#validevol23
{
background-image:url(images/unlocked.png);
	background-repeat:no-repeat;
	background-size:100%;
	width:100px;
	height:100px;
	display:none;
	left:300px;
	top:400px;
	opacity:60%;
	border:solid 8px black;
	border-radius:100px;
	box-sizing: border-box;
	z-index:3;
	position:absolute;
}
#validevol24
{
background-image:url(images/unlocked.png);
	background-repeat:no-repeat;
	background-size:100%;
	width:100px;
	height:100px;
	display:none;
	left:300px;
	top:600px;
	opacity:60%;
	border:solid 8px black;
	border-radius:100px;
	box-sizing: border-box;
	z-index:3;
	position:absolute;
}
#validevol31
{
background-image:url(images/unlocked.png);
	background-repeat:no-repeat;
	background-size:100%;
	width:100px;
	height:100px;
	display:none;
	left:500px;
	top:0px;
	opacity:60%;
	border:solid 8px black;
	border-radius:100px;
	box-sizing: border-box;
	z-index:3;
	position:absolute;
}
#validevol32
{
background-image:url(images/unlocked.png);
	background-repeat:no-repeat;
	background-size:100%;
	width:100px;
	height:100px;
	display:none;
	left:500px;
	top:200px;
	opacity:60%;
	border:solid 8px black;
	border-radius:100px;
	box-sizing: border-box;
	z-index:3;
	position:absolute;
}
#validevol33
{
background-image:url(images/unlocked.png);
	background-repeat:no-repeat;
	background-size:100%;
	width:100px;
	height:100px;
	display:none;
	left:500px;
	top:400px;
	opacity:60%;
	border:solid 8px black;
	border-radius:100px;
	box-sizing: border-box;
	z-index:3;
	position:absolute;
}
#validevol34
{
background-image:url(images/unlocked.png);
	background-repeat:no-repeat;
	background-size:100%;
	width:100px;
	height:100px;
	display:none;
	left:500px;
	top:600px;
	opacity:60%;
	border:solid 8px black;
	border-radius:100px;
	box-sizing: border-box;
	z-index:3;
	position:absolute;
}
#validevol41
{
background-image:url(images/unlocked.png);
	background-repeat:no-repeat;
	background-size:100%;
	width:100px;
	height:100px;
	display:none;
	left:700px;
	top:100px;
	opacity:60%;
	border:solid 8px black;
	border-radius:100px;
	box-sizing: border-box;
	z-index:3;
	position:absolute;
}
#validevol42
{
background-image:url(images/unlocked.png);
	background-repeat:no-repeat;
	background-size:100%;
	width:100px;
	height:100px;
	display:none;
	left:700px;
	top:300px;
	opacity:60%;
	border:solid 8px black;
	border-radius:100px;
	box-sizing: border-box;
	z-index:3;
	position:absolute;
}
#validevol43
{
background-image:url(images/unlocked.png);
	background-repeat:no-repeat;
	background-size:100%;
	width:100px;
	height:100px;
	display:none;
	left:700px;
	top:500px;
	opacity:60%;
	border:solid 8px black;
	border-radius:100px;
	box-sizing: border-box;
	z-index:3;
	position:absolute;
}
#validevol44
{
background-image:url(images/unlocked.png);
	background-repeat:no-repeat;
	background-size:100%;
	width:100px;
	height:100px;
	display:none;
	left:700px;
	top:700px;
	opacity:60%;
	border:solid 8px black;
	border-radius:100px;
	box-sizing: border-box;
	z-index:3;
	position:absolute;
}
#validevol51
{
background-image:url(images/unlocked.png);
	background-repeat:no-repeat;
	background-size:100%;
	width:100px;
	height:100px;
	display:none;
	left:900px;
	top:0px;
	opacity:60%;
	border:solid 8px black;
	border-radius:100px;
	box-sizing: border-box;
	z-index:3;
	position:absolute;
}
#validevol52
{
background-image:url(images/unlocked.png);
	background-repeat:no-repeat;
	background-size:100%;
	width:100px;
	height:100px;
	display:none;
	left:900px;
	top:200px;
	opacity:60%;
	border:solid 8px black;
	border-radius:100px;
	box-sizing: border-box;
	z-index:3;
	position:absolute;
}
#validevol53
{
background-image:url(images/unlocked.png);
	background-repeat:no-repeat;
	background-size:100%;
	width:100px;
	height:100px;
	display:none;
	left:900px;
	top:500px;
	opacity:60%;
	border:solid 8px black;
	border-radius:100px;
	box-sizing: border-box;
	z-index:3;
	position:absolute;
}
#validevol54
{
background-image:url(images/unlocked.png);
	background-repeat:no-repeat;
	background-size:100%;
	width:100px;
	height:100px;
	display:none;
	left:900px;
	top:700px;
	opacity:60%;
	border:solid 8px black;
	border-radius:100px;
	box-sizing: border-box;
	z-index:3;
	position:absolute;
}
#masqueptero
{
background-image:url(images/verrouille.png);
	background-repeat:no-repeat;
	background-size:100%;
	width:300px;
	height:110px;
	display:inline-block;
	left:5px;
	top:330px;
	margin:0px;
	border:solid 3px white;
	border-radius:10px;
	box-sizing: border-box;
	z-index:8;
	position:absolute;
}
#masquetrice
{
background-image:url(images/verrouille.png);
	background-repeat:no-repeat;
	background-size:100%;
	width:300px;
	height:110px;
	display:inline-block;
	left:5px;
	top:455px;
	margin:0px;
	border:solid 3px white;
	border-radius:10px;
	box-sizing: border-box;
	z-index:8;
	position:absolute;
}
#masquetrex
{
background-image:url(images/verrouille.png);
	background-repeat:no-repeat;
	background-size:100%;
	width:300px;
	height:110px;
	display:inline-block;
	left:5px;
	top:580px;
	margin:0px;
	border:solid 3px white;
	border-radius:10px;
	box-sizing: border-box;
	z-index:8;
	position:absolute;
}
#masquemusa
{
background-image:url(images/verrouille.png);
	background-repeat:no-repeat;
	background-size:100%;
	width:300px;
	height:110px;
	display:inline-block;
	left:5px;
	top:70px;
	margin:0px;
	border:solid 3px white;
	border-radius:10px;
	box-sizing: border-box;
	z-index:8;
	position:absolute;
}
#masquehumain
{
background-image:url(images/verrouille.png);
	background-repeat:no-repeat;
	background-size:100%;
	width:300px;
	height:110px;
	display:inline-block;
	left:5px;
	top:580px;
	margin:0px;
	border:solid 3px white;
	border-radius:10px;
	box-sizing: border-box;
	z-index:8;
	position:absolute;
}
#masquemammou
{
background-image:url(images/verrouille.png);
	background-repeat:no-repeat;
	background-size:100%;
	width:300px;
	height:110px;
	display:inline-block;
	left:5px;
	top:455px;
	margin:0px;
	border:solid 3px white;
	border-radius:10px;
	box-sizing: border-box;
	z-index:8;
	position:absolute;
}
#masqueada
{
background-image:url(images/verrouille.png);
	background-repeat:no-repeat;
	background-size:100%;
	width:300px;
	height:110px;
	display:inline-block;
	left:5px;
	top:330px;
	margin:0px;
	border:solid 3px white;
	border-radius:10px;
	box-sizing: border-box;
	z-index:8;
	position:absolute;
}
#masquetigre
{
background-image:url(images/verrouille.png);
	background-repeat:no-repeat;
	background-size:100%;
	width:300px;
	height:110px;
	display:inline-block;
	left:5px;
	top:200px;
	margin:0px;
	border:solid 3px white;
	border-radius:10px;
	box-sizing: border-box;
	z-index:8;
	position:absolute;
}
#dino1
{
background-image:url(images/dino1.png);
	background-repeat:no-repeat;
	background-size:100%;
	
	width:100px;
	height:100px;
display:inline-block;
	left:0px;
	top:0px;
	margin:0px;
	border:solid 3px black;
	border-radius:10px;
	box-sizing: border-box;
}
#dino2
{
background-image:url(images/dino2.png);
	background-repeat:no-repeat;
	background-size:100%;
	
	width:100px;
	height:100px;
display:inline-block;
	left:0px;
	top:0px;
	margin:0px;
	border:solid 3px black;
	border-radius:10px;
	box-sizing: border-box;
}
#dino3
{
background-image:url(images/dino3.png);
	background-repeat:no-repeat;
	background-size:100%;
	
	width:100px;
	height:100px;
display:inline-block;
	left:0px;
	top:0px;
	margin:0px;
	border:solid 3px black;
	border-radius:10px;
	box-sizing: border-box;
}
#dino4
{
background-image:url(images/dino4.png);
	background-repeat:no-repeat;
	background-size:100%;
	
	width:100px;
	height:100px;

	left:0px;
	top:0px;
	margin:0px;
	border:solid 3px black;
	border-radius:10px;
	box-sizing: border-box;
}
#dino5
{
background-image:url(images/dino5.png);
	background-repeat:no-repeat;
	background-size:100%;
	
	width:100px;
	height:100px;

	left:0px;
	top:0px;
	margin:0px;
	border:solid 3px black;
	border-radius:10px;
	box-sizing: border-box;
}
#dino11
{
background-image:url(images/dino11.png);
	background-repeat:no-repeat;
	background-size:100%;
	
	width:100px;
	height:100px;

	left:0px;
	top:0px;
	margin:0px;
	border:solid 3px black;
	border-radius:10px;
	box-sizing: border-box;
}
#dino12
{
background-image:url(images/dino12.png);
	background-repeat:no-repeat;
	background-size:100%;
	
	width:100px;
	height:100px;

	left:0px;
	top:0px;
	margin:0px;
	border:solid 3px black;
	border-radius:10px;
	box-sizing: border-box;
}
#dino13
{
background-image:url(images/dino13.png);
	background-repeat:no-repeat;
	background-size:100%;
	
	width:100px;
	height:100px;

	left:0px;
	top:0px;
	margin:0px;
border:solid 3px black;
	border-radius:10px;
	box-sizing: border-box;
}
#dino14
{
background-image:url(images/dino14.png);
	background-repeat:no-repeat;
	background-size:100%;
	
	width:100px;
	height:100px;

	left:0px;
	top:0px;
	margin:0px;
	border:solid 3px black;
	border-radius:10px;
	box-sizing: border-box;
}
#dino15
{
background-image:url(images/dino15.png);
	background-repeat:no-repeat;
	background-size:100%;
	
	width:100px;
	height:100px;

	left:0px;
	top:0px;
	margin:0px;
	border:solid 3px black;
	border-radius:10px;
	box-sizing: border-box;
}

#vegetal1
{
background-image:url(images/vege1.png);
	background-repeat:no-repeat;
	background-size:100%;
	
	width:100px;
	height:100px;
display:inline-block;
	left:0px;
	top:0px;
	margin:0px;
	border:solid 3px black;
	border-radius:10px;
	box-sizing: border-box;
}
#vegetal2
{
background-image:url(images/vege2.png);
	background-repeat:no-repeat;
	background-size:100%;
	width:100px;
	height:100px;
display:inline-block;
	left:0px;
	top:0px;
	margin:0px;
	border:solid 3px black;
	border-radius:10px;
	box-sizing: border-box;
}
#vegetal3
{
background-image:url(images/vege3.png);
	background-repeat:no-repeat;
	background-size:100%;
	
	width:100px;
	height:100px;
display:inline-block;
	left:0px;
	top:0px;
	margin:0px;
	border:solid 3px black;
	border-radius:10px;
	box-sizing: border-box;
}
#vegetal4
{
background-image:url(images/vege4.png);
	background-repeat:no-repeat;
	background-size:100%;
	
	width:100px;
	height:100px;
display:inline-block;
	left:0px;
	top:0px;
	margin:0px;
	border:solid 3px black;
	border-radius:10px;
	box-sizing: border-box;
}
#vegetal5
{
background-image:url(images/vege5.png);
	background-repeat:no-repeat;
	background-size:100%;
	
	width:100px;
	height:100px;
display:inline-block;
	left:0px;
	top:0px;
	margin:0px;
	border:solid 3px black;
	border-radius:10px;
	box-sizing: border-box;
}
#prixoption1
{

	background-size:100%;
	
	width:150px;
	height:40px;
	
	margin-left:110px;
	margin-top:-40px;

	
}
#prixoption2
{
background-color:white;
	background-repeat:no-repeat;
	background-size:100%;
	
	width:150px;
	height:40px;
	
	margin-left:110px;
	margin-top:-40px;

	
}
#prixoption3
{
background-color:white;
	background-repeat:no-repeat;
	background-size:100%;
	
	width:150px;
	height:40px;
	
	margin-left:110px;
	margin-top:-40px;

	
}
#prixoption4
{
background-color:white;
	background-repeat:no-repeat;
	background-size:100%;
	
	width:150px;
	height:40px;
	
	margin-left:110px;
	margin-top:-40px;
	
}

#prixoption5
{
background-color:white;
	background-repeat:no-repeat;
	background-size:100%;
	
	width:150px;
	height:40px;
	
	margin-left:110px;
	margin-top:-40px;
	
}
#prixoption11
{
background-color:white;
	background-repeat:no-repeat;
	background-size:100%;
	
	width:150px;
	height:40px;
	
	margin-left:110px;
	margin-top:-40px;
	
}
#prixoption12
{
background-color:white;
	background-repeat:no-repeat;
	background-size:100%;
	
	width:150px;
	height:40px;
	
	margin-left:110px;
	margin-top:-40px;
	
}
#prixoption13
{
background-color:white;
	background-repeat:no-repeat;
	background-size:100%;
	
	width:150px;
	height:40px;
	
	margin-left:110px;
	margin-top:-40px;
	
}
#prixoption14
{
background-color:white;
	background-repeat:no-repeat;
	background-size:100%;
	
	width:150px;
	height:40px;
	
	margin-left:110px;
	margin-top:-40px;
	
}
#prixoption15
{
background-color:white;
	background-repeat:no-repeat;
	background-size:100%;
	
	width:150px;
	height:40px;
	
	margin-left:110px;
	margin-top:-40px;
	
}
#prixvege1
{

	background-size:100%;
	
	width:150px;
	height:40px;
	
	margin-left:110px;
	margin-top:-40px;

	
}
#prixvege2
{

	background-size:100%;
	
	width:150px;
	height:40px;
	
	margin-left:110px;
	margin-top:-40px;

	
}
#prixvege3
{

	background-size:100%;
	
	width:150px;
	height:40px;
	
	margin-left:110px;
	margin-top:-40px;

	
}
#prixvege4
{

	background-size:100%;
	
	width:150px;
	height:40px;
	
	margin-left:110px;
	margin-top:-40px;

	
}
#prixvege5
{

	background-size:100%;
	
	width:150px;
	height:40px;
	
	margin-left:110px;
	margin-top:-40px;

	
}
#asteroidedetail
{
background-image:url(images/asteroidedetail.png);	
	width:200px;
	height:400px;
	display:none;
}
#frisedetail
{
background-image:url(images/frisedetail.png);	
	width:200px;
	height:400px;
	display:none;
}
#evolutiondetail
{
background-image:url(images/evolutiondetail.png);	
	width:200px;
	height:400px;
	display:none;
}
#dino1detail
{
background-image:url(images/dino1detail.png);	
	width:200px;
	height:400px;
	display:none;
}
#dino2detail
{display:none;
background-image:url(images/dino2detail.png);	
	width:200px;
	height:400px;
}
#dino3detail
{display:none;
background-image:url(images/dino3detail.png);	
	width:200px;
	height:400px;
}
#dino4detail
{display:none;
background-image:url(images/dino4detail.png);	
	width:200px;
	height:400px;
}
#dino5detail
{display:none;
background-image:url(images/dino5detail.png);	
	width:200px;
	height:400px;
}
#dino11detail
{display:none;
background-image:url(images/dino11detail.png);	
	width:200px;
	height:400px;
}
#dino12detail
{display:none;
background-image:url(images/dino12detail.png);	
	width:200px;
	height:400px;
}
#dino13detail
{display:none;
background-image:url(images/dino13detail.png);	
	width:200px;
	height:400px;
}
#dino14detail
{display:none;
background-image:url(images/dino14detail.png);	
	width:200px;
	height:400px;
}
#dino15detail
{display:none;
background-image:url(images/dino15detail.png);	
	width:200px;
	height:400px;
}
#vege1detail
{
background-image:url(images/vege1detail.png);	
	width:200px;
	height:400px;
	display:none;
}
#vege2detail
{
background-image:url(images/vege2detail.png);	
	width:200px;
	height:400px;
	display:none;
}
#vege3detail
{
background-image:url(images/vege3detail.png);	
	width:200px;
	height:400px;
	display:none;
}
#vege4detail
{
background-image:url(images/vege4detail.png);	
	width:200px;
	height:400px;
	display:none;
}
#vege5detail
{
background-image:url(images/vege5detail.png);	
	width:200px;
	height:400px;
	display:none;
}
#ressources
{display:none;
background-image:url(images/ressources.png);	
	width:200px;
	height:400px;
}
#evol1detail
{display:none;
background-image:url(images/evol1detail.png);	
	width:200px;
	height:400px;
}
#evol11detail
{display:none;
background-image:url(images/evol11detail.png);	
	width:200px;
	height:400px;
}
#evol21detail
{display:none;
background-image:url(images/evol21detail.png);	
	width:200px;
	height:400px;
}
#evol32detail
{display:none;
background-image:url(images/evol32detail.png);	
	width:200px;
	height:400px;
}
#evol34detail
{display:none;
background-image:url(images/evol34detail.png);	
	width:200px;
	height:400px;
}
#evol52detail
{display:none;
background-image:url(images/evol52detail.png);	
	width:200px;
	height:400px;
}
#evol53detail
{display:none;
background-image:url(images/evol53detail.png);	
	width:200px;
	height:400px;
}
#data
{
	background-image:url(images/data1.png);

	width:200px;
	height:200px;
	vertical-align: top;
	text-align:center;
	font-size:20px;
	
		top:170px;
		position:absolute;
	display:inline-block;
padding-top:5px;
	z-index:3;
	
}




#zoomcarte
{
		background-color:#ffe680;
	
	width:200px;
	height:400px;
	vertical-align: top;
	text-align:center;
	font-size:20px;
	top:380px;
		
	position:absolute;

	z-index:3;
}
#evolution
{
		background-color:white;
		margin-left:25px;
	width:200px;
	height:120px;
	vertical-align: top;
	text-align:center;
	font-size:20px;
	top:550px;
		
	position:absolute;

	z-index:3;
}
#applique
{
		background-color:white;
		margin-left:25px;
	width:200px;
	height:120px;
	vertical-align: top;
	text-align:center;
	font-size:20px;
	top:550px;
		
	position:absolute;

	z-index:3;
}
#findutour
{
	font-family:Arial;
	font-size:17px;
	padding:16px 31px;
	
font-weight:bold;
	background-color:#990000;
	border-radius:10px;
	border:3px solid white;
	display:inline;
	cursor:pointer;
	color:#ffffff;
		position:absolute;
	width:200px;
	height:50px;
	left:25px;
	top:700px;
	
}
#evolve
{
	font-family:Arial;
	font-size:17px;
	padding:16px 31px;
	
font-weight:bold;
	background-color:#990000;
	border-radius:10px;
	border:3px solid white;
	display:inline;
	cursor:pointer;
	color:#ffffff;
		position:absolute;
	width:200px;
	height:50px;
	left:0px;
	top:70px;
	
}


/* Tooltip text */
.roles .tooltiptext {
  visibility: hidden;
  width: 200px;
  height:300px;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 10px 10px;
  border-radius: 10px;
 bottom: 0%;
  left: 0%;

 	border:3px solid white;  box-sizing: border-box;
 font-size:20px;
  /* Position the tooltip text - see examples below! */
  position: absolute;
top:-305px;
left:0px;
}

/* Show the tooltip text when you mouse over the tooltip container */
.roles:hover .tooltiptext {
  visibility: visible;
   font-size:18px;
}











#interjoueur
{
	background-color:#1e1e15;
	width:1460px;
	height:1000px;
	position:absolute;
	left:0%;
	top:0%;
	z-index:17;
	text-align:center;
display:block;
}
#alliances
{
	background-color:#1e1e15;
	width:1460px;
	height:450px;
	position:absolute;
	left:0%;
	top:500px;
	z-index:17;
	text-align:center;
display:none;
}

#range
{
	background-image:url(images/impact2.gif);

	width:100px;
	height:100px;
	z-index:10;
	top:0px;
	left:0px;
	position:absolute;
	display:none;
z-index:7;
border-radius:10px;
	
}
#units
{
		background-color:#1e1e15;
	background-repeat:no-repeat;
	background-size:100%;
	width:1460px;
	height:850px;
	
	top:150px;
	left:0px;
	position:absolute;
	display:none;
	z-index:10;
	
	
}

#upgrades
{
		background-color:#1e1e15;
	background-repeat:no-repeat;
	background-size:100%;
	width:1460px;
	height:850px;
	
	top:150px;
	left:0px;
	position:absolute;
	display:none;
	z-index:10;
	
	
}

#masquemarche
{
	text-align:center;
	font-family:Arial;
	font-size:36px;
		font-weight:bold;	

	width:1400px;
	height:200px;
		color:#737373;
	top:760px;
	left:30px;
	position:absolute;
	display:none;
	z-index:6;	
background: rgb(23,23,23);
background: linear-gradient(90deg, rgba(23,23,23,1) 0%, rgba(47,0,0,1) 100%);
		border:solid 4px 	black; box-sizing: border-box;
		border-radius:10px;
}

#options
{
		background-color:#1e1e15;
	background-repeat:no-repeat;
	background-size:100%;
	width:1400px;
	height:200px;
	
	top:760px;
	left:30px;
	position:absolute;
	display:inline-block;
	z-index:3;	
}
#masqueoptions
{
		background-color:black;
	background-repeat:no-repeat;
	background-size:100%;
	width:1400px;
	height:200px;
	text-align:center;
	font-family:Arial;
	font-size:33px;
	cursor:pointer;
	top:760px;
	left:30px;
	position:absolute;
	display:inline-block;
	z-index:6;
	border:solid 4px 	white; box-sizing: border-box;
	border-radius:10px;
	color:white;
}
#masqueoptions:hover
{
background-color: #990000;
}


#option2
{
		background-color:blue;
	background-repeat:no-repeat;
	background-size:100%;
	width:250px;
	height:100px;
	z-index:12;
	margin-top:30px;
	display:inline-block;
}
#option3
{
		background-color:blue;
	background-repeat:no-repeat;
	background-size:100%;
	width:250px;
	height:100px;
	z-index:12;
	margin-top:30px;
	display:inline-block;
}

#option4
{
		background-color:blue;
	background-repeat:no-repeat;
	background-size:100%;
	width:250px;
	height:100px;
	z-index:12;
	margin-top:30px;
	display:inline-block;
}
#option5
{
		background-color:blue;
	background-repeat:no-repeat;
	background-size:100%;
	width:250px;
	height:100px;
	z-index:12;
	margin-top:30px;
	display:inline-block;
}
#option6
{
		background-color:blue;
	background-repeat:no-repeat;
	background-size:100%;
	width:250px;
	height:100px;
	z-index:12;
	margin-top:30px;
	display:inline-block;
}
#unit4
{
		background-image:url(images/upsamourai.png);
		top:50px;
		left:50px;
		position:absolute;
	width:200px;
	height:200px;
	z-index:12;
	border-radius:10px;
	display:block;
	border:solid 2px 	white; box-sizing: border-box;
}
#unit5
{
		background-image:url(images/upassassin.png);
		top:400px;
		left:940px;
		position:absolute;
	width:200px;
	height:200px;
	z-index:12;
	border-radius:10px;
	display:block;
	border:solid 2px 	white; box-sizing: border-box;
}
#unit6
{
		background-image:url(images/upchasseur.png);
		top:50px;
		left:340px;
		position:absolute;
	width:200px;
	height:200px;
	z-index:12;
	border-radius:10px;
	display:block;
	border:solid 2px 	white; box-sizing: border-box;
}

#unit7
{
		background-image:url(images/upgardien.png);
		top:50px;
		left:640px;
		position:absolute;
	width:200px;
	height:200px;
	z-index:12;
	border-radius:10px;
	display:block;
	border:solid 2px 	white; box-sizing: border-box;
}
#unit8
{
		background-image:url(images/upninja.png);
		top:50px;
		left:940px;
		position:absolute;
	width:200px;
	height:200px;
	z-index:12;
	border-radius:10px;
	display:block;
	border:solid 2px 	white; box-sizing: border-box;
}
#unit9
{
		background-image:url(images/upknight.png);
		top:400px;
		left:50px;
		position:absolute;
	width:200px;
	height:200px;
	z-index:12;
	border-radius:10px;
	display:block;
	border:solid 2px 	white; box-sizing: border-box;
}

#unit10
{
		background-image:url(images/upmonk.png);
		top:400px;
		left:640px;
		position:absolute;
	width:200px;
	height:200px;
	z-index:12;
	border-radius:10px;
	display:block;
	border:solid 2px 	white; box-sizing: border-box;
}
#unit11
{
		background-image:url(images/upsniper.png);
		top:400px;
		left:340px;
		position:absolute;
	width:200px;
	height:200px;
	z-index:12;
	border-radius:10px;
	display:block;
	border:solid 2px 	white; box-sizing: border-box;
}
#unit12
{
		background-image:url(images/upscout.png);
		top:50px;
		left:1240px;
		position:absolute;
	width:200px;
	height:200px;
	z-index:12;
	border-radius:10px;
	display:block;
	border:solid 2px 	white; box-sizing: border-box;
}
#unit13
{
		background-image:url(images/upimpostor.png);
		top:400px;
		left:1240px;
		position:absolute;
	width:200px;
	height:200px;
	z-index:12;
	border-radius:10px;
	display:block;
	border:solid 2px 	white; box-sizing: border-box;
}
#upgrade4
{
		background-image:url(images/upgrade4.png);
		top:50px;
		left:50px;
		position:absolute;
	width:200px;
	height:200px;
	z-index:12;
	border-radius:10px;
	display:block;
	border:solid 2px 	#0066ff; 
}
#upgrade5
{
		background-image:url(images/upgrade5.png);
		top:50px;
		left:340px;
		position:absolute;
	width:200px;
	height:200px;
	z-index:12;
	border-radius:10px;
	display:block;
	border:solid 2px 	#0066ff; 
}
#upgrade6
{
		background-image:url(images/upgrade6.png);
		top:50px;
		left:640px;
		position:absolute;
	width:200px;
	height:200px;
	z-index:12;
	border-radius:10px;
	display:block;
	border:solid 2px 	#0066ff; 
}
#upgrade7
{
		background-image:url(images/commander.png);
		top:50px;
		left:940px;
		position:absolute;
	width:200px;
	height:200px;
	z-index:12;
	border-radius:10px;
	display:block;
	border:solid 2px 	#0066ff; 
}
#upgrade8
{
		background-image:url(images/upgrade8.png);
		top:50px;
		left:1240px;
		position:absolute;
	width:200px;
	height:200px;
	z-index:12;
	border-radius:10px;
	display:block;
	border:solid 2px 	#0066ff; 
}
#upgrade9
{
		background-image:url(images/upgrade9.png);
		top:400px;
		left:50px;
		position:absolute;
	width:200px;
	height:200px;
	z-index:12;
	border-radius:10px;
	display:block;
	border:solid 2px 	#0066ff; 
}
#upgrade10
{
		background-image:url(images/demolisher.png);
		top:400px;
		left:340px;
		position:absolute;
	width:200px;
	height:200px;
	z-index:12;
	border-radius:10px;
	display:block;
	border:solid 2px 	#0066ff; 
}
#upgrade11
{
		background-image:url(images/upgrade11.png);
		top:400px;
		left:640px;
		position:absolute;
	width:200px;
	height:200px;
	z-index:12;
	border-radius:10px;
	display:block;
	border:solid 2px 	#0066ff; 
}
#upgrade12
{
		background-image:url(images/upgrade12.png);
		top:400px;
		left:940px;
		position:absolute;
	width:200px;
	height:200px;
	z-index:12;
	border-radius:10px;
	display:block;
	border:solid 2px 	#0066ff; 
}
#upgrade13
{
		background-image:url(images/mercenary.png);
		top:400px;
		left:1240px;
		position:absolute;
	width:200px;
	height:200px;
	z-index:12;
	border-radius:10px;
	display:block;
	border:solid 2px 	#0066ff; 
}

#touche
{
		background-color:red;
	background-repeat:no-repeat;
	background-size:100%;
	width:120px;
	height:120px;
	position:absolute;
	left:290px;
	top:290px;
	z-index:7;
	opacity:70%;
	display:none;
}
#fou2
{
	background-image:url(images/fou2.png);
	background-repeat:no-repeat;
	background-size:100%;
	width:120px;
	height:120px;
	position:absolute;
	left:290px;
	top:290px;
	z-index:6;
	display:none;
}
#tour2
{
	background-image:url(images/tour2.png);
	background-repeat:no-repeat;
	background-size:100%;
	width:120px;
	height:120px;
	position:absolute;
	left:290px;
	top:290px;
	z-index:6;
	display:none;
}
#cavalier2
{
	background-image:url(images/cavalier2.png);
	background-repeat:no-repeat;
	background-size:100%;
	width:120px;
	height:120px;
	position:absolute;
	left:290px;
	top:290px;
	z-index:6;
	display:none;
}
#dame2
{
	background-image:url(images/dame2.png);
	background-repeat:no-repeat;
	background-size:100%;
	width:120px;
	height:120px;
	position:absolute;
	left:290px;
	top:290px;
	z-index:6;
	display:none;
}
#menu
{
	background-image:url(images/menu1.png);
	width:1570px;
	height:800px;
	position:absolute;
	left:60px;
	top:25px;
	z-index:16;
	text-align:center;
display:block;
}
#ending
{
	background-image:url(images/end.png);
	width:1700px;
	height:850px;
	position:absolute;
	left:0px;
	top:0px;
	z-index:18;
	text-align:center;
display:none;
}
#findujeu
{
	background-image:url(images/victoire.png);
	width:1700px;
	height:850px;
	position:absolute;
	left:0px;
	top:0px;
	z-index:18;
	text-align:center;
display:none;
}
#settings
{
		background-image:url(images/menu1.png);
	width:1700px;
	height:850px;
	position:absolute;
	left:0px;
	top:0px;
	z-index:17;
	text-align:center;
display:none;
color:white;
font-weight:bold;
font-size:24px;
}
#rules
{
	background-color:black;
	width:1700px;
	height:850px;
	position:absolute;
	left:0px;
	top:0px;
	z-index:16;
	text-align:center;
display:none;
}
#rule1
{
	background-image:url(images/rule1.png);
	width:1570px;
	height:800px;
	position:absolute;
	left:60px;
	top:25px;
	z-index:16;
	text-align:center;
}
#rule2
{
	background-image:url(images/rule2.png);
	width:1570px;
	height:800px;
	position:absolute;
	left:60px;
	top:25px;
	z-index:15;
	text-align:center;
}
#rule3
{
	background-image:url(images/rule3.png);
	width:1570px;
	height:800px;
	position:absolute;
	left:60px;
	top:25px;
	z-index:14;
	text-align:center;
}
#rule4
{
	background-image:url(images/rule4.png);
	width:1570px;
	height:800px;
	position:absolute;
	left:60px;
	top:25px;
	z-index:13;
	text-align:center;
}
#rule5
{
	background-image:url(images/rule5.png);
	width:1570px;
	height:800px;
	position:absolute;
	left:60px;
	top:25px;
	z-index:12;
	text-align:center;
}
#rule6
{
	background-image:url(images/rule6.png);
	width:1570px;
	height:800px;
	position:absolute;
	left:60px;
	top:25px;
	z-index:11;
	text-align:center;
}
#rule7
{
	background-image:url(images/rule7.png);
	width:1570px;
	height:800px;
	position:absolute;
	left:60px;
	top:25px;
	z-index:10;
	text-align:center;
}
#rule8
{
	background-image:url(images/rule8.png);
	width:1570px;
	height:800px;
	position:absolute;
	left:60px;
	top:25px;
	z-index:9;
	text-align:center;
}
#rule9
{
	background-image:url(images/rule9.png);
	width:1570px;
	height:800px;
	position:absolute;
	left:60px;
	top:25px;
	z-index:8;
	text-align:center;
}
#rule10
{
	background-image:url(images/rule10.png);
	width:1570px;
	height:800px;
	position:absolute;
	left:60px;
	top:25px;
	z-index:7;
	text-align:center;
}
#rule11
{
	background-image:url(images/rule11.png);
	width:1570px;
	height:800px;
	position:absolute;
	left:60px;
	top:25px;
	z-index:6;
	text-align:center;
}
#rule12
{
	background-image:url(images/rule12.png);
	width:1570px;
	height:800px;
	position:absolute;
	left:60px;
	top:25px;
	z-index:5;
	text-align:center;
}
#rule13
{
	background-image:url(images/rule13.png);
	width:1570px;
	height:800px;
	position:absolute;
	left:60px;
	top:25px;
	z-index:4;
	text-align:center;
}
#rule14
{
	background-image:url(images/rule14.png);
	width:1570px;
	height:800px;
	position:absolute;
	left:60px;
	top:25px;
	z-index:3;
	text-align:center;
}
#finish
{
		background-image:url(images/end1.png);
	width:1460px;
	height:1000px;
	position:absolute;
	left:0%;
	top:0%;
	z-index:18;
	text-align:center;
font-family:Arial;
color:white;
}
#rules1
{
	background-image:url(images/rules1.png);
	width:1460px;
	height:1000px;
	position:absolute;
	left:0%;
	top:0%;
	z-index:15;
	text-align:center;
display:block;
}
#rules2
{
	background-image:url(images/features2.png);
	width:1460px;
	height:1000px;
	position:absolute;
	left:0%;
	top:0%;
	z-index:14;
	text-align:center;
display:block;
}
#rules3
{
	background-image:url(images/battlefield.png);
	width:1460px;
	height:1000px;
	position:absolute;
	left:0%;
	top:0%;
	z-index:12;
	text-align:center;
display:block;
}
#rules4
{
	background-image:url(images/stratege.png);
	width:1460px;
	height:1000px;
	position:absolute;
	left:0%;
	top:0%;
	z-index:11;
	text-align:center;
display:block;
}
#rules5
{
	background-image:url(images/unitregles.png);
	width:1460px;
	height:1000px;
	position:absolute;
	left:0%;
	top:0%;
	z-index:13;
	text-align:center;
display:block;
}
#home
{
background-image:url(images/home1.png);
	width:1570px;
	height:800px;
	position:absolute;
	left:60px;
	top:25px;
	z-index:20;
	text-align:center;
display:block;
}
#loading
{
background-color:black;
	width:1570px;
	height:800px;
	position:absolute;
	left:60px;
	top:25px;
	z-index:19;
	text-align:center;
display:none;
}
#intermenu
{
background-image:url(images/intermenu.png);
	width:1570px;
	height:800px;
	position:absolute;
	left:60px;
	top:25px;
	z-index:17;
	text-align:center;
display:none;
}
#charge
{
background-image:url(images/chargement.gif);
	width:800px;
	height:600px;
	position:absolute;
	left:400px;
	top:100px;
	z-index:1;
	text-align:center;
display:block;
}
#boutonmenu{
margin-top:2%;
	text-align:center;
	
	
	top:2%;
width:900px;
height:600px;

z-index:12;
display:inline-block;
}

#end
{
	

	width:1460px;
	height:1000px;
	position:absolute;
	left:0%;
	top:0%;
	z-index:19;
	text-align:center;
display:block;
	display:none;
	color:white;
	font-weight:bold;
	font-size:30px;
	
}
#rules
{
	background-color:#1e1e15;
	background-repeat:no-repeat;
	background-size:100%;
	width:100%;
	height:100%;
	position:absolute;
	left:0%;
	top:0%;
	z-index:19;
	display:none;
	
}

#bouton3{
top:85%;
}
#frise
{
background-image:url(images/frise.png);
	background-repeat:no-repeat;
	background-size:100%;
	width:1150px;
	height:850px;
	position:absolute;
	left:550px;
	top:0px;
z-index:10;
	margin:0px;
		display:none;
}
#arbreevolutif
{
background-color: black;
	background-repeat:no-repeat;
	background-size:100%;
	width:1150px;
	height:850px;
	position:absolute;
	left:550px;
	top:0px;
z-index:10;
	margin:0px;
		display:none;
}
#arbre
{
background-image:url(images/arbre.png);
	background-repeat:no-repeat;
	background-size:100%;
	width:1100px;
	height:800px;
	position:absolute;
	left:50px;
	top:25px;
z-index:11;
	margin:0px;
		
}

#board1
{
background-color: #ffe680;
	background-repeat:no-repeat;
	background-size:100%;
	width:1050px;
	height:750px;
	position:absolute;
	left:600px;
	top:50px;

z-index:2;
	margin:0px;
	
}
#boardtour
{
background-image:url(images/boardtour2.png);
	background-repeat:no-repeat;
	background-size:100%;
	width:1150px;
	height:850px;
	position:absolute;
	left:550px;
	top:0px;

z-index:1;
	margin:0px;
	border:solid 1px #2e2e1f;
	border-radius:10px;
	box-sizing: border-box;
}
#asteroide
{
background-image:url(images/asteroide.png);
	background-repeat:no-repeat;
	background-size:100%;
	width:1150px;
	height:850px;
	position:absolute;
	left:550px;
	top:0px;

z-index:10;
	margin:0px;
	display:none;
	border-radius:10px;
	
}
#masqueboard
{
background-color:green;
	display:none;
	background-repeat:no-repeat;
	background-size:100%;
	width:1475px;
	height:850px;
	position:absolute;
	left:225px;
	top:0px;
opacity:10%;
z-index:3;
	margin:0px;
	border:solid 1px #2e2e1f;
	border-radius:10px;
	box-sizing: border-box;
}

#load
{

background-image:url(images/load2.gif);

	width:75px;
	height:75px;
	
	z-index:1;
	position:absolute;
bottom:2px;
right:2px;


  
}

#masquecentre
{
background-color:transparent;
	width:500px;
	height:500px;
	position:absolute;
	left:300px;
	top:0px;
	z-index:7;
}
#fumee
{
background: rgb(203,203,203);
background: radial-gradient(circle, rgba(203,203,203,1) 0%, rgba(0,0,0,1) 70%, rgba(0,0,0,1) 100%);
	width:500px;
	height:500px;
	position:absolute;
	left:300px;
	top:0px;
	z-index:9;
	border-radius:10px;
	display:none;
}
#city1
{
	background-image:url(images/cityboard3.png);
	
	width:299px;
	height:500px;
	position:absolute;
	left:0px;
	top:0px;
	margin:0px;
opacity:15%;
z-index:5;
border:solid 1px 	#2e2e1f; box-sizing: border-box;
}
#city2
{
	background-image:url(images/cityboard2.png);
	
	width:297px;
	height:500px;
	position:absolute;
right:0px;
	top:0px;
	margin:0px;
opacity:15%;
z-index:5;
border:solid 1px 	#2e2e1f; box-sizing: border-box;
}
#cachecity1
{
	background-image:url(images/cachecity1.png);
	
	width:299px;
	height:500px;
	position:absolute;
left:0px;
	top:0px;
	margin:0px;
opacity:100%;
z-index:9;
border:solid 1px 	#2e2e1f; box-sizing: border-box;
display:none;
border-radius:10px;
}
#cachecity2
{
	background-image:url(images/cachecity2.png);
	
	width:297px;
	height:500px;
	position:absolute;
right:0px;
	top:0px;
	margin:0px;
opacity:100%;
z-index:9;
border:solid 1px 	#2e2e1f; box-sizing: border-box;
display:none;
border-radius:10px;
}

#masqueheader
{
background: rgb(23,23,23);
background: linear-gradient(90deg, rgba(23,23,23,1) 0%, rgba(47,0,0,1) 100%);
	width:1400px;
	height:110px;
	position:absolute;
	left:30px;
	top:30px;
	display:none;
z-index:6;
		font-size:40px;
		font-weight:bold;
		text-align:center;
		border:solid 4px 	black; box-sizing: border-box;
		border-radius:10px;
	color:#999999;
}

#gain
{
	background-image:url(images/gain2.png);   z-index:9; width:75px; height:75px; 
position:absolute; border:solid 2px 	black; box-sizing: border-box;
box-sizing: border-box; border-radius:50px; opacity:100%;
display:none;
}
#impact
{
	background-image:url(images/impact.png);   z-index:10; width:150px; height:150px; 
position:absolute; border:solid 1px 	#2e2e1f; 
box-sizing: border-box; opacity:100%;
border-radius:10px;
top:0px;
left:0px;
position:absolute;
display:none;
}

#animationcombat
{
	background-image:url(images/rencontre.png);   z-index:10; width:150px; height:150px; 
position:absolute; border:solid 1px 	#2e2e1f; 
box-sizing: border-box; opacity:100%;
border-radius:10px;
display:none;
}
#animationcombat2
{
	background-image:url(images/combat2.gif);   z-index:9; width:150px; height:150px; 
position:absolute; 
 opacity:100%;
display:none;
}
#animationexplore
{
	background-image:url(images/move.gif); z-index:8; width:150px; height:100px; 
position:absolute;  opacity:100%;
display:none;
}

.card
{background-image:url(images/soldat.png); border-radius:10px;position:absolute; top:200px; left:0px; z-index:6; width:75px; height:75px;}
.case
{background-image:url(images/casebase1.png);   z-index:5; width:100px; height:100px; position:absolute;  opacity:100%}

.card:hover {
filter: contrast(1.4);
cursor:pointer;
}



.champs {
	
	/*display:block;*/
	display:inline;
	
	
	width:40px;
	text-align:center;
	background-color:transparent;
	border:none;
		
	font-size:22px;
	margin-top:10px;
	
	
}

.champs:focus {
    outline: none;
}
.champclock {
	
	/*display:block;*/
	display:inline;
	
	font-family:Arial;

	
font-weight:bold;
	color:black;
	width:100px;
	text-align:center;
	background-color:transparent;
	border:none;
		
	font-size:22px;

	
	
}
.champclock:focus {
    outline: none;
}
.champsvictoire {
	
	/*display:block;*/
	display:inline;
	background-color:transparent;
	
	width:40px;
	text-align:center;
font-weight:bold;
	border:none;
		color:white;
	font-size:28px;

	
}
.champvictoire{
	
	/*display:block;*/
	display:inline;
	
	margin-left:3px;
	width:60px;
	height:60px;
	text-align:center;
	background-color:transparent;
	border:none;
		font-weight:bold;
	font-size:30px;
	
	color:#ffcc00;
	display:block;
	
}
.champsdata {
	
	/*display:block;*/
	display:inline;
	
	margin-left:45px;
	width:60px;
	text-align:center;
	background-color:transparent;
	border:none;
		font-weight:bold;
	font-size:32px;
	margin-top:20px;
	color:green;
	display:block;
	
}
.champsdata:focus {
    outline: none;
}
.champsvie {
	

	
	margin-top:100px;
	width:100px;
	text-align:center;
	background-color:transparent;
	border:none;
		font-weight:bold;
	font-size:30px;
	
	color:grey;
	
	
}
.champsvie:focus {
    outline: none;
}
.champso {
	

	display:inline;
	
	height:40px;
	width:50px;
	text-align:center;
	background-color:transparent;
	font-weight:bold;
	font-size:22px;
	margin-top:0px;
	margin-left:10px;
	border:solid 1px transparent;   
	box-sizing: border-box;
	padding-top:5px;
	
}
.champsxp {
	

	display:inline;
	
	height:40px;
	width:110px;
	text-align:center;
	background-color:#0099cc;
	font-weight:bold;
	font-size:24px;
	margin-top:153px;
	margin-left:10px;
	border:solid 1px white;   
	box-sizing: border-box;
	border-radius:10px;
	
}
.champsxp:focus {
    outline: none;
}
.champs2 {
	
	/*display:block;*/
	display:inline;
	margin-left:10px;
	color:white;
	width:100px;
	text-align:center;
	background-color:transparent;
	border:none;
	font-size:24px;
	margin-top:20px;
	
	
}

.champsally {
	
	/*display:block;*/
	display:inline;
	font-weight:bold;
	color:black;
	font-family:Arial;
	
	width:250px;
	text-align:center;
	background-color:transparent;
	border:none;
		
	font-size:22px;
	margin-top:12px;
	
	
}
#boutonhome{
	background-color:#ffcc00;
	border-radius:10px;
	border:3px solid black;
	display:block;
	cursor:pointer;
	color:black;
	font-family:Arial;
	font-size:20px;
	padding:5px 5px;
	font-weight:bold;
	top:5px;
	left:0px;
	width:200px;
	height:50px;
z-index:2;
		position:absolute;
}
#boutonhome:hover {
	background-color: green;
}
#boutonevolve{
	background-color:#000000;
	border-radius:10px;
	border:3px solid white;
	display:block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:17px;
	padding:5px 5px;
	font-weight:bold;
	bottom:5px;
	left:10px;
	width:180px;
	height:50px;
z-index:2;
		position:absolute;
}
#boutonevolve:hover {
	background-color: #990000;
}
.boutonback{
	background-color:#000000;
	border-radius:10px;
	border:3px solid white;
	display:block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:17px;
	padding:5px 5px;
	font-weight:bold;
	bottom:80px;
	left:10px;
	width:100px;
	height:40px;

		position:absolute;
}
.boutonback:hover {
	background-color: #990000;
}
#appliqueevolve{
	background-color:green;
	border-radius:10px;
	border:3px solid white;
	display:block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:17px;
	padding:5px 5px;
	font-weight:bold;
	bottom:5px;
	left:10px;
	width:180px;
	height:50px;
display:none;
z-index:3;
		position:absolute;
}
#appliqueevolve:hover {
	background-color: #990000;
}


.btn {
	background-color:#000000;
	border-radius:10px;
	border:3px solid white;
	display:block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:17px;
	padding:16px 31px;
	text-decoration:none;
	margin-top:5px;
	width:230px;
		margin:0 auto;
}
.btn:hover {
	background-color: #990000;
}
.btn2 {
font-weight:bold;
	background-color:#990000;
	border-radius:10px;
	border:3px solid white;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:14px;
	padding:10px 20px;
	margin-left:20px;
	text-decoration:none;
	margin-top:30px;
	width:100px;
}
.btn2:hover {
	background-color: #990000;
}


.btn2:focus {
	background-color:#00b300;
	
	
}
.btnstart {
	background-color:#000000;

	border:5px solid green;
	display:block;
	cursor:pointer;
	color:white;
	font-family:Arial;
	font-size:17px;
	padding:16px 31px;
	text-decoration:none;
	margin-top:30px;
	width:230px;
		margin:0 auto;
}
.btnstart:hover {
background-color: #00cc00;
}
.btnunit {
	background-color:#000000;
	border-radius:10px;
	border:3px solid white;
	display:block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:17px;
	padding:16px 31px;
	text-decoration:none;
	margin-top:20px;
	width:200px;
		margin-left:0px;
		display:inline;
}
.btnunit:hover {
	background-color: #0099cc;
}

.btn1 {	
font-weight:bold;
background-color:green;
	
	border-radius:10px;
	border:3px solid white;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:14px;
	padding:10px 20px;
	margin-left:135px;
	text-decoration:none;
	margin-top:-90px;
	width:100px;
	
}
.btn1:hover {
	background-color:#990000;
}
.btn1:focus {
	background-color:#00b300;
	
	
}


.btnheader {
	background-color:#000000;
	border-radius:10px;
	border:3px solid white;
	display:inline;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:17px;
	padding:16px 31px;
	text-decoration:none;
font-weight:bold;
	width:200px;
	height:100px;
		margin-left:60px;
}
.btnheader:hover {
	background-color: #990000;
}
.btnready {

}
.btnready:hover {
	background-color: green;
}


.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;
}
.btnscreen {
	background-color:#000000;
	border-radius:120px;
	border:2px solid white;
	display:inline;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:14px;

	
text-align:center;

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


.ClassName {
	text-decoration:none;
	font-family:Arial;
	background:#d9d9d9;
	
	text-indent:0px;
	line-height:145px;
	-moz-border-radius:100px;
	-webkit-border-radius:100px;
	border-radius:130px;
	text-align:center;
	vertical-align:middle;
	display:inline-block;
	font-size:26px;
	color:black;
	width:250px;
	height:250px;

	border-color:black;
	border-width:2px;
	border-style:solid;
	margin:auto;
	font-weight:bold;
}



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

.nodbl {

}





#bouton12
{
	position:absolute;
bottom:2%;
	left:35%;
	display:none;
}




.avancementhead
{  border:none;
display:inline;
   /* -moz-box-sizing: border-box;
         box-sizing: border-box;
		 */
    width:60px;
    height: 5px;
   /* padding: 1px 1px 1px 1px;*/
    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-radius: 15px;
    
	margin-left:20px;
	
}



#j1
{
	background-image:url(images/j1.png);
	

	width:200px;
	height:60px;

	text-align:center;
	font-size:20px;
		margin-left:0px;
			vertical-align: top;
	display:inline-block;
	border-radius:10px;
	   border: 1px solid black; 
	   box-sizing: border-box;
}
#j2
{
	background-image:url(images/j1.png);
	

	width:100px;
	height:100px;

	text-align:center;
	font-size:20px;
		margin-left:0px;
			vertical-align: top;
	display:inline-block;
	border-radius:10px;
	   border: 1px solid black; 
}
#upgrade
{
	background-color: #d9d9d9;

	width:200px;
	height:120px;
	vertical-align: top;
	text-align:center;
	font-size:20px;
		margin-left:50px;
		border:solid 1px;box-sizing: border-box;
	display:inline-block;
}







/*.opt
{
margin-left:40px;
	
}
.opt:hover {
	border-radius:0px;
	color:red;
	border-color:red;
}
*/
.container{
    width:100px;
    height:350px;
   
}

.attendance{
	width:90%;
    float:left;
	background-color:#1f1f1f;
	margin:7px 5% 5px 5%;
	padding-bottom:10px;
	border-style:solid;
	border-color: #111111 #4e4e4e #4e4e4e #111111;
	border-width:2px;
}

.attendance .title{
    font-family:"Arial";
	color:white;
	font-size:9pt;
    font-weight:bold;
	text-align:center;
	padding:15px 0px 5px 0px;
}

.attendance-bar{
    float:left;
	width:90%;
	margin:0px 5% 0px 5%;
	height:260px;
	background-color:#2f2f2f;
}

.attendance-cage-css{
	width:80px;
    float:left;
    background-color:#6ae719;
    height:5px;
    position: absolute;
    bottom: 20px;
    z-index: 1;
}

.bar-1,.bar-2,.bar-3,.bar-4,.bar-5,.bar-6{
	float:left;
	width:100%;
	background-color:#1f1f1f;
	height:10px;
    z-index: 2;
	margin-bottom:35px;
}





.attendance-level{
	float:left;
    height:100px;
	width:80px;
    z-index: 2;
    position: absolute;
    top:60px;
}
#changeatt, #changeatt:hover { 
    -moz-user-select: none; 
    -khtml-user-select: none; 
    -webkit-user-select: none; 
    -o-user-select: none;
    cursor: pointer;
}


#xpj
{
   color:#b30000;
}

#barreviej1
{	background-image:url(images/city1.png);
    width:100px;
    height:500px;
    position: absolute;
	left:30px;
	top:200px;
	border-radius:10px;
	border:1px solid #050505; 
	box-sizing: border-box;
	color:white;
	font-weight:bold;
	font-size:22px;
}
#barreviej2
{	background-image:url(images/city2.png);
    width:100px;
    height:500px;
    position: absolute;
	right:30px;
	top:200px;
	border-radius:10px;
	border:1px solid #050505; 
	box-sizing: border-box;
	color:white;
	font-weight:bold;
	font-size:22px;
}

.contient
{
	
}
#contient1
{
	background-image:url(images/contient1.png);
	border-radius:10px;
	border:2px solid ;

	width:300px;
	height:300px;
	 position: absolute;
	left:100px;
	top:100px;
	text-align:center;
	font-size:20px;
	font-weight:bold;
	z-index:3;
	
}
#contient2
{background-image:url(images/contient2.png);
	border-radius:10px;
	width:300px;
	height:300px;
	 position: absolute;
	right:100px;
	top:100px;
	text-align:center;
	font-size:20px;
	font-weight:bold;
	z-index:3;
	border:2px solid ;
}
#info1
{
	background-color:grey;
	border-radius:10px;
	border:2px solid ;
display:none;
	width:300px;
	height:450px;
	 position: absolute;
	left:100px;
	top:0px;
	text-align:center;
	font-size:20px;
	font-weight:bold;
	z-index:3;
	
	
}
#info2
{
	background-color:grey;
	border-radius:10px;
	border:2px solid ;
display:none;
	width:300px;
	height:450px;
	 position: absolute;
right:100px;
	top:0px;
	text-align:center;
	font-size:20px;
	font-weight:bold;
	z-index:3;

	
}
#boutonrefresh
{
		
		border-radius:100px;
	
		
	width:200px;
	height:200px;
	vertical-align: top;
	text-align:center;
	font-size:20px;
		font-weight:bold;
	margin-right:40px;
	margin-left:60px;
	z-index:3;
	display:inline;
}
#player
{
		
	margin-top:50px;
	width:80px;
	text-align:center;
	background-color:transparent;
	border:none;
		font-weight:bold;
	font-size:30px;
	
	color:black;
		
	
	
	z-index:3;
}
#countdown
{
		background-color:#cccccc;
	border-radius:100px;
	border:3px solid black;
			
	font-weight:bold;
	color:#ffffff;
	font-family:Arial;
	font-size:20px;
	padding-top:40px;
	text-align:center;

	width:100px;
	height:60px;
	margin-left:70px;
position:absolute;
left:280px;
top:0px;
	z-index:4;
	color:black;
		
	
	
	z-index:3;
}

#boutonrules
{
		background-color:black;
	border-radius:120px;
	border:3px solid white;
			color:white;
	cursor:pointer;
	
	font-family:Arial;
	font-size:30px;
	padding-top:34px;
	text-align:center;
font-weight:bold;
	width:100px;
	height:66px;
	
position:absolute;
right:0px;
top:0px;
	z-index:4;

		
	
	
	z-index:3;
}
#boutonrules:hover {
	background-color: #990000;
}

#boutonfight
{
		border-radius:100px;
	
		
	width:200px;
	height:200px;
	vertical-align: top;
	text-align:center;
	font-size:20px;
		font-weight:bold;
		
	position:absolute;
	left:630px;
	top:150px;
	
	z-index:3;
}

#boutonstart
{
		border-radius:500px;
	
		font-family:Arial;
	
	width:500px;
	height:500px;
	vertical-align: top;
	text-align:center;
	font-size:40px;
		font-weight:bold;
		
	position:absolute;
	left:535px;
	top:147px;
	
	z-index:3;
}

.back {
		
	background-color:#000000;
	border-radius:10px;
	border:3px solid white;
	display:block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:17px;
	padding:16px 31px;
	text-decoration:none;
	margin-top:20px;
	margin-left:20px;
	position:absolute;
	bottom:50px;
	left:600px;
	width:200px;
	vertical-align:top;
		
			
}
.back:hover {
	background-color:#990000;
}
.vitalite {

 background:blue;
 border:1px solid grey;
 border-radius: 15px;
    
	margin-left:20px;
	box-sizing: border-box;
    width:60px;
    height: 8px;
}
/*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: 700px 30px, 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;
  
}

*/
.vertical {
  display: inline-block;
  width: 20%;
  height: 40px;
  -webkit-transform: rotate(-90deg); /* Chrome, Safari, Opera */
  transform: rotate(-90deg);
}

progress {
  border-radius:10px; 
  width: 60px;
  height: 5px;
  margin-left: 20px;
  margin-top:4px;


}
progress::-webkit-progress-bar {
  background-color: black;
  border-radius: 10px;
}
progress::-webkit-progress-value {
  background-color: var(--c,#1e1e15);
  border-radius: 10px;
  
}
progress::-moz-progress-bar {
 background-color: black;
  border-radius: 10px;
}



#zooming
{
		background-color:transparent;
	text-align:center;
	width:100px;
	height:160px;
	color:white;

margin-top:10px;
margin-left:800px;
	z-index:21;
	font-size:14px;
	
}
#enlarge
{
		background-color:transparent;
	text-align:center;
	width:100px;
	height:90px;
	color:white;

display:block;
	z-index:21;
	font-size:14px;
	
}
.lotus
{
background-image:url(images/lotus2.png); 
border-radius:10px;
position:absolute; 
top:0px; left:0px; 
z-index:7; 
width:100px; 
height:100px;
display:none;
}
.arbre
{
background-image:url(images/mur2.png); 
border-radius:10px;
position:absolute; 
top:0px; left:0px; 
z-index:7; 
width:100px; 
height:100px;
display:none;
}


#timer {
	background-color:#cccccc;
	border-radius:150px;
	border:2px solid black;
	display:inline;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:17px;
	
font-weight:bold;
	width:100px;
	height:100px;
	margin-left:70px;
		
}


.invisi
{
	display:none;
}

#encadre
{display:none;
		background-color:red;
		top:0px;
		left:0px;
		position:absolute;
	width:100px;
	height:100px;
	z-index:8;
	border-radius:100px;
opacity:20%;

}
.options {
	

	display:inline-block;
	
	height:100px;
	width:300px;
	
	background-color:transparent;
	font-weight:bold;
	font-size:24px;
	margin-top:30px;
	margin-left:0px;
	padding-left:20px;
	border-radius:10px;
	
}
.options:hover {
  filter: contrast(1.4);
}
.prixoptions {
	
background-image:url(images/prixoptions.png); 
	display:inline-block;
	
	height:40px;
	width:150px;
	
	
	font-weight:bold;
	font-size:24px;
	margin-top:20px;
	margin-left:0px;
	
	border-radius:10px;
	
}