/***********************************************************************
* retro-1620/webUI Common.css
************************************************************************
* Copyright (c) 2021, Paul Kimpel.
* Licensed under the MIT License, see
*       http://www.opensource.org/licenses/mit-license.php
************************************************************************
* IBM 1620 emulator common style sheet.
************************************************************************
* 20212-07-19  P.Kimpel
*   Original version, from retro-g15 Common.css
***********************************************************************/

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

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

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

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

HTML {
    height:             100%}

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

BODY.panelBody {
    position:           relative;
    font-size:          8pt;
    margin:             0;
    padding:            0;
    user-select:        none;
    cursor:             default}

BODY.deviceBody {
    font-size:          7pt;
    overflow:           hidden;
    margin:             0;
    padding:            0;
    background-color:   #678;
    color:              white;
    user-select:        none;
    cursor:             default}

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

H2 {
    margin-top:         1em;
    margin-bottom:      1em;
    font-size:          12pt;
    font-weight:        bold}

PRE.paper,
IFRAME.paper {
    font-family:        DejaVuSansMonoBookWeb, monospace;
    font-size:          12px;
    line-height:        120%;
    color:              black;
    background-color:   white}

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:          8pt}

DIV.paper {
    position:           relative;
    font-family:        DejaVuSansMonoBookWeb, monospace;
    white-space:        pre;
    margin-top:         0;
    margin-bottom:      0;
    font-size:          12px;
    line-height:        12pt}
DIV.printerPaper {
    font-family:        DejaVuSansMonoBookWeb, monospace;
    white-space:        pre;
    margin-top:         0;
    margin-bottom:      0;
    font-size:          8pt;
    line-height:        12pt}           /* 6lpi */
DIV.topOfForm {
    position:           relative;
    break-before:       always;
    top:                -1px;
    border-top:         1px dashed black}
DIV.whiteBar {
    position:           relative;
    margin-left:        -6px;
    margin-right:       -6px;
    padding-left:       6px;
    padding-right:      6px;
    white-space:        pre;
    background-color:   white}
