/* Piano keys navbar */

/* preload images */
body:before {
    content: url(keys/keys_left.png)
	     url(keys/keys_right.png)
	     url(keys/keys0_up.png)
	     url(keys/keys1_up.png)
	     url(keys/keys2_up.png)
	     url(keys/keys3_up.png)
	     url(keys/keys4_up.png)
	     url(keys/keys5_up.png)
	     url(keys/keys6_up.png)
	     url(keys/keys7_up.png)
	     url(keys/keys8_up.png)
	     url(keys/keys9_up.png)
	     url(keys/keys0_down.png)
	     url(keys/keys1_down.png)
	     url(keys/keys2_down.png)
	     url(keys/keys3_down.png)
	     url(keys/keys4_down.png)
	     url(keys/keys5_down.png)
	     url(keys/keys6_down.png)
	     url(keys/keys7_down.png)
	     url(keys/keys8_down.png)
	     url(keys/keys9_down.png);
    visibility: hidden;
    position: absolute;
    left: -999vw;
}


/* container for keys */

.keys {
    position: relative;
    height: 130px;
    width: 886px;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 1em;
    /* padding-right: 40px; */
    color: white;
    background: black;
    font: 10px Verdana, sans-serif;
}


/* position the keys */

.keys div, .keys a {
    position: absolute;
    display: block;
    top: 0;
    text-align: center;
    background-repeat: no-repeat;
    /* reset */
    width: auto;
    background-size: auto;
    /*  border: thin blue solid;*/
}


.keys .keysL {
    left: 0px;
    width: 51px;
    background-image: url(keys/keys_left.png);
    /* reset */
    height: 100%;
    padding-top: 0;
}


.keys .keys0 {
    width: 113px;
    left: 51px;
    /* reset */
    height: 100%;
    padding-top: 0;
}

.keys .keys0.keys-up {
    background-image: url(keys/keys0_up.png);
}

.keys .keys0.keys-down, .keys a.keys0:hover {
    background-image: url(keys/keys0_down.png);
}


.keys .keys1 {
    width: 99px;
    left: 116px;
    /* reset */
    height: 100%;
    padding-top: 0;
}

.keys .keys1.keys-up {
    background-image: url(keys/keys1_up.png);
}

.keys .keys1.keys-down, .keys a.keys1:hover {
    background-image: url(keys/keys1_down.png);
}


.keys .keys2 {
    width: 78px;
    left: 215px;
    /* reset */
    height: 100%;
    padding-top: 0;
}

.keys .keys2.keys-up {
    background-image: url(keys/keys2_up.png);
}

.keys .keys2.keys-down, .keys a.keys2:hover {
    background-image: url(keys/keys2_down.png);
}


.keys .keys3 {
    width: 81px;
    left: 293px;
    /* reset */
    height: 100%;
    padding-top: 0;
}

.keys .keys3.keys-up {
    background-image: url(keys/keys3_up.png);
}

.keys .keys3.keys-down, .keys a.keys3:hover {
    background-image: url(keys/keys3_down.png);
}


.keys .keys4 {
    width: 75px;
    left: 374px;
    /* reset */
    height: 100%;
    padding-top: 0;
}

.keys .keys4.keys-up {
    background-image: url(keys/keys4_up.png);
}

.keys .keys4.keys-down, .keys a.keys4:hover {
    background-image: url(keys/keys4_down.png);
}


.keys .keys5 {
    width: 71px;
    left: 449px;
    /* reset */
    height: 100%;
    padding-top: 0;
}

.keys .keys5.keys-up {
    background-image: url(keys/keys5_up.png);
}

.keys .keys5.keys-down, .keys a.keys5:hover {
    background-image: url(keys/keys5_down.png);
}


.keys .keys6 {
    width: 73px;
    left: 520px;
    /* reset */
    height: 100%;
    padding-top: 0;
}

.keys .keys6.keys-up {
    background-image: url(keys/keys6_up.png);
}

.keys .keys6.keys-down, .keys a.keys6:hover {
    background-image: url(keys/keys6_down.png);
}


.keys .keys7 {
    width: 93px;
    z-index: 3;
    left: 593px;
    /* reset */
    height: 100%;
    padding-top: 0;
}

.keys .keys7.keys-up {
    background-image: url(keys/keys7_up.png);
}

.keys .keys7.keys-down, .keys a.keys7:hover {
    background-image: url(keys/keys7_down.png);
}


.keys .keys8 {
    width: 125px;
    left: 640px;
    z-index: 1;
    /* reset */
    height: 100%;
    padding-top: 0;
}

