/***************** 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:#036FAD url(../images/charte/bg-body.jpg) left top repeat-x;}
/***************** CONTAINER *****************/
#container{
  position:relative;
  min-height:100%;
  height:auto !important;
  height:100%;
  width:990px;
  margin:0 auto;
  background:scroll #fff url(../images/charte/bg-container.jpg) left top repeat-y;
}
/***************** HEADER *****************/
#header{
  width:990px;
  height:168px;
  background:url(../images/charte/header.jpg) left top no-repeat;
}
#header #flash{
  width:747px;
  height:168px;
  float:left;
}
#header #login{
  width:238px;
  padding:25px 0 0 5px;
  float:left;
  height:120px;
}
#header #login p{
  font:11px Arial, Helvetica, sans-serif;
  color:#006699;
  line-height:12px;
}
#header #login span{ color:#000;}
#header #login a{
  color:#006699;
  font:10px Arial, Helvetica, sans-serif;
  text-decoration:underline;
}
#header #login a:hover,
#header #login a:active{ color: #FF6600;}
#header #login input{
  height:15px;
  float:left;
  margin-right:5px;
  border:1px solid #006699;
  padding-left:2px;
  font:11px Arial, Helvetica, sans-serif;
}
#header #login #panier{
  width:238px;
  top:140px;
  right:0;
  position:absolute;
  height:30px;
  display:block;
}
.valider{
  border:1px solid #0772b8;
	background-color:#0096e6;
  height: 16px;
  color: #000;
  font-weight: bold;
	width:60px;
	font-size: 12px;
	cursor:pointer;}
a:hover.valider {	background-position:left bottom; width: 61px; height:17px;	}
a:active.valider {	background-position:left bottom; width:	61px; height:17px;} /* selected link */
/***************** MENU TOP *****************/
#menuTop{
  position:relative;
  z-index:10;
  width:990px;
  height:42px;
  background:url(../images/charte/bg-menu-top.jpg) left top no-repeat;
  list-style:none;
}
#menuTop li{
  position:relative;
  float:left;
  height:42px;
}
#menuTop li span{ display:none;}
#menuTop a{
  position:relative;
  float:left;
  height:42px;
  display:block;
  overflow:hidden;
}
#container #menuTop a:hover,
#container #menuTop a.trigered{ position:relative;}

a.bt1		{ 	background:url(../images/charte/bt1.jpg) no-repeat left top; width:	99px;  	}
a:hover.bt1 {	background-position:left bottom; width:	99px; 	}
a:active.bt1 {	background-position:left bottom; width:	99px; } /* selected link */

a.bt2		{ 	background:url(../images/charte/bt2.jpg) no-repeat left top; width:	151px;  	}
a:hover.bt2 {	background-position:left bottom; width:	151px; 	}
a:active.bt2 {	background-position:left bottom; width:151px; } /* selected link */

a.bt3		{ 	background:url(../images/charte/bt3.jpg) no-repeat left top; width:	170px;  	}
a:hover.bt3 {	background-position:left bottom; width:	170px; 	}
a:active.bt3 {	background-position:left bottom; width:170px; } /* selected link */

a.bt4		{ 	background:url(../images/charte/bt4.jpg) no-repeat left top; width:	177px;  	}
a:hover.bt4 {	background-position:left bottom; width:	177px; 	}
a:active.bt4 {	background-position:left bottom; width:177px; } /* selected link */

a.bt5		{ 	background:url(../images/charte/bt5.jpg) no-repeat left top; width:	121px;  	}
a:hover.bt5 {	background-position:left bottom; width:	121px; 	}
a:active.bt5 {	background-position:left bottom; width:121px; } /* selected link */

a.bt6		{ 	background:url(../images/charte/bt6.jpg) no-repeat left top; width:	122px;  	}
a:hover.bt6 {	background-position:left bottom; width:	122px; 	}
a:active.bt6 {	background-position:left bottom; width:122px; } /* selected link */

