@charset "utf-8";
/* CSS Document */

body 
{
   width: 100%;
   margin: auto; /* Pour centrer notre page */
   margin-top: 15px; /* Pour éviter de coller avec le haut de la fenêtre du navigateur. Essayez d'enlever pour voir ! */
   margin-bottom: 15px;    /* Idem pour le bas du navigateur */
   background-image: url("images/back.jpg");
   background-repeat: repeat; /* Une petite image de fond pour éviter d'avoir un vieux fond blanc :p */
   max-width: 2000px;
   min-width: 600px;

   
}

#en_tete
{
   width: 50%;
   height: 445px;
   background-image: url("images/headbanner.png");
   background-repeat: no-repeat;
   margin-bottom: 3%;
   margin-left: 30%;
 
  
}
/* Le menu horizontal */

#menu_horizontal 
{
   list-style:none;
   border-bottom: #ffc602 solid 5px;
   background-color:#212f5c;
   margin-left: 10%; 
   height: 40px;
   width:80%;
 
}
#menu_horizontal li 
{
   float: left;
   margin-left: 25px;
   list-style:none;
   
}

#menu_horizontal ul
{
margin-left: 25%;
margin-top: -22px;
}


#menu_horizontal li a 
{
  display:block;
  color: #fff;
  font-size: 1em;
  font-weight: bold;
  text-decoration: none;
  font-family: arial, verdana, sans-serif;
  text-align: center;
  margin-top: 11px;
  padding:6px 10px 6px 10px;
  border-right: 10px solid # 4c4c4c;
  border-left: 10px solid # 4c4c4c;
  cursor: pointer; 
}
#menu_horizontal li a:hover
{
  background-color:#FFC602;
}
#menu_horizontal li.current a
{
   background-color: #ffc602;
   color: black;
 }
 

/*menu gauche*/

#menu_gauche
{
   float: left; /* Le menu flottera à gauche */
   width: 206px; /* Très important : donner une taille au menu */
   margin-left: 1%;
   
}

.element_menu_gauche
{
   background-color: #FFC702;
   background-image: url("images/verticaig.jpg");
   background-repeat: repeat-y;
   border: 2px solid black;
   margin-bottom: 90px; /* Pour éviter que les éléments du menu ne soient trop collés */
   
   
}


/* Quelques effets sur le menu gauche */


.element_menu_gauche h3 /* Tous les titres de menus */
{    
   color: #000;
   font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
   text-align: left;
   margin:auto;
}
.element_menu_gauche h2
{
margin:auto;
text-align:left;
}

.element_menu_gauche li /* Toutes les listes à puces se trouvant dans un menu */
{
   list-style-image: url("images/puce.jpg"); /* On change l'apparence des puces */
   padding: 0px; /* Tous les côtés ont une marge intérieure de 0 pixels */
   padding-left: 0px; /* ... mais on modifie ensuite la marge de gauche, donc celle-là fera finalement 20 pixels */
   margin: 0px; /* Idem pour margin, ça nous évite d'avoir à en écrire 4 (margin-left, margin-right...) */
   margin-bottom: 3px; /* Même chose que tout à l'heure, on modifie ensuite juste margin-bottom, mais tous les autres sont à 0px */
   margin-left: -9%;
   text-decoration:none;
   
}


.element_menu_gauche a /* Tous les liens se trouvant dans un menu */
{
   color: #000;
   text-decoration:none;
   
}

.element_menu_gauche a:hover /* Quand on pointe sur un lien du menu */
{
  
   color: black;
   font-weight: bolder;
   text-decoration:none;
   
   
}
/*menu droite*/

#menu_droite
{
   float: right; /* Le menu flottera à gauche */
   width: 206px; /* Très important : donner une taille au menu */
   margin-right: 1%;
   
   
}



.element_menu_droite
{
   background-color: #FFC702;
   background-image: url("images/verticaig.jpg");
   background-repeat: repeat-y;
   margin-bottom: 90px; /* Pour éviter que les éléments du menu ne soient trop collés */
   border: 2px solid black;
   
   
}

/* Quelques effets sur le menu droite */


.element_menu_droite h3 /* Tous les titres de menus */
{    
   color: #000;
   font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
   text-align: center;
   margin:auto;
}

.element_menu_droite h2
{
margin:auto;
}

.element_menu_droite li /* Toutes les listes à puces se trouvant dans un menu */
{
   list-style-image: url("images/puce.jpg"); /* On change l'apparence des puces */
   padding: 0px; /* Tous les côtés ont une marge intérieure de 0 pixels */
   padding-left: 0px; /* ... mais on modifie ensuite la marge de gauche, donc celle-là fera finalement 20 pixels */
   margin: 0px; /* Idem pour margin, ça nous évite d'avoir à en écrire 4 (margin-left, margin-right...) */
   margin-bottom: 3px; /* Même chose que tout à l'heure, on modifie ensuite juste margin-bottom, mais tous les autres sont à 0px */
   margin-left: -9%;
    
  
   
    
}

.element_menu_droite a /* Tous les liens se trouvant dans un menu */
{
   color: #000;
   text-decoration:none;
}

.element_menu_droite a:hover /* Quand on pointe sur un lien du menu */
{
   font-weight: bolder;
   color: black;
   text-decoration:none;
}



/* Le corps de la page */

#corps
{
   margin:10%; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
   margin-bottom: 0px; /* Ca c'est pour éviter que le corps colle trop au pied de page en-dessous */
   padding-left: 100px; /* Pour éviter que le texte à l'intérieur du corps ne colle trop à la bordure */
   padding-right: 100px;
   padding-top:3%;
   padding-bottom:3%;
   color: #000000;
   background-color: #FFFFFF; /* Une couleur de fond pour le corps */
   background-image: url("images/motif.png");
   background-repeat: repeat-x; /* Une petite image de fond qui se répètera horizontalement en haut */
   border: 2px solid black; /* Une bordure pour bien marquer les limites du corps et pour faire joli */
   margin-top: 0%; 
   min-height: 1400px;
   
}
#corps h1 /* Tous les titres h1 du corps */
{
   color: #000000;
   text-align: center;
   font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
}

#corps h2 /* Tous les titres h2 du corps */
{
   height: 30px;
   background-image: url("images/titre.png"); /* Une petite image de fond sur les titres h2 */
   background-repeat: no-repeat; /* L'image ne se répètera pas, elle sera à gauche du titre */
   padding-left: 30px;
   color: #000000;
   text-align: left;
}
#corps a:visited
{
   color: black;
}
#corps a:hover
{
   color: black;
   font-weight: bolder;
   text-decoration:none;
}

/* Le pied de page (qui se trouve tout en bas, en général pour les copyrights) */

#pied_de_page
{
   margin: 5px;
   padding: 5px;
   height: 90px;
   text-align: center;
   color: #000000;
   background-color: #FFFFFF;
   background-image: url("images/footpage.jpg");
   background-repeat: repeat-x;
   border: 1px solid black;
   width: 90%;
   margin-left: 5%;
} 

.roundedcornr_top_190972 div {
   background: url("images/hautgauche.png") no-repeat top left;
}
.roundedcornr_top_190972 {
   background: url("images/hautdroit.png") no-repeat top right;
}


.roundedcornr_top_190972 div, .roundedcornr_top_190972 
{
   width: 100%;
   height: 20px;
   font-size: 1px;
}

#menuimg
{
width:155px;
height:54px;
margin-left: -24%;
}
#menuimgs
{
width:200px;
height:43px;
margin-left: -24%;
}
#histo_bleach
{
margin-top: 20px;
}