.keys .keys8.keys-up {
    background-image: url(keys/keys8_up.png);
}

.keys .keys8.keys-down, .keys a.keys8:hover {
    background-image: url(keys/keys8_down.png);
}


.keys .keys9 {
    width: 108px;
    left: 721px;
    /* reset */
    height: 100%;
    padding-top: 0;
}

.keys .keys9.keys-up {
    background-image: url(keys/keys9_up.png);
}

.keys .keys9.keys-down, .keys a.keys9:hover {
    background-image: url(keys/keys9_down.png);
}


.keys .keysR {
    left: 829px;
    width: 39px;
    background-image: url(keys/keys_right.png);
    /* reset */
    height: 100%;
    padding-top: 0;
}



/* "lift" keys to the right */
.keys a.keys0:hover~.keys1 {
    background-image: url(keys/keys1_up.png);
}

.keys a.keys0:hover~.keys2, .keys a.keys1:hover~.keys2 {
    background-image: url(keys/keys2_up.png);
}

.keys a.keys0:hover~.keys3, .keys a.keys1:hover~.keys3, .keys a.keys2:hover~.keys3 {
    background-image: url(keys/keys3_up.png);
}

.keys a.keys0:hover~.keys4, .keys a.keys1:hover~.keys4, .keys a.keys2:hover~.keys4, .keys a.keys3:hover~.keys4 {
    background-image: url(keys/keys4_up.png);
}

.keys a.keys0:hover~.keys5, .keys a.keys1:hover~.keys5, .keys a.keys2:hover~.keys5, .keys a.keys3:hover~.keys5, .keys a.keys4:hover~.keys5 {
    background-image: url(keys/keys5_up.png);
}

.keys a.keys0:hover~.keys6, .keys a.keys1:hover~.keys6, .keys a.keys2:hover~.keys6, .keys a.keys3:hover~.keys6, .keys a.keys4:hover~.keys6, .keys a.keys5:hover~.keys6 {
    background-image: url(keys/keys6_up.png);
}

.keys a.keys0:hover~.keys7, .keys a.keys1:hover~.keys7, .keys a.keys2:hover~.keys7, .keys a.keys3:hover~.keys7, .keys a.keys4:hover~.keys7, .keys a.keys5:hover~.keys7, .keys a.keys6:hover~.keys7 {
    background-image: url(keys/keys7_up.png);
}

.keys a.keys0:hover~.keys8, .keys a.keys1:hover~.keys8, .keys a.keys2:hover~.keys8, .keys a.keys3:hover~.keys8, .keys a.keys4:hover~.keys8, .keys a.keys5:hover~.keys8, .keys a.keys5:hover~.keys8, .keys a.keys7:hover~.keys8 {
    background-image: url(keys/keys8_up.png);
}

.keys a.keys0:hover~.keys9, .keys a.keys1:hover~.keys9, .keys a.keys2:hover~.keys9, .keys a.keys3:hover~.keys9, .keys a.keys4:hover~.keys9, .keys a.keys5:hover~.keys9, .keys a.keys5:hover~.keys9, .keys a.keys7:hover~.keys9, .keys a.keys8:hover~.keys9 {
    background-image: url(keys/keys9_up.png);
}


/* position the labels */

.keys span {
    position: absolute;
    top: 135px;
    width: 75px;
    text-align: center;
    font-size: 1em;
    /* reset */
    transform: none;
    /* border: thin blue solid; */
}

.keys .keys0 span {
    left: -10px;
}

.keys .keys1 span {
    left: 4px;
}

.keys .keys2 span {
    left: -14px;
}

.keys .keys3 span {
    left: -12px;
}

.keys .keys4 span {
    left: -11px;
}

.keys .keys5 span {
    left: -4px;
}

.keys .keys6 span {
    left: 5px;
}

.keys .keys7 span {
    left: 14px;
}

.keys .keys8 span {
    left: 46px;
}

.keys .keys9 span {
    left: 42px;
}



/* Override link style */

.keys a {
    cursor: pointer;
}

.keys a {
    background: none;
    text-decoration: none;
}

.keys a:visited {
    color: #aaaaaa;
}


.keys a.keys-up {
    color: #aaaaaa;
}

.keys a.keys-up:hover {
    color: white;
    font-weight: bold;
}


.keys a.keys-down {
    color: white;
    font-weight: bold;
}

/* unbold labels to the right */
.keys a:hover~a {
    color: #aaaaaa;
    font-weight: normal;
}