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


/* this CSS document was created by 
Matthew van der Haas
Phone:(021) 1491462
Email: drivingpro@gmail.com
*/


/*************************************************

** GETTING RID OF PADDING, default styling ETC ***

**************************************************/

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

img
{
	border:0px;	
}


html
{
/* stops the page from jumping all over the place if there are different lengths of content for each page */
overflow: scroll; 
}
	
	
	
body
{
	background: #696969 url('../images/bannerBG.jpg') repeat-x;
	font-family:Verdana, Geneva, sans-serif;
	font-size:12px;
	text-align:center;
	padding-bottom:20px;
	
}



a:link, a:visited, a:hover, a:active
{

	text-decoration:none;

}






/********************************

******* MAIN TEMPLATE DIVS ******

*********************************/

		/* banner contains the speedi models car logo, and the contact details of speedi models at the top of the page */
		#banner
		{
			height:87px;
			margin:0 auto;
			margin-bottom: 35px;
			text-align:left;
			width:900px;
			position:relative;
		}
		
		/*THIS div holds the #leftShadow, #wrapper, and #rightShadow Divs */
		#wrapperShadow
		{
			background-color:transparent;
			margin: 0 auto;
			text-align:center;
			width:920px;
background-image: url('../images/corners_shadows/wrapperWidthShadow.gif');
background-repeat:repeat-y;
		}
		
		
		/* This wrapper contains the #navBar, #sideBar, and #contentContainer Divs */
		#wrapper
		{
			background-color:#dadada;
			width:900px;
			position:relative;
			padding-top: 70px;
                        text-align:left;
margin: 0 auto;

		}
		
		
		/*Navigation div container*/
		#navBar
		{
			background-color: transparent;
			height:80px;
			width:1000px;
			position:absolute;
			z-index:5;
			left:-50px;
			top:-20px;
		}
		
		
		/*Left side bar which has the product category search and listings*/
		#sideBar
		{
                       display: inline;
			border: 1px solid #807e7e;
			padding: 20px 11px 11px 11px;
			float:left;
			margin-left:12px;
			width:198px;
			background:#c1c1c1 url('../images/BGs/content_container_top_shadowing_bg.jpg') repeat-x;
	
		}
		
		#contentContainer
		{

			border: 1px solid #807e7e;
			padding:8px;
			float:left;
			width:625px;
			/*height:1660px; TAKE THIS OUT ONCE CONTENT HAS BEEN ADDED */
			margin-left:12px;
			background-color:#C90;
			background:#c1c1c1 url('../images/BGs/content_container_top_shadowing_bg.jpg') repeat-x;
			margin-bottom:12px;
                        display: inline;
		}






/********************************

******* BANNER DIVS *************

*********************************/


#speediLogo
{
	background:transparent url('../images/Banner/logo.png') no-repeat;
	height:74px;
	width:482px;
	position:absolute;
	bottom:0px;
	left:-140px;
}

#bannerRightText
{
	color:white;
	float:right;
	font-size:18px;
	line-height:27px;
	text-align:right;
}



