body {
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 11px;
    color: #dfdfdf;
     /*background: #343738;
   background: #471e1e;*/
    background: url("../../images/wallpapers/sky2.jpg")no-repeat center fixed;
   background: url("../../game/images/wallpapers/dark_wallpaper.jpg")no-repeat center fixed;
        /* TEST WALLPAPER
        https://s-media-cache-ak0.pinimg.com/originals/9b/d7/59/9bd75989e54ec24b5cb3ec920cc6ea62.jpg
        http://www.fosterandpartners.com/media/1716279/Img6.jpg
        http://www.fosterandpartners.com/media/1716284/Img7.jpg
        */
        -webkit-background-size: cover; /* pour anciens Chrome et Safari */
        background-size: cover;
        margin-top: 15px;
        /*background: #292929;*/
        /*background: #100f0f;*/
}

body::-webkit-scrollbar {
    width: 1em;
}
 
body::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}
 
body::-webkit-scrollbar-thumb {
  background: #212121;
  outline: 1px solid slategrey;
}

#moniteur{
	width: calc(100% - 55%); 
	display: inline-block;
	float: right;
	margin-top: 8vh;
}


input[type="text"]:focus, input[type="password"]:focus, input[type="submit"]:focus, textarea:focus{
	outline: none;
}

input[type="text"], input[type="time"], input[type="date"], input[type="number"], input[type="password"]{
	background: #48494b; 
	border: none;
	outline: none;
	border-radius: 4px;
	padding: 7px;
	color: white;
}

a{
	text-decoration: none;
	color: white;
}	

input[type=submit]{
	background: #346936;
	border-radius: 4px;
	padding: 0px;
	margin: 0px;
	text-align: center;
	border: none;
	font-weight: bold;
	font-size: 8px;
	text-transform: uppercase;
	cursor: pointer;
	color: white;
}

input[type=submit]:hover{
	background: #26601b;
}

input[type="textarea"], textarea{
	width: calc(100% - 10px);
	background: #252b32; 
	border: none;
	height: 50px;
	border-radius: 4px;
	padding: 5px;
	color: #dbdbdb;
	outline: none;
}

input[type=range] {
    -webkit-appearance: none;
    background-color: silver;
    width: 80%;
    height:10px;
    margin: auto auto 10px auto;
    border-radius: 4px;
    background-color: #354A5D;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    background-color: #C5C5C5;
    border-radius: 50px;
    box-shadow: 0px 0px 1px black;
    width: 16px;
    height: 16px;
    cursor: pointer;
}

input[type="range"]:focus{
	outline: none;
}


#site{
    border-radius: 2px;
    max-width: 1500px;
    margin: 0px auto;
    min-height: 900px;
    box-shadow: 0px 0px 2px black;
}

#header{
	top: 0;
	position: relative;
	height: 200px;
	margin-bottom: 10px;
}

#header_espace{
	background:  #252628;
	float: left;
	width: calc(100% - 20px);
	padding: 10px;
}

#logo{
	padding: 10px;
	float: left;
	width: 20%;
	margin: 25px 0px 20px 20px;
}

#publicite{
	background: #252b32;
	float: right;
	width: 730px;
	height: 180px;
	padding: 5px;
	border-radius: 2px;
}


#menu_haut{
	background: #1a1b1c;
	/*background: #412121;*/	
}

.menu_haut{
	width: 50%;
	display: inline-block;
	/*background: #412121;*/	
}

ul.menu {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

li.menu {
    float: left;
}

li a, .dropbtn {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li.menu a:hover, .dropdown.menu:hover .menu.dropbtn {
    background: #262828;
}

li.menu.dropdown {
    display: inline-block;
}

.menu.dropdown-content {
    display: none;
    position: absolute;
     background: #262828;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.menu.dropdown-content a {
    color: #e5e5e5;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.menu.dropdown-content a:hover {
	background: #1a1b1c;
}

.menu.dropdown:hover .menu.dropdown-content {
    display: block;
}

#header_date{
	padding: 14px;
	color: red;
	text-transform: capitalize;
}

#notification{
	width: 40%;
	float: right;
	padding: 6px;
}

