@charset "UTF-8";


/* ============================ TEXT FORMATTING ============================== */

body {
font-family:Tahoma, Geneva, sans-serif;
font-size:12px;
background-color:#ffffff;
background-repeat:repeat-x;
background-image:url(/skin/images/bg_main.jpg);
color:#666666;
margin:0 0 0 0;
padding:0 0 0 0;
}

::-moz-selection{ background:#0093a8; color:#fff; }
::selection { background:#0093a8; color:#fff; }


h1 {
	border-bottom:1px solid #B5B6B7;
	color:#002D65;
	font-size:28px;
	font-weight:normal;
	margin:0 0 10px;
	padding:0 0 4px;
}

h2 {
	font-size:18px;
	color:#0093a8;
}

h3 {
	font-size:16px;
}

h2, h3, h4, h5 { margin-bottom:0; }
h2 + p, 
h3 + p, 
h4 + p, 
h5 + p { margin-top: 0; }


h4 {
	font-size:14px;
}

h5 {
	font-size:13px;
}

h6 {
	font-size:110%;
}

h3 , h4 , h5 , h6 {
	color:#666666;
}

a {
	color:#0093a8;
	text-decoration:none;
}

a:hover {
	text-decoration:underline
}

a img { border: none; }



/* ============================ IDs FOR DIVS ============================ */

#container {
	z-index:2; /* -- sets this div to the second layer in this case above #header_bg -- */
	position:relative; /* -- This needs to be set for positioning to take effect -- */
	width:930px;
	margin:auto;
}

body.home {
	background-image:url(/skin/images/bg_home.jpg)
}

#header {
	height:110px;
	width:930px;	
	background: url(/skin/images/cityscape.png) bottom right no-repeat;
}

#header_bg {
	z-index:1; /* -- sets this div on the first layer-- */
	position:absolute; /* -- This needs to be set for positioning to take effect -- */
	left:0; /* -- When setting the position 2 settings are needs ie left:0 and width:930px OR left: and right: 0 (this will make the item fill the width  -- */
	top:0;
	right:0;
	height:150px;
	background-image:url(/skin/images/bg_header.jpg);
	background-repeat:repeat-x;
}

/* body.home #header {} Could group the div below with with the class of body.home */
body.home #header {
	background: none;
}

#searchWrapper { 
	position: absolute; 
	right: 0;
	top: 119px;
}
#searchButton { 
	margin-top:1px;
	vertical-align:top;
	background: url(/skin/images/but_search.jpg) top left no-repeat;
	width: 22px;
	height: 20px;
	border: none;
}

/****** Styling for the Top Navigation ******/
/* Nav area */
#topnav {
	padding:0;
	margin:0 0 0 10px;
	width:730px;
	height:40px;
	list-style:none; /* This gets rid of the bullets from the next list */
	z-index:3; /* This the list level at 3 which is above all other content of the site*/
	position:relative;
}

/* Button List */
#topnav li {
	height:40px;
	line-height:36px; /* When line height is set text is automatically vertically centred */
	position:relative;
	float: left; /* This puts the bullets into a horizontal line */
	margin-right:10px;
	font-size:13px;
	text-transform:uppercase;
}

#topnav li a {
	display:block;
	color:white;
	padding: 1px 5px 2px;
}

#topnav li a:hover, #topnav li.active>a {
	color:#002e67;
	text-decoration:none;
}


/* Sub-Button List */
#topnav li ul {
	white-space: nowrap;
	padding:0;
	margin:0;
	display:none; /* This sets the list NOT to display its self */
	position:absolute;
	top:40px;
	left:0;
	border: 1px solid #afc6c9;
	border-style: none solid solid;
	list-style:none; /* This gets rid of the bullets from the left */
}

#topnav li ul a {
	line-height:18px;
	padding: 5px 10px;	
	background: white url(/skin/images/bg_nav_white.jpg) left bottom repeat-x;
	color: #666666;
}

#topnav li ul a.top {
	background: #8db8bd url(/skin/images/bg_nav_top.jpg) left bottom repeat-x;
}

#topnav li ul a:hover, #topnav li ul li.active>a {
	background: white url(/skin/images/bg_nav_blue.jpg) left bottom repeat-x;
	color: white;
}

#topnav li:hover ul {
	display:block; /* This sets the list to DISPLAY its self when hovered */
}

