/* SoloScape public site shell — 1:1 replica of the 2006-era RuneScape
   portal stylesheets (basic-3.css + main/title-5.css), with asset paths
   rewired to /img/site. Used on the public landing pages so the front of
   the website is a pixel-faithful mirror of 2006-era RuneScape's portal.

   Sources: open-source 2006-era RuneScape fan reconstructions
   (CC BY-NC-SA 3.0 / fair use as a fan tribute, see docs/LEGAL.md).
*/

/* ---------- basic-3.css ---------- */

body.site2006 {
  background: black;
  color: white;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  background-image: url('/img/site/bg2.jpg');
  background-position: top center;
  background-repeat: repeat-y;
  text-align: center;
  margin: 0;
}

body.site2006 #report_back {
  margin: 3px;
  background-color: #382418;
  border: 1px solid yellow;
}

body.site2006 #mod_controls {
  text-align: center;
  padding: 6px;
  width: 95%;
  margin-left: auto;
  margin-right: auto;
  border: 2px solid #382418;
  background-color: black;
}

body.site2006 .donor_only {
  border: 1px dotted white;
  margin-top: 2px;
  margin-bottom: 2px;
  padding: 3px;
}

body.site2006 #mod_controls form {
  margin: 0;
  padding: 0;
  display: inline;
}

body.site2006 #mod_controls form.submit {
  background-color: grey;
  border: 1px solid black;
}

body.site2006 #report_back tr {
  margin: 2px;
}

body.site2006 #admin_crown_bg {
  margin-top: 2px;
  background: url('/img/site/title2/icon_crown_gold.gif') no-repeat;
  align: left;
}
body.site2006 .admin_crown_text {
  margin: 2px 0 0 0;
  padding: 0;
}

body.site2006 div#body {
  width: 765px;
  margin: 10px auto 10px auto;
  text-align: left;
  position: relative;
}

body.site2006 div,
body.site2006 td {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
}
body.site2006 a:hover { text-decoration: underline; }
body.site2006 img { border: 0; }
body.site2006 img a:hover { text-decoration: none; }

body.site2006 .titleframe {
  width: 500px;
  margin-left: auto;
  margin-right: auto;
  padding: 4px;
  text-align: center;
}
body.site2006 .frame {
  width: 753px;
  margin-left: auto;
  margin-right: auto;
  padding: 4px;
}
body.site2006 .tandc {
  clear: both;
  font-size: 11px;
  text-align: center;
}
body.site2006 .scroll { color: black; }
body.site2006 .heading { text-align: center; margin: 6px; }
body.site2006 .heading span {
  width: 125px;
  margin: 0 auto;
  display: block;
  background-image: url('/img/site/smbrownback.jpg');
  border: 3px solid #3E3B23;
  border-top: 3px solid #7C774A;
  border-left: 3px solid #7C774A;
  background-color: #4D422E;
  padding: 3px 10px 3px 10px;
}

