/*Welcome to the CSS sheet for the WWT Web template*/

body {
	/*the background colour for the site*/background: #f1f1f1;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	/*font color*/color: #666;
	text-align: center;
	margin: auto;
}
#container{
	margin: auto;
	background: #fff;
	width: 760px;
	height: 720px;
	border-right: 1px solid #004882;
	border-left: 1px solid #004882;
}









#top{
	float: left;
	text-align: left;
	padding: 0px;
	margin: 0px;
}
#logo {
	width: 760px;
	height: 95px;

}
#menu {
    width: 760px;
	text-align: center;
    float: left;
    padding-top:10px;
    padding-bottom: 4px;
}


/*this is the coloured bar that contains the date*/
#grey_bar{
	/*change colour here....*/
	background: #004882;
	width: 760px;
	height: 20px;
}
#grey_bar_text {
	/*text-align: right;*/
	font-size: 10px;
	/*...and the colour of the text here*/color: #ffffff;
	padding-top: 4px;
	padding-left: 0px;
	padding-right: 20px;
	padding-bottom: 4px;	
}



#main {
	width: 760px;
}
#medium_pic_01 {
	width: 140px;
	height:140px;
	border: 1px solid #ccc;
}
#medium_pic_02 {
	width: 140px;
	height:140px;
	border: 1px solid #ccc;
}
#medium_pic_03 {
	width: 140px;
	height:140px;
	border: 1px solid #ccc;
}
#medium_pic_04 {
	width: 140px;
	height:140px;
	border: 1px solid #ccc;
}
	
#partner_pic_01 {
	width: 140px;
	height:140px;
}
#partner_pic_02 {
	width: 140px;
	height:140px;
}
#partner_pic_03 {
	width: 140px;
	height:140px;
}
#partner_pic_04 {
	width: 140px;
	height:140px;
}

#small_pic_01 {
	width: 132px;
	height: 88px;
	border: 1px solid #ccc;
}
#small_pic_02 {
	width: 132px;
	height: 88px;
	border: 1px solid #ccc;
}
#column_01 {
	float: left;
	width: 189px;
	height: 400px;
	border-right: 1px solid #f1f1f1;
}
#column_01_mid {
	float: left;
	width: 275px;
	height: 400px;
	border-right: 1px solid #f1f1f1;
}
#column_01_long {
float: left;
width: 189px;
height: 528px;
border-right: 1px solid #f1f1f1;
}
#column_02_400_mid {
float: left;
width: 250px;
height: 400px;
border-right: 1px solid #f1f1f1;
}
#column_02_400 {
float: left;
width: 379px;
height: 400px;
border-right: 1px solid #f1f1f1;
}
#column_02_400_long {
float: left;
width: 379px;
height: 528px;
border-right: 1px solid #f1f1f1;
}
#column_02_200 {
float: left;
width: 189px;
height: 400px;
border-right: 1px solid #f1f1f1;
}
#column_02_200_long {
float: left;
width: 189px;
height: 528px;
border-right: 1px solid #f1f1f1;
}
#column_03 {
float: left;
width: 189px;
}

#column_03_mid {
float: left;
width: 200px;
height: 400px;
}

#column_03_400_long {
float: left;
width: 379px;
height: 528px;
border-right: 1px solid #f1f1f1;
}
#column_04_long {
float: left;
width: 189px;
height: 528px;
border-left: 1px solid #f1f1f1;
}
#column_04 {
float: left;
width: 189px;
border-left: 1px solid #f1f1f1;
}
#column_content_01 {
	text-align: left;
	padding-right: 20px;
	padding-left: 20px;
	padding-top: 5px;
	padding-bottom: 10px;
	line-height: 15px;
}
#column_content_02 {
	text-align: left;
	padding-right: 20px;
	padding-left: 20px;
	padding-top: 5px;
	padding-bottom: 10px;
	line-height: 15px;
}
#column_content_03 {
	text-align: left;
	padding-right: 20px;
	padding-left: 20px;
	padding-top: 5px;
	padding-bottom: 10px;
	line-height: 15px;
}
#column_content_03_narrow {
	text-align: left;
	padding-right: 30px;
	padding-left: 20px;
	padding-top: 5px;
	padding-bottom: 10px;
	line-height: 15px;
}
#column_content_mid_03 {
	text-align: left;
	padding-right: 20px;
	padding-left: 20px;
	padding-top: 5px;
	padding-bottom: 10px;
	line-height: 15px;
}
#column_content_04 {
	text-align: left;
	padding-right: 20px;
	padding-left: 20px;
	padding-top: 5px;
	padding-bottom: 10px;
	line-height: 15px;
}
#column_content_04_wide {
	text-align: left;
	padding-right: 10px;
	padding-left: 20px;
	padding-top: 5px;
	padding-bottom: 10px;
	line-height: 15px;
}

