/* Feuille de style principale du site morice33. Cette feuille doit être commune aux deux versions du site */

  body { 
    color: rgb(102, 51, 0);
/*    color: rgb(0, 0, 0);*/
/*    background-color: rgb(255, 255, 204);*/
    background-color: rgb(255, 255, 230);
	/* en système décimal :  100 100 90 ("fond site" dans canvas) */
    text-align: justify;
/*    font-family: "Georgia","Garamond","urw bookman l","century schoolbook l","times new roman",serif;*/
/* Choix sur http://edu.ca.edu/article67.html : -> j'ajoute Garamond */
    font-family: Georgia, "Garamond", "Bookman Old Style", Bookman, "New Century Schoolbook", "Bookman Antiqua", Palatino, "Utopia", "New York", "Times New Roman", Times, serif;    
    font-size: 12pt;
    direction: ltr;
    }

  p { text-indent: 20pt;
    }

  h2 { 
    /*font-family: "Georgia","Garamond","times new roman",serif;*/
  font-family: "Trebuchet MS", "lucida", helvetica, sans-serif ;
    color: rgb(102, 51, 0);
/*    background-color: rgb(255, 255, 230);*/
    text-align: left;
    font-size: 18pt;
    font-weight: bold;
    margin-top: 0.5em;
    }

  h2 a {
    text-decoration: none ;
    color: rgb(102, 51, 0);
    font-style: italic ;
  }

h3 {
  font-family: "Trebuchet MS", "lucida", helvetica, sans-serif ;
    color: rgb(102, 51, 0);
    text-align: left;
    font-weight: bold;
}

  h3 a {
    text-decoration: none ;
  }

  ul { 
  list-style: none;
/* Dernière solution en date : mettre une image du tiret que l'on trace naturellement dans les autres navigateurs */
    list-style-position: inside;
    }

/* Ceci fonctionne sur tous les navigateurs sauf IE : tirets à la place des disques (typo française) */
ul li:before {
  margin-right: 1mm ;
  content: "\002013" ; 
}

small, sub, sup { font-size: .83em ; }
sub { 
  vertical-align: sub ;
  line-height: .8em; 
} 
sup { 
  vertical-align: super ;
  line-height: .8em; 
} 

  img { border: 5px solid rgb(102, 51, 0);
    }

	
  a:link { color: rgb(255, 102, 102);
    }

  a:visited { color: rgb(255, 102, 0);
    }

  a:hover { color: rgb(255, 0, 0);
    text-decoration: none;
    }

/* Classe  externe ou dehors : il n'y a pas de différence, exceptée que le script perl de modification
rajouter une info-bulle sur les liens de classe externe et pas ceux de dehors (mettre dehors quand
l'info-bulle ne fonctionne pas)
*/
  a.externe:link, a.dehors:link { color: rgb(153, 0, 0);
    }

  a.externe:visited, a.dehors:visited { color: rgb(255, 153, 102);
    }

  .externe, .dehors {  }

  a.bouton:link { font-weight: bold;
    color: rgb(51, 51, 51) ! important;
    }

  a.bouton:visited { font-weight: bold;
    color: rgb(51, 51, 51);
    }

  a.bouton:hover { border-color: rgb(255, 153, 0);
    font-weight: bold;
    background-color: rgb(102, 255, 255);
    color: rgb(255, 0, 0);
    }

  .bouton { border: 2px solid rgb(102, 0, 0);
    padding: 5px;
    text-align: center;
    background-color: rgb(192, 192, 192);
    font-weight: bold;
    text-decoration: none;
    color: rgb(51, 51, 51);
	cursor: pointer;
    }

  ul.courte_liste { 
    text-align: left;
/*    list-style-type: disc;
    list-style-image: none;*/
    list-style: none; 
    list-style-position: inside;
    position: relative;
    margin-left: -0.5em;
    padding-left: 1em;
    }

