/* @override http://linkgarageequipment.co.uk/css/main.css */
/* Link Garage Equipment CSS. Built by Definition Web Design 2008 http://www.definitiondesign.co.uk */

/* general styling first */
/* reset css styles individually instead of universal selector. */
/* based on http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/ */
html, body{
	margin: 0;
	padding: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
	border-left:0;
} 
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, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
body {
	line-height: 1;
	color: white;
	background: black;
	font-family: Arial, Verdana, Helvetica, sans-serif;
}
ol, ul {	list-style: none;}
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
/* end reset styles */
/* clearing technique */
.clearfix:after {
    content:"."; 
    display:block; 
    height:0; 
    clear:both; 
    visibility:hidden;
}
.clearfix {display:inline-block;}
/* mac hide \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
 /* End hide */
/*........... do not change or amalgamate the above clearfix styles..................*/
hr {display: none;}
ul{list-style:disc;margin-left:16px;}
p,h1,h2,h3,h4,h5,h6,ul {margin-bottom:.7em}
a img,img{border:none;display:block;}
a{cursor:pointer!important;text-decoration:none}
a:link{color:#b4d511}
a:visited{color:#b4d511}
a:hover{color:#b4d511; text-decoration: underline;}
a:active{color:#4e8861}
input{font-family: Arial, Verdana, Helvetica, sans-serif}
h1,h2,h3,h4,h5,h6{font-weight:bold}
h1{	
	color:#fff;
	font-size: 25px ;
	font-family:"Franklin Gothic Book", Arial, Verdana, Helvetica, sans-serif
}
h2{
	color:#b4d611;
	font-size: 22px;
	font-family: "Franklin Gothic Book", Arial, sans-serif;
}
h3,h4{
	color:#90d1f6;
	font-size: 22px;
	font-family: "Franklin Gothic Book", Arial, sans-serif;
}
body{
	color:#fff; 
	font-size: 13px; 
	text-align:center;/* for ie5.+*/
	background:#000 url(../images/bodybg.jpg) repeat-x 0 0;
	padding:90px 0 20px 0;
}
/* ......structure first ...... */
/* outer holds the top part of the faded side borders and #inner holds the bottom part of the faded borders. If the page is long the middle section will just be black */
/* the footer will hold the bottom round corners and the wheel image and the gradiesnt image all in obe background image.*/
#outer,#inner{
	width:940px;
	text-align:left;
	margin:auto;
	position:relative;
	background:#000 url(../images/mainbg.gif) no-repeat 0 0;
}
#inner{
	background: url(../images/mainbg-base3.jpg) no-repeat 0 100%;
}
/* top holds only the rounded corner png */
.top{
	width:940px;
	height:8px;
	margin:auto;
	background:url(../images/top.png) no-repeat 0 0;
	overflow:hidden;
}
/* main hold the gradient backcground at the top*/
#main{
	width:940px;
	background:url(../images/headtop.jpg) no-repeat 0 0;
	position:relative;
	z-index:2;
}
/* right column */
#content{
	float:right;
	width:702px;
	margin:0 21px -40px 0;/* drag footer up underneat the right side to creat overlap effect*/
	display:inline;
	position:relative;
	z-index:2;
}
h2.interested{
	text-align:right;
	line-height:1em;
	padding:20px 0 0 0;
	letter-spacing:-.06em;
}
h2.interested strong{
	display:block;
	color:#fff;
	font-style:italic;
	letter-spacing:-.04em;
}

/* main navigation across top */
ul#nav{
	margin:32px 0 11px 0;
	background:#b2be42;
}
ul#nav li{
	float:left;
	border-right:1px solid #a5b13b;
	border-left:1px solid #bbc93f;
	font: 131% "Franklin Gothic Book", Arial, sans-serif;
	list-style:none;
}
ul#nav li.last{border-right:none}
/* span is used as current class*/
ul#nav li a,
ul#nav li span{
	color:#fff;
	float:left;
	padding:10px 16px 12px;
}
ul#nav li span,ul#nav li a:hover{
		background:#bfd127 url(../images/semi-on.jpg) no-repeat 50% 100%;
}

/* main big graphic */
.mainpic{
	width:702px;
	height:190px;
	background:url(../images/honeycomb.jpg) no-repeat 0 100%;
}
.mainpic img{
	border:1px solid #3a3a3a;
}
h1.welcome{
	display:block;
	position:relative;
	overflow:hidden;
	margin:0 0 10px 0;
	font-family: 'Arial Black', arial, verdana;
	font-weight: bold;
	height: 1%;
	padding-bottom: 3px;
}