/********************************

****** TOP NAVIGATION BAR *******

*********************************/


		/* Random fact: THIS NAV BAR IS 50% larger then my whole last flash assignment! craziness! */
			
		#nav{
			list-style: none;
			margin: 0;
			padding: 0;
			height: 80px;
			display: inline;
			overflow: hidden;
			width: 1000px;
			
			}
			
		#nav li {
			margin: 0; 
			padding: 0;
			display: inline;
			list-style-type: none;
			}
		
		#nav a {
			float: left;
			padding: 80px 0 0 0;
			overflow: hidden;
			height: 0px !important; 
			height /**/:80px; /* for IE5/Win */
			width:180px;
			background: url('../images/nav/navBar.png') top left no-repeat;

			}
			
			#nav a.first, #nav a.last
			{
			width:230px;	
			}
			
		#nav a:hover, #nav a:active {
			background-position: 0px -80px;
			}
		
		#nav a.topNavSelected {
			background-position: 0px -160px;
			}
		
		
		/******* NORMAL POSITION OF BACKGROUND ****/
		
		#home a
		{
			background-position: 0px 0px;
		}
		
		#products a
		{
			background-position: -230px 0px;
		}
		
		#about a
		{
			background-position: -410px 0px;
		}
		
		#SRT a
		{
			background-position: -590px 0px;
		}
		
		
		#contact a
		{
			background-position: -770px 0px;
		}
		
		
		
	/******* HOVERED POSITION OF BACKGROUND ****/
		
		#home a:hover, #home a:active
		{
			background-position: 0px -80px;
		}
		
		#products a:hover, #products a:active
		{
			background-position: -230px -80px;
		}
		
		#about a:hover, #about a:active
		{
			background-position: -410px -80px;
		}
		
		#SRT a:hover, #SRT a:active
		{
			background-position: -590px -80px;
		}
		
		
		#contact a:hover, #contact a:active
		{
			background-position: -770px -80px;
		}		
		
		
		
		/******* Active or selected POSITION OF BACKGROUND ****/
		
		#home a#topNavSelected
		{
			background-position: 0px -160px;
		}
		
		#products a#topNavSelected
		{
			background-position: -230px -160px;
		}
		
		#about a#topNavSelected
		{
			background-position: -410px -160px;
		}
		
		#SRT a#topNavSelected
		{
			background-position: -590px -160px;
		}
		
		
		#contact a#topNavSelected
		{
			background-position: -770px -160px;
		}			
		
		
		

/********************************

******* Side-bar Navigation *****

*********************************/

#productSearch
{
	position:relative;
	border: 1px dashed #999;
	margin-bottom:23px;
	padding:8px;
	width:auto;
}


#productSearch select, #productSearch #productSearchText
{
margin-top:10px;
width: 100%;
	

}

#productSearch #submitBtn
{
margin-top:10px;
}



.productCategoryListTitle
{
	margin-top:7px;
}

.productCategoryListTitle li, .productCategoryListSubTitles li
{
	/*Formatting */
	height:25px;
	list-style-type:none;
	width:auto;
	text-transform:capitalize;
	
}

.productCategoryListTitle li
{
	/*Formatting */
	background:#FFF url('../images/BGs/sidebar_product_categories_title_BG.gif') repeat-x;
	border: 1px solid #950b0b;
	padding-left:6px;
	padding-right:0px;
	
	/* Font / Text */
	color:white;
	font-weight:bold;
	font-size:14px;
	line-height:25px;
}

.productCategoryListSubTitles li
{
	border: 1px solid #3a3a3a;
	border-top:0px;	
}

.productCategoryListSubTitles li a
{
	/* Formatting */
	background:#FFF url('../images/BGs/sidebar_product_categories_subtitle_BG.gif') repeat-x;
	
	display:block;
	height:25px;
	padding-left:16px;
	width:auto;
	
	/* font / text */
	line-height:25px;
	font-size:12px;
	font-weight:normal;
}



.productCategoryListSubTitles li a:link
{
	color:white !important;
}

.productCategoryListSubTitles li a:visited
{
	color:white;

}



.productCategoryListSubTitles li a:hover, .productCategoryListSubTitles li a#selected
{
	background:#000000 url() repeat-x;
}

.productCategoryListSubTitles li a:active
{
	
}











