/* Apply a basic reset to remove default styling */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


/* Set a mobile-first approach with a fluid layout */
body {
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.6;
  background-color: #008000;
}

/* Apply media queries for responsiveness */
@media only screen and (min-width: 600px) {
  /* Adjust styles for tablets and larger screens */
  body {
    font-size: 18px;
  }
}

@media only screen and (min-width: 900px) {
  /* Adjust styles for larger screens (e.g., desktop) */
  body {
    font-size: 20px;
  }
}




.container {
  width: 100%;
  max-width: 980px; /* was 1200. reduced to 980 so that ivy_masthead does not repeat */
  margin: 10px auto;
  padding: 20px;
  background-color: #ffffd0;
  border: 3px solid black;
  border-radius: 9px;
}

/* Responsive images */
img {
  max-width: 100%;
  height: auto;
}



/* Responsive navigation menu */
div.navholder {
  background-image: url("ivy_masthead3_940.jpg");
  height: 123px;
}
nav {
  display: flex;
  justify-content: center;
  background-color: #333;
}

nav a {
  color: #fff;
  text-decoration: none;
  padding: 15px 20px;
  display: inline-block;
}

@media only screen and (max-width: 570px) {
  /* On narrow mobile devices, hide some menu options
  * and reduce the padding on the remaining visible ones.
  * This makes the menu work OK down to width=320.
  */
  nav a.not_thin_mobile {
    display:none;
  }
  nav a {
    padding:15px 13px;
  }
}



/* Warning banner. Hidden by default */
div.warning-banner {
  height: 50px;
  border: 2px solid #b30303;
  border-radius: 12px;
  padding: 10px 10px 10px 20px;
  margin-bottom: 10px;
  font-weight: bold;
  color: #b30303;
  display: none;
}
div.warning-banner span.page-too-narrow-warning {
  display: none;
}

/* Show the warning banner on very
* narrow screens, below width=320px
 */
@media only screen and (max-width: 319px) {
  div.warning-banner {
    display: block;
  }
  div.warning-banner span.page-too-narrow-warning {
    display: inline-block;;
  }
}

/* Set up some basic tags */
p {
  margin: 20px 0;
}
blockquote {
  margin: 20px 40px;
}
main h1 {
  text-align: center;
}

main ul,
main ol {
  padding-left: 40px;
  margin-bottom: 16px;
}

/* Center all photos */
main div.photo {
  text-align: center;
}

main .centred-photo {
  text-align: center;
}

/* Photos have a white box around them */
main div.photo img,
main p.photo img,
main div.videoContainer {
  border: 1px solid black;
  padding: 8px;
  background-color: white;
}

.strikethrough {
  text-decoration: line-through;
}

.grg-footer {
  text-align:right;
  font-size:8px;
}


/* Re-create the classic HTML4 table style */
table.classic-table {
  margin: 0 auto; /* center the table */
  border-collapse: separate;
  border-spacing: 2px;
  border: 1px solid black;

}
table.classic-table td,
table.classic-table th {
    padding: 5px;
    border: 1px solid black;
}





/* div-twelve grid model. After  https://www.w3schools.com/css/css_rwd_grid.asp */
/* TODO: improve these names , e.g. awgrid-2-columns */
[class*="awgrid-col-"] {float: left;}
.awgrid-row::after {content: ""; clear: both; display: table;} /* saves you having to have a separate div to clear:both */
.awgrid-col-1 {width: 8.33%;}
.awgrid-col-2 {width: 16.66%;}
.awgrid-col-3 {width: 25%;}
.awgrid-col-4 {width: 33.33%;}
.awgrid-col-5 {width: 41.66%;}
.awgrid-col-6 {width: 50%;}
.awgrid-col-7 {width: 58.33%;}
.awgrid-col-8 {width: 66.66%;}
.awgrid-col-9 {width: 75%;}
.awgrid-col-10 {width: 83.33%;}
.awgrid-col-11 {width: 91.66%;}
.awgrid-col-12 {width: 100%;}


/* Page-specific styles */
p.supplier-intro-block, .supplier-alphabet {
    width: 100%; /* over-ridden for wider screens below*/
    margin: 0 auto 20px auto;
}

@media only screen and (min-width: 600px) {
  /* Tables/larger screens: this block is 75% width. */
  p.supplier-intro-block, .supplier-alphabet {
    width: 75%;
  }
}

img.supplier-logo {
  border:0;
  padding:0 10px 10px 10px;
  height: auto; /* Specify width in each <img> */
}


table.lb_map { max-width: 900px; margin: 0 auto; }
table.lb_map td {height: 3em; padding:  3px; border: 2px solid #aaaaaa; }
table.lb_map td.lb_cic { background-color: yellow; }
table.lb_map td.privately_owned { background-color: #fbf2d9; }
table.lb_map td.exmoor_assoc {background-color: lime; }
table.lb_map td.has_track {background-color: #afafff}

/* Legacy "insane engineering" page */
#insengTable {width:100%;}
#insengTable tr td {font-size: 8pt;vertical-align: top;}