/*.............. MISE EN PAGE DE LA PAGE GENERALE...................... */

body {
margin: 0;/* pour éviter les marges */
padding: 0;
font-family:Arial, Helvetica, sans-serif;
font-size: 0.9em;
background-color: #f8f6ea; /*couleur de fond */
}

body a {color: #996;}
body a:hover {color:#a4845b;}

/* publicité et info */
#info {
position:absolute;
left: 760px;
top: 7px;
width: 180px;
height: 785px;
background-color:#f8f6ea;
background-image:url(images/info.jpg);
border: 1px #5b4c3e;
font-family:Arial, Helvetica, sans-serif;
font-size: 0.7em;
color: #401f00;
}


/* conteneur total qui centre le site */
#conteneur {
position:absolute;
left: 50%;
top: 10px;
width: 760px;
height: 800px;
margin-top: 10px; /* à 10 pixel en dessous du haut de la page / pour centrer verticalement on aurait mis : -400px */
margin-left: -380px; /* moitié de la largeur */
}

/* header avec anim flash */
#header {
position: absolute;
margin-left: 0px;
height: 167px;
width: 760px;
margin-top: 0px; 
 /* moitié de la largeur */ 
}


/* image fixe pour le moteur de recherche sous le header à droite */
#header2 {
position: absolute;
margin-left: 188px;
margin-top: 167px;
height: 22px;
width: 572px; 
font-family:Georgia, Times New Roman, Times, serif;
font-size: 0.8em;
background-image:url(images/moteur_recherche.jpg);
}


/* images fixes dans le menu principal côté gauche */
#menu1 {
position: absolute;
margin-left: 0px;
margin-top: 189px;
width: 188px;
height: 50px;
background-image:url(images/titre_rub1.jpg);
background-repeat: no-repeat;
}
#menu2 {
position: absolute;
margin-left: 0px;
margin-top: 289px;
width: 188px;
height: 50px;
background-image:url(images/titre_rub2.jpg);
background-repeat: no-repeat;
}
#menu3 {
position: absolute;
margin-left: 0px;
margin-top: 414px;
width: 188px;
height: 50px;
background-image:url(images/titre_rub3.jpg);
background-repeat: no-repeat;
}
#icone {
position: absolute;
margin-left: 0px;
margin-top: 589px;
width: 188px;
height: 170px;
background-image:url(images/logo.jpg);
background-repeat: no-repeat;
}

/* --------------- Menu de navigation principale à gauche ---------------- */

#contact a { /* définition de la classe */
     position: absolute;
	 margin-left: 0px;
	 margin-top: 167px;
	 display: block; /* la balise doit être en bloc */
     width: 188px; /* largeur de l'image réactive */
     height: 22px; /* hauteur de l'image réactive */
	 background-image:  url(images/contact.jpg); /* source de l'image de départ */
     background-repeat: no-repeat;
	 }
	 #contact a:hover { /* définition de la classe au survol */
     background-image:  url(images/btnOn/eip2_021.jpg); /* source de l'image d'arrivée */
     }
	 
#mot a { /* définition de la classe */
     display: block; /* la balise a doit être en bloc */
     position: absolute;
	 margin-left: 0px;
	 margin-top: 239px;
	 width: 188px; /* largeur de l'image réactive */
     height: 25px; /* hauteur de l'image réactive */
     background-image:   url(images/nav_bton1.jpg); /* source de l'image de départ */
	 background-repeat: no-repeat;
	 background-color: #cbd5a0;
     }
	 #mot a:hover { /* définition de la classe au survol */
     background-image:   url(images/btnOn/eip2_061.jpg); /* source de l'image d'arrivée */
     } 
#fois a { /* définition de la classe */
     display: block; /* la balise a doit être en bloc */
     position: absolute;
	 margin-left: 0px;
	 margin-top: 264px;
	 width: 188px; /* largeur de l'image réactive */
     height: 25px; /* hauteur de l'image réactive */
     background-image:   url(images/nav_bton2.jpg); /* source de l'image de départ */
     background-repeat: no-repeat;
     }
	 #fois a:hover { /* définition de la classe au survol */
     background-image:   url(images/btnOn/eip2_071.jpg); /* source de l'image d'arrivée */
     } 
