/*  ----------------------------------------------------------- */
/*                            taille typo                       */
/*  ----------------------------------------------------------- */
/*
 * Base				100%
 * -------------------------------------
 * 20px				1.27em
 * 19px				1.21em
 * 18px				1.15em
 * 17px				1.09em
 * 16px				1.03em
 * 15px				0.96em
 * 14px				0.88em
 * 13px				0.82em
 * 12px				0.77em
 * 11px				0.71em
 * 10px				0.65em
 *  9px				0.59em
 * Attention : en dessous de 0.71em le texte devient illisible
 * en texte le plus petit sur Internet Explorer
 */

/* valeurs pour les margin et padding */
/* haute, droite, bas, gauche - sens horaire */
/* Exemple : margin: 15px 0px 15px 10px; */
/* Correspond à : */
/*	margin-top: 15px; */
/*	margin-right: 0px;  */
/*	margin-bottom: 15x; */
/*	margin-left: 10px; */
/* Remise à zéro de toutes les marges de toutes les balises */
* {
margin: 0;
padding: 0;
border: 0;
font-size: 1em;
}

/* Compatibilité IE des images, considérées comme block et pas comme texte */
img {
    display: block;
    }

/* Couleurs utilisées : */
/* #d74826;	/* Orange Couleur de base */
/* #ffbf29;	/* Jaune Orangé */
/* #d6d6d6;	/* Gris clair */
/* #8a2f19;	/* Orange Foncé (bandeau & menu) */
/* #d6a227;	/* Jaune sable */
/* #8a6819;	/* Olive */
/* #2a4e57;	/* Gris Acier Sombre */
/* #4e92a3;	/* Gris Acier */
/* #d78e7d;	/* Chair foncé */
/* #ffd09f;	/* Chair */
/* #adefff;	/* Bleu clair */
/* #292929;	/* Gris Foncé */

/* 	Syntaxe images BackGround */
/* 	background: url(../images/...........)  no-repeat; 		*/

html, body {
    min-height: 100%;
	height: auto;
	height: 100%;
}

body {
/* ************************************** */
/* adaptation BPE  */
/* position: relative;   */
/* ************************************** */
    margin: 0; /* pour éliminer les marges  gauche/droite et mettre haut/bas à 0px */
    padding: 0;
    text-align: center; /* pour corriger le bug de centrage IE */
    font-family: verdana, arial, helvetica, sans-serif;
    font-size: 0.8em;
    background: url(../images/fond.jpg);
    behavior: url(styles/csshover.htc);
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* Entête de la page d'accueil destinée à contenir la zone d'accessibilité */
#accessibilite {
        width: 900px;
	padding:0px;
	margin-top: 1px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 0px;
	text-align: center;
}
.accessibilite {
	list-style-type: none;
	padding: 0px;
	margin-top: 0px;
	margin-left: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	font-size: 100%;
	text-align: center;
	color: #aaaaaa;
}
.accessibilite li {
	display: inline;
	text-decoration: none;
}
.accessibilite a {
        font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #999999;
	text-decoration: none;
}
.accessibilite a:visited {
	color: #999999;
	text-decoration: none;
}
.accessibilite a:hover {
	color: #666666;
	text-decoration: none;
}
.accessibilite a:active {
	color: #333333;
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

/*      Centrage de la page  --------------------------------- */
#global {
/* ************************************** */
/* adaptation BPE  */
/* position: relative;   */
/* ************************************** */
/* rajout pour centrer le site dans la page */
	margin-left: auto; margin-right: auto;
/* ************************************** */
/* rajout BPE  */
	margin-top: 2px; margin-bottom: 5px;
/* ************************************** */
        width: 900px; /* largeur obligatoire pour être centré */
	min-height: 100%; height: 100%;
	color : #000000; text-align: left; /* on rétablit l'alignement normal du texte */
	border-left : solid 1px #2a4e57;	/* Gris Acier Sombre */
        border-right : solid 1px #2a4e57;	/* Gris Acier Sombre */
/* ************************************** */
/* rajout BPE  */
       	border-top : solid 1px #2a4e57;	/* Gris Acier Sombre */
        border-bottom : solid 1px #2a4e57;	/* Gris Acier Sombre */
/* ************************************** */
	background: url(../images/fond-page.gif)  repeat-y;
}

/* ************************************** */
/* rajout BPE  */
/* pour un article ou une rubrique pour autoriser l'utilisation du plugin crayon  */
.descriptif p {
}
.texte p {
}
/* ************************************** */


#clear{
	clear:both; /* Alignement des colonnes de contenu */
	}

