/* #################### GLOBAL TAG STYLES #################### */

/* Defaults */
html, body {
	/* Remove page margins */
	margin: 0;
	padding: 0;
	border-style: none;

	/* Default font styles */
	font: normal 0.83em/1.4em Verdana, Arial, Helvetica, sans-serif;
	color: #000;
	height: 100%;
}
@media screen {
	html, body {
		text-align: center;
		background: #cdc1be url(../img/pageGradient.jpg) repeat-x scroll top left;
	}
}

/* Style some tags globally */
div, p, a, img, a img {
	padding: 0;
	margin: 0;
	border-style: none;
}
h1, h2, h3, h4, h5, h6 {
	margin: 0;
	padding: 0;
	font-weight: bold;
}

/* #################### PAGE LAYOUT #################### */

#pageTop {
	margin: 18px auto 0 auto;
	width: 780px;
	height: 10px;
	background: transparent url(../img/pageTop.png) no-repeat scroll top left;
	/* Bug fix for IE6 */
	font-size: 1px;
	line-height: 1px;
}
#page {
	margin: 0 auto;
	width: 780px;
	background: transparent url(../img/pageSides.png) repeat-y scroll top left;
}
@media print {
	#page {
		width: 700px;
		background: none;
	}
}
#pageBottom {
	margin: 0 auto 0 auto;
	width: 780px;
	height: 10px;
	background: transparent url(../img/pageBottom.png) no-repeat scroll top left;
}

#header {
	position: relative;
	margin: 0 10px;
	padding: 12px 0 0;
	height: 290px;
	z-index: 2;
}
#content {
	margin: 0 10px;
	padding: 0 12px;
	text-align: left;
}
#footer {
	position: relative;
	height: 36px;
	clear: both;
	font-size: 0.9em;
	background-color:#FFF;
}

/* #################### COLUMNS #################### */

/* Basic three column layout */
#columns12 {
	position: relative;
	float: left;
	width: 514px;
}
@media print {
	#columns12 {
		width: 370px;
	}
}
#column1 {
	position: relative;
	float: left;
	width: 144px;
}
@media print {
	#column1 {
		display: none;
	}
}
#column2 {
	position: relative;
	float: right;
	width: 370px;
}
@media print {
	#column2 {
		float: left;
	}
}
#column3 {
	position: relative;
	float: right;
	width: 218px;
}

/* Different content div backgrounds that provide all full-height column fill colours */
@media screen {
	div.colFills1 {
		background: transparent url(../img/colFills1.jpg) repeat-y scroll top left;
	}
	div.colFills2 {
		background: transparent url(../img/colFills2.jpg) repeat-y scroll top left;
	}
	div.colFills3 {
		background: transparent url(../img/colFills3.jpg) repeat-y scroll top left;
	}
	div.colFills4 {
		background: transparent url(../img/colFills4.jpg) repeat-y scroll top left;
	}
	div.colFills5 {
		background: transparent url(../img/colFills5.jpg) repeat-y scroll top left;
	}
	div.colFills6 {
		background: transparent url(../img/colFills6.jpg) repeat-y scroll top left;
	}
	div.colFills6 {
		background: transparent url(../img/colFills6.jpg) repeat-y scroll top left;
	}
	div.colFills7 {
		background: transparent url(../img/colFills7.jpg) repeat-y scroll top left;
	}
}

/* Column margins whcih surround text but not full-column-width images */
#column2 .colMargins {
	margin-left: 12px;
	margin-right: 9px;
}

/* #################### MENU #################### */

#menu {
	position:absolute;
	bottom: 0;
	left: 12px;
}

#menu ul {
	position: relative;
	margin: 0;
	padding: 0;
	border-style: none;
}
#menu li {
	margin: 0;
	padding: 0;
	border-style: none;
	list-style-type: none;
}
#menu li a {
	display: block;
	margin: 0;
	padding: 0;
	border-style: none;
	height: 26px;
	width: 144px;
	vertical-align: bottom; /* This fixes vertical IE Win gap */
}

