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

body
{
background-color:black;
}

h1 input
{
	background-color:transparent;
	border:none;
	font-size:24px;
}
#game
{
background-color:black;
	width:1600px;
	height:800px;	
	z-index:2;
	position:absolute;
	top:3%;
	left:1%;
  border:solid 2px black; 
}

#masquegame
{
background-color:transparent;
	width:1600px;
	height:800px;	
	z-index:40;
	position:absolute;
	top:3%;
	left:1%;
  border:solid 2px; 
  display:none;
}







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

#loading
{
background-color:black;
		background-size: 1600px 800px;
	width:1600px;
	height:800px;
	position:absolute;
	left:0%;
	top:0%;
	z-index:22;
	text-align:center;
display:none;
font-family:Arial;
	font-size:28px;
	color:grey;

}
#chargement
{
background-color:black;
		background-size: 711px 400px;
		background-image:url(images/loading.gif);
	width:711px;
	height:400px;
	position:absolute;
	left:440px;
	top:230px;
	z-index:1;
	text-align:center;
display:block;
}


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









#landing
{
background-color:black;
	width:1600px;
	height:800px;
	position:absolute;
	left:0%;
	top:0%;
	z-index:30;
	text-align:center;
display:block;
	border:solid 2px black;
}
#entrer
{
	width:200px;
	height:200px;
	text-align:center;
	background-color:grey;
	border-radius:200px;
	z-index:4;
	text-align:center;
display:block;
	border:solid 4px white;
		background-size: 200px 200px;
		background-image:url(images/iconeyinyang.png); 
			position:absolute;
	top:300px;
	left:700px;
	cursor:pointer;
}


#menu
{
background-color:#cccccc;
	width:1600px;
	height:800px;
	position:absolute;
	left:0%;
	top:0%;
	z-index:19;
	text-align:center;
display:block;
}

#settings
{
background-color:grey;
	width:1600px;
	height:800px;
	position:absolute;
	left:0%;
	top:0%;
	z-index:20;
	text-align:center;
display:none;
}

#themes
{
	background-color:#e6e6e6;
	width:500px;
	height:640px;
	position:absolute;
	left:20px;
	top:30px;
	z-index:1;
	text-align:center;
	display:block;
	border-radius:20px;
	  font-size: 22px;
    font-weight: bold;
	font-family:Verdana;
}
#modes
{
	background-color:#e6e6e6;
	width:500px;
	height:640px;
	position:absolute;
	left:540px;
	top:30px;
	z-index:1;
	text-align:center;
	display:block;
	border-radius:20px;
	    font-size: 22px;
    font-weight: bold;
	font-family:Verdana;
}
#testsetting
{
	background-color:#e6e6e6;
	width:500px;
	height:640px;
	position:absolute;
	left:1060px;
	top:30px;
	z-index:1;
	text-align:center;
	display:block;
	border-radius:20px;
}

#quitsettings
{
	position:absolute;
	left:645px;
	bottom:40px;
	z-index:10;
	text-align:center;
	display:block;
}

#endgame
{

background-color:transparent;
	width:1600px;
	height:800px;
	position:absolute;
	left:0%;
	top:0%;
	z-index:50;
	text-align:center;
display:none;
}

#masqueendgame
{
	background-image:url(images/endgame.png);
	background-size: 900px 800px;
background-color:black;
	width:900px;
	height:800px;
	position:absolute;
	left:450px;
	top:0px;
	z-index:1;
	text-align:center;
display:block;
border-radius:20px;
}
#masqueendgamecontrol
{
background-color:black;
	width:200px;
	height:800px;
	position:absolute;
	left:0px;
	top:0px;
	z-index:1;
	text-align:center;
display:block;
	cursor:pointer;
		color:white;
	font-size:20px;
	font-weight:bold;
	font-family:Verdana;
}

#inter
{

background-color:#d9d9d9;
	width:1600px;
	height:800px;
	position:absolute;
	left:0%;
	top:0%;
	z-index:30;
	text-align:center;
display:none;
	color:black;
	font-size:24px;
	font-weight:bold;
	font-family:Verdana;
	cursor:pointer;
	font-style:italic;
}
#masqueia
{
background-color:#d9d9d9;
	width:1600px;
	height:800px;
	position:absolute;
	left:0%;
	top:0%;
	z-index:31;
	text-align:center;
display:none;
}

#deckbuilding
{
background-color:#cccccc;
	width:1600px;
	height:800px;
	position:absolute;
	left:0%;
	top:0%;
	z-index:20;
	text-align:center;
display:none;
}

#affrontement
{
background-color:#cccccc;
	width:1600px;
	height:800px;
	position:absolute;
	left:0%;
	top:0%;
	z-index:17;
	text-align:center;
display:none;
}
#affrontementj1
{
background-color:grey;
	width:650px;
	height:800px;
	position:absolute;
	left:0px;
	top:0px;
	z-index:1;
	text-align:center;
	border-radius:30px;
		font-weight:bold;
	font-family:Verdana;
	font-size:26px;
	font-style:italic;
}
#affrontementj2
{
background-color:grey;
	width:650px;
	height:800px;
	position:absolute;
	right:0px;
	top:0px;
	z-index:1;
	text-align:center;
	border-radius:30px;
			font-weight:bold;
	font-family:Verdana;
	font-size:26px;
	font-style:italic;
}

#masquecontrol
{
	background-image:url(images/masquecontrol.png); 
background-size: 200px 800px;
background-color:black;
	width:200px;
	height:800px;
	position:absolute;
	left:0%;
	top:0%;
	z-index:5;
	text-align:center;
display:none;
	border-radius:10px;
}


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

#focus
{background-image:url(images/focusvide.png); 
background-size: 180px 235px;
	background-color:grey;
background-size: 180px 235px;
	width:180px;
	height:235px;
	position:absolute;
	left:7px;
	top:410px;
	z-index:5;
	display:block;	
	text-align:center;
		border-radius:36px;
		border:solid 2px black;
}

#info
{
	background-color:white;
	background-repeat:no-repeat;
	background-size:100%;
	width:170px;
	height:110px;
	position:absolute;
	left:8px;
	bottom:10px;
	z-index:5;
	display:block;	
	text-align:center;
	border-radius:10px;
	color:black;
	font-size:14px;
	font-weight:bold;
	font-family:Verdana;
	padding-top:15px;
	padding-left:5px;
	padding-right:5px;
	border:solid 2px black;
	font-style: italic;
}


#historique
{	
		background-size: 200px 200px;
	background-color:transparent;
	background-repeat:no-repeat;
	background-size:100%;
	width:200px;
	height:200px;
	position:absolute;
	left:0px;
	top:190px;
	z-index:5;
	display:block;	
	text-align:center;
	border-radius:20px;
	font-size:2px;
}

#historique1j1
{
	margin-left:0px;
}
#historique1j2
{
	margin-left:0px;
}

