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

/* Global 
-----------------------------------------------------------------------------*/
/* Shadow  & Bottom */
#global div.shadow {
	display: block;
	width: 939px;
	height: 14px;
	background: url(../images/interface/main-shadow.gif) top right no-repeat;
}
#global div.bottom {
	display: block;
	width: 939px;
	height: 22px;
	background: url(../images/interface/global-bottom.gif) top left no-repeat;
}

/* Title */
#global div.titlebar {
	display: block;
	width: 939px;
	height: 34px;
	background: url(../images/interface/global-title.gif) top left no-repeat;
}
#global div.titlebar p { margin: 0; }
#global div.titlebar p.title {
	display: block;
	height: 34px;
	line-height: 34px;
	padding-left: 55px;
	font-size: 1.20em;
	color: #FFF;
	font-weight: bold;
}

/* Title 2 */
#global div.titlebar2 {
	display: block;
	width: 939px;
	height: 23px;
	background: url(../images/interface/global-title2.gif) top left no-repeat;
}
#global div.titlebar2 p { margin: 0; }
#global div.titlebar2 p.title {
	display: block;
	height: 23px;
	line-height: 23px;
	padding-left: 35px;
	font-size: 1.20em;
	color: #FFF;
	font-weight: bold;
}


/* Etapes
-----------------------------------------------------------------------------*/
#etapes { 
	display: block; 
	width: 939px; 
	height: 60px;
	background: url(../images/interface/panier/etapes.gif) 0 0 no-repeat;
}
#etapes[class=etape-1] { background-position: 0 0; }
#etapes[class=etape-2] { background-position: 0 -60px; }
#etapes[class=etape-3] { background-position: 0 -120px; }
#etapes[class=etape-4] { background-position: 0 -180px; }
#etapes[class=etape-5] { background-position: 0 -240px; }
#etapes[class=etape-6] { background-position: 0 -300px; }

#etapes li {
	float: left;
	display: inline-block;
	height: 50px;
	/* IE 6 */
	width: auto !important;
	width: 0.1em;
	white-space: nowrap;
}
#etapes a:link, #etapes a:visited, #etapes a:hover {
	display: block;
	height: 50px;
	line-height: 50px;
	text-align: center;
	font-size: 1.30em;
	color: #FFF;
	text-decoration: none;
}
	
	#etapes li.etape-1 a:link, #etapes li.etape-1 a:visited, #etapes li.etape-1 a:hover { width: 156px; } 
	#etapes li.etape-2 a:link, #etapes li.etape-2 a:visited, #etapes li.etape-2 a:hover { width: 155px; } 
	#etapes li.etape-3 a:link, #etapes li.etape-3 a:visited, #etapes li.etape-3 a:hover { width: 158px; } 
	#etapes li.etape-4 a:link, #etapes li.etape-4 a:visited, #etapes li.etape-4 a:hover { width: 157px; } 
	#etapes li.etape-5 a:link, #etapes li.etape-5 a:visited, #etapes li.etape-5 a:hover { width: 156px; } 
	#etapes li.etape-6 a:link, #etapes li.etape-6 a:visited, #etapes li.etape-6 a:hover { width: 157px; } 
	

/* Etapes : Nav
-----------------------------------------------------------------------------*/
#etapes-nav { display: block; width: 939px; height: 70px; }

/* Suivant */
#etapes-nav p.suivant { float: right; display: block; width: 103px; height: 70px; }
#etapes-nav p.suivant a {
	display: block;
	width: 103px;
	height: 70px;
	background: url(../images/interface/panier/etapes-suivant.gif) top left no-repeat;
}

/* Total */
#etapes-nav p.total { 
	float: right; 
	display: block; 
	width: 125px; 
	height: 35px;
	padding: 25px 0 0 15px;
	background: url(../images/interface/panier/etapes-total.gif) top left no-repeat;
	font-size: 1.70em;
	color: #BDFF33;
}

/* Precedent */
#etapes-nav p.precedent { float: left; display: block; width: 114px; height: 70px; }
#etapes-nav p.precedent a {
	display: block;
	width: 114px;
	height: 70px;
	background: url(../images/interface/panier/etapes-precedent.gif) top left no-repeat;
}


	
/* Panier : Details
-----------------------------------------------------------------------------*/
#panier-details { display: block; width: 939px; margin-bottom: 10px; }

/* Title */
#panier-details div.titlebar p.title { background: url(../images/interface/panier/panier-details-title-picto.gif) 11px 11px no-repeat; }

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

