/***************** 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:#370700 url(../images/charte/bg-body.jpg) top center repeat-y;
}
/***************** CONTAINER *****************/
#container{
position:relative;
min-height:100%;
width:990px;
margin:0 auto;
background:url(../images/charte/bg-container.jpg) 0 140px no-repeat;
}
/***************** HEADER *****************/
#header{
width:836px;
height:140px;
float:left;
}
/***************** PANIERCOMPTE *****************/
#paniercompte{
width:154px;
height:140px;
float:left;
background:url(../images/charte/bg-paniercompte.jpg) no-repeat;
font:10px Arial, Helvetica, sans-serif;
color:#e57e3f;
}
#paniercompte p{
padding:10px;
width:134px;
}
#paniercompte a:hover{
background-position:bottom;
}
#paniercompte a span{
display:none;
}
.compte {
width:75px;
height:32px;
float:left;
background:url(../images/charte/compte.jpg) no-repeat;}
.panier {
width:79px;
height:32px;
float:left;
background:url(../images/charte/panier.jpg) no-repeat;}

/***************** MENU LEFT *****************/
#menuLeft{
float:left;
width:200px;
margin:11px 0 0 14px;
}
#menuLeft ul{
list-style:none;
padding-bottom:10px;
border:solid #C25C1E;
border-width:0 0 1px 0;
background:#620F00;
}
#menuLeft a{
text-decoration:none;
font:bold 12px/25px Arial, Helvetica, sans-serif;
color:#7d8a2e;
display:block;
height:25px;
overflow:hidden;
}
#menuLeft a span{
display:none;
}
#menuLeft a:hover,
#menuTop a.trigered{
color:#fff;
background-position:right;
}


.bt1 {
width:200px;
height:25px;
background:url(../images/charte/btn1.gif) no-repeat;}
.bt2 {
width:200px;
height:25px;
background:url(../images/charte/btn2.gif) no-repeat;}
.bt3 {
width:200px;
height:25px;
background:url(../images/charte/btn3.gif) no-repeat;}
.bt4 {
width:200px;
height:25px;
background:url(../images/charte/btn4.gif) no-repeat;}
.bt5 {
width:200px;
height:25px;
background:url(../images/charte/btn5.gif) no-repeat;}
.bt6 {
width:200px;
height:25px;
background:url(../images/charte/btn6.gif) no-repeat;}
.bt7 {
width:200px;
height:25px;
background:url(../images/charte/btn7.gif) no-repeat;}
.bt8 {
width:200px;
height:25px;
background:url(../images/charte/btn8.gif) no-repeat;}
.bt9 {
width:200px;
height:25px;
background:url(../images/charte/btn9.gif) no-repeat;}




/***************** SOUS MENU */
#container #menuLeft li a{
background:none;
border:none;
text-decoration:none;
font:bold 11px/20px Arial, Helvetica, sans-serif;
color:#C25C1E;
display:block;
text-align:right;
height:20px;
overflow:hidden;
padding:0 10px 0 0;
}
#container #menuLeft li a:hover{
text-decoration:none;
color:#E09021;
}
/***************** CONTENU *****************/
#contenu{
float:left;
width:500px;
padding:20px 0 0 220px;
}
/*---obligatoire pour le footer---*/
/*---mettre <div class="clearer" id="clearFooter"></div>--*/
/*---apres la div contenu---*/
.clearer{
clear:both;
}
#clearFooter{
height:31px;/*--- = à la hauteur du footer ---*/
}
/***************** FOOTER *****************/
#footer{
position:relative;
clear:both;
width:990px;
height:31px;
margin:-31px auto 0;
background: url(../images/charte/bg-footer.jpg) no-repeat;
}
#idep{
position:absolute;
left:0;
top:0;
width:195px;
height:31px;
}
#idep img{
float:left;
}
#footer #idep a.idep{
text-decoration:none;
display:block;
font:9px/8px Arial, Helvetica, sans-serif;
color:#e57e3f;
margin:8px 0 0;
}
#footer #idep a.idep.optea{
margin:0;
}
#footer #idep a:hover.idep{
text-decoration:none;
color:#cf9470;
}

