/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ HTML elements */

			body {
				font: 70% Verdana, Arial, Helvetica, sans-serif; 	/* Is arial the correct font here? */
				padding: 0;
				margin: 0;
				line-height: 1.4em; 						/* A touch more line-height, as per mock-ups */
			}

img {
border: none;
}


			html>body h1 {
				padding: 0;
				margin: 0;/* matching padding to the text div below it */
			}
			
			h1 {
				padding: 0;
				margin: 0;/* matching padding to the text div below it */ /* pull IE into line... */
				}
			
			h2 {
				font-size: 1em;
				margin: 0;
				padding: 0;
				margin-bottom: 0; /* collapse margin, to get h2 to sit directly above para.first */
			}
			
			h3 {
				font-size: 1em;
				margin: 0; /* collapse margin, to get h3 to sit directly below h2 */
			}
			
			a {
				color: #000;
			}
			
			p {
				margin: 0;
				padding: 0;
			}
			
			select {
				margin-bottom: 40px;
			}
			
			
			img
			{
			border: none;
			margin: 0;
			padding: 0;
			}
			
			
			#years form
			{
			margin: 0;
			padding: 0;
						padding-left: 30px;

			} 
			
			
			#years select
			{
			margin: 0;
			margin-top: 5px;
			margin-bottom: 0;
			width: 250px;
			padding: 0;

			}

			/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ end HTML elements */
		
			/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ centre the content */
			
			#container {
				width: 800px;
				margin: auto;
		/*	height: 600px;		 		check */
				padding-top: 30px;		/* nice large whitespace area at the top */
			clear: both;
			}
			
				
				#header
				{
				margin: 0;
				padding: 0;
				width: 800px;
				height: 50px;
				}
				
			#dropdowns
			{
			margin: 0;
			padding: 0;
					clear: both;

			}
			
			#dropdowns form
			{
				margin-left: 2em;
				}
				
								#dropdowns form select, #dropdowns form option
				{
							width: 250px;

}
							#footer form select, #footer form option
				{
							width: 250px;

}
				
			#dropdowns form.textsdropdown select, #dropdowns form.textsdropdown option
			{
			width: 750px;
			}	
			
			/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ centre the content */
			
			/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Begin Panels - panels given generic #id's, that way the markup can stay the same and the classes can differentiate between the panel style */			
			
			#panel1.text { /* panel1.text expects a panel2 */
				width: 340px;
								height: 420px;

				float: left;
				padding: 0;
				margin: 0;
				margin-right: 20px;
								overflow: auto;

			/*	clear: both; */
			}
			
			#panel1.text p, #panel1.text h2
			{
			padding: 0;
			margin: 0;
			margin-left: 30px;
			margin-right: 20px;
			}
			
			#panel1.text p
			{
			margin-bottom: 0.35em;
			}
			
				#panel2.text h6, #panel2a.text h6, #panel3a.text h6 { 
						margin: 0; 
						margin-top: 0.7em; 
						padding-right: 0.2em; 
						font-size: 1em;
						font-weight: normal;
						}
			
			select.setwidth
			{
			width: 250px;
			}
			
			#panel2.subimage { /* panel2 subimage expects a panel1 */
				width: 420px;
				float: left;
				/* height: 700px; */
			}
			
			#panel2.text { /* panel2.text expects a panel1 */
				width: 420px;
				float: left;
				height: 420px;
				overflow: auto;
				margin-bottom: 10px;
				margin: 0;
				padding: 0;
			}
			
			#panel2.text img
			{
			margin-bottom: 10px;
			}
			
			#panel2.text p
			{
			margin-bottom: 0.7em;
			}
			
			#panel2.text h3
			{
			margin-top: 1.4em;
			}
			
			
		
			
			#subnav
			{
			padding: 0;
margin: 0;
margin-top: 10px;
clear: both;
			}
			
			
			#panel1a.text { /* panel1.text expects a panel2 */
				width: 240px;
				height: 400px;
				float: left;
				padding: 0;
				margin: 0;
				margin-left: 30px;
				margin-right: 20px;
				overflow: auto;
			}
			
			#panel2a.text { /* panel1.text expects a panel2 */
				width: 240px;
				height: 400px;
				float: left;
				padding: 0;
				margin: 0;
				margin-right: 20px;
				overflow: auto;
			}
			
			#panel3a.text { /* panel1.text expects a panel2 */
				width: 240px;
				height: 400px;
				float: left;
				padding: 0;
				margin: 0;
				overflow: auto;
			}
			
				#panel2a.text p
			{
			margin-bottom: 0.7em; padding-right: 0.2em;
			}
			
			#panel3a.text p
			{
			margin-bottom: 0.7em; padding-right: 0.2em;
			}
			
			#footer {
			/* height: 100px;  	*/
				/*clear: right;  clear so it sits at bottom, although the clear height is 600px, as per the #panel2.subimage height */
padding: 0;
padding-left: 30px;
padding-top: 27px;

margin: 0;
margin-top: 10px;
clear: both;
			}
			
				#footer img
			{
			margin-right: 18px;
			}
			
			#footer form
			{
							margin-left: 2em;
display: inline;
			}
			
			#footer select
			{
			margin-bottom: 0;
			}
			
			#panel1.text select
			{
			
			margin-top: 20px;
			margin-bottom: 0;
			}
			
			
				#sitetitle
			{
			float: left;
			width: 360px;
						height: 50px;
margin: 0;
padding: 0;
			}
			
			#sitetitle img
			{
			padding-left: 30px;

}
			
			#sectiontitle
			{
			float: left;
			width: 420px;
			height: 50px;
			margin: 0;
padding: 0;
			}
			
			
						#work-form
			{
			float: left;
			width: 335px;
						height: 50px;
margin: 0;
margin-left: 30px;
padding: 0;
			}
			
			#work-text-nav
			{
			float: left;
			width: 400px;
			height: 50px;
			margin: 0;
padding: 0;
			}
			
			/* classes */
			
			
			
			.important {
				color: #f00;
				margin: 1em 0; /* gives the red text a line break between paras */
			}
			
			.first { 
				margin: 0; /* collapse margin, to get h2 to sit directly above para.first */
			}
			
			.categories {
				margin: 20px 0; /* this class present only on Page8.htm to give space between para and links. */
			}
			
			/* end classes */