@charset "UTF-8";
/* CSS Document */

/* Any instance of " *html body #examplediv " are hacks for Internet Explorer 6 ---*/

/*-----------GLOBAL LAYOUT STYLING-----------*/

body {
font-family:Arial, Helvetica, sans-serif; /*changes font for whole site*/
font-size:62.5%; /*DO NOT TOUCH*/
margin:0px;/*DO NOT TOUCH*/
padding:0px;/*DO NOT TOUCH*/
text-align:center;/*centres container div on page*/
background-color:#e1eaf4;
}

#container {
width:800px;/*Width of the central area*/
margin:0px auto;/*centres container on page*/
text-align:center; /*re-aligns text*/
background:url(../layoutimages/containerbck.jpg) repeat-y; /*background color, can also be a repeated image*/
padding:0px;/*IE will add padding to width, adjust width to suit*/
}

/*-------Header Styles---------------*/

#header {
width:800px; /*width should be same as graphic image*/
height:283px; /*height should be the same as graphic image*/
margin:0px auto; /*Aligns header graphic*/
padding:0px;
}

#header a img { border:none;}


/*----Content Wrapper, main body goes inside here----*/

#contentwrapper {
width:780px; /*wrapper width*/
margin:0px 10px; /*Displaces content area from div above below and container walls*/
padding:10px 0px;
font-size:1.2em;
}

/*-------------------header teag styling----------------------*/

h1 {
height:24px; /*height of the tag, should be same as icon size*/
font-size:18px; 
margin:0px;
padding:4px 0px 0px 25px; /*padding allowing for the icon image*/
color:#333333; /*font colour*/
border-bottom:1px solid #f2f2f2;
}

/* each header class ads a unique styling to the that header, just include class=".classname" next to you h1 tag e.g <h1 class=".heart">*/
h1.heart {background:url(../layoutimages/h1icon.gif) no-repeat 0 50%; /*individual icons for h1 tags*/}
h1.cross {background:url(../layoutimages/h1cross.gif) no-repeat 0 50%;}

h2 {
font-size:14px;
margin:0px 0px;
padding:5px 0px;
text-align:left;
color:#333;
}

/*---------------------Navigation Bar ------------------------------------------*/

#navigation {
width:790px;
height:30px;
margin:10px 5px;
padding:0px;
}


ul#navlist
{
margin-left: 0;
padding-left: 0;
white-space: nowrap;
}

#navlist li
{
display: inline;
list-style-type: none;
}

#navlist a { padding: 5px 10px; }

#navlist a:link, #navlist a:visited
{
color: #ff3366;
background-color: #f2f2f2;
text-decoration: none;
}

#navlist a:hover
{
color: #fff;
background-color:#FF6699;
text-decoration: none;
}



/*-------------- Drop Down Navigation Styling--------------*/

#nav {
	float: left;
	width: 72em; /*adjusts bar length*/
	list-style: none;
	line-height: 1;
	font-weight:normal;
	font-size:1.1em;
	padding:0;
	background-color:#F2f2f2;
	margin: 0 0 1em 0;
}

#nav ul {
	float: left;
	width: 72em;
	list-style: none;
	line-height: 1;
	font-weight:normal;
	padding: 0;
	margin: 0 0 1em 0;
	background-color:#F2f2f2;
	z-index:20;
}

#nav a {
	display: block;
	width: 9em;
	w\idth: 8em;
	color: #666;
	text-align:left;
	text-decoration: none;
	padding: 0.5em;
}

#nav a:hover {
color:#FFFFFF;
}


#nav li {
	float: left;
	padding: 0;
	width: 9em;
}

*html #nav li {
width:0px;
}

#nav li ul {
	position: absolute;
	left: -999em;
	height: auto;
	width: 10em;
	w\idth: 9em;
	font-weight: normal;
	margin: 0;
}

#nav li li {
	padding-right: 0em;
	width: 9em
}


#nav li ul a {
	width: 10em;
	w\idth: 8em;
	color:#666;
	border-bottom:1px solid #fff;
}

#nav li ul ul {
	margin: -1.75em 0 0 8em;
}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
	left: -999em;
}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
	left: auto;
}

#nav li:hover, #nav li.sfhover {
	background:#ff6699;
	color:#FFFFFF;
}




/*-------------------everything below will style the left bars for all layouts
--------------------------------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------------------------------*/

/*-----Side Bar ---------*/

