/************************************************\
 ******************** MASTER ********************
\************************************************/

/*	Created: 22 September 2009 & 4.20pm
 *	Author: Matthew Holmes <www.ivt.com.au>
*/

/*	TOC
 *	----------------------------------------------
 *	1. Colors
 *	2. Reset
 *	3. Links
 *	4. Typography
 *	5. List
 *	6. Forms
 *	7. Base
 *	8. Misc
*/


/*	1. COLORS
 *	----------------------------------------------
 *	orange		=		#fe880f
 *	blue		=		#02246e
 *	grey		=		#666666
*/


/*	2. RESET - DO NOT REMOVE OR MODIFY
 *	----------------------------------------------
*/

	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, hr {
		margin: 0;
		padding: 0;
		border: 0;
		outline: none;
		font-size: inherit;
		font-family: inherit;
		list-style: none;
		}
		
	body {
		line-height: 1;
		}	
		
	/* tables still need 'cellspacing="0"' in the markup */
	table {
		border-collapse: collapse;
		border-spacing: 0;
		}
		
	blockquote, q {
		quotes: none;
		}
		
	q:before, q:after, blockquote:before, blockquote:after {
		content: "";
		}
		
	/* remember to define focus styles! */
	:focus {
		outline: 0;
		}
		
	legend {
		display: none;
		}
		
	hr {
		height: 1px;
		border: 1px solid #CCC;
		}
		
	/* http://perishablepress.com/press/2008/02/05/lessons-learned-concerning-the-clearfix-css-hack */
	.clearfix:after {
		clear: both;
		content: ' ';
		display: block;
		font-size: 0;
		line-height: 0;
		visibility: hidden;
		width: 0;
		height: 0;
		}

	.clearfix {
		display: inline-block;
		}

	* html .clearfix {
		height: 1%;
		}

	.clearfix {
		display: block;
		}
		
	iframe {
		display: none;
		}
		
		
/*	6. FORMS 
 *	note: some parts of following css 
 *	is using CSS3 selectors. No IE6 support
 *	----------------------------------------------
*/

	form.search input,
	form.postcode input {
		width: 100px;
		padding: 4px 20px 5px 5px;
		border: 0;
		background: url(../images/search-field.gif) no-repeat;
		color: #666666;
		font-size: 11px;
		}
	form.search legend,
	form.search label,
	form.postcode legend,
	form.postcode label {
		display: none !important;
		}
		
		