#topnav li ul li {
	margin:0;
	height:auto;
	float:none;  /* This tells the Sub-Botton List to no longer float left. Can't use clear because it is a list within a list */
	line-height:1em;
	font-size: 12px;
	text-transform:none;
}
/************ End of Top Navigation ************/


#main {
	position:relative;
	width:930px;
	z-index:2; /* -- sets this div to the second layer in this case above #header_bg -- */
	position:relative;
	margin:15px 0 15px -15px;
	padding:30px 45px;
	width: 870px; /* -- the width is actual 930px but we have minused the 30px of padding each side -- */
	background: url(/skin/images/bg_page.png);
	background-repeat:repeat-y;	
}
#main p, #main ul { line-height: 1.5em; }

body.home #main {
	height:403px;
	background: url(/skin/images/cityscape_home.png) bottom right no-repeat;
	margin:0;
	padding:0;
}

#main_top {
	z-index:-1; /* -- This is set to -1 so it appears behind #main_left and #main_right -- */
	width:960px;
	height:67px;
	position:absolute; /* -- Absolute position needs both x and y axis set -- */
	top:-15px;
	left:0;
	background:url(/skin/images/bg_page_top.jpg);
	background-repeat:no-repeat;
}

#main_bottom {
	z-index:-1; /* -- This is set to -1 so it appears behind #main_left and #main_right -- */
	height:15px;
	width:960px;
	position:absolute;
	left:0;
	bottom:-15px;
	background:url(/skin/images/bg_page_bottom.png);
	background-repeat:no-repeat;
}

body.home #main_top, body.home #main_bottom { display:none; }

#main_left {
	float:left;
	width:570px;
}

#main_right {
	margin-left:600px; /* -- could use float:right but using float can cause problems in layout-- */
	width:270px;
}


#main_right>*:last-child { /* -- Righthand menu blocks and adverts have a 15px bottom margin this command gets rif of that on the last advert -- */
	margin-bottom:0;
}

#main_right h2 {
	padding:10px 15px;
	position:relative;
	background: #01acbd url(/skin/images/bg_but_turquoise.jpg) left bottom repeat-x;
	color: white;
	font-size: 14px;
	font-weight:normal;
	color: white;
	margin:0;
}

#main_left.green h1 {
	padding:23px 15px;
	position:relative;
	background: #e9f4f6 url(/skin/images/bg_news_header.jpg) left bottom repeat-x;
	color: white;
	font-size: 24px;
	font-weight:normal;
	color: #0091a7;
	margin:-15px -15px 15px -15px;
	border-bottom:none;
}

#main_left.green {
	width:540px;
	padding:15px;
	background-color:#e9f4f6;
}

#home_text {
	position:absolute; 
	bottom:52px;
	left:45px;
	width:366px;	
}

#footer {
	position:relative;
	width:930px;
	margin: 15px 0 20px;
	height:15px;
}

body.home #footer {
	height:60px;
	margin-top:85px;
}


/* ============================ IDs FOR OBJECTS ============================ */

#logo {
	margin-top:18px;
}

#home_title {
	background: url(/skin/images/strapline.png) left top no-repeat;
	width:620px;
	height:82px;
	text-indent:-3000px;
	overflow:hidden;
	position:absolute; 
	border:none;
	top:52px;
	left:45px;
}

#footer_logos {
	position:absolute;
	right:-64px;
	top:492px;
}	

#footer_links {
	list-style:none;
	margin:0;
	padding:0;
	font-size: 11px;
	position: absolute;
	left: 0;
	bottom:0;
	width:770px;
}

#footer_links li {
	float: left; /* This makes the bullets into a horizontal line */
	margin-right:10px;
}

#footer_links li.left {
	margin-left:15px;
}

#footer_links li.right {
	float:right; /* On the page this makes the copyright float right */
	margin-right:15px
}

#designed_by {
	font-size: 11px;
	color: #bbbbbb;
	position: absolute;
	right: 0;
	bottom: 0;
}
#designed_by .hullabaloo { color: #a0a0a0; }
#designed_by .asterisk { color: #ffcc00; }

/* ============================ CLASSES FOR DIVS ============================ */

.clearer {
	clear:both;
}

/****** Common style for the left sub menu and news story list panel ******/
/* @Item AS Block Menu */
.blockmenu {
	list-style: none;
	padding: 0;
	margin: 0 0 15px 0;
	width: 270px;
	border-bottom: 1px solid #afc6c9;
}

