/* Style propre la page index et aux navigateurs avances ----------------------

<!-- Site de "Viviane Clerc Barrou" : vivaneclercbarrou.fr

Version : 1.0
Auteur : Didier Fournet - Agence DiF
E-mail : dif@agencedif.com
Site : http://www.agencedif.com/

--------------------------------------------------------------------------------- */

/* 								¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥							  */

/* Conteneur
--------------------------------------------------------------------------------- */

#conteneur { top: 5%; 	position: relative;
}

#contenu
{
	width: 70%;
	text-align: center;
	/* pour centrage sous IE Win */
	float: left;
}

#contenu p#image
{
	width: 70%;
	margin-left: 15%;
}

* html #contenu p#image
{
	margin-left: 0;
	/* annulation de la marge et retour au centrage sous IE Win */
}

#contenu p img { width: 100%; }

p#titre
{
	width: 70%;
	padding-top: 1em;
	font-size: 1.2em;
	text-align: center;
	clear: both;
}

* html p#titre
{
	margin-left: 0;
	/* annulation de la marge et retour au centrage sous IE Win */
}

/* Fin de Conteneur ------------------------------------------------------------- */

/* Navigation
--------------------------------------------------------------------------------- */

/* Barre de navigation verticale "CSS Mastery" ---------------------------------- */

ul#navigation
{
	position: absolute;
	bottom: 2em;
	left: 70%;
}

ul#navigation li { margin-bottom: 1em; }

ul#navigation a
{
	width: 8em;
	font-size: 1.2em;
	color: #002A92;
	font-weight: bold;
	line-height: 2em;
	text-decoration: none;
	text-align: left;
	display: block;
	padding-left: 1em;
	border-top: none;
	border-left: 1px #002A92 solid;
	border-bottom: 1px #002A92 solid;
	border-right: none;
}

ul#navigation a:hover
{
	color: white;
	background-color: #002A92;
}

/* Fin de Navigation ------------------------------------------------------------ */

/* Pour memoire
------------------------------------------------------------------------------------
¥ Fold = 570 pixels (hauteur utile maxi "au pli")
¥ Semi-Žlastique = largeurs des colonnes de contenu variables, navigation et goutti�res fixes, entre 60 et 100 caract�res (optimal 95) par ligne
¥ Surfaces utiles en fonction de la rŽsolution Žcran (IE6/Win) :
--> (l - 20 px) & (h - 200 px)
--> 620 x 309 pour 640 x 480
--> 780 x 429 pour 800 x 600
--> 1004 x 597 pour 1024 x 768
--> 1132 x 793 pour 1152 x 864
--> 1260 x 853 pour 1280 x 1024
--> 1580 x 1129 pour 1600 x 1200
¥ Familles de polices
--> Arial, "Arial Black", "Arial Narrow", Impact, Tahoma, "Trebuchet MS", Verdana, sans-serif
--> Georgia, Palatino, "Times New Roman", serif
--> "Courier New", monospace
--> "Comic Sans MS", cursive
--> Webdings, fantasy
¥ Les div ne doivent pas rester vides.
¥ La position relative preserve l'espace initial de l'element.
¥ La position absolute supprime l'espace initial de l'element.
¥ Un element en float: left (right); sera poussŽ aussi loin que possible ˆ la gauche (droite) de son parent.
¥ La fusion des marges verticales n'a lieu qu en presence de boites de type block dans le flux normal du document. Les marges verticales des boites de type inline, flottantes ou positionnees de maniere absolue ne fusionnent jamais.
--> La solution rŽside dans l'application d'un border transparent ou d'un padding de 1 px. 
¥ Les padding, border et margin verticaux n'ont aucun effet sur la hauteur d'une bo”te inline.
¥ Un texte ajoutŽ dans un ŽlŽment de niveau block sans �tre dŽfini dans un paragraphe est considŽrŽ comme une bo”te block anonyme.
¥ Une structure est dite liquide (ou fluide) si elle s'adapte aux dimensions de la fenetre du navigateur et ˆ ses variations. Afin d'obtenir cet effet, on utilise des dimensions exprimees en %. Il est alors bon de specifier une min-width et une max-width.
¥ Une structure est dite elastique si elle s'adapte aux variations de dimensionnement du texte. Afin dobtenir cet effet, on utilise des dimensions exprimŽes en em. Il est alors bon de specifier une min-width et une max-width, et de choisir une base d'Žchelle pour font ˆ 62.5% (1em est alors sensiblement Žgal ˆ 10px).
¥ Une structure hybride utilisera la base dŽchelle de font ˆ 62.5%, les dimensions exprimŽes en em, des min-w-dth en px et des max-width en % (IE/Win sera laissŽ de c™tŽ pour ces derni�res).
--------------------------------------------------------------------------------- */