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

body
{
background-color:black;
}

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

background-color:#1e1e15;

	width:1700px;
	height:900px;
	
	z-index:1;
	position:absolute;
top:3%;
left:7%;
  border:solid 2px;

  
}
#endgame
{

background-image:url(images/victoirej1.png);

	width:400px;
	height:400px;
	
	z-index:1;
	position:absolute;
top:350px;
left:1000px;
 
}
#end
{
background-image:url(images/end.png);
background-color:#1e1e15;

	width:1700px;
	height:900px;
	
	z-index:20;
	position:absolute;
top:3%;
left:7%;
  border:solid 2px;
display:none;
  
}
#home
{
background-image:url(images/home.png);

	width:1700px;
	height:900px;
	
	z-index:23;
	position:absolute;
top:0%;
left:0%;
  border:solid 2px;

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

	width:1700px;
	height:900px;
	
	z-index:21;
	position:absolute;
top:0%;
left:0%;
  border:solid 2px;

  
}

#boutonmenu
{

	width:400px;
	height:900px;
	
	z-index:1;
	position:absolute;
top:0px;
left:650px;
 
}

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

	width:1700px;
	height:900px;
	
	z-index:22;
	position:absolute;
top:0%;
left:0%;
  border:solid 2px;
display:none;
  
}



#stats1
{
	background-image:url(images/iconestatscrea1.png);
background-size: 50px 50px;
background-color:blue;
	width:50px;
	height:50px;	
	z-index:11;
	margin-top:10px;
	margin-left:0px;
  border:solid 3px #258e25;
  border-radius:50px; 
display:inline-block;
}

#stats2
{background-image:url(images/iconestatscrea2.png);
background-size: 50px 50px;
background-color:blue;
	width:50px;
	height:50px;	
	z-index:11;
	margin-top:10px;
	margin-left:15px;
  border:solid 3px #258e25;
  border-radius:50px; 
display:inline-block;
}
#stats3
{background-image:url(images/iconestatscrea3.png);
background-size: 50px 50px;
background-color:blue;
	width:50px;
	height:50px;	
	z-index:11;
	margin-top:10px;
	margin-left:15px;
  border:solid 3px #258e25;
  border-radius:50px; 
display:inline-block;
}

#stats4
{background-image:url(images/iconestatscrea4.png);
background-size: 50px 50px;
background-color:blue;
	width:50px;
	height:50px;	
	z-index:11;
	margin-top:10px;
	margin-left:0px;
  border:solid 3px #258e25;
  border-radius:50px; 
display:inline-block;
}
#stats5
{background-image:url(images/iconestatscrea5.png);
background-size: 50px 50px;
background-color:blue;
	width:50px;
	height:50px;	
	z-index:11;
	margin-top:10px;
	margin-left:15px;
  border:solid 3px #258e25;
  border-radius:50px; 
display:inline-block;
}
#stats6
{background-image:url(images/iconestatscrea6.png);
background-size: 50px 50px;
background-color:blue;
	width:50px;
	height:50px;	
	z-index:11;
	margin-top:10px;
	margin-left:15px;
  border:solid 3px #258e25;
  border-radius:50px; 
display:inline-block;
}
#stats7
{background-image:url(images/iconestatscrea7.png);
background-size: 50px 50px;
background-color:blue;
	width:50px;
	height:50px;	
	z-index:11;
	margin-top:10px;
	margin-left:15px;
  border:solid 3px #258e25;
  border-radius:50px; 
display:inline-block;
}
#stats8
{background-image:url(images/iconestatscrea8.png);
background-size: 50px 50px;
background-color:blue;
	width:50px;
	height:50px;	
	z-index:11;
	margin-top:10px;
	margin-left:15px;
  border:solid 3px #258e25;
  border-radius:50px; 
display:inline-block;
}
#stats
{
background-color:#ffdb4d;
	width:260px;
	height:215px;
	position:absolute;
	left:0%;
	top:280px;
	z-index:10;
  border:solid 3px black;
  border-radius:30px; 
display:block;	
}

