/***************** BODY *****************/

*{

/*---on passe toutes les marges a 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.gif) top left repeat-x;;

}

/***************** CONTAINER *****************/

#container{

position:relative;

min-height:100%;

width:960px;

margin:0 auto;



}

/***************** HEADER *****************/

#header{

width:960px;

height:220px;

background: #77C2E2 url(../images/charte/header.jpg) left top no-repeat;

}



#headerFlash {

position:absolute;

top:0;

width:960px;

height:200px;

}



#flag {

font:12px Arial, Helvetica, sans-serif;

height:23px;

padding-left:860px;



}





#star{

position:absolute;

z-index:10;

width:101;

height:101px;

top:650px;

left:700px;

}



/***************** ESPACE CLIENT *****************/

#espaceclient {

position:absolute;

width:148px;

height:191px;

top:52px;

left:355px;

z-index:2;

}



#espaceclient p{

font:normal 11px/16px Arial, Helvetica, sans-serif;

color:#fff;

text-align:left;

}

#espaceclient a{

color:#FFFFFF;

}



#espaceclient a:hover{

color:#FFFFFF;

font-weight:bold;

}



/***************** PANIER *****************/

#panier{

position:absolute;

z-index:1;

width:149px;

height:184px;

top:-70px;

left:510px;

}

#panier p{

font:normal 11px/16px Arial, Helvetica, sans-serif;

color:#fff;

padding:125px 0 0 0;

text-align:left;

}

#panier a{

color:#FFFFFF;

}



#panier a:hover{

color:#FFFFFF;

font-weight:bold;

}



/***************** RECHERCHER *****************/



#rechercher{

width:147px;

height:47px;

margin-top:0px;

margin-bottom:20px;

}



#rechercher form input{

font:11px Arial, Helvetica, sans-serif;

color:#666;

width:180px;

height:14px;

border:none;

background:none;

margin-left:10px;

}



/***************** MENU TOP *****************/

#menuTop{

position:relative;

z-index:10;

width:960px;

height:30px;

list-style:none;

}

#menuTop li{

position:relative;

float:left;

width:240px;

}

#menuTop a{

text-decoration:none;

font:bold 12px/30px Arial, Helvetica, sans-serif;

color:#fff;

text-align:center;

text-transform:uppercase;

display:block;

height:30px;

overflow:hidden;

}

#menuTop li span {

display:none;

}



#container #menuTop li a.mt_btn01:hover,

#container #menuTop li a.mt_btn02:hover,

#container #menuTop li a.mt_btn03:hover,

#container #menuTop li a.mt_btn04:hover,

#container #menuTop li a.trigered{

background-position:bottom left;

}



#menuTop li a.mt_btn01 {background:url(../images/charte/mt_btn01.jpg) top left no-repeat;width:240px;}

#menuTop li a.mt_btn02 {background:url(../images/charte/mt_btn02.jpg) top left no-repeat;width:240px;}

#menuTop li a.mt_btn03 {background:url(../images/charte/mt_btn03.jpg) top left no-repeat;width:240px;}

#menuTop li a.mt_btn04 {background:url(../images/charte/mt_btn04.jpg) top left no-repeat;width:240px;}



/***************** MENU LEFT *****************/

#menuLeft{

float:left;

width:158px;

margin-top:10px;

padding-top:20px;

height:647px;

background:url(../images/charte/bg-menu.gif) top left no-repeat;

/*border:white 1px solid;*/

}



#menuLeft h1 span {

color:#333333;

}



#menuLeft a{

text-decoration:none;

font:bold 10px/25px Verdana, Arial, Helvetica, sans-serif;

text-align:center;

color:#333333;

display:block;

height:25px;

overflow:hidden;

text-transform:uppercase;

background:url(../images/charte/menu_left.jpg) top left no-repeat;

}



#menuLeft a:hover span{

color:#f43f94;

}

#menuLeft a:hover,

#menuTop a.trigered{

background:url(../images/charte/menu_left2.jpg) top left no-repeat;

color:#333333;

}



/***************** CONTENU *****************/

#contenu{

float:left;

width:540px;

padding-top:10px;

/*padding-right:20px;*/



}



#contenu h1 span{display:none;}

.accueil {background:url(../images/charte/accueil.jpg) top left no-repeat; height:29px;}

.produitdumois {background:url(../images/charte/produitdumois.gif) top left no-repeat; height:29px;}

.presentation {background:url(../images/charte/presentation.jpg) top left no-repeat; height:29px;}

.presentation_en {background:url(../images/charte/company_presentation.jpg) top left no-repeat; height:29px;}

.Contact {background:url(../images/charte/contact.jpg) top left no-repeat; height:29px;}

