/***********************************************************************
* retro-g15/webUI G15.css
************************************************************************
* Copyright (c) 2021, Paul Kimpel.
* Licensed under the MIT License, see
*       http://www.opensource.org/licenses/mit-license.php
************************************************************************
* Bendix G-15 emulator home page style sheet.
************************************************************************
* 2021-11-30  P.Kimpel
*   Original version, from D205.css.
***********************************************************************/

BODY {
    position:           relative}

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

.registerRoundedBorder {
    border-top:         2px solid white;
    border-left:        2px solid white;
    border-right:       2px solid white;
    border-bottom:      none;
    height:             48px;
    border-radius:      24px}

#VersionDiv {
    position:           absolute;
    top:                4px;
    right:              4px;
    text-align:         right}
#StatusMsg {
    text-align:         center;
    font-size:          85%;
    color:              blue}
#InfoTable {
    margin-top:         0;
    width:              100%}
#CenteredBody {
    position:           absolute;
    text-align:         center;
    top:                25%;
    bottom:             25%;
    left:               0;
    right:              0}
#G15Image {
    box-shadow:         12px 12px 12px gray;
    height:             80%}
#StartUpBtn,
#ConfigureBtn {
    margin-top:         2em;
    background-color:   #246;
    color:              white;
    font-family:        DejaVuSansWeb, sans-serif;
    font-weight:        normal;
    font-size:          12pt;
    width:              auto;
    height:             auto;
    padding:            0.5em;
    border-radius:      16px;
    border:             2px solid #999}
#StartUpBtn[disabled],
#ConfigureBtn[disabled] {
    background-color:   #468;
    color:              #999;
    border-color:       #666}
#ConfigMsg {
    margin-top:         1ex;
    font-size:          smaller}
#PageFooter {
    margin-top:         2em;
    margin-left:        calc(50% - 20em);
    margin-right:       calc(50% - 20em);
    font-weight:        bold;
    color:              red;
    text-align:         center}

/* Front panel overlay <div> and controls */

#FrontPanel {
    position:           absolute;
    top:                0;
    left:               0;
    width:              100%;
    height:             calc(100% - 8px);
    display:            block;
    visibility:         hidden;
    background-color:   #67AAB2;        /* sort of teal/turquoise */
    color:              white;
    border-radius:      16px;
    user-select:        none;
    cursor:             default}

#ControlPanelFrame {
    position:           absolute;
    top:                12px;
    height:             434px;
    width:              600px;
    left:               50%;
    transform:          translate(-50%, 0);
    border-radius:      16px;
    box-shadow:         8px 8px 8px #666;
    background-color:   #3B413D}

/* Paper Tape Panel */

#PaperTapePanel {
    position:           absolute;
    top:                24px;
    left:               24px;
    right:              24px;
    height:             84px;
    border-radius:      8px;
    box-shadow:         inset 4px 4px 4px #666;
    background-color:   #67AAB2}

#PaperTapePunch {
    position:           absolute;
    top:                8px;
    left:               8px;
    right:              8px}

#PTCaption {
    position:           absolute;
    top:                4px;
    left:               0;
    width:              60px;
    text-align:         left}
#PTView {
    position:           absolute;
    top:                0px;
    left:               60px;
    width:              calc(100% - 148px);
    min-height:         16px;
    color:              black;
    background-color:   white;
    text-align:         right;
    border:             1px solid gray}
#PTView .red {
    color:              #F00}

#PTUnloadCaption {
    position:           absolute;
    top:                4px;
    right:              28px;
    text-align:         right}
#PTUnloadBtn {
    position:           absolute;
    top:                -2px;
    right:              0}
#PTMenu {
    position:           absolute;
    display:            none;
    top:                24px;
    right:              2px;
    width:              fit-content;
    height:             48px;
    z-index:            12;
    padding-left:       8px;
    padding-right:      8px;
    background-color:   #FFE;
    border:             1px solid #666;
    border-radius:      6px;
    box-shadow:         3px 3px 3px #666}