DIV.greenBar {
    position:           relative;
    margin-left:        -6px;
    margin-right:       -6px;
    padding-left:       6px;
    padding-right:      6px;
    white-space:        pre;
    background-color:   #CFC}
DIV.whiteBar > DIV,
DIV.greenBar > DIV {
    position:           relative}
DIV.overstrikeLine {
    position:           absolute;
    top:                0;
    left:               0}

DIV.caption {
    position:           absolute;
    z-index:            1;
    font-size:          10px;
    font-weight:        normal;
    line-height:        100%;
    text-align:         center}

DIV.panelSurface {
    position:           relative;
    background-color:   #246;
    color:              white}

DIV.panelRegister {
    position:           absolute;
    overflow:           hidden;
    color:              white;
    font-size:          6px;
    box-shadow:         6px 6px 8px #333}

DIV.panelSpacer {
    position:           absolute;
    width:              2px;
    height:             52px;
    background-color:   white;
    border:             1px solid gray;
    border-radius:      2px}

DIV.panelDiv {
    position:           absolute;
    overflow:           hidden;
    color:              black;
    font-size:          6px}

DIV.panelCaption {
    position:           absolute;
    z-index:            1;
    text-align:         center;
    height:             5px;
    font-size:          5pt;
    border-left:        1px solid white;
    border-right:       1px solid white;
    border-top:         1px solid white}

DIV.boxCaption {
    position:           absolute;
    z-index:            2;
    width:              100%;
    top:                -12px;
    left:               -3px;
    font-size:          8px;
    text-align:         center}

DIV.annunciator {
    position:           absolute;
    font-family:        DejaVuSansWeb, sans-serif;
    font-size:          7pt;
    color:              #00000075;
    line-height:        100%;
    text-align:         center}
DIV.annunciatorLit {
    color:              #FFEE99}


SPAN.panelSpan {
    position:           relative;
    top:                -1em;
    font-size:          5pt;
    font-weight:        bold;
    padding-left:       2px;
    padding-right:      2px;
    background-color:   #246}

DIV.panelRegCaption {
    position:           absolute;
    font-size:          7pt;
    font-weight:        normal;
    text-align:         center;
    height:             5px;
    left:               calc(50% - 60px);
    width:              120px;
    bottom:             0;
    border-top:         1px solid black}

SPAN.panelRegSpan {
    position:           relative;
    top:                -1em;
    font-size:          7pt;
    padding-left:       2px;
    padding-right:      2px;
    background-color:   #CDE}

SPAN.panelRegSpan {
    position:           relative;
    top:                -1em;
    font-size:          12px;
    padding-left:       2px;
    padding-right:      2px;
    background-color:   #67AAB2}

DIV.gateLamp {
    position:           absolute;
    z-index:            1;
    width:              14px;
    height:             14px;
    font-size:          4px;
    border-radius:      50%;
    border:             2px solid #222;
    background-image:   radial-gradient(#666666 33%, #333333)}  /* was 666666, 777777 */
DIV.gateLit1 {
    background-image:   radial-gradient(#807866 20%, #333333)}  /* was 807866, 807D75, A09388 try 8C8878 ?? */
DIV.gateLit2 {
    background-image:   radial-gradient(#9A8966 20%, #333333)}  /* was 9A8966, 999484, B3A696 try A39981 ?? */
DIV.gateLit3 {
    background-image:   radial-gradient(#B3A273 20%, #444444)}  /* was B3A273, B3AB93, C6B9A4 try BAAA87 ?? */
DIV.gateLit4 {
    background-image:   radial-gradient(#CCBB80 20%, #666666)}  /* was CCBB80, CCC2A2, D9CCB2 try D1BB8D ?? */
DIV.gateLit5 {
    background-image:   radial-gradient(#E6D58C 33%, #807866)}  /* was E6D58C, E6D9B1, ECDFC0 try E8CC93 ?? */
DIV.gateLit {
    background-image:   radial-gradient(#FFEE99 33%, #9A8966)}  /* was FFEE99, FFF0C0, FFF2CE try FFDD99 as a base ?? */

DIV.gateLampTopCaption {
    position:           absolute;
    width:              28px;
    bottom:             17px;
    left:               -7px;
    line-height:        100%;
    font-size:          7px;
    text-align:         center}
DIV.gateLampBottomCaption {
    position:           absolute;
    width:              28px;
    top:                18px;
    left:               -7px;
    font-size:          7px;
    text-align:         center}

BUTTON.panel {
    position:           absolute;
    font-family:        DejaVuSansWeb, sans-serif;
    font-size:          7pt;
    font-weight:        normal;
    line-height:        120%;
    width:              56px;
    height:             48px;
    padding-left:       0;
    padding-right:      0;
    border-top:         6px solid white;
    border-bottom:      6px solid white;
    border-left:        none;
    border-right:       none}

BUTTON.darkBlueButton {
    color:              #FFC;
    cursor:             pointer;
    background-image:   linear-gradient(#0C2340, #000020, #0C2340)}       /* #0C2340=Pantone 289C */
BUTTON.darkBlueButtonDown {
    color:              #CCC;
    background-image:   none;
    background-color:   #000020}

BUTTON.device {
    position:           absolute;
    font-family:        DejaVuSansWeb, sans-serif;
    font-size:          7pt;
    font-weight:        bold;
    line-height:        120%;
    width:              56px;
    height:             42px;
    padding:            0;
    border:             1px solid black;
    border-radius:      2px}

BUTTON.redButton {
    color:              black;
    background-image:   linear-gradient(#C00, #900, #C00)}
BUTTON.redButtonDown {
    background-color:   #900;
    background-image:   none}

BUTTON.greenButton {
    color:              black;
    background-image:   linear-gradient(#0C0, #090, #0C0)}
BUTTON.greenButtonDown {
    background-color:   #090;
    background-image:   none}

BUTTON.yellowButton {
    color:              black;
    background-image:   linear-gradient(#CC3, #993, #CC3)}
BUTTON.yellowLit {
    background-image:   linear-gradient(#FF0, #CC0, #FF0)}
BUTTON.yellowButtonDown {
    background-color:   #990;
    background-image:   none}

BUTTON.whiteButton {
    color:              black;
    background-image:   linear-gradient(#CCC, #999, #CCC)}
BUTTON.whiteLit {
    background-image:   linear-gradient(#FFF, #CCC, #FFF)}
BUTTON.whiteButtonDown {
    background-color:   #999;
    background-image:   none}

BUTTON.whiteLamp {
    color:              black;
    background-image:   linear-gradient(#B3A696, #D9CCB2, #B3A696)}
BUTTON.whiteLit1 {
    background-image:   radial-gradient(circle, #DCD0B9 33%, #DCD0B9 67%, #B6A998)}
BUTTON.whiteLit2 {
    background-image:   radial-gradient(circle, #E0D3C1 33%, #E0D3C1 67%, #B9AC9B)}
BUTTON.whiteLit3 {
    background-image:   radial-gradient(circle, #E4D7C8 33%, #E4D7C8 67%, #BDB09B)}
BUTTON.whiteLit4 {
    background-image:   radial-gradient(circle, #E7DBCF 33%, #E7DBCF 67%, #C0B39F)}
BUTTON.whiteLit5 {
    background-image:   radial-gradient(circle, #EBDED7 33%, #EBDED7 67%, #C3B6A2)}
BUTTON.whiteLit {
    background-image:   radial-gradient(circle, #FFF2CE 33%, #EEE2DE 67%, #C6B9A4)}

BUTTON.orangeLamp {
    color:              black;
    background-image:   linear-gradient(#8E3A22, #B14A2A, #8E3A22)}
BUTTON.orangeLit1 {
    background-image:   radial-gradient(circle, #BE5723 33%, #B14A2A 67%, #B14A2A)}
BUTTON.orangeLit2 {
    background-image:   radial-gradient(circle, #CB641C 36%, #BE5723 69%, #BE5723)}
BUTTON.orangeLit3 {
    background-image:   radial-gradient(circle, #D87115 39%, #CB651C 71%, #CB641C)}
BUTTON.orangeLit4 {
    background-image:   radial-gradient(circle, #E57E0E 42%, #D87115 74%, #D87115)}
BUTTON.orangeLit5 {
    background-image:   radial-gradient(circle, #F28C07 46%, #E57E0E 77%, #E57E0E)}
BUTTON.orangeLit {
    background-image:   radial-gradient(circle, #FF9900 50%, #FF7700 80%, #FF5500)}

BUTTON.greenLamp {
    color:              black;
    background-image:   linear-gradient(#00664F, #008869, #00664F)}
BUTTON.greenLit {
    background-image:   radial-gradient(circle, #0F0 33%, #0E0 67%, #0C0)}

DIV.toggleSwitchBox {
    position:           absolute;
    width:              24px;
    /*height:             30px;*/
    cursor:             pointer}
DIV.toggleSwitchBox IMG {
    width:              100%}
DIV.toggleSwitchTopCaption {
    position:           absolute;
    width:              64px;
    bottom:             44px;
    left:               -20px;
    line-height:        100%;
    font-size:          5pt;
    font-weight:        normal;
    text-align:         center}
DIV.toggleSwitchBottomCaption {
    position:           absolute;
    width:              64px;
    top:                38px;
    left:               -20px;
    font-size:          5pt;
    font-weight:        normal;
    text-align:         center}

SPAN.flag {
    white-space:        pre;
    text-decoration:    overline}
SPAN.strike {
    white-space:        pre;
    text-decoration:    line-through}
SPAN.flagstrike {
    white-space:        pre;
    text-decoration:    overline line-through}

.bold {
    font-weight:        bold}
.center {
    text-align:         center}
.rj {
    text-align:         right}
.data {
    font-family:        DejaVuSansMonoBookWeb, monospace}
.ibmBlue {
    background-color:   #3576BA}        /* was 718DBD, supposed to be Pantone 116-16 U (#147599), but that's UGLY */
.ibmGray {
    background-color:   #4A4B4D}        /* was 555555, now Pantone 19-3906 TCX */
.number {
    font-family:        DejaVuSansMonoBookWeb, monospace;
    text-align:         right}
.nowrap {
    white-space:        nowrap}