/* Reset browser defaults */
* {
  margin: 0;
  padding: 0;
  border: 0;
}

* {
  box-sizing: border-box;
}

html {
  height: 100%;
  width: 100%;
}

body {
  position: relative;
  min-height: 98%;
  width: 98%;
  min-width: 70%;
  max-width: 120vmin;
  margin: 0.5% auto 0.5% auto;
  padding-bottom: 12.75vmin; /* Allow for height of footer */
  font-family: arial, sanserif;
}

/* Header */
header#page_hdr {
  display: block;
  float: top;
  height: 12vh;
  width: 100%;
  padding: 0.5vmin;
}

header#page_hdr h1 {
  font-family: georgia, serif;
  font-size: 3.5vh;
  font-weight: bold;
  text-align: center;
  margin-top: 1.25vh;
}

header#page_hdr h2 {
  position: relative;
  top: 7vmin;
  font-family: georgia, serif;
  font-size: 3.75vmin;
  font-weight: bold;
  text-align: left;
  margin: 0vmin 0vmin 0vmin 17.5vmin;
}

/* headings not usually visible */
header#page_hdr h3 {
  position: relative;
  top: 7vmin;
  font-family: georgia, serif;
  font-size: 3.5vmin;
  font-weight: bold;
  text-align: left;
  text-shadow: 0.2vmin 0.2vmin 0.2vmin gray;
  margin: 0vmin 0vmin 0vmin 17.5vmin;
  visibility: hidden;
}

#header_logo {
  display: block;
  position: relative;
  float: left;
  height: 99%;
  width: auto;
}

#header_img {
  display: block;
  position: relative;
  float: right;
  height: 99%;
  width: auto;
  border: 0.2vmin solid white;
}

@media screen and (max-width: 450px) {
  header#page_hdr h1 {
    font-size: 3.5vh;
    text-shadow: 0.4vmin 0.4vmin white;
  }
}

/* Navigation */
nav {
  overflow: hidden;
  background-color: dimgray;
  font-family: Arial;
}

/* Links inside navigation */
nav a {
  float: left;
  font-size: 2.75vmin;
  color: white;
  text-align: center;
  padding: 2vmin 5vmin;
  text-decoration: none;
}

/* Drop-down container */
nav div.dropdown {
  float: left;
  overflow: hidden;
}

/* Drop-down button */
nav div.dropdown button.dropbtn {
  font-size: 2.75vmin;
  border: none;
  outline: none;
  color: white;
  padding: 1.5vmin 2.5vmin;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

/* Background colour on hover */
nav a:hover, div.dropdown:hover button.dropbtn {
  background-color: red;
}

/* Drop-down content (hidden until hover) */
div.dropdown-content {
  display: none;
  position: absolute;
  background-color: dimgray;
  min-width: 30vmin;
  z-index: 1;
}

/* Drop-down links */
div.dropdown-content a {
  float: none;
  color: white;
  padding: 1.5vmin 2.5vmin;
  font-size: 2.5vmin;
  text-decoration: none;
  display: block;
  text-align: left;
}

div.dropdown-content a.selected-opt {
  font-size: 2.8vmin;
  font-weight: bolder;
}

/* Background colour on hover */
div.dropdown-content a:hover {
  background: red;
}

/* Disabled current selection */
div.dropdown-content a.selected-opt:hover {
  background: dimgray;
  cursor: default;
}

/* Display drop-down menu on hover */
div.dropdown:hover .dropdown-content {
  display: block;
} 

/* Smaller font for down caret */ 
span.subserv { font-size: 1.5vmin; }

/* Navigation - small screen size */
@media screen and (max-width: 450px) {
  nav a { font-size: 2.5vmin; }
  nav div.dropdown button.dropbtn { font-size: 2.5vmin; }
  div.dropdown-content a { font-size: 2.35vmin; }
  div.dropdown-content a.selected-opt { font-size: 2.6vmin; }
  span.subserv { font-size: 1.25vmin; }
}

/* Main Section */
section {
  display: block;
  margin: 0.5vmin 0.5vmin 1vmin 1vmin;
  font-family: arial, sans-serif;
}

section article {
  padding: 0.75vmin;
  border-radius: 0.75vmin;
  box-shadow: 0.3vmin 0.3vmin 1vmin black;
}

section article#welcome {
  width: 50%;
}