#PTMenu BUTTON {
    position:           relative;
    top:                50%;
    height:             32px;
    font-size:          9pt;
    line-height:        100%;
    vertical-align:     middle;
    background-color:   white;
    border:             2px solid #999;
    transform:          translate(0, -50%)}
#PTPunchRunBtn.punchingLeader {
    color:              white;
    background-color:   red}

#PaperTapeReader {
    position:           absolute;
    top:                32px;
    left:               8px;
    right:              8px}
#PRCaption {
    top:                6px;
    left:               0;
    width:              60px;
    text-align:         left}
#PRFormatSelect {
    position:           absolute;
    top:                0;
    left:               60px}
#PRFileSelector {
    position:           absolute;
    top:                0;
    left:               124px;
    right:              0;
    color:              white}
#PRRewindCaption {
    display:            none;           /* for now... */
    position:           absolute;
    top:                4px;
    right:              52px;
    text-align:         right}
#PRRewindBtn {
    display:            none;           /* for now... */
    position:           absolute;
    top:                -2px;
    right:              24px}

#PRUnloadCaption {
    position:           absolute;
    top:                26px;
    right:              28px;
    text-align:         right}
#PRUnloadBtn {
    position:           absolute;
    top:                20px;
    right:              0}

#PRTapeSupplyBar {
    position:           absolute;
    top:                24px;
    left:               60px;
    width:              calc(100% - 144px);
    height:             16px}

#PRBlockNrDiv {
    position:           absolute;
    top:                38px;
    left:               calc(50% - 12px);
    font-size:          10px}

/* Control Panel lamps */

#ControlPanel {
    position:           absolute;
    top:                120px;
    left:               24px;
    right:              24px;
    height:             228px;
    border-radius:      8px;
    box-shadow:         inset 4px 4px 4px #666;
    background-color:   #67AAB2}

#CharacteristicReg {
    position:           absolute;
    top:                26px;
    left:               50%;
    transform:          translate(-238px, 0);
    width:              108px}
#SourceReg {
    position:           absolute;
    top:                24px;
    left:               50%;
    transform:          translate(-50%, 0);
    width:              208px}

#CmdLineReg {
    position:           absolute;
    top:                94px;
    left:               50%;
    transform:          translate(-248px, 0);
    width:              128px}
#DestReg {
    position:           absolute;
    top:                92px;
    left:               50%;
    transform:          translate(-50%, 0);
    width:              208px}

#IOReg {
    position:           absolute;
    top:                160px;
    left:               50%;
    transform:          translate(-50%, 0);
    width:              208px}

#G15Version {
    position:           absolute;
    right:              8px;
    bottom:             8px;
    z-index:            1;
    font-size:          x-small;
    line-height:        100%}
#G15Version.active {
    font-weight:        bold;
    color:              yellow}

/* Typewriter switch panel */

#TypewriterSwitchPanel {
    position:           absolute;
    top:                458px;
    left:               50%;
    width:              552px;
    transform:          translate(-50%, 0);
    height:             40px;
    background-color:   #777;
    border:             4px solid #38413D;
    border-radius:      8px;
    box-shadow:         4px 4px 4px #666}

#EnableSwitchCaption {
    position:           absolute;
    top:                2px;
    left:               50px;
    transform:          translate(-50%, 0)}
#EnableSwitchSet {
    position:           absolute;
    bottom:             2px;
    left:               50px;
    transform:          translate(-50%, 0)}

#PunchSwitchCaption {
    position:           absolute;
    top:                2px;
    left:               50%;
    transform:          translate(-50%, 0)}
#PunchSwitchSet {
    position:           absolute;
    bottom:             2px;
    left:               50%;
    transform:          translate(-50%, 0)}

#ComputeSwitchCaption {
    position:           absolute;
    top:                2px;
    right:              72px;
    transform:          translate(50%, 0)}
#ComputeSwitchSet {
    position:           absolute;
    bottom:             2px;
    right:              72px;
    transform:          translate(50%, 0)}

/* Power Panel controls */

.powerUp {
    animation-name:     powerUpAnimation;
    animation-duration: 5s;
    animation-timing-function: ease-in;
    animation-direction:normal;
    animation-fill-mode:forwards}

