/* --- STYLES DE BASE POUR LE TEXTE ET LES PRINCIPAUX ÉLÉMENTS --- */

/* Page */
html {
	font-size: 100%; /* Voir -> Note 1 à la fin de la feuille de styles. */
}
body {
	margin: 0;
	padding: 10px 20px; /* Note -> 2 */
	font-family: Arial, Helvetica, "Nimbus Sans L", sans-serif; /* 3 */
	font-size: .8em; /* -> 4 */
	line-height: 1.25; /* -> 5 */
	color: black;
	background: white;
}

/* Titres */
h1, h2, h3, h4, h5, h6 {
	margin: 1em 0 .5em 0; /* -> 6 */
}
h1, h2 {
	font-family: Arial, Helvetica, "Nimbus Sans L", sans-serif;
	font-weight: normal; /* -> 7 */
}
h1 {
	font-size: 3em; /* -> 8 */
	font-style: normal;
}
h2 {font-size: 1.8em;}
h3 {font-size: 1em;}
h4 {font-size: 1em;}

/* Listes */
ul, ol {
	margin: .75em 0 .75em 24px;
	padding: 0; /* -> 9 */
}
ul {
	list-style: square;
}
li {
	margin: 0;
	padding: 0;
}

/* Paragraphes */
p {
	margin: .75em 0;
}
li p, blockquote p {
	margin: .5em 0;
}

/* Citations */
blockquote, q {
	font-size: 1.1em;
	font-style: italic;
font-family: Arial, Helvetica, "Nimbus Sans L", sans-serif;
}
blockquote {
	margin: .75em 0 .75em 24px;
}
cite {
	font-style: italic;
}

/* Liens */
a {
	color: mediumblue;
	text-decoration: underline;
}
a:hover, a:focus {
	color: crimson;
}
a img {
	border: none; /* -> 10 */
}

/* Divers éléments de type en-ligne */
em {
	font-style: italic;
}
strong {
	font-weight: bold;
	color: dimgray;
}


/* --- STYLES POUR CERTAINS CONTENUS DES GABARITS --- */

pre, code {
	font-size: 100%;
	font-family: Arial, Helvetica, "Nimbus Sans L", sans-serif;
}
pre {
	width: 90%;
	overflow: auto;
	overflow-y: hidden;
	margin: .75em 0;
	padding: 12px;
	background: #eee;
	color: #555;
}
pre strong {
	font-weight: normal;
	color: black;
}
#copyright {
	margin: 20px 0 5px 0;
	text-align: right;
	font-size: 0.8em;
	color: #FFFFFF;
}
#copyright a {
	color: #FFFFFF;
	text-decoration: none;
}
#copyright a:hover, #copyright a:focus {
	text-decoration: underline;
}


/* --- NOTES ---

1.	Ce "font-size: 100%" est normalement inutile. On l'utilise uniquement
	pour éviter un bug de redimensionnement du texte dans Internet Explorer.

2.	Par défaut, les navigateurs ont un padding (ou, pour certains, un
	margin) de 6px pour l'élément BODY. C'est ce qui évite que le texte
	ne soit complètement collé aux bords de la zone de visualisation du
	navigateur lorsqu'on affiche une page «brute», sans mise en forme.
	Mais ce retrait de 6px est un peu faiblard: on le renforce donc.
	Notez bien que les feuilles de styles des gabarits pourront augmenter
	ce retrait, ou bien l'annuler.
	
3.	Voici quelques exemples de collections cohérentes de fontes (propriété
	CSS "font-family"):
	font-family: Arial, Helvetica, "Nimbus Sans L", sans-serif;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-family: Georgia, "Bitstream Vera Serif", Norasi, serif;
	font-family: "Times New Roman", Times, "Nimbus Roman No9 L", serif;
		
4.	Taille du texte de base de la page. Dépend de la taille du texte par
	défaut du navigateur (souvent 16px), et des réglages de l'utilisateur.
	À adapter en fonction de la fonte choisie, et du rendu souhaité.
	En général, on utilisera une valeur de base entre .65em et 1em
	(ou 65% et 100%).

5.	Hauteur de ligne. À adapter en fonction de la fonte choisie, et des
	besoins particuliers (lignes de texte longues ou courtes, titre ou
	corps de texte...).

6.	En général, les styles par défaut des navigateurs font que les marges
	en haut et en bas des titres sont équivalentes. Ici, en diminuant la
	marge du bas, on cherche à rapprocher le titre du contenu qu'il introduit.

7.	Les styles par défaut des navigateurs mettent les titres en gras.
	Si on souhaite passer à des caractères «normaux», on doit utiliser
	font-size: normal.

8.	Pour un élément en "font-size: 3em", la taille du texte sera le triple de
	la taille du texte de l'élément parent.
	À noter: on aurait pu écrire "font-size: 300%" pour le même résultat.

9.	Par défaut, les listes UL et OL ont un retrait à gauche qui peut être,
	suivant les navigateurs:
	- un padding-left de 40px;
	- ou bien un margin-left de 40px.
	On met tout le monde d'accord avec une marge à gauche de 24px, et pas
	de padding.

10.	Les navigateurs donnent souvent aux images placées dans des liens
	une bordure disgracieuse. On annule ce style souvent gênant en appliquant
	un "border: none" aux images qui se trouvent à l'intérieur d'un lien.

*/
/* ==============================================
   FEUILLE DE STYLES DES GABARITS HTML/CSS --- 02
   © 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: #000000;
	background: #ffffff;
}
a {
	color: #FFFFFF;
}
a:hover, a:focus {
	color: #FF4C00;
}
strong {
	color: #A1B55D;
}

/* Navigation - color de la nav */
#navigation {
	background: #000000;
}
#navigation a {
	color: #ffffff;
}
#navigation a:hover, #navigation a:focus {
	background: #000000;
}

