/************************************************\
 ******************** 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;
		}
		
		
/*	3. LINKS
 *	----------------------------------------------
*/		
	
	a:link, a:active, a:visited {
		color: #ee3224;
		}
	a:hover {
		text-decoration: 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;
		background-image: url(../images/road_final.jpg);
		background-color: #000;
		background-repeat: no-repeat;
		background-position: top center;
		background-attachment: fixed;
		color: #000;
		font: 62.5%/1.6 Arial, Helvetica, sans-serif;
		}
		
	#container {
		width: 980px;
		margin: 0 auto;
		}
		
	#header {
		position: relative;
		height: 80px;
		background: url(../images/bg-header.png) 0 62px no-repeat;
		}

	.accessibility, hr, #header h1 {
		position: absolute !important;
		left: -999em !important;
		}
		
	.right {
		float: right;
		}
		
		
	/* << ----------- BACKGROUNDS ----------- */
	
	body#urban {
		background-image: url(../images/urban_final.jpg);
		}
		
	body#mountain {
		background-image: url(../images/mountain_final.jpg);
		}
		
	body#lifestyle,
	body#womens,
	body#youth {
		background-image: url(../images/plain_final.jpg);
		background-color: #050505;
		}
		
	
	/* << ----------- 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: url(../images/bg-header.png) 0 -18px no-repeat;
		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,
		ul#nav li.on a.road {
			background-position: 0 -27px;
			}
		ul#nav li a.urban:hover,
		ul#nav li:hover a.urban,
		ul#nav li.on a.urban {
			background-position: -58px -27px;
			}
		ul#nav li a.mountain:hover,
		ul#nav li:hover a.mountain,
		ul#nav li.on a.mountain {
			background-position: -123px -27px;
			}
		ul#nav li a.lifestyle:hover,
		ul#nav li:hover a.lifestyle,
		ul#nav li.on a.lifestyle {
			background-position: -218px -27px;
			}
		ul#nav li a.womens:hover,
		ul#nav li:hover a.womens,
		ul#nav li.on a.womens {
			background-position: -301px -27px;
			}
		ul#nav li a.youth:hover,
		ul#nav li:hover a.youth,
		ul#nav li.on 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: 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;
		z-index: 1;
		}
		
		/* parent category frame */
		div#road_frame,
		div#urban_frame,
		div#mountain_frame,
		div#lifestyle_frame,
		div#womens_frame,
		div#youth_frame {
			padding: 25px 0 45px 0;
			background: #003865;
			color: #fff;
			font-size: 1.1em;
			}
		div#urban_frame {
			background: #67757D;
			}
		div#mountain_frame {
			background: #ee3224;
			}
		div#lifestyle_frame {
			background: #008074;
			}
		div#womens_frame {
			background: #9B5BA4;
			}
		div#youth_frame {
			background: #009BDD;
			}
		div.frame h2 {
			float: left;
			width: 300px;
			margin: 0 25px 0 0;
			text-align: right;
			}
		div.frame div#description {
			float: left;
			width: 550px;
			padding: 5px 0 0;
			}
			
		h2#road_title,
		h2#urban_title,
		h2#mountain_title,
		h2#lifestyle_title,
		h2#womens_title,
		h2#youth_title {
			color: #fff;
			font-size: 3.5em;
			text-transform: uppercase;
			line-height: 0;
			}
			
			
		/* category list */
		div#bike_list {
			margin: 15px 0 0;
			padding: 25px 18px 35px;
			background: url(../images/bg-content.png) 0 0 repeat;
			}
			
		div#bike_list ul {
			float: left;
			width: 100%;
			background: url(../images/select.png) no-repeat;
			}
		div#bike_list li ul {
			float: none;
			width: auto;
			background: none;
			}
		div#bike_list li {
			float: left;
			padding: 35px 55px 0 0;
			}
		div#bike_list li li {
			float: none;
			padding: 0;
			}
		div#bike_list li span {
			color: #ee3224;
			font-size: 1.4em;
			font-weight: bold;
			text-transform: uppercase;
			}
		div#bike_list li li a {
			position: relative;
			z-index: 1;
			color: #b3b3b3;
			font-size: 1.2em;
			text-decoration: none;
			text-transform: uppercase;
			}
		div#bike_list li li a:hover {
			z-index: 99;
			color: #ee3224;
			}
			
		/* rollover screenshot */
		#screenshot {
			position: absolute;
			z-index: 99;
			padding: 12px 0 0;
			background: url(../images/hover-arrow.png) -2px 0 no-repeat;
			display: none;
			}
		#screenshot img {
			border: 8px solid #fff;
			-webkit-box-shadow: 0 5px 5px #000;
			-moz-box-shadow: 0 5px 5px #000;
			}
			
			
		/* bike detail */
		#bike_flash {
			margin: 20px 0 0;
			}
		#bike_detail h2 {
			padding: 5px 0 3px 22px;
			background: url(../images/bg-bike-header.png) 0 0 no-repeat;
			color: #FFF;
			font-size: 2.5em;
			text-transform: uppercase;
			}
		#bike_detail h2 span {
			padding-left: 10px;
			font-size: 13px;
			text-transform: none;
			}
		#bike_detail #image_options {
			position: relative;
			padding: 20px;
			background: #000 url(../images/bike_arrow.gif) 0 0 no-repeat;
			}
		#bike_detail #image {
			background: url(../images/hover-to-enlarge.gif) 508px 0 no-repeat;
			}
		#bike_detail #image_display {
			float: left;
			display: inline;
			width: 500px;
			margin: 25px 55px 0;
			}
		#bike_detail #image_container {
			position: relative;
			float: right;
			width: 300px;
			height: 345px;
			border: 1px solid #808080;
			background: #1a1a1a;
			}
		#bike_detail #image_container ul {
			position: relative;
			width: 240px;
			margin: 0;
			padding: 0 30px;
			overflow: hidden;
			text-align: center;
			}
		#bike_detail #image_container ul li {
			float: left;
			width: 120px;
			padding: 10px 0 0;
			}
		#bike_detail #image_display div.next_link a {
			position: absolute;
			top: 220px;
			left: 620px;
			display: block;
			width: 18px;
			height: 29px;
			text-indent: -999em;
			background: url(../images/next.gif) no-repeat;
			}
		#bike_detail #image_display div.prev_link a {
			position: absolute;
			top: 220px;
			left: 20px;
			display: block;
			width: 18px;
			height: 29px;
			text-indent: -999em;
			background: url(../images/prev.gif) no-repeat;
			}
			
		/* raceline model */
		#bike_detail.raceline h2 {
			background: #ccc;
			color: #000;
			}
		#bike_detail.raceline #image_options {
			background: #ccc url(../images/bike_arrow-2.gif) 0 0 no-repeat;
			}
		#bike_detail.raceline #image_display div.next_link a {
			background: url(../images/next-2.gif) no-repeat;
			}
		#bike_detail.raceline #image_display div.prev_link a {
			background: url(../images/prev-2.gif) no-repeat;
			}
		#bike_detail.raceline #image_container {
			background: #e6e6e6;
			}
		#bike_detail.raceline #image {
			background: url(../images/hover-to-enlarge-2.gif) 508px 0 no-repeat;
			}
			
		/* gearup promo */
		#bike_detail #image_container .gearup {
			position: absolute;
			top: 270px;
			right: 0;
			}
			
		/* zoom options */
		.large_image { 
			position: absolute; 
			top: 21px; 
			right: 21px;
			}
		.MagicZoomPup { 
			border: 1px solid #000; 
			background: #fff; 
			cursor: auto;
			}
			
		/* tabs */
		#tabs {
			float: left;
			width: 640px;
			}
		#banners {
			float: right;
			width: 300px;
			padding: 20px 20px 15px 0;
			line-height: 0;
			}
		#banners iframe {
			display: none;
			}
		#banners div {
			margin: 0 0 20px;
			}
			
		#tabs ul {
			padding: 10px 0 0 12px;
			background: url(../images/bg-tabs.png) left bottom repeat-x;
			}
		#tabs ul li {
			float: left;
			}
		#tabs ul li a {	
			display: block;
			padding: 5px 10px 15px;
			color: #b3b3b3;
			font-size: 1.4em;
			font-weight: bold;
			text-decoration: none;
			text-transform: uppercase;
			text-align: center;
			}
		#tabs ul li a:hover,
		#tabs ul li a.selected {
			color: #ee3224;
			}
		body#road #tabs ul li a.selected {
			background: url(../images/bg-tab-arrow-road.png) 9px bottom no-repeat;
			}
		body#urban #tabs ul li a.selected {
			background: url(../images/bg-tab-arrow-urban.png) 9px bottom no-repeat;
			}
		body#mountain #tabs ul li a.selected {
			background: url(../images/bg-tab-arrow-mountain.png) 9px bottom no-repeat;
			}
		body#lifestyle #tabs ul li a.selected,
		body#womens #tabs ul li a.selected,
		body#youth #tabs ul li a.selected {
			background: url(../images/bg-tab-arrow-general.png) 9px bottom no-repeat;
			}
		.tabs {
			width: 600px;
			padding: 20px;
			background: url(../images/bg-content.png) 0 0 repeat;
			color: #b3b3b3;
			font-size: 1.1em;
			}
		.tabs table {
			width: 100%;
			}
		.tabs table th,
		.tabs table td {
			border-top: 1px solid #666666;
			}
		.tabs table th.thick,
		.tabs table td.thick {
			border-top: 2px solid #999;
			}
		.tabs table th {
			padding: 2px 35px;
			text-align: right;
			text-transform: uppercase;
			vertical-align: top;
			color: #fff;
			font-weight: normal;
			}
		.tabs .notice {
			padding: 10px 0 0 15px;
			font-style: italic;
			font-size: .9em;
			}

		
	/* -- extras */
	#extras {
		margin: 17px 0 0;
		padding: 0 0 15px;
		border-top: 1px solid #595959;
		background: url(../images/bg-extras.png) 0 0 repeat;
		}
	#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;
		}