* { box-sizing:border-box; }

body{ margin:0; background:#222; }
ul {
    height:18.875em; width:62em;
  margin:0.5em auto; padding:3em 0 0 3em; position:relative;
  border:1px solid #160801; border-radius:1em;
  background:-webkit-gradient(linear, right bottom, left top, color-stop(0%,rgba(0,0,0,0.3)), color-stop(100%,rgba(0,0,0,0))), url('img/vwood.png');
box-shadow:0 0 50px rgba(0,0,0,0.5) inset, 0 1px rgba(212,152,125,0.2) inset,0 5px 15px rgba(0,0,0,0.5); }
li { margin:0; padding:0; list-style:none; position:relative; float:left; }

ul .white {
    height:16em; width:4em; z-index:1;
    border-left:1px solid #bbb;
    border-bottom:1px solid #bbb;
    border-radius:0 0 5px 5px;
    box-shadow:-1px 0 0 rgba(255,255,255,0.8) inset, 0 0 5px #ccc inset, 0 0 3px rgba(0,0,0,0.2);
    background: linear-gradient(to top, #eee 0%,#fff 100%);
}

.label {
    /*background-color: black;*/
    transform: rotate(270deg);
    font-size: 16px;
    font-family: ImpactLabel;
    margin-top: 200px;
    white-space: nowrap;
}

.key01 {
  background-image: url(Img/perusse.png), linear-gradient(to top, #eee 0%, #fff 100%);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.black .label {
    font-size: 16px;
    margin-top: 90px;
    color: black;
    font-family: ImpactLabel;
}

.title {
    display: block;
    text-align: center;
    color: #ffd700;
    font-size: 68px;
    font-weight: normal;
    background: linear-gradient(to bottom, #1a0a00 0%, #3d1a00 50%, #1a0a00 100%);
    font-family: 'Monoton', cursive;
    letter-spacing: 8px;
    padding: 25px 0;
    margin: 10px auto 20px auto;
    border: 3px solid #8b6914;
    box-shadow: 
        0 0 20px rgba(255,215,0,0.3),
        inset 0 0 30px rgba(0,0,0,0.5);
    text-shadow: 
        0 0 10px #ffd700,
        2px 2px 4px rgba(0,0,0,0.8);
}

@font-face {
    font-family: 'ImpactLabel';
    src: url('fonts/Impact Label.ttf');
}

@font-face {
    font-family: 'ImpactLabelRev';
    src: url('fonts/Impact Label Reversed.ttf');
}

ul .white:active {
    border-top:1px solid #777;
    border-left:1px solid #999;
    border-bottom:1px solid #999;
    box-shadow:2px 0 3px rgba(0,0,0,0.1) inset, -5px 5px 20px rgba(0,0,0,0.2) inset,0 0 3px rgba(0,0,0,0.2);
    background: linear-gradient(top, #fff 0%,#e9e9e9 100%);
}

.black {
    height:8em; width:2em; margin:0 0 0 -1em; z-index:2;
    border:1px solid #000;
    border-radius:0 0 3px 3px;
    box-shadow:-1px -1px 2px rgba(255,255,255,0.2) inset, 0 -5px 2px 3px rgba(0,0,0,0.6) inset, 0 2px 4px rgba(0,0,0,0.5);
    background:linear-gradient(45deg, #222 0%,#555 100%);
}

.black:active {
    box-shadow:-1px -1px 2px rgba(255,255,255,0.2) inset, 0 -2px 2px 3px rgba(0,0,0,0.6) inset, 0 1px 2px rgba(0,0,0,0.5);
    background:linear-gradient(left, #444 0%,#222 100%);
}

.a,.g,.f,.d,.c { margin:0 0 0 -1em;  }

ul li:first-child { border-radius:5px 0 5px 5px; }
ul li:last-child { border-radius:0 5px 5px 5px; }

#stop {
    padding: 20px;
}