body
{
	margin: 0;
	/*padding: 0.5em 5em 0 5em;		/* remove this padding if you want the layout to
				   stretch from edge to edge of the viewport. */
				   
	/*colours*/
	background-color: #fff;
	color: #fff;
	
	/*fonts*/
	/*font-family: arial, helvetica, sans-serif;*/
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 100.1%;	/* font sizing approach recommended by Dave Silvester on the css-discuss list. "the .1 is important." */
	text-align: justify;
}
html>body #footer
{
	padding-bottom: 1.01em;	/* this is to fix a bug in mozilla that results
				   in a 1px line of white below the footer when
				   the document gets very long. extremely long
				   documents may generate the bug again. if
				   you experience that, increasing this value
				   may help. i think this is related to moz's
				   off-by-one troubles as the bug does not
				   occur in any other browser */
}
.hide, #oldBrowserNotice, .ieSixCharDupBug
{
	/* hide elements that CSS-targeted browsers shouldn't show */
	display: none !important;
}
.inside
{
	padding: 0 1em;	/* this padding is applied to every major box within the layout for a uniform gutter between borders 

				   _NOTE_: a small glitch in IE seems to appear
				   if this class has vertical padding applied
				   to it. so in cases where you want to add 
				   vert padding, use the parent element. margin
				   values here don't work because .inside has
				   a key role in border generation */
}
.menu
{
	background-color: #fff;
	background: url("/img/menu1.gif");
	text-align: center;
}
.menu, .menu ul li a
{
	/* need to middor veritcal padding on .menu and child anchor elements
	 * because the anchors are _not_ block elements. since they are not
	 * block elements web browsers will not expand .menu to contain them
	 * even with the extra padding. by applying the same padding to both
	 * the parent .menu _looks_ like its containing the child anchor
	 * elements. 
	 */
	padding-top: 3px;
	padding-bottom: 3px;
	line-height: 180%;
}
.menu ul, .menu ul li
{
	display: inline;
	list-style-type: none;
	margin: 0;
	padding: 0;
}
.menu ul li a
{
	margin: 0 3em 0 0; 		/* controls distance between menu links*/
	padding-left: 10px; 	/* padding between the words and the "edge" */
	padding-right: 10px;	/* padding between the words and the "edge" */
	white-space: nowrap;
	font-weight: bold;
	
	text-decoration: none;
	color: #fff; 			/* font colour */
}
.menu ul li a:hover
{
	color: #000; 			/* font colour */
}
* html .menu, * html .menu ul a
{
	/* \*/ height: 0.01%; /* hasLayout hack to fix render bugs in IE/Win. 
				 IE/Mac will ignore this rule. */
}
* html .menu
{
	padding: 0;	/* IE5/Win will resize #menu to fit the heights of its
			   inline children that have vertical padding. So this
			   incorrect case selector hack will be applied only by
			   IE 5.x/Win */
}
* html .menu ul
{
	position: relative;	/* IE needs this to fix a rendering problem */
}
#pageWrapper
{
	border-style: solid;	/* explicitly defined within eact selector in case you want change border styles (to mix it up) between elements */
	border-width: 0 1px;	/* puts a border on the left and right sides of the page. #masthead and #footer will handle the top and bottom borders */
	
	/*fonts*/
	font-size: 80%;
	
	/*base*/
	margin: 0;
	width: auto;
	min-width: 500px;
}
* html #pageWrapper
{
	word-wrap: break-word;
}
#outerColumnContainer
{
	/*colours*/
	border-left-color: #fff;	/* left hand column background color */
	
	/*base*/
	z-index: 1;
	/*border-color: #fff;	/* set default color to white. set the real color inside colors.css */
	border-style: solid;
	border-width: 0 0 0 0em;	/* sets the width of the borders used to for left column */
}
#innerColumnContainer
{
	border-style: none;
	border-width: 0 1px;	/* puts borders between center and the side columns. */
	margin: 0 -1px;		/* compensation for the borders because of 100% width declaration on this object */
	
	/*base*/
	z-index: 2;
	width: 100%;
}
* html #innerColumnContainer
{
	position: relative;	/* fix a render bug in IE under certain conditions */
}
* html #outerColumnContainer
{
	/* IE5.0/Win fix for 1px whitespace between masthead and body. */
	margin-top: -1px;
	border-top: solid 1px #000;
}
#masthead
{
	border-style: solid;
	border-width: 1px 0;	/* handles the top of the layout's border and the bottom of the masthead section */
	border-bottom-style: none;
				   
	/*colours*/
	background-color: #333333;
	color: #fff; /*font colour*/
}
#masthead h1
{
	display: inline;	/* personal preference to keep the header inline. you could just as easily change padding and margins to 0. */
}
#outerColumnContainer, #contentColumn	/* selector case hack to reset version 4 stylesheet setting */
{
	background-color: #fff;		/* this sets the background color on the center column */
	color: #000;
}
#masthead, #contentColumn
{
	padding-top: 0.5em;
	padding-bottom: 0.5em;	/* this is the vert padding talked about in the previous selector. */
}
#contentColumn
{
	color: #000;
	
	/*base*/
	float: left;
	position: relative;	/* IE has a display/render bug with non-floated 
				   block elements inside floated block elements. 
				   setting position:relative on the floating
				   element seems to resolve this. */
	z-index: 10;
	overflow: visible;	/* fix for IE italics bug */
}
#contentColumn
{
	padding: 1em 0 1em 0;
	/*/*/ margin: 0 0;			/* ie4 fix */
	/*base*/
	width: 100%;
	border-width: 0;
	border: 1px solid #000;
	border-top: 0px;
}
.main {
	background: #fff;
	border: 1px solid #ccc;
	/*margin: 15px 5%;*/
	margin: 2em;
	padding: 2em;
	position:relative;
}
/* This is the Holly Hack \*/
* html .main { height: 1% }
/* For Win IE's eyes only */
#main {
	background: #fff;
	border: 1px solid #ccc;
	/*margin: 15px 5%;*/
	margin: 2em;
	padding: 2em;
	position:relative;
}
#mainContainer
{
	border-color: #fff;	/* set default color to white. set the real color inside colors.css */
	border-style: solid;
	border-width: 0 0em 0 30em;	/* sets the width of the borders used to create the left and right columns' background color. */
	position:relative;
	float:left;
}
#mainLeftColumn
{
	width: 25em;
	margin: 0 1px 0 -25em;
}
#mainRightColumn
{
	float: right;
	/*width: 15em;
	margin: 0 -15em 0 1px;*/
}
#mainContentColumn
{
	margin: 0 -1px;		/* without this, boxes stop floating next to each other */
	width: 75%;
	border-width: 0;
}
#mainLeftColumn, #mainRightColumn, #mainContentColumn
{
	float: left;
	position: relative;
	z-index: 10;
}
#masthead, #footer
{
	padding: 1em;
}
#footer
{
	border-style: solid;
	border-width: 1px 0;	/* handles the top of the footer section and the bottom of the entire layout */
				   
	/*colours*/
	background-color: #909090 ;
	color: #000;
	
	/*fonts*/
	text-align: center;
	font-size: 85%;
	
	/*base*/
	position: relative;
}
#pageWrapper, #innerColumnContainer, #masthead, #footer
{
	border-color: #000;
}
#oldBrowserNotice
{
	text-align: center;
	display: block;		/* overriding the display:none on this block so that version 4 browsers still see the old browser notice */
}
:root code
{
	font-size: 120%;	/* monospace fonts are typically smaller that 'normal' fonts under Mozilla. */
}
p, h1, h2, h3, h4, h5, h6
{
	margin: 1em 0;		/* specifically define this for Opera's sake, and also for better consistency across all platforms  */
}
h1
{
	font-size: 210%;
	color: #333333;
}
h2
{
	font-size: 180%;
	color: #707070;
}
h3
{
	font-size: 140%;
	color:#333333;
}
h4
{
	font-size: 126%;
}
h5
{
	font-size: 110%;
	color: #303030;
}
h6
{
	font-size: 100%;
}
p {
	margin:0 0 1em;
	color:#444;
	/*font:normal 1em/1.2 Georgia,Times,serif;*/
}
.cssTable table 
{
	font-size:85%;
}
.innerCssTable table 
{
	font-size:85%;
}
.byPassCell td
{
	font-size:100%;
}
ul li
{
	padding: 0.2em 2em;
	list-style-type:circle
}
/************************* faq link *************************/
a.link_faq {
    color: #666699;
    text-decoration: none;
    border:0;
}
a.link_faq:hover {
    color: #99ccff;
    text-decoration: none;
    border:0;
}

