@import "reset.css";
@import "shop.css";
@import "navigation.css";
@import "forms.css";


/* The idea of Progressive Enhancement rather than Graceful Degradation allows us to use CSS3 features (the visual ones at least), with this in mind I've developed this using features such as text-shadow, border-radius, box-shadow etc. */

body {
background:#7b7b7b url(/assets/images/structure/background.png) top left repeat-x;
color:#6e6e6e;
font-family:Tahoma,Arial,Helvetica,sans-serif;
font-size:100%;
}

#wrapper {
margin:0 auto;
padding:10px;
width:980px;
font-size:0.75em;
}

#sold_out_message {
	color:#f00;
	font-weight:bold;
	font-size:1.6em;
}

#zoomIcon {
	text-indent:-9999px;
	width:85px;
	height:89px;
	overflow:hidden;
	background:url(/assets/images/icons/zoom.png) top left no-repeat;
	position:absolute;
	top:50%;
	left:50%;
	margin-top:-42px;
	margin-left:-42px;
	display:none;
}

.right a.fancy:hover #zoomIcon {
	display:block;
}

.right a.fancy {
	position:relative;
	display:block;
}

img.details {
	display:block;
}


.content {
width:100%;

}

p.content,
h3.content {
margin:0 0 15px;
padding:0;
}

p {
margin:0 0 10px;
}

h1 {
color:#fff;
font-size:1.50em;
font-weight:normal;
margin:5px 0 10px;
}

h2 {
color:#fff;

margin:0 0 10px;
}

h3 {
color:#fff;
font-size:1.25em;
margin:0 0 10px;
}

a {
color:#D60216;
text-decoration:none;
}

a:hover {
color:#801212;
text-decoration:underline;
}

/*-----------------------------------------------header----------------------------------------*/
.header {
position:relative;
width:980px;
margin:0 0 5px 0;
}

.header #phoneNumber {
	position:absolute;
	top:0;
	right:0;
	font-size:2.5em;
	color:#fff;
	text-shadow:0 1px 0 rgba(0,0,0,0.5);
	font-family:Helvetica, Arial, sans-serif;
	font-weight:bold;
}

.header .logo img {
	float:left;

}


/*-----------------------------------------------login----------------------------------------*/

.header #login,
.header #loggedin {
float:right;
margin:54px 0 10px;
}
.header #loggedin {
	color:#FFFFFF;
	float:right !important;
	position:relative;
	right:43px;
	top:4px;
	margin:0;
}

.header #login a {
color:#fff;
text-shadow:0 1px 0 rgba(0, 0, 0, 0.5);
border:1px solid #fff;
background:url(/assets/images/structure/btnBg.png) top left repeat-x;
background-color:#99be39;
width:102px;
height:23px;
display:block;
float:left;
margin:0 10px 0 0;
font-weight:bold;
text-align:center;
line-height:19px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
border-radius:4px;
}

.header #login a.login {
	background-color:#fb031e;
}

.header #login a:hover {
	text-decoration:none;
	background-position:bottom left;
}
	
/*----------------------------------------------basket------------------------------------*/
#basket {
	float:right;
	margin:28px 0 0;
	padding:7px;
	position:relative;
	font-weight:bold;
	*width:200px;
}

#basket a {
	color:#fff;
	text-shadow:0 1px 0 rgba(0, 0, 0, 0.5);
	background:url(/assets/images/structure/basket.png) right center no-repeat;
	padding:25px 55px 10px 0;
	display:block;
	float:right;
	width:auto;
}



