/********************************** General styles applying to whole page **********************************/
body {
	margin : 0; 
	font-size : 0.8em; 
	color : #444; 
	font-family : Arial, Helvetica, sans-serif; 
	background:  #B4021F url("/images/shadow.jpg");
	background-position:center top;
	background-repeat:repeat-y;
}
p {margin-top : 2px; margin-bottom : 8px;} 
a {font-size: 0.9em; text-decoration: none; color:  #B4021F; font-weight: bold;}
div.justified {text-align:justify;}
img {border: 0; margin: 0;}
.clearing {clear : both; height : 0;} 
table tr td {vertical-align: top;}



/********************************** Layout classes **********************************/
/*The widthfix div surrounds everything*/
#widthfix  {position: relative; width: 960px; margin-left: auto; margin-right: auto;} 
/*The underheader div surrounds the inner wrapper and the footer*/
#underheader {
	position : absolute;
	width : 960px;
	top : 210px;
	left : 50%;
	margin-left : -480px;
	border-right: 1px  dotted #99FF00;
	border-left: 1px  dotted #99FF00;
	background-color:#FFFFFF;
	background:  white url("/images/side-bar-menu-red.gif") repeat-y left;
} 
/*pete added - contains the #siderbar and #inner and allows for a right col*/
/*The innter wrapper surrounds the left, central and right columns*/
#inner-wrapper {float : left; width : 760px; vertical-align : top;} 
#inner {float : right; width : 560px; vertical-align : top; min-height : 350px; background-color: #ffffff; padding: 0 0 20px 0;} 



/********************************** Header classes **********************************/
/*The header upper is for the flags, basket and checkout links*/
#header-upper {
	position : absolute;
	width : 960px;
	left : 50%;
	margin-left : -480px;
	height : 35px;
	border-right: 1px  dotted #99FF00;
	border-left: 1px  dotted #99FF00;
	text-align:right;
	background:  white url("/images/cart.gif") ;
	background-repeat:no-repeat;
	background-position:top right;
	padding: 0 0 5px 0;
} 
#header-upper-left {float: left; margin: 8px 0 0 5px;}
#header-search {float: right; margin: 8px 25px 0 0; font-weight: bold; color: #B4021F;}
#header-search form {margin: 0; padding: 0; display: inline;}
#header-search input {width: 150px; border: 1px solid #999999; height: 16px; padding:0;}
#header-search input.button {width: auto; font-weight: bold; background: white; color: #B4021F; font-size: 90%; cursor: pointer; height: 18px; padding: 0 2px 0 2px;}
#basket {float: right; margin: 0 30px 0 0; font-size: 1.1em;}
#quicklinks {float: left;}
#header-upper ul {margin: 14px auto 6px auto; padding: 0 13px 0 0;   }
#header-upper ul li {font-size: 0.8em;display: inline; color: #000000; padding: 0 10px 0 10px; border-right: 1px solid #958132;}
#header-upper ul li.last {font-size: 0.8em;display: inline; color: #000000; padding: 0 10px 0 10px; border: 0;}
#header-upper ul li.hide {font-size: 0.8em;display: inline; color: #000000; padding: 0 10px 0 10px; border: 0; display: none;}
#header-upper ul li a:link{color: #000000;  text-decoration:none;}
#header-upper ul li a:visited {color: #BAE019; text-decoration:none; }
#header-upper ul li a:hover {color: #BAE019;  text-decoration:underline;}
#header-upper ul li a:focus {color: #BAE019;  text-decoration:underline;}
#header-upper ul li a:active {color: #BAE019;  text-decoration:underline; }
/*The header lower is for the logo, central Flash banner and featured product*/
#header-lower {
	position : absolute;
	width : 960px;
	top : 35px;
	height : 175px;
	left : 50%;
	margin-left : -480px;
	background-color : #fff;
	padding:0 0 0 0;
	border-top: 1px  dotted #B4021F;
	border-left: 1px  dotted #99FF00;
	border-right: 1px  dotted #99FF00;
}
/*
#header-lower ul {margin: 0 auto 6px auto; padding: 0 5px 0 0;   }
#header-lower ul li {font-size: 0.8em; display: inline; color: #000000; padding: 0 10px 0 10px; border-right: 1px solid #825800;}
#header-lower ul li.last {font-size: 0.8em;display: inline; color: #000000; padding: 0 10px 0 10px; border: 0;}
#header-lower ul li.hide {font-size: 0.8em;display: inline; color: #000000; padding: 0 10px 0 10px; border: 0; display: none;}
#header-lower ul li a:link{color: #000000;  text-decoration:none;}
#header-lower ul li a:visited {color: #444444; text-decoration:none; }
#header-lower ul li a:hover {color: #825800;  text-decoration:underline;}
#header-lower ul li a:focus {color: #825800;  text-decoration:underline;}
#header-lower ul li a:active {color: #847d46;  text-decoration:underline; }
/* remove the fprmatting from the flags
#header-lower ul li.last a:link,
#header-lower ul li.last a:visited,
#header-lower ul li.last a:hover, 
#header-lower ul li.last a:focus, 
#header-lower ul li.last a:active {text-decoration:none;}
*/
#header-left {float:left;}
#header-middle {float:left; padding-top:5px; width:600px; overflow: hidden; height:200px;}
#header-right {margin: 5px 5px 0 0; float:right; width:178px; height:165px; padding: 0 0 0 0;
 border:1px dotted #B4021F;}/*  
 -moz-border-radius:16px;  
 -webkit-border-radius:16px;  
 border-radius:16px;  } */

