/*
   National Adaptive Systems Research, Inc.
   www.nasri-us.com

   Two presentations only.

   1. body.splash  ..... the front door. Corporate blue, mark, index of sections.
   2. everything else .. plain document. White ground, black text, default link
                         colors, no ornament beyond a rule and a heading.

   No rounded corners. No shadows. No web fonts. No script.
*/

:root {
    --corp-blue: #0164A2;
    --corp-blue-dk: #014E7E;
    --corp-blue-lt: #3F8CBC;
    --link: #0000EE;
    --link-visited: #551A8B;
}

/* ------------------------------------------------------------------ *
 * 1. FRONT DOOR
 * ------------------------------------------------------------------ */

body.splash {
    background-color: var(--corp-blue);
    color: #FFFFFF;
    font-family: "Times New Roman", Times, serif;
    margin: 0;
    padding: 40px 16px 24px 16px;
    text-align: center;
}

.splash-inner {
    max-width: 660px;
    margin: 0 auto;
    text-align: center;
}

/* The mark carries the same blue as the ground, so it sits on the page
   with no visible plate around it. */
.mark {
    display: block;
    width: 190px;
    height: 190px;
    margin: 0 auto 18px auto;
    border: 0;
}

.corp-name {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 27px;
    font-weight: bold;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin: 0 0 6px 0;
    line-height: 1.15;
}

.corp-name-full {
    font-family: "Times New Roman", Times, serif;
    font-size: 15px;
    margin: 0 0 22px 0;
    color: #DCEAF4;
}

.corp-blurb {
    font-size: 14px;
    line-height: 1.45;
    margin: 0 auto 8px auto;
}

.corp-est {
    font-size: 12px;
    color: #BFD9EA;
    margin: 0 0 26px 0;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.rule-white {
    border: 0;
    border-top: 1px solid var(--corp-blue-lt);
    margin: 22px 0;
}

/* Section index. Two columns on a desktop, one on a handset. */
.index-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background-color: var(--corp-blue-lt);
    border: 1px solid var(--corp-blue-lt);
    margin-bottom: 26px;
}

.index-grid div {
    background-color: var(--corp-blue);
    padding: 10px 12px;
}

.index-grid a {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: bold;
    color: #FFFFFF;
    text-decoration: underline;
}

.index-grid a:visited {
    color: #D8E7F2;
}

/* One flat sentence under each link, in the manner of a 1990s
   institutional index page. */
.index-grid span {
    display: block;
    font-size: 12px;
    line-height: 1.4;
    color: #D2E4F0;
    margin-top: 3px;
}

.splash-notice {
    font-size: 12px;
    line-height: 1.45;
    border: 1px solid var(--corp-blue-lt);
    padding: 9px 11px;
    margin-bottom: 24px;
    color: #E4F0F8;
}

.splash-foot {
    font-size: 11px;
    line-height: 1.55;
    color: #BFD9EA;
    border-top: 1px solid var(--corp-blue-lt);
    padding-top: 14px;
}

.splash-foot a {
    color: #FFFFFF;
}

.splash-foot a:visited {
    color: #D8E7F2;
}

@media (max-width: 560px) {
    .index-grid {
        grid-template-columns: 1fr;
    }

    .mark {
        width: 140px;
        height: 140px;
    }

    .corp-name {
        font-size: 21px;
        letter-spacing: 1px;
    }
}

/* ------------------------------------------------------------------ *
 * 2. DOCUMENT PAGES
 * ------------------------------------------------------------------ */

body {
    background-color: #FFFFFF;
    color: #000000;
    font-family: "Times New Roman", Times, serif;
    font-size: 16px;
    line-height: 1.4;
    margin: 12px 14px 40px 14px;
}

/* Held to roughly the width a 1997 page was laid out for, centred in the
   window so the column carries an even gutter on both sides. */
.doc {
    max-width: 760px;
    margin: 0 auto;
}

a {
    color: var(--link);
}

a:visited {
    color: var(--link-visited);
}

/* Divided two-line nav bar with the mark in the first cell and a heavy
   rule beneath, after the institutional web bars of the period. */
.navbar {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    border-bottom: 3px solid #000000;
    margin: 0 0 4px 0;
    padding: 0;
}

