*
{
	margin:				0;
	padding:			S;
	box-sizing: 		content-box;
}

/* colors and reminders - for information only */
foo#bar
{
	background-color:	#000000;		/* black */
	background-color:	#ffffff;		/* white */
	background-color:  	#d4d9ca;		/* mid grey throughout site for box backgrounds  */  
	background-color:  	#b3b5a7;		/* darker grey for site background */ 
	background-color:	#dfdfdf;		/* light grey thoughout the site, lines near content etc */
	background-color:	#095781;		/* dark blue text also used on h1*/
	background-color:	#76a6e68;		/* grey text for body and content */
	background-color:	#005f91;		/* mid blue links hrefs */
	background-color:	#3f3f3f;		/* grey heading for h2 / h3 bold and top menu*/
	background-color:	#cf471e;		/* dull orange / brown for h1 and on menu bar and maplegals */
	background-color:	#3f3f3f;		 /*dull brown-black rollover on menu bar*/ 
	background-color:   #ffe500;		/* pale yellow rollover option replaces white on orange backgrounds */
	background-color:   #f7941d;		/* orange text - side menu rollover */
	background-color:   #b2c3c0;     	/* reduced grey (a bit) to compensate for illusion of bold on side menu lines*/
	margin:             top right bottom left; /* just a reminder */
	width:				766px;			/* width of content area */
	width:				380px;			/* width of left content area */
	width:				331px;			/* width of bottom right area in total */
	width:              325px;			/* width of bottom right inner box */ 
}

html 
{ 
	font-size: 			100.01%; 		/* IE hack */ 
	height:				100%;
}

/*	LAYOUT TAGS	*/

body
{
	font:				normal 70% Verdana, Arial, Helvetica, sans-serif;
	color:				#000000;		/* black */
	background-color:  	#b3b5a7;		/* darker grey for site background */ 
	border:				0;	
	min-height:			101%;
	width: 				auto;
}


/*	STANDARD TAGS */

table
{
	/*border-collapse:	collapse;*/
}

a
{
	color:				#656661;		/* mid blue links hrefs */
	text-decoration:	underline;
}

a:hover
{
	color:				#f7941d;		/* orange text - side menu rollover */
	text-decoration:	underline;
}



/* 
	standard formatting
	
	sizes and margins declared in EM units so that user can
	increase the text size and still preserve the structure
*/


h1
{
	font-weight:  		bold;
	font-family:        Arial, Helvetica, Verdana, sans-serif;
	font-size:  		1.8em;
 	margin-bottom:  	0.3em;
	color:				#cf471e;		/* dull orange / brown for h1 and on menu bar and maplegals */
}

h2
{ 
	font-weight:  		bold;
	font-family:        Arial, Helvetica, Verdana, sans-serif;
	font-size:  		1.3em;
 	margin-bottom:  	0.2em;
	margin-top:  		0.8em;
	color:				#3f3f3f;		/* grey heading for h2 / h3 */
}

h3
{ 
	font-weight:  		bold;
	font-family:        Arial, Helvetica, Verdana, sans-serif;
	font-size:  		1.2em;
 	margin-bottom:  	0.4em;
	color:				#3f3f3f;		/* grey heading for h2 / h3 */
}

h4
{
	font-weight:		bold;
	font-size:			1.0em;
	margin-bottom:		1.0em;
}

h5  	/* grey heading in big boxes */
{ 
	font-weight: 		bold;
	font-family:        Arial, Helvetica, Verdana, sans-serif;
	font-size:  		1.4em;
 	margin-bottom:  	0.4em;
	color:				#3f3f3f;		/* grey heading for h2 / h3 */
}

p
{
	font-size:			1.0em;
	margin-bottom:		1.0em;
	line-height:        150%;
}

b
{
	color:				#3f3f3f;		/* grey heading for h2 / h3 bold and top menu*/
}

img
{
	border:			none;
}

ul, ol
{
	font-size:			1.0em;
	padding-left:		2.0em;
}

ul li, ol li
{
	margin-bottom:		0.5em;
	margin-left:		2.0em;

}

ul
{
	margin-bottom:		1.0em;
}

.nocss
{
	display:			none;
}



/*
	table where th's are down the left and input boxes and such are in td's along the right
*/

div.clear
{
	font-size:		0;
	height:			0px;
	width:			0;
	overflow:		hidden;
	clear:			both;
}



/*

	outer and inner serve only to align background images and preserve the
	scrollbar for mozilla-based browsers. 

*/

div#outer
{
	text-align:			left;
	margin:				0 auto;
	width:				794px;
	min-height:			100.01%;
	background-color: 	#FFFFFF;
}


div#inner
{
	padding-left:		14px;
	color:				#6a6e68;				/* grey text which applies to BODY of CONTENT*/
	margin-bottom:		10px;					/* some  space to scroll down to*/	
}