ul.courte_liste li:before {

  margin-right: 1mm ;

  content: "\002013" ; 

}

  a.note_info_bulle { border-bottom: 1px dashed rgb(255, 0, 0);
    color: rgb(51, 51, 51);
    }

  .note_info_bulle {  }

  .sbulle { border: 2px solid black;
    padding: 4px;
    background: rgb(255, 255, 204) none repeat scroll 0% 50%;
/*
    -moz-background-clip: initial;
    -moz-background-origin: initial;
    -moz-background-inline-policy: initial;
*/
    position: absolute;
    visibility: hidden;
    text-align: left;
    }

.arabe {
  font-family: "times new roman", serif ;
  font-size: 24pt;
  direction: rtl;
  text-align: center ;
}


  #titre, #titre_gen, #titre_gen_lg, #titre_rec, #titre_jeu, #titre_jeu_lg, #titre_jeu_tlg, #titre_cartes { 
    position: absolute;
    top: 50%;
    left: 50%;
    height: 100px;
    width: 98%;
    line-height: 100px;
    margin-top: -50px;
    margin-left: -49%;
    vertical-align: middle;
    text-align: center ;
    white-space: nowrap ;
    color: rgb(153,51,0) ;
    font-family: "Comic Sans MS", lucida, cursive ;
    font-weight: bold ;
    }

#titre, #titre_gen, #titre_rec, #titre_jeu, #titre_cartes {
    font-size: 4em ;
}

#titre_jeu_lg, #titre_gen_lg {
    font-size: 2.5em ;
}

#titre_jeu_tlg {
    font-size: 2em ;
}

/*
  #titre {
    background: rgb(179,140,64) url(images/maquette/titre.png) top left no-repeat ;
    }
*/


/* Titre des voyages récents appelé sur la racine du site */
/* titre_gen_lg : même image de fond mais caractères plus petits */
  #titre_gen, #titre_gen_lg { 
    background: rgb(179,140,64) url(images/maquette/titre.png) top left no-repeat ;
  }

/* Titre des voyages récents appelé depuis un sous-répertoire (p ex local) du répertoire du site */
  #titre_rec { 
    background: rgb(179,140,64) url(images/maquette/titre.png) top left no-repeat ;
  }

/* titre_jeu : Classe tilisée pour les voyages de jeunesse */
/* titre_jeu_lg : même image de fond mais caractères plus petits (été 1985) */
/* titre_jeu_tlg : caractères encore plus petits (été 1981) */
  #titre_jeu, #titre_jeu_lg, #titre_jeu_tlg { 
    background: rgb(179,140,64) url(images/maquette/titre-jeunesse.png) top left no-repeat ;
  }

/* #titre_cartes : sans image */
#titre_cartes {
  background: rgb(179,140,64) ; 
}

/* Classe commune à tous les menus et les sous-menus */
#menu {
  text-align: center ;
  position: absolute ;
  width: 250px;
  height: 500px ;
  border: 0px ;
  padding: 0px ;
  margin: 0px ;
  background-color: rgb(204,179,128);
}

img#lucarne {
  position: absolute ;
  border: none; 
  width: 200px; 
  height: 136px;
  left: 25px ;
  z-index: 0 ;
}

/* Classe apparaissant dans les menus au niveau des liens recouvrant une image */
#entrees {
  position: absolute ;
  width: 250px; 
/*  height: 430px ;*/
/*  height: 220px; */
  height:500px ;
  padding: 0px ;
  margin: 0px ;
  left: 0px;
  top: 0px ;
  z-index: 1;
}


/* La zone hublot n'est normalement nécessaire qu'avec IE6 */
#hublot{
  position: absolute ;
  height: 0px ;
  width: 250px; 
  padding: 0px ;
  margin: 0px ;
  left: 0px;
  z-index: 1;
}

/* liste_menu : intervient dans le menu général et dans les menus d'années*/
ul#liste_menu {
  position: absolute ;
  width: 250px; 
  padding: 0px ;
  margin: 0px ;
  left: 0px;
  list-style-type: none ;
  list-style-position: outside;
  text-align: center ;
}

ul#liste_menu li {
  display: inline ; /* coquille IE */
}

ul#liste_menu li:before {
  margin-right: 0mm ;
  content: "" ; 
}