.navbar div {
    padding: 2px 11px 4px 11px;
    border-left: 1px solid #999999;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    line-height: 1.2;
    text-align: center;
    text-transform: capitalize;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.navbar div:first-child {
    border-left: 0;
    padding-left: 0;
    padding-right: 14px;
}

.navbar a {
    text-decoration: none;
    color: #000000;
}

.navbar a:visited {
    color: #000000;
}

.navbar a:hover {
    text-decoration: underline;
}

/* First cell carries the institute mark itself. The plate is the corporate
   blue of the front door, so it reads as a printed tile against the white. */
.navbar .nav-mark {
    font-family: Arial, Helvetica, sans-serif;
    color: var(--corp-blue);
}

.navbar .nav-mark a {
    color: var(--corp-blue);
}

.navbar .nav-mark img {
    display: block;
    width: 40px;
    height: 40px;
    border: 0;
    margin: 0 auto 2px auto;
}

.navbar .nav-mark span {
    display: block;
    font-size: 13px;
    font-weight: normal;
    letter-spacing: 0;
    color: #000000;
}

/* Current page reads as plain text, not a link. */
.navbar .here {
    font-weight: bold;
}

.trail {
    font-size: 13px;
    margin: 6px 0 0 0;
}

h1 {
    font-size: 27px;
    font-weight: bold;
    margin: 18px 0 2px 0;
}

.subtitle {
    font-size: 14px;
    font-style: italic;
    margin: 0 0 4px 0;
}

h2 {
    font-size: 22px;
    margin: 28px 0 7px 0;
    border-bottom: 1px solid #000000;
}

h3 {
    font-size: 18px;
    margin: 20px 0 4px 0;
}

h4 {
    font-size: 16px;
    margin: 15px 0 3px 0;
}

p {
    margin: 0 0 10px 0;
}

ul, ol {
    margin: 0 0 10px 0;
    padding-left: 30px;
}

li {
    margin-bottom: 3px;
}

dl {
    margin: 0 0 10px 0;
}

dt {
    font-weight: bold;
    margin-top: 8px;
}

dd {
    margin: 0 0 0 24px;
}

hr {
    border: 0;
    border-top: 1px solid #808080;
    margin: 18px 0;
}

blockquote {
    margin: 10px 0 10px 26px;
    padding: 0;
}

/* Data tables get a plain 1px grid and nothing else. */
table {
    border-collapse: collapse;
    margin: 10px 0 14px 0;
    font-size: 14px;
}

th, td {
    border: 1px solid #000000;
    padding: 3px 7px;
    text-align: left;
    vertical-align: top;
}

th {
    font-weight: bold;
    background-color: #E8E8E8;
}

/* Report numbers, designators, contract vehicles. */
.desig {
    font-family: "Courier New", Courier, monospace;
    font-size: 13px;
}

/* Document retrieval, and the message it leaves behind when it does not
   work, which is every time since the document server went out of service. */
.dl {
    font-family: "Courier New", Courier, monospace;
    font-size: 13px;
    white-space: nowrap;
}

.dl-fail {
    font-family: "Courier New", Courier, monospace;
    font-size: 13px;
    color: #990000;
}

/* Boxed administrative notice. Rule only, no fill. */
.notice {
    border: 1px solid #000000;
    padding: 8px 11px;
    margin: 14px 0;
    font-size: 14px;
}

.notice-head {
    font-weight: bold;
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 1px;
}

.small {
    font-size: 12px;
}

.docfoot {
    border-top: 1px solid #808080;
    margin-top: 30px;
    padding-top: 10px;
    font-size: 12px;
    line-height: 1.5;
}

/* ------------------------------------------------------------------ *
 * WATERMARK
 * One faint copy of the mark, fixed to the centre of the viewport,
 * behind all other content. Present on the public pages only, not on
 * the personnel login.
 * ------------------------------------------------------------------ */

.watermark {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
    pointer-events: none;
    user-select: none;
}

.watermark img {
    display: block;
    width: 45vw;
    max-width: 480px;
    height: auto;
    opacity: 0.05;
}

/* ------------------------------------------------------------------ *
 * 3. PERSONNEL LOGIN
 * ------------------------------------------------------------------ */

body.login {
    background-color: #FFFFFF;
    margin: 0;
    padding: 60px 16px;
}

.login-box {
    max-width: 400px;
    margin: 0 auto;
    border: 1px solid #000000;
    padding: 20px 22px 22px 22px;
}

.login-box h1 {
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0;
}

.login-box .subtitle {
    margin-bottom: 14px;
}

.login-field {
    margin-bottom: 10px;
}

.login-field label {
    display: block;
    font-size: 13px;
    font-weight: bold;
    margin-bottom: 2px;
}

/* Form controls are drawn the way a 1999 browser drew them: sunken fields,
   raised grey buttons, bevels made of border-style and nothing else. No
   rounded corners, no gradients, no focus rings. */
input[type="text"],
input[type="password"] {
    width: 100%;
    box-sizing: border-box;
    font-family: "Courier New", Courier, monospace;
    font-size: 14px;
    padding: 2px 3px;
    border: 2px inset #DFDFDF;
    background-color: #FFFFFF;
    color: #000000;
    border-radius: 0;
    -webkit-appearance: none;
    appearance: none;
}

input[type="submit"] {
    font-family: "Times New Roman", Times, serif;
    font-size: 14px;
    font-weight: bold;
    color: #000000;
    padding: 3px 20px;
    margin-top: 8px;
    background-color: #D4D0C8;
    border: 2px outset #D4D0C8;
    border-radius: 0;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

/* The button physically sinks when pressed. This is the whole trick. */
input[type="submit"]:active {
    border-style: inset;
    padding: 4px 19px 2px 21px;
}