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

body
{
background-color:black;
}

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

background-color:#1e1e15;

	width:1300px;
	height:800px;
	
	z-index:1;
	position:absolute;
top:3%;
left:8%;
  border:solid 2px;

  
}


#creationteam
{background-image:url(images/fondmenucrea.png); 
background-color:#ffd633;

	width:1300px;
	height:800px;	
	z-index:12;
	position:absolute;
  
  display:none;
}
#teamcree
{ 
background-color:#ffdb4d;

	width:1300px;
	height:800px;	
	z-index:11;
	position:absolute;


}



#menujoueurs
{
background-color:#ffdb4d;

	width:1300px;
	height:800px;	
	z-index:17;
	position:absolute;
  

}
#interimage
{
background-image:url(images/interimage.png); 
top:200px;
left:500px;
	width:300px;
	height:400px;	
	z-index:1;
	position:absolute;
 border-radius:20px;
	border:solid 1px black; box-sizing: border-box;  
background-size:300px 400px;
display:none;
}


#interj1
{
background-image:url(images/cadrejoueur1.png); 
top:100px;
left:10px;
	width:400px;
	height:600px;	
	z-index:1;
	position:absolute;
 border-radius:10px;
	border:solid 1px black; box-sizing: border-box;  

}
#masquejoueur1
{
background-color:black;
top:100px;
left:10px;
	width:400px;
	height:600px;	
	z-index:2;
	position:absolute;
  border:solid 1px;  
opacity:50%;
display:none;
}
#masquejoueur2
{
background-color:black;
top:100px;
right:10px;
	width:400px;
	height:600px;	
	z-index:2;
	position:absolute;
  border:solid 1px;  
opacity:50%;
display:none;
}
#interj2
{
background-image:url(images/cadrejoueur2.png); 
top:100px;
right:10px;
	width:400px;
	height:600px;	
	z-index:1;
	position:absolute;
 border-radius:10px;
	border:solid 1px black; box-sizing: border-box; 

}

#team1
{
background-color:#ff9900;
top:10px;
left:10px;
	width:400px;
	height:680px;	
	z-index:1;
	position:absolute;
  border:solid 1px;  
  border-radius:10px;
    text-align:center;

}
#masqueteam1
{
background-color:green;
top:10px;
left:10px;
	width:400px;
	height:680px;	
	z-index:2;
	position:absolute;
  border:solid 1px;  
  opacity:50%;
  display:none;
  font-family:Arial;
	font-size:28px;
	text-align:center;
	  border-radius:10px;

}

#team2
{
background-color:#ff9900;
top:10px;
right:10px;
	width:400px;
height:680px;	
	z-index:1;
	position:absolute;
  border:solid 1px;  
  border-radius:10px;
  text-align:center;

}
#masqueteam2
{
background-color:green;
top:10px;
right:10px;
	width:400px;
height:680px;	
	z-index:2;
	position:absolute;
  border:solid 1px;  
 opacity:50%;
   display:none;
    font-family:Arial;
	font-size:28px;
	text-align:center;
	  border-radius:10px;
}
#maps
{
background-color:#ff9900;
top:10px;
left:450px;
	width:400px;
	height:680px;	
	z-index:1;
	position:absolute;
  border:solid 1px;  
  border-radius:10px;
    text-align:center;

}
#masquemaps
{
background-color:green;
top:10px;
left:450px;
	width:400px;
	height:680px;	
	z-index:2;
	position:absolute;
  border:solid 1px;  
  opacity:50%;
  display:none;
  font-family:Arial;
	font-size:28px;
	text-align:center;
	  border-radius:10px;

}
#choixteam1
{
background-image:url(images/team1.png);
top:50px;
right:50px;
	width:300px;
	height:100px;	
	z-index:1;
	position:absolute;
 border-radius:10px;
	border:solid 1px black; box-sizing: border-box; 
	background-size:300px 100px;
cursor:pointer;	
}
#choixteam1:hover {
filter: contrast(1.4);
}
#choixteam2
{
background-image:url(images/team2.png);
top:180px;
right:50px;
	width:300px;
	height:100px;	
	z-index:1;
	position:absolute;
 border-radius:10px;
	border:solid 1px black; box-sizing: border-box; 
	background-size:300px 100px;
cursor:pointer;	
}
#choixteam2:hover {
filter: contrast(1.4);
}
#choixteam3
{
background-image:url(images/team3.png);
top:310px;
right:50px;
	width:300px;
	height:100px;	
	z-index:1;
	position:absolute;
 border-radius:10px;
	border:solid 1px black; box-sizing: border-box; 
	background-size:300px 100px;
cursor:pointer;	
}
#choixteam3:hover {
filter: contrast(1.4);
}
#choixteam4
{
background-image:url(images/team4.png);
top:440px;
right:50px;
	width:300px;
	height:100px;	
	z-index:1;
	position:absolute;
 border-radius:10px;
	border:solid 1px black; box-sizing: border-box; 
	background-size:300px 100px;	
	cursor:pointer;
}
#choixteam4:hover {
filter: contrast(1.4);
}
#choixteam5
{
background-image:url(images/custom.png);
top:570px;
right:50px;
	width:300px;
	height:100px;	
	z-index:1;
	position:absolute;
 border-radius:10px;
	border:solid 1px black; box-sizing: border-box; 
	background-size:300px 100px;
cursor:pointer;	
}
#choixteam5:hover {
filter: contrast(1.4);
}
#mapping1
{
background-image:url(images/mapforrest.png);
top:310px;
right:50px;
	width:300px;
	height:100px;	
	z-index:1;
	position:absolute;
 border-radius:10px;
	border:solid 1px black; box-sizing: border-box; 
		background-size:300px 100px;
		
		text-align:center;
		font-size:30px;
		font-weight:bold;
		cursor:pointer;
}
#mapping1:hover {
filter: contrast(1.4);
}
#mapping2
{
background-image:url(images/mapdojo.png);
top:180px;
right:50px;
	width:300px;
	height:100px;	
	z-index:1;
	position:absolute;
 border-radius:10px;
	border:solid 1px black; box-sizing: border-box;
	background-size:300px 100px;	
	text-align:center;
		font-size:30px;
		font-weight:bold;
		cursor:pointer;
}
#mapping2:hover {
filter: contrast(1.4);
}
#mapping3
{
background-image:url(images/mapcamp.png);
top:50px;
right:50px;
	width:300px;
	height:100px;	
	z-index:1;
	position:absolute;
 border-radius:10px;
	border:solid 1px black; box-sizing: border-box;
	background-size:300px 100px;	
	text-align:center;
		font-size:30px;
		font-weight:bold;
		cursor:pointer;
}
#mapping3:hover {
filter: contrast(1.4);
}
#mapping4
{
background-image:url(images/mapruins.png);
top:440px;
right:50px;
	width:300px;
	height:100px;	
	z-index:1;
	position:absolute;
 border-radius:10px;
	border:solid 1px black; box-sizing: border-box;
	background-size:300px 100px;
text-align:center;
		font-size:30px;
		font-weight:bold;	
		cursor:pointer;
}
#mapping4:hover {
filter: contrast(1.4);
}
#mapping5
{
background-image:url(images/mapsnow.png);
top:570px;
right:50px;
	width:300px;
	height:100px;	
	z-index:1;
	position:absolute;
 border-radius:10px;
	border:solid 1px black; box-sizing: border-box;
	background-size:300px 100px;
text-align:center;
		font-size:30px;
		font-weight:bold;	
		cursor:pointer;
}
#mapping4:hover {
filter: contrast(1.4);
}
#choixteam11
{
background-image:url(images/team1.png);
top:50px;
right:50px;
	width:300px;
	height:100px;	
	z-index:1;
	position:absolute;
 border-radius:10px;
	border:solid 1px black; box-sizing: border-box; 
	background-size:300px 100px;
cursor:pointer;	
}
#choixteam11:hover {
filter: contrast(1.4);
}
#choixteam12
{
background-image:url(images/team2.png);
top:180px;
right:50px;
	width:300px;
	height:100px;	
	z-index:1;
	position:absolute;
 border-radius:10px;
	border:solid 1px black; box-sizing: border-box;
background-size:300px 100px;	
cursor:pointer;
}
#choixteam12:hover {
filter: contrast(1.4);
}
#choixteam13
{
background-image:url(images/team3.png);
top:310px;
right:50px;
	width:300px;
	height:100px;	
	z-index:1;
	position:absolute;
 border-radius:10px;
	border:solid 1px black; box-sizing: border-box;
background-size:300px 100px;
cursor:pointer;	
}
#choixteam13:hover {
filter: contrast(1.4);
}
#choixteam14
{
background-image:url(images/team4.png);
top:440px;
right:50px;
	width:300px;
	height:100px;	
	z-index:1;
	position:absolute;
 border-radius:10px;
	border:solid 1px black; box-sizing: border-box;
background-size:300px 100px;	
cursor:pointer;
}
#choixteam14:hover {
filter: contrast(1.4);
}
#choixteam15
{
background-image:url(images/custom.png);
top:570px;
right:50px;
	width:300px;
	height:100px;	
	z-index:1;
	position:absolute;
 border-radius:10px;
	border:solid 1px black; box-sizing: border-box; 
	background-size:300px 100px;	
	cursor:pointer;
}
#choixteam15:hover {
filter: contrast(1.4);
}

