/* ========================================================================================
Car Tyre Company: Main Layout 
Version:1.0
Author: Raphael Marsh
Email: raphael@on-brand.co.uk
Last Updated: 02 September 2009
=========================================================================================== */

/* STANDARD FORMATTING 
=========================================================================================== */
* {
	margin: 0;
 	padding: 0;
}

body {
	font-family:Arial, Helvetica, sans-serif;
	font-size:63.3%;
	margin:0;
	padding:0;
	min-width:880px;
	text-align:left;
	line-height:140%;                         
	background-color:#c0c0c0;
	background-image:url(../images/generic/bg-blend.gif);
	background-position:top;
	background-repeat:repeat-x;
}


/* Generic 
=========================================================================================== */
h1 {
	font-size: 2.4em; margin:0;
}
h2 {
	font-size: 2.0em; margin:0;
}
h3 {
	font-size: 1.6em; margin:0;
}
img {
	border:none;
}
p {
	color:#7c7c7c; font-size:110%; margin:0;
}
ul {
	list-style-type:none; margin:0; padding:0;
}
a:link {
	text-decoration:none;
}
a:hover {
	text-decoration:underline;
}
a:active {
	text-decoration:none;
}
.left {
	float:left;
}

/* Structure 
=========================================================================================== */
div#wrapper {
	width: 880px; margin: auto; text-align: left;
}
#branding {
	height: 93px;
}
	#branding .logo {
		float:left; position:relative; top:32px; border:0;
	}
	#branding .phone {
		float:right; position:relative; top:32px; right:0; border:0;
	}
#pageContent {
	background:#fff;
}
#sideArea {
	float:left; width:233px; text-align:center; padding:10px 30px 10px 30px;
}
#contentArea {
	float:right; position:relative;  width:587px; text-align:center;
	background:#ffffff url(../images/generic/contentArea-bg.gif) right repeat-y;
}
.clear {
	clear: both; text-indent: -9999px;
}	


/* Homepage Alterations 
=========================================================================================== */
#homepage #sideArea-top, #homepage #sideArea-bot, #homepage #contentArea-top {
	display:none;
}
#homepage #contentArea-bot {
	float:left; display:inline; height:6px; width:880px;
	background:url(../images/generic/homepage-bot.gif) bottom left no-repeat;
}
#homepage #contentArea {
	width:820px; min-height:400px; text-align:left; padding:30px;
	background:url(../images/generic/homepage-main.jpg) top left no-repeat;
}
#homepage #layoutPanel {
	width:233px;
}
	#homepage h1 {
		width:530px; height:20px; text-indent:-5000em; overflow:hidden; margin-bottom:20px;
		background:url(../images/generic/homepage-h1.gif) top left no-repeat;
	}
	#homepage h2 {
		width:489px; height:43px; text-indent:-5000em; overflow:hidden;
		background:url(../images/generic/homepage-h2.gif) top left no-repeat;
	}	

/* Content Page Alterations 
=========================================================================================== */
#content #contentArea {
	width:587px; min-height:400px; text-align:left;
	font-size:110%; line-height:160%;
}

	#content #contentArea h3 {
		font-size:160%; line-height:150%; margin-bottom:10px;
	}
	#content #contentArea .animDiv {
		margin-bottom:6px;
	}
		#content #contentArea .animDiv img.expand {
			float:right; margin-left:10px;
		}
		#content #contentArea .animDiv p strong {
			color:#4b4b4b; border-bottom:#999 1px dotted; display:block; width:430px; padding-bottom:1px;
		}
			#content #contentArea .animDiv ul {
				list-style:disc; margin:10px; padding-left:15px;
			}
			#content #contentArea .animDiv ul li {
				font-size:110%; line-height:150%; color:#666; padding-bottom:3px;
			}

			#content #contentArea ol {
				list-style:disc; margin:10px; padding-left:15px;
			}
			#content #contentArea ol li {
				font-size:120%; line-height:150%; color:#7c7c7c; padding-bottom:3px;
			}
 
 #bodyPanel-top {
	width:576px; margin:0 auto 6px 5px;
	background:#e7e7e7 url(../images/generic/bodyPanel-top.gif) top left no-repeat;
 }
 	#bodyPanel-top .content {
		width:546px; padding:15px;
	 }
	 	#bodyPanel-top .content h3 {
			font-size:130% !important; line-height:100% !important;
		 }
		 #bodyPanel-top .content ul {
			list-style:disc; margin:10px; padding-left:15px;
		 }
		 	#bodyPanel-top .content ul li {
				font-size:110%; line-height:150%; color:#666; padding-bottom:3px;
			 }
			 #bodyPanel-top .content ul li a {
				color:#666; text-decoration:underline;
			 }
			 	#bodyPanel-top .content ul li a:hover {
					text-decoration:none;
				 }
 #bodyPanel-bot {
	height:10px;
 	background:url(../images/generic/bodyPanel-bot.gif) bottom left no-repeat;
 }
 #content #messagePanel {
	margin:10px auto 6px 5px;
}
			

