body {
  margin: 0;
    background-color: #FFE0A0;
/*  
    background-color: #FFE0A0;

  background-color: #F2F2E2; 
  background-color: #F9D9A9;
  background-color: #F59515; */
}

body>p, main>p{
  display: none;
  padding: 0 4%;
}


* {
  box-sizing: border-box;
}

/* set page content below navigation mentu to have padding at either side and to be scrollable */
main {
  padding: 0 4%;
  overflow: auto;
  background-color: white; 
}

/* Make the header font change size with the viewpoint width */
h1 {
	text-align: center;
	margin: 1vw;
	margin-bottom: 0;
    font-size: 4vw;
	}

/*setup sections to have margins and lines between them */

.row {
 display: block;
 flex: none; 
 padding: 0px 0px;
 border-top: 3px solid #FFCC66; 
 max-width: 600px;
 margin: 0px auto;
}

.firstrow {
  border-top: none;
}

/* Setup 2 boxs of equal width */

/* make the second box match the height of the first box containing the image */

.box {
  padding: 0; /* 0 in first vertion */
  display: block;
  width: 100%;
}

.box img {	
  float: left;
  width: 100%;
  padding-top: 1em;
}

/* textbox setup  */

.textbox {
  overflow-y: hidden; 
}
  
h3 a{
  color: #990000;
  text-decoration: none;
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  }
  
h3 a:visited {
  color: #CC6600;
  }
/* needed? in development
a {
  color: black;
  text-decoration: none;
  }
*/

/* setup the navigation bar for mobile */  
.navbar {
  overflow: hidden;
  background-color: #FFE0A0;
/*  background-color: black; 
  background-color: #FFCC66; 
  background-color: #FFE0A0; */
  width: 100%;
  top: 0px;
}

/* setup navbar links */
.navbar a {
  float: left;
  font-size: 16px;
/*  color: black; */
  text-align: center;
   padding: 14px 16px;
  text-decoration: none;
/*  color: #F59515; */
  color: #990000;

/* JW 15/09/21 added */
  font-weight: bold;
  }

/* JW 15/09/21 setup navlink hover colours for links, buttons and drop down content*/
.navbar a:hover, .dropdown:hover .dropbtn {
/* JW 15/09/21  background-color: #F2F2E2; */
	background-color: #FFCC66;
  color: black;
}

.navbar a:hover:not(.active)  {
	background-color: #FFCC66;
}

.navbar a.active {
  background-color: #F2F2E2;
  color: #F9D9A9; 
/*  color: #F59515; */
  font-weight: bold;

}

.dropdown {
  float: left;
  overflow: hidden; /* not sure if this is needed */
}

.dropdown .dropbtn {
  font-size: 16px;  
  border: none;
  outline: none;
/*  color: black; */
  padding: 14px 16px;
  background-color: inherit; 
  font-family: inherit;
  margin: 0;
/*  color: #F59515; */
  color: #990000;
  font-weight: bold;
}

.dropdown-content {
  display: none;
  position: absolute;
  min-width: 230px;
  background-color: #FFE0A0;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: #990000;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
  font-weight: normal;
}

/* Change colour of active link background on hover 
.dropdown-content a:hover {
  background-color: #F2F2E2;
  color: #;
}
*/

.dropdown:hover .dropdown-content {
  display: block;
}

.breadcrumbs {
  font-family: Arial, Helvetica, sans-serif;;
  }
  
.breadcrumbs a {
  color: #F59515;
  }


/* Setup for larger widths */

@media screen and (min-width: 700px) {

/* add background margins down the side of the page */
main {
  margin: 0 2%;
  padding: 0 1.5%;
}

body>p, main>p{
  display: block;
  padding: 0 4%;
}


/* } 

@media screen and (min-width: 1270px){

/* Setup 2 boxs to display underneath eath other */

.row {
  display: flex;
  border-top: 3px solid #FFCC66;  
  margin: 1% auto; 
  max-width: 1250px;
  padding: 0px 0px;
}

.firstrow {
  border-top: none;
  padding-top: 0px;
}

.box {
  display: flex;
  flex-direction: column;
  width: 50%;
  padding: 1em;
}

/* Setup 2 columns of equal width */
/* make the second column match the height of the first column containing the image */

.firstbox {
  padding: 0;
}

.textbox p, h3 {
    font-size: 2vw;
	padding-left: 2vw;
	margin-bottom: 0px;
}

}