/***********************************************************************
* retro-220/webUI B220Common.css
************************************************************************
* Copyright (c) 2017, Paul Kimpel.
* Licensed under the MIT License, see
*       http://www.opensource.org/licenses/mit-license.php
************************************************************************
* Burroughs 220 Emulator common style sheet.
************************************************************************
* 2017-01-01  P.Kimpel
*   Original version, split from retro-205/D205Common.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;
}

HTML {
    height:             100%}

BODY {
    font-family:        DejaVuSansWeb, sans-serif;
    font-size:          10pt;
    background-color:   white;
    color:              black;
    margin:             4px;
    padding:            4px}

BODY.panelBody {
    position:           relative;
    height:             100%;
    font-size:          8pt;
    margin:             0;
    padding:            0}

BODY.deviceBody {
    font-size:          7pt;
    overflow:           hidden;
    margin:             0;
    padding:            0;
    background-color:   #678;           /* IBM 1950s blue-gray equipment color */
    color:              white}

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

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

PRE {
    font-family:        DejaVuSansMonoBookWeb, monospace}
PRE.paper {
    margin-top:         0;
    margin-bottom:      0;
    font-size:          8pt;
    line-height:        120%}

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

DIV.paper {
    font-family:        DejaVuSansMonoBookWeb, monospace;
    white-space:        pre;
    margin-top:         0;
    margin-bottom:      0;
    font-size:          8pt;
    line-height:        120%}
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:          5pt;
    font-weight:        bold;
    line-height:        100%;
    text-align:         center}

DIV.lampBox {
    position:           absolute;
    width:              22px;
    height:             30px;
    border-top:         1px solid #999;
    border-left:        1px solid #999;
    border-right:       1px solid #666;
    border-bottom:      1px solid #666;
    background-color:   black}

DIV.lampButton {
    position:           absolute;
    width:              20px;
    height:             6px;
    bottom:             0;
    border-radius:      2px;
    border:             1px solid #CCC;
    font-size:          6px;
    line-height:        6px;
    text-align:         center;
    vertical-align:     middle;
    color:              black;
    background-color:   white}