.histo
{

	width:50px;
	height:65px;
	text-align:center;
	background-color:white;
	border-radius:9px;
	margin-top:28px;
	margin-left:6px;
	z-index:3;
	display:inline-block;
	background-size: 50px 65px;
	cursor:pointer;
	border:solid 1px black;
		background-image:url(images/historiquevide.png);
		background-size: 50px 65px;
}





#rules1
{
	background-image:url(images/rules1.png);
	z-index:20;
}
#rules2
{
	background-image:url(images/rules2.png);
	z-index:19;
}
#rules3
{
	background-image:url(images/rules3.png);
	z-index:18;
}
#rules4
{
	background-image:url(images/rules4.png);
	z-index:17;
}
#rules5
{
	background-image:url(images/rules5.png);
	z-index:16;
}
#rules6
{
	background-image:url(images/rules6.png);
	z-index:15;
}
#rules7
{
	background-image:url(images/rules7.png);
	z-index:14;
}
#rules8
{
	background-image:url(images/rules8.png);
	z-index:13;
}
#rules9
{
	background-image:url(images/rules9.png);
	z-index:12;
}
#rules10
{
	background-image:url(images/rules10.png);
	z-index:11;
}
#rules11
{
	background-image:url(images/rules11.png);
	z-index:10;
}
#rules12
{
	background-image:url(images/rules12.png);
	z-index:9;
}
#rules13
{
	background-image:url(images/rules13.png);
	z-index:8;
}
#rules14
{
	background-image:url(images/rules14.png);
	z-index:7;
}
#rules15
{
	background-image:url(images/rules15.png);
	z-index:6;
}

#rules
{
	background-color:grey;
	background-repeat:no-repeat;
	background-size:100%;
	width:1600px;
	height:800px;
	position:absolute;
	left:0%;
	top:0%;
	z-index:40;
	display:none;	
}

.reglesdujeu {
		background-color:black;
	width:1400px;
	height:800px;
	background-size:100%;
	position:absolute;
	left:100px;
	top:0%;
	z-index:1;
	text-align:center;
	display:block;
}



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



#header
{
		background-color:transparent;

	background-repeat:no-repeat;
	background-size:100%;
	width:200px;
	height:180px;
	position:absolute;
	left:0px;
	top:0px;
	display:block;
z-index:2;
	font-weight:bold;
	text-align:center;
color:black;
		
}


.card
{background-color:grey; background-size: 130px 170px; border-radius:24px; z-index:6; width:130px; height:170px;
display:inline-block;cursor:pointer;
	margin-top:23px;
	margin-left:14px;
}
.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%}



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



.btn {
	background-color:#e6e6e6;
	border-radius:60px;
	border:3px solid black;
	display:block;
	cursor:pointer;
	color:black;
	font-weight:bold;
	font-family:Arial;
	font-size:18px;
	padding:16px 20px;
	text-decoration:none;
	margin-top:30px;
	width:300px;
		margin:0 auto;
		margin-top:40px;
}
.btn:hover {
	background-color: #ffd11a;
}
.btn2 {
	background-color:#ff1a1a;
	border-radius:50px;
	border:3px solid black;
	display:inline;
	cursor:pointer;
	color:black;
	font-family:Arial;
	font-size:17px;
	padding:12px 12px;
	text-decoration:none;
	font-weight:bold;
	width:150px;
	height:50px;
	z-index:1;
}
.btn2:hover {
	background-color: #00cc00;
}
.btn2:focus {
	background-color:#ffcc00;		
}

.btncontrol {
	background-color:black;
	border-radius:40px;
	border:4px solid white;
	display:block;
	cursor:pointer;
	color:white;
	font-weight:bold;
	font-family:Arial;
	font-size:17px;
	padding:10px 10px;
	text-decoration:none;
	width:160px;
		height:50px;
		margin-left:20px;
}
.btncontrol:hover {
	background-color: #990000;
}


.btnstart {
	background-color:#000000;

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



.btnzoom {
	background-color:#000000;
	border-radius:120px;
	border:2px solid white;
	display:inline;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:16px;
	font-weight:bold;
	
text-align:center;

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

.btn3 {
	background-color:#e6e6e6;
	border-radius:50px;
	border:3px solid black;
	display:inline;
	cursor:pointer;
	color:black;
	font-family:Arial;
	font-size:17px;
	padding:12px 12px;
	text-decoration:none;
	font-weight:bold;
	width:170px;
	height:50px;
	z-index:1;
	margin-top:49px;
	margin-left:50px;
}
.btn3:hover {
	background-color: #00cc00;
}
.btn3:focus {
	background-color:#ffcc00;		
}

.btn4 {
	background-color:#00cc00;
	border-radius:50px;
	border:3px solid black;
	display:block;
	cursor:pointer;
	color:black;
	font-weight:bold;
	font-family:Arial;
	font-size:17px;
	padding:10px 10px;
	text-decoration:none;
	width:200px;
	height:50px;
		margin:0 auto;
		margin-top:20px;
}
.btn4:hover {
	background-color: #ffcc00;
}


.btn5 {
	background-color:#e6e6e6;
	border-radius:50px;
	border:3px solid black;
	display:inline;
	cursor:pointer;
	color:black;
	font-family:Arial;
	font-size:17px;
	padding:12px 12px;
	text-decoration:none;
	font-weight:bold;
	width:170px;
	height:50px;
	z-index:1;
	margin-top:49px;
	margin-left:50px;
}
.btn5:hover {
	background-color: #00cc00;
}
.btn5:focus {
	background-color:#ffcc00;		
}

.btn6 {
	background-color:#e6e6e6;
	border-radius:50px;
	border:3px solid black;
	display:inline;
	cursor:pointer;
	color:black;
	font-family:Arial;
	font-size:16px;
	padding:12px 12px;
	text-decoration:none;
	font-weight:bold;
	width:100px;
	height:50px;
	z-index:1;
	margin-top:30px;
	margin-left:86px;
}
.btn6:hover {
	background-color: #00cc00;
}
.btn6:focus {
	background-color:#ffcc00;		
}


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

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



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










.avancementhead
{  border:none;
display:inline;
   /* -moz-box-sizing: border-box;
         box-sizing: border-box;
		 */
    width: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;
	
}


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


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

progress {
  border-radius:10px; 
  width: 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;
 top: 1%;
  right: 1%;
position:absolute;
	z-index:60;
	font-size:14px;
	
}
#enlarge
{
		background-color:transparent;
	text-align:center;
	width:100px;
	height:90px;
	color:white;

display:block;
	z-index:21;
	font-size:14px;
	
}



/* Tooltip text */
.optxp .tooltiptext {
  visibility: hidden;
  width: 200px;
  height:200px;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 10px 0;
  border-radius: 10px;
 bottom: 0%;
  left: 0%;
 	border:3px solid white;  box-sizing: border-box;
 font-size:20px;
  /* Position the tooltip text - see examples below! */
  position: absolute;
  z-index: 10;
}

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

#boutonendturn
{
margin-top:70px;	
}


#boutonrules {
	background-color:grey;
	border-radius:40px;
	border:3px solid black;
	display:block;
	cursor:pointer;
	color:black;
	font-weight:bold;
	font-family:Arial;
	font-size:18px;

	text-decoration:none;
	width:40px;
		height:40px;
	position:absolute;
	left:20px;
	top:10px;
}
#boutonrules:hover {
	background-color: #990000;
}


