/*
CSS (Custom Style Sheet)
Design by Lee Baragwanath
For HD9 
Version 1.0
1/1/9

This file sets the style of text and location of items on the website.  Once set here
it changes all the html pages that refer to it.

Amendments:
4/1/9 	- Create a #center_full_image class with no padding as with the #center class
	This prevents a smaller black box being visible whilst image is downloaded 
	from server to client on first viewing.
	
	- Amend the logo and menu so that they are set to an absolute position, not padded from the left.
    
28/1/9 - Load logo and center_full images from CSS file to prevent
       right clicking.
       
3/2/9 - Add #center_full_flash for index page.
4/7/9 - Position image caption absolute, fix bug if user has old explorer.
31/12/09 - Add Container which centers all content within onto page.
31/12/09 = Add col1 and col2 for the two columns in center container. Used in Clientslist.html
*/

body {
	margin: 0px;
	padding: 0px;
	font-family: verdana, sans-serif, arial;
	font-size: 10.5px;
	color: black;
	text-align:center; 
    
}


#container
{ 
position:relative; 
width:967px; 
text-align:center; 
margin:0 auto 0; 
background-color:#CCCCCC; 
} 


/* Logo */

#logo {
    	position: absolute;  
        left: 506px;
   	    top: 10px;
   	    width: 245px;
    	height: 107px;
        background: url('hd9images/hd9.gif');
}



/* Menu */

#menu {
	position: absolute;  
 	left: 0px;
   	top: 120px;
	width: 920px;
	height: 22px;
	margin: 0px;
 
}

#menu ul {
	margin: 0px;
	padding: 0px 0px 0px 0px;
	list-style: none;
}

#menu li {
	float: left;
}

#menu a {
	background: url('hd9images/img02.gif') no-repeat left center;
	text-decoration: none;
	text-transform: lowercase;
	font-family: verdana, sans-serif, arial;
	font-size: 12px;
	color: black; 
    padding-left:22px; padding-right:20px; padding-top:0px; padding-bottom:0px
}
#menu a:hover {
	text-decoration: none;
	color: #F86E09;
}

#menu a:active {
	text-decoration: none;
	color: #F86E09;
}


#menu .first a {
	background: none;
}




/* Footer */
/* The footer is divided into two sections. The bottom section
   has a smaller font. */

#footer{
   	position: absolute;
   	left: 0px;
   	top: 530px;
   	padding: 0em;
    	width: 751px;
    	text-align: right;
    	text-decoration: none;
    	font-family: verdana, sans-serif, arial;
    	font-size: 12px;
    	color: black;
	
}


/* sets the footer text to orange colour */
.oge {
	color: #F86E09;
	
}

.footersmall {       
        line-height:-2;
    	font-size: 11px;
    	color: black;
}

/*

.footersmall {       
    	position: absolute;
   	left: 351px;
   	top: 565px;
   	padding: 0em;
    	width: 400px;
    	text-align: right;
    	text-decoration: none;
    	font-family: verdana, sans-serif, arial;
    	font-size: 11px;
    	color: black;
}

*/



#footer a {
	text-decoration: none;
	font-family: verdana, sans-serif, arial;
	font-size: 12px;
	color: black;

}


/* Panels */



#left {
 	position: absolute;
   	left: 10px;
   	top: 140px;
   	padding: 0px 0px 0px 0px;
    	width: 206px;
   	height: 351px;
    	background-color: black; 
        text-decoration: none;
	
	
}

#left_caption {
 	position: absolute;
   	left: 10px;
   	top: 494px;
   	padding: 0px 0px 0px 0px;
    	width: 206px;
   	height: 12px;
    	background-color: white; 
        text-decoration: none;
		text-align:left;
	background-color: white;
	font-family: verdana, sans-serif, arial;
	font-size: 9px;
	color: #000000; 

	
}

#right_caption {
 	position: absolute;
   	left: 755px;
   	top: 494px;
   	padding: 0px 0px 0px 0px;
    	width: 206px;
   	height: 12px;
    	background-color: white; 
        text-decoration: none;
		text-align:left;
	background-color: white;
	font-family: verdana, sans-serif, arial;
	font-size: 9px;
	color: #000000; 

	
}
	

#fix_old_explorer_bug_left
{
 	position: absolute;
   	left: 10px;
   	top: 491px;
   	padding: 0px 0px 0px 0px;
    	width: 206px;
   	height: 3px;
    	background-color: white; 

	
}
	
#fix_old_explorer_bug_right
{
position: absolute;
   	left: 755px;
     	top: 491px;
   	padding: 0px 0px 0px 0px;
    	width: 206px;
   	height: 3px;
    	background-color: white; 

	
}
#center {
 	position: absolute;
 	background-color: black;  
 	left: 220px;
   	top: 140px;
   	width: 475px;
    height: 291px;
   	padding: 30px 28px 30px 28px;
    
}

#col1 {
 	position: absolute;
 	background-color: black;  
 	left: 0px;
   	top: 0px;
   	width: 235.5px;
    height: 291px;
   	padding: 30px 14px 30px 28px;
    
}
#col2 {
 	position: absolute;
 	background-color: black;  
 	left: 263.5px;
   	top: 0px;
   	width: 234px;
    height: 291px;
   	padding: 30px 0px 30px 14px;
    
}



#center a {
	text-decoration: none;
	font-family: verdana, sans-serif, arial;
	color: #F86E09;

}



#center img {
	border:0px;
}

/* amendment start 4/1/9 
#center_full_image {
	border:0px;
	position: absolute;
 	background-color: black;  
 	left: 220px;
   	top: 140px;
   	width: 531px;
    height: 351px;
	padding: 0 0 0 0;
    background-image:url('hd9images/home.jpg');
}


#center_image_name {
                   position: absolute;
                   left: 220px;
                   top: 491px;
                   font-size: 9px;

 }

amendment end 4/1/9 */

/* amendment start 3/2/9 */
#center_full_flash {
	border:0px;
	position: absolute;
 	background-color: white;  
 	left: 220px;
   	top: 140px;
   	width: 531px;
    height: 368px;
	padding: 0 0 0 0;
}

/* amendment end 3/2/9 */

#right {
	position: absolute;
   	left: 755px;
   	top: 140px;
   	padding: 0em;
    	width: 206px;
    	height: 351px;
    	background-color: black; 
}


/* This sets the size of the flash gallery, and puts a margin on the left and right */
/* margin : top right bottom left */
#flash_gallery {
	border:0px;
	position: absolute;
 	background-color: black;  
 	left: 10px;
   	top: 140px;
   	width: 951px;
    height: 351px;
	padding: 0 0 0 0;		
}

.twitter_icon {
        position: absolute;  
        left: 563px;
   	top: 605px;
        width : 180px;
        font-size : 11px;
        text-align : centre;
        padding : 0 0 0 10px;
        text-decoration : none;
}
.twitter_icon a {
        text-decoration : none;
        font-family: verdana, sans-serif, arial;
	color: #000000;
}
.twitter_icon a:hover {
        text-decoration : none;
        font-family: verdana, sans-serif, arial;
	color: #F86E09;
}
.agelogo {
        position: absolute;  
        left: 113px;
   	top: 345px;
        width : 180px;
        font-size : 11px;
        text-align : centre;
        padding : 0 0 0 10px;
        text-decoration : none;
}