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

body
{
background-color:black;
}

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

background-color:#1e1e15;

	width:1460px;
	height:1000px;
	
	z-index:1;
	position:absolute;
top:5%;
left:10%;
  border:solid 2px;

  
}

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

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

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

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

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

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

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

#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/menu1.png);
	width:1460px;
	height:1000px;
	position:absolute;
	left:0%;
	top:0%;
	z-index:18;
	text-align:center;
display:block;
}
#finish
{
		background-image:url(images/end1.png);
	width:1460px;
	height:1000px;
	position:absolute;
	left:0%;
	top:0%;
	z-index:18;
	text-align:center;
font-family:Arial;
color:white;
}
#rules1
{
	background-image:url(images/rules1.png);
	width:1460px;
	height:1000px;
	position:absolute;
	left:0%;
	top:0%;
	z-index:15;
	text-align:center;
display:block;
}
#rules2
{
	background-image:url(images/features2.png);
	width:1460px;
	height:1000px;
	position:absolute;
	left:0%;
	top:0%;
	z-index:14;
	text-align:center;
display:block;
}
#rules3
{
	background-image:url(images/battlefield.png);
	width:1460px;
	height:1000px;
	position:absolute;
	left:0%;
	top:0%;
	z-index:12;
	text-align:center;
display:block;
}
#rules4
{
	background-image:url(images/stratege.png);
	width:1460px;
	height:1000px;
	position:absolute;
	left:0%;
	top:0%;
	z-index:11;
	text-align:center;
display:block;
}
#rules5
{
	background-image:url(images/unitregles.png);
	width:1460px;
	height:1000px;
	position:absolute;
	left:0%;
	top:0%;
	z-index:13;
	text-align:center;
display:block;
}
#home
{
background-image:url(images/home1.png);
	width:1460px;
	height:1000px;
	position:absolute;
	left:0%;
	top:0%;
	z-index:20;
	text-align:center;
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:#1e1e15;
	background-repeat:no-repeat;
	background-size:100%;
	width:100%;
	height:100%;
	position:absolute;
	left:0%;
	top:0%;
	z-index:19;
	display:none;
	
}

#bouton3{
top:85%;
}



#board1
{
background-color:#1e1e15;
	background-repeat:no-repeat;
	background-size:100%;
	width:1100px;
	height:500px;
	position:absolute;
	left:180px;
	top:200px;


	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:1100px;
	height:500px;
	position:absolute;
	left:180px;
	top:200px;

display:none;
	margin:0px;
	border:solid 1px #2e2e1f;
	border-radius:10px;
	box-sizing: border-box;
	z-index:14;
}


#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-color:#1e1e15;
	background-repeat:no-repeat;
	background-size:100%;
	width:1400px;
	height:100px;
	position:absolute;
	left:30px;
	top:30px;
	display:block;
z-index:2;
		
}
#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;
}


.card
{background-image:url(images/soldat.png); cursor:pointer; border-radius:10px;position:absolute; top:200px; left:0px; z-index:6; width:100px; height:100px;}
.case
{background-color:black; border-radius:10px; z-index:4; width:100px; height:100px; position:absolute; border:solid 1px 	#2e2e1f; box-sizing: border-box; opacity:100%}
.bateaux
{
	background-image:url(images/bateau.png);
	background-repeat:no-repeat;
	background-size:100%;
	width:40px;
	height:40px;
	position:absolute;
}

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

	
}
.champsdata {
	
	/*display:block;*/
	display:inline;
	
	margin-left:50px;
	width:60px;
	text-align:center;
	background-color:transparent;
	border:none;
		font-weight:bold;
	font-size:30px;
	margin-top:12px;
	color:white;
	display:block;
	
}
.champsdata:focus {
    outline: none;
}
.champsvie {
	

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

	display:inline;
	
	height:40px;
	width: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:#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: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;
	
	
}
.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;
	
	
}


.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: 15px;
    
	margin-left:20px;
	
}



#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/data1.png);
		margin-left:20px;
	width:200px;
	height:100px;
	vertical-align: top;
	text-align:center;
	font-size:20px;
		
		/*border:solid 2px white;box-sizing: border-box;
		border-radius:10px;
		*/
	display:inline-block;
	margin-right:130px;
	z-index:3;
}




.opt
{
margin-left:40px;
	
}
.opt:hover {
	border-radius:0px;
	color:red;
	border-color:red;
}

.container{
    width:100px;
    height:350px;
   
}

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

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

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

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

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





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


#xpj
{
   color:#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:50px;
	width:80px;
	text-align:center;
	background-color:transparent;
	border:none;
		font-weight:bold;
	font-size:30px;
	
	color:black;
		
	
	
	z-index:3;
}
#countdown
{
		background-color:#cccccc;
	border-radius:100px;
	border:3px solid black;
			
	font-weight:bold;
	color:#ffffff;
	font-family:Arial;
	font-size:20px;
	padding-top:40px;
	text-align:center;

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

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

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

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

#boutonstart
{
		border-radius: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;
		
}


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