/***************** 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:#FFF url(../images/charte/bg-body.jpg) top center repeat-y;
}


/***************** CONTAINER *****************/
#container{
position:relative;
min-height:100%;
width:960px; 
margin:0 auto;
background:#fff;
}
#intro {
position:absolute;
z-index: 80;
width:850px;
height:400px;
left:50%;
top:40%;
margin-left:-425px;
margin-top:-230px;
background:#fff;
cursor: pointer;
}


.gauche{
position:absolute;
width:270px;
height:65px;
color: #6C6C6D;
padding-right: 25px;
z-index: 70;
margin-left: 120px;
margin-top:400px;
border-right:1px solid #DADADA;
text-align: justify;
font:normal 11px/16px Arial, Helvetica, sans-serif;
}

.gauche span{
  color: #FF4B44;
  font-weight: bold;
  font-size: 14px;
  text-transform: uppercase;
}

.droit{
position:absolute;
width:270px;
height:60px;
color: #6C6C6D;
z-index: 70;
margin-left: 440px;
margin-top:400px;
text-align: justify;
font:normal 11px/16px Arial, Helvetica, sans-serif;
}

.droit span{
  color: #FF4B44;
  font-weight: bold;
  font-size: 14px;
  text-transform: uppercase;
}



/***************** HEADER *****************/
#header{
width:960px;
height:130px;
}
/***************** DIAPO *****************/
#diapo{
width:960px;
height:150px;
}
/***************** MENU TOP *****************/
#menuTop{
position:relative;
z-index:10;
width:960px;
height:40px;
list-style:none;
background:url(../images/charte/bg-menutop.jpg) repeat-x;
}
#menuTop li{
position:relative;
float:left;
}
#menuTop a{
text-decoration:none;
font:bold 12px/40px Arial, Helvetica, sans-serif;
color:#fff;
text-align:center;
display:block;
height:40px;
overflow:hidden;
}
#menuTop a span{
display:none;
}


#menuTop li a:hover,
#menuTop li a.trigered{
}

.btn1-01 {
background:url(../images/charte/btn1-01.jpg) top left no-repeat;
width:138px;}
.btn1-01 a:hover, .btn1-01 a.trigered {
background:url(../images/charte/btn1-01.jpg) bottom left no-repeat;}

.btn1-selected1 {
background:url(../images/charte/btn1-01.jpg) bottom left no-repeat;
width:138px;
}

.btn1-selected1 a {
cursor: default;
}

.btn1-selected2 {
background:url(../images/charte/btn1-02.jpg) bottom left no-repeat;
width:209px;
}

.btn1-selected2 a {
cursor: default;
}

.btn1-selected3 {
background:url(../images/charte/btn1-03.jpg) bottom left no-repeat;
width:158px;
}

.btn1-selected3 a {
cursor: default;
}

.btn1-selected4 {
background:url(../images/charte/btn1-04.jpg) bottom left no-repeat;
width:161px;
}

.btn1-selected4 a {
cursor: default;
}

.btn1-selected5 {
background:url(../images/charte/btn1-05.jpg) bottom left no-repeat;
width:155px;
}

.btn1-selected5 a {
cursor: default;
}

.btn1-selected6 {
background:url(../images/charte/btn1-06.jpg) bottom left no-repeat;
width:139px;
}

.btn1-selected6 a {
cursor: default;
}

.btn1-02 {
background:url(../images/charte/btn1-02.jpg) top left no-repeat;
width:209px;}
.btn1-02 a:hover, .btn1-02 a.trigered {
background:url(../images/charte/btn1-02.jpg) bottom left no-repeat;}
.btn1-03 {
background:url(../images/charte/btn1-03.jpg) top left no-repeat;
width:158px;}
.btn1-03 a:hover, .btn1-03 a.trigered {
background:url(../images/charte/btn1-03.jpg) bottom left no-repeat;}
.btn1-04 {
background:url(../images/charte/btn1-04.jpg) top left no-repeat;
width:161px;}
.btn1-04 a:hover, .btn1-04 a.trigered {
background:url(../images/charte/btn1-04.jpg) bottom left no-repeat;}
.btn1-05 {
background:url(../images/charte/btn1-05.jpg) top left no-repeat;
width:155px;}
.btn1-05 a:hover, .btn1-05 a.trigered {
background:url(../images/charte/btn1-05.jpg) bottom left no-repeat;}
.btn1-06 {
background:url(../images/charte/btn1-06.jpg) top left no-repeat;
width:139px;}
.btn1-06 a:hover, .btn1-06 a.trigered {
background:url(../images/charte/btn1-06.jpg) bottom left no-repeat;}