#imageperso
{
background-image:url(images/imageperso.png);
left:330px;
	top:200px;
	width:180px;
	height:300px;	
	z-index:1;
	position:absolute;
 text-align:center;

  background-size:180px 300px;	
}
#displayperso
{
	background-color:#ffd633;
background-image:url(images/team4.png);
top:20px;
left:40px;
	width:100px;
	height:100px;	
	z-index:1;
	position:absolute;
  border:solid 3px green; 
border-radius:10px;  
box-sizing: border-box;
  background-size:100px 100px;
}


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


.creationteam
{
	background-color:grey;
	width:120px;
	height:600px;
	margin-top:100px;
	margin-left:20px;
	
	z-index:1;
	text-align:center;
display:inline-block;
border-radius:10px;

}


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

#masqueia
{
	background-color:transparent;
	width:1300px;
	height:800px;
	position:absolute;
	left:0%;
	top:0%;
	z-index:12;
	text-align:left;
	font-size:24px;
	font-weight:bold;
	color:black;
display:none;
}
#loadingia
{
		background-image:url(images/iaplay.gif);
	width:150px;
	height:150px;
	position:absolute;
	left:20px;
	top:220px;
	z-index:12;
	text-align:center;
	font-size:36px;
	font-weight:bold;
	background-size: 150px 150px;

}
#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;
	
}
#fog1
{
	background-image:url(images/fog.png);
	width:200px;
	height:800px;
	top:0px;
	left:0px;
	position:absolute;
	display:none;
z-index:9;
border-radius:10px;
background-size: 200px 800px;	
border:solid 2px 	black; box-sizing: border-box;
}
#fog2
{
	background-image:url(images/fog.png);
	width:200px;
	height:800px;
	top:0px;
	right:0px;
	position:absolute;
	display:none;
z-index:9;
border-radius:10px;
background-size: 200px 800px;	
border:solid 2px 	black; box-sizing: border-box;
}
#impact
{
		background-image:url(images/impact.gif);

	width:100px;
	height:100px;
	
	top:0px;
	left:0px;
	position:absolute;
	display:none;
z-index:9;
border-radius:100px;
background-size: 100px 100px;

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

	width:100px;
	height:100px;
	
	top:0px;
	left:0px;
	position:absolute;
	display:none;
z-index:10;
border-radius:100px;
background-size: 100px 100px;

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

	width:100px;
	height:100px;
	
	top:0px;
	left:0px;
	position:absolute;
	display:none;
z-index:9;
border-radius:100px;
background-size: 100px 100px;

	
}

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

	width:100px;
	height:100px;
	
	top:0px;
	left:0px;
	position:absolute;
	display:none;
z-index:9;
border-radius:10px;
	background-size: 100px 100px;
}

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

	width:100px;
	height:100px;
	
	top:0px;
	left:0px;
	position:absolute;
	display:none;
z-index:9;
border-radius:10px;
	background-size: 100px 100px;
}
#impactzone3
{
			background-image:url(images/impactzone.png);

	width:100px;
	height:100px;
	
	top:0px;
	left:0px;
	position:absolute;
	display:none;
z-index:9;
border-radius:10px;
	background-size: 100px 100px;
}
#impactzone4
{
		background-image:url(images/impactzone.png);

	width:100px;
	height:100px;
	
	top:0px;
	left:0px;
	position:absolute;
	display:none;
z-index:9;
border-radius:10px;
	background-size: 100px 100px;
}
#impactzone5
{
		background-image:url(images/impactzone.png);

	width:100px;
	height:100px;
	
	top:0px;
	left:0px;
	position:absolute;
	display:none;
z-index:9;
border-radius:10px;
	background-size: 100px 100px;
}

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

	width:100px;
	height:100px;
	
	top:0px;
	left:0px;
	position:absolute;
	display:none;
