/* 
	Document:				4.shop.css
	Modified date: 			21 May 2009
	Created by:				Gemma Leigh
	Deployment version:		Manchester City/css/4.shop.css
	Notes:					Shop page styles, ticketing, basket.
	-----------------------------------------------------------------
	Contents of this file:
	-----------------------------------------------------------------
	Shop typography
	
	Shop - landing page
	Shop - item
	Shop - category
	Shop - sub-category

*/

/* =Typography for shop 
-----------------------------------------------------------------------------*/
#shop a.btn			{ color: #FFF !important;}
#shop .promo a		{ color: #101a24;}
#shop .promo a:hover{ color:#FFF;}

.content-row-main .field-indent a.arrow{
	color:#3a7895 !important;
	background: url(../images/arrow-link-form.gif) center left no-repeat;
	padding-left: 10px;
}

.content-row-title h4	{ color: #5cbfeb !important;}
.content-row-title p 	{ font-size: 1.1em;}
.content-row-title a 	{ font-size: 0.846em;} /*11/13 */
.content-row-main h5,h6 { color: #000; }

/* Form continue (final message and submit) */
form h3 input,
form h3 .btn { font-size: 0.541em; } /* 13px / 24px = 0.541*/

ul li h5{ font-size: 1em;}
ul li p { font-size: 1em;}


/* =SHOP landing page
-----------------------------------------------------------------------------*/
/* Shop help and support */
#help-details { width: 274px; float: left; border-right: 1px solid #223344;}
#help-details .help-contact-details{ 
	border-top: 1px solid #223344;
	clear: both; 
	width: 260px;
}
#help-details h4{ padding: 12px 0 7px 15px; color: #FFF;}
#help-details ul{ padding: 0 0 10px 15px; }
#help-details .btn{ margin: 0 0 15px 15px;}

#help-details ul.bullet-icon{ padding: 2px 0 0 15px;}
#help-details ul.bullet-icon .phone{ background: url(../images/icon-phone.gif) center left no-repeat;}
#help-details ul.bullet-icon .phone h3{ 
	font-size: 24px; 
	line-height: 22px; 
	padding-top: 6px;
}
#help-details ul.bullet-icon .phone p {
	color: #FFF;
	font-size: 11px; 
}

#help-details ul.bullet-icon .mouse{ background: url(../images/icon-mouse.gif) center left no-repeat;}
#help-details ul.bullet-icon .mouse h4{ 
	font-size: 18px;
	font-weight: bold;
	padding: 10px 0 10px 0;
}

#store-details{ 
	float: right;
	width: 525px; 
}
#store-details .store{ 
	border-bottom: 1px solid #223344;
	display: inline;/* for ie */
	float: left;
	margin-left: 15px;
	overflow: hidden; 
	padding-bottom: 18px;
	width: 495px;
}
#store-details .store.last{ 
	border-bottom: none; 
	padding-bottom: 15px;
}

#store-details .store h4{ 
	color: #FFF;
	padding: 12px 0 12px 0px;
}

#store-details .store-info{
	overflow:hidden; 
	padding-left: 185px;
}
#store-details .store-info img{ 
	float: left;
	margin-right: -175px;
	position: relative; 
	left: -185px;
}
#store-details .store-info ul{ margin-left: 10px;}

#store-details .store-opening ul{ 
	margin-bottom: 5px;
	overflow: hidden;
	width: 300px; 
}
#store-details .store-opening h5{
	margin-bottom: 5px;
}
#store-details .store-opening ul li{ 
	background: #223344;
	color: #FFF;
	float: left;
	margin-bottom: 1px;
	padding-left: 5px; 
	width: 295px;
	text-align: right;
}
#store-details .store-opening ul li .days{
	width: auto;
	float: left;
}

/* =Shop - Item page
-----------------------------------------------------------------------------*/
/* Category tags */
#shop .tag{ height: 67px;}
#product-main-price .product-price{ color: #5cbfeb; }

