html {
    padding-top:20px;
	margin: 0px;
		height:auto;
	background-image: url(images/asfalt-dark.png) ;
	font-family: Verdana, Arial, sans-serif;
    font-size: 11px;
 
 /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#45484d+0,000000+100;Black+3D+%231 */
background-color: rgb(69,72,77); /* Old browsers */
background-color: -moz-linear-gradient(left, rgba(69,72,77,1) 0%, rgba(0,0,0,1) 100%); /* FF3.6-15 */
background-color: -webkit-linear-gradient(left, rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
background-color: linear-gradient(to right, rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#000000',GradientType=1 ); /* IE6-9 */
 
 
 
 
	}
	body {
	height:100%;
	margin:0;
	padding:0;
	
	}
	#background {
	 
    right:0;
	 top:0;
	 left:0;
		 position:absolute;
		 min-height:100%;
	}
	#cadre {
	position: relative;
	width: 1200px;
	margin:0 auto;
	min-height:100%;

	bottom:0;
	top:0;
	color:white;

	}
	#logo {
	margin-top:10px;
	width:350px;
	height:127px;
	background:url(images/logo2.png);
	
	}
#hautmenu {
    position: absolute;
    margin-left:370px;
    width: 800px;
    height: 120px;
    margin-top:20px;
    
}
#menu {
transition:ALL 0.5s;
float:left;
font-weight:bold;
font-size:24px;
font-variant:small-caps;
text-align:center;
color:rgba(255,255,255,0.3);
    width: 100px;
    height: 80px;
    padding: 8px;

margin-right:26px;

    border:1px solid rgba(255,255,255,0.1);
    box-shadow:0 0 30px rgba(0,0,0,0.2);
    background: rgba(255,255,255,0.02);
  border-radius:10px;
  line-height:26px;
  cursor:pointer;
     -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

  
  
}
#menu:hover {

color:rgba(255,255,255,1);
box-shadow:0 0 30px rgba(255,255,255,0.2);
}
#menu2 {
transition:ALL 0.5s;
float:left;
font-weight:bold;
font-size:24px;
font-variant:small-caps;
text-align:center;
color:white;
    width: 100px;
    height: 80px;
    padding: 8px;

margin-right:26px;

    border:1px solid rgba(255,255,255,0.1);
box-shadow:0 0 30px rgba(255,255,255,0.2);
    background: rgba(255,255,255,0.02);
  border-radius:10px;
  line-height:26px;
  cursor:pointer;
     -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

}

#menupics {

    width: 130px;
    height: 16px;
    padding-top: 8px;
    padding-bottom: 8px;
   padding-right:10px;
border-left:1px solid rgba(255,255,255,0.1);
float:right;
margin-top:87px;

}
#pics {
    width: 30px;
    height: 30px;
    float:left;
    -webkit-filter: grayscale(100%);
    margin-left:10px;
    margin-top:-5px;
}
#pics:hover {
   -webkit-filter: none;
   }
   
 /********************************** BAS **********************************/  
   #bas {
   margin-top:80px;
       width: 1150px;
    height: 10px;
    border:1px solid rgba(255,255,255,0.1);
    box-shadow:0 0 30px rgba(0,0,0,0.2);
    background: rgba(255,255,255,0.02);
  border-radius:10px;
  padding:20px;
  margin-bottom:20px;
  color:white;

  
  margin-left: auto;
  margin-right: auto;
}
 #bass {
          width: 1150px;
    height: 10px;
    border:1px solid rgba(255,255,255,0.1);
    box-shadow:0 0 30px rgba(0,0,0,0.2);
    background: rgba(255,255,255,0.02);
  border-radius:10px;
  padding:20px;
bottom:20px;
left : 50%;
margin-left: -600px;
color:white;
  position: absolute;

}

.linksbas {
line-height:20px;

}

 .linksbas a {
      text-decoration:none;
    color:grey;
    
    }
     .linksbas a:hover {
      text-decoration:none;
    color:white;
    
    }