z-index:9;
border-radius:10px;
	background-size: 100px 100px;
}
#impactzone7
{
			background-image:url(images/impactzone.png);

	width:100px;
	height:100px;
	
	top:0px;
	left:0px;
	position:absolute;
	display:none;
z-index:9;
border-radius:10px;
	background-size: 100px 100px;
}
#impactzone8
{
			background-image:url(images/impactzone.png);

	width:100px;
	height:100px;
	
	top:0px;
	left:0px;
	position:absolute;
	display:none;
z-index:9;
border-radius:10px;
	background-size: 100px 100px;
}
#impactzone9
{
			background-image:url(images/impactzone.png);

	width:100px;
	height:100px;
	
	top:0px;
	left:0px;
	position:absolute;
	display:none;
z-index:9;
border-radius:10px;
	
}
#trap1
{
		background-image:url(images/trap.png);
	width:100px;
	height:100px;	
	top:0px;
	left:0px;
	position:absolute;
z-index:4;
display:none;
border-radius:10px;	
background-size: 100px 100px;
opacity:80%;
}
#trap2
{
		background-image:url(images/trap.png);
	width:100px;
	height:100px;	
	top:0px;
	left:0px;
	position:absolute;
z-index:4;
display:none;
border-radius:10px;	
background-size: 100px 100px;
opacity:80%;
}
#mine1
{
		background-image:url(images/mine1.png);
	width:100px;
	height:100px;	
	top:0px;
	left:0px;
	position:absolute;
z-index:4;
display:none;
border-radius:10px;	
background-size: 100px 100px;
}
#mine2
{
		background-image:url(images/mine2.png);
	width:100px;
	height:100px;	
	top:0px;
	left:0px;
	position:absolute;
z-index:4;
display:none;
border-radius:10px;	
background-size: 100px 100px;
}
#cityj1
{
		background-image:url(images/city1.png);
	width:100px;
	height:100px;	
	top:0px;
	left:0px;
	position:absolute;
z-index:6;
border-radius:10px;	
background-size: 100px 100px;
}

#cityj2
{
			background-image:url(images/city2.png);
	width:100px;
	height:100px;	
	top:0px;
	left:0px;
	position:absolute;
z-index:6;
border-radius:10px;	
background-size: 100px 100px;
}

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

	width:100px;
	height:100px;
	
	top:0px;
	left:0px;
	position:absolute;
	display:none;
z-index:8;
border-radius:100px;
background-size: 100px 100px;
	
}
.murs
{
	background-image:url(images/mur.png);
	width:100px;
	height:100px;	
	top:0px;
	left:0px;
	position:absolute;	
	z-index:8;
	border-radius:10px;	
	background-size: 100px 100px;
}


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

#option1
{
		background-color:black;
	background-repeat:no-repeat;
	background-size:100%;
	width:200px;
	height:200px;
	z-index:12;
	border-radius:10px;
	display:inline;
	border:solid 2px 	white; box-sizing: border-box;
}
#option2
{
		background-color:black;
	background-repeat:no-repeat;
	background-size:100%;
	width:200px;
	height:200px;
	z-index:12;
	display:inline;
		border-radius:10px;
		border:solid 2px 	white; box-sizing: border-box;
}
#option3
{
		background-color:black;
	background-repeat:no-repeat;
	background-size:100%;
	width:200px;
	height:200px;
	z-index:12;
		border-radius:10px;
	display:inline;
	border:solid 2px 	white; box-sizing: border-box;
}

#option4
{
		background-color:black;
	background-repeat:no-repeat;
	background-size:100%;
	width:200px;
	height:200px;
	z-index:12;
	
		border-radius:10px;
	display:inline;
	border:solid 2px 	white; box-sizing: border-box;
}


#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/menu.png);
background-color:#ffd633;
	width:1300px;
	height:800px;
	position:absolute;
	left:0%;
	top:0%;
	z-index:19;
	text-align:center;
display:block;
}
#endgame
{
		background-image:url(images/interjoueur.png);
background-color:#ffd633;
	width:1300px;
	height:800px;
	position:absolute;
	left:0%;
	top:0%;
	z-index:19;
	text-align:center;
display:none;
}
#gamemode
{background-image:url(images/menu.png);
background-color:#ffd633;
	width:1300px;
	height:800px;
	position:absolute;
	left:0%;
	top:0%;
	z-index:18;
	text-align:center;
display:block;
}
#control
{
background-color:#ff9900;
	width:200px;
	height:800px;
	position:absolute;
	left:0%;
	top:0%;
	z-index:2;
	text-align:center;
display:block;
	border-radius:10px;
}
#masquecontrol
{
background-color:transparent;
	width:200px;
	height:800px;
	position:absolute;
	left:0%;
	top:0%;
	z-index:3;
	text-align:center;
display:none;
}
#statsencours
{
background-image:url(images/statsencours.png);
	width:180px;
	height:300px;
	position:absolute;
	left:10px;
	top:180px;
	z-index:2;
	text-align:center;
display:block;
border:solid 1px black;
	border-radius:10px;
	box-sizing: border-box;
	background-size: 180px 300px;
	padding-top:28px;
}
#statistiques
{
background-color:red;
	width:180px;
	height:300px;
	position:absolute;
	left:10px;
	top:180px;
	z-index:3;
	text-align:center;
display:none;
border:solid 1px black;
	border-radius:10px;
	box-sizing: border-box;
	background-size: 180px 300px;
}
#cities
{
background-image:url(images/cities.png);
	width:180px;
	height:300px;
	position:absolute;
	left:10px;
	top:180px;
	z-index:4;
	text-align:center;
display:none;
border:solid 1px black;
	border-radius:10px;
	box-sizing: border-box;
	background-size: 180px 300px;
}
#armeencours
{
background-color:green;
	width:80px;
	height:80px;
	position:absolute;
	left:10px;
	top:520px;
	z-index:2;
	text-align:center;
display:block;
border:solid 3px white;
	border-radius:10px;
	box-sizing: border-box;
	background-size: 80px 80px;
	cursor:pointer;
}
#armeencours:hover {
filter: contrast(1.4);
}
#masquearme
{
background-image:url(images/masquespell.png);
	width:80px;
	height:80px;
	position:absolute;
	left:10px;
	top:520px;
	z-index:3;
	text-align:center;
display:none;
border:solid 3px black;
	border-radius:10px;
	box-sizing: border-box;
	background-size: 80px 80px;
	opacity:100%;
}
#spell1encours
{
background-color:green;
	width:80px;
	height:80px;
	position:absolute;
	left:110px;
	top:520px;
	z-index:2;
	text-align:center;
display:block;
border:solid 3px black;
	border-radius:10px;
	box-sizing: border-box;
	background-size: 80px 80px;
	cursor:pointer;
}
#spell1encours:hover {
filter: contrast(1.4);
}
#masquespell1
{
background-image:url(images/masquespell.png);
	width:80px;
	height:80px;
	position:absolute;
	left:110px;
	top:520px;
	z-index:3;
	text-align:center;
display:none;
border:solid 3px black;
	border-radius:10px;
	box-sizing: border-box;
	background-size: 80px 80px;
		opacity:100%;
}
#spell2encours
{
background-color:green;
	width:80px;
	height:80px;
	position:absolute;
	left:110px;
	top:610px;
	z-index:2;
	text-align:center;
display:block;
border:solid 3px black;
	border-radius:10px;
	box-sizing: border-box;
	background-size: 80px 80px;
	cursor:pointer;
}
#spell2encours:hover {
filter: contrast(1.4);
}
#masquespell2
{
background-image:url(images/masquespell.png);
	width:80px;
	height:80px;
	position:absolute;
	left:110px;
	top:610px;
	z-index:3;
	text-align:center;
display:none;
border:solid 3px black;
	border-radius:10px;
	box-sizing: border-box;
	background-size: 80px 80px;
	opacity:100%;
}
#spell3encours
{
background-color:green;
	width:80px;
	height:80px;
	position:absolute;
	left:110px;
	top:700px;
	z-index:2;
	text-align:center;
display:block;
border:solid 3px black;
	border-radius:10px;
	box-sizing: border-box;
	background-size: 80px 80px;
	cursor:pointer;
}
#spell3encours:hover {
filter: contrast(1.4);
}
#masquespell3
{
background-image:url(images/masquespell.png);
	width:80px;
	height:80px;
	position:absolute;
	left:110px;
	top:700px;
	z-index:3;
	text-align:center;
display:none;
border:solid 3px black;
	border-radius:10px;
	box-sizing: border-box;
	background-size: 80px 80px;
		opacity:100%;
}
#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:1300px;
	height:800px;
	position:absolute;
	left:0%;
	top:0%;
	z-index:15;
	text-align:center;
