@charset "utf-8";
/********************************************************
	CSS Document / produits - Piecesavenue par Skalpel.fr
********************************************************/

/* Produits
-----------------------------------------------------------------------------*/
#produits { display: block; width: 696px; }

/* Title */
#produits div.titlebar h1.title { background: url(../images/interface/home/marques-title-picto.gif) 10px 7px no-repeat; }

/* Container */
#produits div.container {
	display: block;
	width: 694px;
	border-right: 1px solid #999;
	border-left: 1px solid #999;
}

/* Pathway */
#produits div.pathway {
	padding: 5px 10px;
	font-size: 0.90em;
	color: #B61212;
}
#produits div.pathway a:link, #produits div.pathway a:visited { color: #B61212; text-decoration: none; }
	#produits div.pathway a:hover { color: #8BB719; }

#camion p.confirm { float: left; display: block; width: 101px; height: 35px; margin-left:15px; }
#camion p.confirm a {
    display: block;
    width: 101px;
    height: 35px;
    background: url(../images/interface/panier-poursuivre.gif) top left no-repeat;
}
#camion p.cancel { float: left; display: block; width: 101px; height: 35px; margin-left:5px; }
#camion p.cancel a {
    display: block;
    width: 101px;
    height: 35px;
    background: url(../images/interface/panier-terminer.gif) top left no-repeat;
}

/* Categories
-----------------------------------------------------------------------------*/
#categories { float: left; display: block; width: 160px; }

/* Container */
#categories div.container {
	display: block;
	width: 130px;
	padding: 15px 17px 20px 5px;
	background: #79A5AE url(../images/interface/produits/categories-bg.gif) top left no-repeat;
	border: 0;
}
#categories div.bottom {
	display: block;
	width: 160px;
	height: 18px;
	background: url(../images/interface/produits/categories-bottom.gif) top left no-repeat;
	font-size: 0;
}

/* 1er niveau - rubriques */
#categories ul.rubriques {}
#categories ul.rubriques > li {
	width: 130px;
	margin-bottom: 15px;
	font-weight: bold;
}
#categories ul.rubriques a:link, #categories ul.rubriques a:visited, #categories ul.rubriques a:hover {
	display: block;
	width: 120px;
	padding-left: 10px;
	color: #FFF;
	text-decoration: none;
}


/* 2eme niveau - familles */
#categories ul.familles { padding-top: 5px; margin-left: 15px; font-size: 0.90em; }
#categories ul.familles li { width: 115px; margin: 0; font-weight: normal; }
a.notopen,#categories ul.familles a.notopen, #categories ul.familles a.notopen {
	width: 105px;
	color: #274043;
}
	#categories ul.familles a:hover { color: #FFF; }
	#categories ul.familles a strong { color: #B61212; font-weight: normal; }
a.open, #categories ul.familles li.active > a.open, #categories ul.familles li.active > a.open {
	color: #FFF;
}

#categories ul.famillesclose { padding-top: 5px; margin-left: 15px; font-size: 0.90em; }
#categories ul.famillesclose li { width: 115px; margin: 0; font-weight: normal; }
a.notopen,#categories ul.famillesclose a.notopen, #categories ul.famillesclose a.notopen {
	width: 105px;
	color: #274043;
}
	#categories ul.famillesclose a:hover { color: #FFF; }
	#categories ul.famillesclose a strong { color: #B61212; font-weight: normal; }
a.open, #categories ul.famillesclose li.active > a.open, #categories ul.famillesclose li.active > a.open {
	color: #FFF;
}

/* 3eme niveau - produits */
#categories ul.produits { margin-left: 10px; }
#categories ul.produits li { width: 105px; }
#categories ul.produits a:link, #categories ul.produits a:visited {
	width: 95px;
	background: url(../images/interface/produits/categories-produits-normal.gif) 2px 5px no-repeat !important;
	color: #274043;
}
#categories ul.active a:link, #categories ul.active a:visited { color: #FFF !important; }
#categories ul.produits a:hover { color: #FFF; }

 ul.famillesclose{ display:none }

 img.family_scroll{ padding: 5px 5px 0 5px; cursor: pointer; }
 img._family_scroll { padding: 5px; }

 img.photominiature{ max-height: 143px; max-width: 143px; }
 img.photodetail{ max-height: 207px; max-width: 207px; }
 img.photodetailmini{ height: 30px; width: 30px; }
 div.containerphoto{ height: 30px; width: 30px; border: 1px solid #AED743; cursor: pointer; }
a.photodetailcontainer{ text-decoration: none; }
#categories ul.famillesclose li { font-weight: normal; }

/* Area
-----------------------------------------------------------------------------*/
#area { float: left; display: block; width: 530px; }

/* Categories */
#area div.categories {
	margin: 10px 0 5px;
	font-size: 1.50em;
	color: #999;
}
#area div.categories strong { color: #92BA27; font-weight: normal; }

