/* 
Sports Drive
Core Styles


Created By 
Rob Wright
www.boost-creative.co.uk
--------------------------------------------------------


=Generic
--------------------------------------------------------
*/

body {
	margin:0px 0px 50px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	background: #FFF;
}

a img { border:none;}
a, a:hover{ text-decoration:none;}
a { color:#1b91e9; }
a:hover { color: #999999}

.last {border-bottom:none!important; background:none!important;}

h1, h2, h3, h4, p{
	padding:0px;
	color:#b1b2b3;
	margin:5px  20px 15px;
}

ul, ol{
	padding:0px;
	color:#b1b2b3;
	margin:25px 40px;
}

#content li {
	margin-bottom:5px; 
	line-height:17px;
}

#content ol li {	margin-bottom:10px; }

ol li  strong{
	font-size:1.1em;
}

p{	line-height:17px; }

p .image {
	display:block;
	margin:10px;
}

#main_content h1, #main_content h2, #main_content h3, #main_content h4, #main_content p, #secondary_content h1, #secondary_content h2, #secondary_content h3, #secondary_content h4, #secondary_content p {
	margin:0px 20px 15px ;
}

h1 {
	color:#cfd0d0;
	font-size:2.0em;
}
h2, h3, #main_content h2 { 
	font-size:1.5em;
	margin:30px 20px 5px ;
}

h4{
	font-weight:normal;
	font-size:1.2em;
}

h4 a{ font-size:1.3em; }

h1 span{	font-size:0.6em; }
h2  span, h3 span{	font-size:0.45em; }

/*

=Frame
--------------------------------------------------------
*/

#frame {
	width: 945px;
	margin:0px auto;
	background:#2e2e2e url(../images/layout/frame_background.png) no-repeat bottom;
	padding-bottom:21px;
}

/*

=Header
--------------------------------------------------------
*/

#frame #header {	
	height:212px;
	width:798px;
	position:relative;
	display:block;
	z-index:90;
	padding-top:0.01px;
	margin:0px auto;
	clear:both;
}


#frame #header #logo{
	margin:0px;
	padding:0px;
	width:390px;
	height:108px;
	position:absolute;
	top:0px;
}

#frame #header #logo a{
	width:390px;
	height:108px;
	display:block;
	text-indent:-50000px;
}

#home, #info{	
	position:absolute;
	display:block;
	height:47px;
	width:47px;
	text-indent:-9000px;
	overflow:hidden;
	top:163px;
}


#home:hover, #info:hover{
	background-position:0px -47px;
}

#home{	left:-50px;}
#info {	right:-50px;}

#navigation { 
	position:relative;
	padding-top:132px;
	height:78px;
}

#navigation a {	
	color:#DBDBDB;
	display:block;
	font-size:0.78em;
	text-transform:uppercase;
	height:21px;
	width:75px;
	padding-top:10px;
	text-align:center;
	background-position:0px -38px; 
}

#navigation #current_area, #navigation  a:hover{	color:#FFF; background-position:0px 0px;  }
#navigation  a:hover{	background-position:0px -77px;  }

#navigation ul{
	padding:0px 0px 0px 22px;
	margin:0px;
	list-style:none;	
	height:31px;	
}

#navigation ul li{
	padding:0px;
	margin-right:1px;
	display:inline;
	float:left;
}

#navigation ul#secondary_navigation {
	height: 47px;
	padding-left:45px;
}

#navigation ul#secondary_navigation  li {
	margin:10px 10px 0px 0px;
	height:20px;
	background:url(../images/layout/default/secondary_a_background.png) no-repeat top right;
	padding:8px 12px 0px 0px
}

#navigation ul#secondary_navigation  li a{
	background:none;
	width:auto;
	display:inline-block;
	text-align:left;
	padding:0px;
}

#navigation ul#secondary_navigation  li a.current_page{ color:#FFF; }

#navigation #strap_line {
	font-size:1.5em;
	position:absolute;
	bottom:15px;
	right:10px;	
	margin:0px;
	color:#DBDBDB;
}

/*

=Feature
--------------------------------------------------------
*/

#frame #feature {	
	border:1px solid #4e4d4d;
	margin:17px auto;
	width:790px;
	padding:3px;
	position:relative;
}

#frame #feature img{	
	display:block;
	border:1px solid #4e4d4d;
}


#frame #feature ul {
	list-style:none;
	margin:0px;
	padding:12px 0px 0px 55px;
	height:27px;
	color:#DBDBDB;
	background:#3F3F3F;
}

#frame #feature ul li{
	font-size:1.4em;
	display:inline;
	margin:0px 10px 0px 0px;
}

#feature #delivery {
	width:96px;
	margin:0px;
	position:absolute;
	height:94px;
	text-indent:-8000px;
	overflow:hidden;
}

/*
= Content 
------------------------------------------------------------
*/

