/*
 * Urban locker - PRODUCTS
 *
 * @author Christophe Porteneuve <christophe@ciblo.net>
 * @author Julien Vignolles <julien@ciblo.net>
 * @author Thomas Lecavelier <thomas@ciblo.net>
 * @author Gregory Jaklimovitch <gregory@ciblo.net>
 * @legals © 2008-2009 Ciblo SA.
 */

/* productBlock */

#all .firstBlock { margin: 0; clear: both; }

.productBlock { 
	float: left; position: relative; width: 15em; height: 21em; z-index: 1;
	margin: 0 0 2em 0.5em; padding-bottom: 1em; border: 1px solid #ccc; text-align: center; 
	background-color: white;
}
.productBlock:hover { border-color: #44474b; }
.productBlock .photo { 
	display: block; padding: 1em 0.73em;
	overflow: hidden; position: relative;
}
.productBlock .photo, .productBlock .photo img { width: 13.5em; height: 13.5em; }
.productBlock .photo img.main { z-index: 1; }
.productBlock .photo .hover { display: none; }
.productBlock .photo .hover img { position: absolute; top: 1em; left: 0.73em; z-index: 2; }
.productBlock .photo .hover span {
	font-size: 11px; position: absolute; bottom: 0.9em; left: 0; z-index: 3;
	height: 2.6em; line-height: 1.3em; width: 11.27em; color: white; text-align: left;
	overflow: hidden; margin: 0 0.67em; padding: 0 0.5em;
	opacity: 0.6; filter: alpha(opacity=60); background: black;
}
.productBlock .photo:hover .hover { display: block; }
.productBlock .photo .outOfStock {
	position: absolute; right: 0.73em; bottom: 1em; width: 6em; height: 6em; z-index: 3;
	background: transparent url(../images/img_out_of_stock.gif) right bottom no-repeat;
}

.productBlock .separator {
	display: block; width: 13.5em; height: 1px; line-height: 1px; margin: 0 0.73em 0.5em;
	background: transparent url(../images/bg_border_product.gif) left bottom repeat-x;
}

.productBlock .productDescrip { 
	position: absolute; left: 0; bottom: 0; z-index: 2; width: 100%; padding-bottom: 0.1em;
}
.productBlock a { display: block; width: 100%; }
.productBlock .fn {
	font-size: 11px; font-weight: normal;
	line-height: 1.4em; height: 1.4em; overflow: hidden;
}
.productBlock .fn a { color: #71747b; }
.productBlock .brand { font-size: 11px; }
.productBlock .fullprice a { font-size: 12px; color: #b3860d; }
.productBlock .fullprice a:hover { text-decoration: none; }
.productBlock .fullprice .discountRate {
	font-size: 14px; position: absolute; bottom: 13.7em; right: 0.3em;
	width: 3.15em; height: 1.8em; line-height: 1.8em; font-weight: bold; text-align: center; color: white;
	background: transparent url(../images/product_discount_rate_bg.gif) right top no-repeat;
}
.productBlock .fullprice .discountPrice { text-decoration: line-through; margin-right: 0.5em; }
.productBlock .fullprice .from { font-size: 9px; }
.productBlock .fullprice .price { font-size: 17px; font-weight: bold; }

/* Next thumb */
.next { height: 22em; padding: 0; }
.next .prev_page { display: none; }
.next a { padding: 1em; width: auto; height: auto; text-decoration: none; }
.next a span.top {
	display: block; width: 13em; height: 20em; padding: 0;
	background: #dcd7d7 url(../images/bg_listing_next.png) left bottom repeat-x;
}
.next a span.top span {
	display: block; font-size: 16px; padding: 7em 0 0; text-align: center; width: 100%;
	background: transparent url(../images/img_listing_next_arrow.gif) center 3em no-repeat;
	color: #807b7b;
}
.next a:hover span.top span {
	background-image: url(../images/img_listing_next_arrow_hover.gif); color: #a98011;
}


/* productContainer */
#productContainer { position: relative; width: 100%; }
/* photoContainer */
#photoContainer { float: left; width: 31em; position: relative; z-index: 1; }
#photo { display: block; width: 29.6em; padding: 0.5em; border: 1px solid #ccc; }
#photo #photoZone { position: relative; width: 29.6em; height: 29.6em; }
#photo .zoom { 
	padding: 0 2em; font-size: 11px; line-height: 2em; height: 2em;
	background: transparent url(../images/icon_product_zoom.gif) left 0.4em no-repeat; 
}
#photo .zoom span { font-weight: bold; }

#photoZone.zoomed { cursor: none; }
#photoZone #reticulum { 
	position: absolute; left: 0; top: 0; z-index: 4243;
	width: 2em; height: 2em; opacity: 0.3; filter: alpha(opacity=30); display: none;
	border: 1px solid gray; background: white none repeat scroll 0;
}
#photoZone.zoomed #reticulum { display: block; }

#photoZone img.photoView { position: absolute; font-size: 10px; width: 29.6em; height: 29.6em; }
#photoZone #previewZoom { 
	position: absolute; left: 32em; top: -0.6em; z-index: 3;
	background-color: white; padding: 0 5em; width: 32.9em; height: 32.9em;
}
#photoZone #previewZoom .container {
	position: relative; overflow: hidden; width: 32.8em; height: 32.8em;
	border: 1px solid #dedada;
}
#photoZone #previewZoom .container img { position: absolute; }
#previewZoom .spinner {
	position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 4242;
	background: white url(../images/spinner_large.gif) center center no-repeat;
}
#previewZoom .spinner p {
	margin-top: 60%; font-size: 1.4em; font-weight: bold; text-align: center; color: #666;
}


