:root {
    --ink: #d1ccbe;
    --muted: #918b7c;
    --paper: #171a18;
    --paper-light: #242722;
    --paper-dark: #101210;
    --line: #4b483e;
    --line-dark: #777057;
    --gold: #a88d4e;
    --gold-light: #d0b875;
    --gold-dark: #59451f;
    --night: #080b0d;
    --panel: #171a1b;
    --panel-light: #252828;
    --side-text: #c8c2b3;
}

* { box-sizing: border-box; }

html { min-height: 100%; background: #050606; }

body {
    min-height: 100%;
    margin: 0;
    color: var(--ink);
    background:
        linear-gradient(to bottom, rgba(0,0,0,.12) 0, rgba(0,0,0,.90) 640px, #050606 100%),
        var(--page-art) center top / 960px auto no-repeat,
        #050606;
    font: 12px/1.5 Verdana, Arial, Helvetica, sans-serif;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background:
        radial-gradient(circle at 50% 0, rgba(147,132,91,.14), transparent 42%),
        repeating-linear-gradient(90deg, rgba(255,255,255,.009) 0 1px, transparent 1px 5px);
}

.page-sky {
    position: absolute;
    inset: 0 0 auto;
    height: 620px;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(13,18,20,.25), rgba(0,0,0,.85));
}

font, th, td, p, input, select, button {
    font-family: Verdana, Arial, Helvetica, sans-serif;
}

img { border: 0; vertical-align: middle; }
a { color: #c0a25d; text-decoration: none; }
a:hover { color: #e0c77e; text-decoration: underline; }
form { margin: 0; }

.site-shell {
    width: min(1180px, calc(100% - 24px));
    margin: 18px auto 42px;
    filter: drop-shadow(0 18px 35px rgba(0,0,0,.72));
}

.site-header {
    position: relative;
    height: 300px;
    overflow: hidden;
    border: 1px solid #4a4d4a;
    border-bottom: 0;
    background:
        linear-gradient(90deg, rgba(0,0,0,.20), rgba(0,0,0,.03) 52%, rgba(0,0,0,.42)),
        url("images/header/hero.jpg") center 8% / cover no-repeat;
}

.site-header::before,
.site-header::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.site-header::before {
    background:
        linear-gradient(to bottom, rgba(255,255,255,.04), transparent 16%, transparent 70%, rgba(0,0,0,.92)),
        radial-gradient(circle at 15% 38%, rgba(199,213,216,.14), transparent 28%);
}

.site-header::after {
    box-shadow: inset 0 0 0 5px rgba(0,0,0,.24), inset 0 0 36px rgba(0,0,0,.85);
}

.hero-link {
    position: absolute;
    z-index: 2;
    inset: 0;
    display: block;
    padding: 0;
    color: #e4e7e5;
    text-shadow: 0 2px 3px #000, 0 0 13px rgba(183,210,214,.35);
}

.hero-link:hover { color: #fff; text-decoration: none; }

.hero-title { display: none; }

.hero-subtitle {
    position: absolute;
    left: 58px;
    bottom: 49px;
    display: block;
    color: #d2c9ad;
    font: small-caps 21px/1.2 Georgia, "Times New Roman", serif;
    letter-spacing: 2px;
}

.hero-section {
    position: absolute;
    left: 59px;
    bottom: 27px;
    display: block;
    color: #9da4a3;
    font-size: 10px;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.top-ornament,
.bottom-ornament {
    position: relative;
    height: 24px;
    border-left: 1px solid #474842;
    border-right: 1px solid #474842;
    background: linear-gradient(#343735, #161918 48%, #070808 50%, #202321);
}

.top-ornament::before,
.top-ornament::after,
.bottom-ornament::before,
.bottom-ornament::after {
    content: "";
    position: absolute;
    top: 5px;
    width: 15px;
    height: 15px;
    border: 1px solid #7b6b42;
    transform: rotate(45deg);
    background: #171917;
    box-shadow: inset 0 0 0 2px #262a27;
}
.top-ornament::before, .bottom-ornament::before { left: 18px; }
.top-ornament::after, .bottom-ornament::after { right: 18px; }

.top-ornament span,
.bottom-ornament span {
    position: absolute;
    left: 49px;
    right: 49px;
    top: 11px;
    height: 1px;
    background: linear-gradient(90deg, transparent, #8f7846 16%, #665734 50%, #8f7846 84%, transparent);
}

.site-grid {
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr);
    align-items: stretch;
    border-left: 1px solid #3d403e;
    border-right: 1px solid #3d403e;
    background: #111313;
}

.side-panel {
    position: relative;
    min-height: 650px;
    padding: 30px 18px 40px;
    color: var(--side-text);
    border-right: 1px solid #4d504c;
    background:
        linear-gradient(90deg, rgba(255,255,255,.025), transparent 16%, transparent 84%, rgba(0,0,0,.32)),
        linear-gradient(#1e2120, #111313 42%, #090a0a);
}

.side-panel::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 4px;
    width: 1px;
    background: rgba(197,180,128,.18);
}

.side-heading {
    padding: 0 5px 9px;
    color: var(--gold-light);
    font: 14px/1 Georgia, "Times New Roman", serif;
    letter-spacing: 3px;
    text-align: center;
    text-shadow: 0 1px 2px #000;
    border-bottom: 1px solid #5e5339;
}

.side-heading-small { margin-top: 21px; font-size: 11px; }

#linksbar {
    margin: 10px 0 0;
    font-size: 0;
}

#linksbar a {
    position: relative;
    display: block;
    min-height: 35px;
    padding: 10px 12px 8px 25px;
    color: #c9c4b9;
    font: 11px/1.35 Verdana, Arial, sans-serif;
    text-transform: uppercase;
    letter-spacing: .5px;
    border-bottom: 1px solid #303332;
    background: linear-gradient(90deg, rgba(160,135,77,.12), transparent 62%);
}

#linksbar a::before {
    content: "";
    position: absolute;
    left: 8px;
    top: 13px;
    width: 7px;
    height: 7px;
    border: 1px solid #7f6a39;
    transform: rotate(45deg);
    background: #171a19;
}

#linksbar a:hover {
    color: #f0dfad;
    text-decoration: none;
    padding-left: 29px;
    background: linear-gradient(90deg, rgba(163,132,65,.28), transparent 78%);
}

.side-separator {
    height: 1px;
    margin: 24px 0 0;
    background: linear-gradient(90deg, transparent, #5d5a4c, transparent);
}

.side-emblem {
    width: 86px;
    height: 116px;
    margin: 22px auto 10px;
    color: #b8c1c1;
    font: 82px/116px "Times New Roman", serif;
    letter-spacing: -32px;
    text-align: center;
    opacity: .32;
    text-shadow: 0 0 12px #a8c5c7;
    transform: translateX(-8px);
}

.side-note {
    margin: 12px 4px 0;
    color: #777d79;
    font-size: 10px;
    line-height: 1.7;
    text-align: center;
}

.content-panel {
    position: relative;
    min-width: 0;
    padding: 28px 30px 0;
    color: var(--ink);
    background-color: var(--paper);
    background-image:
        linear-gradient(145deg, rgba(255,255,255,.035), transparent 32%, rgba(0,0,0,.22) 100%),
        repeating-linear-gradient(0deg, rgba(207,194,151,.018) 0 1px, transparent 1px 4px),
        radial-gradient(circle at 50% 0, rgba(137,116,65,.10), transparent 46%);
    box-shadow: inset 8px 0 18px rgba(0,0,0,.36), inset -1px 0 rgba(206,191,145,.12);
}

.content-panel::before,
.content-panel::after {
    content: "";
    position: absolute;
    top: 10px;
    bottom: 10px;
    width: 1px;
    background: rgba(173,151,94,.24);
}
.content-panel::before { left: 10px; }
.content-panel::after { right: 10px; }

.content-rivet {
    position: absolute;
    z-index: 2;
    top: 15px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    border: 1px solid #706747;
    background: radial-gradient(circle at 35% 30%, #b9aa7c, #5f5947 48%, #1d1f1c);
}
.content-rivet-left { left: 15px; }
.content-rivet-right { right: 15px; }

.content-heading {
    margin: 0 0 18px;
    padding: 4px 0 15px;
    text-align: center;
    border-bottom: 1px solid #4b483d;
    box-shadow: 0 1px rgba(0,0,0,.55);
}

.content-kicker {
    color: #aa986d;
    font-size: 9px;
    letter-spacing: 3px;
}

.contenttitle {
    margin: 5px 0 0;
    padding: 0;
    color: #d6d0bf;
    font: normal 29px/1.2 Georgia, "Times New Roman", serif;
    letter-spacing: 1px;
    text-shadow: 0 1px 2px #000, 0 0 12px rgba(203,184,123,.08);
}

.search-panel {
    margin: 0 auto 21px;
    padding: 1px;
    border: 1px solid #555044;
    background: #111311;
    box-shadow: 0 1px 0 rgba(205,184,119,.12), inset 0 0 0 1px #2a2d28, 0 3px 10px rgba(0,0,0,.22);
}

.search-box {
    padding: 13px 15px;
    text-align: center;
    border: 1px solid #363832;
    background: linear-gradient(#292c28, #1b1e1b 54%, #171917);
}

.search-caption {
    margin-bottom: 8px;
    color: #b7a77f;
    font: bold 10px/1 Verdana, Arial, sans-serif;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.search-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
}

.search-controls > * { margin: 0 2px; }

input, select, button {
    max-width: 100%;
    color: #d8d3c5;
    font-size: 11px;
}

input.post,
textarea.post,
select {
    min-height: 28px;
    padding: 5px 8px;
    border: 1px solid #5a5649;
    background: #2b2e29;
    box-shadow: inset 1px 1px 3px rgba(0,0,0,.55), 0 1px rgba(210,191,132,.08);
}

select { cursor: pointer; color-scheme: dark; }
input::placeholder, textarea::placeholder { color: #888477; opacity: 1; }
select option { color: #ded9cb; background: #252824; }

input.button,
input.liteoption,
input.catbutton,
.fakebut {
    min-height: 28px;
    padding: 5px 13px;
    color: #eee6cf;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: .3px;
    cursor: pointer;
    border: 1px solid #49483f;
    background: linear-gradient(#6b695e, #302f2a 52%, #1e1f1c 53%, #47473f);
    box-shadow: inset 0 0 0 1px #777466, 0 1px 2px rgba(0,0,0,.28);
}

input.button:hover,
input.liteoption:hover,
input.catbutton:hover,
.fakebut:hover {
    color: #fff6d7;
    border-color: #826c37;
    background: linear-gradient(#81785f, #4b4434 52%, #2a281f 53%, #5e5540);
}

.results-panel { min-height: 240px; color: #c9c4b7; }

#listing {
    width: 100%;
    overflow-x: auto;
    padding: 1px;
    border: 1px solid #504c41;
    background: #111311;
    box-shadow: 0 1px rgba(205,184,119,.10), 0 3px 12px rgba(0,0,0,.22);
}

.forumline {
    width: 100%;
    min-width: 580px;
    border-collapse: separate;
    border-spacing: 1px;
    background: #3d3b33;
}

#listing th,
.listing_top {
    height: 31px;
    padding: 7px 6px;
    color: #eee7d3;
    font-size: 11px;
    font-weight: bold;
    text-align: center;
    text-shadow: 0 1px #000;
    border-top: 1px solid #77756d;
    border-bottom: 1px solid #292b29;
    background: linear-gradient(#686a65, #3c3f3d 49%, #282b29 50%, #484a45);
}

#listing th a { color: #f0e7ce; }
#listing th a:hover { color: #fff5cf; text-decoration: none; }

.listing_top {
    color: var(--gold-light) !important;
    letter-spacing: 1px;
    text-transform: uppercase;
    background: linear-gradient(#4a4740, #242522 50%, #171815 51%, #34342e) !important;
}


.mob-drop-heading-cell {
    padding: 0 !important;
    text-transform: none !important;
}

.drop-group-heading {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 7px 12px;
}

.drop-group-title {
    color: var(--gold-light);
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.header-map-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.header-map-link img {
    display: block;
    width: auto;
    height: auto;
    border: 0 !important;
    box-shadow: none !important;
}

.header-map-link:hover img {
    filter: brightness(1.12);
}

.name-heading-inline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    line-height: 1.2;
}

.name-heading-label,
.name-heading-mob {
    color: #eee5ca;
    font-weight: bold;
}

.name-heading-level,
.drop-aggro {
    color: #c8c2b2;
    font-size: 10px;
    font-weight: normal;
    letter-spacing: .2px;
    text-transform: none;
}

.name-heading-inline strong,
.drop-aggro strong {
    color: #a99a72;
    font-size: 9px;
    text-transform: uppercase;
}

.name-heading-separator {
    color: #716747;
}

.drop-aggro.is-aggro { color: #d09b8d; }
.drop-aggro.is-passive { color: #9fb99b; }

.listing_sub {
    height: 25px !important;
    padding: 5px 8px !important;
    color: #c4b27f !important;
    font-size: 10px !important;
    text-transform: uppercase;
    background: #252721 !important;
    border-bottom: 1px solid #494536 !important;
}

#listing td {
    height: 35px;
    padding: 5px 7px;
    color: #cbc6b8;
    font-size: 11px;
    vertical-align: middle;
    text-align: center;
    border-bottom: 1px solid rgba(169,153,105,.13);
}

.row1 { background: #242722; }
.row2 { background: #1b1e1b; }
.row1:hover, .row2:hover { background: #31342d; }

#listing td[style*="text-align:left"],
#listing th[style*="text-align:left"] { padding-left: 10px; }

#listing img.icon,
#listing td:first-child img:not([height="25"]) {
    border: 1px solid #6a624d;
    box-shadow: 0 1px 2px rgba(0,0,0,.35);
}

.listing_buttom {
    height: 29px !important;
    padding: 7px 8px !important;
    color: #c9b67f !important;
    font-size: 9px !important;
    text-align: center !important;
    border-top: 1px solid #5c5b54 !important;
    border-bottom: 1px solid #171817 !important;
    background: linear-gradient(#444640, #242624) !important;
}

.map-frame {
    padding: 0 !important;
    background: #151716 !important;
}

.map-frame iframe {
    display: block;
    width: 100%;
    max-width: 875px;
    height: 1265px;
    margin: 0 auto;
    overflow: hidden;
    background: #111;
}

#error {
    margin: 0 0 18px;
    padding: 12px 15px;
    color: #d5aaa2;
    text-align: center;
    border: 1px solid #68463f;
    background: #2a1d1a;
    box-shadow: inset 0 0 0 1px #3b2824;
}

.error-mark {
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-right: 7px;
    color: #eadbd7;
    font-weight: bold;
    line-height: 18px;
    border-radius: 50%;
    background: #7a352b;
}

.footer {
    margin: 30px -30px 0;
    padding: 17px 28px 20px;
    color: #777970;
    font-size: 9px;
    line-height: 1.65;
    text-align: center;
    border-top: 1px solid #46483f;
    background: linear-gradient(#20231f, #141614);
    box-shadow: inset 0 1px rgba(207,191,138,.08);
}

.footer a { color: #9b8959; }
.highlight1, .orange { color: #c0a45f; }
.highlight2 { color: #9ca19a; }
.grey { color: #85877f; }
.genmed { font-size: 11px; }

@media (max-width: 780px) {
    .site-shell { width: min(100% - 12px, 1180px); margin-top: 6px; }
    .site-header { height: 230px; background-position: center 8%; }
    .hero-link { padding: 0; }
    .hero-subtitle { left: 30px; bottom: 40px; font-size: 17px; }
    .hero-section { left: 31px; bottom: 21px; }
    .site-grid { grid-template-columns: 1fr; }
    .side-panel { min-height: 0; padding: 14px 14px 10px; border-right: 0; border-bottom: 1px solid #3e403a; }
    .side-heading, .side-separator, .side-heading-small, .side-emblem, .side-note { display: none; }
    #linksbar { display: flex; flex-wrap: wrap; justify-content: center; margin: 0; }
    #linksbar a { width: auto; min-height: 30px; padding: 8px 12px 7px 23px; border: 0; }
    #linksbar a:hover { padding-left: 25px; }
    .content-panel { padding: 22px 18px 0; }
    .footer { margin-left: -18px; margin-right: -18px; }
}


@media (max-width: 500px) {
    .drop-group-heading { gap: 5px 8px; padding: 7px 8px; }
    .drop-group-title { width: 100%; }
    .drop-mob-meta { gap: 5px; font-size: 9px; }
}

@media (max-width: 500px) {
    body { background-size: auto 360px; }
    .site-header { height: 175px; background-position: center 8%; }
    .hero-link { padding: 0; }
    .hero-subtitle { left: 20px; bottom: 35px; font-size: 14px; letter-spacing: 1px; }
    .hero-section { left: 21px; bottom: 18px; font-size: 8px; letter-spacing: 2px; }
    .contenttitle { font-size: 24px; }
    .content-panel { padding-left: 13px; padding-right: 13px; }
    .footer { margin-left: -13px; margin-right: -13px; padding-left: 14px; padding-right: 14px; }
    .search-controls { display: block; }
    .search-controls input.post,
    .search-controls select { width: 100%; margin: 3px 0; }
    .search-controls input.catbutton { margin-top: 5px; }
}