#liste_menu a {
  display: block ;
  height: 35px ;
  width: 250px ;  
  line-height: 35px ;
  color: rgb(102,51,0) ;
  font-size: 23px ;
  font-family: "Trebuchet MS", "lucida", helvetica, sans-serif ;
  text-decoration: none ;
}



ul#apropos {
  position: absolute ;
  width: 250px; 
  padding: 0px ;
  margin: 0px ;
  left: 0px;
  list-style-type: none ;
  list-style-position: outside;
  text-align: center ;
}

ul#apropos li {
  margin: 0px;
  padding: 0px;
  display: inline ; /* coquille IE */
}

ul#apropos li:before {
  margin-right: 0mm ;
  content: "" ; 
}


#apropos a {
  display: block ;
  height: 20px ;
  width: 250px ;  
  line-height: 20px ;
  color: rgb(102,51,0) ;
  font-size: 15px ;
  font-family: "Trebuchet MS", "lucida", helvetica, sans-serif ;
/*  font-family: "Georgia","Garamond","times new roman",serif;*/
  text-decoration: none ;
}

/* Nécessaire pour avoir les bonnes couleurs en cas de visite précédente */
a#entrees1:link, a#entrees1:visited, a#entrees2:link, a#entrees2:visited, 
a#entrees3:link, a#entrees3:visited, a#entrees4:link, a#entrees4:visited,
a#entrees5:link, a#entrees5:visited, a#entrees6:link, a#entrees6:visited,
a#entrees7:link, a#entrees7:visited, a#entrees8:link, a#entrees8:visited,
a#entrees9:link, a#entrees9:visited, a#entrees10:link, a#entrees10:visited,
a#entrees11:link, a#entrees11:visited, a#entrees12:link, a#entrees12:visited,
a#entrees13:link, a#entrees13:visited, a#entrees14:link, a#entrees14:visited,
a#entrees15:link, a#entrees15:visited, a#entrees16:link, a#entrees16:visited,
a#entrees17:link, a#entrees17:visited, a#entrees18:link, a#entrees18:visited,
a#entrees19:link, a#entrees19:visited, a#entrees20:link, a#entrees20:visited {
  color: rgb(102,51,0) ;
}

/* Nécessaire sous Firefox sinon le trait fin apparaissant au focus, élargit le cadre et propose l'apparition de barres */
a#entrees1:focus, a#entrees2:focus, a#entrees3:focus, a#entrees4:focus,
a#entrees5:focus, a#entrees6:focus, a#entrees7:focus, a#entrees8:focus,
a#entrees9:focus, a#entrees10:focus, a#entrees11:focus, a#entrees12:focus,
a#entrees13:focus, a#entrees14:focus, a#entrees15:focus, a#entrees16:focus,
a#entrees17:focus, a#entrees18:focus, a#entrees19:focus, a#entrees20:focus {
  width: 249 ;
}


a#entrees1:hover, a#entrees2:hover, a#entrees3:hover, a#entrees4:hover,
a#entrees5:hover, a#entrees6:hover, a#entrees7:hover, a#entrees8:hover,
a#entrees9:hover, a#entrees10:hover, a#entrees11:hover, a#entrees12:hover,
a#entrees13:hover, a#entrees14:hover, a#entrees15:hover, a#entrees16:hover,
a#entrees17:hover, a#entrees18:hover, a#entrees19:hover, a#entrees20:hover {
  color: rgb(153,51,0) ;
}



#entrees ul {
  margin: 0;
  padding: 0;
  left:0px ;
}

#maj {
  position: absolute ;
  width: 200px;
  bottom: 80px ;
  left: 30px ;
  padding: 0px;
  margin: 0px ;
  text-align: left ;
  font-size: smaller ;
  color: rgb(102,51,0) ;
  z-index: 1;
}


/* #retour : correspond en général à la dernière entrée des différents menus (en gras) */
#retour {
  position: absolute ;
  width: 250px ;
  padding: 0px ;
  margin: 0px ;
  left: 0px;
  text-align: center ;
  font-weight: bold;

  height: 20px ;
  font-size: 14pt;
  line-height: 20px ;
}

