/*
	Titre : Feuille de style du site pour l'affichage à l'écran
	Auteur : VALAT Didier
	Date de création : 18/11/08
	Version : 1.0
*/

/*
	------------------------------------------------------
	Début : Ré-initialisation des propriétés du navigateur
	------------------------------------------------------
*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
	margin:0;
	padding:0;
}
table {
	border-collapse:collapse;
	border-spacing:0;
}
fieldset,img {
	border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
	font-style:normal;
	font-weight:normal;
}
ol,ul {
	list-style:none;
}
caption,th {
	text-align:left;
}
h1,h2,h3,h4,h5,h6 {
	font-size:100%;
	font-weight:normal;
}
abbr,acronym { 
	border:0;
}
body {
	font:12px verdana,arial,helvetica,clean,sans-serif;
}
table {
	font-size:inherit;
}
select, input, textarea {
	font:99% verdana,arial,helvetica,clean,sans-serif;
}
pre, code {
	font:115% monospace;
}
body * {
	line-height:1.8em;
}
/*
	----------------------------------------------------
	Fin	: Ré-initialisation des propriétés du navigateur
	----------------------------------------------------
*/

/*
	-----------------------------
	Début : Mise en forme du site
	-----------------------------
*/
/*
	#################################
	Styles des balises HTML GENERALES
	#################################
*/
/* Style pour le corps de la page */
body {
	/* Couleur de fond : bleu */
	background-color:#666;
	/* Couleur de l'écriture : "bleu foncé" */
	color:#003399;
	/* Image en fond */
	background-image: url('../img/bg.png');
	/* Fixation de l'image de fond */
	background-attachment:fixed;
}
/* Style pour les acronymes */
acronym {
	/* Soulignement : 1px avec des points de couleur "marron" */
	border-bottom:1px dotted #85220b;
}
/* Style pour les paragraphes */
p {
	/* Alignement du texte : justifié */
	text-align:justify;
	/* Indentation du texte : 2em */
	text-indent:2em;
}
/* Style pour les paragraphes précédés d'un paragraphe */
p + p {
	/* Marge en haut : 1em */
	margin-top:0.5em;
}
/* Style pour les titres "h2" précédés d'une liste */
ul + h2 {
	/* Marge en haut : 1em */
	margin-top:0.5em;
}
/* Style pour les titres "h2" précédés d'un paragraphe */
p + h2 {
	/* Marge en haut : 1em */
	margin-top:0.5em;
}
/* Style pour les emphases */
em {
	/* Soulignement */
	text-decoration:underline;
}
/* Style pour les parties en gras */
strong {
	/* Epaisseur de la police : gras */
	font-weight:bold;
}
/* Style pour les liens */
a {
	/* Epaisseur de la police : gras */
	font-weight:bold;
	/* Couleur de la police : "marron" */
	color:#85220b;
	/* Suppression du soulignement au niveau du lien */
	text-decoration:none;
}
/* Style pour les liens non-visités */
a:link {
	/* Couleur de la police : "marron" */
	color:#85220b;
}
/* Style pour les liens visités */
a:visited {
	/* Couleur de la police : "marron" */
	color:#85220b;
}
/* Style pour les liens au passage de la souris */
a:hover {
	/* Couleur de la police : "bleu foncé" */
	color:#000099;
	/* Soulignement : 1px avec des points de couleur marron */
	border-bottom:1px dotted #85220b;
}
/* Style pour les liens sélectionnés */
a:active {
	/* Couleur de la police : "bleu foncé" */
	color:#000099;
}
/*
	###############################
	Styles des balises PERSONNELLES
	###############################
*/
/* Style pour le bloc principal : "main" */
#main {
	/* Couleur de l'écriture : "bleu foncé" */
	background-color:#146cc0;
	/* Image en fond + couleur */
	background:#62abee url('../img/bg_top.png') top left no-repeat;
	/* Largeur du cadre */
	width:800px;
	/* Marges externes : 0 auto */
	margin:0 auto;
	/* 	
		Position : "relative" pour placer cet élément 
		dans le coin haut gauche du bloc et tous les autres par dessus
	*/
	position:relative;
	/* Bordures à gauche, à droite et en bas de taille 1px solides et de couleur marron */
	border-left:1px solid #85220b;
	border-right:1px solid #85220b;
	border-bottom:1px solid #85220b;
}
/* Style pour le bloc en-tête : "header" */
#header {
	/* Image en fond : bandeau de couleur "gris" */
	background:transparent url('../img/bg_gris.png');
	/* Largeur du cadre : 800px */
	width:800px;
	/* Espacement en haut : 10px */
	top:10px;
	/* 	
		Position : "absolue" pour créer une boîte positionnée 
		à partir de son bloc conteneur, ici "main"
		sans décaler les boîtes suivantes
	*/
	position:absolute;
	/* Hauteur du cadre : 8.5em */
	height:8.5em;
	/* Bordures en haut et en bas de 1px avec des points de couleur "marron" */
	border-bottom:1px dotted #85220b;
	border-top:1px dotted #85220b;
}
/* Style pour le titre "h1" du bloc en-tête : "header" */
#header h1 {
	/* Image en fond : on part du coin haut gauche pour l'afficher */
	background:transparent url('../img/logo.png') top left no-repeat;
	/* Largeur du bloc = largeur de l'image */
	width:261px;
	/*
		Hauteur = moitié de l'image pour pouvoir
		superposer l'image au passage de la souris
	*/
	height:103px;
}
/* Style pour le titre "h1" au passage de la souris du bloc en-tête : "header" */
#header h1:hover {
	/* Image en fond : on part du coin bas droit pour l'afficher */
	background:transparent url('../img/logo.png') bottom left no-repeat;
}
/* Style pour l'image du titre "h1" du bloc en-tête : "header" */
#header h1 img {
	/* Cette commande permet de masquer l'image COMPLETE */
	visibility:hidden;
}
/* Style pour le titre "h2" du bloc en-tête : "header" */
#header h2 {
	/* Texte de couleur : "blanc" */
	color:#fff;
	/* Alignement du texte au centre du bloc */
	text-align:center;
	/* Position du bloc texte */
	position:relative;
	/* Espacement en bas : 70px */
	bottom:70px;
	/* Taille de la police augmentée de 30% */
	font-size:130%;
	/* Epaisseur de la police : gras */
	font-weight:bold;
	/* Style de la police : italique */
	font-style:italic;
}
/* Style pour le bloc contenu : "content" */
#content {
	/* Couleur de l'écriture : "bleu foncé" */
	background-color:#146cc0;
	/* Image en fond positionnée en bas à gauche */
	background:transparent url('../img/bg_bottom.png') bottom left no-repeat;
}
/* Style pour les blocs qui suivent le bloc : "content" */
#content > div {
	/* Marges externes : 2em à droite et 14.8em à gauche */
	margin:0 2em 0 14.8em;
	/* Image en fond : bandeau de couleur "blanc" */
	background:transparent url('../img/bg_blanc.png');
	/* Marges internes : 16.2em en haut, 1em à droite, 1em en bas et 1em à gauche */
	padding:16.2em 1em 0.5em 1em;
	/* Hauteur minimale du bloc : 15.2em */
	min-height:15.2em;
}
/* Style pour le bloc menu : "menu" */
#menu {
	/* Position du bloc : "absolute" */
	position:absolute;
	/* Espacement à gauche : 19em */
	left:19em;
	/* Espacement en haut : 107px */
	top:107px;
	/* Alignement du texte : droit */
	text-align:right;
	/* Marge interne en bas : 50px */
	padding-bottom:50px;
	/* Largeur du cadre : 540px */
	width:540px;
	/* Image en fond positionnée en haut à gauche */
	background:transparent url('../img/formes.png') top left no-repeat;
}
/* Style pour les listes du bloc menu : "menu" */
#menu li {
	/* Position du bloc : "relative" */
	position:relative;
	/* Espacement en bas : 35px */
	bottom:35px;
	/* Affichage en ligne de la liste */
	display:inline;
	/* Espacement à gauche : -0.3em */
	left:-0.3em;
	/* Couleur de la liste : "bleu foncé" */
	color:#003399;
}
/*
	Style pour insérer un caractère avant d'afficher
	l'élément contenu dans une liste précédée 
	d'une autre liste du bloc menu : "menu"
*/
#menu li + li:before {
	/* Caractère précédent un élément de la liste */
	content:' ~ ';
}
/* Style pour les liens des blocs : "menu" et "left" */
#menu li a, #left a {
	/* Taille de la police augmentée de 10% */
	font-size:110%;
	/* Epaisseur de la police : gras */
	font-weight:bold;
	/* Couleur de la police : "marron" */
	color:#85220b;
	/* Suppression du soulignement au niveau du lien */
	text-decoration:none;
}
/* Style pour les liens du bloc pied de page : "footer" */
#footer a {
	/* Epaisseur de la police : gras */
	font-weight:bold;
	/* Couleur de la police : "marron" */
	color:#85220b;
	/* Suppression du soulignement au niveau du lien */
	text-decoration:none;
}
/* Style pour les liens non-visités des blocs : "menu", "left" et "footer" */
#menu a:link, #left a:link, #footer a:link {
	/* Couleur de la police : "marron" */
	color:#85220b;
}
/* Style pour les liens visités des blocs : "menu", "left" et "footer" */
#menu a:visited, #left a:visited, #footer a:visited {
	/* Couleur de la police : "marron" */
	color:#85220b;
}
/* Style pour le survol des liens des blocs : "menu", "left" et "footer" */
#menu a:hover, #left a:hover, #footer a:hover {
	/* Couleur de la police : "bleu foncé" */
	color:#000099;
	/* Soulignement : 1px avec des points de couleur marron */
	border-bottom:1px dotted #85220b;
}
/* Style pour les liens sélectionnés des blocs : "menu", "left" et "footer" */
#menu a:active, #left a:active, #footer a:active {
	/* Couleur de la police : "bleu foncé" */
	color:#000099;
}
/* Style pour le bloc de gauche : "left" */
#left {
	/* Position du bloc : "absolute" */
	position:absolute;
	/* Espacement en haut : 11em */
	top:11em;
	/* Largeur du cadre : 14.8em */
	width:14.8em;
}
/* Style pour les listes du bloc de gauche : "left" */
#left li {
	/* Marges externes : 0 auto */
	margin:0 auto;
	/* Alignement du texte au centre du bloc */
	text-align:center;
	/* Distance entre les lignes : 3.6em */
	line-height:3.6em;
}
/* Style pour les liens du bloc gauche : "left" */
#left a {
	/* Type d'affichage du bloc : block */
	display:block;
	/* Suppression des bordures */
	border:none;
	/* Marges internes : 0.1em en haut et 0.1em en bas */
	padding:0.2em 0 0.2em 0;
 }
