/* CSS Document */
/****************** General stuff *****************/

html, body, ol, ul, li, dl, dt, dd, img {
	margin: 0;
	padding: 0;
	border: 0;
}

ol, li, ol li {
	list-style: decimal inside;  
}

ul, ul li, dl, dt, dd {
  list-style: square inside;
}

ul li ul, ol li ol {
  padding: 0 0 0 1em;
}

ul.leftsidenav li {
  list-style: none;
}

body {
	padding: 0 389px 0 389px; /* the critical side padding that sets the natural min-width! */
	background: #f9f9ff; /* a BG image here tiles the area outside the columns */
	color: #333;
	font-family: "Trebuchet MS", "Bitstream Vera Sans", Arial, Helvetica, sans-serif;
	font-size: 80%; /* this body font-size fixes an IE bug and maintains x-browser uniformity and permits the basis for 'elastic' layouts*/
	text-align: center; /* centers the #sizer element in IE5.x/win */
}

img	{
	border: 0;
	padding: 0;
	margin: 0;
}

img.left-align {
  float: left;
  padding: 5px 5px 5px 0
}

span.left-align { /*steve*/
  float: left;
  padding: 5px 0 5px 5px;
}

img.right-align {
  float: right;
  padding: 5px 0 5px 5px;
}

span.right-align {/*steve*/
  float: right;
  padding: 5px 0 5px 5px;
}

.alignright img {
  vertical-align: middle;
}


.header img {
  padding: 0 20px;
  border: 0;
  margin: 0;
  float: left;
}

p.access	{
	/* display: none; */
	height:0;
	margin:0;
	font-size: 0.001em;
	line-height: 0;
}

#sizer {
	margin: 0 auto; /* centers #sizer in standard browsers */
	padding: 0;
	width: 39%; /* this value controls liquidity; 0% = full rigid, 100% = full liquid */
	text-align: left; /* resets the default text alignment for the page */
	max-width: 200px;
}

#expander { /* Any % height here causes IE to lose the neg right margin */
	margin: 10px -389px 0 -389px; /* neg side margin values should be < or = to side body padding */
	min-width: 778px; /* This prevents Safari from losing the negative margins in narrow windows */
	position: relative; /* makes #expander visible outside #sizer in IEwin */
	background: transparent url(../images/ct_bg0d.png) no-repeat right 77px;
}

/*\*/
* html #expander {
  height: 0;
}
	/* #expander must have "height: 0" in IEwin bug fixing - with no height corrupts */

/* The above is a modified Holly hack for #expander, with zero substituted for the
usual 1% height value. Any % value on this element causes a horrendous IE bug! */

/*.home #aboutus {
	background: url(../images/awbg_home.png) no-repeat 0px 0px;
}
Could expand this section to provide custom page backgrounds for each section*/

#wrapper1 {
  /*background: url(../images/bgleft.png);*/
  min-height: 650px; /*in ie 7 the footer was overlapping the thumbnails without this*/
  /* this BG tiles the left column */
	font-size: 0.9em/1.3; /* set global font-size here */
} /* this positioning may be needed for IEwin if page is to contain positioned elements */

/****************** Page top navigation *****************/

div#topnav	{
	height: 35px;
	text-align: right;
	padding: 0 10px 0 0;
	margin: -47px 0 12px 0;
}

#topnav p{
	font-weight: bold;
	color: #fff;
}

#topnav a {
	text-decoration:none;
	line-height: 1.5em;
	color: #fff;
}

#topnav a:hover, #topnav a.active { 
  color: #ffcc00;
}



/****************** Main Page Structure *****************/

/* To modify the side column widths and the col divider widths, the values that are
marked "critical" and also refer to the desired mod MUST be changed as a group. */

.outer {
	/* background: url(../images/bgcentre.png); this BG tiles the center column */
	border-left: 0px solid #fff; /*** Critical left divider dimension value ***/
	border-right: 0px solid #fff; /*** Critical right divider dimension value ***/
	margin-left: 178px;    /*** Critical left col width value - see also .left below ***/
	margin-right: 1px;    /*** Critical right col width value - see also .left below ***/
}
.float-wrap {
	float: left;
	width: 100%;
}
/* #about us .float-wrap {
	background: url(../images/awbg0.png) no-repeat bottom right;
}
could expand this section to provide custom background depending on section */

.center {
	float: right;
	width: 100%;
	margin-top: -15px;
}

