/* MUME Style Sheet, Manwe */

@font-face {
    font-family: "Kelt";
    font-style: normal;
    font-weight: normal;
    src: local("Kelt Normal"), local("KeltNormal"),
         url("/Fonts/kelt.woff2") format('woff2'),
         url("/Fonts/kelt.ttf") format('ttf');
    font-display: swap;
}

@font-face {
    font-family: "Kelt";
    font-style: italic;
    font-weight: normal;
    src: local("Kelt Italic"), local("KeltItalic"),
         url("/Fonts/kelt-italic.woff2") format('woff2'),
         url("/Fonts/kelt-italic.ttf") format('ttf');
    font-display: swap;
}

@font-face {
    font-family: "Kelt";
    font-style: normal;
    font-weight: bold;
    src: local("Kelt Bold"), local("KeltBold"),
         url("/Fonts/kelt-bold.woff2") format('woff2'),
         url("/Fonts/kelt-bold.ttf") format('ttf');
    font-display: swap;
}

@font-face {
    font-family: "Merriweather";
    font-style: normal;
    font-weight: normal;
    src: local("Merriweather Regular"), local("Merriweather-Regular"),
         url("/Fonts/Merriweather-Regular.woff2") format('woff2');
    font-display: swap;
}

@font-face {
    font-family: "Merriweather";
    font-style: italic;
    font-weight: normal;
    src: local("Merriweather Italic"), local("Merriweather-Italic"),
         url("/Fonts/Merriweather-Italic.woff2") format('woff2');
    font-display: swap;
}

@font-face {
    font-family: "Merriweather";
    font-style: normal;
    font-weight: bold;
    src: local("Merriweather Bold"), local("Merriweather-Bold"),
         url("/Fonts/Merriweather-Bold.woff2") format('woff2');
    font-display: swap;
}

@font-face {
    font-family: "Roboto Mono";
    font-style: normal;
    font-weight: normal;
    src: local("Roboto Mono Regular"), local("Roboto-Mono-Regular"),
         url("/Fonts/RobotoMono-VariableFont_wght.woff2") format('woff2');
    font-display: swap;
}

@font-face {
    font-family: "Roboto Mono";
    font-style: italic;
    font-weight: normal;
    src: local("Roboto Mono Italic"), local("Roboto-Mono-Italic"),
         url("/Fonts/RobotoMono-Italic-VariableFont_wght.woff2") format('woff2');
    font-display: swap;
}

/* Always show the scroll bar */
html {
    overflow-y:scroll;
}

body {
    margin: 0;
    background: black;
}

div.msg_nav {
    margin: auto;
    padding: 1ex;
    text-align: center;
    background: black;
}
div.msg_nav a {
    margin-left: 1em;
    margin-right: 1em;
}

div.msg_nav .arrow {
    color: silver;
}

table.warlords {
    border-collapse: collapse;
    margin-left: auto;
    margin-right: auto;
    transform: translateX(0px);
}

.warlords .msg_body .msg_head {
    border-top: 1px;
}

.warlords th, .warlords td {
    border-collapse: collapse;
    border-width: 1px;
    border-color: silver;
    border-style: solid;
    padding: 0.25rem;
}

.warlords td.rank {
    text-align: right;
}

.warlords th {
    text-align: center;
}

.msg_list a.subject {
    padding-left: 1em;
    text-indent: -1em;
    display: block;
}

.msg_body td.date {
    white-space: nowrap;
}

div.msg_thread {
    display: flex;
}

div.msg_thread div.arrow {
    margin: 0 0.5em;
}

.msg_list div.msg_thread a.subject {
    padding-left: 0;
    text-indent:  0;
}

/* Navbar Anchors */
:target::before {
  display: block;
  content: "";
  height: 60px;
  margin-top: -60px;
}

/* Dropdown Navbar */
nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;

    position: fixed;
    top: 0;
    width: 100%;
    z-index: 99;

    background-color: #101010;
    opacity: 0.98;
    border-bottom: 0.188rem solid darkgoldenrod; /* 3 px */
    padding: 0.25rem 0 0.25rem 0; /* 4 px */
}

/* Navbar Label */
input.toggle, label.toggle {
    display: none;
}
label.toggle {
    font-weight: 900;
    font-size: 2em;
    padding: 0.625rem 1.25rem; /* 10 px 20 px */
}

/* Navbar MUME Gandalf Logo */
.gandalf {
  position: fixed;
  top: 22px; /* 1.313rem; */
  right: calc(50% + 31.25rem); /* 500 px */
  z-index: 100;
}

/* Navbar links */
nav li a {
    text-align: center;
    vertical-align: bottom;
    font-family: "Kelt";
    font-size: 1.375rem; /* 22 px */
    color: silver;
}

