@charset "UTF-8";
/* CSS Document */

body {
	font: 15px/1.4 "myriad-pro", Arial, Helvetica, Verdana, sans-serif;
	font-weight:400;
	background-color: #eee;
	margin: 0;
	padding: 0;
	color: #333;
}

/* ~~ Element/tag selectors ~~ */
ul, ol, dl {
	padding: 0;
	margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
	margin-top: 0;
	padding-right: 30px;
	padding-left: 30px;
}
a img { 
	border: none;
}
a:link {
	color:#414958;
	text-decoration: underline; 
}
a:visited {
	color: #4E5869;
	text-decoration: underline;
}
a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
	text-decoration: none;
}

/* CONTAINER ******************************************************/

#container {
	width: 940px;
	background: #fff;
	margin: 0px auto 15px auto;
	padding:0px;
}

/* HEADER ********************************************************/

#container #header {
	position:relative;
	width:100%;
	overlflow:hidden;
}

#container #header img.logo {
	margin:40px 0px;
}
#container #header p.councilsorgs {
 	float:right; 
	margin:40px 20px 15px 15px; 
	text-align:right;
}

/* GOOGLE SEARCH *************************************************/

#container #header div#googlesearch {
	position:absolute;
	right:0px;
	top:60px;
	width:500px;
	overflow:hidden;
}
#container #header #googlesearch input.gsc-input {
	font-family: "myriad-pro", Arial, Helvetica, Verdana, sans-serif;
	color:#666;
}
#container #header #googlesearch input.gsc-search-button {
	background-color:#9bd9e4;
	border-radius:5px 5px;
	border-color:#71cddb;
}
#container #header #googlesearch form.gsc-search-box {}
#container #header #googlesearch div.gsc-control-cse {}


/* HOME PAGE DIV *************************************************/

#container #homepage {
	background-image: url(../images/cover_jigsaw.jpg);
	background-repeat:no-repeat;
	background-position:100px left;
	height:575px;
}
#container #homepage img.logo {
	margin:30px 0px;
}
#container #homepage h3 {
	margin-top:30px;
}
#container #homepage h3 a:link {
	font-family:"myriad-pro-semi-condensed", "Arial Narrow", Arial, Helvetica, Verdana, sans-serif;
	padding:5px 10px; 
	text-decoration:none; 
	color:white; 
	border-radius: 5px 5px;
	text-shadow: 0 1px 0 rgba(255,255,255,0.3), 0 -1px 0 rgba(0,0,0,0.3);
}
#container #homepage h3 a:visited {
	font-family:"myriad-pro-semi-condensed", "Arial Narrow", Arial, Helvetica, Verdana, sans-serif;
	padding:5px 10px; 
	text-decoration:none; 
	color:white; 
	border-radius: 5px 5px;
	text-shadow: 0 1px 0 rgba(255,255,255,0.3), 0 -1px 0 rgba(0,0,0,0.3);
}
#container #homepage h3 a:hover, a:active, a:focus {
	text-decoration: underline;
}


/* TOP NAVIGATION ************************************************/

#container #navbar {
	width:940px;
	background-color:#12457d; /* same as background colour of main nav list items */
	background-image:url("../images/css3menu1/mainbk.png");
	background-repeat:repeat-x;
	background-position:0 -15px;
	height:38px;
	border-radius: 10px 10px 0px 0px;
	z-index:900;  /* to place the menu dropdown in front of the slideshow */
	position:absolute;
	display:block;
}

/* BANNER *********************************************************/

#container #banner {
	width:100%;
	height:350px;
	background-color:#eee;
	margin-bottom:50px; 
	position:relative;
	top:35px;
	z-index:800; /* to place the slideshow behind the menu dropdown */
	/*margin-top:20px; /* for seeing the dropdowns from the navbar */
	display:block;
}

#container #banner h1 {
	padding-top:30px;
	padding-left:45px;
	margin-bottom:10px;
	font-size:48px;
	color:#12457d;
	line-height:1.1;
	text-shadow: 0 1px 1px rgba(255,255,255,0.5), 0 -1px 1px rgba(0,0,0,0.5);
	letter-spacing:-1px;
}
#container #banner h3 {
	padding-left:45px;
	padding-top:10px;
	padding-bottom:10px;
	text-shadow: 0 1px 1px rgba(255,255,255,0.3), 0 -1px 1px rgba(0,0,0,0.3);
	/*margin-left:45px;
	padding:8px 10px;
	background-color:rgba(255,255,255,0.5);
	border-radius:10px;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;*/
}
#container #banner h3.readmore {
	padding-top:0px;
	font-weight:300;
}
#container #banner h3.readmore a:link {
	padding:3px 7px;
	background-color:#0b8ab1;
	color:#fff;
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	text-decoration:none;
	font-weight:300px;
}
#container #banner h3.readmore a:visited {
	padding:3px 7px;
	margin-left:3px;
	background-color:#0b8ab1;
	color:#fff;
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	text-decoration:none;
	font-weight:300px;
}