#profil a { /* définition de la classe */
     display: block; /* la balise a doit être en bloc */
     position: absolute;
	 margin-left: 0px;
	 margin-top: 339px;
	 width: 188px; /* largeur de l'image réactive */
     height: 25px; /* hauteur de l'image réactive */
     background-image:   url(images/nav_bton3.jpg); /* source de l'image de départ */
     background-repeat: no-repeat;
     }
	 #profil a:hover { /* définition de la classe au survol */
     background-image:   url(images/btnOn/eip2_091.jpg); /* source de l'image d'arrivée */
     } 
#test a { /* définition de la classe */
     display: block; /* la balise a doit être en bloc */
     position: absolute;
	 margin-left: 0px;
	 margin-top: 364px;
	 width: 188px; /* largeur de l'image réactive */
     height: 25px; /* hauteur de l'image réactive */
     background-image:   url(images/nav_bton4.jpg); /* source de l'image de départ */
     background-repeat: no-repeat; 
	 }
	 #test a:hover { /* définition de la classe au survol */
     background-image:   url(images/btnOn/eip2_101.jpg); /* source de l'image d'arrivée */
     }
#psy a { /* définition de la classe */
     display: block; /* la balise a doit être en bloc */
     position: absolute;
	 margin-left: 0px;
	 margin-top: 389px;
	 width: 188px; /* largeur de l'image réactive */
     height: 25px; /* hauteur de l'image réactive */
     background-image:   url(images/nav_bton5.jpg); /* source de l'image de départ */
     background-repeat: no-repeat;
     }
	 #psy a:hover { /* définition de la classe au survol */
     background-image:    url(images/btnOn/eip2_111.jpg); /* source de l'image d'arrivée */
     }
#scola a { /* définition de la classe */
     display: block; /* la balise a doit être en bloc */
     position: absolute;
	 margin-left: 0px;
	 margin-top: 464px;
	 width: 188px; /* largeur de l'image réactive */
     height: 25px; /* hauteur de l'image réactive */
     background-image:    url(images/nav_bton6.jpg); /* source de l'image de départ */
     background-repeat: no-repeat;
     }
	 #scola a:hover { /* définition de la classe au survol */
     background-image:    url(images/btnOn/eip2_131.jpg); /* source de l'image d'arrivée */
     }
#activite a { /* définition de la classe */
     display: block; /* la balise a doit être en bloc */
     position: absolute;
	 margin-left: 0px;
	 margin-top: 489px;
	 width: 188px; /* largeur de l'image réactive */
     height: 25px; /* hauteur de l'image réactive */
     background-image:    url(images/nav_bton7.jpg); /* source de l'image de départ */
     background-repeat: no-repeat;
     }
	 #activite a:hover { /* définition de la classe au survol */
     background-image:    url(images/btnOn/eip2_141.jpg); /* source de l'image d'arrivée */
     }
#asso a { /* définition de la classe */
     display: block; /* la balise a doit être en bloc */
     position: absolute;
	 margin-left: 0px;
	 margin-top: 514px;
	 width: 188px; /* largeur de l'image réactive */
     height: 25px; /* hauteur de l'image réactive */
     background-image:    url(images/nav_bton8.jpg); /* source de l'image de départ */
     background-repeat: no-repeat;
     }
	 #asso a:hover { /* définition de la classe au survol */
     background-image:    url(images/btnOn/eip2_151.jpg); /* source de l'image d'arrivée */
     }
#liens a { /* définition de la classe */
     display: block; /* la balise a doit être en bloc */
     position: absolute;
	 margin-left: 0px;
	 margin-top: 539px;
	 width: 188px; /* largeur de l'image réactive */
     height: 25px; /* hauteur de l'image réactive */
     background-image:    url(images/nav_bton9.jpg); /* source de l'image de départ */
     background-repeat: no-repeat;
     }
	 #liens a:hover { /* définition de la classe au survol */
     background-image:    url(images/btnOn/eip2_161.jpg); /* source de l'image d'arrivée */
     }