.menu0Preload {
	background: url(../img/menu0_roll.jpg) no-repeat;
}
.menu1Preload {
	background: url(../img/menu1_roll.jpg) no-repeat;
}
.menu2Preload {
	background: url(../img/menu2_roll.jpg) no-repeat;
}
.menu3Preload {
	background: url(../img/menu3_roll.jpg) no-repeat;
}
.menu4Preload {
	background: url(../img/menu4_roll.jpg) no-repeat;
}
.menu5Preload {
	background: url(../img/menu5_roll.jpg) no-repeat;
}

a.menu0Link {
	background: url(../img/menu0.jpg) no-repeat;
}
a.menu1Link {
	background: url(../img/menu1.jpg) no-repeat;
}
a.menu2Link {
	background: url(../img/menu2.jpg) no-repeat;
}
a.menu3Link {
	background: url(../img/menu3.jpg) no-repeat;
}
a.menu4Link {
	background: url(../img/menu4.jpg) no-repeat;
}
a.menu5Link {
	background: url(../img/menu5.jpg) no-repeat;
}

a.menu0Link:hover {
	background: url(../img/menu0_roll.jpg) no-repeat;
}
a.menu1Link:hover {
	background: url(../img/menu1_roll.jpg) no-repeat;
}
a.menu2Link:hover {
	background: url(../img/menu2_roll.jpg) no-repeat;
}
a.menu3Link:hover {
	background: url(../img/menu3_roll.jpg) no-repeat;
}
a.menu4Link:hover {
	background: url(../img/menu4_roll.jpg) no-repeat;
}
a.menu5Link:hover {
	background: url(../img/menu5_roll.jpg) no-repeat;
}

/* #################### SUB MENU #################### */

#subMenu {
	position:absolute;
	top: 219px;
	right: 2px;
	z-index: 1;
}

#subMenu ul {
	position: relative;
	margin: 0;
	padding: 0;
	border-style: none;
}
#subMenu li {
	margin: 0;
	padding: 0;
	border-style: none;
	list-style-type: none;
}
#subMenu li a {
	display: block;
	margin: 0;
	padding: 0;
	border-style: none;
	height: 24px;
	width: 108px;
	vertical-align: bottom; /* This fixes vertical IE Win gap */
}

.subMenu2_0Preload {
	background: url(../img/subMenu2_0_roll.jpg) no-repeat;
}
.subMenu2_1Preload {
	background: url(../img/subMenu2_1_roll.jpg) no-repeat;
}
.subMenu2_2Preload {
	background: url(../img/subMenu2_2_roll.jpg) no-repeat;
}

a.subMenu2_0Link {
	background: url(../img/subMenu2_0.jpg) no-repeat;
}
a.subMenu2_1Link {
	background: url(../img/subMenu2_1.jpg) no-repeat;
}
a.subMenu2_2Link {
	background: url(../img/subMenu2_2.jpg) no-repeat;
}

a.subMenu2_0Link:hover {
	background: url(../img/subMenu2_0_roll.jpg) no-repeat;
}
a.subMenu2_1Link:hover {
	background: url(../img/subMenu2_1_roll.jpg) no-repeat;
}
a.subMenu2_2Link:hover {
	background: url(../img/subMenu2_2_roll.jpg) no-repeat;
}

/* #################### CONTACT BOX #################### */

#contactBox {
	position:absolute;
	right: 0;
	bottom: 0;
	
	margin-right: 12px;
	border-color: #FFF;
	border-style: solid;
	border-width: 4px 0 3px 4px;
	padding: 3px 6px 6px 9px;
	background-color: #7ec1fa;
	text-align: left;
}
#contactBoxInner {
	width: 203px;
}
@media print {
	#contactBox {
		position: relative;
		left: 446px;
		background: none;
	}
}
#contactBox strong {
	font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
}
#contactBox .contactLabel {
	display: block;
	float: left;
	width: 45px;
}
#contactBox a {
	color:#000;
	text-decoration: none;
}
#contactBox a:hover {
	color:#e20000;
	text-decoration: underline;
}

/* #################### CONTENT - GENERAL #################### */

/* Paragraph styles */
#content p {
	padding-bottom: 6px;
}
#content p strong {
	font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
	font-weight: bold;
}

