body {

  background:#fff;
text-align:center;
  margin:0;

  padding:0;

  font-family: Lucida Grande,Geneva,Verdana,Helvetica,Arial,sans-serif;
  color:#333;
  font-size:14px;

 }
#conteneur {
  position : relative;
  margin : 0 auto;          
    padding : 0;
  text-align : left;


    width : 1008px; 
  }

h1{font-family:trebuchet ms;color:RGB(103,51,51);font-size: 22px;margin-top:2px;margin-bottom:4px}
h3{font-family: Arial,Helvetica,sans-serif;font-weight:normal}

h2{font-family:trebuchet ms;color:RGB(103,51,51);font-size: 20px;font-weight:normal;margin-top:2px;margin-bottom:4px}
h3{font-size: 16px;margin-top:2px;margin-left:2px;margin-bottom:4px}

hr{height:1px; background: RGB(103,51,51) }

a{font-family: Arial,sans-serif;font-size:14px;font-weight:normal;border-style:none;}
a:link{color:#004A6B;text-decoration:none;background:transparent}

a:visited{color:#004A6B;text-decoration:none;background:tranparent;border-style:none;}
a:active{color:RGB(70,67,107);text-decoration:none;background:transparent}
a:hover{text-decoration:underline;background:transparent;}

/* Division enseigne  en haut de l'écran */
div.enseigne{position:absolute;left:0px;border-bottom: 1px solid #990000;background:#fff;height:75px;width:1000px; top:22px;font-family:Arial,Helvetica,sans-serif;font-weight:bold;font-size: 32px;color:#444;line-height:24px; }
div.sites{position:absolute;top:0px;left:0px;width:1000px;height:18px; text-align: center;margin-right:auto;border-top:1px solid #ccc} 
div.logo{position:absolute;top:22px;left:4px;margin:0px;width:1000px;height:69px;} /* en haut a gauche */
div.recherche{position:absolute;top:35px;left:650px;width:625px;height:20px}/* en haut au centre */
div.ribbon{ position:absolute;top:95px;left:00px;width:990px;height:20px;  text-align: center;background:#990000; padding: 5px;} /* Le menu principal */

div.droite{position:absolute;top:145px;left:600px;width:250px;height:220%;color:black;margin : 0.5em;text-align:left}

div.droite p{margin-top:0px;margin-bottom:0px}
div.droite h1{font-family:trebuchet ms;color:black;font-size: 18px;margin-top:2px;margin-bottom:4px}

/* division menu de gauche */
div.gauche{position:absolute;top:145px;left:0px;width:160px;height:220%;background:
 RGB(255,255,255);color:black;margin : 0.5em;text-align:left}
div.gauche table{border:0px; border-spacing:0px; width:95%;margin-left:0px;margin-right:0px;
font-family: Verdana,Arial,helvetica,sans-serif;}
div.gauche td{padding : 3px 3px; background:RGB(255,255,255)}
div.gauche a{font-weight:bold;font-size:11px;}
div.gauche a:link{color:navy}
div.gauche a:visited{color:blue}
div.gauche a:active{color:navy)}
div.gauche a:hover{color:navy;font-style:italic;}

div.gauche table{border:0px solid black; border-spacing:2px; width:95%;margin-left:0px;margin-right:5px;font-size:12px;
font-family: Verdana,Arial,helvetica,sans-serif;}
div.gauche th{padding : 3px 3px; border : 1px solid black;background:RGB(206,206,206);color:RGB(122,122,122)}
div.gauche td{padding : 3px 3px; border : 1px solid black; background:RGB(230,230,230)}

div.exerg1{font-family:comic sans ms;font-size: 17px;font-weight:normal;margin-top:2px;margin-bottom:4px;color:brown}
div.encadre{font-family:13px;color:black;background:RGB(255,255,255);border:ridge;padding:0.7em}

div.petitexerg{font-family:comic sans ms;font-size: 15px;font-weight:normal;margin-top:2px;margin-bottom:4px;color:brown}
div.petitexergblack{font-size: 15px;font-weight:normal;margin-top:2px;margin-bottom:4px;color:black}

div.sites p {margin-top:0px;font-family: verdana,sans-serif;font-size:11 px; text-align: center;background:#ccc;border-bottom:2px solid #ccc;padding: 0px 0px 0px 0px ;font-weight:none;}
div.sites a {font-family:verdana,Helvetica,sans-serif;font-size:11px;font-weight:normal;text-decoration: none; }
div.sites span {padding :  3px; margin : 3px}
div.sites a:link, div.sites a:visited, div.sites a:active {padding:0px 0px 0px 0px;margin-top: 5px;  display: inline;   border-right: 0px solid #333; color:#333; background:#ccc;}
div.sites a:hover { color:#990000; background:#ccc;font-style: none; text-decoration: none;display: inline;padding: 0px 0px 0px 0px;border-bottom: 2px solid #990000; padding-top:-3px  }

 
 /* division centrale de la page principale */
div.principal{position:absolute;top:190px;left:50px;width:765px;height:220%;background:#ffffff;color:black;margin : 0.5em;text-align:left}

div.ribbon p {margin :1px; text-align: center;font-weight:;}
div.ribbon a {font-family:Arial,sans-serif;font-size:15px;font-weight:;margin :0px;text-decoration:none;text-align:center }
div.ribbon span {padding : 0 3px; margin : 0}
div.ribbon a:link, div.ribbon a:visited, div.ribbon a:active {padding: 6px ; margin-top: 5px; margin-bottom: 5px;  display: inline;   border: 0px solid; color:white; background:#990000;}
div.ribbon a:hover {color: #444; background:#fff;border:0px solid  #2d4368;}

/* End box model hack */


div.enseigne a:link, div.enseigne a:visited, div.enseigne a:active, div.enseigne a:hover {font-family:Arial,Helvetica,sans-serif;font-weight:bold;font-size: 32px;color:#444;line-height:24px;color:#444;text-decoration:none}

/* Zone des boutons animés du menu principal */
div.side { 
  position: absolute; top: 130px; left: 75px; z-index; 1; 
  width: 840px; height: 60px; 
  color: white; bRGB(103,51,51); 
  padding-bottom: 10px; 
}

/* Nested padding for side, main, and right column divisions. */
div.sidepad { 
  padding-top: 10px; 
}

/* Settings for the side division. */

div.side p { 
  margin: 0 0px; 
}

div.side a, div.side a:link, div.side a:visited, div.side a:active { 

  padding: 5px; 
  margin-top: 16px; margin-bottom: 16px; 
 
  color: white; background: RGB(103,51,51); 
  font-weight: bold; text-decoration: none; 
  font-family: Arial, sans-serif;font-size:14px }

div.side a, div.side a:link, div.side a:visited, div.side a:active { 
/* Start box model hack */
  width: 106px; voice-family: "\"}\""; voice-family: inherit; width: 90px; 
}
html>body div.side a { 
  width: 90px 
}
/* End box model hack */



div.side a:hover { 
  color: RGB(103,51,51); background: RGB(0,0,255); 
 
  margin-bottom: 16px; margin-top: 16px; 
}

@media screen and (min-width:961px){
/* division centrale d'une page secondaire */
.texte{position:absolute;top:130px;left:00px;width:550px;background:#e6e6e6;color:black;margin : 0.5em;padding:10px;text-align:left}
}
@media screen and (max-width:960px){
.enseigne,.recherche,.sites,.ribbon,.droite{display:none}
/* division centrale d'une page secondaire */
.texte{position:absolute;top:5px;left:00px;width:550px;background:#e6e6e6;color:black;margin : 0.5em;padding:10px;text-align:left}
}


 @media screen and (max-width:480px){
.texte{position:absolute;top:5px;left:00px;width:380px;background:#e6e6e6;color:black;margin : 0.5em;padding:10px;text-align:left}

}

 @media screen and (max-width:380px){
 
.texte{position:absolute;top:5px;left:00px;width:310px;background:#e6e6e6;color:black;margin : 0.5em;padding:10px;text-align:left}

}

.btn-group .button1 {
    background-color: #FF8000; /* orange */
    border: none;
    color: black;
    padding: 6px 16px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    cursor: pointer;
    width: 150px;
    display: block;
    border-radius: 12px;
    margin:4px;
    outline: 0;
}
.btn-group .button1:not(:last-child) {
    border-bottom: none; /* Prevent double borders */
}
.btn-group .button1:hover {
    background-color: #DF7401;
}
.btn-group .button2 {
    background-color: #FF8000; /* orange */
    border: none;
    color: black;
    padding: 4px 6px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    cursor: pointer;
    width: 120px;
    display: block;
    border-radius: 12px;
    margin:3px;
    outline: 0;
}
.btn-group .button2:not(:last-child) {
    border-bottom: none; /* Prevent double borders */
}
.btn-group .button2:hover {
    background-color: #DF7401;
}