@charset "UTF-8";

html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,a,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,hr small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video,textarea, input { border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent; margin:0; padding:0;text-decoration:none; font-weight:normal; }  ol,ul { list-style:none; }  table { border-collapse:collapse; border-spacing:0; }  hr { display:block; height:1px; border-top:1px solid #ccc; margin:1em 0; }  input,textarea,select { vertical-align:middle; }  article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section { display:block; }

/* COLOURS

Header blue #003333; 
#XXXXXX:  

*/

body {
	font-family: Verdana, Geneva, sans-serif;
	font-size: .625em;
	color: #333;
	background:#f7f7f7;
}

.cufon-loading { visibility: hidden; }

/********** CORE ***********/

a, a:Visited {
	color: #003333;
}

.main a:Hover {
	text-decoration:underline;
}

h1,h2,h3,h4,h5,h6 {
	color: #454545;
	line-height: 1.4em;
	margin-bottom: 10px;
	font-weight: 100;
}

h1 a,h2 a,h3 a,h4 a,h5 a,h6 a {
	color: #454545;
	text-decoration: none;
}

h1 a:hover {
	color: #454545;
	text-decoration: none;
}

h1 {
	font-size: 2.9em;
	color:#FFF;
	position:absolute;
	left:0;
	bottom:10px;
	z-index:10;
	text-transform:uppercase;
}

h2 {
	font-size: 2.1em;
	margin-bottom: 13px;
}

h3 {
	font-size: 1.6em;
	color:#003333;
}

h4 {
	font-size: 1.4em;
}

h5 {
	font-size: 1.2em;
}

hr {
	display: block;
	height: 1px;
	border: 0;
	border-top: 1px solid #ebebeb;
	margin: 10px 0;
	padding: 0;
}

.hr {
	height: 1px;
	background-image: url(../images/hr.gif);
	background-repeat: repeat-x;
	background-color: transparent;
	background-position: 0 center;
	border-top: 0px;
	margin:0;
	padding: 10px 0;
}

p {
	margin-bottom: 15px;
	margin-top: 15px;
	font-size:1.1em;
	line-height:1.5;
}

p.spaced {
	line-height:1.9;
}

.main li {
	font-size:1.1em;
}

strong {
	font-weight: bold;
}

em {
	font-style: italic;
}

blockquote {
	margin: 20px;
	border-left: 5px solid #d0d4d8;
	padding-left: 25px;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 16px;
	font-style: italic;
	line-height: 1.5em;
	background: transparent url(../images/quote.png) no-repeat scroll top left;
	background-position: top left;
	quotes: none;
}

blockquote:before,blockquote:after,q:before,q:after {
	content: '';
	content: none;
}

/********** LAYOUT ***********/

header {
	height:92px;
	background:#003333;
	position:relative;
	z-index:2;
}

.masthead {
	background-color: #fff;
	background-position: center 0;
	background-repeat: no-repeat;
	position:relative;
	z-index:1;
	border-top:2px solid #FFF;
}

.container {
	width:960px;
	margin:0 auto;
	position:relative;
}

.main {
	background:#FFF;
	position:relative;
	padding:20px 0;
}


footer {
	background:#f7f7f7;
	border-top:1px solid #c5c5c5;
	position:relative;
	z-index:2;
}


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

#logo {
	width:300px;
	height:14px;
	text-align:center;
	position:relative;
	padding:15px 0 0 0;
	margin:0 auto 0 auto;
	display:block;
	color:#FFF;
	font-size:1.9em;
	line-height:1;
	text-transform:uppercase;
}

.branding {
	width:89px;
	height:89px;
	background:url(../images/sprite.png) 0 0 no-repeat;
	text-indent:-9999px;
	display:block;
	margin:20px auto 0 auto;
}

.branding {
	width:124px;
	height:124px;
	background:url(../images/sprite.png) -173px 0 no-repeat;
	margin:15px auto 0 auto;
}

/********** NAV ***********/

#nav {
	list-style:none;
	padding:0;
	text-align:center;
	position:absolute;
	top:53px;
	left:0;
	width:100%;
}

#nav li {
	display:inline;
}

#nav li.left_brain {
	margin-right:60px;
}

#nav li.right_brain {
	margin-left:60px;
}

#nav a {
	display:inline-block;
	padding:10px 0;
	color:#FFF;
	text-transform:uppercase;
	font-size:1.3em;
	width:90px;
}

#nav a:Hover {
	color:#ccc;
}

/********** MASTHEAD ***********/

.masthead img {
	height:138px;
}

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

footer .branding {
	width:77px;
	height:76px;
	background:url(../images/sprite.png) 0 -106px no-repeat;
	text-indent:-9999px;
	display:block;
	margin:-35px auto 0 auto;
}

footer ul {
	position:absolute;
	top:46px;
}

footer ul.left {
	left:0;
}

footer ul.right {
	right:0;
}


footer li {
	display:inline;
	color:#999999;
	padding:0 10px;
	border-right: 1px solid #999;
}

footer ul li.first{
	padding-left:0;
}

footer ul li.last {
	padding-right:0;
	border:none;
}

footer a, footer a:Visited {
	color:#999999;
}

/********** BULLETS ***********/

