/* =====================================================================
   ARTISANAL SOFTWARE SOCIETY — OFFICIAL STYLESHEET
   Typed by hand. Every semicolon deliberate.
   Revision 47. Revisions 1-46 were lost in a manual migration.

   NOTE TO CONTRIBUTORS: This file uses no preprocessor, no variables,
   no framework, and no imports. If you find yourself wanting any of
   these things, please close the file and reflect.
   ===================================================================== */

body {
    background-color: #f9f9f9;
    color: #000000;
    font-family: "Courier New", Courier, monospace;
    font-size: 16px;
    line-height: 1.4;
    margin: 0;
    padding: 8px;
}

/* Gerald says this width is load-bearing. Do not change. */
main {
    max-width: 60em;
    padding: 0 8px;
}

h1, h2, h3 {
    font-family: "Times New Roman", Times, serif;
    line-height: 1.2;
    margin: 16px 0;
}

h1 { font-size: 32px; }
h2 { font-size: 24px; }
h3 { font-size: 19px; }

p, ul, ol, table, blockquote {
    margin: 0 0 16px 0;
}

a:link { color: #0000EE; }
a:visited { color: #800080; }
a:active { color: #FF0000; }
/* Links are underlined by default. We did not have to type anything
   to achieve this. The old ways provide. */

hr {
    border: none;
    border-top: 1px solid #000000;
    margin: 16px 0;
}

/* The masthead. It is a border and some text. That is enough. */
.masthead {
    border-bottom: 2px solid #000000;
    margin-bottom: 16px;
    padding: 8px;
}

.masthead .society-name {
    font-family: "Times New Roman", Times, serif;
    font-size: 24px;
    font-weight: bold;
    text-transform: uppercase;
    margin: 0 0 8px 0;
}

.masthead ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.masthead li {
    display: inline;
    margin-right: 12px;
}

.masthead a.current {
    background-color: #000000;
    color: #ffffff;
    text-decoration: none;
    padding: 0 4px;
}

/* Section header bars: white on black. Depth is binary. An element
   is either on the page or it is not. */
.header-bar {
    background-color: #000000;
    color: #ffffff;
    font-family: "Times New Roman", Times, serif;
    font-size: 19px;
    font-weight: bold;
    text-transform: uppercase;
    padding: 2px 8px;
    margin: 24px 0 8px 0;
}

/* Tables are the preferred method for any layout requiring columns.
   The border attribute in the HTML does the real work; this rule
   merely collapses the doubled lines, which management approved
   after a nine-week review. */
table {
    border-collapse: collapse;
}

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

th {
    background-color: #e2e2e2;
}

blockquote {
    border-left: 4px solid #c0c0c0;
    margin-left: 0;
    padding-left: 16px;
    font-style: italic;
}

/* Buttons should look like the operating system made them,
   because it should have. */
button, input[type="submit"] {
    font-family: "Courier New", Courier, monospace;
    font-size: 16px;
    background-color: #c0c0c0;
    color: #000000;
    border: 2px outset #ffffff;
    padding: 2px 12px;
    border-radius: 0; /* This line is a firewall against modernity. */
    cursor: pointer;
}

button:active {
    border-style: inset;
}

input[type="text"], input[type="number"], textarea, select {
    font-family: "Courier New", Courier, monospace;
    font-size: 16px;
    background-color: #ffffff;
    color: #000000;
    border: 1px solid #000000;
    border-radius: 0;
    padding: 2px 4px;
}

input:focus, textarea:focus {
    outline: none;
    border: 2px solid #000000; /* No glow. Glow is for embers. */
}

textarea {
    width: 95%;
}

.small {
    font-size: 13px;
}

.center {
    text-align: center;
    /* The only centered element on this site is the end-of-file
       marker. It has earned it. */
}

.notice-box {
    border: 1px solid #000000;
    padding: 8px;
    margin-bottom: 16px;
}

.warning {
    color: #FF0000;
    font-weight: bold;
}

.footer {
    border-top: 1px solid #000000;
    margin-top: 24px;
    padding: 8px;
    font-size: 13px;
}

.footer ul {
    list-style: none;
    margin: 8px 0 0 0;
    padding: 0;
}

.footer li {
    display: inline;
    margin-right: 12px;
}

/* =====================================================================
   THE CERTIFICATE
   The certificate is centered. The Society's position on centered
   text is well documented; the certificate is the exception, granted
   after Gerald observed that a diploma aligned left looks like a
   receipt.
   ===================================================================== */

.certificate {
    border: 3px double #000000;
    padding: 4px;
    max-width: 46em;
    background-color: #ffffff;
    font-family: "Times New Roman", Times, serif;
    margin: 16px 0;
}

.cert-inner {
    border: 1px solid #000000;
    padding: 32px 40px;
    text-align: center;
}

.cert-seal {
    margin: 0 auto 16px auto;
    width: 90px;
    height: 90px;
    border: 2px solid #000000;
    border-radius: 50%; /* The seal is round because seals are round.
                           This is not a concession to modern design;
                           it is a concession to wax. */
    display: table;
}

.cert-seal-text {
    display: table-cell;
    vertical-align: middle;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 1px;
}

.cert-society {
    font-size: 28px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.cert-established {
    font-size: 13px;
    font-style: italic;
    margin-bottom: 24px;
}

.cert-title {
    font-size: 22px;
    font-variant: small-caps;
    letter-spacing: 3px;
    margin-bottom: 16px;
}

.cert-body {
    font-size: 16px;
    font-style: italic;
    margin: 8px 0;
}

.cert-name {
    font-size: 30px;
    font-style: italic;
    border-bottom: 1px solid #000000;
    display: inline-block;
    min-width: 60%;
    padding: 4px 24px;
    margin: 8px 0;
}

.cert-rank {
    font-size: 24px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 8px 0;
}

.cert-motto {
    font-size: 15px;
    letter-spacing: 3px;
    margin-top: 24px;
}

.cert-motto-translation {
    font-size: 11px;
    font-style: italic;
    margin-bottom: 24px;
}

.cert-register {
    width: 100%;
    margin: 16px 0 0 0;
}

.cert-register td {
    border: none;
    font-size: 14px;
    text-align: center;
}

.cert-signatures {
    width: 100%;
    margin: 32px 0 16px 0;
}

.cert-signatures td {
    border: none;
    width: 33%;
    text-align: center;
    font-size: 13px;
    padding: 0 12px;
}

.cert-sigline {
    border-bottom: 1px solid #000000;
    margin-bottom: 4px;
    height: 28px;
}

.cert-smallprint {
    font-size: 10px;
    margin-top: 16px;
    text-align: center;
}

/* Photographic plates. The border is not decoration; it is a frame,
   and frames are furniture, and furniture is permitted. */
.plate {
    border: 1px solid #000000;
    cursor: crosshair; /* The crosshair predates the magnifying-glass
                          cursor and will outlast it. */
}

/* The inspection loupe. Round, because optics are round; this is not
   a concession to modern design, it is a concession to glass. It casts
   no shadow, because nothing here does. */
.loupe {
    position: absolute;
    width: 200px;
    height: 200px;
    border: 2px solid #000000;
    border-radius: 50%;
    background-color: #f9f9f9;
    background-repeat: no-repeat;
    pointer-events: none;
    display: none;
}

/* =====================================================================
   THE REQUISITION FORM
   The supplies depot has no cart and no checkout. It has a form.
   The form is printed, completed in ink, and posted. This is not a
   limitation of the technology; the technology was consulted and
   agreed to stay out of it.
   ===================================================================== */

.requisition {
    border: 3px double #000000;
    padding: 4px;
    max-width: 46em;
    background-color: #ffffff;
    margin: 16px 0;
}

.req-inner {
    border: 1px solid #000000;
    padding: 24px 32px;
}

.req-heading {
    font-family: "Times New Roman", Times, serif;
    font-size: 22px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-align: center;
}

.req-subheading {
    font-size: 12px;
    text-align: center;
    margin-bottom: 16px;
}

.req-table {
    width: 100%;
}

.req-right {
    text-align: right;
    font-weight: bold;
}

.req-fields {
    width: 100%;
    margin: 16px 0 0 0;
}

.req-fields td {
    border: none;
    font-size: 14px;
    padding: 6px 8px 0 0;
    white-space: nowrap;
}

.req-fields td.req-blank {
    border-bottom: 1px solid #000000;
    width: 100%;
}

.req-declaration {
    font-size: 13px;
    margin-top: 16px;
}

/* Print rules. When the certificate — or the requisition form — is
   printed, everything that is not the document withdraws
   respectfully. */
@media print {
    .masthead, .footer, .cert-controls, .print-hide {
        display: none;
    }
    .requisition {
        margin: 0 auto;
    }
    body {
        background-color: #ffffff;
        padding: 0;
    }
    main {
        max-width: none;
        padding: 0;
    }
    .certificate {
        margin: 0 auto;
        border-color: #000000;
    }
}

/* Media queries end here. Also, they begin here, apart from the one
   above, which is for printing and therefore traditional.
   This site was designed for the monitor we use. */