/* carousel */
#carousel { font-size: 10px; margin-top: 1em; overflow: hidden; }
#carousel ul { float: left; position: relative; top: 0; left: 0; text-align: left; }
#carousel ul li { float: left; height: 7.3em; width: 7.3em; padding-right: 0.6em; } /* padding-right, used Carousel JS stuff*/
#carousel ul li a { display: block; float: left; border: 1px solid #ccc; }
#carousel ul li a:hover { border-color: #44474b; }
#carousel ul img { float: left; height: 7em; width: 7em; vertical-align: middle; }
#carousel .container { overflow: hidden; position: relative; width: 31.6em; } /* width, used by Carousel JS stuff */
#carousel .buttons { display: block; padding: 0.4em 0 0; }
#carousel .buttons a {
	float: left; padding: 0.3em 1.5em; width: 12.4em; height: 1.5em; line-height: 1.5em;
	text-transform: uppercase; text-decoration: underline; color: white;
	background: #272727 url(../images/icon_arrow_prev.gif) 0.5em 0.6em no-repeat;
}
#carousel .buttons a:hover { background-color: #4d4d4d; }
#carousel .buttons .next {
	float: right; text-align: right;
	background-image: url(../images/icon_arrow_next.gif); background-position: 14.5em 0.6em;
}
#all #carousel .inactive, #all #carousel .inactive:hover,
#all #carousel .previous_button_disabled, #all #carousel .next_button_disabled {
	cursor: default; color: #adadad;
}

/* descripContainer */
#descripContainer {
	float: right; display: inline; position: relative; z-index: 0;
	margin-right: 5em; width: 36em; font-size: 11px;
}
#descripContainer .networks { position: absolute; top: 0; right: 0; z-index: 0; width: 108px; }
#descripContainer .networks a { display: inline-block; }
#descripContainer .networks span { display: block; color: silver; text-align: center; }
#descripContainer .brand a:hover { text-decoration: none; }
#descripContainer .brand a:hover span { text-decoration: underline; }
#descripContainer .edito { 
	margin: 1.5em 0; padding-bottom: 1.5em; border-bottom: 1px dotted #ccc; 
}
#descripContainer .edito .description { font-size: 12px; margin-bottom: 1em; width: 26em; }
#descripContainer .edito .info span { font-weight: bold; }
#descripContainer .linksContainer { text-align: center; margin-top: 2em; }
#descripContainer .linksContainer a:hover { color #a98011; }

/* addToCart */
#reloadPriceContainer { margin-top: 1em; }
#reloadPriceContainer .availability { font-weight: bold; }
#reloadPriceContainer .shopReference { font-size: 10px; }

/* productPrice */
#addToCart .productPrice { float: left; display: inline; width: 18em; margin-top: 1.5em; }
#addToCart .productPrice p { font-size: 12px; }
#addToCart .productPrice .price { font-size: 19px; color: #a98011; }
#addToCart .productPrice .regularPrice span { text-decoration: line-through; }
#addToCart .imgBtnContainer { float: right; margin-bottom: 0; }
#addToCart .field { float: left; }
#addToCart .field label { font-weight: bold; }
#addToCart .field select { width: 10em; padding: 1px; border: 1px solid #dedada; }
#addToCart .sizes { float: right; width: 17.5em; }
#addToCart .sizes a {
	display: inline-block; font-size: 12px; padding-left: 2em; height: 1.6em; line-height: 1.6em;
	background: transparent url(../images/icon_sizes.gif) left center no-repeat;
	text-decoration: underline; text-align: center;
}
#addToCart .sizes a:hover { color: #a98011; }

/* assets */
.assets {
	clear: both; margin-top: 1.5em; padding-top: 1.5em; border-top: 1px dotted #ccc;
}
.assets .asset {
	float: left; display: inline; border: 1px solid white;
	height: 3.6em; line-height: 3.6em; width: 13em; padding-left: 3.5em;
}
.assets .asset.loyalty { line-height: normal; width: 15.3em; }
.assets .asset.loyalty p { padding-top: 0.5em; }
.assets a { text-decoration: underline; }
.assets a:hover { color: #a98011; }
.assets span { font-weight: bold; }
.assets .loyalty {
	background: transparent url(../images/asset_loyalty_bg.png) left center no-repeat;
}
.assets .shipping {
	float: right; padding-left: 6.5em; width: 10em; line-height: 1.8em;
	background: transparent url(../images/asset_shipping_bg.png) left center no-repeat;
}

/* variants */
#variantsContainer { font-size: 10px; margin-bottom: 1em; line-height: 3.2em; }
#variantsContainer label { font-size: 11px; float: left; padding-right: 0.5em; font-weight: bold; }
#variantsContainer ul { float: left; }
#variantsContainer ul li { float: left; padding-right: 0.4em; }
#variantsContainer ul li a { float: left; display: block; border: 1px solid #ccc; }
#variantsContainer ul li a:hover { border-color: #44474b; }
#variantsContainer ul img { float: left; width: 3em; height: 3em; vertical-align: middle; }

/* ratings */
#tavisclient #ratingForm { padding-top: 1.5em; }
#tavisclient ul { border-bottom: 1px solid #ccc; }

body > #alertRequest { position: fixed; left: 0; top: 0; }
#alertRequest form {
  position: absolute; left: 50%; top: 50%; z-index: 10;
  width: 30em; height: 10.5em; padding: 1em; margin: -6em 0 0 -15.75em;
  border: 3px solid silver; background: white; color: #a0882b; font-size: 1.2em;
}
#alertRequest p { margin-bottom: 0.5em; }
#alertRequest p.intro { font-size: 1.2em; text-align: center; }
#alertRequest p.intro span { font-size: 1.2em; font-weight: bold; }
#alertRequest .help { font-style: italic; color: #999; }
#alertRequest #edtReqAlertEmail { width: 26em; }
#alertRequest #alertDateRevealer { color: black; text-decoration: underline; }
#alertRequest input.missing { border: 1px solid red; background: #fdd; }
#alertRequest input.date { width: 6.2em; }
#alertRequest input.date.jsEnabled { padding-right: 1.5em; background: url(../images/back/silk/calendar.png) right center no-repeat; }
#alertRequest p.actions { position: absolute; left: 1.25em; bottom: 0; width: 22em; height: 2em; padding-left: 8em; }
#alertRequest p.actions input, #alertRequest p.actions a {
  display: block; float: left; height: 100%; line-height: 2em; padding: 0 2em; border: none;
  font-weight: bold; background: #a0882b; margin-right: 1em; color: white;
}
#alertRequest p.actions a { background: #999; }
#alertRequest p.actions input:hover { background: #c2aa4d; }
#alertRequest p.actions a:hover { background: #bbb; text-decoration: none; }

body > #sendToAFriendRequest { position: fixed; left: 0; top: 0; }
#sendToAFriendRequest form {
  position: absolute; left: 50%; top: 50%; z-index: 10;
  width: 30em; height: 21em; padding: 1em; margin: -10.5em 0 0 -15.75em;
  border: 3px solid silver; background: white; color: #a0882b; font-size: 1.2em;
  _top: 1em; _margin-top: 0;
}
#sendToAFriendRequest p { margin-bottom: 0.5em; }
#sendToAFriendRequest p.intro { font-size: 1.2em; text-align: center; }
#sendToAFriendRequest label { float: left; width: 13em; }
#sendToAFriendRequest input.text { width: 18em; }
#sendToAFriendRequest textarea { margin-top: 0.5em; width: 32em; }
#sendToAFriendRequest input.missing { border: 1px solid red; background: #fdd; }
#sendToAFriendRequest p.actions { margin: 1em 0 0; height: 2em; padding-left: 8em; }
#sendToAFriendRequest p.actions input, #sendToAFriendRequest p.actions a {
  display: block; float: left; height: 100%; line-height: 2em; padding: 0 2em; border: none;
  font-weight: bold; background: #a0882b; margin-right: 1em; color: white;
}
#sendToAFriendRequest p.actions a { background: #999; }
#sendToAFriendRequest p.actions input:hover { background: #c2aa4d; }
#sendToAFriendRequest p.actions a:hover { background: #bbb; text-decoration: none; }