/* NOTE(dev): regular.ttf is a SUBSET of Martel — 95 glyphs, only 59 of them with
   outlines. The `unicode-range` below is exactly that set, and it is what makes every
   other character fall through the font stack to Verdana.
    Do NOT widen it without replacing the font file. The missing characters — every
   digit, every punctuation mark — are not absent from the font: they are mapped in the
   cmap to EMPTY glyphs carrying a full 1em advance. A browser falls back only on an
   unmapped codepoint, so inside this range a blank glyph is drawn as-is and the text
   silently disappears, leaving a wide gap. That is what happened when the right sidebar,
   the one piece of chrome with numbers in it, was first put on this face.
    U+0020 is listed on purpose: a space is legitimately blank and has a real 0.25em
   advance, so it stays on martel's own metrics. */
@font-face {
    font-family: martelregular;
    src: url(../fonts/martel/regular.ttf) format('truetype');
    unicode-range: U+0020, U+0041-005A, U+0060-007A, U+00C4, U+00D6, U+00DC, U+00E7, U+0192, U+222B;
    font-weight: 400;
    font-style: normal
}
body {
    font-family: Verdana, Tahoma, sans-serif;
    -webkit-font-smoothing: antialiased;
    background-color: #000;
    font-size: 12px;
    color: #5a2800;
    padding: 0;
    margin: 0
}
abbr {
    border-bottom: 1px dotted #5a2800;
    cursor: help
}
a {
    text-decoration: none;
    font-weight: 700;
    color: #03C
}
a:hover {
    text-decoration: underline
}
hr {
    border: none;
    border-bottom: 1px solid #fdefd5;
    border-top: 1px solid #bca683;
    height: 0
}
.martel {
    font-family: martelregular, Verdana, Tahoma, sans-serif;
    text-shadow: 2px 2px 2px #000;
    font-weight: 400;
    font-size: 15px;
    color: #fff
}
.heading {
    margin-bottom: 25px;
    padding: 1px 0 5px;
    position: relative
}
.heading:before {
    box-shadow: 1px 1px 2px 0 rgba(50, 50, 50, .3);
    border-top: 2px solid #720000;
    border-bottom: 1px solid #590000;
    border-radius: 5px;
    position: absolute;
    content: "";
    height: 0;
    right: 0;
    left: 0;
    top: 0
}
.heading:after {
    box-shadow: 1px 1px 2px 0 rgba(50, 50, 50, .3);
    border-top: 2px solid #720000;
    border-bottom: 1px solid #590000;
    border-radius: 5px;
    position: absolute;
    content: "";
    bottom: 3px;
    height: 0;
    right: 0;
    left: 0
}
.heading h1 {
    font-family: martelregular, Verdana, Tahoma, sans-serif;
    font-weight: 400;
    margin: 10px 0 2px 10px;
    text-shadow: none;
    font-size: 45px;
    color: #720000;
    float: left
}
.button {
    font-family: Verdana, Tahoma, sans-serif!important;
    -webkit-font-smoothing: antialiased!important;
    background-image: url(../images/button-bg.jpg);
    border: none;
    border-bottom: 1px solid #424242;
    border-top: 1px solid #848484;
    background-repeat: repeat;
    box-sizing: border-box;
    display: inline-block;
    white-space: nowrap;
    text-align: center;
    border-radius: 7px;
    font-weight: 700;
    padding: 3px 20px;
    min-width: 110px;
    cursor: pointer;
    font-size: 9px;
    outline: 0;
    color: #fff;
    margin: 0
}
.button:hover {
    text-decoration: underline
}
#pandaac {
    margin: 10px auto;
    width: 1255px
}
#pandaac #header {
    background-image: url(../images/header-bg.jpg);
    border-top-right-radius: 15px;
    border-bottom: 1px solid #000;
    background-repeat: repeat
}
#pandaac #header img {
    display: block
}
#pandaac #topbar {
    background-image: url(../images/topbar-bg.png);
    background-repeat: repeat;
    padding-left: 145px;
    padding-right: 170px;
    height: 20px;
    color: #fff
}
#pandaac #topbar ul {
    table-layout: fixed;
    text-align: center;
    padding: 3px 0 0;
    list-style: none;
    display: table;
    width: 100%;
    margin: 0
}
#pandaac #topbar ul a,
#pandaac #topbar ul li {
    font-family: martelregular, Verdana, Tahoma, sans-serif;
    text-shadow: 2px 2px 2px #000;
    font-weight: 400;
    font-size: 15px
}
#pandaac #topbar ul a:hover,
#pandaac #topbar ul li:hover {
    text-shadow: 2px 2px 2px #00f
}
#pandaac #topbar ul li {
    display: table-cell
}
#pandaac #topbar ul a {
    text-decoration: none;
    display: inline-block;
    color: #fff
}
#pandaac #content-container {
    zoom: 1
}
#pandaac #content-container:after,
#pandaac #content-container:before {
    content: "";
    display: table
}
#pandaac #content-container:after {
    clear: both
}
#pandaac #content-container #sidebar {
    position: relative;
    width: 145px;
    float: left;
    z-index: 10
}
#pandaac #content-container #sidebar #sidebar-links {
    box-shadow: 3px 3px 3px 1px #000;
    background-image: url(../images/sidebar-bg.png);
    border-bottom-right-radius: 12px;
    border-bottom-left-radius: 12px;
    background-repeat: repeat;
    padding-bottom: 10px;
    text-align: center
}
#pandaac #content-container #sidebar #sidebar-links .line {
    margin: 5px 0
}
#pandaac #content-container #sidebar #sidebar-links .line:first-child {
    margin-top: 0
}
/* NOTE(dev): The sidebar section headings (Account, Community, About). Outside the
   <ul>, so the sidebar-icon.png bullet below — scoped to `ul a` and `ul form button`
   — does not reach them. */