#lockstats
{background-image:url(images/lockstats.png);
background-size: 260px 60px;
background-color:#ffdb4d;
	width:260px;
	height:60px;
	position:absolute;
	left:1px;
	top:150px;
	z-index:12;
  
  border-radius:30px; 
display:block;	
}


#statistiques
{background-image:url(images/statistiques.png);
background-size: 260px 360px;
background-color:#ff9900;
	width:260px;
	height:360px;
	position:absolute;
	left:0%;
	top:520px;
	z-index:10;
	text-align:center;
display:block;
	border-radius:30px;
	  border:solid 3px;
	 
	background-size:260px 360px;
}

#board1
{
background-color:#ffe680;
	background-repeat:no-repeat;
	background-size:100%;
	width:1400px;
	height:900px;
	position:absolute;
	left:300px;
	top:0px;
z-index:2;

	margin:0px;
	border:solid 1px #2e2e1f;
	border-radius:50px;
	box-sizing: border-box;
}

#campj1
{
background-color:green;
	background-repeat:no-repeat;
	background-size:100%;
	width:250px;
	height:900px;
	position:absolute;
	left:0px;
	top:0px;
z-index:1;
opacity:20%;
	margin:0px;
	border:solid 1px #2e2e1f;
	border-radius:50px;
	box-sizing: border-box;
}
#campj2
{
background-color:green;
	background-repeat:no-repeat;
	background-size:100%;
	width:250px;
	height:900px;
	position:absolute;
	right:0px;
	top:0px;
z-index:1;
opacity:20%;
	margin:0px;
	border:solid 1px #2e2e1f;
	border-radius:50px;
	box-sizing: border-box;
}


#camp1
{
	background-image:url(images/camps.png);
background-size: 76px 76px;
background-color:red;
	width:76px;
	height:76px;
background-size: 76px 76px;	
	z-index:9;
	position:absolute;
top:70px;
left:105px;
  border:solid 2px #ff9900;
  border-radius:100px; 
 
}

#camp2
{
	background-image:url(images/camps.png);
background-size: 76px 76px;
background-color:red;
		width:76px;
	height:76px;
background-size: 76px 76px;		
	z-index:9;
	position:absolute;
top:412px;
left:65px;
  border:solid 2px #ff9900;
  border-radius:100px; 

}

#camp3
{
	background-image:url(images/camps.png);
background-size: 76px 76px;
background-color:red;
		width:76px;
	height:76px;
background-size: 76px 76px;		
	z-index:9;
	position:absolute;
bottom:70px;
left:105px;
  border:solid 2px #ff9900;
  border-radius:100px; 

}


#camp11
{
	background-image:url(images/camps.png);
background-size: 76px 76px;
background-color:red;
		width:76px;
	height:76px;
background-size: 76px 76px;		
	z-index:9;
	position:absolute;
top:70px;
right:105px;
  border:solid 2px #ff9900;
  border-radius:100px;

}

#camp12
{
	background-image:url(images/camps.png);
background-size: 76px 76px;
background-color:red;
		width:76px;
	height:76px;
background-size: 76px 76px;		
	z-index:9;
	position:absolute;
top:412px;
right:65px;
  border:solid 2px #ff9900;
  border-radius:100px; 

}

#camp13
{
	background-image:url(images/camps.png);
background-size: 76px 76px;
background-color:red;
		width:76px;
	height:76px;
background-size: 76px 76px;		
	z-index:9;
	position:absolute;
bottom:70px;
right:105px;
  border:solid 2px #ff9900;
  border-radius:100px; 

}

