@charset "utf-8";

body { /* global styling */
	font: 75%/1.4 Verdana, Arial, Helvetica, sans-serif;
	margin: 0;
	padding: 0;
	color: #000;
}
/* document section containers */
	#layout { /* ~~ this container surrounds all other divs ~~ */
		width: auto;
		height: auto;
		padding: 0px 8px 8px 7px;
		min-width: 1100px;
	}
	
	#header { /* ~~ header container ~~ */
		height: 86px;
		background: url(/images/gradients/gradient_blue.png) repeat-x;
		width: 100%;
		background-color: #EBEBEB;
	}
	.wrap { /* ~~ this container surrounds the body and footer of the page  ~~ */
		float: left;
		width: 100%;
		background-color: #EBEBEB;
	}
	
	#content { /* ~~ this container surrounds the pages content  ~~ */
		padding: 10px 0;
		width: 100%;
	}
	
	#footer { /* ~~ footer container ~~ */
		margin-top :20px;
		padding-top: 10px;
		padding-bottom: 1px;
		background: #6699CC;
		position: relative;
		clear: both;
		font-size: 80%;
		text-align: right;
	}

/* footer */
	.footerlink:hover {/* want to override the colouring for links in the footer*/
		color: #F90 !important;
	}
	
/* header */
	#logo {
		float: left;
		padding-top: 8px;
		text-align: center;
		width: 135px;
		height: 64px;
		margin-left: 6px;
		margin-right: 6px;
	}
	
	#headerbarimg {
		width: 100%;
		height: 26px;
		position: relative;
		bottom: 11px;
	}
	
	/* menu */
		#menuitems {
			overflow: auto;
			padding-top: 2px; /*position of menu bar vertically*/
			width:820px;
			height:33px;
		}
		#menuitemscontainer {
			padding-top:14px;
			margin-right:133px;
		}
		
		#menuitems ul li{
			display: block;
			float: left;
			overflow:hidden;
			padding: 4px 0px 6px 25px;
			color:#fff!important;
			height: 23px;
		}
		#menuitems ul li:hover{
			color:#000!important;
		}
		
		#menuitems ul li a{
			font-size: 125%;
			color:inherit;
			padding: 4px 4px 4px 4px; /* create a border around each menu text */
		}
		.menuhoverl {
			background: url(/images/buttons/headinggreyhoverl.png) no-repeat 0px 0px;
		}
		.menuhoverr {
			background: url(/images/buttons/headinggreyhoverr.png) no-repeat 0px 0px;
		}
		.menuunhover {
			background: url(/images/buttons/headinggrey.png) no-repeat 0px 0px;
		}
		
	/* search bar */
		#searchform {
			width: 252px;
			margin-top: -28px; /* set position of search bar away from surrounding countainer */
			margin-right: 10px;
			float: right;
		}
		
		#searchform div {
			background: url(/images/searchbar.png) no-repeat 0px 0px;
			height: 26px;
			padding-top: 1px;
			padding-left:10px;
			vertical-align:middle;
		}
		
		#searchform #search { /*search box*/
			border: 0;
		}
			
		#searchform #searchbtn {
			height: 26px;
			width: 80px;
			background: transparent;
			cursor: pointer;
			border: 0px;
		}