#caption_01 {
	font-style: normal;
	color: #666;
	font-size: 10px;
	text-indent: -15px;
	padding-left: 15px;



}
#caption_02 {
	font-style: normal;
	color: #999;
	font-size: 9px;
	text-indent: -15px;
	padding-left: 15px;



}
#caption_03 {
	font-style: normal;
	color: #999;
	font-size: 9px;
	text-indent: -15px;
	padding-left: 15px;



}
#caption_04 {
	font-style: normal;
	color: #999;
	font-size: 9px;
	text-indent: -15px;
	padding-left: 15px;
}	

#caption_central {
	font-style: normal;
	color: #666;
	font-size: 11px;
	text-indent: -15px;
	padding-left: 15px;
}


#clear {
clear: both;
height: 1px;
}




#arrow {
	width:9px;
	padding: 5px;
}


#footer{
	background: #004882;
	margin-top: 10px;
	width: 760px;
	height: 40px;
	margin: auto;
	border-right: 1px solid #004882;
	border-left: 1px solid #004882;
	border-bottom: 1px solid #004882;
}	
	


#footer_content {
	text-align: center;
	padding: 14px;
	color: #999;
}


h1 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 20px;
	font-weight: normal;
	color: #33ccff;
}
h2 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 17px;
	font-weight: normal;
	color: #33ccff;
}
h3 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: bold;
	color: #33ccff;
}
strong {
font-weight: bold;
	color: #666;
}


.title {
	font-size: 17px;
	font-weight: normal;
	color: #004882;
	line-height: normal;

}
.title2 {
	font-size: 14px;
	font-weight: normal;
	color: #666;
	font-variant: normal;

}

.title3 {
	font-size: 12px;
	font-weight: bold;
	color: #666;
	font-variant: normal;

}
.note {
font-style: italic;
}

/*these are the MAIN MENU LINKS......to create the border round the text without doubling up the lines theres only a border on the left & top........then there is a seperate div for the last link 'contact' which puts borders on the right & top...YOU NEED TO CHANGE BOTH DIVS .....If you need to add links, copy and paste any of the other links but the contact one.......they should all shunt along nice and cleanly......*/
a.menu_main:link,
a.menu_main:visited,
a.menu_main:active{
	font-weight: bold;
	text-decoration: none;
	color: #004882;
	padding: 4px;
	border-top: 1px solid #004882;
	border-left: 1px solid #004882;
	border-bottom: 1px solid #004882;
	font-size: 10px;

}
a.menu_main:hover{
font-weight: bold;
text-decoration: none;
padding: 4px;
/*over colour*/color: #3399ff;
}
a.menu_main_end:link,
a.menu_main_end:visited,
a.menu_main_end:active{
	font-weight: bold;
	text-decoration: none;
	color: #004882;
	padding: 4px;
	border-top: 1px solid #004882;
	border-left: 1px solid #004882;
	border-right: 1px solid #004882;
	border-bottom: 1px solid #004882;
	font-size: 10px;

}
a.menu_main_end:hover{
font-weight: bold;
text-decoration: none;
padding: 4px;
/*over colour*/color: #3399ff;
}




/* these are for all the links in the body text with a background change on rollover*/
a.body:link,
a.body:visited,
a.body:active{
font-weight: normal;
text-decoration: none;
/*down colour*/color: #004882;
padding: 1px;

}
a.body:hover{
font-weight: normal;
text-decoration: none;
padding: 1px;
/*over colour..(white)*/color: #fff;
/*background colour*/background: #004882;
}





/*the validation and WWT links at the bottom of each page.......*/

a.footer:link,
a.footer:visited,
a.footer:active{
font-weight: bold;
text-decoration: none;
color: #999;

}
a.footer:hover{
font-weight: bold;
text-decoration: none;
color: #ccc;
}