/* RHS SIDE BAR ***************************************************/

#container #sidebar {
	width:219px;
	float:right;
	margin-top:20px;
}

#container #sidebar p {
	margin-left:15px;
	margin-right:15px;
	padding:0px;
	font-size:13px;
	line-height:1.1;
	text-align:center;
}

#container #sidebar img {
	margin:5px auto;
}

/* CONTENT *******************************************************/

#container #content {
	padding: 0px 0px 15px 0px;
	width: 720px;
	float: left;
	border-right: dotted 1px #ccc;
	margin-top:20px;
}
#container #content p {
	font: 15px/1.4 "myriad-pro", Arial, Helvetica, Verdana, sans-serif;
	color:#333;
}
#container #content p.centre {
	text-align:center;
}
#container #content p.template {
	text-align:justify;
	margin-right:70px;
}
#container #content h3 {
	font: 24px/1.2;
	font-family:"myriad-pro-semi-condensed", "Arial Narrow", Arial, Helvetica, Verdana, sans-serif;
	font-weight:600;
}
#container #content span.unbold { /* for the number of days in the H3s in the template pages */
	font-weight:normal;
}
#container #content h3.position { /* for the positions in the 'Our people' section */
	color:#94c94a;
	font-weight:bold;
}
#container #content h2 {
	font: 36px/1.2;
	font-weight:normal;
	font-family:"myriad-pro-semi-condensed", "Arial Narrow", Arial, Helvetica, Verdana, sans-serif;
	color:#12457d;
}
#container #content h2.template {
	color:white;
	/*margin-left:25px;
	margin-right:25px;*/
	padding:4px 8px;
	font-size:22px;
	text-shadow: 0 1px 1px rgba(255,255,255,0.3), 0 -1px 1px rgba(0,0,0,0.3);
}
#container #content span.quals {
	font-size:16px;
	font-weight:normal;
}
h1 {
	font: 42px/1.1;
	font-family:"myriad-pro-semi-condensed", "Arial Narrow", Arial, Helvetica, Verdana, sans-serif;
	font-weight:400;
}

/* ~~ This grouped selector gives the lists in the .content area space ~~ */
#container #content ul, #container #content ol { 
	padding: 0 30px 15px 40px; /* this padding mirrors the right padding in the headings and paragraph rule above. Padding was placed on the bottom for space between other elements on the lists and on the left to create the indention. */
	font: 15px/1.4 "myriad-pro", Arial, Helvetica, Verdana, sans-serif;
	margin-left:30px;
}

/* PDF ICON BUTTONS ***********************************************/

img.getpdf {
	float:right;
	margin:3px 0px 5px 25px;
	border:none;
}

/* BOX FOR TEMPLATE TRIANGLES now put in header - redundant *******

div.bluebg {
	text-align:center;
	border:1px solid #6283b1;
	padding:0px;
	margin:15px 25px;
	background-image:url(../images/bluebg.png);
	background-repeat:repeat-x;
}
.bluebg img {
	margin:7px auto 10px auto;
} */

/* FOOTER ********************************************************/

#footer {
	width:940px;
	margin:0 auto;
	padding:0px;
	position: relative;/* this gives IE6 hasLayout to properly clear */
}
#footer p {
	font-size:12px;
	padding:0px;
	color:#999;
	margin:5px 0px;
}
#footer a:link {
	color:#999;
}
#footer a:visited {
	color:#999;
}
#footer ul {
	width:940px;
	font-size:11px;
	color:#999;
	display:block;
	margin:0px;
	padding:0px;
}
#footer li {
	float:left;
	list-style-type:none;
	padding:0px 10px 0px 0px;
	margin:0px;
}
#footer p.title {
	font-weight:bold;
	border-top:1px dotted #999;
	margin-top:5px;
}

/* Miscellaneous float/clear classes ****************************/

.right {  /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
	float: right;
	margin-left: 20px;
	margin-right:0px;
	margin-top:2px;
	margin-bottom:5px;
}
.fltlft { /* this class can be used to float an element left in the page. The floated element must precede the element it should be next to on the page. */
	float: left;
	margin-right: 8px;
}
.clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the #footer is removed or taken out of the #container */
	clear:both;
	height:0;
	font-size: 1px;
	line-height: 0px;
}

/*[if lte IE 7]*/
#content { margin-right: -1px; } /* this 1px negative margin can be placed on any of the columns in this layout with the same corrective effect. */
ul.nav a { zoom: 1; }  /* the zoom property gives IE the hasLayout trigger it needs to correct extra whiltespace between the links */

#container #content .query {
	color:#F0F;
	font-weight:bold;
}