/* This is the default theme for dawnstar - in progress from wolfhax */
@charset "utf-8";
@font-face {
    font-family: 'RedHatMono';
    src: url('https://dawnstar.ca/styles/fonts/RedHatMono-Regular.ttf');
    font-style: normal;
}
@font-face {
    font-family: 'RedHatMonoBold';
    src: url('https://dawnstar.ca/styles/fonts/RedHatMono-Bold.ttf');
    font-weight: Bold;
    font-style: normal;
}
/* ── EMOJI ───────────────────────────────────────────────────────────────────
   COLOUR BY DEFAULT; MONOCHROME ONLY WHERE WE ASK FOR IT (owner, 2026-08-09).

   Two faces, same codepoint range, different jobs:

     'Emoji'      colour. The default, inherited from body. A colour emoji font
                  (COLR/CBDT) carries its own palette and IGNORES `color:` — you
                  cannot tint it, which is exactly right for the default case.

     'EmojiMono'  the bundled monochrome Noto Emoji. Ordinary outline glyphs, so
                  they DO take `color:`. This is the opt-in exception — use the
                  .emojiMono class to hold an emoji black, or tint it to match
                  the theme. See the class below.

   WHY unicode-range AT ALL. Both faces used to be named first in a handful of
   per-element rules as `font-family: 'NotoEmoji', Helvetica, sans-serif`, which
   asks for the emoji font on EVERY character in the element. That only appeared
   to work because the emoji-only build has no Latin glyphs, so letters fell
   through by accident — and it meant those elements could never be given a
   custom text face, since the emoji font sat ahead of everything. Scoping by
   codepoint lets the face sit first in the GLOBAL stack harmlessly: the browser
   consults it only for emoji, and every other character falls through.

   MULTILANG SAFETY. Hebrew (U+0590-05FF), Arabic (U+0600-06FF, U+FB50-FDFF,
   U+FE70-FEFF), Cyrillic, Greek, Devanagari and CJK all fall OUTSIDE the range,
   so adding scripts later cannot collide with this. Two deliberate exclusions:

     * U+2190-21FF (Arrows) is NOT captured — typographic characters that belong
       to running text, not emoji, and this matters more once there is prose in
       other scripts.
     * U+2726 (✦, the header star) is NOT captured — hence the split
       `U+2600-2725, U+2727-27BF`. It is chrome, and keeps the text face.

   The BMP blocks ARE captured either side of that gap, because the chat picker
   uses four emoji living there: ☕ U+2615, ❄ U+2744, ❤ U+2764, ⭐ U+2B50
   (dawnstar/js/council-ui.js). U+200D (ZWJ) and U+FE0F (VS16) must be in range
   or multi-codepoint sequences — families, professions, skin tones — break into
   their components. U+20E3 is the keycap combiner.

   ── THE ONE FILE STILL MISSING ──
   The repo ships Noto Emoji MONOCHROME only (verified: no CBDT/COLR/sbix). So
   colour currently comes from whatever the VISITOR's OS provides, which is why
   emoji show colour on Windows 10 (Segoe UI Emoji) but not on the Slackware box
   (no colour emoji font installed).

   To get colour everywhere regardless of OS, drop a Noto Color Emoji build at
   dawnstar/styles/fonts/NotoColorEmoji.woff2 (COLRv1, ~1.5MB). NO CSS CHANGE IS
   NEEDED — the url() is already in the src list below. Until that file exists it
   simply 404s and the browser falls through to the next source, so nothing is
   broken in the meantime.

   Order of preference, per character, first hit wins:
     local colour font (0 bytes)  ->  bundled colour  ->  bundled monochrome  */
@font-face {
    font-family: 'Emoji';
    src: local('Apple Color Emoji'),
         local('Segoe UI Emoji'),
         local('Noto Color Emoji'),
         local('Twemoji Mozilla'),
         url('/styles/fonts/NotoColorEmoji.woff2') format('woff2'),
         url('/styles/fonts/NotoEmoji-Regular.ttf') format('truetype');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    unicode-range:
        U+200D, U+20E3, U+FE0F,
        U+2600-2725,         /* misc symbols — ☕ ❄ … */
        U+2727-27BF,         /* …resumes after U+2726 ✦, which stays text */
        U+2B00-2BFF,         /* misc symbols & arrows — ⭐ */
        U+1F000-1FAFF;       /* the emoji planes proper */
}

/* The tintable one. Deliberately NO local() — we want the known monochrome
   outlines here, not whatever colour font the OS happens to have, because the
   whole point of this face is that `color:` works on it. */
@font-face {
    font-family: 'EmojiMono';
    src: url('/styles/fonts/NotoEmoji-Regular.ttf') format('truetype');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    unicode-range:
        U+200D, U+20E3, U+FE0F,
        U+2600-2725,
        U+2727-27BF,
        U+2B00-2BFF,
        U+1F000-1FAFF;
}

/* THE EXCEPTION. Put .emojiMono on any element whose emoji should stop being
   colour and start obeying `color:` — black, themed, tinted, whatever:

       <span class="emojiMono">🐺</span>                      inherits the colour
       <span class="emojiMono" style="color:#000">🐺</span>   forced black

   Applies to descendants too, so it can wrap a block. Everything that is not
   an emoji codepoint is unaffected either way — the text face still follows. */
.emojiMono, .emojiMono * {
    font-family: 'EmojiMono', 'RedHatMono', Helvetica, Arial, sans-serif;
}

/* ── ARTICLE SECTION ANCHORS + INLINE LINKS ──────────────────────────────────
   Every section rendered by poofsections() now carries id="s{sid}", so an
   article section is directly addressable:  /the-page.php#s42
   `sid` is used because it is already the section's identity AND is stable
   under reorder (reorder rewrites `ord`, never `sid`), so a citation URL
   published today still resolves after the article is rearranged.

   scroll-margin-top keeps the landed-on section clear of the header instead of
   flush against the viewport edge — the difference between "it jumped
   somewhere" and "it landed on the thing I linked". */
section[id^="s"] {
    scroll-margin-top: 5rem;
}

/* Bare URLs in article text become real anchors (ps_linkify). The GLOBAL a:link
   is colour #333 with text-decoration:none — deliberate for nav and chrome, but
   inside body copy it makes a link indistinguishable from the words around it.
   Citations have to be visibly clickable, so links inside article prose get the
   underline and colour back. Scoped to sections so nav and chrome are untouched. */
section[id^="s"] p a,
section[id^="s"] figcaption a {
    color: #9ecbff;
    text-decoration: underline;
    text-underline-offset: 2px;
}
section[id^="s"] p a:hover,
section[id^="s"] figcaption a:hover {
    color: #c9e2ff;
}

/* ── ARTICLE LINK PREVIEWS — .SiteArtFig / .VidArtFig ────────────────────────
   figtype is also the STYLING axis: a block emits .{Figtype}ArtFig and the
   stylesheet is what makes it look like anything (CLAUDE.md). Both were
   registered as figtypes long before their blocks existed, so the classes are
   new here even though the names are not.

   THE TWO ARE NOT ALIKE, because their content is not alike:

   .VidArtFig — a video IS AN ENTITY placed in the section (its own VID, its own
   `videos` row), exactly like an image. So its figpos is the COMPASS POSITION
   and the block emits TWO classes: "{figpos}ArtFig VidArtFig". The compass
   class does all the framing and floating — it is literally the image figure's
   own rule, so a video figure sits in the text exactly as an image does, and
   any restyle of the image figures carries to videos for free. .VidArtFig adds
   ONLY what a video needs on top: the poster, the play button, the player box.
   Do not give it width/float/border here — that would fight the compass class.

   .SiteArtFig — an external link is a REFERENCE, not a placed entity, so it
   keeps its URL in figpos and has no compass position to style from. It is a
   self-contained card, shaped after the chat card (.council-card in
   chatroom.php's <style>) so a link looks like the same object wherever it is
   pasted. Separate class because the chat rules live in a members-only inline
   <style> and an article renders for anonymous readers. */
.SiteArtFig {
    display: block;
    max-width: 34rem;
    margin: 0.6rem auto;
    padding: 0;
}

