@font-face {
    font-family: 'bmw';
    src: url('fonts/bmw75-webfont.eot');
    src: url('fonts/bmw75-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/bmw75-webfont.woff') format('woff'),
         url('fonts/bmw75-webfont.ttf') format('truetype');
    font-weight: 		normal;
    font-style: 		normal;
}

/*font face setting to enable use of non standard "bmw" font*/

body {
	font-size: 			small;
	font-family: 		bmw, Verdana, Helvetica, Arial, sans-serif;
	color:				#2d9cdb;
	line-height:		130%;
}


h1 {
	font-size: 			150%;
	color:				#2672f2;
}

h2 {
	font-size: 			130%;
	color:				#2672f2;
}

q {
	font-style:			italic;
}

img#rxalogo {
	display: 			block;
	margin:				auto;
}

img#e30blue {
	display: 			block;
	margin-top:			40px;
	margin-bottom:		20px;
	margin-left:		auto;
	margin-right:		auto;
	border:				3px none #fff;
	border-radius:		5px;
}

nav ul {
	list-style: 		none;
	margin: 			0;
	padding: 			0;
	text-align: 		center;
}
/*this rule centres the nav ul and removes bullets*/


nav li {
	display: 			inline-block;
	font-size:			130%;
	margin: 			0 5px;
	transition: 		all 0.3s;
	text-shadow:		1px 1px 0px #000
}
/* this rule aligns the li's horizontally and sets the spacing*/

nav a {
	display: 			block;
	color: 				#2672f2;
	transition: 		all 0.3s;
}

/* this rule changes the color of the "a" and sets the display as block.*/

nav a:hover {
	color: 				#2b115a;
}
/* changes mouse over color*/

nav span {
	display: 			block;
}
/* sets span properties for nav. */

/* the following @media rules apply for displays higher than 690px where the skewed box is displayed*/
@media all and (min-width: 690px) {
	nav li {
	margin: 			0;
	-webkit-transform: 	skewX(-25deg);
	transform: 			skewX(-25deg);
	}
/* skews the text only*/

	nav a {
	padding: 			10px 55px;
	color: 				#fff;
	background-color: 	#2672f2;
	text-decoration:	none;
	box-shadow:			1px 1px 5px black;
}
/* this rule creates the skews box and sets text and box color.*/

nav a.selected {
	background-color:	#2b115a
}

/*sets color for .selected class*/

nav a:hover {
	color: 				#fff;
	background-color: 	#2b115a;
	}
/* changes the background box color on mouseover*/

nav span {
	-webkit-transform: 	skewX(25deg);
	transform: 			skewX(25deg);
}
/* unskews the text whilst leaving the box skewed*/
}

footer {
	text-align:			center;
	font-size:			90%;
}

#tableContainer {
	display:			table;
	border-spacing:		12px;
	
}

.tableRow {
	display:			table-row;
	
}

#logBook {
	display:			table-cell;
	padding:			20px 30px 30px 30px;
	vertical-align:		top;
	border:				3px;
	border-style:		solid;
	border-radius:		15px 0px 0px 15px;
}

/* sets the style for the #logbook id*/

#trackCarPrep {
	display:			table-cell;
	padding:			20px 30px 30px 30px;
	vertical-align:		top;
	border:				3px;
	border-style:		solid;
}

/* sets the style for the #trackcarprep id*/

#callUs	{
	display:			table-cell;
	padding:			20px 30px 30px 30px;
	vertical-align:		top;
	border:				3px;
	border-style:		solid;
	border-radius:		0px 15px 15px 0px;
}

/* sets the style for the #callus id*/

#phone {
	font-size:			185%;
	color:				#f11a22;
}

/* set phone number to red color*/



.allContent {
	width:				1000px;
	margin: 			auto;
}

/* supposed to center all content however doesnt seem to work for tablecontainer.
Need to resolve this and find out why*/

.tagline {
	text-align:			center;
	color: 				#f5f6fc;
	font-size: 			220%;
	line-height:		130%;
}

/* main h1 tagline on home page*/

.moreDetails {
	color:				#f11a22;
}

/* changes more details links to red to stand out*/

.center {
	text-align:			center;
}

#aboutContent {
	padding:			10px 10px 10px 0px;
	margin:				10px 10px 10px 10px;
	width:				600px;
	float:				left;
}

/* positions main content on About Us page*/

.imageFloat {
	margin:				0px 0px 15px 15px;
	border:				3px solid #2d9cdb;
	border-radius:		5px;
	float:				right;
}

/* float image in About Us content to allow text to wrap around it*/

#testimonials {	
	padding:			10px;		
	margin:				10px 10px 10px 650px;
	
}

/* positions testimonials aside in About Us page*/

.testimonialQuotes {
	padding:			10px;	
	background-color:	#2d9cdb;
	border-radius:		15px;
	color:				#f5f6fc;
}

/* styling for testimonials on About Us page*/

#testimonials h2{
	color:				#2d9cdb;
}
	
#homeWidth {
	width: 				960px;
	margin-left:		auto;
	margin-right:		auto;
	}
	
/* used to set width for main section on home page*/

#bottomNav {
	padding:			15px;
	width:				960px;
	height:				15px;
	margin-bottom:		30px;
	transform:			skew(-20deg);
	background:			#2672f2;
	color:				#fff;
	clear:				left;
}


#bottomNav ul {
	list-style: 		none;
	margin: 			0;
	padding: 			0;
	text-align: 		center;
	}

