﻿body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, blockquote {
    margin: 0px; padding: 0px; border: 0px;
}

body {
	background: #333333 url('../img/bckgrd-fadestripe.png') no-repeat;
	color: white;
	font-family:Arial, Helvetica, sans-serif;
}

a {
	text-decoration: none;
	color: #ffffff; 
	outline: none;
}
	
a.highlight {
	text-decoration: none;
	color: #FFCC00; 
	outline: none;
}
	
a:hover {text-decoration: underline}



.clearfix {
clear: both
}


/* page header styling */

#page-header-wrapper {
	position: relative;
	background: transparent url('../img/hdr-red-fader.png') repeat-x scroll 90px 40px;
	height: 295px;
	width: 100%;
	overflow: visible;
}
	#page-header-wrapper .container {
		margin: 0 auto;
		width: 955px;
		height: 295px;
		z-index: 10;
		position: relative;
	}

/* homepage header styling */

#homepage-header-wrapper {
	background: transparent  url('../img/hdr-white-red-fade.png') repeat-x 0px 56px;
	height: 310px;
	width: 100%;
	overflow: visible;
}
	
	#homepage-header-wrapper .container {
		margin: 0 auto;
		width: 955px;
		height: 310px;
		z-index: 10;
		position: relative;
	}
	
	#homepage-header-wrapper .container .car {
		background: transparent url('../img/bckgrd-car.png') no-repeat;
		height: 219px;
		width: 537px;
		position: absolute;
		bottom: -45px;
		left: 0;	
	}





.menu{
	height: 80px;
	width: 100%;
	background-color: #000000;
	width: 100%;
}

/* Styling for header nav bar */
#header-navigation-bar {
	position: absolute;
	top: 0px;
	background: transparent url('../img/hdr-blackrip.png') repeat-x -110px top;
	height: 150px;
	width: 100%;
	z-index: 20;
	
}


	#header-navigation-bar .container {
		width: 955px;
		margin: 0 auto;
		overflow: visible;
		z-index: 205;
		position: relative;
	}
			
		#header-navigation-bar h1 {
			background: transparent url('../img/jam-motorsport-logo.png') no-repeat;
			width: 169px;
			height: 95px;
			text-indent: -9999px;
			position: absolute;
			left: 10px;
			top: 10px;
		}
		
			#header-navigation-bar h1 a {
				display: block;
				width: 100%;
				height: 100%;
			}


		#header-navigation-bar ul {
			height: 40px;
			position: absolute;
			right: 0;
			top: 25px;

		}
	
		#header-navigation-bar ul li{
			float:left;
			padding-right: 22px;
			list-style: none;
		}
		
		.cufon-loading #header-navigation-bar a { /* for Cufon.replace('#menu-navigation a') */
			visibility: hidden !important;
		}

		#header-navigation-bar a {
			color: white;
			text-decoration: none;
			font-size: 20px;
		}

			#header-navigation-bar a span {
				font-size: 25px;
				display: block;
			}
			
			#header-navigation-bar a:hover {
				color: #ff0000;
				text-decoration: none;
			}



.menu_picture {
	width: 550px;
	height: 238px;
	z-index: 10;
	position: absolute;
	bottom: 0;
	left: 0;
}

			
	
	/* custom page header */
	/*.
	container .rallycarhire {background: transparent url('../img/bckgrd-rallyhire.png') no-repeat left bottom ;}
	.container .oneventsupport {background: transparent url('../img/bckgrd-eventsupport.png') no-repeat left bottom ;}
	*/


#slideshow-title-wrapper {
	width: 450px;
	height: 232px;
	position: absolute;
	bottom: 0;
	left: 0;
	overflow: hidden;
}

#page-intro-wrapper {
	width: 455px;
	height: 160px;
	position: absolute;
	bottom: 0;
	right: 0;
	overflow: hidden;
}

	#page-intro-wrapper h2 {
		color: #400000;
		font-size: 40px;
		padding-bottom: 10px;
	}

	#page-intro-wrapper p {
		color: #000000;
		line-height: 20px;
	}

/* Page Title */
#menu_title {
	position: absolute;
	top: 80px;
	left: 0;
	overflow: hidden;

}

	.cufon-loading h1 { /* for Cufon.replace('h1') */
		visibility: hidden !important;
	}

	#menu_title h1 {
		font-size: 50px;
		letter-spacing: 2px;
		color: #ffffff;
	}

	#menu_title h1 .highlightone, #menu_title h1 .highlighttwo {
		display:inline-block;
		background: #000000;
	}
	
		#menu_title h1 .highlightone {padding: 6px 15px 3px 15px;}
		#menu_title h1 .highlighttwo {padding: 3px 15px 6px 15px;}


			
	
	#menu_title h1 .breakline {
		display:block;	
	}
	




/* page contents styling */

