body
{
	font-size: 16px;

 font-family:   Georgia, Verdana, "Times New Roman", Sans-serif; 

  	background:    no-repeat center center fixed; 
	background-size: cover;

 	background-color: white;
 	color: black;
}


pre 
{
	font-family:   Courier New, Courier; 
	font-size: 14px;
	overflow-x: auto;		/* automatic horizontal scroll needed for mobile if <pre> section is wide */
}




/* 
force no break between elements 
 <span class=nobr>  </span> 
*/

.nobr 
{
	white-space: nowrap; 
}




/*

border on all images by default

may need to fix some, e.g. border:none for new.gif

to override css and have an image with no border:
"border=0" does not override this
need "style=border:none"


 mobile friendly: max width by default 

*/


img 
{
 border: 	1px solid black ;
 max-width:	98% ;
}


iframe
{
 max-width:	98% ;
}




/* 

"up arrow" leading to parents' page 
margin-right is important - do not have <img> hard against the text 

*/

img.uparrow
{
 border: 2px solid darkred  !important ;
 padding: 3px;
 margin-right: 5px;
}



 


/* 
--- old links: underlined -------------------------------------------------------------------------------
text-decoration-skip-ink: do not break underline when it encounters descenders like g, j, q, p, y
different color for visited links - needed more on this site than on other sites 
*/
 
/*

a:link {
  color: #0000cc ;
  text-decoration: underline ;
  text-decoration-skip-ink: none;		  
}

a:visited, a:active, a:focus {
  color: purple ;
  text-decoration: underline ;
  text-decoration-skip-ink: none;
}

*/
 

/*
 special links 
 <a class=markvisited> to get them clearly marked when visited 
*/

a.markvisited:visited
{
 color:red;
}




/* 
--- new links: underlined when hover -------------------------------------------------------------------------------
*/

a:link, a:visited  {
  color: navy ;
  font-weight: bold ; 
  text-decoration: none ;
}

a:link:hover,  a:visited:hover   {
  text-decoration: underline ;
  text-decoration-skip-ink: none;		  
}



/* --- structural links ------------------------------------------------------------------------------- */

a.structural
{
 color: darkred !important;
 font-size: larger !important;
}




/*
 --- links inside h3 ------------------------------------------------------------------------------- 
make links inside h3 structural links
these are mostly contents links at the top 
!important - this takes precedence over all other rules 

only do this for one level down - not for top level - so do it in JS 
*/ 

/*

h3 a
{
 color: darkred !important;
 font-size: larger !important;
}

*/




/*
 --- links inside pre ------------------------------------------------------------------------------- 
bold does not look good in pre 
if no bold, then harder to see, so go back to underline 
*/ 


pre a
{
  font-weight: normal !important;  
  text-decoration: underline !important;
  text-decoration-skip-ink: none !important;		  
}


 


/* --- special links, underlined when hover: ------------------------------------------------------------------------------- */

a.special  {
  color: navy ;
  font-weight: bold ;
  text-decoration: none ;
}

a.special:hover   {
  text-decoration: underline ;
  text-decoration-skip-ink: none;		  
cursor: pointer; 
cursor: hand; 
}



/* --- main navigation links, underlined when hover: ------------------------------------------------------------------------------- */

a.main-navigation:link {
  color: navy ;
  font-weight: bold ;
  font-family:Arial,Verdana,Sans-serif;
  text-decoration: none ;
}

a.main-navigation:visited, a.main-navigation:active, a.main-navigation:focus {
  color: navy ;
  font-weight: bold ;
  font-family:Arial,Verdana,Sans-serif;
  text-decoration: none ;
}

a.main-navigation:hover    {
  color: navy ;
  font-weight: bold ;
  font-family:Arial,Verdana,Sans-serif;
  text-decoration: underline ;
  text-decoration-skip-ink: none;		  
}


   
/* highlight link to section on page */

:target 
{
 	border: 1px solid silver;
  	background-color: #ffffcc;
}



/* flex display for surnames */
 
.flex-container 
{
	display: flex;
	flex-direction: row;
  	flex-wrap: wrap;

 	justify-content:  center;	 
 	align-items: flex-start;			/* div contents aligned to top */ 
}


/* any div inside a flex-container */

.flex-container>div 
{
  	width: 200px;  
  	margin: 30px 10px 30px 10px;		/* top right bottom left */ 
 	border: 1px solid silver;
  	padding: 20px;
/*	font-weight: bold; */
  	text-align: left;
}




