@charset "utf-8";
/* CSS Document */

/* start of reset styles */
* {margin: 0px; padding: 0px;}
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 {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	vertical-align: baseline;
}
body {height:100%;
	line-height:1;
}
ol, ul {
	list-style: none}
/* end ofreset styles */


a {text-decoration:none;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold}

body {background-image:url(Images/main/bggrad.jpg);
	background-repeat:repeat-x;
	background-position:0 0;
	background-color:#6E6E6E;}
	
#containerbody {
	position:absolute;
	top:0;
	bottom:0;
	width:100%;
	}
	
p,h1,h2,h3,h4,li,address { font-family:Arial, Helvetica, sans-serif}

p	{ color:white;
	line-height:1.2em;
	font-size:90%; _font-size:13px;}	
	
#container1 {position:relative;
			min-width:1020px;
			/* IE Dynamic Expression to set the width */
    width:expression(document.body.clientWidth < 1025 ? "1020px" : "100%" )}		/* can't have jquery and margin or padding in same div */

	
#container {min-width:800px;
			position:relative;
			/* IE Dynamic Expression to set the width */
    width:expression(document.body.clientWidth < 805 ? "800px" : "100%" )}
	
span {display:none}	

#navlogomain {float:left;
				position:relative;
				padding-left:40px;
				width:320px}
#navlogo {float:left}

#logo { height:211px;
		width:320px;
		background-image:url(Images/main/logo&phone.gif);
		background-repeat:no-repeat;
		background-position:0 50px}

		
			#rightnav {
					width:418px;
					height:155px;
					position:absolute;
					top:0px;
					right:18px;
					text-align:right;
					background-image:url(Images/main/VOSAlogo.gif);
					background-position:363px 109px;
					background-repeat:no-repeat;
					margin-left:380px}
	
			#rightnav li {float:left;
							display:block;
							padding-top:2px;
							padding-bottom:16px;
							padding-left:14px;
							padding-right:20px;				
						background-image:url(Images/main/tabtop.jpg);
						background-repeat:no-repeat;			
						background-position:right bottom}	
						
			#rightnav li.small {padding-left:15px;	
						background-image:url(Images/main/tabtopsmall.jpg);
						background-repeat:no-repeat;			
						background-position:right bottom}	
						
			#rightnav li.small2 {padding-left:17px;		
						background-image:url(Images/main/tabtopsmallest.jpg);
						background-repeat:no-repeat;			
						background-position:right bottom}					
							
			#rightnav a{display:block;
						z-index:5;
						color:#747474;
						font-size:12px;
						padding-left:36px;
						padding-top:12px;
						padding-bottom:6px;
						background-image:url(Images/main/mot.jpg);
						background-repeat:no-repeat;
						background-position:0 5px}	
						
			#rightnav a.about{
						padding-left:46px;
						padding-top:12px;
						padding-bottom:6px;
						background-image:url(Images/main/aboutus.jpg);
						background-repeat:no-repeat;
						background-position:0 3px}	
									
			#rightnav a.find{
						padding-left:50px;
						padding-top:12px;
						padding-bottom:6px;
						background-image:url(Images/main/findus.jpg);
						background-repeat:no-repeat;
						background-position:0 3px}
						
			#rightnav a.sitemap {color:white;
								display:block;
								font-size:12px;
								padding:12px 8px 10px 0px;
								background-image:none}			
									
			#rightnav a.mot:hover{background-position:0 8px;
								padding-top:15px;}	
														
			#rightnav a.about:hover{background-position:0 6px;
								padding-top:15px;}	
						
			#rightnav a.find:hover{background-position:0 6px;
								padding-top:15px;}								
	
			#rightnav a.sitemap:hover {color:#63A9F5}									
			
#navbox {position:relative;
		height:184px;
		width:256px;
		background-image:url(Images/main/navbarbox.jpg);
		background-repeat:no-repeat;
		background-position:right top;
		}	
				
#navbox ul {padding-left:84px;
			margin-right:25px;
			padding-top:9px}

#navbox li {padding-top:2px;
			padding-bottom:0px;
			display:block;
			position:relative;
			background-image:url(Images/main/navbardivider.gif);
			background-repeat:no-repeat;
			background-position:left bottom;
			padding-bottom:2px}	
				
#navbox li.bottom {background-image:none}			
			
#navbox a {color:#666666;
			display:block;
			position:relative;
			z-index:10;
			font-size:14px;
			background-image:url(Images/main/gotobutton.jpg);
			background-repeat:no-repeat;
			background-position:100% 50%;
			padding:10px 0 10px 0}			

#navbox a:hover {color:#4E9AEE;
				display:block;
				padding:10px 0 10px 3px;
				background-image:url(Images/main/gotobutton2.jpg);
				background-repeat:no-repeat;
				background-position:100% 50%;}	
				
