/* stylesheet for Phone responsive  versions of OUSEWASHES 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;
}
/* ".header" details deleted on this V. See V6 if needed */
/* .content deleted */
/* .boxtext deleted */
/* .logocell-sp deleted */
	
.titlecell		{ /* for slideshows, eg railway */
					width: auto; /* 550 712 */
					height: 160px; /* was 160 reduction made no difference*/
					/*set  background-image on HTML page */  
					background-repeat: no-repeat;
					background-position: center; 
					vertical-align: top;
					border:1px solid green;
					margin: 10px 10px 10px 10px;
}

.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:#ccff99; /* nearly light green, was  #ccff99;*/
					border: 2px green 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: Ebrima; /* as body */
					font-size: 26px;
					color : black;
					line-height: 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;							
}
.page-sl {		background-color:khaki; /*wheat, khaki ok,  bisque not bad, gainsbro  maybe */
	
}

.top-slides	{ 
					width: auto; /* 712 must be same or less than header minus logocell */
					border:none;
					border-spacing:0px; /* this is CSS equivalent to HTML cell-spacing */
}
					
.slideshow	{  /* use on stand-alone slideshoes in middle column instead of narrative. not for use within otherpages */
					background-color:#ccff99;  
					vertical-align:top; 
					padding-top:8px; 
					border-bottom:0;
} 
.slideshow	{ 	/* previously included header */
					border: 1px green solid; 
					border-collapse: collapse;
}

.index			{
					background-color:#ffffcc; 
					color:maroon;
					width :70%;
					margin-left:190px;
					margin-top:30px;
					border:1px maroon solid;
}

.boxed 			/* gives top and bottom borders on rows for special pages - eg visitor comments ans stats */
				{	border-top:1px solid green; 
					border-bottom:1px solid green;
}
.header,
.comment,
.comment-page,
.comment-title	{ 	/* this is a simple non-rounded corners box used in, e.g. page revision comments, source slides show in blog*/
					margin-top:15px; /* this is newly addd to give gap above header, and it worked */
					background-color: white; /* was #ffffcc */
					border-radius: 15px;
					color:maroon;
					padding-left: 20px;
					padding-right:20px; 
					padding-bottom:10px;
					width: auto; 
					height: auto;
					font-family:Ebrima;				
					line-height:120%;
					font-size:20pt;			
}
 
.comment		{text-align:justify;
					border: 2px maroon solid;
					margin-left:1px;
					margin-right:1px;
}
			
.comment-title	{text-align:center;
					border: 0px maroon solid;
					margin-left:0px;
					margin-right:0px;
					font-weight:bold;
					color:maroon;					
}
.header,
.comment-page {background-color:#ffffcc; 
					border: 2px maroon solid;
					padding-top:15px;
			
	

blockquote	{ /* you can nest blockquotes, ie put a blockquote within another one, to increase overall or occaisional  indext*/
					margin-top: 10px; 
					margin-right: 25px; 
					margin-bottom: 10px; 
					margin-left: 25px; 
					text-align: justify; 
					font-size:20pt; 
					font-family:Calibri;
					line-height: 125%;
}

h1		{ 		/* for section headings */
					font-family: Tahoma;
					font-size: 26pt; 
					font-weight: bold; 
					color: maroon; 
					text-align: center;
} 

h2			{ 		/* for Ouse Washes Website title in logocell*/
					font-size: 24pt; 
					font-weight: bold; 
					color:green; 
					text-align: center; 
					font-family: Georgia, "Times New Roman", Times, serif;  
} 
h3			{ 		/* for section headings */
					font-family: Tahoma;
					font-size: 22pt; 
					font-weight: bold; 
					color: maroon; 
					text-align: center;
} 
h4			{ 		 /* for section sub-headings */
					font-family: Ebrima; 
					font-size: 20pt; 
					font-weight: bold; 
					color: maroon; 
					text-align: left;
}
h5			{ 		 /* for  */
					font-size: 16pt; 
					font-weight: bold; 
					color: green; 
					text-align: left; 
					text-indent:20px;
}
h6			{ 		/* for project statement in head below site title*/
					font-family: Ebrima;
					font-size: 14pt;	
					font-weight: bold; 
					color: maroon; 
					text-align : center;
} 
}
.ack				{ color: green; /* was maroon as in V7 */
					font-style:italic;
					font-size: 16pt;
					vertical-align:top;
 }

a:link		{ 		/* do not amalgamate link/visted/hover - doesn't work */
					color: blue; 
					font-weight:normal; 
					font-style:normal; 
					text-decoration:none;
}
a:hover	{ 
					color: blue; 
					font-weight: bold; 
					font-style:normal; 
					text-decoration:none; /* WELNEY has none */
}

a:visited	{ 
					color: blue; 
					font-weight: normal; 
					font-style:normal; 
					text-decoration:none;
}
.visitorcounter{ 
					 height: 22px; 
					 border-collapse:separate	;				 
					 text-align: center;  
					 background: #FFFF99;
					 border: 1px green solid;
					 vertical-align: top;
					 display:inline;
					  font-weight:bold;
}

.active			{ background: aqua; }
.aqua			{ background:aqua;}
.black			{ color: black; }
.blue			{ color:blue;}
.bold			{ font-weight: bold;}
.center			{ text-align: center;}
.closetxt 		{ line-height: 50%;}
.fraud			{font-family:Calibri;font-size:12pt;}
.green			{ color: green; }
.grey				{ background:#d7d7d7;}
.highlight		{background: yellow;}	
.italics			{ font-style:italic ;}
.left				{ text-align:left; }	
.lightcyan		{ background:#ccffff;}
.maroon		{ color: maroon; }
.obit				{ color: black; border-color:black; border-collapse:collapse; } /* add after other class tags in obituary pages. Unfortunately, the border color does not always over-rule normal style*/
.red				{ color:red; }
.right			{ text-align: right;}
.rptdate		{ color:red; font-weight:bold; line-height: 250%;}
.silver			{ background-color: silver; }
.smltxt      		{ font-size: 16pt;}
.strikethrough {text-decoration:line-through;}
.underline	{ text-decoration: underline; }
.white			{ color: white ;}
.whitebkg      { background-color: white; }
.yellow        	{ color: yellow; }

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: Ebrima, Helvetica,  Arial, sans-serif; 
					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: white;  /* was #fff99d top level of index */
					text-align: left; 
					text-indent: 3px; 
					line-height:1; /* was 1 */
					width: auto;
					font-size:20pt;/* THIS IS NEW IN OW V8 */
					height: 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) */
} 
ul.nav li:hover ul		/* displays 2nd level when 1st hovered over. */
		{ 			overflow:visible; 
					position: relative; 
					left: -10px; /* was 20 , 10 lines up better*/
					top: -32px;
					width: auto;/* was auto */
					padding-left:20px;
					background-color:#fff99d;
					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: 200px; /* was 300 is best for PCs, but too wide on phones */
					top: -70px;/* -70 good for PCs */
					width:425px; /* was 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 */
}

ul.comment2
{					background: #fffdda;  /* top level of index - ccffcc, fff99d, eaf3da, e0edc5 is pale soft greygreen*/
					text-align: left; 
					text-indent: 4px; 
					width: auto; 
					height: 20px; /* do not set to auto, display is awful & jumpy */
}


/* DATA TABLES (dt). are for tables (dt) and data cells (dc) within tables.  Position, width and background colour are set separately */
.dt	{			width:100%; 
					background-color:white;
					font-family: Ebrima, Helvetica, Arial, sans-serif; 
					font-size: 16pt;
					text-align:left; 
					table-layout:fixed;
					border: 2px green solid;
					border-collapse:collapse; 
}
.dc,
.dc-h		{		padding: 2px 4px 2px 4px; /* top, right, bottom, left */
					border: 2px green dotted;
					border-collapse:separate; 
					height:20px; 
					line-height: 120%;
					vertical-align:top;
}
.dc-h		{		background: #fbe2b8;
}

.notes			{ line-height: 120%; 
			       	vertical-align:top; 
			       	table-layout: fixed; /* instructs browsers to make all columns same width as first row */
			       	
}	 
#popup { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #fbe2b8;width:400px;height:400px;
}

.container {/* Container holding the image and the text */
				  position: relative;
				  text-align: center;
				  color: white;
}

/* Bottom left text */
.bottom-left {
				  position: absolute;
				  bottom: 8px;
				  left: 16px;
}

/* Top left text */
.top-left {
				  position: absolute;
				  top: 8px;
				  left: 16px;
}

/* Top right text */
.top-right {
				  position: absolute;
				  top: 8px;
				  right: 16px;
}

/* Bottom right text */
.bottom-right {
				  position: absolute;
				  bottom: 8px;
				  right: 16px;
}

/* Centered text */
.centered {
				  position: absolute;
				  top: 50%;
				  left: 50%;
				  transform: translate(-50%, -50%);
}