/********************************

******* Main Content Divs *******

*********************************/

		#whereYouAre
		{
		
		width:auto;
		font-size:10px;
		color:black;
		height:12px;
		margin-bottom:5px;
			
		}
		
		#whereYouAre a
		{
		color:#600;
		
		font-weight:bold;
			
		}
		
		#whereYouAre a:hover
		{
		color:#FFF;
		text-decoration:underline;
		
		font-weight:bold;
			
		}

		.mainTitle
		{
			/*formatting*/
			background: #be2424 url('../images/BGs/contentMainTitle.gif') repeat-x;
			border: 1px solid #871414;
			height:35px;
			width:auto;
			
			/* font / text */
			color:white;
			line-height:35px;
			font-size:22px;
			font-weight:bold;
			text-align:center;
		}
		
	
		/* Index */
		
		
				#leftHomeContainer h1,  #rightHomeContainer h1, h1#home3Products
				{
				
						
						/*Formatting */
						background:#FFF url('../images/BGs/sidebar_product_categories_title_BG.gif') repeat-x;
						border: 1px solid #950b0b;
						padding-left:6px;
						padding-right:0px;
						
						/* Font / Text */
						color:white;
						font-weight:bold;
						font-size:12px;
						line-height:25px;
						font-weight:normal;
						margin-bottom:5px;
					
					
				}
		
				h1#home3Products
				{
				text-align:center;
				padding:0px;
				border-top:0px;
				border-left:0px;
				border-right:0px;
				font-weight:bold;
				}
		
		
				#homeLatestNews, #homeSpecials, #homeLatestProducts, #homeMostPopular
				{
					
					width:auto;
					margin-top:11px;
					
				}
		
		
		
		
		
									/* Left side */
									
									
											span.homeDateTitle
											{
												font-weight:bold;
												color:black;
												}
									
									
									
											#leftHomeContainer
											{
												
												float:left;
												width:300px;
												border-right:1px dashed #999;
												padding-right: 13px;
												
											}
											
											
											
											
											
								
											
							
											#homeLatestNews
											{
												
												
												padding-bottom:10px;
												
												border-bottom:1px dashed #999;
												
												
											}
											
											div.homeNewsPost
											{
											margin-bottom:5px;	
												color:#333;
												
											}
							
											
											#homeSpecials
											{
												
												height:200px;
												
											}
									
									
									
									#rightHomeContainer
									{
										
											float:right;
											width:300px;
            display:inline;
									}	
									
									
									
									#homeLatestProducts
									{
										
											padding-bottom:10px;
												
												border-bottom:1px dashed #999;
										
									}
									
									
									
									#homeMostPopular
									{
												height:200px;
													
										
									}
		
		
		
		
		/* ABOUT */
		
		
		#aboutImages img
		{
			margin-top:10px;
			border:1px solid white;
			border-bottom:0px;
		}
		
		
		#aboutImages h2
		{
			margin-bottom:10px;

			display:block;
			text-align:center;
			font-size:10px;
			background-color:black;
			color:white;
			border: 1px solid white;
			border-top:0px;
			padding-top:3px;
			padding-bottom:3px;
			
			
		}
		
		
		/* SEARCH (search.php)*/
		
		.searchedItemTable
		{
		background-color:black;
		margin-top:10px;
			margin-bottom:20px;
		}
		
		.searchedItemTable th
		{
		
		font-size:11px;
		text-align:left;
		padding-right:10px;
		background-color:black;
		color:white;
		}
		
		
		.searchedItemTable td
		{
		
		font-size:11px;
		text-align:left;
		width: 470px;
		background-color:white;
		border:1px solid black;


		}	
		
		.searchedItemTable th, .searchedItemTable td
		{
		padding:5px;
		
		}
		

		/* PRODUCTS */

		#latest3ProductsContainer
		{
			width:auto;
					/*background-color:#0C0; TESTING PURPOSES */
			margin-top:20px;
			height:232px;
		}
		
		
		#latest3ProductsMain
		{
			display:block;
			float:left;

			background-color:black;
			border: 3px solid white;

		}
		
		#latest3ProductsMain img
		{
			
			width:301px;
			height:226px;
			border:0px;
		
			
		}
		
		#productDetailLargeImage
		{
			width:301px;
			height:226px;
			border:0px;
			display:block;
			float:left;
		}
		

		
		a.latest3Products
		{
			display:block;
			position:absolute;
			/*width and height is adjusted with the border */
			background-color:#090;
			border: 3px solid white;
		}
		
		.latest3Products img
		{
			height:104px;
			width:141px;
			border:0px;
		}

		
		
		#right4Products
		{
			float:right;
			position:relative;
			width:306px;
			height:232px;
			overflow: hidden;
					/*background-color:pink; TESTING PURPOSES */
			
			
		}
		
		
		
		
		
		
		.brandingDiv
		{
			border: 3px solid #ad1a1a;
			background-color: #454545;
			margin-top:51px;
			padding: 16px 26px 16px 0;
			position:relative;
			width:auto;
		}
		
		/*takes all the styling from brandingDiv and just changes the margin top for the first div in the contact section */
		.brandingDivFirstContact
		{
			margin-top:40px;
			
		}
		
		.lessMargin
		{
		margin-top:25px;
		margin-bottom: 25px;
		}
		
		
		div.productDivContainer
		{
			float:left;
			margin-left:26px;
			margin-top:10px;
			/*padding-bottom:20px;*/
			width: 171px;
		
		}
		
		div.productDivContainer span
		{
			display:block;
			color:white;
			font-weight:bold;
			margin-top:5px;
			text-align:center;
		}
		
	
		
		
		a.productImage
		{
			display:block;
			width: 165px;	
			padding-bottom:5px;
		}
		
		a.productImage:hover img
		{
		
			border:3px solid #bd2323;
			
			
		}
		
		a.productImage:hover span
		{
		
			color:red;
			
		}

		
		
		.productImage img
		{
			border:3px solid white;
			height: 124px;
			width: 165px;
		}
		
		
		
		h2.categoryTitle
		{
			
			position:absolute;
			top:-17px;
			left:-3px;
			background: #980e0c url('../images/BGs/product_category_title_bg.jpg') repeat-x;
			line-height:28px;
			padding-left:20px;
			padding-right:20px;
			height:30px;
			border: 1px solid #941212;
			font-weight:bold;
			font-size:19px;
			color:white;
		}


		.productsRowContainer
		{
		display:block;
		
		}


		
		
		/* SPEEDI RACING TEAM */
		
		
		 /* The text desciption of the speedi racing team at the top of the page */
		  
		#srtText
		{
			
			padding-top:16px;
			padding-bottom:16px;
			border-bottom:1px dashed #a6a6a6;
		
		
		}
		
		
		#centerMembers /*centering the team members */
		{
		
		margin:0 auto;
		width: 589px;
			
		}
		
		div.teamMember
		{
			float:left;
			/*margin-left:26px;*/
			margin-top:10px;
			/*padding-bottom:20px;*/
			width:196px; /* + 6 due to the 3 pixel left and right border */
		
		}
		
		div.teamMember span.name
		{
			display:block;
			color:white;
			font-weight:bold;
			margin-top:5px;
			text-align:center;
		}
		
		
		a.teamMemberImage
		{
			display:block;
			width:196px; /* + 6 due to the 3 pixel left and right border */
			padding-bottom:5px;
			position:relative;
			background: transparent url('../images/corners_shadows/speedi_racing_team/noPhotoOfPerson.jpg') no-repeat; /*if no img is displayed then this will show in the background*/
		}
		
		a.teamMemberImage:hover img
		{
		
			border:3px solid #bd2323;
			
			
		}
		
		a.teamMemberImage:hover span
		{
		
			color:red;
			
		}
		
		a.teamMemberImage:hover span.topleftSRT,  a.teamMemberImage:hover span.toprightSRT, a.teamMemberImage:hover span.bottomleftSRT, a.teamMemberImage:hover span.bottomrightSRT
		{
		display:none;	
		}



		
		
		.teamMemberImage img
		{
			border:3px solid white;
			height:143px;		
			width:190px;
		}
		
	
		
		span.topleftSRT, span.toprightSRT, span.bottomleftSRT, span.bottomrightSRT
		{
			display:block;
			width:15px;
			height:16px;
			position:absolute;
		}
				
		span.topleftSRT
		{
			left:0px;
			top: 0px;
			background: transparent url('../images/corners_shadows/speedi_racing_team/topleft.png') no-repeat;						
		}
			
		span.toprightSRT
		{
			top: 0px;
			right:0px;
			background: transparent url('../images/corners_shadows/speedi_racing_team/topright.png') no-repeat;						
		}

		span.bottomleftSRT
		{
			top:133px; 
			left:0px;
			background: transparent url('../images/corners_shadows/speedi_racing_team/bottomleft.png') no-repeat;						
		}

		span.bottomrightSRT
		{
			top:133px; 
			right:0px;
			background: transparent url('../images/corners_shadows/speedi_racing_team/bottomright.png') no-repeat;						
		}



		/* CONTACT PAGE */
		
		/* for the links */
		.contactContainer a
		{
			color:#C60;
			font-weight:bold;
		}
		
		.contactcontainer a:hover
		{
		color:#999;
		text-decoration:underline;
			
		}
		
		
		#stephenImage
		{
	
			border: 3px solid white;
			float:left;
			width: 264px;
			height: 392px;
			margin-right:10px;
			
		}
		
		.contactContainer
		{
			margin-left: 15px;
			margin-top: 15px;
			width:570px;
			color:white; 
			font-family:tahoma, Verdana, Geneva;
			font-size:14px;			
		}
		
		
		
		.contactContainer h3
		{
			
			display:inline;
		
		}
		
		#contactTable
		{
			width:100%;			
		}
		
		#contactTable td
		{
			padding-bottom:20px;
		}
		
		
		#contactTable th /* the titles for the contact form */
		{
		text-align:left;	
		color:white;
			
		}
		

		
		#contactName, #contactEmail
		{
			width:50%;
			padding: 5px 0 5px 0;
		}
		
		#contactTable textarea
		{
		
			width:100%;
			height:250px;
			
		}
		
			

