/*
@site:
@name:		Parts all over - Layout
@author:	Rhys Burnie - Hugeobject - http://www.hugeobject.com.au


!!! TODO !!!
	REMOVE ALL IE6 HACKS INTO SEPERATE IE6 FILE
*/
/* = RESET = _____________________________________________________________________________________________________________ */
* {
	margin: 0;
	padding: 0;
}
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	/* font-family: inherit; CSS by Andrew Lessels */
	/* vertical-align: baseline;  CSS by Andrew Lessels */
}
table {
	/* border-collapse: collapse; /* CSS by Andrew Lessels */
}
th, td { vertical-align: top; }
/* = TOOLS = ______________________________________________________________________________________________________________ */
/* == CLEARFIX ==
	Cross browser fix for clearing
	NB:	some elements have been bound with clearfix
		* div#content
		* div.main-cols
		* div.tip (typo.css)
		* ul#nav_main (nav.css)
		* fieldset ol li (forms.css)
*/
.clearfix:after { 
    content: ".";  
    display: block;  
    clear: both;  
    visibility: hidden;  
    line-height: 0;  
    height: 0;  
}  
.clearfix {  
    display: inline-block;  
} 
/* NB: html must have a xmlns attribute */
html[xmlns] .clearfix {  
    display: block;  
}  
* html .clearfix {  
    height: 1%;  
} 

.hide-accessible {
	text-indent: -9999px;
}

/* = BODY / SHELL = _________________________________________________________________________________________________________ */
body {
	background: #fff url(../images/bg/bg-body.gif) top left;
}
/* 
	NB:	We need to use a shell aproach because of the way the background
		needs to behave, there is 2 images that create the effect
*/
div#shell {
	min-height: 570px;/* height set in ie6.css */
	background: transparent url(../images/bg/bg-shell.gif) top left repeat-x;
}

/* = HEADER = ________________________________________________________________________________________________________________ */
div#header {
	width: 990px;
	min-height: 70px;/* height set in ie6.css */
	margin: 0 auto;
	position: relative;
}
div#header h1 {
	margin: 0;
	width: 191px;
	height: 67px;
	text-indent: -9999px;
	position: absolute;
	top: 19px;
	left: 30px;
	background: transparent url(../images/pao-logo.png) no-repeat;
}
/* == ANCILLARY NAVIGATION == */
/* basic style - see nav.css for full style */
div#nav_ancillary li {
	list-style-type: none;
	display: inline;
}

div#login li {
	list-style-type: none;
	display: inline;
}
/* = NAV_MAIN = ______________________________________________________________________________________________________________ */
/*
	NB:	this is a simple rule for nav_main as a fallback - see nav.css for specific rules
*/
ul#nav_main li {
	list-style-type: none;
	display: inline;
}

/* = CONTENT = _______________________________________________________________________________________________________________ */
/* 
	NB:		To deal with rather complex background div#content has additional markup 
			elements which would normally be unneccessary. These are:
			* div#content_top_row - directly above div#content (leave empty)
			* div#content_btm_row - directly bellow div#content (leave empty)
			* div#content is double wrapped (contains a inner div with class "wrapper") for an additional background image
			
	has rounded corners and drop shaddows
	Image formats:
	.png with alpha transparency - for drop shaddow
	.gif (for ie6) - no drop shaddow

	width of content is 990 (980 + 10px(drop shaddow))
 */