#biblio a { /* définition de la classe */
     display: block; /* la balise a doit être en bloc */
     position: absolute;
	 margin-left: 0px;
	 margin-top: 564px;
	 width: 188px; /* largeur de l'image réactive */
     height: 25px; /* hauteur de l'image réactive */
     background-image:    url(images/nav_bton10.jpg); /* source de l'image de départ */
     background-repeat: no-repeat;
     }
	 #biblio a:hover { /* définition de la classe au survol */
     background-image:    url(images/btnOn/eip2_171.jpg); /* source de l'image d'arrivée */
     }

#pat a { /* définition de la classe */
     display: block; /* la balise a doit être en bloc */
     position: absolute;
	 margin-left: 0px;
	 margin-top: 759px;
	 width: 188px; /* largeur de l'image réactive */
     height: 41px; /* hauteur de l'image réactive */
     background-image: url(images/lien_webdesigner.jpg); /* source de l'image de départ */
     background-repeat: no-repeat;
     }
	 #pat a:hover { /* définition de la classe au survol */
     background-image:    url(images/btnOn/eip2_19.jpg); /* source de l'image d'arrivée */
     }	 	 	 	 


             /*.............. MISE EN PAGE DES INCLUDES (contenus des pages et sous-menus)...................... */

/* ..............header des includes sans navigation (ceux dont le contenu est seulement sur 1 page) */

#haut_fois { /* définition de la classe */
     display: block; /* la balise a doit être en bloc */
     position: absolute;
     margin-left: 188px;
     margin-top: 189px;
	 width: 572px; /* largeur de la zone */
     height: 54px; /* hauteur de la zone */
     background-image: url(images/rubriques/nav_fois.jpg); /* source de l'image */
     background-repeat: no-repeat;
}
#haut_mot { 
     display: block; /* la balise <a> doit être en bloc */
     position: absolute;
     margin-left: 188px;
     margin-top: 189px;
	 width: 572px; /* largeur de la zone */
     height: 54px; /* hauteur de la zone */
     background-image: url(images/rubriques/nav_mot.jpg); /* source de l'image */
     background-repeat: no-repeat;
}

/* ..............header des includes avec sous-navigation (ceux dont le contenu est sur plusieurs pages)*/

/*---------------------------PAGES PROFIL---------------------------*/
/*element div avec le fond*/
#nav_profil {
  display: block; /* la balise <a> doit être en bloc */
  position: absolute;
  margin-left: 188px;
  margin-top: 189px;
  width:572px;
  height:54px;
  background:url(images/rubriques/nav_profil.jpg) no-repeat;
}
/*element ul correspondant au menu des pages*/
#nav_profil ul {
  /*suppression des styles par defaut de la balise ul*/
  margin:0;
  padding:0;
  list-style-type:none;
  /*fin style par defaut*/
  float:right;/*on cale l'element ul sur le bord droit de l'element pere (nav_profil)*/
  position:relative;/*permet de specifier la propriete left*/
  left:-30px;/*décolle de 30 pixels du bord droit de l'element pere*/
  top:24px;/*décolle de 24 pixels du bord supérieur de l'element pere*/
  padding-right:5px;/*ajoute 5px pour afficher le dernier trait à la fin du menu*/
  background:url(images/rubriques/fin_nav.gif) center right no-repeat;/*trait d'union placé en fond de ul, collé à droite et centré verticalement*/
}
/*element de la liste non ordonnée*/
#nav_profil li {
  float:left;/*permet d'aligner les li plutot que de les afficher les uns au dessous des autres*/
  width:17px;
  height:19px;
}

#nav_profil li a {
  text-indent:-5000px;/*on masque le texte contenu entre les balises <a>*/
  text-decoration:none;/*enleve le soulignement par defaut des balises <a>*/
  display:block;/*permet de spécifier une dimension à l'élément a (ici prend la dimension de l'element pere -> li)*/
  width:100%;
  height:100%;
}

