#compose {
    background: #126663;
    height: 100%;
}

.controls {
    width: 110px;
    float: left;
    text-align: center;
    margin: 20px 15px;
    line-height: 1.3;
}

.controls p {
    margin: 20px 15px;
}

#instruments {
    margin-left: 140px;
    padding: 16px 0 20px;
    background: url('../images/bg_instruments.png') no-repeat 0 11px;
    background-size: 192px;
    line-height: 0;
}

.instrument {
    margin: 4px 20px 0 191px;
    overflow: hidden;
}

#btn_reset {
    width: 80px;
    height: auto;
    margin: auto;
}

#btn_play {
    width: 90px;
    height: 90px;
    margin: 80px auto;
    background: url('../images/btn_pause.png') no-repeat 0 0;
    background-size: 100%;
}

#btn_play.paused {
    background-image: url('../images/btn_play.png');
}

#btn_save {
    width: 100%;
    height: auto;
}

#btn_copy {
    width: 90px;
    height: auto;
    padding: 2px 10px;
    vertical-align: middle;
}

#input_url {
    width: 500px;
    height: 18px;
    padding: 3px;
}

.yellow {
    color: #fffb38;
    font-weight: bold;
    font-size: 110%;
}

.popup {
    background: #c80e14;
    line-height: 1.4;
    position: absolute;
    width: 85%;
    height: 85%;
    top: 7.5%;
    left: 7.5%;
    padding: 2.5%;
    z-index: 2;
    font-size: 17px;
    font-weight: bold;
}

.popup .header {
    font-size: 120%;
}

#btn_close {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 30px;
    height: 30px;
}

ol li {
    margin: 5px 0;
}

.note {
    float: left;
    width: 6.25%;
    height: 11px;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

#sheng {
    border: solid 1px #f4d574;
    border-bottom: none;
    border-right: none;
}

#sheng .note {
    background: #fbedc2;
    border: solid 1px #f4d574;
    border-top: none;
    border-left: none;
}

#sheng .current {
    background: #f8e39e;
}

#sheng .on {
    background: #f4d46f;
}


#pipa {
    border: solid 1px #d6af71;
    border-bottom: none;
    border-right: none;
}

#pipa .note {
    background: #eddcc1;
    border: solid 1px #d6af71;
    border-top: none;
    border-left: none;
}

#pipa .current {
    background: #e3c89d;
}

#pipa .on {
    background: #d5ad6c;
}


#moon {
    border: solid 1px #767547;
    border-bottom: none;
    border-right: none;
}

#moon .note {
    background: #d1d1c1;
    border: solid 1px #767547;
    border-top: none;
    border-left: none;
}

#moon .current {
    background: #b5b49b;
}
#moon .on {
    background: #8f8e69;
}


#erhu {
    border: solid 1px #c5c5ce;
    border-bottom: none;
    border-right: none;
}

#erhu .note {
    background: #e6e6ea;
    border: solid 1px #c5c5ce;
    border-top: none;
    border-left: none;
}

#erhu .current {
    background: #d6d6dd;
}

#erhu .on {
    background: #c2c2cc;
}


#cymbal {
    border: solid 1px #d7cd9f;
    border-bottom: none;
    border-right: none;
}

#cymbal .note {
    background: #eee9d6;
    border: solid 1px #d7cd9f;
    border-top: none;
    border-left: none;
}

#cymbal .current {
    background: #e4dcbd;
}

#cymbal .on {
    background: #d6cb9c;
}


#drum {
    border: solid 1px #bbaf81;
    border-bottom: none;
    border-right: none;
}

#drum .note {
    background: #e2ddc9;
    border: solid 1px #bbaf81;
    border-top: none;
    border-left: none;
}

#drum .current {
    background: #d0c8a9;
}

#drum .on {
    background: #b8ad7e;
}


.instrument .current.on {
    background: #fff !important;
}