/************************* product page images rollover link ******************************/
a.img {
	text-decoration:none;
	border:0;
}

a.horollover {
    display: block;
    width: 118px;
    height: 116px;
    background: url("../img/main/hood.jpg") 0 0 no-repeat;
    text-decoration: none;
    border:0;
}
 
a:hover.horollover {
    background-position: -118px 0;
    border:0;
} 

a.hrollover {
    display: block;
    width: 123px;
    height: 116px;
    background: url("../img/main/hob.jpg") 0 0 no-repeat;
    text-decoration: none;
    border:0;
}
 
a:hover.hrollover {
    background-position: -123px 0;
    border:0;
} 

a.orollover {
    display: block;
    width: 118px;
    height: 116px;
    background: url("../img/main/oven.jpg") 0 0 no-repeat;
    text-decoration: none;
    border:0;
}
 
a:hover.orollover {
    background-position: -118px 0;
    border:0;
} 

a.srollover {
    display: block;
    width: 121px;
    height: 116px;
    background: url("../img/main/sink.jpg") 0 0 no-repeat;
    text-decoration: none;
    border:0;
}
 
a:hover.srollover {
    background-position: -121px 0;
    border:0;
} 

a.trollover {
    display: block;
    width: 123px;
    height: 101px;
    background: url("../img/main/tap.jpg") 0 0 no-repeat;
    text-decoration: none;
    border:0;
}
 
a:hover.trollover {
    background-position: -123px 0;
    border:0;
} 

a.arollover {
    display: block;
    width: 117px;
    height: 101px;
    background: url("../img/main/accessories.jpg") 0 0 no-repeat;
    text-decoration: none;
    border:0;
}
 
a:hover.arollover {
    background-position: -117px 0;
    border:0;
} 

a.blahrollover {
    display: block;
    width: 22px;
    height: 22px;
    background: url("../img/close.gif") 0 0 no-repeat;
    text-decoration: none;
    border:0;
}
 
a:hover.blahrollover {
    background-position: -22px 0;
    border:0;
}