display:block;
}
#rules2
{
	background-image:url(images/rules2.png);
	width:1300px;
	height:800px;
	position:absolute;
	left:0%;
	top:0%;
	z-index:14;
	text-align:center;
display:block;
}
#rules3
{
	background-image:url(images/rules3.png);
	width:1300px;
	height:800px;
	position:absolute;
	left:0%;
	top:0%;
	z-index:13;
	text-align:center;
display:block;
}
#rules4
{
	background-image:url(images/rules4.png);
	width:1300px;
	height:800px;
	position:absolute;
	left:0%;
	top:0%;
	z-index:12;
	text-align:center;
display:block;
}
#rules5
{
	background-image:url(images/rules5.png);
	width:1300px;
	height:800px;
	position:absolute;
	left:0%;
	top:0%;
	z-index:11;
	text-align:center;
display:block;
}
#rules6
{
background-color:#ffd633;
	width:1300px;
	height:800px;
	position:absolute;
	left:0%;
	top:0%;
	z-index:11;
	text-align:center;
display:block;
}
#rulespells1
{
	background-image:url(images/rulespells1.png);
	width:1300px;
	height:800px;
	position:absolute;
	left:0%;
	top:0%;
	z-index:15;
	text-align:center;
display:block;
}
#rulespells2
{
	background-image:url(images/rulespells2.png);
	width:1300px;
	height:800px;
	position:absolute;
	left:0%;
	top:0%;
	z-index:14;
	text-align:center;
display:block;
}
#rulespells3
{
	background-image:url(images/rulespells3.png);
	width:1300px;
	height:800px;
	position:absolute;
	left:0%;
	top:0%;
	z-index:13;
	text-align:center;
display:block;
}
#rulespells4
{
	background-image:url(images/rulespells4.png);
	width:1300px;
	height:800px;
	position:absolute;
	left:0%;
	top:0%;
	z-index:12;
	text-align:center;
display:block;
}
#rulespells5
{
	background-image:url(images/rulespells5.png);
	width:1300px;
	height:800px;
	position:absolute;
	left:0%;
	top:0%;
	z-index:11;
	text-align:center;
display:block;
}
#home
{
background-image:url(images/home.png);
	width:1300px;
	height:800px;
	position:absolute;
	left:0%;
	top:0%;
	z-index:21;
	text-align:center;
display:block;
}
#loadgame
{
background-color:black;
	width:1300px;
	height:800px;
	position:absolute;
	left:0%;
	top:0%;
	z-index:23;
	text-align:center;
		color:white;
	font-family:Arial;
	font-size:20px;
	font-weight:bold;
display:block;
}
#boutonmenu{
margin-top:2%;
	text-align:center;
	
	
	top:2%;
width:900px;
height:600px;

z-index:12;
display:inline-block;
}
#settings{
background-color:#1e1e15;
	width:1460px;
	height:1000px;
	position:absolute;
	left:0%;
	top:0%;
	z-index:19;
	text-align:center;
	color:#ffffff;
	font-family:Arial;
	font-size:20px;
	font-weight:bold;

display:none;
}
#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:#ffd633;
	background-repeat:no-repeat;
	background-size:100%;
	width:1300px;
	height:800px;
	position:absolute;
	left:0%;
	top:0%;
	z-index:20;
	display:none;
	
}
#rulespells
{
		background-color:#ffd633;
	background-repeat:no-repeat;
	background-size:100%;
	width:1300px;
	height:800px;
	position:absolute;
	left:0%;
	top:0%;
	z-index:21;
	display:none;
	
}

#bouton3{
top:85%;
}



#board1
{
background-color:#ffd633;
	background-repeat:no-repeat;
	background-size:100%;
	width:1100px;
	height:800px;
	position:absolute;
	left:200px;
	top:0px;
z-index:2;

	margin:0px;
	border:solid 1px #2e2e1f;
	border-radius:10px;
	box-sizing: border-box;
}
#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;
}


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


#unite1
{
	background-image:url(images/unite1.png); 
	background-size: 100px 100px;
}
#unite2
{
	background-image:url(images/unite2.png); 
		background-size: 100px 100px;
}
#unite3
{
	background-image:url(images/unite3.png); 
		background-size: 100px 100px;
}
#unite4
{
	background-image:url(images/unite4.png); 
		background-size: 100px 100px;
}
#unite5
{
	background-image:url(images/unite5.png); 
		background-size: 100px 100px;
}
#unite6
{
	background-image:url(images/unite6.png); 
		background-size: 100px 100px;
}
#unite7
{
	background-image:url(images/unite7.png); 
	background-size: 100px 100px;
}
#unite8
{
	background-image:url(images/unite8.png); 
		background-size: 100px 100px;
}
#unite9
{
	background-image:url(images/unite9.png); 
		background-size: 100px 100px;
}
#unite10
{
	background-image:url(images/unite10.png); 
		background-size: 100px 100px;
}
#unite11
{
	background-image:url(images/unite11.png); 
		background-size: 100px 100px;
}
#unite12
{
	background-image:url(images/unite12.png); 
		background-size: 100px 100px;
}
#unite13
{
	background-image:url(images/unite13.png); 
		background-size: 100px 100px;
}
#unite14
{
	background-image:url(images/unite14.png); 
		background-size: 100px 100px;
}
#unite15
{
	background-image:url(images/unite15.png); 
		background-size: 100px 100px;
}
#unite16
{
	background-image:url(images/unite16.png); 
		background-size: 100px 100px;
}
#unite17
{
	background-image:url(images/unite17.png); 
		background-size: 100px 100px;
}
#unite18
{
	background-image:url(images/unite18.png); 
		background-size: 100px 100px;
}
#unite19
{
	background-image:url(images/unite19.png); 
		background-size: 100px 100px;
}
#unite20
{
	background-image:url(images/unite20.png); 
		background-size: 100px 100px;
}
#unite21
{
	background-image:url(images/unite21.png); 
		background-size: 100px 100px;
}
#unite22
{
	background-image:url(images/unite22.png); 
		background-size: 100px 100px;
}
#unite23
{
	background-image:url(images/unite23.png); 
		background-size: 100px 100px;
}
#unite24
{
	background-image:url(images/unite24.png); 
		background-size: 100px 100px;
}

