/* Reset */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td {
	margin:0;
	padding:0;
	border:0;
	outline:0;
	font-size:100%;
	vertical-align:baseline;
	background:transparent;
}
body {
	line-height:1;
}
ol,ul {
	list-style:none;
}
blockquote,q {
	quotes:none;
}
blockquote:before,blockquote:after,q:before,q:after {
	content:'';
	content:none;
}
:focus {
	outline:0;
}
ins {
	text-decoration:none;
}
del {
	text-decoration:line-through;
}
table {
	border-collapse:collapse;
	border-spacing:0;
}
/* Layout */
html {
	height: 100%;
}
body {
	min-height: 101%;
	text-align: center;
	color: #666;
	background-color: #fff;
}
#container {
	width: 980px;
	margin: 0 auto;
	border: 0;
	text-align: left;
}
#container_logo_strap, #container_topnav, #container_header, #container_breadcrumbs, #container_content, #container_banner_bottom2, #container_footer {
	width: 100%;
	float: left;
	clear: both;
}
#logo {
	width: 160px;
	float: left;
	overflow: hidden;
}
#strapline {
	width: 800px;
	float: left;
	overflow: hidden;
	text-align: right;
}
#topnav, #header, #breadcrumbs {
	width: 100%;
	float: left;
	overflow: hidden;
}
#left {
	width: 240px;
	float: left;
	padding: 2.5em 0 0 0;
	overflow: hidden;
}
/* home page layout is different */
#home_page #left {
	width: 480px;
	padding: 1em 0 0 0;
}
#maincontent1col {
	width: 480px;
	float: left;
	overflow: hidden;
}
#maincontent2col {
	width: 720px;
	float: left;
	overflow: hidden;
}
/* home page layout is different */
#home_page #maincontent2col {
	width: 480px;
}
#banner_top {
	width: 100%;
	float: left;
	overflow: hidden;
}
#user1, #user3 {
	width: 50%;
	float: left;
	clear: left;
	overflow: hidden;
}
#content {
	width: 100%;
	float: left;
	overflow: hidden;
}
#user2, #user4 {
	width: 50%;
	float: right;
	clear: right;
	overflow: hidden;
}
#banner_bottom1 {
	width: 100%;
	float: left;
	overflow: hidden;
}
#banner_bottom2 {
	width: 100%;
	float: left;
	overflow: hidden;
}
#right {
	float: left;
	width: 240px;
	padding: 2.5em 0 0 0;
	overflow: hidden;
} 
#footer {
	width: 100%;
	float: left;
	overflow: hidden;
	border-top: 1px solid #999;
	text-align: center;
}
.padding{
	padding: 10px;
	overflow: hidden;
}
#strapline .padding {
	padding: 50px 10px 10px 10px;
	overflow: hidden;
}
#topnav .padding {
	padding: 10px 10px 0 10px;
	overflow: hidden;
}
#header .padding {
	padding: 0 10px 10px 10px;
	overflow: hidden;
}
#footer .padding {
	padding: 5px 10px;
	overflow: hidden;
}
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clearfix {
	display: inline-block;
}
/* Hides from IE-mac \*/
* html .clearfix {
	height: 1%;
}
.clearfix {
	display: block;
}
/* End hide from IE-mac */

/* Fonts, font-sizes and margins ****************************************************************************************/
@font-face {
    font-family: 'MuseoSlab500Regular';
    src: url('../fonts/Museo_Slab_500-webfont.eot');
    src: url('../fonts/Museo_Slab_500-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Museo_Slab_500-webfont.woff') format('woff'),
         url('../fonts/Museo_Slab_500-webfont.ttf') format('truetype'),
         url('../fonts/Museo_Slab_500-webfont.svg#MuseoSlab500Regular') format('svg');
    font-weight: normal;
    font-style: normal;
}
body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 75%; /* 75% x 16px = 12px */
	line-height: 1.5em; /* 1.5 x 12px = 18px */
}
p {
	font-size: 1em; /* 1 x 12px = 12px */
	margin: 0.75em 0; /* total of 1.5 x 12px = 18px */
	line-height: 1.5em; /*1.5 x 12px = 18px */
}
h1, .componentheading, .contentheading, h2, h3, h4, h5, h6 {
	font-family: 'MuseoSlab500Regular', Arial, Helvetica, sans-serif;
	font-weight: normal;
}
h1, .componentheading, .contentheading {
	font-size: 2em; /* 2 x 12px = 24px */
	margin: 0.5em 0 0.5em 0; /* total of 1 x 24px = 24px */
	line-height: 1em; /* 1 x 24px = 24px */
	color: #777;
}
h2, h2.contentheading {
	font-size: 1.5em; /* 1.5 x 12px = 18px */
	margin: 0.5em 0; /* total of 1 x 18px = 18px */
	line-height: 1.2em; /* 1.2 x 18px = 22px */
	color: #008fc3;
}
h3, h4, h5, h6 {
	font-size: 1.2em; /* 1.2 x 12px = 14px */
	margin: 0.75em 0; /* total of 1.5 x 14px = 21px */
	line-height: 1.5em; /*1.5 x 14px = 21px */
	font-weight: bold;
	color: #008fc3;
}
blockquote, ul, ol, dl, address {
	margin: 1em 0; 
}
ul {
	list-style-type: circle;
}
form, label, fieldset {
	margin: 0.5em 0;
}
fieldset { 
	padding: 0; 
}
dd { 
	margin-left: 2em;
}
li {
	margin: 0.5em 0 0.5em 2em;
}
/* Set width of login form inputs or default sizes can push them too wide */
#mod_login_username, #mod_login_password, #mod_search_searchword {
	width: 100%;
}
a {
	color: #008fc3;
	text-decoration: underline;
}
a:hover {
	color: #333;
	text-decoration: underline;
}
.leading {
}
/* add height hack for Internet Explorer if style .leading */

