/* 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			{	padding-top: 0px;
					padding-bottom: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:0px;
					margin-left :0px;  
					margin-right: 0px; 
					margin-bottom:0px;
					font-family: Verdana;
					font-size: 26px;
					color : black;
					border:0px;
					padding-left: 6px; 
					padding-right: 6px;
}

.content
{
				width:auto;
				/*  */
				background-color:#ccff99;
				margin-left : 0px; 		/* margins left & right set to auto centers page in browser window */
				margin-right: 0px;  
				border: 1px solid green; 
				font-size:0pt;
				border: 0px solid green; /* inner box (content) */

}
.boxtext
				{width:auto;
	
}

.page	{ 	/* this styles main table of page; font-family & colour should be inherited unless stated below.,*/
					height:auto;
					width: auto;
					max-width:960px;
					table-layout: fixed;
					background-color:#ccff99; /* was  #ccff99;*/
					border: 1px green solid;
					border-collapse:separate;
					border-radius: 15px;
					border-spacing: 0; /* this is CSS equivalent to HTML cell-spacing */	
					margin-top: 10px;			/* 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 */
					padding-top: 0px;
					padding-left: 16px; 
					padding-right: 16px;
					padding-bottom: 20px;
					line-height: 130%; 
					vertical-align: top; 
					font-family: Verdana; /* as body */
					font-size: 26px;
					color : black;
					text-align: justify; 
					
											
}

.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,
.comment-title	{ 	/* this is a simple non-rounded corners box used in, e.g. page revision comments, source slides show in blog*/
					 
					background-color: #ffffcc;
					border-radius: 15px;
					color:maroon;
					padding-left: 20px;
					padding-right:20px; 
					padding-bottom:10px;
					width: auto; 
					height: auto;
					font-family:Calibri;				
					line-height:120%;
					font-size:20pt;			
} 
.comment		{text-align:justify;
					border: 2px maroon solid;
					margin-left:1px;
					margin-right:1px;
					margin-top:15px; 
							
}
			
.comment-title	{text-align:center;
					border: 0px maroon solid;
					margin-left:0px;
					margin-right:0px;
					font-weight:bold;
					color:maroon;					
}
	

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: 24pt; 
					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:; 
					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: #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:bold;/* 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:underline; /* 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: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%);
}