/* stylesheet for Phone responsive  versions of OUSEWASHES pages
 essentially providing a page that will auto fit any phone or small tablet. 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			{	padding-top: 0px;
					max-width: 960px;/* if this was reduced to say 600, it would look awful on a PC, disproportionate This is width of HEADER, page sets the rest */
					margin-top:10px;
					margin-left :0px;  
					margin-right: 0px; 
					font-family: Verdana;
					font-size: 26px;
					color : black;
					border:0px;
}
.headerbox {	
  					width: 100%; /*960 overall width of ROUNDED box  - same as page below*/
					text-align: center;
					margin-top:0px;
					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 */
					padding-right:0px;
}
.header		{ 	/* this styles header (banner) table which holds logocell and top-slides */
					width: auto;
					max-width: 100%; /* was  99%; 595 941/*  */ 
					height:200px; /* was 160  change made no differebce*/
					margin-top: 20px; /* gives a space above rectangle within rounded outer box */
					margin-left : 10px; 		/* margins left & right set rectangle within rounded outer */
					margin-right: 0px;  	/* margins left & right set to auto centers page in browser window */
					margin-bottom: 20px;		/* gives a space below page */
					font-family: Ebrima, Verdana, Arial;  
					color : maroon;
					border-spacing:0; /* this is CSS equivalent to HTML cell-spacing */
}
.logocell-sp
				{	width:auto;/*150  220 */
					background-color: #fffdda;
					text-align:center; 
					vertical-align:middle;
					margin-left:auto;
					margin-right:auto;
					font-size:; 
					font-weight:bold;  
					border-spacing:0px; /* this is CSS equivalent to HTML cell-spacing */
}
.titlecell		{ /* for slideshows, eg railway */
					width: auto; /* 550 712 */
					height: 150px; /* was 160 reduction made no difference*/
					/*set  background-image on HTML page */  
					background-repeat: no-repeat;
					background-position: center; 
					vertical-align: top;
					border:none;
}

.page	{ 	/* this styles main table of page; font-family & colour should be inherited unless stated below.,*/
					width: auto;
					max-width:920px;
					table-layout: fixed;
					background-color:#ccff99; /* was  #ccff99;*/
					border: 1px green solid;
					border-spacing: 0; /* this is CSS equivalent to HTML cell-spacing */
					border-collapse: collapse;
					margin-top: 20px;			/* WELNEY WEBSITE NEEDS 0px margins !! */
					margin-left : 10px; 		/* margins left & right set to auto centers page in browser window */
					margin-right: 10px;  	/* margins left & right set to auto centers page in browser window */
					padding-bottom: 20px;		/* should give a space below page  but hasn't worked on OWW*/
					line-height: 130%; 
					vertical-align: top; 
					font-family: Verdana; /* as body */
					font-size: 26px;
					color : black;
					text-align: justify; 
					padding-top: 0px;
					padding-left: 16px; 
					padding-right: 16px;
					height:auto;							
}

.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;
}

.comment	{ 	/* this is a simple non-rounded corners box used in, e.g. page revision comments, source slides show in blog*/
					border: 1px maroon solid; 
					background-color: #ffffcc;
					color:maroon;
					padding: 0px; 
					width: auto; 
					height: auto;
					text-align: center;
					margin-left:auto;
					margin-right:auto;
					line-height:120%;
					font-size:18pt;	
}  			

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: Calibri;
					font-size: 14pt;	
					font-weight: bold; 
					color: maroon; 
					text-align : center;
} 
.calligraphy  	{ /*  for Adventurers/BLC page title */
					font-family:"Lucida Calligraphy", "Apple Chancery", Verdana; 
					font-size:18pt;
}
.ack				{ color: maroon; 
					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: collapse; 
					 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: collapse; 
}

ul.nav li		{
					display:block; 
					background: #fff99d;  /* top level of index */
					text-align: left; 
					text-indent: 3px; 
					line-height:1;
					width: auto; 
					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:#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: collapse; 
					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%);
}