/* @Item AS Block Menu - Simple */
.blockmenu.simple { }
/* @Item AS Block Menu - Complex */
.blockmenu.complex { }
/* @Item AS Block Menu - News */
.blockmenu.news { }

.blockmenu li {
	border-left: 1px solid #afc6c9;
	border-right: 1px solid #afc6c9;
	border-top: none;
	border-bottom: none;
	position: relative;
}

.blockmenu a {
	text-decoration: none;
}

.blockmenu.simple li:first-child {
	border: none;
}

.blockmenu li .corner, #main_right h2 .corner{
	position: absolute;
	top:0;
	right:0;
	z-index: 2;
	width: 38px;
	height: 38px;
	background:url(/skin/images/corner.png);
	display:block;
}

/****** Simple styling for the left sub menu ******/
.blockmenu.simple a {	
	padding:10px 15px;
	display:block;
	background: white url(/skin/images/bg_but_white.jpg) left bottom repeat-x;
	font-size: 14px;
	color: #666666;
}

.blockmenu.simple li:first-child a {
	background: #01acbd url(/skin/images/bg_but_turquoise.jpg) left bottom repeat-x;
	color: white;
}

.blockmenu.simple li.active>a, .blockmenu.simple li a:hover {
	background: #3b5085 url(/skin/images/bg_but_blue.jpg) left bottom repeat-x;
	color: white;
}

/****** Complex styling for the news story list panel ******/

.blockgreen, /* blockgreen is applied to the green blocks on righthand adverts */
.blockmenu.news li, /* .news is styling for the right column of news page  */
.blockmenu.complex li {
	background: white url(/skin/images/bg_but_green.jpg) left bottom repeat-x;
	font-size: 12px;
	color: #666666;
}

.blockgreen a,
.blockmenu.complex li a {
	padding:10px 15px;
	display:block;
	color: #666666;
}

.blockmenu.complex li a:hover .title, .blockmenu.news li a:hover .title {
	text-decoration:underline;
}


/****** Styling for the green blocks on righthand adverts */


.blockgreen {
	margin: 0 0 15px 0;
	border-left: 1px solid #afc6c9;
	border-right: 1px solid #afc6c9;
	border-top: none;
	border-bottom: 1px solid #afc6c9;
}

/****** Styling for the news page */

.blockmenu.news {
	border-top: 1px solid #afc6c9;
}

.blockmenu.news li a {
	padding:5px 15px;
	display:block;
	color: #666666;
}

.news_date { color:#0091a7; margin-top:10px; }

/*============================ CLASSES FOR SPANS ============================ */

.blockmenu.complex li .date, .blockmenu.news li .date {
	display:block;
	font-size: 10px;
	font-weight:bold;
}

/* @text AS Turquoise */
.turquoise{
	color:#0091a7;
}


.mceContentBody { background: white; }

#login_form {
	display: inline-block;
}
#login_form label {
	display: inline-block;
	margin-right: 10px;
}
#login_form input {
	margin-right: 30px;
}
#login_form div {
	margin-bottom: 5px;
	display: inline;
}
#login_form input[type=submit] {
	float: right;
}

/* @item AS Line Underneath */
.bottomLine {
	border-bottom:1px solid #B5B6B7;
	margin-bottom: 10px;
	padding-bottom: 10px;
}



/* @Text AS Align - Right */
.floatRight { float: right; }
/* @Text AS Align - Left */
.floatLeft { float: left; }

hr {
	border:none; 
	border-bottom: 1px solid #B5B6B7; 
	height:0px;
}

/* @Text AS Line Below */
.lineBelow { padding-bottom: 10px; border-bottom: 1px solid #B5B6B7;  }



/* Download item type */
p + ul.downloads { margin-top:-8px; }
ul.downloads {
	list-style:none;
	padding-left:0;
}
ul.downloads li {
	background: url(/skin/images/download.png) 5px 2px no-repeat;
	padding-left:30px;
}


/* As of May 2010, the CMS stylesheet uses Clearfix on itemareas, but that breaks this site's layout, so let's negate it. */
itemarea:after{  clear: none !important;  content: none !important;  display: none !important; }
* html itemarea { height: auto; overflow: auto; }
*+html itemarea { min-height: 0; }
/* End Clearfix negation */