#masquecamp1
{
background-color:transparent;
		width:76px;
	height:76px;
background-size: 76px 76px;		
	z-index:10;
	position:absolute;
top:70px;
left:105px;
  border:solid 2px grey;
  border-radius:100px; 
    display:none;
}
#masquecamp2
{
background-color:transparent;
		width:76px;
	height:76px;
background-size: 76px 76px;		
	z-index:10;
	position:absolute;
top:412px;
left:65px;
  border:solid 2px grey;
  border-radius:100px; 
    display:none;
}
#masquecamp3
{
background-color:transparent;
		width:76px;
	height:76px;
background-size: 76px 76px;		
	z-index:10;
	position:absolute;
bottom:70px;
left:105px;
  border:solid 2px grey;
  border-radius:100px; 
    display:none;
}
#masquecamp11
{
background-color:transparent;
		width:76px;
	height:76px;
background-size: 76px 76px;		
	z-index:10;
	position:absolute;
top:70px;
right:105px;
  border:solid 2px grey;
  border-radius:100px; 
    display:none;
}
#masquecamp12
{
background-color:transparent;
		width:76px;
	height:76px;
background-size: 76px 76px;		
	z-index:10;
	position:absolute;
top:412px;
right:65px;
  border:solid 2px grey;
  border-radius:100px; 
    display:none;
}
#masquecamp13
{
background-color:transparent;
		width:76px;
	height:76px;
background-size: 76px 76px;		
	z-index:10;
	position:absolute;
bottom:70px;
right:105px;
  border:solid 2px grey;
  border-radius:100px; 
  display:none;
}




#timercamp1
{
		background-image:url(images/recast.png);
background-size: 76px 76px;
background-color:black;
		width:76px;
	height:76px;
background-size: 76px 76px;		
	z-index:12;
	position:absolute;
top:70px;
left:105px;
  border:solid 3px black;
  border-radius:100px; 
    display:none;
}
#timercamp2
{
		background-image:url(images/recast.png);
background-size: 76px 76px;
background-color:black;
		width:76px;
	height:76px;
background-size: 76px 76px;		
	z-index:12;
	position:absolute;
top:412px;
left:65px;
   border:solid 3px black;
  border-radius:100px; 
    display:none;
}
#timercamp3
{
		background-image:url(images/recast.png);
background-size: 76px 76px;
background-color:black;
		width:76px;
	height:76px;
background-size: 76px 76px;		
	z-index:12;
	position:absolute;
bottom:70px;
left:105px;
    border:solid 3px black;
  border-radius:100px; 
    display:none;
}
#timercamp11
{
		background-image:url(images/recast.png);
background-size: 76px 76px;
background-color:black;
	width:76px;
	height:76px;
background-size: 76px 76px;		
	z-index:12;
	position:absolute;
top:70px;
right:105px;
  border:solid 3px black;
  border-radius:100px; 
    display:none;
}
#timercamp12
{
		background-image:url(images/recast.png);
background-size: 76px 76px;
background-color:black;
		width:76px;
	height:76px;
background-size: 76px 76px;		
	z-index:12;
	position:absolute;
top:412px;
right:65px;
   border:solid 3px black;
  border-radius:100px; 
    display:none;
}
#timercamp13
{
		background-image:url(images/recast.png);
background-size: 76px 76px;
background-color:black;
		width:76px;
	height:76px;
background-size: 76px 76px;		
	z-index:12;
	position:absolute;
bottom:70px;
right:105px;
  border:solid 3px black;
  border-radius:100px; 
    display:none;
}










#crea1
{
background-image:url(images/iconecrea1.png);
background-size: 50px 50px;
background-color:green;
	width:50px;
	height:50px;	
	z-index:11;
	position:absolute;
top:200px;
left:200px;
  border:solid 3px #258e25;
  border-radius:100px;
  display:none;
}

#crea2
{
background-image:url(images/iconecrea2.png);
background-size: 50px 50px;
background-color:red;

	width:50px;
	height:50px;
	
	z-index:11;
	position:absolute;
top:200px;
left:200px;
  border:solid 3px #258e25;
  border-radius:100px;
  display:none;
}
#crea3
{
background-image:url(images/iconecrea3.png);
background-size: 50px 50px;
background-color:green;

	width:50px;
	height:50px;
	
	z-index:11;
	position:absolute;
top:200px;
left:200px;
  border:solid 3px #258e25;
  border-radius:100px;
  display:none;
}

#crea4
{
	background-image:url(images/iconecrea4.png);
background-size: 50px 50px;
background-color:green;
	width:50px;
	height:50px;	
	z-index:11;
	position:absolute;
top:200px;
left:200px;
  border:solid 3px #258e25;
  border-radius:100px;
  display:none;
}

