@import url(https://fonts.googleapis.com/css?family=Roboto);
@import url(glyphicon.css);

html, body {
    position:relative;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: 'Roboto', sans-serif;
}

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

body {
    background-image: url("images/wallpaper.png");
    background-repeat: repeat;
    background-position: center top;
    background-size: auto;
    min-height:800px;
}

.scrollfix {
    overflow-y:hidden;
}

body::before {
    content:"";
    position:absolute;
    background-image: url("images/paper.png"), url("images/board.png"), url("images/carpet.png");
    background-repeat: no-repeat, repeat-x, repeat;
    background-size: auto, 15px, auto;
    background-position: center 350px, center top, center top;
    top: 2210px;
    left: 0;
    right: 0;
    bottom: 0;
    z-index:-1000;
}

body::after {
    content:"";
    position:absolute;
    background-image: url("images/carpet.png");
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url("images/table.png");
    background-repeat: no-repeat;
    background-position: center 430px;
    background-size: 3000px;
    z-index:-1000;
}

.outer {
    width:100%;
    height:900px;
    overflow:hidden;
}

.container {
    margin: 15px auto 60px auto;
    width:1280px;
    height: 740px;
    position:relative;
}

#output {
  padding: 20px;
  text-align: center;
}

.key {
    width: 42px;
    height: 42px;
    position: relative;
    margin: 3px;
    display: inline-block;
    box-sizing:border-box;
}

.key div {
    transition-property: top, bottom, height;
    transition-duration: 0.08s;
    transition-timing-function: ease-in;
}

.pressed div {
    transition-timing-function: ease-out;
}

.key .head {
    top: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    border: 3px solid #DDDDDD;
    box-sizing:border-box;
    z-index: 100;

    border-radius:21px;
    background-color: #A8A8A8;
    cursor: pointer;

    box-shadow:0 4px 0 #888888, inset 0 2px 3px #888888;

    color: #FFFFFF;
    text-shadow: 0 0 2px #5A5A5A;
}

.key .stem, .key .base {
    width: 4px;
    position:absolute;
    left:50%;
    transform: translate(-50%,0);
}

.key .base {
    background-color: #888888;
    z-index: 50;

    top:21px;
    height:32px;
    box-shadow: inset 0 28px 0 #707070;
}

