:root {
  --white4dark: antiquewhite;
  --darkBackground: #222;
  --darkHeadText: limegreen;
  }
body {
  font-family: Verdana, Deja Vu Sans, Segoi UI, Arial, sans-serif;
  background-color: #eeeeee;
} 
.bigtitle {
  font-style: italic;
  color: #333333;
}
.text {
  color: #555555;
}
a:link, a:visited {
  text-decoration: none;
  color: #444444;
}
a:hover {
  text-decoration: none;
  color: #cccccc;
}
.fs18 {
  font-size: 1.125em;
  }
.fs22 {
  font-size: 1.375em;
  }
.fs28 {
  font-size: 1.75em;
  }
.lead14 {
  margin-left: 0.875em;
  }
.centred {
  text-align: center;
  }
#indexContent {
  max-width: 750px;
  margin-left: auto;
  margin-right: auto;
  }
#indexFrame {
  width: 100%;
  border: none;
  }
#navFrame {
  height: 130px;
  width: 100%;
  border: none;
  }
#albumIndexContainer {
  max-width: 540px;
  margin-left: auto;
  margin-right: auto;
  }
.albumTitle {
  text-align: center;
  }
.albumImg, .subAlbum img {
  margin: 0.5em 0 0 0;
  max-width: 95%;
  box-shadow: 5px 5px 5px dimgrey;
  }
.albumImg {
  margin-bottom: 0.5em;
  }
#subAlbums {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-around;
  margin-top: 0.5em;
  }
.subAlbum {
  max-width: 50%;
  padding-bottom: 0.5em;
  }
/* all albumIndex*** declarations to be removed - plus #AlbumIndexContainer above*/
#albumIndexTable {
  width: 100%;
  border: none;
  padding: 0;
  text-align: center;
  vertical-align: middle;
}
#albumIndexTable .albumImg {
  padding: 0.5em 0 0.5em 0;
  }
#albumIndexTable img {
  max-width: 95%;
  box-shadow: 5px 5px 5px dimgrey;
  }
#albumIndexTable .leftCol, .rightCol, .singleCol {
  padding-top: 0.5em;
}
#albumIndexTable .leftCol {
  text-align: left;
  }
#albumIndexTable .rightCol {
  text-align: right;
  }
/* end of albumIndex*** declarations */ 
#gallery {
  visibility: hidden;
  }
#subAlbumTitle {
  margin-left: auto;
  margin-right: auto;
  padding: 0;
  text-align: left;
  }
.copyrite, .credit {
  font-size: 0.7em;
  color: #888888;
  }
.copyrite {
  text-align: right;
  vertical-align: bottom;
  }
.credit {
  max-width: fit-content;
  margin-left: auto;
  margin-right: auto;
  }
.swiper-slide {
  text-align: center;
  }
.gallery-main {
  background-color: #eeeee0;
  border: solid lightgrey 2px;
  padding-top: 10px;
  }
.swiper-slide-active img {
  max-width: 95%;
  box-shadow: 5px 5px 5px dimgrey;
  }
.gallery-main .swiper-slide-active img {
  background-color: white;
  padding: 8px 0;
  }
.gallery-thumbs {
  height: 160px;
  box-sizing: border-box;
  margin-top: 10px;
  }
@media only screen and (max-width: 401px) {
  .swiper-button-prev, .swiper-button-next {
    top: 75%;
    }
  .gallery-thumbs {
    visibility: hidden;
    }
  }
.gallery-thumbs .swiper-slide {
  width: 33%;
  opacity: 0.4;
  }
.gallery-thumbs .swiper-slide-active {
  opacity: 1;
  }
.swiper-pagination-fraction {
  font-size: 0.8em;
  bottom: 0px;
  text-align: right;
  }
#navBody {
  margin-left: 0;
  margin-right: 0;
  }
#navOuter, #navLinks, #leftNav, #rightNav {
  float: left;
  }
#navContent {
  background-color: #eeeeee;
  background-attachment: fixed;
  background-repeat: repeat-x;
  background-position: left 18px;
  height: 100px;
  overflow-x: auto;
  }
#navWrapper {
  padding-left: 0.5em;
  white-space: nowrap;
  }
#leftNav, #rightNav {
  margin-top: 10px;
  }
#rightNav {
  background-repeat: repeat-x;
  text-align: right; 
  vertical-align: top;
  }
#rightNav div {
  float: left;
  }
.asLink {
  padding-top: 15px;
  }
.navThumb {
  display: inline;
  padding-right: 3px;
  }
.navThumb img {
  height: 50px;
  box-shadow: 3px 4px 5px dimgrey;
  }
@media (prefers-color-scheme: dark) {
  body, #navBody {
    background-color: var(--darkBackground);
  }
  #navContent {
    background-color: transparent;
  }
  a:link, a:visited {
    color: var(--white4dark);
  }
a:hover {
  color: #cccccc;
}
  span.bigtitle, span.text, .credit, #navContent, #leftNav, #rightNav, .navThumb img {
    color: var(--darkHeadText);
  }
  .swiper-slide-active span.text {
    color: black;
  }
}