section article.fullwidth {
  /*width: 98%;*/
  margin: 0.25vmin 0.5vmin 0.5vmin 0.25vmin;
}

section article header {
  border-radius: 0.75vmin;
  padding: 0.5vmin;
  margin-bottom: 0.75vmin;
}

section article header h2 {
  margin: 0.5vmin 0vmin 0vmin 0vmin;
  text-align: center;
  font-size: 2.7vmin;
  font-weight: bold;
  font-family: arial, sans-serif;
}

section article header h3 {
  margin: 0.5vmin 0vmin 0vmin 1vmin;
  text-align: center;
  font-size: 2.8vmin;
  font-weight: bold;
  font-family: arial, sans-serif;
}

section article h3 {
  padding: 0.5vmin;
  font-size: 2.8vmin;
  font-weight: bold;
  text-align: left;
  color: darkslategray;
  font-family: georgia, serif;
}

section article p {
  font-size: 2.5vmin;
  padding: 0.5vmin;
  color: darkslategray;
}

section article p.warning {
  color: red;
  font-weight: bold;
}

section article p.indent {
  padding-left: 7vmin;
}

section article p.thankyoumain {
  padding: 10vmin 10vmin 0vmin 10vmin;
  font-size: 3.5vmin;
  color: orangered;
}

section article p.thankyousub {
  padding: 5vmin 10vmin 15vmin 10vmin;
  font-size: 2.75vmin;
  color: orangered;
}

section article ul {
  list-style-type: square;
  margin: 0.0vmin 0.0vmin 0.5vmin 3.5vmin;
}

section article ul li {
  font-size: 2.6vmin;
  color: darkslategray;
}

div.inactive { display: none; }

a.a-button {
  display: inline-block;
  color: white;
  background-color: steelblue;
  height: 4.2vmin;
  font-size: 1.8vmin;
  margin: 0.5vmin 0vmin 0.5vmin 2.5vmin;
  padding: 1vmin 1.5vmin 1vmin 1.5vmin;
  border: 0.2vmin solid white;
  border-radius: 0.75vmin;
  box-shadow: 0.25vmin 0.25vmin 0.75vmin gray;
  text-decoration: none;
  cursor: pointer;
}

a.a-button:hover {
  background-color: lightskyblue;
}

@media screen and (max-width: 450px),
       screen and (max-width: 550px), (orientation: portrait) {
  section article#welcome {
    float: left;
    width: 98%;
    margin: 0.75vmin 1.0vmin 1.25vmin 0.5vmin;
  }

  section article header h2 {
    font-size: 3.0vmin;
  }

  section article header h3 {
    font-size: 2.8vmin;
  }

  section article h3 {
    font-size: 2.8vmin;
  }

  section article p {
    font-size: 2.8vmin;
  }

  section article p.thankyoumain {
    font-size: 3.5vmin;
  }

  section article p.thankyousub {
    font-size: 2.75vmin;
  }
  section article ul li {
    font-size: 2.6vmin;
  }
}

/* Activity Table */
table.tabledes {
  font-family: "Trebuchet MS", sans-serif;
  font-size: 2.0vmin;
  font-style: normal;
  text-align: left;
  line-height: 90%;
  margin: 1.5vmin 0.5vmin 0.75vmin 1.5vmin;
  border:  0.4vmin solid dimgray;
  border-collapse: collapse;
  width: 95%;
}

table.tabledes caption {
  font-size: 2.25vmin;
  font-weight: bold;
  padding: 0.75vmin 0.0vmin;
}

table.tabledes tbody th {
  padding: 1.0vmin 3.0vmin 1.0vmin 1.0vmin;
  text-align: left;
  vertical-align: top;
  border: 0.2vmin solid white;
}

table.tabledes tbody td {
  padding: 1.0vmin 3.0vmin 1.0vmin 1.0vmin;
  text-align: left;
  vertical-align: top;
  border: 0.2vmin solid white;
}

table.tabledes tbody tr.dayheader td {
  background-color: darkcyan;
  font-size: 2.25vmin;
  font-weight: bold;
}

table.tabledes tbody td span.subtext {
  font-size: 1.75vmin;
}