/********************************** MAIN **********************************/
#main {
width:100%;
min-height:500px;
margin-top:50px;
color:black;
overflow:hidden;


}
  /********************* BOX *********************************/
  
  
     .box {
   transition:ALL 1.0s;
 position:absolute;
    width: 1150px;
    
    border:1px solid rgba(255,255,255,0.1);
    box-shadow:0 0 30px rgba(0,0,0,0.2);
    background: rgba(255,255,255,0.02);
  border-radius:10px;
  padding:20px;
overflow:hidden;
z-index:10;
}  
 .box h1,
 .box2 h1 {
 margin-top:0px;
 color:white;
 font-variant:small-caps;
 font-size:24px;
 font-style:italic;
 }   
  .box h2,
  .box2 h2 {
 color:red;
 font-variant:small-caps;
 font-size:18px;
 font-style:italic;
 }   

      .box2 {
      transition:ALL 1.0s;
  z-index:5;
 position:absolute;
   width: 1150px;
    border:0px solid rgba(255,255,255,0.1);
    box-shadow:0 0 0px rgba(0,0,0,0.2);
    background: rgba(255,255,255,0.0);
  border-radius:10px;
    padding:20px;
opacity:0;
overflow:hidden;
}  
  #offre{
 float:left;
 font-size:14px;
 color:white;
  border:1px solid rgba(255,255,255,0.1);
    box-shadow:0 0 30px rgba(0,0,0,0.2);
       width:545px;
    padding: 10px;
    margin-right:10px;
    line-height:20px;
    cursor:pointer;
    height:260px
 }
 #offre:hover {
 
background: rgba(0,0,0,0.2);
 }
  #offre h2 {
  margin-top:0px;
  font-size:22px;
  border-radius:10px;
   text-align:center;
  }  
red { 
   display:inline;
    color:red;
    }
    green { 
   display:inline;
    color:green;
    }
 p { 
display:inline;
    color:white;
    
    }
 prix { 
    color:Green;
      font-size:22px;
        text-align:center;
    }
    

     .yes {
   transition:ALL 1.0s;
 opacity:1;
 position:absolute;
 z-index:10;
 display:block;
 
}  
     .no {
   transition:ALL 1.0s;
 opacity:0;
  position:absolute;
  z-index:5;
  display:none;
}  
 .nextbuttons {
 float:right;
 font-size:25px;
 color:white;
 font-weight:bold;
 border-radius:5px;
 width:150px;
 height:70px;
 background: rgba(255,255,255,0.02);
   border:1px solid rgba(255,255,255,0.1);
   margin-top:20px;
text-align:center;
 line-height:70px;
 cursor:pointer;
 margin-right:20px;
 }
 .nextbuttons:hover {
background: rgba(0,0,0,0.2);
 }
#box2 {
height:500px;
}    
 .previousbuttons {
 text-align:center;
 float:left;
 font-size:25px;
 color:white;
 font-weight:bold;
 border-radius:5px;
 width:150px;
 height:70px;
 background: rgba(255,255,255,0.02);
   border:1px solid rgba(255,255,255,0.1);
   margin-top:20px;
 margin-left:10px;
 line-height:70px;
 cursor:pointer;
 }
 .previousbuttons:hover {
background: rgba(0,0,0,0.2);
 }
#infosbuy {
   box-shadow:0 0 0px rgba(0,0,0,0.2);
float:left;
width:1125px;
height:340px;
 background: rgba(255,255,255,0.02);
   border:1px solid rgba(255,255,255,0.1);
   padding:10px;
   Color:white;