#nav_profil li a:hover {background-position:-17px 0px;} /*lors du survol d'un lien on decale le fond de 17px vers la gauche*/

#nav_profil li.active1 {background:url(fin_nav.gif) -17px 0px no-repeat;} /*le bouton est rouge pour indiquer la page active / on decale le fond de 17px vers la gauche*/


/*----------------------------PAGE QI---------------------------*/
/*element div avec le fond*/
#nav_qi {
  display: block; /* la balise <a> doit être en bloc */
  position: absolute;
  margin-left: 188px;
  margin-top: 189px;
  width:572px;
  height:54px;
  background:url(images/rubriques/nav_qi.jpg) no-repeat;
}
/*element ul correspondant au menu des pages*/
#nav_qi ul {
  /*suppression des styles par defaut de la balise ul*/
  margin:0;
  padding:0;
  list-style-type:none;
  /*fin style par defaut*/
  float:right;/*on cale l'element ul sur le bord droit de l'element pere (nav_profil)*/
  position:relative;/*permet de specifier la propriete left*/
  left:-38px;/*décolle de 30 pixels du bord droit de l'element pere*/
  top:24px;/*décolle de 24 pixels du bord supérieur de l'element pere*/
  padding-right:5px;/*ajoute 5px pour afficher le dernier trait à la fin du menu*/
  background:url(images/rubriques/fin_nav.gif) center right no-repeat;/*trait d'union placé en fond de ul, collé à droite et centré verticalement*/
}
/*element de la liste non ordonnée*/
#nav_qi li {
  float:left;/*permet d'aligner les li plutot que de les afficher les uns au dessous des autres*/
  width:17px;
  height:19px;
}

#nav_qi li a {
  text-indent:-5000px;/*on masque le texte contenu entre les balises <a>*/
  text-decoration:none;/*enleve le soulignement par defaut des balises <a>*/
  display:block;/*permet de spécifier une dimension à l'élément a (ici prend la dimension de l'element pere -> li)*/
  width:100%;
  height:100%;
}

#nav_qi li a:hover {background-position:-17px 0px;} /*lors du survol d'un lien on decale le fond de 17px vers la gauche*/


/*----------------------------PAGE PSY---------------------------*/
/*element div avec le fond*/
#nav_psy {
  display: block; /* la balise <a> doit être en bloc */
  position: absolute;
  margin-left: 188px;
  margin-top: 189px;
  width:572px;
  height:54px;
  background:url(images/rubriques/nav_psy.jpg) no-repeat;
}
/*element ul correspondant au menu des pages*/
#nav_psy ul {
  /*suppression des styles par defaut de la balise ul*/
  margin:0;
  padding:0;
  list-style-type:none;
  /*fin style par defaut*/
  float:right;/*on cale l'element ul sur le bord droit de l'element pere (nav_profil)*/
  position:relative;/*permet de specifier la propriete left*/
  left:-30px;/*décolle de 30 pixels du bord droit de l'element pere*/
  top:24px;/*décolle de 24 pixels du bord supérieur de l'element pere*/
  padding-right:5px;/*ajoute 5px pour afficher le dernier trait à la fin du menu*/
  background:url(images/rubriques/fin_nav.gif) center right no-repeat;/*trait d'union placé en fond de ul, collé à droite et centré verticalement*/
}
/*element de la liste non ordonnée*/
#nav_psy li {
  float:left;/*permet d'aligner les li plutot que de les afficher les uns au dessous des autres*/
  width:17px;
  height:19px;
}

#nav_psy li a {
  text-indent:-5000px;/*on masque le texte contenu entre les balises <a>*/
  text-decoration:none;/*enleve le soulignement par defaut des balises <a>*/
  display:block;/*permet de spécifier une dimension à l'élément a (ici prend la dimension de l'element pere -> li)*/
  width:100%;
  height:100%;
}

#nav_psy li a:hover {background-position:-17px 0px;} /*lors du survol d'un lien on decale le fond de 17px vers la gauche*/