#plateau
{
 
background-size: 1200px 400px;
	background-color:transparent;
	background-repeat:no-repeat;
	background-size:100%;
	width:1200px;
	height:800px;
	position:absolute;
	left:300px;
	top:0px;
	z-index:1;
	display:block;	
}

#masqueterrain1
{
	background-color:transparent;
	background-repeat:no-repeat;
	background-size:100%;
	width:1400px;
	height:250px;
	position:absolute;
	left:-100px;
	bottom:0px;
	z-index:5;
	display:none;	
}
#masqueterrain2
{
	background-color:transparent;
	background-repeat:no-repeat;
	background-size:100%;
	width:1400px;
	height:250px;
	position:absolute;
	left:-100px;
	top:0px;
	z-index:5;
	display:none;	
}
#masquehero1
{
	background-color:transparent;
	background-repeat:no-repeat;
	background-size:100%;
	width:180px;
	height:340px;
	position:absolute;

	z-index:5;
	display:block;	
}
#masquehero2
{
	background-color:transparent;
	background-repeat:no-repeat;
	background-size:100%;
	width:180px;
	height:340px;
	position:absolute;

	z-index:5;
	display:block;	
}

#jaugeecartsoleil
{
background-image:url(images/jauge.png); 
background-size: 60px 250px;
background-color:transparent;
	background-repeat:no-repeat;
	background-size:100%;
	width:60px;
	height:250px;
	position:absolute;
	left:70px;
	top:275px;
	z-index:3;
	display:block;
	cursor:pointer;
}
#jaugeecartlune
{
background-image:url(images/jauge.png); 
background-size: 60px 250px;
background-color:transparent;
	background-repeat:no-repeat;
	background-size:100%;
	width:60px;
	height:250px;
	position:absolute;
	right:70px;
	top:275px;
	z-index:3;
	display:block;
	cursor:pointer;
}



#terrain1
{
background-image:url(images/terrain.png); 
background-size: 1200px 400px;
	background-color:transparent;
	background-repeat:no-repeat;
	background-size:100%;
	width:1200px;
	height:400px;
	position:absolute;
	left:0px;
	top:400px;
	z-index:1;
	display:block;	
}

#zone1
{background-image:url(images/zone.png); 
background-size: 900px 150px;
	background-color:transparent;
	border-radius:20px;
	background-repeat:no-repeat;
	background-size:100%;
	width:900px;
	height:150px;
	position:absolute;
	left:150px;
	top:0px;
	z-index:9;
	display:block;	
	text-align:center;
	cursor:pointer;
}

#mana1
{background-image:url(images/mana.png); 
background-size: 800px 50px;
	background-color:#bfbfbf;
	background-repeat:no-repeat;
	background-size:100%;
	width:800px;
	height:20px;
	position:absolute;
	left:200px;
	top:160px;
	z-index:7;
	display:block;
border:solid 2px black;
border-radius:50px;	
}

#main1
{
background-size: 900px 200px;
	background-color:transparent;
	background-repeat:no-repeat;
	background-size:100%;
	width:900px;
	height:200px;
	position:absolute;
	left:150px;
	top:200px;
	z-index:2;
	display:block;	
	text-align:center;
}

#masquemain1
{background-image:url(images/masquemain.png); 
background-size: 900px 200px;
	background-color:#d9d9d9;
	background-repeat:no-repeat;
	background-size:100%;
	width:900px;
	height:268px;
	position:absolute;
	left:150px;
	bottom:0px;
	z-index:8;
	display:none;	
	text-align:center;
}


#jaugelune1
{background-image:url(images/jauge.png); 
background-size: 60px 250px;
background-color:transparent;
	background-repeat:no-repeat;
	background-size:100%;
	width:60px;
	height:250px;
	position:absolute;
	right:70px;
	top:120px;
	z-index:3;
	display:block;	
	cursor:pointer;

}

#jaugesoleil1
{background-image:url(images/jauge.png); 
background-size: 60px 250px;
background-color:transparent;
	background-repeat:no-repeat;
	background-size:100%;
	width:60px;
	height:250px;
	position:absolute;
	left:70px;
	top:120px;
	z-index:3;
	display:block;	
	cursor:pointer;

}


#terrain2
{
background-image:url(images/terrain.png); 
background-size: 1200px 400px;
	background-color:transparent;
	background-repeat:no-repeat;
	background-size:100%;
	width:1200px;
	height:400px;
	position:absolute;
	left:0px;
	top:0px;
	z-index:1;
	display:block;	
}

#zone2
{background-image:url(images/zone.png); 
background-size: 900px 150px;
	background-color:transparent;
	border-radius:20px;
	background-repeat:no-repeat;
	background-size:100%;
	width:900px;
	height:150px;
	position:absolute;
	left:150px;
	top:250px;
	z-index:9;
	display:block;	
	text-align:center;
	cursor:pointer;
}

#mana2
{background-image:url(images/mana.png); 
background-size: 800px 50px;
	background-color:#bfbfbf;
	background-repeat:no-repeat;
	background-size:100%;
	width:800px;
	height:20px;
	position:absolute;
	left:200px;
	bottom:160px;
	z-index:7;
	display:block;
border:solid 2px black;
border-radius:50px;		
}

#main2
{
background-size: 900px 200px;
	background-color:transparent;
	background-repeat:no-repeat;
	background-size:100%;
	width:900px;
	height:200px;
	position:absolute;
	left:150px;
	top:0px;
	z-index:2;
	display:block;	
	text-align:center;
}

#masquemain2
{background-image:url(images/masquemain.png); 
background-size: 900px 200px;
	background-color:#d9d9d9;
	background-repeat:no-repeat;
	background-size:100%;
	width:900px;
	height:268px;
	position:absolute;
	left:150px;
	top:0px;
	z-index:8;
	display:none;	
	text-align:center;
}

#jaugelune2
{background-image:url(images/jauge.png); 
background-size: 60px 250px;
background-color:transparent;
	background-repeat:no-repeat;
	background-size:100%;
	width:60px;
	height:250px;
	position:absolute;
	right:70px;
	bottom:120px;
	z-index:3;
	display:block;
	cursor:pointer;

}

#jaugesoleil2
{background-image:url(images/jauge.png); 
background-size: 60px 250px;
background-color:transparent;
	background-repeat:no-repeat;
	background-size:100%;
	width:60px;
	height:250px;
	position:absolute;
	left:70px;
	bottom:120px;
	z-index:3;
	display:block;
	cursor:pointer;

}