a#retour:link, a#retour:visited, a#retour:focus {
  height: 20px ;
  color: rgb(102,51,0) ;
/*  font-size: 14pt;*/
/*  color: rgb(0, 0, 0); */ /* uniquement parce qu'on ne voit pas bien avec le fond */
}

a#retour:focus {
  width: 249 ;
/* Nécessaire avec firefox sinon apparition de barres */
}

a#retour:hover {
  color: rgb(153,51,0) ;
  height: 20px ;
/*  font-size: 14pt;*/
}


/* Triangle : correspond au triangle d'image en bas des menus */
#triangle {
  position: absolute ;
  width: 250px; 
/*  height: 120px ;*/
height: 0px ;
  padding: 0px ;
  margin: 0px ;
  left: 0px;
  z-index: 1 ;
}
/* (la suite dans les fichiers spécifiques) */


/* pre_compteur : apparaît en bas du menu général (contient le compteur, en fait)
   compteur_ : apparaît dans le cadre BG sous le menu général
   menu_universel : apparaît dans le cadre BG sous les autres menus
   pre_menu_univ : apparaît en bas de chaque menu (début du menu universel)

 NB : la « divite » dans le contenu des menus BG (un div de l'id #menu_universel, suivi d'un ul)
vient du fait que la liste ne se positionne pas correctement sous IE sans cela
*/
#pre_compteur, #compteur_, #menu_universel, #pre_menu_univ {
    position:absolute;
    width: 250px;
    left: 0px ;
    padding: 0px;
    margin: 0px ;
    text-align: center ;
}

#menu_universel ul, #pre_menu_univ ul {
  list-style-image: none ;
}

#menu_universel ul li:before, #pre_menu_univ ul li:before{
  margin-right: 0mm ;
  content: "" ;  
}

#pre_compteur {
    bottom: 0px ;
    font-style: italic ;
    background-color: rgb(204,179,128);
    line-height: 10pt ;
/*    line-height: 4pt ; */
/* à cause de l'exposant ^e après le compteur */
/*/ /    line-height: 10pt ;*/  /* Version IE */
}

#pre_compteur img {
  margin-top: 0px ;
}

/* Classe pour le cadre en bas à gauche */
#cadre_bg{
    background-color: rgb(204,179,128);
}


#compteur_ {
    top: 0px;
    font-style: italic ;
}

#menu_universel {
  top: -1px; /* Pour compenser le bottom:1px dans le cadre du menu  introduit pour empêcher les barres de défilement
(le cadre BG où est utilisé cette classe ne peut pas avoir de barres de définilement quant à lui). */
}

#pre_menu_univ {
    bottom: 1px;
/* Apparition de barres de défilement sous Firefox si l'on clique sur le dernier lien du pre_menu_univ */
}

#menu_universel, #menu_universel ul, #menu_universel li, #pre_menu_univ, #pre_menu_univ ul, #pre_menu_univ li {
  list-style-type: none ;
  list-style-position: outside;
  text-align: center ;
  margin: 0px ;
  padding: 0px ;
  z-index: 2 ;
}

#menu_universel ul li a:link, #menu_universel ul li a:visited, #pre_menu_univ ul li a:link, #pre_menu_univ ul li a:visited {
  color: rgb(102,51,0) ;
  font-style: italic ;
  text-decoration: none ;
}


#menu_universel ul li a:hover, #menu_universel ul li a:focus, #pre_menu_univ ul li a:hover, #pre_menu_univ ul li a:focus {
 color: rgb(153, 0, 0);
}

/* Classe retour_sommaire : comme #menu_niverse ul li a, mais en gras */
a.retour_sommaire:link, a.retour_sommaire:visited, a.retour_sommaire:active, a.retour_sommaire:hover {
  font-size: 15px ;
  font-family: "Trebuchet MS", "lucida", helvetica, sans-serif ;
/*  font-family: "Georgia","Garamond","times new roman",serif;*/
  text-decoration: none ;
    font-style: italic ;
}


