/* TODO: reset styles */
 * { margin: 0; padding: 0; }

/*
 * Page structure is:
 * body
 * 	#wrapper
 *   #headerWrapper
 * 	  #header
 *     h1
 *     p
 *   #container.clearfix
 *    #sidebar
 *     ul#nav
 *    #content.cbb
 *    #footerWrapper
 *     #footer
 *      p
 *      ul
 */

/* TODO: default page/link/image/heading styles */

/*** Default Styling ***/
html, body { height: 100%; }
body {
	font-family: Helvetica, Arial, sans-serif;
}


#content {
	color: #333;
	line-height: 1.5em;
	font-size: 0.95em;
}
#content h1, #content h2, #content h3 {
	margin: 0.4em 0 0.5em;
	color: #d02027;
}
#content h1 { margin-bottom: 0.8em; }

#content a { color: #ec1c24; }
#content a:visited { color: #ca060d; }
#content a:active {	color: #eab33e; }

#content ul.linklist {
	margin: 1em;
	list-style-type: none;
}
#content ul.linklist li {
	margin: 1em 0;
}
#content p {
	margin: 1em 0;
}
#content .smalltext {
	line-height: 1.3em;
	font-size: 0.90em;
}
#content .comingsoon { font-style: italic; }
#content .backlink { }

#content .image_content { text-align: center; }
#content table.imageTable td { vertical-align: middle; }

#content .successMessage { color: #357d43; }
#content .errorMessage { color: #ec1c24; margin-bottom: 0.5em; }
#content .errorList {
	margin-left: 1.5em;
	line-height: 1.3em;
	margin-bottom: 1em;
}

/*** Layout ***/
body {
	background-color: #ec1c24; /* bg colour of sidebar */
}
#wrapper {
	background: url("../images/main_bg.jpg") #df4449 no-repeat top left; /* place bg image in line with column (as wrapper has margin) */
	margin-left: 18em; /* width of left column */
	position: relative; /* to position footer */
	min-width: 1070px; /* fix this! min width of right column or move to #content */
	width: auto;
	min-height: 100%; /* fix this (ie6)! */
	height: auto;
}
#wrapper.noImagePage {
	min-width: 870px;
}
	#headerWrapper {
		height: 8em; /* height + top margin + top/bottom padding of #header */
	}
		#header {
			position: relative;
			top: 2em; /* top margin */
			height: 4em;
			background-color: #ec1c24;
			padding: 1em 0 1em 2em; /* right padding will be overriden */
			margin-left: -18em; /* now extend it along sidebar */
			padding-right: 18em; /* and fix right end */
		}
			#header h1 { float:left; margin-right: 0.5em; }
				#header h1 a img { border: none; }
			#header p {
				text-align: right; /* better than float, as then text wraps rather than jumping down */
				color: #fff;
				margin-top: 1em; /* (height - ~1em for text - 1em for #header padding) / 2 / font-size */
				font-size: 1.2em;
				margin-right: -12.5em; /* left-column width - right padding - left padding = 18em - 1.5em - 2em = 14.5em, then divide by 1.2em = 12.1em roughly */
			}
	#container {
		padding-bottom: 5em; /* make room for footer - footer height, padding from margin-bottom on #content */
	}
		#sidebar {
			/* background comes through from body, if #container clearfix'd, then will expand page properly */
			float: left;
			margin-left: -18em; /* move it into place */
			width: 15.9em;
			padding: 1em;
		}
		#contentCol {
			padding: 1em 1.5em; /* spacing around content box */
		}
			#content {
				float: left; /* need to float so that we can clear floats inside #content (done as part of rounded-corners) */
				width: 100%;
			}

