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



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





/* flexboxes */

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





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