/********************************

****** Shadowing and Corners ****

*********************************/

#topLeftShadow
{
	background: #696969 url('../images/corners_shadows/wrapper_top_left.gif') no-repeat;
	height:10px;
	width:10px;
	position:absolute;	
	left:-10px;
       top:0px;

}

#bottomLeftShadow
{
	background: #696969 url('../images/corners_shadows/wrapper_bottom_left.jpg') no-repeat;
	height:13px;
	width:10px;	
	position:absolute;
	bottom:0px;
	left:-10px;
	
}

#topRightShadow
{
	background: #696969 url('../images/corners_shadows/wrapper_top_right.gif') no-repeat;
	height:10px;
	width:10px;
	position:absolute;
	top:0px;
	right:-10px;
}


#bottomRightShadow
{
	background: #696969 url('../images/corners_shadows/wrapper_bottom_right.jpg') no-repeat;
	height:13px;
	width:10px;	
	position:absolute;
	bottom:0px;
	right:-10px;
}

#wrapperReflection
{
	background-color: #696969;
	background-image: url('../images/corners_shadows/wrapperReflection.jpg');
	width:901px;
	margin: 0 auto;
	height:59px;
}



/********************************

********** Styling **************

*********************************/

	
		/* Product Search title bar  */
		#productSearchTitle
		{
			
			/* FORMATTING */
			/*border: 2px dotted #b3b3b3;
			background-color:#c1c1c1;*/
			color:#ae1212;
			font-weight:bold;
			font-size:15px;
			
			/* POSITIONING */
			position:absolute;
			top:-10px;
			left:6px;
		}
	
	

		/* SIDE BAR */

		.sideBarTitles
		{
			color:#ae1212;
			margin-left: 6px;
			font-family: Verdana, Geneva, sans-serif;
			font-size: 14px;
			font-weight: bold;
		}
		
		
		h1
		{
			
			
		}
		
		
		h2
		{
			
			
		}
		
		
		h3
		{
		
			font-size:13px;
			
		}

		.bold
		{
			font-weight:bold;
			
		}
		
		.productDetail
		{
			font-family:tahoma, Verdana, Geneva;
			color:white;
			padding: 15px;
			padding-top: 15px;
			font-size:14px;
			
		}





