/* refer to comments here and in the associated HTML files */
/* Textpad might not be up to date with the latest (html 5). If something similar to an existing tag is required use a new style eg. <figure class="eqn_1">...</figure> */	

/* borders and backgrounds are useful for setting up even if they look bizarre, so they tend to be commented out when not required */
/*check that max-width and width:auto are used to allow the window to be squeezed horizontally without chopping things off */
/* margins can be very awkward to set up. If unexpected results check for incompatibilities in the values chosen for height, width etc. */ 
/* where it is not clear how the css code works, possible alternatives are left nearby but commented out */

* { 
	/*defaults for everything, in the whole browser window */
	margin:0;
	padding:0;
}

html	{
		/* It would be nice to optimise width/height for printing on A4 */
		max-width:1000px;
		/* left to right edges of white page, will be 100% */
		/*max-width:779px;*/
		width:auto;
		height:auto;
		margin:10px auto 20px auto;	/*top right bottom left */
		/* centralised left...right with small borders top and bottom */
		background:#cccccc;	/* light grey background */
	}

body	{
		/* It would be nice to optimise width/height for printing on A4 */
		/*width:100%;*/
		width:77.9%;
		width:auto;
		height:auto;
		color:#000000;
		font-family:arial;
		margin:10px auto 20px auto;	/*top right bottom left */
		background:#ffffff;	/* white page */
		/*border:1px solid #ff0000;*/
		padding: 20px 0px 20px 0px;	/*top right bottom left */
		/* centralised left...right with small borders top and bottom */
		counter-reset:HLevel_1;		/* for heading h1...h3 */
		counter-reset:HLevel_1C;	/* for heading h4...h6 */
	}

a:link		{
		/*unvisited link*/
		text-decoration:none;
		/*color:#00ffff;*/
		color:#0000ff;
		/* allows text-decoration:underline on hover over links */ 
		}

a:visited		{
		/*visited link*/
		/*text-decoration:none;*/
		/*color:#0000ff;*/
		color:#00ffff;
		/* allows text-decoration:underline on hover over links */ 
		}

.CA_header {
				/*max-width:100%;*/
				/*width:auto;*/
		width:45%;
		height:60px;
		/*height:auto;*/
		/*display:inline-block;*/
		border:1px solid #000000;
		margin:10px auto 30px auto;	/*top right bottom left */
		/*height:439px;*/
		/*background:#cccccc;*/
		background:#ffffff;
		/*padding: 0px 0px 10px 0px;*/
		/*background:url(images/head_bg.gif) no-repeat 0% 0%	*/}

.box_10 {	
		/*font-size:16px;*/
		/*font-weight:normal;*/
		max-width:95%;
		border:1px solid #000000;
		/*top right bottom left*/
		/*padding:0px 10px 0px 10px;*/
		margin:20px auto 20px auto;	/*top right bottom left*/
}

.box_15 {	
	/*float:left;*/
	/*max-width:98%;*/
	max-width:750px;
	/*width:auto;*/
	min-height:300px;	/* sufficient to fit all the blocks above */
	height:auto;
	overflow:auto;
	border:1px solid #00ff00;
	margin:20px auto 20px auto;	/*top right bottom left*/
	}

.p1 { 	
	font-size:16px;
	font-weight:normal;
	width:90%;
	color:#000000;
	min-height:20px;
	height:auto;
	margin:0px 20px 0px 0px;	/*top right bottom left */
	padding: 10px 0px 10px 0px;
	/*border:1px solid #ff0000;*/
}

.p2 { 
	font-size:16px;
	color:#000000;
	text-align:center;
	margin:20px 20px 0 20px;	/*top right bottom left */
}
.p3 { 	
	font-size:16px;
	width:90%;
	color:#000000;
	min-height:20px;
	height:auto;
	margin:0px 20px 0px 0px;	/*top right bottom left */
	/*padding: 10px 0px 10px 0px;*/
	/*border:1px solid #ff0000;*/
}