#crea5
{
background-image:url(images/iconecrea5.png);
background-size: 50px 50px;
background-color:red;

	width:50px;
	height:50px;
	
	z-index:11;
	position:absolute;
top:200px;
left:200px;
  border:solid 3px #258e25;
  border-radius:100px;
  display:none;
}
#crea6
{
background-image:url(images/iconecrea6.png);
background-size: 50px 50px;
background-color:green;

	width:50px;
	height:50px;
	
	z-index:11;
	position:absolute;
top:200px;
left:200px;
  border:solid 3px #258e25;
  border-radius:100px;
  display:none;
}
#crea7
{
background-image:url(images/iconecrea7.png);
background-size: 50px 50px;
background-color:green;

	width:50px;
	height:50px;
	
	z-index:11;
	position:absolute;
top:200px;
left:200px;
  border:solid 3px #258e25;
  border-radius:100px;
  display:none;
}
#crea8
{
background-image:url(images/iconecrea8.png);
background-size: 50px 50px;
background-color:green;

	width:50px;
	height:50px;
	
	z-index:11;
	position:absolute;
top:200px;
left:200px;
  border:solid 3px #258e25;
  border-radius:100px;
  display:none;
}

#crea11
{
	background-image:url(images/iconecrea1.png);
background-size: 50px 50px;
background-color:green;
	width:50px;
	height:50px;	
	z-index:11;
	position:absolute;
top:200px;
left:200px;
  border:solid 3px #b8b894;
  border-radius:100px;
  display:none;
}
#crea12
{	background-image:url(images/iconecrea2.png);
background-size: 50px 50px;
background-color:red;
	width:50px;
	height:50px;	
	z-index:11;
	position:absolute;
top:200px;
left:200px;
  border:solid 3px #b8b894;
  border-radius:100px;
  display:none;
}
#crea13
{	background-image:url(images/iconecrea3.png);
background-size: 50px 50px;
background-color:green;
	width:50px;
	height:50px;	
	z-index:11;
	position:absolute;
top:200px;
left:200px;
  border:solid 3px #b8b894;
  border-radius:100px;
  display:none;
}

#crea14
{	background-image:url(images/iconecrea4.png);
background-size: 50px 50px;
background-color:green;
	width:50px;
	height:50px;	
	z-index:11;
	position:absolute;
top:200px;
left:200px;
  border:solid 3px #b8b894;
  border-radius:100px;
  display:none;
}
#crea15
{	background-image:url(images/iconecrea5.png);
background-size: 50px 50px;
background-color:red;
	width:50px;
	height:50px;	
	z-index:11;
	position:absolute;
top:200px;
left:200px;
  border:solid 3px #b8b894;
  border-radius:100px;
  display:none;
}
#crea16
{	background-image:url(images/iconecrea6.png);
background-size: 50px 50px;
background-color:green;
	width:50px;
	height:50px;	
	z-index:11;
	position:absolute;
top:200px;
left:200px;
  border:solid 3px #b8b894;
  border-radius:100px;
  display:none;
}
#crea17
{
	background-image:url(images/iconecrea7.png);
background-size: 50px 50px;
background-color:green;
	width:50px;
	height:50px;	
	z-index:11;
	position:absolute;
top:200px;
left:200px;
  border:solid 3px #b8b894;
  border-radius:100px;
  display:none;
}
#crea18
{
	background-image:url(images/iconecrea8.png);
background-size: 50px 50px;
background-color:green;
	width:50px;
	height:50px;	
	z-index:11;
	position:absolute;
top:200px;
left:200px;
  border:solid 3px #b8b894;
  border-radius:100px;
  display:none;
}


#lockcrea6
{
background-image:url(images/locked.png);
background-size: 50px 50px;
background-color:green;
  display:none;
	width:50px;
	height:50px;
	
	z-index:13;
	position:absolute;
top:200px;
left:200px;
  border:solid 3px #258e25;
  border-radius:100px;  
}
#lockcrea7
{
background-image:url(images/locked.png);
background-size: 50px 50px;
background-color:green;
  display:none;
	width:50px;
	height:50px;
	
	z-index:13;
	position:absolute;
top:200px;
left:200px;
  border:solid 3px #258e25;
  border-radius:100px;  
}
#lockcrea8
{
background-image:url(images/locked.png);
background-size: 50px 50px;
background-color:green;

	width:50px;
	height:50px;
	
	z-index:13;
	position:absolute;
top:200px;
left:200px;
  border:solid 3px #258e25;
  border-radius:100px;  
  display:none;
}

