@charset "utf-8";
/* CSS Document */
body
{
background-color:#8c8c8c;
}


#Menu
{
	background: linear-gradient(to bottom, #009999 0%, #003366 100%);
	width:250px;
	height:500px;
	text-align:center;
	left:2%;
	top:15%;
	z-index:3;
	position:absolute;
}
#strategie
{
	background-image:url(images/regles.png);
	width:900px;
	height:500px;
	text-align:center;
	left:25%;
	top:15%;
	z-index:4;
	display:none;
	position:absolute;
}


#tableau1
{
	border-spacing:20px;
	margin-top:20px;
	
}
#tableau2
{
left:1%;
	display:inline;
	position:absolute;
	margin-top:10px;

	
}



#amelioration
{
	text-align:left;
	margin-left:80px;
	vertical-align:top;
}

.avancement
{
display: inline-block;
    -moz-box-sizing: border-box;
         box-sizing: border-box;
    width: 300px;
    height: 20px;
    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: 300px 20px, 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: 200px;
    height: 15px;
    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);  
	
}

#logo
{
	background-image:url(images/logo3.png);
	width:227px;
	height:302px;
	text-align:center;
	left:41%;
	top:5%;
	z-index:6;
	position:absolute;
}

#Ecranjoueur
{
	background-image:url(images/ecranjoueur2.jpg);
	width:1266px;
	height:675px;
	text-align:center;
	top:1px;
	z-index:5;
	position:absolute;
}
#homepage
{
	background: linear-gradient(to bottom, #009999 0%, #003366 100%);
	width:1280px;
	height:675px;
	text-align:center;
	top:1px;
	left:1px;
	z-index:6;
	position:absolute;
}

#play1
{
	
	left:38%;
	top:22%;
	z-index:5;
	position:absolute;
	height:130px;
	width:130px;
}

#play2
{
		
	left:53%;
	top:36%;
	z-index:5;
	position:absolute;
	height:130px;
	width:130px;
}
#cache
{
		
	left:53%;
	top:36%;
	z-index:6;
	position:absolute;
	height:130px;
	width:130px;
	display:none;
}



#header
{
	 background: linear-gradient(to right, #009999 0%, #336699 100%);
	width:1200px;
	height:90px;
	padding-left:30px;
	top:1%;
	left:2%;
	z-index:3;
	position:absolute;
}
#footer
{
	 background-color:#8c8c8c;
	width:1200px;
	height:10px;
	padding-left:30px;
	top:95%;
	left:2%;
	z-index:3;
	position:absolute;
}

#fourmiliere
{
	 background: linear-gradient(to bottom, #009999 0%, #003366 100%);
	width:900px;
	height:500px;
	text-align:center;
	 vertical-align:center;
	left:25%;
	top:15%;
	z-index:5;
	position:absolute;
	display:none;
	font-size:25px;
}
#diplomate
{
	 background: linear-gradient(to bottom, #009999 0%, #003366 100%);
	width:900px;
	height:500px;
	text-align:center;
	 vertical-align:center;
	left:25%;
	top:15%;
	z-index:5;
	position:absolute;
	display:none;
	font-size:20px;
}

#crea
{
	background-image:url(images/crea3.png);
	width:900px;
	height:506px;
	
	left:25%;
	top:15%;
	z-index:4;
	position:absolute;
	display:none;
}

#Board
{
	background-image:url(images/fondboard6.png);
	width:900px;
	height:500px;
	text-align:center;
	left:25%;
	top:15%;
	z-index:1;
	position:absolute;
}

#creareine
{
	background-image:url(images/fondcreareine.png);
	width:900px;
	height:500px;
	text-align:center;
	left:25%;
	top:15%;
	z-index:4;
	position:absolute;
	display:none;
}

#prixreine
{
	
	width:500px;
	height:60px;
	text-align:center;
	left:30%;
	top:40%;
	z-index:3;
	position:absolute;
}

#creareinej1
{
	
	width:70px;
	height:70px;
	text-align:center;
	left:29%;
	top:44%;
	z-index:2;
	position:absolute;
}

#creareinej2
{
	
	width:70px;
	height:70px;
	text-align:center;
	left:84%;
	top:44%;
	z-index:2;
	position:absolute;
}

#reinej1
{
	background-image:url(images/reineg.png);
	width:60px;
	height:60px;
	display:inline;
	display:none;
	z-index:4;
	left:30%;
	top:45%;
	position:absolute;
}

#reinej2
{
	background-image:url(images/reined.png);
	width:60px;
	height:60px;
	display:inline;
	display:none;
	z-index:4;
	left:85%;
	top:44%;
	position:absolute;
}


#prix1
{
	
	text-align:center;
	left:20%;
	top:53%;
	z-index:1;
	position:absolute;
}

#prix2
{
	
	text-align:center;
	left:60%;
	top:53%;
	z-index:1;
	position:absolute;
}


#base1
{

	width:120px;
	height:70px;
	text-align:center;
	left:35%;
	top:29%;
	z-index:2;
	position:absolute;
}
#base2
{
	

	
	width:120px;
	height:70px;
	text-align:center;
	left:30%;
	top:66%;
	z-index:2;
	position:absolute;
}
#base3
{
	

	width:120px;
	height:70px;
	text-align:center;
	left:75%;
	top:29%;
	z-index:2;
	position:absolute;
}
#base4
{

	width:120px;
	height:70px;
	text-align:center;
	left:80%;
	top:66%;
	z-index:2;
	position:absolute;
}

#foodimage
{
	background-color:blue;
	width:10px;
	height:20px;
	text-align:center;
	z-index:3;
	
		}
#amelio
{

	width:800px;
	height:200px;
	top:35%;
	position:absolute;
	z-index:3;
	border-spacing:20px;
	padding-top:10px;
	
		}
		
#actiondiplo
{

	width:900px;
	height:200px;
	top:25%;
	position:absolute;
	z-index:3;
	border-spacing:20px;
	padding-top:10px;
	
		}
		
		
#masque1
{
	background-image:url(images/campg.png);
	width:401px;
	height:500px;
	top:15%;
	left:25%;
		display:none;
	position:absolute;
	z-index:3;
}
#masque2
{
	background-image:url(images/campd.png);
	width:401px;
	height:500px;
	top:15%;
	left:803px;
	display:none;
	position:absolute;
	z-index:3;
}



#ouv
{
	top:63%;
	left:27%;
	position:absolute;
	z-index:3;
		
}

#sol
{
	top:63%;
	left:67%;
	position:absolute;
	z-index:3;
		
}

		
		
.tableau {
  font-size:24px;
  
}	
.tableaujauge {
  font-size:18px;
  
}	
		
.btn {
  background: #009999;
  background-image: -webkit-linear-gradient(top, #009999, #003366);
  background-image: -moz-linear-gradient(top, #009999, #003366);
  background-image: -ms-linear-gradient(top, #009999, #003366);
  background-image: -o-linear-gradient(top, #009999, #003366);
  background-image: linear-gradient(to bottom, #009999, #003366);
  -webkit-border-radius: 28;
  -moz-border-radius: 28;
  border-radius: 28px;
  font-family: Arial;
  color: #ffffff;
  font-size: 20px;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
  margin-left:20px;
  
}

.btn:hover {
  background: #138f00;
  background-image: -webkit-linear-gradient(top, #138f00, #6ee088);
  background-image: -moz-linear-gradient(top, #138f00, #6ee088);
  background-image: -ms-linear-gradient(top, #138f00, #6ee088);
  background-image: -o-linear-gradient(top, #138f00, #6ee088);
  background-image: linear-gradient(to bottom, #138f00, #6ee088);
  text-decoration: none;
}

.crea {
   background: #009999;
  background-image: -webkit-linear-gradient(top, #009999, #003366);
  background-image: -moz-linear-gradient(top, #009999, #003366);
  background-image: -ms-linear-gradient(top, #009999, #003366);
  background-image: -o-linear-gradient(top, #009999, #003366);
  background-image: linear-gradient(to bottom, #009999, #003366);
  -webkit-border-radius: 28;
  -moz-border-radius: 28;
  border-radius: 28px;
  font-family: Arial;
  color: #ffffff;
  font-size: 20px;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
 
 
  
  
}

.crea:hover {
  background: #138f00;
  background-image: -webkit-linear-gradient(top, #138f00, #6ee088);
  background-image: -moz-linear-gradient(top, #138f00, #6ee088);
  background-image: -ms-linear-gradient(top, #138f00, #6ee088);
  background-image: -o-linear-gradient(top, #138f00, #6ee088);
  background-image: linear-gradient(to bottom, #138f00, #6ee088);
  text-decoration: none;
}

.bouton {
  background: #009999;
  background-image: -webkit-linear-gradient(top, #009999, #003366);
  background-image: -moz-linear-gradient(top, #009999, #003366);
  background-image: -ms-linear-gradient(top, #009999, #003366);
  background-image: -o-linear-gradient(top, #009999, #003366);
  background-image: linear-gradient(to bottom, #009999, #003366);
  -webkit-border-radius: 28;
  -moz-border-radius: 28;
  border-radius: 28px;
  font-family: Arial;
  color: #ffffff;
  font-size: 20px;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
  margin:10px;
  width:160px;
  margin-top:40px;
}

.bouton:hover {
  background: #138f00;
  background-image: -webkit-linear-gradient(top, #138f00, #6ee088);
  background-image: -moz-linear-gradient(top, #138f00, #6ee088);
  background-image: -ms-linear-gradient(top, #138f00, #6ee088);
  background-image: -o-linear-gradient(top, #138f00, #6ee088);
  background-image: linear-gradient(to bottom, #138f00, #6ee088);
  text-decoration: none;
}

.boutonmenu {
  background: #009999;
  background-image: -webkit-linear-gradient(top, #009999, #003366);
  background-image: -moz-linear-gradient(top, #009999, #003366);
  background-image: -ms-linear-gradient(top, #009999, #003366);
  background-image: -o-linear-gradient(top, #009999, #003366);
  background-image: linear-gradient(to bottom, #009999, #003366);
  -webkit-border-radius: 28;
  -moz-border-radius: 28;
  border-radius: 28px;
  font-family: Arial;
  color: #ffffff;
  font-size: 20px;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
 margin:80px;
  width:150px;
  margin-top:500px;
  
}



.boutonmenu:hover {
     background: #138f00;
  background-image: -webkit-linear-gradient(top, #138f00, #6ee088);
  background-image: -moz-linear-gradient(top, #138f00, #6ee088);
  background-image: -ms-linear-gradient(top, #138f00, #6ee088);
  background-image: -o-linear-gradient(top, #138f00, #6ee088);
  background-image: linear-gradient(to bottom, #138f00, #6ee088);
  text-decoration: none;
}


.valid {
  background: #009999;
  background-image: -webkit-linear-gradient(top, #009999, #003366);
  background-image: -moz-linear-gradient(top, #009999, #003366);
  background-image: -ms-linear-gradient(top, #009999, #003366);
  background-image: -o-linear-gradient(top, #009999, #003366);
  background-image: linear-gradient(to bottom, #009999, #003366);
  -webkit-border-radius: 28;
  -moz-border-radius: 28;
  border-radius: 28px;
  font-family: Arial;
  color: #ffffff;
  font-size: 20px;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
  	left:85%;
	top:88%;
	z-index:3;
	position:absolute;
}

.valid:hover {
  background: #138f00;
  background-image: -webkit-linear-gradient(top, #138f00, #6ee088);
  background-image: -moz-linear-gradient(top, #138f00, #6ee088);
  background-image: -ms-linear-gradient(top, #138f00, #6ee088);
  background-image: -o-linear-gradient(top, #138f00, #6ee088);
  background-image: linear-gradient(to bottom, #138f00, #6ee088);
  text-decoration: none;
}


.champs {
	
	/*display:block;*/
	display:inline;
	margin-left:5px;
	
	width:40px;
	text-align:center;
	background-color:transparent;
	border:none;
	font-size:20px;
	vertical-align:center;
	
}


.soldat1	{
	
	background-image:url(images/sol1.png);
	width:40px;
	height:40px;
	display:inline;
	
	z-index:2;
	position:absolute;
	
}
.soldat2	{
	
	background-image:url(images/sol2.png);
	width:40px;
	height:40px;
	display:inline;
	
	z-index:2;
	position:absolute;
	
}

.testcell
{
	padding-bottom:10px;
}