/* container général */
div#container{
    position: absolute;
    left: 50%;
    margin-left: -500px;
    width: 1000px;
}
/* container de l'entete */
div#container_entete{
    width: 100%;
}
/* container du reste */
div#container_corps{
    border: solid black 0px;
    padding-top: 0px;
}
/* container du menu*/
div#container_corps #container_menu{
    display: inline;
    float: left;
    /* décalage de 5px pour IE voir cssIE*/
}
/* debut de la liste déroulante MENU */
        /* traitement de UL */
        div#container_corps #container_menu #menu{
            width: 250px;
            height: 280px;
            padding: 0px;
            margin: 0px;
            /*background-image: url(../media/algue_menu_promo.jpg);*/
            background-repeat: no-repeat;
            background-position: -200px -2px;  /* conforme avec les -2px des zone survolées*/
            border: solid red 0px;
        }
        /* généralités de <LI> et des <A> */
        
        div#container_corps #container_menu #menu li,
        div#container_corps #container_menu #menu a{
           height: 30px;
           display: block;
           text-decoration: none;
        }
        div#container_corps #container_menu #menu a{
            border: solid 0px orange;
        }
        div#container_corps #container_menu #menu #opt1 a{left: 250px; width: 200px;}
        div#container_corps #container_menu #menu #opt1 a:hover{background: transparent url(../media/algue_menu_promo.jpg) -0px -2px ;}
           
        div#container_corps #container_menu #menu #opt2 a{left: 250px; width: 200px;}
        div#container_corps #container_menu #menu #opt2 a:hover{background: transparent url(../media/algue_menu_promo.jpg) -0px -33px ;} 

        div#container_corps #container_menu #menu #opt3 a{left: 250px; width: 200px;}
        div#container_corps #container_menu #menu #opt3 a:hover{background: transparent url(../media/algue_menu_promo.jpg) -0px -63px ;} 

        div#container_corps #container_menu #menu #opt4 a{left: 250px; width: 200px;}
        div#container_corps #container_menu #menu #opt4 a:hover{background: transparent url(../media/algue_menu_promo.jpg) -0px -93px ;} 

        div#container_corps #container_menu #menu #opt5 a{left: 250px; width: 200px;}
        div#container_corps #container_menu #menu #opt5 a:hover{background: transparent url(../media/algue_menu_promo.jpg) -0px -123px ;} 

        div#container_corps #container_menu #menu #opt6 a{left: 250px; width: 200px;}
        div#container_corps #container_menu #menu #opt6 a:hover{background: transparent url(../media/algue_menu_promo.jpg) -0px -153px ;} 

        div#container_corps #container_menu #menu #opt7 a{left: 250px; width: 200px;}
        div#container_corps #container_menu #menu #opt7 a:hover{background: transparent url(../media/algue_menu_promo.jpg) -0px -183px ;} 

        div#container_corps #container_menu #menu #opt8 a{left: 250px; width: 200px;}
        div#container_corps #container_menu #menu #opt8 a:hover{background: transparent url(../media/algue_menu_promo.jpg) -0px -213px ;} 

        div#container_corps #container_menu #menu #opt9 a{left: 250px; width: 200px;}
        div#container_corps #container_menu #menu #opt9 a:hover{background: transparent url(../media/algue_menu_promo.jpg) -0px -243px ;} 
        /* remplace l'option promo quand il n'y en a pas*/
        /*div #container_corps #container_menu #menu #opt0 a{left: 250px; width: 200px;}*/




div#container_corps #corps{ 
    position: absolute;
    left: 200px;
    top:300px;
    height: 245px;
    width: 720px;
    float: left;
    z-index: -1;
    border: aqua solid 0px;
}
 div#container_corps #contenu{
     position:absolute;
     left: 200px;
     top:320px;
     height: 245px;
     width: 720px;
     border: solid red 0px;
     z-index: 1;
     margin : 30px 0px 0px 50px;
     overflow:auto;

     
 }
 