#lockcrea16
{
background-image:url(images/locked.png);
background-size: 50px 50px;
background-color:green;
  display:none;
	width:50px;
	height:50px;
	
	z-index:13;
	position:absolute;
top:200px;
left:200px;
  border:solid 3px #258e25;
  border-radius:100px;  
}
#lockcrea17
{
background-image:url(images/locked.png);
background-size: 50px 50px;
background-color:green;
  display:none;
	width:50px;
	height:50px;
	
	z-index:13;
	position:absolute;
top:200px;
left:200px;
  border:solid 3px #258e25;
  border-radius:100px;  
}
#lockcrea18
{
background-image:url(images/locked.png);
background-size: 50px 50px;
background-color:green;
  display:none;
	width:50px;
	height:50px;
	
	z-index:13;
	position:absolute;
top:200px;
left:200px;
  border:solid 3px #258e25;
  border-radius:100px;  
}



#ressource1
{background-image:url(images/ressource.png);background-size: 50px 50px;
background-color:yellow;
	width:50px;
	height:50px;	
	z-index:11;
	position:absolute;
top:200px;
left:200px;
  border:solid 3px;
  border-radius:100px;
  display:none;
}

#ressource2
{background-image:url(images/ressource.png);background-size: 50px 50px;
background-color:yellow;
	width:50px;
	height:50px;	
	z-index:11;
	position:absolute;
top:200px;
left:200px;
  border:solid 3px;
  border-radius:100px;
  display:none;
}




#direction1
{
	background-image:url(images/arrow.png);
background-size: 100px 30px;
	width:100px;
	height:30px;
	z-index:8;
	position:absolute;
top:200px;
left:200px;
 
}
#direction2
{background-size: 100px 30px;
	background-image:url(images/arrow.png);
	width:100px;
	height:30px;
	z-index:8;
	position:absolute;
top:200px;
left:200px;

}
#direction3
{background-size: 100px 30px;
	background-image:url(images/arrow.png);
	width:100px;
	height:30px;
	z-index:8;
	position:absolute;
top:200px;
left:200px;

}
#direction4
{background-size: 100px 30px;
	background-image:url(images/arrow.png);
	width:100px;
	height:30px;
	z-index:8;
	position:absolute;
top:200px;
left:200px;

}
#direction5
{background-size: 100px 30px;
	background-image:url(images/arrow.png);
	width:100px;
	height:30px;
	z-index:8;
	position:absolute;
top:200px;
left:200px;

}
#direction11
{
	background-image:url(images/arrow.png);
background-size: 100px 30px;
	width:100px;
	height:30px;
	z-index:8;
	position:absolute;
top:200px;
left:200px;

}
#direction12
{
	background-image:url(images/arrow.png);
background-size: 100px 30px;
	width:100px;
	height:30px;
	z-index:8;
	position:absolute;
top:200px;
left:200px;

}
#direction13
{
	background-image:url(images/arrow.png);
background-size: 100px 30px;
	width:100px;
	height:30px;
	z-index:8;
	position:absolute;
top:200px;
left:200px;

}
#direction14
{
	background-image:url(images/arrow.png);
background-size: 100px 30px;
	width:100px;
	height:30px;
	z-index:8;
	position:absolute;
top:200px;
left:200px;

}
#direction15
{
	background-image:url(images/arrow.png);
background-size: 100px 30px;
	width:100px;
	height:30px;
	z-index:8;
	position:absolute;
top:200px;
left:200px;

}
#range
{
background-color:transparent;
	width:100px;
	height:100px;
	z-index:2;
	position:absolute;
top:200px;
left:200px;
border-radius:1000px;
	border:2px solid red;
	display:none;
}

#goldj1
{
margin-left:-40px;
}
#goldj2
{
margin-left:65px;
color:#808080;
}


#viecityj1
{
margin-left:0px;
}
#viecityj2
{
margin-left:60px;
color:#808080;
}