#sidebar {
float:left;
width:170px; /*this will effect your #main right margin size*/
padding:0px; /*pads content inside div*/
margin-left:20px;
padding-left:10px;
color:#333333; /*text color*/
background-color:#e1eaf3;
}



#sidebar p {
text-align:left; /*text positioning*/
font-size:100%; /* percentage scales based on size declared in #contentwrapper*/
margin:0px;
padding:5px 15px 5px 5px;
}

#sidebar a {color:#FF6699; text-decoration:underline;}
#sidebar a:hover {color:#666666;text-decoration:none;}

/*sidebar navigation list*/

#sidebar dl {
margin:0px;
padding:0px 0px 25px 0px;
background:url(../layoutimages/sidebarbottom.gif) no-repeat bottom;
}

#sidebar dt {
text-align:left; /*Text align center*/
font-size:120%; /*Percentage scales based on size declared in #contentwrapper*/
font-weight:bold; /*this makes the font bold*/
color:#333333; 
margin:0px;
background:url(../layoutimages/sidebartop.gif) no-repeat;
padding:10px  0px 25px 0px ;
}

#sidebar dd {width:180px; /*width of side bar minus margins and padding*/
font-size:90%; /*font size for links or text*/
padding:0px; 
margin:0px;
text-align:left; /*aligns the page text*/
}

#sidebar dd a {color:#336699; display:block; padding:10px 0px 10px 10px; text-decoration:none; }

#sidebar dd a:hover { color:#333; background-color:#f5f5f5; background:url(../layoutimages/sideover.jpg) #f5f5f5 no-repeat 0 50%;}

/*-----Left ---------*/

#leftbar {
float:left;
width:150px; /*this will effect your #main right margin size*/
padding:10px; /*pads content inside div*/
background-color:#f2f2f2;
color:#333333; /*text color*/
}

#leftbar p {
text-align:left; /*text positioning*/
font-size:90%; /* percentage scales based on size declared in #contentwrapper*/
}

#leftbar a {color:#FF6699; text-decoration:underline;}
#leftbar a:hover {color:#666666;text-decoration:none;}

/*sidebar navigation list*/

#leftbar dl {
margin:5px 0px;
padding:10px 0px;
}

#leftbar dt {
text-align:left; /*Text align center*/
font-size:120%; /*Percentage scales based on size declared in #contentwrapper*/
font-weight:bold; /*this makes the font bold*/
color:#333333; 
margin:0px;
padding:3px 0px;
height:24px;
}

#leftbar dd {width:140px; /*width of side bar minus margins and padding*/
font-size:90%; /*font size for links or text*/
border-bottom:1px solid #fff; /*styles separator*/
padding:0px; 
margin:0px;
text-align:left; /*aligns the page text*/
}

.info {background:url(../layoutimages/h1info.gif) no-repeat 0 50%; padding-left:25px;}
.login {background:url(../layoutimages/h1log.gif) no-repeat 0 50%; margin:10px 5px 0px 5px; padding:3px 0px 3px 25px; height:20px; font-size:120%; /*Percentage scales based on size declared in #contentwrapper*/
font-weight:bold; /*this makes the font bold*/
color:#333333; }


#leftbar dd a {colour:#333; display:block; padding:10px; }

#leftbar dd a:hover { color:#FFFFFF; background-color:#99CCFF;}


/*-----Right Bar ---------*/

#rightbar {
float:right;
width:90px; /*this will effect your #main right margin size*/
padding:10px; /*pads content inside div*/
background-color:#f2f2f2;
color:#333333; /*text color*/
}

#rightbar p {
text-align:left; /*text positioning*/
font-size:90%; /* percentage scales based on size declared in #contentwrapper*/
}

#rightbar a {color:#FF6699; text-decoration:underline;}
#rightbar a:hover {color:#666666;text-decoration:none;}

/*sidebar navigation list*/

#rightbar dl {
margin:5px 0px;
padding:10px 0px;
}

#rightbar dt {
text-align:left; /*Text align center*/
font-size:120%; /*Percentage scales based on size declared in #contentwrapper*/
font-weight:bold; /*this makes the font bold*/
color:#333333; 
margin:0px;
padding:5px 10px;
}

#rightbar dd {width:80px; /*width of side bar minus margins and padding*/
font-size:90%; /*font size for links or text*/
border-bottom:1px solid #fff; /*styles separator*/
padding:0px; 
margin:0px;
text-align:left; /*aligns the page text*/
}

#rightbar dd a {colour:#333; display:block; padding:10px; }

#rightbar dd a:hover { color:#FFFFFF; background-color:#99CCFF;}


