/**
* @author	Jasal Vadgama/Simon Wyse - Javelin Group
* @version	1.0
* @media	screen
*
* @info		Main content section styling for zone, category and summary pages
*
* @contents
* =1: Page Content Container
*
* =2: Hero Wrapper Styles
*
* =3: Top Promo Banners
*
* =4: Nav Slot Styles
*
* =5: Related Content Boxes
*	=5.1: Help box
*
* =6: Nav Slots Related Products
*
* =7: Caveat Text
*/

/**
* =1: Page Content Container
*
* @info Content wrappers
*/
#content {
	clear: none;
	float: right;
	padding: 52px 0 20px 0;
	width: 744px;
	z-index: 1;
}
#fullWidthContent {
	float: left;
	padding: 15px;
	width: 934px;
	z-index: 1;
}

/**
* =2: Hero Wrapper Styles
*
* @info Hero wrappers and titles
*/
#content .heroWrapper {
	position: relative;
	display: block;
	margin-bottom: 15px;
	width: 716px;
	min-height: 36px;
	background: #ded6d4;
	border: 6px solid #f1efee;
}
#fullWidthContent .fullWidthHeroWrapper {
	clear: both;
	float: left;
	margin-bottom: 18px;
	padding: 6px;
	width: 922px;
	background: #f1efee;
}
#content .heroWrapper h1 {
	position: absolute;
	top: 0;
	right: 0;
	padding: 10px;
	color: #fff;
	background: #ff6600;
	z-index: 1;
}
#fullWidthContent .fullWidthHeroWrapper h1 {
	float: right;
	padding: 10px;
	color: #fff;
	background: #ff6600;
}
#content .heroWrapper img { display: block;  }
#content .heroWrapper .fallback { background-color: #fff; }

/**
* =3: Top Promo Banners
*
* @info Promo banner wrappers
*/
#content .promoBannerWrapper {
	float: left;
	margin:-6px 0 10px 0;
}
#content .oneBanner .promoBanner { width: 734px; }
#content .oneBanner .promoBanner IMG { width: 734px;  height: 91px; }
#content .twoBanners .promoBanner { width: 362px; }
#content .twoBanners .promoBanner IMG { width: 362px;  height: 91px; }
#content .threeBanners .promoBanner { width: 242px; }
#content .threeBanners .promoBanner IMG { width: 242px; height: 91px; }
#content .promoBannerWrapper .promoBanner {
	float: left;
	margin-left: 4px;
}
#content .promoBannerWrapper .promoBanner:first-child { margin-left: 0; }

/**
* =3.2: Functional Content Banners
*
* @info Banners which sit below the Nav Slots (banner 2)
*/
#content .funcContentBanners {
	clear: both;
	float: left;
	padding-bottom: 10px;
	width: 731px;
}
#content .contentBanner {
	float: left;
	width: 214px;
	margin-left: 10px;
	border-right: 6px solid #f1f0ee;
	border-bottom: 6px solid #f1f0ee;
	border-left: 6px solid #f1f0ee;
	padding: 10px 0 6px 10px;
	background: url(/images/banner_top.gif) top repeat-x;
	min-height: 174px;
}
#content .rangePage  {
	clear: both;
	float: left;
	padding-bottom: 15px;
}
#content .rangePage .contentBanner { 
	width: 337px;
	margin:12px 10px 0 0;
}
#content .funcContentBanners .contentBanner:first-child, #content .rangePage .contentBanner:first-child { margin-left: 0; }
#content .contentBanner .bannerTitle {
	display: block;
	padding: 2px 0 15px;
	font-size: 1.5em;
}
#content .contentBanner img { float: right; }
#content .contentBanner .bannerDesc {
	background: #fff;
	padding: 10px 0;
}
#content .contentBanner .promoLink { width: 200px; }
#content .contentBanner .promoLink a {
	padding-right: 10px;
	background: url(/images/link-arrow.png) right no-repeat;
	text-decoration: underline;
}

/**
* =3.3: Brands banner
*
* @info Brands banner underneath the funcContentBanners
*/
#content .brandsBanner {
	clear: both;
	float: left;
	padding: 5px 0 15px 0;
}
#content .brandsBanner p {
	width: 740px;
	text-align: center;
}

