@charset "utf-8";

/* ---------------main page structure -----------------*/
html {overflow-y:auto;}
body {padding: 0; font-family:"Lucida Grande","Trebuchet MS",Helvetica,Arial,sans-serif;  font-size:67.5%; background: url(/images/background.png) repeat-x; margin:0;}
div ul li span p {margin:0; padding:0;}
li {list-style-position:inside;}
p {margin-top:0.2em; margin-bottom:0.4em; line-height:1.4em;}
table {}
#reversetable table {color:#FFFFFF; border:0;}
#reversetable th {color:#66CC00; background:#000000;}

th {background:#91cc55; color:#FFFFFF; font-size:1.2em; padding:0.3em;}
h1 {font-size:1.8em; color:#888; margin:1em 0 1em 0; padding:0.3em 0 0.3em 0}
h2 {font-size:1.6em; color:#777; margin:1em 0 1em 0; padding:0.3em 0 0.3em 0}
h3 {font-size:1.4em; color:#666; margin:1em 0 1em 0; padding:0.3em 0 0.3em 0}
h4 {font-size:1.2em; color:#555; margin:1em 0 1em 0; padding:0.3em 0 0.3em 0}
td H3, td p {margin:0;}
form {display:inline;}
label {display:block; float:left; text-align:right; width:125px; margin:5px; clear:left;}
li {line-height:2em; margin-bottom:5px;}

img {vertical-align:middle; border:0;}
#search img {vertical-align:top;}
#search input {vertical-align:middle; margin-top:5px;}


a:link, a:visited, a:active{color:#174455; border-bottom:1px #6bab29 dotted; text-decoration:none;} 
a:hover{color:#6bab29}

a.white:link, a.white:visited, a.white:active {color:#FFFFFF; border-bottom:1px dotted #fff; text-decoration:none;}
a.white:hover{color:#eee;}

a.nolinkstyle:link, a.nolinkstyle:visited, a.nolinkstyle:active {border:0; text-decoration:none;}

#container {width:1000px; margin:auto; margin-bottom:20px;}

#containerallcontent{}

#containermain {
	width: 100%;
	float: right;
	margin-left: -225px;
	/*background:#FFFFFF;*/
	padding-top: 10px;
	border:0;

}

#containermain.whiteback {background:#FFFFFF;}

#containeronecol {
	width: 100%;
	float: right;
	margin-left: -225px;
	background:#FFFFFF;
	padding-top: 5px;
	border:0;
}

#content {
	margin-left:225px;
	padding-left:10px;
	padding-right:10px;

}
#contentnonav {
  	margin:10px; width:750px; padding:3px;
}
#content3 {
	margin-left:225px;
	padding-left:10px;
	padding-right:10px;
	width:590px;

}

#contentbasket {
	background:#fff;
	margin:0;
	padding:0;
}
#contentonecol {
	background:#fff;
	margin:0;
	padding:0;
}
#contentnocol {
	background:#fff;
	margin-left:0;
	padding-left:0;
}
#sidebar {
	width: 220px;
	float:left;
}

#alertoverlay{	
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100px;
	background-color: #000;
}

#alertcentre{
	position: absolute;
	left: 50%;
	overflow:visible;
	background:url(../images/background_alert.png) no-repeat top left;
	padding-left:70px;
	padding-top:30px;
	text-align:center;
}

#header {}
#footer {margin:auto; width:1000px; color:#fff; margin:auto; width:1000px; background:url(/images/background_footer_dark.png) repeat-y center;}
#footercontent { padding:20px;}
#footerbottom {margin:auto; width:1000px; background:url(/images/background_footer_dark_nodivide.png) repeat-y center; color:#FFFFFF; text-align:center; border-top:1px dotted #ddd; padding-bottom:10px;}
#footertrailer {margin:auto; width:1000px; background:url(/images/background_footer_bottom.png) no-repeat; height:148px;}