a.retour_sommaire:link, a.retour_sommaire:visited, a.retour_sommaire:active, a.retour_sommaire:hover {
    font-weight: bold;
}





  a.cahiers:link { border-color: rgb(153, 0, 0);
    border-width: 1px;
    border-left: 1px solid rgb(153, 0, 0);
    border-right: 1px solid rgb(153, 0, 0);
    background-color: rgb(255, 204, 102);
    font-weight: normal;
    text-decoration: none;
    }

  a.cahiers:visited { border-color: rgb(153, 0, 0);
    border-width: 1px;
    border-left: 1px solid rgb(153, 0, 0);
    border-right: 1px solid rgb(153, 0, 0);
    font-weight: bold;
    background-color: rgb(255, 204, 102);
    }

  a.cahiers:hover { border-color: rgb(153, 0, 0);
    border-width: 1px;
    border-left: 1px solid rgb(153, 0, 0);
    border-right: 1px solid rgb(153, 0, 0);
    background-color: rgb(255, 153, 102);
    }

  .cahiers { border-style: solid;
    border-color: rgb(153, 0, 0);
    border-width: 2px 1px;
    background-color: rgb(255, 204, 102);
    }

  .faux_lien { color: rgb(255, 102, 102);
    text-decoration: underline;
    cursor: pointer;
    }


.panorama, .panorama_petit {
text-align: center;
overflow: auto;
width: 800px;
margin: 0 0 10px 10px;
padding: 0;
}

.panorama{
height: 363px;
}

.panorama_petit {
height: 290px;
}


#zoom {
	margin: 2px;       
	padding: 0;
        border: 5px solid rgb(102, 51, 0);
	line-height: 337px;
}


p.lettrine {
  text-indent: 0pt;
}

p.lettrine:first-letter {
  float: left ;
  font: bold 2.5em/0.9em Georgia, Times new Roman, Times, serif ;
  color: rgb(0, 0, 0) ;
  border: 1px solid #990000;
  background-color: rgb(255,255,204) ;
  margin: 1px ;
  margin-right: 5px ;
  margin-top: 2px ;
  margin-bottom: 0px ;
  padding: 1px ;
}

p.lettrine span {
  font-variant: small-caps ;
}

/* Ancienne méthode (en fait il n'est plus nécessaire de préciser : <span class="slettrine"> */
.slettrine {
  font-variant: small-caps ;
}


/* Classe intervenant dans les liste de navigation entre les différents voyages ou années */
/* Source : css.maxdesign.com.au/listamatic/vertical06.htm */
ul.liste_navigation
{
position: relative;
left: 20px ;
padding-left: 0;
margin-left: 0;
border-bottom: 1px solid gray;
width: 600px;
list-style-type: none ;
list-style-position: outside;
list-style-image: none;
}

ul.liste_navigation li
{
margin: 0;
padding: 0.25em;
border-top: 1px solid gray;
}

ul.liste_navigation li a { text-decoration: none; }

ul.liste_navigation li:before {
  margin-right: 0mm ;
  content: "" ; 
}


/* Classes intervenant dans les pages d'en-têtes d'années des voyages de jeunesse
(1984.html par exemple) */

h2#les_photos{
  margin-top: 1.5em ;
  padding: 0mm ;
  margin-bottom: 0mm ;
}

.annee {
  width: 44% ;
  margin: 0cm ;
  padding-left: 0.7cm ;
  padding-right: 0cm ;
  padding-top: 0.6em ;
  padding-bottom: 20em ; /* Pour permettre à l'ascenseur de se positionner avec le titre en haut */
/* (ne fonctionne pas sous IE si on utilise margin-bottom) */
  float: left ;
  text-align: left;
}

.annee h4 {
  padding: 0px ;
  margin-left: 20px ;
  margin-top: 0px ;
  margin-bottom: 5px ;
  font-family: "Trebuchet MS", "lucida", helvetica, sans-serif ; 
  font-weight: normal; 
}

.annee h4 a {
  text-decoration: none ; 
}

.annee ul {
  position: relative ;
  padding-left: 0px ;
  margin-left: 0px ;
  margin-top: 0px ;
  left: 20px ;
}