/* Navbar Font Awesome Icons */
nav li a i {
    padding-top: 0.25rem; /* 4p x */
}
nav .fa.fa-external-link {
     font-size: 0.875rem; /* 14 px */
}

/* Navbar links during mouse over */
nav a:hover, nav ul li:hover {
    color: goldenrod;
    text-decoration: none;
}

/* Navbar active link */
nav a.current {
    color: goldenrod;
}

/* The dropdown container */
nav li {
    float: left;
    overflow: hidden;
    padding: 0 2.5rem; /* 40 px */
}

/* Dropdown content (hidden by default) */
nav li ul {
    position: fixed;
    top: 2.875rem; /* 46 px */

    display: none;
    padding: 0.438rem 0 0.438rem 0; /* 7px */
    background-color: #3a3a3a;
    min-width: 7.5rem; /* 120 px */
    box-shadow: 0 0.5rem 1rem 0 rgba(0,0,0,0.2); /* 8 px 16 px */
    z-index: 1;
    border-bottom: 0.188rem solid darkgoldenrod; /* 3 px */
}

/* Links inside the dropdown */
nav li ul li {
    float: none;
    padding: 0.313rem 1rem; /* 5 px 16 px */
    display: block;
    text-align: left;
}

/* Show the dropdown menu on hover */
nav li:hover ul {
    display: block;
}

/* Navbar Caret icons */
.caret {
    width: 0;
    height: 0;
    display: inline-block;
    vertical-align: text-bottom;
    border: 0.4rem solid transparent;
    margin-left: 0.125rem;
}
.caret.down{
    border-top-color: silver;
}
.caret.right{
    border-left-color: silver;
}
nav ul li a:hover .caret.down {
    border-top-color: goldenrod;
}
nav ul li a:hover .caret.right {
border-top-color: goldenrod;
}

/* Page content */
.content {
    background-color: black;
    display: block;
    margin: 0 auto;
    max-width: 56.25rem; /* 900 px */
    padding-top: 4.375rem; /* 70 px */
}

/* Play Now button */
.content .playnow {
    margin-top: 0.75em;
    text-align: center;
    background: #0a0d15;
    background-image: url(/Images/play-now-banner.jpg);
    background-position: center;
    background-size: cover;
    border-radius: 0.3em;
    padding: 1em;
    font-family: "Kelt";
    font-size: 2em;
}
@media
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 1.25dppx) {
    .content .playnow {
        background-image: url(/Images/play-now-banner@2x.jpg);
    }
}
.content .readytoexplore {
    display: inline-block;
    margin: 0 1em 0 1em;
    white-space: nowrap;
}
.content .playnow a {
    background-color: darkgoldenrod;
    padding: 0.5em 2em 0.5em 2em; /* 16 px */
    margin: 0 1em 0 1em;
    border: none;
    max-width: 18.75rem; /* 300 px */
    border-radius: 3.75rem; /* 60 px */
    box-shadow: 1px 5px 10px 0px rgba(184, 134, 11, 0.5); /* darkgoldenrod */
    color: white;
    text-decoration: none;
    white-space: nowrap;
    margin-left: auto;
    margin-right: auto;
}
.content .playnow a:hover {
    color: #3a3a3a;
    text-decoration: none;
}

.content .quote {
    margin-left: auto;
    margin-right: auto;
    width: 75%;
    margin-top: 30px;
    text-align: center;
    font-size: 1.1em;
    padding-left: 0;
    border-left: 0;
}
.content .quote .fa {
    padding-left: 3px;
    padding-right: 3px;
}
.content .quote cite {
    font-size: 0.9em;
}

.content .card {
    background-color: #0a0d15;
    border-radius: 0.3em;
}
.content .card h3 {
    margin-bottom: 1rem; /* 16px */
}
.card + .card {
    margin-top: 30px;
}
.content .card img {
    width: 100%;
    max-width: 160px;
    height: auto;
    padding: 10px 30px;
    display: inline-block;
    vertical-align: middle;
}
.content .card div {
    padding: 5px;
    display: inline-block;
    vertical-align: middle;
    width: calc(100% - 250px);
}

/* Separator */
.content .separator {
    height: 1px;
    width: 100%;
    margin-top: 1.375em; /* 22 px */
    margin-bottom: auto;
    background-color: #262626;
}
hr {
    margin-top: 1.375em; /* 22 px */
    margin-bottom: 1.375em; /* 22 px */
    height: 1px;
    width: 100%;
    background-color: #262626;
    border: none;
}
.sml hr {
    background-color: silver;
}

/* Center Images */
.content .center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
}