/* The link card: thumbnail beside the text, whole card clickable. */
.psLinkCard {
    display: flex;
    gap: 0.6rem;
    padding: 0.5rem;
    text-decoration: none;
    color: inherit;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid #3a3a55;
    border-radius: 8px;
}
.psLinkCard:hover {
    border-color: #5a5a80;
}
.psLinkCard-img {
    width: 84px;
    height: 84px;
    object-fit: cover;
    border-radius: 6px;
    flex: 0 0 auto;
}
.psLinkCard-box {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;   /* lets a long title actually wrap inside the flex row */
}
.psLinkCard-title {
    font-weight: 700;
}
.psLinkCard-desc {
    font-size: 0.9em;
    opacity: 0.85;
}
.psLinkCard-host {
    font-size: 0.8em;
    opacity: 0.6;
}

/* The video's own parts, riding on top of the compass class's frame. NOTHING
   third-party loads until the reader clicks — no iframe, no provider JS, no
   cookies — and the player we then build carries no autoplay parameter (the
   owner's rule). The poster is our own file, so scrolling past contacts nobody. */
.VidArtFig .psEmbed {
    position: relative;
    display: block;
    cursor: pointer;
    line-height: 0;
    border-radius: 8px;
    overflow: hidden;
}
.VidArtFig .psEmbed-thumb {
    display: block;
    width: 100%;
    height: auto;
}
.VidArtFig .psEmbed-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    line-height: 1;
    color: #fff;
    background: rgba(0, 0, 0, 0.62);
}
.VidArtFig .psEmbed:hover .psEmbed-play,
.VidArtFig .psEmbed:focus .psEmbed-play {
    background: rgba(255, 0, 51, 0.85);
}
.VidArtFig .psEmbed-frame {
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
    display: block;
}

/* Panel modal: rows of controls, grouped and labelled. */
.psPanelRow {
    justify-content: center;
    margin: 0.3rem 0;
}
.psModal-box .psModal-note + .psBtnRow {
    margin-top: 0.6rem;
}

/* ── TOPNAV: role panel + search buttons ─────────────────────────────────────
   Sit beside the account dropdown. They inherit #topsec's elevated stacking
   (z-index:500, overflow:visible — the fix made for the dropdown), so they
   need no z-index of their own. Slightly smaller than a content .btn so the
   header does not grow. */
.psNavBtns {
    display: inline-flex;
    gap: 0.25rem;
    align-items: center;
    vertical-align: middle;
}
.btn.navBtn {
    width: 28px;
    height: 28px;
    font-size: 14px;
}

/* ── MODAL HOST ──────────────────────────────────────────────────────────────
   Injected before the final </body>, so it is OUTSIDE #bodyWrap and outside
   every content wrapper. That placement is what makes `position: fixed` work:
   #article and #modarticle both carry backdrop-filter, which makes them the
   containing block for fixed descendants — a modal rendered inside either one
   is fixed to THAT BOX, not the viewport, and is also clipped by their
   overflow:hidden and trapped in their z-index:35 stacking context.

   z-index 1000 clears all page content (max 100) and the header (500/501), and
   stays well under the live overlays (9999–100001) — a ringing call must still
   cover a form. See docs/modals-and-buttons.md §1. */
#psModalHost {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
#psModalHost[hidden] { display: none; }

/* Lock the page behind the modal so scrolling the overlay does not scroll the
   article underneath it. */
.psModal-open, .psModal-open body { overflow: hidden; }

.psModal-scrim {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
.psModal[hidden] { display: none; }
.psModal {
    position: relative;   /* above the scrim, without needing a z-index war */
    max-width: 46rem;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;     /* the MODAL scrolls, never the page behind it */
}
.psModal-box {
    position: relative;
    padding: 1.2rem 1rem 1rem;
    background: rgba(225, 225, 225, 0.97);
    border-left: solid #666666 1px;
    border-right: solid #666666 1px;
    border-top: solid #dddddd 1px;
    border-bottom: solid #444444 1px;
    border-radius: 9px;
    box-shadow: -2px 3px 7px 3px rgba(0, 0, 0, 0.8);
}
.psModal-close {
    position: absolute;
    top: 0.4rem;
    right: 0.4rem;
}
.psModal-form {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
    justify-content: center;
}
.psModal-note {
    font-size: 0.85em;
    opacity: 0.8;
    margin-top: 0.6rem;
}

/* ── HASHTAGS on an article ──────────────────────────────────────────────────
   The article's keywords, rendered as tags. Each links to its tag page, so the
   row is navigation, not decoration — hence <nav>, and hence they read as
   links rather than as chrome.

   Sits between the share row and the "More.." gallery: after the thing you
   just read, before the suggestions, which is where a reader looks for "what
   else is like this". */
.artTags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0.4rem auto 0.8rem;
    max-width: 99%;
    justify-content: center;
}
.artTag {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    border: 1px solid #666666;
    border-radius: 999px;
    background: rgba(225, 225, 225, 0.9);
    font-family: 'RedHatMono', Helvetica, sans-serif;
    font-size: 0.85em;
    line-height: 1.5;
    text-decoration: none;
    white-space: nowrap;   /* a hashtag never wraps mid-word — it stops being one */
}
.artTag:hover,
.artTag:focus {
    border-color: #333333;
    background: rgba(255, 255, 255, 1);
}

@font-face {
    font-family: 'SourceCodeProBold';
    src: url('https://dawnstar.ca/styles/fonts/SourceCodePro-Bold.ttf') format('truetype');
    font-weight: Bold;
    font-style: normal;
}
@font-face {
    font-family: 'SourceCodePro';
    src: url('https://dawnstar.ca/styles/fonts/SourceCodePro-Regular.ttf') format('truetype');
    font-style: normal;
}

@-webkit-keyframes banner {
  0% {
    -webkit-transform: rotate(-360deg);
            transform: rotate(-360deg);
    -webkit-transform-origin: left;
            transform-origin: left;
    opacity: 0;
  }
  100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    -webkit-transform-origin: left;
            transform-origin: left;
    opacity: 1;
  }
}
@keyframes banner {
  0% {
    -webkit-transform: rotate(-360deg);
            transform: rotate(-360deg);
    -webkit-transform-origin: left;
            transform-origin: left;
    opacity: 0;
  }
  100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    -webkit-transform-origin: left;
            transform-origin: left;
    opacity: 1;
  }
}