/* Contenu principal - couleur de fond et typo*/
#contenu {
	color: #000000;
	background: #ffffff;
}
#contenu a {
	color: #000000;
}
#contenu a:hover, #contenu a:focus {
	color: #000000;
}
#contenu strong {
	color: #000000;
}

/* Pied de page */
#pied {
	color: #FFFFFF;
	background: #000000;
}


/* --- POSITIONNEMENT --- */

/* Page */
body {
	padding: 15px 0 25px 0;
}
#global {
	width: 855px;
	margin-left: 20px;
	margin-right: auto; /* Voir -> Note 1 ci-dessous */
}

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

/* Menu de navigation */
#navigation {
	padding: 12px 15px;
}
#navigation ul {
	width: 100%; /* -> 2 */
	overflow: hidden; /* -> 2 */
	margin: 0;
	padding: 0;
	list-style: none;
}
#navigation li.gauche {
	float: left; /* -> 3 */
	margin-right: 10px;
	font-size: 1.4em;
	font-style: normal;
}
#navigation li.droite {
	float: right; /* -> 3 */
	margin-right: 0;
	margin-left: 10px;
	padding: 3px 0;
}

#navigation a {
	padding: 6px;
	line-height: 1.5;
	font-size: .9em;
	text-decoration: none;
}

/* Contenu */
#contenu {
	padding: 10px 20px;
}
#contenu > :first-child {
	margin-top: 10px;
}
#contenu p, #contenu li {
	line-height: 1.5;
}

/* Pied de page */
#pied {
	padding: 15px 20px;
	font-size: .85em;
}
#pied p {
	margin: .5em 0;
}
#copyright {
	text-align: left;
	font-size: 1em;
}


/* --- NOTES ---

1.	Le conteneur a une largeur fixe (750px), une marge à gauche de 20px pour
	créer un retrait esthétique, et un margin-right qui a pour valeur "auto".
	Ce dernier point n'est pas nécessaire pour placer le conteneur à gauche
	de la page; ce sera en effet le comportement «normal» de tout bloc.
	Si on souhaite placer ce conteneur à droite, par contre, on pourra utiliser
	un margin-left avec la valeur "auto", et un margin-right à 20px (ou zéro,
	ou autre valeur autre que "auto").

2.	On utilise ici la déclaration "overflow: hidden" pour empêcher le
	dépassement des éléments flottants. On utilise aussi un "width: 100%" pour
	corriger le même problème... dans Internet Explorer 6, qui n'appliquera
	pas correctement le "overflow: hidden".
	En savoir plus sur ce sujet:
	http://web.covertprestige.info/test/
		03-elements-flottants-et-element-parent-1.html

3.	Dans le gabarit 01, nous utilisions "display: inline" pour placer les
	différents items du menu à l'horizontale. Ici, on va utiliser une autre
	possibilité: la propriété CSS "float".
	Quels sont les avantages de la propriété "float"? Eh bien, on va pouvoir
	placer une partie des items du menu à gauche, et une autre partie à droite,
	ce qui est utile quand on veut réaliser un menu avec des éléments
	d'importance diverse (on mettra alors les éléments les plus importants à
	gauche, et les éléments secondaires à droite).
	Contrairement à des éléments en "display: inline", nous pouvons donner une
	largeur fixe à nos LI. Nous pouvons aussi jouer plus facilement sur la
	hauteur des LI, que ce soit via la propriété "padding" ou la propriété
	"height".
	Par contre, on ne pourra pas centrer horizontalement des éléments
	flottants. Si on doit centrer les éléments d'un menu, on utilisera
	plutôt "display: inline".

*/