.p4 { 	
	font-size:16px;
	width:90%;
	color:#000000;
	min-height:20px;
	height:auto;
	margin:0px 0px 20px 40px;	/*top right bottom left */
	/*padding: 10px 0px 10px 0px;*/
	/*border:1px solid #ff0000;*/
}


.p5 { 	
	font-size:16px;
	/*width:90%;*/
	color:#000000;
	min-height:20px;
	height:auto;
	margin:10px 20px 10px -15px;	/*top right bottom left */
	/*padding: 10px 0px 10px 0px;*/
	/*border:1px solid #ff0000;*/
}

.p15 { 	
	font-size:20px;
	color:#000000;
	text-align:center;
	margin:20px auto 20px auto;	/*top right bottom left */
	/*border:1px solid #00ff00;*/
	/*display:inline-block;*/
	/*padding: 10px 0px 10px 0px;*/
}

.p17 { 	
	font-size:16px;
	font-weight:normal;
	width:97%;
	color:#000000;
	/*min-height:20px;*/
	/*height:auto;*/
	margin:0px 20px 0px 20px;	/*top right bottom left */
	padding: 10px 0px 10px 0px;
	/*border:1px solid #ff0000;*/
}


.p18 { 	
	font-size:16px;
	font-weight:normal;
	width:90%;
	color:#000000;
	/*min-height:20px;*/
	/*height:auto;*/
	margin:0px 20px 0px 29px;	/*top right bottom left */
	padding: 10px 0px 10px 0px;
	/*border:1px solid #ff0000;*/
}



.ret_link1	{	
		list-style-type:none;
		margin: 0px 0px 0px 20px; /*top right bottom left*/
		}

.ret_link2	{
		list-style-type:none;
		margin: 0px 0px 20px 0px; /*top right bottom left*/
		}



.ret_link3	{
		/*list-style-type:none;*/
		margin: 0px 0px 10px 35px; /*top right bottom left*/
		}

.ul_1		{
			/*font-weight:bold;*/	/* default is normal */
			margin:15px 20px 15px 35px;
			padding: 0px 0px 0px 0px;	/*top right bottom left*/
			list-style-type:disc;	/* circle, square, none */
			/*border:1px solid #ff0000;*/
		}

.ul_1 li	{		/* only for <li> within ul_1 */
				font-weight:bold;
			}

			.ul_2		{
			margin:10px 0px 20px 15px;
			padding: 0px 0px 0px 0px;	/*top right bottom left*/
			font-weight:normal;
			list-style-type:disc;	/* circle, square, none */
			/*border:1px solid #00ff00;*/
		}

.ul_2		{
			font-weight:bold;	/* default is normal */
			margin:15px 20px 15px 25px;
			padding: 0px 0px 0px 0px;	/*top right bottom left*/
			list-style-type:none;	/* circle, square, none */
			/*border:1px solid #ff0000;*/
		}


.ul_3		{
			margin:0px 0px 0px 20px;
			/*padding: 0px 0px 0px 0px;*/	/*top right bottom left*/
			list-style-type:none;	/* circle, square, none */
			/*border:1px solid #00ff00;*/
		}
.ul_4		{
			margin:10px 0px 10px 55px;
			padding: 0px 0px 0px 0px;	/*top right bottom left*/
			list-style-type:disc;	/* circle, square, none */
			/*border:1px solid #00ff00;*/
		}

.ul_5		{
			margin:10px 0px 0px 35px;
			/*padding: 0px 0px 0px 0px;*/	/*top right bottom left*/
			list-style-type:disc;	/* circle, square, none */
			/*border:1px solid #00ff00;*/
		}

.ul_6		{
			margin:10px 0px 10px 25px;
			padding: 0px 0px 0px 0px;	/*top right bottom left*/
			list-style-type:disc;	/* circle, square, none */
			/*border:1px solid #00ff00;*/
		}

.ul_7		{
			/*font-weight:bold;*/	/* default is normal */
			margin:15px 20px 15px 45px;
			padding: 0px 0px 0px 0px;	/*top right bottom left*/
			list-style-type:disc;	/* circle, square, none */
			/*border:1px solid #ff0000;*/
		}