/*Added by Paul for featured product 5/7/2010*/
#featured-product {width:178px; height: 163px; margin: 10px 0 0 10px;}
#featured-product h4 {margin: 0; padding: 0 0 5px 0; font-size: 14px; width: 70px; overflow: hidden; color: #99cc00;}
#featured-product p {font-size: 12px; margin: 0; padding:0; color: #99cc00; font-weight: bold;}
#featured-product a {color: #99cc00; text-decoration: none;}
#featured-product img {float: right; border: none; padding-right: 15px;}



/********************************** Left column classes **********************************/
#sidebar {background-color : #B4021F; float : left; width : 166px; color:#fff; padding-top:10px;
} 
#sidebar p  {margin-top : 2px; margin-left : 5px; margin-bottom : 8px; font-size:0.9em;} 
#sidebar-top {
/*background-image: url("/images/side-bar-top-red.gif"); background-repeat: no-repeat;
*/
 height:30px;
background-color : #B4021F;
 } 
 
#sidebar-contact-details a:link {color:#fff; font-weight:normal; text-decoration:underline; font-size: 1.1em; } 
#sidebar-contact-details a:visited {color:#fff; font-weight:normal; text-decoration:underline; font-size: 1.1em; }
#sidebar-contact-details a:hover {color:#fff; font-weight:normal; text-decoration:none; font-size: 1.1em; }

 
div.sidebar-title {padding-top : 6px; margin-left : 5px; font-size:1.4em; color:#FFFFFF; font-weight:bold;} 
#sidebar-company {
/*background-image: url("/images/side-bar-top-red-company.gif");
	background-repeat: no-repeat;
	background-color:#FFFFFF;
	*/
	height:30px;
	padding: 10px 0 0 0;
} 
ul.mainnav {
	list-style: none; 
	margin: 0 0 0 0; 
	padding: 0 0 0 0; 
	font-family: arial, helvetica, sans-serif; 
	font-weight: normal;
	text-align:left;
	background-color:#B4021F;
	width: 166px; /*///////// I added the width in the line below to fix the IE/Firefox problem ////////////*/
	font-size : 0.9em; 
}
ul.mainnav li a {text-transform: capitalize;} /*added by Paul to make them normal instead of all caps 5/7/2010*/
/*///////// width should have the padding subtract ////////////*/
ul.mainnav li a {padding: 4px 0 4px 4px; margin:0 0 0 0;}
ul.mainnav li a:link, ul.mainnav li a:visited {display: block; text-decoration: none; width: 162px; padding: 4px 0 4px 4px; color: #fff;}
ul.mainnav li {background-color:#B4021F; border-left: 0px solid #999; margin:0 0 0 0; padding: 0 0 0 0; width: 166px; border-bottom: 1px solid #AE8686;}
ul.mainnav li a:hover {color: #333; background-color:#fff;}
/* Suckerfish menu from http://www.htmldog.com/articles/suckerfish/dropdowns/.  The sfhover class is produced by Javascript so it works for IE too*/
#sfnav, #sfnav ul {list-style-type: none; margin: 0; padding: 0;} /*no bullet points*/
#sfnav a {width: 160px; display: block;} /*for the links, specified absolutely as we have a fixed width*/
#sfnav ul a {width: 160px;} /*the drop down menus can be wider*/
#sfnav li {float: left; width: 166px;} /*so Opera doesn't throw a wobbly*/
#sfnav ul li {width: 166px;} /*do this for Opera as well, to make the drop down menus wider*/
#sfnav li ul {position: absolute; width: 166px; left: -999em;} /*sub menus are shunted left*/
#sfnav li ul {margin: -1.9em 0 0 160px;} /*move sub sub menus out to the right*/
/*The next two lines start the menus off screen and move then on screen into the right place when the mouse is*/
/*hovering. "auto" works in Opera, sfhover is for IE. This caters for four levels of drop downs.*/
#sfnav li:hover ul ul, #sfnav li:hover ul ul ul, #sfnav li:hover ul ul ul ul,
	#sfnav li.sfhover ul ul, #sfnav li.sfhover ul ul ul, #sfnav li.sfhover ul ul ul ul {left: -999em; }
#sfnav li:hover ul, #sfnav li li:hover ul, #sfnav li li li:hover ul, #sfnav li li li li:hover ul,
	#sfnav li.sfhover ul, #sfnav li li.sfhover ul, #sfnav li li li.sfhover ul,
	#sfnav li li li li.sfhover ul {left: auto;}
#sfnav li:hover, #sfnav li.sfhover {background-color: #fff;} /*because the width causes a:hover not to fill the whole box with white sometimes*/
/*Background colour for sub menus*/
#sfnav li ul {background-color: #B4021F; border:1px solid white;}



/********************************** Central content area styles **********************************/
h1 {font-size : 1.2em; margin-bottom : 10px; margin : 30px 0 20px 0; color : #B4021F; border-bottom: 1px solid #B4021F; width: 540px;}
h2 {font-size : 1.1em; margin-bottom : 5px; margin-top : 15px; color : #B4021F;}
body.page_home_articles h2 {margin-top: 20px;}
h3 {margin: 5px 0 2px 0; font-size: 0.9em;}
body.page_home_articles h3 {margin-top: 20px;}
h4 {margin: 5px 0 4px 0px; font-size: 0.8em;} 
h3 a {font-size: 1em;}
/*text clases - not sure where they are used*/
#text-left {margin: 10px 0 0 0 ; float:left; width:260px; background-color:#fff;} 
#text-right {margin: 10px 0 0 0 ; float:right; width:260px; text-align:left; background-color:#fff;}
/*bulleted list classes - not sure where they are used*/
ul.bullet_points {list-style-type: none; line-height: 1.7; padding: 0; margin: 8px 5px 15px 10px; font-size: 0.9em;}
li.bullet_points {font-size:0.9em; background:url(/images/bullet-text.gif) no-repeat 0 .2em; padding: 0 0 10px 22px; font-weight:bold; font-style:italic;} 
/*the next couple are only for the home page*/
table.section-thumbs {margin: 10px 0 -20px 0 ; text-align:center;}  /*-10px because the h1 has 30px of top margin*/
td.section-thumbs-image-home { padding: 10px 0 20px 0 ;}
/*td.section-thumbs-header-home-icons {text-align:center;}*/
/*these are only on section and product pages*/
table.subsections td {width: 50%; padding: 8px; border: 1px solid #cccccc;}
table.subsections a:link {color: #B4021F; font-size: 0.8em;} 
table.subsections a:visited {color: #B4021F; font-size: 0.8em;}
table.subsections a:hover {color: #B4021F; font-size: 0.8em;}
td.products_with_line {color:#333; font-weight: bold; padding: 4px 2px 4px 2px; vertical-align:top; border-bottom: 1px solid #ccc; empty-cells:show;}
td.products {background-color: #fff; color:#333; font-weight: normal; padding: 4px 2px 4px 2px; font-size: 0.9em;}
.basketbutton {color: #B4021F; border: 1px solid #999; padding: 2px; margin: 0 0 0 4px; background-color:#fff; font-size: 0.9em; text-align:center; font-weight: bold;}
/*stockist search classes*/
table.stockist_search {width: 440px; background-color: #FFF; font-size: 9px; color:#333; font-weight: bold;}
table.stockist_search tr td {border: none;}
td.stockist_search_flag {width: 76px;}
td.stockist_search_text {padding: 4px; text-align:left; vertical-align:middle;}
td.stockist_search_box {padding: 2px; vertical-align:middle;}
td.stockist_search_button {padding: 4px; vertical-align:middle;}
/*styles for the management area*/
table tr.header td {font-weight: bold;}
table tr.spacer td {height: 10px;}
/*added by Paul 16/11/2009 for the reivews*/
tr.reviewreply {background-color: #eeeeee;}
tr.reviewreply td {padding: 5px 8px 15px 0;}
div.productreview {display: none; position: absolute; width: 300px; border: 1px solid #999999; margin: -20px 0 2px 100px; padding: 0 0 5px 0; background: white; height: 300px; overflow-y: scroll;}
div.productreview a.productreviewclose {float: right; padding: 2px 5px;} /*the close button*/
div.productreview div {padding: 2px; border: 1px solid #999999; margin: 5px; clear: both;} /*the inner div with the border*/
td.products_with_line div.productreview p {font-weight: normal; font-size: 100%; padding: 0 5px 0 5px; margin: 0;}
div.productreview div img {width: 65px; padding: 5px;}
div.productreview div img.stars {padding: 0;} /*the stars icons*/
div.productreview h4 {margin:0; padding: 5px 5px 0 5px; font-size: 100%; color: #B4021F;}
div.productreview h5 {margin:0; padding: 5px 5px 0 5px; font-size: 100%; color: #333333;}
a.productreviewlink {border: 1px solid #999999; padding: 2px; color: #333333;}
/*Order reviews in home/reviews.php, added 29/12/2009*/
div.orderreviews {}
div.orderreviews div {padding: 2px; border: 1px solid #999999; margin: 5px; clear: both;} /*the inner div with the border*/
td.products_with_line div.productreview p {font-weight: normal; font-size: 100%; padding: 0 5px 0 5px; margin: 0;}
div.orderreviews h4 {margin:0; padding: 5px 5px 0 5px; font-size: 100%; color: #B4021F;}
div.orderreviews h5 {margin:0; padding: 5px 5px 0 5px; font-size: 100%; color: #333333;}
a.productreviewlink {border: 1px solid #999999; padding: 2px; color: #333333;}
ul.bullet_points {list-style-type: square; line-height: 1.7; padding: 0; margin: 8px 5px 15px 20px; font-size: 1.0em;}
li.bullet_points {background-position: 0 .2em; padding-left: 12px; font-weight: normal;}

div.home-section-thumb-names {
margin: 5px 0 0 0;
}

/*styles for promotion pages*/

td.label {
padding: 5px 0 5px 0;}

#error {color: red;}

.required, #error {color: red;}

label.valid {
  width: 24px;
  background: url(valid.png) center center no-repeat;
  display: inline-block;
  text-indent: -9999px;
}

label.error {
  padding-left: 5px;
  display: inline-block;
color: red;
}

table.promotion-products  {
margin: 20px 0 0 0;
}

table.promotion-products td {
padding: 4px 0 4px 0;
background-color:#fff;
font-size: 0.9em;
margin: 20px 0 0 0;
}


td.section-name {
font-weight:bold;
color : #B4021F;
font-size: 1.1em;
}

table.form-table  {
margin: 20px 0 0 0;
}


/********************************** Right column classes **********************************/
#rightmenu {width: 185px; height: auto; margin: 0; display: inline; float: right; text-align: left; padding: 0;}
div.rhc-top {background-image: url("/images/rhc-box-top-red.gif"); background-repeat: no-repeat; height:20px; margin: 15px 0 0 0;} 
div.rhc-title {padding-top : 2px; margin-right : 7px; font-size:1.1em; color:#FFFFFF; font-weight:bold; text-align:right;} 
/*margin-right changed to 3px by Paul so border matches title image in rhc-top above, 5/7/2010*/
div.r-h-c {margin: 0 3px 5px 0; vertical-align: top; padding: 5px; border: 1px  dotted  #B4021F; border-top: none;}
div.r-h-c h3 {margin: 0; padding: 0; font-size: 14px; color: #99cc00;}
div.r-h-c p {margin: 0; padding: 0; font-size: 12px; color: #99cc00; font-weight: bold;}
div.r-h-c a {font-size: 12px; color: #99cc00; text-decoration: none; font-weight: bold;}
div.r-h-c input {margin-bottom: 5px; border: 1px solid #999999;}
div.r-h-c input.button {font-weight: bold; background: white; color: #B4021F; font-size: 90%; cursor: pointer;}
img.r-h-c {margin: 0 0 5px 0; vertical-align: top; padding: 5px 5px 5px 5px; border-left: 1px  dotted  #B4021F; border-top: none;}
img.r-h-c-box-top {margin-top: 10px;}
img.cards {margin: 5px 0 0 4px;}
img.flag {margin:0; border: 0; text-decoration: none; padding: 1px; border: 1px solid #B4021F;
}



/********************************** Footer clases **********************************/
#footer {
	font-size:0.9em;
	clear: both;
	border-top: 1px  dotted #fff;
	width : 960px;
	text-align : center;
	background-color : #B4021F;
	color : #fff;
	padding: 5px 0 15px 0;
	margin: 0 0 0 0;

} 
#footer a {text-transform: capitalize;} /*added by Paul to make them normal instead of all caps 5/7/2010*/
#footer  a:link {color:#fff; font-weight:normal;} 
#footer :visited {color:#fff; font-weight:normal;}
#footer :hover {color:#fff; text-decoration:none; font-weight:normal;}



/* Jquery Transition Classes Start/////////////////////////*/

ul#portfolio li img{
	border: 0px solid #CDCD06;
	padding: 0 0 0 0;
	margin: 0 0 0 0;
	}
	
	ul#portfolio  {margin: 0; 
padding: 0; 
list-style-type: none;
width: 100%;}
 ul#portfolio li {
/*centre the images by the following
width: 100%;*/
}
	
/* Jquery Transition Classes End/////////////////////////*/