#boutonstartgame {	
font-weight:bold;
	background-color:#ff9900;
	border-radius:10px;
	border:3px solid white;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:28px;
	padding:16px 31px;
	z-index:4;
	margin-top:30px;
	width:1280px;
	height:80px;
	display:none;
	position:absolute;
	bottom:10px;
	left:10px;
}
#boutonstartgame:hover {
	background-color:green;
}





#interjoueur
{
	background-image:url(images/interjoueur.png);
	background-color:#ff9900;
	width:1300px;
	height:800px;
	position:absolute;
	left:0%;
	top:0%;
	z-index:9;
	text-align:center;
display:block;
}










#control
{
background-color:#ff9900;
	width:265px;
	height:900px;
	position:absolute;
	left:0%;
	top:0%;
	z-index:10;
	text-align:center;
display:block;
	border-radius:10px;
}



#rules1
{
	background-image:url(images/rules1.png);
		width:1700px;
	height:900px;
	position:absolute;
	left:0%;
	top:0%;
	z-index:15;
	text-align:center;
display:block;
}
#rules2
{
	background-image:url(images/rules2.png);
		width:1700px;
	height:900px;
	position:absolute;
	left:0%;
	top:0%;
	z-index:14;
	text-align:center;
display:block;
}
#rules3
{
	background-image:url(images/rules3.png);
		width:1700px;
	height:900px;
	position:absolute;
	left:0%;
	top:0%;
	z-index:13;
	text-align:center;
display:block;
}
#rules4
{
	background-image:url(images/rules4.png);
		width:1700px;
	height:900px;
	position:absolute;
	left:0%;
	top:0%;
	z-index:12;
	text-align:center;
display:block;
}
#rules5
{
	background-image:url(images/rules5.png);
		width:1700px;
	height:900px;
	position:absolute;
	left:0%;
	top:0%;
	z-index:11;
	text-align:center;
display:block;
}
#rules6
{
	background-image:url(images/rules6.png);
		width:1700px;
	height:900px;
	position:absolute;
	left:0%;
	top:0%;
	z-index:10;
	text-align:center;
display:block;
}
#rules7
{
	background-image:url(images/rules7.png);
		width:1700px;
	height:900px;
	position:absolute;
	left:0%;
	top:0%;
	z-index:9;
	text-align:center;
display:block;
}
#rules8
{
	background-image:url(images/rules8.png);
		width:1700px;
	height:900px;
	position:absolute;
	left:0%;
	top:0%;
	z-index:8;
	text-align:center;
display:block;
}
#rules9
{
	background-image:url(images/rules9.png);
		width:1700px;
	height:900px;
	position:absolute;
	left:0%;
	top:0%;
	z-index:7;
	text-align:center;
display:block;
}
#rules10
{
	background-image:url(images/rules10.png);
		width:1700px;
	height:900px;
	position:absolute;
	left:0%;
	top:0%;
	z-index:6;
	text-align:center;
display:block;
}
#rules11
{
	background-image:url(images/rules11.png);
		width:1700px;
	height:900px;
	position:absolute;
	left:0%;
	top:0%;
	z-index:5;
	text-align:center;
display:block;
}
#rules
{
		background-color:#ffd633;
	background-repeat:no-repeat;
	background-size:100%;
	width:1700px;
	height:900px;
	position:absolute;
	left:0%;
	top:0%;
	z-index:22;
	display:none;
	
}





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



#header
{
		background-image:url(images/header.png);
background-color:#ff9900;
	background-repeat:no-repeat;
	background-size:100%;
	width:200px;
	height:100px;
	position:absolute;
	left:0px;
	top:0px;
	display:block;
z-index:2;
	font-weight:bold;
	text-align:center;
color:black;
		
}



#data
{	background-image:url(images/data.png);
background-size: 260px 100px;	
background-color:#ffdb4d;
	background-repeat:no-repeat;
	background-size:100%;
	width:260px;
	height:100px;
	position:absolute;
	left:0px;
	top:20px;
	display:block;
z-index:5;
	
 border-radius:30px; 
border:3px solid ;
	color:black;
	font-size:34px;
	font-weight:bold;
	font-family: Verdana, Arial, Helvetica, sans-serif;	
}