/*----------------------------PAGE SCOLARITE---------------------------*/
/*element div avec le fond*/
#nav_scola {
  display: block; /* la balise <a> doit être en bloc */
  position: absolute;
  margin-left: 188px;
  margin-top: 189px;
  width:572px;
  height:54px;
  background:url(images/rubriques/nav_scola.jpg) no-repeat;
}
/*element ul correspondant au menu des pages*/
#nav_scola ul {
  /*suppression des styles par defaut de la balise ul*/
  margin:0;
  padding:0;
  list-style-type:none;
  /*fin style par defaut*/
  float:right;/*on cale l'element ul sur le bord droit de l'element pere (nav_profil)*/
  position:relative;/*permet de specifier la propriete left*/
  left:-30px;/*décolle de 30 pixels du bord droit de l'element pere*/
  top:24px;/*décolle de 24 pixels du bord supérieur de l'element pere*/
  padding-right:5px;/*ajoute 5px pour afficher le dernier trait à la fin du menu*/
  background:url(images/rubriques/fin_nav.gif) center right no-repeat;/*trait d'union placé en fond de ul, collé à droite et centré verticalement*/
}
/*element de la liste non ordonnée*/
#nav_scola li {
  float:left;/*permet d'aligner les li plutot que de les afficher les uns au dessous des autres*/
  width:17px;
  height:19px;
}

#nav_scola li a {
  text-indent:-5000px;/*on masque le texte contenu entre les balises <a>*/
  text-decoration:none;/*enleve le soulignement par defaut des balises <a>*/
  display:block;/*permet de spécifier une dimension à l'élément a (ici prend la dimension de l'element pere -> li)*/
  width:100%;
  height:100%;
}

#nav_scola li a:hover {background-position:-17px 0px;} /*lors du survol d'un lien on decale le fond de 17px vers la gauche*/


/*----------------------------PAGE ASSOCIATIONS---------------------------*/
/*element div avec le fond*/
#nav_asso {
  display: block; /* la balise <a> doit être en bloc */
  position: absolute;
  margin-left: 188px;
  margin-top: 189px;
  width:572px;
  height:54px;
  background:url(images/rubriques/nav_asso.jpg) no-repeat;
}
/*element ul correspondant au menu des pages*/
#nav_asso ul {
  /*suppression des styles par defaut de la balise ul*/
  margin:0;
  padding:0;
  list-style-type:none;
  /*fin style par defaut*/
  float:right;/*on cale l'element ul sur le bord droit de l'element pere (nav_profil)*/
  position:relative;/*permet de specifier la propriete left*/
  left:-30px;/*décolle de 30 pixels du bord droit de l'element pere*/
  top:24px;/*décolle de 24 pixels du bord supérieur de l'element pere*/
  padding-right:5px;/*ajoute 5px pour afficher le dernier trait à la fin du menu*/
  background:url(images/rubriques/fin_nav.gif) center right no-repeat;/*trait d'union placé en fond de ul, collé à droite et centré verticalement*/
}
/*element de la liste non ordonnée*/
#nav_asso li {
  float:left;/*permet d'aligner les li plutot que de les afficher les uns au dessous des autres*/
  width:17px;
  height:19px;
}

#nav_asso li a {
  text-indent:-5000px;/*on masque le texte contenu entre les balises <a>*/
  text-decoration:none;/*enleve le soulignement par defaut des balises <a>*/
  display:block;/*permet de spécifier une dimension à l'élément a (ici prend la dimension de l'element pere -> li)*/
  width:100%;
  height:100%;
}

#nav_asso li a:hover {background-position:-17px 0px;} /*lors du survol d'un lien on decale le fond de 17px vers la gauche*/

