/* Restoration layer over the 2010 Sliding Door CSS (style.css + imageMenu.css).
   Keeps the 2010 look; adds the door animation without mootools, modern embeds,
   and a phone layout. */
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; }
#welcomeheading { padding-top: 14px; }
#welcomeheading a { display: inline-block; font-size: 40pt; line-height: 1.1; }
.screen-reader-text { position: absolute; left: -9999px; }

/* Sliding doors: CSS flex instead of mootools ImageMenu */
#imageMenu { box-sizing: content-box; }
#imageMenu ul { display: flex; width: 964px; }
#imageMenu ul li { flex: 0 0 auto; }
#imageMenu ul li a { width: 133px; transition: width .35s ease; background-size: auto 100% !important; background-repeat: no-repeat !important; background-position: 0 0 !important; }
#imageMenu ul:hover li a, #imageMenu ul:focus-within li a { width: 105px; }
#imageMenu ul li:hover a, #imageMenu ul li a:focus { width: 310px; }
#imageMenu ul li a:focus { outline: 2px solid #42adfb; outline-offset: -2px; }

/* content */
#content { padding-bottom: 30px; }
#content .post { float: none; width: auto; margin-bottom: 34px; padding-bottom: 14px; border-bottom: 1px solid #222; }
#content .post h1, #content .post h2 { font: normal 22px/1.3 "Trebuchet MS", "Lucida Grande", sans-serif; margin: 6px 0 4px; }
#content .post h1 a, #content .post h2 a { color: #fff; text-decoration: none; }
#content .post h1 a:hover, #content .post h2 a:hover { color: #D5F3FF; }
#content .archive-title { font: normal 18px "Trebuchet MS", sans-serif; color: #42adfb; margin: 4px 0 18px; }
.post-meta, .tags { font-size: 11px; color: #999; margin: 0 0 8px; }
.post-meta a, .tags a { color: #999; }
.tags { margin-top: 12px; }
#content p, #content .post ul li { margin-right: 0; text-align: left; }
#content .post img { max-width: 100%; height: auto; }
#content figure.wp-caption { max-width: 100%; box-sizing: border-box; }
#content figure.wp-caption.alignleft { float: left; margin: 6px 14px 6px 0; }
#content figure.wp-caption.alignright { float: right; margin: 6px 0 6px 14px; }
#content figure.wp-caption.aligncenter { margin: 10px auto; }
#content figcaption.wp-caption-text { font-size: 11px; line-height: 17px; color: #000; margin: 6px 10px 8px; }
.video { position: relative; max-width: 560px; margin: 12px 0; }
.video iframe { max-width: 100%; }
.lost, .lost-img { color: #777; font-size: 11px; font-style: italic; }
.lost-img { display: inline-block; border: 1px dashed #444; padding: 6px 8px; margin: 6px 0; }
.closed { color: #777; font-size: 11px; }
.entry::after { content: ""; display: block; clear: both; }
.nextprevious { display: flex; justify-content: space-between; align-items: center; font-size: 12px; padding: 10px 0; }
.nextprevious a { color: #ccc; }
.nextprevious .pageno { color: #666; order: 2; }
.nextprevious .left { order: 1; } .nextprevious .right { order: 3; }

/* sidebar */
#sidebar { float: left; padding-right: 20px; box-sizing: border-box; }
#sidebar h2 { color: #fff; margin-top: 18px; }
#sidebar ul.archives { columns: 2; }
#sidebar #searchform { display: flex; gap: 4px; }
#sidebar #s { flex: 1; min-width: 0; padding: 5px; background: #111; color: #fff; border: 1px solid #333; }
#sidebar #searchsubmit { padding: 5px 8px; background: #222; color: #ccc; border: 1px solid #333; cursor: pointer; }
#sidebar #footer { margin-top: 24px; }
#results li { margin-bottom: 8px; font-size: 13px; }
#results li span { color: #777; font-size: 11px; margin-left: 6px; }

/* phones and small tablets */
@media (max-width: 980px) {
  #wrapper { width: auto; padding: 0 16px; }
  #imageMenu { width: auto; height: auto; overflow-x: auto; padding: 6px 0 14px; -webkit-overflow-scrolling: touch; }
  #imageMenu ul { width: max-content; height: auto; }
  #imageMenu ul li a, #imageMenu ul:hover li a, #imageMenu ul li:hover a { width: 160px; height: 100px; }
  #content { float: none; width: auto; }
  #sidebar { float: none; width: auto; padding-right: 0; border-top: 3px solid #333; margin-top: 10px; }
}
@media (max-width: 600px) {
  #welcomeheading a { font-size: 30px; }
  #content figure.wp-caption.alignleft, #content figure.wp-caption.alignright { float: none; margin: 10px 0; }
}
.added-video { margin: 18px 0; }
.added-video figcaption { font-size: 11px; color: #999; margin-top: 4px; }
.restored-note { color: #666; }