﻿/*
*******************************************************
Title: style.css (CSS Document)
Copyright: Gary Farrington
Created: 22/07/2009
Last modified: 22/07/2009
*******************************************************
*/

body {
	margin: 0;
	padding: 0;
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	font-size: 12px;
	background-color: #fff;
    overflow:visible;
}

img {
	border-width: 0px;
}

.clear {
	clear: both;
}

h1 {
	font-weight: bold;
	/* color: #d04e00; - cyan colour */
	color: #1278d2;
}

#logo {
	padding: 15px 0 0 0px;
	margin: 0;
	font-size: 38px;
	letter-spacing: -3px;
}

h2 {
	font-size: 18px;
	font-weight: bold;
	/* color: #d04e00; - cyan colour */
	color: #0861a8;
	letter-spacing: -1px;
}

.cat-name {
	font-size: 18px;
	font-weight: bold;
	/* color: #d04e00; - cyan colour */
	color: #0861a8;
	letter-spacing: -1px;
	margin: 7px 15px 0 0; padding: 0;
	float: left;
}


#slogan {
	padding: 0px 0 0 0px;
	margin: -5px 0 0 0;
}

h3 {
	font-size: 14px;
	font-weight: bold;
	color: #0b89e5;
	background-image: url('images/bg-white.gif'); background-repeat:no-repeat;
	width: 179px; 
	height: 28px;
	padding: 5px 0 0 10px;
}

a.link-left:link {
	margin-left: 10px;
	color: #000;
}
a.link-left:visited {
	margin-left: 10px;
	color: #000;
}
a.link-left:hover {
	margin-left: 10px;
	color: #ff7300;
}
a.link-left:active {
	margin-left: 10px;
	color: #000;
}


a.link-back:link {
	float: right;
	margin-top: 10px;
	color: #000;
}
a.link-back:visited {
	float: right;
	margin-top: 10px;
	color: #000;
}
a.link-back:hover {
	float: right;
	margin-top: 10px;
	color: #ff7300;
}
a.link-back:active {
	float: right;
	margin-top: 10px;
	color: #000;
}

/****** START OF LAYOUT *******/

#container {
	margin: 0 auto;
	width: 953px;
	background-color: #fff;
}

#header {
	height: 100px;
}

#nav-top {
	height: 30px;
}

#tabs {
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	font-size: 12px;
}

a.tab-off:link {
	background-color: #165e9f; background-image: url('images/bg-button-off.gif'); background-repeat: repeat-x;
	color: #fff;
	display:block;
	padding: 10px 13px;
	font-weight: bold;
	margin: 0 5px 0 0;
	float: left;
	text-align: center;
	text-decoration: none;
	height: 12px
}

a.tab-off:visited {
	background-color: #165e9f; background-image: url('images/bg-button-off.gif'); background-repeat: repeat-x;
	color: #fff;
	display:block;
	padding: 10px 13px;
	font-weight: bold;
	margin: 0 5px 0 0;
	float: left;
	text-align: center;
	text-decoration: none;
	height: 12px
}

a.tab-off:hover {
	background-color: #3181c5; background-image: none;
	color: #fff;
	display:block;
	padding: 10px 13px;
	font-weight: bold;
	margin: -3px 5px 0 0;
	float: left;
	text-align: center;
	text-decoration: none;
	height: 15px
}

a.tab-off:active {
	background-color: #3181c5; background-image: none;
	color: #fff;
	display:block;
	padding: 10px 13px;
	font-weight: bold;
	margin: -3px 5px 0 0;
	float: left;
	text-align: center;
	text-decoration: none;
	height: 15px
}

