body { color: #333333; }

/* Tags */

	h1 { color: #333333; }

	h2 {
		clear: left;
		color: #333333;
		border-bottom: 1px solid #cccccc;
	}

	h3 { clear: left; }

	fieldset { border: 1px solid #cccccc; }

/* Classes */

	.frame {
		padding: 3px;
		border: 1px solid #cccccc;
		background-color: #ffffff;
	}
	div.h2 { margin-top: 25px; }

	div.additional { clear: left; }

	p.disclaimer, div.disclaimers p { font-size: 1.1em; color: #999999; }

	div.help {
		width: 349px;
		height: 123px;
		background-image: url(../images/help_arrow.png);
	}
		div.help p { margin: 5px 58px 5px 5px; font-size: 11px; line-height: 1.3; }
		div.help p img { vertical-align: middle; }

	div.product-image {
		float: right;
		clear: right;
		padding: 0px 5px 10px 10px;
	}
		div.product-image img {	background-color: #ffffff; }

	div.thumbnail-link {
		float: left;
		width: 100px;
		height: 140px;

		margin: 0px 5px;
	}
		div.thumbnail-link p {
			margin: 0px;
			font-size: 1.1em;
			text-align: center;
		}
		div.thumbnail-link p.thumbnail {
			position: relative;
			height: 100px;
			width: 100px;
		}
		div.thumbnail-link p.thumbnail a {
			display: block;
			width: 100px;
			position: absolute;
			bottom: 0px;
			left: 0px;
			text-align: center;
			margin: auto;
		}

	form.add { padding: 4px 7px 5px; }
		form.add p { margin: 0px; text-align: right; font-size: 14px; }
		form.add span.price { font-size: 22px; font-weight: bold; vertical-align: middle; }
		form.add span.details { margin-left: 4px; font-style: italic; vertical-align: middle; }

		form.add input { margin-left: 4px; vertical-align: middle; }
		form.add select { vertical-align: middle; }

		input.add {
			width: 130px;
		}
		input.add, .submit input {
			height: 24px;

			border: 1px solid #666666;

			background: #716f6f url(../images/home.png);
			background-position: 0px -1px;

			color: #ffffff;
			cursor: pointer;
		}
		input.add:hover, .submit input:hover { background-position: 0px 23px; }
		input.programme { width: 170px; }
		input.core { background-color: #65a429; background-image: url(../images/core.png) }
		input.weight { background-color: #2e95dd; background-image: url(../images/weight.png) }
		input.energy { background-color: #f2a029; background-image: url(../images/energy.png) }
		input.targeted { background-color: #dd2b29; background-image: url(../images/targeted.png) }
		input.outer { background-color: #b02b9d; background-image: url(../images/outer.png) }

		input.quantity { text-align: right; }

	div.product, form.price {
		clear: both;
		position: relative;

		margin: 5px 10px 10px;
		padding: 4px 7px 5px;
		border: 1px solid #dddddd;
	}

	div.product {
		padding-left: 0px;
		border-left: 0px;
		background-image: url(../images/product_bg.png);
		background-repeat: repeat-y;
		background-position: right;
	}
		div.product p { margin: 0px 0px 3px 80px; }
		div.product p.heading { font-size: 1.4em; padding-top: 2px; }
		div.product p.description { font-style: normal; padding-bottom: 30px; font-size: 1.2em; }
		div.product form p { margin: 0px; }
		div.product form.add {
			position: absolute;
			bottom: 0px;
			right: 0px;
			margin: 0px;
		}
		div.product div.thumbnail {
			padding-top: 2px;
			width: 75px;
			float: left;
			text-align: center;
		}

	form.price {
		background: #f6f6f6 url(../images/basket_price.png) no-repeat 10px;
	}

	div.product-summary {
		position: relative;
		margin: 20px 0px;
		min-height: 100px;
	}
		div.product-summary p { margin: 0px 30px 10px 110px; }
		div.product-summary p.heading { font-size: 1.5em; }
		div.product-summary div.thumbnail {
			width: 80px;
			position: absolute;
			left: 10px;
			top: 0px;
			text-align: center;
		}

/* Body parts */

	body {
		margin: 0px;
		padding: 0px;

		background: #eeeeee url(../images/bg_header.png) repeat-x 0px -54px;
	}

	#page {
		margin: 0px;
		padding: 0px;

		min-width: 750px;

		position: relative;

		background: transparent url(../images/bg_header_design.png) no-repeat right -54px;
	}

	#header {
		width: 100%;
		min-width: 750px;

		height: 95px;
		overflow: hidden;
		position: relative;
	}
		#header-logo { padding: 8px; }

		#header-details {
			position: absolute;
			bottom: 0px;
			left: 0px;

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

			font-family: Arial, Tahoma, Helvetica, sans-serif; /* Narrower than Verdana */
			line-height: 1;
		}
			#header-details a.owner { font-weight: bold; font-size: 25px; color: #000000; text-decoration: none; }
			#header-details a.address { color: #387c2c; font-style: italic; font-size: 15px; padding: 5px 0px 5px 5px; }

		#header-contact {
			position: absolute;
			bottom: 0px;
			right: 0px;

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

			font-size: 12px;
			font-family: Arial, Tahoma, Helvetica, sans-serif; /* Narrower than Verdana */
			line-height: 1;
		}
			#header-contact a { color: #000000; padding: 0px 10px 0px 7px; border-right: 1px solid #387c2c; text-decoration: none; }
			#header-contact a:hover { color: #3399ff; text-decoration: underline; }
			#header-contact a.phone { font-weight: bold; }
			#header-contact a.contact { border: 0px; padding-right: 0px; }

	#bar {
		height: 24px;

		background: #999999 url(../images/bar.png) repeat-x 0px 0px;
		overflow: hidden;
		text-align: center;
	}

		#bar ul {
			width: 740px;
			margin: 0px auto;
			padding: 0px 0px 0px 10px;
		}

		#bar li {
			margin: 0px;
			padding: 0px;
	
			float: left;
			display: block;
	
			bottom: 0px;
			list-style-type: none;

			font-family: Arial, Tahoma, Helvetica, sans-serif; /* Narrower than Verdana */
			font-size: 12px;
			line-height: 1;
		}
	
		#bar a {
			display: block;
	
			border-right: 1px solid #444444;
			padding: 7px 8px 6px;
	
			color: #ffffff;
			text-align: center;
			text-decoration: none;
			font-weight: bold;
	
			background-position: 0px 0px;
			background-color: #716f6e;
			background-image: url(../images/home.png);
		}
		#bar li.link-root { display: none; }
		#bar a.link-core { border-left: 1px solid #444444; background-color: #65a429; background-image: url(../images/core.png) }
		#bar a.link-weight { background-color: #2e95dd; background-image: url(../images/weight.png) }
		#bar a.link-energy { background-color: #f2a029; background-image: url(../images/energy.png) }
		#bar a.link-targeted { background-color: #dd2b29; background-image: url(../images/targeted.png) }
		#bar a.link-outer { background-color: #b02b9d; background-image: url(../images/outer.png) }

		#bar a:hover {
			background-position: 0px 72px;
			color: #666666;
		}
		#bar a.link-core:hover { color: #65a429; }
		#bar a.link-weight:hover { color: #2e95dd; }
		#bar a.link-energy:hover { color: #f2a029; }
		#bar a.link-targeted:hover { color: #dd2b29; }
		#bar a.link-outer:hover { color: #ad0097; }
	
		#bar a.active, #bar a.active:hover, #bar a.proud {
			font-weight: bold;
			background-position: 0px 48px;
			color: #ffffff;
		}

		#bar a.proud:hover {
			background-position: 0px 24px;
			color: #ffffff;
		}

	#section { height: 100px; border-bottom: 1px solid #666666; background-color: #bbbbbb; }
		#section-img { float: right; }

	#location {
		position: relative;

		padding: 5px;
		border-bottom: 1px solid #666666;

		color: #666666;
		background: #e8e8e8 url(../images/bg_location.png) repeat-x top;
	}
		#location p { font-size: 1.1em; margin: 0px; font-family: Arial, Tahoma, Helvetica, sans-serif; /* Narrower than Verdana */ }
		#location a { color: #333333; }
		#location a:link { color: #999999; }
		#location a:hover { color: #3399ff; }
		#location em {
			margin-right: 4px;
		}
		#location a.active {
			font-weight: bold;
			color: #333333;
		}

	#container {
		position: relative;
		min-width: 750px;
		
		background: #ffffff;
	}

	#content {
		min-width: 458px;
		min-height: 550px;

		position: relative;

		margin: 0px 135px 0px 0px;
		padding: 10px 0px 20px;

		background: #ffffff url(../images/bg_container_top.png) repeat-x top;
	}

		#tabs { margin: 0px 10px 0px; padding: 0px 7px 0px; border-bottom: 1px solid #cccccc; height: 29px; clear: both; }
			#tabs li { float: left; margin: 0px; padding: 0px; list-style-type: none; }
			#tabs a { color: #000000; margin-top: 2px; display: block; padding: 4px 10px; font-size: 12px; font-family: Arial, Tahoma, Helvetica, sans-serif; /* Narrower than Verdana */ background: #f6f6f6; border-top: 1px solid #dddddd; border-right: 1px solid #dddddd; border-left: 1px solid #dddddd; text-decoration: none; }
			#tabs a:hover { background: #ffffff; color: #3399ff; text-decoration: underline; }
			#tabs li.active a { font-weight: bold; background: #ffffff; border-bottom: 1px solid #ffffff; margin-top: 0px; padding: 5px 10px; }
			#tabs li.active a:hover { color: #000000; text-decoration: none; font-weight: bold; background: #ffffff }

		.tabbed { border: 1px solid #cccccc; border-top: 0px; margin: 0px 10px; }
			.tabbed h2 { margin-top: 15px; border-bottom: 0px; }
			.tabbed  form.price { border-bottom: 0px; border-left: 0px; border-right: 0px; margin: 0px; }


	#add {
		width: 135px;

		float: right;
		
		padding-top: 10px;

		font-family: Arial, Tahoma, Helvetica, sans-serif; /* Narrower than Verdana */

		background: #ffffff url(../images/bg_container.png) repeat-x top;
	}
		#bc { margin: 5px; background: #cccccc url(../images/basket_bottom.png) no-repeat bottom; }
			#bc p, #bc li { font-size: 11px; }
			#bc p { margin: 0px; }
			#bc span.subitem {
				display: block;
				font-size: 10px;
				font-style: italic;
				margin-left: 4px;
			}
			#bc ul {
				margin: 0px;
				padding: 0px;
			}
				#bc li {
					margin: 0px;
					padding: 0px;
					border-bottom: 1px solid #cccccc;
					list-style-type: none;
				}
				#bc li a {
					display: block;

					margin: 0px;
					padding: 3px 6px;
		
					color: #333333;
					text-decoration: none;
		
					background-color: #f6f6f6;
				}
				#bc li a:hover {
					color: #3399ff;
					background-color: #ffffff;
					text-decoration: underline;
				}

			#bc-empty {
				color: #333333;
				text-align: center;
	
				padding: 0px 3px 10px;
			}
	
			#bc-link {
				padding: 2px 3px 7px;
				text-align: center;
			}
				#bc-link a {
					color: #333333;
					text-decoration: none;
		                }
				#bc-link a:hover {
					color: #3399ff;
					text-decoration: underline;
				}

		#add div.ad { margin: 0px 5px 7px; }

	#footer {
		height: 75px;
		
		position: relative;
		clear: both;

		border-top: 1px solid #333333;
		padding-top: 15px;

		text-align: center;

		background: #eeeeee url(../images/footer.png) repeat-x;
	}

		#footer p {
			width: 750px;
	
			margin: 0px auto 3px;

			font-size: 10px;
			text-align: center;
		}
		#footer #checkout-logo {
			position: absolute;
			top: 10px;
			left: 10px;
		}
		#footer #freeindex {
			position: absolute; 
			top: 20px;
			right: 10px;
		}