/* Pagination */
#area ul.pages {
	float: right;
	display: block;
	height: 20px;
	margin-right: 20px;
	background: #999 url(../images/interface/produits/area-pages-bg.gif) top left repeat-x;
}
#area ul.pages li {
	float: left;
	display: inline-block;
	height: 20px;
	/* IE 6 */
	width: auto !important;
	width: 0.1em;
	white-space: nowrap;
}
#area ul.pages a:link, #area ul.pages a:visited {
	display: block;
	height: 20px;
	line-height: 20px;
	padding: 0 3px;
	color: #FFF;
	text-decoration: none;
	/* IE 6 */
	width: auto !important;
	width: 0.1em;
	white-space: nowrap;
}
	#area ul.pages a:hover { color: #FF9146; }
#area ul.pages li.precedent a:link, #area ul.pages li.precedent a:visited, #area ul.pages li.precedent a:hover {
	width: 20px !important;
	padding: 0;
	background: url(../images/interface/produits/area-pages-precedent.gif) top left no-repeat;
}
#area ul.pages li.suivant a:link, #area ul.pages li.suivant a:visited, #area ul.pages li.suivant a:hover {
	width: 20px !important;
	padding: 0;
	background: url(../images/interface/produits/area-pages-suivant.gif) top left no-repeat;
}


/* Listing
-----------------------------------------------------------------------------*/
#listing {}

/* Produit */
#listing div.produit {
	position: relative;
	float: left;
	display: block;
	width: 146px;
	height: 241px;
	padding: 10px 11px 10px 8px;
	margin: 0 9px 7px 0;
	background: url(../images/interface/produits/listing-produit-bg.gif) top left no-repeat;
	color: #999;
}
#listing div.produit p { margin: 0; }
#listing div.produit div.visuel {
	position: relative;
	display: block;
	width: 143px;
	height: 143px;
	margin-bottom: 4px;
	background-color: #FFF;
	border: 1px solid #CCC;
	text-align: center;
}
#listing div.produit p.promo {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 62px;
	height: 62px;
	background: url(../images/interface/produits/sticker-promo.gif) top left no-repeat;
}
#listing div.produit p.remise {
	position: absolute;
	top: 110px;
	left: 0;
	display: block;
	width: 52px;
	height: 31px;
	line-height: 25px;
	background: url(../images/interface/produits/listing-produit-remise.gif) top left no-repeat;
	font-size: 1.30em;
	color: #FFF;
	font-weight: bold;
}
#listing div.produit p.nom { display: block; height: 26px; line-height: 1.10em; overflow: hidden; }
#listing div.produit p.prix { line-height: 1.10em; font-size: 1.70em; color: #8BB719; font-weight: bold; }
#listing div.produit p.original { font-size: 0.90em; text-decoration: line-through; }

#listing div.produit p.prix a, #listing div.produit p.prix a:hover, #listing div.produit p.prix a:visited {
    color: #8BB719;
    text-decoration:none;
}

#listing div.produit p.original a, #listing div.produit p.original a:hover, #listing div.produit p.original a:visited {
    color: #999;
    text-decoration:none;
}

#listing div.produit p.nom a, #listing div.produit p.nom a:hover, #listing div.nom p.original a:visited {
    color: #999;
    text-decoration:none;
}

#listing div.produit div.actions {
	position: absolute;
	bottom: 16px;
	display: block; 
	height: 26px; 
}
#listing div.produit p.detail { float: left; display: block; width: 73px; height: 19px; margin: 6px 6px 0 0; }
	#listing div.produit p.detail a:link, #listing div.produit p.detail a:visited {
		display: block;
		width: 73px;
		height: 19px;
		background: url(../images/interface/home/btn-details.gif) 0 0 no-repeat;
	}
	#listing div.produit p.detail a:hover { background-position: 0 -19px; }