.btn2-01 {
background:url(../images/charte/btn2-01.jpg) top left no-repeat;
width:146px;}
.btn2-01 a:hover, .btn2-01 a.trigered {
background:url(../images/charte/btn2-01.jpg) bottom left no-repeat;}
.btn2-02 {
background:url(../images/charte/btn2-02.jpg) top left no-repeat;
width:155px;}
.btn2-02 a:hover, .btn2-02 a.trigered {
background:url(../images/charte/btn2-02.jpg) bottom left no-repeat;}
.btn2-03 {
background:url(../images/charte/btn2-03.jpg) top left no-repeat;
width:155px;}
.btn2-03 a:hover, .btn2-03 a.trigered {
background:url(../images/charte/btn2-03.jpg) bottom left no-repeat;}
.btn2-04 {
background:url(../images/charte/btn2-04.jpg) top left no-repeat;
width:156px;}
.btn2-04 a:hover, .btn2-04 a.trigered {
background:url(../images/charte/btn2-04.jpg) bottom left no-repeat;}

.btn2-05 {
background:url(../images/charte/btn2-05.jpg) top left no-repeat;
width:155px;}
.btn2-05 a:hover, .btn2-05 a.trigered {
background:url(../images/charte/btn2-05.jpg) bottom left no-repeat;}




.btn2-selected1 {
background:url(../images/charte/btn2-01.jpg) bottom left no-repeat;
width:146px;
}

.btn2-selected1 a {
cursor: default;
}

.btn2-selected2 {
background:url(../images/charte/btn2-02.jpg) bottom left no-repeat;
width:155px;
}

.btn2-selected2 a {
cursor: default;
}

.btn2-selected3 {
background:url(../images/charte/btn2-03.jpg) bottom left no-repeat;
width:155px;
}

.btn2-selected3 a {
cursor: default;
}

.btn2-selected4 {
background:url(../images/charte/btn2-04.jpg) bottom left no-repeat;
width:156px;
}

.btn2-selected4 a {
cursor: default;
}

.btn2-selected5 {
background:url(../images/charte/btn2-05.jpg) bottom left no-repeat;
width:155px;
}

.btn2-selected5 a {
cursor: default;
}





/***************** SOUS MENU *****************/
#menuTop li ul{
list-style:none;
position:absolute;
width:160px;
top:-6000px;
left:0;
background:#343434;

/*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;
cursor:pointer;
/*border:solid #176fb9;
border-width:0 0 1px 0;*/
}
#container #menuTop li li a:hover{
background:#1d80c5;
}

#container #menuTop li li a.actif{
background:#1d80c5;
color:#fff;
text-decoration:none;
font-weight: bold;
cursor: default;
}

/***************** CONTENU *****************/
#contenu{
width:900px;
padding:20px 0 0px 30px;
}

#contenu-text{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
line-height: 18px;
text-align:justify;
color:#666;
float: left;
padding-bottom: 20px;

}


/*---obligatoire pour le footer---*/
/*---mettre <div class="clearer" id="clearFooter"></div>--*/
/*---apres la div contenu---*/
.clearer{
clear:both;
}
#clearFooter{
height:50px;/*--- = à la hauteur du footer ---*/
}
/***************** FOOTER *****************/
#footer{
position:relative;
clear:both;
width:960px;
height:50px;
margin:-50px auto 0;
background: url(../images/charte/bg-footer.jpg) repeat-x;
}
#idep{
position:absolute;
left:0;
top:0;
width:195px;
height:50px;
}
#idep img{
float:left;
}
#footer #idep a.idep{
text-decoration:none;
display:block;
font:9px/8px Arial, Helvetica, sans-serif;
color:#FFF;
margin:18px 0 0;
}
#footer #idep a.idep.optea{
margin:0;
}
#footer #idep a:hover.idep{
text-decoration:underline;
color:#fff;
}


/***************** FOOTER *****************/
#footerintro{
position:relative;
clear:both;
width:800px;
height:50px;
margin:100px auto 0px auto;
background: #FFFFFF;
}
#footerintro #idep{
position:absolute;
left:300px;
top:0;
width:195px;
height:50px;
}
#footerintro #idep img{
float:left;
}
#footerintro  #idep a.idep{
text-decoration:none;
display:block;
font:9px/8px Arial, Helvetica, sans-serif;
color:#666666;
margin:8px 0 0;
}
#footerintro  #idep a.idep.optea{
margin:0;
}
#footerintro #idep a:hover.idep{
text-decoration:underline;
color:#666666;
}