/*
CSS - Supercycles
*/

/* =navigation
------------------------*/
@import "navigation.css";


/* layout styles */

* {
	padding: 0;
	margin: 0;
}/* this will reset all elements to margin/padding = 0 */

body {
	margin: 0;
	padding: 0;
	background: #121212 url(../images/core/body-background.jpg) top center no-repeat;
}


img {border: none;}

#container {
	margin: 50px auto 0 auto;
	padding: 0;
	width: 1000px;
}

.ImageGap {
	height:120px;
}

.clearfix:after {
    content: "."; 
    clear: both; 
    display: block; 
    height: 0; 
    visibility: hidden;
}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

div.logo {
	width: 329px;
	height: 200px;
	background-image: url(../images/logo.png);
	position: absolute;
	z-index: 10;
	top: 51px;
	cursor: pointer;
}

/* =header
------------------------*/
div#header {
	width: 550px;
	margin-bottom: 50px;
	float: right;
}

div#header p {
	font: 14px Tahoma, Verdana, Helvetica, sans-serif;
	color: #888;
	line-height: 18px;
	border-left: 1px solid #888;
	padding-left: 13px;
	float: left;
	display: inline;
	margin-top: 24px;
}

div#header p a {color: #FF0000; text-decoration: none;}
div#header p a:hover {text-decoration: underline;}

div#header p.contact_numbers {margin-left: 20px;}
div#header p.opening_times {margin-left: 20px;}


/* =flash container, =banner container
------------------------*/
div#flash {
	width: 950px;
	height: 321px;
	margin: 0 auto;
	padding: 0 27px 11px 23px;
	background: url('../images/core/bg-flash.gif') no-repeat 13px 0;
}

div#banner-inner {
	width: 950px;
	height: 203px;
	margin: 0 auto;
	padding: 0 27px 33px 23px;
	background: url('../images/core/bg-banner.gif') no-repeat 0 0;
}


/* =content
------------------------*/
div#content-top {width: 1000px;	background: url(../images/core/content-top.gif) top center no-repeat; height: 18px; clear:both;}
div#content-container {width: 1000px; background: url(../images/core/content-background.gif) top center repeat-y;}
div#content-home {width: 1000px; background: url(../images/core/content-background.gif) top center repeat-y;}
div#content {width: 1000px;	background: url(../images/core/content_container-background.jpg) bottom right no-repeat;}
body#home div#content {width: 1000px;	background: url(../images/core/content_container-home.jpg) bottom right no-repeat;}


/* =text
------------------------*/
div#content div#text, div#content div.index {
	float: left;
	margin: 32px 0 0 30px;
	display: inline;
	padding-bottom: 30px;
}

div#text {width: 700px;}
div#content div.index {width: 500px;}

div#content div#text p {
	font: 14px Arial, Helvetica, sans-serif;
	color: #888;
	line-height: 18px;
	margin: 13px 37px 13px 0;
}

div#content div#text p a {color: #FF0000; text-decoration: none;}
div#content div#text p a:hover {text-decoration: underline;}

div#content div#text h1 {
	color: #fff;
	font-size: 24px !important;
	font-family: Tahoma, sans-serif;
}

div#content div#text h2 {
	color: #fff;
	font: bold 18px Tahoma, sans-serif;
	letter-spacing: 1px;
}

div#content div#text ul.list, div#content div#text div#product-detail ul {
	font: 14px Arial, Helvetica, sans-serif;
	color: #888;
	line-height: 18px;
}

div#content div#text ul.list li, div#content div#text div#product-detail ul li {
	list-style-image: url(../images/core/li-bullet.gif);
	margin-left: 16px;
	padding-left: 20px;
}

div#content div#text p.breadcrumbs {
	margin: 10px 0 5px 0;
	font-size: 10px;
}

div#content div#text img.floatleft {float: left; margin: 10px 10px 0 0;}
div#content div#text img.floatright {float: right; margin: 10px 37px 0 10px;}

div#content div#text hr {
	border: none;
	border-top: 1px solid #202020;
	clear: both;
	margin: 10px 0 10px 0;
}

div#content div#text div.product {
	text-align:center;
	width: 174px;
	float: left;
	display: inline;
	margin: 10px;
}

div#content div#text div.product p {
	text-align: center;
	margin: 0;
	padding: 0;
	font-size: 12px;
}

div#content div#text div.product a {color: #888; text-decoration: none;}
div#content div#text div.product img {border: 7px solid #151515;}

