/* CSS Document */

/*html, body {	height: 100%; }*/
  
body, tbody {
 	font-family: Verdana, Arial, Helvetica, sans-serif;
 	font-size: 0.8em;
 	margin: 0; 	padding: 0;
 	background-color: rgb(159,159,159);
 	
}
#header { 
  height: 100px; 
}

#conteneur {	
  position: relative;  	
  min-height: 100%;
 	width: 750px;  
  left: 50%; 
  margin-left: -375px;
  background-color:rgb(131,131,131);
}

#haut { 
  height: 30px; 
  background-color: #454545;
}

#centre { 
  margin : 10px 120px 0px 150px;
  padding : 5px 5px 5px 5px;
  background-color : white;
  text-align : justify;
  font-family : arial;
  color : rgb(51,51,51);
}

#centre h1 { font-size: 16px; text-align: center; }

#centre h2 { font-size:14px; }
 
#centre_form { 
  margin : 10px 0px 5px 150px;
  padding: 5px 5px 5px 5px;
  background-color: white;
  text-align: justify;
  font-family: arial;
}

#centre_form h1 { font-size: 16px; text-align: center; }

#centre_form h2 { font-size:14px; }

#gauche { 
  position: absolute; 
  left:10px; 
  width: 130px; 
}

#droite { 
  position: absolute; 
  right: 10px; 
  width: 100px;  
  margin-top : 10px; 
  background-color: white;
}

#footer { 	
	height: 20px;	
  text-align: center; 
 	/*background-color: #99CC99; 	*/
  border-top: 1px solid white;
}

#footer a { text-decoration: none; }

#footer a:hover { text-decoration: underline; }

#espace_vide_100 { height: 100px; }

#espace_vide_200 { height: 200px; }

#espace_vide_300 { height: 300px; }

 /**** MENU HAUT ****/

.menuhaut {  
  margin : 0;  
  margin-left : 150px; 
  padding: 0; 
  list-style-type: none; 
}

.menuhaut li { display: inline;  }

.menuhaut a {	
  display:inline;
  text-decoration: none; 
  margin : 5px 0;
 	color: #fff; 
  background: url(images/image_menu_haut_horiz.jpg);
  width: 90px; 	
  padding: 0.5em 0.2em 0.5em 0.2em;
 	text-align: center; 
  font-weight:bold;
}

.menuhaut a:hover { 
  background: url(images/image_menu_haut_survol_horiz.jpg);
}

 /*** affichage d'un texte explicatif, caché autrement ***/
.menuhaut a span { display : none ;}

.menuhaut a:hover span { 
  display: block; 
  position : absolute;
 	top: 70px; 
  left: 10; 
  width: 130px; 
  height : 30px;
 	z-index: 100; 
  color: rgb(51,0,51);
 	font: 10px Verdana, sans-serif; 
  text-align: center;
}

/**** MENU GAUCHE ****/

.menugauche { 
  margin: 0; 
  padding-top: 10px; 
  list-style-type: none; 
  text-align: center;
}

.menugauche li { 
  margin-bottom: 10px; 
  font-weight:bold;
}

.menugauche a { 
  display:block;
  padding-top: 5px; 
  color: #FFF;
  width: 120px;  
  height: 25px; 
  text-decoration: none;
 	background: url(images/image_menu_gauche.jpg); 
}

.menugauche a:hover { 
  color: #FFF; 
  background: url(images/image_menu_gauche_survol.jpg);
}

.menugauche a span { display : none; }

.menugauche a:hover span { 
  display: block;
 	position: absolute; 
  top: 400px; 
  left: 10px; 
  width: 130px; 
  height : 30px;
 	z-index: 100; 
  color: rgb(51,0,51);
 	font: 12px Verdana, sans-serif; 
  text-align: center;
}

 /**** MENU DROIT ****/

.menudroit { 
  margin-left : 0px;
  padding: 5px 2px 0px 2px; }

.menudroit li { 
  margin-bottom: 20px; 
  font-weight:bold; 
  list-style-type: none; 
}

.menudroit a {	
  color:  #336699; 
  text-decoration: underline; 
}

.menudroit a:hover { 
  color: #660000 ; 
  text-decoration: none ;
}

 /**** MENU CENTRAL ****/

 /* positionnement du menu central*/

#menucentre ul{
 /* La balise est déclaré en position "relative" afin que les futurs balises A
  * utilisent la balise UL comme point de repère de leurs propres coordonnés absolues
 	* NOTE : la position "relative" est preférée a la position "absolute" afin
  * de conserver le menu dans le flux HTML  */
 	position:relative;
 	list-style:none;   
  border-width:1px solid gray;
 	width:480px; 
  height:250px; 
  padding: 0px ; 
  margin-left: 150px;
 	background: url(images/cartefrancophonie.jpg) no-repeat;
 }

#menucentre a{
 /* La balise est déclarée en position "absolute" afin de pouvoir positionner nos elements
 * de menu au pixel près à l'interieur de la balise UL.  */
 	position:absolute;
 /* En temps normal, la balise A est une balise "inline". Nous la transformons en balise "block"  */
 	display:block;
 /* Définition de la taille des boutons du menu flottant */
 	width:100px; 
  height:40px; 
  text-decoration:underline;
 	font:  9px Verdana,Arial,Helvetica,sans-serif; 
  text-align: center; 
  color:#000000;
 }

 /* Thème du menu central passe en gras lors du survol de la souris */

#menucentre a:hover { font: bold;  }

 /* Définition de la couleur différente selon le type de thème  */

#menucentre a.fondement { color: #FF6600; }
 
#menucentre a.mur { color: #993300; }
  
#menucentre a.toit { color: #3300CC; }
 
 /* Positionnement des différents thèmes dans le menu central */

#menucentre1 { top:200px; left:16px; }
#menucentre1:hover {  }

#menucentre2 { top:225px; left:182px; height: 20px; }
#menucentre2:hover { }

#menucentre3 { top:210px; left:310px; height: 30px;}
#menucentre3:hover {  }

#menucentre4 { top:160px; left:160px; }
#menucentre4:hover { }

#menucentre5{ top:155px; left:284px; }
#menucentre5:hover { }

#menucentre6{ top:115px; left:2px; }
#menucentre6:hover { }
 
#menucentre7 { top:95px; left:390px; }
#menucentre7:hover { }
 
#menucentre8 { top:75px; left:120px; height: 30px;}
#menucentre8:hover {  }
 
#menucentre9 { top:30px; left:340px; height: 30px; }
#menucentre9:hover { }
 
#menucentre10 { top:2px; left:1px; height: 20px; }
#menucentre10:hover { }

/********* FORMULAIRE D'INSCRIPTION ************/

.inscription {
 font-size : 8px;
}