/* Activity table - small screen size */
@media screen and (max-width: 700px) {
  table.tabledes {
    font-size: 2.5vmin;
  }

  table.tabledes caption {
    font-size: 2.75vmin;
  }

  table.tabledes tbody tr.dayheader td {
    font-size: 2.75vmin;
  }
}

@media screen and (max-width: 450px) {
  table.tabledes {
    font-size: 2.5vmin;
  }

  table.tabledes caption {
    font-size: 2.75vmin;
  }

  table.tabledes tbody tr.dayheader td {
    font-size: 2.75vmin;
  }
}

/* Location Map */
div#maparea {
  width: 80vmin;
  height: 60vmin;
  margin: 0vmin auto;
  border: 0.5vmin white solid;
}

div#streetmap {
  width: 80vmin;
  height: auto;
  margin: 0vmin auto;
  border: 0.5vmin white solid;
}

img#streetmapfig {
  width: 100%;
  height: auto;
}

p#streetmapcap {
  margin-top: 0vmin;
  font-size: 1.5vmin;
}

/* Facilities */
div.facility {
  position: relative;
  height: 14.0vmin;
  text-align: justify;
  margin-left: 1vmin;
  margin-right: 1vmin;
}

img.crooms {
  /*float: left;*/
  height: 20.0vmin;
  width: auto;
  display: block;
  margin: 0 auto 0 auto;
  border: 0.2vmin solid white;
  cursor: pointer;
}

img.lrooms {
  float: left;
  height: 12.0vmin;
  width: auto;
  display: block;
  margin-right: 1vmin;
  border: 0.2vmin solid white;
  cursor: pointer;
}

img.rrooms {
  float: right;
  height: 12.0vmin;
  width: auto;
  display: block;
  margin-left: 1vmin;
  border: 0.2vmin solid white;
  cursor: pointer;
}

img.lrgrooms {
  position: fixed;
  top: calc(50% - 27vmin);
  left: calc(50% - 40vmin);
  width: 80vmin;
  height: 54vmin;
  border: 0.75vmin ridge white;
  visibility: hidden;
}

a:hover img.lrgrooms {
  visibility: visible;
  z-index: 1; /* bring to the front */
}

/* Contact form */
fieldset.info_fieldset {
  margin: 2.0vmin 3.0vmin 1vmin 3.0vmin;
  padding: 0.5vmin 1.5vmin 1vmin 1.5vmin;
  border: 0.5vmin solid navy;
}

legend.legend_fieldset {
  display: block;
  background-color: lightgoldenrodyellow;
  border: 0.3vmin solid navy;
  border-radius: 1vmin;
  padding: 0.5vmin 1.25vmin;
  margin-bottom: 1.0vmin;
  font-size: 2.0vmin;
  font-weight: bold;
}

label.form_label {
  display: inline-block;
  float: left;
  clear: left;
  width: 45%;
}

input[type="text"],input[type="tel"],input[type="email"] {
  border: 0.1vmin solid blueviolet;
  background-color: lightgoldenrodyellow;
  color: darkslategray;
  font-size: 2.0vmin;
  width: 50%;
}

input[type="text"]:focus, input[type="tel"]:focus, input[type="email"]:focus {
  color: black;
  border: 0.2vmin solid blueviolet;
  box-shadow: 0vmin 0vmin 3vmin white;
}

label#subject_lbl {
  width: 25%;
}

input[type="text"]#subject_field {
  width: 70%;
}

textarea#message_field {
  width: 95%;
  height: 15vmin;
  border: 0.1vmin solid blueviolet;
  background-color: lightgoldenrodyellow;
  color: black;
  font-size: 1.75vmin;
}

textarea:focus {
  color: black;
  border: 0.2vmin solid blueviolet;
  box-shadow: 0vmin 0vmin 3vmin white;
}

fieldset p {
  padding-bottom: 0.75vmin;
}

form label {
  font-size: 2.0vmin;
}

input#email_field { display: none; overflow: hidden; }
label#conf_email_lbl { display: none; overflow: hidden; }

div#checkbot { display: none; overflow: hidden; }

/* Contact form - small screen size */
@media screen and (max-width: 450px) {
  legend.legend_fieldset {
    font-size: 3.0vmin;
  }

  input[type="text"],input[type="tel"],input[type="email"] {
    font-size: 2.75vmin;
  }

  textarea#message_field {
    font-size: 2.75vmin;
  }
  
  form label {
    font-size: 3.0vmin;
  }
}

