/*  THE SANS STACK, DEFINED ONCE.

    This was var(--sho-sans) in five rules - and nothing ever loaded Open
    Sans, so every one of them has always rendered as the browser's default
    sans-serif. The choice was to add a Google Fonts request or to stop asking
    for a font that never arrives.

    Stopping. A webfont costs a third-party request on every page, blocks text
    until it resolves, and puts visitor IP addresses in front of another company
    on the same site that serves a privacy policy. The stack below is what
    Bootstrap itself uses: it renders in the operating system's own interface
    font, needs no download, and is what these rules have been falling back to
    anyway - only now deliberately, and better.  */
:root { --sho-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; }
body { margin: 0; padding: 0; background-color: #242b48; color: #848282; font-family: var(--sho-sans); font-size: 11pt; font-weight: 300; line-height:22px; }
h1 { font-family: Arial; font-size: 20pt; text-align: center; font-weight: 500; color: #4b4a4a; border-bottom:dotted 1px #4b4a4a; margin-top:0px; margin-bottom:30px; }
h2 { font-family: Arial; font-size: 16pt; font-weight: 500; text-align: center; color: #1a1a1a; border-bottom:solid 1px #e6e6e6; margin-top:0px; margin-bottom:20px; }
h3 { font-family: Arial; font-size: 14pt; font-weight: 500; text-align: center; color: #1a1a1a; margin-top:0px; margin-bottom:10px; }
h4 { font-family: Arial; font-size: 13pt; font-weight: 500; text-align: center; color: #1a1a1a; margin-top:0px; margin-bottom:5px; }
h5 { font-family: Arial; font-size: 12pt; font-weight: 500; text-align: center; color: #1a1a1a; }
label { display: inline-block; margin-bottom: 5px; }
table { border: 0px; width: 95%; margin-left: auto; margin-right: auto; }
th { font-family:Arial; font-weight: 500; text-align: center; }
td { text-align: center; }
/*  THE DARK GROUND IS ON THE ARTICLE, NOT ON ITS PARAGRAPHS.

    It used to sit on "article p, article li", "article h1" and "article h2" - so
    each painted its own navy rectangle and everything else showed the page
    behind it. The margins between paragraphs were light stripes, and anything
    nobody had listed rendered dark on light: h3 and below inherited the
    near-black from the global heading rules, and links kept Bootstrap's blue on
    navy. On the container it is one panel, and colour inherits.  */
/*  THE BODY TEXT IS ON THE ARTICLE TOO, AND FOR THE SAME REASON.

    It used to sit on "article p, article li", which assumes every story arrives
    already wrapped in tags. They all do today - but the stories are about to be
    writable through the API, and a single-paragraph one posted as bare text
    would land in the panel in the site's sans face at 11pt, beside stories in
    Times at 12pt, with nothing in the markup to explain the difference. On the
    container an unwrapped story inherits what a wrapped one gets, and there is
    no rule left that has to list the tags it applies to.

    h1 TO h5 ARE UNAFFECTED. Each has a direct font-family in the global rules
    above, and a declaration that matches an element beats a value inherited into
    it, whatever the specificity of the rule the inherited value came from. So
    the headings stay Arial and centred without being restated here.

    WHAT IT DOES REACH, both wanted: h6, the one heading with no global rule of
    its own; and the news list's date column, which now matches the story it
    dates rather than the page furniture around it. ".text-end" still wins the
    alignment, being a Bootstrap utility and !important.  */
article { background-color: #000025; color: #FFFFFF; padding: 20px; border-radius: 3px;
          font-family: 'Times New Roman'; font-weight: 400; font-size: 12pt; text-align: left; }

/*  The global h1-h5 rules set a near-black colour, unreadable here. Restated
    rather than made conditional, so the global rules stay simple.  */
article h1, article h2, article h3, article h4, article h5, article h6 { color: #FFFFFF; }

/*  Bootstrap's link colour is #0d6efd, which on #000025 fails contrast badly.  */
article a { color: #9ec5ff; }
article a:hover, article a:focus { color: #cfe2ff; }

article h1 { font-family: Arial; font-size: 16pt; text-align: center; font-weight: 500; margin-bottom: 8pt; }
article h2 { font-family: Arial; font-size: 14pt; text-align: center; font-weight: 500; margin-bottom: 7pt; }
article p + p { text-indent: 0.64cm; }
article .i { font-style: italic; }
article .b { padding: 0.64cm; font-style: italic; }
article img { float: left; margin-bottom: 10px; margin-right: 10px; }

/*  THE CONTENTS BOX ON A MAGIC CRYSTALS INFO PAGE.

    Inside the article, not beside it. The article is the dark reading panel and
    is not a block formatting context, so a box floated outside it would sit on
    top of its background rather than next to it. In here it inherits the panel's
    white text and link colours and only needs a ground a shade off the panel's.

    Floated from tablet width up. Below that there is no room for prose beside a
    list, so it is an ordinary block above the text. The sans face because it is
    page furniture, not part of what is being read.  */
article .contents { background-color: #101844; border: 1px solid #32447d; border-radius: 3px; padding: 10px 15px;
                    margin-bottom: 15px; font-family: var(--sho-sans); font-size: 11pt; line-height: 20px; min-height: 0; }
article .contents ul { margin-bottom: 0; }
@media (min-width: 768px) { article .contents { float: right; width: 30%; max-width: 260px; margin-left: 20px; } }

/*  AN INFOBOX: A TABLE OF FACTS AT THE TOP OF AN INFO PAGE, WIKIPEDIA STYLE.

    Marked class="infobox" in MC.gz - the document says what the table is, and
    this decides how it looks. Chopville (info 1) is the only one today.

    ITS OWN WIDTH, NOT THE 95% EVERY OTHER TABLE GETS FROM THE RULE AT THE TOP.
    Stretched to the panel it is a 416px table's worth of facts spread across a
    thousand pixels. From tablet width up it floats right and the text runs down
    its left; it is far taller than it is wide - lists in its cells - so it
    cannot sit beside the contents box without leaving a hole under the box.

    info.aspx places the contents box after a leading infobox and marks it
    "in-flow", so the two share the top of the page - infobox right, contents
    left - rather than both floating right and fighting for the corner.

    clear: right in case an infobox ever comes later in a document, after a
    floated contents box: it drops below the box rather than squeezing in
    beside it.

    On a phone it is an ordinary block at its own width, centred by the global
    table rule's auto margins, and shrinks to fit.

    BESIDE AN INFOBOX THE CONTENTS BOX FILLS THE TEXT COLUMN, ITS ENTRIES IN TWO
    COLUMNS. At the usual 260px it left a 330px gap between itself and the
    infobox; across the column it closes that and comes out half as tall. Only
    the in-flow box does this - a document with no infobox keeps the narrow
    floated one, which has prose beside it instead of a gap.

    flow-root IS WHAT STOPS IT AT THE INFOBOX'S EDGE. An ordinary block beside a
    float is as wide as the panel, with only its lines of text shortened - so
    its ground and border would run on underneath the table. A block that
    establishes its own formatting context is narrowed to the space beside the
    float instead. break-inside keeps an entry from being split between the two
    columns. Both only from tablet width up: on a phone the box is alone on its
    line and one column is right.  */
article table.infobox { width: auto; max-width: 100%; margin-bottom: 15px; }
@media (min-width: 768px) {
    article table.infobox { float: right; clear: right; margin: 0 0 15px 20px; }
    article .contents.in-flow { float: none; display: flow-root; width: auto; max-width: none; margin-left: 0; }
    article .contents.in-flow ul { column-count: 2; column-gap: 20px; }
    article .contents.in-flow li { break-inside: avoid; }
}

/*  THE TERRITORIES TABLE: TWO ROWS TO A TERRITORY - the figures, then the
    description across the full width. Each territory is its own <tbody>, so the
    pair is one group in the markup as well as on the screen.

    NO RULE BETWEEN THE TWO ROWS OF ONE TERRITORY, and Bootstrap's usual one
    below the pair, so the eye reads a figure line and its description as one
    entry rather than 230 rows of alternating kinds. The description is left
    aligned against the global "td { text-align: center }", and set a size down
    because it is the entry's second line, not a column of its own.  */
.territories tbody > tr.facts > * { border-bottom-width: 0; }
.territories tbody > tr.notes > td { text-align: left; padding-top: 0; font-size: 0.9em; }

/*  AN EXCERPT QUOTED FROM THE BOOKS, inside a Magic Crystals info page.

    One block per excerpt, however many paragraphs it runs to - info.aspx groups
    them before this sees them. Set apart three ways, so it reads as quoted even
    at a glance: inset from both sides, a rule down the left, and the contents
    box's ground a shade off the panel's. Italic, as the book text's own set-apart
    passages are (.b above).

    Narrower margins on a phone, where 30px a side would leave a column too thin
    to read. The paragraph indent from "article p + p" still applies inside,
    which is how the books themselves set consecutive paragraphs.  */
article .excerpt { background-color: #101844; border-left: 4px solid #32447d; border-radius: 3px; padding: 12px 20px;
                   margin: 15px 0; font-style: italic; }
article .excerpt p:last-child { margin-bottom: 0; }
@media (min-width: 768px) { article .excerpt { margin: 20px 30px; } }
.copyright { background:#32447d; padding:15px; width:100%; color:#fff; text-align:center; font-family: var(--sho-sans); float:left; font-weight:400; border-radius:3px; }
/*  THE MAILING-LIST BOX (Site.master), for visitors and disabled accounts.

    ON THE RIGHT, because the left is where a reader's eye starts each line: the
    page is what they came for, and the box is something to notice afterwards.
    Beside main from 992px, where main still keeps about 630px of text; below
    it on anything narrower, where the source order already puts it between the
    page and the footer. Floated rather than grid, like the bookshelf and the
    footer around it - the footer's float:left with width:100% is what brings
    it back below both.

    main only narrows when the box is there: Site.master adds with-list to it
    alongside showing the box, so a member's pages keep the full width.

    The red top edge is the bookshelf's, so the box reads as part of the site
    rather than an advert dropped into it.  */
.sho-list { background:#ffffff; border-top:solid 5px #c93a2b; border-radius:3px; padding:20px; margin-bottom:20px; color:#555555; }
.sho-list h3 { margin-bottom:10px; }
.sho-list .btn-primary { margin-top:10px; margin-bottom:0; }
.sho-list .small { line-height:18px; }
@media (min-width: 992px) {
    main.with-list { float:left; width:calc(100% - 280px); }
    .sho-list { float:right; width:260px; }
}
/*  THE HONEYPOT, used by register.aspx and the mailing-list box. Off-screen
    rather than display:none, because a form filler that bothers to check
    visibility usually checks that one property and no more. aria-hidden and
    tabindex keep it away from screen readers and the tab order, so nobody
    using the page by keyboard or by ear can fill it in by accident.  */
.sho-hp { position:absolute; left:-9999px; top:-9999px; width:1px; height:1px; overflow:hidden; }
nav { border-radius: 0px; border: 0px solid transparent; margin-bottom: 0px; min-height: 50px; position: relative; }
header > nav { background: rgb(238,238,238); background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VlZWVlZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, rgba(238,238,238,1) 0%, rgba(255,255,255,1) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(238,238,238,1)), color-stop(100%,rgba(255,255,255,1))); background: -webkit-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(255,255,255,1) 100%); background: -o-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(255,255,255,1) 100%); background: -ms-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(255,255,255,1) 100%); background: linear-gradient(to bottom, rgba(238,238,238,1) 0%,rgba(255,255,255,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#ffffff',GradientType=0 ); border-color:transparent; }
.navbar-collapse { max-height: none; overflow-x: visible; }
header li > a { color: #413f3f; font-size: 13pt; font-weight:400; border-right:solid 1px #dedede; }
.bookshelf { background:#ffffff; border-top:solid 5px #c93a2b; padding:35px; width:100%; float:left; margin-top:10px; margin-bottom:20px; }
.bookshelf img { border: 0; }
main { background: rgb(255,255,255); background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlZWVlZWUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(238,238,238,1) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(238,238,238,1))); background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(238,238,238,1) 100%); background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(238,238,238,1) 100%); background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(238,238,238,1) 100%); background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(238,238,238,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eeeeee',GradientType=0 ); padding:25px; margin-bottom:20px; border-radius:3px; }
.form-group { margin-bottom: 0px; }
.form-control { background-color: #ffffff; background-image: none; border: 1px solid #cccccc; border-radius: 4px; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset; color: #555555; display: block; font-size: 14px; height:inherit; line-height: 1.42857; padding: 10px 12px; transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s; vertical-align: middle; width: 100%; }
.btn-primary{ font-size:15px; font-weight:500; text-align:center; color:#ffffff; margin-top:20px; margin-bottom:20px; font-family: var(--sho-sans); background:#2f4283; padding: 10px 12px; margin-bottom:20px; border:solid 1px #374779; }
@media (max-width: 1200px) { header li > a { border-right: 1px solid #dedede; color: #413f3f; font-family: var(--sho-sans); font-size: 13pt; font-weight: 400; line-height: 0; padding-left:10px; padding-right:10px; } }
@media (max-width: 1024px) { header li > a { border-right: 1px solid #dedede; color: #413f3f; font-family: var(--sho-sans); font-size: 13pt; font-weight: 400; line-height: 0; padding-left:10px; padding-right:10px; } }
@media (max-width: 768px) { header li > a { border-right: 1px solid #dedede; color: #413f3f; font-family: var(--sho-sans); font-size: 10pt; font-weight: 400; line-height: 0; padding-left: 2px; padding-right: 4px; } }
@media (max-width: 767px) { header li > a { border-right: 0px solid #dedede; color: #413f3f; font-family: var(--sho-sans); font-size: 15pt; font-weight: 400; line-height: 26px; border-bottom:dotted 1px #dedede; } }