/*----------------------------------------------footer-------------------------------------------*/
#footer {
background:#868686 url(/assets/images/structure/footBg.png) top left repeat-x;
-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;
height:90px;
border:1px solid #b4b4b4;
border-bottom-color:#676767;
border-width:1px 0;
font-size:0.92em;
margin-top:25px;
padding:10px;
color:#fff;
line-height:14px;
}

	#footer h3 {
		margin:0;
		font-size:1em;
	}

	#footer form {
		width:392px;
		float:left;
		padding:0 0 0 92px;
		background:url(/assets/images/structure/newsletters.png) top left no-repeat;
		height:88px;
	}
	
		#footer form img {
			float:left;
			margin:0 10px 0 0;
		}
		
		#footer form input {
			float:left;
			width:221px;
			margin:0 10px 0 0;
		}
		
		#footer form input[type="submit"],
		#footer form input.btn {
			color:#fff;
			text-shadow:0 1px 0 rgba(0, 0, 0, 0.5);
			border:1px solid #fff;
			background:url(/assets/images/structure/btnBg.png) top left repeat-x;
			background-color:#99be39;
			height:23px;
			display:block;
			width:120px;
			float:left;
			margin:0 10px 0 0;
			font-weight:bold;
			text-align:center;
			padding:0 7px 4px;
			letter-spacing:1px;
			-moz-border-radius:4px;
			-webkit-border-radius:4px;
			border-radius:4px;
		}
		
	#footer #findUs {
		padding:0 0 0 10px;
		background:url(/assets/images/structure/footSeperator.png) top left no-repeat;
		float:left;
		height:89px;
		width:227px;
	}
	
	#footer #findUs a[href $='.pdf'] {
		padding-left:15px;
		background:url(/assets/images/icons/pdf.png) left center no-repeat;
	}
	
	#footer #findUs a[href $='/location.php'] {
		padding-left:15px;
		background:url(/assets/images/icons/google.png) left center no-repeat;
	}
	
	#footer #access {
		padding:0 0 0 10px;
		background:url(/assets/images/structure/footSeperator.png) top left no-repeat;
		float:left;
		height:89px;
	}

#footer a {
color:#fff;
}

#footer a:hover {
text-decoration:underline;
}

ul#requiredLinks {
	float:right;
	margin:10px 0 0 0;
}

ul#requiredLinks li {
	float:left;
	margin:0 10px;
}

ul#requiredLinks li a {
	color:#fff;
	font-weight:bold;
}

/*----------------------------------------------paging------------------------------------------*/
ul.paging {
border-top:1px solid #e2e2e2;
margin-right:4px;
}

ul.paging li {
float:left;
}

ul.paging li a {
background:#e2e2e2;
color:#D60216;
display:block;
margin-left:1px;
margin-top:10px;
padding:3px 5px;
text-decoration:none;
}

ul.paging li a:hover {
background:#fff;
}

ul.paging li a.active,
ul.paging li.prev a,
ul.paging li.next a {
background:#D60216;
color:#fff;
font-weight:bold;
text-shadow:0 1px 0 rgba(0, 0, 0, 0.5);
}

ul.paging li.prev {
	margin:0 10px 0 0;
}
ul.paging li.next {
	margin:0 0 0 10px;
}



/*----------------------------------------------Breadcrumb------------------------------------------*/
ul#breadcrumb {
margin:10px 0 0;
width:100%;
font-size:0.9em;
font-weight:bold;
}

ul#breadcrumb li {
	float:left;
	color:#b6b6b6;
	padding:0 0 5px;
	margin:0 10px 0 0;
}

ul#breadcrumb li.areHere {
	width:241px;
	text-align:right;
	padding:0 0 5px;
	margin:0 4px 0 0;
}


ul#breadcrumb li a {
color:#fff;
text-decoration:none;
}



.basketnav {
float:left;
margin-bottom:10px;
width:100%;
}

.basketnav a:first-child {
border-left:1px solid #878787;
}

.basketnav a {
background:url(../images/breadcrumb.gif) no-repeat top right;
color:#fff;
display:block;
float:left;
font-weight:bold;
height:31px;
line-height:31px;
margin:0 -16px 5px 0;
padding:0 64px;
text-decoration:none;
	
}

/*-----------------------------------------------review-------------------------------------------
 no images to edit,
 just change ".stars .color" background color to change star colour*/
.stars {
height:17px;
position:relative;
width:100px;
}

.stars img {
position:absolute;
z-index:2;
}

.stars .color {
background:#f3a92e;
height:17px;
position:absolute;
z-index:1;
}

.rating {
font-weight:bold;
margin:0 4px 0 0;
}

.review {
border-bottom:1px solid #d2d1d1;
padding:10px;
}

.leftarea {
width:241px;
border-top:2px solid #000;
padding:10px 0 0 0;
}

#shopcontent {
border-top:2px solid #767676;
float:left;
line-height:16px;
margin-left:4px;
_margin-left:2px;
width:735px;
padding:10px 0 0 0;
overflow:hidden;
}