/* flex display for todo lists */
 
.todo-container 
{
	display: flex;
	flex-direction: row;
  	flex-wrap: wrap;

 	justify-content:  center;	 
 	align-items: flex-start;			/* div contents aligned to top */ 
}


/* any div inside a todo-container */

.todo-container>div 
{
  	width: 500px;  
 	border: 1px solid black;
  	margin: 20px;			 
  	padding: 20px;
  	text-align: left;
}



/* header has flexbox of items, no border */
 
.header-flex-container 
{
	display: flex;
	flex-direction: row;
  	flex-wrap: wrap;

 	justify-content:  center;	 
 	align-items: center;			/* flex-start */ 
}

/* any div inside it */

.header-flex-container>div 
{
	margin: 0 20 0 20 ; 			 	/* top right bottom left */
  	padding: 10px;
  	text-align: center;
/*  	border: 1px solid silver;  */		/* for debug */
}



/* mini flexbox of items, like list of links */
 
.mini-flex-container 
{
	display: flex;
	flex-direction: row;
  	flex-wrap: wrap;

 	justify-content:  center;	 
 	align-items: flex-start;			/* div contents aligned to top */ 
}

/* any div inside it */

.mini-flex-container>div 
{
	margin: 0;
  	padding: 10px;
  	text-align: center;
/*  	border: 1px solid silver;  */		/* for debug */
}


 

/* some box on page */

div.smallbox 
{
  	border: 1px solid black ;
 	padding: 20px;
	display: inline-block;				/* div should fit width of content */ 
}



/* small box to explain square color in a table */

div.squarecolor
{
 border: 1px solid black; 
 padding: 5;

 display: inline-block;  	/* to be used inline in a paragraph */

 /* do not just let it calculate width though	 
   it goes wrong if page not mobile friendly, so use fixed width */

 width: 100;
}




/* highlight some area in yellow */

div.yellow 
{
 	background: rgba(255, 255, 204, 1.0);
    padding-top: 10px;
    padding-right: 0px;
    padding-bottom: 10px;
    padding-left: 0px;
}



/* special notice with hover */

div.notice
{
 border: 2px solid black;
 padding: 20;
 margin: 60 auto;
 width: 80%;
}

div.notice:hover   
{ 
 	background-color: #ffffcc ;	 
}	




/* table that highlights rows */

table.mytable  tr:hover   
{ 
 	background-color: #ffffcc ;	/* yellow */ 
}	





/* table with no padding, like for putting images side by side */

table.nopadding 
{ 
  border:0;
   padding: 0; 
   margin: 0;
 border-spacing: 0;
 border-collapse: collapse;
}

table.nopadding tr
{
   padding: 0; 
   margin: 0;
}

table.nopadding td
{
   padding: 0; 
   margin: 0;
}

table.nopadding img
{
   max-width: 100% !important ; 
}







/* 
 border on linked images  
*/


a:link img {
 border: 2px solid #0000cc
}

a:visited img, a:active img, a:focus img {
 border: 2px solid purple
}


 
.darkredlarge		/* font within this span or section will have this style: */ 
{
 color: darkred ;  
 font-size: larger ; 
 font-weight: bold ;
}






/* 

these boxes are ids (one per page)

	<div id="boxinpage">	

*/


#wholepage {					/* large page - but not actually whole screen width */

 	background-color:#ffffcc;
 	color: black;

	max-width: 1300px;			/* for people who maximise the browser */ 
	margin: 50 auto; 			/* center it on page  */
	text-align: left; 	 

   	border: 2px solid black ;		
   	padding: 30px;

	}



#boxinpage {

 	background-color:white;
 	color: black;

	max-width: 1200px;			  
	margin: 50 auto;   	 		 
	text-align: left; 	 

   	border: 2px solid black ;		
   	padding: 30px;

	}
	
	
div.boxinpage {

 	background-color:white;
 	color: black;

	max-width: 1200px;			  
	margin: 50 auto;   	 		 
	text-align: left; 	 

   	border: 2px solid black ;		
   	padding: 30px;

	}
	


#boxwholepage {					/* whole screen width */ 

 	background-color:white;
 	color: black;

	max-width: 95%;			  
	margin: 50 auto;   	 		 
	text-align: left; 	 

   	border: 2px solid black ;		
   	padding: 30px;

	}



#headerbox  {

 	background: rgba(238, 238, 238, 1.0);
 	color: black;

	max-width: 1300px;			  
	margin: 10 auto;   	 		 
	text-align: left; 	 

   	border: 2px solid black ;		
   	padding: 5px;

	}