/* Table */
#panier-details table { width: 937px; }
#panier-details th {
	height: 28px;
	line-height: 28px;
	background: url(../images/interface/panier/panier-th-1.gif) top left repeat-x;
	border-right: 1px solid #477785;
	text-align: center;
	color: #FFF;
}
	#panier-details th.remove { width: 31px; }
	#panier-details th.pu { width: 105px; }
	#panier-details th.qte { width: 84px; }
	#panier-details th.pt { width: 92px; border-right: 0; }
	
#panier-details td {
	height: 30px;
	line-height: 30px;
	padding-left: 10px;
	border-top: 1px solid #D4D4D4;
	border-right: 1px solid #D4D4D4;
	text-align: left;
}
	#panier-details td.produit { padding-left: 20px; background: url(../images/interface/puce-5.gif) 10px 14px no-repeat; }
	#panier-details td.remove { padding-left: 8px; }
	#panier-details td.pu { padding: 0; text-align: center; font-size: 1.10em; color: #7DA200; }
	#panier-details td.qte { padding-left: 7px; }
	#panier-details td.pt { padding: 0; border-right: 0; text-align: center; font-size: 1.10em; color: #7DA200; }
	
	
#panier-details td.remove a { 
	display: block; 
	width: 17px;
	height: 15px;
	background: url(../images/interface/panier/btn-remove.gif) top left no-repeat;
}
#panier-details td.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;
}
#panier-details td.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;
}
#panier-details td.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;
}

/* Total */
#panier-details div.total {
	display: block;
	width: 328px;
	height: 44px;
	padding-left: 611px;
	background: url(../images/interface/panier/panier-total.gif) top right no-repeat;
}
#panier-details div.total p.total {
	float: left;
	display: block;
	width: 189px;
	height: 35px;
	line-height: 35px;
	padding-right: 10px;
	text-align: right;
	font-size: 1.10em;
	color: #8C8C8C;
	font-weight: bold;
}
#panier-details div.total p.prix {
	float: left;
	display: block;
	width: 107px;
	height: 35px;
	line-height: 35px;
	padding-right: 15px;
	text-align: right;
	font-size: 1.30em;
	color: #FFF;
	font-weight: bold;
}


/* Panier : Options
-----------------------------------------------------------------------------*/
#panier-options { display: block; width: 939px; margin-bottom: 10px; }

/* Title */
#panier-options div.titlebar2 p.title { background: url(../images/interface/panier/panier-options-title-picto.gif) 12px 4px no-repeat; }

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

/* Table */
#panier-options table { width: 937px; }
#panier-options th {
	height: 28px;
	line-height: 28px;
	background: url(../images/interface/panier/panier-th-1.gif) top left repeat-x;
	border-right: 1px solid #477785;
	text-align: center;
	color: #FFF;
}
	#panier-options th.produit { border-right: 0; }
	#panier-options th.select { width: 220px; }
	#panier-options th.pu { width: 105px; }
	#panier-options th.pt { width: 92px; border-right: 0; }
	
#panier-options td {
	height: 30px;
	line-height: 30px;
	padding-left: 10px;
	border-top: 1px solid #D4D4D4;
	border-right: 1px solid #D4D4D4;
	text-align: left;
}
	#panier-options td.produit { line-height: normal; padding-left: 20px; background: url(../images/interface/puce-5.gif) 10px 14px no-repeat; border-right: 0; }
	#panier-options td.select { padding: 0; }
	#panier-options td.pu { padding: 0; text-align: center; font-size: 1.10em; color: #7DA200; }
	#panier-options td.pt { padding: 0; border-right: 0; text-align: center; font-size: 1.10em; color: #7DA200; }

    #panier-options td.produit strong { line-height: 30px; }

/* Total */
#panier-options div.total {
	display: block;
	width: 328px;
	height: 44px;
	padding-left: 611px;
	background: url(../images/interface/panier/panier-total.gif) top right no-repeat;
}
#panier-options div.total p.total {
	float: left;
	display: block;
	width: 189px;
	height: 35px;
	line-height: 35px;
	padding-right: 10px;
	text-align: right;
	font-size: 1.10em;
	color: #8C8C8C;
	font-weight: bold;
}
#panier-options div.total p.prix {
	float: left;
	display: block;
	width: 107px;
	height: 35px;
	line-height: 35px;
	padding-right: 15px;
	text-align: right;
	font-size: 1.30em;
	color: #FFF;
	font-weight: bold;
}

