body
{
   margin: 0;
   padding: 0;
   background-image: url("images/fond.gif"); /* Image de fond */
   background-attachment: fixed; /* Image de fond fixe à l'écran */
}

#en_tete /* L'en-tête */
{
   width: 900px; /* Largeur de l'en-tête */ 
   height: 175px; /* Hauteur de l'en-tête */
   position: relative;
   background-image: url("images/fondessai3.gif"); /* Image de l'en-tête */
   background-repeat:no-repeat;
   background-position:left; /* image de l'en-tête à gauche */
   margin-bottom: 10px;
   border-bottom: 2px solid red;
}
#conteneur 
{
	position: relative;
	width: 900px;
	margin: 0 auto;
}
#menugauche
{
	position:absolute;
	left:0;
	width:170px;
}
#menudroite
{
	position:absolute;
	right:0;
	width:150px;
}
	
#menugauche img /* Pour toutes les images des menugauche */
{
 border:none; /* pas de bordure pour les images */
}
#menugauche h3 /* Pour toutes les images des menugauche */
{
	color: #333;
   text-align: center;
   font-family: Georgia, Arial;
}
#menudroite img /* Pour toutes les images des menudroite */
{
 border:none; /* pas de bordure pour les images */
}
 
#liens img /* Pour toutes les images dans le bloc liens */
{ 
border:none; /* pas de bordure pour les images */
}

.element_menu 
{
   background-color:;  /*Couleur de fond */
   border: red 1px solid; /* bordure des menus */
   margin-top: 10px; /* Pour éviter que les éléments du menu ne soient trop collés */  
   margin-bottom: 10px; /* Pour éviter que les éléments du menu ne soient trop collés */
   font-family: Georgia, Arial;
}
	
.ul /* A propos des listes non ordonnées */
{
	list-style-type:circle; /* des disques pour puces de liste */
}

.ol /* A propos des listes ordonnées */
{
	list-style-type:upper-alpha; /* numerotation alphanumérique */
}
	
#corps /* Le corps de la page */
{
   	margin-left: 175px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
   	margin-right: 0px; /* Une marge à droite pour pousser le corps, afin qu'il ne passe plus sous le menu */
   	margin-bottom: 20px; /* Ca c'est pour éviter que le corps colle trop au pied de page en-dessous */
   	margin-top: 20px;
   	padding: 10px; /* Pour éviter que le texte à l'intérieur du corps ne colle trop à la bordure */  
   	color: #333;  
   	border-left: 2px solid red; /* Une bordure rouge à gauche pour faire joli */
   	border-right: 2px solid red; /* Une bordure rouge à droite pour faire joli */
   	font-family: Georgia, Arial;
}

#corps h1 /* Tous les titres h1 du corps */
{
   color: red;
   font-size:40px;
   text-align: center;
   margin-top: 0px;
}

#corps h2 /* Tous les titres h2 du corps */
{
   height: 30px;   
   padding-left: 5px;
   color: #333;
   font-size:17px;
   text-align: center;
}
#corps h3 /* Tous les titres h3 du corps */
{
   color: #333;
   font-size:15px;
   text-decoration: none;
   text-align: left;  
}

#corps h4 /* Tous les titres h4 du corps */
{
   color: #333;
   font-size:15px;
   text-decoration: underline;
   text-align: left;
   padding-left:10px;   
}
#corps p /* Tous les pagraphes du corps */
{
   color: #333;
   font-size:15px;
}

a:hover /* apparence du lien lorsqu'on pointe dessus */
{
	color: red; /* le texte deviens rouge */
	background: none; /* correction d'un bug IE */
	text-decoration: underline;
	background-color: none;
	font-family: Georgia, Arial; 
}
a /* apparence du lien */
{
	color: #333; /* la couleur du lien est gris */
	font-size:15px;
	text-decoration: none;
	font-family: Georgia, Arial;
}
	
 td, th /* Style pour le tableau ET les cellules */
{
	border: solid 1px black;  /*super propriété border trait continu, 1pixel, noir */
	border-collapse: collapse; /* la bordure du tableau et des cellules ne font plus qu'un seul trait */
	background-color:none;  /* pas de couleur de fond */
	font-size:15px;
	text-align:;
	font-family: Georgia, Arial;
	color:#333;
}
td
{
	background-color:none;
}
th
{
	background-color:silver;
}

.case_vide /* pas de fond pour les cases vides des tableaux */
{
	background: none;
	border: none;
}

.logo_l /* class logo pour positionner un logo flottant à gauche */
{
	float: left;
}
.logo_r /* class logo pour positionner un logo flottant à droite */
{
	float: right;
}


/* code pour faire apparaitre une image sur un mot repéré viewpic. utilisé dans france.html pour les photos des élus dans les tableaux */
a.viewpic {
  position:relative;
  border-bottom:1px dashed #808080; 
  text-decoration: none; 
}
a:hover.viewpic {
  text-decoration: none; 
  background: none;
}
a.viewpic span {display: none;}
a:hover.viewpic span {
  display: inline; 
  position: absolute;  
  top: -30px; 
  left: -110px; 
  z-index: 20; 
  width:100%; 
  padding:2px 4px;
}

