/* ==============================================
   FEUILLE DE STYLES DES GABARITS HTML/CSS --- 01
   © 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: #181A12; /* Voir -> Note 1 ci-dessous */
}
a {
	color: #FF6533;
}
a:hover, a:focus {
	color: #FF4C00;
}
strong {
	color: #A1B55D;
}

/* En-tÍte */
#entete {
	background: #2C2F22;
}

/* Navigation */
#navigation {
	background: #181A12;
}
#navigation a {
	color: #FF6533;
}
#navigation a:hover, #navigation a:focus {
	background: #000000;
}

/* Contenu principal */
#contenu {
	color: #363B29;
	background: #cbd888;
}
#contenu a {
	color: #332510;
}
#contenu a:hover, #contenu a:focus {
	color: #6E5122;
}
#contenu strong {
	color: #181A12;
}

/* Pied de page */
#pied {
	color: #E6A948;
}


/* --- POSITIONNEMENT --- */

/* Page */
body {
	padding: 0; /* -> 2 */
}

/* En-tÍte */
#entete {
	padding: 3px 20px 3px 20px;
}
#entete h1 {
	margin: 0;
}
#entete h1 img {
	float: left;
	margin: 7px 20px 10px 0;
}
#entete .sous-titre {
	margin: 3px 0 3px 0;
}

/* Menu de navigation */
#navigation {
	padding: 3px 15px;
}
#navigation ul {
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: center;
}
#navigation li {
	display: inline; /* -> 3 */
}
#navigation a {
	padding: 0px;
	/*line-height: 1.5;*/
	font-size: .9em;
	text-decoration: none;
}

/* Contenu */
#contenu {
	padding: 3px 20px;
}
#contenu > :first-child {
	margin-top: 10px;
}
#contenu p, #contenu li {
	line-height: 1.5;
}
/* Pied de page */
#pied {
	padding: 15px 20px;
	font-size: 1em;
}
#pied p {
	margin: .5em 0;
}
#pied #copyright {
	float: right;
	margin: .5em 0 30px 10%;
	font-size: 1em;
}


/* --- NOTES ---

1.	Notes que cette couleur de fond n'est apparente qu'en bas de page. Plus
	haut, elle est masque: par la couleur de fond de l'en-tÍte, puis par la
	couleur de fond du menu, puis par la couleur de fond du contenu. Seul le
	pied de page laisse apparaitre cette couleur de fond.

2.	Pour ce gabarit, on supprime l'Ècart entre les ´bordsª du navigateur et
	le contenu, en passant le padding de l'ÈlÈment BODY ‡ zÈro.
	(Voir Ègalement la note numÈro 2 dans base.css.)

3.	Si les ÈlÈments de notre menu se placent horizontalement plutÙt que les
	uns en dessous des autres, c'est parce qu'ils ne sont plus affichÈs
	comme des blocs (ce qui est normalement le cas des ÈlÈments LI), mais
	comme des ÈlÈments de type en-ligne. On obtient ce comportement avec la
	propriÈtÈ "display" et la valeur "inline".
	Le fait que nos LI se comportent comme un flot unique de texte aura deux
	consÈquences:
	- on va pouvoir aligner le texte du menu ‡ gauche (c'est le cas ici), ‡
	  droite ou encore au centre, en jouant sur la propriÈtÈ "text-align" du
	  menu (sur l'ÈlÈment UL ou sur div#navigation);
	- certains styles ne pourront pas Ítre appliquÈs... par exemple, la
	  propriÈtÈ "width" ne peut pas Ítre utilisÈe pour les ÈlÈments en
	  "display: inline".

*/