#piocheyin1
{background-image:url(images/piocheyin.png); 
background-size: 130px 170px;
	background-color:black;
	width:130px;
	height:170px;
	position:absolute;
	right:-80px;
	bottom:10px;
	z-index:4;
	display:block;	
	border-radius:26px;
	border:solid 3px black;
}

#piocheyang1
{background-image:url(images/piocheyang.png); 
background-size: 130px 170px;
	background-color:white;

	width:130px;
	height:170px;
	position:absolute;
	left:-80px;
	bottom:10px;
	z-index:4;
	display:block;	
	border-radius:26px;
	border:solid 3px black;
}



#piocheyin2
{background-image:url(images/piocheyin.png); 
background-size: 130px 170px;
	background-color:black;

	width:130px;
	height:170px;
	position:absolute;
	right:-80px;
	top:10px;
	z-index:4;
	display:block;	
	border-radius:26px;
	border:solid 3px black;
}

#piocheyang2
{background-image:url(images/piocheyang.png); 
background-size: 130px 170px;
	background-color:white;

	width:130px;
	height:170px;
	position:absolute;
	left:-80px;
	top:10px;
	z-index:4;
	display:block;	
	border-radius:26px;
	border:solid 3px black;
}

#endpiocheyin1
{background-image:url(images/endpioche.png); 
background-size: 130px 170px;
	background-color:black;
	width:130px;
	height:170px;
	position:absolute;
	right:-80px;
	bottom:10px;
	z-index:5;
	display:none;	
	border-radius:26px;
	border:solid 3px black;
}
#endpiocheyang1
{background-image:url(images/endpioche.png); 
background-size: 130px 170px;
	background-color:black;
	width:130px;
	height:170px;
	position:absolute;
	left:-80px;
	bottom:10px;
	z-index:5;
	display:none;	
	border-radius:26px;
	border:solid 3px black;
}
#endpiocheyin2
{background-image:url(images/endpioche.png); 
background-size: 130px 170px;
	background-color:black;
	width:130px;
	height:170px;
	position:absolute;
	right:-80px;
	top:10px;
	z-index:5;
	display:none;	
	border-radius:26px;
	border:solid 3px black;
}
#endpiocheyang2
{background-image:url(images/endpioche.png); 
background-size: 130px 170px;
	background-color:black;
	width:130px;
	height:170px;
	position:absolute;
	left:-80px;
	top:10px;
	z-index:5;
	display:none;	
	border-radius:26px;
	border:solid 3px black;
}


.iconepuissance
{

	width:20px;
	height:20px;
	text-align:center;
	background-color:transparent;
	border:none;
	color:black;
	font-size:14px;
	font-weight:bold;
	border-radius:20px;
	margin-top:100px;
	margin-left:0px;
cursor:pointer;
}

.iconepuissanceunit
{
	width:24px;
	height:25px;
	text-align:center;
	background-color:transparent;
	border:none;
	color:black;
	font-size:14px;
	font-weight:bold;
	border-radius:30px; 
	margin-top:77px;
	margin-left:0px;
	cursor:pointer;
}


.iconeunite
{background-color:transparent; background-image:url(images/iconeunitebase.png); background-size: 130px 110px; border-radius:10px; z-index:7; width:130px; height:110px;
display:inline-block;cursor:pointer;
	margin-top:15px;
	margin-left:16px;
	text-align:center;
}
.iconeunite:hover {
filter: contrast(1.4);
}



.emptymana
{background-image:url(images/manavide.png);
	width:44px;
	height:44px;
	text-align:center;
	background-color:grey;
	border:none;
	z-index:6;
display:inline-block;
border-radius:50px;
background-size: 44px 44px;
border:solid 2px black;
}


.iconeyinyang
{
background-image:url(images/manabase.png); 
	width:70px;
	height:70px;
	text-align:center;
	background-color:black;
	border:none;
	color:white;
	font-size:12px;
	font-weight:bold;
	border-radius:70px;
	position:absolute;
	left:363px;
	top:-28px;
z-index:3;
background-size: 70px 70px;
border:solid 3px black;
}


#manaj1yin1
{background-image:url(images/manayin.png); 
	position:absolute;
	right:290px;
	top:-14px;
}
#manaj1yin2
{background-image:url(images/manayin.png); 
	position:absolute;
	right:220px;
		top:-14px;
	display:none;
}
#manaj1yin3
{background-image:url(images/manayin.png); 
	position:absolute;
	right:150px;
	top:-14px;
	display:none;
}
#manaj1yin4
{background-image:url(images/manavide.png); 
	position:absolute;
	right:80px;
	top:-14px;
	display:none;
}
#manaj1yin5
{background-image:url(images/manavide.png); 
	position:absolute;
	right:10px;
	top:-14px;
	display:none;
}

#manaj1yang1
{background-image:url(images/manayang.png); 
	position:absolute;
	left:290px;
	top:-14px;
}
#manaj1yang2
{background-image:url(images/manayang.png); 
	position:absolute;
	left:220px;
	top:-14px;
	display:none;
}
#manaj1yang3
{background-image:url(images/manayang.png); 
	position:absolute;
	left:150px;
	top:-14px;
	display:none;
}
#manaj1yang4
{background-image:url(images/manavide.png); 
	position:absolute;
	left:80px;
		top:-14px;
	display:none;
}
#manaj1yang5
{background-image:url(images/manavide.png); 
	position:absolute;
	left:10px;
	top:-14px;
	display:none;
}

#manaj2yin1
{background-image:url(images/manayin.png); 
	position:absolute;
	right:290px;
	top:-14px;
}
#manaj2yin2
{background-image:url(images/manayin.png); 
	position:absolute;
	right:220px;
	top:-14px;
	display:none;
}
#manaj2yin3
{background-image:url(images/manayin.png); 
	position:absolute;
	right:150px;
		top:-14px;
	display:none;
}
#manaj2yin4
{background-image:url(images/manavide.png); 
	position:absolute;
	right:80px;
		top:-14px;
	display:none;
}
#manaj2yin5
{background-image:url(images/manavide.png); 
	position:absolute;
	right:10px;
		top:-14px;
	display:none;
}

#manaj2yang1
{background-image:url(images/manayang.png); 
	position:absolute;
	left:290px;
		top:-14px;
}
#manaj2yang2
{background-image:url(images/manayang.png); 
	position:absolute;
	left:220px;
		top:-14px;
	display:none;
}
#manaj2yang3
{background-image:url(images/manayang.png); 
	position:absolute;
	left:150px;
		top:-14px;
	display:none;
}
#manaj2yang4
{background-image:url(images/manavide.png); 
	position:absolute;
	left:80px;
		top:-14px;
	display:none;
}
#manaj2yang5
{background-image:url(images/manavide.png); 
	position:absolute;
	left:10px;
		top:-14px;
	display:none;
}



