/*defines the properties for the div id "Main", this is the parent div that will wrap around every other div on the page*/
#main{
	width: 770px;
	height: auto;
	background-image: url('images/middle.gif');
	background-repeat: repeat-y;
	margin: 0 auto; /*Makes the div appear centrally in the body element, thus making the content appear centrally*/
	vertical-align: center;
	clear: both;
	float: none;
	}

/*defines the properties for the div id "banner", this div is used to hold a banner image the width of the div*/ 	
#banner{
	width: 770px;
	height: auto;
	vertical-align: center;
}	
/*defines the properties for the div id "content wrapper", its used as a parent div to all content realted divs on the page (it sits within the div main)*/
#content-wrapper{
	position: relative;
	left: 29px;
	top: 0px;
	width: 735px;
	height: auto;
	vertical-align: center;
	float: left; /*this div is floated to allow this div to wrap around the divs within it this div*/
	margin: 0 auto; /*Makes this div appear centrally within the div "#main" */
}	

/*leftbox is a div class used to create a light green coloured box to place site content in, it will be 350 pixels wide and be floated the left of the page, it will sit within "content wrapper"*/	
.leftbox{
	width: 350px;
	float: left; /*floats a div with this class to the left of the div "content-wrapper"*/
	height: 100%;
	font-family: Arial, Sans-serif;
	font-size : 11pt;
	color: #303030;
	text-align: right;
	border-top: solid 5px;
	border-bottom: solid 5px;
	border-color: #c4df9b;
	
}
/*rightbox is a div class used to create a light green coloured box to place site content in, it will be 350 pixels wide and be floated the right of the page, it will sit within "content wrapper"*/	
.rightbox{
	width: 350px;
	float: right; /*floats a div with this class to the right within the div "content-wrapper"*/
	height: 100%;
	font-family: Arial, Sans-serif;
	font-size : 11pt;
	color: #303030;
	text-align: left;
	border-top: solid 5px;
	border-bottom: solid 5px;
	border-color: #c4df9b;
}
/*center is a div class used to create a light green coloured box to place site content in, it will be 725 pixels wide and although floated left, it will appear central in the page, it will sit within "content wrapper"*/	
.center{
	font-family: arial, verdana, "times new roman";
	font-size : 10pt;
	color: #000000;
	background-color: transparent;
	width: 725px;
	padding-left: 5px;
	padding-right: 5px;
	float: left; /*although this div is floated left, it takes up the width of the div "content wrapper" therefore it appears central within "content-wrapper"*/	
	border-top: solid 5px;
	border-bottom: solid 5px;
	border-color: #c4df9b;
}

/* div class used to center text*/
.textcenter{
	text-align: center; /*class applied to certain divs to achieve centrally aligned text*/
	}

/* div class to be used to define properites to work in conjunction with div classes "leftbox", "rightbox" and "center" when being used in the sites 'popup' window.*/
.popup{
	padding: 5px;
	border-left: solid 2px;
	border-right: solid 2px;
	background-color: #ecfad7;
	border-color: #c4df9b;
	margin-top: 10px;
	height: 100%;
	}

/* <p> tags will be formatted as 10 pt text, in arial or sans serif and will be aligned left.*/
p{
	font-family: arial, sans-serif;
	font-size: 10pt;
	color: #3c3c3c;
	text-align: left;
}

/*defines the properties for the div id "footer", this div is used to hold a footer image the width of the div*/ 
#footer{
	width: 770px;
	height: auto;
	/*margin: 0 auto;*/
}


/* the colour of a <a> tag once visited*/
a:visited {
	color: #333300;
}
/*the appearance of an <a> tag when hovered over*/
a:hover {
	color: #333300;
	text-decoration: underline;
}
/*how <h3> tags will be formatted*/
h3 {
	margin: 0;
	padding: 0 0 .3em;
}

/*list will be used for the main navigation of the site*/
.pane-list {
	margin: 0;
	padding: 0;
	list-style: none;
}
/*defines how each list item of "pane-list" will be formatted*/
.pane-list li {
	background: #ecfad7;
	padding: 7px 20px 7px;
	border-bottom: solid 1px #c4df9b;
	cursor: pointer;
	width: 309px;
}
/*defines how a list item will appear when hovered over*/
.pane-list li:hover {
	background: #f6ffe9;
	width: 309px;
}

/*list will be used for the image acrousel*/
.imgscroller {
	margin: 0;
	padding: 0;
	list-style: none;
}
/*defines how each list item of "imgscroller-list" will be formatted*/
.imgscroller li {
	background: #FFFFFF;
	padding-right: 15px;
	padding-left: 15px;
	cursor: pointer;
	width: auto;
}
/*defines how a list item will appear when hovered over*/
.imgscroller li:hover {
	width: auto;
}

/*sets the height and background colour of the <body> tag*/	
BODY{
	background-color: #000000;
	height: 100%;
	}
/*IMG tag hack for internet explorer (removes space between images)*/
IMG{
	vertical-align : bottom;
	}
h3{
	margin: 0;
	padding: 0 0 .1em;
	font-family:  sans-serif, arial, Helvetica;
	font-size: 12pt;
	font-weight: bold;
}

/*headline is a div class used to display text without being in a green content box*/
.headline{
font-family: arial, sans-serif;
font-size: 10pt;
color: #000000;
padding: 20px;
text-align: left;
}


/*Following CSS not written by me, it was written by Adrian "yEnS" Mato Gondelle to work with the popup box 
/*div that covers the whole page and darkens when the popup box is shown*/	
#backgroundPopup{
display:none;
position:fixed;
_position:absolute; /* hack for internet explorer 6*/
height:100%;
width:100%;
top:0;
left:0;
background:#000000;
border:1px solid #cecece;
z-index:19;
}
/*properties of the popup box*/
#popupContact{
display:none;
position:fixed;

_position:absolute; /* hack for internet explorer 6*/
height:auto;
width:770px;
background:#FFFFFF;
border:2px solid #cecece;
z-index:20;
padding:12px;
font-size:13px;
}
/*defines how h1 tags will be formatted within the popup box*/
#popupContact h1{
text-align:left;
color:#3c3c3c;
font-family: arial, verdana, sans-serif;
font-size:22px;
font-weight:800;
border-bottom:1px dotted #D3D3D3;
padding-bottom:2px;
margin-bottom:20px;
}

/* popup close button properties */
#popupContactClose{
font-size:14px;
line-height:14px;
right:-16px;
top:-14px;
position:absolute;
color:#6fa5fd;
font-weight:800;
display:block;
}


a{
cursor: pointer;
text-decoration:none;
border: none;
}


/*SlideShow */

#slideshow {
    position:relative;
    height:350px;
}

#slideshow DIV {
	position:absolute;
	top:20px;
	left:0;
	z-index:8;
	opacity:0.0;
	height: 327px;
	background-color: #FFF;
}

#slideshow DIV.active {
    z-index:10;
    opacity:1.0;
	height: 300px;
}

#slideshow DIV.last-active {
    z-index:9;
}

#slideshow DIV IMG {
    height: 293px;
    display: block;
    border: 0;
    margin-bottom: 10px;
}