/* Page Footer */
footer {
    margin-top: 0.938rem; /* 15 px */
    color: darkgrey;
    text-align: center;
}
.content + footer {
    background-color: #262626;
}
.footer {
    margin: 0 auto;
    text-align: center;
    font-family: 'Merriweather', serif;
    font-size: 0.75rem; /* 12 px */
    max-width: 56.25rem; /* 900 px */
    padding: 0.938rem 0 0.938rem 0; /* 15 px */
}
.footer a, .footer a:link {
    color: darkgrey;
    text-decoration: underline;
}
.footer i {
    float: right;
    font-size: 1.375rem; /* 22 px */
    color: silver;
    padding: 0 1.563rem; /* 25 px */
}
.footer i:hover {
    color: goldenrod;
    text-decoration: none;
}

/* Responsive Reactions */
@media only screen and (max-width: 1100px) {
    /* Shrink the dropdown container's menu */
    nav li {
        padding: 0 2.1875rem; /* 35 px */
    }
}
@media only screen and (max-width: 1000px) {
    /* Shrink the dropdown container's menu */
    nav li {
        padding: 0 1.563rem; /* 25 px */
    }
}
@media only screen and (max-width: 900px) {
    /* Shrink the content and footer to fill the screen */
    .content, .footer {
        width: 100%;
    }
}
@media only screen and (max-width: 815px) {
    /* Shrink the dropdown container's menu */
    nav li {
        padding: 0 0.8125rem; /* 13 px */
    }
}