.content-box{
	border:1px solid #666;
	color:#fff;
	min-height:0;
	padding:32px 24px 22px;
	background:#222 url(../images/speedo.jpg) no-repeat 100% 100%;
	margin:0 0 12px 0;
	float: left;
	width: 652px;
}
.first-para,.second-para{
	text-align:justify;
	line-height:1.52em;
	font-weight:bold;
	margin:0 6px 20px 0;
}
.first-para {
	float: left;
}
div.second-para{
	margin-right:0;
	font-weight:normal;
	color:#999;
	margin:0 0 20px 0;
	clear:both;
}
.content-box ul#product-list {
	margin-top: 0;
	width: 100%;
}
ul#product-list img,
ul#product-list p.productimg img {
	float: left; 
	margin: 0 15px 10px 0;
}
ul#product-list h2 {
	font-size: 18px;
	margin-top: 5px;
}
#content img#sidepic {
	float:right;
	background:#fff;
	width:171px;
	height:162px;
	border:1px solid #000;
	padding:7px 8px;
	margin:0 0 20px 20px;
	display: inline;
}
#content div.first-para div#prod-img {
	position: relative;
}
span#plus{
	position:absolute;
	top:3px;
	right:2px;
	display: block;
	z-index:99;
	width:19px;
	height:18px;
	background:url(../images/plus.gif) no-repeat 0 0;
}
/* quotebox is on home page and pdf is on product page */
.quotebox,.pdf{
	border:1px solid #666;
	background:#212121 url(../images/quotes.jpg) no-repeat 15px 30px;
	padding:25px 15px 25px 73px;
	min-height:0;
	color:#b2cffc;
	text-align:justify;
	line-height:1.5em;
}
.quotebox blockquote p{margin:0}
.pdf{
	background:#1b1b1b;
	padding:16px 115px 20px 25px ;
	position:relative;
	clear: both;
}
.pdf h4{
	color:#b4d611;
	font-size:12px;
	text-transform:uppercase;
	margin:0 0 4px 0;
	font-family:arial,sans-serif;
	line-height:1em;
}
.pdf p{
	color:#d1d2d2;
}

/* ad box */
ul.ads{
	width:700px;
	margin:12px 0 0 1px;
	height:102px;
	background:url(../images/ads.jpg) repeat-x 0 0;
	list-style:none;
	text-align:center;
	padding:31px 0 0 0;
	float: left;
}
ul.ads li{
	display:inline;
	margin:0 3px;
}
ul.ads li img{
	display:inline;
	vertical-align:middle;
}

/* footer styles */
#footer{
	margin:0 0 0 -45px;/* stretch footer wider than parent so we get an overlap*/
	background:#000 url(../images/footer.jpg) no-repeat 0 0;
	padding:55px 0 107px 0;
	clear:both;
	position:relative;
	z-index:1;
	min-height:0;
}
* html #footer{height:1px}
#footer p{
	width:659px;
	text-align:center;
	font-size:93%;
	line-height:1.6em;
	padding:95px 0 0;
	margin:0 0 0 300px;
}

#sidebar{
	float:left;
	width:192px;
	margin:0 0 0 9px;
	display:inline;
	padding:0 0 20px
}
/*Using alpha image loader for ie so need to have extra nesting without a position:relative otherwise links are not clickable */.logo,.logo p,.logo p a{
	width:207px;
	height:206px;
	display:block;
	overflow:hidden;
	text-decoration:none;
	margin:0;
	float:left;
}
.logo{margin-top:-42px;position:relative}
.logo p{	
	background:url(../images/logo.png) no-repeat 0 0;
}
.logo a{position:relative}
.logo span{position:absolute;top:-999em}

