/* CSS Document */

/* Global Styles
--------------------------------------------------------------- */

* {
	margin: 0px;
	padding: 0px;
}

body, html {
	min-height: 101%;
}

body {
	text-align: left;
	font-size: 62.5%;
	font-family: Arial, Helvetica, sans-serif;
	color: #000000;
	background: url(../../images/misc/bg.jpg) top center repeat-x #000;
	margin: 0px;
}

a:link, a:visited, a:focus {
	color: #0000FF;
	text-decoration: underline;
	outline: none;
}

a:hover, a:active {
	color: #000;
	text-decoration: underline;
}

a img {
	border: none;
}

/* H1/H2/H3 Styles
--------------------------------------------------------------- */

h1 {
	font-size: 2.3em;
	font-weight: normal;
	color: #000;
	text-transform:uppercase;
}

h2 {
	font-size: 1.6em;
	font-weight: normal;
	color: #333;
	padding:10px 0 0;
}

h3 {
	font-size: 1.3em;
	font-weight: normal;
	color: #666;
}

.white{
	color:#fff;
}
.red{
	color:#880000;
}
.deepRed{
	color:#360000;
}
/* Container Styles
--------------------------------------------------------------- */

#outerContainer {
	width: 100%;
	float: left;
}

#container {
	width: 960px;
	margin-left: auto;
	margin-right: auto;
	position: relative;
	font-size: 1.2em;
	height:600px;
	background:url(../../images/layout/graphic-bg.jpg) 100px 0px no-repeat;
}

	#contentContainer {
		width: 890px;
		background: #fff;
		margin-top:230px;
		padding-top:290px;
		float:left;
		position:relative;
		left:40px;
		border:#191919 6px solid;
		outline:1px solid #5b5b5b;
	}
		#index #contentContainer, #car-diagnostic #contentContainer, #other #contentContainer{
			padding-top:320px;
		}
		#contact #contentContainer{
			padding-top:20px;
		}		
/* Main Styles
--------------------------------------------------------------- */

		#main {
			float: left;
			width: 420px;
			padding: 10px 10px 10px 20px;
		}
	    #main h2 {
	         font-weight: normal;
	         color: #000;
			 border-bottom:1px dotted #666;
	      
			 }
		
			#main p {
				margin: 10px 0px 10px 0px;
				font-size: 1.2em;
				line-height: 20px;
				color:#464646
			}
			
			#main p a, #main ul a, #main ol a {
				color:#1280d5;
				border-bottom:1px dotted #1280d5;
				text-decoration:none;
				-moz-transition:background 0.3s ease; -o-transition:background 0.3s ease; -webkit-transition:background 0.3s ease;
			}
			
			#main p a:hover, #main ul a:hover , #main ol a:hover  {
				background:#e4e4e4;
			}
			
			#main p.small {
					font-size:0.9em;
			}
			
			#main ul {
				font-size: 1.2em;
				padding: 3px 0px 3px 25px;
				
			}
			
				#main ul li {
					padding: 4px 0px;
				}
				
			#main ol {
				font-size:1.2em;
				margin:10px 0 0 20px;
				font-weight:bold;
			}
			
				#main ol li {
					padding:4px 0;
				}
				
		#googleMap {
			width: 450px;
			height: 238px;
			margin:10px 0px;
			border:1px solid #fff;
		}
#main p.contentPhone{
	font-size:2.2em;
	color: #880000;
	padding: 10px;
	background: #e4e4e4;
}
    #main p.contentPhone strong{
        font-size:1.8em;
    }
	
    #main p.contentPhone span {
        display: block;
    }
	
	.abs-img {
		margin-top:10px;
	}
		
