/* stylesheet for Phone responsive  versions of WELNEY WEBSITE 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, form, 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;
					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; 
					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: left;
					margin: 0px 0px 0px 10px; /* top right bottom left */
					
}
.header		{ 	/* this styles header (banner) table which holds logocell and top-slides */
					width: 96%; /* was 95% 595 941/*  */ */
					height:160px; 
					margin-top: 5px; /* gives a space above page */
					margin-left : 20px; 		/* 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 */
					margin-bottom: 10px;		/* gives a space below page */
					font-family: Ebrima, Verdana, Arial;  
					color : maroon;
					border-spacing:0px; /* this is CSS equivalent to HTML cell-spacing */
}
.logocell-sp
				{	width:18%;/*150  220 */
					height:auto;
					background-color:white; /* #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-sp{
					width:64%;
					height:auto;
					background-color:#d4ecfb;  /* background-image: url('../photos/banner/sunset-over-flooded-washes.jpg' );  */
					background-repeat: no-repeat;
					background-position: center; 
					vertical-align: middle;
					line-height:2;
					border-collapse:collapse;
					font-family: "Comic Sans MS"; /* for Website name*/
					font-size: 20pt; /* for Website name*/
					font-weight: bold; /* for Website name*/
					color: blue;  /* for Website name*/
					text-align: center; /* for Website name*/
}

	
.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:#d4ecfb;  /*blue*/
					border: 1px blue solid; 
					border-spacing: 0; /* this is CSS equivalent to HTML cell-spacing */
					border-collapse: collapse;
					margin-top: 20px;		/*  OUSE WASHES HAS 20px 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 */
					margin-bottom: 20px;		/* gives a space below page */
					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;		
					
}
_________________________________________________________________________________________________________________________________________________
.comment-box-sp {
				  	width:auto; 
			  		margin: 0px 0px 0px 0px;
			  		font-family: Ebrima, Helvetica,  Arial, sans-serif; 
					font-size: 18pt;
}

.comment	{ 	
					border: 1px maroon solid; 
					background-color: #ffffcc; /* yellow-ish */
					padding: 0px; 
					width: auto; 
					height: auto;
					text-align: center;
					margin-left:auto; /* left & right at auto centers in column */
					margin-right:auto;
					line-height:120%;
					font-size:18pt;
}					
_________________________________________________________________________________________________________________________________________________
 .top		{		border-top:1px blue solid;
 }
 .bottom	{	border-bottom:1px blue solid;
}

.lb				{ background: #d4ecfb; height:25px; font-size: 10pt; text-align: center; }
__________________________________________________________________________________________________________________________________________________
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 page title*/
					font-family: Tahoma ; 
					font-size: 26pt; 
					font-weight: bold;
					color: maroon;
 					text-align: center; 
 } 
h2					{ /* for page sub title*/
					font-family: "Tahoma";
					font-size: 20pt;
					font-weight: bold;
					color: maroon;
					text-align: center;
} 
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  page creation date/page update*/
					font-family: Calibri;
					 font-size : 16pt; 
					 color: black; 
					 text-align: center; 
 } 
 
 h6				{ 	/* for project statement in head below site title*/
					font-size: 14pt;	
					 font-weight:normal;
					 color: maroon;
					 text-align: center; 
}
.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:underline; /* OUSE WASHES has underline */
					background:#ffffcc;

}

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 blue 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 }
_______________________________________________________________________________________________________________________________________
/* on Welney only */
.gazette		{ background: #fff5e8; height: 140px; border: 2px blue solid; border-collapse: collapse; text-align: center; font-family:"Old English Text MT"; color:maroon; font-size: 14pt; }
.luftwaffe-cross { font-family: "Wingdings 2";} /* <span class="luftwaffe-cross">Ë</span> */

________________________________________________________________________________________________________________________________________
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: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; 
}

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;
					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:400px;
					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 */
}
__________________________________________________________________________________________________________________________________________
/* On this website:
 '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 */


.comment,
.today				{ 	padding: 2px; 
						font-size: 10pt; 
						border: 1px maroon solid; 
						font-family:Verdana; 
						background-color:#FFFFCC; 
						width:90%; 
						text-align :center; 
						margin-left:auto;
						margin-right:auto;
 } 	/* pre-formatted text boxes within a table (st) to indicate points to note. Standard backbround colour can be changed on the HTML page in td tag using class */
.today				{ width:28%;
}

/* 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				{ border: 1px maroon solid; border-collapse: collapse; height:20px;font-size:16pt; line-height: 130%; vertical-align:top;background-color: white;}/*#FFFFCC  */