#cities
{		
background-image:url(images/cities.png);
background-size: 260px 100px;	
background-color:#ffdb4d;
	background-repeat:no-repeat;
	background-size:100%;
	width:260px;
	height:100px;
	position:absolute;
	left:0px;
	top:150px;
	display:block;
z-index:5;
	 border-radius:30px; 
border:3px solid black;
	text-align:center;

	color:#ffff4d;
	font-size:34px;
	font-weight:bold;
	font-family: Verdana, Arial, Helvetica, sans-serif;	
}



.card
{background-image:url(images/creature1.png);background-color:transparent; background-size: 76px 76px; border-radius:0px;position:absolute; top:200px; left:0px; z-index:10; width:76px; height:76px;}
.card:hover {
filter: contrast(1.4);
}
.case
{background-color:transparent; border-radius:10px; z-index:3; width:100px; height:100px; position:absolute; border:solid 1px 	#f5f5ef; box-sizing: border-box; opacity:30%}



.portee
{background-color:transparent; display:none; border-radius:1000px;position:absolute; top:100px; left:0px; z-index:7; width:100px; height:100px; opacity:30%;}


.impact
{background-image:url(images/impact.png);background-size: 76px 76px;background-color:green;  border-radius:1000px;position:absolute; top:0px; left:0px; z-index:11; width:76px; height:76px;}

.champsgold {
	
	/*display:block;*/
	display:inline;
	
	margin-top:30px;
	margin-left:0px;
	width:40px;
	height:40px;
	text-align:center;
	background-color:transparent;
	border:none;
		color:black;
	font-size:34px;
	font-weight:bold;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	
}
.champsname {
	
	/*display:block;*/
	display:inline;
	
	position:absolute;
	top:125px;
	left:10px;
	width:230px;
	height:50px;
	text-align:center;
	background-color:transparent;
	border:none;
		color:#334d4d;
	font-size:16px;
	font-weight:bold;
	
	
}
.champcity {
	
	/*display:block;*/
	display:inline;
	
	margin-top:60px;
	margin-left:0px;
	width:80px;
	height:40px;
	text-align:center;
	background-color:transparent;
	border:none;
		color:black;
	font-size:34px;
	font-weight:bold;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	
}


.btn {
	background-color:#ff9900;
	border-radius:10px;
	border:3px solid black;
	display:block;
	cursor:pointer;
	color:black;
	font-weight:bold;
	font-family:Arial;
	font-size:17px;
	padding:16px 31px;
	text-decoration:none;
	margin-top:30px;
	width:230px;
		margin:0 auto;
}
.btn:hover {
	background-color: #e65c00;
}
.btn2 {
	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;
	
	width:200px;
		margin:0 auto;
}
.btn2:hover {
	background-color: #990000;
}


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


.btnstart {
	background-color:#000000;

	border:1px solid black;
	display:block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:17px;
	padding:16px 31px;
	text-decoration:none;
	margin-top:30px;
	width:230px;
		margin:0 auto;
}
.btnstart:hover {
	background-color: #990000;
}



.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;
}


.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);
}










.avancementhead
{  border:none;
display:inline;
   /* -moz-box-sizing: border-box;
         box-sizing: border-box;
		 */
    width:45px;
    height: 4px;
   /* 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: 10px;
    margin-top:77px;
	margin-left:15px;
	
}


.opt
{
background-color:#ffd633;
	width:100px;
	height:100px;
	margin-top:10px;
	margin-left:4px;
	z-index:1;
	text-align:center;
display:inline-block;
border-radius:10px;
	border:solid 2px black; box-sizing: border-box;
	background-size: 100px 100px;
	
}
.opt:hover {
	border-radius:100px;
	color:red;
	border-color:green;
}


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

progress {
  border-radius:10px; 
  width: 45px;
  height: 4px;
  margin-left: 15px;
  margin-top:77px;


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



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


	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;
	
}



/* Tooltip text */
.optxp .tooltiptext {
  visibility: hidden;
  width: 200px;
  height:200px;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 10px 0;
  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;
  z-index: 10;
}

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