/**** Récupération d'une police sur le serveur ****/
@font-face 
{
	font-family: "starjedi";
	src: url('ressources/fonts/starjedi.ttf');
}

/**** Corps de la page ****/
body
{
	background-color: #940f04; /* Couleur de fond de la page */
	width: 450px; /* Largeur de la page */
	margin: auto; /* Centrer la page horizontalement */
	font-family: "starjedi", "Arial"; /* Police du texte */
	color: rgb(255, 255, 255); /* Couleur du texte */
	overflow: hidden;  /* On cache le scroll */
}

/**** Boîte qui permet de centrer l'écran de jeu verticalement ****/
#box
{
	height: 100%; /* On prend toute la hauteur de la fenêtre du navigateur */
	width: 450px; /* Largeur de la boîte */ 
	position: absolute; /* On met la position en absolu */
	white-space: nowrap; /* Tous les éléments de la boîte sont placé sur une seule ligne */
}

/**** On centre tous les éléments de la boîte verticalement ****/
#screen, #loading, .wall
{
	display: inline-block; /* On attribut un comportement hybride entre le bloc et l'élément inline aux éléments. */
	vertical-align: middle; 
}

/**** Le bloc de mur doit faire la même taille que la boîte ****/
.wall
{
	height: 100%; 
}

/**** Ecran de jeu ****/
#screen
{
	/* Dimensions de l'écran de jeu */
	width: 450px; 
	height: 700px; 
	
	position: relative; /* On définit la position relative comme ça les objets seront positionnés par rapport au coin supérieur gauche de l'écran de jeu. */
	background-color: rgb(0, 0, 0); /* Fond de l'écran défini à noir. */
	overflow: hidden; /* On cache le scroll et tout ce qui déborde de l'écran de jeu */
	border: solid 1px rgb(255, 255, 255); /* On met une bordure blanche pour faire ressortir l'écran de jeu. */
	
	/* Une ombre CSS 3 pour que ce soit plus classe. */
	box-shadow: 5px 5px 5px #000000;
  	-moz-box-shadow: 5px 5px 5px #000000;  
  	-webkit-box-shadow: 5px 5px 5px #000000;  
}

/****  Message de chargement ****/
#loading 
{
	text-align: center; 
	width: 100%; 
}

/**** Console pour débuguer ****/
#console
{
	position: absolute; 
	left: 10px; 
	top: 10px; 
}