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

body
{
background-color:#a6a6a6;
}

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



#king
{
		background-image:url(images/roi2.png);
	background-repeat:no-repeat;
	background-size:100%;
	width:120px;
	height:120px;
	position:absolute;
	left:290px;
	top:290px;
	z-index:5;
}
#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: rgb(219,219,219);
background: radial-gradient(circle, rgba(219,219,219,1) 0%, rgba(110,110,110,1) 48%);
/*background-color:#d9d9d9;*/
	
	width:100%;
	height:100%;
	position:absolute;
	left:0%;
	top:0%;
	z-index:9;
	text-align:center;
display:block;
}
#home
{
	background-image:url(images/back1.png);
	background-repeat:repeat;
	
	width:100%;
	height:100%;
	position:absolute;
	left:0%;
	top:0%;
	z-index:12;
	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: rgb(219,219,219);
background: radial-gradient(circle, rgba(219,219,219,1) 0%, rgba(110,110,110,1) 48%);
	width:100%;
	height:100%;
	position:absolute;
	left:0%;
	top:0%;
	z-index:9;
	text-align:center;

display:none;
}
#end
{
	background-color:black;
	background-repeat:no-repeat;
	background-size:100%;
	width:100%;
	height:100%;
	position:absolute;
	left:0%;
	top:0%;
	z-index:9;
	display:none;
	color:white;
	font-weight:bold;
	font-size:30px;
	text-align:center;
}
#rules
{
	background-color:#d9d9d9;
	background-repeat:no-repeat;
	background-size:100%;
	width:100%;
	height:100%;
	position:absolute;
	left:0%;
	top:0%;
	z-index:10;
	display:none;
	
}
#regles{

	text-align:center;
	background-image:url(images/regles1.png);
	
width:590px;
height:590px;
margin:0 auto;
text-align:center;
z-index:12;

}
#bouton3{
top:85%;
}
#queen
{
background-image:url(images/queen3.png);
	background-repeat:no-repeat;
	background-size:100%;
	width:90px;
	height:90px;
	position:absolute;
	left:0px;
	top:0px;
	z-index:4;
	opacity:0.6;
}


#board1
{
background-image:url(images/board1.png);
	background-repeat:no-repeat;
	background-size:100%;
	width:700px;
	height:700px;
	position:absolute;
	left:20%;
	top:6%;
}
#barrevie1
{

	
	
	position:absolute;
	left:20%;
	top:1%;
}
#info
{
	background-color: #e0ebeb;
	background-repeat:no-repeat;
	background-size:100%;
	width:300px;
	height:700px;
	position:absolute;
	left:20%;
	top:3%;
	text-align:center;
	font-size:20px;
}
#placer
{
	
	background-repeat:no-repeat;
	background-size:100%;
	width:1px;
	height:100px;
	
	left:10%;
	top:20%;
	text-align:center;
	font-size:20px;
		margin-left:40px;
		margin-top:10px;
	display:inline-block;
	
}
#info1
{
	background-color: #d9d9d9;
	background-repeat:no-repeat;
	background-size:100%;
	width:200px;
	height:100px;
	
	left:3%;
	top:20%;
	text-align:center;
	font-size:20px;
		margin-left:40px;
		margin-top:30px;
	display:block;
	border:solid 1px;
}
#info2
{
		background-color:#d9d9d9;
	background-repeat:no-repeat;
	background-size:100%;
	width:200px;
	height:100px;
	
	
	text-align:center;
	font-size:20px;
	margin-left:40px;
		margin-top:30px;
	display:block;
	border:solid 1px;
}
#info3
{
	background-color:black;
	background-repeat:no-repeat;
	background-size:100%;
	width:200px;
	height:100px;
	font-weight:bold;
	color:white;
	text-align:center;
	font-size:20px;
		margin-left:40px;
			margin-top:30px;
	display:block;
	border:solid 1px;
}
#rangeroi
{
	background-color:green;
	background-repeat:no-repeat;
	background-size:100%;
	opacity:70%;
	width:280px;
	height:280px;
	position:absolute;
	left:0px;
	top:0px;
	z-index:3;
}
#rangetour1
{
background-color:green;
	background-repeat:no-repeat;
	background-size:100%;
	opacity:70%;
	width:160px;
	height:120px;
	position:absolute;
	left:0px;
	top:0px;
	z-index:3;
}
#rangetour2
{
	background-color:green;
	background-repeat:no-repeat;
	background-size:100%;
	opacity:70%;
	width:160px;
	height:120px;
	position:absolute;
	left:0px;
	top:0px;
	z-index:3;
}
#rangetour3
{
	background-color:green;
	background-repeat:no-repeat;
	background-size:100%;
	opacity:70%;
	width:120px;
	height:160px;
	position:absolute;
	left:0px;
	top:0px;
	z-index:3;
}
#rangetour4
{
background-color:green;
	background-repeat:no-repeat;
	background-size:100%;
	opacity:70%;
	width:120px;
	height:160px;
	position:absolute;
	left:0px;
	top:0px;
	z-index:3;
}
#rangefou1
{
	background-color:green;
	background-repeat:no-repeat;
	background-size:100%;
	width:30px;
	height:700px;
	position:absolute;
	left:335px;
	top:0px;
	z-index:3;
}
#rangefou2
{
	background-color:green;
	background-repeat:no-repeat;
	background-size:100%;
	width:30px;
	height:700px;
	position:absolute;
	left:335px;
	top:0px;
	z-index:3;
}