.main ul li {
	list-style: none;
	background: transparent url(../images/arrow2.png) no-repeat 0 1px;
	padding: 0px;
	margin: 7px 0;
	line-height: 18px;
	padding-left: 25px;
}

.main ol {
    counter-reset:li; /* Initiate a counter */
    margin-left:0; /* Remove the default left margin */
    padding-left:0; /* Remove the default left padding */
}
.main ol > li {
    position:relative; /* Create a positioning context */
    margin:0 0 6px 2em; /* Give each list item a left margin to make room for the numbers */
    padding:4px 8px; /* Add some spacing around the content */
    list-style:none; /* Disable the normal item numbering */
}
.main ol > li:before {
    content:counter(li); /* Use the counter as content */
    counter-increment:li; /* Increment the counter by 1 */
    /* Position and style the number */
    position:absolute;
    top:0;
    left:-2em;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    width:2em;
    /* Some space between the number and the content in browsers that support
       generated content but not positioning it (Camino 2 is one example) */
    margin-right:8px;
    padding:4px;
}

/********** TABLES ***********/

table {
	border-collapse: collapse;
	border-spacing: 0;
}

table {
	border: 1px solid #D8D8D8;
	border-collapse: collapse;
	margin-bottom: 20px;
	margin-top: 20px;
}

table th {
	font-family: Georgia, "Times New Roman", Times, serif;
	padding: 5px;
	padding-left: 13px;
	padding-right: 13px;
	background-color: #f1f2f4;
	border-right: 1px solid #D8D8D8;
	font-size: 14px;
}

table td {
	border: 1px solid #D8D8D8;
	padding: 5px;
	padding-left:13px;
}


/********** SHARED ***********/

.clear {
    width: 100%;
    clear: both !important;
    display: inline-block;
}

.clear:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

* html .clear {
    height: 1%;
}


/********** COLUMNS ***********/

.col {
	width:50%;
	float:left;
}


.col .col {
	width:46%;
	margin-right:4%;
	float:left;
}

.grey {
	background:#f7f7f7;
	padding:10px;
	margin-bottom:20px;
	border:1px solid #e5e5e5;
}

.grey h2 {
	font-size:1.7em;
}

.grey p.more {
	margin-bottom:4px;
}

.col-left, .col-right {
	padding-top:20px;
}

.col-left {
	width:60%;
	float:left;
}

.col-right {
	width:30%;
	float:right;
}

.col-right h2 {
	border-top:1px solid #c5c5c5;
	border-bottom:1px solid #c5c5c5;
	margin:8px 0 23px 0;
	padding:3px 0 10px 0
}

#map_canvas {
	margin: 20px 0 28px 0;
}

/********** BREADCRUMBS ***********/

.breadcrumbs {
	padding-bottom:0px;
	clear:both;
	margin:0 0 -10px 0;
}

.main .breadcrumbs li {
	font-size: 10px;
	line-height: 1;
	display:inline;
	margin:0 10px 0px 0;
	padding:0;
	background:none;
	color:#bab8b8;
}

.breadcrumbs li a {
	padding:0 10px 0 0;
	color:#bab8b8;
}

.breadcrumbs li:after {
	content: "\3E \ ";
    behavior: url(/workspace/css/PIE.htc);
}


.breadcrumbs li.last:after {
	content: none;
    behavior: url(/workspace/css/PIE.htc);
}

@media screen and (min-width: 100px) and (max-width: 979px) {

.container {
	width:100%;
}

.main .container { 
	width:auto;
	margin:0 15px;
}

h1 {
	left:15px;
}

.masthead {
	background-position:0 -200px;
}

.masthead .container img {
	width:100%;
	height:auto;
}

footer ul.left {
	left:20px;
}

footer ul.right {
	right:20px;
}

.col {
	width:50%;
	float:left;
}

.col .col {
	width:95%;
	margin-right:5%;
	float:left;
}

.col-right img {
	width:100%;
}

}

@media screen and (min-width: 100px) and (max-width: 650px) {

#nav li.left_brain, #nav li.right_brain {
	margin:0;
}

footer ul.right, footer ul.left {
	position:relative;
	top:0;
	left:auto;
	right:auto;
}

footer ul li {
	width:100%;
	text-align:center;
	display:block;
	padding:8px 0 0 0;
	margin:0;
	border:0;
}
header {
	height:138px;
}

header .branding {
	margin-top:60px;
}

.col, .col .col {
	width:100%;
	margin:0;
}

h1 {
	font-size:2.4em;
	bottom:1px;
}

#nav a {
	width:16%;
}

.col-left, .col-right {
	width:100%;
	padding-top:0;
}

.breadcrumbs {
	margin-bottom:10px;
}

}

@media screen and (min-width: 100px) and (max-width: 550px) {

header {
	height:121px;
}

#nav {
	margin:0 7% 0 7%;
	top:42px;
	width:86%
}

header #logo {
	padding-top:10px;
}

header .branding {
	width:42px;
	height:42px;
	background-position:-116px -28px;
	margin-top:72px;
}

footer .branding {
	width:42px;
	height:42px;
	background-position:-116px -70px;
	margin-top:-20px;
}

#nav a {
	width:32%;
	color:#FFF;
	padding:3px 0;
}

}