/*----------------------------PAGE BIBLIOGRAPHIE---------------------------*/
/*element div avec le fond*/
#nav_biblio {
  display: block; /* la balise <a> doit être en bloc */
  position: absolute;
  margin-left: 188px;
  margin-top: 189px;
  width:572px;
  height:54px;
  background:url(images/rubriques/nav_biblio.jpg) no-repeat;
}
/*element ul correspondant au menu des pages*/
#nav_biblio ul {
  /*suppression des styles par defaut de la balise ul*/
  margin:0;
  padding:0;
  list-style-type:none;
  /*fin style par defaut*/
  float:right;/*on cale l'element ul sur le bord droit de l'element pere (nav_profil)*/
  position:relative;/*permet de specifier la propriete left*/
  left:-30px;/*décolle de 30 pixels du bord droit de l'element pere*/
  top:24px;/*décolle de 24 pixels du bord supérieur de l'element pere*/
  padding-right:5px;/*ajoute 5px pour afficher le dernier trait à la fin du menu*/
  background:url(images/rubriques/fin_nav.gif) center right no-repeat;/*trait d'union placé en fond de ul, collé à droite et centré verticalement*/
}
/*element de la liste non ordonnée*/
#nav_biblio li {
  float:left;/*permet d'aligner les li plutot que de les afficher les uns au dessous des autres*/
  width:17px;
  height:19px;
}

#nav_biblio li a {
  text-indent:-5000px;/*on masque le texte contenu entre les balises <a>*/
  text-decoration:none;/*enleve le soulignement par defaut des balises <a>*/
  display:block;/*permet de spécifier une dimension à l'élément a (ici prend la dimension de l'element pere -> li)*/
  width:100%;
  height:100%;
}

#nav_biblio li a:hover {background-position:-17px 0px;} /*lors du survol d'un lien on decale le fond de 17px vers la gauche*/

/*----------------------------PAGE LIENS---------------------------*/
/*element div avec le fond*/
#nav_liens {
  display: block; /* la balise <a> doit être en bloc */
  position: absolute;
  margin-left: 188px;
  margin-top: 189px;
  width:572px;
  height:54px;
  background:url(images/rubriques/nav_liens.jpg) no-repeat;
}
/*element ul correspondant au menu des pages*/
#nav_liens ul {
  /*suppression des styles par defaut de la balise ul*/
  margin:0;
  padding:0;
  list-style-type:none;
  /*fin style par defaut*/
  float:right;/*on cale l'element ul sur le bord droit de l'element pere (nav_profil)*/
  position:relative;/*permet de specifier la propriete left*/
  left:-30px;/*décolle de 30 pixels du bord droit de l'element pere*/
  top:24px;/*décolle de 24 pixels du bord supérieur de l'element pere*/
  padding-right:5px;/*ajoute 5px pour afficher le dernier trait à la fin du menu*/
  background:url(images/rubriques/fin_nav.gif) center right no-repeat;/*trait d'union placé en fond de ul, collé à droite et centré verticalement*/
}
/*element de la liste non ordonnée*/
#nav_liens li {
  float:left;/*permet d'aligner les li plutot que de les afficher les uns au dessous des autres*/
  width:17px;
  height:19px;
}

#nav_liens li a {
  text-indent:-5000px;/*on masque le texte contenu entre les balises <a>*/
  text-decoration:none;/*enleve le soulignement par defaut des balises <a>*/
  display:block;/*permet de spécifier une dimension à l'élément a (ici prend la dimension de l'element pere -> li)*/
  width:100%;
  height:100%;
}

#nav_liens li a:hover {background-position:-17px 0px;} /*lors du survol d'un lien on decale le fond de 17px vers la gauche*/


/*----------------------------PAGE ACTIVIITE---------------------------*/
/*element div avec le fond*/
#nav_activ {
  display: block; /* la balise <a> doit être en bloc */
  position: absolute;
  margin-left: 188px;
  margin-top: 189px;
  width:572px;
  height:54px;
  background:url(images/rubriques/nav_activ.jpg) no-repeat;
}
/*element ul correspondant au menu des pages*/
#nav_activ ul {
  /*suppression des styles par defaut de la balise ul*/
  margin:0;
  padding:0;
  list-style-type:none;
  /*fin style par defaut*/
  float:right;/*on cale l'element ul sur le bord droit de l'element pere (nav_profil)*/
  position:relative;/*permet de specifier la propriete left*/
  left:-30px;/*décolle de 30 pixels du bord droit de l'element pere*/
  top:24px;/*décolle de 24 pixels du bord supérieur de l'element pere*/
  padding-right:5px;/*ajoute 5px pour afficher le dernier trait à la fin du menu*/
  background:url(images/rubriques/fin_nav.gif) center right no-repeat;/*trait d'union placé en fond de ul, collé à droite et centré verticalement*/
}
/*element de la liste non ordonnée*/
#nav_activ li {
  float:left;/*permet d'aligner les li plutot que de les afficher les uns au dessous des autres*/
  width:17px;
  height:19px;
}

