/* ******************************************************************************* */
/* Fichier : styles_gabarit_3_cadres.css                                           */
/* Réalisé par P. ARNOULD / Créé le 17/04/2009 / Modifié par P.A. le 22/12/2010    */
/* ******************************************************************************* */
/* ******************************************************************************* */
/* Rappel de syntaxe CSS :                                                         */
/* Regroupement des 4 valeurs dans une même propriétés :                           */ 
/*                                                                                 */
/*     margin: 1px 3px    1px    2px; ) On doit spécifier l'unité,                 */
/*              ^   ^      ^      ^     mais si 0 : pas d'unité.                   */
/*             top  right bottom left                                              */
/*                                                                                 */
/*  #toto : Elément dont l'ID est toto... (unique)                                 */
/*  .toto : Elément de CLASS toto... (multiple)                                    */
/*                                                                                 */
/* RAPPEL : pour éviter des problèmes de compatibilité entre Firefox et MSIE,      */
/* il faut privilégier les margins et éviter de toucher aux paddings.              */
/*                                                                                 */
/* ******************************************************************************* */
/* ==============================================
   FEUILLE DE STYLES DES GABARITS HTML/CSS --- 06
   © Elephorm & Alsacreations.com
   Conditions d'utilisation:
   http://creativecommons.org/licenses/by/2.0/fr/
   ============================================== */
/* --- COULEURS --- */
/* Note: vous pouvez modifier simplement l'aspect de ce gabarit en modifiant
   uniquement les couleurs de fond (propriétés background) et les couleurs
   du texte (propriété color).
   Pour modifier la disposition des blocs, voir plus bas dans la feuille de
   styles la partie «positionnement». */
