body {
  background: #fff;
  font: 12px tahoma;
  color: #7d7d7d;
  margin: 0;
  background: url(images-site/fond.jpg) repeat-x;
}

a {
  color: #666;
  font-weight: bolder;
  text-decoration: none;
}

a img {
  border: none;
}

hr {
  height: 0;
  color: #fff;
  background: #fff;
  border: 0;
  border-bottom: 1px dotted #666;
}

/* attributs images */
.imgborder, .vignette img {
  border:1px solid #0c7fff
}

.imgborderg img {
  border:1px solid #7d7d7d
}


#global { /* bloc conteneur global qui contient l'image centrale de l'entête, le menu horizontal navigation, le menu gauche et le contenu central de la page */
  width: 984px;
  margin: 0 auto;
  text-align:center;
}

#sep {
  clear:both;
  width:100%;
  height: 0;
}

#header {
  width: 100%;
  height: 168px;
  background: url(images-site/headerLAM2012.jpg) 50% 0 no-repeat;
}

#contenu, #edito {
  margin:0 0 5px 205px;
  text-align: left;
}

#contenu .center, 
#edito .center {
  text-align: center;
}

/*tout ce qui concerne la navigation*/
#navigation {
  clear:both;
  width: 100%;
  height: 54px;
  background: url(images-site/navigationZ2.gif) 50% 0 no-repeat;
  text-align: center;
}

#navigation ul {
  width: 466px;
  height: 54px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  text-align: center;
}

#navigation li { 
  float:left; /* les onlets étant par défaut en mode bloc et donc passent à la ligne "afficgahe vertical" je leur impose un mode flottant à gauche */
  height:54px; /* hauteur globale de chaque onglet */
  padding-top:5px; /* cadrage du texte par rapport à la hauteur */
  background: url(images-site/bt-navigation.gif) 100% 0 no-repeat; /* définition de l'image de fond des onglets positionnée 100% à droite et à 0 du haut */
}

#navigation li a {
  padding:0 17px; /* espacement de 17px droite et gauche entre le texte et les bords de chaque onglet */
  color:#666; /* couleur du texte "lien non survolé" */
}

#navigation li.contact {
  background: url(images-site/bt-navigation.gif) no-repeat; /* 
  * définition de l'image de fond pour le dernier onglet qui ne doit pas montrer la bordure droite de séparation,
  * pour ce faire j'utilise la même image de fond que précédement mais je ne la contraint pas à démarer à 100% à droite,
  * de ce fait elle démarre à gauche, l'image de fond étant plus large que l'onglet, la bordure droite est cachée ! */
}

#navigation li a:hover {
  padding:0 17px;
  margin: 0;
  color:#0c7ffe; /* couleur du texte en bleu quand le lien est survolé */
}


/*tout ce qui concerne le menu*/

#menu,
#menupub,
#votre-menu,
#photo,
#liens,
#compteur,
#meteo,
#webcam,
#menu .menu-bas {
  width: 195px;
}

#menu {
  float: left;
  background: url(images-site/menu-extensible.jpg) repeat-y;
  text-align:center;
}

#menupub {
  background: url(images-site/menu-extensible.jpg) repeat-y;
  margin-left: 0;
}

#menu .meteo {
  float:left;
}

#votre-menu {
  height: 40px;
  background: url(images-site/menuZ.jpg) no-repeat;
  margin:0;
}

#photo {
  height: 70px;
  background: url(images-site/photo.jpg) no-repeat;
}

.titre {
  font-size: 12px;
  color: #0b7dff;
  font-weight: bold;
  margin-left: 10px;
  font: tahoma;
}

#menu ul {
  width: 135px;
}

#menu li {
  border-bottom: 1px solid #7d7d7d;
  list-style-image: url(images-site/liste.jpg);
  margin: 1px;
}

#menu a {
  color: #7d7d7d;
  text-decoration: none;
}

#liens {
  height: 66px;
  background: url(images-site/liens.jpg) no-repeat;
  margin: 0;
}

#compteur {
  height: 66px;
  background: url(images-site/compteur.jpg) no-repeat;
  margin: 0;
}

.banniere {
  width: 81px;
  margin: auto;
  display: block;
}

#meteo {
  height: 66px;
  background: url(images-site/meteoZ.jpg) no-repeat;
  margin: 0;
}

#webcam {
  height: 66px;
  background: url(images-site/webcam.jpg) no-repeat;
  margin: 0;
}

#menu .menu-bas {
  height: 29px;
  background: url(images-site/menu-bas.jpg) no-repeat;
}

/*footer*/
#footer-extensible {
  height: 45px;
  background: url(images-site/footer-extensible.png) repeat-x;
}

#bas {
  height: 44px;
  background: url(images-site/bas.jpg) repeat-x;
  clear: both;
}

#footer {
  height: 45px;
  width: 984px;
  background: url(images-site/footer.png) 50% 0 no-repeat;
  margin: 0 auto;
  padding-top:5px;
  text-align: center;
}

#ouaz {
  height: 21px;
  width: 135px;
  float: right;
  margin-right: 13px;
  margin-top: 3px;
}

/*index*/
.separateur {
  width: 100%;
  height: 25px;
  background: url(images-site/separateurz.jpg) no-repeat;
}

#plus-infos {
  width: 136px;
  height: 34px;
  background: url(images-site/plus-infos.jpg) no-repeat;
  float: right;
  padding-top: 10px;
  text-align: center;
}

/* infobulles */
a.vj em {display:none}
a.vj:hover {border:0;position:relative;z-index:500;text-decoration:none}
a.vj:hover em {display:block;position:absolute;top:0;left:300px}