/* Checkout Process Alterations 
=========================================================================================== */
#checkout #contentArea {
	width:820px; text-align:left; padding:30px;
	background:none;
}
	#checkout #contentArea p {
		font-size:120%; line-height:150%;
	}
#checkout #middleHolder {
	float:left; width:880px;
	background:url(../images/generic/checkout-bg.gif) left repeat-y;
}
#checkout #contentArea-top {
	float:right; height:10px; width:880px;
	background:url(../images/generic/checkout-top.gif) top right no-repeat;
}
#checkout #contentArea-bot {
	float:right; display:inline; height:6px; width:880px;
	background:url(../images/generic/checkout-bot.gif) bottom right no-repeat;
}


table.basket {
	width:100%; background:#e7e7e7; border-top:#949494 2px solid; 
	border-left:#949494 2px solid; border-right:#949494 1px solid; border-bottom:#949494 1px solid;
}
	.basket th {
		font-size:130%; padding:5px; background:#ffd503;
		border-bottom:#949494 1px solid; border-right:#949494 1px solid;
	}
	.basket td {
		padding:5px; text-align:left; border-bottom:#949494 1px solid; border-right:#949494 1px solid;
	}
	.basket input {
		width:30px; padding:3px;
	}
	tble.basket img.product {
		border:#949494 1px solid !important;
	}
	.basket p.brand {
		font-size:160% !important; font-weight:bold; text-transform:uppercase;
		color:#373737; width:320px;
	}
	.basket p.size {
		font-size:140% !important; color:#373737;
	}
	.basket p.price {
		font-size:160% !important; color:#373737; font-weight:bold; width:40px;
	}


table.basketDetail  {
  	width:100%; 
	border-left:#949494 2px solid; border-right:#949494 2px solid; border-bottom:#949494 1px solid; 
}
.basketDetail td {
	border-bottom:#949494 1px dotted;
}
.basketDetail p {
	font-size:110%; padding:3px;
}
.updateBasket {
	float:left; margin-right:10px;
}
.clearBasket {
	float:left; margin-right:10px;
}
.continueBasket {
	float:left;
}
.checkoutBasket {
	float:right;
}

.basketDetail p.subTotal {
	float:right; text-align:right; margin:1px 30px 1px 0;
}
.basketDetail p.subTotal-amount {
	float:right; width:185px; font-weight:bold; color:#ac0000; font-size:160% !important;
}
.basketDetail p.delivery {
	float:right; text-align:right; margin:1px 30px 1px 0;
}
.basketDetail p.delivery-amount {
	float:right; width:185px; text-align:left; font-weight:bold; color:#ac0000; font-size:160% !important;
}
.basketDetail p.totalVAT {
	float:right; text-align:right; margin:1px 30px 1px 0;
}
.basketDetail p.totalVAT-amount {
	float:right; width:185px; text-align:left; font-weight:bold; color:#ac0000; font-size:160% !important;
}
.basketDetail p.finalTotal {
	float:right; text-align:right; font-weight:bold; margin:0 30px 0 0; font-size:160% !important;
}
.basketDetail p.finalTotal-amount {
	float:right; width:185px; text-align:left; font-weight:bold; color:#7ba800; margin:0; font-size:160% !important;
}

div.form {
	width:480px; margin:auto; border:#ffd503 2px solid; padding:15px; margin-bottom:20px;
}
	.form h3 {
		float:left; position:relative; background:#fff; width:auto; margin:-22px 0 20px -6px; padding:0 6px;
	}
	.form p {
		margin-bottom:4px;
	}
	
		.form p.required {
			padding-right:10px; background:url(../images/generic/mandatory.gif) right 5px no-repeat;
		}