.button {
  display: inline-block;
  color: white;
  background-color: goldenrod;
  height: 4.2vmin;
  width: 12.0vmin;
  font-size: 1.8vmin;
  margin: 0.5vmin 12.5vmin 0.5vmin 12.5vmin;
  border: 0.2vmin solid white;
  border-radius: 0.5vmin;
  box-shadow: 0.3vmin 0.3vmin 0.75vmin black;
  cursor: pointer;
}

.button:hover[type="submit"] {
  background-color: green;
  border: 0.4vmin solid white;
}

.button:hover[type="reset"] {
  background-color: red;
  border: 0.4vmin solid white;
}

/* Sidebar */
section aside {
  width: 40%;
  margin: 0.75vmin 1.0vmin 1.25vmin 0.5vmin;
  padding: 0.75vmin;
  border-radius: 0.75vmin;
  box-shadow: 0.3vmin 0.3vmin 1vmin black;
}

section aside header {
  border-radius: 0.75vmin;
  padding: 0.5vmin;
  margin-bottom: 1.0vmin;
}

section aside header h3 {
  margin: 0.5vmin 0vmin 0vmin 1vmin;
  text-align: center;
  font-size: 2.6vmin;
  font-weight: bold;
  font-family: arial, sans-serif;
}

section aside p {
  font-size: 2.25vmin;
  padding: 0.5vmin;
  color: darkslategray;
}

section aside p span.hilit {
  font-weight: bold;
  background: yellow;
}

/* Display and hide the posters */
div.div_poster {
  position: fixed;
  display: inline-block;
  top: calc(50% - 48vmin);
  left: calc(50% - 30vmin);
  /*max-height: 96vh;
  max-width: 90vmin;*/
  visibility: hidden;
}

img.poster {
  border: 0.75vmin ridge gray;
  height: 83vmin;
  width: 60vmin;
}

.toggle_poster { display: none; }
#show_macm:checked~#macm_poster { visibility: visible; }
#show_barn:checked~#barn_poster { visibility: visible; }
#macm_show_label,#barn_show_label {
  font-size: 2.6vmin;
  text-decoration: underline;
  color: darkslategray;
  cursor: pointer;
}
#macm_show_label:hover,#barn_show_label:hover { color: blue; }

#macm_hide_label,#barn_hide_label {
  position: absolute;
  bottom: 0vh;
  right: -2.5vh;
  margin: 0vh 1.5vh -1.25vh 0vh;
  font-size: 2.25vh;
  font-family: verdana, geneva, sans-serif;
  color: white;
  background-color: red;
  border: 0.5vh solid black;
  border-radius: 2.25vh;
  padding: 0.1vh 0.4vh 0.2vh 0.2vh;
  cursor: pointer;
}
#macm_hide_label:hover,#barn_hide_label:hover { background-color: hotpink; }
span.pre_label {
  font-size: 2.6vmin;
  padding-left: 0.5vmin;
  color: darkslategray;
}

/* Section aside - small screen size */
@media screen and (max-width: 450px),
       screen and (max-width: 550px), (orientation: portrait) {
  section aside {
    float: left;
    width: 98%;
    margin: 0.75vmin 0.5vmin 1.25vmin 1.0vmin;
  }

  section aside header h3 {
    font-size: 2.8vmin;
  }

  section aside p {
    font-size: 2.35vmin;
  }

  span.pre_label,#macm_show_label,#barn_show_label {
    font-size: 2.6vmin;
  }
}

/* Multi-column format, for equal height columns */
.multicol_wrapper {
  display: table;
  margin: 0vmin 0vmin 0vmin 0vmin;
  border-spacing: 1vmin;
  border-collapse: separate;
}

.multicol_cell {
  display: table-cell;
}

/* Disable multi-column format for small screen size */
@media screen and (max-width: 450px),
       screen and (max-width: 550px), (orientation: portrait) {
  .multicol_wrapper {
    display: block;
    margin: 0.25vmin 0.5vmin 0.5vmin 0.5vmin;
    height: 85vmin;
	overflow: hidden;
  }

  .multicol_cell {
    display: block;
    margin: 0.25vmin 0.5vmin 1.25vmin 0.5vmin;
    overflow: hidden;
  }
}