.camps
{
	width:50px;
	height:20px;
	text-align:center;
	background-color:transparent;
	border:none;
	color:white;
	font-size:15px;
	font-weight:bold;	
margin-left:13px;
z-index:4;
}


#totallunej1
{
color:black;
margin-top:55px;
}
#totalsoleilj1
{
color:black;
margin-top:55px;
}
#totallunej2
{
color:black;
margin-top:175px;
}
#totalsoleilj2
{
color:black;
margin-top:175px;
}





.avancement
{
	width:30px;
	height:200px;
	text-align:center;
	background-color:transparent;
	border-radius:40px;
	margin-top:0px;
	margin-left:0px;
z-index:3;
border:solid 4px black;
box-sizing: border-box;
}

.remplissage
{
	width:26px;
	height:100px;
	text-align:center;
	background-color:blue;
	border-radius:40px;

	position:absolute;
	left:0px;
	bottom:0px;
z-index:3;
border:solid 2px black;
box-sizing: border-box;
}

.iconejauge
{
	width:50px;
	height:50px;
	text-align:center;
	background-color:red;
	border-radius:50px;
	position:absolute;
	left:0px;
	bottom:0px;
z-index:5;
background-size: 50px 50px;
border:solid 4px black;
}


#avancementsoleil2
{
	position:absolute;
	left:18px;
	top:0px;
}
#avancementlune2
{
	position:absolute;
	left:18px;
	top:0px;
}
#avancementsoleil1
{
	position:absolute;
	left:18px;
	bottom:0px;
}
#avancementlune1
{
	position:absolute;
	left:18px;
	bottom:0px;
}


#remplilune2
{
	position:absolute;
	left:-2px;
	top:0px;
		background-color:black;
}
#remplisoleil2
{
	position:absolute;
	left:-2px;
	top:0px;
	background-color:white;
}
#remplilune1
{
	position:absolute;
	left:-2px;
	bottom:0px;
	background-color:black;
}
#remplisoleil1
{
	position:absolute;
	left:-2px;
	bottom:0px;
		background-color:white;
}

#iconejaugesoleil1
{
	position:absolute;
	left:4px;
	bottom:-18px;
	background-image:url(images/iconesoleil.png); 

}
#iconejaugelune1
{
	position:absolute;
	left:4px;
	bottom:-18px;
	background-image:url(images/iconelune.png); 
	border:solid 4px white;
}
#iconejaugesoleil2
{
	position:absolute;
	left:4px;
	top:-18px;
	background-image:url(images/iconesoleil.png); 
}
#iconejaugelune2
{
	position:absolute;
	left:4px;
	top:-18px;
	background-image:url(images/iconelune.png); 
		border:solid 4px white;
}


.avancementecart
{
	width:30px;
	height:100px;
	text-align:center;
	background-color:transparent;
	border-radius:40px;
	margin-top:0px;
	margin-left:0px;
z-index:3;
border:solid 4px black;
box-sizing: border-box;
}

.remplissageecart
{
	width:26px;
	height:10px;
	text-align:center;
	background-color:blue;
	border-radius:40px;

	position:absolute;
	left:0px;
	bottom:0px;
z-index:3;
border:solid 2px black;
box-sizing: border-box;
}
.iconejaugeecart
{
	width:50px;
	height:50px;
	text-align:center;
	background-color:blue;
	border-radius:50px;
border:solid 2px black;
	position:absolute;
	left:4px;
	top:100px;
z-index:5;

}

#iconejaugeecartsoleil
{
	background-color:white;
	border:solid 4px black;
	color:black;
}
#iconejaugeecartlune
{
	background-color:black;
	border:solid 4px white;
	color:white;
}

#avancementecartsoleil2
{
	position:absolute;
	left:18px;
	top:25px;
}
#avancementecartlune2
{
	position:absolute;
	left:18px;
	top:25px;
}
#avancementecartsoleil1
{
	position:absolute;
	left:18px;
	bottom:25px;
}
#avancementecartlune1
{
	position:absolute;
	left:18px;
	bottom:25px;
}


#rempliecartsoleil1
{
	position:absolute;
	left:-2px;
	top:0px;
	background-color:white;
}
#rempliecartsoleil2
{
	position:absolute;
	left:-2px;
	bottom:0px;
	background-color:white;
}
#rempliecartlune1
{
	position:absolute;
	left:-2px;
	top:0px;
	background-color:black;
}
#rempliecartlune2
{
	position:absolute;
	left:-2px;
	bottom:0px;
	background-color:black;
}

.inputecart
{
	width:50px;
	height:20px;
	text-align:center;
	background-color:transparent;
	border:none;
	color:white;
	font-size:20px;
	font-weight:bold;	
margin-left:6px;
margin-top:15px;

}
#ecartsoleil
{
	color:black;
}


.iconegain
{
	width:130px;
	height:110px;
	text-align:center;
	background-color:transparent;
	border-radius:10px;
	z-index:8;
	text-align:center;
	position:absolute;
	background-size: 130px 110px;
}

.inputgain
{
	width:50px;
	height:30px;
	text-align:center;
	background-color:transparent;
	border:none;
	color:black;
	font-size:28px;
	font-weight:bold;	
margin-left:-15px;
margin-top:31px;
z-index:9;

}




#contientfactionsyang
{
background-color:grey;
	width:650px;
	height:800px;
	position:absolute;
	left:0px;
	top:0px;
	z-index:1;
	text-align:center;
	border-radius:30px;
}

#contientfactionsyin
{
background-color:grey;
	width:650px;
	height:800px;
	position:absolute;
	right:0px;
	top:0px;
	z-index:1;
	text-align:center;
	border-radius:30px;
}

.options
{
	width:300px;
	height:340px;
	text-align:center;
	background-color:transparent;
	border-radius:10px;
	z-index:2;
	text-align:center;
display:inline-block;
}

.options2
{
	width:300px;
	height:200px;
	text-align:center;
	background-color:transparent;
	border-radius:10px;
	z-index:2;
	text-align:center;
display:inline-block;
}


.iconeoption
{
	width:100px;
	height:100px;
	text-align:center;
	background-color:white;
	border-radius:100px;
	z-index:2;
	text-align:center;
	display:block;
	position:absolute;
	left:15px;
	top:20px;
	border:solid 4px black;
	background-size: 100px 100px;
}

.iconeoptionpouvoir
{
	width:100px;
	height:100px;
	text-align:center;
	background-color:white;
	border-radius:100px;
	z-index:2;
	text-align:center;
	display:inline-block;
	border:solid 4px black;
	background-size: 100px 100px;
	margin-top:10px;
	margin-left:80px;
}

.descriptif
{
	width:260px;
	height:180px;
	background-color:white;
	border-radius:20px;
	z-index:2;
	text-align:center;
	position:absolute;
	left:10px;
	bottom:20px;
	border:solid 2px black;	
	color:black;
	font-size:16px;
	font-family:Verdana;
		background-size: 260px 180px;
}

