/* ==============================================
   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». */

/* Général */
body {
	color: #F0E39E;
	background: #FFFFFF;
}
a {
	color: #000000;
}
a:hover, a:focus {
	color: #FF4C00;
}
strong {
	color: #A1B55D;
}

/* Global */
#global {
	color: #F0E39E;
	background: #e3e5ff; /* -> 1 */
}

/* En-tête */
#entete {
	background: #181A12;
}

/* Navigation */
#navigation {
	background: #4d53a1 url('images/tmnu.png') no-repeat top right;
}
#navigation a {
	color: #FFFFFF;
}
#navigation a:hover, #navigation a:focus {
	background: #000000;
}

/* Contenu principal */
#contenu {
	background-image: url('images/tcont.png');
	background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: 180px 0;
	color: #000000;
}

#contenu a:hover, #contenu a:focus {
	color: #387b95;
}
#contenu strong {
	color: #181A12;
}


/* --- POSITIONNEMENT --- */

/* Page */
body {
	padding: 0 10px 0 10px;
}
#global {
	width: 100%;
	overflow: hidden; /* -> 2 */
	min-width: 750px;
	max-width: 750px; /* -> 3 */
	margin-left: auto;
	margin-right: auto; /* -> 4 */
}

/* En-tête */
#entete {
  height:244px;
	padding: 0;
	margin: 0;
}

/* Menu de navigation */
#navigation {
	width: 180px;
	margin-right:15px;
	float: left; /* -> 5 */
}
#navigation ul {
	margin: 0;
	padding: 40px 10px;
	list-style: none;
}
#navigation a {
	display: block;
	height: 1%; /* -> 6 */
	padding: 6px 6px 6px 10px;
	line-height: 1.5;
	font-size: .9em;
	text-decoration: none;
}

/* Contenu */
#contenu h1, h2, h3, p{
	/* margin-left: 180px; -> 7 */
	padding: 20px 20px 10px 20px;
}
h1, h2, h3, p{
	margin:0;
}
/*#contenu > :first-child {
	margin-top: 10px;
}*/
#contenu p, #contenu li {
	line-height: 1.5;
}

/* Mention de copyright */
#copyright {
 

	margin: 0;

	text-align: center;
	color:#a8c2cc;
}

#pied {
  color:#000000;
  padding : 10px 0;
	margin : 10px 10px;
	font-size: .85em;
}
#pied p {
	margin: .5em 0;
}
/* --- 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#g