@-webkit-keyframes topnav {
  0% {
    -webkit-transform: translateY(-1000px);
            transform: translateY(-1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}
@keyframes topnav {
  0% {
    -webkit-transform: translateY(-1000px);
            transform: translateY(-1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}


@keyframes jump {
  0% {
    -webkit-transform: translateY(3px);
    transform: translateY(3px);
  }
  50% {
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
  }
  100% {
    -webkit-transform: translateY(3px);
    transform: translateY(3px);
  }
}



* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  font-size: 1em;
}


a:link {
  color: #333333;
  text-decoration: none;
}
a:visited {
  color: #222222;
}
a:hover,
a:visited:hover {
  color: #444444;

}
a:active,
a:visited:active {
  color: #444444;
}

chat {
  color: #11ff11;
}

a:link chat,
a:visited chat,
a:hover chat,
a:visited:hover chat,
a:active chat,
a:visited:active chat {
  color: inherit;
}

h4, h5, h6 {
  font-weight: normal;
}



h1 {
color:rgba(210, 180, 210, 1.0);
font-family: 'SourceCodeProBold', Helvetica, sans-serif;
font-size: 1.5em;
}

h2 {
 color:rgba(210, 180, 210, 1.0);
 font-family: 'SourceCodeProBold', Helvetica, sans-serif;
 font-size: 1.3em;
}

h3 {
 color:rgba(210, 180, 210, 1.0);
 font-family: 'SourceCodeProBold', Helvetica, sans-serif;
 font-size: 1.2em;
}
h4 {
color:rgba(210, 180, 210, 1.0);
font-family: 'SourceCodePro', Helvetica, sans-serif;
font-size: 1.2em;
}

h5 {
    color:rgba(210, 180, 210, 1.0);
font-family: 'SourceCodePro', Helvetica, sans-serif;
font-size: 1.1em;
}

h6 {
    color:rgba(210, 180, 210, 1.0);
font-family: 'SourceCodePro', Helvetica, sans-serif;
font-size: 1.1em;
}

ul {

 color:rgba(204, 204, 204, 1.0);
 font-family: 'RedHatMono', Helvetica, sans-serif;
 font-size: 1em;
 padding: 0;
 margin: 0;
}

ul li {
padding-left: 12px;
 display: list-item;
 list-style: none;
}

ul li::before {
  content: "•"; /* Insert content that looks like bullets */
  padding-right: 6px;
  color: rgba(280, 280, 280, 1.0); /* Or a color you prefer */
}

ol {

 color:rgba(204, 204, 204, 1.0);
 font-family: 'RedHatMono', Helvetica, sans-serif;
 font-size: 1em;
 padding: 0;
 margin: 0;
}

ol li {
 display: list-item;
 list-style: decimal inside;
 padding-left: 12px;

}

a {
text-decoration: none;
}

p {
 color:rgba(210, 180, 210, 1.0);
 font-family: 'SourceCodePro', Helvetica, sans-serif;
 font-size: 1em;

}

body {
 WIDTH: 100%;
 max-width: 100%;
 text-align: center;
 background-size: cover;
 /* $bgsz=getbodysize($a); <----- goes into a function later */
 background-position: top center;
 background-attachment: fixed;
 display: flex;
 align-items: center;
 justify-content: center;
 height: auto;
 padding: 0px;
 margin: 0px;
/* overflow: visible; I was poking at something here, left it for later*/

 /* THE GLOBAL STACK. 'Emoji' (the COLOUR face) is first and that is safe — its
    @font-face is unicode-range scoped, so the browser only reaches for it on
    emoji codepoints and every letter falls through to the faces after it.
    Inherited by everything, so emoji are colour site-wide without any element
    having to ask; put .emojiMono on something to opt it out.
    Put a real text face where 'RedHatMono' is if the body copy should differ;
    the emoji entry stays in front of it either way.
    When a script is added later (Hebrew, Arabic, …) append its face AFTER
    RedHatMono — the emoji range cannot collide with it. */
 font-family: 'Emoji', 'RedHatMono', Helvetica, Arial, sans-serif;
}

#bodyWrap {
/* Contains everything INSIDE of the body tag, but is a div wrapper */
 display: block;
 position: relative;
 top: 0px;
 WIDTH: 100%;
 text-align: center;
 max-width: 100%;

}

.syserror {
 display: block;
 position: relative;
 top: 0px;
 z-index: 30;
 width: 100%;
 text-align: center;
 height: 100%;
background: rgba(0,0,0,0.9);
}
section {
 position: relative;
 min-width: 100%;
}

.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

#artWrap {
 display: inline-block;
 top: 0px;
 z-index: 30;
 width: 100%;
 text-align: center;
 height: 100%;
 /*background: rgba(0,0,0,0.9);*/
}

#article {
 display: inline-block;
 position: relative;
 z-index: 35;
 width: 98%;
 max-width: 98%;
 text-align: center;
 padding: 12px;
 overflow: hidden;
 height: auto;

 border-radius: 3px 20px 3px 20px;
 -moz-border-radius: 3px 20px 3px 20px;
 -webkit-border-radius: 3px 20px 3px 20px;
 -khtml-border-radius: 3px 20px 3px 20px;

 text-shadow: 1px 1px 2px rgba(0,0,0,0.9), 0px 1px 3px rgba(0,0,0,0.8);
 backdrop-filter: blur(15px);
 -webkit-backdrop-filter: blur(15px);
}

#mainarticle {
  display: inline-block;
  position: relative;
  z-index: 35;

  width: 98%;
  max-width: 98%;
  text-align: center;

  overflow: hidden;
  height: auto;
 border-radius: 3px 20px 3px 20px;
 -moz-border-radius: 3px 20px 3px 20px;
 -webkit-border-radius: 3px 20px 3px 20px;
 -khtml-border-radius: 3px 20px 3px 20px;

 text-shadow: 1px 1px 2px rgba(0,0,0,0.9), 0px 1px 3px rgba(0,0,0,0.8);
 backdrop-filter: blur(15px);
 -webkit-backdrop-filter: blur(15px);
}

#artcont {
padding: 10px;

}


#topsec {
 display: inline-block;
 width: 100%;
 text-align: center;
 background-image: url('');
 background-size: 100%;
 background-repeat: repeat-x;
 background-position: 0 0;
 background-attachment: fixed;

 z-index: 100;

}

#topnav {
 text-align: center;
 background: rgba(0,0,0,0.0);
 background-position: center top;
 width: 750px;
 Max-width: 100%;
 margin: 0 auto;


 -webkit-animation: topnav 1.5s cubic-bezier(0.470, 0.000, 0.745, 0.715) forwards;
 animation: topnav 1.5s cubic-bezier(0.470, 0.000, 0.745, 0.715) forwards;
}

#HeadImg {
 display: inline-block;
 max-width: 100%;
 height: auto;
 padding: 0px;
 margin: auto;
}


#topNavbuts {
 /* x */
 display: inline-block;
 position: relative;
 color: rgba(255, 255, 255, 1.0) !important;
 font-family: 'SourceCodePro', Helvetica, sans-serif;
 font-size: 14px;
 text-align: center;
 background: #959595; /* Old browsers */
 background: -moz-linear-gradient(top, #959595 0%, #0d0d0d 43%, #010101 50%, #0a0a0a 53%, #4e4e4e 83%, #383838 93%, #1b1b1b 100%); /* FF3.6-15 */
 background: -webkit-linear-gradient(top, #959595 0%,#0d0d0d 43%,#010101 50%,#0a0a0a 53%,#4e4e4e 83%,#383838 93%,#1b1b1b 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(0,0,64,1) 0%,rgba(13,13,13,1) 43%,rgba(1,1,1,1) 50%,rgba(10,10,10,1) 53%,rgba(0,0,32,1) 83%,rgba(56,56,56,1) 93%,rgba(27,27,27,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#959595', endColorstr='#1b1b1b',GradientType=0 ); /* IE6-9 */
 height: auto;
 width: auto;

 padding: 0px;
 margin: auto;
 border-left: solid #000040 1px;
 border-right: solid #000040 1px;
 border-top: solid #000040 1px;
 border-bottom: solid #000020 1px;
 border-radius: 5px 5px 0px 0px;
  box-shadow: 0px 4px 2px 1px rgba(0,0,0,0.8);
 -webkit-box-shadow: 0px 4px 2px 1px rgba(0,0,0,0.8);
 -moz-box-shadow: 0px 4px 2px 1px rgba(0,0,0,0.8);
}

.mainNavBut {
 /* x */
 display: inline-block;
 position: relative;
color:rgba(210, 180, 210, 1.0);
 text-shadow: 0px 2px 4px rgba(0, 0, 0, 1.0), 0px -1px 3px rgba(255, 255, 255, 1.0);
 font-family: 'RedHatMono', Helvetica, sans-serif;   /* emoji come from the range-scoped face on body */
 font-size: 16px;
 font-weight: bold;
 padding: 5px;
 margin: 0px;


 border-radius: 1px;
}
.mainNavBut a {
 /* x */
 display: inline-block;
 position: relative;
color:rgba(210, 180, 210, 1.0);
 text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.9), 0px 1px 0px rgba(0, 0, 0, 0.9), 0px -1px 0px rgba(255, 255, 255, 1.0);
 font-family: 'RedHatMono', Helvetica, sans-serif;   /* emoji come from the range-scoped face on body */
 font-size: 16px;
 font-weight: bold;

}

