/* Styling for the JS slideshow that replaces the dead Flash photo gallery.
   Sized to the original gallery region (944x330) with a thumbnail grid on the
   left and the detail image on the right, matching the layout the NetObjects
   "OverviewAndDetail" Flash gallery used. Beige palette to match the
   surrounding NOF page. Source of truth: assets/gallery.css. */

.sei-gallery {
  width: 944px;
  height: 330px;
  display: flex;
  gap: 8px;
  box-sizing: border-box;
  background: #e8dab9;
  border: 1px solid #d6caae;
  font-family: "Trebuchet MS", Tahoma, Verdana, Arial, Helvetica, sans-serif;
}

.sei-gallery-thumbs {
  width: 280px;
  flex: 0 0 280px;
  height: 100%;
  overflow-y: auto;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 5px;
  padding: 6px;
  box-sizing: border-box;
}

.sei-gallery-thumb {
  width: 80px;
  height: 60px;
  object-fit: cover;
  cursor: pointer;
  border: 2px solid transparent;
  background: #fff;
  display: block;
}

.sei-gallery-thumb:hover {
  border-color: #3b93be;
}

.sei-gallery-thumb.is-active {
  border-color: #cc0000;
}

.sei-gallery-stage {
  position: relative;
  flex: 1 1 auto;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  overflow: hidden;
}

.sei-gallery-main {
  max-width: 100%;
  max-height: 100%;
  display: block;
}

.sei-gallery-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 48px;
  border: none;
  background: rgba(92, 75, 45, 0.55);
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  line-height: 48px;
  padding: 0;
}

.sei-gallery-nav:hover {
  background: rgba(92, 75, 45, 0.85);
}

.sei-gallery-prev {
  left: 0;
}

.sei-gallery-next {
  right: 0;
}