#votredeck
{
background-color:#f2f2f2;
	width:300px;
	height:300px;
	position:absolute;
	left:650px;
	top:250px;
	z-index:2;
	text-align:center;
		border-radius:20px;
		border:solid 2px black;	
		box-sizing:border-box;
}

#votredeckyang
{
	width:100px;
	height:100px;
	text-align:center;
	background-color:red;
	border-radius:100px;
	z-index:2;
	text-align:center;
display:inline-block;
margin-top:65px;
margin-left:5px;
	border:solid 4px black;
		background-size: 100px 100px;
		background-image:url(images/manayang.png); 
}

#votredeckyin
{
	width:100px;
	height:100px;
	text-align:center;
	background-color:yellow;
	border-radius:100px;
	z-index:2;
	text-align:center;
display:inline-block;
margin-top:65px;
margin-left:15px;
	border:solid 4px black;
		background-size: 100px 100px;
		background-image:url(images/manayin.png); 
}



#option1
{
	position:absolute;
	left:10px;
	top:120px;
}
#option2
{
	position:absolute;
	right:10px;
	top:120px;
}
#option3
{
	position:absolute;
	left:10px;
	bottom:0px;
}
#option4
{
	position:absolute;
	right:10px;
	bottom:0px;
}

#option5
{
	position:absolute;
	left:25px;
	top:120px;
}
#option6
{
	position:absolute;
	right:0px;
	top:120px;
}
#option7
{
	position:absolute;
	left:25px;
	bottom:0px;
}
#option8
{
	position:absolute;
	right:0px;
	bottom:0px;
}


#iconeoption1
{background-image:url(images/iconefactionange1.png); 
}
#iconeoption2
{background-image:url(images/iconefactiondemon1.png); 
}
#iconeoption3
{background-image:url(images/iconefactionhumain1.png); 
}
#iconeoption4
{background-image:url(images/iconefactioncreature1.png); 
}

#iconeoption5
{background-image:url(images/iconefactionange2.png); 
}
#iconeoption6
{background-image:url(images/iconefactiondemon2.png); 
}
#iconeoption7
{background-image:url(images/iconefactionhumain2.png); 
}
#iconeoption8
{background-image:url(images/iconefactioncreature2.png); 
}


#optionconstruction1
{
	position:absolute;
	left:10px;
	top:50px;
}
#optionconstruction2
{
	position:absolute;
	right:10px;
	top:50px;
}
#optionconstruction3
{
	position:absolute;
	left:10px;
	top:300px;
}
#optionconstruction4
{
	position:absolute;
	right:10px;
	top:300px;
}

#optionconstruction5
{
	position:absolute;
	left:25px;
	top:50px;
}
#optionconstruction6
{
	position:absolute;
	right:0px;
	top:50px;
}
#optionconstruction7
{
	position:absolute;
	left:25px;
	top:300px;
}
#optionconstruction8
{
	position:absolute;
	right:0px;
	top:300px;
}

#iconeconstruction1
{background-image:url(images/iconefactionange1.png); 
}
#iconeconstruction2
{background-image:url(images/iconefactiondemon1.png); 
}
#iconeconstruction3
{background-image:url(images/iconefactionhumain1.png); 
}
#iconeconstruction4
{background-image:url(images/iconefactioncreature1.png); 
}

#iconeconstruction5
{background-image:url(images/iconefactionange2.png); 
}
#iconeconstruction6
{background-image:url(images/iconefactiondemon2.png); 
}
#iconeconstruction7
{background-image:url(images/iconefactionhumain2.png); 
}
#iconeconstruction8
{background-image:url(images/iconefactioncreature2.png); 
}

.titredeck
{
	width:550px;
	height:100px;
	background-color:white;
	border-radius:100px;
	z-index:2;
	text-align:center;
	position:absolute;
	left:48px;
	top:10px;
}

#titredeckyang
{background-image:url(images/titredeckyang.png); 
border:solid 4px black;
}
#titredeckyin
{background-image:url(images/titredeckyin.png); 
border:solid 4px white;
}

#descriptifoption1
{
background-image:url(images/descriptifoption1.png); 
}
#descriptifoption2
{
background-image:url(images/descriptifoption2.png); 
}
#descriptifoption3
{
background-image:url(images/descriptifoption3.png); 
}
#descriptifoption4
{
background-image:url(images/descriptifoption4.png); 
}
#descriptifoption5
{
background-image:url(images/descriptifoption5.png); 
}
#descriptifoption6
{
background-image:url(images/descriptifoption6.png); 
}
#descriptifoption7
{
background-image:url(images/descriptifoption7.png); 
}
#descriptifoption8
{
background-image:url(images/descriptifoption8.png); 
}



.paquetspioche
{
	cursor:pointer;
}
.paquetspioche:hover {
filter: contrast(1.6);
}



.champs {
	display:block;	
	position:absolute;
	top:10px;
	right:20px;
	width:160px;
	height:30px;
	text-align:center;
	background-color:transparent;
	border:none;
	color:black;
	font-size:22px;
	font-weight:bold;		
}

.champsjoueur {
	display:block;	
	position:absolute;
	top:13px;
	left:70px;
	width:95px;
	height:30px;
	text-align:center;
	background-color:transparent;
	border:solid 2px black;
	border-radius:30px;
	color:black;
	font-size:14px;
	font-weight:bold;		
}

.champshistorique {
	display:block;	
	width:180px;
	height:20px;
	text-align:center;
	background-color:transparent;
	border:none;
	color:black;
	font-size:14px;
	font-weight:bold;		
}
#historiquej1
{
	position:absolute;
	top:0px;
	left:10px;	
}
#historiquej2
{
	position:absolute;
	top:100px;
	left:10px;	
}

#annuleselection
{
	width:60px;
	height:60px;
	text-align:center;
	background-color:yellow;
	border-radius:60px;
	z-index:5;
	text-align:center;
display:none;
	border:solid 3px black;
		background-size: 60px 60px;
		background-image:url(images/annuleselection.png); 
			position:absolute;
	top:369px;
	left:-45px;
	cursor:pointer;
}
#annuleselection:hover {
filter: contrast(1.4);
}




#highlight1
{
	background-color:transparent;
	width:126px;
	height:166px;
	position:absolute;
	left:0px;
	top:0px;
	z-index:7;
	display:none;	
	border-radius:24px;
	border:solid 2px red;
}
#highlight2
{
	background-color:transparent;
	width:126px;
	height:166px;
	position:absolute;
	left:0px;
	top:0px;
	z-index:7;
	display:none;	
	border-radius:24px;
	border:solid 2px red;
}





#manacouleurdutour
{
	width:60px;
	height:60px;
	text-align:center;
	background-color:yellow;
	border-radius:60px;
	z-index:4;
	text-align:center;
display:block;
	border:solid 3px black;
		background-size: 60px 60px;
		background-image:url(images/manavide.png); 
			position:absolute;
	top:369px;
	left:-45px;
	cursor:pointer;
}