#pandaac #content-container #sidebar #sidebar-links .group-title {
    font-family: martelregular, Verdana, Tahoma, sans-serif;
    text-shadow: 2px 2px 2px #000;
    padding: 2px 0 0;
    font-weight: 400;
    text-align: center;
    font-size: 15px;
    color: #C9A85C;
    margin: 0
}
#pandaac #content-container #sidebar #sidebar-links ul {
    text-align: left;
    list-style: none;
    padding: 5px 0;
    display: block;
    width: 100%;
    margin: 0
}
#pandaac #content-container #sidebar #sidebar-links ul a,
#pandaac #content-container #sidebar #sidebar-links ul li {
    font-family: martelregular, Verdana, Tahoma, sans-serif;
    text-shadow: 2px 2px 2px #000;
    font-weight: 400;
    font-size: 13px
}
#pandaac #content-container #sidebar #sidebar-links ul li {
    display: block;
    margin: 5px 0 5px 28px
}
#pandaac #content-container #sidebar #sidebar-links ul a {
    text-decoration: none;
    display: inline-block;
    position: relative;
    color: #fff
}
#pandaac #content-container #sidebar #sidebar-links ul a:hover:before,
#pandaac #content-container #sidebar #sidebar-links ul form button:hover:before {
    background-position: -8px 0
}
#pandaac #content-container #sidebar #sidebar-links ul a:before,
#pandaac #content-container #sidebar #sidebar-links ul form button:before {
    background: url(../images/sidebar-icon.png) no-repeat;
    position: absolute;
    display: block;
    content: "";
    height: 8px;
    left: -12px;
    width: 8px;
    top: 3px
}
/* Right sidebar: the server status and bitcoin sat figures, a panel mirroring the
   left sidebar's and floated so its top is level with it. The column widths must
   add up to #pandaac's: 145 (left) + 940 (main) + 170 (right) = 1255. */