/*	7. BASE
 *	----------------------------------------------
*/
	
	body {
		margin: 18px 0 0;
		background: #000 url(../images/road_final.jpg) top center no-repeat;
		font: 62.5%/1.6 Arial, Helvetica, sans-serif;
		}
		
	#container {
		width: 980px;
		margin: 0 auto;
		}
		
	#header {
		position: relative;
		height: 80px;
		background-image: url(../images/bg-header.png);
		background-repeat: no-repeat;
		background-position: 0 62px;
		}

	.accessibility, hr, #header h1 {
		position: absolute !important;
		left: -999em !important;
		}
		
	.right {
		float: right;
		}
		
	
	/* << ----------- STRUCTURE ----------- */
	
	/* -- logo */
	#header div#logo {
		float: left;
		width: 214px;
		padding: 12px 0 0 15px;
		line-height: 0;
		}
	
	/* -- slogan */
	#header div#slogan {
		float: left;
		padding: 15px 152px 0 0;
		}
		
	#header form {
		position: absolute;
		top: 20px;
		right: 20px;
		width: 126px;
		}
	#header form button {
		position: absolute;
		top: 0;
		right: 0;
		display: block;
		width: 25px;
		height: 25px;
		margin: 0;
		padding: 0;
		border: 0;
		background: transparent;
		cursor: pointer;
		text-indent: -999em;
		}
	#header p {
		position: absolute;
		top: 47px;
		right: 20px;
		}
		
	
	/* -- navigation */
	#navigation {
		position: relative;
		height: 46px;
		background-image: url(../images/bg-header.png);
		background-repeat: no-repeat;
		background-position: 0 -18px;
		z-index: 99;
		}
		
		/* primary */
		ul#nav {
			position: relative;
			float: left;
			width: 450px;
			height: 27px;
			margin: 0 0 0 11px;
			}	
		ul#nav li {
			position: relative;
			float: left;
			height: 27px;
			margin: 0;
			padding: 0;
			}
		ul#nav li a {
			display: block;
			height: 27px;
			background-image: url(../images/pri-nav.gif);
			background-repeat: no-repeat;
			text-indent: -999em;
			}
		ul#nav li a.road {
			width: 58px;
			background-position: 0 0;
			}
		ul#nav li a.urban {
			width: 65px;
			background-position: -58px 0;
			}
		ul#nav li a.mountain {
			width: 95px;
			background-position: -123px 0;
			}
		ul#nav li a.lifestyle {
			width: 83px;
			background-position: -218px 0;
			}
		ul#nav li a.womens {
			width: 83px;
			background-position: -301px 0;
			}
		ul#nav li a.youth {
			width: 66px;
			background-position: -384px 0;
			}
		
		ul#nav li a.road:hover,
		ul#nav li:hover a.road {
			background-position: 0 -27px;
			}
		ul#nav li a.urban:hover,
		ul#nav li:hover a.urban {
			background-position: -58px -27px;
			}
		ul#nav li a.mountain:hover,
		ul#nav li:hover a.mountain {
			background-position: -123px -27px;
			}
		ul#nav li a.lifestyle:hover,
		ul#nav li:hover a.lifestyle {
			background-position: -218px -27px;
			}
		ul#nav li a.womens:hover,
		ul#nav li:hover a.womens {
			background-position: -301px -27px;
			}
		ul#nav li a.youth:hover,
		ul#nav li:hover a.youth {
			background-position: -384px -27px;
			}
			
			
			
		ul#nav ul {
			position: absolute;
			top: -999em;
			width: 440px;
			height: auto;
			}
		ul#nav ul ul {
			position: relative;
			top: 0;
			width: auto;
			height: auto;
			padding: 0;
			background: none;
			border: 0;
			}
		ul#nav li:hover ul {
			width: 535px;
			top: 27px;
			left: -10px;
			background: url(../images/drop-arrow.png) -960px 0 no-repeat;
			}
		ul#nav ul div {
			float: left;
			width: 513px;
			margin: 14px 0 0;
			padding: 10px 10px 15px;
			border: 1px solid #999;
			border-top: 0;
			background: #000;
			z-index: 1;
			}
		ul#nav li:hover ul.urban {
			width: 645px;
			left: -68px;
			top: 27px;
			background: url(../images/drop-arrow.png) -896px 0 no-repeat;
			}
		ul#nav ul.urban div {
			width: 623px;
			}
		ul#nav li:hover ul.mountain {
			width: 892px;
			left: -133px;
			background: url(../images/drop-arrow.png) -818px 0 no-repeat;
			}
		ul#nav ul.mountain div {
			width: 870px;
			}
		ul#nav li:hover ul.lifestyle {
			width: 762px;
			left: -228px;
			background: url(../images/drop-arrow.png) -728px 0 no-repeat;
			}
		ul#nav ul.lifestyle div {
			width: 740px;
			}
		ul#nav li:hover ul.womens {
			width: 595px;
			left: -311px;
			background: url(../images/drop-arrow.png) -644px 0 no-repeat;
			}	
		ul#nav li:hover ul.womens {
			width: 655px;
			left: -311px;
			background: url(../images/drop-arrow.png) -644px 0 no-repeat;
			}	
		ul#nav ul.womens div {
			width: 633px;
			}
		ul#nav li:hover ul.youth {
			width: 280px;
			left: -90px;
			background: url(../images/drop-arrow.png) -874px 0 no-repeat;
			}
		ul#nav ul.youth div {
			width: 258px;
			}	
		ul#nav li:hover li ul {
			top: 0;
			left: 0;
			width: 120px;
			background: none;
			}
		ul#nav li li {
			float: left;
			width: 115px;
			min-height: 130px;
			height: auto !important;
			height: 130px;
			margin: 0 5px 0 0;
			background: url(../images/dropdown-divider.gif) top right no-repeat;
			}
		ul#nav li li.end {
			background: none;
			}
		ul#nav li li li {
			float: none;
			width: auto;
			min-height: 0;
			height: auto !important;
			margin: 0;
			border: 0;
			background: none;
			}
		ul#nav li li span {
			color: #ee3224;
			font-size: 1.2em;
			font-weight: bold;
			text-transform: uppercase;
			}
		ul#nav li li a {
			float: none;
			width: 120px;
			height: auto;
			text-indent: 0;
			background: none;
			color: #b3b3b3;
			font-size: 1.1em;
			text-decoration: none;
			text-transform: uppercase;
			}
		ul#nav li li a:hover {
			color: #ee3224;
			}
			
		
		/* dropdown image rollover */
		div#map {
			float: left;
			position: relative;
			display: inline;
			margin: 0;
			padding: 0;
			width: auto;
			height: auto;
			border: 0;
			background: none;
			z-index: 99;
			}
		div#mapPoint_road,
		div#mapPoint_urban,
		div#mapPoint_mountain,
		div#mapPoint_lifestyle,
		div#mapPoint_womens,
		div#mapPoint_youth {
			position: absolute;
			top: 60px;
			left: 718px;
			z-index: 99;
			width: auto;
			height: auto;
			background: none;
			}
		div#mapPoint_road {
			left: 370px;
			}
		div#mapPoint_urban {
			left: 470px;
			}
		div#mapPoint_lifestyle {
			left: 590px;
			}
		div#mapPoint_womens {
			left: 485px;
			}
		div#mapPoint_youth {
			left: 410px;
			}
		
			
		
		/* secondary */
		ul#secondary {
			float: right;
			width: 423px;
			height: 27px;
			margin: 0 11px 0 0;
			}
		ul#secondary li {
			float: left;
			height: 27px;
			}
		ul#secondary li a {
			display: block;
			height: 27px;
			background-image: url(../images/sec-nav.gif);
			background-repeat: no-repeat;
			text-indent: -999em;
			}
		ul#secondary li a.team {
			width: 58px;
			background-position: 0 0;
			}
		ul#secondary li a.dealers {
			width: 76px;
			background-position: -58px 0;
			}
		ul#secondary li a.myapollo {
			width: 98px;
			background-position: -134px 0;
			}
		ul#secondary li a.downloads {
			width: 108px;
			background-position: -232px 0;
			}
		ul#secondary li a.contact {
			width: 83px;
			background-position: -340px 0;
			}
		ul#secondary li a.team:hover {
			background-position: 0 -27px;
			}
		ul#secondary li a.dealers:hover {
			background-position: -58px -27px;
			}
		ul#secondary li a.myapollo:hover,
		ul#secondary li:hover a.myapollo {
			background-position: -134px -27px;
			}
		ul#secondary li a.downloads:hover {
			background-position: -232px -27px;
			}
		ul#secondary li a.contact:hover {
			background-position: -340px -27px;
			}
			
			
		ul#secondary ul {
			position: absolute;
			top: -999em;
			width: 440px;
			height: auto;
			}
		ul#secondary ul ul {
			position: relative;
			top: 0;
			width: auto;
			height: auto;
			padding: 0;
			background: none;
			border: 0;
			}
		ul#secondary li:hover ul {
			width: 535px;
			top: 27px;
			left: 0;
			background: url(../images/drop-arrow.png) -958px 0 no-repeat;
			}
		ul#secondary ul div {
			float: left;
			width: 193px;
			margin: 14px 0 0;
			padding: 10px 10px 15px;
			border: 1px solid #999;
			border-top: 0;
			background: #000;
			z-index: 1;
			}
		ul#secondary li:hover ul.menu_myapollo {
			width: 215px;
			left: 668px;
			top: 27px;
			background: url(../images/drop-arrow.png) -936px 0 no-repeat;
			}
		ul#nav ul.menu_myapollo div {
			width: 193px;
			}
		ul#secondary li li {
			float: none;
			width: auto;
			min-height: 0;
			height: auto !important;
			margin: 0;
			border: 0;
			background: none;
			}
		ul#secondary li li span {
			color: #ee3224;
			font-size: 1.2em;
			font-weight: bold;
			text-transform: uppercase;
			}
		ul#secondary li li a {
			float: none;
			width: 160px;
			height: auto;
			text-indent: 0;
			background: none;
			color: #b3b3b3;
			font-size: 1.1em;
			text-decoration: none;
			text-transform: uppercase;
			}
		ul#secondary li li a:hover {
			color: #ee3224;
			}
			
			
	/* -- content */
	#content {
		position: relative;
		padding: 20px;
		background-image: url(../images/bg-content.png);
		background-repeat: repeat;
		background-position: 0 0;
		}
		
		#sidebar {
			float: right;
			width: 300px;
			}

		#mainbar {
			float: left;
			width: 620px;
			height: 330px;
			background: #ddd;
			}
			
			#mainbar .description {
				width: 620px;
				height: 330px;
				overflow: hidden;
				}
			
			/* --- latest updates */
			#slideshow_container {
				margin: 0 0 21px;
				background: #fff;
				}
			#slideshow_container h2 {
				padding: 4px 10px 3px;
				background: #4d4d4d;
				color: #fff;
				font-size: 1.4em;
				text-transform: uppercase;
				}
			#slideshow_navigation a:nth-child(odd) {
				background-color: #e6e6e6;
				}
			#slideshow_navigation a {
				position: relative;
				display: block;
				width: 270px;
				height: 31px;
				padding: 0 5px 0 25px;
				text-decoration: none;
				}
			#slideshow_navigation a span {
				position: absolute;
				top: 7px;
				left: 95px;
				color: #666666;
				font-size: 1.1em;
				}
			#slideshow_navigation a img,
			#slideshow_navigation a span {
				-moz-opacity: 0.5;
				opacity: 0.5;
				filter: alpha(opacity=50);
				filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);
				}
			#slideshow_navigation a.activeSlide img,
			#slideshow_navigation a.activeSlide span {
				-moz-opacity: 1.00;
				opacity: 1.00;
				filter: alpha(opacity=100);
				filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);
				}
			#slideshow_navigation a.activeSlide,
			#slideshow_navigation a:hover {
				background-image: url(../images/updates-arrow.png);
				background-position: 7px 9px;
				background-repeat: no-repeat;
				}

			

		
	/* -- extras */
	#extras {
		margin: 17px 0 0;
		padding: 0 0 15px;
		border-top: 1px solid #595959;
		background-image: url(../images/bg-extras.png);
		background-repeat: repeat;
		background-position: 0 0;
		}
	#extras .col {
		float: left;
		display: inline;
		width: 326px;
		margin: 15px 0 0;
		text-align: center;
		border: 0;
		}
	#extras .col form {
		position: relative;
		}
	#extras .col form button {
		position: absolute;
		top: 0;
		right: 100px;
		display: block;
		width: 25px;
		height: 25px;
		margin: 0;
		padding: 0;
		border: 0;
		background: transparent;
		cursor: pointer;
		text-indent: -999em;
		}
	#extras .links {
		border-right: 1px solid #595959;
		border-left: 1px solid #595959;
		}
	#extras .bikelink {
		padding: 27px 0 0;
		border: 0;
		}
	#extras h3 {
		margin: 5px 0 12px;
		}
		
		/* links */
		.links ul {
			width: 167px;
			height: 81px;
			margin: 0 auto;
			}
		.links li {
			height: 27px;
			}
		.links li a {
			display: block;
			height: 27px;
			background-image: url(../images/links.png);
			background-repeat: no-repeat;
			text-indent: -999em;
			}
		.links li a.archive {
			background-position: 0 -27px;
			}
		.links li a.register {
			background-position: 0 -54px;.
			}
		
		
	/* -- footer */
	#footer {
		padding: 10px 20px;
		font-size: 1em;
		text-transform: uppercase;
		}
	#footer, #footer a {
		color: #bbb;
		text-decoration: none;
		}
	#footer li {
		float: left;
		padding: 0 25px 0 0;
		}
	#footer li a {
		font-size: 1.2em;
		}
	#footer p {
		text-align: right;
		}
	#footer img { 
		padding: 0 0 0 10px;
		vertical-align: middle;
		}
		
		