.annee blockquote {
  display: block ;
  margin-top: 0 ;
  padding: 0 ;
}

.annee blockquote ul {
  position: relative ;
  padding-left: 0 ;
  margin-left: 0 ;
  left: 0px ;
}

/* Menus des cartes */
#menu_carte {
  text-align: center ;
  position: absolute ;
  width: 250px;
  height: 495px ; /* Apparition de barres dans Opéra si l'on va au-delà */
  border: 0px ;
  padding: 0px ;
  margin: 0px ;
  background-color: rgb(204,179,128);
/*  top: 10px ;*/
  bottom: 0px ; /* à cause du 495 plus haut (au lieu de 500), espace visible dans le sous-menu sinon */
}

#menu_carte h3 {
  margin-left: 0.5em ;
  text-align: center ;
  position: relative;
  top: 10px ;
}

#menu_carte h4 {
  padding: 0 ;
  margin-top: 10px ;
  margin-bottom: 5px ;
  font-family: "Trebuchet MS", "lucida", helvetica, sans-serif ; 
  text-align: center ;
/*  font-weight: normal; */
}

#menu_carte ul {
  margin: 0 ;
  padding: 0 ;
  text-align: left ;
  list-style-position: inside;
  position: relative;
  margin-left: 0.7em;
  padding-left: 0em;
/*  color: rgb(120,120,120) ; */
}

#menu_carte a, #menu_carte a:visited, #menu_carte a#entrees1, #menu_carte a#entrees1:visited ,
#menu_carte a#entrees2, #menu_carte a#entrees2:visited ,
#menu_carte a#entrees3, #menu_carte a#entrees3:visited ,
#menu_carte a#entrees4, #menu_carte a#entrees4:visited ,
#menu_carte a#entrees5, #menu_carte a#entrees5:visited ,
#menu_carte a#entrees6, #menu_carte a#entrees6:visited ,
#menu_carte a#entrees7, #menu_carte a#entrees7:visited ,
#menu_carte a#entrees8, #menu_carte a#entrees8:visited ,
#menu_carte a#entrees9, #menu_carte a#entrees9:visited ,
#menu_carte a#entrees10, #menu_carte a#entrees10:visited ,
#menu_carte a#entrees11, #menu_carte a#entrees11:visited 
{
  text-decoration: none ;
/*  color: rgb(102,51,0) ; */
  color: rgb(153,51,0) ; 
}

#menu_carte blockquote {
  padding: 0 ;
  margin-top: 10px ;
  margin-bottom: 5px ;
  margin-left: 1em ;
  text-align: left ;
}

#menu_carte a:hover, 
#menu_carte a#entrees1:hover,
#menu_carte a#entrees2:hover,
#menu_carte a#entrees3:hover,
#menu_carte a#entrees4:hover,
#menu_carte a#entrees5:hover,
#menu_carte a#entrees6:hover,
#menu_carte a#entrees7:hover,
#menu_carte a#entrees8:hover,
#menu_carte a#entrees9:hover,
#menu_carte a#entrees10:hover,
#menu_carte a#entrees11:hover
{
color: rgb(153, 0, 0);
 }

/*
#menu_carte ul {
list-style-image: none ;
}
*/

#menu_carte ul li:before {
  color: rgb(102,51,0) ; 
}

/*  Environnement deux_photos utilisé dans les promenades dominicales */
.deux_photos, .due_photos
{
  padding-top: 0cm ;
  padding: 0cm ;
  padding-left: 20pt ;
  margin-left: 0cm ;
}

.deux_photos img, .due_photos img {
 background-color: rgb(217,204,191) ;
}


/* Environnement côte à côte, pour placer une petite photo verticale et une grande horizontale, côte à côte */
.cote_a_cote{
  text-align: center ;
}


/* Ligne de code utilisées pour les images multiples */
/*  Source : www.ultra-fluide.com/ressources/css/menu-onglets-rollover.htm
/*
    body {
     background:#fff;
     margin:0;
     padding:20px;
     color:#000;
     font:small Georgia,Serif;
     _font:x-small;
      }
*/


