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

/* = NAV_ANCILLARY = __________________________________________________________________________________________________________ */
/*
	NB: Its actually a part of main navigation but seperate to the tab style nav
		Were not using sprites here because we need the background to scale with the text if user
		increases font size
		
	Usage:	first and last items must have id's (nav_anc_first and nav_anc_last)
			<ul>
				<li id="nav_anc_first" class="current"><a href="#"><span>Home</span></a></li>
				<li><a href="#">About</a></li>
				<li><a href="#">Contact</a></li>
				<li><a href="#">Advertising</a></li>
				<li><a href="#">Blog</a></li>								
				<li id="nav_anc_last"><a href="#"><span>Trade level access</span></a></li>
			</ul>
		
		current style set by adding class="current" to li
*/
div#login ul {
	font: 0.95em Arial, Helvetica, sans-serif;
	margin-right: 20px;/* re-defined in ie6.css */
	float: left;
}

div#nav_ancillary ul {
	font: 0.95em Arial, Helvetica, sans-serif;
	margin-right: 20px;/* re-defined in ie6.css */
	float: right;
}
/* == DEFAULT ITEMS (middle) == */
div#nav_ancillary li a,
div#nav_ancillary li a:link,
div#nav_ancillary li a:visited {
	display: block;
	float: left;
	min-height: 20px;/* height set in ie6.css */
	padding: 3px 5px 0 4px;
	color: #004E74;
	text-decoration: none;
	background: #fff url(../images/nav/main-nav-light-bg.png) bottom left repeat-x;/* re-defined in ie6.css */
	border-left: 1px solid #9FCCE2;
}
/* hover states */
div#nav_ancillary li a:hover,
div#nav_ancillary li.current a,
div#nav_ancillary li.current a:visited {
	color: #fff !important;/* ie6 wanted !important - safe here */
	background-color: #1B6080;
	background-image: url(../images/nav/main-nav-dark-bg.png);/* re-defined in ie6.css */
}
/* == FIRST AND LAST ITEMS == */
/*
NB:	We need to treat the first and last differently becasue they need a corner image aswell as the bg
	
	This requires additional markup for li#nav_anc_first and li#nav_anc_last (a span inside the a tag)
	ex.
	<li id="#nav_anc_first"><a href="#"><span>item text</span></a></li>
	Unfortunateley we need to use an id for first and last so we can apply current class correctly in ie6
	which supports multi class access but not if it is preceded with another class or id
	references.
	ie. "li.first.current {}" would work but "div#nav_ancillary li.first.current {}" wont be parsed correctly.
	In the interest of consistency the class .current is used for all nav menu items to set inherited rules
*/
/* === FIRST == */
div#nav_ancillary li#nav_anc_first a {
	border-left: 0 !important;/* ie6 wanted !important - safe here */
	padding: 0 0 0 15px !important;/* ie6 wanted !important - safe here */
	background: transparent url(../images/nav/main-nav-light-left.png) bottom left no-repeat;/* re-defined in ie6.css */
}
div#nav_ancillary li#nav_anc_first a span {
	display: block;
	float: left;
	min-height: 20px;/*height set in ie6.css */
	padding: 3px 5px 0 0;
	background: #fff url(../images/nav/main-nav-light-bg.png) bottom left repeat-x;
}
div#nav_ancillary li#nav_anc_first a:hover,
div#nav_ancillary li#nav_anc_first.current a,
div#nav_ancillary li#nav_anc_first.current a:visited {
	background-image: url(../images/nav/main-nav-dark-left.png);/* re-defined in ie6.css */
}
div#nav_ancillary li#nav_anc_first a:hover span,
div#nav_ancillary li#nav_anc_first.current a span,
div#nav_ancillary li#nav_anc_first.current a:visited span {
	color: #fff;
	background-color: #1B6080;
	background-image: url(../images/nav/main-nav-dark-bg.png);/* re-defined in ie6.css */
}

