/* stylesheet for Phone responsive versions of TA pages
 essentially providing a page that will auto fit any phone or small tablet and still OK on PC and Laptop. Font sizes increased considerably in line with recomendations but still small on some devices.*/
/* reset browser styles */
html, body, h1, h2, h3, h4, h5, h6, p, ol, ul, li, blockquote
					{ padding: 0px; margin: 0px; font-size: 100%; font-weight: normal;}
ol 					{ margin-left: 0px;   list-style: decimal; }
ul 					{ margin-left: 35px; list-style:disc; }
img				{ border:0px;}
/* end reset browser styles */

body			{	max-width: 960px;/* if reduced to say 600, looks awful on PC, disproportionate This is width of HEADER, page sets the rest */
					padding-left: 3px; 
					padding-right: 3px;
					font-family: Verdana;
					font-size: 22pt;
					color : black;		
}

 .page,
.page-sl	{ 	/* this styles main table of page; font-family & colour should be inherited unless stated below.,*/
					width: auto;
					max-width:960px;
					table-layout: fixed;
					background-color:#ffffcc;
					border: 2px blue solid;
					border-radius: 15px;
					border-spacing: 0; /* this is CSS equivalent to HTML cell-spacing */
					border-collapse:separate;
					margin-top: 20px;			/* WELNEY WEBSITE NEEDS 0px margins !! */
					margin-left : 0px; 		/* margins left & right set to auto centers page in browser window */
					margin-right: 0px;  	/* margins left & right set to auto centers page in browser window */
					font-family: Verdana;
					font-size: 22pt;
					color : black;		
					line-height: 140%; /* was 130 */
					vertical-align: top; 
					text-align: justify; 
					padding-top: 0px;
					padding-left: 16px; 
					padding-right: 16px;
					padding-bottom: 10px;/* should give a space below page  but hasn't worked on OWW*/
					height:auto;	
					
}
.titlecell 		{height :210px;  
					text-align: center;
					vertical-align:middle;
					background-color: red;
					margin-top:20px; 
					margin-bottom:20px; 

					border: 3px solid blue;
					border-radius: 15px;

 }


.comment		{text-align:justify;
					border: 2px maroon solid;
					border-radius: 15px;
					background-color: white;
					margin-left:1px;
					margin-right:1px;
					padding-left:10px;
					padding-right: 10px;
					line-height:120%;				 				
					line-height:120%;
					font-size:22pt;
					color:maroon;
					width: auto; 
					height: auto;
}
			
.comment-title	{text-align:center;
					border: 0px maroon solid;
					margin-left:0px;
					margin-right:0px;
					font-weight:bold;
					color:maroon;					
}


/* h1 for header titles and page heading, h2 for para headings. h3 for nav table (now superceded by ul.nav values)*/
h1, h2		 	{	font-family: "Verdana"; 
						font-weight: bold; 
						color: white;
						background-color: blue; } 
						
h1				 	{	font-size: 22pt; 
						text-align:center;   } 
						
h2				 	{	font-size: 22pt }

h3					{	font-size: 18pt; 
						font-family: "Trebuchet MS"; 
						font-weight: bold;
						color: red }

.pagedate 		{	font-family: "Verdana";	
						font-size: 16pt;	
						font-weight: normal; 
						color: maroon; 
						text-align: center; } /* for  page creation date/page update*/

blockquote	{	margin-top: 1em;
						margin-right: 1em; 
						margin-bottom: 1em; 
						margin-left: 1em; 
						line-height:150% } 
								
/*  the following is a pre-formatted text boxes used in the side columns to indicate points to note. 
	Standard background colour is yellow. Can be changed on the HTML page in td tag using class */
						
.toc				{	border: 1px maroon solid;  
						font-size: 10pt;  
						background-color: #fde2b8; 
						width: 90%; 
						text-align : left; 
						margin-left: 10px}
img				{	border: 0px maroon solid; 
						float: none;  }
			
.highlight 		{	background-color: #FFFF00; 
						font-weight:bold}
						
 /*  Do not change the cascade order of the next three tags (ie link, visited, hover) */
a:link 			{	text-decoration :none; 
						font-weight:normal; 
						color:blue;  }
						
a:visited 		{	text-decoration :none; 
						color:blue} 
						
a:hover			{	font-weight:normal; 
						text-decoration:underline; } 

.center			{	text-align: center;}
.left				{	text-align: left }	
.right				{	text-align: right }
.justify			{	text-align: justify }

.smltxt			{	font-size: 10pt }
.bold				{	font-weight: bold }
.red				{	color: red }
.white			{	background: white }  		
.lightcyan		{	background: lightcyan;}
.aqua			{	background: aqua }
.lime				{	background: lime }
.old				{	font-family: Century; 
						font-size:11pt}
						
.obit				{	color: black; 
						background-color:silver;
						border-top: 1px black solid;
						border-bottom: 1px black solid }
