/**
* @author	Jasal Vadgama/Simon Wyse - Javelin Group
* @version	1.0
* @media	screen
*
* @info		Page frame and standard components stylesheet
*
* @contents
* =1: Main Container
*
* =2: Header
*	=2.1: Skip Links
*	=2.2: Main Navigation
*	=2.3: Basket
*		=2.3.1: Login/Account Line
*		=2.3.2: Search Box
*	=2.4: Breadcrumb
* 
* =3: Left Nav
*	=3.1: Fredhopper Lists
*	=3.2: Additonal Nav Boxes
*	=3.3: Static Left Nav
* 
* =4: Footer
*
* =5: Copyright Notice
*
* =6: Worlds Support
*
* =7: Static Content
*
*/

/**
* =1: Main Container
*
* @info Main container section
*/
.access, .hidden {
	position: absolute;
	top: -1000em;
	left: -1000em;
}
#bcrumbWrapper, #content { clear: both; }
/** float clearing fox for firefox */
#pageWrapper:after,
#pageWrapper #header:after,
#topNav ul#mainNav li .subnav ul.subnavContent:after,
#basket .accountBox:after,
.breadcrumb:after,
.productImages .productHero #productImageTabBlock:after,
.listerOverlayContent:after,
.addToCartMsg:after,
#qfinder ul:after,
#catMifWrapper:after,
div#mifHeroPanelContent:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
/** end fix */
#pageWrapper {
	margin: 0 auto;
	width: 964px;
	background: #fff;
}
#pageWrapper table, #pageWrapper #contentWrapper { margin: 0 auto; }
#masthead { width: 994px; }

.debug {
	clear: left;
	background:wheat;
	opacity:0.6;
	filter:alpha(opacity=60);
	-moz-opacity:0.6;
}

/**
* =2: Header
*
* @info Page header
*/
#header {
	padding-bottom:0px;height:36px; *margin-left:100px;
}
#pageWrapper #header {
	padding: 0 20px;
	width: 924px;
	background: #fff url(images/nav-bg.png) bottom left repeat-x;
}
#header h1 {
	float: left;
	padding: 39px 33px 0 13px;
}

/**
* =2.1: Skip Links
*
* @info Accessibility links for skipping to specific content
*/
#skipNav ul {
	padding: 0;
	margin: 0;
	list-style: none;
}
#skipNav li a {
	position: absolute;
	width: 0; 
	height: 0; 
	overflow: hidden;
	border: 0px;
}
#skipNav li a:active, #skipNav a:focus {
	position: absolute;
	top: 40px;
	left: 88px;
	z-index: 1000;
	width: 670px; 
	height: auto; 
	padding: 5px;
	overflow: visible;
	background-color:#999;
	border: 1px solid #f60;
	font-weight: bold;
	color: #fff;
	font-size: 0.9em;
	text-align: center;
}

/**
* =2.2: Main Navigation
*
* @info Main site navigation
**/
#header .navBorder {
	float: left;
	width: 561px;
	height: 6px;
	background: #fff url(images/nav/nav-border-top.jpg) top left no-repeat;
	overflow: hidden;
}
#header #topNav {
	float: left;
	padding: 0 0px;
	width: 495px;
	background: #fff url(images/nav-bg.png) bottom left repeat-x;
	/**
	border-left: 1px solid #e9e5e6;
	border-right: 1px solid #e9e5e6;
	**/
}
#topNav ul { width: 100%; }
#topNav ul#mainNav {
	clear: both;
	padding-bottom: 10px;
	width: 710px;
	height: 38px;
}
#topNav ul li {
	float: left;
	padding: 12px 27px 16px 0;
	z-index: 5001; /*5001 so that the drops downs sit above the multimap controls in firefox*/
}
#topNav ul li a {
	display: block;
	height: 15px;
}
#topNav ul li.storeLocator { padding-right: 0; }

#topNav ul li.inspiration a { width: 82px; background: url(/diy/jsp/bq/images/navigation/inspiration.png) top left no-repeat; }
#topNav ul li.knowledge a { width: 85px; background: url(/diy/jsp/bq/images/navigation/knowledge.png) top left no-repeat; }
#topNav ul li.support a { width: 64px; background: url(/diy/jsp/bq/images/navigation/support.png) top left no-repeat; }
#topNav ul li.storeLocator a { width: 98px; background: url(/diy/jsp/bq/images/navigation/store.png) top left no-repeat; }
#topNav ul li.socialHub a { width: 82px; background: url(/diy/jsp/bq/images/navigation/social-hub.png) top left no-repeat; }

#topNav ul li.inspiration a:hover, #topNav ul li.inspiration a:focus { background-position: bottom left; }
#topNav ul li.knowledge a:hover, #topNav ul li.knowledge a:focus { background-position: bottom left }
#topNav ul li.support a:hover, #topNav ul li.support a:focus { background-position: bottom left }
#topNav ul li.storeLocator a:hover, #topNav ul li.storeLocator a:focus { background-position: bottom left }
#topNav ul li.socialHub a:hover, #topNav ul li.socialHub a:focus { background-position: bottom left }

#topNav ul#mainNav li {
	position: relative;
	margin: 0 0 0px 0;
	padding: 0 0px 0 0;
	height: 36px;
	color:#ffffff;
	font-size:14px;
	margin-right:2px
}