.card
{background-image:url(images/unite11.png); background-size: 100px 100px; cursor:pointer; border-radius:10px;position:absolute; top:200px; left:0px; z-index:6; width:100px; height:100px;}
.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%}

.range
{background-color:red; border-radius:100px; z-index:7; width:100px; height:100px; position:absolute;  box-sizing: border-box; opacity:30%; display:none;}
.range:hover {
filter: contrast(1.4);
}
.pm
{background-color:green; border-radius:100px; z-index:5; cursor:pointer; width:100px; height:100px; position:absolute;  opacity:30%; display:none;}
.pm:hover {
filter: contrast(1.4);
}
.bateaux
{
	background-image:url(images/bateau.png);
	background-repeat:no-repeat;
	background-size:100%;
	width:40px;
	height:40px;
	position:absolute;
}

.champsgold {
	
	/*display:block;*/
	display:inline;
	
	margin-top:45px;
	margin-left:-20px;
	width:100px;
	height:50px;
	text-align:center;
	background-color:transparent;
	border:none;
		color:#ffff4d;
	font-size:34px;
	font-weight:bold;
	
	
}
.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;
	
	
}
.champsname2 {
	
	/*display:block;*/
	display:inline;
	
	position:absolute;
	top:140px;
	left:10px;
	width:180px;
	height:40px;
	text-align:center;
	background-color:transparent;
	border:none;
		color:#334d4d;
	font-size:14px;
	font-weight:bold;
	
	
}

.champs {
	
	/*display:block;*/
	display:inline;
	
	
	width:220px;
	text-align:center;
	background-color:grey;
	border:none;
		
	font-size:22px;
	margin-top:180px;
	margin-bottom:20px;
	
}

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

	
}
.champdegat{
	
	
	
	margin-left:0px;
	width:90px;
	height:100px;
	text-align:center;
	background-color:transparent;
	border:none;
		font-weight:bold;
	font-size:30px;

	color:black;
	display:block;
	
}
.champcity{
	
	
	
	margin-left:105px;
	margin-top:70px;
	width:60px;
	height:22px;
	text-align:center;
	background-color:transparent;
	border:none;
		font-weight:bold;
	font-size:24px;

	color:black;
	display:block;
	
}
.champsdata {
	
	/*display:block;*/
	display:inline;
	
	margin-left:35px;
	width:60px;
	text-align:center;
	background-color:transparent;
	border:none;
		font-weight:bold;
	font-size:22px;
	margin-top:8px;
	color:black;
	display:block;
	
}
.champsdata:focus {
    outline: none;
}
.champsvictoire {
	
	/*display:block;*/
	display:inline;
	
	margin-left:35px;
	width:60px;
	text-align:center;
	background-color:transparent;
	border:none;
		font-weight:bold;
	font-size:30px;
	margin-top:8px;
	color:black;
	display:block;
	
}


.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:110px;
	text-align:center;
	background-color:transparent;
	font-weight:bold;
	font-size:24px;
	margin-top:150px;
	margin-left:10px;
	border:solid 1px white;   
	box-sizing: border-box;
	border-radius:10px;
	
}
.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;
	
	
}


.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: #990000;
}
.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;
	
	
}

.menucreation {
	background-color:#000000;
	border-radius:10px;
	border:2px solid white;
	display:inline;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:17px;
	padding:16px 31px;
	text-decoration:none;
	
	width:100px;
		margin:0 auto;
}
.menucreation:hover {
	background-color: #990000;
}

.btnd {
	background-color:green;
	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:30px;
	width:230px;
		margin:0 auto;
		display:none;
}
.btnd:hover {
	background-color: #990000;
}

#boutonequip {
	background-color:green;
	border-radius:10px;
	border:3px solid white;
		font-weight:bold;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:16px;
	padding:5px 5px;

	z-index:2;
	width:180px;
	height:50px;
		position:absolute;
		bottom:20px;
		left:35px;
}
#boutonequip:hover {
	background-color: #990000;
}

#boutonvalidation1 {
	background-color:green;
	border-radius:10px;
	border:3px solid white;
		font-weight:bold;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:16px;
	padding:5px 5px;

	display:none;
	width:100px;
	height:40px;
		position:absolute;
	top:248px;
		left:40px;
}
#boutonvalidation1:hover {
	background-color: #990000;
}

#boutonmenuspells {
	background-color:#ff9900;
	border-radius:10px;
	border:3px solid white;
		font-weight:bold;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:16px;
	padding:5px 5px;

	
	width:100px;
	height:40px;
		position:absolute;
	top:130px;
		left:40px;
}
#boutonmenuspells:hover {
	background-color: #990000;
}
#boutonmenuitems {
	background-color:#ff9900;
	border-radius:10px;
	border:3px solid white;
		font-weight:bold;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:16px;
	padding:5px 5px;

	
	width:100px;
	height:40px;
		position:absolute;
	top:190px;
		left:40px;
}
#boutonmenuitems:hover {
	background-color: #990000;
}
#boutonhire {
	background-color:green;
	border-radius:10px;
	border:3px solid white;
	
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:16px;
	font-weight:bold;
	padding:5px 5px;
display:none;
		z-index:3;
	width:180px;
	height:50px;
		position:absolute;
		bottom:20px;
		left:35px;
}
#boutonhire:hover {
	background-color: #990000;
}


#detailsunites{
	background-color:#ff9900;	
	
	width:250px;
	height:800px;
	position:absolute;
top:0px;
left:10px;
	
	z-index:14;
	text-align:center;
display:inline-block;
border-radius:10px;

	border:solid 2px black; box-sizing: border-box;  
}

#details{
	background-color:green;	
	
	width:250px;
	height:700px;
	position:absolute;
top:100px;
left:10px;
	
	z-index:1;
	text-align:center;
display:inline-block;
border-radius:10px;
	border:solid 1px black; box-sizing: border-box;
}
#unites{
background-color:#ff9900;
	width:120px;
	height:680px;
	position:absolute;
top:100px;
left:280px;
	
	z-index:1;
	text-align:center;
display:inline-block;
border-radius:10px;
	 box-sizing: border-box;
}
#unites2{
background-color:#ff9900;
	width:120px;
	height:680px;
	position:absolute;
top:100px;
left:410px;
	
	z-index:1;
	text-align:center;
display:inline-block;
border-radius:10px;

}

#unites3{
background-color:#ff9900;
	width:120px;
	height:680px;
	position:absolute;
top:100px;
left:560px;
	
	z-index:1;
	text-align:center;
display:inline-block;
border-radius:10px;

}
#unites4{
background-color:#ff9900;
	width:120px;
	height:680px;
	position:absolute;
top:100px;
left:690px;
	
	z-index:1;
	text-align:center;