/***************************MES PROPRES MODIFICATIONS*********************/

/******************************LES PICTOS************************/
#picto1{
background:url(../images/charte/picto-coeur.png) no-repeat;
height:60px;
width:60px;
position:absolute;
margin-top:-20px;
margin-left:-20px;
z-index:100;
}
#picto2{
background:url(../images/charte/picto-affaire.png) no-repeat;
height:60px;
width:60px;
position:absolute;
margin-top:-20px;
margin-left:-20px;
z-index:100;
}
#picto3{
background:url(../images/charte/picto-new.png) no-repeat;
height:60px;
width:60px;
position:absolute;
margin-top:-20px;
margin-left:-20px;
z-index:100;
}
/*****************************LISTING********************/
#listing {
width:130px;
height:265px;
background:#400000;
border:solid 1px #FF6600;
padding:4px;
margin:10px 19px 10px 0 ;
float:left;
}
#designation{
text-align:center;
margin-bottom:10px;
}
#designation span.designation{
font:bold 12px Arial, Helvetica, sans-serif;
color:#de931f;
padding:0;
margin:0;
border:none;
text-align:center;
}
#listing p{
font:10px Arial, Helvetica, sans-serif;
padding:0;
margin:0;
}
#listing .prix{
font:bold 11px Arial, Helvetica, sans-serif;
color:#CF9470;
padding:0;
margin:0;
}
#listing .barre{
font:11px Arial, Helvetica, sans-serif;
text-decoration:line-through;
color:#CF9470;
padding:0;
margin:0;
}
#listing .promo{
font:bold 16px Arial, Helvetica, sans-serif;
color:#de931f;
padding:0;
margin:0;
margin-left:5px;
}
#contenu #listing a{
font:bold 10px Arial, Helvetica, sans-serif;
color:#c80909;
padding:0;
margin:0;
text-decoration:none;
}
#contenu #listing a:hover{
text-decoration:underline;
}
#contenu #designation a{
font:bold 12px Arial, Helvetica, sans-serif;
color:#de931f;
padding:0;
margin:0;
text-decoration:none;
}
#contenu #designation a:hover{
text-decoration:underline;
}
/*********************HOVER IMAGE****************/
#listing a img{
filter: alpha(opacity=100);
-moz-opacity: 1.00; opacity:1.00;

}
#listing a:hover img{
filter: alpha(opacity=70);
-moz-opacity: 0.70; opacity:0.70;
}
/**********************PAGINATION***************/
#pagination{
margin-top:10px;
margin-bottom:10px;
float:right;
width:400px;
}
#precedent{
width:100px; 
height:20px; 
float:left;
float:left;
font-family:Arial, Helvetica, sans-serif;
font-size:10px;

}
#suivant{
width:100px; 
height:20px; 
float:left;
text-align:right;
font-family:Arial, Helvetica, sans-serif;
font-size:10px;

}
#number{
float:left;
font-family:Arial, Helvetica, sans-serif;
font-size:10px;
}
.puce-pagination{
position:relative;
top:4px;
}

