body
{

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


/*
 Set up background image properties.
 JavaScript will later insert the actual background image.
 Note that relative URLs of images in the stylesheet are interpreted relative to the stylesheet, not relative to the document. 
 url("../Images/back.dublin.jpg") 
 url("https://markhumphrys.com/Images/back.dublin.jpg")
*/

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

 	background-color: darkgray;
 	color: black;

/* fade effect: makes a change of background take a certain amount of time */ 

 transition: background 2s ease ;

}


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






/*

border on all images by default
mobile friendly: max width by default 

*/


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


iframe
{
 max-width:	98% ;
}






/* 

normal underlined links: 

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

*/




/* 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;		  
}






/*

main navigation links
underline 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;		  
}



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

a.structural
{
 color: darkred !important;
 font-size: larger !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
}



   
/* highlight link to section on page */

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






/* 
=========== noprint ==========================================================

print will exclude segments marked with: 
 <DIV class=NOPRINT> 
*/

.noprint     {}

@media print {               
  .noprint {display: none}           
  }






/* 
=========== page break in print ==================================================

<h1 class="newpage">

*/


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







/* 
=========== large divs ==================================================

these boxes are ids (one per page)

	<div id="boxinpage">

	 border: none ;				
	 border: 2px solid gray ;		

set by JS:
- background color for header and feedback 
- border-radius for all divs, like:
	border-radius: 10px;

*/



#wholepage {

 	background-color: #ffffcc  ;
 	color: black;

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

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

	}


#boxinpage {

/*	 box-shadow: 20px 20px 10px  rgba(105, 105, 105, 0.7);	 */  		/* floating shadow effect - blurred - gray - transparent */

 	background-color:white;
 	color: black;

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

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

	}
 


div.boxinpage {

/*	 box-shadow: 20px 20px 10px  rgba(105, 105, 105, 0.7);	 */  		/* floating shadow effect - blurred - gray - transparent */

 	background-color:white;
 	color: black;

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

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

	}





#headerbox  {

/* maybe also set by JS */
/*	background: rgba(255, 255, 204, 1.0); */

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

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

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

	}




#feedbackbox  {

/* not used */

/* maybe also set by JS */
/* 	background: rgba(255, 255, 204, 1.0); */

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

 	color: black;

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

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

	}


#footerbox  {

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

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

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

	}

 

/*
 to make div slightly see-through:
 http://www.w3schools.com/css/css3_colors.asp
 http://www.w3schools.com/cssref/css3_pr_opacity.asp
*/


 



div.blackbox 
{
	border: 1px solid black; 
	padding: 20px; 
	display: inline-block;		/* fit content */
	max-width: 70vw; 
}



/* old idea for blog box */ 

div.blog 		/* blog column, full width */
{
	border: 2px solid black; 
	border-radius: 10px;
	padding: 30 30 60 30 ; 				/* top right bottom left */
	margin: 10 10  60 10 ; 			 	/* top right bottom left */
 	background-color: white;
 	color: black;
	text-align: left; 
}

div.blog:hover {
 /*	 background-color: #ddffff ;  */
}



div.surroundimages 		 /* surround multiple images put together to look like one image */
{		
	white-space: nowrap;	 
  	border: 1px solid black ;
	display: inline-block;				/* div should fit width of content */ 
}





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

.nobr 
{
	white-space: nowrap; 
}





/* button with hover effect */

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



.twitterbutton 
{
 	padding: 3px 10px;
	border-radius: 5px;
	border: 1px solid black; 

 	font-size: 14px;
 	font-family:   Georgia, Verdana, "Times New Roman", Sans-serif; 
	font-weight: bold;

	color: black;		 
   	background-color: #ffffcc ;  	 	/* lightyellow LightGoldenRodYellow */ 
    box-shadow: 5px 5px 3px white;		/* white (with white page) means shadow invisible until hover */ 
}


.twitterbutton:hover 
{
    	background-color: #ffff88 ;  	 
/*
    	color: navy;
   	background-color: lightcyan;	
*/
     box-shadow: 5px 5px 3px lightgrey;	 
}




/* normal - large */

.largenormbutton 
{
 	padding: 10px 20px;
	border-radius: 5px;
	font-size: 18px;  
     	color: white;
   	background-color: black;		 
}

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



/* greyed out - large */ 

.largegreybutton 
{
 	padding: 10px 20px;
	border-radius: 5px;
	font-size: 18px;  
     	color: white;
   	background-color: dimgray;
}






/* --- flex displays ------------------------------------------------------------------------------------*/

/* header has flexbox of items, no border */
 
.header-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 */

.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 */
}





/*
 flex display for blog

 To do: Track down this problem:
 Image widths going wrong on my mobile browser for images in divs in this flexbox

 But ONLY see problem if flexbox consists of:
 - 2 or more wide divs, 1 narrow div

 Seems fine if flexbox consists of:
 - 1 wide div,  1 narrow div
 - n wide divs, 0 narrow divs

 I gave up trying to solve this, because simple solution:
 Only use flexbox for top of blog. 1 wide and 1 narrow. End flexbox.
 Use normal page divs for rest of blog. 
*/
 

.blog-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 */

.blog-flex-container>div 
{
	background-color: white;
	width: min(75%, 900px); 	/* minimum of two values - 900 pixels on desktop, n% on mobile */
   	border: 2px solid black ;		
	margin: 30;   	 		 
  	padding: 50px;
  	text-align: left;
}

 
/*
 regular div section of blog
 <div class=blog-regular>
 <div> ..
*/

div.blog-regular>div  {

 	background-color:white;
 	color: black;

	width: min(75%, 900px);
	margin: 50 auto;   	 		/* center it on page  */
	text-align: left; 	 

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

	}





/* contents page has flexbox of items, with borders */
 
.contents-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 */
 
.contents-flex-container>div 
{
  	padding: 20px;
  	text-align: left;
 	border: 1px solid silver;
  	margin: 30px 10px 30px 10px;		/* top right bottom left */ 
  	width: 170px;  
	font-weight: bold;
}