ul, ol, dl {
   position: relative;  }
            


.body {
  background: white; /* Technique des colonnes factices : le menu de gauche a un fond sur toute la hauteur de la page */
  border: 1px solid black; /* Encadrer toute la page par une bordure noire de 1 pixel */
}

.entete {
	color: white;
	background: url(images/LOGO.PNG) -10px center no-repeat;
   margin: 0 56px; 
   text-align: right;
   line-height: 80px;
}

 
.menu {
  float: left; /* Colonne de gauche sur la page */
  width: 140px; /* Largeur de l'image sous-menu-lien.png */
  list-style-type: none; /* On ne veut plus que les lignes de la liste aient de puces */
  margin: 0; /* Aucune marge au dessus et en dessous de la liste (les listes étant normalement utilisées entre des paragraphes) */
  padding: 0; /* Aucune indentation des éléments contenus dans la liste (généralement, les listes ont un padding à gauche) */
}

ul {
	list-style-type: none;
}

.contenu {
	font: 10px arial;
   margin: 10px 10px 10px 209px;
   padding: 0 0;

} 
   
.images {	
  font-size: 10px;
  float: left;
  width: 400px;
  margin: 0 60px; /* 209px = 198px (largeur du menu) + 1 (bordure droite du menu) + 10 (la marge que l'on veut donner au contenu) */
}

.textes {
	position: relative;
	width: 400px;
	margin: 0 80px 0 480px;
	text-align: justify;
}

a {
	color: gray;
	text-decoration: none;
	font-weight: bold
}

.menu a {
  font: 12px helvetica;
  text-align: left;
  display: block; /* Afin de pouvoir assigner une hauteur au lien (voir la règle "#menu span") */
  height: 20px; /* Hauteur de l'image sous-menu-lien.png, divisé par 2 (car elle représente deux états : normal et survolé) */
  line-height: 20px; /* Centrer le texte verticalement sur la ligne */
  text-decoration: none; /* Pas de soulignement des liens dans le sous-menu, ils sont déjà identifiables en tant que liens par le visiteur */
  color: black; /* Le texte est orange */
  margin: 12px 0; /* Espacer verticalement chaque bouton à l'intérieur du sous-menu */
  padding: 0 18px;
}

.menu a:hover, /* Au survol de la souris */
.menu a:focus, /* Lorsque le lien a le focus, sous Firefox et autres navigateurs */
.menu a:active /* Lorsque le lien a le focus, sous Internet Explorer */
{
  background: url(images/FLECHE.png) 0 -2px no-repeat;
}

.menu .actuel {  /* Indique au visiteur que ce lien est en fait la page actuellement affichée */
  font-weight: bold;
}
.pied { 
  text-align: center;
  clear: both;
  font-size: 12px; /* Un peut moins que les 19 pixels de line-height */
  padding-top: 30px; /* = 8 (la hauteur de la partie hachurée noir / orange) + 1 (bordure noire) */
  padding bottom: 0;
  height: 12px; /* = 47 (hauteur de pied.png) - 9 (le padding-top que l'on vient de définir ci-dessus) */
  line-height: 12px; /* = 38 (hauteur définie ci-dessus) / 2 (on veut deux lignes de texte dans le pied de page) */
  color: #444444; /* Texte gris foncé, se fondant avec le fond gris clair : moins lisible, car ce paragraphe est moins important */
}


.logo {
	text-align: center;
	margin: 300px 0 0 410px;
}


.logo img {
    border: 0;
    text-decoration: none;
}


.souslogo {
	text-align: center;
	font-family: helvetica;
}

.news {
	margin: 40px 56px;
}

.mosaique table{
    border: none;
    margin: 0 0 50px 60px;
   }
   
.mosaique table img {
	 border: 0;
    text-decoration: none;
}

.textes table img {
	 border: 0;
    text-decoration: none;
}


h1 {
	font-size: 20px;
}	


h2 {
	font-size: 15px;
}	

h3 {
	font-size: 11px;
}	


h4 {
	font-size: 10px;
}