/***********************FICHE PRODUIT**********************/
#fiche {
width:480px;
min-height:265px;
background:#400000;
border:solid 1px #FF6600;
padding:4px;
margin:10px 19px 10px 0 ;
float:left;
}
#haut-fiche{
background:url(../images/charte/haut-fiche.jpg) repeat-x;
width:480px;
height:42px;
text-align:center;
}
#zone-images{
float:left;
width:160px;
}
#image-principale{
background:url(../images/charte/bg-image-principale.jpg) no-repeat;
width:151px;
height:151px;
text-align:center;
padding-top:5px;
}
#images-secondaires{
width:150px;
text-align:center;
}
#description-fiche{
width:310px;
float:left;
}
#description-fiche .ligneform label {
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
margin-bottom:5px;
padding-right:10px;
float:left;
width:80px;
font-weight:bold;
color:#DE931F;

}
#description-fiche .ligneform{
margin-bottom:5px;
}
#description-fiche .ligneform input{
width:134px;
}
#description-fiche .ligneform select{
width:137px;
}
#description-fiche .envoyer{
background:url(../images/charte/ajouter-au-panier.jpg);
width:134px; 
height:53px; 
border:0px; 
position:relative; 
top:8px; 
left:40px;
cursor:pointer;
}
.promo2{
font:bold 16px Arial, Helvetica, sans-serif;
color:#de931f;
padding:0;
margin:0;
margin-left:30px;
}
.promo3{
font:bold 16px Arial, Helvetica, sans-serif;
color:#de931f;
position:relative;
 
}

#contenu_description{
height:122px;
}
#contenu_description p{
height:66px;
}
/**********************LES LIENS NOUS CONTACTER ET ENVOYER A UN AMI****************************/
#nous-contacter{
position:relative;
height:32px;
width:134px;
top:-32px;
left:134px;
}
#nous-contacter a{
position:absolute;
background:url(../images/charte/nous-contacter.jpg) right top;
height:32px;
width:134px;
}
#nous-contacter a:hover{
position:absolute;
background:url(../images/charte/nous-contacter.jpg) right bottom;
height:32px;
width:134px;
}
#envoyer-ami{
position:relative;
height:32px;
width:134px;
}
#envoyer-ami a{
position:absolute;
background:url(../images/charte/envoyer-ami.jpg) right top;
height:32px;
width:134px;
}
#envoyer-ami a:hover{
position:absolute;
background:url(../images/charte/envoyer-ami.jpg) right bottom;
height:32px;
width:134px;
}
.associes{
position:relative;
top:15px;
}
/*****************************LISTING ASSOCIES********************/
#listing {
width:130px;
height:310px;
background:#400000;
border:solid 1px #FF6600;
padding:4px;
margin:10px 19px 10px 0 ;
float:left;
}
#designation{
text-align:center;
margin-bottom:3px;
margin-top:7px;
height:35px;
}
#designation span.designation{
font:bold 12px Arial, Helvetica, sans-serif;
color:#de931f;
padding:0;
margin:0;
border:none;
text-align:center;
}
#listing p{
font:10px Arial, Helvetica, sans-serif;
padding:0;
margin:0;
}
#listing .prix{
font:bold 11px Arial, Helvetica, sans-serif;
color:#CF9470;
padding:0;
margin:0;

}
#listing .barre{
font:11px Arial, Helvetica, sans-serif;
text-decoration:line-through;
color:#CF9470;
padding:0;
margin:0;
}
#listing .promo{
font:bold 16px Arial, Helvetica, sans-serif;
color:#de931f;
padding:0;
margin:0;
margin-left:5px;
}
#contenu #listing a{
font:bold 10px Arial, Helvetica, sans-serif;
color:#c80909;
padding:0;
margin:0;
text-decoration:none;
}
#contenu #listing a:hover{
text-decoration:underline;
}
#contenu #designation a{
font:bold 12px Arial, Helvetica, sans-serif;
color:#de931f;
padding:0;
margin:0;
text-decoration:none;
}
#contenu #designation a:hover{
text-decoration:underline;
}