.form label {
		float:left; color:#333; display:block; width:200px; font-weight:bold;
	}
	.form input {
		font-size:120%; line-height:140%; width:260px; height:20px;
	}
	.form select {
		width:200px; padding:2px; height:24px;
	}



/* Layout
=========================================================================================== */
#middleHolder {
	float:left; width:880px;
	background:url(../images/generic/sideArea-bg.gif) left repeat-y;
}
#sideArea-top {
	float:left; height:10px; width:293px;
	background:url(../images/generic/sideArea-top.gif) top left no-repeat;
}
#sideArea-bot {
	float:left; display:inline; height:6px; width:293px;
	background:url(../images/generic/sideArea-bot.gif) bottom left no-repeat;
}
#contentArea-top {
	float:right; height:10px; width:587px;
	background:url(../images/generic/contentArea-top.gif) top right no-repeat;
}
#contentArea-bot {
	float:right; display:inline; height:6px; width:587px;
	background:url(../images/generic/contentArea-bot.gif) bottom right no-repeat;
}


/* primaryNav
=========================================================================================== */
#primaryNav {
	float:left; position:relative; margin-top:46px; width:600px; display:block;
}
		#primaryNav ul li {
			float:left; height:25px; text-indent:-5000em; overflow:hidden;
		}
			#primaryNav ul li a {
				height:25px; overflow:hidden; display:block;
			}
			#primaryNav ul li.buy { width:85px; background:url(../images/generic/buy-tyres.gif); }	
			#primaryNav ul li.buy a { width:85px; }
			#primaryNav ul li.buy a:hover, #primaryNav ul li.buy.active { background:url(../images/generic/buy-tyres-roll.gif); }
			
			#primaryNav ul li.faq { width:51px;	background:url(../images/generic/faqs.gif); }	
			#primaryNav ul li.faq a { width:51px; height:25px; display:block; }
			#primaryNav ul li.faq a:hover, #primaryNav ul li.faq.active { background:url(../images/generic/faqs-roll.gif); }
			
			#primaryNav ul li.help { width:49px; background:url(../images/generic/help.gif); }	
			#primaryNav ul li.help a { width:49px; height:25px; display:block; }
			#primaryNav ul li.help a:hover, #primaryNav ul li.help.active { background:url(../images/generic/help-roll.gif); }
			
			#primaryNav ul li.contact { background:url(../images/generic/contact.gif); }	
			#primaryNav ul li.contact a { width:77px; height:25px; display:block; }
			#primaryNav ul li.contact a:hover, #primaryNav ul li.contact.active { background:url(../images/generic/contact-roll.gif); }


/* Search
=========================================================================================== */
.whitePanel {
	float:left; text-align:left; width:233px;
	background:url(../images/generic/sidePanel-top.gif) top left no-repeat;
}
	.whitePanel .content {
		margin:10px; font-size:110%; line-height:170%;
	}
		.whitePanel .content p {
			color:#999;
		}
			.whitePanel .content p strong {
				color:#5b5b5b;
			}
		.whitePanel .content p.title {
			width:98px; height:10px; text-indent:-5000em; overflow:hidden; padding-bottom:7px; margin-bottom:5px; width:210px;
			border-bottom:#cdcdcd 1px solid; background:url(../images/generic/search-title.gif) no-repeat;
		}
		.whitePanel .content p.sort {
			width:44px; height:9px; text-indent:-5000em; overflow:hidden; padding-top:12px; margin:5px 0; width:210px;
			border-top:#cdcdcd 1px solid; background:url(../images/generic/sort-title.gif) bottom left no-repeat;
		}
			.whitePanel .content a {
				font-size:110%; color:#999; text-decoration:none; padding-right:10px; margin-right:10px; border-right:#ffcd03 1px solid;
			}
			.whitePanel .content .searched {
				    font-size:110%; color:#222; text-decoration:none; padding-right:10px; margin-right:10px; border-right:#ffcd03 1px solid;
			}
				.whitePanel .content a:hover, #sideArea .whitePanel .content a.active {
					color:#5b5b5b; text-decoration:underline;
				}
.whitePanel #bottom {
	height:6px; background:url(../images/generic/sidePanel-bot.gif) bottom left no-repeat;
}

	.whitePanel p.basket {
		font-size:130%; line-height:160%; color:#5b5b5b;
	}
	.whitePanel img.icon {
		float:left; padding-right:5px;
	}
	.whitePanel img.cards {
		border-top:#cdcdcd 1px solid; padding-top:8px; margin-top:7px;
	}