/**
* =4: Nav Slot Styles
*
* @info All nav slots styling
*/
#content .navSlots {
	float: left;
	margin-bottom: 15px;
	padding-top: 0px;
}
#content .navSlots ul {
	clear: both;
	float: left;
	padding-bottom: 15px;
	width: 728px;
}
#content .navSlots ul.smallSlots { width: 730px; }
#content .navSlots ul.relatedProducts { padding-bottom: 0; }
#content .navSlots ul li {
	float: left;
	width: 224px;
	margin: 0 0 0 10px;
	padding: 6px;
	background: #f1efee;
}
#content .navSlots ul li:first-child { margin-left: 0; }
#content .navSlots ul.smallSlots li {
	height: 224px;
	width: 163px;
}
#content .navSlots ul.smallHeight li, #content .navSlots ul.relatedProducts li { height: auto; }
#content .navSlots ul.relatedProducts li { margin-bottom: 15px; }
#content .navSlots ul li.first, #content .navSlots ul.relatedProducts li.first, #content .navSlots ul.relatedProducts li:first-child { margin-left: 0 !important; }
#content .navSlots ul li a {
	display: block;
	position: relative;
	cursor: pointer;
}
#content .navSlots ul li a:hover, #content .navSlots ul li a:hover .emptyFallBack { text-decoration: none; }
#content .navSlots ul.relatedProducts li a:hover { text-decoration: underline; }
#content .navSlots ul li img { display: block; }
#content .navSlots ul li strong {
	display: block;
	margin-top: 1px;
	padding: 5px 10px 8px 10px;
	min-height: 32px;
	background: #fff;
	cursor:pointer;
}
#content .navSlots ul.smallSlots li strong { padding-bottom: 5px; }
#content .navSlots ul.relatedProducts li strong { padding-bottom: 5px; min-height: 0; }
#content .navSlots ul.smallSlots li strong { padding-bottom: 5px; min-height: 32px; }
#content .navSlots ul li span {
	display: block;
	padding: 8px 10px 4px 10px;
}
#content .navSlots ul li .emptyFallBack {
	display: block;
	padding: 0;
	height: 125px;
	background: white;
}
#content .navSlots ul.smallSlots li .emptyFallBack { height: 140px; }
#content .navSlots ul li .promoCopy { min-height: 20px; }
#content .navSlots ul li a:hover .promoCopy { cursor: pointer; }
#content .navSlots ul li span.priceBanner {
	position: absolute;
	top: 5px;
	left: 5px;
	padding: 0;
	width: 100px;
}
#content .priceBanner img, #content .priceBanner sup { float: left; padding-right: 5px; }
#content .navSlots ul li a:hover span.priceBanner, #content a:focus span.priceBanner { text-decoration: none; }
#content .navSlots ul li.matchingProds {
	padding: 0;
	width: 224px;
	border: 6px solid #f1efee;
}
#content .navSlots ul.smallSlots li.matchingProds { width: 163px; }
#content .navSlots ul.smallSlots li.matchingProds h2 { width: 163px; }
#content .navSlots p.viewAll {
	float: left;
	margin: 0;
	padding: 4px 10px;
	width: 708px;
	background: #f1efee;
	font-weight: bold;
}
#content .navSlots p.viewAll a {
	padding-right: 10px;
	background: url(/images/link-arrow.png) right no-repeat;
}

/**
* =5: Related Content Boxes
*
* @info Related content wrappers
*/
.inspBannerWrapper {
	clear: both;
	float: left;
	margin-top: 12px !important;
	margin-bottom:15px;
}
.inspBannerWrapper .contentBanner,
.rangePage .contentBanner {
	width: 320px !important;
	padding-right: 6px !important;
}
#content .inspBannerWrapper .contentBanner { margin-left: 0; margin-right: 10px; }
.inspBannerWrapper .contentBanner p.bannerDesc { width: 204px !important; }
.inspBannerWrapper .contentBanner img {
	padding-bottom:0;
	background: #fff;
}