div#content {
	width: 990px;
	margin: 0 auto;/* re-defined in ie6.css */
	background: transparent url(../images/bg/narrow-blue-right-bg.png) 0 0 repeat-y;/* re-defined in ie6.css */
	position: relative;
	display: inline-block; /* part of clearfix */
}
/* bind clearfix directly to div#content */
div#content:after {  
    content: ".";  
    display: block;  
    clear: both;  
    visibility: hidden;  
    line-height: 0;  
    height: 0;  
}  
/* NB: html must have a xmlns attribute */
html[xmlns] div#content {  
    display: block;  
}  
* html div#content {  
    height: 1%;  
} 
/* == CONTENT FAUX COLUMN VARIANTS ==  */
/* where variant class name is applied to div#shell */
div.home div#content {
	background: transparent url(../images/bg/wide-blue-left-bg.png) 0 0 repeat-y;/* re-defined in ie6.css */
}
/* full width faux-column */
div.full div#content {
	background: transparent url(../images/bg/white-bg.png) 0 0 repeat-y;/* re-defined in ie6.css */
}
/* == CONTENT TOP/BTM ROWS ==  */
/*
	Purpose:	Visual - because we need complicated drop shaddows we need to seperate the
				top and btm row otherwise the drop shaddows will overlay
				The following markup must all ways be present before and after div#content and
				"content_btm_row" can contain elements but will effect height etc. - special cases are things like "previuos page" links
				"content_top_row" contains ul#nav_main
				top: <div id="content_top_row"><ul id="nav_main"></ul></div>
				btm: <div id="content_btm_row"></div> 
*/
div#content_top_row {
	width: 990px;
	min-height: 20px;/* height set in ie6.css */
	margin: 0 auto;
	padding-bottom: 13px; 
	background: transparent url(../images/bg/blue-top.png) bottom left no-repeat;/* re-defined in ie6.css */
}
div#content_btm_row {
	width: 990px;
	min-height: 20px;/* height set in ie6.css */
	margin: 0 auto;
	background: transparent url(../images/bg/blue-bg.png) 0 0 repeat-y;/* re-defined in ie6.css */
}
/* === CONTENT TOP/BTM FAUX COLUMN VARIANTS ===  */
/* where variant class name is applied to div#shell */
/* ==== .home (HOME PAGE) ==== */
div.home div#content_top_row {
	background-image: url(../images/bg/wide-blue-left-top.png);/* re-defined in ie6.css */
}
div.home div#content_btm_row {
	display: none;
}
/* == CONTENT WRAPPER ==  */
div.home div#content div.wrapper {
	float: left;
/*	background: transparent url(../images/bg/bg-fuzzy-logo.jpg) no-repeat right bottom;*/
	background: transparent url(../images/bg/bg-fuzzy-logo.jpg) no-repeat right 170px;
}
/* == BREADCRUMB == _______________________________________________________________________________________________________ */
/*
	p#breadcrumb should be between div#content_top_row and  div#content
	Typography for breadcrumb defined in typo.css
*/
p#breadcrumb {
	width: 959px; /* 990 - padding left */
	padding: 0 0 4px 31px;
	line-height: 1em;
	margin: 0 auto;
	background: transparent url(../images/bg/blue-bg.png) 0 0 repeat-y;/* re-defined in ie6.css */
}
/* == MAIN == _____________________________________________________________________________________________________________ */
/*
	Default width is approx 2/3 of content
	width is modified via additional class applied to div#conent 
*/
/* === default === */
div#main {/*background: red;*/
	float: left;
	width: 670px; /* 990 - 265(sub default width + margin) - 5px margin*/
	margin-left: 5px;/* re-defined in ie6.css */
	/* position: relative; */
	padding: 10px 25px;
}
/* === MAIN VARIANTS ===  */
/* where variant class name is applied to div#shell */
div.home div#main {
	background: transparent;
	width: 476px;
	padding: 0; /* CSS by Andrew Lessels */
}
div.full div#main {
	background: transparent;
	width: 980px;
}
/* == SUB == ______________________________________________________________________________________________________________ */
/*
	Default width is approx 2/3 of content
	width is modified via additional class applied to div#content 
*/
/* === default === */
div#sub {/*background: yellow;*/
	float: left;
	width: 260px; /* 260 */
	position: relative;
}
/* === SUB VARIANTS ===  */
/* where variant class name is applied to div#shell */
div.home div#sub {
	width: 504px;
	min-height: 278px;/* height set in ie6.css */
}
div.full div#sub {
	display: none;
}
/* = FOOTER = ________________________________________________________________________________________________________________ */
div#footer  {
	width: 990px;
	margin: 0 auto;
	background: transparent url(../images/bg/white-bg.png) 0 0 repeat-y;/* re-defined in ie6.css */
}
/* see nav.css for footer nav rules */
div#footer li {
	list-style-type: none;
	display: inline;
}
div#footer_btm_row {
	width: 990px;
	height: 20px;
	margin: 0 auto;
	background: transparent url(../images/bg/white-btm.png) 0 0 no-repeat;/* re-defined in ie6.css */
}