.ul_7 li		{
			font-weight:bold;	/* default is normal */
			margin:15px 20px 15px 0px;
			/*padding: 0px 0px 0px 0px;	*/ /*top right bottom left*/
			list-style-type:disc;	/* circle, square, none */
			/*border:1px solid #ff0000;*/
		}


.ol_1		{
			margin:10px 20px 0px 35px;
			padding: 0px 0px 0px 0px;	/*top right bottom left*/
			font-weight:bold;
			/*list-style-type:disc;*/	/* circle, square, none */
			/*border:1px solid #0000ff;*/
		}

.ol_2		{
			margin:0px 0px 0px 15px;
			/*padding: 0px 0px 0px 0px;*/	/*top right bottom left*/
			/*list-style-type:none;*/	/* circle, square, none */
			/*border:1px solid #ff00ff;*/
		}
.ol_3		{
			margin:0px 20px 0px 45px;
			padding: 15px 0px 15px 0px;	/*top right bottom left*/
			/*list-style-type:disc;*/
			font-weight:bold;	/* circle, square, none */
			/*border:1px solid #0000ff;*/
		}

.ol_3 li		{
			/*margin:0px 20px 0px 35px;*/
			/*padding: 0px 0px 0px 0px;*/	/*top right bottom left*/
			/*list-style-type:disc;*/
			font-weight:normal;	/* circle, square, none */
			/*border:1px solid #0000ff;*/
		}
	