#listing div.produit p.panier { float: left; display: block; width: 51px; height: 26px; }
	#listing div.produit p.panier a:link, #listing div.produit p.panier a:visited, #listing div.produit p.panier a:hover {
		display: block;
		width: 51px;
		height: 26px;
		background: url(../images/interface/produits/btn-panier.gif) top left no-repeat;
	}


/* Details
-----------------------------------------------------------------------------*/
#details { 
	display: block; 
	width: 500px; 
	padding: 10px 0 15px 10px;
	background: #F0F0F0;
	border: 1px solid #ccc;
	/*background: url(../images/interface/produits/details-bg.gif) top left no-repeat; */
}
#details p { margin: 0; }

/* Visuel */
#details div.visuel {
	position: relative;
	float: left;
	display: block;
	width: 209px;
	height: 210px;
	background-color: #FFF;
	border: 1px solid #CCC;
	text-align: center;
  margin-bottom: 8px;
}
#details p.promo {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 62px;
	height: 62px;
	background: url(../images/interface/produits/sticker-promo.gif) top left no-repeat;
}
#details p.remise {
	position: absolute;
	top: 165px;
	left: 0;
	display: block;
	width: 65px;
	height: 36px;
	line-height: 30px;
	background: url(../images/interface/produits/details-remise.gif) top left no-repeat;
	font-size: 1.50em;
	color: #FFF;
	font-weight: bold;
}

/* Description */
#details div.description {
	position: relative;
	float: right;
	display: block;
	width: 246px;
	padding: 10px;
	background-color: #FFF;
	border: 1px solid #CCC;
 	margin-right: 12px;
	
}
#details p.nom { font-size: 1.80em; color: #999; }
#details p.ref { margin-bottom: 7px; font-size: 0.90em; color: #59A3CC; }
#details div.descriptif { font-size: 0.90em; }

#details div.options {
	margin: 15px 0 15px 0;
	display: block;
	width: 246px;
	height: 45px;
}
#details div.options div.prix { float: right; display: block; width: 220px; height: 30px; }
#details div.options p.prix { font-size: 1.70em; color: #8BB719; font-weight: bold; float: right; }
#details div.options p.original { text-decoration: line-through; }

/* Actions */
#details div.actions {
    float: right;
	display: block;
	width: 210px;
	height: 50px;
}
#details div.actions div.qte {
	display: block;
	float: left;
	width: 145px;
	padding-top: 8px;
}
#details div.actions div.qte label { float: left; margin-right: 7px; font-size: 1.10em; color: #8BB719; font-weight: bold; }
#details div.actions div.qte input[type=text] {
    float: left;
    width: 26px;
    padding: 0 2px 0;
    margin: 0 7px;
    background-color: #FFF;
    border: 1px solid #CCC;
    font-family: Arial, Verdana, Helvetica, sans-serif;
    text-align: center;
    font-size: 0.90em;
    color: #666;
}
#details div.actions div.qte a.minus {
    float: left;
    display: block;
    width: 12px;
    height: 12px;
    margin-top: 2px;
    background: url(../images/interface/panier/btn-minus.gif) top left no-repeat;
}
#details div.actions div.qte a.plus {
    float: left;
    display: block;
    width: 12px;
    height: 12px;
    margin-top: 2px;
    background: url(../images/interface/panier/btn-plus.gif) top left no-repeat;
}
#details div.actions p.panier { float: left; display: block; width: 61px; height: 32px; }
#details div.actions p.panier a {
    display: block;
    width: 61px;
    height: 32px;
    background: url(../images/interface/produits/btn-panier-big.gif) top left no-repeat;
}

    
/* Medias */
#details div.medias {
	clear: left;
	display: block;
	width: 209px;
	height: 31px;
}
#details div.medias ul {}
#details div.medias li {
	float: left;
	display: inline-block;
	width: 31px;
	height: 31px;
	margin-right: 4px;
}
#details div.medias li a:link, #details div.medias li a:visited {
	display: block;
	width: 30px;
	height: 30px;
	border: 1px solid #CCC;
}

#details div.medias li.active a:link, #details div.medias li.active a:visited, #details div.medias li.active a:hover,
#details div.medias li a:hover { border-color: #AED743; }

#details p.retour {
    display: block;
	width: 216px;
	height: 22px;
    margin-top: 7px;
}
#details p.retour a {
    display: block;
	width: 216px;
	height: 22px;
	background: url(../images/interface/produits/bouton-retour-liste.gif) top left no-repeat;
}