/* START OF CSS */
	/* BODY: */
	body {
		font-family: Geneva, Arial, Helvetica, sans-serif;
		font-size: 0.7em;
		margin: 0px;
		background-color: rgb(255,255,255);
	}
	
	h1 {
		font-size: 2em;
	}
	h2 {
		font-size: 1.6em;
	}
	
	.textonly {
		display: none; /* Hide text-only content */
	}
	
	/* HEADER: */
	#header {
		position: absolute;
		top: 0px;
		left: 10px;
		right: 112px;
		height: 96px;
	}
	#header div {
		height: 94px;
	}

	.header {
		background-color: rgb(153,153,153);
		padding: 1px;
		border-top: 1px solid rgb(255,255,255);
	border-right: 1px solid rgb(51,51,51);
	border-bottom: 1px solid rgb(51,51,51);
	border-left: 1px solid rgb(255,255,255);
	}
	.header div {
		background-color: rgb(255,255,255);
		border-top: 1px solid rgb(255,255,255);
	border-right: 1px solid rgb(51,51,51);
	border-bottom: 1px solid rgb(51,51,51);
	border-left: 1px solid rgb(255,255,255);
	}
	
	/* SQUARE TOP-RIGHT: */
	#square {
		position: absolute;
		top: 0px;
		right: 10px;
		width: 98px;
		height: 96px;
	}
	#square div {
		height: 94px;
		text-align: center;
	}
	.square {
		background-color: rgb(153,153,153);
		padding: 1px;
		border-top: 1px solid rgb(255,255,255);
	border-right: 1px solid rgb(51,51,51);
	border-bottom: 1px solid rgb(51,51,51);
	border-left: 1px solid rgb(255,255,255);
	}
	.square div {
		background-color: rgb(255,255,255);
		border-top: 1px solid rgb(255,255,255);
	border-right: 1px solid rgb(51,51,51);
	border-bottom: 1px solid rgb(51,51,51);
	border-left: 1px solid rgb(255,255,255);
	}
	
	/* RIGHT-HAND COLUMN: */
	#rightmenu {
		z-index: 2;
		position: absolute;
		top: 100px;
		right: 10px;
		width: 102px;
	}

	#rightmenu br {
		clear: left;
	}
	
	.rightmenuiconsize {
		width: 21px;
		float: right;
	}
	.rightmenuiconsize div {
		width: 19px;
		line-height: 16px;
		text-align:center;
	}
	.rightmenutextsize {
		width: 73px;
		float: left;
	}
	.rightmenutextsize div {
		width: 67px;
		padding-left: 4px;
		line-height: 16px;
	}
	.rightmenuiconcolour {
		background-color: rgb(153,153,153);
		padding: 1px;
		border-top: 1px solid rgb(255,255,255);
	border-right: 1px solid rgb(51,51,51);
	border-bottom: 1px solid rgb(51,51,51);
	border-left: 1px solid rgb(255,255,255);
	}
	.rightmenuiconcolour div {
		background-color: rgb(255,255,255);
		border-top: 1px solid rgb(255,255,255);
	border-right: 1px solid rgb(51,51,51);
	border-bottom: 1px solid rgb(51,51,51);
	border-left: 1px solid rgb(255,255,255);
		color: rgb(0,0,0);
	}
	.rightmenutextcolour {
		background-color: rgb(153,153,153);
		padding: 1px;
		border-top: 1px solid rgb(255,255,255);
	border-right: 1px solid rgb(51,51,51);
	border-bottom: 1px solid rgb(51,51,51);
	border-left: 1px solid rgb(255,255,255);
	}
	.rightmenutextcolour div {
		background-color: rgb(255,255,255);
		border-top: 1px solid rgb(255,255,255);
	border-right: 1px solid rgb(51,51,51);
	border-bottom: 1px solid rgb(51,51,51);
	border-left: 1px solid rgb(255,255,255);
		color: rgb(0,0,0);
	}
	
	
	#panel_colourscheme {
		width: 98px;
		float: left;
		height: 28px;
	}
	#panel_colourscheme div {
		width: 96px;
		height: 22px;
		padding-top: 4px;
		text-align: center;
	}
	
	#panel_colourscheme select {
		width: 88px;
		font-size: 10px;
	}
	
	/* LEFT-HAND COLUMN: */
	#leftmenu {
		z-index: 2;
		position: absolute;
		top: 100px;
		left: 10px;
		width: 150px;
	}

	/* This renders the menu as a proper list -- thanks to Tom Hukins for the inspiration! */

	#leftmenu ul {
		list-style: none;
		margin: 0px;
		padding: 0px;
	}
	#leftmenu li {
		height: 30px !important; /* IE bug-fixing */
		height: auto;
	}
	
	/* LEFT-HAND MENU: */
	/* 	NOTES:
		I wanted to use combined class selectors here -- menutext.colour and menutext.size -- but once you use
		a sub <div>, eg 'menutext.colour div', and introduce a similar definition for menuicon ['menuicon.colour div']
		IE makes a complete hash of it [technically, applying the 'menuicon.colour div' definition to 'menutext.colour div's.
		Shame, it would have been quite neat.
	*/

	.menuiconsize {
		width: 26px;
		height: 26px;
		float: left;
	}
	.menuiconsize div {
		width: 24px;
		height: 19px; /* why doesn't min-height work here? */
		padding-top: 5px;
		text-align:center;
		font-weight:bold;
		overflow:hidden;
	}
	.menuiconcolour {
		background-color: rgb(153,153,153);
		padding: 1px;
		border-top: 1px solid rgb(255,255,255);
	border-right: 1px solid rgb(51,51,51);
	border-bottom: 1px solid rgb(51,51,51);
	border-left: 1px solid rgb(255,255,255);
	}
	.menuiconcolour div {
		background-color: rgb(255,255,255);
		border-top: 1px solid rgb(255,255,255);
	border-right: 1px solid rgb(51,51,51);
	border-bottom: 1px solid rgb(51,51,51);
	border-left: 1px solid rgb(255,255,255);
		color: rgb(0,0,0);
	}
	.menuiconcolour input {
		background-color: rgb(255,255,255);
		border-top: 1px solid rgb(255,255,255);
	border-right: 1px solid rgb(51,51,51);
	border-bottom: 1px solid rgb(51,51,51);
	border-left: 1px solid rgb(255,255,255);
		color: rgb(0,0,0);
		font-size: 1em;
	}	
	
	.menutextsize {
		width: 116px;
		height: 26px;
		float: right;
	}
	.menutextsize div {
		height: 24px;
		width: 114px;
	}
	
	.menutextcolour {
		background-color: rgb(153,153,153);
		padding: 1px;
		border-top: 1px solid rgb(255,255,255);
	border-right: 1px solid rgb(51,51,51);
	border-bottom: 1px solid rgb(51,51,51);
	border-left: 1px solid rgb(255,255,255);
	}
	.menutextcolour div {
		background-color: rgb(255,255,255);
		border-top: 1px solid rgb(255,255,255);
	border-right: 1px solid rgb(51,51,51);
	border-bottom: 1px solid rgb(51,51,51);
	border-left: 1px solid rgb(255,255,255);
		color: rgb(0,0,0);
	}
	
	.menutextcolourSE {
		background-color: rgb(153,153,153);
		padding: 1px;
		border-top: 1px solid rgb(255,255,255);
	border-right: 1px solid rgb(51,51,51);
	border-bottom: 1px solid rgb(51,51,51);
	border-left: 1px solid rgb(255,255,255);
	}
	.menutextcolourSE div {
		background-color: rgb(255,255,255);
		border-top: 1px solid rgb(255,255,255);
	border-right: 1px solid rgb(51,51,51);
	border-bottom: 1px solid rgb(51,51,51);
	border-left: 1px solid rgb(255,255,255);
		color: rgb(0,0,0);
	}
	
	.menutextlinkSE a {
		width: 108px;
		height: 19px;
		display:block;
		text-decoration: none;
		text-align: right;
		color: rgb(0,0,0);
		padding-top: 5px;
		padding-right: 6px;
	}
	
	.menutextlink a {
		width: 108px;
		height: 19px;
		display:block;
		text-decoration: none;
		color: rgb(0,0,0);
		padding-top: 5px;
		padding-left: 6px;
	}
	.menutextlink a:hover {
		background-color: rgb(255,255,255);
	}
	
	
	/* MAIN CONTENT: */
	#content {
		position: relative;
		margin-top: 100px;
		margin-right: 112px;
		margin-left: 160px;
	}
	#subcontent {
		/* Can't use #content.div here because we use <div>s in the flow of content */
		padding: 10px;
		color: rgb(0,0,0);
		min-height: 240px;
		height: auto !important;
		height: 240px;
		/* 	This stops the content block becoming smaller than the left/right columns.
			The !important declaration is an IE bug-fix. IE ignores min-height, so we need to set
			height. However, Gecko correctly then doesn't allow the height to stretch beyond 240px.
			The auto !important overrides this so that both browsers behave 'correctly'. */
	}
	.content {
		background-color: rgb(153,153,153);
		padding: 1px;
		border-top: 1px solid rgb(255,255,255);
	border-right: 1px solid rgb(51,51,51);
	border-bottom: 1px solid rgb(51,51,51);
	border-left: 1px solid rgb(255,255,255);
	}
	.subcontent {
		background-color: rgb(255,255,255);
		border-top: 1px solid rgb(255,255,255);
	border-right: 1px solid rgb(51,51,51);
	border-bottom: 1px solid rgb(51,51,51);
	border-left: 1px solid rgb(255,255,255);
	}
	
	/* FOOTERS: */
	#contentfooter {
		position: relative;
		margin-right: 112px;
		margin-left: 160px;
	}
	#contentfooter div {
		line-height: 16px;
		color: rgb(0,0,0);
		text-align: center;
	}
	.contentfooter {
		background-color: rgb(153,153,153);
		padding: 1px;
		border-top: 1px solid rgb(255,255,255);
	border-right: 1px solid rgb(51,51,51);
	border-bottom: 1px solid rgb(51,51,51);
	border-left: 1px solid rgb(255,255,255);
	}
	.contentfooter div {
		background-color: rgb(255,255,255);
		border-top: 1px solid rgb(255,255,255);
	border-right: 1px solid rgb(51,51,51);
	border-bottom: 1px solid rgb(51,51,51);
	border-left: 1px solid rgb(255,255,255);
	}
	
	.contentfooter a {
		text-decoration: none;
		color: rgb(0,0,0);
	}
	
	#leftmenufooter {
		position: relative;
		width: 150px;
		left: 10px;
		bottom: 0px;
		z-index: 2;
		float: left;
	}
	#menuicon_footer {
		width: 26px;
		float: left;
	}
	#menuicon_footer div {
		width: 24px;
		line-height: 16px;
		font-weight: bold;
		font-size: 10px;
		text-align:center;
		color: rgb(0,0,0);
	}
	#menutext_footer {
		width: 116px;
		float: right;
	}
	#menutext_footer div {
		width: 108px;
		padding-right: 6px;
		line-height: 16px;
		text-align: right;
		color: rgb(0,0,0);
	}

	#menutext_footer div a {
		text-decoration: none;
		color: rgb(0,0,0);
	}
	
	#rightmenufooter {
		position: relative;
		width: 102px;
		z-index: 2;
		float: right;
		top: -22px;
		right: 10px;
	}
	#rightmenufootertext {
		width: 98px;
		float: right;
	}
	#rightmenufootertext div {
		width: 92px;
		line-height: 16px;
		text-align: right;
		padding-right: 4px;
		color: rgb(0,0,0);
	}
	
	/* IBOXES: */
	/* This 'wide' business is a bit of a mess... */
	div.ibox {
		float: left;
		width: 21px;
		height: 18px;
		background-color: rgb(153,153,153);
		padding: 1px;
		border-top: 1px solid rgb(255,255,255);
	border-right: 1px solid rgb(51,51,51);
	border-bottom: 1px solid rgb(51,51,51);
	border-left: 1px solid rgb(255,255,255);
	}
	div.ibox div {
		text-align: center;
		cursor:pointer;
		width: 19px;
		height: 16px;
		background-color: rgb(255,255,255);
		border-top: 1px solid rgb(255,255,255);
	border-right: 1px solid rgb(51,51,51);
	border-bottom: 1px solid rgb(51,51,51);
	border-left: 1px solid rgb(255,255,255);
		line-height: 1px;
		font-size: 1px;
	}
	div.iboxwide {
		float: left;
		width: 22px;
		height: 18px;
		background-color: rgb(153,153,153);
		padding: 1px;
		border-top: 1px solid rgb(255,255,255);
	border-right: 1px solid rgb(51,51,51);
	border-bottom: 1px solid rgb(51,51,51);
	border-left: 1px solid rgb(255,255,255);
	}
	div.wide {
		width: 22px;
	}
	div.wide div {
		width: 20px;
	}
	div.iboxwide div {
		text-align: center;
		cursor:pointer;
		width: 20px;
		height: 16px;
		background-color: rgb(255,255,255);
		border-top: 1px solid rgb(255,255,255);
	border-right: 1px solid rgb(51,51,51);
	border-bottom: 1px solid rgb(51,51,51);
	border-left: 1px solid rgb(255,255,255);
		line-height: 1px;
		font-size: 1px;
	}
	
	/* SIDE PANELS: */
	#panel_left {
		width: 146px;
		float: left;
	}
	#panel_right {
		width: 98px;
	}
	.panel {
		background-color: rgb(153,153,153);
		padding: 1px;
		border-top: 1px solid rgb(255,255,255);
	border-right: 1px solid rgb(51,51,51);
	border-bottom: 1px solid rgb(51,51,51);
	border-left: 1px solid rgb(255,255,255);
	}
	.panel div {
		background-color: rgb(255,255,255);
		border-top: 1px solid rgb(255,255,255);
	border-right: 1px solid rgb(51,51,51);
	border-bottom: 1px solid rgb(51,51,51);
	border-left: 1px solid rgb(255,255,255);
	}