#plainContent {
	background:#fff url(/assets/images/structure/contBg.png) 0 0 repeat-x;
	border:2px solid #000;
	-moz-border-radius:8px;
	-webkit-border-radius:8px;
	border-radius:8px;
	padding:10px;
	color:#000;
	margin:0 0 10px 0;
	width:711px;
	position:relative;
}

#plainContent h1 {
	color:#d60216;
	font-family:Arial,Helvetica,sans-serif;
	margin:0 0 15px;
	text-shadow:0 1px 0 #F0F0F0;
	border-bottom:1px solid #373737;
	padding:0 0 7px;
}

/*----------------------------------------------right hand column------------------------------------------*/
.content .right_col {
display:block;
float:right;
margin:0 2px 0 15px;
text-align:center;
width:186px;
}

.content .right_col .feature {
background-color:#f0f9ff;
margin:0 0 5px;
padding:10px;
width:166px;
}

/*----------------------------------------------styles in templates------------------------------------------*/
.deliverytop {
background:#bbe0f4;
color:#526066;
padding:2px;
}

.deliverymiddle {
background:#e1eef4;
border-left:1px solid #fff;
border-top:1px solid #fff;
color:#526066;
padding:2px;
}

.newsthumb {
float:right;
padding-bottom:5px;
padding-left:10px;
padding-top:5px;
}

.small {
color:#98918d;
float:left;
font-size:90%;
margin-bottom:8px;
}

.small1 {
color:#98918d;
float:left;
font-size:90%;
}

.buttonwrap {
color:#507990;
float:right;
width:500px;
}

a.button {
background:#a19e9b;
color:#fff;
float:right;
margin-left:3px;
margin-top:0;
padding:3px;
text-align:center;
text-decoration:none;
}

a.button:hover {
background:#ccc;
}


.rightside {
	width:200px;
	float:left;
	margin:0 0 0 16px;
}

.rightlist {
background:#ccc;
color:#fff;
text-align:left;
width:210px;
float:left;
}

.rightlist h3 {
color:#888;
margin:10px;

}

.rightlist ol.links {
color:#0d81b3;
font-size:90%;

}

.rightlist ol.links li {
	
}

.rightlist ol.links li a {
	color:#888;
	line-height:17px;
	padding:5px 10px;
	display:block;
}

.rightlist ol.links li.even {
	background:#eee;
}




.rightlist .downloads a {
background-image:url(/images/pdf.gif);
background-repeat:no-repeat;
color:#0d81b3;
line-height:17px;
margin-bottom:4px;
padding-bottom:4px;
padding-left:20px;
text-decoration:none;
}

.pages {
color:#666;
float:left;
padding-top:5px;
width:100px;
}

.cpages-img {
margin-bottom:10px;
}

.linkstop {
background:#bbe0f4;
color:#526066;
padding:5px;
}

.linksmiddle {
background:#f5f5f5;
border-left:1px solid #fff;
border-top:1px solid #fff;
color:#526066;
padding:5px;
}

.linksmiddle a {
color:#005174;
}

.linksmiddle a:hover {
color:#888;
}

.btn1 {
background-color:#dfdfdf;
color:#666;
width:80px;
}



.linkswrap {
clear:both;
float:left;
margin-bottom:20px;
width:80%;
}

.comments {
background:#fef2dd;
padding:10px;
}

.comments a {
color:#fa6400;
float:left;
}

.comments a:hover {
color:#fb6602;
}

.comments .commentbutton {
background:#fb8a02;
border:1px solid #fb8a02;
color:#fff;
float:right;
font-size:100%;
padding-bottom:2px;
padding-top:2px;
width:100px;
}

.comments .commentbutton a:hover {
background:#fb6602;
}

.comments .line {
border-bottom:1px dotted #f42b6e;
height:1px;
width:100%;
}

.comments label {
float:left;
width:100px;
}

.comments input {
color:#666;
float:left;
font-size:100%;
margin-bottom:2px;
width:230px;
}

.comments textarea {
color:#666;
width:230px;
}

.errortop {
color:red;
float:right;
font-size:100%;
margin-bottom:3px;
margin-top:0;
text-align:left;
width:292px;
}

.date {
font-size:90%;
font-weight:bold;
}