/********************************

***** Important misc styling ****

*********************************/


.clear
{
	clear:both;
}



.top, .topright, .right, .bottomright, .bottom, .bottomleft, .left, .topleft, .top
{
position:absolute;	
}

.top
{
	top:0px;	
}

.topright
{
	top:0px;
	right:0px;
}

.right
{
	right:0px;	
}

.bottomright
{
	bottom:0px;
	right:0px;	
}

.bottom
{
	bottom:0px;	
}

.bottomleft
{
	bottom:0px;
	left:0px;
}


.left
{
	left:0px;	
}



.topleft
{
	top:0px;
	left:0px;
}

.inline
{

	display:inline;
	
}

#top3
{
border-bottom: 1px dashed #999;
padding-bottom:10px;
margin: 0 auto;
border:2px solid #9b1300;
background-color:black;
}






#latestProducts
		{
		background-color:black;
		margin-top:10px;
			margin-bottom:20px;
		}
		
		#latestProducts th
		{
		
		font-size:11px;
		text-align:left;
		padding-right:10px;
		background-color: #950B0B;
		color:white;
		}
		
		
		#latestProducts td
		{
		
		font-size:11px;
		text-align:left;
		width: 470px;
		background-color:white;
		border:1px solid black;


		}	
		
		#latestProducts th, #latestProducts td
		{
		padding:5px;
		
		}
		
		
		
		.tinyImageURLCol
		{
		width:86px !important;
		
		}