/* 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;
}

@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);

}


.btn {
  display: inline-block;
  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: 12px;
  padding: 5px;
  border: solid #333333 1px;
  text-decoration: none;
  text-align: center;
  vertical-align: bottom;
  margin: 0 auto;
}

.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: 12px;
  text-decoration: none;
}



.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);
}

#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;
}