#animationspell2
{
	width:70px;
	height:70px;
	text-align:center;
	background-color:black;
	border-radius:70px;
	z-index:10;
	text-align:center;
	position:absolute;
	background-size: 70px 70px;
	display:none;
	border:solid 2px black;
}
#animationpouvoir
{
	width:70px;
	height:70px;
	text-align:center;
	background-color:black;
	border-radius:70px;
	z-index:10;
	text-align:center;
	position:absolute;
	background-size: 70px 70px;
	display:none;
	border:solid 2px black;
}


#animationspellgif
{background-image:url(images/eclair.gif); 
	width:600px;
	height:200px;
	text-align:center;
	background-color:transparent;
	border-radius:200px;
	z-index:15;
	text-align:center;
	position:absolute;
	background-size: 600px 200px;
	display:none;
}

.iconejeton
{
	width:40px;
	height:40px;
	text-align:center;
	background-color:transparent;
	border-radius:40px;
	z-index:16;
	text-align:center;
	position:absolute;
	background-size: 40px 40px;
	border:solid 3px black;
	background-image:url(images/iconelune.png); 
}

#animationdesspells
{
	background-color:red;
	width:900px;
	height:420px;
	position:absolute;
	left:150px;
	top:190px;
	z-index:18;
	display:none;	
	border-radius:10px;
}

#iconeanimationdesspells
{
	background-image:url(images/animationinvoc.png); 
background-size: 250px 250px;
	background-color:transparent;
	width:250px;
	height:250px;
	position:absolute;
	left:325px;
	top:85px;
	z-index:1;
	display:block;	
	border-radius:250px;
		border:solid 3px black;
}

#animationdesinvocations
{
	background-color:red;
	width:900px;
	height:420px;
	position:absolute;
	left:150px;
	top:190px;
	z-index:18;
	display:none;	
	border-radius:10px;
}
#iconeanimationdesinvocations
{
	background-image:url(images/animationinvoc.png); 
background-size: 342px 290px;
	background-color:transparent;
	width:342px;
	height:290px;
	position:absolute;
	left:320px;
	top:100px;
	z-index:1;
	display:none;	
	border-radius:10px;
}

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

background-size: 130px 130px;
	background-color:black;
	width:130px;
	height:130px;
	position:absolute;
	left:385px;
	top:145px;
	z-index:3;
	display:none;	
	border-radius:130px;
	border:solid 4px black;
}



#construction
{
background-color:#262626;
	width:1600px;
	height:800px;
	position:absolute;
	left:0%;
	top:0%;
	z-index:20;
	text-align:center;
display:none;
}
#constructiondedeck
{
background-color:#e6e6e6;
	width:1600px;
	height:800px;
	position:absolute;
	left:0%;
	top:0%;
	z-index:21;
	text-align:center;
display:none;
}
#deckencoursyang
{
background-color:#cccccc;
	width:470px;
	height:705px;
	position:absolute;
	left:10px;
	bottom:5px;
	z-index:1;
	text-align:center;
display:none;
border-radius:30px;
border:solid 2px black;
}
#deckencoursyin
{
background-color:#cccccc;
	width:470px;
	height:705px;
	position:absolute;
	left:10px;
	bottom:5px;
	z-index:1;
	text-align:center;
display:none;
border-radius:30px;
border:solid 2px black;
}

#factionsyang
{
	background-color:grey;
	width:650px;
	height:800px;
	position:absolute;
	left:0px;
	top:0px;
	z-index:1;
	text-align:center;
}
#factionsyin
{
	background-color:grey;
	width:650px;
	height:800px;
	position:absolute;
	right:0px;
	top:0px;
	z-index:1;
	text-align:center;
}

#contientpouvoirsyang
{
	background-color:grey;
	width:650px;
	height:200px;
	position:absolute;
	left:0px;
	bottom:50px;
	z-index:1;
	text-align:left;
}
#contientpouvoirsyin
{
	background-color:grey;
	width:650px;
	height:200px;
	position:absolute;
	left:0px;
	bottom:50px;
	z-index:1;
	text-align:left;
}

#deckconstruit
{
	background-color:#cccccc;
	width:300px;
	height:800px;
	position:absolute;
	left:650px;
	top:0px;
	z-index:1;
	text-align:center;
	border-radius:20px;
	border:solid 2px black;
	box-sizing:border-box;
}
#iconepouvoirconstruction1
{
	background-color:grey;
	background-image:url(images/iconeboostunit.png); 
	background-size: 100px 100px;
}
#iconepouvoirconstruction2
{
	background-color:grey;
	background-image:url(images/iconeoverdraw.png); 
	background-size: 100px 100px;
}
#iconepouvoirconstruction3
{
	background-color:grey;
	background-image:url(images/iconeinvocationunit.png); 
	background-size: 100px 100px;
}
#iconepouvoirconstruction4
{
	background-color:grey;
	background-image:url(images/iconeblast.png); 
	background-size: 100px 100px;
}
#iconepouvoirconstruction5
{
	background-color:grey;
	background-image:url(images/iconevoleunit.png); 
	background-size: 100px 100px;
}
#iconepouvoirconstruction6
{
	background-color:grey;
	background-image:url(images/iconepouvoir.png); 
	background-size: 100px 100px;
}

.iconeconstruction
{
	width:100px;
	height:100px;
	background-color:white;
	border-radius:100px;
	z-index:2;
	text-align:center;
	display:inline-block;
	border:solid 4px black;
	background-size: 100px 100px;
	margin-top:50px;
	margin-left:50px;
}




.carteconstruction
{background-image:url(images/focusvide.png); 
background-size: 160px 209px;
	background-color:grey;
	width:160px;
	height:209px;
	z-index:5;
	display:inline-block;	
	text-align:center;
		border-radius:30px;
		border:solid 2px black;
		margin-top:22px;
		margin-left:22px;
		cursor:pointer;
}
.carteconstruction:hover {
filter: contrast(1.4);
}

.iconepuissanceconstruction
{
	width:30px;
	height:30px;
	text-align:center;
	background-color:transparent;
	border:none;
	color:black;
	font-size:18px;
	font-weight:bold;
	border-radius:30px;
	margin-top:121px;
	margin-left:0px;
cursor:pointer;
}


.contientcartesconstruction
{
background-color:#e6e6e6;
	width:1000px;
	height:720px;
	position:absolute;
	right:100px;
	bottom:0px;
	z-index:2;
	text-align:center;
display:none;
border-radius:30px;
}

#boutonajoute
{
	width:300px;
	height:60px;
	text-align:center;
	background-color:yellow;
	border-radius:60px;
	z-index:5;
	text-align:center;
	border:solid 4px black;
	background-size: 300px 60px;
	background-image:url(images/boutonajoute.png); 
	position:absolute;
	top:6px;
	left:90px;
	cursor:pointer;
}
#boutonajoute:hover {
filter: contrast(1.4);
}