.mainNavEm {
 /* x */
 display: inline-block;
 position: relative;
 color: rgba(51, 51, 51, 1.0);
 text-shadow: 0px 2px 4px rgba(0, 0, 0, 1.0), 0px -1px 3px rgba(255, 255, 255, 1.0);
 font-family: 'RedHatMono', Helvetica, sans-serif;   /* emoji come from the range-scoped face on body */
 font-size: 1.1em;

 padding: 5px;
 margin: 0px;


 border-radius: 1px;
}
.mainNavEm a {
 /* x */
 display: inline-block;
 position: relative;
 color: rgba(51, 51, 51, 1.0);
 text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.9), 0px 1px 0px rgba(0, 0, 0, 0.9), 0px -1px 0px rgba(255, 255, 255, 1.0);
 font-family: 'RedHatMono', Helvetica, sans-serif;   /* emoji come from the range-scoped face on body */
 font-size: 1.1em;


}

#mainWrap {
 /* Is a div that wraps <main></main>*/
 display: block;
 position: relative;
 width: 1280px;
 max-width: 99%;
 text-align: center;
 background-image: url('');
 background-repeat: repeat;
 background-position: 0 0;
 background-attachment: fixed;


 z-index: 20;
 top: 0px;
 margin: auto;
 padding: 0px;
/*  box-shadow: 0px 5px 9px 5px rgba(0,0,0,0.8);
 -webkit-box-shadow: 0px 5px 9px 5px rgba(0,0,0,0.8);
 -moz-box-shadow: 0px 5px 9px 5px rgba(0,0,0,0.8);
 border-radius: 0px 0px 5% 5%; */

}
.mainunder {
 /* This is <main></main> */


}



#ArtHead {
 position: relative;
 WIDTH: 100%;
 text-align: center;
 max-width: 99%;
 z-index: 80 !important;
 margin: auto;
 padding: 0px;
text-shadow: 0px 2px 5px rgba(0,0,0,0.8), 0px 2px 3px rgba(255,255,255,0.8), 0px -1px 3px rgba(255,255,255,0.9);
color:rgba(210, 180, 210, 1.0);
font-family: 'SourceCodePro', Helvetica, sans-serif;
 font-size: 20px;
}

.FrontPageArtFig {
 display: inline-block;
 position: relative;
 float: center;
 margin: 2px;
 padding: 5px;
 z-index: 30;
 WIDTH: 98%;
 max-width: 98%;
 height: auto;
 text-align: center;
 /*background: rgba(225,225,225,1);
 border-left: solid #666666 1px;
 border-right: solid #666666 1px;
 border-top: solid #dddddd 1px;
 border-bottom: solid #444444 1px;
 border-radius: 9px;
 box-shadow: -2px 3px 4px 1px rgba(0,0,0,0.5);
 -webkit-box-shadow: -2px 3px 7px 3px rgba(0,0,0,0.8);
 -moz-box-shadow: -2px 3px 7px 3px rgba(0,0,0,0.8);*/
}

.MainArtFig {
 display: inline-block;
 position: relative;
 float: right;
 margin: 10px;
 padding: 10px;
 z-index: 30;
 WIDTH: 92%;
 max-width: 50%;
 height: auto;
 text-align: center;
 background: rgba(225,225,225,0.9);
 border-left: solid #666666 1px;
 border-right: solid #666666 1px;
 border-top: solid #dddddd 1px;
 border-bottom: solid #444444 1px;
 border-radius: 9px;
 box-shadow: -2px 3px 7px 3px rgba(0,0,0,0.8);
 -webkit-box-shadow: -2px 3px 7px 3px rgba(0,0,0,0.8);
 -moz-box-shadow: -2px 3px 7px 3px rgba(0,0,0,0.8);
}
.NeArtFig {
 display: inline-block;
 position: relative;
 float: right;
 margin: 10px;
 padding: 10px;
 z-index: 30;
 WIDTH: 92%;
 max-width: 50%;
 height: auto;
 text-align: center;
 background: rgba(225,225,225,0.9);
 border-left: solid #666666 1px;
 border-right: solid #666666 1px;
 border-top: solid #dddddd 1px;
 border-bottom: solid #444444 1px;
 border-radius: 9px;
 box-shadow: -2px 3px 7px 3px rgba(0,0,0,0.8);
 -webkit-box-shadow: -2px 3px 7px 3px rgba(0,0,0,0.8);
 -moz-box-shadow: -2px 3px 7px 3px rgba(0,0,0,0.8);
}
.NwArtFig {
 display: inline-block;
 position: relative;
 float: left;
 margin: 10px;
 padding: 10px;
 z-index: 30;
 WIDTH: 92%;
 max-width: 50%;
 height: auto;
 text-align: center;
 background: rgba(225,225,225,0.9);
 border-left: solid #666666 1px;
 border-right: solid #666666 1px;
 border-top: solid #dddddd 1px;
 border-bottom: solid #444444 1px;
 border-radius: 9px;
 box-shadow: -2px 3px 7px 3px rgba(0,0,0,0.8);
 -webkit-box-shadow: -2px 3px 7px 3px rgba(0,0,0,0.8);
 -moz-box-shadow: -2px 3px 7px 3px rgba(0,0,0,0.8);
}

.SeArtFig {
 display: inline-block;
 position: relative;
 float: right;
 margin: 10px;
 padding: 10px;
 z-index: 30;
 WIDTH: 92%;
 max-width: 50%;
 height: auto;
 text-align: center;
 background: rgba(225,225,225,0.9);
 border-left: solid #666666 1px;
 border-right: solid #666666 1px;
 border-top: solid #dddddd 1px;
 border-bottom: solid #444444 1px;
 border-radius: 9px;
 box-shadow: -2px 3px 7px 3px rgba(0,0,0,0.8);
 -webkit-box-shadow: -2px 3px 7px 3px rgba(0,0,0,0.8);
 -moz-box-shadow: -2px 3px 7px 3px rgba(0,0,0,0.8);
}

.SwArtFig {
 display: inline-block;
 position: relative;
 float: left;
 margin: 10px;
 padding: 10px;
 z-index: 30;
 WIDTH: 92%;
 max-width: 50%;
 height: auto;
 text-align: center;
 background: rgba(225,225,225,0.9);
 border-left: solid #666666 1px;
 border-right: solid #666666 1px;
 border-top: solid #dddddd 1px;
 border-bottom: solid #444444 1px;
 border-radius: 9px;
 box-shadow: -2px 3px 7px 3px rgba(0,0,0,0.8);
 -webkit-box-shadow: -2px 3px 7px 3px rgba(0,0,0,0.8);
 -moz-box-shadow: -2px 3px 7px 3px rgba(0,0,0,0.8);
}

.LinkArtFig {
 position: relative;
 z-index: 10;
 WIDTH: 92%;
 text-align: center;
 margin: auto;

}

.Gal {
 width: 99%;
 display: inline-block;
 text-align: center;
}

.GalArtFig {
 position: relative;
 text-align: center;
 padding: 8px;
 margin-top: 15px;
 max-width: 280px;
 background: rgba(225,225,225,0.9);
 border-left: solid #666666 1px;
 border-right: solid #666666 1px;
 border-top: solid #dddddd 1px;
 border-bottom: solid #444444 1px;
 border-radius: 9px;
 box-shadow: 0px 4px 2px 3px rgba(0,0,0,1.0);
 -webkit-box-shadow: 0px 4px 5px 3px rgba(0,0,0,1.0);
 -moz-box-shadow: 0px 4px 5px 3px rgba(0,0,0,1.0);

}
.Prof {
 width: 99%;
 display: inline-block;
 text-align: center;
}

.ProfArtFig {
 display: inline-block;
 position: relative;
 z-index: 99;
 top: -150px;
 left: 0;
 text-align: center;
 padding: 8px;
 max-width: 200px;
 background: rgba(225,225,225,0.9);
 border-left: solid #666666 1px;
 border-right: solid #666666 1px;
 border-top: solid #dddddd 1px;
 border-bottom: solid #444444 1px;
 border-radius: 9px;
 box-shadow: 0px 4px 2px 3px rgba(0,0,0,1.0);
 -webkit-box-shadow: 0px 4px 5px 3px rgba(0,0,0,1.0);
 -moz-box-shadow: 0px 4px 5px 3px rgba(0,0,0,1.0);

}