#navbox li.current a {color:#4E9AEE;
				padding:10px 0 10px 0px;
				background-image:url(Images/main/gotobutton2.jpg)	}					

			#maincar {position:absolute;
				top:170px;
				left:340px;
				text-align:center;
				width:100%}
				
			#maincar img{
				margin-right:365px}


	.testimonials {float:left;
					clear:both;
					width:100%;
					height:265px;
					text-align:center}
					
	#imagecenter {
				margin-right:auto;
				margin-left:auto;
				position:relative}
											
	#imagecenter #imagebox {position:relative;
				width:680px;
				height:143px;
				background-color:#E6E6E6;
				margin-right:auto;
				margin-left:auto;
				margin-top:78px;}	
				
#imagecenter #imagebox p.see{color:#595959;
							padding:0;
							margin:0;
							font-weight:bold;
							text-align:center;
							font-size:13px;
							display:block;}	
				
	#images img {float:left;
				border-top:solid 4px #ffffff;
				border-bottom:solid 4px #ffffff;
				border-left:solid 4px #ffffff;
				margin-top:4px;
				margin-bottom:2px}		
				
	#images img.left {	border-left:solid 8px #ffffff;
						margin-left:9px}
	#images img.right {	border-right:solid 8px #ffffff}			
				
#imagecenter #imagebox p.address {display:block;
							float:none;
							color:white;
				position:absolute;
				bottom:-35px;
				right:0;
				font-size:14px;
				font-weight:bold;
				text-align:right;
				padding-left:0;
				padding-right:0;
				width:495px}
	
	.testimonial4,.testimonial3, .testimonial2, .testimonial1 {
	position:absolute;
	display:none;
	padding-bottom:10px;
	top:-78px;
	width:680px;
	left:0px;
	background-image:url(Images/pages/popubox.jpg);
	background-repeat:no-repeat;
	background-position:100px 0px;
	z-index:20}
		
						
											
	.position6 {position:absolute;
						padding-bottom:25px;
						top:-78px;
						width:680px;
						left:0px;
						background-image:url(Images/pages/popubox.jpg);
						background-repeat:no-repeat;
						background-position:100px 0px;
						z-index:20;
						visibility:visable}
			/*not working in IE7! */
						
											
#imagecenter #imagebox p{text-align:left;
						line-height:1.2em;
						display:block;
					padding-top:13px;	
					padding-right:128px;
					padding-left:128px;	
						color:#167AE9;
						font-size:12px;
						margin:0
						}	
						
#imagecenter #imagebox p.name {padding-top:2px;
						margin-top:0;
						color:#606060}	
						
#imagecenter #imagebox p span {color:#606060;
								display:inline;
								text-align:right}																
											
			
#footer {width:100%;
		float:left;
		clear:both;
		border-top:solid 3px #FFFFFF}	
		
#footer p {padding:5px 20px 5px 20px;
			color:#CCCCCC;
			font-size:75%; _font-size:10px}		
								
/*  MOT page */

				
#maintext {width:650px;
			float:left;
			position:relative;
			background-image:url(Images/main/maintextbox.jpg);
				background-repeat:no-repeat;
				background-position:0px 0px;
				height:100%;
				overflow:hidden} /* to prevent expander box from flowing to bottom of body */
			
#maintext img {float:right;
				clear:right;
				padding:0px 13px 3px 30px;}
				
#maintext img.botmpic {padding-bottom:1px}
		
#maintext h1 {display:block;
			padding:0px 0px 0px 35px;
			color:#666666;
			font-size:28px;
			font-weight:bold;
			height:80px;
			width:220px;
			background-image:url(Images/pages/motspanner.jpg);
			background-repeat:no-repeat;
			background-position:right bottom;}	
#maintext h1.mothead {padding-top:7px}			
			
#maintext h2.topheader {padding-top:20px}			
						
#maintext p {color:#666666;
			padding-right:30px;
			padding-left:35px;
			font-size:90%; _font-size:13px;}	
		
#maintext h2 {color:#4E9AEE;
				padding:30px 0 18px 35px;
				font-size:121%;
				}		

						
#maintext p.topp {color:#666666;
				padding-top:18px}	
											
#maintext ul {padding:12px 0 12px 35px;}
									
#maintext li{color:#666666;
			font-size:90%; _font-size:13px;
			line-height:1.2em;
			padding-left:10px;
			list-style-type:disc;
			list-style:inside}
p.lastpara {padding-bottom:30px}			
			
p.bottomp {
	display:block;
	padding-left:0px;
	position:absolute;
	right:1px;
	bottom:-3px;
	height:40px;
	width:650px;
	background-color:#6E6E6E;
	background-image:url(Images/main/maintextboxbottom.jpg);
	background-repeat:no-repeat;
	background-position:66px 0px;
}	
			
#maintext p.address2	{font-weight:bold;
			position:relative;
			right:-140px;
			bottom:0px;
			width:500px;
			font-size:90%; _font-size:13px;
			display:block;
			text-align:right;
			padding:0px 2px 2px 0;
			color:#FFFFFF;
			z-index:3}	
			
#maintextcentre {position:relative}		
			
#footer.footertext {margin-top:0px}					
				
#expander {float:left;
				margin-top:172px;
				background-color:#FFFFFF;
			width:650px;
			background-image:url(Images/main/maintextboxexpander.jpg);
			background-repeat:repeat-y;
			background-position:right bottom;
			min-height:100%; /* to prevent expander box from flowing to bottom of body */
			overflow:hidden}
				
														