/* Sidebar/CTA Styles
--------------------------------------------------------------- */
		
		#car-diagnostic #sidebar {
			margin-top:200px;
		}
		
		#sidebar {
			float: right;
			width: 393px;
			margin-top:20px;
		}
		
		.cta-no-third-party {
			margin:0 18px 15px;
		}
		
			#yellowCta{
				background:url(../../images/layout/yellowCta-bg.jpg);
				height:145px;
				width:393px;
				position:relative;
				padding-top:15px;
			}
				#yellowCta p{
					width:360px;
					padding:0px 10px;
					text-align:center;
					font-size:1.8em;
					text-transform:uppercase;
				}
					#yellowCta p.bottom{
						position:absolute;
						top:115px;
						font-size:1.0em;
						color:#fff;
					}
						#yellowCta p.bottom span{
							color:#FEA500;
							font-size:1.7em;
						}
						
			#mobile-service-cta{
				position:relative;
				margin:20px 0px 20px 15px;
			}	
				#mobile-service-cta p{
					position:absolute;
					top:246px;
					left:0px;
					width:350px;
					text-align:center;
					color:#fff;
					font-size:2.4em;
					font-weight:bold;
				}
				
		.tyresImg{
			padding:20px 0px 0px 20px;
		}
/* Header Styles
--------------------------------------------------------------- */
#graphic-bg{
	position:absolute;
	z-index:1;
	right:0px;
}
#headerContainer {
	width: 931px;
	margin-left: auto;
	margin-right: auto;
}


#header {
	width: 960px;
	height: 130px;
	position: absolute;
	z-index: 10;
	top: 0px;
}
	#headerContent{
		position:absolute;
		top:230px;
		width:500px; 
		height:100px;
		display:block;
	}
		#contact #headerContent{
			display:none;
		}
	#headerTextHeading{
		background: url(../../images/layout/headerTextBg.png) repeat-x;
		position:absolute;
		top:20px;
		height:80px;
		display:block;
		width:440px;
		z-index:100;
	}
		#index #headerTextHeading, #car-diagnostic #headerTextHeading, #other #headerTextHeading{
			width:700px;
		}
		#headerTextHeading h2{
			color:#fff ;
			font-size:2.2em;
			padding:17px 30px;
			text-transform:uppercase;
		}
	#car-diagnostic #headerText {
		top:340px;
		left:550px;
		width:350px;
	}
	#headerText{
		position:absolute;
		top:40px;
		left:500px;
		width:400px;
		font-size:1.3em;
		text-transform:uppercase;
		line-height:1.5em;
	}
		#body-controllers #headerText{
			font-size:1.2em;
		}
		#headerText strong{
			font-size:1.4em;
			color:#A20000;
		}
	#headerContent .number{
		position:absolute;
		top:215px;
		left:505px;
		z-index:101;
		width:370px;
		font-size:3.2em;
		color:#880000;
	}
		#headerContent .number span{
			font-size:1.4em;
		}
	#headerNumber-bg{
		position:absolute;
		top:185px;
		left:478px;
		z-index:100;
	}	
	#logo {
		position:absolute;
		top:40px;
	}
	
	#cta-top-right {
		width: 220px;
		text-align: center;
		padding:10px 0px 20px 0px;
		font-size: 1.9em;
		color:#fff;
		background:#5b5b5b;
		border:3px solid #000;
		position:absolute;
		top:30px;
		right:10px;
		z-index:1;
	}
	
		#cta-top-right .phone {
			font-size: 1.6em;
		}
		
		#cta-top-right p.fast-response {
			display: none;
		}
				
			.mobile-services #cta-top-right p.fast-response {
				display: block;	
			}	
			
			.mobile-services #cta-top-right p.vehicle-diagnostics {
				display: none;	
			}			
		
	#index #carlogos, #car-diagnostic #carlogos, #other #carlogos{
		display:block;
	}
	#carlogos{
		position:absolute;
		top:100px;
		left:50px;
		display:none;
	}
	
	#paperclip{
		position:absolute;
		top:-20px;
		left:330px;
		z-index:100;
	}
		#index #paperclip, #car-diagnostic #paperclip, #other #paperclip{
			left:590px;
		}
		
	#index .more-models, #car-diagnostic .more-models {
		display:block;
		position:absolute;
		z-index:110;
		top:235px;
		left:353px;
		width:71px;
		font-size:1.3em;
		padding:5px;
		background:#1d1a1a;
		color:#fff;
	}
	
	.more-models {
		display:none;
	}
	
/* Main Image Styles
--------------------------------------------------------------- */

#imgmain {
	z-index: 100;
	position: absolute;
	top: 10px;
	left: 62px;
}
	#index #imgmain, #car-diagnostic #imgmain, #other #imgmain {
		top: 10px;
		left: 342px;
	}
