:root {
  --main-grid-area: "nav_grid_area main_content_grid_area";
  --main-grid-rows: auto;
  --main-grid-columns: 1fr 3fr;
  --main-grid-row-gap: 0; /* Set padding inside child divs */
  --main-grid-col-gap: 0; /* Set padding inside child divs */
  --main-content-div-padding: 0 10px;
  --foot-grid-area: "foot_tl_grid_area foot_br_grid_area";
  --foot-grid-rows: auto;
  --foot-grid-columns: 1fr 1fr;
  --foot-grid-row-gap: 0;
  --foot-grid-col-gap: 2%;
  --foot-padding: 8px 10px 0 10px;
  --serif-typeface:   "Times New Roman", serif;
  --sans-serif-typeface: Arial, sans-serif;
  --h1-fontsize: 1.65em;
  --h2-fontsize: 1.4em;
  --h3-fontsize: 1.3em;
  --h4-fontsize: 1.1em;
  --p-fontsize: 13pt;

  --nav-div-min-width: 300px;
  --nav-div-max-width: 500px;
  --nav-button-margin: 5px;
  --nav-button-padding: 10px 25px;
  --nav-button-width: 90%;
  --nav-button-radius: 10px;
  --nav-button-border-colour: #889;
  --nav-button-bg-colour: #99a;
  --nav-button-bg-hover-colour: #9ca;

/*
Backgrond images and colours
  --bg-img: url("/img/dt-bg-960x480.jpg");
*/
  --page-bg-colour: #d8d8e8;
  --margin-bg-colour: #b0b0c0;
  --nav-bg-colour: #d0d0e0;
  --table-odd-bg-colour: #c0c0c0;
  --table-even-bg-colour: #b4c4e4;
  --foot-bg-colour: #b0b0c0;
  --red-alert-font-colour: white;
  --red-alert-bg-colour: crimson;
  --red-alert-font-weight: normal;
}
@media screen and (max-width: 800px) {
:root {
  --main-grid-area:
    "nav_grid_area"
    "main_content_grid_area";
  --main-grid-rows: auto 1fr;
  --main-grid-columns: auto;
  --main-grid-row-gap: 5%;
  --main-grid-col-gap: 0;
  --main-content-div-padding: 0 5px;
  --foot-grid-area:
  "foot_tl_grid_area"
  "foot_br_grid_area";
  --foot-grid-rows: 1fr 1fr;
  --foot-grid-columns: auto;
  --foot-grid-row-gap: 2%;
  --foot-grid-col-gap: 0;
  --main-grid-padding: 0;
  --foot-padding: 4px 5px 0 5px;
  --h1-fontsize: 1.65em;
  --h2-fontsize: 1.4em;
  --h3-fontsize: 1.3em;
  --h4-fontsize: 1.1em;
  --p-fontsize: 15pt;

  --margin-bg-colour: #ccd;
  --foot-bg-colour: #ccd;
  --nav-button-width: 45%;
  --nav-button-radius: 25px;
  --red-alert-font-colour: black;
  --red-alert-bg-colour: red;
  --red-alert-font-weight: bolder;
  }
}
body {
/*  height: 100vh;
  width: 100vw; */
  margin: 0;
  background-color: var(--margin-bg-colour);
  /* overflow-x: hidden; /* ---> Hide horizontal scrollbar */
}
h1, h2, h3, h4, h5 {
  font-family: var(--sans-serif-typeface);
}
h1 {
  text-align: center;
  font-size: var(--h1-fontsize);
}
h2 {
  font-size: var(--h2-fontsize);
}
h3 {
  font-size: var(--h3-fontsize);
}
h4 {
  font-size: var(--h3-fontsize);
}
p, li, td {
  font-size: var(--p-fontsize);
}

#body_div {
 /* min-height: 96vh; /* Set this so there is normally no scrollbar */
  height: 98vh;
  width: 98vw;
  margin: 10px;
  background-color: var(--page-bg-colour);
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: auto;
  grid-row-gap: 0;
  grid-template-areas:
    "header-area"
    "main-area"
    "footer-area";
}
#header_div {
  grid-area: header-area;
  text-align: center;
  background-color: #27448c;
}
#main_grid_div {
  grid-area: main-area;
  display: grid;
  grid-template-areas: var(--main-grid-area);
  grid-template-rows: var(--main-grid-rows);
  grid-template-columns: var(--main-grid-columns);
  grid-row-gap: var(--main-grid-row-gap);
  grid-column-gap: var(--main-grid-col-gap);
}
#main_content_div {
  padding: var(--main-content-div-padding);
  grid-area: main_content_grid_area;
  /* overflow-x: auto; /* ---> Do not hide horizontal scrollbar */
}

#nav_div {
  grid-area: nav_grid_area;
  min-width: var(--nav-div-min-width);
  max-width: var(--nav-div-max-width);
  padding: 0px 10px;
  background-color: var(--nav-bg-colour);
}
#nav-items-div {
  text-align: center;
}
.nav-button {
  font-size: 1.3em;
  font-weight: bold;
  text-align: center;
  border-style: inset;
  margin: var(--nav-button-margin);
  padding: var(--nav-button-padding);
  width: var(--nav-button-width);
  border-width: 5px;
  border-radius: var(--nav-button-radius);
  border-color: var(--nav-button-border-colour);
  background: var(--nav-button-bg-colour);
}
.nav-button:hover {
  background: var(--nav-button-bg-hover-colour);
}

.tables tbody tr td {
  padding: 10px;
}
.table-odd-rows {
  background-color: var(--table-odd-bg-colour);
  }
.table-even-rows {
  background-color: var(--table-even-bg-colour);
  }
.table-left-cols {
}
.red-alert {
  margin: 0;
  padding: 5px 10px;
  color: var(--red-alert-font-colour);
  background-color: var(--red-alert-bg-colour);
  font-weight: var(--red-alert-font-weight);
}
#footer_div{
  grid-area: footer-area;
  text-align: center;
  padding: var(--foot-padding);
  background-color: var(--foot-bg-colour);
  display: grid;
  grid-template-areas: var(--foot-grid-area);
  grid-template-rows: var(--foot-grid-rows);
  grid-template-columns: var(--foot-grid-columns);
  grid-row-gap: var(--foot-grid-row-gap);
  grid-column-gap: var(--foot-grid-col-gap);
  font-family: var(--sans-serif-typeface);
  color: #333;
}
#footer_div_tl {
  grid-area: foot_tl_grid_area;
}
#footer_div_br {
  grid-area: foot_br_grid_area;
}
#footer_div_br a {
  text-decoration: none;
}
#footer_div_br a:link, #footer_div_br a:visited {
  color: #406840;
  font-weight: 700;
}
#footer_div_br a:hover {
  color: #186818;
}

.debug-black {
  border-style: dashed;
  border-width: 2px;
  border-color: black;
}
.debug-red {
  border-style: dashed;
  border-width: 3px;
  border-color: red;
}
.debug-green {
  border-style: solid;
  border-width: 2px;
  border-color: green;
}