@CHARSET "UTF-8";

/*
 *  Document   : style.css
 *  Created on : 25 mai 2009, 21:47:06
 *  Author     : Thierry Lassègue
 *  Description: Feuille de style pour la mise en page et la typo
 ****************************************************************/

/*
 *  Syntax http://www.w3.org/TR/REC-CSS2/
 ****************************************/

/*************************
 * Mise en page générale *
 * et arrière-plan       *
 *************************/

/*************************
 * Mise en page générale *
 * et arrière-plan       *
 *************************/
body {margin: 0; padding: 0;}
#bandeorange {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 13px;
}
#conteneur {
	position: absolute;
	width: 980px;
	left: 50%;
	margin: 0 0 0 -490px;
}
.separation {
  	clear: both;
  	visibility: hidden;
  	margin: 0;
  	height: 0;
}

/***************************
 * La typographie générale *
 ***************************/
body {
	font-family: verdana, arial, helvetica, sans-serif;
	font-size: 62.5%; /*ramène la taille de police par défaut à 10px : 16x0.625*/
}
h1, h2, h3, h4 {
	font-weight: bold;
	letter-spacing: -0.018em;
}
p.inline {display: inline;}
table {border: 0; border-collapse: collapse;}
tr {margin: 0; padding: 0;}
th, td {
	margin: 0;
	padding: 0;
	font: normal 1em arial, sans-serif;
}
th.right, td.right {text-align: right;}
dl, dt, dd, ul, li {
	margin: 0;
	padding: 0;
	list-style-type: none;
}
.nobold {font-weight: bold;}


/*****************
 * La navigation *
 *****************/
img {
	border: none;
}
a img {border: none;}
a {text-decoration: none; font-weight: bold;}
a.nobold {font-weight: normal;}


/*******************
 * Les formulaires *
 *******************/
fieldset {margin-left: 0px;}
legend {
    font-weight: bold;
	letter-spacing: -0.018em;
	font-size: 1.2em;
}
label {
    display: block;
    float: left;
    width: 30%;
}
input[type=text],input[type=password],input[type=listbox],textarea{
	margin: 1px;
}


/**********************
 * La zone du bandeau *
 **********************/
#bandeau {
	width: 980px;
	height: 136px;
	margin: 0px;
}
#zonelogo {
	float: left;
	width: 183px;
	height: 136px;
	text-align: right;
	font-family: helvetica, arial, sans-serif;
	font-size: 17px;
	font-weight: bold;
}
#zonelogo p{margin: 0 -1px 0 0;}
#zonelogo img {margin-top: 30px;}
#zonemenu {
	float: right;
	width: 797px;
	height: 136px;
}

/** Encart pub du bandeau **
 ***************************/
#encarthaut {
        position: absolute;
	top: 3px;
	left: 330px;
	text-align: center;
	font-size: 15px;
	font-weight: bold;
}
#encarthaut h3{
	margin: 0 0 0 0;
}

/** Menu du bandeau **
 *********************/
#menuhaut {
	position: relative;
	top: 100px;
	left: 40px;
}
#menuhaut dt {float: left;}
#menuhaut a {
	display: block;
	width: 133px;
	height: 18px;
	line-height: 18px;
	margin: 0 39px 0 0;
	text-decoration: none;
	font-weight: bold;
	text-align: center;
	font-size: 1.1em;
}
#menuhaut div {width: 133px; height: 34px;}
#menuhaut form {display: block; margin: 0 0 0 2px;}


/************************
 * La colonne de gauche *
 ************************/
#colgauche {
	width: 183px;
	height: 651px;
	float: left;
	margin: 0;
	padding: 0;
}
#colgauchehaut {
	height: 129px;
	margin: 0;
	padding: 0;
}
#colgauchebas {margin: 0; padding: 0;}
#colgauchebas.welcome {height: 522px;}

/** Le menu gauche **
 ********************/
#menugauche {margin: 0 0 0 5px;}
#menugauche dl {margin: 0; padding: 0;}
#menugauche dt {
	position: relative;
	margin: 0 0 20px 0;
}
#menugauche dt:hover ul {display: block;}
#menugauche ul {
	position: absolute;
	top: 0;
	/*left: 137px;*/ /*largeur du boutonmariage*/
	left: 130px; /*bonne marge pour le boutonsoiree*/
	display: none;
}
#menugauche li.hiver {margin-top: 5px;}
#menugauche li a {
	display:block;
	padding: 2px 4px 2px 2px;
	color: white;
	font-size: 1.2em;
}


/************************
 * La colonne du centre *
 ************************/
#colcentre {
	float: left;
	width: 604px;
	margin: 0;
	padding: 0;
	font-size: 1.1em;
}
#colcentre.welcome {height: 651px;}
#coldeco {
	/*partie gauche de la colonne centrale de certaines pages (rayons)
	  contenant le titre par exemple */
	width: 200px;
	float: left;
	margin: 0 17px 0 0;
}
#colcontenu {
	/*partie droite de la colonne centrale contenant, par exemple, les encarts*/
	float: left;
	margin-top: 15px;
	margin-left: 20px;
}
#contenu_large {
	/*contenu de la colonne centrale lorsqu'il occupe toute la largeur*/
	padding: 0 10px 0 25px;
}