/* Shop item layout */
#product-main{ 
	width: 800px;
	min-height: 450px;
	height: auto !important;
	height: 450px;
	float: left; 
	overflow: hidden; 
	position: relative; 
	border-bottom: 4px solid #5cbfeb;
}
#product-main-image.zoomed-out{ 
	float: left;
	width: 400px;
	height: 400px;
	padding: 25px 65px 25px 70px;
}
#product-main-image img{
	float: left;
}
#product-main-image{
	background: url(../images/bg-product-main-image.jpg) top left no-repeat;
	position:relative;
	float: left;
	width: 535px;
	height: 450px;
	padding: 0;
}

#panmain-image-zoom {
	background-position:-200px -200px;
}

#panmain-image-zoom {
	cursor:move;
}

#panmain-image-zoom div {
	width:28px;
	height:450px;
	position:absolute;
	top:0;
	right:0;
	background:url('../images/shop-item-side-shadow.png') 0 0 no-repeat;
}

#product-main-image ul{ position: absolute; bottom: 0px; left: 15px;}
#product-main-image ul li{ width: 50px; margin-right: 1px;float: left;}

#product-main-image #loader {
	display:none;
	position:absolute;
	top:200px;
	left:245px;
}

#product-main-detail{ 
	width: 265px; 
	float: left; 
	height: 100%;
}
#product-main-detail label { color: #5cbfeb;}

#product-main-detail h4 { 
	text-transform: capitalize; /* Sentence Case */
	color: #FFF;
	font-size: 24px;
	margin: 15px 75px 10px 10px;
}
#product-main-detail p {  
	line-height: 1.15em; /* 15px*/ 
	padding-left: 10px; 
	margin-right: 20px; 
	color: #FFF;
}

#product-main-detail #product-main-options{
	color:#5cbfeb;
/*	position: absolute;
	bottom: 0px;
	right: 15px;*/
	margin-top: 36px;
	width: 240px;
	margin-left: 10px;
}
#product-main-detail #product-main-options p{
	padding-left: 0;
	margin-bottom: 5px;
}

#product-main-detail #product-main-price{
	float: left;
	width: 100%;
	clear: both;
	border-top: 1px solid #434e57;
	margin-top: 10px;
	padding: 15px 0 10px 0;
}

#product-main-detail #size-guide {
	margin: 15px 10px 10px 10px;
}

#product-main-detail #size-guide table {
	display:none;
	width:238px;
}

#product-main-detail #size-guide table tbody {
	width:238px;
}

#product-main-detail #size-guide table td,
#product-main-detail #size-guide table th { 
	font-size: 11px;
	padding:0 5px;
	color: #FFF;
}

/* Shirt and Shorts Customisation */
#product-main-detail #shirt-customisation h4 {
	/* Hide when Javascript is not enabled */
	display: none;
	margin-top: 12px;
}
#product-main-detail #shirt-customisation h5.ifjs-hide{
	color: #ffa800;
	padding: 10px 0 0 10px;
}
#product-main-detail #shirt-customisation label,
#product-main-detail #shorts-customisation label {
	color:#FFF;
}


#shirt-customisation .shirt-cust-segment,
#shorts-customisation .shorts-cust-segment {
	position:relative;
	border-top:1px solid #434E57;
	padding:10px 0;
}
#shirt-customisation #no-print-wrapper,
#shorts-customisation #no-print-wrapper {
	border-top: 0px;
}
#shirt-customisation #badge-wrapper{
	background: url(../images/shop-customisation-badge.png) 100% 100% no-repeat;
	padding: 15px 0 0 0;
}

#shirt-customisation .shirt-cust-segment .price,
#shorts-customisation .shorts-cust-segment .price {
	font-size: 1.1em;
	color:#999999;
	position:absolute;
	top:12px;
	right:0px;
}
#shirt-customisation #badge-wrapper .price{
	position: static;
	display: block;
	margin-left: 20px;
}


#shirt-customisation .active,
#shorts-customisation .active {
	color:#5cbfeb !important;
}
#shirt-customisation #custom-name-input {
	text-transform:uppercase;
}
#shirt-customisation .option,
#shorts-customisation .option {
	margin:-3px 8px 0 0;
}

