pkimpel.retro-b5500/webUI/B5500MagTapeDrive.css

/***********************************************************************
* retro-b5500/emulator B5500MagTapeDrive.css
************************************************************************
* Copyright (c) 2013, Nigel Williams and Paul Kimpel.
* Licensed under the MIT License, see http://www.opensource.org/licenses/mit-license.php
************************************************************************
* B5500 emulator Magnetic Tape Drive web interface style sheet.
************************************************************************
* 2013-10-26  P.Kimpel
*   Original version, from B5500CardReader.css.
***********************************************************************/

BODY {
    position:           relative;
    background-color:   black;
    margin:             4px}

DIV#MTDiv {
    position:           relative;
    background-color:   #666;
    width:              550px;
    height:             110px;
    border:             1px solid black;
    border-radius:      8px;
    padding:            0;
    vertical-align:     top}

BUTTON.yellowButton {
    background-color:   #990;
    color:              black;
    font-family:        Arial Rounded, Arial, Helvetica, sans-serif;
    font-size:          8pt;
    font-weight:        normal;
    width:              60px;
    height:             40px;
    border:             1px solid #DDD;
    border-radius:      4px}

BUTTON.blackButton {
    background-color:   black;
    color:              white;
    font-family:        Arial Rounded, Arial, Helvetica, sans-serif;
    font-size:          8pt;
    font-weight:        normal;
    width:              60px;
    height:             40px;
    border:             1px solid #DDD;
    border-radius:      4px}

BUTTON.redButton {
    background-color:   #900;
    color:              white;
    font-family:        Arial Rounded, Arial, Helvetica, sans-serif;
    font-size:          8pt;
    font-weight:        normal;
    width:              60px;
    height:             40px;
    border:             1px solid #DDD;
    border-radius:      4px}

BUTTON.yellowLit {
    background-color:   #FF0}

BUTTON.redLit {
    color:              black;
    background-color:   #F00}

SPAN.annunciator {
    position:           absolute;
    color:              #666;
    font-family:        Arial Rounded, Arial, Helvetica, sans-serif;
    font-size:          7pt;
    font-weight:        bold}

SPAN.whiteLit {
    color:              white}

#MTUnloadBtn {
    position:           absolute;
    top:                8px;
    left:               8px}

#MTLoadBtn {
    position:           absolute;
    top:                8px;
    left:               76px}

#MTLocalBtn {
    position:           absolute;
    top:                8px;
    left:               144px}

#MTRemoteBtn {
    position:           absolute;
    top:                8px;
    left:               212px;}

#MTWriteRingBtn {
    position:           absolute;
    top:                8px;
    left:               280px}

#MTRewindBtn {
    position:           absolute;
    top:                8px;
    left:               348px;}

IMG#MTReel {
    position:           absolute;
    height:             40px;
    visibility:         hidden;
    border-radius:      50%;
    top:                8px;
    left:               420px}

#MTUnloadedLight {
    top:                4px;
    right:              8px}

#MTAtBOTLight {
    top:                14px;
    right:              8px;}

#MTAtEOTLight {
    top:                24px;
    right:              8px}

#MTRewindingLight {
    top:                34px;
    right:              8px}

#MTFileName {
    position:           absolute;
    border:             none;
    background-color:   #666;
    color:              white;
    width:              530px;
    top:                58px;
    left:               8px}

#MTProgressBar {
    position:           absolute;
    border:             1px solid white;
    width:              530px;
    top:                84px;
    left:               8px}

/* Tape Load Panel */

DIV#MTLoaderDiv {
    background-color:   #666;
    width:              480px;
    height:             86px;
    border-radius:      8px;
    padding:            8px;
    color:              white;
    font-family:        Arial Rounded, Arial, Helvetica, sans-serif;
    font-size:          8pt;
    font-weight:        bold}

DIV#MTLoaderInnerDiv {
    position:           relative;
    height:             100%;
    width:              100%}

#MTLoadFileSelector {
    position:           absolute;
    border:             1px solid white;
    color:              white;
    width:              100%;
    top:                0;
    left:               0}

#MTLoadFormatGroup {
    position:           absolute;
    top:                32px;
    left:               0}

#MTLoadFormatSelect {
    border:             1px solid white}

#MTLoadWriteRingCheck {
    border:             1px solid white}

#MTLoadTapeLengthGroup {
    position:           absolute;
    top:                32px;
    right:              0}

#MTLoadTapeLengthSelect {
    border:             1px solid white}

#MTLoadTapeLengthSelect OPTION {
    text-align:         right}

#MTLoadCancelBtn {
    position:           absolute;
    bottom:             0;
    right:              64px}

#MTLoadOKBtn {
    position:           absolute;
    bottom:             0;
    right:              0}