#nav_activ li a {
  text-indent:-5000px;/*on masque le texte contenu entre les balises <a>*/
  text-decoration:none;/*enleve le soulignement par defaut des balises <a>*/
  display:block;/*permet de spécifier une dimension à l'élément a (ici prend la dimension de l'element pere -> li)*/
  width:100%;
  height:100%;
}

#nav_activ li a:hover {background-position:-17px 0px;} /*lors du survol d'un lien on decale le fond de 17px vers la gauche*/

	 
/* ZONES REACTIVES DES BOUTONS SOUS-NAV ----------------- */	 
/*on attribut les images de fond à chaque element a*/
#zone1 {background:url(images/rubriques/zone1.gif) no-repeat;}
#zone2 {background:url(images/rubriques/zone2.gif) no-repeat;}
#zone3 {background:url(images/rubriques/zone3.gif) no-repeat;}
#zone4 {background:url(images/rubriques/zone4.gif) no-repeat;}
/* ----------------- */


	 
a.haut_test { /* définition de la classe */
     display: block; /* la balise <a> doit être en bloc */
     width: 572px; /* largeur de la zone */
     height: 54px; /* hauteur de la zone */
     background-image: url(images/rubriques/nav_srub_test.jpg); /* source de l'image */
     background-repeat: no-repeat;
}

a.haut_psy { /* définition de la classe */
     display: block; /* la balise <a> doit être en bloc */
     width: 572px; /* largeur de la zone */
     height: 54px; /* hauteur de la zone */
     background-image: url(images/eip_05.jpg); /* source de l'image */
     background-repeat: no-repeat;
}

a.haut_scola { /* définition de la classe */
     display: block; /* la balise <a> doit être en bloc */
     width: 572px; /* largeur de la zone */
     height: 54px; /* hauteur de la zone */
     background-image: url(images/eip_05.jpg); /* source de l'image */
     background-repeat: no-repeat;
}

a.haut_activite { /* définition de la classe */
     display: block; /* la balise <a> doit être en bloc */
     width: 572px; /* largeur de la zone */
     height: 54px; /* hauteur de la zone */
     background-image: url(images/eip_05.jpg); /* source de l'image */
     background-repeat: no-repeat;
}

a.haut_biblio { /* définition de la classe */
     display: block; /* la balise <a> doit être en bloc */
     width: 572px; /* largeur de la zone */
     height: 54px; /* hauteur de la zone */
     background-image: url(images/eip_05.jpg); /* source de l'image */
     background-repeat: no-repeat;
}

a.haut_liens { /* définition de la classe */
     display: block; /* la balise <a> doit être en bloc */
     width: 572px; /* largeur de la zone */
     height: 54px; /* hauteur de la zone */
     background-image: url(images/eip_05.jpg); /* source de l'image */
     background-repeat: no-repeat;
}