img.optionimgdescription {
    padding-left:10px;
}

.tip {
    width: 400px;
    background-color: #D4D4D4;
    border: 1px solid #8C8C8C;
}

.tip-title {
    padding: 5px;
}

.checkboxoption{
    margin-left:5px;
    margin-right:5px;
}


/* Panier
-----------------------------------------------------------------------------*/
#panier {
	position: relative;
	z-index: 1;
	display: block;
	width: 230px;
	height: 86px;
        float:right;
        margin-top:65px;
	background: url(../images/interface/commande/header-panier.gif) top left no-repeat;
}
#panier p { margin: 0; }

/* Articles */
#panier a.articles {
	position: absolute;
	padding-top: 40px;
    cursor: pointer;
	left: 0;
	display: block;
	width: 84px;
	text-align: center;
	color: #FFF;
    background: url(../images/interface/menu-span.gif) 70px 46px no-repeat;
    text-decoration: none;
}
#panier a.articles strong { color: #BDFF33; font-weight: normal; }

/* Total */
#panier p.total {
	position: absolute;
	top: 30px;
	right: 20px;
	display: block;
	width: 125px;
	text-align: right;
	font-size: 1.80em;
	color: #BDFF33;
}

/* Commander */
#panier p.commander {
	position: absolute;
	bottom: 6px;
	right: 6px;
	display: block;
	width: 131px;
	height: 20px;
	font-size: 0.90em;
}
	#panier p.commander a:link, #panier p.commander a:visited {
		display: block;
		width: 131px;
		height: 20px;
		line-height: 20px;
		text-align: center;
		color: #FF9146;
		text-decoration: none;
	}
	#panier p.commander a:hover { color: #BDFF33; }

/* Details */
#panier div.panel { display: block; width: 224px; height: 60px; }
#panier div.details {
	position: absolute;
	z-index: 1;
	top: 57px;
	left: 0;
	display: block;
	visibility: hidden;
	width: 224px;
	padding-top: 11px;
	background: url(../images/interface/header-panier-details.gif) top left no-repeat;
}
#panier div.details div.content { display: block; width: 224px; padding-top: 8px; background-color: #5A5A5A; }
#panier div.details table { width: 205px; margin-left: 10px; font-size: 0.90em; color: #CCC; }
#panier div.details td.prix { text-align: right; }
#panier div.details td.total { font-size: 1.20em; font-weight: bold; }
#panier div.details td.totalprix { text-align: right; font-size: 1.20em; color: #BDFF33; font-weight: bold; }
#panier div.details td.sep { height: 15px; background: url(../images/interface/header-panier-sep.gif) 0 6px repeat-x; font-size: 0; }
#panier div.details td a:link, #panier div.details td a:visited { color: #CCC; text-decoration: none; }
	#panier div.details td a:hover { color: #FF9146; }

#panier div.details p.action {
	display: block;
	width: 224px;
	height: 18px;
	margin-top: 7px;
	background-color: #333;
	border-top: 1px solid #505050;
}
#panier div.details p.action a:link, #panier div.details p.action a:visited {
	display: block;
	width: 87px;
	height: 18px;
	line-height: 18px;
	padding-left: 137px;
	background: url(../images/interface/header-panier-action.gif) 120px 4px no-repeat;
	font-size: 0.90em;
	color: #CCC;
	text-decoration: none;
}
	#panier div.details p.action a:hover { color: #BDFF33; }

/* Camion */
#camion {
	position: fixed;
	top: -9999px;
	left: -9999px;
	z-index: 999;
	display: block;
	width: 475px;
	height: 230px;
	background: url(../images/interface/camion.png) top left no-repeat;
}
#camion div.content {
	position: relative;
	display: block;
	width: 240px;
	height: 170px;
	padding: 45px 163px 0 55px;
}
#camion div.message { font-size: 1.20em; font-weight: bold; }
#camion div.actions {
	position: absolute;
	bottom: 70px;
	left: 40px;
}
#camion p.confirm { float: left; display: block; width: 96px; height: 25px; margin-left:15px; }
	#camion p.confirm a {
		display: block;
		width: 96px;
		height: 25px;
		background: url(../images/interface/camion-confirm.gif) top left no-repeat;
	}
#camion p.cancel { float: left; display: block; width: 96px; height: 25px; }
	#camion p.cancel a {
		display: block;
		width: 96px;
		height: 25px;
		background: url(../images/interface/camion-cancel.gif) top left no-repeat;
	}