/* === LAST == */
div#nav_ancillary li#nav_anc_last a {
	padding: 0 15px 0 0 !important;/* ie6 wanted !important - safe here */
	background: transparent url(../images/nav/main-nav-light-right.png) bottom right no-repeat;/* re-defined in ie6.css */
}
div#nav_ancillary li#nav_anc_last a span {
	display: block;
	float: left;
	min-height: 20px;/* height set in ie6.css */
	padding: 3px 0 0 4px;
	background: #fff url(../images/nav/main-nav-light-bg.png) bottom right repeat-x;/* re-defined in ie6.css */
}
div#nav_ancillary li#nav_anc_last a:hover,
div#nav_ancillary li#nav_anc_last.current a,
div#nav_ancillary li#nav_anc_last.current a:visited {
	background-image: url(../images/nav/main-nav-dark-right.png);/* re-defined in ie6.css */
}
div#nav_ancillary li#nav_anc_last a:hover span,
div#nav_ancillary li#nav_anc_last.current a span,
div#nav_ancillary li#nav_anc_last.current a:visited span {
	color: #fff;
	background-color: #1B6080;
	background-image: url(../images/nav/main-nav-dark-bg.png);/* re-defined in ie6.css */
}

/* = NAV_MAIN = ______________________________________________________________________________________________________________ */
/*
Expected list markup: (ul is inside div#content_top_row)
	<ul id="nav_main">
		<li class="current"><a href="#"><span>Search</span><img src="images/blank.gif" alt="Search" /></a></li>
		<li><a href="#"><span>Browse</span><img src="images/blank.gif" alt="Browse" /></a></li>
		<li><a href="#"><span>Showcase</span><img src="images/blank.gif" alt="Showcase" /></a></li>
	</ul>
	
	img and span tag used for an image replacement method where menu text is never lost - with normal image replacement
	the replaced elements text will be completeley invisible to a user who has css enabled but images disabled
*/

ul#nav_main {
	width: 740px; 
	margin-left: 236px;
	display: inline-block; /* part of clearfix */
}
/* bind clearfix directly to ul */
ul#nav_main:after { 
    content: ".";  
    display: block;  
    clear: both;  
    visibility: hidden;  
    line-height: 0;  
    height: 0;  
}
/* NB: html must have a xmlns attribute */
html[xmlns] ul#nav_main {  
    display: block;  
}  
* html ul#nav_main {  
    height: 1%;  
} 

/* == SHARED LI RULES == */
ul#nav_main li {
	display: block;
	float: left;
	width: 141px;
	height: 40px;
	margin-right: 4px;
	text-align: center;
	position: relative;
}

