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

body
{
background-color:black;
}

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

background-color:black;

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

  
}
#control
{

background-color:black;

	width:300px;
	height:1000px;
	
	z-index:1;
	position:absolute;
top:0%;
left:0%;
  

  
}
#goldj1
{
	
	position:absolute;
top:60px;
left:0%;
  
}
#goldj2
{
	
	position:absolute;
top:210px;
left:0%;
  
}

#menu
{
background-image:url(images/menu.png);
	width:1400px;
	height:1000px;
	position:absolute;
	left:0%;
	top:0%;
	z-index:18;
	text-align:center;
display:block;
	border:solid 1px 	white; box-sizing: border-box;
}
#ending1
{
background-image:url(images/ending1.png);
	width:1400px;
	height:1000px;
	position:absolute;
	left:0%;
	top:0%;
	z-index:19;
	text-align:center;
display:none;
	border:solid 1px 	white; box-sizing: border-box;
}
#ending2
{
background-image:url(images/ending2.png);
	width:1400px;
	height:1000px;
	position:absolute;
	left:0%;
	top:0%;
	z-index:17;
	text-align:center;
display:none;
	border:solid 1px 	white; box-sizing: border-box;
}
#ending3
{
background-image:url(images/ending3.png);
	width:1400px;
	height:1000px;
	position:absolute;
	left:0%;
	top:0%;
	z-index:18;
	text-align:center;
display:none;
	border:solid 1px 	white; box-sizing: border-box;
}

#rules1
{
	background-image:url(images/rule1.png);
	width:1460px;
	height:1000px;
	position:absolute;
	left:0%;
	top:0%;
	z-index:15;
	text-align:center;
display:block;
}
#rules2
{
	background-image:url(images/rule2.png);
	width:1460px;
	height:1000px;
	position:absolute;
	left:0%;
	top:0%;
	z-index:14;
	text-align:center;
display:block;
}
#rules3
{
	background-image:url(images/rule3.png);
	width:1460px;
	height:1000px;
	position:absolute;
	left:0%;
	top:0%;
	z-index:13;
	text-align:center;
display:block;
}
#rules4
{
	background-image:url(images/rule4.png);
	width:1460px;
	height:1000px;
	position:absolute;
	left:0%;
	top:0%;
	z-index:12;
	text-align:center;
display:block;
}
#rules5
{
	background-image:url(images/rule5.png);
	width:1460px;
	height:1000px;
	position:absolute;
	left:0%;
	top:0%;
	z-index:11;
	text-align:center;
display:block;
}
#home
{
background-image:url(images/home.png);
	width:1400px;
	height:1000px;
	position:absolute;
	left:0%;
	top:0%;
	z-index:20;
	text-align:center;
display:block;
}
#settings
{
background-image:url(images/menu.png);
	width:1400px;
	height:1000px;
	position:absolute;
	left:0%;
	top:0%;
	z-index:20;
	text-align:center;
	border:solid 1px 	white; box-sizing: border-box;
display:none;
}
#rules
{
background-image:url(images/rule1.png);
	width:1460px;
	height:1000px;
	position:absolute;
	left:0%;
	top:0%;
	z-index:20;
	text-align:center;
display:none;
}
#boutonmenu{
margin-top:2%;
	text-align:center;
	
	
	top:2%;
width:900px;
height:600px;

z-index:12;
display:inline-block;
}

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


#bouton3{
top:85%;
}



#board1
{
background-color:black;
	background-repeat:no-repeat;
	background-size:100%;
	width:900px;
	height:900px;
	position:absolute;
	left:450px;
	top:0px;

z-index:1;
	margin:0px;
	
	border-radius:10px;
	box-sizing: border-box;
}
#board2
{
background-color:none;
	background-repeat:no-repeat;
	background-size:100%;
	width:900px;
	height:900px;
	position:absolute;
	left:450px;
	top:0px;

z-index:2;
	margin:0px;
	
	border-radius:10px;
	box-sizing: border-box;
}
#fuite
{
background-image:url(images/fuite.png);
	background-repeat:no-repeat;
	background-size:100%;
	width:900px;
	height:900px;
	position:absolute;
	left:450px;
	top:0px;

z-index:3;
	margin:0px;
	display:none;
	border-radius:10px;
	box-sizing: border-box;
}
#menotte
{
background-image:url(images/menottes2.png);
	background-repeat:no-repeat;
	background-size:100%;
	width:200px;
	height:200px;
	position:absolute;
	left:44px;
	top:600px;

z-index:2;
	margin:0px;
	border:solid 6px grey;
	border-radius:150px;
	box-sizing: content-box;
}
#menotte:hover {
	opacity:20%;
}
#menotte:focus {
	background-color:#00b300;
	
	
}

#indices
{
background-image:url(images/indices.png);
	background-repeat:no-repeat;
	background-size:100%;
	width:300px;
	height:300px;
	position:absolute;
	left:0px;
	top:230px;

z-index:2;
	margin:0px;
	
	border-radius:10px;
	
}

#masqueindices
{
background-color:black;
	background-repeat:no-repeat;
	background-size:100%;
	width:300px;
	height:150px;
	position:absolute;
	left:0px;
	top:130px;

z-index:3;
	margin:0px;
	
	border-radius:10px;
	
}


.card
{background-image:url(images/soldat.png); border-radius:10px;position:absolute; top:200px; left:0px; z-index:6; width:100px; height:100px;}
.case
{background-color:black; border-radius:100px; z-index:4; width:100px; height:100px; position:absolute; border:solid 1px black; box-sizing: border-box; opacity:100% ; }
.piste
{background-color:#080808; border-radius:100px; z-index:5; width:100px; height:100px; position:absolute; border:solid 1px black; 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;
}

.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:100px;
	margin-top:100px;
	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;
}



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


.btn1 {	
font-weight:bold;

	background-color:black;
	border-radius:10px;
	border:3px solid white;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:20px;
	padding:16px 31px;
	text-decoration:none;
		
	width:300px;
	height:80px;
	margin-top:60px;
}
.btn1:hover {
	background-color:green;
}
.btn1:focus {
	background-color:#00b300;
	
	
}




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






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



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