/* 
	DEFAULT STYLESHEET
	All pages inherrit from this stylesheet, so anything reusable, 
	site-wide or generic goes here.
*/

/* ------------------------------------------------------------------------
	HTML BODY tag and Page div
------------------------------------------------------------------------ */
* { margin: 0; padding: 0; border: 0; }

body
{
	color:#333;
	margin:0;
  	padding:0;
	font-family:Arial, Helvetica, sans-serif;
	text-align:center;
	background:#fff;	
}

#bg_accueil
{background:url(images/bg_continu.gif) repeat-x top left;}

#bg_int
{background:url(images/bg_int.gif) repeat-x top left;}

#container
{
	width:951px;
	margin:0 auto;
	text-align:left;
	background:url(images/taches_acc.gif) no-repeat 0 332px;
}

#container_int
{
	width:951px;
	margin:0 auto;
	text-align:left;
}

/* ----------------------------
   Globals
---------------------------- */

h1
{
	font-size:2.1em;
	margin:0;
	color:#4d4041;
	padding:0 0 30px 0;
}

h2
{
	font-size:1.2em;
	margin:0;
	color:#433738;
	padding:0 0 10px 0;
}

h3
{
	font-size:0.95em;
	margin:0;
	color:#ed1c24;
	padding:0 0 5px 0;
}

p
{
	font-size:1em;
	color:#4d4041;
	margin:0;
	padding:0 0 20px 0;
	line-height:1.6em;
}

input, select
{font-family: Arial, Helvetica, sans-serif;}

.gras
{font-weight:bold;}

.italic
{font-style:italic;}

.souligne
{text-decoration:underline;}

/* --------------------------------------------------------------- */
/* ---- Corps ---------------------------------------------------- */

/* -- entête ----------------------------------------------- */

#entete
{width:951px;}

/* --- logo --------------------------------- */

#zoneMenuPrincipal
{
	width:951px;
	background:url(images/menuPrincipal_bgCoinGau.gif) no-repeat top left;
}

#zoneMenuPrincipal img{display:block;}


#zoneMenuPrincipal ul
{
	list-style:none;
	margin:0 0 0 175px;
	padding:0;	
}

#zoneMenuPrincipal ul li
{
	float:left;
	font-size:1em;	
	margin:0;
	padding:0;	
}

/* --- Sous-menu -------------------------------------- */

#divSubMenus {
    text-align: left;
    position: absolute;
    left: 0;
    top:0;
	z-index: 9100;
	font-size: 0.9em;
}
#divSubMenus div {
	position: absolute;
	left: 0;
	top: 0;
	padding-top:0;
	width: 255px;
	z-index: 9100;
	display: none;
	cursor: pointer;
	background: #fff;
	
}
html>body #divSubMenus div 
{padding-top: 0px;}

#divSubMenus div div {
	position: relative;
	display: block;
	width: 255px;
	white-space: normal;
	border-top: none;
	background: none;
	
}
#divSubMenus a {
	display: block;
	height: 1%;
	padding:2px 10px;
	color: #605556;
	text-decoration: none;
	border-left:1px solid #a09394;
	border-right:1px solid #a09394;
}

#divSubMenus a.bordBas
{border-bottom:1px solid #a09394;}
#divSubMenus a.bordTop
{border-top:1px solid #a09394;}

#divSubMenus a.sub 
{background:url(images/submenu-arrow.gif) no-repeat 95% 6px !important;}

html>body #divSubMenus span, html>body #divSubMenus a 
{height: auto;}

#divSubMenus div.sub {
	padding:0;
	margin:0 0 0 2px;
	background: #fff;
}
#divSubMenus div.sub div {
	width: 160px !important;
}
#divSubMenus div.sub div a 
{padding:2px 10px;}

#divSubMenus a:hover 
{
	color:#fff;
	background:#ed1c24;
}

#divSubMenus a.sub:hover {
	background:#ed1c24 url(images/submenu-arrow_over.gif) no-repeat 95% 6px !important;
}

#mImpressionSMenu, #mImpressionSMenu div, #mExpositionSMenu, #mExpositionSMenu div
{width: 185px !important;}