table.pagenav {
	width: 100%;
	text-align: center;
}
table.pagenav a {
	font-size: 0.9167em; /* 11px */
}
ul.pagination li {
	display: inline;
	list-style-type: none;
}
#footer, #footer p, .small, .createdate, .modifydate, .mosimage_caption {
	font-size: 0.9167em; /* 11px */
	color: #999;
}
#footer .credits {
	margin: 8em 0 0 0;
	font-size: 0.909em; /* 0.909x11 = 10px */
}
/* Images - general */
img {
	border: 0;
}
/* since #maincontent2col is quite wide, limit width of text elements inside this container */
#maincontent2col p, #maincontent2col h1, #maincontent2col h2, #maincontent2col h3, #maincontent2col h4, #maincontent2col h5, #maincontent2col h6, #maincontent2col ul, #maincontent2col ol, #maincontent2col table, #maincontent2col form {
	width: 460px;
} 
/* images (some with captions) and pull-quotes are inside articles, so need to be floated right */
#maincontent1col img, #maincontent2col img {
	float: right;
	clear: right;
	width: 220px;
	margin: 0 0 20px 0; /* no right/left margin or interferes with caption alignment; and not needed for gutter because text etc in maincontent has fixed width */
}
#maincontent1col .wf_caption, #maincontent2col .wf_caption {
	float: right;
	width: 220px;
	margin: 0; /* no right/left margin or interferes with caption alignment; some pics have captions and some don't; and IE7 doesn't cope well with left/right margins on both */
	padding: 0;
	font-style: italic;
	font-weight: bold;
}
#maincontent1col p.quote, #maincontent2col p.quote {
	float: right;
	clear: right;
	width: 180px;
	margin: 0 0 20px 0;
	padding: 20px 20px 100px 20px;
	text-align: center;
	font-family: 'MuseoSlab500Regular', Arial, Helvetica, sans-serif;
	font-size: 1.5em;
	color: #008fc3;
	background: url(../images/curve.png) center bottom no-repeat;
}
/* second and subsequent quotes on same page have no curve bgd; in article, apply class "quote" and class "plain" to these paras */
#maincontent1col p.quote.plain, #maincontent2col p.quote.plain {
	background: none;
}

/* modules */
.moduletable {
	margin-bottom: 1em;
	border: 0;
	padding: 0;
}
.moduletable h3 {
	margin: 0 0 0 0; /* remember to cancel out .moduletable padding if any */
	padding: 0 0 5px 0;
	border-bottom: 1px solid #999;
	text-align: left;
	font-size: 1em;
	color: #666;
	background: #fff;
}
/* Slideshow on home page */
.moduletable_slideshow {
	display: none; /* hide slideshow container by default; show if JS on */
}
.moduletable_alt_content {
	display: block; /* show alternative content by default; hide if JS on */
}
/* home page boxes */
.moduletable_home_page_boxes img {
	float: left;
	clear: none;
	margin: 0;
	border: 0;
	padding:0;
}
.moduletable_home_page_boxes img.first {
	margin: 0 20px 0 0;
}
/* Social links */
.moduletable_social {
	margin: 1em 0;
	border: 0;
	padding: 5px 0;
}
.moduletable_social img {
	border: 0;
}
#linkedin_share {
	margin: 0 10px 10px 0; /*margin right/bottom in case these divs wrap to 2 lines */
	float: left;
	clear: none;
}
/* Contact page */
div.contact address p {
	margin: 0;
	font-style: normal;
}
div.contact form {
	/*margin: 1em 0 0 0;*/
	border: 1px solid #999;
	padding: 5px;
}
div.contact label {  
	display: block; 
	font-size: 0.9167em; /* 11px */
}
div.contact input {  
	margin: 0;
	padding: 0;
}
div.contact textarea {  
	width: 90%;
}
div.contact input#contact_email_copy  {  
	margin: 1em 0 0 0;
	padding: 0;
}
div.contact button {  
	margin: 1em 0 0 0;
	padding: 0;
}