/*-------------------everything below will style the main content area stuff for all layouts
--------------------------------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------------------------------*/

/*------------THIS IS FOR A TWO COLUMN LAYOUT--------------*/

/*-----------Main Content Aread-----------------------*/

#main {
margin:0px 20px 0px 230px; /* the left padding includes the width of the sidebar plus extra length for a spacer gap*/
text-align:left;
padding:10px 20px;
background:url(../layoutimages/contenttop.gif) no-repeat #FFFFFF top left;
} 

/**html #main {margin: 0px 20px 0px 0px;} hack for internet explorer handling width's*/

#main p {line-height:1.3em;text-align:justify; /*makes text touch both sides of div, like a magazine styling*/}

#main a img {border:1px solid #3366cc;}
#main a:hover img {border:1px solid #0099FF;}

#main a {color:#0066CC;text-decoration:underline;}
#main a:hover {color:#666666;text-decoration:none;}
#main ul {margin:3px 0px;padding:0px 10px; list-style:circle; /* Styles list icons*/}

#main li {
margin:3px 0px;
padding:0px;
}

#main ol {
list-style-type:decimal; /* Styles list icons*/
margin:3px 0px;
padding:0px 10px 0px 15px;
}


/*--------------THIS IS FOR A A SINGLE COLUMN LAYOUT---------------*/


#single {
margin:0px 10px; /* this gives text padding away from the container*/
text-align:left;
} 

/**html #single {margin: 0px 20px 0px 0px;} hack for internet explorer handling width's*/

#single p {line-height:1.3em;text-align:justify; /*makes text touch both sides of div, like a magazine styling*/}

#single a img {border:1px solid #fff;}
#single a:hover img {border:1px solid #0099FF;}

#single a {color:#0066CC;text-decoration:underline;}
#single a:hover {color:#666666;text-decoration:none;}
#single ul {margin:3px 0px;padding:0px 10px; list-style:circle; /* Styles list icons*/}

#single li {
margin:3px 0px;
padding:0px;
}

#single ol {
list-style-type:decimal; /* Styles list icons*/
margin:3px 0px;
padding:0px 10px 0px 15px;
}

/*--------------THIS IS FOR A A THREE COLUMN LAYOUT---------------*/


#middle {
margin:0px 120px 0px 180px; /* the left padding includes the width of the sidebar plus extra length for a spacer gap*/
text-align:left;
} 

/**html #middle {margin: 0px 20px 0px 0px;} hack for internet explorer handling width's*/

#middle p {line-height:1.3em;text-align:justify; /*makes text touch both sides of div, like a magazine styling*/}

#middle a img {border:1px solid #fff;}
#middle a:hover img {border:1px solid #0099FF;}

#middle a {color:#0066CC;text-decoration:underline;}
#middle a:hover {color:#666666;text-decoration:none;}
#middle ul {margin:3px 0px;padding:0px 10px; list-style:circle; /* Styles list icons*/}

#middle li {
margin:3px 0px;
padding:0px;
}

#middle ol {
list-style-type:decimal; /* Styles list icons*/
margin:3px 0px;
padding:0px 10px 0px 15px;
}


/*----------------Image Styling----------------*/

.left {
float:left; /*The important bit, floats image left*/
width:150px;
height:150px;
margin:0px 10px 5px 0px;
border:1px solid #CCCCCC;
}

.right {
float:right; /*The important bit, floats image left*/
background-color:#D5DDFF;
border:1px solid #ccc;
padding:4px;
margin:0px 0px 5px 10px;
}


/*------------------------------Enquiry Form
-------------------------------------------------------------------------*/
/*contactform2*/

#EnqSender, #EnqCompany, #EnqReferSite, #EnqEmailSender, #EnqSubject, #EnqDetails{width:350px;}
#contactform {margin:0px 20px;}
#contactform p{font-size:1.2em; color:#000; margin:3px 10px;padding:5px;}
#contactform legend{font-size:1.4em; font-weight:bold; color:#333;}
#contactform fieldset {border:1px solid #f2f2f2;padding:5px 30px;}



/*---------------Footer------------------------------*/

#footer {
clear:both; /*Clear floats*/
text-align:center; /* aligns footer text*/
height:30px; /*footer height*/
font-size:90%; /*scales up footer font size*/
margin:10px 0px;
padding:0px;
}

#footer p {padding:3px 0px; color:#666;}
#footer a {color:#0099CC; text-decoration:underline;}
#footer a:hover {color:#000; text-decoration:none;}