#slideshow {
	width: 940px;
	height: 220px;
	position: absolute;
}
	
	#slideshow img {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 8;
	}
	
	#slideshow img.active {
		z-index: 10;
	}
	
	#slideshow img.last-active {
		z-index: 9;
	}


/* Horizontal Navigation Styles
--------------------------------------------------------------- */

#navigation {
	width: 960px;
	height: 60px;
	z-index: 110;
	position: absolute;
	top: 150px;
	left:0px;
	background:#000;
	border:3px solid #333333;
}

	#navigation ul {
		margin: 0px;
		padding: 0px;
		position:absolute;
		top:-10px;
	}
	
		#navigation ul li {
			list-style: none;
			position:relative;
			float:left;
			margin:0px 10px;
			background:url(../../images/layout/divider.gif) right no-repeat;
		}
			#navigation ul li.contact-a{
				background:none;
			}
		img.nav-on-right, img.nav-on-left{
			display:none;
		}		 
			#navigation ul li a {
				color: #fff;
				float:left;
				text-decoration: none;
				padding: 22px 15px 21px 5px;
				font-size: 1.4em;
				letter-spacing:0.05em;
				line-height:0.9em;
			}
				#navigation ul li.dropdown a{
					background:url(../../images/layout/dropdown-arrow.gif) center 57px no-repeat;
				}
				#navigation ul li.single a{
				padding: 34px 18px 34px 5px !important;
				}	
				#navigation ul li a span{
					display:block;
				}
				
				#navigation ul li a.contact-a {
					border-right: none;
				}

				#navigation ul li a:hover {
					color: #ffa400;
				}
#navigation ul li.dropdownOn a{
	color: #ffa400;
}
#navigation ul li.dropdownOff a{
	color: #fff !important;
}








.dropdownNav{
	position:absolute;
	z-index:200;
	display:none;
	background:#990100;
	outline:1px solid #000;
	
	border:2px solid #BF0B0B;
	top:215px;
}
	#programming-dropdown{
		left:160px;
	}
	#mobile-dropdown{
		left:680px;
	}	
	
	#repairs-dropdown{
		left:300px;
	}	
	
	.dropdownNav ul{
	
	}
		.dropdownNav ul li{
			list-style:none;
		}
			.dropdownNav ul li a{
				text-decoration:none;
				width:200px;
				display:block;
				text-align:center;
				padding:10px 0px;
				color:#fff;
				font-size:1.4em;
				text-transform:uppercase
			}		
				.dropdownNav ul li a:visited, .dropdownNav ul li a:link{
					color:#fff !important;
				}
				.dropdownNav ul li a:hover{
					background:#4F0000;
				}
				

		.key-programming #programming-nav{
			left:237px;
			display:block;
		}
		.mobile-services #mobile-nav{
			left:685px;
			display:block;
		}
		.jsOffNav{
			background:#990100;
			position:absolute;
			top:210px;
			z-index:100;
			display:none;
		}
			.jsOffNav ul li {
				list-style:none;
				display:inline;
			}
				.jsOffNav ul li a{
					float:left;
					display:inline;
					color:#fff;
					padding:10px;
				}
				.jsOffNav ul li a:hover{
					background:#000000;
				}	
/* Footer Styles
--------------------------------------------------------------- */

#outerFooter {
	float: left;
	width: 100%;
}

#footer {
	clear: both;
	width: 890px;
	color: #fff;
	margin: 0px auto;
	padding: 70px 0px 10px 0px;
	font-size: 1.0em;
	background:url(../../images/layout/footer.jpg) no-repeat;
}

	#footer .index-a,
	#footer .contact-a {
		display: none;
	}

	#footer h2 {
		font-weight: bold;
		margin: 0px;
		color: #ffa800;
		padding: 3px 5px;
		font-size: 1.2em;
		font-style: italic;
	}
		
	#footer li {
		list-style: none;
	}
	
	#footer p, #footer ul {
		margin: 0px;
		padding: 0px;
	}

	#footer a {
		white-space: nowrap;
		color: #fff;
		text-decoration: none;
	}
		
		#footer a:hover {
			color: #ffcc00;
			text-decoration: underline;
		}

/* Footer Services Styles
--------------------------------------------------------------- */	

	#footer #footer-services {
		float: left;
		width: 240px;
		margin: 0px;
	}
	
		#footer #footer-services ul li {
			float: left;
		}
	
			#footer #footer-services ul li a {
				float: left;
				width: 200px;
				padding: 3px 5px;
				border-bottom: 1px dotted #777;
			}
		
