@import "header.v3.0.css";
@import "footer.v1.0.css";

/*----------------------------------------*
**  Layout - aspect général de la page
**----------------------------------------*/
/*----------------------------------------*
Couleurs :
turquoise 				18b3dd
taupe 				afa992
gris vert 				f3f3e8 (f0f0e5)
gris vert nuance 			efefe3
gris bleu sombre 			587077
vert 					9db470
gris texte 				555555
bleu sombre 			21343b
vert pale 			e5e5d2
border:1px solid red;
**----------------------------------------*/

html,
body {
	height				: 100%;
	}
html {
	min-width			: 980px;
	/*max-width			: 1024px;*/ 		/*sinon décalage de 1px dans l'affichage des background si width>1024px */
	background      	: #f3f3e8 url(graphics/background_slice.jpg) repeat-y center top;
	}
body {
	/* au cas où l'affichage est plus petit que l'écran */
	background      	: transparent url(graphics/background.jpg) no-repeat left top;
	}
	
/* définition de la police par défaut */
body {
	text-align			: left;
	/*font-family			: Verdana, Arial, Helvetica, sans-serif;*/
	font-family			: "Trebuchet MS", Sans, Arial, sans-serif;
	color				: #21343b; /*#21343b;*/
	}

#main_content {
	position			: relative;		/* Pour positionner le footer */
	margin				: 0 auto;
	width				: 960px; 		/* Largeur de la page */	
	min-height			: 100%; 		/* Pour positionner le footer */
	background-color	: transparent; 	/* couleur par défaut de la partie centrale */
	}
	
#header { /* bandeau */
	position			: absolute; 	/* bandeau flottant */
	}

div#center {
	width				: 960px;
	padding-bottom		: 220px; 		/* hauteur du pied de page : pour éviter la superposition du pied de page et du contenu : */ 
	/* Pour englober les blocs flottants (sortis du flux)  dans le calcul de la hauteur du div, il existe plusieurs solution,
	chacune ayant des effets de bord pas forcément désirables*/
	/* (il faut englober les blocs flottant pour le cas où le menu est plus grand que le contenu de la page (article très court)) */
	/* Donc, après plusieurs essais : */
	/*float				: left;*/
	display				: table-cell; 		/* impact : modifie le mode de calcul de la largeur du conteneur (il s'adapte à son contenu) */
	/* est ce vrai ? : le display:table est le moins "destructif" pour notre cas ; mais il pose un problême en cas de rafraichissement (cf searchResults) */
	/*display				: table;*/
	/* cf http://www.blog-and-blues.org/articles/Float,_clear_et_contextes_de_formatage */	/* présentation */
	}

div#menu { /* colonne de gauche */
	float				: right;
	/*position			: absolute;*/
	margin-top			: 136px; /* header */
	width				: 250px;
	overflow			: hidden;
	}

div#content { /* colonne de droite */
	position			: relative;
	margin-top			: 136px; /* header */
	/*margin-left			: 250px;*/
	width				: 690px;
	/*overflow			: hidden;*/
	}

div#content #log{
	padding				: 1em 1ex;
	margin				: auto;
	width				: 60%;
	border				: 1px solid red;
	color				: red;
	}

div#content .info{
	padding				: 1em 1ex;
	margin				: auto;
	width				: 60%;
	border				: 1px solid;
	}	

#footer {
	/* layout */
	position			: absolute;
	left				: 0;
	bottom				: 0;
	
	width				: 710px; /* dépassement 10px  à droite pour recouvrir le fond */
	height				: 190px;
	}
div#footer a,
div#footer a:link,
div#footer a:visited,
div#footer a:active {
	color				: #999;
	}
div#footer a:hover {
	color				: #555;
	text-decoration		: underline;
	}
/*----------------------------------------*
**  Links
**----------------------------------------*/
a:link,
a:active,
a:visited { 
	color				: #21343b;
	text-decoration		: none; 
	}
a:hover {
	color				: #18b3dd; 
	text-decoration		: underline;
	}