/* beyondsuccessproject.com on sitebuilder. The theme's style.css and Drupal's defaults.css and
   system-menus.css are copied unchanged; this file holds what the Drupal modules and the "tdesign"
   layout module did inline, and the phone layout the 974px-wide theme never had. */

/* the page title stays, for search engines and screen readers, but hidden as the theme hid it */
.page-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* current page in the menu, as Drupal marked it */
#index .m-index a, #about .m-about a, #images .m-images a, #events .m-events a, #about-eileen .m-about-eileen a { color: #000; }

/* home: the one large photograph, centred */
.home-photo { text-align: center; margin: 0; }
.home-photo img { max-width: 100%; height: auto; }

/* text pages: picture on the left (400px), text in a column on the right, as the tdesign layout did */
/* the grey frame round pictures came from the tdesign module's display.css */
.side-image { float: left; width: 400px; margin: 0 10px 10px 0; padding: 5px; background: #eee; border: 1px solid #ccc; }
.side-image img { display: block; width: 100%; height: auto; }
#contentwrapper .side-image ~ * { margin-left: 450px; }
#footer { clear: both; }
#contentwrapper p { margin: 0 0 1em; }

/* images: 24 thumbnails, five to a row, opening the viewer (bsp.js) */
.gallery { list-style: none; width: 600px; margin: 0 auto; padding: 0; display: flex; flex-wrap: wrap; }
.gallery li { list-style: none; margin: 0; padding: 0; }
.gallery img { display: block; width: 100px; height: 100px; margin: 10px; object-fit: cover; }

/* the photo viewer: like the old single-photo pages (prev | next, view all, caption on the right) */
.viewer { position: fixed; inset: 0; z-index: 10; background: #fff; overflow: auto; padding: 20px; box-sizing: border-box; text-align: center; }
.viewer[hidden] { display: none; }
.viewer-nav { max-width: 800px; margin: 0 auto 6px; text-align: right; color: #909090; }
.viewer-nav a { cursor: pointer; margin-left: 6px; }
.viewer img { display: block; max-width: 100%; max-height: calc(100vh - 110px); width: auto; height: auto; margin: 0 auto; }
.viewer-caption { max-width: 800px; margin: 0 auto; padding: 5px; text-align: right; color: #909090; }

/* events: heading, then text on the right and the picture on the left */
#contentwrapper h2.event-title { display: block; clear: both; font-family: Helvetica, arial; font-size: 16px; color: #999; font-weight: normal; margin: 0 0 1em; }
.event { clear: both; overflow: hidden; margin-bottom: 36px; }
.event-text { float: right; width: 420px; }
.event-image { display: block; max-width: 450px; height: auto; padding: 5px; background: #eee; border: 1px solid #ccc; }

/* awards list on About Eileen */
.awards { padding-left: 1.5em; }
.awards li { margin-bottom: .5em; }

/* phones and narrow windows: the theme was a fixed 974px */
@media (max-width: 990px) {
  #siteWapper { width: auto; padding: 0 12px; }
  #siteHeader { height: auto; background: none; border-bottom: 1px solid #e6e6e6; padding-bottom: 8px; }
  #siteHeader img { float: none; display: block; max-width: 100%; height: auto; }
  #menu { float: none; margin-top: 8px; }
  .primary-links { float: none; text-align: left; }
  .primary-links li { display: inline-block; padding: 6px 4px 6px 0; }
  .primary-links a { font-size: 14px; }
  #contentwrapper { padding: 0; margin-top: 20px; }
  .side-image { float: none; width: auto; margin: 0 0 1em; }
  #contentwrapper .side-image ~ * { margin-left: 0; }
  .gallery { width: auto; justify-content: center; }
  .event-text { float: none; width: auto; }
  .event-image { max-width: 100%; box-sizing: border-box; }
  #footer { text-align: left; font-size: 11px; }
}