.left {
	float: left;
	position: relative; /* Needed for IE/win */
	width: 178px;    /*** Critical left col width value ***/
	margin-left: -178px;    /*** Critical left col width value ***/ /*** + Critical left divider dimension value - see below ***/
}

.centerbox {
	overflow: visible;
	width: 100%;
}

.container-left {
  padding: 0;
  margin: 0;
  text-align: right;
}

div.searchbox {
  /*position: absolute;*/
  float:right; /*steve: take away from top icons */
  margin-top: 10px;
  /*margin-top: 0.7em; steve changed from em to px to */
  right: 1px;
  z-index: 100;
}

/*************** Header and Footer elements *****************/

.header {
  width: 100%; /*critical width for IE */
	Height: 120px;
  padding: 0;
  clear: both;
  background: transparent url('../images/ct_bg0c.jpg') no-repeat left top;
	/* background: url(../images/awbg_news.png) no-repeat 10px 0px;
header bg should be set in fixed position here - specify left and top position in pixels */
}

/*\*/
/* html .header {background-position: 10px 3px; margin-top: -17px;} */
/* IEwin hack needed because the header BG is in a positioned wrapper and shows
variance. IEwin does not support fixed backgrounds on elements other than the body
Also, hack for header top margin now that menu is in place since IE and Firefox vary greatly in this - see also line 213 */

.footer {
	width: 100%;
	font-weight: bold;
	clear: both;
	position: relative;
  background: transparent url('../images/ct_bg0c.jpg') no-repeat right top;
}

.footer p {
  margin: 5px 0;
	padding: 0 15px;
	font-weight: bold;
	color: #fff;
  text-align: center;
}

.footer a, .footer a:link {
	text-decoration:none;
	color: #fff;
}

.footer a:hover, .footer a.active { 
  color: #ffcc00;
}

/************** Spacing Controls for various column contents ***************/

.outer ul {
	margin: 10px 0;
}

.textpadder {
  padding: 0px 5px 10px 5px;
  margin: 5px 0;
}

.centerbox .textpadder {
  padding: 8px 8px 10px 8px;
}

.container-left .textpadder {
  background: #fff url(../images/ct_bg0b.png) no-repeat center top;
  border: 1px #cbcccf solid;
  border-top: 4px #cbcccf solid;
}

div.iteminner {
	padding: 0 8px 0 8px;
	float: right;
	margin: 0px 0px 0px 7px;
	width: 100px;
	border-left: #888 1px solid; 
}

p.quote {
  padding: 0 50px;
  font-style: italic;
}
p.date {
  font-weight: bold;
  font-size: 85%;
  padding: 0;
  margin: 0;
}

/************** Typography Base Rules *************/
p  {
  margin: .8em 0;
}

p.productcaption {
  padding: 0 0 0 5px;
  margin: 0 -5px -10px -5px;
  color: #fff;
  background: transparent url(../images/ct_bg0c.jpg) no-repeat right top;
  font-weight: bold;
}

h1, h2, h3, h4, h5, h6 {
  font-family: Tahoma, "Trebuchet MS",Arial, Helvetica, sans-serif;
  font-weight: bold;
  
	letter-spacing: 0.1em;
	color: #553f6b;
	/*color: #b1b2b5;*/
}

h1 {
  margin: 0 0 0.4em 0;
	padding: 0;
  font-size: 1.7em;
}

h1.logo a, h1.logo a:link {
  position: absolute;
  text-indent: -9999px; /*Means there's a link area but the text is not visible to sighted users (but reads normally to screen readers) */
  display: block;
  top: 1px;
  left: 10px;
  height: 115px;
  width: 165px;
  z-index: 100;
  background: transparent url(../images/ct_bg0e.png) no-repeat 0px 0px;
  cursor: hand;
}

h1.logo a:hover {
  background: transparent url(../images/ct_bg0e.png) no-repeat 0px -115px; 
}

h2 {
	line-height: 1.8em;
  font-size: 1.5em;
	letter-spacing: 0.1em;
}

h2.strap {
  position: absolute;
  font-size: 0px; /*Means there's text for screen-readers - but not visible on screen */
  display: block;
  top: 0;
  right: 0;
  height: 60px;
  width: 435px;
  background: transparent url(../images/ct_bg0f.png) no-repeat 0 25px;
/* 	header bg should be set in fixed position here - specify left and top position in pixels */
}

h3 {
	margin: -8px 0 0.3em 0;
  font-size: 1.1em;
}

.container-left h3 {
  padding: 0;
  margin: 0 0 -0.4em 0;
  text-align: right;
}