#pandaac #content-container #sidebar-right {
    position: relative;
    width: 170px;
    float: right;
    z-index: 10
}
#pandaac #content-container #sidebar-right #sidebar-misc {
    font-family: martelregular, Verdana, Tahoma, sans-serif;
    box-shadow: -3px 3px 3px 1px #000;
    background-image: url(../images/sidebar-bg.png);
    background-repeat: repeat;
    border-bottom-right-radius: 12px;
    border-bottom-left-radius: 12px;
    padding: 10px 6px;
    text-align: center;
    font-size: 13px;
    color: #fff
}
#pandaac #content-container #sidebar-right #sidebar-misc a:not(.martel) {
    font-size: 12px;
    color: #419AFF
}
#pandaac #content-container #sidebar-right #sidebar-misc a {
    vertical-align: top
}
#pandaac #content-container #sidebar .line,
#pandaac #content-container #sidebar-right .line {
    background: url(../images/line-short.png) center center no-repeat;
    text-align: center;
    display: block;
    margin: 3px 0;
    height: 4px;
    width: 100%
}
/* NOTE(dev): Listed for both sidebars, like `.line` above — without #sidebar-right
   here a `line wide` on the right panel would silently draw the short rule instead.
   line-wide.png is 113px and the right panel's content box is 158px (170 less its
   6px padding), so it centres with room to spare. */