/** l'édito de la page d'accueil **
 **********************************/
#edito {
	/*partie gauche de la colonne centrale de la page d'acceuil, contenant l'édito*/
	float: left;
	width: 185px;
	margin: 15px 0 0 25px;
	text-align: left;
	font-size: 1.05em;
	letter-spacing: 0.05em;
	line-height: 1.25em;
	font-family: arial, sans-serif;
	font-weight: lighter;
}
#edito .orange {font-size: 1.2em;}

/** Les encarts promotionnels **
 *******************************/
#encarts {margin-left: 16px;}
#encarts .encart {margin-bottom: 35px;}
.encart {width: 330px; padding: 5px;}
.encart .titreencart {margin: -5px 0 0 -2px;}
.encart .petittitreencart {margin: -10px 0 7px 0;}
.encart .premiertitreencart {margin : -10px 0 7px -5px;}
.encart .titreencart span {font-size: 17px;}
.encart .petittitreencart span,
.encart .premiertitreencart span {font-size: 11px;}
.promo {float:left; margin: 5px 7px -2px 7px;}
.promotxt {
	float:left;
	width: 180px;
	margin: 5px 10px;
}
.encart img {
	width: 96px;
	height: 72px;
	margin: 0;
}
.popencart {
	width: 250px;
	padding: 3px;
	margin-left: 15px;
}

/** Les pickers **
 *****************/
#colorpicker {margin-top: 165px;}
#pave_couleurs {
	float:left;
	width: 176px;
	margin-top: -7px;
}
#pave_couleurs img {
	width: 26px;
	height: 19px;
	margin: 0 4px 4px 0;
	cursor: pointer;
}
#macouleur {
	width: 171px;
	height:35px;
    float: left;
	margin-top: 5px;
}
#matierepicker {
	width: 330px;
	margin-top: 30px;
}
#pave_matieres {
    float: left;
    width: 220px;
    margin-top: -7px;
}
#pave_matieres .matiere {
    margin-right: 17px;
    margin-bottom: 7px;
    float:left;
}
#pave_matieres .matiere img {width: 35px; height: 35px;}
#pave_matieres .matiere a {font-weight: normal;}
#mamatiere {
    width: 95px;
    height: 95px;
    margin: -7px 0 0 9px;
    float: left;
}
#mamatiere img {width: 97px; height: 97px;}
#colorpicker p, #matierepicker p {
    font-family: helvetica, arial, sans-serif;
    font-size: 1.6em;
    font-weight: bold;
}
#colorpicker p .orange, #matierepicker p .orange {
    font-weight: normal;
}


/** La liste des produits dans les rayons **
 *******************************************/
#table_produits {
    width: 95%;
    margin: 20px 0 0 0;
    border: 0;
    border-collapse: collapse;
    font-size: 1.1em;
}
#table_produits th {
   text-align: center;
   font-weight: bold;
}
#table_produits tr.soulignement td {
    border: none;
    height: 13px;
}
#table_produits tbody th {
	text-align: left;
	width: 110px;
}
#table_produits tbody th img {
	width: 110px;
	height: 75px;
	margin: 2px 3px -1px 0;
}
#table_produits td {padding:0.5em;}
#table_produits td.panier {text-align: center;}
#table_produits th a, .listeTable th a:visited {
   text-decoration: none;
}
#table_produits td a, .listeTable td a:visited {
   text-decoration: none;
}
tr.vide {
	height: 45px;
	font-size: 1.1em;
	text-align: center;
}
#table_produits tfoot td {height: 25px; border: none;}
#table_produits td.nom {font-size: 1.1em;}
#table_produits td.nompromo {font-size: 1.1em;}
#table_produits td.nomsoldes {font-size: 1.1em;}
#table_produits td.nomnouveau {font-size: 1.1em;}

/* Les images pop *
 ******************/
.pop {
	width: 220px;
	height: 165px;
	margin-left: 100px;
}

/** Les popups popupInformation **
 *********************************/
.popupInformation {position: absolute;}

/** La fiche produit **
 **********************/
#illustrations {
	width: 200px;
	float: left;
	margin: 24px 17px 0 0;
	padding: 8px 0 4px 0;
 	text-align: center;
 }
