/* 2008/12/05 Change Title Colours 
   2008/12/11 Change Title and Navigation
  max-width: 1200px;
  width: 96%;
*/

body {
  font-family: Arial, Helvetica; sans-serif;
  min-width: 800px;

  margin: 0 auto;
  width: expression(document.body.clientWidth < 800? "800px" : document.body.clientWidth > 1200? "1200px" : "auto");
}

body.grid { 
  display: grid;
  grid-template-areas: 
    "header header"
    "nav article"
    "ads article"
    "ads footer";
  grid-template-rows: 1fr;  
  grid-template-columns: 20% 1fr;
  grid-row-gap: 10px;
  grid-column-gap: 10px;
  height: 100vh;
  margin: 0;
  }  
footer, article, nav {
  padding: 1.2em;
  background:;
  }
#pageHeader {
  grid-area: header;
  }
#pageFooter {
  grid-area: footer;
  }
#mainArticle { 
  grid-area: article;      
  }
#mainNav { 
  grid-area: nav; 
  }
#siteAds { 
  grid-area: ads; 
  } 
#column2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 5px;
}
#column2 > div {
  background:;
  padding: 8px;
}
#column3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 5px;
}
#column3 > div {
  background:;
  padding: 8px;
}

/* Stack the layout on small devices/viewports. 
@media all and (max-width: 575px) {
  body { 
    grid-template-areas: 
      "header"
      "article"
      "ads"
      "nav"
      "footer";
    grid-template-rows: 80px 1fr 70px 1fr 70px;  
    grid-template-columns: 1fr;
 }
}
*/

.home {
  margin-left: auto;
  margin-right: auto;
  text-align:center;
}

.container {
  margin: 1%;
}

.pageheader {
  width: 100%
}

.pagemain {
  width: 70%;
  margin-left: 15%;
}

.pagetitle {
  color: olivedrab;
  background-color: white;
  font-size: x-large;
  font-weight: bold;
  padding: 0.2em;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  border-top: 3px solid olivedrab;
  border-bottom: 3px solid olivedrab;
}

.pagetitle table {
  width: 100%;
  margin-left: auto;
}

.pagetitle h1 {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  text-align:center;
  background-color: darkgreen;
  color: white;
}

#home {
  margin-left: auto;
  margin-right: auto;
  text-align:center;
}

#container {
  margin: 1%;
}


#pagemain {
  width: 70%;
  margin-left: 15%;
}

#pagetitle {
  color: olivedrab;
  background-color: white;
  font-size: x-large;
  font-weight: bold;
  padding: 0.2em;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  border-top: 3px solid olivedrab;
  border-bottom: 3px solid olivedrab;
}

#pagetitle table {
  width: 100%;
  margin-left: auto;
}

#pagetitle h1 {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  text-align:center;
  background-color: darkgreen;
  color: white;
}

.heading1 {
  color: green;
  font-size: 1.5em;
  font-weight: bold;
}

.heading2 {
    font-size: 1.3em; font-weight: bold;
}

.heading3 {
  color: crimson;
  font-size: 1.5em;
  font-weight: bold;
  margin-left: auto;
  margin-right: auto;
  text-align:center;
}

.heading4 {
  font-weight: bold;
  margin-left: auto;
  margin-right: auto;
  text-align:center;
}

.heading5 {
  font-weight: bold;
}

.heading6 {
  font-size: 1.3em;
  font-weight: bold;
  margin-left: auto;
  margin-right: auto;
  text-align:center;
}

.subtitle {
  font-weight: bold;
}


.indent1 {
  margin-left: 2em;
}

.listing1 {
  color: crimson;
  font-weight: bold;
  float: right;
}

.listing2 {
  color: crimson;
  font-weight: bold;
}

.paragraph1 {
  margin-top: .5em;
  margin-bottom: .5em;
}

.references {
  font-size: 75%;
  margin-top: .5em;
  margin-bottom: .5em;
}

.postcode {
  color: black;
  font-weight: bold;
  font-size: small;
  float: right;
}

.highlight1 {
  color: crimson;
  font-weight: bold;
}

.hidden {
  color: white;
}

#contents table {
  width: 100%;
}

#contents td {
  width: 33%;
  vertical-align: top;
  margin-left: auto;
  padding: 1%;
}