#topNav ul#mainNav li.services { width: 142px; background-color:#0099ff}
#topNav ul#mainNav li.products { width: 104px; background-color:#cc0033 }
#topNav ul#mainNav li.home { width: 78px; background-color:#f47321; }
#topNav ul#mainNav li.client-shops { width: 136px; background-color:#006633; }
#topNav ul#mainNav li.international { width: 131px; background-color:#663399; }
#topNav ul#mainNav li.contact { width: 95px; background-color:#003399; }


#topNav ul#mainNav li:hover, #topNav ul#mainNav li.over { background-position: bottom left; }
#topNav ul#mainNav li a,#topNav ul#mainNav li a:visited {
	display: block;
	height: 14px;
	cursor:pointer;
	padding-top:9px;
	color:#ffffff;	
}
#topNav ul#mainNav li a:hover {
	text-decoration:underline;
	color:#ffffff;		
}
#topNav ul#mainNav li.hit {
	background-position: bottom left;
	padding-bottom: 0;
}
#topNav ul#mainNav li:hover div.subnav, #topNav ul#mainNav li.over div.subnav { display: block; }
#topNav ul#mainNav li div.subnav {
	display: none;
	position: absolute;
	top: 36px; /** Set 1px less than menu height */
	left: 0px;
	padding: 0 0 14px 0;
	/*width: 839px;*/
	width: 708px;
	background: url(images/nav/subnav-bottom.png) bottom left no-repeat;
	font-size:10px;
	background-color:#ffffff !important;
}
#topNav ul#mainNav li div.subnav a {
	padding-top: 0;
	font-size:10pt;
}
#topNav ul#mainNav li.services div.subnav a {
	color: #0099ff !important;
}
#topNav ul#mainNav li.products div.subnav a {
	color: #cc0033 !important;
}
#topNav ul#mainNav li.services div.subnav { 
	left: -92px; 
	background: url(images/nav/servicesbottom.jpg) bottom left no-repeat;
}
#topNav ul#mainNav li.products div.subnav { 
	left: -92px; 
	background: url(images/nav/productbottom.jpg) bottom left no-repeat;
}
#topNav ul#mainNav li.products div.subnav { left: -228px; }
#topNav ul#mainNav li.services div.subnav { left: -82px; }
/**
#topNav ul#mainNav li.decor div.subnav { left: -266px; }
#topNav ul#mainNav li.fix div.subnav { left: -348px; }
#topNav ul#mainNav li.build div.subnav { left: -401px; }
**/

/*#topNav ul#mainNav li.offers div.subnav { left: -431px; }*/
#topNav ul#mainNav li.offers .subnav { background: url(images/nav/offers-subnav-bottom.png) bottom left no-repeat; }
#topNav ul#mainNav li div .subnavTop {
	padding-top: 14px;
	/*width: 839px;*/
	width: 708px;
}

#topNav ul#mainNav li.services .subnav .subnavTop { background: url(images/nav/servicestop.jpg) top left no-repeat; }
#topNav ul#mainNav li.products .subnav .subnavTop { background: url(images/nav/producttop.jpg) top left no-repeat; }
/**
#topNav ul#mainNav li.decor .subnav .subnavTop { background: url(/diy/jsp/bq/images/navigation/backgrounds/decor-subnav-top.gif) top left no-repeat; }
#topNav ul#mainNav li.fix .subnav .subnavTop { background: url(/diy/jsp/bq/images/navigation/backgrounds/fix-subnav-top.gif) top left no-repeat; }
#topNav ul#mainNav li.build .subnav .subnavTop { background: url(/diy/jsp/bq/images/navigation/backgrounds/build-subnav-top.gif) top left no-repeat; }
#topNav ul#mainNav li.home .subnav .subnavTop { background: url(/diy/jsp/bq/images/navigation/backgrounds/eco-subnav-top.gif) top left no-repeat; }
#topNav ul#mainNav li.offers .subnav .subnavTop { background: url(/diy/jsp/bq/images/navigation/backgrounds/offers-subnav-top.gif) top left no-repeat; }
**/

#topNav ul#mainNav li .subnav ul.subnavContent {
	padding: 3px 3px 0 1px;
	/*width: 834px;*/
	width: 704px;
	background: #fff;
	list-style: none;
	/**
	border-right: 1px solid #e5e5e5;
	border-left: 1px solid #e5e5e5;
	**/
}
#topNav ul#mainNav li .subnav ul.subnavContent li {
	clear: both;
	margin: 0;
	padding: 0;
	/*width: 835px;*/
	width: 704px;
	height: auto;
}
#topNav ul#mainNav li .subnav ul.subnavContent li a:hover { text-decoration: underline; }
#topNav ul#mainNav li .subnav dl {
	float: left;
	margin: 0 0 0 3px !important;
	padding: 0 0 6px 9px;
	width: 156px;
	background: #fff url(images/nav/subnav-title-bg.jpg) 0 1px no-repeat;
}
#topNav ul#mainNav li .subnav dl dt { 
	padding: 4px 0 12px 0px; 
	background: #fff url(images/menu-header.gif) 0 1px no-repeat;
	text-align:center;
}
#topNav ul#mainNav li.services .subnav dl dt { 
	color:#0099ff;	
}
#topNav ul#mainNav li.products .subnav dl dt { 
	color:#cc0033;	
}
#topNav ul#mainNav li .subnav dl dt a { height: 1em;}
#topNav ul#mainNav li .subnav dl dd { padding: 0 0 6px 6px }
#topNav ul#mainNav li .subnav dl dd a { height: 1%; }