#mAsystelSMenu, #mAsystelSMenu div
{width: 150px !important;}

/* -- longueur du sous-sous menu -- */
.mSubSMenu
{width: 160px !important;}

/* --- logo --------------------------------- */

div#logoCompagnie
{
	position:relative;
	width:951px;	
	z-index:20;
}

div#logoCompagnie img.logo
{
	position:absolute;
	top:13px;
	left:18px;
	display:block;
	margin:0;
}

#logoPrint
{display: none;}

/* --- Slideshow photos d'entête ----------------------------------------- */

#slideshow {
    position:relative;
    height:337px;
}

#slideshow IMG {
    position:absolute;
    top:0;
    left:0;
    z-index:8;
}

#slideshow IMG.active {
    z-index:10;
}

#slideshow IMG.last-active {
    z-index:9;
}

/* --- Photos d'entête page intérieure ----------------------------------------- */

#photoEntete 
{
    position:relative;
    height:211px;
}
#photoEntete img
{display:block;}

/* -------------------------------------------------------------------------- */
/* --- Zone de contenu ------------------------------------------------------- */

#zoneContenu
{
	width:951px;
	position:relative;
}

div#zoneContenu
{height:322px;}

html>body div#zoneContenu
{
	height:auto;
	min-height:322px;
}

/* ------------------------------------------------------------------------ */
/* -- Accueil ------------------------------------------------------------- */

/* -- boutons promos -------------------------------------- */
#boutons_promo
{
	position:absolute;
	top:0;
	left:0;
	width:403px;
}

#boutons_promo img{display:block;}


#boutons_promo ul
{
	list-style:none;
	margin:0;
	padding:0;	
}

#boutons_promo ul li
{
	float:left;
	margin:0;
	padding:0;	
}

/* -- description promo -------------- */

#promoDescript
{
	position:absolute;
	top:0;
	left:448px;
	width:322px;
	background:url(images/promo_cercle.gif) no-repeat top left;
	padding:0;
}

#promoText
{
    color:#fff;
    font-size:0.9em;
    width: 240px; 
    height: 190px;  
    margin: 0px; 
    padding: 40px 0px 0px 40px;
    text-align:justify;
}

#promoText p
{
    padding:0 0 5px;
    color:#ffffff !important;
}