/*------------------------sitemap---------------------*/
ul.sitemap a {
text-decoration:none;
}

ul.sitemap li ul li {
font-weight:normal;
padding:5px 5px 5px 20px;
}

ul.sitemap li {
font-weight:bold;
padding:2px;
text-indent:3px;
}

ul.sitemap li ul {
margin:10px 0 0;
}




.leftarea #login a:hover,
.leftarea #loggedin a:hover{
color:#06749d;
}

.basketnav a:hover,
.basketnav a:hover,
.basketnav a.active {
background:url(../images/breadcrumb2.gif) no-repeat top right;
color:#888;
}

.deliverytable,
.linkstable {
border-bottom:1px solid #fff;
border-right:1px solid #e1eef4;
}

.rightlist ul.downloads,
.rightlist ul.links {
color:#0d81b3;
font-size:90%;
list-style:none;
margin:0 0 20px;
padding:0;
}


/*-----------------------------Slideshow--------------------------------*/

#shopcontent #s3slider {
   width: 774px; /* important to be same as image width */
   height: 190px; /* important to be same as image height */
   position: relative; /* important */
   overflow: hidden; /* important */
}

#shopcontent #s3sliderContent {
   width: 774px; /* important to be same as image width or wider */
   position: absolute; /* important */
   top: 0; /* important */
   margin-left: 0; /* important */
}

#shopcontent #s3sliderContent img {
	width:774px;
}

.with_right_col #s3sliderContent img {
	width:538px !important;
}

.with_right_col #s3slider {
   width: 538px !important; /* important to be same as image width */
   height: 190px; /* important to be same as image height */
   position: relative; /* important */
   overflow: hidden; /* important */
}

.with_right_col #s3sliderContent {
   width: 538px !important; /* important to be same as image width or wider */
   position: absolute; /* important */
   top: 0; /* important */
   margin-left: 0; /* important */
}

.s3sliderImage {
   float: left; /* important */
   position: relative; /* important */
   display: none; /* important */
}

.s3sliderImage div {
   position: absolute; /* important */
   font: 12px Arial, Helvetica, sans-serif;
   background:url(../images/half.png);
   color: #fff;
   display: none; /* important */
   width:120px;
   height:190px;
   right: 0;
   top: 0;
   /*left:0;
   bottom:0;*/

   /*
       use top/bottom/right/left to position the text div and width and height for it's shape
   */
}

.s3sliderImage div span {
	display:block;
	padding: 10px 13px;
}


/*---------------------------homepage features-----------------------------------*/

.features {
	margin:0 0 0 -1%;
}
.feature {
	float:left;
	background:#ccc;
	color:#fff;
	width:30%;
	padding:6px;
	margin:0 0 0 1%;
}
.with_right_col .feature {
	padding:6px !important;
}


/*----------------------------news---------------------------*/

div.newsDiv {
	clear:both;
	margin:0 0 20px;
	padding:0 0 20px;
	border-bottom:1px dotted #a1a1a1;
	line-height:19px;
}

div.newsDiv a.newsImg img {
	float:left;
	margin:0 10px 8px 0;
	-moz-box-shadow:0 2px 5px rgba(0,0,0,0.5);
	-webkit-box-shadow:0 2px 5px rgba(0,0,0,0.5);
	box-shadow:0 2px 5px rgba(0,0,0,0.5);
}

div.newsDiv img.newsImg {
	float:right;
	margin:0 0 10px 10px;
	-moz-box-shadow:0 4px 8px rgba(0,0,0,0.8);
	-webkit-box-shadow:0 4px 8px rgba(0,0,0,0.8);
	box-shadow:0 4px 8px rgba(0,0,0,0.8);
}

div.newsDiv a.newsImg:hover img {
	-moz-box-shadow:0 4px 8px rgba(0,0,0,0.8);
	-webkit-box-shadow:0 4px 8px rgba(0,0,0,0.8);
	box-shadow:0 4px 8px rgba(0,0,0,0.8);
}

div.newsDiv h2 {
	font-family:Arial,Helvetica,sans-serif;
	margin:0 0 15px;
	font-size:1.2em;
}

div.newsDiv a {
	color:#D60216;
}


.imgLeft {
	float:left;
}

.imgRight {
	float:right;
	clear:both;
}