#footer a:link, #footer a:visited, #footer a:active, #footerbottom a:link, #footerbottom a:visited, #footerbottom a:active { color:#ccc; }
#footer a:hover, #footerbottom a:hover {color:#fff; }
#footer h2 {color:#CCCCCC;}

#topbar {font-size:9px; text-align:right; padding:3px;}

#history {padding:10px 3px 10px 3px;  border-top:4px solid #390; border-bottom:2px solid #bbb; background:#FFFFFF; clear:both;}
#navtrail {}

#product_description p {font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; font-size:1em; line-height:2em;}

#mainspecs table {font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; font-size:1em; line-height:2em; width:100%;}
#mainspecs td {width:30%; text-align:left; font-weight:bold; margin-right:15px; border-bottom:1px dotted #ddd;}
#mainspecs td + td {width:70%; text-align:left; font-weight:normal;}

#extspecs table {font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;}
#extspecs td {width:30%; text-align:left; font-weight:bold; margin-right:15px; border-bottom:1px dotted #ddd;}
#extspecs td + td {width:70%; text-align:left; font-weight:normal;}

#famproductlist {margin-bottom:20px;}

/*-----Flash ad banners for front page-----*/
#SubAdContainer {margin:auto; background:#FFF; text-align:center; padding-right:220px; z-index:-100;}
#AdContainer {clear:both; margin-top:2px; z-index:-100;}
#peelbanner {position:absolute; top:0; right:0; width:480px; height:480px; z-index:1;}
#peelbannerwrapper {position:absolute; top:0; right:0;}


/*----------------------KWICKS top menu------------------*/

#kwicks         { height:50px; list-style-type:none; margin:0; padding:0; float:right; }
#kwick li           { float:left; }
#kwick .kwick         { display:block; cursor:pointer; overflow:hidden; height:50px; width:66px; padding-top:20px; font-size:1.5em; }
#kwick .kwick span      { display:none; }


#kwick .button_contact {background:url(/images/background_button_contact_blue.gif) no-repeat; color:#FFFFFF;}
#kwick .button_login {background:url(/images/background_button_login_blue.gif) no-repeat; color:#FFFFFF;}
#kwick .button_help {background:url(/images/background_button_help_blue.gif) no-repeat; color:#FFFFFF; }
#kwick .button_search {background:url(/images/background_button_search_blue.gif) no-repeat; color:#FFFFFF;}
#kwick .button_account {background:url(/images/background_button_account_blue.gif) no-repeat; color:#FFFFFF;}
#kwick .button_forum {background:url(/images/background_button_forum_blue.gif) no-repeat; color:#FFFFFF; }
#kwick .button_basket {background:url(/images/background_button_basket_blue.gif) no-repeat; color:#FFFFFF; padding-top:20px; }

 
 /*-----------------Breadcrumb trail---------------------*/
 
#breadcrumb {font-size:1.5em; height:35px; border:1px solid #335566; background:#358ba8; color:#fff; margin-bottom:10px; paddding:0;}
#breadcrumb a {display:block; float:left; height:30px; padding:7px 20px 0 15px; background:url(../images/back_crumbtrail_arrow.png) top right no-repeat;}
#breadcrumb a:link, #breadcrumb a:visited, #breadcrumb a:active {color:#fff; border:0; text-decoration:none;}
#breadcrumb a:hover {background:url(../images/back_crumbtrail_arrow_hover.png) top right no-repeat;}

/* blog styles */

