/***************** BODY *****************/
*{
  /*---on passe toutes les marges à 0---*/
  margin:0;
  padding:0;
}
body,html{
  height:100%;
  /*---permet de changer la couleur de la barre de scroll dans IE (déconseillé)
  scrollbar-base-color:#7d8a2e;
  ---*/
}
body{ background:#F9EDB6 url(../images/charte/bg-top.jpg) top repeat-x;}
/***************** CONTAINER *****************/
#container{
  position:relative;
  min-height:100%;
  width:990px;
  margin:0 auto;
  background:#F9EDB6 url(../images/charte/bg-container.jpg) top repeat-y;
}
/***************** HEADER *****************/
#header{
  width:990px;
  height:200px;
}
/***************** MENU TOP *****************/
#menuTop{
  position:relative;
  z-index:10;
  width:950px;
  height:38px;
  background:url(../images/charte/bg-menu-top.jpg) top left no-repeat;
  list-style:none;
  padding-left:40px;
}
#menuTop li{
  position:relative;
  float:left;
}
#menuTop a{
  text-decoration:none;
  font:bold 12px/30px Arial, Helvetica, sans-serif;
  color:#fff;
  text-align:center;
  text-transform:uppercase;
  display:block;
  height:38px;
  overflow:hidden;
}
#menuTop a span{ display:none;}
#container #menuTop li a:hover,
#container #menuTop li a.trigered{
  /*background:#ffc0a9;*/
  background-position:bottom left;
}
.btn-01 { background:url(../images/charte/btn-01.jpg) no-repeat; width:127px;}
.btn-02 { background:url(../images/charte/btn-02.jpg) no-repeat; width:151px;}
.btn-03 { background:url(../images/charte/btn-03.jpg) no-repeat; width:221px;}
.btn-04 { background:url(../images/charte/btn-04.jpg) no-repeat; width:218px;}
.btn-05 { background:url(../images/charte/btn-05.jpg) no-repeat; width:100px;}
.btn-06 { background:url(../images/charte/btn-06.jpg) no-repeat; width:93px;}
/***************** CONTENU *****************/
#contenu{
  width:890px;
  margin-bottom:50px;
  position:relative;
  height:100%;
  padding:10px 50px 0 50px;
}
#diapo{
  width:283px;
  height:284px;
  margin: 0 10px 0 0;
  float:left;
  background:url(../images/charte/pano.jpg);
}
/*---obligatoire pour le footer---*/
/*---mettre <div class="clearer" id="clearFooter"></div>--*/
/*---apres la div contenu---*/
.clearer{ clear:both;}
#clearFooter{ height:60px;/*--- = à la hauteur du footer ---*/}
/***************** FOOTER *****************/
#footer{
  position:relative;
  clear:both;
  width:100%;
  height:60px;
  margin:-60px 0 0 0;
  background: #D0DA74;
}
#foot{
  position:relative;
  clear:both;
  width:990px;
  height:60px;
  margin:0 auto;
  background:url(../images/charte/bg-footer.jpg) top left no-repeat;
}
#idep{
  position:absolute;
  left:20px;
  top:25px;
  width:195px;
  height:35px;
}
#idep img{ float:left;}
#footer #idep a.idep{
  text-decoration:none;
  display:block;
  font:9px/8px Arial, Helvetica, sans-serif;
  color:#281C00;
  margin:0px 0 0;
}
#footer #idep a.idep.optea{ margin:0;}
#footer #idep a:hover.idep{
  text-decoration:none;
  color:#fff;
}
#footerbody{
  width:990px;
  height:300px;
  position:absolute;
  bottom:0;
  background: url(../images/charte/bg-bottom.jpg) bottom no-repeat;
}