/* Tyre Specs
=========================================================================================== */
#tyreSpecs {
	text-align:left; width:320px;
}
	#tyreSpecs p {
		background:#8a8a8a; border-bottom:#c6c6c6 1px solid; padding:2px 6px; width:230px; margin:0px !important;
	}
	#tyreSpecs label {
		float:left; font-size:110%; line-height:130%; color:#fff; display:block; width:100px; font-weight:bold; padding-bottom:2px;
	}
	#tyreSpecs select {
		width:110px;
	}
	p.tyreSpecs {
		float:left; width:197px; height:15px; text-indent:-5000em; overflow:hidden; margin:12px 0 8px 4px;
		background:url(../images/generic/tyrespecs-title.gif) top left no-repeat;
	}

/* Graphical Titles
=========================================================================================== */
h1#faq {
	width:238px; height:13px; text-indent:-5000em; overflow:hidden; display:block; padding:10px 0px; 
	margin-left:5px; background:url(../images/generic/title-faq.gif) left center no-repeat;
}
h1#help {
	width:38px; height:17px; text-indent:-5000em; overflow:hidden; display:block; padding:10px 0px; 
	margin-left:5px; background:url(../images/generic/title-help.gif) left center no-repeat;
}
h1#contact {
	width:67px; height:13px; text-indent:-5000em; overflow:hidden; display:block; padding:10px 0px; 
	margin-left:5px; background:url(../images/generic/title-contact.gif) left center no-repeat;
}
h1#about {
	width:78px; height:13px; text-indent:-5000em; overflow:hidden; display:block; padding:10px 0px; 
	margin-left:5px; background:url(../images/generic/title-about.gif) left center no-repeat;
}
h1#sitemap {
	width:75px; height:13px; text-indent:-5000em; overflow:hidden; display:block; padding:10px 0px; 
	margin-left:5px; background:url(../images/generic/title-sitemap.gif) left center no-repeat;
}
h1#terms {
	width:166px; height:13px; text-indent:-5000em; overflow:hidden; display:block; padding:10px 0px; 
	margin-left:5px; background:url(../images/generic/title-terms.gif) left center no-repeat;
}
h1#privacy {
	width:117px; height:17px; text-indent:-5000em; overflow:hidden; display:block; padding:10px 0px; 
	margin-left:5px; background:url(../images/generic/title-privacy.gif) left center no-repeat;
}
h1#tyrelaw {
	width:103px; height:18px; text-indent:-5000em; overflow:hidden; display:block; padding:10px 0px; 
	margin-left:5px; background:url(../images/generic/title-tyrelaw.gif) left center no-repeat;
}
h1#postcode {
	width:93px; height:13px; text-indent:-5000em; overflow:hidden; display:block; padding:10px 0px; 
	margin-left:5px; background:url(../images/generic/title-postcode.gif) left center no-repeat;
}


/* messagePanel
=========================================================================================== */
#messagePanel {
	position:relative; text-align:left; width:576px; margin:10px auto 6px auto;
	background:url(../images/generic/messagePanel-top.gif) top left no-repeat;
}
	#messagePanel .content {
		padding:10px 10px 5px 10px;
	}
		#messagePanel .content img {
			float:left;
		}
		#messagePanel .content p {
			float:right; text-align:left; width:515px; font-size:140%; line-height:130%; color:#fff; font-weight:bold;
		}
			#messagePanel .content p strong {
				color:#000;
			}
	#messagePanel #bottom {
		height:6px; background:url(../images/generic/messagePanel-bot.gif) bottom left no-repeat;
	}


/* pagination
=========================================================================================== */
.product-prevnext {
	font-size:110%; margin:6px 0;
}
	.product-prevnext span {
		font-weight:normal !important; padding:0 6px;
	}
	.product-prevnext a {
		font-size:110%; color:#333; padding:0 6px; text-decoration:underline;
	}
		.product-prevnext a:hover {
			text-decoration:none;
		}