#select-player-fields,
#custom-fields{
	padding:8px 0 2px 25px;
}

#shirt-customisation #custom-fields label,
#shorts-customisation #custom-fields label {
	font-size:12px;
	width:50px;
	display:block;
	float:left;
}

#shirt-customisation #custom-fields .custom-name-input {
	width:150px;
}

#custom-fields .custom-number-input{
	width:20px;
}

#shirt-customisation .shirt-cust-segment p,
#shorts-customisation .shirt-cust-segment p {
	padding: 10px 0 0 2px;
	font-size:11px;
	margin: 0;
}



#product-main-price .product-price,
#product-main-price .product-button { float: left; width: 50%; }

#product-main-price .product-price	{ position: relative; top: -4px; margin-bottom: -4px; /*font-size: 24px;*/ font-size: 2.4em;}
#product-main-price .product-button { 
	width: auto;
	float: right;
}

/* Out of stock */
#product-main-detail img#sold-out{
	width: 75px;
	height: 75px;
	position: absolute;
	left: 725px;
	top: 67px;
}
.out-of-stock #product-main-options p{ color: #5cbfeb; padding-left: 0; margin: 20px 0 15px 0;}
/* Hide size, quantity and button */
.out-of-stock #product-main-options .product-quantity,
.out-of-stock #product-main-options .product-size,
.out-of-stock #product-main-options #product-main-price .product-button{ display: none;}
.out-of-stock #product-main-options #product-main-price{ border-top: none; margin-top: 5px;}


/* List of products */
#product-list,
#product-list .product-list-title{
	width: 100%;
	float: left;
	overflow: hidden;
	clear: both;
}
#product-list .product-list-title h4{ 
	color: #FFF; 
	padding: 0px 0 13px 0;
}

#product-list .product-list-row{
	float: left;
	width: 100%;
	padding-bottom: 10px;
}
#shop.category #product-list .product-list-row{ padding-bottom: 0px;}


#product-list .product{
	width: 191px;
	float: left;
	background: #415a6a;
	margin-right: 2px;
	min-height:275px;
	height:auto !important;
	height:275px;
	position: relative;
}
#product-list .product .product-gradient{
	width: 30px;
	height: 266px;
	position: absolute;
	right: 0px;
	top: 0px;
	background:url(../images/product-side-gradient.png) 0 0 no-repeat;
}

#product-list .product .stock-info { 
	width: 75px; 
	height: 75px; 
	position: absolute; 
	right: 0; 
	top: 0;
}

#product-list .product .limited-stock{ 
	background: url(../images/product-banner-limited-stock.png) no-repeat;
}
#product-list .product .sold-out{ 
	background: url(../images/product-banner-sold-out.png) no-repeat;
}
#product-list .product .pre-order{ 
	background: url(../images/product-banner-pre-order.png) no-repeat;
}


#product-list .product-list-row .product a{
	display: block;
	width: 181px;
	min-height:265px;
	height:auto !important;
	height:265px;
	border: 5px solid #415a6a;
}
#product-list .product-list-row .product a:hover{
	border: 5px solid #5cbfeb;
}

#product-list .product-list-row .product img{
	margin: 10px; /* take into account 5px border */
}

#product-list .product-list-row .last{
	margin-right: 0px;
}
/* styles within product box */
.product .product-name,
.product .product-price{
	display: block; 
	width: 160px; 
}
.product .product-detail{
	position: absolute;
	bottom: 8px;
	left: 15px;
}

.product-name	{ color: #FFF; line-height: 1em;}
.product-price	{ color: #5cbfeb; font-size: 18px;/*font-size: 1.8em;*/}

.product-quantity,
.product-size{ float: left; font-weight: bold; }

.product-quantity{ width: 25%;}
.product-quantity input { width: 30px; margin-top: 5px; font-weight: normal;}
.product-size{ width: 75%;}
/* Error message */
.product-size h5.shop-error,
#product-main-price h5.shop-error{
	color: #ffa800; 
	padding: 10px 0 0 0;
}
.product-size select { width: 100%;margin-top: 5px; font-weight: normal;}

/* =Size Guide jqModal box
-----------------------------------------------------------------------------*/
.jqmWindow#sizechart{
	height: 630px; 
	width: 730px; 
	top: 20px;
}