/* form validation */
.invalid {
	border-color: #ff0000;
}
label.invalid {
	color: #ff0000;
}

/* form success message */
#system-message {
	color: #ff0000;
	font-weight: bold;
}
#system-message dt {
	display: none;
}
#system-message dd {
	margin: 0;
	padding: 0;
}
#system-message ul {
	margin: 0;
	padding: 5px;
	border: 1px solid #ff0000;
	background-color: #eeeeee;
}
#system-message ul li {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

/* Menu styling */
/* Top menu */
/* based on horiz5 menu - simple tabs - light grey.
Uses <ul> float:left; <li> display:inline; <a> display:block, float:left.
Can only align left.
Can wrap - not pretty but usable.
Use for short menus only - where there will be no wrapping even after font re-sizing.
Cannot be used for multi-level menus with sub-menus - nested lists are set to display:none *************************************/
.moduletable_topmenu ul {
	float: left;
	clear: left;
	width: 100%;
	margin: 0;
	/*border-top: 1px solid #ccc;
	border-right: 1px solid #666;
	border-left: 1px solid #ccc;*/
	border-bottom: 1px solid #fff;
	padding: 0;
	background-color: #005675;
}
.moduletable_topmenu ul li {
	display: inline;
	margin: 0;
	padding: 0;
	list-style-type: none;
}
.moduletable_topmenu ul li a {
	display: block;
	float: left;
	margin: 0;
	border-right: 1px solid #fff;
	padding: 0.5em 1em;
	line-height: 1.5em; /* display: block so total height is line-height plus padding = 2em */
	color: #fff;
	background-color: #005675;
	font-family: 'MuseoSlab500Regular', Arial, Helvetica, sans-serif;
	letter-spacing: 1px;
	text-decoration: none;
}
.moduletable_topmenu ul li a:hover {
	color: #fff;
	background-color: #008fc3;
	text-decoration: none;
}
/* Current page styling */
.moduletable_topmenu ul li#current a, .moduletable_topmenu ul li.active a {
	color: #fff;
	background-color: #9a9b9d;
	text-decoration: none;
}
/* Sub-menus */
.moduletable_topmenu ul ul {
	display: none;
}

/* Sec menu - left */
.moduletable_menu {
	margin-bottom: 1em;
	border: 0;
	padding: 0;
}
.moduletable_menu h3 {
	margin: 0 0 0 0; /* remember to cancel out .moduletable_menu padding if any */
	border-bottom: 1px solid #999;
	padding: 0 0 5px 0;
	text-align: left;
	font-size: 1em;
	color: #666;
	background: #fff;
}
.moduletable_menu ul {
	margin: 0;
	padding: 0;
}
.moduletable_menu li {
	margin: 0;
	padding: 4px 0;
	border-bottom: 1px dotted #ccc;
	list-style-type: none;
}
.moduletable_menu li a {
	display: block;
	width: auto;
	padding: 0 0 0 5px;
	border-left: 1px solid #fff;
	color: #999;
	text-decoration: none;
}
.moduletable_menu li a:hover {
	border-left: 1px solid #008fc3;
	color: #008fc3;
	text-decoration: none;
}
/* Move border from bottom to top on nested li to prevent missing or double borders */
.moduletable_menu li li {
	margin: 0;
	border-bottom: 0;
	border-top: 1px dotted #ccc;
}
/* Different alignment and, if reqd, colour scheme on nested li */
.moduletable_menu li li a {
	display: block;
	width: auto;
	padding: 0 5px 0 1.5em;
	border-left: 1px solid #fff;
	color: #999;
	text-decoration: none;
}
/* Current page styling */
.moduletable_menu ul li#current a {
	border-left: 1px solid #333;
	color: #333;
	text-decoration: none;
}
/* Need to reset nested lists to original colour or they get "current" colour when parent li is current */
.moduletable_menu ul li#current ul li a {
	border-left: 1px solid #fff;
	color: #999;
	text-decoration: none;
}
/* Hover effect on nested list has to come last. 2 rules for nested li which are and aren't children of current */
.moduletable_menu ul li#current ul li a:hover, .moduletable_menu ul li ul li a:hover {
	border-left: 1px solid #008fc3;
	color: #008fc3;
	text-decoration: none;
}