/* List Items
=========================================================================================== */
.listItem {
	position:relative; width:566px; margin:4px auto 4px auto; padding:4px 5px; text-align:left;
	background:url(../images/generic/list-item-bg.gif) top left no-repeat;
}
	.listItem img {
		float:left; border:#949494 1px solid;
	}
	.listItem h3 {
		font-size:140%; line-height:140%; text-transform:uppercase; color:#373737;
	}
	.listItem p {
		font-size:130%; line-height:140%; color:#373737;
	}
		.listItem p.price {
			margin-top:10px;
		}
		.listItem p a {
			font-size:90%; color:#606060; text-decoration:underline;
		}
			.listItem p a:hover {
				text-decoration:none;
			}	
	.listItem .detail {
		float:left; position:relative; width:230px; margin:4px 0 4px 12px;
	}
	.listItem .action {
		float:right; position:relative; margin:28px 8px 0 0; width:170px;
	}
		.listItem .action p {
			float:left; font-size:120%; line-height:150%; font-weight:bold; margin:3px 20px 0 0;
		}
			.listItem .action p img {
				border:none !important; margin-top:4px;
			}
		.listItem .action select {
			width:80px; padding:2px; cursor:pointer;
		}
	
.arrange-button a {
	float:right; width:203px; height:32px; margin-top:8px;
	background:url(../images/generic/arrange-button.gif) 0 0 no-repeat;
}
	.arrange-button a:hover {
		background:url(../images/generic/arrange-button.gif) -203px 0 no-repeat;
	}
	
#homepage .search-button a {
	float:left; width:233px; height:46px; margin:8px auto;
	background:url(../images/generic/search-button2.png) 0 0 no-repeat;
}
	#homepage .search-button a:hover {
		background:url(../images/generic/search-button2.png) -233px 0 no-repeat;
	}
.search-button a {
	float:left; width:233px; height:46px; margin:8px auto;
	background:url(../images/generic/search-button.gif) 0 0 no-repeat;
}
	.search-button a:hover {
		background:url(../images/generic/search-button.gif) -233px 0 no-repeat;
	}
		

/* Features
=========================================================================================== */
#features {
	background:#ffffff;
}
	#features ul {
		background:#ffffff;
	}
		#features ul li {
			float:left; width:33.2%; padding:5px 0; text-align:center; border-right:#e9e9e9 1px solid;
		}
			#features ul li.end {
				border-right:none;
			}
			
			
			
/* Contact Form
=========================================================================================== */
form#contact {
	width:500px; margin-left:20px;
}
fieldset {
	padding:0 15px 8px 0; border:0;
}
form#contact p {
	float:left; position: relative; width:470px; color:#727272;
	margin-bottom:8px;
}
#contact label {
	float: left; font-size:100%; color:#606060; width: 110px; padding-top:3px;	
}
#contact input {
	height: 18px; width: 330px;
}
#contact input[type="text"], textarea {
	border-top: 2px solid #999;
	border-left: 2px solid #999;
	border-bottom: 1px solid #ccc;
	border-right: 1px solid #ccc;
}
#contact #Message {
	float:left; position:relative; width:330px; margin:0 0 10px 0px;
}
/* style form elements on focus */
/* 
#contact input:focus, textarea:focus {
	background: #ffc;
}
*/

#contact label.error {
	position: absolute;
	top: 1px;
	text-align:right;
	right: 20px;
	padding: 2px;
	width:300px;
	color: #da3939;
	font-size: 0.9em;
	font-style: italic;
}
#contact input.submit-button {
	float:left;
	margin-left:110px;
	margin-bottom:20px;
	width:80px;
	height:19px;
	display:block;
	overflow:hidden;
	cursor:pointer;
	text-indent: -5000px;
}

#contact p.required {
	background:url(../images/generic/mandatory.gif) right 0px no-repeat;
}



/* Brands
=========================================================================================== */
#brands {
	background:#ffffff; margin-top:4px;
}
	#brands ul {
		padding:3px; background:#ffffff;
	}
		#brands ul li {
			float:left; width:14.15%; text-align:center; border-right:#e9e9e9 1px solid; padding:3px 0;
		}
			#brands ul li.end {
				border-right:none;
			}


/* Footer
=========================================================================================== */
#footer { 
	position:relative; clear:both; height:40px;
	background:url(../images/generic/footer-bg.png) top center no-repeat;;
} 
	#footer p {
		float:left; color:#5a5b5e; padding:10px 5px;
	}
		#footer ul {
			float:right; position:absolute; right:0; padding:10px 5px;
		}
			#footer ul li {
				float:left; position:relative; font-size:110%; border-left:#999 1px solid;
			}
				#footer ul li a {
					padding:0 8px; color:#5a5b5e; text-decoration:none;
				}
					#footer ul li a:hover {
						text-decoration:underline;
					}
					#footer ul li a.active {
						text-decoration:underline;
					}