display:inline-block;
border-radius:10px;

}

#uniteschoix{
	background-color:transparent;

	width:120px;
	height:700px;
position:absolute;
top:100px;
left:570px;
	
	z-index:2;
	text-align:center;
display:none;
border-radius:10px;
	
}
#uniteschoixmasque{
	background-color:transparent;

	width:120px;
	height:700px;
position:absolute;
top:100px;
left:570px;
	
	z-index:3;
	text-align:center;
display:none;
border-radius:10px;
	
}
#contientunit1{
	background-color:transparent;

	width:200px;
	height:100px;
position:absolute;
top:0px;
left:150px;
	
	z-index:3;
	text-align:center;

border-radius:10px;
	
}
#contientunit2{
	background-color:transparent;

	width:200px;
	height:100px;
position:absolute;
top:0px;
left:150px;
	
	z-index:3;
	text-align:center;

border-radius:10px;
	
}
#contientunit3{
	background-color:transparent;

	width:200px;
	height:100px;
position:absolute;
top:0px;
left:150px;
	
	z-index:3;
	text-align:center;

border-radius:10px;
	
}
#contientunit4{
	background-color:transparent;

	width:200px;
	height:100px;
position:absolute;
top:0px;
left:150px;
	
	z-index:3;
	text-align:center;

border-radius:10px;
	
}
#contientunit5{
	background-color:transparent;

	width:200px;
	height:100px;
position:absolute;
top:0px;
left:150px;
	
	z-index:3;
	text-align:center;

border-radius:10px;
	
}
#unitechoix1{background-color:transparent;
width:100px;
	height:100px;
		background-size: 100px 100px;
	margin-left:20px;
}
#unitechoix2{background-color:transparent;
	width:100px;
	height:100px;
		background-size: 100px 100px;
	margin-left:20px;
}
#unitechoix3{background-color:transparent;
	width:100px;
	height:100px;
		background-size: 100px 100px;
	margin-left:20px;
}
#unitechoix4{background-color:transparent;
width:100px;
	height:100px;
		background-size: 100px 100px;
	margin-left:20px;
}
#unitechoix5{background-color:transparent;
		width:100px;
	height:100px;
		background-size: 100px 100px;
	margin-left:20px;
}
#unitechoix6{background-color:#00cc00;
	background-size: 50px 50px;
}
#persos{
background-color:blue;
	width:120px;
	height:700px;
	position:absolute;
top:100px;
left:300px;
	opacity:20%;
	z-index:2;
	text-align:center;
display:none;
border-radius:10px;
	border:solid 1px black; box-sizing: border-box;
}
#armes{
background-color:green;
	width:120px;
	height:120px;
	position:absolute;
top:0px;
left:25px;
	opacity:20%;
	z-index:2;
	text-align:center;
display:none;
border-radius:10px;
	border:solid 1px black; box-sizing: border-box;
}
#sort1{
background-color:green;
	width:120px;
	height:120px;
	position:absolute;
top:0px;
left:25px;
	opacity:20%;
	z-index:2;
	text-align:center;
display:none;
border-radius:10px;
	border:solid 1px black; box-sizing: border-box;
}
#sort2{
background-color:green;
	width:120px;
	height:120px;
	position:absolute;
top:0px;
left:200px;
	opacity:20%;
	z-index:2;
	text-align:center;
display:none;
border-radius:10px;
	border:solid 1px black; box-sizing: border-box;
}
#sort3{
background-color:green;
	width:120px;
	height:120px;
	position:absolute;
top:0px;
left:375px;
	opacity:20%;
	z-index:2;
	text-align:center;
display:none;
border-radius:10px;
	border:solid 1px black; box-sizing: border-box;
}
#stuff1{
background-color:green;
	width:120px;
	height:120px;
	position:absolute;
top:0px;
left:200px;
	opacity:20%;
	z-index:2;
	text-align:center;
display:none;
border-radius:10px;
	border:solid 1px black; box-sizing: border-box;
}
#stuff2{
	background-color:green;
	width:120px;
	height:120px;
position:absolute;
top:0px;
left:375px;
	opacity:20%;
	z-index:2;
	text-align:center;
display:none;
border-radius:10px;
	border:solid 1px black; box-sizing: border-box;
}
#menuspells{
background-color:transparent;
	width:500px;
	height:680px;
	position:absolute;
top:100px;
left:610px;
	
	z-index:2;
	text-align:center;
display:none;
border-radius:10px;
	
}
#menuitems{
background-color:transparent;
	width:500px;
	height:680px;
	position:absolute;
top:100px;
left:610px;
	
	z-index:2;
	text-align:center;
display:none;
border-radius:10px;
	
}
#weapons{
background-color:transparent;
	width:120px;
	height:680px;
	position:absolute;
top:0px;
left:25px;
	
	z-index:1;
	text-align:center;
display:inline-block;
border-radius:10px;
	
}
#spells1{
background-color:transparent;
	width:120px;
	height:680px;
	position:absolute;
top:0px;
left:25px;
	
	z-index:1;
	text-align:center;
display:inline-block;
border-radius:10px;

}
#spells2{
background-color:transparent;
	width:120px;
	height:680px;
	position:absolute;
top:0px;
left:200px;
	
	z-index:1;
	text-align:center;
display:inline-block;
border-radius:10px;

}
#spells3{
background-color:transparent;
	width:120px;
	height:680px;
	position:absolute;
top:0px;
left:375px;
	
	z-index:1;
	text-align:center;
display:inline-block;
border-radius:10px;

}
#stuffs1{
background-color:transparent;
	width:120px;
	height:680px;
	position:absolute;
top:0px;
left:200px;
	
	z-index:1;
	text-align:center;
display:inline-block;
border-radius:10px;

}
#stuffs2{
	background-color:transparent;
	width:120px;
	height:680px;
position:absolute;
top:0px;
left:375px;
	
	z-index:1;
	text-align:center;
display:inline-block;
border-radius:10px;

}
#validteam{
	
position:absolute;
bottom:15px;
right:35px;	
	text-align:center;
	
	background-color:green;
	border-radius:10px;
	border:3px solid white;
	font-weight:bold;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:18px;
	padding:0px 0px;
display:none;
	z-index:2;
	width:340px;
	height:40px;
}
#validteam:hover {
	background-color: #ff9900;
}

#stats{
	background-color:red;	
	
	width:1120px;
	height:800px;
	position:absolute;
top:0px;
left:180px;
	
	z-index:1;



}
#detailschoix{
	
background-image:url(images/statsencours.png);
	width:270px;
	height:450px;
	position:absolute;
	left:12px;
	top:25px;
	z-index:2;
	text-align:center;
display:block;
border:solid 1px black;
	border-radius:10px;
	box-sizing: border-box;
	background-size: 270px 450px;
	padding-top:90px;

}
#detailschoixunites{
background-image:url(images/statsencours.png);
	
	width:180px;
	height:300px;
	position:absolute;
