/* Piano keys navbar */

body:before {
    content: url(keys/keys_top_vertical.png)
	     url(keys/keys_bottom_vertical.png)
	     url(keys/keys0_vertical_up.png)
	     url(keys/keys1_vertical_up.png)
	     url(keys/keys2_vertical_up.png)
	     url(keys/keys3_vertical_up.png)
	     url(keys/keys4_vertical_up.png)
	     url(keys/keys5_vertical_up.png)
	     url(keys/keys6_vertical_up.png)
	     url(keys/keys7_vertical_up.png)
	     url(keys/keys8_vertical_up.png)
	     url(keys/keys9_vertical_up.png)
	     url(keys/keys0_vertical_down.png)
	     url(keys/keys1_vertical_down.png)
	     url(keys/keys2_vertical_down.png)
	     url(keys/keys3_vertical_down.png)
	     url(keys/keys4_vertical_down.png)
	     url(keys/keys5_vertical_down.png)
	     url(keys/keys6_vertical_down.png)
	     url(keys/keys7_vertical_down.png)
	     url(keys/keys8_vertical_down.png)
	     url(keys/keys9_vertical_down.png);
    visibility: hidden;
    position: absolute;
    left: -999vw;
}


/* container for keys */

.keys {
    width: 100%;
}


/* position the keys */

.keys div, .keys a {
    position: relative;
    display: block;
    width: 100%;
    text-align: center;
    background-repeat: no-repeat;
    background-size: contain;
    /* border: thin blue solid; */
}


.keys .keysL {
    height: 0;
    /* padding-top: 76px; */
    padding-top: 10.133333333333333%;
    background-image: url(keys/keys_top_vertical.png);
}


.keys .keys0 {
    height: 0;
    /* padding-top: 117px; */
    padding-top: 15.6%;
}

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

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


.keys .keys1 {
    height: 0;
    /* padding-top: 117px; */
    padding-top: 15.6%;
}

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

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


.keys .keys2 {
    height: 0;
    /* padding-top: 118px; */
    padding-top: 15.7333%;
}

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

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


.keys .keys3 {
    height: 0;
    /* padding-top: 118px; */
    padding-top: 15.733333333333333%;
}

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

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


.keys .keys4 {
    height: 0;
    /* padding-top: 119px; */
    padding-top: 15.8667%;
}

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

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


.keys .keys5 {
    height: 0;
    /* padding-top: 120px; */
    padding-top: 16.0%;
}

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

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


.keys .keys6 {
    height: 0;
    /* padding-top: 119px; */
    padding-top: 15.8667%;
}

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

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


.keys .keys7 {
    height: 0;
    /* padding-top: 118px; */
    padding-top: 15.7333%;
}

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

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


.keys .keys8 {
    height: 0;
    /* padding-top: 118px; */
    padding-top: 15.7333%;
}

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

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


.keys .keys9 {
    height: 0;
    /* padding-top: 117px; */
    padding-top: 15.6%;
}

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

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


.keys .keysR {
    height: 0;
    /* padding-top: 77px; */
    padding-top: 10.2667%;
    background-image: url(keys/keys_bottom_vertical.png);
}



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

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

.keys a.keys0:hover~.keys3, .keys a.keys1:hover~.keys3, .keys a.keys2:hover~.keys3 {
    background-image: url(keys/keys3_vertical_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_vertical_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_vertical_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_vertical_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_vertical_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_vertical_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_vertical_up.png);
}


/* position the labels */

.keys span {
    position: absolute;
    left: 66%;
    width: 34%;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
    z-index: 1;
}


/* Override link style */

.keys a {
    cursor: pointer;
}

.keys a {
    text-decoration: none;
    color: #666;
}

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

.keys a.keys-down, .keys a:hover {
    color: black;
}


/* unhighlight labels to the right */
.keys a:hover~a {
    color: #666;
}