div#content div#text div.product-hover img {border: 7px solid #202020;}
div#content div#text div.product-hover a {color: #fff; text-decoration: none;}

div#content div#text div#product-detail {
	width: 480px;
	margin: 10px;
}



div#content div#text div#product-detail h2 {margin: 15px 0 0 18px;}

div#content div#text div#product-detail img.smaller {float: left; margin: 18px 10px 10px 0;}

div#content div#text div#product-detail p.enquire {float: left; display: inline; font-size: 11px; font-weight: bold; margin-top: 0;}
div#content div#text div#product-detail img.clickhere {margin: 4px 0 0 50px;}

div#content div#text div#product-detail p.product-price {font-weight: bold; text-align: right; float: right; display: inline; font-size: 11px; margin: 0;}
div#content div#text div#product-detail p.product-price strong {color: #FF0000; font: bold 16px Georgia, "Times New Roman", Times, serif;}




/* =rightbar
------------------------*/
div#rightbar {
	width: 214px;
	float: left;
	display: inline;
	margin: 32px 0 0 0;
}

div#rightbar img {clear: both;}

div#rightbar img#saxon {margin: 54px 0 0 47px;}
div#rightbar img#onepro {margin: 14px 0 0 32px;}
div#rightbar img#custom_chrome {margin: 20px 0 0 38px;}


/* =ctabar
------------------------*/
div#content div#ctabar {
	width: 250px;
	float: left;
	display: inline;
	margin: 32px 0 20px 0;
}

div#content div#ctabar div.new_bikes {
	width: 250px;
	height: 120px;
	background-image: url(../images/core/cta-new_bikes.jpg);
	background-position: top center;
	background-repeat: no-repeat;
	margin-bottom: 6px;
	cursor: pointer;
}

div#content div#ctabar div.new_bikes-hover {background-image: url(../images/core/cta-new_bikes-hover.jpg);}

div#content div#ctabar div.new_bikes p {
	color: #fff;
	font: 12px Tahoma, sans-serif;
	line-height: 18px;
	padding: 60px 12px 0 60px;
}

div#content div#ctabar div.new_bikes a, div#content div#ctabar div.new_bikes a:visited, div#content div#ctabar div.new_bikes a:hover{
	color: #fff;
	font: 12px Tahoma, sans-serif;
	line-height: 18px;
	text-decoration:none;
}

div#content div#ctabar div.used_bikes {
	width: 250px;
	height: 120px;
	background: url(../images/core/cta-used_bikes.jpg) top center no-repeat;
	cursor: pointer;
}

div#content div#ctabar div.used_bikes-hover {background-image: url(../images/core/cta-used_bikes-hover.jpg);}

div#content div#ctabar div.used_bikes p {
	color: #fff;
	font: 12px Tahoma, sans-serif;
	line-height: 18px;
	padding:60px 12px 0 60px;
}

div#content div#ctabar div.used_bikes a, div#content div#ctabar div.used_bikes a:visited, div#content div#ctabar div.used_bikes a:hover{
	color: #fff;
	font: 12px Tahoma, sans-serif;
	line-height: 18px;
	text-decoration:none;
}

div#content div#ctabar div.gift_vouchers {
	width: 250px;
	height: 120px;
	background: url(../images/core/cta-gift_vouchers.jpg) top center no-repeat;
	cursor: pointer;
}

div#content div#ctabar div.gift_vouchers:hover {	background-position: 0 -120px !important;}

div#content div#ctabar div.gift_vouchers p {
	color: #fff;
	font: 12px Tahoma, sans-serif;
	line-height: 18px;
	padding:60px 12px 0 60px;
}

div#content div#ctabar div.gift_vouchers a, div#content div#ctabar div.gift_vouchers a:visited, div#content div#ctabar div.gift_vouchers a:hover{
	color: #fff;
	font: 12px Tahoma, sans-serif;
	line-height: 18px;
	text-decoration:none;
}


/* =footer
------------------------*/
div#footer {width: 1000px;}

div#footer p {
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	margin-top: 23px;
	line-height: 18px;
	color: #888;
}

div#footer p span.small {font-size: 10px;}

div#footer a {color: #888; text-decoration: none; margin-right: 30px;}
div#footer a.last {margin-right: 0;}
div#footer a:hover {text-decoration: underline;}

div#footer img#webfirm_logo {margin-top: 20px;}