/* content items */
	
	/*showcase*/
	#showcasecontainer{
		margin-bottom:20px;
		margin-left:1%;
		margin-right:1%;
		background:url(/images/gradients/gradient_grey_short.png) repeat-x 0px 0px;
		width:98%;
	}
	
	#showcasecontainer tr td{
		vertical-align: top;
	}
	
	.showcasecornercontainer{
		position: relative;
		width: 10px;
		height: 10px;
		vertical-align: top;
	}
	
	.showcasecornercontainer div{
		background-image:url(/images/corner_transparentongrey.png);
	}
	
	.showcasecontentcontainer{
		font-size: 125%;
		padding: 10px 0px 10px 0px;
	}
	
	.showcaseimage{
		height: 185px;
		width: 506px;
		padding-bottom: 10px;
	}
	
	/*tabs*/
	.showcasetab{
		width: 190px;
		color: #000;
	}
	
	.showcasetabcontent{
		height: 35px;
		font-weight: bold;
		padding: 10px;
	}
	
	.showcasetabimage{
		height: 51px;
		width: 106px;
		vertical-align:middle;
	}
	
	.showcasetabspacer{
		height: 9px;
		background: url(/images/divider_h.png) no-repeat center;
	}
	
	.showcasetabhover{
		background-image: url(/images/buttons/showcasehoverring.png);
	}
	
	/* product boxes */
	.productboxes{
		width:50%;
		margin-bottom: 20px;
	}
	
	.outercontainer{
		width: 434px;
		height: 620px;
	}
	.boxheader boxfooter{
		width: inherit;
	}
	
		/* header */
		.boxheader div{
			background-image: url(/images/borders/top.png);
			height: 15px;
		}
		.headerl{
			float: left;
			width: 415px;
			background-position: top left;
		}
		.headerr{
			float: right;
			width: 19px;
			background-position: top right;
		}
	
		/* content */
		.contentcontainer{
			float: right;
			width: inherit;
			height: inherit;
			background: url(/images/gradients/gradient_grey.png) repeat-x top left;
		}
		.borderleft{
			float: left;
			background: url(/images/borders/side_graduated.png) repeat-y top left;
			width: 9px;
			height: inherit;
		}
		.boxinnercontent{
			height: inherit;
			width: auto;
		}
			.boxcontent{
				float: left;
				width: 394px;
				padding: 0px 11px 0px 11px;
			}
		
			.borderright{
				float: right;
				background: url(/images/borders/side_graduated.png) repeat-y top right;
				width: 9px;
				height: inherit;
			}
		
		/* footer */
		.boxfooter div{
			background-image: url(/images/borders/bottom.png);
			height: 15px;
		}
		.footerl{
			float: left;
			width: 415px;
			background-position: top left;
		}
		.footerr{
			float: right;
			width: 19px;
			background-position:  top right;
		}
	
	/* product text styling */
	.bulletac {
		list-style-image: url(/images/bullets/bullet_ac.png);
	}
	.bulletice {
		list-style-image: url(/images/bullets/bullet_ice.png);
	}
	.list1 {
		list-style-position: outside;
		list-style-type: none;
		font-weight: bold;
		padding-left: 25px;
		line-height: 2;
	}
	.producttitle {
		font: 160%/1.4 Verdana, Arial, Helvetica, sans-serif;
	}

/*corners*/
	.corner{
		width: 10px;
		height: 10px;
		background-repeat: no-repeat;
		position: absolute;
	}
	.cornertl{
		float: left;
	}
	.cornertr{
		background-position: -10px -0px;
		float: right;
	}
	.cornerbl{
		background-position: 0px -10px;
		float: left;
		left: 0px;
		bottom: 0px;
	}
	.cornerbr{
		background-position: -10px -10px;
		bottom: 0px;
		float: right;
}
	
/*buttons*/
	.button {
		background-image: url(/images/buttons/lightblue.png);
		background-repeat: no-repeat;
		}
		
	.buttonitems ul li{
		display: inline;
		overflow: hidden;
		padding: 10px 0px 10px 10px;
		color: #000;
		cursor: pointer;
	}
	
	.buttonitems ul li a{
		color: inherit;
		padding: 4px 4px 4px 4px;/* create a border around each text */
	}
	/*button hover effects*/
	.buttonitems ul li:hover{
		color: #FF9933!important;
	}
	.unhoverl {
		background-position: left top;
		top: 0px;
		left: 0px;
	}
	.hoverl {
		background-position: 1px 1px;
		top: 1px;
		left: 1px;
	}
	.hoverl a{
		position: relative;
		top: inherit;
		left: inherit;
	}
	.unhoverr {
		background-position: -297px top;
		margin-right: 5px;
	}
	.hoverr {
		background-position: -296px 1px;
		margin-right: 5px;
	}

/*background colours*/
	.bgg{
		background-color: #E9FEEE;
	}
	.bgb{
		background-color: #EAF8FF;
	}
	
	.bghg{
		background-color: #8EE49E;
	}
	.bghb{
		background-color: #55B4E5;
	}
	
/*borders*/
.borderlr{
	border-left: 1px solid #999;
	border-right: 1px solid #999;
}

.borderl{
	border-left: 1px solid #999;
}

.borderr{
	border-right: 1px solid #999;
}
.borderb{
	border-bottom: 1px solid #999;
}
	
/* ~~ general housekeeping ~~ */
ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists.*/
	padding: 0;
	margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
	margin-top: 0;	 /* removing the top margin gets around an issue where margins can escape from their containing div. */
	padding-right: 10px;
}
h1 {
	font-size:150%;
}
h2, h3, h4, h5, h6, p {
	font-size: 100%;
	padding-left: 10px; /* adding the padding to the sides of the elements within the divs, instead of the divs themselves, gets rid of any box model math.*/
}

a img { /* remove the default blue border around an image when it is surrounded by a link */
	border: none;
}

a:link {
	color: #fff;
	text-decoration: none;
}
a:visited {
	color: #fff;
	text-decoration: none;
}
a:hover, a:active, a:focus { /* give keyboard navigator the same hover experience as a mouse. */
	color:#F90
}