h4 {
	margin: 0 0 0.1em 0;
  font-size: 0.9em;
	letter-spacing: 0.05em;
}
td h4 {
	margin: 0.1em 0 0.1em 0;
}

h5 {
	margin: 0 0 0.1em;
  font-size: 1em;
	color: #3366a1;
	letter-spacing: 0.05em;
	font-style: italic;
}

.alignright {
  margin: 0 10px 10px 0; 
  text-align: right;
}

.small {
  font-size: .8em;
}

a, a:link {
  color: #7d6cbf;
  font-weight: bold;
	text-decoration: none;
}

a:active, a:hover {
  color: #aaa5d8;
}

a:visited {
  color: #4379ab; 
}

/************** Left and right nav buttons *************/

ul.leftsidenav {
  margin: 15px 0 10px 0;
}

.leftsidenav a img {

}

.leftsidenav li a {
	display: block;
	text-decoration: none;
	border-bottom: 1px #cbcccf dashed;
	text-align: right;
	padding: 1px 0 4px 0;
	margin: 0;
}
.leftsidenav li.active a {
	display: block;
	text-decoration: none;
	border-bottom: 1px #cbcccf dashed;
	text-align: right;
	padding: 1px 0 4px 0;
	color: #ffcc00;
}
.leftsidenav li a:hover {

	padding: 1px 1px 4px 0;
	/* font-weight: normal; */
}

/************** Forms stuff *************/

form {
  margin: 0;
  padding: 0;
}

/************** Table stuff *************/

table.productthumbs {
  width: 100%;
  clear: both;
}
table.productthumbs td {
  width: 25%;
  margin: 3px;  background: #fff url(../images/ct_bg0b.png) no-repeat center top;
  border: 1px #cbcccf solid;
  border-top: 4px #cbcccf solid;
  text-align: center;

}

table.productonethumb {
  width: 20%;
  clear: both;
}

table.productonethumb td {
  width: 100%;
  height: 120px;
  margin: 3px;  background: #fff url(../images/ct_bg0b.png) no-repeat center top;
  border: 1px #cbcccf solid;
  border-top: 4px #cbcccf solid;
  text-align: center;
}
/************** Special Fixes *************/

.outer {word-wrap: break-word;}
/* Prevents long urls from breaking layout in IE, must
be hidden in a conditional comment for CSS to validate */

img {max-width: 100%;}
/* prevents oversize images from breaking layout in browsers that support max-width */

/* \*/
* html #wrapper1, * html .outer a, * html .container-left, * html .outer, * html h2, * html .sidenav li a {
  height: 1%;
}
/* Holly hack */


/*** Variance fixes for IEwin ***/

/*\*/
* html .outer p {margin-right: -6px;}
/* */


/**************** Utility Rules *******************/

/*\*/ /*/
.sidenav a:hover {position: relative;}
/* this fixes an IEmac hover bug in the left column, hidden from other browsers */

.brclear { /* Use a break with this class to clear float containers */
	clear:both;
	height:0;
	margin:0;
	font-size: 1px;
	line-height: 0;
}

.tools {
  text-align: right;
  padding: 0 178px 8px 0;
}

.clicker {
	display: block;
	text-align: center;
	padding: 3px;
	cursor: pointer;
}

.hide {display: none;}

/*************************** steve additions **********************/
.active { 
  color: #ffcc00;
}

/* class for popup-style divs for product technical data */
div.techdata {
  /*margin: 3px;  background: #fff url(../images/ct_bg0b.png) repeat-x center top;*/
  padding: 3px;
  background-color: #FFFFFF;
  border: 1px #cbcccf solid;
  border-top: 4px #cbcccf solid;
  position: absolute;
  left: 100px;
  width: 350px;
  top: 50px;
  }

div#zonedetails {
  z-index:200;
}

div#singleproduct{
  position:absolute;
  top:20px;
  width: 250px;
  left:15%;
  padding: 10px;
  background-color: #FFFFFF;
  border: 1px #cbcccf solid;
  border-top: 4px #cbcccf solid;
  z-index: 150; /*tried setting high but sits behind flash movies so moved left*/
}

div#browseproducts {
  height:150px;
  clear: both;
}

.textlabel {
  font-weight: bold;
}

.errorlabel {
  font-weight: bold;
  color: red;
}

.story{
  clear: both;
  margin-bottom: 5px;
  background-color: #ffffff;  
  border: 1px #cbcccf solid;
  border-top: 4px #cbcccf solid;
}