/*
**** GENERAL ****************************************/

*{margin:0;padding:0}

html{margin:0;padding:0;font-family:Tahoma;background:#635b4b url(../img/bg.png) repeat-x;}

#body{
	margin: 0;
	padding: 0;
	text-align:center;
	font-family:Tahoma,Arial;
	font-size:11px;
	margin-top:0px;
}

h3{
  color:#ffc600;
}

hr{clear:both;height:0pt;visibility:hidden;}

img{border:0}

.gras{font-weight:bold}

#page_content{
	width:836px;
	margin:auto;
	text-align:center;
	font-size:11px;
}

#cleaner{
	margin:auto;
	clear:both;
	width:836px;
 	height:24px;
 	background:url(../img/separation.png) no-repeat;
}

a.splash{padding:2px 5px;background-color:#a9a08e;color:#bd2713;font-weight:bold;text-decoration:none}
a.splash:hover{padding:4px 8px;background-color:#a9a08e;color:#bd2713;font-weight:bold;text-decoration:underline}

/*
 * HEAD *****/

#header{
 	width:836px;
 	height:469px;
 	background:url(../img/logo.jpg) no-repeat top center;
}
 
#header h1{display:none}

img.headerclic{float:left;margin-top:-469px;margin-left:186px;}

 /*
  * MENU *******/
 
#menu{width:836px;margin:auto;}

#menu p{float:left;margin-top:400px;font-size:12px;color:#a9a08e;font-weight:bold}
 
#menu ul{float:left;margin-top:339px;margin-left:50px;}

#menu li{list-style:none;display:inline;}
 
#menu li a.projet{
 	display: block ; /* On passe les liens en éléments de type block pour leur donner des propriétés de taille */
	float:left;
	margin-right:10px;
	width: 129px ;
	height:130px;
	background: url(../img/projet.jpg) no-repeat 0 -130px ; /* On met une image de background, que l'on positionne à 0px du bord gauche et 0px du bord haut */
 }
 
#menu li a.projet:hover{
 	background: url(../img/projet.jpg) no-repeat 0 0 ; /* Et ici on décale l'image du background de 30px vers le haut pour laisser apparaître la 2eme partie de l'image */
 }
 
 #menu li a.actions{
 	display: block ; /* On passe les liens en éléments de type block pour leur donner des propriétés de taille */
	float:left;
	margin-right:10px;
	width: 116px ;
	height:130px;
	background: url(../img/actions.jpg) no-repeat 0 -130px ; /* On met une image de background, que l'on positionne à 0px du bord gauche et 0px du bord haut */
 }
 
 #menu li a.actions:hover{
 	background: url(../img/actions.jpg) no-repeat 0 0 ; /* Et ici on décale l'image du background de 30px vers le haut pour laisser apparaître la 2eme partie de l'image */
 }
 
 #menu li a.burkina{
 	display: block ; /* On passe les liens en éléments de type block pour leur donner des propriétés de taille */
	float:left;
	margin-right:10px;
	width: 147px ;
	height:130px;
	background: url(../img/burkina.jpg) no-repeat 0 -130px ; /* On met une image de background, que l'on positionne à 0px du bord gauche et 0px du bord haut */
}
 
#menu li a.burkina:hover{
 	background: url(../img/burkina.jpg) no-repeat 0 0 ; /* Et ici on décale l'image du background de 30px vers le haut pour laisser apparaître la 2eme partie de l'image */
}

#menu li a.galerie{
 	display: block ; /* On passe les liens en éléments de type block pour leur donner des propriétés de taille */
	float:left;
	margin-right:10px;
	width: 140px ;
	height:130px;
	background: url(../img/galerie.jpg) no-repeat 0 -130px ; /* On met une image de background, que l'on positionne à 0px du bord gauche et 0px du bord haut */
}
 