/*   Bandeau supérieur, avec images    ---------------------------------*/
#bandeau {
/* ************************************** */
/* adaptation BPE  */
/* position: relative;   */
/* ************************************** */
	width: 900px; 	height : 150px;
	background: #d74826;	/* Orange Couleur de base */
	text-align: left;
	}
	#bandeau_gauche {
		width: 225px; 	height: 150px;
		text-align : left;
		background: url(../images/bandeau-larron.jpg)  no-repeat;
		}
		#bandeau_gauche_texte {
			position: relative;
			top : 135px;
			left:10px;
			color : #ffffff;
			font-size: 0.7em
			}
			#bandeau_gauche_texte a.popup{
			position:relative;
			text-decoration:none;
			color : #ffffff;
			}
			#bandeau_gauche_texte a.popup :hover{
			background: none;
			z-index: 50;
			}
			#bandeau_gauche_texte a.popup span{
			display: none;
			}
			#bandeau_gauche_texte a.popup :hover span{
			display: block;
			position:absolute;
			top: 0px;
			left: 0px;
			width:400px;
			background: white;
			padding: 5px;
			border: 1px solid #62c0f4;
			border-left: 10px solid #62c0f4;
			}


	#bandeau_haut_titre {
		margin-top:-150px;
                margin-left:225px;
		width: 405px;
                height: 120px;
		text-align : left;
		}
	#bandeau_haut_visages {
		margin-top:-120px;
                margin-left:630px;
		width: 270px;
                height: 120px;
		text-align : left;
		}
	/*      Le menu horizontal   --------------------------------- */
	#bandeau_nav {
		margin-left:225px;
		margin-top :-1px;
		width: 675px;
                height: 30px;
		font-size: 1.2em;
                font-weight: bold;
                text-align : right;
		background: url(../images/croix-menu.gif)  no-repeat;
                }
                
                /*      hack IE   --------------------------------- */
               	* html #bandeau_nav {
		margin-top : 0px;
                }

		#bandeau_nav_recherche {
			position:relative;
			top: 7px;
			float: right;
			color: #cccccc;
			z-index:10;

/* ------------------------------------------------- */
/* rajout BPE - largeur et couleur de fond du champ de recherche */
input.formrecherche {
	width: 132px;
	background-color: #d74826;
}
			}
		#bandeau_nav_liens {
			position:relative;
			top: 6px;
			}

		#bandeau_nav  ul {
			margin-top: 1px;
			color: #ffffff;
			}
		#bandeau_nav li {
			display: inline;
			list-style-type: none; /*  enlève les bulettes  */
			}
		#bandeau_nav  a {
			text-decoration: none;
			color:  #ffffff;
			}
		#bandeau_nav  a:hover {  /* Changement de couleur au survol   */
			color: #000000;
			background:  #ffd09f;	/* Chair */
			}


/*     Retour à la page d'accueil    --------------------------------- */
#page {  /*    Container sous le bandeau : permet de fixer une référence   --------------------------------- */
/* ************************************** */
/* adaptation BPE  */
/* position: relative;   */
/* ************************************** */
	width: 900px;
	text-align: left; /* on rétablit l'alignement normal du texte */
/* ************************************** */
/* commentaire BPE  */
/* une colonne fictive dans la page  */
/* ************************************** */
	background: url(../images/fond-page.gif)  repeat-y;
	}
	/*     Retour à la page d'accueil    --------------------------------- */
	#accueil  {
                /* position : absolute; */
		margin: 20px 0px 0px 5px;
		font-size: 1.2em; font-weight: bold;
		z-index:10; /* Sinon, masquage du lien */
		}
		#accueil  a 	{
			text-decoration : none;
			color:  #ffffff;
			}
		#accueil  a:hover {  /* Changement de couleur au survol   */
			color: #000000;
			background:  #ffd09f;	/* Chair */
			}

                        /* Colonne de gauche */
/* Rajout BPE */
#colgauche {
  position: relative;
  float: left;
  width: 150px;
  border-right: 0px solid;
  padding-bottom: 80px;
  background: url(../images/croix-gauche.gif)  no-repeat;
  z-index: 10;
}

#menu_logo {
position : relative;
height : 50px;
padding-bottom: 40px;
z-index:60;
}

	/*      Le contenu de la page   --------------------------------- */
	#fond {
                /* position : relative; */
                /* modification bpe */
                float : left;
                /* margin: 0 0 0 150px; */
                margin: 0 0 0 0px;
		width: 750px;
		text-align: left;
		background: #ffffff;
		}

		#contenu {
			text-align: left;
			background: url(../images/croix-droite.gif)  no-repeat;
			z-index:0;
			}
			#contenu h1{
				margin-top: 10px;
				font-size: 1.5em; font-weight: bold;
				color: #d74826;	/* Orange Couleur de base */
				border-bottom : solid 1px #4e9233; /* Gris Acier */
				}
			#contenu h2{
				margin-top: 10px;
				font-size: 1.4em; font-weight: bold;
				color: #8a6819;	/* Olive */
				border-bottom : solid 1px #d6d6d6; /* Gris clair */
				}
			#contenu h3{
				margin-top: 10px;
				font-size: 1.2em; font-weight: bold;
				color: #2a4e57;	/* Gris Acier Sombre */
				}
			#contenu p {
				margin-top: 5px;
				font-size: 1em;
				text-align: justify;
				}
			#contenu hr {
				}
			#contenu a{
				color: #2a4e57; /* Gris Acier Sombre */
				text-decoration: underline;
				}
			#contenu a:hover{
				color: #292929; /* Gris Foncé */
				background-color: #d78e7d; /* Chair foncé */
                                }
