/* ---==================--- blank slate ---==================--- */

*{
	margin:0;
	padding:0;
}
h1{font-size:2em}
h2{font-size:1.5em}
h3{font-size:1.25em}
h1,h2,h3,h4,h5,h6,p,blockquote,form,label,ul,ol,dl,fieldset,address{margin-bottom:.7em}
ul{list-style-position:inside}
li{margin-left:1.2em}
img{border:none}

html,table{font-size:100%} /* IE hack */
body{font-size:75%} /* IE: set to 75% so that 1em=12px, 1.25em=15px, etc. */
html>body{font-size:12px} /* as above but standards compliant browsers */

* html .infobox{height:0.01%} /* Fix IE's Peekaboo rendering bug */

/* ---==================--- layout ---==================--- */

html,body{
	height:100%;
	margin:0;
	padding:0;
	color:#444;
	background:#6690BA; /* #bcb8bf; */
	font-family:verdana, arial;
}
#head{
	position:absolute;
	height:144px;
	width:100%;
	left:0;
	top:0;
	background:#d70c1a url(images/head.jpg) no-repeat 0 100%;
}
#nav{
	position:absolute;
	top:144px;
	left:0; /* IE needs this to stretch width to 100% */
	height:1.3em;
	padding-bottom:8px;
	width:100%;
	background:#1e7da5 url(images/nav-tile.gif) repeat-x 0 100%;
}
#main,#mainAlt1,#mainAlt2{
	padding-top:149px; /* #head height:144px + #nav ul padding-bottom:5px = 149px */
}
#foot{
	clear:both;
	overflow:hidden;
	position:relative;
	height:1.2em;
	padding-top:8px;
	background:#2080b0 url(images/foot.jpg) no-repeat 50% 0;
	text-align:center;
	font-size:.9em;
}
#foot div{
	position:absolute;
	top:0;
	left:0;
	padding-top:8px;
}
#prop{
	float:right;
	height:100%;
	margin-top:-1.2em; /* #foot height:1.2em */
	margin-bottom:-8px; /* #foot padding-top:8px */
	margin-left:-1px; /* remove effect of width:1px */
	width:1px;
	background:transparent; /* just in case */
}
#copy,#info,#misc{
	padding-top:2.5em;  /* #nav height:1.3em
	                       This didn't work when placed in #main with #prop margin-top:-2.5em;
	                       because a 1.3em space was made below #foot */
}
#main #copy{
	display:inline;   /* IE double-margin hack */
	float:left;
	width:50%;        /* 50% works best for IE */
	margin-left:24%;  /* 24% works best for IE */
}
#main #info{
	float:left;
	width:24%;        /* 24% works best for IE */
	margin-left:-74%; /* -74% works best for IE */        
}
#main #misc{
	float:left;
	width:24%;        /* 24% works best for IE */
}
#mainAlt1 #copy{
	display:inline;   /* IE double-margin hack */
	float:left;
	width:74%;
	margin-left:1%;
}
#mainAlt1 #info,#mainAlt1 #misc{
	float:right;
	width:24%;
}
#mainAlt2 #copy{
	display:inline;   /* IE double-margin hack */
	float:right;
	width:74%;
	margin-right:1%;
}
#mainAlt2 #info,#mainAlt2 #misc{
	float:left;
	width:24%;
}
.infobox{
	clear:left;
}

.infoboxshowcase{
	clear:left;
}

.left{
	float:left;
	margin-right:1em;
}
.profile .left p{
	width:200px;
	text-align:center;
}
.profile .left a{
	display:block;
}
.right{
	float:right;
	margin-left:1em;
}
.profile .right{
	float:none;
	margin-left:210px;
}

#info .infobox,#copy .infobox{
	min-height:37.75em;
}
* html #info .infobox,* html #copy .infobox{         /* for explorer only*/
	height:39.3em;
}
/*
	.infoboxNoMin is here because IE doesn't suport the A + B selector 8^(
	All instances of it should be removed, and the xhtml code should just use class="infobox"
*/
#info .infobox + .infobox,#copy .infobox + .infobox,.infoboxNoMin{
	min-height:0;
	height:auto;
}

/* ---==================--- styling ---==================--- */

#head h1{
	margin:10px;
	height:54px;
	width:178px;
	float:right;
	color:#fff;
	background:url(images/logo.gif) no-repeat;
}
#head h1 span{
	position:absolute;
	left:-9999px;
}
#nav ul,#foot ul,#nav li,#foot li{
	display:inline;
}
#foot li{
	margin:0;
}
#foot ul{
	background:#2080b0;
}
#foot a{
	padding:0 .4em;
}
#nav ul{
position:absolute;
bottom:-.7em;
	background:url(images/nav-main.gif) no-repeat 100% 100%;
	padding:0 20px 5px 0;
	font-size:1.2em;
}
a{
	color:#fff;
	text-decoration:none;
}
a:hover{
	color:#fff;
	text-decoration:underline;

	cursor:pointer;
	cursor:hand;
}
.infoboxNoMin,.infobox,.infoboxshowcase{
	margin:.5em;
	padding:0 .5em .5em;
	background:#A3BDD6;	/*#bbb4bf;*/
	border:1px #fff solid;
}
.infobox input{
	width:95%; /* IE doesn't like 100% because of borders? */
}
#orderForm label,#contactForm label{
	display:block;
	color:#fff;
}
#orderForm input,#orderForm textarea,#contactForm input,#contactForm textarea{
	width:50%;
	margin-right:.5em;
	vertical-align:top;
}
#orderForm p{
	color:#fff;
	width:60%;
	margin-left:20%;
	padding-left:.3em;
	text-align:center;
}
#orderForm a,#contactForm a{
	display:block;
	float:left;
	width:10em;
	margin-right:.3em;
}
#orderForm .required,#contactForm .required{
	text-align:right;
	color:#fff;
}
#contactForm fieldset{
	border:none;
}
pre{
	background:#6690BA;
	margin:.5em;
	padding:.5em;
}
.contact h3{
	border-bottom:1px #444 solid;
}
.next{
	margin-top:1.7em;
}