.LinkFig {
    position: relative;
 text-align: center;
 padding: 5px;
 margin-top: 10px;
 max-width: 175px;
 height: 125px;
 background: rgba(225,225,225,0.6);
 border-left: solid #666666 1px;
 border-right: solid #666666 1px;
 border-top: solid #dddddd 1px;
 border-bottom: solid #444444 1px;
 border-radius: 3px;
 box-shadow: 0px 4px 2px 3px rgba(0,0,0,0.9);
 -webkit-box-shadow: 0px 4px 5px 3px rgba(0,0,0,0.9);
 -moz-box-shadow: 0px 4px 5px 3px rgba(0,0,0,0.9);

}


/* ── THE BUTTON ──────────────────────────────────────────────────────────────
   Owner's construct, unchanged in look. Four properties added 2026-08-15 to
   fix the emoji sitting high in the circle. The cause was never the size:

     width/height 35px + padding 5px + border 1px, under the DEFAULT
     box-sizing: content-box, renders a 47px box with a 35px content area. The
     glyph sits on the FIRST LINE BOX — about 14px tall at font-size 12px — at
     the TOP of that 35px area, leaving ~21px of empty space beneath it.
     text-align:center handled the horizontal; NOTHING handled the vertical.
     (vertical-align:bottom looks like it should, but it governs how the button
     aligns with its SIBLINGS, not how its contents sit inside it.)

   So: box-sizing so 35px means 35px, inline-flex + align/justify for true
   centring on both axes, and line-height:1 so the line box stops adding space
   of its own. font-size is raised because a 12px glyph in a 35px button was
   small as well as high. See docs/modals-and-buttons.md §5. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  line-height: 1;
  background: #C0C0C0;
  width: 35px;
  height: 35px;
  background-image: -webkit-linear-gradient(top, #C0C0C0, #666666);
  background-image: -moz-linear-gradient(top, #C0C0C0, #666666);
  background-image: -ms-linear-gradient(top, #C0C0C0, #666666);
  background-image: -o-linear-gradient(top, #C0C0C0, #666666);
  background-image: linear-gradient(to bottom, #C0C0C0, #666666);
  -webkit-border-radius: 40%;
  -moz-border-radius: 40%;
  border-radius: 40%;
  -webkit-box-shadow: 0px 0px 3px #000000;
  -moz-box-shadow: 0px 0px 3px #000000;
  box-shadow: 0px 0px 3px #000000;
 font-family: 'RedHatMono', Helvetica, sans-serif;   /* emoji come from the range-scoped face on body */
  font-weight: 400;
  color: #000000;
  font-size: 18px;   /* was 12px — a 12px glyph left most of a 35px button empty */
  border: solid #333333 1px;
  text-decoration: none;
  text-align: center;
  vertical-align: middle;   /* was `bottom` — this is the button's own alignment among siblings */
  margin: 0 auto;
  cursor: pointer;
  padding: 0;               /* the flex box centres now; padding only shrank the glyph's room */
}
/* <button> resets — ps_button() emits a real <button> when there is no href, so it must not
   inherit the browser's default font or its focus outline suppression. */
button.btn {
  font-family: inherit;
  color: #000000;
}
.btn:focus-visible {
  outline: 2px solid #3300ff;
  outline-offset: 2px;
}

.btn:hover {
  background: #666666;
  background-image: -webkit-linear-gradient(top, #B0B0B0, #606060);
  background-image: -moz-linear-gradient(top, #B0B0B0, #606060);
  background-image: -ms-linear-gradient(top, #B0B0B0, #606060);
  background-image: -o-linear-gradient(top, #B0B0B0, #606060);
  background-image: linear-gradient(to bottom, #B0B0B0, #606060);
  border: solid #000000 1px;
  -webkit-box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.8) inset;
  -moz-box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.8) inset;
  box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.8) inset;
  color: #000000;
  font-size: 18px;   /* must match the base rule, or the glyph jumps on hover */
  text-decoration: none;
}

/* A row of buttons from ps_button_row(). */
.psBtnRow {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  align-items: center;
}



.form {
 display: inline-block;
 position: relative;
 text-align: center;
 width: 500px;
 max-width: 95%;
 height: auto;
 background: rgba(225,225,225,0.6);
 border-left: solid #666666 1px;
 border-right: solid #666666 1px;
 border-top: solid #444444 1px;
 border-bottom: solid #FFFFFF 1px;
 border-radius: 11px;
 padding: 10px;
 margin: auto;
}

.form-blok {
 display: inline-block;
 position: relative;
 text-align: left;
 float: right;
 width: 99%;
 max-width: 99%;
 padding: 0px;
}

/* The human-check question (mod-gotcha.php). Plain readable text — it replaced the #gd-image
   colour captcha, which was unusable when colourblind and invisible to a screen reader.
   Sized up deliberately: this is the one thing on the form the visitor must actually READ.
   No colour carries meaning here — the question is legible in greyscale, by design. */
.gotcha-q {
 font-family: 'SourceCodePro', Helvetica, sans-serif;
 font-size: 1.25em;
 font-weight: bold;
 line-height: 1.4;
 text-align: left;
 padding: 10px 12px;
 margin: 6px 0;
 background: rgba(0, 0, 0, .05);
 border-left: solid #444444 4px;
 border-radius: 3px;
}

.gotcha-help {
 font-size: .9em;
 font-style: italic;
 text-align: left;
 margin: 4px 0 0 0;
 opacity: .85;
}
#showtry {
 color:rgba(0, 0, 0, 1.0);
font-family: 'SourceCodePro', Helvetica, sans-serif;
 font-size: 1.1em;
 font-weight: bold;

}
.form-field {
 display: inline-block;
 position: relative;
 text-align: left;
 float: right;
 width: 400px;
 max-width: 99%;
 height: auto;
 background: #FFFFFF !important;
 border-left: solid #666666 1px;
 border-right: solid #666666 1px;
 border-top: solid #444444 1px;
 border-bottom: solid #FFFFFF 1px;
 border-radius: 3px;
 padding: 3px;
 margin: auto;
}

form h3 {
 text-align: center;

}




.review {
 display: inline-block;
 position: relative;
 text-align: center;
 width: 95%;
 max-width: 95%;
 height: auto;
 background: #FFF;
 border-left: solid #666666 1px;
 border-right: solid #666666 1px;
 border-top: solid #444444 1px;
 border-bottom: solid #FFFFFF 1px;
 border-radius: 11px;
 padding: 5px;
 margin: auto;

}

.reviewHeading {
 display: inline-block;
 position: relative;
 width: 100%;
 max-width: 100%;
 text-align: left;
 padding: 10px;
 margin: auto;

}

.reviewHeadCell {
 display: inline-block;
 position: relative;
 width: 50%;
 max-width: 50%;
 color: rgba(0, 0, 0, 1.0);
 font-family: 'RedHatMono', Helvetica, sans-serif;
 font-size: 12px;
 text-align: left !important;
 float: left !important;
 padding: 0px;
 margin: auto;

}

.reviewBody {
 display: inline-block;
 position: relative;
 width: 100%;
 max-width: 100%;
 text-align: left;
 padding: 5px;
 margin: auto;

}

.reviewCell {
 display: inline-block;
 position: relative;
 color: rgba(0, 0, 0, 1.0);
 width: 100%;
 max-width: 100%;
 font-family: 'RedHatMono', Helvetica, sans-serif;
 font-size: 14px;
 text-align: left;
 padding: 10px, 10px, 10px, 10px;
 margin: auto;

}

.reviewr {
 display: inline-block;
 position: relative;
 text-align: right;
 width: 90%;
 max-width: 90%;
 color: rgba(0, 0, 0, 1.0);
 font-family: 'RedHatMono', Helvetica, sans-serif;
 font-size: 12px;
 padding: 10px;
 margin: auto;
}



.divTableRow {
 display: inline-block;
 position: relative;
 max-width: 100%;
 text-align: center;
 padding: 0;
 margin: auto;

}

.divTableCell {
	 display: inline-block;
 position: relative;
 max-width: 25%;
 text-align: center;
 padding: 3px;
 margin: auto;
}





figure {
    position: relative;
    display: inline-block !important;
}

.GalImgWrap {
  position: relative;
  text-align: center;
  color: white;
}
.ProfImgWrap {
  position: relative;
  text-align: center;
  color: white;
}

#LinkImgWrap {
  display: block !important;
  position: relative;
  text-align: center;
  color: white;
  margin: 2px;
  padding: 1px;
}