#frame #content {
	width:795px;
	margin:25px auto;	
}

#frame #content:after {
	content: "."; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden;
}

* html>body #frame #content {
	display: inline-block; 
	width: 100%;
}

* html #frame #content{
	/* Hides from IE-mac \*/
	height: 1%;
	/* End hide from IE-mac */
}

#content .info_box {
 	border:1px dashed #585858;
	margin:40px 0px 0px 20px;
	padding:10px 14px;
}

#content .info_box p{	margin:5px; }

#content .info_box strong { font-size:1.3em;  }

#content .info_box p img  {
	float:left;
	margin:0px 10px 10px 0px;
	display:inline;
}

#frame #content #quotation{
	font-size:1.6em;
	margin-bottom:0px;
	color:#FFF;
}

#frame #content  #quotation strong{ display:block; margin-bottom:5px;}


/* Content -> Form */

#frame #content label {
	font-size:0.9em;
}

#frame #content form {
	margin:0px 0px 0px 20px;
	border-top:1px solid #524f4f;
	padding-top:15px;
}

#frame #content fieldset {
	border:1px solid #524f4f;
	margin:0px 0px 20px;
	padding:20px 10px;
	background:#333232;
}

#frame #content fieldset label { font-size:1.1em; }

#frame #content fieldset legend {
 	color:#b1b2b3;
	font-size:1.3em;
	padding:0px 5px;
}

#frame #content form fieldset p{ margin-left:30px; }

#frame #content form p{	margin-left:2px;}

#frame #content label span {
	border:1px solid #666666;
	display:block;
	margin:5px 0px 0px 0px;
}
#frame #content fieldset p {width:418px;}

#frame #content label input, #frame #content label textarea{
	display:block;
	padding:4px;
	background:#3F3F3F;
	border:1px solid #3F3F3F;
	color: #CCCCCC;
	width:405px;
	font-size:10px;
	margin:1px;
}

#frame #content label input.required, #frame #content label textarea.required {
	background:#3F3F3F url(../images/required.png) no-repeat top right; 
	padding-right:54px;
	width:355px;
}

/* Content > Color Chart */

.color_chart {
	list-style:none;
	padding-top:15px;
	padding-left:14px;
	border-top:1px solid #3F3F3F;
	margin:15px  20px;
	clear:both;
	height:200px;
}


.color_chart li{
	float:left;
	margin:5px 11px 15px 0px;
}
.color_chart li a{
	display:block;
	color:#585757;
}
.color_chart li img{
	display:block;
	padding:1px;	
	width:75px;
	height:50px;
	border:1px solid #585757;
}
.color_chart li img:hover{
	border:1px solid #8a8a8a;
}

.swatch {
	color:#b1b2b3;
	font-size:1.3em;
	font-weight:bold;
	padding:10px 15px 20px;
	background:#121111;
	border:1px solid #3F3F3F;	
}

.swatch .tip-text img {
	display:block;
	margin-top:10px;	
	padding:1px;
	border:1px solid #3F3F3F;
}

/*
= Main Content 
------------------------------------------------------------
*/

#frame #content #main_content {
	margin:15px 0px;
	width:332px;
	float:left;

}

#frame #content #main_content #key_points {
	font-size:1.6em;
	list-style:none;
	font-weight:bold;
	margin:20px 30px;
	padding:0px;
}


#main_content #key_points li {
	margin-bottom:18px;
	position:relative;
}

#frame #content #main_content #key_points li img {
	position:absolute;
	top:-5px;
	right:0px;
}

/* Main Content > News Item */

#main_content .news_item {
	margin-bottom:10px;
	margin-left:30px;
	font-size:0.9em;
	padding:10px 6px 15px;
	border-bottom:2px solid #343434;
	width:240px;
}

#main_content #current_news {
	color:#e9e9ea;
	border-bottom:2px solid #4c4c4c;
}


#main_content .news_item a{
	display:block;
	margin-left:-3px;
	font-size:1.3em;
	margin-bottom:3px;
}
#main_content .news_item span {
	font-size:0.8em;

	margin-left:-3px;
	color:#3779C1;
	margin-bottom:3px;
}


/*
= Secondary Content 
------------------------------------------------------------
*/

#frame #content #secondary_content {
	margin:15px 0px 0px 0px;
	width:461px;
	float:left;
	border-left:1px dashed #585858;
}

/*
= Work Gallery
*/

#work_gallery {
	background:#3f3f3f;
	margin:10px 0px 10px 20px;
	padding:5px 3px 15px;
}

#work_gallery:after {
	content: "."; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden;
}

* html>body #work_gallery:{
	display: inline-block; 
	width: 100%;
}

* html #work_gallery: {	/* Hides from IE-mac \*/	height: 1%;	/* End hide from IE-mac */}  

/*End of Clear fix */