#listing-associes {
width:130px;
height:230px;
background:#400000;
border:solid 1px #FF6600;
padding:4px;
margin:10px 19px 10px 0 ;
float:left;
}
#designation{
text-align:center;
margin-bottom:10px;
}
#designation span.designation{
font:bold 12px Arial, Helvetica, sans-serif;
color:#de931f;
padding:0;
margin:0;
border:none;
text-align:center;
}
#listing-associes p{
font:10px Arial, Helvetica, sans-serif;
padding:0;
margin:0;
}
#listing-associes .prix{
font:bold 11px Arial, Helvetica, sans-serif;
color:#CF9470;
padding:0;
margin:0;
}
#listing-associes .barre{
font:11px Arial, Helvetica, sans-serif;
text-decoration:line-through;
color:#CF9470;
padding:0;
margin:0;
}
#listing-associes .promo2{
font:bold 16px Arial, Helvetica, sans-serif;
color:#de931f;
padding:0;
margin:0;
margin-left:28px;
}
#contenu #listing-associes a{
font:bold 10px Arial, Helvetica, sans-serif;
color:#c80909;
padding:0;
margin:0;
text-decoration:none;
}
#contenu #listing-associes a:hover{
text-decoration:underline;
}
#contenu #designation a{
font:bold 12px Arial, Helvetica, sans-serif;
color:#de931f;
padding:0;
margin:0;
text-decoration:none;
}
#contenu #designation a:hover{
text-decoration:underline;
}

.photo-produit{
text-align:center; 
width:130px; 
height:120px;
}


.puce-h2{
position:relative;
top:7px;
left:-3px;
}
#haut-page{
float:right;
position:relative;
height:30px;
width:126px;
bottom:10px;
}
#haut-page a{
position:absolute;
background:url(../images/charte/haut-page.jpg) right top;
height:30px;
width:126px;
}
#haut-page a:hover{
position:absolute;
background:url(../images/charte/haut-page.jpg) right bottom;
height:30px;
width:126px;
}

/******************PLAN DU SITE*******************/
#plan-site{
margin-top:10px;
margin-left:20px;
}
   #plan-site li {
    padding-left:20px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#000000;
	list-style:none; 
	margin-top:10px; 
	margin-bottom:10px;
}

   #plan-site ul {
   	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
    padding-left:25px; 
    list-style:none;
   }
.puce-plan{
position:relative;
top:-2px;
right:4px;
}
/*****************************CONTACT***************************/
#merci{
text-align:left; 
margin-top:100px; 
color:#FFFFFF; 
font-family:Arial, Helvetica, sans-serif; 
font-size:12px;
}

#table-contact{
margin-top:-40px;
}

#table-contact label{
font-family:Arial, Helvetica, sans-serif; 
font-size:12px; 
color:#E57E3F;
font-weight:bold;
}

#cap{
text-align:center; 
float:left;
}
#errcapa{
display:none; 
font-family:Verdana, Arial, Helvetica, sans-serif; 
font-size:10px;
margin-top:-4px;
height:30px;
color:#990000;
}
.error{
display:none; 
font-family:Verdana, Arial, Helvetica, sans-serif; 
font-size:10px;
height:20px;
color:#990000;
}
#contact{
float:left;
margin-bottom:10px;
}

/*******************GESTION DE CONTENU***********************/
#selection{
min-height:120px;
}
#laselection{
text-align:center;
float:left;
background:url(../images/charte/bg-pages.jpg) no-repeat;
width:110px;
padding-right:5px;
height:110px; 
margin:0px;
}
#laselection p{
height:124px;
width:124px;
text-align:center;
float:left;
}
.liste{
margin-left:30px;
}
#etapes li{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#CF9470;
}



/********************************MOTEUR DE RECHERCHE***********************************/
#search{
float:right;
top:20px;
position:relative;
}

#search form{
width:225px;
height:37px;
padding-top:8px;
float:right;
}
#search input{
width:169px;
height:21px;
float:left;
background:url(../images/charte/bg-input.jpg) no-repeat;
padding:6px 0 0 5px;
font:12px Arial, Helvetica, sans-serif;
color:#8b362c;
border:none;
margin-left:10px;
}


#search .envoyer {
background:url(../images/charte/ok.jpg) no-repeat top left;
height:35px;
width:30px;
position:relative;
right:10px;
cursor:pointer;
}
#gima{
margin-left:55px;
}