#FrntPgImg {
 display: inline-block;
 width: 96% !important;
 max-width: 600px;
 height: auto;
 border-left: solid #666666 1px;
 border-right: solid #666666 1px;
 border-top: solid #444444 1px;
 border-bottom: solid #FFFFFF 1px;
 padding: 0px;
 margin: auto;
}

#LinkPgImg {
 display: inline-block;
 width: 96% !important;
 max-width: 150px;
 height: auto;
 background-color: #000000;
 border-left: solid #666666 1px;
 border-right: solid #666666 1px;
 border-top: solid #444444 1px;
 border-bottom: solid #FFFFFF 1px;
 padding: 0px;
 margin: auto;
}

.GalPgImg {
 display: inline-block;
 width: 95% !important;
 max-width: 350px;
 height: auto;
 border-left: solid #666666 1px;
 border-right: solid #666666 1px;
 border-top: solid #444444 1px;
 border-bottom: solid #FFFFFF 1px;
 padding: 0px;
 margin: auto;
}
.ProfPgImg {
 display: inline-block;
 width: 95% !important;
 max-width: 350px;
 height: auto;
 border-left: solid #666666 1px;
 border-right: solid #666666 1px;
 border-top: solid #444444 1px;
 border-bottom: solid #FFFFFF 1px;
 padding: 0px;
 margin: auto;
}

#LinkArtImg {
 display: inline-block;
 width: 95% !important;
 max-width: 750px;
 border-left: solid #666666 1px;
 border-right: solid #666666 1px;
 border-top: solid #444444 1px;
 border-bottom: solid #FFFFFF 1px;
 padding: 0px;
 margin: auto;
 box-shadow: 5px 4px 2px 3px rgba(0,0,0,0.9) inset;
 -webkit-box-shadow: 5px 4px 5px 3px rgba(0,0,0,0.9) inset;
 -moz-box-shadow: 5px 4px 5px 3px rgba(0,0,0,0.9) inset;


}
#FrntPgBotImg {
  display: inline-block;
  width: 500px;
  max-width: 90%;
  height: auto;
  padding: 0px;
  margin: auto;
}
#FpFigCap {
 color: rgba(0, 0, 0, 1.0);
 font-family: 'RedHatMono', Helvetica, sans-serif;
 font-size: 20px;
 text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.9);
}
.GalImgDate {
  display: inline-block;
  position: absolute;
  bottom: 25px;
  right: 20px;
}
.GalFigCap {
 color: rgba(0, 0, 0, 1.0);
 font-family: 'RedHatMono', Helvetica, sans-serif;
 font-size: 20px;
 text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.9);
}
.ProfImgDate {
  display: inline-block;
  position: absolute;
  bottom: 25px;
  right: 20px;
}
.ProfFigCap {
 color: rgba(0, 0, 0, 1.0);
 font-family: 'RedHatMono', Helvetica, sans-serif;
 font-size: 20px;
 text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.9);
}

/* Video figure caption. Same look as its siblings above — the caption family is per figure type
   (#FpFigCap = FRONT PAGE, .GalFigCap = gallery, .ProfFigCap = profile, #LinkFigCap = link),
   mirroring the .{Figtype}ArtFig convention. A video is none of those, so it gets its own rather
   than borrowing the front page's. A CLASS, because an article can hold more than one video and an
   id is supposed to be unique on the page. */
.VidFigCap {
 color: rgba(0, 0, 0, 1.0);
 font-family: 'RedHatMono', Helvetica, sans-serif;
 font-size: 20px;
 text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.9);
}

#LinkFigCap {
 display: block;
 position: relative;
 color: rgba(0, 0, 0, 1.0);
 font-family: 'RedHatMono', Helvetica, sans-serif;
 font-size: 2vmin;
 text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.9);
}
#ArtFoot {
	display: inline-block;
	position: relative;
	width: 100%;
 color:rgba(210, 180, 210, 1.0);
 font-family: 'RedHatMono', Helvetica, sans-serif;
 font-size: 12px;
 text-align: right;
 margin-right: 20px;
 padding: 10px;
}

 /* xsdsdsdsdsdsdsdsdsdsdsdsds */
 /* Social Media Buttons Below>*/
.shares {
  display: inline-block;
  position: relative;
  vertical-align: top !important;
  padding: 3px;
  margin: 3px;
}

#lnkn {
  display: inline-block;
  position: relative;
vertical-align: top !important;
  padding: 0px;
  margin: auto;
}
#pint {
  display: inline-block;
  position: relative;
  vertical-align: top !important;
  padding: 0px;
  margin: auto;
}

.twitter-share-button {
	vertical-align: top !important;
}
 /* End Social Media Buttons*/


footer #MainFoot {
 color: rgba(0, 0, 0, 0.9);
 font-family: 'RedHatMono', Helvetica, sans-serif;
 font-size: 10px;
}
#BodyFoot {
   display: inline-block;
  position: relative;
 color: rgba(128,128,128,1.0);
 font-family: 'RedHatMono', Helvetica, sans-serif;
 font-size: 10px;
 width: 350px;
 max-width: 99%;
 text-decoration: none;
 background: rgba(0, 0, 0, 1.0);
 border-left: solid #666666 1px;
 border-right: solid #666666 1px;
 border-top: solid #dddddd 1px;
 border-bottom: solid #444444 1px;
 border-radius: 27px;
 box-shadow: -2px 3px 7px 3px rgba(0,0,0,0.8);
 -webkit-box-shadow: -2px 3px 7px 3px rgba(0,0,0,0.8);
 -moz-box-shadow: -2px 3px 7px 3px rgba(0,0,0,0.8);
 padding: 9px;
 text-shadow: 0px -1px 0px rgba(192,192,192,1.0);
}

#BodyFoot a {
 color: rgba(128,128,128,1.0);
 font-family: 'RedHatMono', Helvetica, sans-serif;
 font-size: 10px;
 text-decoration: none;
 text-shadow: 0px -1px 0px rgba(192,192,192,1.0);
}
#testOne {
 display: inline-block;
 width: 90% !important;
 max-width: 90%;
 height: auto;
 background: -moz-linear-gradient(top, rgba(153,0,0,0.75) 0%, rgba(255,0,51,0.4) 50%, rgba(0,0,0,0.75) 100%);
 background: -webkit-linear-gradient(top, rgba(153,0,0,0.75) 0%,rgba(255,0,51,0.4) 50%,rgba(0,0,0,0.75) 100%);
 background: linear-gradient(to bottom, rgba(153,0,0,0.75) 0%,rgba(255,0,51,0.4) 50%,rgba(0,0,0,0.75) 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bf990000', endColorstr='#bf000000',GradientType=0 );
 color: #C0C0C0;
 border-left: solid #cc0033 1px !important;
 border-right: solid #ff0033 1px !important;
 border-top: solid #ff0033 1px !important;
 border-bottom: solid #cc0033 1px !important;
 border-radius: 3px 20px 3px 20px;
 -moz-border-radius: 3px 20px 3px 20px;
 -webkit-border-radius: 3px 20px 3px 20px;
 -khtml-border-radius: 3px 20px 3px 20px;
 box-shadow: -2px 2px 2px 1px rgba(153,0,0,0.9), 2px -2px 2px 1px rgba(204,0,51,1.0), -3px 3px 3px 4px rgba(0,0,0,0.8), 2px -2px 2px 1px rgba(204,0,51,1.0) inset, -2px 2px 2px 1px rgba(153,0,0,0.9) inset;
 -webkit-box-shadow: -2px 2px 2px 1px rgba(153,0,0,0.9), 2px -2px 2px 1px rgba(204,0,51,1.0), -3px 3px 3px 4px rgba(0,0,0,0.8), 2px -2px 2px 1px rgba(204,0,51,1.0) inset, -2px 2px 2px 1px rgba(153,0,0,0.9) inset;
 -moz-box-shadow: -2px 2px 2px 1px rgba(153,0,0,0.9), 2px -2px 2px 1px rgba(204,0,51,1.0), -3px 3px 3px 4px rgba(0,0,0,0.8), 2px -2px 2px 1px rgba(204,0,51,1.0) inset, -2px 2px 2px 1px rgba(153,0,0,0.9) inset;
 text-shadow: 1px 2px 2px rgba(0,0,0,0.8), 0px 2px 3px rgba(255,255,255,0.6);
 padding: 0px;
 margin: auto;
}