#promoText h1, #promoText h2, #promoText h3, #promoText h4, #promoText h5, #promoText h6
{ color:#ffffff !important; }

div#promoDescript
{height:293px;}

html>body div#promoDescript
{
	height:auto;
	min-height:293px;
}

/*
#promoDescript h1
{
	color:#fff;
	padding:66px 24px 10px 24px;
	font-size:0.9em;
	font-weight:bold;
}

#promoDescript p
{
	color:#fff;
	padding:0 24px 10px 24px;
	font-size:0.9em;
}
*/

/* -- slogan ------------------- */
#slogan
{margin:63px 0 0 22px;}

#sloganPetit
{
	float:left;
	margin:-10px 0 0 14px;
}

/* ------------------------------------------------------------------------ */
/* -- Pages intérieures --------------------------------------------------- */

/* -- titres de section --------------------------- */

#titreSection
{
	width:951px;
	background:url(images/titre_section_bg.gif) no-repeat 10px 0;
}

#titreSection h1
{
	font-size:2.3em;
	color:#fff;
	padding:12px 0 0 0;
	margin:0;
}

/* -- fil d'ariane ------------------------- */

#filariane
{
	width:951px;
	border-bottom:1px solid #cac6c6;
	padding:12px 0 8px 0;
}

#filariane ul
{
	list-style:none;
	margin:0;
	padding:0 0 0 10px;
}

#filariane ul li
{
	float:left;
	margin:0;
	padding:0 10px 0 0;
}

#filariane a:link, #filariane a:visited, #filariane a:active
{color:#ed1c24;}
#filariane a:hover
{text-decoration:none;}

#boutonsFil {
float:right;
}

/* -- éléments de contenu ------------------------- */

#colGau
{
	width:209px;
	float:left;
	padding:20px 0 0 0;
}

#colDr
{
	width:742px;
	float:left;
	padding:0;
}

.contenu
{padding:23px 25px 0 25px;}

.contenuColGau
{padding:0 0 0 18px;}

.contenu ul
{
	list-style:none;
	margin:0;
	padding:0 0 24px 10px;
}

.contenu ul li
{
	margin:0;
	padding:0 0 5px 10px;
	background:url(images/dot.gif) no-repeat 0 6px;
}

.contenu a:link, .contenu a:visited, .contenu a:active
{color:#ed1c24;}
.contenu a:hover
{text-decoration:none;}
/* -- Colonne gauche --------------------------------------------- */

/* -- boîte description ------------ */

#zoneDescription
{
	width:191px;
	margin:99px 0 16px 0;
}

#zoneDescription h3
{padding:0 0 5px 5px;}

#boxDescription
{
	width:181px;
	background:#dddcdc;
	color:#433738;
	font-size:0.9em;
	padding:13px 5px 15px 5px;
	line-height:normal;
}

#boxDescription h1
{
	color:#433738;
	font-size:0.9em;
}

#boxDescription p
{
	color:#433738;
	font-size:0.9em;
	line-height:normal;
}

#boxDescription ul
{
	list-style:none;
	margin:0;
	padding:5px 5px 10px 5px;
}

#boxDescription ul li
{
	font-size:0.9em;
	margin:0;
	padding:0 0 0 7px;
	background:url(images/dot.gif) no-repeat 0 5px;
}

/* -- zone icônes ------------ */

#zoneIcones
{
	width:191px;
	border-top:1px solid #cac6c6;
	margin:0 0 30px 0;
}

.boxIcones
{
	width:191px;
	border-bottom:1px solid #cac6c6;
	padding:3px 0 2px 0;
}

.boxIcones img
{
	float:left;
	margin:0 7px 0 4px;
	vertical-align:middle;
}

.boxIcones p
{
	padding:3px 0 0 0;
	font-size:0.9em;
}

.boxIcones a.telechargement:link, .boxIcones a.telechargement:visited, .boxIcones a.telechargement:active
{
	color:#4d4041;
	text-decoration:none;
}
p.quebec
{
	color:#3052a7;
	text-decoration:none;
}
p.vert
{
	color:#237718;
	text-decoration:none;
}
p.economique
{
	color:#e14c12;
	text-decoration:none;
}
p.nordAmer
{
	color:#e11212;
	text-decoration:none;
}

.boxIcones a.telechargement:hover, .boxIcones a.quebec:hover, .boxIcones a.vert:hover, .boxIcones a.economique:hover, .boxIcones a.nordAmer:hover
{text-decoration:underline;}


/* -- Colonne droite --------------------------------------------- */

/* -- Page Catégories ---------------------- */

#tabCategories
{
	width:901px;
	margin:0 0 20px 0;
}

#tabCategories td
{
	padding:0 0 8px 0;
}

#tabCategories td p
{
	text-align:left;
	padding:0;
	margin:0;
	font-size:1.1em;
}

/* -- Page Fiche ---------------------- */

#zoneFiche
{
	width:732px;
	margin:0 0 0 10px;
	background:url(images/fiche_tacheCoinTD.gif) no-repeat top right;
}

/* -- boutons suivants et précédents ------------------------- */
#boutonsOptions
{
	width:693px;
	margin:10px 0 5px 29px;
}
#boutonsOptions img.bProdPrecedent
{
	float:left;
}
#boutonsOptions img.bProdSuivant
{
	float:right;
	margin:0 18px 0 0;
}
/* -- zone grande photo ------------------------- */

#zonePhoto
{
	width:732px;
	z-index:9;
	padding:0;
}

#boxPhoto
{
	position:relative;
	width:673px;
	border-top:1px solid #bec0bf;
	border-left:1px solid #bec0bf;
	border-right:1px solid #bec0bf;
	padding:0 0 0 0;
	margin:0 0 0 29px;
	z-index:10;
}

#boxPhoto img
{display:block;}

#boxPhoto p
{
	padding:7px 6px 0 6px;
	font-size:0.9em;
	line-height:normal;
}

#zonePhoto_bgBas
{margin:-75px 0 0 0;}

#loupe
{
	position:absolute;
	top:1px;
	left:638px;
}

/* -- zone outils ---------------- */

#boxOutils
{
	position:absolute;
	top:0;
	left:492px;
	width:195px;
	z-index:7;
}

/* -- bouton retour à la liste de produits ----------- */
.bRetour
{margin:0 0 10px 31px;}

/* ---------------------------------------------------------- */
/* -- Onglets pour la fiche d'un produit -------------------- */

#box
{
	width:673px;
	margin:0 0 10px 29px;
}

.zoneOngletsContenu
{
	width:671px;
	border-left:1px solid #4e4243;
	border-bottom:1px solid #4e4243;
	border-right:1px solid #4e4243;
	padding:15px 0;
}

.ongletsContenu
{padding:0 15px;}

/* -- galerie photos ------------------------- */

ul.gallery, ul.gallery2, ul.gallery3, ul.gallery4
{
	list-style: none;
	margin: 0 0 10px 10px;
}
	
ul.gallery li, ul.gallery2 li , ul.gallery3 li , ul.gallery4 li 
{
	display: block;
	float: left;
	margin: 0 16px 0 0;
}
		
ul.gallery li a, ul.gallery2 li a, ul.gallery3 li a, ul.gallery4 li a
{
	padding:0;
	display: block;
	border: 3px #cccccc solid;
	line-height: 0;
	margin:0 0 4px 0;
}
			
ul.gallery li a:hover, ul.gallery2 li a:hover, ul.gallery3 li a:hover, ul.gallery4 li a:hover { border: 3px #ed1c24 solid; }

/* ---------------------------------------------------------- */
/* --- Formulaire Infolettre -------------------- */

#formInfolettre
{margin:0 0 20px 0;}

.lesChamps label
{
	width:100px;
	font-size:1em;
	color:#4d4041;
	float:left;
	text-align:left;
}

.lesChamps input
{
	width:200px;
	float:left;
	margin:0 0 10px 0;
	border:1px solid #625455;
}

#formInfolettre input.ibEnvoyer
{margin:0 0 0 100px; }

textarea {border:1px solid #625455;}

.imgGauche 
{
    border:1px solid #DDDDDD;
    float:left;
    margin:5px 10px;
}

/* -------------------------------------------------------------------------- */
/* --- pied ----------------------------------------------------------------- */

#pied
{
	width:951px;
	padding:0 0 10px 0;
}

#pied_int
{
	width:951px;
	border-top:1px solid #cac6c6;
	padding:14px 0 10px 0;
}

#pied ul, #pied_int ul
{
	float:left;
	list-style:none;
	margin:0;
	padding:0;
}
#pied ul li, #pied_int ul li
{
	float:left;
	margin:0;
	padding:0 6px 0 0;
	color:#625455;
	font-size:0.9em;
}

#pied ul li.last, #pied_int ul li.last
{padding:0 0 0 0;}

#pied ul li a:link, #pied ul li a:visited, #pied ul li a:active, #pied_int ul li a:link, #pied_int ul li a:visited, #pied_int ul li a:active
{color:#625455;}
#pied ul li a:hover, #pied_int ul li a:hover
{text-decoration:none;}
/* -- zone partenaires --------------------------- */
#partenaires
{
	float:right;
	width:951px;
	padding:10px 0 20px 0;
	margin:0 0 20px 0;
	border-bottom:1px solid #cac6c6;
}

#partenaires img
{display:block;}


#partenaires ul
{
	float:right;
	list-style:none;
	margin:0;
	padding:0 14px 0 0;
}

#partenaires ul li
{
	float:left;
	margin:0;
	padding:0 0 0 20px;	
}

/* -- pastilles des nouveautés, promotions et liquidation apparaissant à coté du titre du produit -------- */

.iPastille
{
	vertical-align:middle;
	margin:0 0 0 5px;
}

/******************** slideshow *************/

#slideshow img 
{
    position:absolute;
    top:0;
    left:0;
    z-index:8;
}

#slideshow img.active 
{ z-index:10; }

#slideshow img.last-active 
{ z-index:9; }

 /* --- Produits nouveautés ------------------ */

 .product
 {
        border-bottom:1px solid #cac6c6;
        margin-bottom:25px !important;
        padding-bottom:15px;
 }