.key .stem {
    background-image: linear-gradient(#202020, #707070);
    z-index: 0;

    bottom:21px;
    height:300px;
}

.row1 .base, .row1 .stem {
    left: 35%;
}

.row2 .base, .row2 .stem {
    left: 65%;
}

.row4 .base, .row4 .stem {
    left: 51.5%;
}

.key .upper, .key .middle, .key .lower {
    position:absolute;
    width:100%;
    text-align:center;
    box-sizing:border-box;
}

.key .upper {
    top: 1px;
}

.key .middle {
    top: 7px;
    font-size:120%;
}

.key .lower {
    bottom: 1px;
}

.pressed .head {
    top: 12px;
}

.pressed .base {
    top: 30px;
}

.pressed .stem {
    bottom:30px;
    height: 309px;
}

.keyRow {

}

.keyboard {
    /*border: 1px solid red;*/
    height:320px;
    width:550px;
    box-sizing:border-box;
    padding-top: 30px;
    overflow:hidden;
    /*background-color: #202020;*/
    text-align:center;
}

.spacebar {
    width: 392px;
}

.keyboardArea {
    width: 650px;
    height: 350px;
    position:absolute;
    margin:0 auto 0 auto;
    left: 315px;
    bottom: -230px;
    z-index:20;
}

.keyboardContainer {
    top:10px;
    position:absolute;
    left:50px;
}

.keyboardUnderlay {
    width: 100%;
    height:100%;

    background-image: url("images/keyboard_underlay.png");
    position:absolute;
}

.keyboardBackground {
    width:550px;
    height:320px;
    background-color: #202020;
    top: 10px;
    position:absolute;

    left:50px;
}

.keyboardOverlayTop {
    width: 650px;
    height: 42px;

    top:0;

    background-image: url("images/keyboard_overlay_top.png");
    position:absolute;
    z-index:200;
}

.keyboardOverlayBottom {
    width: 650px;
    height: 44px;
    bottom: 0;

    background-image: url("images/keyboard_overlay_bottom.png");
    position:absolute;
    z-index:200;
}

.keyboardUpper {
    position:absolute;
    /*border:1px solid red;*/
    width:650px;
    height:22px;

    bottom:120px;
    left: 315px;

    background-image:url("images/keyboard_upper.png");
}

.keyboardUpperFront {
    position:absolute;
    background-image:url("images/keyboard_upper_front.png");
    z-index:500;
    left:194px;
    top:2px;
    width:262px;
    height:25px;
}

.boombox {
    position:relative;
    width:1280px;
    height: 540px;
    /*background-color: #878d98;*/
    background-image: url("images/boombox.png");
}

.boomboxInner {
    position:relative;
    width:1280px;
    height: 500px;
    top:40px;
}

.door_open, .door_closed {
    z-index:10;
    width:282px;
    height:187px;
    position:absolute;
    top:91px;
    left:499px;
}

.door_open {
    background-image: url("images/door_open.png");
}

.door_closed {
    background-image: url("images/door_closed.png");
}

.buttons {
    position:absolute;
    width:500px;
    height;50px;
    top:25px;
    left:390px;
    text-align:center;
    vertical-align:middle;
}

.topbutton, .topbuttonbroken {
display:inline-block;
    width:41px;
    height:34px;
    margin:2px;
    position:relative;
    box-sizing:content-box;
    padding-top:8px;
    padding-right:1px;
}

.topbutton {
    background-color:#4d5057;
    cursor:pointer;
    border: 2px solid #36393d;
    border-top: 7px solid #656972;
    border-bottom: 1px solid #36393d;
    top:2px;
    color:#CCCFCF;
    font-size:160%;
    border-radius:2px;
    vertical-align:middle;
}

.topbuttonpressed {
    /*background-color:white;*/
    cursor:default;
    border-top: 3px solid #656972;
    top:0;
    background-color: #44474d;
    color:#BBBFBF;
}

.topbuttonbroken {
    border: 2px solid #656a72;
    vertical-align:middle;
    background-color: #787d87;
    border-left: 2px solid #a8b0bc;
    border-bottom: 4px solid #959ca8;
    border-top: 0 none transparent;
    height:31px;
    top:-2px;
}

.topbuttonbroken::before {
    content: " ";
    display:block;
    position:absolute;
    width:22px;
    height:22px;
    left:10px;
    border:1px solid #a8b0bc;
    border-bottom: 1px solid #656a72;
    border-left: 1px solid #656a72;
    background-color: #878d98;
    box-sizing:border-box;
}

.topbuttonbroken::after {
    content: " ";
    display:block;
    position:absolute;
    width:14px;
    height:14px;
    background-color:#3e4042;
    left:12px;
    top:10px;
    border:2px solid #a8b0bc;
    border-top: 2px solid #656a72;
    border-right: 2px solid #656a72;
}

.bottombutton {
    position:relative;
    width:36px;
    height:28px;
    background-color:#656972;
    z-index:100;

    border: 2px solid #36393d;
    border-top: 0px none;
    border-bottom: 13px solid #4d5057;

    color:#CCCFCF;
    font-size:140%;
    cursor:pointer;
    top:2px;
    left:500px;
    border-radius:2px;
}

.bottombuttonpressed {
    border-bottom: 5px solid #4d5057;
    cursor:default;
    top:10px;
}

.bottombutton > div {
    transform: scaleY(0.75);
    padding:2px 0 0 6px;

}

.keyboardLight {
    background-image:url("images/light_off.png");

    position:absolute;
    left:104px;
    top: 16px;
    width:52px;
    height:22px;
    z-index:1000;
}

.keyboardLightOn {
    background-image:url("images/light_on.png");
}

.keyboardLightOn::after {
    content:" ";
    position:absolute;
    width:300px;
    height:300px;

    left:11px;
    top:10px;

    transform: translate(-50%,-50%);
    pointer-events: none;

    background-image: radial-gradient(circle closest-side, rgba(180,255,106,0.1) 0%, rgba(180,255,106,0.0) 100%);
    mix-blend-mode: screen;
}

.speakerContainer {
    position:absolute;
}

.speakerLarge {
    width:256px;
    height:256px;

    top:200px;
}

.speakerSmall {
    width:134px;
    height:134px;

    top:50px;
}

.speakerLeft {
    left: 30px;
}

.speakerRight {
    right: 30px;
}

.speaker {
    position:absolute;
    left:50%;
    top:50%;
    transform: translate(-50%,-50%);
    width:100%;
    height:100%;
}

.speakerSmall .speakerInner {
    background-image: url("images/speaker_small_inner.png");
}
.speakerSmall .speakerOuter {
    background-image: url("images/speaker_small_outer.png");
}

.speakerLarge .speakerInner {
    background-image: url("images/speaker_large_inner.png");
}
.speakerLarge .speakerOuter {
    background-image: url("images/speaker_large_outer.png");
}

.cassette {
    position:absolute;

    width:250px;
    height:160px;
    left: 515px;
    top: 340px;

    transform-origin: center bottom;
}

.cassette .overlay {
    width:100%;
    height:100%;

    position:absolute;
    top:0;
    left:0;

    background-image: url("images/cassette.png");
}

.cassette .spool {
    position:absolute;
    top:72px;

    width:26px;
    height:26px;

    border-radius:50%;
    border: 15px solid #e4e5e1;
    box-shadow: 0 0 0 20px #202020;
}

.cassette .spool div {
    position:absolute;
    width: 20px;
    height: 4px;
    border: 10px solid #e4e5e1;
    border-top: 0 none transparent;
    border-bottom: 0 none transparent;

    left:50%;
    top:50%;
}

.cassette .left {
    left:71px;
    transform: translate(-50%,-50%);
}

.cassette .right {
    right:71px;
    transform: translate(50%,-50%);
}

.cassette .label {
    position:absolute;
    width:195px;
    left:35px;
    height: 20px;
    top:28px;
    /*border:1px solid red;*/
    box-sizing: border-box;
    font: bold 14px courier, courier new, monospace;
    color:#655040;
    text-align:left;
    white-space:pre;
}

.cassetteRemove, .cassetteInsert {
    animation-duration: 2.5s;
    animation-name: cassetteMove;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
}

.cassetteFront {
    animation-timing-function: ease-in;
    z-index:10;
}

.cassetteRemove {
    animation-direction: normal;
}

.cassetteInsert {
    animation-direction: reverse;
}

.cassettePlaying .spool {
    animation-timing-function: linear;
    animation-duration: 6s;
    animation-iteration-count: infinite;
}

.cassettePlaying .left {
    animation-name: spool-left;
}
.cassettePlaying .right {
    animation-name: spool-right;
}

@keyframes cassetteMove {
    0% {
        opacity: 1.0;
        top: 140px;
        transform: scaleY(1.0);
        filter: none;
    }
    1% {
        transform: scaleY(0.8);
        filter: brightness(0.65);
    }
    32% {
        top: 140px;
        transform: scaleY(0.8);
        filter: brightness(0.65);
    }
    38% {
        opacity: 1.0;
        transform: scaleY(1.0);
        filter: none;
    }
    40% {
        top: 65px;
        opacity: 0.0;
    }
    65% {
        top: 265px;
        opacity: 0.0;
    }
    70% {
        opacity: 1.0;
    }
    78% {
        top: 320px;
    }
    92% {
        top: 320px;
    }
    95% {
        top: 340px;
    }
    100% {
        opacity: 1.0;
        top: 340px;
    }
}

@keyframes spool-left {
    0% {
        transform: translate(-50%,-50%) rotate(0deg);
    }
    100% {
        transform: translate(-50%,-50%) rotate(360deg);
    }
}

@keyframes spool-right {
    0% {
        transform: translate(50%,-50%) rotate(0deg);
    }
    100% {
        transform: translate(50%,-50%) rotate(360deg);
    }
}

.volumeKnobContainer {
    width:128px;
    height:128px;

    position:absolute;
}

.volumeKnob {
    top:14px;
    left:14px;
    position:relative;
    width:100px;
    height:100px;
    background-color: #656972;/*#4d5057;*/
    border-radius:50%;
    cursor:pointer;
    border: 15px solid #44474d;
    box-sizing: border-box;
    box-shadow: 0 0 0 2px rgba(0,0,0,0.6);
    z-index:10;
}

.volumeKnob::before {
    content:" ";
    position:absolute;
    width:100%;
    height:100%;
    border-radius: 50%;
    box-shadow: 0 0 15px #4d5057, 0 0 15px #656972, 0 0 15px #656972, inset 0 0 4px 3px #696D76;
}

.volumeKnob::after {
    content:" ";
    width:2px;
    height: 22px;
    left:50%;
    top: -11px;
    position:absolute;
    background-color: #DCDCE4;
    display:block;
    transform: translateX(-50%);
    box-sizing:border-box;
    box-shadow: 0 0 0 4px #656972;
}

.leftKnob, .rightKnob {
    top: 50px;
}

.leftKnob {
    left:330px;
}

.rightKnob {
    right:330px;
}

.knobDivisionMajor, .knobDivisionMinor {
    left:50%;
    bottom:50%;
    width: 1px;
    height: 54px;
    transform-origin: center bottom;
    border-top: 4px solid #DCDCE4;

    position:absolute;
}

.knobDivisionMajor {
    border-top: 7px solid #DCDCE4;
}

.knobLabel {
    position:absolute;
    color: #DCDCE4;
    font-size: 8px;
    width:16px;
    font-family: Arial, sans-serif;
    text-align:center;
    top: -12px;
    left:0;
    transform-origin: center middle;
    /*border:1px solid red;*/
    pointer-events:none;
    transform: translate(-50%,-50%);
    text-shadow: 0 0 2px rgba(0,0,0,0.3);
}

.knobTitle {
    font-size:11px;
    color: #DCDCE4;
    position:absolute;
    width:128px;
    bottom:-5px;
    left:0;
    text-align:center;
    pointer-events:none;
    text-shadow: 0 0 2px rgba(0,0,0,0.3);
}

.sticker {
    position:absolute;
    background-color: #F4F2EC;
    color: #404040;
    font-family: "Courier", "Courier New", monospace;
    font-weight:bold;
    padding:3px 8px 3px 8px;
    font-size:14px;
    z-index:10;
    box-shadow:0 1px 3px rgba(0,0,0,0.2);
}

.knobSticker {
    transform:rotate(6deg);
    left:340px;
    top:173px;
}

.buttonSticker {
    transform:rotate(-0.5deg);
    left:500px;
    top:3px;
}

.gauge {
    position:absolute;
    width:130px;
    height:130px;
    box-sizing:border-box;
    background-image:url("images/gauge_background.png");
}

.gaugeDial {
    position:absolute;
    bottom: 25px;
    height:60px;
    width:0px;
    left:50%;
    transform:  translateX(-50%) rotate(-60deg);
    /*background-color:red;*/
    transform-origin: center bottom;

    transition: 0.15s transform;
}

.gaugeDial::after {
    content:"";

    position:absolute;
    bottom:0%;
    left:-2px;
    width:0;
    height:0;
    border-left:2px solid transparent;
    border-right:2px solid transparent;
    border-bottom:60px solid #D02222;
}

.gaugeOverlay {
    position:absolute;
    width:130px;
    height:130px;
    left:0;
    top:0;
    background-image:url("images/gauge.png");
}

.gaugeLabel {
    text-align:center;
    width:70%;
    margin:auto;
    font-size:12px;
    font-family: Arial, sans-serif;
    position:relative;
}

.gauge > .gaugeLabel {
    top: 75px;
    font-size:9px;
    color:#404040;
}

.gaugeOverlay > .gaugeLabel {
    top: 4px;
    color: #4d5057;
    text-shadow: -1px 1px 0 #838994;
}

.gaugeDivisionMajor, .gaugeDivisionMinor {
    left:50%;
    bottom:25px;
    width: 1px;
    height: 52px;
    transform-origin: center bottom;
    border-top: 4px solid #404040;

    position:absolute;
}

.gaugeDivisionMajor {
    height:50px;
    border-top: 8px solid #404040;
}

.gaugeDivisionLabel {
    position:absolute;
    color: #404040;
    font-size: 6px;
    width:16px;
    font-family: Arial, sans-serif;
    text-align:center;
    top: -12px;
    left:0;
    transform-origin: center middle;
    /*border:1px solid red;*/
    pointer-events:none;
    transform: translate(-50%,-50%);
    /*text-shadow: 0 0 2px rgba(0,0,0,0.3);*/
}

.leftGauge, .rightGauge {
    top: 209px;
}

.leftGauge {
    left:329px;
}

.rightGauge {
    right:329px;
}