/*** Style Nav ***/
#sidebar ul { list-style-type: none; } /* remove markers */
	#sidebar li {
		display: block;
		text-align: center;
		margin: -0.2em auto; /* centred, some inherent spacing in images to give room for gradient */
		font-size: 0.95em;
		height: 60px; /* size of image */
		width: 223px;
		background: url("../images/btn_red.gif") no-repeat center top;
	}
	#sidebar li.special { background-image: url("../images/btn_white.gif"); }
		#sidebar li a {
			display: inline;
			position: relative;
			top: 15px; /* line text with centre of button */
			/* optional use text-indent to correct text centering if bg is non-symmetric */
			text-decoration: none;
			color: #fff;
		}
		#sidebar li.active { font-weight: bold;	} /* make active tab bold */
		#sidebar li.special a { color: #ff0000; }
		#sidebar li a:hover, #navCol li.special a:hover, #navCol li.active a:hover {
			text-decoration: underline; /* restore underline on hover */
		}


/*** Style Content Area ***/
/* non-rounded version (no js) */
#content.cbb {
	margin-top: 0.5em; /* to account for image bias */
	background: url("../images/content_bg.png") transparent repeat;
	border: 1px solid #333;
}
#content.cbb #contentBox {
	/* Needed to prevent breaking width 100% */
	padding: 1em;
}
/* rounded version */
#content.cb .i3 {
	padding: 0.2em 0.5em;
	background: url("../images/content_bg.png") transparent repeat;
}

/*** Style Footer ***/
#footerWrapper {
	position: absolute;
	width: 100%;
	height: 5em;
	bottom: 0;
	margin: 0;
}
	#footer {
		margin: 1em auto;
		text-align: center;
		color: #fff;
	}
	#footer p { margin: 0.5em; }
	#footer a {	color: #fff; }
	#footer a:hover { font-weight: bold; }
	#footer ul {
		margin: 0.5em;
		list-style-type: none;
	}
		#footer ul li {
			display: inline;
			padding: 0 1em;
		}


/*** Rounded Corners from http://www.456bereastreet.com/archive/200609/transparent_custom_corners_and_borders_version_2/ ***/
/* Top corners and border */
.bt {
	height: 18px;
	margin: 0 0 0 18px;
	background: url("../images/box.png") no-repeat 100% 0;
}
.bt div {
	position: relative;
	left: -18px;
	width: 18px;
	height: 18px;
	background: url("../images/box.png") no-repeat 0 0;
	font-size: 0;
	line-height: 0;
}
/* Bottom corners and border */
.bb {
	height: 18px;
	margin: 0 0 0 18px;
	background: url("../images/box.png") no-repeat 100% 100%;
}
.bb div {
	position: relative;
	left: -18px;
	width: 18px;
	height: 18px;
	background: url("../images/box.png") no-repeat 0 100%;
	font-size: 0;
	line-height: 0;
}
/* Left border */
.i1 {
	padding: 0 0 0 18px;
	background: url("../images/border_left.png") repeat-y 0 0;
}
/* Right border */
.i2 {
	padding:0 18px 0 0;
	background: url("../images/border_right.png") repeat-y 100% 0;
}


/*** Forms ***/
#content form fieldset {
	margin: 0.5em 1em 1em;
	float: left;
}
#content form legend {
	padding: 0 5px;
	font-weight: bold;
	font-size: 0.9em;
	margin: 0 1em;
	color: #d02027;
}
#content form label {
	display: inline-block;
	line-height: 1.8em;
	vertical-align: top;
	width: 8em;
	text-align: right;
	margin-right: 1em;
}
#content form ul {
	list-style-type: none;
}
#content form li {
	padding: 0.5em 2em 0.5em 1em;;
	border-bottom: 1px solid #f9cacc;
	background-color: #ffeced;
}
#content form li.special {
	background-color: #fadfe0;
}
#content form input, #content form textarea {
	width: 21em;
}
#content form .inputButton {
	width: auto;
	margin-left: 10em; /* 8em for label width + 2x 1em padding on li and on label margin-right */
	padding: 0.2em 0.8em;
}
#content form textarea {
	height: 8em;
}
#content .formFooter {
	font-size: 0.9em;
	color: #ec1c24;
	font-style: italic;
	clear: left;
	background-color: #ffeced;
	margin: 0;
	padding: 0.5em 1em;
	text-indent: 1em;
}


/*** Clearfix ***/
.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}
.clearfix {display:inline-block;}
/* Hide from IE Mac \*/
.clearfix {display:block;}
/* End hide from IE Mac */
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */