/* 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_1a;	/* for heading h4...h6 */
	}


a:link		{
		/*unvisited link*/
		text-decoration:none;
		color:#0000ff;
		
		/* allows text-decoration:underline on hover over links */ 
		}

a:visited		{
		/*visited link*/
		/*text-decoration:none;*/
		color:#00cccc;
		
		/* 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;
	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;*/
}



.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_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 35px;
			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:40%;
	/*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	{
	counter-increment: HLevel_1;
	font-size:16px;
	color:#000000;
	/*text-align:center;*/
	margin:20px 20px 0 20px;	/*top right bottom left */
	/*margin:auto;*/
	/*padding:0px 0px 0 10px;*/
	/*border:1px solid #00ff00;*/
	counter-reset:HLevel_2;
	}

h1:before {
  	/*counter-increment: HLevel_1;*/	/*started (reset) to 0 in body{} */
  	content: counter(HLevel_1) ".";
  	margin: 0px 40px 0px 0px;	 /*top right bottom left */
  	/*border:1px solid #ff00ff;*/
 }

h2	{
	counter-increment: HLevel_2;
	font-size:16px;
	color:#000000;
	/*text-align:center;*/
	margin:0px 20px 0px 20px;	/*top right bottom left */
	/*margin:auto;*/
	/*border:1px solid #00ffff;*/
	counter-reset:HLevel_3;
	}

h2:before {
  	/*counter-increment: HLevel_2;*/
  	/*content: counter(HLevel_1) "." counter(HLevel_2) ".zxvsxv";*/
	/*width:50px;*/
	content: counter(HLevel_1) "." counter(HLevel_2) ".";
  	margin: 0px 35px 0px 0px;	 /*top right bottom left */
	/*padding: 0px 20px 0px 20px;*/
	/*border:1px solid #ff0000;*/
}

h3	{
	counter-increment: HLevel_3;
	font-size:16px;
	color:#000000;
	/*text-align:center;*/
	margin:0px 20px 0px 20px;	/*top right bottom left */
	/*margin:auto;*/
	/*border:1px solid #ff00ff;*/
	/*counter-reset:HLevel_4;*/
	}

h3:before {
  	/*counter-increment: HLevel_3;*/
  	content: counter(HLevel_1) "." counter(HLevel_2) "." counter(HLevel_3) ".";
  	margin: 0px 10px 0px 0px;	 /*top right bottom left */
	/*border:1px solid #0000ff;*/
  }
  /*
  h4...h6 same principle for numbering as used for h1...h3
  */
  
h4	{
	counter-increment: HLevel_1a;	/* reset in body{} */
	font-size:16px;
	color:#ff0000;
	/*text-align:center;*/
	margin:0px 10px 0 20px;	/*top right bottom left */
	/*margin:auto;*/
	/*padding:0px 0px 0 50px;*/
	/*border:1px solid #00ff00;*/
	counter-reset:HLevel_2a;
	}
h4:before {
  	/*counter-increment: HLevel_1a;*/	/*started at 0 in body{} */
  	content: counter(HLevel_1a) "." ;
	color:#ff0000;
  	margin: 20px 37px 0px 0px;	 /*top right bottom left */
	/*padding:0px 0px 0px 0px; */  /*top right bottom left */
  	/*border:1px solid #ff00ff;*/
 }

.h4_1	{
	/*counter-increment: HLevel_1a;*/	/* reset in body{} */
	/*font-size:16px;*/
	/*color:#000000;*/
	/*text-align:center;*/
	margin:0px 10px 0px 0px;	/*top right bottom left */
	/*margin:auto;*/
	/*padding:0px 0px 0 10px;*/
	/*border:1px solid #00ff00;*/
	/*counter-reset:HLevel_2a;*/	
	}

h5	{
	counter-increment: HLevel_2a;
	font-size:16px;
	color:#00ff00;
	/*text-align:center;*/
	margin:20px 20px 0 20px;	/*top right bottom left */
	/*margin:auto;*/
	/*border:1px solid #f00fff;*/
	counter-reset:HLevel_3a;
	}

h5:before {
  	/*counter-increment: HLevel_2a;*/
  	/*content: counter(HLevel_1) "." counter(HLevel_2) ".zxvsxv";*/
	color:#00ff00;
  	content: counter(HLevel_1a) "." counter(HLevel_2a) ". ";
  	margin: 0px 20px 0px 0px;	 /*top right bottom left */
	/*border:1px solid #ff0000;*/
}
h6	{
		counter-increment: HLevel_3a;
		font-size:16px;
		color:#0000ff;
		/*text-align:center;*/
		margin:20px 20px 0 20px;	/*top right bottom left */
		/*margin:auto;*/
		/*border:1px solid #00ff00;*/
		counter-reset:HLevel_4a;
		}
	
h6:before {
	  	/*counter-increment: HLevel_3a;*/
	  	content: counter(HLevel_1a) "." counter(HLevel_2a) "." counter(HLevel_3a) ".";
	  	color:#0000ff;
		margin: 0px 10px 0px 0px;	 /*top right bottom left */
		/*border:1px solid #0000ff;*/
	}