.black			{	color: black }

/* On this website:
 'side-table' is a table with headings and cells ready-formatted in CSS on this sheet, used in the left or right colums used, generally, to show related pages
 'data table' is a table used in the main (centre) column with cells needing some formatting on the HTML page (eg position, width, colour)
 'link buttons' are horizontal navigation links at the top of each page, ready-formatted in CSS on the 'pagetop' style sheet 
 some formatting is common */


/* SIDE TABLES. st is 1 col table, st2 is 2 cols, c  is a cell, h is a heading, hx and cx are for external sites. Position, width and colour are incorporated. */
.st				{border: 1px maroon solid; border-collapse:collapse; text-align:left;  text-indent:5px; background: #fdebcf }

.st, 
.st-c , 
.st-h , 
.st-hx , 
.st-cx, 
.st-cp {; font-size:10pt; height:25%; width:90%; line-height:150%; margin-left:5px }
.st-h  { text-align:center }
.st-c, .st-cx, .st-cp {text-align:left; text-indent:5px; padding: 0 4px 0 4px}
.st-hx {	background:#fbe2b8; text-align:center }
.st-cx {	background:#fdebcf }
.st-cp  {;font-weight: bold; color: white; background-color: blue}



/* DATA TABLES.  the following codes are for data tables (dt) and data cells (dc) within tables.  Position, width and background colour are set separately */
.dt,
.dc,
.dc-h  			{ 	font-family:Ebrima, Arial;
						font-size:18pt;
						border: 1px maroon solid;  
						background: white; 
						border-collapse : collapse; 
						height:25px; 
						vertical-align:top;
						line-height: 125%;
						text-align:left;
}
						
.dc 				{	padding: 0 4px 0 4px}
.dt,
.st 				{	table-layout:fixed} /* instructs browsers to make all columns same width as first row */
.dc 				{	border: 1px maroon dotted }
.dc-h				{	background-color:#fbe2b8}
	





ul.nav,
ul.nav li:hover ul,		 			/* displays 2nd level when 1st hovered over. */
ul.nav ul.nav li:hover ul		/* displays 3rd level when 2nd hovered over. */  
					{
 					font-family: Verdana;
 					background-color: white;
 
					line-height:1; /* effects heading not nav links */
 					display: block;
 					list-style: none;
 					width: auto;
 					height: auto;
 					margin-top:30px; /*distance from header on previous level. Do not increase, otherwise becomes detached from header  */				
}
ul.nav		{ 
					border: 0px maroon solid;  /* border is only on outer box */
					border-collapse:separate; 
}

ul.nav li		{
					display:block; 
					background-color: white;  /* was #fff99d top level of index */
					text-align: left; 
					text-indent: 3px; 
					line-height:1; /* was 1 */
					width: auto;
					/* font-size:20pxTHIS IS NEW IN OW V8 */
					height: 50px; /* was 40px do not set to auto, display is awful & jumpy */
}

ul.nav li:hover
{					display:block;  /* display:block in li & hover makes link & background colour spread fully across cell rather than just the text; */
					font-weight:normal;/* was bold */
}
ul.nav a:link { display: block;
					
} 
ul.nav a:hover	{ 
					display: block; /* display:block in li & hover makes link & background colour spread fully across cell rather than just the text; */
					text-decoration:none; /* was underline */
}

ul.nav ul.nav li,	
ul.nav ul.nav li ul,		
ul.nav ul.nav ul.nav li ul
		{			background-color: white;/* was #fff99d 2nd, 3rd,  levels;  same as ul.nav li:hover above */
} 

ul.nav li ul,		 			/* 2nd level */
ul.nav ul.nav li ul			/* 3rd level*/
					{ display:none; 	/* hides (until hovered over as below) */
					line-height:100%;/* was 100% */
} 
ul.nav li:hover ul		/* displays 2nd level when 1st hovered over. */
		{ 			overflow:visible; 
					position: relative; 
					left: 0px; /* was -10*/
					top: -20px; /* was -32px */
					width: auto;/* was auto */
					margin-left:20px;/* doesn't seem to work */
					padding-left:10px;
					background-color:white;
					line-height:100%;
					border: 1px maroon solid;	 /*  puts border around outer box, but not lines; seems to be inherited from ul.nav for 2nd level, but not the 3rd */
}
ul.nav ul.nav li:hover ul	/* displays 3rd level when 2nd hovered over. */
		{ 			overflow:visible; 
					position:relative;
					left: 120px; /* was 200; 300 is best for PCs, but too wide on phones */
					top: -50px;/* -70 good for PCs */
					width:250px; /* was 425, 400 */
					padding-left:10px;
					border: 1px maroon solid;	 /*  puts border around outer box, but not lines; seems to be inherited from ul.nav for 2nd level, but not the 3rd */
}