#page-content-wrapper {
	background: transparent url('../img/hdr-red-fader.png') repeat-x scroll 90px -255px;
	width: 100%;

}
	/* contains page contents to set width */
	#page-content-wrapper .container {
		margin: 0 auto;
		width: 955px;
		overflow: hidden;
		font-family: Arial, Helvetica, sans-serif;
		line-height: 20px;
		font-size: 14px;
		padding-bottom: 20px;
	}
	
	/* global container settings */
	
		/* create single pane half width */
		#page-content-wrapper .container .singlepane-halfwidth {
			width: 500px;
			float:left;
			overflow: hidden;
		}
		
		/* create dual pane left side */
		#page-content-wrapper .container .dualpane-left{
			width: 650px;
			float:left;
			overflow: hidden;
		}

		/* create dual pane half Right side */
		#sidebar {
			width: 290px;
			float: right;
			overflow: hidden;	
		}





.dark-oversize {
	font-size: 20px;
	color: #cccccc;
	line-height: 24px;
	padding-bottom: 15px;
}

	p.dark-oversize span.highlight{
		color: #29abd5
	}

.dark-normal {
	font-size: 15px;
	color: #e5e5e5;
	line-height: 20px;
	padding-bottom: 15px;
}





	#sidebarnav {
		margin: 0px;
		width: 90%;
		background-color: #0c0c0c;
		padding: 20px 0 10px 0;
		list-style: none;
		text-align: right;
		font-size: 16px;
		color: #cccccc;
		float: right;

	}
		
		#sidebarnav li {padding: 5px 50px 5px 0px;}
	
	#socialmediabar	{
		padding: 10px 0px 5px 0px;
		float: right;
		display:block;
	}
		#socialmediabar li {
			width: 32px;
			height: 32px;
			float:left;
			margin-left: 10px;
			list-style:none;
			text-indent: -9999px;
		}
		
		#socialmediabar li a {display: block; height: 32px; width: 32px;}
	
		#socialmediabar li.facebook {background: transparent url('../img/sprites-global.png') no-repeat -158px 0px;}
		#socialmediabar li.youtube {background: transparent url('../img/sprites-global.png') no-repeat -158px -33px;}
		#socialmediabar li.twitter {background: transparent url('../img/sprites-global.png') no-repeat -158px -66px;}
		#socialmediabar li.flickr {background: transparent url('../img/sprites-global.png') no-repeat -158px -99px;}


	#facebook-fanbox{
		margin: 20px 0px 0px 0px;
		background-color: #0c0c0c;
		border: 1px black solid;
		min-height: 250px;
	}
	
		#facebook-fanbox div {
			color: gray;
			font-size: 12px;
			padding: 0px 5px 10px 5px;
		}
		
		#facebook-fanbox a, #facebook-fanbox a:visited {color:gray}
		#facebook-fanbox a:hover {text-decoration: none; color: white;}


.contentbox {
	padding: 20px;
	background-color: #0C0C0C;
}

	.contentbox h2 {margin: 5px 0 20px 10px; font-size: 24px	}
	

.contactusbox {
	padding: 20px;
	background-color: #e5e5e5;
	color: #333333;

}
	
	

.hightlightbox {
	background-position: 98% 90%;
	padding: 10px;
	background: #666666 url('../img/arrow-bottom-right.png') no-repeat 98% 90%;
}




#rallycarhire-gridbox {
	padding: 3px;
	overflow: hidden;
	color: black
	
}
	

	#rallycarhire-gridbox #carhire1,
	#rallycarhire-gridbox #carhire2,
	#rallycarhire-gridbox #carhire3, 
	#rallycarhire-gridbox #carhire4 {
		background-color: #ffffff;
		border: 1px white solid; 
		margin: 6px;
		width: 280px;
		height: 200px;
		float: left;
		overflow: hidden;
	}

	#rallycarhire-gridbox .border {
		border: 6px #e5e5e5 solid;
		background: gray;
		height: 188px;
		position: relative
	}
	
		#carhire1 .border {background-image:url('../img/rallycarhire_renaultclio.png')}
		#carhire2 .border {background-image: url('../img/rallycarhire-2-hired.png')}
		#carhire3 .border {background-image: url('../img/rallycarhire-3-hired.png')}
		#carhire4 .border {background-image: url('../img/rallycarhire-4.png')}		
	
	
	#rallycarhire-gridbox .info {
		background: transparent url('../img/rallycarhire_grids.png') no-repeat top;
		height: 97px;
		width: 100%;
		position: absolute;
		bottom: 0px;
		display: inline;
	}
	
	#rallycarhire-gridbox a {
		color: #333333;
		text-decoration: none;
		width: 100%;
		height: 100%;
		display: block;
	}
	
	#rallycarhire-gridbox h2 {
		font-size: 16px;
		padding-top: 45px
		
	}
	
	#rallycarhire-gridbox a:hover {
		color: #000000;
	}


	#rallycarhire-gridbox .moreinfo {
		background: transparent url('../img/arrow-45.png') no-repeat right;
		position: absolute;
		bottom: 0;
		right: 0;
		height: 23px;
		padding-right: 17px;
		font-size: 11px;
	}


	

