/* Mise en page globale */


body {
           margin: 0;
           padding: 0;
           color: white;
           font-size: 80%;
           font-family: Verdana, Arial, Helvetica, serif;
           background-color: #AFAFBF;
           border-width : 2px;
           border-style :solid;
           border-color: #fff280;
           margin: 0 auto;  /* zéro ou une autre valeure pour centrage*/
           width: 99%;     /*on occuppe toute la largeur*/
           max-width: 1400px; /*on fixe une valeur maxi*/
           min-width: 790px;  /*on fixe une valeur mini*/
           }

.separation {     /*utilise pour bas de page */
            margin: 0;
            padding: 0;
            clear:both;
            visibility:hidden;
            }


/* En-tête */ 
#header {
            height: 155px;
            text-align: center;
            background-color: white;
            }


/*general*/
ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            }

a {
            text-decoration: underline; /* définition du lien qui affichera le "calque" */
            color: white;
            }

a:hover {font-size:1em;text-decoration:none;}

/* --position lien langue -- */
.poslangf {
          float:left;
          top: 1px;
          }

.poslange {
          float:left;
          top: 1px;
          }


/* Menu horizontal */

#menuhaut {
          height:18px;
          margin: 0;
          padding: 0.1em 0.5em 0em 0;
          list-style-type: none;
          background-color: #104772;
          color: white;
          text-align: right;
          font-size : 1em;
          }

#menuhaut li {
          display: inline;
          }

#menuhaut li a {
          font-size : 1em;
          color: white;
          text-decoration: none;
          }

#menuhaut li a:hover {
          font-size : 1em;
          text-decoration: underline;
          color : #d88c07;
          }

#menuhaut li a#actif{
          font-size : 1em;
          color: #104772;
          background-color: white;
          border-top : 1px solid #104772;
          text-decoration: none;
          }


/* menu gauche - présentation, produits, site */
#mgauche {
         height:40em;
         width: 20em;
         font-size : 0.9em;
         background-image: url("imag/tramemenu2.gif") ;
         float:left;
         text-align : center;
         }

#mgauche p {
         font-size:120%;
         font-weight : bold;
         color : #104772;
         }

#mgauche hr {
         width : 60%;
         font-weight : bold;
         color : #104772;
         }


 /*menu sous forme de liste dans partie gauche*/
 
            #menu {
                width: 100%;
                height:100%;
                list-style: none;  /** on retire les puces **/
                padding: 0px 0px 0px 0px;  /** on supprime le padding et les margin par defaut **/
                margin: 0px;
             }
             
            #menu li  {
                margin: 5px;
              }
             
            #menu li a:hover {
                 /** par defaut, ecrit en noir sur fond blanc, les liens restent toujours visible */
                color: #000;

                /* ces propriétés permettent l'effet de transparence sur la plupart des navigateurs
                cependant, si un navigateur ne les prend pas en compte, ils n'auront aucun effet mais le menu restera lisible
                */
                opacity: 0.7;
                filter: alpha(opacity:70);
                -khtml-opacity: 0.7;
                -moz-opacity: 0.7;
                
                /* note: la valeur 0.7 peut être ajustée en fonction de l'image de fond
               plus la valeur est faible, mois le texte est visible */
             }

            #menu li a {

            /** pour que le lien prenne toute la largeur **/
                display: block;
                font-size: 1em;
                font-family: verdana;
                font-weight: bold;
                text-decoration: none;

                    opacity: 1;
                    filter: alpha(opacity:50);
                    -khtml-opacity: 1;
                    -moz-opacity: 1;
                    /* sans image le background redevient noir, et le lien blanc, toujours lisible ! */
                    background: transparent;
                    color: #fff;
              }

              #menu li a#actif {
                   opacity: 1;
                    filter: alpha(opacity:100);
                    -khtml-opacity: 1;
                    -moz-opacity: 1;
                   background: transparent;
                  color: #104772;
                  border: 1px solid #104772 ;
              }



/* Contenu global */
#global {
        margin-left:20.5em;
        padding-right:1em;
        }


#global h1 {
        font-size: 1.3em;
        font-weight : 700;
        text-align : center;
        padding-bottom: 0.2em;
        text-indent: 5px;
        color : #FFCC66;
        }

#global p {
        margin : 0 0 0 0;
        padding : 0 0 0 0;
        color: black;
        font-weight:bold;
        }

/* class */
.justify {
        text-align:justify;
        }
.centre {
        text-align : center;
        color: red;
        }

.normal {  /* utilise pour liste dans texte*/
        font-weight: bold;
        color: black;
        list-style-type:square;
        text-indent : 1em;
        }

.lia {  /* utilise pour liste dans texte*/
        font-weight: bold;
        list-style-type:circle;
        color: black;
        margin-left : 40px;
        }
.tlcgt {
       font-size:100%;
       font-weight : bold;
       text-align : center;
       }

/* définition de la balise <span> inclue dans <a> affichage planisphere*/
a span {
       display: none;
       }

a:hover span {
       display: inline;
       position:absolute;
     top:1px;
     left : 50%;
       margin-left: -397px;
       text-align: center;
       color: white;
       z-index:5;
       }