#work_gallery h2 {
	margin:5px 4px;
	font-weight:normal;
}

#work_gallery ul {
	list-style:none;
	margin:25px 0px 20px 10px;
}

#work_gallery ul li{ 
	margin:0px 8px 10px 0px;	
	float:left; 
}

#work_gallery ul li img{  display:block; padding:1px; }

#work_gallery ul li a{ 
	display:block; 	
	border:1px solid #585757;
}


#work_gallery ul li a:hover{ 	border:1px solid #0066CC; }

.gallery_product {
	color:#b1b2b3;
	font-size:1.3em;
	font-weight:bold;
	padding:10px 15px 20px;
	background:#121111;
	border:1px solid #3F3F3F;	
}

.gallery_product .tip-text img {
	display:block;
	margin-top:10px;	
	padding:1px;
	border:1px solid #3F3F3F;
}

/*
= News Articles
------------------------------------------------------------
*/

#news_article{
	margin:15px 0px 0px 0px;
	width:461px;
	float:left;
	border-left:1px dashed #585858;
}

#news_article h2{
	margin:0px 0px 20px 20px;
	border-bottom:3px solid #3b3a3a;
	padding-bottom:8px;
}

#news_article h2 span{
	color:#3779C1;
	margin-top:3px;
	letter-spacing:1px;
	display:block;
	font-size:10px;
}

#news_article p { margin:15px 0px 15px 20px; }

#news_article #news_image {	margin:20px 0px 20px 20px; 	 }

#news_article #news_image img{
	display:block;
	margin:0px auto;
	padding:1px;
	border:1px solid #515151;
}




/*
= Image Gallery
------------------------------------------------------------
*/

#image_gallery  {
	width:240px;
	margin:0px 0px 20px 20px;
	padding:20px 0px 50px;
	float:right;
	border-left:5px solid #3f3f3f;
	z-index:100;
}

/*Clear fix */

#image_gallery:after {
	content: "."; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden;
}

* html>body #image_gallery {
	display: inline-block; 
	width: 100%;
}

* html #image_gallery {	/* Hides from IE-mac \*/	height: 1%;	/* End hide from IE-mac */}  

/*End of Clear fix */


#image_gallery ul{
	list-style:none;
	margin:0px 0px 10px 20px;
	padding:0px;
}

#image_gallery ul li{
	float:left;
	margin:0px 10px 10px 0px;
}

#image_gallery ul li a {
	display:block;
	border:1px solid #696969;
}

#image_gallery ul li a:hover {	border:1px solid  #3399FF; }

#image_gallery ul li a img{
	display:block;
	padding:1px;
}

.gallery {
	z-index:100;
	color:#b1b2b3;
	font-size:1.3em;
	font-weight:bold;
	padding:10px 15px 20px;
	background:#121111;	
}

.gallery  .tip-text img {
	display:block;
	margin-top:10px;	
	padding:1px;
	border:1px solid #3F3F3F;
}


/*
= Site Links
------------------------------------------------------------
*/

#site_links  {
	width:771px;
	border:1px dashed #585858;
	margin:25px auto;
	clear:both;
	padding:12px;
}

#site_links  p{
	width:244px;
	height:65px;
	margin:0px;
	padding:0px;
	float:left;
}

#site_links p a{
	width:244px;
	height:65px;
	display:block;
	overflow:hidden;
}

#site_links p a span{ display:none; }


/*
= Footer
------------------------------------------------------------
*/

#footer {
	width:798px;
	margin:25px auto;
	background:#3f3f3f;
	color:#dddedf;
	position:relative;
	clear:both;
	height:44px;
}

#footer p{
	margin:0px;
	padding:0px;
	position:absolute;
	top:15px;
	right:20px;
}

#footer ul{
	list-style:none;
	margin:0px;
	padding:15px 0px 0px 20px 
}

#footer ul li{
	display:inline;
	margin:0px 0px 0px 10px;
	padding-right:15px;
	background:url(../images/layout/default/footer_li_background.jpg) no-repeat right;
}

#footer ul li a{ 
	text-transform:uppercase;
	color:#dddedf;
}
#footer ul li a:hover{ 
 color:#898989;
}

#oyster {
	color:#71899e;
	display:block;
	position:absolute;
	bottom:-75px;
	right:0px;
}

#oyster  strong{
	display:block;
	width:67px;
	text-indent:-9000px;
	background:url(../images/layout/oyster_logo.png) no-repeat;
	height:30px;
	position:absolute;
	right:-70px;
	top:-7px;
}

/*
= Misc
------------------------------------------------------------
*/

.error {
	color:#F7F7F7!important;
	position:relative;
}
.error img{
	top:1px;
	position:absolute;
	left:-19px;
}

.success {
	color:#F7F7F7!important;
	padding-left:24px;
	font-size:1.2em;
	background:url(../images/layout/success_background.jpg) no-repeat;
}