/* Footer */
footer#page_ftr {
  display: block;
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 12.75vmin;
  font-size: 1.75vmin;
  font-weight: normal;
  text-align: left;
  text-decoration: none;
}

footer#page_ftr a:hover {
  color: blue;
  cursor: pointer;
}

footer#page_ftr a:visited {
  color: indigo;
}

div#termcond {
  display: block;
  margin: auto auto;
  margin-top: 0.5vh;
  text-align: center;
}

div#centreaddr {
  display: block;
  float: left;
  margin: 0.5vh 0 0 2.0vw;
}

div#webdev {
  display: block;
  /*width: 30%;*/
  float: right;
  margin: 0.5vh 2.0vw 0 0;
}

img#fbook_logo {
  height: 2.25vmin;
  width: auto;
  float: left;
  margin-right: 1vmin;
}

/* Footer - small screen size
@media screen and (max-width: 550px) {
  body { padding-bottom: 20vh; }
  footer#page_ftr { height: 20vh; }
  div#termcond { clear: both; }
}
*/

/*
@media screen and (max-width: 450px) {
  body { padding-bottom: 15.5vh; }
  footer#page_ftr { height: 15.5vh; font-size: 2.25vmin; background-color: white;}
}
*/
/* Colour scheme */
html { background-color: oldlace;/*cornsilk;*/ }
body { color: darkslategray; background-color: silver; }
header#page_hdr, section article header, section aside header { background-color: #E0F8E0; }
header#page_hdr h1, header#page_hdr h2, header#page_hdr h3 { color: darkgreen; }
header#page_hdr h1 { text-shadow: 0.3vmin 0.3vmin white; }
header#page_hdr h2 { text-shadow: 0.2vmin 0.2vmin 0.2vmin white; }
section article { color: darkslategray; background-color: #FCFCFC; }
section article header h2, section article header h3 { color: darkgreen; }
section article header h2, section article header h3 { text-shadow: 0.25vmin 0.25vmin 0.25vmin white; }
section aside { color: darkslategray; background-color: #FCFCFC; }
section aside header h3 { color: darkgreen; }
section aside header h3 { text-shadow: 0.25vmin 0.25vmin 0.25vmin white; }
footer#page_ftr { color: darkslategray; background-color: #FCFCFC;/*#E0F8E0;/*#E4E4E4;*/ }
table.tabledes caption { background-color: #E0F8E0; color: darkgreen; }
table.tabledes tbody th { color: white; background-color: darkcyan; }
table.tabledes tbody td { color: white; background-color: cadetblue; }
table.tabledes tbody tr.dayheader td { background-color: darkcyan; }

/* Contact info */
span#contact_office::after { content: "01279 629611"; }
span#contact_church::after { content: "01279 629950"; }
span#contact_mon_brownies::after { content: "07831 153857"; }
span#contact_llexpress::after { content: "07395 267581"; }
span#contact_yoga::after { content: "07942 053665"; }
span#contact_pilates::after { content: "07942 053665"; }
span#contact_rainbows::after { content: "07831 153857"; }
span#contact_slimworld::after { content: "07920 259071"; }
span#contact_zumba::after { content: "07857 506555"; }
span#contact_todalong::after { content: "01279 437714"; }
span#contact_wed_karate::after { content: "01277 362104"; }
span#contact_fitclub::after { content: "07312 683692"; }
span#contact_wi::after { content: "01279 301040"; }
span#contact_kungfu::after { content: "07791 167011"; }
span#contact_wwatchers::after { content: "07949 214516"; }
span#contact_youngatheart::after { content: "01279 629277"; }
span#contact_fri_karate::after { content: "07502 261891"; }
span#contact_fri_brownies::after { content: "07977 190498"; }
span#contact_guides::after { content: "07977 190498"; }
span#contact_dance::after { content: "01279 654423"; }
span#contact_tue_bowls::after { content: "01279 862317"; }
span#contact_thu_bowls::after { content: "01279 629277"; }
span#cenemail::after { content: "churchlangley.hallbooking@gmail.com"; }
span#devemail::after { content: "info@sdwebstar.co.uk"; }