.image-multiple, .imagele-multiple {  
  width:500px;
  margin-left: -250px ;
}

.image-multiple-v, .imagele-multiple-v {  
  width:338px;
  margin-left: -169px ;
}

.image-multiple, .image-multiple-v, .imagele-multiple, .imagele-multiple-v {
/* Ceci permet de centrer... */
  position: relative ;
  left: 50% ;
}

/*  Style utilisé pour mettre une petite image verticale à côté de la grande image */
.double-imm {
  position: relative; 
  width: 720px; 
  margin-left: -360px;
  left: 50%; 
/*  height: 490px ;*/
  /*margin-bottom: -348px ;*/
  height: 490px; 
  /* Mettre un margin-bottom est probématique car ça recouvre le § suivant. Les notes infos bulles éventuelles ne s'y affichent plus
  (sous IE l'affichage semble correct)
  Problème : initialement il y avait height:490 que j'ai remplacé par un margin-bottom, mais je ne sais plus pourquoi. A voir, donc
  */
}
.double-imm .image-multiple, .double-imm .image-multiple-v, .double-imm .imagele-multiple, .double-imm .imagele-multiple-v {
  left: 0px ;
  margin-left: 0px;
}

/*  Style définissant les proporiétés de la petite image verticale */
.double-imm  img.deuxieme {
  position: relative; 
  top: -348px ; 
  left: 510px ;
  width: 224px; 
  height: 338px; 
  margin-bottom: -348px ; /* Indispensable dans Chrome pour voir l'info bulle sous l'image */

}

  
 .entete-image, .entete-image-v {
      float:left;
/*      background:#DAE0D2 url(images/maquette/fond-menimages.gif) repeat-x bottom;*/
      font-size:93%;
      line-height:normal;
      }
	  .entete-image {
      width:510px; /* 10 pixels ajoutés pour tenir compte des marges */
	  }
.entete-image-v {
      width:348px; /* 10 pixels ajoutés pour tenir compte des marges */
}	  
	  
    .entete-image ul, .entete-image-v ul {
      margin:0;
      padding:0px 10px 0;
      list-style:none;
      }
    .entete-image li, .entete-image-v li {
      float:left;
      background:url(images/maquette/gauche_lesdeux.gif) no-repeat left top;
      margin:0;
      padding:0 0 0 9px;
      border-bottom:1px solid #765;
      }
/* Ajout : compenser ce qui est dans le style principal */
    .entete-image ul li:before, .entete-image-v ul li:before {
	
  margin-right: 0mm ;

	  content: "" ; 

    }  
  .entete-image a, .entete-image-v a {
      float:left;
      display:block;
      width:.1em;
      background:url(images/maquette/droite_lesdeux.gif) no-repeat right top;
      padding:5px 15px 4px 6px;
      text-decoration:none;
      font-weight:bold;
      color: rgb(179,153,128) ;
      white-space:nowrap;
      }
    .entete-image > ul a, .entete-image-v > ul a {width:auto;}
    /* Commented Backslash Hack hides rule from IE5-Mac \*/
    .entete-image a , .entete-image-v a{float:none;}
    /* End IE5-Mac hack */
    .entete-image a:hover, .entete-image-v a:hover {
      color: rgb(153,51,0) ;
      }