/* = CUSTOM LAYOUT = __________________________________________________________________________________________________________ */
/* == 2 COLUMN LAYOUT IN MAIN and SEARCH RESULTS OPTIONS == */
/*
	Column 1 is from the left edge to end of search tab right
	Column 2 is browse tab width
	wrap div.col1 and div.col2 in a div with class "main-cols clearfix"
*/
/* 
bind div.main-cols and div.search-results-options with clearfix 
*/
div.main-cols,
div.search-results-options {  
    display: inline-block;
	margin: 1em 0;  
} 
div.main-cols:after,
div.search-results-options:after { 
    content: ".";  
    display: block;  
    clear: both;  
    visibility: hidden;  
    line-height: 0;  
    height: 0;  
}  
/* NB: html must have a xmlns attribute */
html[xmlns] div.main-cols,
html[xmlns] div.search-results-options {  
    display: block;  
}  
* html div.main-cols,
* html div.search-results-options {  
    height: 1%;  
} 
div.main-cols div.col1 {
	float: left;
	width: 476px;
}
div.main-cols div.col2 {
	float: left;
	width: 244px;
}
div.search-results-options div.col1 {/*test: background: red;*/
	float: left;
	width: 270px;
}
div.search-results-options div.col2 {/*test: background:blue;*/
	float: left;
	float: right; /* CSS by Andrew lessels */
	/* width: 450px; /* CSS by Andrew lessels */
}


/* BEGIN CSS by Andrew Lessels */
.jump-to {
	background-color: #E8F4FA;
	padding: 10px;
	font-size: 12px;
	position: relative;
	top: -10px;
	color: #777;
}
.jump-to span {
	float: left;
	font-size: 13px;
	color: #004A6E;
	font-weight: bold;
}
.jump-to ul {
	list-style: none !important;
	float: left;
	margin-left: 10px !important;
}
.jump-to li {
	float: left;
	margin: 0 !important;
}
.jump-to li a {
	margin: 0 4px;
}
.jump-to li a:hover {
	text-decoration: none
}
.page-section {
	border-top: 1px solid #CCE4F0;
	margin-bottom: 15px;
	padding-top: 15px;
	float: left;
	width: 100%;
	clear: left;
}
/* == PRODUCT THUMBS == */
ul.category-list {
	list-style: none !important;
	margin: 0 0 15px 0 !important;
	float: left;
}
ul.category-list li {
	float: left;
	margin: 0 2px 4px 2px !important;
}
ul.category-list a {
	display: block;
	float: left;
	width: 130px;
	height: 130px;
	background-image: url(../images/category-bg.png);
	background-repeat: no-repeat; 
	background-position: -130px 0;
	text-decoration: none;
	text-align: center;
	outline: 0;
}
ul.category-list a span {
	display: block;
	cursor: pointer;
	font-size: 14px;
	line-height: 15px;
	color: #008dcf;
}
ul.category-list a img {
	border: 0;
	margin: 6px 0 5px 0;
	height: 74px;
	opacity: 0.9;
	-moz-opacity: 0.9;
	filter: alpha(opacity=90);
}
ul.category-list a:hover {
	background-position: 0 0;
}
ul.category-list a:hover img {
	opacity: 1;
	-moz-opacity: 1;
	filter: alpha(opacity=100);
}
ul.category-list a:hover span {
	color: #0071a6;
}
ul.category-list .va1 {
	position: relative;
	display: table !important;
	vertical-align: middle; 
	text-align: center;
	margin: 0 auto;
	width: 100%;
	height: 45px;
}
ul.category-list .va2 {
	width: 100%;
	display: table-cell !important;
	vertical-align: middle;
	position: relative;
	text-align: center;
}

div#login { 
	left: 530px; 
	position: absolute; 
	top: 35px; 
	width: 455px; 
}
div#main hr {
	color: #CCE4F0;
	background-color: #CCE4F0;
	border-style: none;
	height: 1px;
	margin: 15px 0;
}
.clear-both {
	clear: both;
}
a.nav-top-page {
	background-color: #E8F4FA;
	float: right;
	padding: 2px 5px;
	position: relative;
	top: -15px;
}
a.nav-top-page span {
	background: url(../images/nav-top-page.png) no-repeat center -33px;
	display: block;
	height: 20px;
	width: 20px;
	text-indent: -999em;
}
a.nav-top-page:hover span {
	background-position: center -3px;
}