#donationbox  {

 	background: rgba(255, 255, 204, 1.0);
 	color: black;

	max-width: 1300px;			  
	margin: 20 auto;   	 		 
	text-align: center; 	 

   	border: 2px solid black ;		
   	padding: 20px;

	}

#feedbackbox  {

 	background: rgba(255, 255, 204, 1.0);
 	color: black;

	max-width: 1300px;			  
	margin: 20 auto;   	 		 
	text-align: left; 	 

   	border: 2px solid black ;		
   	padding: 20px;

	}


#footerbox  {

 	background: rgba(255, 255, 255, 1.0);
 	color: black;

	max-width: 1300px;			  
	margin: 20 auto;   	 		 
	text-align: center; 	 

   	border: 2px solid black ;		
   	padding: 20px;

	}

 


/* powerpoint type pages */

div.pp
{
	width: 90%;
	margin: 50 auto 50 auto ; 			 	/* top right bottom left */
	
	border: 2px solid black; 
	border-radius: 10px;
	padding: 50 ; 				/* top right bottom left */
 	background-color: white;
 	color: black;
	text-align: center; 		/* default center */ 
}
 




/* preview images */

div.imgpreview {
	width: 90%;
	height: 70%;
	margin: 30 auto ;   	 		 
   	border: 2px solid black ;	
  	padding: 20px;
	text-align: center; 	 
    overflow: scroll;
}

img.imgpreview {
	max-width: 150%;
	max-height: 200%;
}


div.imglist {
    width: 90%;
    height: 50%;
	margin: 30 auto ;   	 		 
   	border: 2px solid black ;	
  	padding: 20px;
    overflow: scroll;
}



.normbutton {
 	padding: 3px 10px;
	border-radius: 5px;
	font-size: 14px;
     	color: white;
   	background-color: black;		 
}

.normbutton:hover {
	color: white;		 
   	background-color: darkcyan;  	 
}


.altbutton 
{
 	padding: 3px 10px;
	border-radius: 5px;
	font-size: 14px;
     	color: black;
 	background-color: #ffffcc; 
}

.altbutton:hover 
{
     	color: black;
 	 background-color: #ffff88; 
}





/*

audio player to fill width of wherever it is placed:

<audio  id=audioplayer  controls >

*/


#audioplayer {
 width: 95%;
}



/*
span where we do not want line break inside it 
*/

.keeptogether 
{
  white-space: nowrap ;
}





/* 
=========== ol style ==========================================================

ol { list-style-type: decimal }
ol ol { list-style-type: upper-alpha }
ol ol ol { list-style-type: lower-alpha }  

*/





/* 
=========== p ========================================================== 

line spacing half-way between <br> and <p> 


p.halfway
{
 line-height: 170%;
}

*/





/* 
=========== printing ==========================================================
*/


@media print 
{   
    
 /* 
 print will exclude segments marked with: 
 <DIV class=NOPRINT> 
 */
       
	 .noprint 	{	display: none;			}    

/*
problem: print is horizontally breaking actual characters of text 
this happens on Chrome, Firefox, Edge!
the following tries to avoid break inside these elements   
*/

	 table 			{ 	page-break-inside: avoid; 	}
	 pre			{ 	page-break-inside: avoid; 	}
	 img			{ 	page-break-inside: avoid; 	}

	 a			{ 	page-break-inside: avoid; 	}
	 li			{ 	page-break-inside: avoid; 	}

	 p			{ 	page-break-inside: avoid; 	} 

	 h1			{ 	page-break-inside: avoid; 	}
	 h2			{ 	page-break-inside: avoid; 	}
	 h3			{ 	page-break-inside: avoid; 	}
       
}

 

/*
===== stop div having bad printing page breaks inside of it ====================================
even with the above, we can still get bad page breaks inside divs floating inside other divs 
seems to be solved by using overflow: visible;
https://stackoverflow.com/questions/55990473/htmlcss-page-breaks-cutting-text-characters-in-half-media-print
so use this:
<div class="clean-page-breaks">
*/

.clean-page-breaks { overflow: visible; }


/*
(todo) try further ideas here:
https://www.appnovation.com/blog/how-avoid-your-web-printing-page-being-cut
*/




/* 
=========== manual page break in print ==================================================
insert something like this to get manual page break:
<h1 class="newpage">
*/


.newpage { page-break-before: always; }