/*	8. MISC
 *	----------------------------------------------
*/

	/*#content,
	#extras,
	.links li a {
		behavior: url(/sb/styles/home/css/iepngfix.htc);
		}*/

	/* -- corner radius */
	.corner-top {
		-moz-border-radius-topleft: 10px;
		-webkit-border-top-left-radius: 10px;
		-moz-border-radius-topright: 10px;
		-webkit-border-top-right-radius: 10px;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
		}
		
	.corner-bottom {
		-moz-border-radius-bottomleft: 10px;
		-webkit-border-bottom-left-radius: 10px;
		-moz-border-radius-bottomright: 10px;
		-webkit-border-bottom-right-radius: 10px;
		border-bottom-left-radius: 10px;
		border-bottom-right-radius: 10px;
		}
		
	.corner-top-left {
		-moz-border-radius-topleft: 10px;
		-webkit-border-top-left-radius: 10px;
		border-top-left-radius: 10px;
		}
		
	.corner-top-right {
		-moz-border-radius-topright: 10px;
		-webkit-border-top-right-radius: 10px;
		border-top-right-radius: 10px;
		}
		
	.corner-bottom-left {
		-moz-border-radius-bottomleft: 10px;
		-webkit-border-bottom-left-radius: 10px;
		border-bottom-left-radius: 10px;
		}
		
	.corner-bottom-right {
		-moz-border-radius-bottomright: 10px;
		-webkit-border-bottom-right-radius: 10px;
		border-bottom-right-radius: 10px;
		}