.tab-on {
	background-color: #3181c5;
	color: #fff;
	display:block;
	padding: 10px 13px;
	font-weight: bold;
	margin: 0 5px 0 0;
	float: left;
	text-align: center;
	text-decoration: none;
	height: 12px
}


		a.tab-off-last:link {
			background-color: #165e9f; background-image: url('images/bg-button-off.gif'); background-repeat: repeat-x;
			color: #fff;
			display:block;
			padding: 10px 13px;
			font-weight: bold;
			margin: 0;
			float: left;
			text-align: center;
			text-decoration: none;
			height: 12px
		}
		
		a.tab-off-last:visited {
			background-color: #165e9f; background-image: url('images/bg-button-off.gif'); background-repeat: repeat-x;
			color: #fff;
			display:block;
			padding: 10px 13px;
			font-weight: bold;
			margin: 0;
			float: left;
			text-align: center;
			text-decoration: none;
			height: 12px
		}
		
		a.tab-off-last:hover {
			background-color: #3181c5; background-image: none;
			color: #fff;
			display:block;
			padding: 10px 13px;
			font-weight: bold;
			margin: -3px 0 0 0;
			float: left;
			text-align: center;
			text-decoration: none;
			height: 15px
		}
		
		a.tab-off-last:active {
			background-color: #3181c5; background-image: none;
			color: #fff;
			display:block;
			padding: 10px 13px;
			font-weight: bold;
			margin: -3px 0 0 0;
			float: left;
			text-align: center;
			text-decoration: none;
			height: 15px
		}
		
		.tab-last-on {
			background-color: #165e9f; background-image: url('images/bg-button-off.gif'); background-repeat: repeat-x;
			color: #fff;
			display:block;
			padding: 10px 13px;
			font-weight: bold;
			margin: 0;
			float: left;
			text-align: center;
			text-decoration: none;
			height: 12px
		}

#sub-bar {
	clear: both;
	height: 15px;
	width: 927px;
	background-color: #165e9f;
	background-image: url('images/bg-sub.gif');
	background-repeat: repeat-x;
	padding: 12px 13px;
	margin: 0;
	color: #fff;
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	font-size: 12px;
	font-weight: bold;
}

#sub {
	list-style: none;	
	display:block;
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	font-size: 12px;
}

a.sub-link:link {color: #fff; text-decoration: none; font-weight: bold; margin-right: 15px; }
a.sub-link:visited {color: #fff; text-decoration: none; font-weight: bold; margin-right: 15px; }
a.sub-link:hover {color: #ffed53; text-decoration: none; font-weight: bold; margin-right: 15px; }
a.sub-link:active {color: #fff; text-decoration: none; font-weight: bold; margin-right: 15px; }

a.sub-link-on:link {color: #fff007; text-decoration: none; font-weight: bold; margin-right: 15px; }
a.sub-link-on:visited {color: #fff007; text-decoration: none; font-weight: bold; margin-right: 15px; }
a.sub-link-on:hover {color: #fff007; text-decoration: none; font-weight: bold; margin-right: 15px; }
a.sub-link-on:active {color: #fff007; text-decoration: none; font-weight: bold; margin-right: 15px; }

.page-numbers {
	float: left;
}
a.numbers:link {
	background-color: #f6f6f6;
	border: 1px #ccc solid;
	color: #555;
	text-decoration: none;
	padding: 5px;
	float: left;
	font-weight: bold;
	margin: 5px 7px 0 0;
}
a.numbers:visited {
	background-color: #f6f6f6;
	border: 1px #ccc solid;
	color: #555;
	text-decoration: none;
	padding: 5px;
	float: left;
	font-weight: bold;
	margin: 5px 7px 0 0;
}
a.numbers:hover {
	background-color: #ffdc06;
	border: 1px #ccc solid;
	color: #555;
	text-decoration: none;
	padding: 5px;
	float: left;
	font-weight: bold;
	margin: 5px 7px 0 0;
}
a.numbers:active {
	background-color: #f6f6f6;
	border: 1px #ccc solid;
	color: #555;
	text-decoration: none;
	padding: 5px;
	float: left;
	font-weight: bold;
	margin: 5px 7px 0 0;
}

	a.numbers-on:link {
		background-color: #ff7300; background-image: url('images/bg-button-ind-off.gif'); background-repeat: repeat-x;
		border: 1px #ccc solid;
		color: #fff;
		text-decoration: none;
		padding: 5px;
		float: left;
		font-weight: bold;
		margin: 5px 7px 0 0;
	}
	a.numbers-on:visited {
		background-color: #ff7300; background-image: url('images/bg-button-ind-off.gif'); background-repeat: repeat-x;
		border: 1px #ccc solid;
		color: #fff;
		text-decoration: none;
		padding: 5px;
		float: left;
		font-weight: bold;
		margin: 5px 7px 0 0;
	}
	a.numbers-on:hover {
		background-color: #ff7300;
		border: 1px #ccc solid;
		color: #fff;
		text-decoration: none;
		padding: 5px;
		float: left;
		font-weight: bold;
		margin: 5px 7px 0 0;
	}
	a.numbers-on:visited {
		background-color: #ff7300;
		border: 1px #ccc solid;
		color: #fff;
		text-decoration: none;
		padding: 5px;
		float: left;
		font-weight: bold;
		margin: 5px 7px 0 0;
	}


#break {
	width: 100%;
	height: 3px;
	background-color: #165e9f;
	margin: 0;
}

#break-end {
	width: 953px;
	height: 3px;
	background-color: #165e9f;
	margin: 0 auto 20px auto;
}

#col-left {
	float: left;
	width: 200px;
}

#col-middle {
	float: left;
	width: 553px;
}

#col-right {
	float: left;
	width: 200px;
}

.col-content-left {
	padding: 0 10px 20px 10px;
}

.col-content-right {
	padding: 0 10px 20px 10px;
}

.col-content {
	padding: 10px;	
}

#searchbox {
	background-color: #f6f6f6;
	width: 350px;
	height: 40px;
	float: right;
	margin: 28px 0 0 0;
	padding: 4px 0 0 15px;
}

#searchbar {
	float: right;
	margin: 8px 10px 0 0;
}

#searchbutton {
	float: right;
	width: 60px;
	height: 22px;
	background-color: #d04e00;
	margin: 8px 10px 0 0;
	text-decoration: none;
}

