@font-face {
	font-family: 'fedoraTitle';
	src:url('fonts/SF Fedora.ttf');
}
@font-face {
	font-family: 'fedoraText';
	src:url('fonts/SF Fedora Titles.ttf');
}

body 			{ background: url('images/background.png') no-repeat center 10px; 
				font-family: 'fedoraText', sans-serif; }
h1, h2, h3, h4 	{ font-family: 'fedoraTitle', sans-serif;
				background: -webkit-linear-gradient(#ff0000, #e69027, #e6cd27, #fff);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
				-moz-background-clip: text;
				-moz-text-fill-color: transparent;
				-o-background-clip: text;
				-o-text-fill-color: transparent; } 				
.page 			{ width: 900px; margin: 0 auto; }

.pageAube 		{ background: url(images/backgroundAube.png) center no-repeat; }
.pageJour 		{ background: url(images/backgroundJour.png) center no-repeat; }
.pageCrepuscule	{ background: url(images/backgroundCrepuscule.png) center no-repeat; }
.pageNuit 		{ background: url(images/backgroundNuit.png) center no-repeat; }

/* Header */

/* Background main */
.mainGauche	{ width: 35px; height: 64px; position:absolute; top:236px; left:-20px;
			background: url('images/mainGauche.png') no-repeat; }
.mainDroite	{ width: 26px; height: 57px; position:absolute; top:259px; right:0;
			background: url('images/mainDroite.png') no-repeat; }


/* Contenu */
asside			{ float: left; width: 20%; position:relative;
				border-style: solid; border-width: 20px;
				-moz-border-image: url(images/bordure2.png) 32 repeat;
				-webkit-border-image: url(images/bordure2.png) 32 repeat;
				-o-border-image: url(images/bordure2.png) 32 repeat;
				border-image: url(images/bordure2.png) 32 30 34 32  repeat;
				box-sizing: border-box; 
				-moz-box-sizing: border-box; 
				-webkit-box-sizing: border-box; /*background: #22751E;*/}
asside>div 		{ border-radius: 10px; padding: 10px;
				background: #c9de96; /* Old browsers */
background: -moz-linear-gradient(top,  #c9de96 0%, #8ab66b 44%, #398235 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c9de96), color-stop(44%,#8ab66b), color-stop(100%,#398235)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #c9de96 0%,#8ab66b 44%,#398235 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #c9de96 0%,#8ab66b 44%,#398235 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #c9de96 0%,#8ab66b 44%,#398235 100%); /* IE10+ */
background: linear-gradient(to bottom,  #c9de96 0%,#8ab66b 44%,#398235 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c9de96', endColorstr='#398235',GradientType=0 ); /* IE6-9 */

}
.main 			{ background: url(images/backgroundMain.png) no-repeat bottom; padding-bottom: 60px; }
.corps			{ float: left; width: 80%; position:relative;
				box-sizing: border-box; 
				-moz-box-sizing: border-box; 
				-webkit-box-sizing: border-box;}
.inventaire 	{ border-style: solid; border-width: 20px;
				-moz-border-image: url(images/bordure2.png) 32 repeat;
				-webkit-border-image: url(images/bordure2.png) 32 repeat;
				-o-border-image: url(images/bordure2.png) 32 repeat;
				border-image: url(images/bordure2.png) 32 30 38 32  repeat;
				margin-left: 20px;}
.inventaire>div { border-radius: 10px; padding: 10px;
				background: #c9de96; /* Old browsers */
background: -moz-linear-gradient(top,  #c9de96 0%, #8ab66b 44%, #398235 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c9de96), color-stop(44%,#8ab66b), color-stop(100%,#398235)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #c9de96 0%,#8ab66b 44%,#398235 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #c9de96 0%,#8ab66b 44%,#398235 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #c9de96 0%,#8ab66b 44%,#398235 100%); /* IE10+ */
background: linear-gradient(to bottom,  #c9de96 0%,#8ab66b 44%,#398235 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c9de96', endColorstr='#398235',GradientType=0 ); /* IE6-9 */


}
.inventaire span{ float: right; vertical-align: top;}
 
.inventaire span img { position: relative; top: -25px; cursor:pointer; }
p span 			{ display: block; font-size: 0.65em; }


/* Pad pour mouvement */
.pad 		{ width: 120px; margin: 0 auto;
			-webkit-user-select: none;
			-khtml-user-select: none;
			-moz-user-select: none;}
.pad span 	{ float: left; width: 30px; text-align: center; cursor:pointer;
			border: solid; border-width: 15px; 
			-moz-border-image: url(images/bordure.png) 15 round;
			-webkit-border-image: url(images/bordure.png) 15 round;
			-o-border-image: url(images/bordure.png) 15 round;
			border-image: url(images/bordure.png) 15  round;}
.pad img 	{ float: left;}
.haut, .bas { margin: 0 30px;}
.clear 		{ clear : both}

/* Tableau labyrinthe*/
#tableau 			{ border-style: solid; border-width: 20px; margin: 0 auto; 
					-moz-border-image: url(images/bordure.png) 32 round; 
					-webkit-border-image: url(images/bordure.png) 32 round; 
					-o-border-image: url(images/bordure.png) 32 round; 
					border-image: url(images/bordure.png) 32 round;}

.table 				{ float:left; position: relative;}
.tableDragStructure	{ float:left; position: absolute; top:0; left:0; line-height: 0; z-index:1;}
.tableDragBack 		{ float:left; position: absolute; top:0; left:0; line-height: 0; z-index:2;}
.tableDrag1 		{ float:left; position: absolute; top:0; left:0; line-height: 0; z-index:3;}
.tableJoueur 		{ float:left; position: absolute; top:0; left:0; line-height: 0; z-index:5;}
.tableDrag2 		{ float:left; position: absolute; top:0; left:0; line-height: 0; z-index:4;}
.Responsive 		{ display:none;}
.case 				{ float:left; width:32px; height: 32px; }




#tableau table  { border-collapse:collapse;}
#tableau td 	{ text-align: center; padding:0;}
#tableau td img { display: block;}
#infobulle		{ width: 80%; margin-left: -20px; position:absolute;
				border-style: solid; border-width: 60px 30px 20px; 
				-moz-border-image: url(images/infobulle.png) 60 30 20 stretch; 
				-webkit-border-image: url(images/infobulle.png) 60 30 20 stretch; 
				-o-border-image: url(images/infobulle.png) 60 30 20 stretch; 
				border-image: url(images/infobulle.png) 60 30 20 fill stretch;}

/* footer */
footer 			{ position: relative; background : url('images/footer.png') no-repeat 100%;}
footer div		{ padding: 20px 10px 280px;}
footer p		{ float: left; width: 30%; background-color: rgba(255, 255, 255, 0.5); border-radius: 10px; 
				padding: 10px; margin: 5px;}
footer>div>span { position: absolute; left: 10px; bottom: 5px; background-color: rgba(255, 255, 255, 0.5); 	
				border-radius: 10px; padding: 10px;}


@media screen and (max-width: 900px) {
	.page 		{ width: 100%;}
	header img 	{ width: 100%;}
	asside		{ width: 100%;}
	
	/* Background main */
	.mainGauche	{ display: none;}
	.mainDroite	{ display: none;}

	footer p	{ width: 95%;}

}
@media screen and (max-width: 700px) {
	.corps 			{ display:none;}
	#infobulle		{ display:none;}
	.Responsive 	{ display:block; width: 100%; height: 150px; 
					background: rgba(0, 0, 0, 0.7); color: white; text-align: center; z-index:6; 
					margin: 150px 0; padding-top: 150px;}
}