/* ==============================================
   FEUILLE DE STYLES DES GABARITS HTML/CSS --- 04
   � 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: white;
    background-color: silver;
    background-image: url("images/actu-photo.jpg");
}
a {
	color: white;
	text-decoration: none;
	
}
a:hover, a:focus {
	color: white;

}
strong {
	color: white;
}


/* entete */
#entete {
	background: none;
}
#entete a {
	color: white;
}
#entete a:hover, #entete a:focus, #entete a:active {
	color: gray;
}


/* theme : menu de navigation horizontal par type de projets */
#theme {
	color: orange;
	
}
#theme a {
cursor: default;
	color: orange;
		text-align: right;
			background-color: white;

}
#theme a:hover, #theme a:focus, #theme a:active {	
	color: white;
	background-color: orange;

}
#copyright {
	color: white;
	
}
#copyright a {
	color: white;
	text-decoration: none;
}
#copyright a:hover, #copyright a:focus, #copyright a:active {
	text-decoration: underline;
}

/* --- POSITIONNEMENT --- */

/* Page */
body {
	padding: 0px 0px 0px 30px; /* Voir -> Note 1 ci-dessous */
}

/* En-tête */
#entete {
		margin-top: 10px;
	padding: 0px 0;
}
#entete h1 {
	margin: 0;
}
#entete a {
	padding: 2px 16px;
}	


/* Menu theme */
#theme {
	width: 350px;
	text-align: center;
	overflow: hidden; /* -> 2 */
	margin-left: auto;
	margin-right: auto; /* -> 3 */
	margin-top: 365px;
	font-variant: small-caps;
	font-style: italic;
	font-size: 2.4em;
}


#theme a {
	padding: 16px 26px 26px 26px;

	line-height: 1.5;
	font-size: .9em;
	text-decoration: none;
}

#copyright  {
	width: 350px;
		text-align: center;
	margin-left: auto;
	margin-right: auto; /* -> 3 */
	margin-bottom: 25px;
	font-size: .85em;

}



/* --- NOTES ---

1.	Ce gabarit utilise du padding sur l'�l�ment BODY pour cr�er un retrait
	esth�tique tout autour du conteneur principal.
	Rappel: "padding: 20px 50px;" se lit ainsi:
	- padding-top et padding-bottom de 20px;
	- padding-left et padding-right de 50px.

2.	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: 18%;".

3.	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.

4.	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 20%.
	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

*/