/*

	motocross-styles.css

	author: 		Kathy Reid <kathy@kathyreid.id.au>
	date: 			March 2007
	designed for: 	Andrew Frantantaro

	version history:

	1.0 17 March 2007
	Initialised file based on http://www.motocross-racing-tips.com
	Rewrote non-XHTML compliant code to be standards based, used DIV intead of TABLE elements for layout

*/


body {

	margin: 0px; /* This leaves no white space at any of the sides */
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 100%; /* Percentage size used for accessibility*/
	color: black; /* Set default colour */ 

	/* This is the chain logo */
	background-image: url(/motocross-mockup/images/LEFT.jpg);
	background-repeat: repeat-y;
}

td {
	margin: 0px;
}

img {
	border: none;
}
 
#ContainerDiv { /* This is a container element for more control over styling */
	width: 725px;
}

#MainLogo { /* This is the DIV element that holds the main logo */

	background-image: url(/april2009/images/logo.jpg);
	background-repeat: no-repeat;

	position: relative;

	width: 725px;
	height: 120px;
	top: 0px;
	left: 0px;
	
}

#myAds { /* This DIV is where the ads go */
	position: relative;
	top: 0%;
	float: right; 
	border: 1px solid black; /* put on a border */
	padding: 5px; /* Inside padding - inside the border */
}

#BreadCrumbs, #NowShowing{
	margin-top: 15px;
	margin-left: 5px;
	font-size: 70%;
}

#PageLayoutHeading{
	font-size: 105%;
	font-weight: bold;
	background-color: #BBB;
	border-top: 1px solid black;
	border-bottom: 1px solid black;
	padding: 5px 0px 5px 5px;
}

div.aProduct { /* We can't use an ID selector here - each ID is different */

	padding: 5px;
	margin: 5px 0 5px 0px;

}



#Navigation { /* This is the DIV element that holds the image rollovers */
	position: relative;
	width: 130px;
	top: 0px;
	float: left;

	

	margin-right: 20px;	

}

#AddToFavourites { /* This is the container for the Yahoo, Google links */

}	

#FavouritesList { /* This is the DIV element that holds the Yahoo, Google links etc */
	display: inline;
	float: left;
	width: 110px;
	margin: 10px 3px 10px 3px;
	padding: 7px;
	border: 2px solid black;
	background-color: white;
}

#FavouritesList li {
	display: inline;
	line-height: 18px;
}

#MainContent { /* This is a container for the main text content */
	position: relative;
	float: left;
	top: 20px;
	width: 540px;
}

#RidegearLogo { /* This is the DIV element that holds the Ridegear logo */
	background-image: url(/motocross-mockup/images/ridegear-logo.gif);
	background-repeat: no-repeat;
	width: 450px;
	height: 41px;
}

p #Bookmark {

}	

#TipsTricks { /* This is the DIV element that holds all the tips and tricks */

	float: left;

}

#CategoryLinks {

	line-height: 140%;

}

#TipsTricks h2 { /* The heading for each tip or trick. It is done this way because search engines give higher weight to heading text */

}

#TipsTricks p { /* a style so that the content of the tip or trick can by styled up */

}

#Footer { /* This is the DIV element that holds the footer images */
	position: relative;
	clear: both;
	width: 595px;
	margin-left: 135px;
	line-height: 170%;
	text-align: center;
	border-top: 1px solid black;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bolder;
}

#ProductLayout {
	position: relative;
	width: 100%;
}

#ProductLayout ul { /* Used for the listing of categories on the index page */
	font-size: 80%;	
	text-transform: capitalize;
	padding-bottom: 30px;
}



#ProductDetail { /* Used to display a product */
	position: relative;
	width: 70%;
	float: left;
}

#ProductBasics {
	margin: 5% 0 0 10%;
	text-align: center;

}

#aProductDetails, #aProductImage { /* Use to display each product */

}	

#aProductImage img {
}
	
#aProductDetails h2 { /* Use to display each product */
	font-size: 90%;
	font-weight: bold;
}

#aProductDetails h2 strong { /* Use to display the price */
	font-size: 90%;
	color: red;
	font-weight: normal;
}

#aProductDetails h2 span.mfgcode, div.ProductDetail h2 span.mfgcode { /* Use to display the manufacturing code in small type */
	font-size: 90%;

}

#ProductDescription {
	position: relative;
	float: left;
	font-size: 85%;
	width: 100%;
	margin: 0 0 0 4%;
	text-align: center;
}

div.BrandBanner {
	font-weight: bold;
	font-size: 90%;
	border-bottom: 1px solid black;
	padding-left: 5px;
}

p.Shipping{
	font-style: italic;
}

p.Price {
	font-weight: bold;
}

p.BuyNow a {
	color: red;
	letter-spacing: 0.03em;
}

p.BuyNow a:hover {
	color: red;
	letter-spacing: 0.03em;
	font-weight: bold;
}

p.MoreInfo {
	font-weight: bold;
	letter-spacing: 0.03em;
	font-size: 85%;
}

p.MoreInfo a {
	text-decoration: none;
}

p.MoreInfo a:hover {
	text-decoration: none;
	color: red;
}

#Categories, #Brands { /* Used for the listing of categories on the index page */
	font-size: 80%;	
	float: left;
	padding-bottom: 40px;
	margin-left: 0px;
	list-style: inside disc;
}

#Categories li, #Brands li {
	padding-bottom: 5px;
}

#CategoriesList, #BrandsList{
	position: relative;
	width: 45%;
	float: left;
}

#CategoriesHeading, #BrandsHeading {
	/* to change the font of the heading do something like this */
	/* font-family: Times, Tahoma, Trebuchet, serif; */

}

#subCategoriesTable, #ProductSummaryTable {
	font-size: 90%;	
	line-height: 130%;
	position: relative;
	width: 100%;
}

#subCategoriesTable td, #ProductSummaryTable td {
	vertical-align: top;
	width: 45%;

}
	
#subCategories li, #subCategories2 li {	
	padding-bottom: 7px;
}



#ProductSummaryTable {
	position: relative;
	width: 70%;
	float: left;
}

div .aProduct h2{ 
	font-size: 80%;
	font-weight: normal;
}


/* Styles for the search box */

#RideGearSearch{
	position: relative;
	width: 200px;
	margin-left: 330px;
}

#RideGearSearch fieldset {
	border: none;
}

#RideGearSearch fieldset legend {
	display: none;
}

#RideGearSearch label {
	display: none;
}

#Search { /* The Search RideGear Catalogue button */
	float: left; /* This stops it appearing on the right in IE */
}

#SearchResults {
	margin-bottom: 20px;
}
#tableSearchResults {
	border: 1px solid black;
	border-collapse: collapse;
	margin-top: 10px;
}

#tableSearchResults th {
	padding: 5px;
	background-color: black;
	color: white;
	font-weight: bold;
}

#tableSearchResults td {
	padding: 5px;
	font-size: 90%;
	border: 1px dotted black;
}