/* code tooltip1 pour personnaliser l'infobulle de 'le peuple' */
a.tooltip1 em {
    display:none;
}
a.tooltip1:hover {
    border: 0; 
    position: relative; 
    z-index: 500; 
    text-decoration:none;
    font-family: Georgia, Arial;
}
a.tooltip1:hover em {  /* paragraphe concernant l'infobulle au passage de la souris */
    font-style: normal; 
    display: block; 
    position: absolute; 
    top: -100px; /* position de l'infobulle par rapport à l'image */
    left: -200px; /* position de l'infobulle par rapport à l'image */
    padding: 5px; 
    color: white; 
    border: black 1px solid; /* bordure de la zone */ 
    background: #333; 
    width:170px;
}
a.tooltip1:hover em span {
    position: absolute; 
    top: 30px; 
    left: 10px;
    height: 10px; 
    width: 11px; 
    background: transparent url(image-infobulle.gif); 
    margin:0; 
    padding: 0; 
    border: 0;
}
/* code tooltip2 pour personnaliser l'infobulle de 'Amiante' */
a.tooltip2 em {
    display:none;
}
a.tooltip2:hover {
    border: 0; 
    position: relative; 
    z-index: 500; 
    text-decoration:none;
    font-family: Georgia, Arial;
}
a.tooltip2:hover em {  /* paragraphe concernant l'infobulle au passage de la souris */
    font-style: normal; 
    display: block; 
    position: absolute; 
    top: -220px; /* position de l'infobulle par rapport à l'image */
    left: 350px; /* position de l'infobulle par rapport à l'image */
    padding: 5px; 
	color: white; 
    border: black 1px solid; /* bordure de la zone */ 
    background: #333;  
    width:150px;
}
a.tooltip2:hover em span {
    position: absolute; 
    top: 30px; 
    left: 10px;
    height: 10px; 
    width: 11px; 
    background: transparent url(image-infobulle.gif); 
    margin:0; 
    padding: 0; 
    border: 0;
}
/* code tooltip3 pour personnaliser l'infobulle de 'un homme est mort' */
a.tooltip3 em {
    display:none;
}
a.tooltip3:hover {
    border: 0; 
    position: relative; 
    z-index: 500; 
    text-decoration:none;
    font-family: Georgia, Arial;
}
a.tooltip3:hover em {  /* paragraphe concernant l'infobulle au passage de la souris */
    font-style: normal; 
    display: block; 
    position: absolute; 
    top: -380px; /* position de l'infobulle par rapport à l'image */
    left: 165px; /* position de l'infobulle par rapport à l'image */
    padding: 5px; 
	color: white; 
    border: black 1px solid; /* bordure de la zone */ 
    background: #333;  
    width:170px;
}
a.tooltip3:hover em span {
    position: absolute; 
    top: 30px; 
    left: 10px;
    height: 10px; 
    width: 11px; 
    background: transparent url(image-infobulle.gif); 
    margin:0; 
    padding: 0; 
    border: 0;
}
/* code tooltip4 pour personnaliser et positionner infobulle Compagnie jolie mome */
a.tooltip4 em {
    display:none;
}
a.tooltip4:hover {
    border: 0; 
    position: relative; 
    z-index: 500; 
    text-decoration:none;
    font-family: Georgia, Arial;
}
a.tooltip4:hover em {  /* paragraphe concernant l'infobulle au passage de la souris */
    font-style: normal; 
    display: block; 
    position: absolute; 
    top: 20px; /* position de l'infobulle par rapport à l'image */
    left: 0px; /* position de l'infobulle par rapport à l'image */
    padding: 5px; 
	color: white; 
    border: black 1px solid; /* bordure de la zone */ 
    background: #333;  
    width:170px;
}
a.tooltip4:hover em span {
    position: absolute; 
    top: 30px; 
    left: 10px;
    height: 10px; 
    width: 11px; 
    background: transparent url(image-infobulle.gif); 
    margin:0; 
    padding: 0; 
    border: 0;
}
/* code tooltip5 pour personnaliser l'infobulle de 'NVO' */
a.tooltip5 em {
    display:none;
}
a.tooltip5:hover {
    border: 0; 
    position: relative; 
    z-index: 500; 
    text-decoration:none;
    font-family: Georgia, Arial;
}
a.tooltip5:hover em {  /* paragraphe concernant l'infobulle au passage de la souris */
    font-style: normal; 
    display: block; 
    position: absolute; 
    top: -50px; /* position de l'infobulle par rapport à l'image */
    left: -190px; /* position de l'infobulle par rapport à l'image */
    padding: 5px; 
	color: white; 
    border: black 1px solid; /* bordure de la zone */ 
    background: #333;  
    width:150px;
}
a.tooltip5:hover em span {
    position: absolute; 
    top: 30px; 
    left: 10px;
    height: 10px; 
    width: 11px; 
    background: transparent url(image-infobulle.gif); 
    margin:0; 
    padding: 0; 
    border: 0;
}

#carte_de_france /* div pour positionner la carte de france.html */
{
	padding-left: 130px;
}
.logo_r /* class logo pour positionner un logo flottant à droite */
{
	float: right;
}

/* Le pied de page (qui se trouve tout en bas, en général pour les copyrights) */
#pied_de_page
{
   padding-top: 5px;
   padding-bottom: 5px;	
   width:900px; /* Largeur du pied de page idem en-tête */  
   border-top: 2px solid red;
	color: #333;
	font-size:10px;
	font-family: Georgia, Arial;
}

#pied_de_page a /* pour les liens dans le pied de page */
{
	color: #333;
	font-size:10px;
	font-family: Georgia, Arial;
}

#pied_de_page table /* pour les liens dans le pied de page */
{
	border:none;
}
#pied_de_page td /* pour les td dans le pied de page */
{
	text-aliign:left;
	font-size:10px;
}
/*********************************************/