.blogentry {margin-bottom:15px; padding-bottom:5px; padding-left:60px;}
.blogdate {-moz-border-radius:5px; border-radius:5px; float:left; background:url(../images/icon_date.png); width:50px; height:50px; margin:0; margin-right:10px; margin-left:-60px; text-align:center; color:#fff;}
.blogmonth {font-size:1.1em;}
.blogday {font-size:2em;}
.blogtitle {font-size:1.4em; color:#336699;}
.blogcontent {font-size:1.2em; font-style:italic;}
.bloglink {text-align:right;}

 

#basketcontent h3 {color:#fff;}
#basketcontent a:link, #basketcontent a:visited, #basketcontent a:active {color:#fff;}
/*============hacks=====================*/
/*-----------this is the hack for the peekaboo IE6 problem-----------*/
* html .peekaboo {height: 1%;} /* for IE/Win */
*>html .peekaboo {height: auto;} /* for IE5/Mac */



/*-------------------suckerfish psuedo hover behaviours and stuff for the menus--------------*/
/*-----NAV wrapper so it appears over flash etc-----*/
#navwrapper {position:relative;z-index:99;}
#nav ul, #nav li, #nav dl, #nav dt, #nav dd {margin:0;padding:0;}

#nav li:hover div, #nav li.sfhover div { /* this sets the left value to auto (inherit) so it comes back into view */
	left: auto;
}

/* IE 7 fixes*/
#nav li:hover {
    position: static;
}
/* end IE 7 fixes */



.branditems a:link, .branditems a:visited, .branditems a:active{border:none; border-bottom:2px solid #fff; text-decoration:none;} 
.branditems a:hover {border-bottom:2px solid #356; color:#900;}
.branditems a{display: block;padding: 0.8em;background-color: #fff;color:#666;
	/*opera needs a width here but it screws up the menu elements */
}

.menuitems a:link, .menuitems a:visited, .menuitems a:active{border:none; border-bottom:2px solid #fff; text-decoration:none;} 
.menuitems a:hover {border-bottom:2px solid #356; color:#000;}

.menuitems a{display: block; padding: 0.8em;background-color: #fff; color:#666;
	/*opera needs a width here but it screws up the menu elements */
}



#nav a.navheading:link, #nav a.navheading:visited, #nav a.navheading:active{text-decoration:none;} 
#nav a.navheading {
	display: block;
	/*opera needs a width here but it screws up the menu elements */
	padding: 0.8em;
	color: #fff;
	border:0;
	border-left:2px solid #356;

}

#nav a.navheadinglast {border-right:2px solid #356;}

#nav a.navheading:hover {background:#fff; color:#666;}




/* #nav li ul li a:hover {background:#64300b;} find a way to keep the heading green and this is good */

#nav {
	float: left;
	width:100%;
	padding: 0;
	margin: 0;
	list-style: none;
	background: url(/images/menutest_nav_background.gif) repeat-x bottom;
	font-family: Trebuchet MS; font-size: 1em;

}


#nav ul {
	float: left;
	width:100%;
	padding: 0;
	margin: 0;
	list-style: none;
	text-transform:uppercase;
	z-index:10;
}
.menuitems {float:left;}
.menuitemheading {padding:5px; font-weight:bold; color:#333; border-bottom:1px dotted #666;}
.productcontainer {z-index:10;}

#nav li {
	float: left;
}

#nav li div {/* second-level list descriptions */
	position: absolute;
	left: -999em;
	color: White;
	float:left;
	display:inline;
	background:url(/images/menutest_background.png) no-repeat bottom left;
	padding-bottom:20px;
	width:550px /*if you dont have a width the fixed width backround image wont work*/
}

#nav ul.menuitems {/* second-level list descriptions */
	width:150px;
	float:left;
	font-size:10px;
}

#nav ul.branditems {/* second-level list descriptions */
	width:150px;
	float:left;
	font-size:10px;
}

#nav dt {border-bottom:2px solid #356; font-size: 12px; font-weight: bold; letter-spacing: +0.1em; line-height: 2em; width: auto;  color: #343434; text-transform:uppercase; } 
#nav dl {float:left; padding-left:5px;}
#nav dl.products {width:300px; padding-right:2px}
#nav dl.brands {width:150px; border-left: 1px solid #999; padding:0; padding-left:2px; }

		
#nav li:hover ul {
	left: auto;
}

#nav li dl ul li a {padding:0.5em; display:block; width:125px; background:#fff; }