caption	{	
			max-width:100%;
			/*width:80%;*/
			width:auto;
			/*font-family:arial;*/
			font-size:18px;
			color:#000000;
			font-weight:bold;
			/*border:1px solid #000000;*/
			/*margin:auto;*/
			/*display:block;*/
			text-align:center;
			/*horizontal-align:center;*/
			margin: 10px auto 10px auto;	/*top right bottom left */
		/*padding: 20px 20px 20px 20px;*/
		}

		tbody{ border:10px solid #ff0000}

table	{
		border:1px solid #000000;
		/*max-width:1000px;*/
		max-width:100%;
		width:auto;
		/*text-align:left;*/
		/* display:none, inline, block, inline-block */
		/*display:block;*/
		/*align-content:center;*/
		margin:10px auto 10px auto;	/*top right bottom left */
		/*padding: 0px 0px 0px 0px;*/
		/*width:auto;*/
		}

	/*tbody	{
			border:10px solid #ff0000;
	}*/

	/* all td tags have classes: td_1, td_2 etc */

		td {
				border:1px solid #000000;
				border-style:solid solid solid solid;
				padding: 0px 0px 0px 10px;

		}


.td_1	{
			width:210px;
			height:30px;
			border:1px solid #000000;
			border-style:none none none left;	/*top right bottom left */
			vertical-align:top;
			padding: 0px 0px 0px 3px;
			margin:0px 0px 0px 0px;
		}
.td_2	{
			width:2px;
			height:30px;
			/*border-style:none none none none;*/	
			/*vertical-align:top;*/
		}


.td_3	{
			width:70px;
			height:30px;
			border:1px solid #000000;
			/*border-style:none none none none;*/	/*top right bottom left */
			vertical-align:top;
			/*padding: 0px 0px 0px 3px;*/
			/*margin:0px 0px 0px 0px;*/
		}
.td_4	{
			width:350px;
			height:30px;
			border:1px solid #00ff00;
			/*border-style:none none none none;	*/
			vertical-align:top;
		}

tr	{
		/*border:1px solid #00ff00;*/
		width:90%;
		/*display:block;*/
		/*text-align:center;*/
		border-style:solid solid solid solid;	
		align-content:center;
		/*margin:0px auto 0px auto;*/	/*top right bottom left */
	}

.tr_1	{
		border:1px solid #00ff00;
		width:90%;
		/*display:block;*/
		/*text-align:center;*/
		border-style:solid solid solid solid;	
		align-content:center;
		padding:10px 10px 10px 10px	/*top right bottom left */
	}



th	{
		border:1px solid #000000;
		/*width:200px;*/
		margin:0px auto 0px auto;	/*top right bottom left */
		/*padding:10px 10px 10px 10px;*/	/*top right bottom left */

	}


.th_1	{
		border:1px solid #ff0000;
		/*width:200px;*/
		/*margin:0px auto 0px auto;*/	/*top right bottom left */
		padding:7px 7px 7px 7px;	
	}



.row_1		{	/* index.html */
		background:#dddddd;
		/*border:2px solid #000000;*/
		/*margin: 60px 0 0 60px;*/	/*top right bottom left */
		}
.footer {
	width:55%;
	/*min-width:80%;*/
	/*width:auto;*/
	font-size:14px;
	text-align:center;
	/*min-height:50px;*/
	/*overflow:auto;*/
	height:auto; /* allows vertical expansion when page squashed */
	/*clear:both;*/
	border:1px solid #000000;
	background:#ffffff;
	margin: 20px auto 0px auto; 	/*top right bottom left */
	padding:0px 10px 0px 10px;
	/*border:1px solid #ff0000;*/
}


figure		{	/* applies to equations also, note uses figcaption not caption */
			width:100%;
			/*width:auto;*/
			/*min-height:20px;*/
			height:auto;
			font-size:18px;
			color:#000000;
			font-weight:bold;
			/*border:1px solid #ff0000;*/
			text-align:center;
			margin: 0px auto 10px auto;
		/*padding: 20px 20px 20px 20px;*/
		}

.fig1	{
		float:left;
		width:350px;
		min-height:250px;
		height:auto;
		margin:10px 10px 10px 10px;	/*top right bottom left */
		border:1px solid #0000ff;
	}

/* .fig1 and .fig_1 need rationalising */


.fig_1	{
			width:80%;
			/*border:1px solid #00ff00;*/
			text-align:center;
			margin: 20px auto 10px auto; /*top right bottom left */
	}





figcaption	{	/* figcaption intended to go inside figure, may still work outside */
		width:95%;
		font-family:arial;
		font-size:16px;
		color:#000000;
		font-weight:bold;
		/*border:1px solid #0000ff;*/
		/*margin:auto;*/
		/*display:block;*/
		text-align:center;
		margin: 20px auto 20px auto;	/*top right bottom left */
		/*padding: 20px 20px 20px 20px;*/
		}				

.figcap_1	{
			margin:10px auto auto 10px;	/*top right bottom left */
		}

/* h1 to h6 are built in HTML, not classes */


/******************************************************/

/* h1 to h6 are built in HTML */

h1	{
	counter-increment: HLevel_1;    /* starts at 0 in body{}*/
	counter-reset:HLevel_2;
	font-size:16px;
	color:#000000;
	margin:20px 20px 0 30px;	/*top right bottom left */
	}
h1::before {
   	content: counter(HLevel_1) ".";
  	margin: 0px 38px 0px 0px;	 /*top right bottom left */
  	}

.h1C	{
	counter-increment: HLevel_1C;    /* starts at 0 in body{}*/
	counter-reset:HLevel_2C;
	font-size:16px;
	color:#000000;
	margin:20px 20px 0 30px;	/*top right bottom left */
	}
.h1C::before {
   	content: counter(HLevel_1C) ".";
  	margin: 0px 50px 0px 0px;	 /*top right bottom left */
  	}

h2	{
	counter-increment: HLevel_2;
	counter-reset:HLevel_3;
	font-size:16px;
	color:#000000;
	margin:0px 20px 0px 30px;	/*top right bottom left */
	}

h2::before {
  	content: counter(HLevel_1) "." counter(HLevel_2);
  	margin: 0px 30px 0px 0px;	 /*top right bottom left */
	}

.h2C	{
	counter-increment: HLevel_2C;
	counter-reset:HLevel_3C;
	font-size:16px;
	color:#000000;
	margin:0px 20px 0px 30px;	/*top right bottom left */
	}

.h2C::before {
  	content: counter(HLevel_1C) "." counter(HLevel_2C);
  	margin: 0px 40px 0px 0px;	 /*top right bottom left */
	}


h3	{
	counter-increment: HLevel_3;
	counter-reset:HLevel_4;
	font-size:16px;
	color:#000000;
	margin:0px 20px 0px 30px;	/*top right bottom left */
	}

h3::before {
  	content: counter(HLevel_1) "." counter(HLevel_2) "." counter(HLevel_3);
  	margin: 0px 18px 0px 0px;	 /*top right bottom left */
	}

	
.h3C	{
	counter-increment: HLevel_3C;
	counter-reset:HLevel_4C;
	font-size:16px;
	color:#000000;
	margin:0px 20px 0px 30px;	/*top right bottom left */
	}

.h3C::before {
  	content: counter(HLevel_1C) "." counter(HLevel_2C) "." counter(HLevel_3C);
  	margin: 0px 27px 0px 0px;	 /*top right bottom left */
	}

h4	{
	counter-increment: HLevel_4;
	counter-reset:HLevel_5;
	font-size:16px;
	color:#000000;
	margin:0px 20px 0px 30px;	/*top right bottom left */
	}

h4::before {
   	content: counter(HLevel_1) "." counter(HLevel_2) "." counter(HLevel_3) "." counter(HLevel_4);
  	margin: 0px 48px 0px 0px;	 /*top right bottom left */
	}

.h4C	{
	counter-increment: HLevel_4C;
	font-size:16px;
	color:#000000;
	margin:0px 20px 0px 30px;	/*top right bottom left */
	}

.h4C::before {
   	content: counter(HLevel_1C) "." counter(HLevel_2C) "." counter(HLevel_3C) "." counter(HLevel_4C);
  	margin: 0px 40px 0px 0px;	 /*top right bottom left */
	}
h5	{
	counter-increment: HLevel_5;
	counter-reset:HLevel_6;
	font-size:16px;
	color:#000000;
	margin:0px 20px 0px 30px;	/*top right bottom left */
	}

h5::before {
   	content: counter(HLevel_1) "." counter(HLevel_2) "." counter(HLevel_3) "." counter(HLevel_4) "." counter(HLevel_5);
  	margin: 0px 34px 0px 0px;	 /*top right bottom left */
	}

.h5C	{
	counter-increment: HLevel_5C;
	counter-reset:HLevel_6C;
	font-size:16px;
	color:#000000;
	margin:0px 20px 0px 30px;	/*top right bottom left */
	}

.h5C::before {
   	content: counter(HLevel_1C) "." counter(HLevel_2C) "." counter(HLevel_3C) "." counter(HLevel_4C) "." counter(HLevel_5C);
  	margin: 0px 27px 0px 0px;	 /*top right bottom left */
	}

h6	{
	counter-increment: HLevel_6;
	/*counter-reset:HLevel_6;*/
	font-size:16px;
	color:#000000;
	margin:0px 20px 0px 30px;	/*top right bottom left */
	}

h6::before {
   	content: counter(HLevel_1) "." counter(HLevel_2) "." counter(HLevel_3) "." counter(HLevel_4) "." counter(HLevel_5) "." counter(HLevel_6);
  	margin: 0px 20px 0px 0px;	 /*top right bottom left */
	}

	
.h6C	{
	counter-increment: HLevel_6C;
	/*counter-reset:HLevel_6;*/
	font-size:16px;
	color:#000000;
	margin:0px 20px 0px 30px;	/*top right bottom left */
	}

.h6C::before {
   	content: counter(HLevel_1C) "." counter(HLevel_2C) "." counter(HLevel_3C) "." counter(HLevel_4C) "." counter(HLevel_5C) "." counter(HLevel_6C);
  	margin: 0px 14px 0px 0px;	 /*top right bottom left */
	}



/******************************************************/