.dc				{ padding: 0 4px 2px 2px} /* top, right, bottom, left */

.dt
				{ table-layout:fixed} /* instructs browsers to make all columns same width as first row */

.dc				{ border: 1px maroon solid;
}
.dch				{ border: 1px maroon solid; border-collapse: collapse;background-color: #fde2b8;
	
}
/* additional cell rules for some pages e.g. pubs, new-pavilion */
.dc-12			{ width: 12%;  background: white; }
.dc-7				{ width: 7%;  background: white; }
.ct3				{ width: 8%;  text-align:right; padding-right:5px;} 
.ph				{ background : #d4cae2; } /* comparison table - parish hall */
.cp				{ background : #fcdbe4; } /* comparison table - current pavilion */
.np				{ background : #fde2b8; } /* comparison table - new pavilion */
.r					{ text-align:right;}
.l					{ text-align:left;}
.c					{text-align: center;
}



/* indent in left aligned cells */
.i3					{ text-indent: 3px} 
.i5					{ text-indent: 5px} 
.i6					{ text-indent: 6px} 
.i10				{ text-indent: 10px}

.p5				{ padding-right : 5px; }
.p10				{ padding-right : 10px;}
.p15				{ padding: 5px 5px 5px 15px }/* top, right, bottom, left */
.p20				{ padding-right : 20px; }/* padding for text in right aligned cells */

table 			{
  					border-collapse: separate; /* Required for border-spacing to work */
 					border-spacing: 10px; /* 10px horizontal and vertical spacing */  /* Or: border-spacing: 10px 5px; (horizontal 10px, vertical 5px) */
}


/* Popup container from https://www.w3schools.com/howto/howto_js_popup.asp*/
.popup {
  position:relative;
  display:inline; /* could be 'inline-block' */
  cursor: pointer;
  border-color:transparent;
  border-width: 2px; /*has no effect */
  color:maroon; /*has no effect */
  border-color:maroon; /*has no effect, have to use html style="color;??" to set color*/
  font-family:inherit;
  font-size:16pt;/*has no effect */

 }

/* The actual popup (appears on top) */
.popup .popuptext {
  visibility: hidden;
  width: 400px;
  background-color:white;/*this is the backround colour of the text box that pops up. Could be same as page (#d4ecfb) or dfferent*/
  border:2px;
  font: calibri;
  font-size:16pt;
 color: maroon;		/*this is the colour of the text  in the box that pops up*/
 line-height: 25px;
 border-style:solid;
 border-width:1px;
 border-color:maroon;/*has no effect */
 text-align:justify;/* or try 'center' */
  border-radius: 20px;
  padding: 5px 10px 10px 10px;
  position: absolute;
  z-index: 1;
  bottom: 160%;
  left: -0%;				/*the % amount sets the offset from the button; zero sets it directly above*/
  margin-left: -80px;
}
/* The actual popup (appears on top) */
.popup2 .popuptex2t {
  visibility: hidden;
  width: 100px;
  background-color:white;/*this is the backround colour of the text box that pops up. Could be same as page (#d4ecfb) or dfferent*/
  border:2px;
  font: calibri;
  font-size:16pt;
 color: maroon;		/*this is the colour of the text  in the box that pops up*/
 line-height: 25px;
 border-style:solid;
 border-width:1px;
 border-color:maroon;/*has no effect */
 text-align:justify;/* or try 'center' */
  border-radius: 20px;
  padding: 5px 10px 10px 10px;
  position: absolute;
  z-index: 1;
  bottom: 160%;
  left: -0%;				/*the % amount sets the offset from the button; zero sets it directly above*/
  margin-left: -80px;
}

/* Popup arrow */
.popup .popuptext::after {
  content: "";
  position:absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
  
}
/* Popup arrow */
.popup2 .popuptext2::after {
  content: "";
  position:absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
  
}

/* Toggle this class when clicking on the popup container (hide and show the popup) */
.popup .show{
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}

.popup #b1:hover + .popuptext {
  visibility: visible;
  opacity: 1;
}


.tooltip {
  position: relative;
  display: inline-block;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 350px;
  background-color:#ececec;
  font: calibri;
  font-size:18pt;
  color: maroon;
  border: 1px blue solid;
  text-align: center;
  border-radius: 5px;
  padding: 5px;
  position: absolute;
  z-index: 1;
  bottom: 90%; /* Position above the text was 125%*/
  left: 35%;/* was 50% */
  margin-left: -70px; /* was -60px Center the tooltip */
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}
.tooltip {
  position: relative;
  display: inline-block;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}