body {
  font: 100% Verdana, Arial, Helvetica, sans-serif;
  background: #666666;
  margin: 0;   /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
  padding: 0;
  text-align: center;   /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
  color: #000000;
  background-color: #3300FF;
}
.background1
{background-image: url("/Media/Waves_BKGR.jpg");}

.background2
{background-image: url("/Media/Clouds_BKG.jpg");}

.background3
{background-image: url("/Media/BlueCanvas_BKG.jpg");}

.background4
{background-image: url("/Media/bkgrnd_sable2.jpg");}

.background6
{background-image: url("/Media/bkgrnd_sable.jpg");}

.background5
{background-image: url("/Media/bkgrnd_cocotree.jpg");}

.oneColElsCtr #container {
  width: 72em;
  background-color: #3300FF;
  margin: 0 auto;
  /* the auto margins (in conjunction with a width) center the page */
  border: 0px solid #000000;
  text-align: left;
  /* this overrides the text-align: center on the body element. */
}

.oneColElsCtr #mainContent {
  padding: 0 0px;
  /* remember that padding is the space inside the div box and margin is the space outside the div box */
}

.style1 {font-size: 18px; color: #800000;}
.style2 {font-size: 18px; color: #ffff00;}
.style3 {font-size: 18px; color: #006600;}

.style4 {font-size: 12px; color: #800000; font-family: Verdana, Arial, Helvetica, sans-serif; font-style: italic;}
.style5 {font-size: 12px; color: #ffff00; font-family: Verdana, Arial, Helvetica, sans-serif; font-style: italic;}
.style6 {font-size: 12px; color: #006600; font-family: Verdana, Arial, Helvetica, sans-serif; font-style: italic;}
.style7 {font-size: 14px; color: #0215c7; font-family: Verdana, Arial, Helvetica, sans-serif; font-style: italic;}

.style10 {font-family: Verdana, Arial, Helvetica, sans-serif; color: #006600; letter-spacing: 10pt; font-style: italic; font-size: 28px; font-weight: bold;}
.style11 {font-family: Verdana, Arial, Helvetica, sans-serif; color: #FF0000; letter-spacing: 10pt; font-style: italic; font-size: 28px; font-weight: bold;}
.style12 {font-family: Verdana, Arial, Helvetica, sans-serif; color: #FFFF00; letter-spacing: 10pt; font-style: italic; font-size: 28px; font-weight: bold;}

.style13 {color: #FFFFFF}

.style14 {font-size: 18px; color: #FFFFFF;}

#enlargedImg {
  display: none;
  position: relative;
  /* Hide the enlarged image container by default */
}

.enlargedImgContainer {
  width: 88%;
  position: relative;
  height: 650px;
  margin-top: 22px;
}

.enlargedImgContent {
  max-height: 650px;
  max-width: 100%;
  /* Set the height of the enlarged picture */
  object-fit: contain;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
}

.thumbnails {
  position: relative;
  /* Hide the enlarged image container by default */
  display: flex;
  margin-top: 20px;
}

.thumbnailButtonContainer {
  position: relative;
  width: 6%;
  height: inherit;
}

.thumbnailButton {
  position:absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  font-size: xx-large;
  color: #FFF;
  background: none;
  border: none;
  align-self: center;
  cursor: pointer;
  z-index: 1;
  background-color: #070c5a;
  font-family: "emoji";
  border-radius: 10%;
}

.thumbnailButton:hover {
  background-color: #444a94;
}

.thumbnailContainer {
  width: 11%;
  height: 100px;
  position: relative;
}

.thumbnail {
  max-width: 120px;
  /* Set the width of the thumbnails */
  max-height: 100px;
  /* Set the height of the thumbnails */
  object-fit: contain;
  /* Ensure the entire image is visible within the thumbnail dimensions */
  cursor: pointer;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
}

.backButton {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 5px;
  z-index: 1;
}

a:hover {
  cursor: pointer;
}