.infobox h1,.infobox h2,.infoboxNoMin h1,.infoboxNoMin h2{
	text-align:right;
	font-weight:normal;
	font-size:1.25em;
	color:#fff;
	border-bottom:1px #fff solid;
	margin:0 -.4em .7em;
	padding:.1em .3em;
	background:#1e7da5;
}


.infoboxshowcase h2,{
	text-align:right;
	font-weight:normal;
	font-size:1.25em;
	color:#fff;
	border-bottom:1px #fff solid;
	margin:0 -.4em .7em;
	padding:.1em .3em;
	background:#CC0000;
}








#copy .infobox,#copy .infoboxNoMin{
	margin:.5em 0; /* no need for side margins: the side columns already have them */
}
.link{
	list-style:none;
	list-style-position:outside; /* for IE */
	text-align:right;
}
.link li{
	margin:1px 0;
}
.link a{
	display:block;
	background:url(images/bullet_link.gif) no-repeat 0 50%;
	width:100%;
	border-bottom:1px #6690BA solid;
}
.link a:hover{
	background:url(images/bullet_link.gif) no-repeat -500px 50%;
	border-bottom:1px #fff solid;
	text-decoration:none;
}
input:focus,textarea:focus{
	background:#fff;
}

dl.product{
	float:left;
	width:116px;
	text-align:center;
	margin:0 5px 20px auto;/*1em 1em 1em 0;*/
}
.product dt{
	font-weight:bold;
	height:2.5em;
}
.product dd{
	margin:0;
	font-size:.9em;
}

.product .image a{
	display:block;
	height:118px;
	width:116px;
	background:url(images/back.gif);
}
.product .image a:hover{
	background:url(images/back.gif) no-repeat -116px 0;
}
.product a img{
	height:89px;
	width:87px;
	position:relative;
	left:2px;/*14px;*/
	top:13px;
}
/* edited out by Kurt - cool trick man.
.product a:hover img{
	height:178px;
	width:174px;
	left:-9px;
	top:-30px;
	z-index:2;
}
* html .product a:hover img{
	margin-right:-58px;
	margin-bottom:-60px;
}
*/

.img{
	float:left;
	margin:0 12px 2em 0; /* 1em gives space for 2 lines of descriptive text */
	text-align:center;
}
.imgAlt{
	float:right;
	margin:0 0 2em 12px; /* 1em gives space for 2 lines of descriptive text */
	text-align:center;
}
* html .img{         /* for explorer only*/
	margin:0 12px 0 0;
}
* html .imgAlt{      /* for explorer only*/
	margin:0 0 0 12px;
}
.img a,.imgAlt a{
	height:201px;
	width:204px;
	background:url(images/productDetail_frame.gif) no-repeat;
	display:table-cell;    /* align img                */
	position:static;       /*        vertically...     */
	vertical-align:middle; /* ...won't work in IE 8^(  */
}
.img a:hover,.imgAlt a:hover{
	background:url(images/productDetail_frame.gif) no-repeat -204px 0;
}
* html .productDescription{     /* for explorer only*/
	height:221px;
}
.promo a .img,.promo a .imgAlt{
	height:150px;
	width:150px;
	background:url(images/promo.jpg) no-repeat;
}
.promo a:hover .img,.promo a:hover .imgAlt{
	background:url(images/promo.jpg) no-repeat -150px 0;
}
* html .promo{     /* for explorer only*/
	height:171px;
}
.productDescription,.promo,.clear{
	clear:both;
}

.details{
	margin-left:260px;
}
.contact dl{
	position:relative;
	border-top:1px #A3BDD6 solid; /* IE hack */
}
.contact dt{
	position:absolute;
	left:0;
	width:10em;
}
.contact dd{
	margin:0 0 .5em 11em;
}
.contact dd p{
	margin:0;
	padding:0;
}

dl.productDescription{
	float:right;
	width:204px;
	text-align:center;
	margin-left:1em;
}
.productDescription dt{
	font-weight:bold;
}
.productDescription dd{
	margin:0;
	font-size:.9em;
}
.productDescription .image{
	display:block;
	height:201px;
	width:204px;
	background:url(images/productDetail_frame.gif) no-repeat;
}
.productDescription img{
	position:relative;
	top:15px;
}

input#submit,input.submit{
	margin:2px;
}
.centre{
	margin:0 7%;
}
table{
	margin-bottom:1.7em;
	border:1px #000 solid;
}
th{
	border-bottom:1px #000 dotted;
}
td{
	width:12em;
	text-align:center;
}
caption{
	margin-top:.7em;
	font-size:125%;
}