/*NOTES
----------------------------------------------------------------------------------------------------
For each section, common styles are grouped and specified first. 
----------------------------------------------------------------------------------------------------
*/

/*GENERAL
----------------------------------------------------------------------------------------------------
Paddings and margins are reset to make it easier to layout in different browsers
----------------------------------------------------------------------------------------------------
*/
	* 
	{
		/* These styles reset margins and padding for all elements */
		margin:0; 
		padding:0;
	}

	body 
	{
		background:#ffffff;
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 62.5%;
		color: #333333;
		text-align:center; /* This makes sure that the content gets centred in IE 5/5.5 */
	}	
	
	.hidden
	{
		visibility: hidden;
	}

/*HEADER
----------------------------------------------------------------------------------------------------
The background image is set for the header and the logo and nav sit on top of this (the homepage has
 no background image).
----------------------------------------------------------------------------------------------------
*/

	/*LOGO
	The logo is positioned seperately to the header so that it can sit on top of it. */
		#logo
		{
			float:left;
			margin-left:6px;
			margin-top:-8px;
			position: absolute;
		}
		
		#logo img {
			border:0;
		}
	


/*MAIN CONTENT
----------------------------------------------------------------------------------------------------
All of the main elements for the content are styled here
----------------------------------------------------------------------------------------------------
*/

	/*HEADINGS
	These set the shared properties for the Image Replacement headings on each hub page.
	Thes specific styles for these are set in the head of the specific pages.
	*/
	
	#frame h1 {
		font-size:2.4em;
		color: #00aa55;
		margin-bottom: 0.5em;
		margin-left: 0.1em;
		margin-top:0.1em;
	}

	h1 {
		margin: 0em 1em;
	}	
		
	#frame h2 {
		font-size: 1.8em;
		color: #ee1155;
		margin-bottom: 0.8em;
		margin-left: 0.4em;
	}

	#frame h3 {
		font-size: 1.2em;
		color: #00AA55;
		margin-bottom: 0.5em;
		font-weight: bold;
	}

	#frame h3.linkText {
		background-image:  url("../images/bulletGreenOnWhite.gif");
		background-repeat: no-repeat;
		background-position: 0.1em 0.2em;
		padding-left: 1.5em;
	}

	#frame p {
		font-size: 1.2em;
		margin-bottom: 1em;
		color: #333333;
		line-height: 1.4em;
	}

	#headerPageNav .left {
		width: 32em;
		float: left;
	}
	
	#contentWrapper {
		overflow: hidden;
		width: 74em;
		margin-bottom: 2em;
		margin-left: 1em;
		height: 36em;
	}
	
	#contentWrapper  a, #pageNav a {
		color: #ee1155;
	}
	
		#contentWrapper .left {
		float: left;
		width: 24em;
		margin-left: 1em;
	}
	
	#contentWrapper .right {
		float: right;
		width: 47.5em;
		text-align: right;
	}
	
	#contentWrapper .intro
	{
		font-weight: bold;
		margin-bottom: 0.5em;
		color: #333333;
		margin-bottom: 0.8em;
		margin-left: 0.4em;
	}	
	
	#pageNav {
		overflow: hidden;
		width: 75em;
		margin-left: 1em;
		background-image: url("../images/pageNav_bg.png");
		height: 70px;
		margin-top: 3em;
	}
	
	#pageNav .left, #pageNav #leftNoArrow, #pageNav .right, #pageNav #rightNoArrow {
		width: 100px;
		height: 70px;
	}
	
	#pageNav .left {
		float: left;
		padding-left: 20px;
		background-image: url("../images/pageNav_bg_left.png");
		background-repeat: no-repeat;
	}
	
	#pageNav #leftNoArrow {
		float: left;
		padding-left: 35px;
		background-image: url("../images/pageNav_bg_left_noArrow.png");
		background-repeat: no-repeat;
	}
	
	#pageNav .right {
		float: right;
		text-align: right;
		padding-right: 45px;
		background-image: url("../images/pageNav_bg_right.png");
		background-repeat: no-repeat;
		background-position: right;
	}
	
	#pageNav #rightNoArrow {
		float: right;
		text-align: right;
		padding-right: 45px;
		background-image: url("../images/pageNav_bg_right_noArrow.png");
		background-repeat: no-repeat;
		background-position: right;
	}
	
	#pageNav #centre {
		float: left;
		margin-top: 25px;
		font-size: 1.2em;
		padding-left: 18em;
	}
	
	#pageNav #centre a {
		text-decoration: underline;
	}
	
	#pageNav .left p, #pageNav .right p {
		font-size: 1em;
		margin-top: 25px;
	}

	#pageNav .left a, #pageNav .right a {
		color: #ee1133;
		font-weight: bold;
	}

	#frame #contentWrapper .left #rightArrow {
		float: right;
		text-align: right;
		padding-right: 25px;
		background-image: url("../images/pageNav_bg_rightArrow.png");
		background-repeat: no-repeat;
		background-position: right;
		height: 70px;
		width: 200px;
	}
	
	#frame #contentWrapper .left #rightArrow p {
			font-size: 1em;
			margin-top: 27px;
	}
	
	
	#contentWrapper .right #return {
		float: left;
		padding-left: 35px;
		background-image: url("../images/pageNav_bg_return.png");
		background-repeat: no-repeat;
		height: 70px;
		width: 60px;
		margin-top: 1em;
	}
	
	#contentWrapper .right #return p {
		font-size: 1em;
		margin-top: 27px;
		margin-right: 2em;
	}
	
	a {color: #ee1100; text-decoration: none;}
	a:hover {text-decoration: underline;}
	a.selected {font-size: 1.6em; text-decoration: none;}

	#frame ol
	{
		margin-left: 1.6em;
		font-size: 1.1em;
		line-height: 1.4em;
	}
	
	#frame ol li
	{
		margin-bottom: 0.5em;
	}

	#frame ul
	{
		margin-left: 1.6em;
		font-size: 1.1em;
		line-height: 1.4em;
		margin-bottom: 1em;
	}
	
	#frame ul li
	{
		margin-bottom: 0.5em;
	}
	
	#frame ul.linkText
	{
		margin-left: 0em;
		margin-bottom: 1em;
	}
	
	#frame ul.linkText li  
	{
		background-image:  url("../images/bulletGreenOnWhite.gif");
		background-repeat: no-repeat;
		background-position: 0.1em 0.3em;
		list-style-type: none;
		padding-left: 1.5em;
	}
	
	#frame ul.linkText a
	{
		color: #333333;
		font-weight: bold;
		padding-left: 0px;
	}
	
/*FOOTER
----------------------------------------------------------------------------------------------------
Styles for the footer 
----------------------------------------------------------------------------------------------------
*/
	#contentfooter
	{
		background-image: url("../images/footer.gif");
		background-position: right top;
		background-repeat: no-repeat;
		width:76em;
		height: 26px;
		margin-top:0px;
		clear: both;
		background-color: #ee1155;
	}

	#contentfooter #contentfooterNav
	{
		margin-right:10px;
		margin-top: -22px;
		text-align: center;
	}	
	
	#contentfooter #contentfooterNav a
	{
		color: #FFFFFF;
		text-decoration: none;
	}
	
	#contentfooter #contentfooterNav a:hover
	{
		text-decoration: underline;
	}
	
	#contentfooter #contentfooterNav li
	{
		display:inline;
		color: #FFFFFF;
		font-size: 1.1em;
	}