/*----------------------------------
*Filename: pnl-layout.css
*Description: Pick n Licks CSS
*Author: Greg Rafferty
*Date: 2009-07-13
*Website: shop.durex.com
----------------------------------*/

/* Layout */
body 
{
	background:#f2682b url(../images/PnL-BG.png) repeat-x top left;
}

#tool-hover
{
	position:static;
	text-align:left;	
}

#tool-hover .short-desc
{
	width:174px;
	position:absolute;	
	top:0;
	left:0;
	z-index:500;
	display:none;
}

#tool-hover .short-desc .hd
{
	height:24px;
	background:transparent url(../images/PnL-ProductRollover.png) no-repeat left top;
}

#tool-hover .short-desc .bd
{
	max-height:485px;
	background:transparent url(../images/PnL-ProductRollover.png) repeat-y left -24px;
	padding:1px 20px;
}

#tool-hover .short-desc .ft
{
	height:43px;
	background:transparent url(../images/PnL-ProductRollover.png) no-repeat left -509px;
}

.popup-container
{
	width:715px;
	margin:0 auto;
	text-align:left;
}

#product-details
{
	position:absolute;
	top:500px;
	margin:0 auto;
	width:715px;
	z-index:1000;
	display:none;
	text-align:left;
}

#product-details .hd
{
	background:transparent url(../images/PnL-ProductOverlay.png) no-repeat left top;
	height:20px;
	position:relative;
}

#product-details .hd .close
{
	background:transparent url(../images/PnL-ProdOverlayCloseButton.png) no-repeat left top;
	height:21px;
	width:21px;
	position:absolute;
	top:15px;
	right:30px;
	cursor:pointer;
}

#product-details .hd .close:hover
{
	background:transparent url(../images/PnL-ProdOverlayCloseButton.png) no-repeat left bottom;
	cursor:pointer;
}

#product-details .bd
{
	background:transparent url(../images/PnL-ProductOverlay.png) repeat-y left -20px;
	min-height:50px;
	padding:20px 20px 0px;
}
#product-details .bd .product-image
{
	width:200px;
	float:left;
}

#product-details .bd .item-name,
#product-details .bd .short-desc,
#product-details .bd .long-desc,
#product-details .bd .description-title
{
	width:460px;
	float:right;
	margin:0 0 15px;
	text-align:left;
}

#product-details .bd .item-name p,
#product-details .bd .short-desc p,
#product-details .bd .long-desc p,
#product-details .bd .description-title p
{
	text-align:left;
}

#product-details .bd .item-name
{
	font-size:140%;
	font-weight:bold;
}

#product-details .bd .description-title
{
	font-weight:bold;
	margin:0;
}

#product-details .ft
{
	background:transparent url(../images/PnL-ProductOverlay.png) no-repeat left bottom;
	height:30px;
}

.container
{
	margin:10px auto 0;
	width:757px;
}

.container .header
{
	width:757px;
	background:transparent url(../images/PnL-Header.png) no-repeat top left;
	height:152px;
	position:relative;
}

.container .header .back-link
{
	position:absolute;
	width:150px;
	bottom:19px;
	left:16px;
	font-size:14px;
	font-weight:bold;
}

.container .intro .top-spacer
{
	background:url(../images/PnL-IntroSpacerBottom.png) no-repeat top left;
	width:92px;
	height:37px;
	margin:20px auto;
}

.container .intro .bottom-spacer
{
	background:url(../images/PnL-IntroSpacerTop.png) no-repeat top left;
	width:92px;
	height:37px;
	margin:20px auto;
}

.container .hd
{
	background:transparent url(../images/PnL-PodBGs-Top.png) no-repeat top left;
	height:58px;
}


.container .hd .up-for
{
	background:transparent url(../images/PnL-IntroHeader.png) no-repeat top left;
	height:45px;
	width:558px;
	margin:0 auto;
	padding:0;
	position:relative;
	top:32px;
}

.container .hd .pick-me
{
	background:transparent url(../images/PnL-PickMeHeader.png) no-repeat top left;
	height:40px;
	width:286px;
	margin:0 auto;
	padding:0;
	position:relative;
	top:32px;
}

.container .bd
{
	background:transparent url(../images/PnL-PodBGs-Middle.png) repeat-y top left;
	padding: 30px 10px 5px;
}

.navigator
{
	background:transparent url(../images/PnL-ProductPod.png) repeat-y top left;
	height:252px;
	width:727px;
	margin:20px auto 0;
}

.navigator .title
{
	position:relative;
	top:-15px;
}

.navigator .scroll-box
{
	margin:0px auto;
	width:620px;
	height:206px;	
	float:left;
	overflow:auto;
}
.navigator .item-holder
{
	height:180px;	
	width:auto;
}

.navigator .item-holder .item
{
	width:155px;
	height:160px;
	text-align:center;
	float:left;
}
.navigator .item-holder .item .name
{
	font-size:120%;
	font-weight:bold;
	padding:5px 0;
}
.navigator .item-holder .item .image
{
	cursor:pointer;
	width:155px;
}

.navigator .item-holder .item .image img
{
	width:155px;
}

.navigator .item-holder .item .image .item-info
{
	display:none;
}

.navigator .item-holder .item .select-link
{
	font-size:120%;
	font-weight:bold;
	padding:5px 0;
}

.main .bd .condoms{}
.main .bd .condoms .title
{
	background:transparent url(../images/PnL-CondomsHeader.png) no-repeat top left;
	width:268px;
	height:34px;
}
.main .bd .lubes{}
.main .bd .lubes .title
{
	background:transparent url(../images/PnL-LubesHeader.png) no-repeat top left;
	width:243px;
	height:32px;
}

.container .main .foils
{
	background:transparent url(../images/PnL-PodBGs-Foils.png) no-repeat top left;
	height:82px;
}
.main .bd .your-selection-container
{
	height:20px;
}
.main .bd .your-selection
{
	background:transparent url(../images/PnL-YourSelectionHead.png) no-repeat top left;
	width:206px;
	height:20px;
	position:relative;
}

.main .bd .min5-container
{
	width:600px;
	position:relative;
	margin:0 auto;
	top:-21px;
}
.main .bd .min5
{
	background:transparent url(../images/PnL-Min5Items.png) no-repeat top left;
	width:136px;
	height:21px;
	position:absolute;
}
.main .bd .min5.left{left:0;}
.main .bd .min5.right{right:0;}

.main .bd .selection
{
	width:665px;
	margin:10px auto 0;
}

.main .bd .selection .number
{
	padding:10px 0;
	font-weight:bold;
	font-size:140%;
	border-top:solid 1px #e61487;
	border-bottom:solid 1px #e61487;
}

.main .bd .selection .items
{
	padding:10px 0;	
}
	



.main .bd .selection .item-holder
{
	font-size:110%;
	position:relative;
	height:22px;
}

.main .bd .selection .item-holder .item-sku,
.main .bd .selection .item-holder .item-name,
.main .bd .selection .item-holder .item-quantity,
.main .bd .selection .item-holder .item-price,
.main .bd .selection .item-holder .remove-link
{
	position:absolute;
	top:0;
}/**/

.main .bd .selection .item-holder .item-sku
{
	display:none;
}

.main .bd .selection .item-holder .item-name
{
	left:10px;
}

.main .bd .selection .item-holder .item-quantity
{
	left:400px;
	top:-3px;
}

.main .bd .selection .item-holder .item-price
{
	left:500px;
}

.main .bd .selection .item-holder .remove-link
{
	right:10px;
}

.main .bd .add-to-basket
{
	background:transparent url(../images/PnL-SelectionStripes.png) no-repeat top left;
	width:665px;
	height:32px;
	margin:0 auto;
	padding:11px 0;
	text-align:center;
}
.container .ft
{
	background:transparent url(../images/PnL-PodBGs-Bottom.png) no-repeat top left;
	height:23px;
}






/*
<div class="items">
    <div class="item-holder">
        <div class="item-sku"> 1000222333 </div>
        <div class="item-name"> Elite Condom </div>
        <div class="item-quantity"> Quantity </div>
        <div class="item-price"> £0.00 </div>
        <div class="remove-link"> <a href="#">Remove</a> </div>
    </div>
</div>
*/

/* Typography */
body
{
	font-family:arial,helvitica,sans-serif;
	font-size:11px;
	color:#e61487;
}

h1,h2,h3,h4,h5,h6,p{margin-bottom:20px;}

h1{font-size:140%;}
h2{font-size:130%;}
h3{font-size:120%;}
h4{font-size:110%;}

p{text-align:center;}

.main .bd>p
{
	font-size:110%;
	margin: 0 30px;
}

p.bookman
{
	font-family:Bookman Old Style;
	font-size:160%;
	font-weight:normal;
	margin:20px 30px;
}

a{color:#e61487;}
a:link,a:visited{text-decoration:none;}
a:hover,a:focus,a:active{text-decoration:underline;}

.footer 
{
	font-size:100%;
	color:#fff;
}

.footer, .footer a {
	color:#fff;
}

/* universal classes */

.container .title
{
	margin:0 auto;
	overflow:hidden;
	text-indent:-800px;
}

input.qty-input
{
	border:solid 1px #e61487;	
	color:#e61487;
	font-size:10px;
	width:20px;
}

input.up, input.down
{
	cursor:pointer;
	height:9px;
	width:10px;
	top:0px;
	right:-16px;
	border:none 0;
	overflow:hidden;
	position:absolute;
	text-indent:-500px;
	background:transparent url(../images/PnL-QtyArrows.png) no-repeat left top;
	font-size: 0px;
	padding-left:10px;
}

input.down
{
	background-position: left bottom;
	top:10px;
}


.hidden-button
{
	display:none;
}

.clear
{
	clear:both;
}

.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}
 
.clearfix {
	display: inline-block;
}
 
html[xmlns] .clearfix {
	display: block;
}
 
* html .clearfix {
	height: 1%;
}