top:180px;
left:35px;
	
	z-index:1;
	text-align:center;
display:inline-block;
border-radius:10px;
	
		background-size: 180px 300px;
}
#spellsavailable{
background-image:url(images/spellsavailable.png);
	
	width:180px;
	height:80px;
	position:absolute;
top:490px;
left:35px;
	cursor:pointer;
	z-index:2;
	text-align:center;
display:inline-block;
border-radius:5px;
	
		background-size: 180px 80px;
}
#spellsavailable:hover {
filter: contrast(1.4);
border-radius:15px;
}
#prixachat{
background-image:url(images/costgold.png);
	
	width:200px;
	height:100px;
	position:absolute;
top:610px;
left:25px;
	
	z-index:1;
	text-align:center;
display:inline-block;
border-radius:10px;
	
		background-size: 200px 100px;
}

#choixvalides1{
	background-color:transparent;	

	width:400px;
	height:100px;
position:absolute;
top:90px;
left:890px;
	display:none;
	z-index:1;
	padding:10px;

border-radius:10px;
	
}
#choixvalides2{
	background-color:transparent;

	width:400px;
	height:100px;
position:absolute;
top:220px;
left:890px;
		display:none;
	z-index:1;
padding:10px;

border-radius:10px;
	
}
#choixvalides3{
	background-color:transparent;

	width:400px;
	height:100px;
position:absolute;
top:350px;
left:890px;
		display:none;
	z-index:1;
padding:10px;

border-radius:10px;
	
}
#choixvalides4{
	background-color:transparent;	

	width:400px;
	height:100px;
position:absolute;
top:480px;
left:890px;
		display:none;
	z-index:1;
padding:10px;

border-radius:10px;
	
}
#choixvalides5{
	background-color:transparent;	

	width:400px;
	height:100px;
position:absolute;
top:610px;
left:890px;
		display:none;
	z-index:1;
padding:10px;

border-radius:10px;
	
}

.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;
}
.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:#990000;
	border-radius:10px;
	border:3px solid white;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:17px;
	padding:16px 31px;
	text-decoration:none;
	margin-top:30px;
	width:230px;
	
	margin:0 auto;
}
.btn1:hover {
	background-color:green;
}
.btn1:focus {
	background-color:#00b300;
	
	
}

.btn4 {	
font-weight:bold;
	background-color:#990000;
	border-radius:10px;
	border:3px solid white;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:17px;
	padding:16px 31px;
	text-decoration:none;
	margin-top:570px;
	margin-left:50px;
	width:300px;
	
	
}
.btn4:hover {
	background-color:green;
}

#boutonendturn {	
font-weight:bold;
	background-color:#990000;
	border-radius:10px;
	border:3px solid white;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:17px;
	padding:10px 30px;
	
	margin-top:15px;
	margin-left:5px;
	width:180px;
	height:50px;
	
	
}
#boutonendturn:hover {
	background-color:green;
}


.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 {
	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;
	
	width:200px;
	height:100px;
		margin-left:60px;
}
.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: 30px;
    margin-top:90px;
	margin-left:20px;
	
}
#spellchoix0
{
	background-image:url(images/vide.png);
}
#spellchoix00
{
	background-image:url(images/vide.png);
}
#spellchoix000
{
	background-image:url(images/vide.png);
}
#armechoix0
{
	background-image:url(images/vide.png);
}
#armedispo1
{
	background-image:url(images/shield1.png);
}
#armedispo2
{
	background-image:url(images/shield2.png);
}
#armedispo3
{
	background-image:url(images/potion2.png);
}
#armedispo4
{
	background-image:url(images/potion.png);
}
#spellchoix1
{
	background-image:url(images/spelldegat.png);
}
#spellchoix2
{
	background-image:url(images/spelltp.png);
}
#spellchoix3
{
	background-image:url(images/spellimmunite.png);
}
#spellchoix4
{
	background-image:url(images/spellswap.png);
}
#spellchoix5
{
	background-image:url(images/spelljugement.png);
}
#spellchoix6
{
	background-image:url(images/spellboulefeu.png);
}
#spellchoix7
{
	background-image:url(images/spelleclair.png);
}
#spellchoix8
{
	background-image:url(images/spellheal.png);
}
#spellchoix9
{
	background-image:url(images/spellmorsure.png);
}
#spellchoix10
{
	background-image:url(images/spellzone.png);
}
#spellchoix11
{
	background-image:url(images/spellpiege.png);
}
#spellchoix12
{
	background-image:url(images/spellpm.png);
}
#spellchoix13
{
	background-image:url(images/spellrepousse.png);
}
#spellchoix14
{
	background-image:url(images/spellfaux.png);
}
#spellchoix15
{
	background-image:url(images/spelltarget.png);
}
#spellchoix16
{
	background-image:url(images/spellinvoc.png);
}
#spellchoix17
{
	background-image:url(images/spellsword.png);
}
#spellchoix18
{
	background-image:url(images/spellacheve.png);
}
#spellchoix19
{
	background-image:url(images/spellmercenary.png);
}
#spellchoix20
{
	background-image:url(images/spellattire.png);
}
#spellchoix21
{
	background-image:url(images/spellvolvie.png);
}
#spellchoix22
{
	background-image:url(images/spellzombi.png);
}
#spellchoix23
{
	background-image:url(images/spellwolf.png);
}
#spellchoix24
{
	background-image:url(images/spelldragon.png);
}
#spellchoix25
{
	background-image:url(images/spellinvisi.png);
}


#spellchoix61
{
	background-image:url(images/spelldegat.png);
}
#spellchoix62
{
	background-image:url(images/spelltp.png);
}
#spellchoix63
{
	background-image:url(images/spellimmunite.png);
}
#spellchoix64
{
	background-image:url(images/spellswap.png);
}
#spellchoix65
{
	background-image:url(images/spelljugement.png);
}
#spellchoix66
{
	background-image:url(images/spellboulefeu.png);
}
#spellchoix67
{
	background-image:url(images/spelleclair.png);
}
#spellchoix68
{
	background-image:url(images/spellheal.png);
}
#spellchoix69
{
	background-image:url(images/spellmorsure.png);
}
#spellchoix610
{
	background-image:url(images/spellzone.png);
}
#spellchoix611
{
	background-image:url(images/spellpiege.png);
}
#spellchoix612
{
	background-image:url(images/spellpm.png);
}
#spellchoix613
{
	background-image:url(images/spellrepousse.png);
}
#spellchoix614
{
	background-image:url(images/spellfaux.png);
}
#spellchoix615
{
	background-image:url(images/spelltarget.png);
}
#spellchoix616
{
	background-image:url(images/spellinvoc.png);
}
#spellchoix617
{
	background-image:url(images/spellsword.png);
}
#spellchoix618
{
	background-image:url(images/spellacheve.png);
}
#spellchoix619
{
	background-image:url(images/spellmercenary.png);
}
#spellchoix620
{
	background-image:url(images/spellattire.png);
}

