body
{

 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("http://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 ;

}



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






/* 

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







/*

border on all images by default

*/

img {
 border: 1px solid black ;
}







/* 
 border on linked images  
*/


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

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



pre 
{
	overflow-x: auto;		/* automatic horizontal scroll needed for mobile if <pre> section is wide */
}





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

	}

 


#headerbox  {

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

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