/* Loaded after Bootstrap; keeps the original look on top of its grid. */

body
  {
  font: 14px/1.6 Arial, Helvetica, sans-serif;
  color: #6f6f6f;
  background: #d0d0d0;
  }

a
  {
  font-weight: bold;
  color: #3C657B;
  text-decoration: none;
  }

a:hover
  {
  background-color: #3C657B;
  color: #ffffff;
  }

#wrapper
  {
  max-width: 800px;
  margin: 0 auto 50px;
  background-color: #ffffff;
  }

#headerBox  {
  display: block;
  height: 120px;
  color: #ffffff;
  background: #3e3e3e url(../siteImages/header3.jpg) center / cover;
  }

#headerBox:hover { background-color: #3e3e3e; }

#headerBox h1 {
  font-size: 20px;
  color: #ffffff;
  padding: 20px 0 0 20px;
  margin: 0;
  border: 0;
  }

#headerBox h2 {
  font-size: 11px;
  color: #ffffff;
  padding: 5px 0 0 20px;
  margin: 0;
  border: 0;
  }

#column1, #column2 { padding: 10px; }

#column1 .nav-link
  {
  --bs-nav-link-color: #3C657B;
  --bs-nav-link-hover-color: #ffffff;
  padding: 2px 5px;
  font-size: 13px;
  }

/* side-by-side columns get a divider; stacked (phone) they get a rule instead */
@media (min-width: 768px) {
  #column2 { border-left: 1px solid #a4a4a4; }
}
@media (max-width: 767.98px) {
  #column1 { border-bottom: 1px solid #a4a4a4; }
}

#footer {
  font-size: 11px;
  text-align: right;
  padding: 4px 10px;
  border-top: 1px solid #e4e4e4;
  }

#footer .sep { padding: 0 .75em; }

h1, h2, .header2  {
  font-size: 14px;
  font-weight: bold;
  color: #3e3e3e;
  padding: 0;
  margin: 5px 0;
  border-bottom: 4px solid #e0e0e0;
  }

h3  {
  font-size: 16px;
  font-weight: bold;
  color: #3C657B;
  margin: 5px 0 10px;
  }

.itemTitle  {
  color: #3C657B;
  font-weight: bold;
  line-height: 1.2;
  padding-top: 5px;
  }

.itemImage  {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 120px;
  }

.itemImage img { max-height: 110px; }

.itemImage a:hover { background: none; }

.itemThumb a:hover { background: none; }

.separator1  {
  margin: 10px 0 4px;
  border-top: 1px solid #e4e4e4;
  }

.separator2  {
  margin: 20px 4px 10px;
  border-top: 1px solid #a4a4a4;
  }

.detailLink
  {
  margin-top: 10px;
  text-align: right;
  }

.detailLink a
  {
  font-size: 10px;
  font-weight: normal;
  color: #877554;
  background-color: #f3f3f3;
  padding: 2px 4px;
  }

.detailLink a:hover
  {
  color: #ffffff;
  background-color: #584E37;
  }

.grayBar, .breadCrumbs
  {
  font-size: 11px;
  margin: 5px 0;
  padding-left: 5px;
  border-bottom: 1px solid #d0d0d0;
  }

.breadCrumbs { padding-left: 0; }

.pagination { --bs-pagination-color: #3C657B; --bs-pagination-active-bg: #3C657B; --bs-pagination-active-border-color: #3C657B; }

.pagination a:hover { background-color: #e9ecef; color: #3C657B; }

.grayBar2
  {
  margin: 5px 0;
  }

/* JS port of the old featureBox.swf (index.php) */
#featureBox { display: flex; gap: 12px; padding: 12px 12px 6px; background: #b2ab9a; }
#featureBox a { flex: 1; min-width: 0; text-align: center; }
#featureBox a:hover { background: none; }
#featureBox .pic { display: flex; align-items: center; justify-content: center; height: 127px;
                   background: #fff; border: 2px solid #888; }
#featureBox img { max-width: 90%; max-height: 105px; opacity: 0; transition: opacity .5s linear; }
#featureBox span { display: block; height: 1.6em; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
                   color: #fff; text-shadow: 1.5px 2px 0 #888; font: 15px/1.6 "Frutiger LT 47 LightCn", "Arial Narrow", sans-serif; }