a.bt7		{ 	background:url(../images/charte/bt7.jpg) no-repeat left top; width:	150px;  	}
a:hover.bt7 {	background-position:left bottom; width:	150px; 	}
a:active.bt7 {	background-position:left bottom; width:150px; } /* selected link */

/***************** MENU LEFT *****************/
#contenu #menuLeft{
  float:left;
  width:178px;
  padding:8px 0 0 12px;
}
#menuLeft ul{ list-style:none;}
#menuLeft span{ display:none;}
#menuLeft a{
  display:block;
  height:30px;
  width:178px;
  overflow:hidden;
}
#menuLeft a:hover,
#menuTop a.trigered{
}
a.bt8		{ 	background:url(../images/charte/bt8.jpg) no-repeat left top;  	}
a:hover.bt8 {	background-position:left bottom; 	}
a:active.bt8 {	background-position:left bottom; } /* selected link */

a.bt9		{ 	background:url(../images/charte/bt9.jpg) no-repeat left top; 	}
a:hover.bt9 {	background-position:left bottom; 	}
a:active.bt9 {	background-position:left bottom;  } /* selected link */

a.bt10		{ 	background:url(../images/charte/bt10.jpg) no-repeat left top;	}
a:hover.bt10 {	background-position:left bottom; 	}
a:active.bt10 {	background-position:left bottom; } /* selected link */

a.bt11		{ 	background:url(../images/charte/bt11.jpg) no-repeat left top;   	}
a:hover.bt11 {	background-position:left bottom;  	}
a:active.bt11 {	background-position:left bottom;  } /* selected link */

a.bt12		{ 	background:url(../images/charte/bt12.jpg) no-repeat left top; 	}
a:hover.bt12 {	background-position:left bottom; 	}
a:active.b12 {	background-position:left bottom;  } /* selected link */

a.bt13		{ 	background:url(../images/charte/bt13.jpg) no-repeat left top;  	}
a:hover.bt13 {	background-position:left bottom;  	}
a:active.bt13 {	background-position:left bottom;  } /* selected link */

a.bt14		{ 	background:url(../images/charte/bt14.jpg) no-repeat left top; 	}
a:hover.bt14 {	background-position:left bottom; 	}
a:active.bt14 {	background-position:left bottom; } /* selected link */

/***************** SOUS MENU */
#container #menuLeft li a{
  background:url(../images/charte/bg-li.jpg) left top repeat-y;
  text-decoration:none;
  font:bold 11px Arial, Helvetica, sans-serif;
  color: #0066CC;
  display:block;
  margin:-1px 0;
  height:20px;
  line-height:20px; /* pour centrer le texte en hauteur */
  overflow:hidden;
  text-align:center;
}
#container #menuLeft li a:hover{
  color:#fff;
  background:#0066cc;
}
/***************** CONTENU *****************/
#contenu{
  float:left;
  width:990px;
  min-height:350px;
  height:auto;
  padding-bottom:40px;
  background:url(../images/charte/bg-contenu.jpg) left top no-repeat;
}
#contenuTexte{
  float:left;
  font-family: Arial;
  padding:15px 10px 0 15px;
  font-size: 11px;
  color: #666666;
  width:530px;
}
/*---obligatoire pour le footer---*/
/*---mettre <div class="clearer" id="clearFooter"></div>--*/
/*---apres la div contenu---*/
.clearer{ clear:both;}
#clearFooter{ height:40px;/*--- = à la hauteur du footer ---*/}
/***************** FOOTER *****************/
#footer{
  position:relative;
  clear:both;
  width:990px;
  height:30px;
  padding-top:10px;
  margin:-40px auto;
  background:url(../images/charte/footer.jpg) left top no-repeat;
}
#idep{
  position:absolute;
  left:0;
  top:10px;
  width:250px;
  height:30px;
  padding-left: 15px;
}
#idep img{ float:left;}
#footer #idep a.idep{
  text-decoration:none;
  display:block;
  font:9px/8px Arial, Helvetica, sans-serif;
  color: #006699;
  margin:8px 0 0 10px;
}
#footer #idep a.idep.optea{ margin:0;}
#footer #idep a:hover.idep{ text-decoration:underline; color:#006699;}