/* Here starts the section for the old custom-made reviews */
.customReviews {

 display: inline-block;
 position: relative;

 width: 95%;
 max-width: 95%;
 height: auto;
 background: #FFF;
 border-left: solid #666666 1px;
 border-right: solid #666666 1px;
 border-top: solid #444444 1px;
 border-bottom: solid #FFFFFF 1px;

 border-radius: 11px;
 padding: 10px;
 margin: 0;

}

.custreview_item {
	 display: inline-block;
 position: relative;
 font-family: 'RedHatMono', Helvetica, sans-serif;
font-size: 1.3rem;
list-style: none;
-webkit-font-smoothing: antialiased;
display: block;
border-bottom: solid 1px #d6d6d6;
padding: 25px 0 30px 0;
box-sizing: border-box;
}

.custreview_top_bar {
display: inline-block;
 position: relative;
 font-family: 'RedHatMono', Helvetica, sans-serif;
font-size: 1.3rem;
list-style: none;
-webkit-font-smoothing: antialiased;
display: block;
margin-bottom: 12px;
box-sizing: border-box;
text-align: left;
}

.custreview_avatar_container {


}

.custreview_details {


}

.custreview_title {


}

.custreview_item_title {


}

.star_rating_small {


}

.custreview_rating {


}

.star_value star_50 {


}

.custreview_date {


}

.custreview_comment {


}

.custreviewBody {


}

.custreview_breakdown horz {


}

.breakdown_row {


}

.breakdown_label {


}

.breakdown_rating {


}

.star_rating_small {


}
canvas {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}



.ChatArtFig {
display: inline-block;
 position: relative;
 z-index: 1;
 WIDTH: 1280px;
 max-width: 99%;
 text-align: center;
 align: left;
 margin: 0 auto;
 padding: 0px;
 background: -moz-linear-gradient(top, rgba(0,0,153,0.75) 0%,rgba(51,0,255,0.4) 50%,rgba(0,0,0,0.75) 100%);
 background: -webkit-linear-gradient(top, rgba(0,0,153,0.75) 0%,rgba(51,0,255,0.4) 50%,rgba(0,0,0,0.75) 100%);
 background: linear-gradient(to bottom, rgba(0,0,153,0.75) 0%,rgba(51,0,255,0.4) 50%,rgba(0,0,0,0.75) 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bf990000', endColorstr='#bf000000',GradientType=0 );
 //color: #C0C0C0;
 border-left: solid #3300ff 1px !important;
 border-right: solid #3300ff 1px !important;
 border-top: solid #3300ff 1px !important;
 border-bottom: solid #3300cc 1px !important;
 border-radius: 3px 20px 3px 20px;
 -moz-border-radius: 3px 20px 3px 20px;
 -webkit-border-radius: 3px 20px 3px 20px;
 -khtml-border-radius: 3px 20px 3px 20px;
 box-shadow: -2px 2px 2px 1px rgba(0,0,153,0.9), 2px -2px 2px 1px rgba(51,0,204,1.0), -3px 3px 3px 4px rgba(0,0,0,0.8), 2px -2px 2px 1px rgba(51,0,204,1.0) inset, -2px 2px 2px 1px rgba(0,0,153,0.9) inset;
 -webkit-box-shadow: -2px 2px 2px 1px rgba(0,0,153,0.9), 2px -2px 2px 1px rgba(51,0,204,1.0), -3px 3px 3px 4px rgba(0,0,0,0.8), 2px -2px 2px 1px rgba(51,0,204,1.0) inset, -2px 2px 2px 1px rgba(0,0,153,0.9) inset;
 -moz-box-shadow: -2px 2px 2px 1px rgba(0,0,153,0.9), 2px -2px 2px 1px rgba(51,0,204,1.0), -3px 3px 3px 4px rgba(0,0,0,0.8), 2px -2px 2px 1px rgba(51,0,204,1.0) inset, -2px 2px 2px 1px rgba(0,0,153,0.9) inset;
 text-shadow: 1px 1px 2px rgba(0,0,0,0.9), 0px 1px 3px rgba(0,0,0,0.8);
 backdrop-filter: blur(15px);
 -webkit-backdrop-filter: blur(15px);
}

/* The chat's other two figure sections (the reorg split the chat into whoson / log / input).
   Kept as light full-width wrappers — the inner .council-presence / .council-composer styles (in
   chatroom.php's <style>) do the visual work; these just size/center the figure like .ChatArtFig. */
.WhosonArtFig, .ChatinputArtFig {
 display: block;
 width: 1280px;
 max-width: 99%;
 margin: 0 auto;
 padding: 0;
 text-align: left;
}




#ajaxForm {
  display: flex;
  flex-direction:row;
  position: relative;
  text-align: left;
  width: 45%;
  height: 25px;
  //overflow: hidden;
  border-radius: 5px;
  //align: left;
  text-shadow: 1px 2px 2px rgba(0,0,0,0.8), 0px 2px 3px rgba(255,255,255,0.6);
  border-left: solid #666666 1px;
  border-right: solid #666666 1px;
  border-top: solid #444444 1px;
  border-bottom: solid #FFFFFF 1px;
  padding: 0px;
  margin: 10px;
  vertical-align: baseline;

}

#ChatIn {
  display: inline-block;
  position: relative;
  align: left;
  height: 25px;
  max-width: 99%;
    /* Tell the input to use all the available space */
  flex-grow: 2;
  /* And hide the input's outline, so the form looks like the outline */
  border: none;
}

#ChatIn:focus {
  /* removing the input focus blue box. Put this on the form if you like. */


  outline: none;
}


#SayChar {
  display: inline-block;
  position: relative;

  color: rgba(255, 255, 255, 1.0);
 font-family: 'RedHatMono', Helvetica, sans-serif;
  font-size: 14px;
  text-shadow: 1px 2px 2px rgba(0,0,0,0.8), 0px 2px 3px rgba(255,255,255,0.6);
 vertical-align: baseline;
}
#btnSend {
  //border-radius: 5px;
  border:1px solid grey;
  background: grey;
  color: white;
  height: 25px;
}




.MojiPop {
  position: relative;
  display: inline-block;
  text-align: center;
   //vertical-align: middle;

  margin: 0 auto;
  transition: width 0.3s ease, border-radius 0.3s ease, padding-bottom 0.3s ease;
  padding: 0px;
  height: 25px;
}

/* Style the tabs */
.MojiPop .tab {
 display: inline-block;
 position: relative;
  overflow: hidden;
  ///border: 1px solid #ccc;
  background-color: rgba(255,255,255,1.0);

  width: 100%;
  max-width: 150px;
  height: 25px;
  //vertical-align: middle;
  margin: 0 auto;
  padding: 0px;
}


.MojiPopBtn {
  z-index: 40;
  padding: 2px 0px;

  //border-bottom: solid #000000 1px !important;
  border-radius: 5px;
  //margin : 2px;
  background-color: rgba(0,0,0,0.0);
    //text-shadow: 1px 2px 2px rgba(0,0,0,0.9), 0px 2px 3px rgba(255,255,255,0.8);

  //color: rgba(255, 255, 255, 1.0);
 font-family: 'RedHatMono', Helvetica, sans-serif;   /* emoji come from the range-scoped face on body */
  font-size: 14px;
  //vertical-align: bottom;
    text-align: center;

}



/* UsrRoomPop Content (Hidden by Default) */
.MojiPopCont {
  display: none;
  position: absolute;
  background-color: #ffffff;
  text-align: center;
  //vertical-align: middle;
  min-width: 150px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.8);
  border-radius: 15px;

  opacity: 0.9;
  transition: width 0.3s ease, border-radius 0.3s ease;
  z-index: 50;
}