/* Style pour le survol des liens du bloc "left" */
#left a:hover {
	/* Type d'affichage du bloc : block */
 	display:block;
	/* Suppression des bordures */
	border:none;
	/* Image en fond : bandeau de couleur "blanc" */
	background:transparent url('../img/bg_blanc.png') repeat scroll 0 0;
}
/* Suppression de la couleur de fond lors du passage de la souris sur les liens externes au site */
#left a:hover[href^='http://'] {
	/* Aucune image de fond */
	background:none;
}
/* Style pour les images précédées de listes du bloc de gauche : "left" */
#left li img {
	/* Type d'affichage du bloc : block */
	display:block;
	/* Marges externes : 0.9em en haut et le reste en auto */
	margin:0.9em auto;
}
/* Style pour le bloc "arborescence_content" */
#right  #arborescence_content {
	/* Affichage du bloc : non */
	display: none;
}
/* Style pour le titre "h1" du bloc de droite : "right" */
#right h1 {
	text-decoration:none;
	/* Taille de la police augmentée de 30% */
	font-size:130%;
	/* Couleur de la police : "blanc" */
	color:#fff;
	/* Distance entre les lignes : 1.28em */
	line-height:1.28em;
	/* Transformation du texte en capitales avec première lettre plus grosse que les autres */
	font-variant:small-caps;
	/* Epaisseur de la police : gras */
	font-weight:bold;
	/* Marges internes : 0.5em en haut et 0.5em en bas */
	padding:0.5em 0 0.5em 0;
}
/* Style pour le titre "h2" du bloc de droite : "right" */
#right h2 {
	text-decoration:none;
	/* Taille de la police augmentée de 20% */
	font-size:120%;
	/* Couleur de la police : "jaune" */
	color:#faed7d;
	/* Distance entre les lignes : 1.28em */
	line-height:1.28em;
	/* Epaisseur de la police : gras */
	font-weight:bold;
	/* Marges internes : 0.5em en bas et 1em à gauche */
	padding:0 0 0.5em 1em;
}
/* Style pour les listes du bloc de droite : "right" */
#right li {
	/* Marge externe gauche : 2em */
	margin-left:2em;
	/* Image pour les listes */
	list-style-image:url('../img/arrow_right.png');
	/* Alignement du texte : justifié */
	text-align:justify;
}
/* Style pour les listes du bloc "ancre_haut" contenu dans le bloc "right" */
#right #ancre_haut li {
	/* Affichage du texte à droite */
	float:right;
	/* Marge interne : 0.5em en haut et 0.5em en bas */
	padding:0.5em 0 0.5em 0;
	/* Image pour les listes */
	list-style-image:url('../img/arrow_down.png');
}
/* Style pour les listes du bloc "ancre_bas" contenu dans le bloc "right" */
#right #ancre_bas li {
	/* Affichage du texte à droite */
	text-align:right;
	/* Marge interne : 0.5em en haut et 0.5em en bas */
	padding:0.5em 0 0.5em 0;
	/* Image pour les listes */
	list-style-image:url('../img/arrow_up.png');
}
/* Style pour les listes "ul" du bloc "contact" contenu dans le bloc "right" */
#right #contact li {
	/* Marge externe gauche : 4em */
	margin-left:4em;
	/* Image pour les listes */
	list-style-image:none;
}
/* Style pour le bloc de pied de page : "footer" */
#footer {
	/* Couleur de fond : "bleu ciel" */
	background-color:#99CCFF;
	/* Largeur du cadre */
	width:800px;
	/* Marges : 10px en haut et le reste en auto */
	margin:10px auto;
	/* Bordures de chaque côté : 1px solides et de couleur "marron" */
	border:1px solid #85220b;
	/* Taille de la police diminuée de 10% */
	font-size:90%;
	/* Couleur de la police : "bleu foncé" */
	color:#003399;
}
/* Style pour les listes du bloc de pied de page : "footer" */
#footer li {
	/* Marge interne : 0.2em de chaque côté */
	padding:0.2em;
	/* Alignement du texte au centre du bloc */
	text-align:center;
}
/* Style pour les sources de documents */
p.source {
	/* Alignement du texte au centre du bloc */
	text-align:right;
	/* Suppression de l'indentation */
	text-indent:0;
}
/* Style pour les légendes d'images */
p.legende {
	/* Alignement du texte au centre du bloc */
	text-align:center;
	/* Style de la police : italique */
	font-style:italic;
	/* Suppression de l'indentation */
	text-indent:0;
}
/* Style pour les images de la classe : "img_centre" */
img.img_centre {
	/* Affichage : "block" */
	display:block;
	/* Marges externes : 1em auto */
	margin:1em auto;
	/* Bordures de chaque côté : 1px solides de couleur "marron" */
	border:1px solid #85220b;
}
/* Style pour les termes de la liste du bloc : "liste" */
div.liste dt {
	/* Marge externe gauche : 2em */
	margin-left:2em;
	/* Position du bloc : "absolute" */
	position:absolute;
}
/* Style pour la description de la liste du bloc : "liste" */
div.liste dd {
	/* Marge externe gauche : 10em */
	margin-left:10em;
	/* Alignement du texte : justifié */
	text-align:justify;
}
/*
	-----------------------------
	Fin : Mise en forme du site
	-----------------------------
*/