#pandaac #content-container #sidebar .line.wide,
#pandaac #content-container #sidebar-right .line.wide {
    background: url(../images/line-wide.png) center center no-repeat
}
#pandaac #content-container #main-container {
    width: 940px;
    float: right
}
#pandaac #content-container #main-container #main {
    border-style: solid;
    border-width: 7px 9px 9px 8px;
    -moz-border-image: url(../images/content-border.png) 7 9 9 8 repeat;
    -webkit-border-image: url(../images/content-border.png) 7 9 9 8 repeat;
    -o-border-image: url(../images/content-border.png) 7 9 9 8 repeat;
    border-image: url(../images/content-border.png) 7 9 9 8 fill repeat
}
#pandaac #content-container #main-container #main #content {
    background-image: url(../images/content-bg.jpg);
    background-repeat: repeat;
    padding: 10px
}
#pandaac #content-container #main-container #copyright {
    text-align: center;
    font-weight: 700;
    font-size: 10px;
    margin: 15px 0;
    color: #858585
}
#pandaac #content-container #main-container #copyright span,
#pandaac #content-container #main-container #copyright strong {
    color: #ababab
}
#pandaac #content-container #main-container #copyright a {
    text-decoration: none;
    color: #ababab
}
#pandaac #content-container #main-container #copyright a:hover {
    text-decoration: underline
}
#pandaac .success {
    border-bottom: 1px solid #605749;
    text-shadow: 0 1px 0 #605749;
    margin-bottom: 10px;
    background: #73a958;
    padding: 1px 20px;
    font-weight: 700;
    line-height: 14px;
    font-size: 11px;
    color: #fff
}
.error {
    font-size: 11px
}
.error:before {
    content: "\2190";
    margin: 0 5px
}
.error.up:before {
    content: "\2191"
}
.error.right:before {
    content: "\2192"
}
.error.down:before {
    content: "\2193"
}
.error.left:before {
    content: "\2190"
}
#pandaac .errors {
    border-bottom: 1px solid #604949;
    margin-bottom: 10px;
    background: #fff;
    line-height: 14px;
    font-size: 11px;
    color: #333;
    padding: 0
}
#pandaac .errors ul {
    border-left: 10px solid #e07c7c;
    padding: 5px 5px 5px 15px;
    list-style: square;
    color: #e07c7c;
    margin: 0
}
#pandaac .errors ul li {
    color: #333;
    padding-top: 5px;
    padding-bottom: 5px;
    margin: 0
}
#pandaac .online {
    font-weight: 700;
    color: #118a22
}
#pandaac .offline {
    color: #c54242
}
#pandaac .queued {
    font-weight: 700;
    color: #1f5fbf
}
#pandaac .broadcasted {
    font-weight: 700;
    color: #8a6a00
}
#pandaac form {
    padding: 0;
    margin: 0
}
#pandaac form input[type=text],
#pandaac form input[type=password] {
    font-family: Verdana, Tahoma, sans-serif;
    min-width: 190px;
    font-size: 11px;
    margin: 0
}
#pandaac table {
    border-collapse: separate;
    border-spacing: 1px;
}
#pandaac table.uniform {
    border-spacing: 0!important
}
#pandaac table.uniform tr.header td,
#pandaac table.uniform tr.header th {
    border-bottom: 1px solid #fff2db
}
#pandaac table.uniform tr:not(.header):not(.transparent) td,
#pandaac table.uniform tr:not(.header):not(.transparent) th {
    background-color: #d4c0a1!important
}
#pandaac table:not(.heading) tr.transparent.nopadding td p:first-child,
#pandaac table:not(.heading) tr.transparent.nopadding th p:first-child {
    margin-top: 0
}
#pandaac table tr:not(.header):not(.transparent).highlight td,
#pandaac table tr:not(.header):not(.transparent).highlight th {
    background-color: #fff;
    -webkit-transition: background 1s linear;
    -moz-transition: background 1s linear;
    -ms-transition: background 1s linear;
    -o-transition: background 1s linear;
    transition: background 1s linear
}
#pandaac table tr:not(.header):not(.transparent):not(.highlight):nth-child(odd) td,
#pandaac table tr:not(.header):not(.transparent):not(.highlight):nth-child(odd) th {
    background-color: #f1e0c6
}
#pandaac table tr:not(.header):not(.transparent):not(.highlight).odd td,
#pandaac table tr:not(.header):not(.transparent):not(.highlight).odd th {
    background-color: #f1e0c6!important
}
#pandaac table tr:not(.header):not(.transparent):not(.highlight):nth-child(even) td,
#pandaac table tr:not(.header):not(.transparent):not(.highlight):nth-child(even) th {
    background-color: #d4c0a1
}
#pandaac table tr:not(.header):not(.transparent):not(.highlight).even td,
#pandaac table tr:not(.header):not(.transparent):not(.highlight).even th {
    background-color: #d4c0a1!important
}
#pandaac table tr.nopadding>td,
#pandaac table tr.nopadding>th {
    padding: 0
}
#pandaac table tr.noborderpadding td:first-child,
#pandaac table tr.noborderpadding th:first-child {
    padding-left: 0
}
#pandaac table tr.noborderpadding td:last-child,
#pandaac table tr.noborderpadding th:last-child {
    padding-right: 0
}
#pandaac table tr.header th {
    background-color: #505050;
    font-weight: 700;
    color: #fff
}
#pandaac table tr td,
#pandaac table tr th {
    font-weight: 400;
    color: #5a2800;
    margin: 0
}
#pandaac table tr td:not([valign]),
#pandaac table tr th:not([valign]) {
    vertical-align: middle
}
#pandaac table tr td:not([align]),
#pandaac table tr th:not([align]) {
    text-align: left
}
.nav {
    margin: 30px auto 0;
    text-align: center
}
.nav ul {
    display: inline-block;
    list-style: none;
    padding: 0;
    margin: 0
}
.nav ul li {
    display: inline-block;
    margin: 0 7px;
    padding: 0
}
.nav ul li.active a {
    color: #f6ebd7
}
.nav ul li a {
    -webkit-font-smoothing: none;
    text-transform: uppercase;
    font-size: 11px;
    color: #afa695
}
.nav ul li a:hover {
    color: #f6ebd7
}
#footer {
    -webkit-font-smoothing: none;
    margin: 0 auto 30px;
    text-align: center;
    font-size: 11px;
    color: #afa695
}
#footer a {
    color: #afa695
}
#footer a:hover {
    color: #f6ebd7
}
#footer small {
    color: #666
}
.clearfix {
    zoom: 1
}
.clearfix:after,
.clearfix:before {
    content: "";
    display: table
}
.clearfix:after {
    clear: both
}
article.news {
    margin-bottom: 15px
}
article.news header.news-header {
    background: url(../images/news-header.png);
    line-height: 31px;
    height: 31px;
    width: 100%;
    color: #fff
}
article.news header.news-header span.news-date {
    text-shadow: 0 1px 0 #000;
    margin: 0 20px 0 10px;
    vertical-align: top;
    font-weight: 700;
    font-size: 10px
}
article.news header.news-header h2 {
    text-shadow: 0 1px 0 #000;
    font-weight: 700;
    display: inline;
    font-size: 12px;
    padding: 0;
    margin: 0
}
article.news .news-content {
    padding: 10px 5px
}
article.news footer.news-footer {
    text-align: right
}
/* ==========================================================================
   NOTE(dev): Local additions. Everything above this line is theme-tibia-old's
   app.css as shipped (minus the store/forum/editor blocks, which no markup
   here uses). Everything below exists because tibia-web's pages need a few
   things the theme never had markup for.
   ========================================================================== */