.notif_box{
	float: right;
	display: inline-block;
	padding: 9px;
	margin-left: 15px;
	border-radius: 4px;
	
}

.notif_box.ouvert{
	background: #346936;
	
}

.notif_box.vide{
	background: #693934;
}

.notif_box.maintenance{
	background: #695b34;
}

#message_notif_box{
	background: red;
	float: right;
	padding: 9px;
	margin:  -36px 12px 0px 0px;
	
}

.texte_notification{
	background : #a43030;
	border-radius: 50px;
	padding-top: 5px;
	height: 14px;
	font-size: 8px;
	margin-top: -20px;
	margin-left: 20px;
	color: white;
	font-weight: bold;
	position: absolute;
	z-index: 2;
	text-align: center;
	width: 19px;
	
}

#page_site{
	overflow: auto;
    background: #1a1b1c;
}

#emplacement{
	background: #1a1b1c;
	background: -webkit-linear-gradient(#2d2b2a 0%, #1a1b1c 80%);
	padding: 1px;
	z-index: 2;
	overflow: auto;
}

#info_jeu{
	width: 900px;
	display: inline-block;
}

.info_jeu{
	padding: 5px 10px 5px 5px;
	display: inline-block;
	border-right: 1px solid rgba(156, 156, 156, 0.10);
}

.info_jeu_image{
   vertical-align: middle;   
   padding: 5px;
   width: 20px;     
}

.info_jeu_titre{ 
	font-weight: bold;
	text-transform: uppercase;
	display:inline-block; 
	vertical-align:middle;
	text-align: center;
}

.info_compte{
	padding: 5px 10px 5px 5px;
	display: inline-block;
	border-left: 1px solid rgba(156, 156, 156, 0.10);
}

.info_jeu_image{
   vertical-align: middle;   
   padding: 5px;
   width: 20px;     
}

.info_jeu_titre{ 
	font-weight: bold;
	text-transform: uppercase;
	display:inline-block; 
	vertical-align:middle;
	text-align: center;
}

.bouton{
	border-radius: 4px;
	padding: 8px;

	float: right;
	margin-right: 10px;
	display: inline-block;
	text-align: center;
	border: none;
	font-weight: bold;
	font-size: 9px;
	text-transform: uppercase;
	cursor: pointer;
	color: white;
}

.bouton.oublie{
	background: #695d34;
}

.bouton.inscription{
	background: #345469;
}
.site_position{
	float: right;
	width: 25%;
	margin-top: 5px;
	display: inline-block;
}

.page_position{
    float: right;
    text-align: center;
    color: #dbdbdb;
    text-transform: capitalize;
    font-weight: bold;
    padding: 8px;
    border-radius: 2px;
    margin: 5px;
    cursor: pointer;
}

.bouton_action{
   background: #1d3750;
    float: right;
    text-align: center;
    color: #dbdbdb;
    text-transform: uppercase;
    font-weight: bold;
    padding: 8px;
    border-radius: 2px;
    margin: 5px;
    cursor: pointer;
}

.bouton_action a{
	color: #dbdbdb;
}

.bouton_action a:hover{
    color: #dbdbdb;
}

.bouton_action:hover{
   	background: #1b4e6b;
}

/* MENU PRINCIPAL */

#menu{
	
	/*background: #412121;*/
	background: #252b32;
	background: #112131;
	padding: 1px;
	z-index: 2;
	overflow: auto;
}

.header_info_responsive_box{

}

.header_info{
    background: rgba(51, 50, 50, 0.46);
    width: 180px;
    font-size: 12px;
    float: left;
    color: #dbdbdb;
    text-align: center;
    margin: 5px;
    padding: 4px;
    border-radius: 2px;
}




.header_rubrique{

    width: 40px;
    height: 40px;
    padding: 10px;
    float: left;
    margin: 5px;
}

.header_rubrique:hover{
    background: rgba(255, 255, 255, 0.08);
    border-radius: 6px;
}

/* MENU GAUCHE */