/* ..............les 5 gabarits de fond de pages possibles */
#page { /* page simple */
	display: block; /* la balise <a> doit être en bloc */
	position: absolute;
	margin-left: 188px;
	margin-top: 243px;
	width: 572px; /* largeur de la zone */
	height: 516px; /* hauteur de la zone */
	background-image: url(images/page.jpg); /* source de l'image */
	/*background-repeat: no-repeat;  pour que l'image se répète supprimer la balise no-repeat*/
	 font-family:Arial, Helvetica, sans-serif;
	font-size: 0.9em;
	color: #564b3f; /*couleur de la typo*/
	overflow: auto;   /* ascenceur compatible sous IE seulement, donc le texte sera scrolable seulement sous IE ! penser à chercher soluce pour firefox si la navigation en pages multiple pose soucis */
	left: auto;
	 }
	 
	 #page2 { /* définition de la classe */
     display: block; /* la balise <a> doit être en bloc */
     position: absolute;
	 margin-left: 188px;
     margin-top: 243px;
	 width: 572px; /* largeur de la zone */
     height: 516px; /* hauteur de la zone */
     background-image: url(images/page2.jpg); /* source de l'image */
     background-repeat: no-repeat; /* pour que l'image se répète supprimer la balise no-repeat*/
	 font-family:Arial, Helvetica, sans-serif;
     font-size: 0.9em;
     color: #564b3f; /*couleur de la typo*/
     overflow: auto;   /* ascenceur compatible sous IE seulement, donc le texte sera scrolable seulement sous IE ! penser à chercher soluce pour firefox si la navigation en pages multiple pose soucis */
	 }
	 
	  
	 #page3 { /* définition de la classe */
     display: block; /* la balise <a> doit être en bloc */
     position: absolute;
	 margin-left: 188px;
     margin-top: 243px;
	 width: 572px; /* largeur de la zone */
     height: 516px; /* hauteur de la zone */
     background-image: url(images/page3.jpg); /* source de l'image */
     background-repeat: no-repeat; /* pour que l'image se répète supprimer la balise no-repeat*/
     overflow: auto;   /* ascenceur compatible sous IE seulement, donc le texte sera scrolable seulement sous IE ! penser à chercher soluce pour firefox si la navigation en pages multiple pose soucis */
	 }
	 
	 #page4 { /* définition de la classe */
     display: block; /* la balise <a> doit être en bloc */
     position: absolute;
	 margin-left: 188px;
     margin-top: 243px;
	 width: 572px; /* largeur de la zone */
     height: 524px; /* hauteur de la zone */
     background-image: url(images/page4.jpg); /* source de l'image */
     background-repeat: no-repeat; /* pour que l'image se répète supprimer la balise no-repeat*/
     overflow: auto;   /* acsenceur compatible sous IE seulement, donc le texte sera scrolable seulement sous IE ! penser à chercher soluce pour firefox si la navigation en pages multiple pose soucis */
	 }
	 
	 
	 
	  #page5 { /* définition de la classe */
     display: block; /* la balise <a> doit être en bloc */
	position: absolute;
	margin-left: 188px;
	margin-top: 243px;
	width: 572px; /* largeur de la zone */
	height: 516px; /* hauteur de la zone */
	background-image: url(images/page.jpg); /* source de l'image */
	/*background-repeat: no-repeat;  pour que l'image se répète supprimer la balise no-repeat*/
	 font-family:Arial, Helvetica, sans-serif;
	font-size: 0.9em;
	color: #564b3f; /*couleur de la typo*/
	/*overflow: auto;   /* ascenceur compatible sous IE seulement, donc le texte sera scrolable seulement sous IE ! penser à chercher soluce pour firefox si la navigation en pages multiple pose soucis */
	left: auto;
	 }
	 
	 .amaz { margin-left: 15px;}
	 
/* ...............bas de pages */	 
	 
	 #footer { /* définition de la classe */
     display: block; /* la balise <a> doit être en bloc */
     position: absolute;
	 margin-left: 188px;
	 margin-top: 759px;
	 width: 572px; /* largeur de l'image réactive */
     height: 41px; /* hauteur de l'image réactive */
     background-image: url(images/bas_page.jpg); /* source de l'image */
     background-repeat: no-repeat;
     }
	 
	 #nav { /* liens pour nav ig en bas du site*/
	 display: block; /* la balise <a> doit être en bloc */
     position: absolute;
	 font-family:Arial, Helvetica, sans-serif;
     font-size: 0.8em;
	 margin-left: 188px;
	 margin-top: 800px;
	 width: 572px; /* largeur de l'image réactive */
     height: 41px; /* hauteur de l'image réactive */
     }
</style>