.powerDown {
    animation-name:     powerUpAnimation;
    animation-duration: 3s;
    animation-timing-function: ease-in;
    animation-direction:reverse;
    animation-fill-mode:forwards}

@keyframes powerUpAnimation {
    from {
        opacity:        0}
    to {
        opacity:        1}
    }

#PowerPanel {
    position:           absolute;
    left:               24px;
    right:              24px;
    height:             64px;
    bottom:             12px}

#PowerOffBtn {
    left:               0;
    bottom:             16px;
    box-shadow:         4px 4px 4px #222}
#PowerOffBtnCaption {
    left:               0;
    bottom:             0;
    width:              34px}

#DCPowerLamp,
#DCPowerLampFX {
    left:               56px;
    bottom:             21px;
    box-shadow:         4px 4px 4px #222}
#DCPowerLampFX {        /* used to animate the power up/down sequence */
    opacity:            0;
    z-index:            1;
    background-image:   radial-gradient(circle, #F00, #E00, #900)}
#DCPowerLampCaption {
    left:               52px;
    bottom:             0;
    width:              32px}

#ReadyLamp {
    left:               144px;
    bottom:             21px;
    box-shadow:         4px 4px 4px #222}
#ReadyLampCaption {
    left:               136px;
    bottom:             0;
    width:              40px}

#ResetBtn {
    left:               192px;
    bottom:             16px;
    box-shadow:         4px 4px 4px #222}
#ResetBtnCaption {
    left:               190px;
    bottom:             0;
    width:              34px}

#G15Logo {
    position:           absolute;
    right:              0;
    bottom:             0;
    width:              112px;
    transform:          rotate(2deg)}

/* Typewriter output pane */

#TypewriterOutput {
    position:           absolute;
    top:                514px;
    bottom:             16px;
    left:               8px;
    right:              8px}
#TypewriterPaperDiv {
    position:           absolute;
    height:             100%;
    width:              calc(100% - 8px);
    min-width:          600px;                  /* same as ControlPanelFrame */
    max-width:          100%;
    left:               50%;
    transform:          translate(-50%, 0);
    font-size:          12px;
    font-family:        Courier New, Courier, Consolas, monospace}
#TypewriterPaper {
    position:           absolute;
    height:             100%;
    width:              100%;
    min-width:          600px;                  /* same as ControlPanelFrame */
    left:               50%;
    transform:          translate(-50%, 0);
    white-space:        pre;
    overflow:           auto;
    padding:            4px;
    color:              black;
    background-color:   #FFE;
    border:             1px solid gray}

#TypewriterMenuIcon {
    position:           absolute;
    top:                4px;
    right:              20px;
    z-index:            10}
#TypewriterMenu {
    position:           absolute;
    display:            none;
    top:                8px;
    right:              4px;
    width:              410px;
    height:             40px;
    z-index:            12;
    text-align:         center;
    background-color:   #FFE;
    border:             1px solid #666;
    box-shadow:         3px 3px 3px #999}
#TypewriterMenu BUTTON {
    position:           relative;
    top:                50%;
    height:             24px;
    font-size:          9pt;
    line-height:        100%;
    vertical-align:     middle;
    background-color:   white;
    border:             2px solid #999;
    transform:          translate(0, -50%)}

#TypeOMaticPanel {
    position:           absolute;
    display:            none;
    top:                32px;
    right:              4px;
    width:              fit-content;
    height:             fit-content;
    padding:            4px;
    z-index:            10;
    opacity:            0.75;
    text-align:         center;
    white-space:        nowrap;
    font-family:        DejaVuSansWeb;
    font-weight:        bold;
    color:              black;
    background-color:   #FFE;
    border:             2px solid #080;
    box-shadow:         3px 3px 3px #999}
#TypeOMaticMeterBar {
    width:              24ch;
    margin-top:         4px;
    margin-bottom:      4px}
#TypeOMaticClearBtn, #TypeOMaticPauseBtn {
    height:             24px;
    width:              80px;
    border-color:       #666}
#TypeOMaticPanel .paused {
    color:              white;
    background-color:   red}