#menu_droite{
	float: right;
	background: #38434D;
	padding: 10px;
	margin: 10px 5px 5px 5px;
	width: 200px;
	height: 40vh;
	border-radius: 2px;
	border: 1px solid #E2E2E2;
}


ul.menu_droite {
	list-style-type: none;
    margin: 0;
    padding: 0;
    width: 200px;
}

li.menu_droite {
	display: block;
    color: #000;
    text-transform: capitalize;
    border-bottom: 1px solid  rgba(46, 54, 64, 0.63);
    text-decoration: none;
    width: 200px;
}



li.menu_droite:hover, .dropdown.menu_droite:hover .dropbtn.menu_droite {
	background: #252b32;
    color: white;
}

li.menu_droite a:hover, .dropdown.menu_droite:hover .dropbtn.menu_droite {
    background-color: none;
}

li.menu_droite.dropdown {
    display: inline-block;
}

.dropdown-content.menu_droite {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content.menu_droite a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
    cursor: pointer;
}

.dropdown-content.menu_droite a:hover {background-color: #f1f1f1}

.menu_droite.dropdown:hover .menu_droite.dropdown-content {
    display: block;
}

/* FIN MENU GAUCHE */


#contenu_site{
	min-height: 50vh;
	width: 100%;
	float: left;
	margin-top: 10px;
	overflow: auto;
}

#footer{
	bottom: 0;
	min-height: 90px;
	position: relative;
	 background: #1a1b1c;
}

.footer{
	padding: 10px 20px 20px 20px;
	text-align: center;
}

#developpeur{
	background:  #253441;
	
	padding: 10px;
	margin:0px 0px 0px 0px;
	text-align: left;
	color: #dbc6a5;
	font-size: 12px;
}

.developpeur{
	background: #346013;
	width:80px;
	padding : 5px;
	margin:5px;
}


	#ordinateur{
		width: 100%;
		height: 423px;
		margin: 0 auto;
		position: relative;
		
		z-index: 2222;
		
	}
	
	.contenu_screen_mac{
		width: 650px;
		float: left;
		background: url('https://boost.air-carrier.fr/images/macbook.png') no-repeat 0 0;
		background-size: 585px;
		border-radius: 2px;
		height: 436px;
	}
	.img_screen_mac{
		width: 352px; 
		height: 343px; 
		z-index: 1; 
		margin-left: 70px; 
		margin-top: 18px; 
	}
@media (max-width: 1210px) {

	#moniteur{
		width: 100%;
	}
	
	body {
        background-image: none;
        margin: 0px;
       background: #1a1b1c;
    }
    
    #header{
	
	}
    
    #header_espace{
	    margin-top: -20px;
	}
	
    .menu_haut{
	    width: 100%;
	    text-align: center;
	    float: none;
	    margin-bottom: 8px;
	}
	#logo{
		width: calc(100% - 40px);
		text-align: center;
		float: none;
	}
	#publicite{
		width: 100%;
	}
	#header_date{
		display: none;
	}
	

	
	.bouton_action{
		float: none;
		display: inline-block;
	}
	.header_rubrique_responsive_box{
	    margin: 0 auto;
     width: 540px; 
	}
	
	.header_rubrique{
	
	    width: 40px;
	    height: 40px;
	    padding: 20px;
	    float: left;
	    text-align: center;
	    margin: 5px;
	}
	
    #notif_box{
        display: none;
    }
	.notif_box{
		display: none;
	}
	
	#info_jeu{
		width: 100%;
	}
	
	.info_jeu{
		width: 97%;
		margin: 7px auto 0px auto;
		text-align: center;
	}
	
	#emplacement{
		margin: 0 auto;
		width: 100%;
		overflow: auto;
	}
	
	.bouton_action{
		float: none;
		display: inline-block;
	}
	.header_rubrique_responsive_box{
	    margin: 0 auto;
     width: 540px; 
	}
	
	.site_position{
		width: 70%;
		float: none;
		margin: 0px auto;
	}
	
	.bouton{
		width: 50%;
		margin: 10px auto;
	}
}