.condition_vente {background:url(../images/charte/condition_vente.jpg) top left no-repeat; height:29px;}
.plan {background:url(../images/charte/plan_du_site.jpg) top left no-repeat; height:29px;}
.merci {background:url(../images/charte/merci.jpg) top left no-repeat; height:29px;}
.mention_legale {background:url(../images/charte/mention_legale.jpg) top left no-repeat; height:29px;}
.bonnaffaire {background:url(../images/charte/bonne_affaire.gif) top left no-repeat; height:29px;}
.produits {background:url(../images/charte/nos_produit.jpg) top left no-repeat; height:29px;}

.detail_produit{ background:url(../images/charte/det_produit.jpg) top left no-repeat; height:29px;}

.bg_produit {
	background:url(../images/charte/bg_produit.jpg) no-repeat;
	width:175px;
	height:182px;
}
/***************** COLRIGHT *****************/





#colRight {

float:right;

width:242px;

margin-top:10px;

/*border:1px solid red;*/

}



#colRight h1 span {display:none;}



#colRight a.catalogue{

display:block;

background:url(../images/charte/catalogue.gif) top left no-repeat;

width:242px;

height:97px;

}



.telephone{background:url(../images/charte/telephone.gif) top left no-repeat;width:242px;height:112px;margin-top:5px;}



.livraison{

background:url(../images/charte/livraison.gif) top left no-repeat;

width:241px;

height:61px;

}

.mdm{
  width:231px;
  height:90px;
  background: url(../images/charte/bg-actualite.gif) top left no-repeat;
  padding:30px 0px 0px 10px;
}
.mdm img{
   float:right;
   margin-left:8px;
   margin-bottom:10px;
}


#bonneaffaire {

position:relative;

margin-top:15px;

text-align:center;

width:242px;

height:275px;

color:#000066;

font:12px Arial, Helvetica, sans-serif;

text-transform:uppercase;

background:url(../images/charte/bonneaffaire.jpg) top left no-repeat;

/*border:1px solid red;*/

}

#colRight a{

font:12px Arial, Helvetica, sans-serif;

color:#000066;
text-transform: none;
text-decoration: underline;

}



#colRight a:hover{

font:12px Arial, Helvetica, sans-serif;

color:#d569a5;
text-decoration: none;
}



/*****************************************************/

/* 		VIGNETTE PRODUIT

/*****************************************************/

#container #contenu a.vign{

float:left;

width:200px;

padding:4px 4px 27px 40px;

text-decoration:none;

margin:0 10px 29px 10px;

background:url(../images/charte/bg-produits.gif) no-repeat scroll right bottom;

}





#container #contenu a.vign #image{

width:158px;

height:135px;

background:#fff no-repeat center center;

margin-bottom:5px;

border:1px solid #eee;

}

#container #contenu a.vign p{

font:bold 16px/10px Arial, Helvetica, sans-serif;

margin-left:-45px;

width:200px;

text-align:center;

color:#FF3399;

text-transform:uppercase;

}

#container #contenu a.vign p.prix{

font:bold 19px Arial, Helvetica, sans-serif;

}

#container #contenu a.vign p.prix span{

font-size:13px;

color:#000099;

text-decoration:line-through;

}

#container #contenu a.vign:hover{

cursor:pointer;

}

#container #contenu a.vign:hover p{

color:#000066;

}

.choisir {

position:absolute;

margin-top:-9px;

background:url(../images/charte/choisir.gif) top left no-repeat;

height:32px;

width:157px;

}







/*---obligatoire pour le footer---*/

/*---mettre <div class="clearer" id="clearFooter"></div>--*/

/*---apres la div contenu---*/

.clearer{

clear:both;

}

#clearFooter{

height:137px;/*--- = a la hauteur du footer ---*/

}



/***************** FOOTER *****************/

#footer{

position:relative;

background:url(../images/charte/bg-footer.jpg) top left no-repeat;

clear:both;

width:960px;

height:137px;

margin:-137px auto 0;

}

#idep{

position:absolute;

left:0;

top:73px;

width:300px;

height:30px;

margin:auto;

padding-left:350px;

}

#idep img{

float:left;

}

#footer #idep a.idep{

text-decoration:none;

display:block;

font:9px/8px Arial, Helvetica, sans-serif;

color:#d1cece;

margin:4px 0 0;

text-align:left;

}

#footer #idep a.idep.optea{

margin:0;

}

#footer #idep a:hover.idep{

text-decoration:none;

color:#999;

}



#footer p{

font:10px/30px Arial, Helvetica, sans-serif;

color:#383d81;

text-align:center;

padding:40px 10px 0 0;

}

#footer a:link, #footer a:visited{

text-decoration:none;

color:#383d81;

}

#footer a:hover, #footer a:active{

text-decoration:underline;

color:#999;

}