/* Standard reset at the top of the CSS file. 
Updated in the @media entries to correct layout on 25 Feb 2020 */

*   {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
	
body {
 	font-family: Calibri, 'Trebuchet MS', Verdana;
 	font-size: 1.125em;       /* 18px */ 
 	background-color: #cfc;   /*bluetit green*/ 
}

p {padding: 0 0 10px 0; max-width: 1000px; }
.entry {padding: 0 ; max-width: 1000px; }  /* to seperate paragraphs in text & limit their width */

/* make all h1-4 text green and bold */

h1,h2,h3,h4 { color: green; font-weight: bold;}

/* specify font sizes and padding (within border) */
h1 {font-size: 2.2em; padding: 60px 0 0 20px;}  /* the 60px is to allow space for the menu at the top */
h2 {font-size: 1.8em;}  /* not used so far */
h3 {font-size: 1.5em;}  /* now used eg apr01-2 but not adjusted */
h4 {font-size: 1.25em; padding: 0 0 10px 20px;} /* all h4's need this styling */


/* id=menu is used to define the menu at the top of each page */

/* #menu {position:fixed;} removed to see if it does anything*/

#menu table { 
	position: fixed;
	left: 0;
	top: 0;
	background-color: green;
	width: 100%;
	margin: 0 0 20px 0;
	padding: 0;
	}


#menu td {
	text-align: center;
	height: 40px;
	padding: 0 5px;
	text-decoration: none;
	}

#menu td:link {background-color: green;}
#menu td:hover {background-color: black;}


#menu a {
	text-decoration: none;
	display: block;
	color: aqua;
	}

#menu a:hover { color: white; }

.entry img {
	border: 2px black solid;
	width: auto;
	height: 270px;
	}

.links p {padding: 10px 0 20px 20px;}	

.entry {display: flex;}

/* leave a margin of 10px above & 20px left of images and text - coloured borders set for testing 
.image {margin: 10px 0 40px 20px; border: 1px red solid;}
.text {margin:  10px 0 0 20px; border: 1px blue solid;}  */

/* Mobile Styles - the text box automatically flows beneath the image */
@media only screen and (max-width:500px) {
	.entry {flex-direction: column; }
	.image {display: block; margin-left : auto; margin-right: auto; /*border: 1px red solid;*/}
	.text  {margin: 10px 0 40px 20px; /*border: 1px blue solid;*/}
}
/* Mid-sized tablets */
@media only screen and (min-width:501px) and (max-width:750px) {
	.entry {flex-direction: column;}
	.image {width: 300px;
  	   	    margin: 10px 0 40px 20px; /*border: 1px red solid;*/}
    .text  {margin: 10px 0 0 20px; /*border: 1px blue solid;*/}
}
/* Tablets and Desktops - keep the image to 300px and let the text box sit alongside the image */
@media only screen and (min-width: 751px) {    
  .entry {flex-direction: row;}
  .image {/* width: 300px; */
  		  margin: 10px 0 40px 20px; /*border: 1px red solid;*/}
  .text  {margin: 10px 0 0 20px; /*border: 1px blue solid;*/}
}