#menu li a.galerie:hover{
 	background: url(../img/galerie.jpg) no-repeat 0 0 ; /* Et ici on décale l'image du background de 30px vers le haut pour laisser apparaître la 2eme partie de l'image */
}
 
 
#menu li a.partenaires{
 	display: block ; /* On passe les liens en éléments de type block pour leur donner des propriétés de taille */
	float:left;
	margin-right:10px;
	width: 133px ;
	height:130px;
	background: url(../img/partenaires.jpg) no-repeat 0 -130px ; /* On met une image de background, que l'on positionne à 0px du bord gauche et 0px du bord haut */
}
 
#menu li a.partenaires:hover{
 	background: url(../img/partenaires.jpg) no-repeat 0 0 ; /* Et ici on décale l'image du background de 30px vers le haut pour laisser apparaître la 2eme partie de l'image */
}
 
/*
 * CONTENU ****************************/
 
.colonne{
 	float:left;
	padding:7px;
	width:31%;
	font-size:11px;
	color:#9e998f;
	text-align:justify;
 }
 
 .colonne p{margin-bottom:10px;} 
 .colonne h2{padding-left:10px;margin:10px 0;color:#ffc600;font-family:"trebuchet ms";background-color:#887e6b;width:250px;font-weight:normal;} 
 .colonne img{margin-bottom:5px} 
 .colonne ul{color:#bdb4a5}
 .colonne li{margin-bottom:10px;list-style:none;} 
 .colonne .highlight{color:#b7941c;}
 
.colonne a{color:#a9a08e;font-weight:bold;text-decoration:underline}
.colonne a:hover{color:#ffc600;font-weight:bold;text-decoration:none}

 
 /*
 * FOOTER ****************************/
 
 #footer{
 	text-align:center;
 	margin-top:50px;
	padding-top:20px;
 	width:836px;
 	height:65px;
	font-size:10px;
 	background:url(../img/footer.jpg) no-repeat top center;
 }
 

 #footer ul li{list-style:none;display:inline;text-transform:uppercase;padding:0 2px}
 #footer a{color:#635b4b;font-weight:bold;text-decoration:none}
 #footer a:hover{color:#ffc600;font-weight:bold;text-decoration:underline}
 #footer p{color:#908774}
 

  /*
 * PROJET ****************************/

#menu li.active a.projet{
 	display: block ; /* On passe les liens en éléments de type block pour leur donner des propriétés de taille */
	float:left;
	margin-right:10px;
	width: 129px ;
	height:130px;
	background: url(../img/projet.jpg) no-repeat 0 0 ; /* On met une image de background, que l'on positionne à 0px du bord gauche et 0px du bord haut */
 }
 
#menu li.active a.projet:hover{
 	background: url(../img/projet.jpg) no-repeat 0 0 ; /* Et ici on décale l'image du background de 30px vers le haut pour laisser apparaître la 2eme partie de l'image */
 }
 
 
 
.colonneLarge{
	float:left;
	padding:7px;
	width:62%;
	font-size:11px;
	color:#9e998f;
	text-align:justify;
}

 .colonneLarge p{margin-bottom:10px;} 
 .colonneLarge h2{padding-left:10px;margin:10px 0;color:#ffc600;font-family:"trebuchet ms";background-color:#887e6b;width:510px;font-weight:normal;} 
 .colonneLarge img{margin-bottom:5px} 
 .colonneLarge ul{color:#bdb4a5}
 .colonneLarge li{margin-bottom:10px;list-style:none;} 
 .colonneLarge li.retrait{margin-bottom:10px;list-style:none;margin-left:40px;list-style:lower-roman} 
 .colonneLarge .highlight{color:#bdb4a5;}
 
.colonneLarge a{color:#a9a08e;font-weight:bold;text-decoration:underline}
.colonneLarge a:hover{color:#ffc600;font-weight:bold;text-decoration:none}

/*
 * ACTIONS *******************/

 #menu li.active a.actions{
 	display: block ; /* On passe les liens en éléments de type block pour leur donner des propriétés de taille */
	float:left;
	margin-right:10px;
	width: 116px ;
	height:130px;
	background: url(../img/actions.jpg) no-repeat 0 0 ; /* On met une image de background, que l'on positionne à 0px du bord gauche et 0px du bord haut */
 }
 
 #menu li.active a.actions:hover{
 	background: url(../img/actions.jpg) no-repeat 0 0 ; /* Et ici on décale l'image du background de 30px vers le haut pour laisser apparaître la 2eme partie de l'image */
 }
 
 
 .colonne50{
	float:left;
	padding:7px;
	width:48%;
	font-size:11px;
	color:#9e998f;
	text-align:justify;
}

 .colonne50 p{margin-bottom:10px;} 
 .colonne50 h2{padding-left:10px;margin:10px 0;color:#ffc600;font-family:"trebuchet ms";background-color:#887e6b;width:392px;font-weight:normal;} 
 .colonne50 img{margin-bottom:5px} 
 .colonne50 ul{color:#bdb4a5}
 .colonne50 li{margin-bottom:10px;list-style:none;} 
 .colonne50 li .highlight{font-weight:bold;} 
 .colonne50 li .italique{font-style:italic;} 
 .colonne50 li.retrait{margin-bottom:10px;list-style:none;margin-left:20px;list-style:lower-roman}
 .colonne50 li.retrait2{margin-bottom:10px;list-style:none;margin-left:20px;margin-right:5px;list-style:lower-roman} 
 .colonne50 .highlight{color:#bdb4a5;}
 
.colonne50 a{color:#a9a08e;font-weight:bold;text-decoration:underline}
.colonne50 a:hover{color:#ffc600;font-weight:bold;text-decoration:none}

.colonne50 table{background-color:#a9a08e;color:#635b4b;border:none;padding:5px;}
.colonne50 table td{padding:2px 5px;border-bottom:1px solid #635b4b}
.colonne50 table th{background-color:#635b4b;color:#a9a08e;padding:5px;}
.colonne50 table td li{color:#635b4b}
.colonne50 table td ul{padding-top:5px;}
 
/*
 * BURKINA *******************/
 
 #menu li.active a.burkina{
 	display: block ; /* On passe les liens en éléments de type block pour leur donner des propriétés de taille */
	float:left;
	margin-right:10px;
	width: 147px ;
	height:130px;
	background: url(../img/burkina.jpg) no-repeat 0 0 ; /* On met une image de background, que l'on positionne à 0px du bord gauche et 0px du bord haut */
}
 
#menu li.active a.burkina:hover{
 	background: url(../img/burkina.jpg) no-repeat 0 0 ; /* Et ici on décale l'image du background de 30px vers le haut pour laisser apparaître la 2eme partie de l'image */
}
 

/*
 * PARTENAIRES *******************/
 
#menu li.active a.partenaires{
 	display: block ; /* On passe les liens en éléments de type block pour leur donner des propriétés de taille */
	float:left;
	margin-right:10px;
	width: 133px ;
	height:130px;
	background: url(../img/partenaires.jpg) no-repeat 0 0 ; /* On met une image de background, que l'on positionne à 0px du bord gauche et 0px du bord haut */
}
 
#menu li.active a.partenaires:hover{
 	background: url(../img/partenaires.jpg) no-repeat 0 0 ; /* Et ici on décale l'image du background de 30px vers le haut pour laisser apparaître la 2eme partie de l'image */
}

.colonne50 ul.center{
	text-align:center;
	color:#bdb4a5;
	margin-top:20px;
	padding-top:30px;
	padding-bottom:15px;
	background:#fff url(../img/top_partenaires.jpg) top center no-repeat;	
}


#menu li.active a.galerie{
 	display: block ; /* On passe les liens en éléments de type block pour leur donner des propriétés de taille */
	float:left;
	margin-right:10px;
	width: 140px ;
	height:130px;
	background: url(../img/galerie.jpg) no-repeat 0 0 ; /* On met une image de background, que l'on positionne à 0px du bord gauche et 0px du bord haut */
}
 
#menu li.active a.galerie:hover{
 	background: url(../img/galerie.jpg) no-repeat 0 0 ; /* Et ici on décale l'image du background de 30px vers le haut pour laisser apparaître la 2eme partie de l'image */
}