/* end of MOT page */	
/* Repairs page */	

#maintext h1.repairheader {background-image:none;
							padding-top:0px;
							height:35px}	
									
#maintext img.repair {padding:0px 25px 10px 15px;
						}

#maintext h2.toph2repair	{padding-top:18px}	
#maintext h3 {font-weight:bold;
			color:#666666;
			font-size:90%; _font-size:13px; /*ie6 only sees with underscore */
			padding-left:35px}	
			
#maintext p span {display:inline;
						color:#4E9AEE;
						font-size:105%; _font-size:15px;
						font-weight:bold}
						
						

/* end of repairs page */
/*  servicing page */	

#maintext h1.serviceheader	{background-image:url(Images/pages/sparkplug2.jpg);
					background-position:90% 45%;
					background-repeat:no-repeat;
					padding-bottom:30px;
					padding-right:125px;
					padding-top:0px;
					height:52px;
					width:200px}
						
#maintext h2.toph2service {padding-top:5px}	

#maintext img.service {padding-left:20px}		
#maintext img.toppic2 {padding-top:0px;
						padding-left:20px}	

/*  find us page */	

#maintext p.iframe {display:block;
					text-align:center;
				margin:30px auto 0px auto}
				
#maintext address	{color:#666666;
						font-size:90%; _font-size:13px;
						padding-left:35px}
						
#open {				width:340px;
					padding-bottom:30px;
					position:relative;
					line-height:1em;
					margin:0}
					
#open p {display:block;
					position:absolute;
					left:0;
					top:0;
					color:#666666;
					font-weight:normal;
					margin:0;
					width:140px}					

#open p.time {left:140px;
				width:190px}
																
#maintext a.iframelink {text-align:left;
						font-size:12px}		
						
/* div to prevent float prob on small screen */

#minwidth {border-left:solid 1020px #6E6E6E;
			height:1px}	

/* about us */

#maintext a {color:#1782E0}

/* tip box */

#tip {height:58px;
		width:105px;
		background-image:url(Images/pages/tipbox.jpg);
		background-repeat:no-repeat;
		background-position:0 0;
		position:absolute;
		top:100px;
		left:406px;
		visibility:hidden}
		
#containerbody #container1 #tip p {color:#818181;
		padding:8px 0 0px 25px;
		margin-right:12px;
		font:13px;
		line-height:1.3em;
		display:block;}		
		
		#tipexpander {height:50px;
		width:253px;
		background-image:url(Images/pages/tipboxexpander.jpg);
		background-repeat:no-repeat;
		background-position:0 0;
		position:absolute;
		top:104px;
		left:500px;
		visibility:hidden}
		
#tipexpander p	{color:#818181;
		padding:3px 0 0px 23px;
		margin-right:12px;
		font:13px;
		line-height:1.3em;
		display:block;}	
		
/* tyres */

#tyres {height:168px;
			width:210px;
			position:absolute;
			z-index:2;
			top:430px;
			left:104px;
			background-image:url(Images/pages/tyresad.jpg);
			background-position:left right;
			background-repeat:no-repeat}	
			
#tyres p {padding:95px 20px 10px 30px;
			color:#666666;
			font-size:13px;
			line-height:1.3em}
			
#tyres p a{color:#1782E0}

#maintext p img.cards {margin-right:-20px}	

/* site map */			

#maintext h1.mapheader {width:450px;
						background-image:none;
						height:30px}
						
#maintext li.map {list-style:none;
					line-height:2.5em;
					padding-left:28px;
					margin-left:28px;
					background-image:url(Images/pages/maparrow.jpg);
					background-position:left center;
					background-repeat:no-repeat}
					
#maintext li.map a {color:#666666}	

#maintext h2.toph2map	{padding-top:40px}	

#footer p.copy {text-align:center;
				padding-top:0px;
				padding-right:25px}	

#footer p.copy a {color:#CCCCCC}						


/* mootools */	


h2.toggler {color:#4E9AEE;
	cursor:pointer; _cursor:default;
	padding-bottom:30px;
	}
				
#maintext #accordion {padding:30px 0 0px 0}
				
#maintext #accordion h2 {padding:0 0 18px 57px; _padding-left:35px;
						text-decoration:none;
						display:block;
						background-image:url(Images/pages/downarrow.jpg); _background-image:none;
						background-repeat:no-repeat;
						background-position:35px 3px;
						}	
h2.toggler_test {color:#4E9AEE;
	cursor:pointer; _cursor:default;
	padding-bottom:30px;
	}
				
#maintext #accordion {padding:30px 0 0px 0}
				
#maintext #accordion h2 {padding:0 0 18px 57px; _padding-left:35px;
						text-decoration:none;
						display:block;
						background-image:url(Images/pages/downarrow.jpg); _background-image:none;
						background-repeat:no-repeat;
						background-position:35px 3px;
						}	
#test {display:block;
       height:300px;
       width:300px;
       background-color:#CCCCCC;
}