/*  SITE LAYOUT

body >
outer >
inner >

|-------------------|
|head               | 
|-------------------|
|menu               |
|-------------------|
|bigbuttons         |
|-------------------|
|content and :      |
|                   |
|content     content|
|left        right  |
|                   |
|                   |
|                   |
|-------------------|
|foot               |
|-------------------|

*/

div#head
{
	height:				198px;
	margin:				auto;
	margin-bottom:      11px;
	width:				766px;
	background-color: 	#FFFFFF;
	background-image:	url(../img/head.png);
	text-align: 		right;
}

div#head img
{
	float:				left;
	display:            block;
}


div#maplegals	  				/* controls for site map and legals buttons in top right */
{
	display:			block;
	float:				right;
	margin-right:     	15px;
	margin-top:     	9px;
	margin-bottom:  	12px;
	font-weight: 		normal;
	font-family:		Arial, Helvetica, Verdana, sans-serif;
	font-size: 			12px;
	color:				#ffe500;
	text-decoration:	none;
}

div#maplegals a
{
	color: 				#fff8b7;		
	text-decoration:	none;
	font-weight:		bold;
}

div#maplegals a:hover
{
	color: 				#cf471e;	/* dull orange / brown on menu bar and maplegals */
}

div#menu							/* orange strip menu across page, "menutable" provides background and controls for foot.inc */
{
	margin:           	0px 0px 0px 14px;
	height:			  	40px;
	width:            	766px;
	background-image:	url(../img/menu-strip.png);
	font-weight: 		normal;
	font-family:		Arial, Verdana, Helvetica, sans-serif;
	font-size: 			14px;
	font-weight: 		bold;
	text-decoration:	none;
	vertical-align: 	center;	
}

table.menutable
{
	margin:				0 auto;
	width:          	766px;
}

table.menutable th, table.menutable td
{
	padding:			9px;
	vertical-align: 	top;
	text-align:			center;
}

table.menutable a
{
	text-decoration:   	none;
	color:				#cf471e;		
}

table.menutable a:hover
{
	color:				#3f3f3f;		 /*dull brown-black rollover on menu bar*/ 
}


div#bbcontainer-top						/* big button table container for home page, "bbutton do detailed stuff */
{
	margin:           	10px 0px 0px 14px;
	width:            	766px;
	height:   			90px;
	font-family:		Arial, Verdana, Helvetica, sans-serif;
	font-size:			1.1em;
	background-image:	url(/img/bigbutton-top.png);	/* one image covers the three buttons to give flexible margins */
	background-repeat:  no-repeat;
}

div#bbcontainer-bottom						/* big button table container for home page, bbutton* does detailed stuff */
{
	margin:           	0px 0px 0px 14px;
	width:            	766px;
	height:   			44px;
	font-family:		Arial, Verdana, Helvetica, sans-serif;
	background-image:	url(/img/bigbutton-bottom.png);	/* one image covers the three buttons to give perfect margins */
	background-repeat:  no-repeat;
}

/* big buttons for home page, each indivdually set to allow flexibility on margins on alternative browsers */

div#bbutton1
{
	width: 				234px;
	height:   			78px;
	float:				left;
	margin-left: 		9px;
	margin-right:		12px;
	margin-top: 		6px;
}

div#bbutton2
{
	width: 				234px;
	height:   			78px;	
	float:				left;
	margin-left: 		13px;
	margin-right:		8px;
	margin-top: 		6px;
}

div#bbutton3
{
	width: 				234px;
	height:   			78px;
	float:				left;
	margin-left: 		16px;
	margin-right:		3px;
	margin-top: 		6px;
}

div#bbutton-button1
{
	width: 				234px;
	float:				left;
	margin-left: 		10px;
	margin-right:		4px;
	margin-top: 		0px;
	margin-bottom: 		0px;
	padding-top: 		4px;
}

div#bbutton-button2
{
	width: 				234px;
	height:   			40px;
	float:				left;
	margin-left: 		20px;
	margin-right:		8px;
	margin-top: 		0px;
	margin-bottom: 		0px;
	padding-top: 		4px;
}

div#bbutton-button3
{
	width: 				234px;
	height:   			40px;
	float:				left;
	margin-left: 		16px;
	margin-right:		0px;
	margin-top: 		0px;
	margin-bottom: 		0px;
	padding-top: 		4px;
}



/*	MAIN CONTENT AREA   	NOTE: div#inner defines the colour of the page content text */ 


div#content								/* top-level container for everything that's "content", has grey box around it */ 
{
	margin-top:  			-2px;		/* For the texts - goes full width of page inside grey box  */ 
	margin-bottom:          -4px;
	background-image:		url(/img/box-grey-mid.png);
	background-repeat: 		repeat-y;
	float: 					left;
	width: 					766px;
	height: 				inherit;
}