/* Page Footer Styling */

#page-footer-wrapper {
	background: transparent url('../img/ftr-jigsawrip.png') repeat-x;
	padding-top: 61px;
}

#footer-content-light {background-color: #191919;}

	#footer-content-light .container {
		margin: 0 auto;
		width: 955px;
		height: 170px;
		position: relative;
	}
	
	
	#footer-content-light .container .vcard{
		float:left;
		margin: 0px 25px 0px 25px;
		font-size: 12px;
		width: 200px;
	}
	
		#footer-content-light .container .vcard {	
			color: #ffffff;
			line-height: 17px;
		}
		
		#footer-content-light .container .vcard .org {
			font-size: 16px;
			font-weight: bold;
			padding-bottom: 10px;
		}
		
		#footer-content-light .container .vcard .email, #footer-content-light .container .vcard .url {
			line-height: 20px;
			color: #666666;
		}
			
	
		#footer-content-light .container .vcard .geo {
			font-size: 10px;
			padding: 5px 0px 5px 0px;
			color: #000000;

		}
		
	
	#footer-content-light .container #addressadd {
		position: absolute;
		bottom: 10px;
		left: 275px;
		font-size: 11px;
	}
	
		#footer-content-light .container #addressadd a:hover{
			text-decoration: none;
		}

	
	
	
	#footer-content-light .container .nav {float:left;}
	
		#footer-content-light .container .nav ul {
			float: left;
			margin: 0px 0px 0px 25px;
			list-style : none;
			color: #b2b2b2
		}
				
		#footer-content-light .container .nav li {
			padding-bottom: 5px;
		}
		
		#footer-content-light .container a {
			color: #ffffff;
		}
		
		#footer-content-light .container a:hover {
			color: #2eaed7;
		}


	#topofpage{
		position: absolute;
		right: 10px;
		top: 0;
		font-size: 13px;
		font-weight: bold;	
	}
	
	#topofpage a:hover{
		text-decoration: none;
	}

	#footer-content-light .container .logo {
		position: absolute;
		right: 0;
		bottom: -95px;
		width: 275px;
		height: 165px;
		text-indent: -9999px;
		background: transparent url('../img/sprites-global.png') no-repeat -191px 0px;
	}

#footer-content-dark {
	background-color: #000000;
}

	#footer-content-dark .container {
		margin: 0 auto;
		width: 955px;
		height: 100px;
		padding-top: 10px;
		position: relative;
	}

	#footer-content-dark .container .socialmedia {
		background-color: #ad0000;
		padding: 5px;
		display: inline-block;
		float: left;
		font-size: 10px;
		margin: 10px 20px 0px 5px;
		text-transform: uppercase;

	}
	
	#footer-content-dark .facebook{
		background: transparent url('../img/sprites-global.png') no-repeat -191px -166px;
		padding: 40px 0px 0px 5px;
		float: left;
		height: 50px;
		width: 160px;	
	}

		
	
	#footer-content-dark .container .twitter{
		background: transparent url('../img/sprites-global.png') no-repeat -368px -166px;
		padding: 40px 0px 0px 8px;
		float: left;
		height: 50px;
		width: 140px;	
	}

	#footer-content-dark .container .copyright{
		position: absolute;
		left: 75px;
		top: 80px;
		font-size: 10px;
		color: #666666;
		text-transform: uppercase;
		letter-spacing: 2px;
	}
	
	#footer-content-dark .container .w3c-validate{
		position: absolute;
		right: 280px;
		top: 80px;
		font-size: 10px;
		color: #666666;
		text-align: right;
	}

	#footer-content-dark .container .pagerender{
		position: absolute;
		right: 5px;
		top: 95px;
		font-size: 10px;
		color: #666666;
		text-align: right;
	}

	#footer-content-dark a {
		font-size: 11px;
		color: #2eaed7;
	}

/* General Sryling */
	
/* disclaimer text for using flickr api */	
.image-disclaimer {
	font-size: 10px;
	color: gray;
}

/* Styling for small pages */

/* Sitemap */
.sitemap {padding: 10px 0px 5px 20px;}
.sitemap ul {padding-left: 30px;}
.sitemap li {padding-bottom: 5px;}
.socialmedia {padding: 20px 0px 5px 0px;
}





.infotext {
	padding: 10px 0px 2px 10px;
	color: #000000;
	line-height: 19px;
	font-size: 15px;
}

	.infotext a {color: inherit}
	.infotext a:hover {text-decoration: none}



/* Sales Page */