.jqmWindow#sizechart .close{
	left: 690px;
}
.jqmWindow#sizechart .close:hover{
	background-position:0px 3px;
}

.jqmWindow .jqmHeader .sizechart-logo{
	position: absolute;
	top: 15px;
	left: 26px;
}

.jqmWindow .jqmBody .sizechart-image{
	width: 300px;
	float: left;
}
.jqmWindow .jqmBody .sizechart-info{
	width: 400px;
	float: left;
}
.jqmWindow .jqmBody .sizechart-info table{
	color: #FFF;
	margin: 40px 0 0 10px;
	border-right: 1px solid #3c5c72;
	border-bottom: 1px solid #3c5c72;
}
.jqmWindow .jqmBody .sizechart-info table td{
	font-size: 16px;
	font-weight: bold;
	border-top: 1px solid #3c5c72;
	border-left: 1px solid #3c5c72;
	padding: 5px 5px 5px 10px;
	text-align: center;
}
.jqmWindow .jqmBody .sizechart-info table td.row-title{
	text-align: left;
}
.jqmWindow .jqmBody .sizechart-info table td.measurement{
	font-size: 12px;
}

.jqmWindow .jqmBody .sizechart-info p{
	color: #FFF;
	margin: 15px 15px 0 10px;
}


/* =Shop Category
-----------------------------------------------------------------------------*/
#shop.category #content-main-feature 	 { position: relative; border-bottom: 4px solid #5cbfeb;}
#shop.category #product-list .product-list-row{ margin-bottom: 0;}

.tabs ul { width: 100%; overflow: hidden;}
.tabs ul li{ padding: 5px 10px 5px 10px; width: auto; float: left; margin-right: 5px; font-size: 18px;}

#shop.category .tabs ul li a{ color: #FFF;}
#shop.category .tabs ul.new-items li.new-items a,
#shop.category .tabs ul.top-sellers li.top-sellers a,
#shop.category .tabs ul.offers li.offers a{color: #101a24;}

.tabs li.new-items{ background: #5cbfeb;}
.tabs li.top-sellers{ background: #3a7895;}
.tabs li.offers		{background: #ffa800;}

.tabs ul.new-items{ border-bottom: 4px solid #5cbfeb;}
.tabs ul.top-sellers{ border-bottom: 4px solid #3a7895; }
.tabs ul.offers { border-bottom: 4px solid #ffa800; }


/* =Shop sub category
-----------------------------------------------------------------------------*/
/* Customisable feature area*/
#shop.sub-category #content-main-feature{ height: 350px; position: relative;}
#shop.sub-category #content-main-feature .feature-detail span {
	background:#5cbfeb;
	font-size:1.8em;
	letter-spacing:1px;
	margin:0 0 -10px;
	padding: 2px 5px 3px 5px;
	position:relative;
	top:-2px;
}

/* Gradient header container with anchor */
#shop #category-main-subsection{
	background:#11171E url(../images/category-main-subsection.jpg) top left repeat-x;
	border: 1px solid #11171e;
	border-bottom-width: 0px;
	padding: 5px 10px 5px 8px;
	position: absolute;
	bottom: 0px;
	left: 10px;
	width: auto;
}
#shop.sub-category #content-main-feature #category-main-subsection h5{
	padding: 4px 0 2px 0;
}
#shop.sub-category #content-main-feature #category-main-subsection h5 a{
	background: url(../images/arrow-category-main-subsection.gif) center left no-repeat;
	padding-left: 17px;
	font-weight: bold; color: #FFF;
	font-size: 13px;
}
#shop.sub-category #content-main-feature #category-main-subsection h5 span{
	font-weight: normal;
}