#nav .newcat {background:url(/images/menutest_nav_newcat.png) no-repeat right top;}


/*-----------------------NAV CONTAINER-------------------------*/
#navcontainer {margin-top:20px;}
#navcontainer ul {margin:0; padding:0; list-style-type:none; z-index:2;}
#navcontainer ul h4 {margin:0;}
#navcontainer ul .toggler {margin:0; padding:0.2em 0 0.2em 2.6em;}
#navcontainer ul .topnav {margin:0; padding:0.2em 0 0.2em 2.6em;}

#navcontainer ul ul {background-color:#eee;}
#navcontainer ul ul li { display:inline; font-size:0.8em;}

#navcontainer a { display: block;}
#navcontainer h4 { font-size:1em; font-weight:normal; }
#navcontainer h4 img{ margin-right:5px; }

#navcontainer .navheading {padding:0; border-bottom:1px dotted #ccc; border-top:1px dotted #ccc; font-size:1.1em; font-weight:bold;}

#navcontainer a:link, #navcontainer a:visited, #navcontainer a:active { text-decoration:none; border:0; }
#navcontainer a:hover { }


/*-----------------------TOP NAV Elements-------------------------*/
/* these are required because of the acccordian effect
it doesnt honer the a.hover tags properly */
.topnavONHOVER { border-bottom:4px solid #090; border-top:2px solid #090;}
.topnavHOVER { border-bottom:4px solid #090; border-top:2px solid #090;}

.topnavON { border-bottom:4px solid #09c; border-top:2px solid #09c; background-color:#fff; padding:0; margin:0}
.topnav { border-bottom:4px solid #fff; border-top:2px solid #fff; background-color:#fff; color:#666666; padding:0; margin:0;}
.navheading { }
.navbottom {  }


#navcontainer a:link.topnavON, #navcontainer a:visited.topnavON, #navcontainer a:active.topnavON {border-bottom:4px solid #000; }
a:hover.topnav, a:hover.topnavON {}


/*-----------------------SUB NAV Elements-------------------------*/

#navcontainer a:hover.subnav { border-bottom:2px solid #090; color:#990000; }

#navcontainer a.subnav{ padding:0.4em 0 0.4em 2.6em; color:#666666; border-bottom:2px solid #fff;}

#navcontainer a:link.subnavON, #navcontainer a:visited.subnavON, #navcontainer a:active.subnavON { /*color:#ffffff; */}

/*-----------------------FAM NAV Elements-------------------------*/

#navcontainer .famnav {background-color:#FFE;}

#navcontainer a:hover.famnav { border-bottom:2px solid #900; color:#000; }

#navcontainer a.famnav{ padding:0.4em 0 0.4em 2.6em; color:#666666; border-bottom:2px solid #fff;}

#navcontainer a:link.famnavON, #navcontainer a:visited.famnavON, #navcontainer a:active.famnavON { /*color:#ffffff; */}



/*-----------------------PAGE NAV ELEMENTS--------------------------*/

ul#pagenav {padding: 0;margin: 0;background-color: #aca899;color: #fff;float: left;width: 100%;white-space: nowrap;}
ul#pagenav li { display: inline; }
ul#pagenav li a {padding: 2px 5px;background-color: #aca899;color: #fff;text-decoration: none;float: left;border-right: 1px solid #fff}
ul#pagenav li a:hover {color: #fff;background-color: #690;}
ul#pagenav li#page_current a { background-color: #690; }
ul#pagenav li#page_gap a { background-color: #aca899; }

/*-------------------------classes---------------------*/
.clear{clear:both;}
.clearleft{clear:left;}
.clearright{clear:right;}
.white {color:#fff;}
.black {color:#000;}
.half {font-size:0.5em;}
.threequarter {font-size:0.75em;}
.mediumsmall {font-size:1.2em;}
.medium {font-size:1.6em;}
.large {font-size:2em;}
.vlarge {font-size:2.6em;}
.red {color:#990000;}
.green {color:#009933;}
.blue {color:#069;}
.bold {font-weight:bold;}
.nomargin {margin:0;}
.security {background: transparent url("/images/icon_padlock.jpg") no-repeat; width:600px; padding-left:110px; margin:auto;}
.delivery {background: transparent url("/images/icon_boxes.jpg") no-repeat; width:600px; padding-left:110px; margin:auto; }
.bubblecon {position:absolute; width:200px; display:none;}
.bubbleconsmall {position:absolute; width:200px; height:80px; display:none; background:url(/images/background_bubble_small.png) no-repeat top left; padding:20px 0px 10px 5px;}
.bubble {background:url(/images/background_bubble.png) no-repeat top left; padding:35px 5px 10px 5px;}
.bubblebottom {background:url(/images/background_bubble_bottom.png) no-repeat; width:200px; height:26px;}
.extrainfo {}
.subheader {background:url(/images/icon_grad_back.gif) top repeat-x; padding:5px; font-size:1.5em; font-weight:bold; margin:10px 0 10px 0;}
.subheaderwhite {color:#fff; font-weight:bold; margin:3px; font-size:1.5em;}
.backblue {background:url(/images/background_blue.gif) repeat; padding:0 10px 0 10px;}
.headertopblue { background:url(/images/background_blue.png) no-repeat; margin:0; padding-top:5px;}
.headerbottomblue { background:url(/images/background_blue_bottom.png) no-repeat left bottom; padding-bottom:5px; text-align:right;}
.backwhitecentre {background-color:#FFFFFF; width:100%; text-align:center;}
.searchhighlight { background-color:#ffe; font-weight:bold; border-bottom:1px dotted #dcf; padding:0 3px 0 3px;}
.cap {display:none;}
.popupbox {position:absolute; z-index:100; top:10px; left:10px; visibility:hidden; background:url(/images/background_blue_alpha_500.png) no-repeat; width:500px;}
.hidden {display:none;}
.psuedolink {color:#174455; text-decoration:underline;}
.rounded {-moz-border-radius:5px; border-radius:5px;}
.roundedBlue {-moz-border-radius:10px; border-radius:10px; border:1px solid #336699; padding:10px;}
.floatleft {float:left; margin-right:10px;}
.floatright {float:right; margin-left:10px;}


/*--------------tooltips/need mootools--------------------*/
.tool-tip {
	color: #fff;
	width: 280px;
	z-index: 13000;
	padding: 5px;
}
 
.tool-title {
	font-weight: bold;
	font-size: 11px;
	margin: 0;
	color: #fff;
	padding: 8px 8px 4px;
	background: url(/images/background_tooltip_title.png) top left;
}
 
.tool-text {
	font-size: 11px;
	padding: 4px 8px 8px;
	background: url(/images/background_tooltip.png) bottom right;
}

/*--------------tooltips/need mootools 1.2 in more--------------------*/
.tip-wrap {z-index: 999999;}
.tip {
	color: #fff;
	width: 280px;
	z-index: 999999;
	padding: 5px;
}
 
.tip-title {
	font-weight: bold;
	font-size: 11px;
	margin: 0;
	color: #fff;
	padding: 8px 8px 4px;
	background: url(/images/background_tooltip_title.png) top left;
}
 
.tip-text {
	font-size: 11px;
	padding: 4px 8px 8px;
	background: url(/images/background_tooltip.png) bottom right;
}

/*--------------border classes--------------*/
.border {border:1px solid;}
.border-top {border-top:1px solid;}
.border-right {border-right:1px solid;}
.border-bottom {border-bottom:1px solid;}
.border-tb {border-top:1px solid; border-bottom:1px solid;}
.border-light {border-color:#bbcc99;}
.noborder {border:0}


/*------------------------------star rating from komodo-------------------------------------*/
.star-rating,.star-rating a:hover,.star-rating a:active,.star-rating a:focus,.star-rating .current-rating{
background: url(/images/background_star_rating.gif) left -1000px repeat-x;
}
.star-rating{
position:relative;
width:125px;
height:25px;
overflow:hidden;
list-style:none;
margin:0;
padding:0;
background-position: left top;
}
.star-rating li{
display: inline;
}
.star-rating a,.star-rating .current-rating{
position:absolute;
top:0;
left:0;
text-indent:-1000em;
height:25px;
line-height:25px;
outline:none;
overflow:hidden;
border: none;
z-index:0;
}
.star-rating a:hover,.star-rating a:active,.star-rating a:focus{background-position: left bottom;}
.star-rating a.star1{
width:20%;
z-index:6;
}
.star-rating a.star2{
width:40%;
z-index:5;
}
.star-rating a.star3{
width:60%;
z-index:4;
}
.star-rating a.star4{
width:80%;
z-index:3;
}
.star-rating a.star5{
width:100%;
z-index:2;
}
.star-rating .current-rating{
z-index:1;
background-position: left center;
}

/*-----------------buttons and button rollovers-----------------*/
.smallgreenbut {cursor:pointer; margin:3px; background: transparent url("/images/background_button_100.gif") no-repeat; height:25px ;width:100px; font-size:15px; text-transform:uppercase; border:0;}
.largegreenbut {cursor:pointer; margin:3px; background: transparent url("/images/background_button_150.gif") no-repeat; height:25px ;width:150px; font-size:15px; text-transform:uppercase; border:0;}
.vlargegreenbut {cursor:pointer; margin:3px; background: transparent url("/images/background_button_200.gif") no-repeat; height:25px ;width:200px; font-size:15px; text-transform:uppercase; border:0;}
.vvlargegreenbut {cursor:pointer; margin:3px; background: transparent url("/images/background_button_250.gif") no-repeat; height:25px ;width:250px; font-size:15px;text-transform:uppercase; border:0;}
.largeredbut {cursor:pointer; margin:3px; background: transparent url("/images/background_button_150_red.gif") no-repeat; height:25px ;width:150px; font-size:15px; text-transform:uppercase; border:0;}

input[type="submit"]:hover {background-position:0 -25px; font-weight:bold;}


/*-----------------------fixes and hacks etc--------------*/
/*FIX for fixed element in IE6<*/

div#openbasket { display:none;}
body > div#openbasket { position: fixed; right:0; bottom:0; width:250px; height:62px; background:url(/images/background_basket_bottom.png); }

/* --------------------BANNER ROTATOR--------------------- */
#SlideItMoo_banners_outer { 
	display:block; 
	position:relative; 
	width:1000px; 
	height:134px; 
	margin:0px auto 0px; 
	z-index:1;
}
#SlideItMoo_banners_inner { 
	position:relative ; 
	overflow:hidden ; 
	width:1000px ; 
	height:134px ; 
	margin:0px auto 0px;  
}
#SlideItMoo_banners_items { 
	white-space:nowrap; 
	display:block; 
	position:relative; 
}
#SlideItMoo_banners_items a img { 
	border:none;
	height:134px; 
}

#SlideItMoo_banners_items a { 
	height:134px; 
}

/* -------VERTICAL SLIDER STYLING --------*/

#SlideItMoo_vertical_outer {  
	width:1000px; 
	margin:10px auto 10px; 
	background:#333 ; 
	display:block; 
	position:relative; 
}


/* the width is set to show the number of thumbnails that will be visible */
#SlideItMoo_vertical_inner{ 
	position:relative ; 
	overflow:hidden ; 
	width:1000px ; /* set a display width to make the slider look good in case js is disabled */
	margin:0px auto 0px;
	padding:0px;
}
/* the thumbnails container; set a width on it so everything will be fine */
#SlideItMoo_vertical_items { 
	display:block; 
	position:relative; 
}


#SlideItMoo_vertical_items a { padding:0px; clear:both; display:block; background:#333333; }
#SlideItMoo_vertical_items a img{ border:none; }