/* Crée le 24/06/2007 */
/* Modifié le 15/08/2009 */

/* Ce fichier contient les caractéristiques des points suivants:
	
		-> Barre de navigation
		-> Ombre des tableaux 
		-> Espacement des boutons de la page d'accueil */

	/* ================= - - - Style appliqué à la barre de navigation - - - ================= */

	/************************************************************************************************/
	/*												*/
	/* La partie suivante a pour but de définir les paramètres graphiques de la barre de navigation	*/ 
	/* 												*/
	/* 												*/
	/* OBJECTIF											*/
	/* 												*/
	/* Je souhaitais que cette dernière soit conviviale et que le visiteur puisse facilement faire	*/		
	/* la différence entre:										*/
	/*	-> l'image désignant la page web en cours de lecture : lien cliqué			*/
	/*	-> l'image désignant la page web disponible : lien non cliqué				*/
	/*	-> l'image désignant la page web que le lecteur souhaite lire en déplaçant 		*/
	/*		   la souris sur le lien hypertexte						*/
	/*												*/
	/*												*/
	/* CRITERE DE SELECTION										*/
	/* 												*/
	/* Je ne souhaitais pas utiliser le DHTML ou le javascript (onMouseover, onMouseout) car cela	*/
	/* aurait nécessité la création des boutons (image avec le nom de la rubrique dessus) déclinés	*/
	/* sous trois formes pour chaque rubrique :							*/
	/*	-> 1 bouton matérialisant le lien non cliqué quand la souris n'est pas dessus		*/
	/*	-> 1 bouton matérialisant le lien non cliqué quand la souris est dessus			*/
	/*	-> 1 bouton matérialisant le lien cliqué qui permet de signaler la page en cours de lecture. */
	/*												*/
	/* Sachant que le site se composera au minimum de 6 grandes rubriques et que ces dernières 	*/
	/* devront être traduites en 3 langues (français, anglais et allemand), cela fait un minimum de */
	/* 54 images à créer pour mettre au point la barre de navigation.				*/
	/*												*/
	/* Dans un soucis d'économie de temps et d'espace mémoire chez notre hébergeur de site web,	*/
	/* j'ai préféré créer la barre de navigation à l'aide d'une feuille de style.			*/
	/*												*/
	/*												*/
	/* AVANTAGES DE LA METHODE									*/
	/* 												*/
	/* Cela me permet non seulement de n'utiliser que les 3 images suivantes :			*/
	/*	-> Image désignant le lien cliqué ("img_nav_mouseclick.png")		 		*/
	/*	-> Image désignant le lien non cliqué sans la souris dessus ("img_nav_mouseout.png") 	*/
	/*	-> Image désignant le lien non cliqué avec la souris dessus ("img_nav_mouseover.png") 	*/
	/* mais ausssi de minimiser le code source de la page web supportant la barre de navigation.	*/
	/*												*/
	/************************************************************************************************/
	
#barre_navigation {
	float: left;
	width: 232px;		/* Fixe la largeur du conteneur de la barre de navigation mais pas la largeur du tableau */
	padding-top: 185px;	/* Laisser la place pour le logo + marge */
	padding-left: 20px;
	padding-right: 10px;
	}
	
#barre_navigation ul {
	/* Suppression du margin, du padding et des puces du <ul> */
	margin: 0;
	padding: 0;
	}

#barre_navigation li, .menu_page_acceuil {
	/* Aucun type de puce n'est appliqué à cette liste */
	list-style-type: none;
	
	display: block;
	width: 209px; /* Paramètre à modifier si changement de la police + modifier la taille des images en conséquence avec GIMP 159 */
	line-height: 61px;
	font-weight: bold;
	font-size: 10pt;
	color: brown;
	text-align: center;	
	background: url(../images/img_nav_mouseclick.png) no-repeat;
	}	

#barre_navigation a , .menu_page_acceuil a{
	font-size: 10pt; /* Pour avoir la même font sous IE */
	display: block;
	height: 61px;
	text-decoration: none;
	color: #ffff99;		
	background: url(../images/img_nav_mouseout.png) no-repeat;
	}

#barre_navigation a:hover, .menu_page_acceuil a:hover {
	background: url(../images/img_nav_mouseover.png)  no-repeat;
	color: brown;
	}
	/* ------------------------------------------------------------------------- */


	/* ================= - - - Style appliqués aux bordures des tableaux de la barre de navigation, du titre, ... - - - ================= */
.ombre_coin_haut_gauche {
	background-image: url(../images/img_ombre_coin_haut_gauche.png);
	height: 11px;	/* Règle la hauteur de la cellule pour faire apparaitre le background */
	width:11px;
	}

.ombre_coin_haut_droit {
	background-image: url(../images/img_ombre_coin_haut_droit.png)
	}

.ombre_coin_bas_droit {
	background-image: url(../images/img_ombre_coin_bas_droit.png);
	height: 11px;	/* Règle la hauteur de la cellule pour faire apparaitre le background */
	width:11px;
	}

.ombre_coin_bas_gauche {
	background-image: url(../images/img_ombre_coin_bas_gauche.png)
	}

 .ombre_haut {
	background-image: url(../images/img_ombre_haut.png);
	background-repeat: repeat-x;
	background-position: bottom;
	}

.ombre_droite {
	background-image: url(../images/img_ombre_droite.png);
	background-repeat: repeat-y;
	background-position: left;
	}

.ombre_bas {
	background-image: url(../images/img_ombre_bas.png);
	background-repeat: repeat-x;
	background-position: top;
	}

.ombre_gauche {
	background-image: url(../images/img_ombre_gauche.png);
	background-repeat: repeat-y;
	background-position: right;
	height: 11px;
	}
	/* ------------------------------------------------------------------------- */
	
	
	/* ================= - - - Style appliqués aux cases séparant les boutons de la page d'accueil - - - ================= */
.espacement_bouton_menu_page_accueil {
	width: 35px;
	background: #ffff99; /* Fixation de la couleur du fond de la cellule car le background des tableaux est de type #eacf6c, cf. #contenu_page_web table */
	}
	/* ------------------------------------------------------------------------- */