/* sidebox */
.sidebox{
	border:1px solid #2d2d2d;
	background:#181818;
	padding:15px 12px 16px 12px;
	min-height:0;
 	margin:0 0 16px 0;
	clear:both;
}
.sidebox h2{
	text-transform:uppercase;
	margin:0 0 5px 0;
	font-weight:normal;
	letter-spacing:-.06em;
}
ul.sidenav,ul.sidenav ul{
	width:142px;
	margin:0 0 0 9px;
	list-style:none;
}
ul.sidenav ul{margin:0;}
ul.sidenav li{
	padding:3px 5px 4px;
	border-bottom:1px solid #3c3c3c;
	font-weight: bold;
}
ul.sidenav li a{
	color:#fff;
	font-size:100%;
}
ul.sidenav li a:hover{color:#b4d611}
ul.sidenav li ul li {
	font-weight: normal;
}
/* sidenav  subnav styles */
.sidenav li.current{
	font-size:100%;
	text-transform:uppercase;
	font-weight: bold;
	color:#a3c30e;
	padding:3px 0 9px;
}
.sidenav li a.current {
	color: #02A0FF;
	font-weight: bold;
}
.sidenav li.current a {
	padding:3px 5px 4px;
	display:block;
	color:#a3c30e;
}

.sidenav li.current li a:hover, .sidenav li.current li.nestedcurrent a{color:#90d1f6}
.sidenav li.current ul li a{
	color:#00a2ff;
	font-weight:bold;
	padding:3px 5px 3px 3px;
	font-size:110%;
}
.sidenav li li{border:none;}
.sidenav li ul{padding:2px 0 1px;text-transform:none}


.sidebox dl, #news .content-box dl{padding:0 0 0 3px}
.sidebox dt, #news #content dt {
	font-size:116%;
	color:#4e88e1;
	font-weight:bold;
	margin:10px 0 3px 0;
}
#news #content dt {
	font-size: 150%;
	margin-bottom: 10px;
}
.sidebox dd, #news .content-box  dd{
	font-size:93%;
	color:#858585;
	margin:0 0 7px 0;
	line-height:1.5em;
}
#news .content-box  dd {
	font-size: 100%;
}
.sidebox dd a.readmore, #news .content-box dd a.readmore{
	float:right;
	padding:2px 0 0 10px;
	background:url(../images/arrow.gif) no-repeat 0 9px;
	font-size:93%;
	display: block;
	margin-top: -5px;
}
#news .content-box dd a.readmore {
	font-size: 110%;
}
p#paginate {
	border: 1px solid #414141;
	padding: 4px 7px 4px 7px;
	text-align: right;
	background: #2C2C2C;
	margin-top: 15px;
}
.sb2{	padding:15px 12px 10px 12px;}

/* ...........changes for product page............. */
/* use body  class to change image */

.tyre h1.welcome {margin:0 0 10px 0;
	text-transform: capitalize;
}
.sidepic2{
	float:right;
	width:193px;
	height:183px;
	margin:0 0 20px 0;
}
h2.tm{
	font-size:24px;
	text-transform:uppercase;
	margin:-15px 0 1em 0;
	line-height:1em;
	position:relative;
	letter-spacing: -0.06em;
}
.tyre h3{margin:0 0 10px 0;font-weight:normal}
.tyre h3 strong{color:#00a2ff}

.pdf div{
	position:absolute;
	right:-30px;
	top:-29px;
	width:149px;
	height:151px;
}
.pdf div p,.pdf div p a{
	width:149px;
	height:151px;
	display:block;
	text-decoration:none;
}
.pdf div p a{position:relative;}
.pdf div p{background:url(../images/pdf.png) no-repeat 0 0}
.pdf div p span{position:absolute;top:-999em}
.content-box ul{
	float:left;
	list-style:none;
	margin:25px 0 37px;
	line-height:1.5em;
	padding:0 45px 0 0;
}
.content-box ul li{
	padding:0 0 0 9px;
	background:url(../images/green-bullet.gif) no-repeat 0 9px;
	font-weight:bold;
	float: left;
	width: 48%;
}

/* ..... extra css for tyre page ............*/
h2.featured,h2.featured em{
	display:block;
	position:relative;
	overflow:hidden;
	width:232px;
	height:18px;
	margin:27px 0 9px 0;
}
h2.featured em{
	position:absolute;
	left:0;
	top:0;
	background:url(../images/featured.jpg) no-repeat 0 0;
	margin:0;
}
.feat-prod{
	border:1px solid #666;
	background:#f1f1f1;
	padding:8px 17px 11px 23px;
	min-height:0;
	color:#222;
	line-height:1.5em;
}
.feat-prod div{margin:0 0 0 142px;min-height:0;}
.feat-prod h3{
	margin:15px 0 6px 0;
	font-size:29px;
	color:#545454;
}
.feat-prod h4{margin:0 0 8px 0;font-weight:normal}
.feat-prod h4 strong{color:#00a2ff}
.feat-prod p.lpic{
	float:left;
	width:114px;
	margin:0;
}
.feat-prod p strong{color:#222;font-size:124%}
.feat-prod div p{
	margin:0 0 1px 0;
	font-size:85%;
	line-height:1.6em;
	font-weight:bold;
}
body#home .feat-prod img {
	float: left;
}
p.readmore2{
	float:right;
	font-size:116%!important;
	margin:15px 0 0 0;
}
p.readmore2 a{
	float:right;
	padding:2px 0 0 0;
	/* background:url(../images/arrow2.gif) no-repeat 0 12px; */
	color:#02A0FF;
	font-weight:bold;
	margin-top: -20px;
}
p.readmore2 a:hover{color:#02A0FF; text-decoration: underline;}