/* Layout checked in Safari 2.0, Firefox 1.0.4 on Mac OS 10.4 and IE6 and Firefox 1.0.4 on Windows XP. */
		
	/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~ Begin HTML */
	body {
		font: 100% Arial, Helvetica, sans-serif; 	/* ~~~~~~~~ font size set to 100% here, in order to pull IE into line. However it does mean that relative font sizes will have to be set for individual elements further on, such as headers and paras. */
		padding: 0;
		margin: 0;
	}

	h2 {
		color: #0066CC;
		font-size: 3em;   
		margin: 0;
		margin-bottom: 1em;
		padding: 0;
	}
	
	h3 {
		color: #0066CC;
		font-size: 1.5em; 
		line-height: 1.7em;
		margin: 0;
		margin-top: 0.8em;
		margin-bottom: 0.3em;
		padding: 0;
	}
	
	p {
		font-size: 1.2em;
		line-height: 1.4em;
		margin: 0;
		margin-bottom: 0.75em;
		padding: 0;
	}
	
	h4 {
		font-size: 1.2em;
		color: #000000;
		margin: 0;
		padding: 0;
		margin-top: 0.8em;
		margin-bottom: 0.1em;
	}
	
	h5 {
		font-size: 1.2em;
		color: #000000;
		margin: 0;
		padding: 0;
	}
	
	h6 {
		font-size: 1.2em;
		color: #000000;
		text-align: center;
		margin: 0;
		padding: 0;
	}
	
	a {
		color: #0066CC;;
	}
	
	a:hover {
		color: #FFCC00;
	}
	
	
	
	img 
	{
	margin: 0;
	padding: 0;
	border: none;
	}
	
	h1
	{
	margin: 0;
	padding: 0;
	}
	
	a h1
	{
	text-decoration: none;
	}
	
	/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~ End HTML */
	
	/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~ Begin Main Content Area */

	#main {
		width: 100%;
		float: left;
		margin: 0;
		padding: 0;
		margin-right: -250px;
		height: 100%;
		background: url(images/int_hd_bk.gif) repeat-x top left #fff;
	}
	
	#content {
		font-size: 0.7em;
		margin: 0;
		padding: 0;
		padding: 3em;
		margin-right: 250px;
	}
		
	#content ul li	
	{
		list-style-type: none;
		padding-left: 1em;
		padding-bottom: 0.3em;
		font-size: 1.2em;
		line-height: 1.4em;
		background-image: url(images/bullet.gif);
		background-repeat: no-repeat;
		background-position: left 8px;
	}
	
	
	#mainheader, #mainheader span {
		height:105px;
		width:300px;
		background-image: url(images/int_hd_lft.gif);
	}
	
	.replace {
		position:relative;
		margin:0px; padding:0px;
		/* hide overflow:hidden from IE5/Mac */
		/* \*/
		overflow: hidden;
		/* */
	}
	
	.replace span {
		display:block;
		position:absolute;
		top:0px;
		left:0px;
		z-index:1; /*for Opera 5 and 6*/
	}

	/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~ End Main Content Area */

	/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~ Begin Menu */
	/* #sidebar rule simply creates and floats the 250px wide channel to the right */
	#sidebar {
		width: 250px;
		float: right;
		/* Below commented 31/10/05 and image placed in markup above menu */
		/* background: url(images/contact.gif) no-repeat top #fff;
		padding-top: 135px; */
	}
	
	#sidebar img {
		border: none; /* stops IE's default image border when the image is also a link */
	}
	
	ul#sidemenu {
		list-style-type: none;
	}
	
	#menu ul {
		color: #0066CC;
		font-size: 1em;
	}
	
	#sidemenu li a {
		text-decoration: none;
	}
		
	#menu p {
		margin: 0;
		text-transform: uppercase;
		text-align: center;
		color: #0066CC;
	}
	
	li.submenu1 ul, li.submenu2 ul, li.submenu3 ul, li.submenu4 ul, li.submenu5 ul, li.submenu6 ul, li.submenu7 ul
	{
		list-style-type: square;
		/* ~~~~~ I have only created 3 sub menus, but they all go here, however many */
		margin: 0.6em 0 1em 0;
	}
	
	li.submenu1 ul li, li.submenu2 ul li, li.submenu3 ul li, li.submenu4 ul li, li.submenu5 ul li, li.submenu6 ul li, li.submenu7 ul li {
		font-size: 0.8em;
	}
	
	li.title1, li.title2, li.title3, li.title4, li.title5, li.title6, li.title7 {
		background: url(images/bullet.gif) no-repeat left;
		padding-left: 1em;
	}
	

	/* ~~~~~~~~~~~ the following 3 rules deal with the right hand menu, particularly the rounded menu top and bottom */
	/* ~~~~~~~~~~~ I have chosen just two extra div's. This means fixed width, with variable height. */
	div#menutop {
		width: 220px;
		height: 10px;
		background: url(images/nav-header.gif) no-repeat top #EAF3FB;
		margin: 20px 0 0 0; /* Padding added 31/10/05 to nudge menu down slightly */
	}

	div#menu {
		width: 220px;
		background: #EAF3FB;
		padding: 1px 0; 		/* ~~~~ for reasons unknown to me, if there is no top and bottom padding, I get gaps of whitespace above and below the menu and between the top and bottom curved corners */
		margin: 0;
	}
	
	div#menufooter {
		width: 220px;
		height: 10px;
		background: url(images/nav-footer.gif) no-repeat bottom #EAF3FB;
	}
	
	div#menu a
	{
	text-decoration: none;
	}
	
	/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~ End Menu */
	
	/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~ Begin Footer */
	
	#footer {
		height: 2em;
	/*	position: absolute; */
		clear: both;
		top: 100%;
		width: 100%;
		background-color: #D5E5EC;
	}
	
	#footer ul {
		list-style-type: none;
		text-transform: uppercase;
	}
	
	#footer li	
	{
		float: left;
		margin: 0.5em 2em 0 2em;
		font-size: 0.6em;
	}
	
	#footer li a {
		color: #0066CC;
		text-decoration: none;
	}
	
	#footer	a:hover {
		color: #FFCC00;
	}

	/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~ End Footer */