a.contents:link {color: #2000F8; text-decoration: none;}
a.contents:visited {color: #2000F8; text-decoration: none;}
a.contents:hover {color: #E00000;}

ul.dropdown {
display: none;}

a.contents:hover > ul.dropdown {
display: block;
}

#index table {
  width: 100%;
  vertical-align: top;
  margin-left: auto;
}

#index td {
  width: 33%;
  vertical-align: top;
  margin-left: auto;
  padding: 1%;
}

#index h2 {
  background-color: #00B850;
  color: white;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
/*    border-top: 3px ridge #28a8F8;
  border-bottom: 3px ridge #28a8F8; */
}

#index h4 {
  font-weight:bold;
  text-decoration: underline;
}

#index p { 
  text-align: left;
}

/*div.twocolumns {
  width: 45%;
  vertical-align: top;
  margin-left: auto;
  border: 1px solid #999999;
  padding: 1%;

}*/

#twocolumns td {
  width: 45%;
  vertical-align: top;
  margin-left: auto;
  border: 1px solid #999999;
  padding: 1%;
}

div.image {
  text-align: center;
  font-style: italic;
  font-size: smaller;
  color: navy;
  padding: 5px;
}

div.imagecentre {
  display: block;
  margin-left: auto;
  margin-right: auto; 
  text-align: center;
  font-style: italic;
  font-size: smaller;
  color: navy;
  padding: 5px;
}

.photo {
  margin: 5px;
  border: 1px ridge #000000;
}

#navigation {
  color: darkgreen;
  background-color: yellowgreen;
  font-weight: bold;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.menutable ul {  
  margin: 0;  
  padding: 5px;  
  list-style-type: none;  
  text-align: center;  
  background-color: yellowgreen;  
}  
  
.menutable ul li {   
  display: inline;
  font-weight:bold;
}  

.menutable ul li#menuitemcurrent a {
  background-color: olivedrab;
}

.menutable ul li a {  
  text-decoration: none;  
  padding: 5px;  
  color: white;  
  background-color: yellowgreen;  
}  
  
.menutable ul li a:hover {  
  background-color: darkgreen;  
}  


/*
ul#menubar {
  background-color: yellowgreen;
  list-style:none;
  margin:0;
  padding:0;
  overflow:hidden;
  border:0.3em yellowgreen;
}

.menutable {
  display:table;
  margin: 0 auto;
}

ul#menubar li {
  display:inline;
  float:left;
  font-weight:bold;
  background-color:yellowgreen;
  text-align:center;
  padding: 0;
}

ul#menubar li a:hover {
  background-color:darkgreen;
}

ul#menubar li#menuitem {
  width:auto;
}

#menubar li#menuitemcurrent {
  width:auto;
  background-color:olivedrab;
}

ul#menubar li a {
  display:block;
  color:white;
  padding:4px;
  text-decoration:none;
}
*/

a.navigation:link {color: darkgreen; text-decoration: none;}
a.navigation:visited {color: darkgreen; text-decoration: none;}
a.navigation:hover {color: lightgreen;}

#navigation h3 {
  background-color: #00B850;
  color: #FFFFFF;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
/*  border-top: 3px ridge #28a8F8;
  border-bottom: 3px ridge #28a8F8; */
}


.table1 {
  border-width: 1px;
  border-spacing: 2px;
  border-style: outset;
  border-color: lightgray;
  border-collapse: collapse;
}

.table1 th {
  border-width: 1px;
  padding: 1px;
  border-style: inset;
  border-color: lightgray;
  vertical-align: top;
  background-color: green;
  color: white;
  font-weight: bold;
}

.table1 td {
  border-width: 1px;
  padding: 1px;
  border-style: inset;
  border-color: lightgray;
  vertical-align: top;
}

.table2 {
  border-width: 5px;
  border-spacing: 2px;
  border-style: outset;
  border-color: crimson;
}

.table2 td {
  border-width: 1px;
  padding: 1%;
  border-style: inset;
  border-color: crimson;
}

.table3 {
  border-width: 1px;
  border-spacing: 2px;
  border-style: outset;
  border-color: lightgray;
  border-collapse: collapse;
}

.table3 th {
  border-width: 1px;
  padding: 1px;
  border-style: inset;
  border-color: lightgray;
  vertical-align: top;
  background-color: green;
  color: white;
  font-size: small;
  font-weight: bold;
}

.table3 td {
  border-width: 1px;
  padding: 1px;
  border-style: inset;
  border-color: lightgray;
  vertical-align: top;
  font-size: small;
}

.divide1 {
  color: darkgreen;
}

.divide2 {
  color: crimson;
}