/**
* =5.1: Help box
*
* @info Helping You Along box
*/
#content .helpBox {
	float: left;
	margin: 0 15px 15px 0;
	padding-top: 12px;
	width: 360px;
	background: url(/images/woman-with-trolley-large.gif) 5px top no-repeat;
}
#content .helpBox .helpBoxContent {
	padding: 10px 0 5px 10px;
	min-height: 175px;
	border-right: 6px solid #f1f0ee;
	border-bottom: 6px solid #f1f0ee;
	border-left: 6px solid #f1f0ee;
}
#content .helpBox .helpBoxContent h2.helpBoxTitle {
	padding: 2px 0 15px 0;
	font-weight:normal;
}
#content .helpBox .helpBoxContent h2.inspiration {
	height: 22px;
	background: url(/images/help-banner-titles.png) left 10px no-repeat;
}
#content .helpBox .helpBoxContent h2.knowledge {
	height: 15px;
	background: url(/images/help-banner-titles.png) bottom left no-repeat;
}
#content .helpBox .helpBoxContent p {
	padding-top: 10px;
	width: 200px;
}
#content .helpBox .helpBoxContent ul { padding: 5px 0 5px 10px; }
#content .helpBox .helpBoxContent ul li {
	float: none;
	margin: 0;
	padding: 0 0 5px 10px;
	width: 200px;
	background: url(/images/bullet.png) 0 6px no-repeat;
}
#content .helpBox .helpBoxContent ul li a:hover { text-decoration: underline; }

/**
* =6: Nav Slots Related Products
*
* @info Related product slot
*/
#content .relatedProductsBox {
	margin: 0;
	padding: 0;
	width: 224px;
	background: #fff;
}
#content .relatedProductsBox .helpBoxContent {
	padding: 0;
	background: none;
	border: 0;
}
#content .relatedProductsBox .helpBoxContent h2 {
	width: 224px;
	height: 38px;
	background: url(/images/related-categories.png) 0 0 no-repeat;
}
#content .relatedProductsBox .helpBoxContent ul {
	padding: 10px 0 2px 5px;
	width: 200px;
}

/**
* =7: Caveat Text
*
* @info Caveat text for the whole site
*/
#content p.caveatText {
	clear: both;
	float: left;
	width: 730px;
}
/**
* =8: Affiliate Banners
*
* @info Styles to control the affiliate banners
*/
.affiliatePageBanner {
	margin-bottom:12px;
}
#affiliateOverlay {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background-color: #666;
	z-index: 99998;
	opacity: 0.6;
	filter: alpha(opacity=60);
	-moz-opacity: 0.6;
	visibility: hidden;
}
.affiliateOverlayContent {
	position: absolute;
	left: 50%;
	margin-left: -270px;
	width: 540px;
	background: #fff;
	z-index: 99999;
	visibility: hidden;
	border:1px solid #e8e5e4;
}
.affiliateOverlayContent h2 {
	padding: 15px;
	background: #f2f2f3;
	color: #ff6600;
	font-size: 1.4em;
}
.affiliateOverlayContent h2 span {
	float: right;
	margin-top: -15px;
	padding-left: 15px;
	color: #000;
	background: url(/images/close-icon.png) 0 2px no-repeat;
	font-size: 0.75em;
	width:40px;
}
/* webkit (safari & chrome) browser fix for close link */
@media screen and (-webkit-min-device-pixel-ratio:0) { 
	.affiliateOverlayContent h2 span {
		margin-top:0;
	}
}
.affiliateOverlayContent hr {
	clear: both;
	border: none;
	border-bottom: 1px solid #e8e5e4;
	padding: 0;
	height: 1px;
	margin-bottom:20px;
}
.affiliateOverlayContent  .affiliateOverlayContentInner {
	padding:20px;
}
.affiliateOverlayContent p {
	padding-bottom:15px;
}
.affiliateOverlayContent .affiliateOverlayContentInner span a img.cancel {
	float:left !important;
	border:0 !important;
	width:60px;
	margin-bottom:20px;
}
.affiliateOverlayContent .affiliateOverlayContentInner span a img.continue {
	float:right !important;
	border:0 !important;
	margin-bottom:20px;
}
.affiliateOverlayContent .affiliateOverlayContentInner span a {
	display:inline !important;
	clear:none !important;
}
.affiliateOverlayContent .affiliateOverlayContentInner ul {
	list-style-image:none;
	margin-left:20px;
	padding-bottom:11px;
}
.affiliateOverlayContent .affiliateOverlayContentInner ul li {
	background:url(/images/bullet.png) 0 .6em no-repeat;
	display:list-item;
	padding:0 0 0.4em 1em;
}

#christmas .listerPage .affiliatePageBanner a {
	display:none;
}

#christmas .listerPage .affiliatePageBanner {
	background:url(/diy/jsp/content/marketing/Christmas/images/trees_banner.png) no-repeat;
	height:254px;
	width:727px;
}