/* Treeview *******************************************************************/
	div#main ul.treeview {
		margin: 0 0 10px 10px !important;
	}
div#main ul.treeview, 
div#main ul.treeview ul,
div#main ul.treeview ul ul
 { 
	padding: 0;
	margin: 0;
	list-style: none;
		list-style-type: none;
		list-style-image: none;
}
div#main ul.treeview ul {
	background-color: white;
	margin-top: 4px;
}
div#main ul.treeview .hitarea {
	background: url(../images/treeview-default.gif) -64px -25px no-repeat;
	height: 16px;
	width: 16px;
	margin-left: -16px;
	float: left;
	cursor: pointer;
}
/* fix for IE6 */
* html .hitarea {
	display: inline;
	float:none;
}
div#main ul.treeview li { 
	margin: 0;
	padding: 3px 0pt 3px 16px;
		line-height: 14px;
}
div#main ul.treeview li ul,
div#main ul.treeview li ul li ul,
div#main ul.treeview li ul li ul li ul {
	display: none;
} 
div#main ul.treeview li span,
div#main ul.treeview li ul li span,
div#main ul.treeview li ul li ul li span  {
	padding: 0 2px;
} 
div#main ul.treeview ul li span,
div#main ul.treeview ul li ul li span,
div#main ul.treeview ul li ul li ul li span {
	color: #555;
} 
div#main ul.treeview a.selected {
	background-color: #eee;
}
#treecontrol { 
	margin: 1em 0; 
	display: none; 
}
div#main ul.treeview .hover { 
	color: #008CD1; 
	cursor: pointer; 
}
div#main ul.treeview li { 
	background: url(../images/treeview-default-line.gif) 0 0 no-repeat; 
}
div#main ul.treeview li.collapsable, 
div#main ul.treeview li.expandable { 
	background-position: 0 -176px; 
}
div#main ul.treeview .expandable-hitarea { 
	background-position: -80px -3px; 
}
div#main ul.treeview li.last { 
	background-position: 0 -1766px 
}
div#main ul.treeview li.lastCollapsable, 
div#main ul.treeview li.lastExpandable { 
	background-image: url(../images/treeview-default.gif); 
}  
div#main ul.treeview li.lastCollapsable { 
	background-position: 0 -111px 
}
div#main ul.treeview li.lastExpandable { 
	background-position: -32px -67px 
}
div#main ul.treeview div.lastCollapsable-hitarea, 
div#main ul.treeview div.lastExpandable-hitarea { 
	background-position: 0; 
}

.brand-logo {
	float: right;
	margin: 0 0 40px 20px;
}
#product-details dt,
#brand-contact-details dt {
	clear: left;
	float: left;
	padding: 2px 5px;
	text-align: left;
	color: #004970;
	font-weight: bold;
	width: 90px;
}
#product-details dd,
#brand-contact-details dd {
	float: left;
	padding: 2px 5px;
	width: 300px;
}
#product-details dl,
#brand-contact-details dl {
	float: left;
}
#stockist-results {
	float: left;
	width: 160px;
}
#stockist-map {
	float: left;
	margin-left: 10px;
	width: 500px;
	height: 400px;
}
.stockist-map-result {
	margin-bottom: 10px;
	overflow: hidden;
	width: 160px;
	float: left;
	clear: both;
}
.stockist-map-result dt {
	display: none;
}
.stockist-map-result h3 {
	margin: 0 0 2px 0;
}
.stockist-map-result * {
	font-size: 11px;
}
.map-marker {
	float: left;
	width: 28px;
}
.result-details {
	float: left;
	width: 132px;
}
.mp {
	cursor: pointer;
	height: 38px;
	width: 24px;
	background: url(http://maps.gstatic.com/mapfiles/red_icons_A_J.png) no-repeat;
}
.iconA { background-position: 0 0 }
.iconB { background-position: 0 -38px }
.iconC { background-position: 0 -76px }
.iconD { background-position: 0 -114px }
.iconE { background-position: 0 -152px }
.iconF { background-position: 0 -190px }
.iconG { background-position: 0 -228px }
.iconH { background-position: 0 -266px }
.iconI { background-position: 0 -304px }
.iconJ { background-position: 0 -342px }

/* END CSS by Andrew Lessels */
/* SILVER SOLDIERS */