/* ************************************** */
/* adaptation BPE  */
/* rajout liens ouvrant  */
/* ************************************************************************************************** */
                        /* liens internes et externes */
                        a.spip_in { text-decoration: underline; color: #2a4e57; } /* liens internes */
                        a.spip_out, a.spip_url, a.spip_glossaire { /* liens sortants */
                	text-decoration: underline; color: #2a4e57;
                    	background: url(../images/spip_out.gif) no-repeat right;
                    	padding-right: 10px;
}
/* ************************************************************************************************** */

			#contenu ul{
				margin-top: 10px;
				}
			#contenu li{
				margin-top: 5px; margin-left: 15px;
				}
			#contenu .soustitre{
				font-size: 1.1em;
				font-weight: bold;
				color:  #d6a227; /* Jaune sable */
				}
			#contenu .chapeau{
				font-size: 1.2 em;
				font-style: italic;
				}
			#contenu .creditphoto{
				font-size: 0.8em;
				}
			#contenu .micro{
				font-size: 0.8em;
				color: #ffffff;
				}
			#contenu .adresse{
				font-size: 0.8em;
				color: #2a4e57; /* Gris Acier Sombre */
				}
			#contenu .lien{
				margin-top: 10px;
				text-align: right;
				}
			#contenu_texte {
				position:relative;
				text-align: left;
				float : left;
				top : 20px;
				margin-bottom : 60px;
				width : 470px;
				left : 30px;
				}
				#rubriques_soeurs li{
					text-align: left;
					display : inline;
					list-style-type: none; /*  enlève les bulettes  */
					}
				#sous_rubriques {
					font-size: 1.3em;
					font-style: bold;
					margin-bottom : 10px;
					}
				#sous_rubriques li{
					text-align: left;
					display : inline;
					list-style-type: none; /*  enlève les bulettes  */
					}
				#autres_articles li{
					text-align: left;
					display : inline;
					list-style-type: none; /*  enlève les bulettes  */
					}
			#contenu_illustrations  {
				position: relative;
				float: left;
				top: 52px;
				left : 50px;
				width : 200px;
				text-align : center;
				}
				#contenu_illustrations  img {
					border: solid 1px #2a4e57;	/* Gris Acier Sombre */
			        }

/* ************************************** */
/* rajout BPE  */
/* loupes malvoyance  */
/* ************************************** */
                #loupes {
                text-align: left;
		margin: 0px 0px 0px 30px;
		padding: 0px 0px 0px 0px;
		border: 0px solid #0000ff;
                }
                #loupes a {
                font-family: Verdana, Arial, Helvetica, sans-serif;
	        color: #333333;
	        text-decoration: none;
                }
                #loupes a:visited {
	        color: #333333;
	        text-decoration: none;
                }
                #loupes a:hover {
	        color: #8a2f19;
	        text-decoration: underline;
	        background-color: #ffffff;
                }
                #loupes a:active {
	        color: #cccccc;
                }
/* ************************************** */

		/*  Pied de page      ---------------------------------*/
		#pied {
		clear:both;  /* Alignement des colonnes de contenu et de menu et obtention 100% */
		}


/* ************************************** */
/* rajout BPE  */
/* Zone pied de page contient les articles de service */
/* ************************************** */
#pieddepage {
        width: 900px;
	padding: 0px 0px 0px 0px;
	margin-top: 0px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 10px;
	border: 0px solid #ff0000;
	color: #333333;
	text-align: center;
}

/* Les intitulés du pied de page sont présentés sous forme de liste */
.pieddepage {
	text-align: center;
	font-size: 90%;
	list-style-type: none;
	padding: 0px;
	margin: 0px;
}
.pieddepage li {
	display: inline;
}
/* aspect des liens du pied de page */
.pieddepage a {
	color: #333333;
	font-weight: normal;
	text-decoration: none;
}
.pieddepage a:visited {
	color: #333333;
	text-decoration: none;
}
.pieddepage a:hover {
	color: #aaaaaa;
	text-decoration: none;
}
.pieddepage a:active {
	color: #333333;
	text-decoration: underline;
}

/*** Fin styles pour le pied de page ***/