font-size:18px;
font-weight:bold;
font-variant:small-caps;
line-height:40px;
}   
.h7 {
float:left;
width:220px;
color:red;
text-align:right;
}    
.h8 {
float:left;
width:220px;
color:white;
text-align:right;
}    
input{   
    width : 320px;
    display:inline;
    border:none;
    padding-left:10px;
 background: rgba(255,255,255,0.1);
 height:25px;
 color:white;
 font-weight:bold;
 float:left;
     }
   #infos_textarea {
   width:800px;
   height:100px;
    background: rgba(255,255,255,0.1);
     color:white;
 font-weight:bold;
 border:none;
   } 
    #recap_textarea {
   width:800px;
   height:100px;
    background: rgba(255,255,255,0.1);
     color:white;
 font-weight:bold;
 border:none;
 
   } 
  .h9 {
float:left;
width:460px;
color:red;
text-align:right;
font-size:14px;
}    
     .sendbutton {
 float:right;
 font-size:25px;
 color:white;
 font-weight:bold;
 border-radius:5px;
 width:150px;
 height:70px;
 background: rgba(255,255,255,0.02);
   border:1px solid rgba(255,255,255,0.1);
  margin-top:-20px; 
text-align:center;
 line-height:70px;
 cursor:pointer;
 margin-right:450px;
 }
 .sendbutton:hover {
background: rgba(0,0,0,0.2);
 }
.leserver {
width:100px;

background: rgba(0,0,0,0.4);

}
 .leserver2 {
 background: rgba(255,255,255,0.02);



}   
#setup {
height:500px;


}
     #butsetup {
display : inline;
 font-size:18px;
 color:white;
 font-weight:bold;
 border-radius:5px;
 width:80px;
 height:40px;
 background: rgba(255,255,255,0.02);
   border:1px solid rgba(255,255,255,0.1);
  
text-align:center;
 line-height:40px;
 cursor:pointer;
padding:5px;
margin-top:-15px;
margin-left:10px;
float:left;
 }
 #butsetup:hover {
background: rgba(0,0,0,0.2);

 }
#goserver2 {
color:white;
float:left;
font-size:19px;
width:1150px;
}
#goserver {
color:white;
float:left;
font-size:19px;

}
#tutorial {
margin-top:50px;
color:white;
float:left;
font-size:19px;
width:575px
}
@font-face {
    font-family: "CaptureitRegular";
    src: url('servers/ff/capture_it-webfont.eot');
       src:    url('servers/ff/capture_it-webfont.ttf');

    font-weight: bold;
    font-style: normal;
}

.servdispname {
transition:ALL 0.2s;
   font-family: "CaptureitRegular",Helvetica,Arial,sans-serif;
	font-size:29px;
	width:450px;
	background: rgba(0,0,0,0.2);
	padding:3px;
	border:5px solid rgba(0,0,0,0.1);
	margin-top:-5px;
	letter-spacing:2px;
	color:rgba(255,255,255,0.6);
	height:40px;
	cursor:pointer;
	float:left;
		line-height:40px;
}
.servdispname:hover {
background: rgba(0,0,0,0.5);
letter-spacing:3px;
font-size:33px;
color:rgba(255,255,255,1);
}    
.servdispname:active {
background: rgba(0,0,0,0.5);
letter-spacing:3px;
font-size:33px;
color:rgba(255,0,0,1);
}    

 .servdispjoin {
transition:ALL 0.2s;
   font-family: Helvetica,Arial,sans-serif;
	font-size:20px;
border-left:5px solid rgba(0,0,0,0.2);
padding:3px 3px 3px 6px;;
	line-height:40px;
	font-weight:bolder;
	margin-top:-5px;
	letter-spacing:1px;
	color:rgba(255,0,0,0.6);
	height:42px;
	font-variant:small-caps;
	text-shadow:0 0 3px black;
	float:right;
}   
.servdispjoin:hover {
font-size:24px;
border-top-left-radius:20%;
border-bottom-left-radius:20%;



}
.servdispjoin:active {
	color:rgba(255,255,255,0.6);
}
#serversinfos {
	background:rgba(0,0,0,0.2);
	width:650px;
	min-height:500px;
	height:auto;

position:absolute;
bottom:20px;
top:60px;
right:20px;
	font-size:12px;
	padding :10px;
}
.servnbplayers {
    float:right;
	line-height:40px;
	font-weight:bolder;
	 font-family: Helvetica,Arial,sans-serif;
	font-size:20px;
	margin-right:5px;
}