#range1
{
	background-color:green;
	background-repeat:no-repeat;
	background-size:100%;
	opacity:70%;
	width:40px;
	height:40px;
	position:absolute;
	left:0px;
	top:0px;
	z-index:3;
}
#range2
{
background-color:green;
	background-repeat:no-repeat;
	background-size:100%;
	opacity:70%;
	width:40px;
	height:40px;
	position:absolute;
	left:0px;
	top:0px;
	z-index:3;
}
#range3
{
	background-color:green;
	background-repeat:no-repeat;
	background-size:100%;
	opacity:70%;
	width:40px;
	height:40px;
	position:absolute;
	left:0px;
	top:0px;
	z-index:3;
}
#range4
{
	background-color:green;
	background-repeat:no-repeat;
	background-size:100%;
	opacity:70%;
	width:40px;
	height:40px;
	position:absolute;
	left:0px;
	top:0px;
	z-index:3;
}
#range5
{
	background-color:green;
	background-repeat:no-repeat;
	background-size:100%;
	opacity:70%;
	width:40px;
	height:40px;
	position:absolute;
	left:0px;
	top:0px;
	z-index:3;
}
#range6
{
background-color:green;
	background-repeat:no-repeat;
	background-size:100%;
	opacity:70%;
	width:40px;
	height:40px;
	position:absolute;
	left:0px;
	top:0px;
	z-index:3;
}
#range7
{
	background-color:green;
	background-repeat:no-repeat;
	background-size:100%;
	opacity:70%;
	width:40px;
	height:40px;
	position:absolute;
	left:0px;
	top:0px;
	z-index:3;
}
#range8
{
	background-color:green;
	background-repeat:no-repeat;
	background-size:100%;
	opacity:70%;
	width:40px;
	height:40px;
	position:absolute;
	left:0px;
	top:0px;
	z-index:3;
}
#range9
{
	background-color:green;
	background-repeat:no-repeat;
	background-size:100%;
	opacity:70%;
	width:40px;
	height:40px;
	position:absolute;
	left:0px;
	top:0px;
	z-index:3;
}
#range10
{
	background-color:green;
	background-repeat:no-repeat;
	background-size:100%;
	opacity:70%;
	width:40px;
	height:40px;
	position:absolute;
	left:0px;
	top:0px;
	z-index:3;
}
#range11
{
	background-color:green;
	background-repeat:no-repeat;
	background-size:100%;
	opacity:70%;
	width:40px;
	height:40px;
	position:absolute;
	left:0px;
	top:0px;
	z-index:3;
}
#range12
{
	background-color:green;
	background-repeat:no-repeat;
	background-size:100%;
	opacity:70%;
	width:40px;
	height:40px;
	position:absolute;
	left:0px;
	top:0px;
	z-index:3;
}
#range13
{
	background-color:green;
	background-repeat:no-repeat;
	background-size:100%;
	opacity:70%;
	width:40px;
	height:40px;
	position:absolute;
	left:0px;
	top:0px;
	z-index:3;
}
#range14
{
	background-color:green;
	background-repeat:no-repeat;
	background-size:100%;
	opacity:70%;
	width:40px;
	height:40px;
	position:absolute;
	left:0px;
	top:0px;
	z-index:3;
}
#range15
{
	background-color:green;
	background-repeat:no-repeat;
	background-size:100%;
	opacity:70%;
	width:40px;
	height:40px;
	position:absolute;
	left:0px;
	top:0px;
	z-index:3;
}
#range16
{
	background-color:green;
	background-repeat:no-repeat;
	background-size:100%;
	opacity:70%;
	width:40px;
	height:40px;
	position:absolute;
	left:0px;
	top:0px;
	z-index:3;
}