body.site2006 a { color: #90c040; text-decoration: none; }
body.site2006 .scroll a { color: #7B4F17; font-weight: bold; }
body.site2006 .e { border: 2px solid #382418; background-color: black; }
body.site2006 .wide_e { border: 2px solid #382418; background-color: black; }

body.site2006 #black_fields .button,
body.site2006 #black_fields .input {
  background-color: black;
  color: white;
  border: 1px solid #3E3B23;
}

body.site2006 div.horizontalscroll {
  width: 765px;
  height: 159px;
  overflow: hidden;
  margin: 5px 0;
  background-color: #C2AB79;
  background-image: url('/img/site/scroll/horizontal_scroll.gif');
  position: relative;
}
body.site2006 div.horizontalscroll-content {
  margin: 15px 40px;
  color: #000;
  position: relative;
}

body.site2006 div.widescroll {
  width: 735px;
  background-color: #C2AB79;
  margin: 0 10px 0 15px;
  position: relative;
}
body.site2006 div.widescroll-bgimg {
  width: 745px;
  position: relative;
  margin: 0 -5px;
  background-image: url('/img/site/scroll/backdrop_745.gif');
  background-repeat: repeat-y;
}
body.site2006 div.widescroll-content {
  padding: 25px 10px;
  color: #000;
  position: relative;
  margin: 0 5px;
}
body.site2006 img.widescroll-top {
  position: relative;
  top: 25px;
  padding: 0;
  margin: 0;
  z-index: 100;
  display: block;
}
body.site2006 img.widescroll-bottom {
  position: relative;
  padding: 0;
  margin: 0;
  top: -25px;
  display: block;
}
body.site2006 div.widescroll-content a,
body.site2006 div.horizontalscroll-content a,
body.site2006 div.narrowscroll-content a {
  color: #1f4f78;
  font-weight: bold;
  text-decoration: underline;
}
body.site2006 div.widescroll-content a:hover,
body.site2006 div.horizontalscroll-content a:hover,
body.site2006 div.narrowscroll-content a:hover {
  color: #0f2f4d;
}

body.site2006 div.narrowscroll-bgimg {
  width: 457px;
  position: relative;
  margin: 0 -5px;
  background-image: url('/img/site/scroll/scroll457t.gif');
  background-repeat: repeat-y;
}
body.site2006 div.narrowscroll-bg {
  width: 447px;
  background-color: #C2AB79;
  margin-left: 10px;
}
body.site2006 div.narrowscroll-content {
  padding: 25px 10px;
  color: #000;
  position: relative;
  margin: 0 5px;
}
body.site2006 div.narrowscroll-content td { color: black; }
body.site2006 img.narrowscroll-top {
  position: relative;
  top: 25px;
  padding: 0;
  margin: 0;
  z-index: 100;
  display: block;
}
body.site2006 img.narrowscroll-bottom {
  position: relative;
  padding: 0;
  margin: 0;
  top: -25px;
  display: block;
}
body.site2006 .narrowscroll-content img,
body.site2006 .narrowscroll-content p,
body.site2006 .widescroll img,
body.site2006 .widescroll p,
body.site2006 .horizontalscroll img,
body.site2006 .horizontalscroll p {
  max-width: 100%;
}

/* ---------- title-5.css ---------- */

body.site2006 .topimg { margin-left: 10px; width: 200px; height: 100px; }
body.site2006 .left { float: left; }
body.site2006 .right { text-align: right; }
body.site2006 fieldset { background-color: black; }
body.site2006 fieldset.menu {
  border: 2px solid #382418;
  width: 260px;
  margin: 0 0 10px 0;
  display: block;
  padding: 0 5px 5px 5px;
  background-position: bottom right;
  background-repeat: no-repeat;
}
body.site2006 fieldset.menu.rs   { background-image: url('/img/site/title2/rsicon.gif'); }
body.site2006 fieldset.menu.help { background-image: url('/img/site/title2/gamehelp.gif'); }
body.site2006 fieldset.menu.poll { background-image: url('/img/site/title2/poll.gif'); }
body.site2006 fieldset.menu.web  { background-image: url('/img/site/title2/webfeat.gif'); }
body.site2006 fieldset.menu.mem  { background-image: url('/img/site/title2/membership.gif'); }
body.site2006 fieldset.menu.store { background-image: url('/img/site/title2/accman.gif'); }
body.site2006 fieldset.menu.acc  { background-image: url('/img/site/title2/accman.gif'); }
body.site2006 fieldset.menu.rec  { background-image: url('/img/site/title2/accrec.gif'); }
body.site2006 fieldset.menu.pmod { background-image: url('/img/site/title2/pmod.gif'); }
body.site2006 fieldset.menu.knowledge { background-image: url('/img/site/title2/gamehelp.gif'); }
body.site2006 fieldset.menu.server { background-image: none; }
body.site2006 fieldset.menu legend { font-weight: bold; color: white; }
body.site2006 fieldset.menu ul { padding: 0; margin: 0; }
/* Sidebar list rows. Switched from `list-style-image` (which docks the marker
 * to the text baseline → icons appear to sit *below* the text) to a
 * background-image approach with `background-position: 0 50%`, so each
 * icon's vertical center aligns with the text's vertical center regardless of
 * the icon's intrinsic height. The per-class `.i-*` rules below set the
 * background-image; this base rule pins position, padding, and row height so
 * density doesn't change. */
body.site2006 fieldset.menu ul li {
  list-style: none;
  width: 220px;
  min-height: 18px;
  line-height: 18px;
  padding: 0 0 0 24px;
  background-repeat: no-repeat;
  background-position: 0 50%;
}

body.site2006 fieldset.menu ul li.i-profile  { background-image: url('/img/site/title2/silverkey.png'); }
body.site2006 fieldset.menu ul li.i-crown    { background-image: url('/img/site/title2/icon_crown_gold_pad.png'); }
body.site2006 fieldset.menu ul li.i-create   { background-image: url('/img/site/title2/create.gif'); }
body.site2006 fieldset.menu ul li.i-play     { background-image: url('/img/site/title2/play.gif'); }
body.site2006 fieldset.menu ul li.i-screen   { background-image: url('/img/site/title2/screenshot.gif'); }
body.site2006 fieldset.menu ul li.i-discord  { background-image: url('/img/site/title2/discord.gif'); }
body.site2006 fieldset.menu ul li.i-download { background-image: url('/img/site/title2/download.gif'); }
body.site2006 fieldset.menu ul li.i-beta     { background-image: url('/img/site/title2/beta.gif'); }
body.site2006 fieldset.menu ul li.i-globe    { background-image: url('/img/site/title2/globe.gif'); }
body.site2006 fieldset.menu ul li.i-answer   { background-image: url('/img/site/title2/get_answer.gif'); }
body.site2006 fieldset.menu ul li.i-started  { background-image: url('/img/site/title2/get_started.gif'); }
body.site2006 fieldset.menu ul li.i-about    { background-image: url('/img/site/title2/manual.gif'); }
body.site2006 fieldset.menu ul li.i-rules    { background-image: url('/img/site/title2/rules.gif'); }
body.site2006 fieldset.menu ul li.i-manual   { background-image: url('/img/site/title2/manual.gif'); }
body.site2006 fieldset.menu ul li.i-quest    { background-image: url('/img/site/title2/questhelp.gif'); }
body.site2006 fieldset.menu ul li.i-parents  { background-image: url('/img/site/title2/parents_icon_small.gif'); }
body.site2006 fieldset.menu ul li.i-safety   { background-image: url('/img/site/title2/safety_guidelines.gif'); }
body.site2006 fieldset.menu ul li.i-support  { background-image: url('/img/site/title2/customer_support.gif'); }
body.site2006 fieldset.menu ul li.i-comment  { background-image: url('/img/site/title2/quill.gif'); }
body.site2006 fieldset.menu ul li.i-sources  { background-image: url('/img/site/title2/manual.gif'); }
body.site2006 fieldset.menu ul li.i-bug      { background-image: url('/img/site/title2/report_bug.gif'); }
body.site2006 fieldset.menu ul li.i-vote     { background-image: url('/img/site/title2/vote.gif'); }
body.site2006 fieldset.menu ul li.i-polls    { background-image: url('/img/site/title2/vote_grey.gif'); }
body.site2006 fieldset.menu ul li.i-world    { background-image: url('/img/site/title2/worldmap.gif'); }
body.site2006 fieldset.menu ul li.i-twitter  { background-image: url('/img/site/title2/github.gif'); }
body.site2006 fieldset.menu ul li.i-youtube  { background-image: url('/img/site/title2/github.gif'); }
body.site2006 fieldset.menu ul li.i-score    { background-image: url('/img/site/title2/hiscore.gif'); }
body.site2006 fieldset.menu ul li.i-forum    { background-image: url('/img/site/title2/comment.gif'); }
body.site2006 fieldset.menu ul li.i-story    { background-image: url('/img/site/title2/stories.gif'); }
body.site2006 fieldset.menu ul li.i-files    { background-image: url('/img/site/title2/extra_files.gif'); }
body.site2006 fieldset.menu ul li.i-shop     { background-image: url('/img/site/title2/shop.gif'); }
body.site2006 fieldset.menu ul li.i-bond     { background-image: url('/img/site/title2/bond.png'); }
body.site2006 fieldset.menu ul li.i-admin    { background-image: url('/img/site/title2/icon_crown_gold_pad.png'); }
body.site2006 fieldset.menu ul li.i-admin,
body.site2006 fieldset.menu ul li.i-pmod {
  background-size: 19px 16px;
  background-position: 0 50%;
}
body.site2006 fieldset.menu ul li.i-admin {
  background-position: -2px 0;
}
/* Forum Moderator (green M crown) — sidebar icon for the fieldset.menu list. */
body.site2006 fieldset.menu ul li.i-fmod     { background-image: url('/img/site/title2/icon_crown_green_pad.png'); }
body.site2006 fieldset.menu ul li.i-wiki     { background-image: url('/img/site/title2/stories.gif'); }
body.site2006 fieldset.menu ul li.i-member   { background-image: url('/img/site/title2/membership_benefits.gif'); }
body.site2006 fieldset.menu ul li.i-sub      { background-image: url('/img/site/title2/dollar.gif'); }
body.site2006 fieldset.menu ul li.i-subext   { background-image: url('/img/site/title2/dollar_plus.gif'); }
body.site2006 fieldset.menu ul li.i-subcan   { background-image: url('/img/site/title2/dollar_grey.gif'); }
body.site2006 fieldset.menu ul li.i-msg      { background-image: url('/img/site/title2/messages.gif'); }
body.site2006 fieldset.menu ul li.i-pw       { background-image: url('/img/site/title2/password.gif'); }
body.site2006 fieldset.menu ul li.i-recset   { background-image: url('/img/site/title2/set_recovery.gif'); }
body.site2006 fieldset.menu ul li.i-reccan   { background-image: url('/img/site/title2/cancel_recovery.gif'); }
body.site2006 fieldset.menu ul li.i-rec      { background-image: url('/img/site/title2/recover.gif'); }
body.site2006 fieldset.menu ul li.i-track    { background-image: url('/img/site/title2/track.gif'); }
body.site2006 fieldset.menu ul li.i-appeal   { background-image: url('/img/site/title2/appeal_ban.gif'); }
body.site2006 fieldset.menu ul li.i-pmod     { background-image: url('/img/site/title2/pmod_icon.gif'); }
body.site2006 fieldset.menu ul li.i-key      { background-image: url('/img/site/title2/silverkey.png'); }
body.site2006 fieldset.menu ul li.i-bot      { background-image: url('/img/site/title2/bot_robot.svg'); background-position: -1px 50%; }
body.site2006 fieldset.menu ul li.cs-upgrades-first { margin-top: 2px; }

body.site2006 .news dd { padding: 0 0 1em 0; margin: 0; height: 50px; }
body.site2006 dl.news > dd { height: auto; min-height: 50px; }
body.site2006 .news dt { font-weight: bold; clear: right; }
body.site2006 .newsdate { float: right; }
body.site2006 .news a { margin-top: 0.5em; }
body.site2006 .news a.cs-readmore {
  color: #7B4F17;
  font-weight: bold;
  text-decoration: underline;
}
body.site2006 .news a.cs-readmore:hover { color: #5a3a14; }
body.site2006 .newscontainer { margin-left: 290px; margin-bottom: 110px; }

body.site2006 fieldset.menu.server ul li {
  width: 232px;
  color: #ddd;
}
body.site2006 fieldset.menu.server .cs-server-label {
  display: inline-block;
  min-width: 54px;
  color: #fff;
}
body.site2006 fieldset.menu.server .cs-server-value,
body.site2006 fieldset.menu.server .cs-server-online {
  color: #80ff80;
  font-weight: bold;
}
body.site2006 fieldset.menu.server .cs-server-offline {
  color: #ff8060;
  font-weight: bold;
}
body.site2006 fieldset.menu.server .cs-server-muted { color: #b8a88a; }
body.site2006 fieldset.menu.server .cs-server-address {
  overflow-wrap: anywhere;
  word-break: break-word;
}

body.site2006 .buttons {
  width: 457px;
  height: 110px;
  position: relative;
  margin: 0;
}
body.site2006 .buttons a {
  display: block;
  position: absolute;
  width: 180px;
  height: 80px;
  margin: 5px;
  background: #808080;
  font-weight: bold;
  color: white;
  text-align: center;
  border: 5px outset #909090;
}
body.site2006 .buttons a:hover { background: #A0A0A0; border-color: #ffffff; }
body.site2006 #button-left { left: 15px; top: 0; }
body.site2006 #button-left span.lev1 { background-image: url('/img/site/title2/doublebutton_create2.png'); }
body.site2006 #button-right { right: 15px; top: 0; }
body.site2006 #button-right span.lev1 { background-image: url('/img/site/title2/doublebutton_play2.png'); }
body.site2006 #button-left span.beta { background-image: url('/img/site/title2/doublebutton_beta.gif'); }
body.site2006 span.lev1,
body.site2006 span.beta {
  display: block;
  cursor: pointer;
  position: absolute;
  top: -10px;
  left: -10px;
  width: 200px;
  height: 100px;
}
body.site2006 a:hover span.lev1 { background-position: 0 100px; }
body.site2006 a:hover span.beta { background-position: 0 100px; }

/* ============================================================
 * R2620 — Special XP Event banner. Thin gold-bordered ribbon,
 * black background, gold text, animated star pulse on the left.
 * Mirrors the OSRS-2006 brown/gold theme so it sits naturally
 * above the news scroll on the homepage and above #body on the
 * shared chrome.
 * ============================================================ */
.cs-xp-event-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 466px;
  margin: 0 auto 6px auto;
  padding: 6px 12px;
  background: #0c0a07;
  color: #ffd470;
  border: 2px solid #c9a44a;
  box-shadow: 0 0 0 1px #382418, 0 0 8px rgba(201,164,74,0.35);
  font-family: arial, sans-serif;
  font-size: 12px;
  font-weight: bold;
  text-shadow: 0 1px 0 #000;
}
.cs-xp-event-banner__icon {
  color: #ffd470;
  font-size: 16px;
  line-height: 1;
  animation: cs-xpe-pulse 1.4s ease-in-out infinite;
}
@keyframes cs-xpe-pulse {
  0%, 100% { transform: scale(1);   text-shadow: 0 0 4px #ffd470; }
  50%      { transform: scale(1.3); text-shadow: 0 0 12px #fff8c2, 0 0 4px #ffd470; }
}
.cs-xp-event-banner__title { flex: 1; color: #ffd470; }
.cs-xp-event-banner__countdown {
  color: #ffbb22;
  background: #1c1610;
  border: 1px solid #5a3a14;
  padding: 1px 6px;
  font-variant-numeric: tabular-nums;
  font-size: 11px;
}

/* Wider banner inside the in-game / forums chrome where #body is wider
 * than the homepage 466px scroll. */
body:not(.site2006-home) .cs-xp-event-banner {
  width: auto;
  max-width: 900px;
}

/* ============================================================
 * Period-authentic shared primitives — appended for the 2007
 * uplift pass (hiscores, forums, membership, profile, rules).
 *
 * These rules sit on top of `.frame.wide_e` so they only apply
 * inside the brown-bordered chrome panels.
 * ============================================================ */

/* Cream/brown zebra-striped table — meant to look at home in the
 * 2006 chrome. Used by hiscores, forum thread lists, profile
 * skills panel, and any other tabular data we surface. */
body.site2006 table.cs-stripe-table {
  width: 100%;
  border-collapse: collapse;
  background-color: #efe1c0;
  color: #2e1a0a;
  border: 2px solid #5a3a14;
  font-family: arial, helvetica, sans-serif;
  font-size: 12px;
}
body.site2006 table.cs-stripe-table thead tr {
  background-color: #c9a44a;
  color: #2e1a0a;
}
body.site2006 table.cs-stripe-table thead th {
  padding: 5px 8px;
  border-bottom: 2px solid #5a3a14;
  border-right: 1px solid #8a6a30;
  text-align: left;
  font-weight: bold;
}
body.site2006 table.cs-stripe-table thead th:last-child { border-right: 0; }
body.site2006 table.cs-stripe-table tbody tr:nth-child(odd)  { background-color: #efe1c0; }
body.site2006 table.cs-stripe-table tbody tr:nth-child(even) { background-color: #dcc28a; }
body.site2006 table.cs-stripe-table tbody td {
  padding: 4px 8px;
  border-bottom: 1px solid #b89a5a;
  color: #2e1a0a;
}
body.site2006 table.cs-stripe-table tbody tr:hover { background-color: #f5e8c2; }
body.site2006 table.cs-stripe-table a { color: #7B4F17; font-weight: bold; }
body.site2006 table.cs-stripe-table a:hover { color: #5a3a14; text-decoration: underline; }

/* 745-px-wide scroll wrapper, now built from the period-authentic Jagex
 * edge tiles shipped at /img/site/edge_*.jpg rather than the invented
 * scroll745 GIFs. The original Jagex chrome was a 9-slice composed of:
 *
 *   edge_a  (100x43) — top-left corner cap        // role inferred from size
 *   edge_c  (400x42) — top horizontal band, repeats-x along the top edge
 *   edge_d  (100x43) — top-right corner cap (mirrors edge_a dimensions)
 *   edge_g2 (100x77) — bottom-left scroll roll (taller — the curled end)
 *   edge_h2 (100x77) — bottom-right scroll roll
 *   blk.gif          — 1x1 cream/black tile, used as the centre fill colour
 *
 * No dedicated left/right edge tile shipped, so the vertical sides reuse
 * the centre cream backdrop colour (#C2AB79) — period screenshots show the
 * sides as a flat parchment fill anyway, with the visual interest carried
 * by the corner caps and bottom rolls.
 *
 * TODO: tile role unverified visually — guesses are based purely on file
 * dimensions and conventional 2006 Jagex edge-tile naming. If a/d turn out
 * to be left/right verticals instead of top corners, swap their slots.
 *
 * Markup contract (unchanged) so existing pages keep working:
 *   <div class="cs-scroll745">
 *     <img class="cs-scroll745-top">    (kept for back-compat, now hidden)
 *     <div class="cs-scroll745-bgimg">
 *       <div class="cs-scroll745-bg">
 *         <div class="cs-scroll745-content"> ...content... </div>
 *       </div>
 *     </div>
 *     <img class="cs-scroll745-bottom"> (kept for back-compat, now hidden)
 *   </div>
 */
body.site2006 .cs-scroll745 {
  width: 745px;
  margin: 0 auto;
  position: relative;
  background-color: #C2AB79;
  /* Top edge: edge_c (400x42) tiles horizontally. Inset 100px on each side
   * so the corner caps (edge_a / edge_d) sit cleanly over the ends. */
  background-image:
    url('/img/site/edge_a.jpg'),
    url('/img/site/edge_d.jpg'),
    url('/img/site/edge_c.jpg'),
    url('/img/site/edge_g2.jpg'),
    url('/img/site/edge_h2.jpg');
  background-position:
    left top,
    right top,
    100px top,
    left bottom,
    right bottom;
  background-repeat:
    no-repeat,
    no-repeat,
    repeat-x,
    no-repeat,
    no-repeat;
  /* Reserve the corner-cap height up top and the scroll-roll height at the
   * bottom so content never overlaps the chrome. */
  padding: 43px 0 77px 0;
}
body.site2006 .cs-scroll745-bgimg {
  width: 745px;
  position: relative;
  margin: 0;
  background-color: #C2AB79;
}
body.site2006 .cs-scroll745-bg {
  width: 725px;
  background-color: #C2AB79;
  margin: 0 auto;
}
body.site2006 .cs-scroll745-content {
  padding: 8px 14px;
  color: #000;
  position: relative;
}
body.site2006 .cs-scroll745-content td,
body.site2006 .cs-scroll745-content p { color: #000; }
/* Legacy <img> caps — kept in markup for back-compat, no longer rendered.
 * The chrome is now drawn entirely from the .cs-scroll745 background layers
 * above. */
body.site2006 img.cs-scroll745-top,
body.site2006 img.cs-scroll745-bottom {
  display: none;
}
/* When the caller only nests a single direct child (e.g. a stripe
 * table) inside `.cs-scroll745` without the bg/content wrappers,
 * we still want the cream backdrop + a sensible inner padding. */
body.site2006 .cs-scroll745 > table.cs-stripe-table {
  margin: 0;
  width: 100%;
}

/* Period-style hero band used by membership/hiscores/rules pages
 * to host the centred legend image. Soft cream backdrop matching
 * the cs-stripe-table palette. */
body.site2006 .cs-page-hero-band {
  text-align: center;
  padding: 8px 0;
  margin: 0 0 8px 0;
  background-color: #efe1c0;
  border: 2px solid #5a3a14;
}
body.site2006 .cs-page-hero-band img { max-width: 100%; height: auto; }

/* ============================================================
 * Shared uplift chrome for inner pages (rules, disclaimer,
 * world map, quests, messages, friends...). Adds the homepage's
 * centered hero banner + Cinzel page title + a left fieldset
 * sidebar / right scroll-content layout inside .frame.wide_e.
 * Reused from app/Views/pages/*.php.
 * ============================================================ */
body.site2006 .cs-uplift-hero { text-align: center; margin: 6px 0 10px; }
body.site2006 .cs-uplift-hero h1 {
  font-family: 'Cinzel', Georgia, serif;
  color: #ffd470;
  font-size: 22pt;
  margin: 6px 0 4px;
  letter-spacing: 0.04em;
  text-shadow: 0 2px 0 #1f140a;
}
body.site2006 .cs-uplift-layout::after { content: ''; display: block; clear: both; }
body.site2006 .cs-uplift-right { margin-left: 290px; }
body.site2006 fieldset.menu ul li.cs-active a { color: #ffd470; font-weight: bold; }
/* Period scroll wrapper for body content. Cream parchment with the same
 * edge-tile borders as .cs-scroll745 but auto-width so it nests in our
 * narrower right column inside .frame.wide_e. */
body.site2006 .cs-uplift-scroll {
  position: relative;
  background-color: #efe1c0;
  border: 2px solid #5a3a14;
  border-radius: 0;
  padding: 14px 18px;
  color: #1f140a;
  margin: 0 0 10px 0;
}
body.site2006 .cs-uplift-scroll h1,
body.site2006 .cs-uplift-scroll h2,
body.site2006 .cs-uplift-scroll h3 {
  font-family: 'Cinzel', Georgia, serif;
  color: #5a3a14;
}
body.site2006 .cs-uplift-scroll a {
  color: #1f4f78;
  font-weight: bold;
  text-decoration: underline;
}
body.site2006 .cs-uplift-scroll a:hover { color: #0f2f4d; }
body.site2006 .cs-uplift-scroll p,
body.site2006 .cs-uplift-scroll li,
body.site2006 .cs-uplift-scroll td { color: #1f140a; }
body.site2006 .cs-uplift-scroll ol,
body.site2006 .cs-uplift-scroll ul { color: #1f140a; }