/* extras */


.formbox
{
margin: 0;
margin-bottom: 5px;
padding: 5px;
padding-top: 5px;
background-color: rgb(242,242,242);
border-top: 1px solid rgb(212,212,212);
}

table
{
margin: 0;
padding: 0;
}

table.ec
{
border: 2px solid #ffffff;
}

th
{
background-color: #0066CC;

margin: 3px;

}

th p
{
margin: 0;
padding: 3px;
color: #ffffff;
text-align: left;
font-weight: bold;
}

td
{
vertical-align: top;
}

table.ec td
{
vertical-align: top;
margin-right: 2px;
}

table.contact-table
{
width: 100%;
margin-top: 10px;
border-collapse: collapse;

}

table.contact-table tr
{
border-top: 1px solid grey;
}

.table.contact-table td
{
width: 50%;
}

table.contact-table td h4
{
margin: 0;
padding: 0;
padding-bottom: 0.5em;
padding-top: 0.1em;
}

table.more-info
{
margin-top: 10px;
border-collapse: collapse;

/* background-color: rgb(250,250,250); */
}

table.more-info td
{
font-size: 0.8em;
line-height: 1em;
width: 33%;
}

table.more-info td img
{
align: right;
}


table.product-table td
{
vertical-align: middle;
}

table.product-table td h4
{
text-align: center;
margin: 0;
padding: 0;
padding-top: 5px;
padding-bottom: 5px;
}

table.product-table td h6
{
text-align: center;
margin: 0;
padding: 0;
padding-top: 5px;
padding-bottom: 5px;
}

table.product-table td p
{
text-align: center;
margin: 0;
padding: 0;
}

table.product-table td ul
{
margin-top: 0;
}

table.product-table td img
{
margin: 0;
padding: 0;
padding: 3px;
}

.contact-info
{
border-top: 1px solid grey;
display: block;
margin: 0;
padding: 0;
}

table.signup-table
{
margin: 0;
padding: 0;
margin-top: 10px;
border-collapse: collapse;

}

table.signup-table th
{
background-color: #0066CC;
color: #ffffff;
text-align: left;
padding: 3px;
font-weight: bold;
font-size: 1.2em;

}

table.signup-table tr
{
border-top: 1px solid grey;
}

.table.signup-table td
{
margin: 0;
padding: 0;
padding: 3px;
font-size: 1.2em;
}