#control
{
	background-color:#a6a6a6;
	background-repeat:no-repeat;
	background-size:100%;
	width:190px;
	height:700px;
	position:absolute;
	left:70%;
	top:6%;
	z-index:2;
}
#masquecontrol
{
	background-color:grey;
	background-repeat:no-repeat;
	opacity:30%;
	background-size:100%;
	width:190px;
	height:700px;
	position:absolute;
	left:70%;
	top:6%;
	z-index:4;
}
#fou
{
	background-image:url(images/fou.png);
	background-repeat:no-repeat;
	background-size:100%;
	width:150px;
	height:150px;
	display:block;
	z-index:3;
	margin-left:20px;
	margin-top:20px;
}
#tour
{
	background-image:url(images/tour.png);
	background-repeat:no-repeat;
	background-size:100%;
	width:150px;
	height:150px;
	display:block;
	z-index:3;
	margin-left:20px;
	margin-top:20px;
}
#cavalier
{
	background-image:url(images/cavalier.png);
	background-repeat:no-repeat;
	background-size:100%;
	width:150px;
	height:150px;
	display:block;
	z-index:3;
margin-left:20px;
	margin-top:20px;
}
#roi
{
	background-image:url(images/dame.png);
	background-repeat:no-repeat;
	background-size:100%;
	width:150px;
	height:150px;
		display:block;
	z-index:3;
	margin-left:20px;
	margin-top:20px;
}
#masqueroi
{
background: rgb(255,255,255);
background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(0,0,0,1) 100%);
	background-size:100%;
	opacity:60%;
	width:150px;
	height:150px;
	position:absolute;
	left:0%;
	top:540px;
	z-index:4;
}

.card
{background-image:url(images/pion2.png); position:absolute; top:230px; left:15px; z-index:6; width:30px; height:30px;}

.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;
	margin-left:10px;
	
	width:100px;
	text-align:center;
	background-color:transparent;
	border:none;
	font-size:24px;
		margin-top:20px;
	
}
.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;
	
	
}

.btn {
	background-color:#000000;
	border-radius:10px;
	border:1px solid #050505;
	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:#00b300;
}
.btn:focus {
	background-color:#00b300;
	
	
}
.btn1 {
	background-color:#00b300;
	border-radius:10px;
	border:1px solid #050505;
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;
}
.btn1:hover {
	background-color:green;
}
.btn1:focus {
	background-color:#00b300;
	
	
}
.btn2 {
	background-color:#000000;
	border-radius:10px;
	border:1px solid #050505;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:17px;
	padding:16px 31px;
	text-decoration:none;
	margin-top:30px;
	width:230px;
	
}
.btn2:hover {
	background-color:#00b300;
}
.btn2:focus {
	background-color:#00b300;
	position:relative;
	top:1px;
	
}


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

.avancement
{
display: inline-block;
    -moz-box-sizing: border-box;
         box-sizing: border-box;
    width: 300px;
    height: 50px;
    padding: 3px 3px 2px 3px;
    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;
    box-shadow: 0 1px 0 rgba(255,255,255,.2);  
	
}
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;
  
}

.avancementhead
{
display:inline;
    -moz-box-sizing: border-box;
         box-sizing: border-box;
    width: 700px;
    height: 30px;
    padding: 3px 3px 2px 3px;
    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;
    box-shadow: 0 1px 0 rgba(255,255,255,.2);  
	
}