#spellchoix621
{
	background-image:url(images/spellvolvie.png);
}
#spellchoix622
{
	background-image:url(images/spellzombi.png);
}
#spellchoix623
{
	background-image:url(images/spellwolf.png);
}
#spellchoix624
{
	background-image:url(images/spelldragon.png);
}
#spellchoix625
{
	background-image:url(images/spellinvisi.png);
}




#spellchoix71
{
	background-image:url(images/spelldegat.png);
}
#spellchoix72
{
	background-image:url(images/spelltp.png);
}
#spellchoix73
{
	background-image:url(images/spellimmunite.png);
}
#spellchoix74
{
	background-image:url(images/spellswap.png);
}
#spellchoix75
{
	background-image:url(images/spelljugement.png);
}
#spellchoix76
{
	background-image:url(images/spellboulefeu.png);
}
#spellchoix77
{
	background-image:url(images/spelleclair.png);
}
#spellchoix78
{
	background-image:url(images/spellheal.png);
}
#spellchoix79
{
	background-image:url(images/spellmorsure.png);
}
#spellchoix710
{
	background-image:url(images/spellzone.png);
}
#spellchoix711
{
	background-image:url(images/spellpiege.png);
}
#spellchoix712
{
	background-image:url(images/spellpm.png);
}
#spellchoix713
{
	background-image:url(images/spellrepousse.png);
}
#spellchoix714
{
	background-image:url(images/spellfaux.png);
}
#spellchoix715
{
	background-image:url(images/spelltarget.png);
}
#spellchoix716
{
	background-image:url(images/spellinvoc.png);
}
#spellchoix717
{
	background-image:url(images/spellsword.png);
}
#spellchoix718
{
	background-image:url(images/spellacheve.png);
}
#spellchoix719
{
	background-image:url(images/spellmercenary.png);
}
#spellchoix720
{
	background-image:url(images/spellattire.png);
}

#spellchoix721
{
	background-image:url(images/spellvolvie.png);
}
#spellchoix722
{
	background-image:url(images/spellzombi.png);
}
#spellchoix723
{
	background-image:url(images/spellwolf.png);
}
#spellchoix724
{
	background-image:url(images/spelldragon.png);
}
#spellchoix725
{
	background-image:url(images/spellinvisi.png);
}



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

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

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

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

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

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

}
#stuffchoix0
{
	background-image:url(images/vide.png);
	
}
#stuffchoix00
{
	background-image:url(images/vide.png);
	
}
#stuffchoix1
{
	background-image:url(images/stuff1.png);
	
}
#stuffchoix2
{
	background-image:url(images/stuff2.png);
	
}
#stuffchoix3
{
	background-image:url(images/stuff3.png);
	
}
#stuffchoix4
{
	background-image:url(images/stuff4.png);
	
}
#stuffchoix5
{
	background-image:url(images/stuff5.png);
	
}

#stuffchoix11
{
	background-image:url(images/stuff11.png);
	
}
#stuffchoix12
{
	background-image:url(images/stuff12.png);
	
}
#stuffchoix13
{
	background-image:url(images/stuff13.png);
	
}
#stuffchoix14
{
	background-image:url(images/stuff14.png);
	
}
#stuffchoix15
{
	background-image:url(images/stuff15.png);
	
}

#j1
{
	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;
}


#data
{
background-image:url(images/totalgold.png);
	
	width:200px;
	height:100px;
	position:absolute;
top:0px;
left:25px;
	
	z-index:1;
	text-align:center;
display:inline-block;
border-radius:10px;
	
		background-size: 200px 100px;
}
#banner
{
background-color:transparent;
	
	width:500px;
	height:80px;
	position:absolute;
top:10px;
left:620px;
	
	z-index:1;
	text-align:center;
display:inline-block;
border-radius:10px;
	
		background-size: 500px 80px;
}
#bannerunits
{
background-image:url(images/bannerunits.png);
	
	width:1000px;
	height:80px;
	position:absolute;
top:10px;
right:25px;
	
	z-index:1;
	text-align:center;
display:inline-block;
border-radius:10px;
	
		background-size: 1000px 80px;
}


.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;
	cursor:pointer;
}
.opt:hover {
	border-radius:100px;
	color:red;
	border-color:green;
}

.opt3
{
background-color:white;
	width:100px;
	height:100px;
	margin-top:10px;
	margin-left:9px;
	z-index:1;
	text-align:center;
display:inline-block;
border-radius:10px;
	border:solid 2px black; box-sizing: border-box;
	display:none;
	background-size: 100px 100px;
	cursor:pointer;
}
.opt3:hover {
	border-radius:100px;
	color:red;
	border-color:green;
}

.opt5
{
background-color:#ffd633;
	width:50px;
	height:50px;
	margin-top:5px;
	margin-left:5px;
	z-index:1;
	text-align:center;
display:inline-block;
border-radius:10px;
	border:solid 1px black; box-sizing: border-box;
	background-size: 50px 50px;
	
}
.opt6
{

	width:50px;
	height:50px;
	margin-top:5px;
	margin-left:5px;
	z-index:1;
	text-align:center;
display:inline-block;
border-radius:10px;

	background-size: 50px 50px;
	
}

.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:#0099cc;
}

#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:17px;
	margin-bottom:0px;
	margin-left:90px;
	width:20px;
	text-align:center;
	background-color:transparent;
	border:none;
		font-weight:bold;
	font-size:20px;
	
	color: #ffe066;
	
	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:100px;
	
		font-family:Arial;
	
	width:200px;
	height:200px;
	vertical-align: top;
	text-align:center;
	font-size:26px;
		font-weight:bold;
		
	position:absolute;
	left:300px;
	top:100px;
	
	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: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;
	
}
.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;
		
}

#mouvperso {
display:inline;
	
	margin-left:20px;
	width:60px;
	text-align:center;
	background-color:transparent;
	border:none;
		font-weight:bold;
	font-size:26px;
	margin-top:10px;
	color:black;
	display:block;

position:absolute;
top:180px;
left:13px;
}
#actionperso {
display:inline;
	
	margin-left:20px;
	width:60px;
	text-align:center;
	background-color:transparent;
	border:none;
		font-weight:bold;
	font-size:26px;
	margin-top:10px;
	color:black;
	display:block;

position:absolute;
top:220px;
left:13px;
}



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

}


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





#ecranfin
{
background-color:black;
top:50px;
left:450px;
	width:400px;
	height:680px;	
	z-index:1;
	position:absolute;
  border:solid 1px; 
	border-radius:20px;  

}


.avancementheadcity
{

margin-left:10px;
margin-top:88px;
    -moz-box-sizing: border-box;
         box-sizing: border-box;
    width: 80px;
    height: 8px;
    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: 1px solid rgba(0,0,0,.5);
    border-radius: 15px;
    background-color:yellow;
	

}


.avancementhead
{

    -moz-box-sizing: border-box;
         box-sizing: border-box;
   
  
 
 
    border: 1px solid black;
    border-radius: 15px;
  
	
}