#searchbuttontext {
	text-decoration: none;
	color: #fff;
	font-weight: bold;
	text-align: center;
	margin-top: 3px;
}

#category-images {
	clear: both;
	margin-top: 25px;
	list-style:none;
}
.cat-image {
	float: left;
	width: 105px;
	height: 105px;
	padding: 5px;
	margin: 8px;
	background-color: #f6f6f6;
	border: 1px #ccc solid;
}



#navlist li {
	display: table;
	list-style-type: none;
	padding: 0 0 0 0px;
	margin: 0 0 0 0px;
	color: #000;
	background-color: #f6f6f6;
	text-align: center;
}

a.navlist:link {
	color: #000;
}


	/* footcats 
	.footcats {
		background:#fffadb;
	}
	.footcats h3 {
		font-size:12px;
		color:#fff;
		width:953px;
		height:22px;
		padding-top:5px;
		margin:0;
		text-align:center;
	}
	.footcats ul {
		margin:0 0 0 10px;
		padding:20px 0;
		width:953px;
		display:table;
	
	}
	.footcats ul li {
		float:left; 
		display:block;
		width: 24%;
		margin-right:1%;
	overflow:hidden;
	height:12px;
	}
	.footcats ul li a {
		font-size:x-small;
	color:#000;
	text-decoration:underline;
	}
	.footcats ul li a.selected {
		font-size:x-small;
		
		text-decoration:underline;
	}
	
	.footcats a:hover {
	text-decoration:underline;
	color: #ff7300;
	}
	
	/* */
	
	.footcats {
		background:#dfedff;
		width: 953px;
		margin: 0 auto;
	}
	.footcats h3 {
		font-size:12px;
		color:#fff;
		width:953px;
		height:22px;
		padding-top:5px;
		margin:0;
		text-align:center;
	}
	.footcats ul {
		margin:0 0 0 10px;
		padding:20px 0;
		width:935px;
	
	}
	.footcats ul li {
		display:inline;
	overflow:hidden;
	height:12px;
	}
	
	.footcats ul li a {
		font-size:x-small;
	color:#000;
	text-decoration:underline;
	}
	
	.footcats ul li a.selected {
		font-size:x-small;
		
		text-decoration:underline;
	}
	
	.footcats a:hover {
	text-decoration:underline;
	color: #ff7300;
	}
	
	
	
#links-end a {
	clear: both;
	width: 953px;
	background-color: #f6f6f6;
	margin: 0;
	color: #000;
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	font-size: 11px;
	font-weight: bold;
	overflow:auto;
}
#links-end  {
	clear: both;
	width: 953px;
	background-color: #f6f6f6;
	margin: 0;
	color: #000;
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	font-size: 11px;
	font-weight: bold;
	overflow:auto;
}


#footer {
	clear: both;
	height: 13px;
	width: 927px;
	background-color: #ff7300;
	background-image: url('images/bg-sub.gif');
	background-repeat: repeat-x;
	padding: 12px 13px;
	margin: 0 auto;
	color: #fff;
	font-family: Arial, Verdana, Geneva, Tahoma, sans-serif;
	font-size: 11px;
	font-weight: bold;
}

.footer-link {
	color: #fff; text-decoration:none; width: 953px; margin: 0 auto;
}

#footertext {
	width: 953px;
	margin: 0 auto;
	text-align: center;
}