div#pagecontent							/* For the texts - goes full width of page inside grey box  */ 
{
	padding-top:			2px;
	padding-left: 			20px;
	float:  				left;
	clear: 					left;
	width:  				734px;
}

div#pagecontent	img						/* Removes default padding, won't be perfect if there's text below so may need */ 
										/* to add style on the page.  Or add white space in the graphic itself */ 
{
	padding-top: 			0px;
	padding-left: 			0px;
	padding-right: 			0px;
	padding-bottom: 		0px;
}

div#pagecontent-left					/* For the texts - left hand side only  */ 
{
	padding-top:			10px;
	padding-left: 			20px;
	width:  				375px;
	float: 					left;
	display: 				block;
}

div#pagecontent-left img				/* Removes default padding, won't be perfect if there's text below so may need */ 
										/* to add style on the page.  Or add white space in the graphic itself */ 
{
	padding-top: 			0px;
	padding-left: 			0px;
	padding-right: 			0px;
	padding-bottom: 		8px;
}

div#pagecontent-right					/* For the texts - right hand side only  */ 
{
	padding-top:			2px;
	padding-right:          9px;
	width:  				326px;
	float: 					right;
	display: 				block;
}

div#pagecontent-right img				/* Removes default padding, won't be perfect if there's text below so may need */ 
										/* to add style on the page.  Or add white space in the graphic itself */ 
{
	padding-top: 			0px;
	padding-left: 			0px;
	padding-right: 			0px;
	padding-bottom: 		0px;
}

div#news			/* News area  */ 
{
	margin-top:			10px;
	margin-left: 		10px;
	_margin-left:       18px;			/* IE 6 HACK increasing left margin  */ 
	margin-right:		2px;
	min-height:			600px;			/* stops the right-hand images wandering if there's not much news  */ 
}

div#news img			
{
	padding:  	         2px;
	margin-right:        -10px;   		/* puts the images the right distance from the right side of the page */
}



/*	FOOTER AREA */

div#foot
{
	font-weight: 		normal;
	font-family:		Arial, Helvetica, Verdana, sans-serif;
	font-size: 			11px;
	text-decoration:	none;
	color: 				#000000;
	width:     			766px;
	margin-top:   		8px;
	padding-top:	    6px;
	text-align: 		center;
	line-height:		16px;
	background-image:	url(/img/footer-background.png);	/* grey background */
	background-repeat:	no-repeat; 
	min-height: 		44px;
	#min-height: 		34px;		/* HACK trims bottom whitespace margin for IE */
	/* height: 0px;		do not set a height as Firefox will foul-up as div heights are interlinked */
}

div#foot a
{
	color: 				#000000;
	margin-right: 		2px;
	text-decoration: 	none;
}

div#foot a:hover
{
	color: 				#f7941d;	/* orange text - same as side menu rollover */
}

/*
	HELPER STYLES
*/

div.imgleft
{
	float:left;
	clear: both;
	padding: 5px 10px 5px 0;
}

div.imgright
{
	float:right;
	clear: both;
	padding: 0px 5px 0px 0px;
}

hr
{
	display: block;
	margin-left: 0px;
	margin-right: 0px;
	clear: both;
	height: 1px;
	border-top: 1px solid #dfdfdf;		/* light grey line */
}


/*
		PARAGRAPH CONTROLS FOR RIGHT HAND SIDE BLOCKS
*/

.grey	/* grey block management for right hand side */
{
	padding-left: 16px;
	padding-right: 16px;
	margin-top: -2px;
	margin-bottom: -2px;
	padding-bottom: 7px;
	background-color: #d4d9ca;
}

.orange	/* orange block management for right hand side */
{
	padding-left: 16px;
	padding-right: 16px;
	margin-top: -2px;
	margin-bottom: -2px;
	padding-bottom: 7px;
	background-color: #ffb600;
	color: #FFFFCC;
}

.orange	a:hover		/* orange block management for right hand side */
{
	color: #3f3f3f;
}


/*Tiny MCE Stuff - probably not required */

input.button
{
	width:				75px;
}

input.text,
input.textnormal,
input.textsmall,
input.textwide,
input.textthin,
textarea
{
	border:				1px solid #666;
	background-color:	#FFFFFF;	/* white */
	height:				1.5em;
}

input.text,
input.textnormal
{
	width:				250px;
}

input.texttiny
{
	width:				37px;
}

input.textsmall
{
	width:				75px;
}

input.textwide
{
	width:				300px;
}

input.textsubscribe
{
	width:				200px;
}

.admin textarea
{
	width:				300px;
	height:				300px;
}

textarea				/* BEWARE that in Firefox this can affect the Text Editor box in the Admin Area */
{
	width:				300px;
	height:				150px;
}

/*
		ADMIN STUFF
*/

#admin textarea.Chan_Controls_TextBox
{
	height:	400px;
}