/* Left-hand label column of the key/value info tables. The theme only ever
   styled data grids, where every column is the same weight. */
#pandaac table tr td.label {
    white-space: nowrap;
    font-weight: 700;
    width: 180px
}

/* The theme styles text/password inputs but never had a <select> (character
   sex, world). Match the input rule so they line up. */
#pandaac form select {
    font-family: Verdana, Tahoma, sans-serif;
    min-width: 190px;
    font-size: 11px;
    margin: 0
}

/* `.button` is the theme's stone button. As a submit input it needs the
   font-size bumped a little to stay legible, and browsers won't inherit the
   pointer. The same for a button element, which holds a picture beside its
   text: the account page's community tools. */
#pandaac form input[type=submit].button,
#pandaac form button.button {
    font-size: 10px;
    padding: 4px 20px
}

/* The community tools' two pictures, on the account page's buttons and at the
   top of the right sidebar: each in the same black disc, the colour of Cinny's
   own logo, and drawn inside it, so that the two look the same size, as a
   site's links to its social networks do. camfind's is a figure on a clear
   ground, which fills much less of its square than Cinny's disc does.
    The disc is the picture's background, not a border-radius: a rounded
   picture is cut to a circle, and camfind's figure reaches past one at its
   corners. Each place gives its own size, and an inset of about an eighth of
   it, which keeps the whole figure inside the disc. */
#pandaac .community-tools img {
    box-sizing: border-box;
    background: radial-gradient(circle closest-side, #000 calc(100% - 1px), transparent 100%)
}

/* The account page's community tools: each button's picture before its name,
   and the two side by side. */
#pandaac table tr td.community-tools form {
    display: inline;
    margin-right: 8px
}
#pandaac table tr td.community-tools button.button img {
    width: 14px;
    height: 14px;
    padding: 2px;
    vertical-align: middle;
    margin-right: 6px
}

/* The community tools at the top of the right sidebar: two small pictures side
   by side, as a site's links to its social networks are, which say their names on
   hover. */
#pandaac #content-container #sidebar-right #sidebar-misc .community-tools {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 2px 0 6px
}
#pandaac #content-container #sidebar-right #sidebar-misc .community-tools form {
    display: inline;
    margin: 0
}
#pandaac #content-container #sidebar-right #sidebar-misc .community-tools button,
#pandaac #content-container #sidebar-right #sidebar-misc .community-tools a {
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer
}
#pandaac #content-container #sidebar-right #sidebar-misc .community-tools img {
    width: 24px;
    height: 24px;
    padding: 3px;
    display: block
}

/* Right-hand column of a row that ends in its buttons (the account page's
   community tools): as narrow as they are, and they stay on one line. */
#pandaac table tr td.buttons {
    white-space: nowrap;
    text-align: right;
    width: 1%
}

/* Sidebar server-status widget (theme's widgets/server-info.php was inline
   PHP echoing inline styles; these are those styles, named). */