#bottomNav li {
	display: 			inline-block;
	font-size:			110%;
	margin: 			0 15px;
	vertical-align: 	middle;
	transform:			skew(20deg);
}

#bottomNav a {
	display: 			block;
	color:				#fff;
}
	
#bottomNav a:hover {
	color: 				#2b115a;
}
	
#bottomNav span {
	display: 			block;
}

#bottomNav a.selected {
	background-color:	#2b115a;
}

/* All #bottomNav rules are used to style the bottom of page navigation section.*/ 


/* the rules below relate to the image slider used on the Racing and Customers Cars pages.
webkit included for animation and keyframe compatibility with Chrome, Safari and Opera*/

.sliderContainer{
  margin:				50px auto;
  width:				720px;
  height:				420px;
  overflow:				hidden;
  border:				5px solid;
  border-radius:		5px;
  position:				relative;

}
.sliderPhoto{
  position:				absolute;
  -webkit-animation:	round 140s infinite;
  animation:			round 140s infinite;
  opacity:				0;
  
}


@-webkit-keyframes round{   
  10%{opacity:1;}
  25%{opacity:0;}
} 

@keyframes round{   
  10%{opacity:1;}
  25%{opacity:0;}
} 

img:nth-child(7){-webkit-animation-delay:0s;}
img:nth-child(6){-webkit-animation-delay:20s;}
img:nth-child(5){-webkit-animation-delay:40s;}
img:nth-child(4){-webkit-animation-delay:60s;}
img:nth-child(3){-webkit-animation-delay:80s;}
img:nth-child(2){-webkit-animation-delay:100s;}
img:nth-child(1){-webkit-animation-delay:120s;}

img:nth-child(7){animation-delay:0s;}
img:nth-child(6){animation-delay:20s;}
img:nth-child(5){animation-delay:40s;}
img:nth-child(4){animation-delay:60s;}
img:nth-child(3){animation-delay:80s;}
img:nth-child(2){animation-delay:100s;}
img:nth-child(1){animation-delay:120s;}

/* End of Image Slider rules*/
 
 ul.checkmark li {
    background: 		url(images/testcheck.png) no-repeat 0 50%;
    padding-left: 		30px;
}

/* Used to create the checkmark on the Services page. Image reference is
linkhttp://www.freepik.com/index.php?goto=41&idd=517142&url=aHR0cDovL3d3dy5vcGVuY2xpcGFydC5vcmcvZGV0YWlsL2NoZWNrLW1hcmstYnktcmFlbWk= */

ul.checkmark {
    list-style-type: 	none;
}

#servicesIntro {
	padding-top: 		20px;
	width: 				960px;
	margin-left:		auto;
	margin-right:		auto;
}

/* Aligns and centres the Intro paragraph for the Services Page*/

#generalServices {
	background-image:	url(images/maintain.png);
	background-repeat:	no-repeat;
	background-position: top left;
	margin-top:			20px;
	padding-left:		80px;
	display:			table-cell;
}

/* sets formatting for General Services. Image reference http://www.flaticon.com/free-icon/car-repair-garage_429*/

#generalServicesIMG {
	display:			table-cell;
	vertical-align: 	middle;
	color:				#2672f2;
}

/* sets image positioning on Services page*/

.servicesImages {
	border-radius:		15px;
	border:				3px solid #2672f2;
}
	
/* set image style on Services page*/	

#performanceServices {
	background-image:	url(images/tacho2.png);
	background-repeat:	no-repeat;
	background-position: top left;
	margin-top:			20px;
	padding-left:		80px;
	display:			table-cell;
}

/* sets formatting for Performance Services. Image reference http://www.flaticon.com/free-icon/speedometer_37820*/

#performanceServicesIMG {
	display:			table-cell;
	vertical-align:	 	middle;
	color:				#2672f2;
}

/* sets image positioning on Services page*/

#trackcarServices {
	background-image:	url(images/flags2.png);
	background-repeat:	no-repeat;
	background-position: top left;
	margin-top:			20px;
	padding-left:		80px;
	display:			table-cell;
}

/* sets formatting for Performance Services. Image reference http://www.flaticon.com/free-icon/checkered-flag-for-sports_50459*/


#trackcarServicesIMG {
	display:			table-cell;
	vertical-align:		middle;
	padding-top:		10px;
	color:				#2672f2;
}

/* sets image positioning on Services page*/

.racingContent {
	padding:			10px 10px 10px 0px;
	margin:				10px 10px 10px 10px;
	width:				700px;
	float:				left;
}

#racingImagesSimon {	
	padding:			10px;		
	margin:				40px 0px 10px 650px;
}

/*sets image side bar positioning*/

#racingImagesPierz {	
	padding:			10px;		
	margin:				115px 0px 10px 650px;
}

/*sets image side bar positioning*/

.racingImages {
	border:				3px solid #2d9cdb;
	border-radius:		5px;
}

/*sets image style on Racing page*/	

.customerContent {
	margin-top:			30px;
	margin-bottom:		20px;
	margin-left:		auto;
	margin-right:		auto;
}


.customerImages {
	border:				3px solid #2d9cdb;
	margin:				10px;
	border-radius:		5px;
}

/*sets image style on Customers Cars page*/

#contactContent {
	margin-top:			30px;
	margin-left: 		auto;
	margin-right:		auto;
	margin-bottom:		20px;
	width:				960px;
}

.listStyleNone {
	list-style:			none;
}