/* Links */
#content a {
	color:#000;
	text-decoration: underline;
}
#content a:hover {
	color: #e20000;
}

/* #################### CONTENT - COLUMN 2 #################### */

/* Headings */
.subHead {
	margin-top: 14px;
	margin-bottom: 4px;
}
#column2 h3 {
	font: bold 1em/1.4em Verdana, Arial, Helvetica, sans-serif;
}

/* Emphasised text and headings */
.colFills1 #column2 strong, .colFills1 #column2 h3 {
	color: #002b73;
}
.colFills2 #column2 strong, .colFills2 #column2 h3 {
	color: #123502;
}
.colFills3 #column2 strong, .colFills3 #column2 h3 {
	color: #331d07;
}
.colFills4 #column2 strong, .colFills4 #column2 h3 {
	color: #1b0d3a;
}
.colFills5 #column2 strong, .colFills5 #column2 h3 {
	color: #24261a;
}
.colFills6 #column2 strong, .colFills6 #column2 h3 {
	color: #002b73;
}
.colFills7 #column2 strong, .colFills7 #column2 h3 {
	color: #330a18;
}

/* Links */
#content a.linkBullet {
	padding: 0 0 2px 24px;
	background: transparent url(../img/linkBullet.gif) no-repeat scroll top left;
	text-decoration: none;
	color: #002b73;
}
@media print {
	#content a.linkBullet {
		display: none;
	}
}
#content a.linkBullet:hover {
	background-image: url(../img/linkBullet_roll.gif);
	color: #e20000;
}

/* Contact details*/
.contactDetails {
	font-size: 1.1em;
	font-weight: bold;
}

/* #################### CONTENT - COLUMN 3 #################### */

/* Article boxes */
#column3 .article {
	/* NOTE If change bottom padding must change img.afterText */
	padding: 9px 9px 9px 9px;
	border-bottom: 3px solid #FFF;
}
@media screen {
	#column3 .article {
		background-color: #d2eeff;
	}
	#column3 .article.dark {
		background-color: #aedefc;
	}
}

/* Article images */
#column3 .article img.fullWidth {
	margin-left: -9px;
	margin-right: -9px;
}
#column3 .article img.afterText {
	margin-top: 9px;
	margin-bottom: -9px;
	border-top: 1px solid #aedefc;
	/* border-top: 1px solid #FFF; */
}

/* Headings */
.sideHead {
	margin-top: 6px;
	margin-bottom: 4px;
}

/* Paragraph styles */
#column3 p {
	line-height: 1.3em;
	color: #0b1c36;
}
#column3 p strong {
	color: #132c4c;
}

/* Links */
#column3 a {
	color:#00429e;
}

/* Images */
#column3 .images img,  #column3.images img{
	border-bottom: 3px solid #FFF;
}

/* Details */
#column3 .columnEnd, #column3.images .columnEnd {
	border-bottom: none;
}

/* #################### CREDITS #################### */

#credits {
	position: relative;
	margin: 0 auto;
	width: 780px;
	height: 30px;
	color: #452c2f;
	font: normal 0.8em Verdana, Arial, Helvetica, sans-serif;
	/* Restore the default left alignment within centred site*/
	text-align: left;
}
#copyright {
	position: absolute;
	top: 0;
	left: 10px;
}
#credits a {
	color: #000;
}
#credits a:hover {
	color: #840027;
}
#credit {
	position: absolute;
	top: -6px;
	right: 10px;
}
.tfIcon {
	position: relative;
	top:4px;
}

/* #################### MISC REUSABLE CLASSES #################### */

.hide {
	display: none;
}
.floatLeft {
	float: left;
}
.floatRight {
	float: right;
}
.clearBoth {
	clear: both;
}
.center {
	text-align:center;
}

.spaceColBottom {
	margin-bottom: 12px;
}
.spaceAbove6 {
	margin-top: 6px;
}
.spaceBelow6 {
	margin-bottom: 6px;
}
.spaceAbove12 {
	margin-top: 12px;
}
.spaceBelow12 {
	margin-bottom: 12px;
}

@media print {
	.noPrint {
		display: none; !important
	}
}

/* #################### END #################### */