/* Footer Areas Styles
--------------------------------------------------------------- */	

	#footer #footer-areas {
		float: left;
		width: 300px;
	}
	
		#footer #footer-areas h2 {
			width: 300px;
		}
	
		#footer #footer-areas ul {
			float: left;
			width: 145px;
		}
	
		#footer #footer-areas ul li {
			float: left;
			width: 115px;
			padding: 3px 5px;
			border-bottom: 1px dotted #777;
		}
		
/* Footer Address Styles
--------------------------------------------------------------- */	

	#footer #footer-address {
		float: left;
		width: 150px;
	}
	
		#footer #footer-address h2 {
			width: 150px;
		}
		
		#footer #footer-address p {
			line-height: 20px;
			padding: 3px 5px;
		}
				
/* Footer Help & Advice
--------------------------------------------------------------- */	

	#footer #footer-help {
		float: left;
		width: 155px;
	}
	
		#footer #footer-help h2 {
			width: 155px;
		}
		
			#footer #footer-help ul li {
				float: left;
			}
					
			#footer #footer-help ul li a {
				float: left;
				width: 145px;
				padding: 3px 5px;
				border-bottom: 1px dotted #777;
			}
		
		#footer #footer-help p {
			line-height: 20px;
			padding: 3px 5px;
		}
		
		#footer #footer-help .bottomLink {
			margin-bottom: 5px;
		}
		
		
/* Footer Bottom Styles
--------------------------------------------------------------- */	

	#footer #footer-bottom {
		width:100%;
		float: left;
		margin: 10px 0px 0px 0px;
		text-align: center;
	}

/* Float Styles
--------------------------------------------------------------- */

.left, .img-left {
	float: left;
}

	.img-left {
		margin: 10px 10px 10px 0px;
	}

.right, .img-right {
	float: right;
} 

	.img-right {
		margin: 10px 0px 10px 10px;
	}

/* Zooming Slideshow Styles
--------------------------------------------------------------- */

#zooming-slideshow{
	width: 500px;
	height: 300px;
	background: #999999;
}
	
/* Generic Styles
--------------------------------------------------------------- */

.clearfix {
	clear: both;
}



/* Contact Page Styling
--------------------------------------------------------------- */
#contact #contentContainer{
	padding-top:10px;
}
#contact #main{
	width:860px;
}




#contactFormRight, #contactForm-bottom		{
	background:#f7f7f7;
	border:1px solid #e6e1d4;
	width:465px;
	float:left;
	margin:10px 0px 10px 10px;
	padding:10px;
}
* html #contactFormRight, * html #contactForm-bottom{
	width:445px;
}
	#contactFormRight #contact-details-left{
		float:left;
		width:190px;
		
	}
	#contactFormRight #contact-details-right{
		float:left;
		width:250px;
		border-left:1px solid #d4cbb4;
		padding-left:20px;
	}
		* html #contactFormRight #contact-details-right{
			width:240px;
		}
		#contactFormRight #contact-details-left h2, #contactFormRight #contact-details-right h2, #contactForm-bottom h2{
			background:#fff;
			border:#c6bca1 1px solid ;
			padding:7px 10px;
			display:block;
			width:80%;
		}	
	#contactFormRight .address,#contactFormRight .phone,#contactFormRight .email,#contactFormRight .info{
		
		padding:5px 0px 5px 35px;
	}
		#contactFormRight .address{
			background: url(../../images/misc/form-address.png) 0px 10px no-repeat;
		}	
		#contactFormRight .phone{
			background: url(../../images/misc/form-phone.png) no-repeat;
		}
		#contactFormRight .email{
			background: url(../../images/misc/form-email.png) no-repeat;
		}	
		#contactFormRight .info{
			background: url(../../images/misc/form-info.png) no-repeat;
		}	
				
		#contactForm-bottom h2{
			width:200px;
			font-size:2.0em;
		}
		#contactForm-bottom li{
			list-style:none;
			background: url(../../images/misc/contact-tick.gif) left no-repeat;
			padding:10px 0px 10px 70px !important;
			display:block;
			float:left;
			width:400px;
		}