#illustrations .img_pr_horiz {width: 180px; height: 135px;}
#illustrations .img_pr_vert {width: 135px; height: 180px;}
#illustrations .img_pr_car {width: 135px; height: 135px;}
#illustrations img {
	vertical-align: middle;
	margin: 0 2px 0 2px;
	width: 50px;
}
#entete_fiche {
	float:left;
	width: 330px;
	margin: 10px 0 0 30px;
}
#entete_fiche p {text-align: center;}
.promotion {font-weight: bold;}
.solde {font-weight: bold;}
.ancien_prix {text-decoration: line-through;}
.nouveau {font-weight: bold;}
#entete_fiche .prixttc {font-size: 1.7em;}
#entete_fiche .stock {
 	text-align: center;
 	font-size: 1.1em;
}
#entete_fiche .achatForm {text-align: center;}
#corps_fiche {width: 95%;}
#table_assortis {
 	width: 100%;
	margin: -7px 0 17px 0;
	border: 0;
	border-collapse: collapse;
}
#table_assortis tr {height: 24px;}
#table_assortis td {padding:0.5em;}
#table_technique {
 	width: 100%;
 	border-collapse: collapse;
}
#table_technique th {
 	width: 30%;
 	vertical-align: top;
 	text-align: left;
}
#table_technique th, #table_technique td {
 	padding: 0.5em 0.8em;
}

/** Les grandes images **
 ************************/
#conteneur.fond_noir h2{margin-left: 140px;}
.img_horiz {
	width: 700px;
	height: 525px;
	margin: 140px 0 140px 140px;
	margin: 75px 0 120px 140px;
}
.img_vert {
	width: 525px;
	height: 700px;
	margin: 50px 0 50px 227px;
	margin: 15px 0 50px 227px;
}
.img_car {}

/** Le formulaire de recherche avancée **
 ****************************************/
form#zone_recherche {width: 95%;}

/** Le panier et les commandes **
 ********************************/
#cmdeTable {width: 100%;}
#cmdeTable th {text-align: center;}
#cmdeTable td {padding: 0.5em;}
#cmdeTable .contenant {
	padding: 0;
	vertical-align: top;
}
.adresse {float: left; width: 33%;}
#cmdeTable table {
	width: 100%;
	height: 100%;
	margin-top: 0;
}
#cmdeTable .droite {
	text-align: right;
	border-right: 0;
}
#cmdeTable .basse {border: 0;}

/* Ce format est aussi utilisé dans la gestion du compte */
#table_cmde {width: 100%;}
#table_cmde th {text-align: center;}
#table_cmde td {padding: 0.5em;}
#table_cmde .contenant {
	padding: 0;
	vertical-align: top;
}
.adresse {float: left; width: 33%;}
#table_cmde table {
	width: 100%;
	height: 100%;
	margin-top: 0;
}
#table_cmde .droite {
	text-align: right;
	border-right: 0;
}
#table_cmde .basse {border: 0;}
#table_cmde .samp {padding: 0;}
#table_cmde .samp img {height: 50px;}

table.adresse {float:left; margin-right: 12px;}

/** L'inscription et la gestion du compte **
 *******************************************/
 .compteTable th, .compteTable td {padding: 3px;}
 .compteTable th {width: 11em;}
 form .long {width: 25em;}
 form .medium {width: 19em;}
 form .short {width: 7em;}

/** La liste des partenaires **
 ******************************/
.partenaire {margin-bottom: 15px;}
.partenaire .logo {
	display: block;
	float: left;
	width: 80px;
}
.partenaire .activite {
	float: left;
	margin-top: -15px;
	padding: 0 10px;
}
.partenaire .artisan {
	float:right;
	width: 150px;}
.partenaire .artisan div {
	margin-bottom: 5px;
	text-align:left;
}
.partenaire .artisan img {
	width: 60px;
	margin-left: 35px;
}
 

/************************
 * La colonne de droite *
 ************************/
#coldroite {
	width: 177px;
	height: 651px;
	float: right;
	margin-left: 0px;
	padding-left: 13px;
	padding-right: 3px;
}
/** L'encart panier **
**********************/
#zone_panier {
	margin: 10px 5px 0 0;
	padding: 3px;
}
#zone_panier p img{vertical-align: bottom;}
/** L'encart coupon **
**********************/
#zone_coupon {
	margin: 65px 5px 0 0;
	padding: 3px;
	padding-left: 8px;
	width: 160px;
}
#zone_coupon .titreencart {
	margin: -3px 0 0 -2px;
	font-size: 17px;
}
#zone_coupon img {
	width: 98px;
	height: 74px;
	margin-top: -5px;
	margin-bottom: -6px;
	vertical-align: middle;
}

#zone_coupon a span {
	font-size: 1.05em;
	margin-bottom: 1px;
}
/** La zone des logos partenaires **
************************************/
#zone_logos {
	margin-top: 70px;
	margin-bottom: 0px;
	width: 160px;
	text-align: center;
}


/*******************
 * La zone du pied *
 *******************/
#pied {
	width: 980px;
	color: #cccccc;
	text-align: center;
	padding: 4px 0;
	border-top: 1px solid #cccccc;
}
#pied img{height: 26px; vertical-align: middle;}

/** Le menu bas **
 *****************/
#menubas a {font: bold 0.9em Georgia, Times, serif;}