DIV.neonLamp {
    position:           absolute;
    z-index:            1;
    width:              16px;
    height:             16px;
    font-size:          4px;
    border-radius:      50%;
    background-image:   radial-gradient(circle, #999, #333)}
DIV.neonLit1 {
    background-image:   radial-gradient(circle, #A85, #444)}
DIV.neonLit2 {
    background-image:   radial-gradient(circle, #B84, #555)}
DIV.neonLit3 {
    background-image:   radial-gradient(circle, #C83, #666)}
DIV.neonLit4 {
    background-image:   radial-gradient(circle, #D82, #777)}
DIV.neonLit5 {
    background-image:   radial-gradient(circle, #E91, #888)}
DIV.neonLit {
    background-image:   radial-gradient(circle, #F93, #F93, #999)}

DIV.neonLampTopCaption {
    position:           absolute;
    width:              32px;
    top:                -13px;
    left:               -8px;
    line-height:        100%;
    font-size:          6px;
    text-align:         center}
DIV.neonLampBottomCaption {
    position:           absolute;
    width:              32px;
    bottom:             -10px;
    left:               -8px;
    font-size:          6px;
    text-align:         center}

DIV.lampCollar {
    border:             2px solid #DDD}

DIV.whiteLamp {
    position:           absolute;
    width:              24px;
    height:             24px;
    font-size:          4px;
    border-radius:      50%;
    background-image:   radial-gradient(circle, #999, #333)}
DIV.whiteLit1 {
    background-image:   radial-gradient(circle, #AAA, #999, #444)}
DIV.whiteLit2 {
    background-image:   radial-gradient(circle, #BBB, #AAA, #555)}
DIV.whiteLit3 {
    background-image:   radial-gradient(circle, #CCC, #BBB, #666)}
DIV.whiteLit4 {
    background-image:   radial-gradient(circle, #DDD, #CCC, #777)}
DIV.whiteLit5 {
    background-image:   radial-gradient(circle, #EEE, #DDD, #888)}
DIV.whiteLit {
    background-image:   radial-gradient(circle, #FFF, #EEE, #999)}

DIV.redLamp {
    position:           absolute;
    width:              24px;
    height:             24px;
    font-size:          4px;
    border-radius:      50%;
    background-image:   radial-gradient(circle, #900, #300)}
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.orangeLamp {
    position:           absolute;
    width:              24px;
    height:             24px;
    font-size:          4px;
    border-radius:      50%;
    background-image:   radial-gradient(circle, #960, #330)}
DIV.orangeLit1 {
    background-image:   radial-gradient(circle, #A63, #963, #430)}
DIV.orangeLit2 {
    background-image:   radial-gradient(circle, #B73, #A73, #540)}
DIV.orangeLit3 {
    background-image:   radial-gradient(circle, #C73, #B73, #640)}
DIV.orangeLit4 {
    background-image:   radial-gradient(circle, #D83, #C83, #750)}
DIV.orangeLit5 {
    background-image:   radial-gradient(circle, #E83, #D83, #850)}
DIV.orangeLit {
    background-image:   radial-gradient(circle, #F93, #E93, #960)}

DIV.blueLamp {
    position:           absolute;
    width:              24px;
    height:             24px;
    font-size:          4px;
    border-radius:      50%;
    background-image:   radial-gradient(circle, #009, #007, #003)}
DIV.blueLit1 {
    background-image:   radial-gradient(circle, #11A, #009, #006)}
DIV.blueLit2 {
    background-image:   radial-gradient(circle, #22B, #11A, #009)}
DIV.blueLit3 {
    background-image:   radial-gradient(circle, #33C, #22B, #00A)}
DIV.blueLit4 {
    background-image:   radial-gradient(circle, #55D, #44C, #00C)}
DIV.blueLit5 {
    background-image:   radial-gradient(circle, #77E, #55D, #00D)}
DIV.blueLit {
    background-image:   radial-gradient(circle, #99F, #77E, #00F)}

DIV.coloredLampTopCaption {
    position:           absolute;
    width:              80px;
    top:                -13px;
    left:               -28px;
    line-height:        100%;
    font-size:          5pt;
    font-weight:        bold;
    text-align:         center}
DIV.coloredLampBottomCaption {
    position:           absolute;
    width:              80px;
    bottom:             -15px;
    left:               -28px;
    font-size:          5pt;
    font-weight:        bold;
    text-align:         center}

DIV.toggleSwitchTopCaption {
    position:           absolute;
    width:              64px;
    top:                -13px;
    left:               -20px;
    line-height:        100%;
    font-size:          5pt;
    font-weight:        bold;
    text-align:         center}
DIV.toggleSwitchBottomCaption {
    position:           absolute;
    width:              64px;
    bottom:             -15px;
    left:               -20px;
    font-size:          5pt;
    font-weight:        bold;
    text-align:         center}

DIV.blackControlKnobTopCaption {
    position:           absolute;
    width:              64px;
    top:                -13px;
    left:               -20px;
    line-height:        100%;
    font-size:          5pt;
    font-weight:        bold;
    text-align:         center}
DIV.blackControlKnobBottomCaption {
    position:           absolute;
    width:              64px;
    bottom:             -15px;
    left:               -20px;
    font-size:          5pt;
    font-weight:        bold;
    text-align:         center}

DIV.panelSurface {
    position:           absolute;
    background-color:   #C5B1A0;        /* Sundland Beige: was #E8D8C8; #EADAD1; #D8C5BC; #E4DDCD; putty #EDEAE8; */
    color:              black}

DIV.panelRegister {
    position:           absolute;
    overflow:           hidden;
    color:              white;
    background-color:   #333;
    border-radius:      4px;
    border-top:         3px solid #999;
    border-left:        3px solid #999;
    border-right:       3px solid #666;
    border-bottom:      3px solid #666;
    box-shadow:         3px 3px 2px #999;
    font-size:          6px}

DIV.panelDiv {
    position:           absolute;
    overflow:           hidden;
    color:              white;
    background-color:   #333;
    border-radius:      4px;
    border-top:         3px solid #999;
    border-left:        3px solid #999;
    border-right:       3px solid #666;
    border-bottom:      3px solid #666;
    box-shadow:         3px 3px 2px #999;
    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}

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

DIV.panelTopCaption {
    position:           absolute;
    font-size:          7px;
    font-weight:        normal;
    text-align:         center;
    height:             7px;
    top:                0.75em;
    left:               4px;
    right:              4px;
    border-top:         2px solid #EADAD1;
    color:              #EADAD1}

SPAN.panelTopCaptionSpan {
    position:           relative;
    top:                -1em;
    font-size:          7px;
    padding-left:       4px;
    padding-right:      4px;
    color:              #EADAD1;
    background-color:   #333}

DIV.panelRegCaption {
    position:           absolute;
    width:              22px;
    height:             22px;
    text-align:         center;
    vertical-align:     middle;
    font-size:          18px;
    font-weight:        bold;
    line-height:        18px;
    border-top:         1px solid #999;
    border-left:        1px solid #999;
    border-right:       1px solid #666;
    border-bottom:      1px solid #666;
    color:              white;
    background-color:   #333}

SPAN.panelRegSpan {
    font-size:          18px;
    vertical-align:     middle}

DIV.panelRegSpacer {
    position:           absolute;
    width:              22px;
    height:             22px;
    text-align:         center;
    font-size:          18pt;
    font-weight:        bold;
    border-top:         1px solid #999;
    border-left:        1px solid #999;
    border-right:       1px solid #666;
    border-bottom:      1px solid #666;
    color:              white;
    background-color:   #333}

DIV.panelRegClearBar {
    position:           absolute;
    width:              22px;
    top:                24px;
    height:             calc(100% - 48px);
    border-top:         1px solid #999;
    border-left:        1px solid #999;
    border-right:       1px solid #666;
    border-bottom:      1px solid #666;
    color:              black;
    background-color:   white}

DIV.greenButton1 {
    position:           absolute;
    width:              14px;
    height:             14px;
    font-size:          4px;
    background-image:   radial-gradient(circle, #090, #0F0);
    border-radius:      50%;
    border:             10px solid #CCC}
DIV.redButton1 {
    position:           absolute;
    width:              14px;
    height:             14px;
    font-size:          4px;
    background-image:   radial-gradient(circle, #C00, #E00, #F00);
    border-radius:      50%;
    border:             10px solid #CCC}
DIV.redButton2 {
    position:           absolute;
    width:              8px;
    height:             8px;
    font-size:          4px;
    background-image:   radial-gradient(circle, #C00, #E00, #F00);
    border-radius:      50%;
    border:             6px solid #CCC}
DIV.redButton3 {
    position:           absolute;
    width:              20px;
    height:             20px;
    font-size:          4px;
    background-image:   radial-gradient(circle, #C00, #E00, #F00);
    border-radius:      50%;
    border:             2px solid #CCC}
DIV.blackButton1 {
    position:           absolute;
    width:              14px;
    height:             14px;
    font-size:          4px;
    background-image:   radial-gradient(circle, #333, #111, #000);
    border-radius:      50%;
    border:             10px solid #CCC}
DIV.blackButton3 {
    position:           absolute;
    width:              20px;
    height:             20px;
    font-size:          4px;
    background-image:   radial-gradient(circle, #333, #111, #000);
    border-radius:      50%;
    border:             2px solid #CCC}

CANVAS.blackControlKnob1 {
    position:           absolute;
    width:              64px;
    height:             64px;
    font-size:          4px}

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

BUTTON.plainButton {
    position:           absolute;
    font-weight:        bold;
    width:              auto;
    height:             24px;
    padding:            2px;
    color:              #EADAD1;
    background-color:   #999;
    box-shadow:         3px 3px 2px #999;
    border:             1px solid #DDD;
    border-radius:      4px}

BUTTON.panelLabel {
    position:           absolute;
    width:              32px;
    height:             18px;
    color:              #EADAD1;
    background-color:   #333;
    border-radius:      4px;
    border:             1px solid #EADAD1;
    line-height:        5px;
    font-size:          5px;
    font-weight:        normal}

BUTTON.panelLabelHidden {
    color:              #333}
BUTTON.panelLabelHidden:hover {
    color:              #FF0}

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

BUTTON.greenButton {
    background-image:   radial-gradient(circle, #030, #060);
    color:              white}

BUTTON.redButton {
    background-image:   radial-gradient(circle, #600, #900);
    color:              white}

BUTTON.blackButton {
    background-color:   black;
    color:              #999}

BUTTON.blackLit {
    color:              white}

BUTTON.greenLit {
    color:              black;
    background-image:   radial-gradient(circle, #0F0, #0F0, #0C0)}

BUTTON.redLit {
    color:              black;
    background-image:   radial-gradient(circle, #F00, #F00, #C00)}

BUTTON.blackBorder {
    border:             1px solid black}

BUTTON.silverBorder {
    border:             1px solid #DDD}

.annunciator {
    visibility:         hidden;
    white-space:        nowrap;
    font-family:        DejaVuSansWeb, sans-serif;
    font-size:          7pt;
    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}