/* span and img part of image replacement - that falls back to readable text */
ul#nav_main li a span {
	display: block;
	text-indent: -9999px;
}
/*
ul#nav_main li a img {
	width: 100%;
	height: 40px;
	position: absolute;
	top: 0;
	left: 0;
	font: 1.5em Arial, Helvetica, sans-serif;
	color: #004a6d;
}
*/
/* == SHARED LINK RULES == */
ul#nav_main li a {
	display: block;
	width: 100%;
	height: 40px;
	background: transparent url(../images/nav/sprite-main-tabs.png) 0 0 no-repeat;/* re-defined in ie6.css */
	text-indent: -999em;
}
/* == ID SPECIFIC BACKGROUND POSITIONS == */
/* === SEARCH == */
li#nav_search a:link,
li#nav_search a:visited {
	background-position: 0 0;
}
li#nav_search a:hover {
	background-position: 0 -40px;
}
li#nav_search.current a,
li#nav_search.current a:link,
li#nav_search.current a:visited{
	background-position: 0 -80px !important;
}
/* === BROWSE == */
li#nav_browse a:link,
li#nav_browse a:visited {
	background-position: -145px 0;
}
li#nav_browse a:hover {
	background-position: -145px -40px;
}
li#nav_browse.current a,
li#nav_browse.current a:link,
li#nav_browse.current a:visited{
	background-position: -145px -80px !important;
}
/* === SHARE == */
li#nav_share a:link,
li#nav_share a:visited {
	background-position: -290px 0;
}
li#nav_share a:hover {
	background-position: -290px -40px;
}
li#nav_share.current a,
li#nav_share.current a:link,
li#nav_share.current a:visited{
	background-position: -290px -80px !important;
}/* === SELL == */
li#nav_sell a:link,
li#nav_sell a:visited {
	background-position: -435px 0;
}
li#nav_sell a:hover {
	background-position: -435px -40px;
}
li#nav_sell.current a,
li#nav_sell.current a:link,
li#nav_sell.current a:visited{
	background-position: -435px -80px !important;
}
/* === SHOWCASE == */
ul#nav_main li#nav_showcase {
	width: 156px;
}
li#nav_showcase a:link,
li#nav_showcase a:visited {
	background-position: -580px 0;
}
li#nav_showcase a:hover {
	background-position: -580px -40px;
}
li#nav_showcase.current a,
li#nav_showcase.current a:link,
li#nav_showcase.current a:visited{
	background-position: -580px -80px !important;
}
/* = NAV_LOCAL = ______________________________________________________________________________________________________________ */
div#nav_local ul {
	list-style-type: none;
	list-style-image: none !important;
	margin: 0 !important;
}
div#nav_local li {
	width:259px; /* 290 - 1(margin-left) */
	margin-left: 1px;
	color: #004a6d;
	font-size: 1.36em;
	font-weight: normal;
}
div#nav_local li a {
	display: block;
	width: 239px; /* li width - 20(padding-left) */
	padding: 8px 0 8px 20px;
	text-decoration: none;
	line-height: 1.2em;
	background: #eff7fb url(../images/nav/local-nav-bg.jpg) bottom left no-repeat;
	border-top: 1px solid #DCF1FF;
	color: #004a6d;
}
div#nav_local li a:hover,
div#nav_local li.current a {
	color: #fff;
	background: #008cd0 url(../images/nav/local-nav-bg-hover.png) top left repeat-y;
}
div#nav_local li.current {
	color: #fff !important;
}
/* nested levels */
div#nav_local li.current li a {
	background: #E8F4FA;
	color: #004a6d !important;
}
div#nav_local li.current li a:hover {
	background: #9AD0EC;
	color: #fff !important;
}
div#nav_local li li {
	font-size: 0.8em;
	margin-left: 0;
}
div#nav_local li li a {
	background: #E8F4FA;
}
div#nav_local li li li {
	font-size: 1em;
	border: 0;
}
div#nav_local li li li a {
	width: 224px; /* li width - 35(padding-left) */
	padding: 8px 0 8px 35px;
	background: #E8F4FA url(../images/nav/sprite-local-nav-l3.gif) 0 0 no-repeat !important;
}
div#nav_local li li li a:hover {
	background-color: #9AD0EC !important;
	background-position: -259px 0 !important;
}

div#nav_local li li li li {
	font-size: 0.9em;
	border: 0;
}
div#nav_local li li li li a {
	width: 219px; /* li width - 40(padding-left) */
	padding: 8px 0 8px 40px;
	background: #E8F4FA url(../images/nav/sprite-local-nav-l4.gif) 0 0 no-repeat !important;
}
div#nav_local li li li li li {
	font-size: 1em;
	border: 0;
}
div#nav_local li li li li li a {
	width: 209px; /* li width - 50(padding-left) */
	padding: 8px 0 8px 50px;
	background: #E8F4FA url(../images/nav/sprite-local-nav-l5.gif) 0 0 no-repeat !important;
}

/* = FOOTER NAV = _____________________________________________________________________________________________________________ */
div#footer ul {
	width: 720px;
	float: left;
	margin: 20px 0 0 60px;/* margin-left redefined in ie6.css */
}
div#footer li {
	padding: 0 20px;
}
div#footer a,
div#footer a:visited {
	color: #000;
	text-decoration: underline;
}
div#footer a:hover,
div#footer a:active {
	color: #008DCF;
}
/* == POWERED BY LINK == */
a#motorspec {
	display: block;
	float: left;
	width: 172px;
	height: 23px;
	margin-top: 18px;
	background: transparent url(../images/logo-motorspec-powered.gif) no-repeat;
	text-indent: -9999px;
}