/***************** BODY *****************/
*{
/*---on passe toutes les marges à 0---*/
margin:0;
padding:0;
}
body,html{
height:100%;
overflow: hidden;
/*---permet de changer la couleur de la barre de scroll dans IE (déconseillé)
scrollbar-base-color:#7d8a2e;
---*/
}
body{
background:#fff url(../images/charte/body.jpg) center center no-repeat;

}
/***************** TOP *****************/

.videos{
padding-left: 110px;
margin-top: -2px;
}


.indexus{
 font-family: Verdana,Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 14px;
color:#333333;
text-align: center;
width: 420px;
padding-top: 3px;
}

.links{
width: 120px;
border: 0px solid red;
float: right;
margin-top: -47px;
}

.links span{
color:#CD2A00;
font-weight: bold;
}


.clearer{
clear:both;
}
#clearTop{
margin-top:-30px;
}
#top{
position:relative;
width:920px;
height:30px;
background: url(../images/charte/top.gif) center top no-repeat;
}
#top input{
background:none;
width:95px;
height:12px;
border:none;
font:10px Arial, Helvetica, sans-serif;
color:#999;
float:left;
margin-top:10px;
} 
#top .box1{
margin-left:95px;
}
#top #box2{
margin-left:10px;
}
#top a.ok{
font:8px/12px Arial, Helvetica, sans-serif;
color:#fff;
text-decoration:none;
text-align:center;
text-transform:uppercase;
float:left;
display:block;
width:100px;
height:12px;
background:#666;
border:#fff solid 1px;
margin:8px 0 0 7px;
}
#top a.ok:hover{
color:#666;
background:#fff;
border:#666 solid 1px;
}
/***************** BTN TOP */
#top a span{
display:none;
}



a.accueil-selected{
position:absolute;
z-index:10;
background:url(../images/charte/bt-accueil.gif) center bottom no-repeat;
width:90px;
height:30px;
display:block;
overflow:hidden;
top:0;
right:120px;
cursor: default;
}

a.contact-selected{
position:absolute;
z-index:10;
background:url(../images/charte/bt-contact.gif) center bottom no-repeat;
width:110px;
height:30px;
display:block;
overflow:hidden;
top:0;
right:10px;
cursor: default;
}


#top a.accueil{
position:absolute;
z-index:10;
background:url(../images/charte/bt-accueil.gif) center top no-repeat;
width:90px;
height:30px;
display:block;
overflow:hidden;
top:0;
right:120px;
}
#top a.contact{
position:absolute;
z-index:10;
background:url(../images/charte/bt-contact.gif) center top no-repeat;
width:110px;
height:30px;
display:block;
overflow:hidden;
top:0;
right:10px;
}
#top a.accueil:hover, #top a.contact:hover{
background-position:center bottom;
}
/***************** CONTAINER *****************/
#container{
position:absolute;
top:50%;
left:50%;
margin-top:-280px;
margin-left:-460px;
height:560px;
width:920px;
}
#joe{
position:absolute;
z-index:10;
background:url(../images/charte/joe.png) center top no-repeat;
width:220px;
height:265px;
bottom:30px;
right:170px;
}
/***************** HEADER *****************/
#header{
width:920px;
height:100px;
}
/***************** MENU TOP *****************/
#menuTop{
position:relative;
z-index:10;
width:920px;
height:40px;
list-style:none;
}
#menuTop li{
position:relative;
float:left;
}
#menuTop a span{
display:none;
}
#menuTop a{
background-position:center top;
background-repeat:no-repeat;
text-decoration:none;
font:bold 12px/30px Arial, Helvetica, sans-serif;
color:#c90000;
text-align:center;
text-transform:uppercase;
display:block;
height:40px;
overflow:hidden;
}
#container #menuTop a:hover,
#container #menuTop a.trigered{
color:#666;
}


.btn01-selected
{
background:url(../images/charte/bt01.gif);
background-position: bottom center;
height: 40px;
width:144px;
cursor: default;
}

.btn02-selected
{
background:url(../images/charte/bt02.gif);
background-position: bottom center;
height: 40px;
width:132px;
cursor: default;
}

.btn03-selected
{
background:url(../images/charte/bt03.gif);
background-position: bottom center;
height: 40px;
width:106px;
cursor: default;
}

.btn04-selected
{
background:url(../images/charte/bt04.gif);
background-position: bottom center;
height: 40px;
width:136px;
cursor: default;
}

.btn05-selected
{
background:url(../images/charte/bt05.gif);
background-position: bottom center;
height: 40px;
width:126px;
cursor: default;
}

.btn06-selected
{
background:url(../images/charte/bt06.gif);
background-position: bottom center;
height: 40px;
width:142px;
cursor: default;
}

.btn07-selected
{
background:url(../images/charte/bt07.gif);
background-position: bottom center;
height: 40px;
width:134px;
cursor: default;
}

#menuTop li.btn01 a{background:url(../images/charte/bt01.gif); width:144px;}
#menuTop li.btn02 a{background:url(../images/charte/bt02.gif); width:132px;}
#menuTop li.btn03 a{background:url(../images/charte/bt03.gif); width:106px;}
#menuTop li.btn04 a{background:url(../images/charte/bt04.gif); width:136px;}
#menuTop li.btn05 a{background:url(../images/charte/bt05.gif); width:126px;}
#menuTop li.btn06 a{background:url(../images/charte/bt06.gif); width:142px;}
#menuTop li.btn07 a{background:url(../images/charte/bt07.gif); width:134px;}

#menuTop li a:hover{
background-position:center bottom;
}
/***************** SOUS MENU *****************/
#menuTop li ul{
list-style:none;
position:absolute;
width:120px;
top:-6000px;
left:0;
background:#c90000;
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:25px;
font:bold 11px/25px 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:#666;
color:#fff;
}

#container #menuTop li li a.subactif{
background:#666;
color:#fff;
cursor: default;
}



/***************** ACTU *****************/
#boxActu{
float:right;
position:relative;
height:290px;
width:255px;
margin:0 0 0 20px;
background: url(../images/charte/bg-actus.gif) center top no-repeat;
}
#lesactus{
width:200px;
height:245px;
overflow:auto;
margin:20px 0 0 10px;
}
.uneactu{
padding:0 15px 0 15px;
margin:0 0 20px;
}
#lesactus .uneactu p{
font:10px Arial, Helvetica, sans-serif;
color:#fff;
}
#lesactus .uneactu p.date{
font:11px/12px Arial, Helvetica, sans-serif;
color:#fff;
text-align:center;
margin:0 0 5px;
padding:2px 2px 2px 2px;
height:12px;
width:55px;
display:block;
background:#999;
}
#contenu #lesactus .uneactu a{
position:relative;
top:5px;
font:10px Arial, Helvetica, sans-serif;
color:#FFF;
text-decoration:none;
width:auto;
margin-left:80px;
}
#contenu #lesactus .uneactu a:hover{
text-decoration:line-through;
}
/***************** CONTENU *****************/
#contenu{
width:920px;
height:400px;
padding-top:10px;
padding-bottom:10px;
}


#contenu-text{
width:745px;
padding-left: 150px;
padding-right: 15px;
height:400px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 18px;
color:#333333;

}




/***************** FOOTER *****************/
#footer{
position:relative;
clear:both;
width:920px;
height:30px;
background:url(../images/bg-footer.gif) center top repeat-x;
}
#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:4px 0 0;
}
#footer #idep a.idep.optea{
margin:0;
}
#footer #idep a:hover.idep{
text-decoration:none;
color:#000;
}