/*  Rubrique apparaissant pour l'onglet en cours de sélection*/	  
 .principale .nav-principale, .n1 .nav-n1,
    .n2 .nav-n2, .n3 .nav-n3,
    .n4 .nav-n4, .n5 .nav-n5,
    .n6 .nav-n6, .n7 .nav-n7,
    .n8 .nav-n8, .n9 .nav-n9,
    .n10 .nav-n10, .n11 .nav-n11,
    .n12 .nav-n12, .n13 .nav-n13,
    .n14 .nav-n14, .n15 .nav-n15,
    .n16 .nav-n16, .n17 .nav-n17,
    .n18 .nav-n18, .n19 .nav-n19
	{
      background-position:0 -150px;
      border-width:0;
      }
    .principale .nav-principale a, .n1 .nav-n1 a,
    .n2 .nav-n2 a, .n3 .nav-n3 a,
    .n4 .nav-n4 a, .n5 .nav-n5 a,
    .n6 .nav-n6 a, .n7 .nav-n7 a,
    .n8 .nav-n8 a, .n9 .nav-n9 a,
    .n10 .nav-n10 a, .n11 .nav-n11 a,
    .n12 .nav-n12 a, .n13 .nav-n13 a,
    .n14 .nav-n14 a, .n15 .nav-n15 a,
    .n16 .nav-n16 a, .n17 .nav-n17 a,
    .n18 .nav-n18 a, .n19 .nav-n19 a
	{
      background-position:100% -150px;
      padding-bottom:5px;
      font-weight:bold;
      color: rgb(102,51,0);
      }

    .entete-image li:hover, .entete-image li:hover a, .entete-image-v li:hover, .entete-image-v li:hover a {
      background-position:0% -150px;
      color: rgb(153,51,0) ;
      }
    .entete-image li:hover a, .entete-image-v li:hover a {
      background-position:100% -150px;
      }

 
 .nav-principale img, .nav-n1 img, .nav-n2 img, .nav-n3 img, .nav-n4 img, .nav-n5 img, .nav-n6 img, 
 .nav-n7 img, .nav-n8 img, .nav-n9 img, .nav-n10 img, .nav-n11 img, .nav-n12 img, .nav-n13 img, 
 .nav-n14 img, .nav-n15 img, .nav-n16 img, .nav-n17 img, .nav-n18 img, .nav-n19 img { 
  border: 2px solid rgb(102, 51, 0);
  cursor: pointer;
  background-color: rgb(217,204,191) ;
}

/* Style apparaissant uniquement pour la connexion à vitesse lente (écriture en italique et fond coloré) */
.imagele-multiple img, .imagele-multiple-v img {
  background-color: rgb(217,204,191) ;
  font-style: italic ; 
}

 .entete-image  img {
   height:56.3px ; /* 338/6*/
   width: 83.3px ; /* 500/6*/
}
.entete-image-v img  {
   height: 83.3px ; /* 500/6*/
   width:56.3px ; /* 338/6*/
}
 
 .entete-image  img, .entete-image-v img  {
   top: -56.3px ;
   padding-bottom: 0px ;
   margin-bottom: -1px ;
   margin-left: -7px;
   margin-right: -7px;
 }

 /* PRECISIONS A APPORTER POUR IE UNIQUEMENT. WARUM ?*/  /* -> voir le fichier couleurs_ie.css */

/* Espaces fines insécables ! 
http://www.developpez.net/forums/d606257/php/langage/regex/gestion-espaces-fines-insecables/ */
.fine { font-size: 30%; }

p.lettrine span .fine {
  font-variant: normal ;
}

/* Style pour les imagettes des cartes google maps */
div.gmaps {
  height: 60px ;
}

.gmaps img {
  float: left ;
  border-width: 2px ;
  margin-right: 5px ;
}

.gmaps img.H {
  height: 60px ;
}

.gmaps img.V {
  width: 60px ;
}

.gmaps p {
  font-size: 8pt ;
  text-indent: 5pt ;
  text-align: left ;
  margin-right: 10px ;
}

#EmplacementDeLaCarte {
  width: 840px; 
  height: 500px; 
  position: relative;
  margin-top: -20px;
}
 

/*   Style utilisé pour afficher les personnes  sur les photos(dans un div appelé clpersonne) */ 

.clpersonne {
  display:none;
  position:absolute;
  width:150px;
  height:150px;
  left:50px;
  top: 0px; 
  z-index: 0 ; 
  border:2px dotted #B39980;
  /*background:transparent;*/
}
.clpersonne span {
  text-align: center; 
  color: #993300 ;
  position: absolute ;
  bottom: -.5cm ;
  width: 300% ;
  left: -100% ;
  font-weight: bold ;
  font-size: xx-small ;
}

/*  infos bulles */
img.info_bulle { 
     border: 2px solid rgb(102, 51, 0);
 }