/* Skin: "frames" — c.2001-2003 frameset brochure. Visible frame borders, a top
   banner, a left nav frame with a faux scrollbar, beveled grey, Verdana. */
.skin-frames { background: #6b7f99; background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.04) 0 6px, transparent 6px 12px); }
.skin-frames .viewport { background: #c3c7cc; }
.skin-frames .site { font-family: Verdana, Geneva, Arial, sans-serif; border: 3px solid; border-color: #fff #808080 #808080 #fff; background: #c3c7cc; }

/* Top banner frame */
.skin-frames .masthead { background: #336699; color: #fff; padding: 16px 20px; border-bottom: 4px ridge #aab2bc; }
.skin-frames .brand { margin: 0; font: bold 30px Georgia, "Times New Roman", serif; letter-spacing: 1px; text-shadow: 1px 1px 2px rgba(0,0,0,.4); }
.skin-frames .tag { margin: 4px 0 0; font-size: 16px; color: #cfe0f0; }
.skin-frames .beta { display: none; }

/* Two frames: nav (with faux scrollbar) + content */
.skin-frames .layout { display: flex; align-items: stretch; }
.skin-frames .framenav { position: relative; flex: 0 0 168px; background: #dfe3e8; border-right: 4px ridge #aab2bc; padding: 14px 24px 40px 12px; }
.skin-frames .framenav::after { content: "\25B2\A\25BC"; white-space: pre; position: absolute; top: 0; right: 0; bottom: 0; width: 16px; background: #cdd2d8; border-left: 1px solid #aab2bc; color: #6a7480; font-size: 9px; text-align: center; line-height: 16px; }
.skin-frames .navtitle { margin: 0 0 8px; font: bold 12px Verdana; color: #336699; text-transform: uppercase; letter-spacing: 1px; }
.skin-frames .framenav ul { list-style: none; margin: 0; padding: 0; }
.skin-frames .framenav li { font-size: 13px; color: #1f3f5f; padding: 5px 4px; border-bottom: 1px solid #c6ccd3; cursor: default; }
.skin-frames .framenav li:hover { background: #cdd6df; color: #cc3300; }

.skin-frames .content { flex: 1; min-width: 0; background: #fff; border: 2px inset #aab2bc; margin: 8px; padding: 16px 22px 24px; }
.skin-frames .content p { font-size: 16px; line-height: 1.65; color: #2b2b2b; margin: 0 0 1em; }
.skin-frames .content h2 { font: bold 20px Verdana; color: #336699; margin: 1.3em 0 .4em; border-bottom: 1px solid #ccd3da; padding-bottom: 3px; }
.skin-frames .content a, .skin-frames .period-links a { color: #cc3300; }
.skin-frames .content a:visited { color: #993300; }
.skin-frames .period-links { font-size: 15px; margin: 0 0 14px; }

.skin-frames .inline img, .skin-frames .tile img { border: 2px solid; border-color: #fff #888 #888 #fff; max-width: 100%; height: auto; display: block; background: #fff; padding: 2px; }
.skin-frames .inline figcaption, .skin-frames .tile figcaption { font-size: 13px; color: #555; margin-top: 4px; }
.skin-frames .period-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(135px, 1fr)); gap: 10px; margin-top: 16px; }
.skin-frames .tile { margin: 0; }

.skin-frames .period-foot { background: #eaeef2; border-top: 4px ridge #aab2bc; color: #5a6675; font-size: 12px; padding: 12px 20px; text-align: center; }
.skin-frames .period-foot::before { content: "Best viewed in Internet Explorer 5+ at 800\00D7600  \00B7  "; }

@media (max-width: 640px) { .skin-frames .layout { display: block; } .skin-frames .framenav { border-right: 0; border-bottom: 4px ridge #aab2bc; } }