/* Navbar turns into a hamburger menu */
@media only screen and (max-width: 650px) {
    .content {
        padding-top: 0;
    }

    nav {
        display: none;
        position: relative;
        top: auto;
        background-color: #3a3a3a;
        box-shadow: 0 0.5rem 1rem 0 rgba(0,0,0,0.2); /* 8 px 16 px */
    }

    input.toggle, .toggle span {
      display: none;
    }

    input[type=checkbox]:checked ~ nav,
    label.toggle {
        display: block;
        cursor: pointer;
    }

    nav li {
        float: none;
    }

    nav li a {
        text-align: left;
        margin-right: 0.188rem; /* 3 px */
    }

    nav li:hover ul {
        display: block;
        position: relative;
    }

    nav li ul {
        display: block;
        position: relative;
        top: auto;
        border-bottom: 0;
        box-shadow: none;
        z-index: 0;
    }

    nav li ul li {
        margin-left: 1.25rem; /* 20 px */
        padding: 0;
    }

    /* Shrink Gandalf into the Menu */
    .gandalf {
        /*display: none*/
        position: absolute;
        height: 45px;
        width: 45px;
        top: 10px;
        right: calc(50% - 23px);
    }

    /* Extra padding around Play Now pill */
    .content .playnow a {
        display: block;
        margin-top: 0.5em;
        margin-bottom: 0.5em;
    }
    .content .playnow {
        background-image: url(/Images/play-now-banner@2x.jpg);
    }

    /* Undo extra padding on Navbar Anchors */
    :target::before {
        content: "";
        display: block;
        height: 0px;
        margin: 0px 0 0;
    }

    /* Center card images */
    .content .card img {
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
    .content .card div {
        width: 100%;
    }

}

* {
    line-height: 150%;
}

body, p, td, tr {
    color: silver;
    font-family: 'Merriweather', serif;
    font-size: 0.875rem; /* 14 px */
}

p {
    margin-bottom: 1rem; /* 16 px */
}

.sml p {
    margin-bottom: 0.5rem; /* 8 px */
    margin-top:    0.5rem; /* 8 px */
}

dt, dd {
    padding: 0;
    margin-bottom: 0.5rem; /* 8 px */
}

dd {
    margin-left: 2em;
    margin-bottom: 1.5em; /* 24 px */
}

ul, ol {
    padding-inline-start: 2em;
}

blockquote {
    padding-left: 1em;
    border-left: 0.2em solid silver;
    margin: 0.5rem; /* 8 px */ 0;
}

.sml ul, .sml ol {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

.sml table {
    text-align: left;
}

.sml table, .sml tr, .sml th, .sml td {
    border-spacing: 0px;
    border-collapse: collapse;
    vertical-align: top;
}

.sml dt {
    margin-bottom: 0px;
}

.sml dd {
    margin-bottom: 0.5em;	/* 8 px */
}

.sml th {
    border-bottom: 1px solid silver;
    text-align: center;
    color: white;
}

.sml table.ind th, .sml table.ind td {
    padding-bottom: 1px;
    padding-left: 3px;
    padding-right: 3px;
    padding-top: 1px;
}

.sml table table th, .sml table table td {
    padding-bottom: 1px;
    padding-left: 3px;
    padding-right: 3px;
    padding-top: 1px;
}

.sml table.ind {
    margin-bottom: 0.5rem; /* 8 px */
    margin-left: 1em;
    margin-right: 1em;
    margin-top: 0.5rem; /* 8 px */
}

div.ib {
    display: inline-block;
}

th.ralign, td.ralign {
    text-align: right;
}
th.calign, td.calign {
    text-align: center;
}
th.lalign, td.lalign {
    text-align: left;
}
th.bl, td.bl {
    border-left: 1px solid silver;
    padding-left: 3px ! important;
}
tr.ba {
    border-top: 1px solid silver;
}
tr.bb {
    border-bottom: 1px solid silver;
}
th.br, td.br {
    border-right: 1px solid silver;
    padding-right: 3px ! important;
}

pre {
    color: silver;
    font-family: 'Roboto Mono', monospace;
    font-size: 0.875rem; /* 14 px */
}

.sml pre {
    margin: 0.5rem 0;
}

.sml em {
    color: white;
}

pre.single {
    margin: 0;
}

code {
    color: silver;
    font-family: 'Roboto Mono', monospace;
    font-size: 0.875rem; /* 14 px */
    background: #333333;
    padding-left: 2px;
    padding-right: 2px;
}

pre code {
    padding-left: 0;
    padding-right: 0;
}

ol.long > li, ul.long > li {
    margin-bottom: 0.5rem; /* 8 px */
}

body.plain {
    background: black;
}

h1, h2, h3, h4 {
    font-family: 'Merriweather', serif;
    background: transparent;
    font-weight: bold;
}

.sml h1, .sml h2, .sml h3, .sml h4 {
    text-align: inherit;
}

h1, .h1 {
    color: silver;
    text-align: center;
    font-style: italic;
    font-size: 1.5rem; /* 24 px */
    padding-top: 0.5em;
    margin: 0.5em 0;
}

p.created {
    text-align: right;
    font-size: smaller;
}

.wizlist, .wizlist h2 {
    text-align: center;
}

.sml h1, .sml h2, .sml h3 {
    color: goldenrod;
}

.sml a {
    color: darkgoldenrod;
}

h2, h3 {
    color: #74a9be;
    /* color: #2d5ab4;
    /* color: #4080c0; */
    /* color: #e4ba3c; */
    /* color: #cc9933; */
    /* color: #004080; */
    text-align: left;
    font-style: italic;
    padding-top: 0.5em;
    margin: 0.25em 0 0.5em;
}

h2 {
    margin-top: 0.5em;
    font-size: 1.25rem; /* 20 px */
}

h3 {
    font-size: 1rem; /* 16 px */
}

h4 {
    margin-top: 1rem;
    text-align: left;
}

img {
    border: 0;
}

a {
    color: #cc9933;
}

a:link {
    text-decoration: none;
}

a:visited {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

.small {
    font-size: 0.75rem; /* 12 px */
}

.msg_head {
    background: #666666;
    color: silver;
    margin-left: auto;
    margin-right: auto;
}

.msg_body {
    background: #333333;
    color: silver;
    text-align: left;
    margin-left: auto;
    margin-right: auto;
    border-spacing: 0;
}

.msg_body tr td, .msg_body2 tr td {
    vertical-align: text-top;
    padding: 0.25rem; /* 4 px */
}

.board_body > * {
    padding: 0.5rem;        /* 8 px*/
}

.board_body code {
    background: #606060;
}

.msg_body2 {
    background: #3c3c3c;
    color: silver;
    width: 100%;
}

.command {
    /* font-weight: bold; */
    color: white; /* was #c02040 */
}

.quote {
    font-family: 'Merriweather', serif;
    font-size: 1rem; /* 16 px */
}

.black {
    color: black;
}

.bg_gray {
    background: #999999; /* #808080; */
}

.agora_small {
    font-size: 0.875rem; /* 14 px */
}

.agora_toolbar {
    background: #cccccc;
    color: black;
    font-family: 'Merriweather', serif;
    text-align: right;
}

.narrate {
    color: yellow;
}

.damage {
    color: red;
}

.say {
    color: cyan;
}

.hit {
    color: cyan;
}

.look {
    color: #33cc00; /* green; */
}

.tell {
    color: #33cc00; /* green; */
}

.explanation {
   margin-top: 1rem; /* 16px */
}

.session {
    font-family: 'Roboto Mono', monospace;
    font-size: 0.875rem; /* 14 px */
}

.header {
    color: #74a9be;
    /*color: #2d5ab4;*/
    text-align: left;
    font-style: italic;
    font-weight: bold;
    font-size: 1.25rem; /* 20 px */
}

.pre-wrap {
    white-space: pre;
}

/* Help Files */
.help .help-letter, .help .e a {
    padding: .2em;
}
@media (pointer: coarse) {
  .help .help-letter, .help .e a {
    padding: .8em;
    line-height: 44px;
  }
}