/* Links inside the UsrRoomPop */
.MojiPopCont a {
  display: inline-block;
  position: relative;
  color: #FFFFFF;
  text-decoration: none;
  //overflow: hidden;
  background-color: rgba(0,0,0,0.0);
  border-radius: 5px;
  vertical-align: bottom;
  padding: 1px;
}

/* Change color of UsrRoomPop links on hover */
.MojiPopCont a:hover {
background-color: #DDDDDD;
text-decoration: none;
//overflow: hidden;
transition: background-color 0.7s ease;
}

/* Show the UsrRoomPop menu on hover */
.MojiPop:hover .MojiPopCont {
  display: block;

}
.MojiPop:hover .MojiPopCont:after {
  display: block;
  transform: translateY(-50%) translateX(-50%);
  transition: all 0.3s 0.5s ease;
  cursor: pointer;
  cursor: hand;
}





/* Style the buttons that are used to open the tab content */
.tab .MojiPopBtn {
  background-color: #FFFFFF;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 0px 2px;
  width: 25px;
  transition: 0.3s;
}

/* Change background color of buttons on hover */
.MojiPopBtn:hover {
  background-color: rgba(0, 0, 0, 0.4);
}


/* Style the tab content */
.tabcontent {

  display: none;
  padding: 0px;
  width: 100%;
  margin: 0 auto;
}

#view_ajax {
  display: inline-block;
  position: relative;
  overflow: auto;
  WIDTH: 99%;
  max-width: 1280px;
  height: 300px;
  text-align: left;
  color: rgba(0, 0, 0, 0.5);
  margin: 2px;
  margin-top: 20px;
  word-wrap: normal;

}

.ChatSaid {
 display: inline-block;
 z-index: 1;
 color: rgba(255, 255, 255, 1.0);
 font-family: 'RedHatMono', Helvetica, sans-serif;
 font-size: 14px;
 text-shadow: 1px 2px 2px rgba(0,0,0,0.9), 0px 2px 3px rgba(255,255,255,0.9);
 //overflow: hidden;
   WIDTH: 99%;
  max-width: 1250px;
 word-wrap: break-word;
}


.UsrRoomPop {
  position: relative;
  display: inline-block;
  text-align: center;
  //margin: 0 auto;
  transition: width 0.3s ease, border-radius 0.3s ease, padding-bottom 0.3s ease;
}
.UsrRoomPop-Btn {
  z-index: 10;
  padding: 0px;
  font-size: 16px;
  border: none;
  border-radius: 5px;
  margin: 0 auto;
  background-color: rgba(0,0,0,0.0);
   text-shadow: 1px 2px 2px rgba(0,0,0,0.9), 0px 2px 3px rgba(255,255,255,0.8);

  color: rgba(255, 255, 255, 1.0);
 font-family: 'RedHatMono', Helvetica, sans-serif;
}



/* UsrRoomPop Content (Hidden by Default) */
.UsrRoomPop-Cont {
  display: none;
  position: absolute;
  background-color: #ffffff;
  text-align: center;
  min-width: 100px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.4);
  border-radius: 15px;

  opacity: 0.9;
  transition: width 0.3s ease, border-radius 0.3s ease, padding-bottom 0.3s ease;
  z-index: 75;
}

/* Links inside the UsrRoomPop */
.UsrRoomPop-Cont a {
  display: block;
  position: relative;
  color: #fa434b;
  text-decoration: none;
  overflow: hidden;
  padding: 5px;
  border-radius: 5px;
}

/* Change color of UsrRoomPop links on hover */
.UsrRoomPop-Cont a:hover {
background-color: #C0C0C0;
text-decoration: none;
overflow: hidden;
transition: background-color 0.7s ease;
}
.UsrRoomPop-Cont ul {
  list-style: none;
  text-decoration: none;
  overflow: hidden;
  text-align: center;
  padding-left: 5px;
  padding-right: 5px;
}
.UsrRoomPop-Cont li {
    list-style: none;
  text-decoration: none;
  text-align: center;
  overflow: hidden;
}
/* Show the UsrRoomPop menu on hover */
.UsrRoomPop:hover .UsrRoomPop-Cont {
  display: block;
  z-index: 50;
}
.UsrRoomPop:hover .UsrRoomPop-Cont:after {
  display: block;
  transform: translateY(-50%) translateX(-50%);
  transition: all 0.3s 0.5s ease;
  cursor: pointer;
  cursor: hand;
}
/* Change the background color of the UsrRoomPop button when the UsrRoomPop content is shown */
.UsrRoomPop:hover .UsrRoomPop-Btn {
  background-color: #000;
}



/* Dropdown Button */
.dropbtn {
  background-color: #3498DB;
  color: white;
  padding: 0px;
  border: none;
  cursor: pointer;
  text-align: center;
}

/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
  background-color: #2980B9;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
  float: left;
  text-align: left;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  right:0;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd;}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}

/* Account menu — the header account dropdown (replaces the bare logout link).
   Pure-CSS reveal on hover + focus-within (same no-JS pattern as .UsrRoomPop),
   reusing the .dropdown-content scaffold above for the panel look. */
.acctdrop {
  position: relative;
  display: inline-block;
}
.acctdrop .acctbtn {
  background: transparent;
  border: none;
  padding: 0;          /* the .mainNavBut wrapper supplies the 5px — keeps ✦ exactly where the old link sat */
  margin: 0;
  cursor: pointer;
  color: rgba(210, 180, 210, 1.0);
  text-shadow: 0px 1px 2px rgba(0,0,0,0.9), 0px 1px 0px rgba(0,0,0,0.9), 0px -1px 0px rgba(255,255,255,1.0);
  font-family: 'RedHatMono', Helvetica, sans-serif;   /* emoji come from the range-scoped face on body */
  font-size: 16px;
  font-weight: bold;
  line-height: 1;
}
/* STACKING FIX — why this is needed, so it isn't "simplified" away later:
   1. #topnav animates `transform: translateY()` with `forwards`, so a transform PERSISTS. A
      non-none transform CREATES A STACKING CONTEXT, which traps any z-index on the dropdown
      INSIDE #topnav — no value, however large, could lift it above page content.
   2. #topsec declares `z-index: 100` but has NO `position`, so that z-index is INERT.
   Result before this fix: the menu painted below #ArtHead (z-index:80 !important), .ProfArtFig
   (99) and the admin editNav chrome — visible but unclickable, worst for siteadmin (most chrome).
   The fix is to elevate the HEADER's own context (the ancestor), not the menu. 500 clears all
   page content (max 100) and stays well under the notify/call overlays (99999). */
#topsec {
  position: relative;
  z-index: 500;
  overflow: visible;   /* never clip the dropdown out of the header */
}
#topnav { overflow: visible; }

.acctdrop .dropdown-content.acctmenu {
  top: 100%;           /* flush under the trigger — no hover gap to fall through */
  right: 0;
  left: auto;
  z-index: 501;
  border-radius: 4px;
  overflow: hidden;
  text-align: left;
}
.acctdrop:hover .dropdown-content.acctmenu,
.acctdrop:focus-within .dropdown-content.acctmenu {
  display: block;
}

/* Article action bar — share intents (every reader) + inline edit (staff only).
   Lives in the public stylesheet because share shows to anonymous readers too. */
.artActions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 1.4em 0 0.6em;
  padding: 8px 2px;
  border-top: 1px solid rgba(210,180,210,0.18);
}
.artShare {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.artShareLbl {
  font-size: 0.8em;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.75;
  margin-right: 2px;
}
.artStaff { margin-left: auto; }
.artShareBtn {
  display: inline-block;
  padding: 4px 12px;
  font-size: 0.8em;
  line-height: 1.5;
  border-radius: 999px;
  text-decoration: none;
  color: rgba(210,180,210,1.0);
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(210,180,210,0.35);
  transition: background 0.2s ease, border-color 0.2s ease;
}
.artShareBtn:hover, .artShareBtn:focus {
  background: rgba(210,180,210,0.18);
  border-color: rgba(210,180,210,0.6);
}
.artEditBtn {
  font-size: 1em;
  padding: 2px 12px;
}