#bg {
	background-image:url('images/bg-main.gif');
	background-repeat: repeat-y;
	width: 953px;
	overflow:auto;	
}

.product-summary {
	clear: both;
	margin-top: 25px;
	list-style:none;
	padding: 5px 10px;
}

.product-content {
	width: 97%;
	padding: 8px;
	background-color: #f6f6f6;
	border: 1px #ccc solid;
	margin: 0 0 25px 0;
	overflow: auto;
	position: relative;
}



a.button:link {
	padding: 5px;
	color: #fff;
	text-decoration: none;
	background-color: #3181c5; background-image: url('images/bg-button-ind-off.gif'); background-repeat: repeat-x;
	margin: 5px 0 0 0;
	font-weight: bold;
	position: absolute;
	bottom: 10px;
	left: 10px;
}
a.button:visited {
	padding: 5px;
	color: #fff;
	text-decoration: none;
	clear: both;
	background-color: #3181c5; background-image: url('images/bg-button-ind-off.gif'); background-repeat: repeat-x;
	margin: 5px 0 0 0;
	font-weight: bold;
	position: absolute;
	bottom: 10px;
	left: 10px;
}
a.button:hover {
	padding: 5px;
	color: #fff;
	text-decoration: none;
	clear: both;
	background-color: #3181c5; background-image: none;
	margin: 5px 0 0 0;
	font-weight: bold;
	position: absolute;
	bottom: 10px;
	left: 10px;
}
a.button:active {
	padding: 5px;
	color: #fff;
	text-decoration: none;
	clear: both;
	background-color: #3181c5; background-image: none;
	margin: 15px 0 0 0;
	font-weight: bold;
	position: absolute;
	bottom: 10px;
	left: 10px;
}




	
	a.button-back:link {
		padding: 5px;
		color: #fff;
		text-decoration: none;
		background-color: #ff7300; background-image: url('images/bg-button-ind-off.gif'); background-repeat: repeat-x;
		margin: 5px 0 0 0;
		font-weight: bold;
		float: right;
	}
	a.button-back:visited {
		padding: 5px;
		color: #fff;
		text-decoration: none;
		clear: both;
		background-color: #ff7300; background-image: url('images/bg-button-ind-off.gif'); background-repeat: repeat-x;
		margin: 5px 0 0 0;
		font-weight: bold;
		float: right;
	}
	a.button-back:hover {
		padding: 5px;
		color: #fff;
		text-decoration: none;
		clear: both;
		background-color: #ff7300; background-image: none;
		margin: 5px 0 0 0;
		font-weight: bold;
		float: right;
	}
	a.button-back:active {
		padding: 5px;
		color: #fff;
		text-decoration: none;
		clear: both;
		background-color: #ff7300; background-image: none;
		margin: 5px 0 0 0;
		font-weight: bold;
		float: right;
	}


.small-image {
	float: right;
	border: 1px #ccc solid;
	height: 100px;
	width: 100px;
}

.big-image {
	float: right; 
}

.product-info {
	float: left; 
	margin-top: 10px;
}

.product-name {
	float: left; 
	font-size: 18px;
	font-weight: bold;
	color: #d04e00;
	letter-spacing: -1px;
	margin: 7px 15px 0 0; padding: 0;
}

.name {
	color:#ea5200;
	font-size: 18px;
	margin: 0 0 5px 0; padding: 0;
	font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.orange-button { 
	padding: 5px;
	color: #fff;
	text-decoration: none;
	margin: 5px 0 0 0;
	font-weight: bold;
	position: absolute;
	bottom: 10px;
	left: 10px;
	float: left;
}

.price {
	color: red;
	font-style: italic;
	font-size: 12px;
	font-weight: bold;
	margin: 0; padding: 0;
}

.white-button {
	border: 1px #eee solid;
	margin: 0 auto;
}

.small {
	margin-top: 5px;
	text-align: center;
	font-size: 9px;
}

.item-number {
	margin: 0 0 5px 0;
	text-align:left;
	font-size: 9px;	
}

.enlarge {
	clear: right;
	float: right;
	margin: 0 25px 0 0; padding: 0;
	font-weight: bold;
	color: #fb7000;
	cursor: pointer;
}

.google {
	margin-left: 5px;
}

.google-right {
	margin-left: 15px;
}

.col-spacer {
	margin: 0 0 10px 0;
}

.google {
	margin-top: 5px;
}