#boutonunites
{
	width:300px;
	height:60px;
	text-align:center;
	background-color:yellow;
	border-radius:60px;
	z-index:5;
	text-align:center;
	border:solid 4px black;
	background-size: 300px 60px;
	background-image:url(images/boutonunites.png); 
	position:absolute;
	top:6px;
	left:650px;
	cursor:pointer;
}
#boutonunites:hover {
filter: contrast(1.4);
}

#boutonsorts
{
	width:300px;
	height:60px;
	text-align:center;
	background-color:yellow;
	border-radius:60px;
	z-index:5;
	text-align:center;
	border:solid 4px black;
	background-size: 300px 60px;
	background-image:url(images/boutonsorts.png); 
	position:absolute;
	top:6px;
	left:1050px;
	cursor:pointer;
}
#boutonsorts:hover {
filter: contrast(1.4);
}

#boutonannuledeck
{
	width:60px;
	height:60px;
	text-align:center;
	background-color:yellow;
	border-radius:60px;
	z-index:5;
	text-align:center;
	border:solid 4px black;
	background-size: 60px 60px;
	background-image:url(images/annuleselection.png); 
	position:absolute;
	top:6px;
	right:20px;
	cursor:pointer;
}
#boutonannuledeck:hover {
filter: contrast(1.4);
}


#sauvegardelesdecks
{
display:none;
	position:absolute;
	left:50px;
	top:420px;
}
#nextpage
{background-image:url(images/next.png); 
background-size: 90px 90px;
background-color:transparent;
	width:90px;
	height:90px;
	position:absolute;
	right:10px;
	bottom:315px;
	z-index:19;
	text-align:center;
		cursor:pointer;
		border:solid 4px black;
		border-radius:90px;
}
#nextpage:hover {
filter: contrast(1.6);
}

#nextrules
{background-image:url(images/next.png); 
background-size: 90px 90px;
background-color:transparent;
	width:90px;
	height:90px;
	position:absolute;
	right:10px;
	bottom:315px;
	z-index:21;
	text-align:center;
		cursor:pointer;
		border:solid 4px black;
		border-radius:90px;
}
#nextrules:hover {
filter: contrast(1.6);
}

.carteminiature
{background-image:url(images/focusvide.png); 
background-size: 99px 130px;
	background-color:grey;
	width:99px;
	height:130px;
	z-index:5;
	display:inline-block;	
	text-align:center;
		border-radius:18px;
		border:solid 1px black;
		margin-top:7px;
		margin-left:8px;
}

#savedeck
{
	background-image:url(images/savedeck.png); 
background-size: 470px 80px;
background-color:green;
	width:470px;
	height:80px;
	position:absolute;
	left:10px;
	top:0px;
	z-index:6;
	text-align:center;
display:none;
cursor:pointer;
		border-radius:15px;
		border:solid 2px black;
		box-sizing:border-box;
}
#savedeck:hover {
filter: contrast(1.6);
}


#votredeckyangperso
{
	width:100px;
	height:100px;
	text-align:center;
	background-color:red;
	border-radius:100px;
	z-index:2;
	text-align:center;
display:inline-block;
margin-top:200px;
margin-left:0px;
	border:solid 4px black;
		background-size: 100px 100px;
		background-image:url(images/manayang.png); 
}

#votredeckyinperso
{
	width:100px;
	height:100px;
	text-align:center;
	background-color:yellow;
	border-radius:100px;
	z-index:2;
	text-align:center;
display:inline-block;
margin-top:200px;
margin-left:20px;
	border:solid 4px black;
		background-size: 100px 100px;
		background-image:url(images/manayin.png); 
}
#votrepouvoirperso
{
	width:100px;
	height:100px;
	text-align:center;
	background-color:grey;
	border-radius:100px;
	z-index:2;
	text-align:center;
display:inline-block;
margin-top:250px;
margin-left:0px;
	border:solid 4px black;
		background-size: 100px 100px;
		background-image:url(images/pouvoirperso.png); 
}


#boutoncreation
{
	display:none;
	margin-top:350px;
}



#pouvoirj1
{background-image:url(images/pouvoir.png); 
background-size: 130px 130px;
	background-color:transparent;
	width:130px;
	height:130px;
	position:absolute;

	z-index:4;
	display:block;	
	border-radius:10px;
	cursor:pointer;
}
#pouvoirj1:hover {
filter: contrast(1.4);
}
#pouvoirj2
{background-image:url(images/pouvoir.png); 
background-size: 130px 130px;
	background-color:transparent;
	width:130px;
	height:130px;
	position:absolute;

	z-index:4;
	display:block;	
	border-radius:10px;
	cursor:pointer;
}
#pouvoirj2:hover {
filter: contrast(1.4);
}



.gaintour
{
    width: 50px;
    height: 50px;
    text-align: center;
    background-color: grey;
    border-radius: 50px;
    z-index: 7;
    background-size: 50px 50px;
    border: solid 4px black;
    font-size: 22px;
    font-weight: bold;
	display:none;
}

#gaindutoursoleilj1
{
	position:absolute;
	left:3px;
	bottom:-18px;
	color: black;
	background-color: white;
}
#gaindutourlunej1
{
	position:absolute;
	left:3px;
	bottom:-18px;
	color: white;
	background-color: black;
	border-color: white;
}
#gaindutoursoleilj2
{
	position:absolute;
	left:3px;
	top:-18px;
	color: black;
	background-color: white;
}
#gaindutourlunej2
{
	position:absolute;
	left:3px;
	top:-18px;
	color: white;
	background-color: black;
	border-color: white;
}

#inputgagnant
{
	position:absolute;
	left:300px;
	top:150px;
	color: white;
	font-size:30px;
	    width: 300px;
    height: 80px;
}
#boutonfin
{
	position:absolute;
	left:300px;
	bottom:50px;

}




#displayinter
{background-image:url(images/pouvoir.png); 
background-size: 390px 330px;
	background-color:transparent;
	width:390px;
	height:330px;
	position:absolute;
	left:610px;
	top:220px;
	z-index:4;
	display:block;	
	border-radius:10px;
}
#displayia
{background-image:url(images/wait.gif); 
background-size: 400px 400px;
	background-color:transparent;
	width:400px;
	height:400px;
	position:absolute;
	left:600px;
	top:200px;
	z-index:4;
	display:block;	
	border-radius:10px;
}

.histointer
{background-image:url(images/historiquevide.png);
    width: 250px;
    height: 326px;
    text-align: center;
    background-color: grey;
    border-radius: 49px;
    z-index:7;
    background-size: 250px 326px;
    border: solid 4px black;
    font-size: 22px;
    font-weight: bold;
	display:inline-block;
	margin-top:100px;
margin-left:100px;
}
#historique1inter
{
	margin-left:10px;
}