/* ******************************************************************************************* */
/* Cadre global */
#global {
	/* border-right: 10px solid #181A12; /* Voir -> Note 1 ci-dessous */
	background: #CDD8EE url(/images/mariaks/fond_bleu_bluestreak_mariaks_sw_20.jpg) repeat-y left top; /* #192233 -> 1 */
}
/* ******************************************************************************************* */
/* En-tête */
#entete {
	/* background: #181A12; */
}
#entete strong {
	color: #000066;       /* Bleu marine */
}
/* ******************************************************************************************* */
/* Contenu principal */
#contenu {
	background: url(/images/barre_separation_entete.png) no-repeat left top;
}
/* ******************************************************************************************* */
/* --- POSITIONNEMENT --- */
/* ******************************************************************************************* */
/* Page */
body {
	padding: 5px 5px 0 10px;
}
#global {
	width: 98%;
	overflow: hidden; /* -> 2 */
	min-width: 800px;
	max-width: 1000px; /* -> 3 */
	margin-left: auto;
	margin-right: auto; /* -> 4 */
}
/* ******************************************************************************************* */
/* Menu de navigation */
#menu_navigation {
	width: 160px;
	float: left; /* -> 5 */
	margin-top: 135px;
  background-color: transparent;
}
#menu_navigation ul {
	margin: 0;
	padding: 5px 0px 0px 0px;
	list-style: none;
}
#menu_navigation a {
	display: block;
	height: 1%; /* -> 6 */
	padding: 6px 6px 6px 10px;
	line-height: 1.5;
	/* color: #FF6533; */
	font-size: .9em;
	text-decoration: none;
}
/* ******************************************************************************************* */
/* En-tête */
#entete {
	padding: 0px 5px 0px 5px;
}
#entete h1 {
	margin: 0;
}
#entete h1 img {
	float: left;
	margin: 3px 5px 5px 0;
}
#entete p {
	margin: 4px 0 3px 0;
  color: #FF4A33;
}
/* ******************************************************************************************* */
/* Informations */
#zone_infos {
	width: 160px;
	float: right;
  margin: 100px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
  border: 0px; 
}
#zone_infos h4 {
	margin: 0;
	padding: 5px 2px 5px 2px;
  color: #fff;
	font: 1.2em "Trebuchet MS", sans-serif;
	background: #000 url(/images/menu_general/menu-item.png) left bottom no-repeat;
}
#zone_infos h4 img {
	width: 18px;
	height: 18px;
}
#zone_infos h4 a {
	color: #fff;
}
#zone_infos h4 a:hover, #zone_infos h4 a:focus, #zone_infos h4 a:active {
	color: #FF6533;
}
#zone_infos p {
	margin: 0;
	padding: 5px 2px 5px 2px;
	font-size: .8em;
	color: #fff;
	font: 1.0em "Trebuchet MS", sans-serif;
	background: #ccc url(/images/menu_general/menu_sous-item.png) 0 0 repeat-x;
}
/* ******************************************************************************************* */
/* Contenu */
#contenu {
	margin-left: 175px; /* -> 7 */
	padding: 3px 20px 3px 10px;
}
#contenu > :first-child {
	margin-top: 3px;
}
#contenu p, #contenu li {
	line-height: 1.5;
}
/* ******************************************************************************************* */
/* Pied de page */
/* ******************************************************************************************* */
/* Mention de copyright */
#copyright {
  clear: both;
	float: left;
	width: 700px;
	margin: 0;
	padding: 10px 0 10px 20px;
	text-align: left;
}
.piedepage_logos {
  float: right;
  text-align: right;
	margin: 0;
	padding: 20px 5px 5px 5px;
}
#weborama {
  float: right;
  text-align: right;
	margin-top: 20px;
}
/* ******************************************************************************************* */
/* --- NOTES ---

1.	Ce gabarit joue sur les couleurs de fond, images de fond et parfois
	les bordures des principaux blocs. On peut noter que:
	- Le bloc div#global a une couleur de fond claire. C'est cette couleur de
	  fond que l'on retrouve, visuellement, en fond de la colonne de contenu.
	- La colonne de gauche ainsi que la «bordure» qui sépare les deux colonnes
	  sont dessinées par une image de fond sur div#global, image qui se répète
	  en hauteur.
	- Le bloc d'en-tête masque complètement la couleur de fond et l'image de
	  fond de div#global. Supprimez la couleur de fond de div#entete pour le
	  vérifier.
	- Le retrait de 20px à droite de la colonne de droite est créé par... une
	  bordure sur div#global.
	- Une petite image de fond en haut à gauche de div#contenu vient compléter
	  l'effet visuel.

2.	On utilise overflow:hidden empêcher le dépassement des flottants (cf.
	http://web.covertprestige.info/test/
	03-elements-flottants-et-element-parent-1.html).

3.	La largeur du conteneur principal est fluide. div#global a une largeur de
	90%, c'est à dire une largeur qui dépend de l'espace disponible dans son
	conteneur, l'élément BODY. Concrètement, la largeur de div#global dépendra
	de la largeur de la fenêtre du navigateur.
	Ensuite, on «limite» les largeurs que peut prendre div#global à une
	fourchette allant de 700px (min-width) à 1000px (max-width). On évite
	ainsi d'avoir des lignes de texte horriblement longues dans les grandes et
	très grandes résolutions (1280px et plus).
	Notez que l'on peut utiliser cette technique de largeur fluide
	«intelligente» pour n'importe quel design fluide ou presque.

4.	Les marges automatiques à gauche et à droite permettent de centrer notre
	bloc div#global, et donc tout le site.
	Pour aligner div#global à gauche, on fera:
		margin-left: 0;
		margin-rigth: auto;
	Pour aligner div#global à droite, on fera:
		margin-left: auto;
		margin-right: 0;
	Pour aligner div#global à droite avec un retrait (à droite) de 100px:
		margin-left: auto;
		margin-right: 100px;

5.	C'est la propriété "float" qui nous permet de placer deux blocs
	côte-à-côte. Notez bien que l'élément flottant (ici, notre menu de
	navigation) doit être placé en premier dans le code HTML. Il est
	préférable de lui donner une largeur, ce que nous faisons ici avec un
	"width: 180px;".

6.	Correction d'un bug d'Internet Explorer 6. Voir la dernière partie de
	http://blog.alsacreations.com/2006/10/20/294-impact-sur-le-rendu-de-la-
	mise-en-forme-du-code-html
	Dans l'idéal, on placera ce correctif dans une feuille séparée, appelée
	via un commentaire conditionnel visant IE6.

7.	Les éléments flottants ne repoussent pas les blocs, mais repoussent
	uniquement leur contenu. Pour que notre bloc de contenu principal forme
	une colonne distincte du menu, on lui donne donc une marge à gauche de
	220px.
	Il existe une autre technique pour adapter la largeur d'un bloc aux
	flottants qui le précèdent. On pourra lire l'article suivant:
		http://css.alsacreations.com/Faire-une-mise-en-page-sans-tableaux/
		design-trois-colonnes-positionnement-flottant

*/
/* ************************************************************************************** */