#pandaac #content-container #sidebar-right #sidebar-misc .status-online,
#pandaac #content-container #sidebar-right #sidebar-misc .status-offline {
    display: block;
    font-size: 14px;
    font-weight: 700;
    margin: 3px 0
}
#pandaac #content-container #sidebar-right #sidebar-misc .status-online {
    color: #4ac94a
}
#pandaac #content-container #sidebar-right #sidebar-misc .status-offline {
    color: #e06666
}
/* Bitcoin sat figures under the server status. The box pulses a soft gold glow
   and a shine sweeps across each number to draw the eye; both are CSS only and
   stop for visitors whose system asks for reduced motion. */
#pandaac #content-container #sidebar-right #sidebar-misc .bitcoin-sats-box {
    margin: 10px 4px 4px;
    padding: 8px 6px;
    border: 1px solid rgba(255, 196, 70, .6);
    border-radius: 4px;
    background: rgba(0, 0, 0, .3);
    animation: bitcoin-sats-glow 2.4s ease-in-out infinite
}
#pandaac #content-container #sidebar-right #sidebar-misc .bitcoin-sats-world + .bitcoin-sats-world {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 196, 70, .25)
}
#pandaac #content-container #sidebar-right #sidebar-misc .bitcoin-sats {
    display: block;
    font-size: 12px;
    margin: 3px 0
}
#pandaac #content-container #sidebar-right #sidebar-misc .bitcoin-sats-count {
    display: inline-block;
    font-size: 15px;
    font-weight: 700;
    color: #ffc446;
    background: linear-gradient(100deg, #ffc446 0%, #ffc446 40%, #fff7dc 50%, #ffc446 60%, #ffc446 100%);
    background-size: 250% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: bitcoin-sats-shine 3s linear infinite
}
#pandaac #content-container #sidebar-right #sidebar-misc .bitcoin-sats-note {
    display: block;
    font-size: 10px;
    color: #aaa;
    margin: 6px 0 0
}
@keyframes bitcoin-sats-glow {
    0%, 100% { box-shadow: 0 0 4px rgba(255, 196, 70, .25) }
    50% { box-shadow: 0 0 14px rgba(255, 196, 70, .75) }
}
@keyframes bitcoin-sats-shine {
    from { background-position: 100% 0 }
    to { background-position: 0% 0 }
}
@media (prefers-reduced-motion: reduce) {
    #pandaac #content-container #sidebar-right #sidebar-misc .bitcoin-sats-box,
    #pandaac #content-container #sidebar-right #sidebar-misc .bitcoin-sats-count {
        animation: none
    }
}

/* Tables are the page's structural element here, so they need breathing room
   between them and a little cell padding. The theme got this from MyAAC's
   core markup, which wrapped every table in a .TableContainer div. */
#pandaac #content table {
    margin-bottom: 15px;
    width: 100%
}
#pandaac #content table tr td,
#pandaac #content table tr th {
    padding: 3px 5px
}
#pandaac #content table:last-child {
    margin-bottom: 0
}

/* Centred row of action buttons under a form or table. */
#pandaac .actions {
    text-align: center;
    margin: 15px 0
}
#pandaac .actions .button {
    margin: 0 4px
}

/* Active nav item. The theme only ever highlighted on hover (blue text-shadow
   on the topbar); reuse that treatment so the current page reads as "held". */
#pandaac #topbar ul li.active a,
#pandaac #content-container #sidebar #sidebar-links ul li.active a {
    text-shadow: 2px 2px 2px #00f
}

/* Logout is a POST carrying a CSRF token, so the sidebar entry is a <button>
   inside a form rather than an <a>. Strip the browser's button chrome and take
   the rest from the <li>, which already carries the theme's font, size and
   text-shadow (text-shadow inherits, so it needs no restating). The bullet
   comes from the a:before rule above, extended to cover this button. */
#pandaac #content-container #sidebar #sidebar-links ul form {
    display: inline
}
#pandaac #content-container #sidebar #sidebar-links ul form button {
    text-decoration: none;
    display: inline-block;
    background: none;
    position: relative;
    cursor: pointer;
    font: inherit;
    color: #fff;
    padding: 0;
    border: 0
}