/***************** BODY *****************/
*{
/*---on passe toutes les marges à 0---*/
margin:0;
padding:0;
}
body,html{ height:100%; font-family: Arial; font-size: 11px;
/*---permet de changer la couleur de la barre de scroll dans IE (déconseillé)
scrollbar-base-color:#7d8a2e;
---*/
}
body{ background:#f4e2c2 url(../images/charte/bg-body.jpg) top center repeat-x;}
/***************** CONTAINER *****************/
#container{
  position:relative;
  min-height:100%;
  width:990px;
  margin:0 auto;
  background:url(../images/charte/bg-container.jpg) center top repeat-y;
}
#container2{
  position:relative;
  width:990px;
  min-height:530px;
  background: url(../images/charte/bg-contenu.jpg) 0 210px no-repeat;
}
/***************** HEADER *****************/
#header{ width:990px; height:210px;}
/***************** MENU TOP *****************/
#menuTop{
  position:relative;
  z-index:10;
  width:510px;
  height:36px;
  padding-left:480px;
  background: url(../images/charte/bg-menutop.jpg) top left no-repeat;
  list-style:none;
}
#menuTop li{ position:relative; float:left;}
#menuTop a{
  text-decoration:none;
  font:bold 12px/36px Arial, Helvetica, sans-serif;
  color:#fff;
  text-align:center;
  display:block;
  height:36px;
  overflow:hidden;
}
#menuTop a span{ display:none;}
#container #menuTop li a:hover,
#container #menuTop a.trigered{ background-position: bottom left;}
.btn1 { background:url(../images/charte/btn-01.jpg) top left no-repeat; width:106px;}
.btn2 { background:url(../images/charte/btn-02.jpg) top left no-repeat; width:130px;}
.btn3 { background:url(../images/charte/btn-03.jpg) top left no-repeat; width:121px;}
.btn4 { background:url(../images/charte/btn-04.jpg) top left no-repeat; width:153px;}
/***************** SOUS MENU *****************/
#menuTop li ul{
  list-style:none;
  position:absolute;
  width:160px;
  top:-6000px;
  left:0;
  background:#ffc0a9;
  border:solid #fff;
  border-width:1px 0 0 0;
}
#menuTop li li{ float:none;}
#container #menuTop li li a{
  background:none;
  width:auto;
  position:relative;
  height:20px;
  font:11px/20px Arial, Helvetica, sans-serif;
  text-transform:none;
  color:#fff;
  text-decoration:none;
  border:solid #ffcfbd;
  border-width:0 0 1px 0;
}
#container #menuTop li li a:hover{ background:#ff8598;}
/***************** MENU LEFT *****************/
#menuLeft{
  float:left;
  width:200px;
  margin-top:20px;
  display:block;
}
#menuLeft ul{ list-style:none; padding-bottom:10px;}
#menuLeft a{
  background: url(../images/charte/puce.jpg) 5px 10px no-repeat;
  text-decoration:none;
  font:bold 14px/25px Arial, Helvetica, sans-serif;
  color:#1d5866;
  display:block;
  height:25px;
  overflow:hidden;
  padding:0 0 0 15px;
}
#menuLeft a:hover,
#menuTop a.trigered{
  color:#fff;
  font:bold 14px/25px Arial, Helvetica, sans-serif;
  background: #1d5866 url(../images/charte/puce.jpg) 5px 10px no-repeat;
}
/***************** SOUS MENU */
#container #menuLeft li a{
  background:none;
  border:none;
  text-decoration:none;
  font:normal 11px/15px Arial, Helvetica, sans-serif;
  color:#485d25;
  display:block;
  height:15px;
  overflow:hidden;
  padding:0 0 0 10px;
}
#container #menuLeft li a:hover{ text-decoration:none; color:#000;}
/***************** CONTENU *****************/
#contenu{ float:left; width:680px; padding:20px 0 0 60px;}
/***************** DIAPO *****************/
#diapo{ float:right; width:285px; height:285px; margin:0 0 10px 10px;}
/*---obligatoire pour le footer---*/
/*---mettre <div class="clearer" id="clearFooter"></div>--*/
/*---apres la div contenu---*/
.clearer{ clear:both;}
#clearFooter{ height:30px;/*--- = à la hauteur du footer ---*/}
/***************** FOOTER *****************/
#footer{
  position:relative;
  clear:both;
  width:100%;
  height:30px;
  margin:-30px 0 0 0;
  background: url(../images/charte/bg-footer.jpg) repeat-x;
}
#foot{
  position:relative;
  clear:both;
  width:990px;
  height:30px;
  margin: 0 auto;
  background: url(../images/charte/bg-foot.jpg) no-repeat;
}
#idep{ position:absolute; left:0; top:0; width:195px; height:30px;}
#idep img{ float:left;}
#footer #idep a.idep{ text-decoration:none; display:block; font:9px/8px Arial, Helvetica, sans-serif; color:#FFF; margin:8px 0 0;}
#footer #idep a.idep.optea{ margin:0;}
#footer #idep a:hover.idep{ text-decoration:underline; color:#FFF;}