/***********************************************************************
* retro-lgp21/webUI Common.css
************************************************************************
* Copyright (c) 2026, Paul Kimpel.
* Licensed under the MIT License, see
*       http://www.opensource.org/licenses/mit-license.php
************************************************************************
* General Precision LGP-21 emulator common style sheet.
************************************************************************
* 2026-03-14  P.Kimpel
*   Original version, from retro-g15 Common.css
***********************************************************************/

@font-face {
    font-family: "DejaVuSansMonoBookWeb";
    src: url("./resources/DejaVuSansMono-webfont.woff") format("woff"),
         url("./resources/DejaVuSansMono-webfont.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "DejaVuSansWeb";
    src: url("./resources/DejaVuSans-webfont.woff") format("woff"),
         url("./resources/DejaVuSans-webfont.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "DejaVuSansWeb";
    src: url("./resources/DejaVuSans-Bold-webfont.woff") format("woff"),
         url("./resources/DejaVuSans-Bold-webfont.ttf") format("truetype");
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: "Pica10BTRoman";
    src: url("./resources/Pica10BTRoman.woff") format("woff"),
         url("./resources/Pica10BTRoman.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}

HTML {
    height:             100%;
    --gpBlue:           #699BCD;
    --turquoise:        #44CCDD;                /* was #55DDEE, officially it's #30D5C8 */
    --grecianGrey:      #B3AE9F;                /* was #dacfbe */
    --darkGrey:         #666666;
    --offWhite:         #F9F9F9}

BODY {
    font-family:        DejaVuSansWeb, sans-serif;
    font-size:          14px;                   /* ~10pt */
    background-color:   white;
    color:              black;
    height:             calc(100% - 16px);
    margin:             4px;
    padding:            4px}

BODY.panelBody {
    position:           relative;
    font-size:          11px;
    margin:             0;
    padding:            0;
    cursor:             default}

BODY.deviceBody {
    font-size:          10px;
    overflow:           hidden;
    margin:             0;
    padding:            0;
    background-color:   #246;
    color:              white;
    cursor:             default}

H1 {
    margin-top:         2em;
    margin-bottom:      1em;
    font-size:          14pt;
    font-weight:        bold}

PRE {
    font-family:        DejaVuSansMonoBookWeb, monospace}
PRE.paper {
    margin-top:         0;
    margin-bottom:      0;
    font-size:          12px}

INPUT[type=text] {
    font-family:        DejaVuSansMonoBookWeb, monospace;
    font-size:          12px}

DIV.paper {
    font-family:        Pica10BTRoman, monospace;
    white-space:        pre;
    margin-top:         0;
    margin-bottom:      0;
    font-size:          11pt;
    line-height:        12pt;
    overflow:           visible}
DIV.paper .printRed {
    color:              red}

DIV.topOfForm {
    page-break-before:  always;
    margin-top:         1px;
    padding-top:        1px;
    border-top:         1px dashed black}

DIV.caption {
    position:           absolute;
    z-index:            1;
    font-size:          12px;
    font-weight:        normal;
    line-height:        100%;
    text-align:         center}
DIV.redLit1 {
    background-image:   radial-gradient(circle, #A00, #900, #400)}
DIV.redLit2 {
    background-image:   radial-gradient(circle, #B00, #A00, #500)}
DIV.redLit3 {
    background-image:   radial-gradient(circle, #C00, #B00, #600)}
DIV.redLit4 {
    background-image:   radial-gradient(circle, #D00, #C00, #700)}
DIV.redLit5 {
    background-image:   radial-gradient(circle, #E00, #D00, #800)}
DIV.redLit {
    background-image:   radial-gradient(circle, #F00, #E00, #900)}

DIV.blackButton1 {
    position:           absolute;
    width:              16px;
    height:             16px;
    font-size:          4px;
    background-image:   radial-gradient(circle, #030, #000);
    border-radius:      50%;
    border:             8px solid silver}
DIV.redButton1 {
    position:           absolute;
    width:              18px;
    height:             18px;
    font-size:          4px;
    background-image:   radial-gradient(circle, #F00, #C00);
    border-radius:      50%;
    border:             8px solid silver}

IMG.toggleSwitch {
    position:           absolute;
    width:              24px;
    transform:          translate(-50%, -50%)}
IMG.toggleSwitch.toggleLarge {
    width:              36px}
LABEL.toggleCaptionMain {
    position:           absolute;
    line-height:        1;
    transform:          translate(-50%, 18px);
    text-align:         center;
    font-size:          10px;
    color:              white}
LABEL.toggleCaptionTopLeft {
    position:           absolute;
    width:              8ch;
    line-height:        1;
    transform:          translate(-50px, -18px);
    text-align:         right;
    font-size:          8px;
    color:              white}
LABEL.toggleCaptionMiddleLeft {
    position:           absolute;
    width:              8ch;
    line-height:        1;
    transform:          translate(-50px, -50%);
    text-align:         right;
    font-size:          8px;
    color:              white}
LABEL.toggleCaptionBottomLeft {
    position:           absolute;
    width:              8ch;
    line-height:        1;
    transform:          translate(-50px, 7px);
    text-align:         right;
    font-size:          8px;
    color:              white}

BUTTON {
    font-family:        DejaVuSansWeb, sans-serif;
    font-size:          14px;
    font-weight:        bold;
    line-height:        120%;
    width:              60px;
    height:             32px;
    padding-left:       0;
    padding-right:      0;
    border:             2px solid #DDD;
    border-radius:      8px}

BUTTON.large {
    font-family:        DejaVuSansWeb, sans-serif;
    font-size:          11px;
    font-weight:        normal;
    line-height:        120%;
    width:              60px;
    height:             40px;
    padding-left:       0;
    padding-right:      0;
    border:             1px solid #DDD;
    border-radius:      4px}

BUTTON.squareButton {
    position:           absolute;
    height:             48px;
    width:              48px;
    background-image:   radial-gradient(#CCC 33%, #DDC);
    color:              black;
    font-family:        DejaVuSansWeb;
    font-weight:        bold;
    font-size:          8px;
    padding:            2px;
    border-radius:      4px;
    border:             4px solid black;
    box-shadow:         1px 1px 3px #999}
BUTTON.whiteButtonLit {
    background-image:   radial-gradient(#FE9 33%, #EDA 75%, #DDC)}
BUTTON.redButton {
    background-image:   radial-gradient(#900, #600);
    color:              white}
BUTTON.redButtonLit {
    background-image:   radial-gradient(#F00 50%, #D00 75%, #900)}

TABLE.normal, TABLE.standard {
    border-collapse:    collapse}

TABLE.normal>TBODY>TR>TD, TABLE.standard>TBODY>TR>TD {
    padding-top:        2px;
    padding-bottom:     2px;
    padding-left:       2px;
    padding-right:      2px}

TABLE.normal.padded>TBODY>TR>TD, TABLE.standard.padded>TBODY>TR>TD {
    padding-left:       4px;
    padding-right:      4px}

TABLE.standard>THEAD>TR>TH, TABLE.standard>TBODY>TR>TD {
    font-size:          small}

TABLE.standard>THEAD>TR>TH, TABLE.normal>THEAD>TR>TH {
    vertical-align:     bottom;
    text-align:         center;
    padding-left:       0.5ex;
    padding-right:      0.5ex;
    font-weight:        bold}

TABLE.border>THEAD>TR>TH, TABLE.border>TBODY>TR>TD {
    border:             1px solid #CCC}

TABLE>TBODY.altShading>TR:nth-child(even) {
    background-color:   #CFC}

TABLE.verticalRule>THEAD>TR>TH, TABLE.verticalRule>TBODY>TR>TD {
    border-left:        1px solid #999;
    border-right:       1px solid #999}
TABLE>TBODY>TR>TD.bottomBorder {
    border-bottom:      1px solid #999}

TR {
    vertical-align:     top}
TR.middle {
    vertical-align:     middle}

.annunciator {
    visibility:         hidden;
    white-space:        nowrap;
    font-family:        DejaVuSansWeb, sans-serif;
    font-size:          10px;
    line-height:        100%}
.annunciatorLit {
    visibility:         visible}

.bold {
    font-weight:        bold}
.center {
    text-align:         center}
.rj {
    text-align:         right}
.data {
    font-family:        DejaVuSansMonoBookWeb, monospace;
    text-align:         left}
.number {
    font-family:        DejaVuSansMonoBookWeb, monospace;
    text-align:         right}
.brushedStainless {
    background: linear-gradient(-45deg, #a2a2a2 0%, #e2e2e2 49%, #a2a2a2 100%)}
.red {
    color:              red}

/* For use by setResultMsg() */
.resultMsg {
    position:           fixed;
    display:            none;
    top:                33%;
    left:               50%;
    max-width:          30em;
    transform:          translate(-50%, 0);
    z-index:            99;
    padding:            16px;
    opacity:            0;
    text-align:         left;
    font-size:          14px;
    background-color:   #FFC;
    color:              red;
    border-radius:      16px;
    border:             2px solid red;
    box-shadow:         10px 10px 10px black}
.fadeMsg {
    animation-name:     fadeAway;
    animation-duration: 6s;
    animation-timing-function: linear;
    animation-fill-mode:forwards}
@keyframes fadeAway {
    from {
        opacity:        1}
    67% {
        opacity:        1}
    to {
        opacity:        0}
    }