/***************************** page promo ******************************/
 div #container_corps #contenu #promo{ /*table */
     width: 100%;
     border: solid aqua 0px;
     color: white;
 } 
 div #container_corps #contenu #promo .titre{ /*titre */
    text-align: center;
    font-size: 1.2em;
    color: blue;
    border-bottom: navy 1px solid;
 }     
 div #container_corps #contenu #promo .article{ /* libellé l'option */
     color: red;
     font-size: 1.1em;
     text-align: left;
     width: 80%;
     border-bottom: navy 0px solid;
 }  
 div #container_corps #contenu #promo .valeur{ /* valeur de l'option */
     color: red;
     font-weight: bold;  
     text-align: left;
     vertical-align: middle;
     border-bottom: navy 0px solid;
 }        
  div #container_corps #contenu #promo .numero{ /* indice */
     color: yellow;
     width: 1%;
     margin: 0px;
     padding: 0px;
     font-weight: bold;  
     text-align:center;
     border: yellow 0px solid;
 }
 
 /***************************** page contact ******************************/
 div #container_corps #contenu #contact{ /*table */
     width: 90%;
     border: solid aqua 0px;
     color: white;
 } 
 div #container_corps #contenu #contact #titre{ /*titre */
    text-align: center;
    font-size: 1.2em;
    color: #FF00FF;
    border: yellow 0px solid;
 }     
 div #container_corps #contenu #contact .photo{ /* libellé l'option */
     color: red;
     width : 25%;
     height: 200px;
     border: navy 0px solid;
     vertical-align: top;
 }
div #container_corps #contenu #contact .photo img{ /* les photos */
    height: 90%;
}   
 div #container_corps #contenu #contact .texte{ /* Le texte */
     font-family: cursive;
     font-size: 0.6em;
     font-style: italic;
     font-weight: bold;
     color: red;
     border: blue 0px solid;
     vertical-align:top;
 }
  div #container_corps #contenu #contact .texte a{
     font-weight: bold;
     font-size: 1.3em;
  }       
/***************************** page horaire ******************************/

 div #container_corps #contenu #horaire{ /*table */
     width: 100%;
     border: solid aqua 0px;
     color: white;
 } 
 div #container_corps #contenu #horaire th{ /*titre */
    text-align: center;
    font-size: 2em;
    color: blue;
 }     
 div #container_corps #contenu #horaire .jour{ /* colonne jour */
     color: yellow;
     font-weight: bold;
     text-align: left;
     width: 20%;
     border: solid 0px black;
 }  
 div #container_corps #contenu #horaire .description{ /* colonne texte */
     color: white;
     font-weight: bold;  
     text-align: left;
     border: solid 0px black;
 }        
 /**************************************  TARIF  *******************************/
  div #container_corps #contenu .titre{
  color: aqua;
  font-size: 1.5em;
  margin-bottom: 10px;
  font-weight: bold;
  }
  div #container_corps #contenu .description{
  width: 500px;
  margin-bottom: 10px;
  font-weight: bold;
  }
  div #container_corps #contenu .tarif{
  width: 500px;
  margin: 10px;
  }
  div #container_corps #contenu .contexte1{
  width: 200px;
  color: yellow;
  font-weight: bold;
  }
  div #container_corps #contenu .contexte2{
  width: 200px;
  color: yellow;
  font-weight: bold;
  }
  div #container_corps #contenu .contexte3{
  width: 200px;
  color: yellow;
  font-weight: bold;
  }
  /**************************************  ACCUEIL  *******************************/    
  div #bonjour{
      background-color: transparent;
      position:absolute;
      left:250px;
      top:350px;
      color: aqua;
      font-weight: bold;
      border: 0px red solid;
  }
  div #bonjour span{  /* formatage de l'indication de promotion */
      font-size: 2em;
      font-weight: bold;
      color: red;
      font-style: italic;
  }
/****************************   MAP *************************************/
  div #container_corps #contenu #map{
      width: 350px;
      font-size: 0.6em;
      width:150px;
      /*height: 70px;*/
}  
/****************************  Evenement  *******************************/
  div #container_corps #contenu p#titre{
      font-size: 1.5em;
      color: lime;
      font-weight: bold;
      line-height: 1.2em;
      
  }
  div #container_corps #contenu  p#evenement{
      font-size: 1em;
      font-style: italic;
      color:orange;
  }
  div #container_corps #contenu  hr#souligne{
      color:red;
      background-color: red;
      width: 350px;
      height: 2px;
  }
  /****************************  conseils  *******************************/
  div #container_corps #contenu #conseils .titre{
      font-size: 1.5em;
      color:fuchsia ;
      font-weight: bold;
      line-height: 1.2em;
      
  }
  div #container_corps #contenu  #conseils .texte{
      font-size: 1.3em;
      font-style: italic;
      color:white;
      font-weight: bold;
  }
  div #container_corps #contenu  #conseils a{
      color:white;

  }