#sales-navigation {
  list-style: none;
}

#sales-navigation li {
  float: left;
  display: block;
  margin: 25px;
  background-color: black;
}


#sales-navigation a span.title {
	display: block;
	position: absolute;
	top: 125px;
	background: black;
	padding: 10px;
	font-size: 16px;
}

#sales-navigation a:hover {
	color: red;
	text-decoration: none;
	}

#sales-navigation a, #sales-navigation a .hover {
	height: 165px;
	width: 161px;
	position: relative;
	display: block;
	background: url('../img/sprites-sales.png') 0 0 no-repeat;
}

#sales-navigation a .hover {
	 height: 125px;
}

/* individual navigation items */
#sales-navigation a.engine {
  background-position: 0 0;

}
	#sales-navigation .highlight a.engine:hover, #sales-navigation a.engine .hover {
	  background-position: -161px 0;
	}

#sales-navigation a.rally {
  background-position: -322px 0;
}

	#sales-navigation .highlight a.rally:hover, #sales-navigation a.rally .hover {
	  background-position: -483px 0;
	}

#sales-navigation a.road {
  background-position: -644px 0;
}
	
	#sales-navigation .highlight a.road:hover, #sales-navigation a.road .hover {
	  background-position: -800px 0;
	}

#sales-navigation a.shell {
  background-position: -961px 0;
}
	
	#sales-navigation .highlight a.shell:hover, #sales-navigation a.shell .hover {
	  background-position: -1122px 0;
	}



/* Event Support Page */

#eventsupport-gallery {
	position: absolute;
	top: 250px;
	right: 40px;
	width: 350px;
	background-color: white;
	text-align: center;
	min-height: 500px;

}


	#eventsupport-gallery a {color: inherit;}

	/* The images styling is needed to turn the <ul> into a 3x3 grid */

	#eventsupport-gallery #images {
		padding: 1px;
		margin: 5px;
		overflow: hidden;
	}
	
	#eventsupport-gallery ul {
		list-style:			none;
	}
	
	#eventsupport-gallery li {
		float: left;
		width: 75px;
		height: 75px;
		overflow: hidden;
		border: 4px #ffffff solid;
	}
	
	#eventsupport-gallery li:hover {border: 4px gray solid;}
	
	#eventsupport-gallery li img {
		border: 			none;
		opacity: 			0.8;
		-moz-opacity: 		0.8;	
	}
		#eventsupport-gallery li img:hover {
			opacity: 			1;
			-moz-opacity: 		1;
		}

		#eventsupport-gallery #loading-wrapper {
			padding: 10px;
			position: absolute;
			left: 50%;
			top: 20px;
			width: 140px;
			height: 40px;
			margin-left: -83px;
			text-align: center;
			color: black;
			background: white;
			font-size: 12px;
		}


		/* disclaimer text for using flickr api */	
		#eventsupport-gallery .image-disclaimer {
			position: absolute;
			bottom: 6px;
			left: 6px;
			text-align:center;
		}


/******* FORM *******/
#contactform{
	padding: 0 10px 10px;
}
#contactform label{
	color: #797979;
	font-weight: 700;
	line-height: 1.4em;
	display: inline-block;
	padding: 5px;
}

#contactform div label.error {
	color:#E46C6E;
}

#contactform input{
	padding: 6px;
	color: #949494;
	font-family: Arial,  Verdana, Helvetica, sans-serif;
	font-size: 11px;
	border: 1px solid #cecece;
	display: block;
}
#contactform input.error{
	background: #f8dbdb;
	border-color: #e77776;
}
#contactform textarea{
	width: 400px;
	height: 80px;
	padding: 6px;
	color: #000000;;
	font-family: Arial,  Verdana, Helvetica, sans-serif;
	font-style: italic;
	font-size: 12px;
	border: 1px solid #cecece;
	display: block;
}
#contactform textarea.error{
	background: #f8dbdb;
	border-color: #e77776;
}
#contactform div{
	margin-bottom: 15px;
}
#contactform div span{
	margin-left: 10px;
	color: #807979;
	font-size: 11px;
	font-style: italic;
}
#contactform div span.error{
	color: #e46c6e;
}
#contactform #send{
	background: #6f9ff1;
	color: #fff;
	font-weight: 700;
	font-style: normal;
	border: 0;
	cursor: pointer;
}
#contactform #send:hover{
	background: #79a7f1;
}
.sendsuccess {
	padding: 8px;
	color: #004001;
	background-color: #92ce78;
	border: 1px #568a40 solid;
	margin: 5px 0px 10px 10px;
	width: 90%;
}

.sendfailed {
	padding: 8px;
	color: #400000;
	background-color: #d47d7d;
	border: 1px #b83a3asolid;
	margin: 5px 0px 10px 10px;
	width: 90%;
}

/******* /FORM *******/


