@font-face {
    font-family: OpenRailAlphabetDark;
    src: url(open_rail_alphabet_dark_0_0_1_a.ttf);
}

h1,h2,h3 {font-family: OpenRailAlphabetDark;}
h1 { font-size:30pt; }
h2 { font-size:20pt; }
h3 { font-size:15pt; }

body {
    background-color: #04000b;
    color: #ddf;
    font-family: monospace;
    margin:0;
    width:100%;
}

.container {
    position: relative;
    min-height: 100vh;
    box-sizing: border-box;
    display: grid;
    grid-template-rows: auto auto 1fr auto;
}

.content {
    width:        80%;
    margin-left:  auto;
    margin-right: auto;
    border-left:  solid 1px #88f;
    padding-left: 20px;
    padding-top:  10px;
    padding-bottom: 10px;
    font-size:12pt;
}

header,footer {
    color:#668;
    margin-left: auto;
    margin-right: auto;
    font-size: 8pt;
}

.message {
    border-left: 1px solid #633;
    padding-left: 5px;
    font-size: 15pt;
}

/* input and so on */

.inlineform {
    margin-left: auto;
    margin-right: auto;
    display: inline-block;
}

form {
    display: block;
}

input, textarea, select {
    font-family: monospace;
    border: none;
    border-left: solid 1px #88f;
    background-color: inherit;
    color:           #ddf;
    padding-left:5px;
    resize: none;
}
input:focus, textarea:focus, select:focus {
    outline: none;
}

textarea {
    width: 100%;
}

input[type=submit], select {
    color: #aaf;
    text-decoration: underline;
}

label {
        border-left: solid 1px #88f;
        padding-left:5px;
}

label :invalid + span { color: #A44; }
label :valid + span { color: #4A4; }

/* content */

.note {
    border-left: 1px solid #663;
    padding-left: 5px;
}

.deemphasis {
    color:#787880;
}

.notehead {
    display:block;
    color:#787880;
}

.normal {
    color:#ddf;    
}

/* Outline table */
.uid      { min-width: 6ch;  }
.stp      { width: 3ch;  }
.operator { width: 2ch; }

/* Location only */
.as-required { font-style: italic; }
.origin, .destination {
    max-width: 26ch;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* General links */
a:link {
    text-decoration: underline;
    color: #aaf;
}

a:visited {
    text-decoration: underline;
    color:           #aad;
    font-weight:     normal;
}

a:hover, a:active {
    text-decoration: underline;
}

/* Responsiveness */

.vertical-only { display:none; }
.flex-break { display:none; }

@media (max-aspect-ratio: 1/1)
{
    .content
    {
        width: 100%;
        margin-left: 0;
        margin-right:0;
        padding-left:0;
        border-left:none;
    }

    .horizontal-only { display:none; }

    .vertical-only { display:inherit; }

    /* Make sure horizontal only is truly dead */
    .collapse .horizontal-only {
        display:none;
    }

}