#piano{width:100%;margin-bottom:20px}.key_con{display:table;width:100%}.white_key{display:table-cell;width:5%;height:170px;border:2px solid #000;border-top-width:1px;border-radius:0 0 6px 6px;vertical-align:bottom;text-align:center;font-weight:normal;box-shadow:0 3px 5px #888;font-size:16px;position:relative;color:#000}.white_key span{padding-bottom:5px;display:inline-block}.white_key a,.white_key a:hover,.white_key a:active,.white_key a:link,.white_key a:visited{color:#000;text-decoration:none;display:block;padding-top:40px}.white_key a:hover span{font-style:italic;text-shadow:0 0 4px #BB5CF3}.black_key a,.black_key a:hover,.black_key a:active,.black_key a:link,.black_key a:visited{color:#fff;text-decoration:none;height:100%;padding:0}.black_key a:hover span,.black_key a:active span{font-style:italic;text-shadow:0 0 4px #BB5CF3}.black_key.in_chord a,.black_key.in_chord a:hover,.black_key.in_chord a:active,.black_key.in_chord a:link,.black_key.in_chord a:visited,.black_key.in_scale a,.black_key.in_scale a:hover,.black_key.in_scale a:active,.black_key.in_scale a:link,.black_key.in_scale a:visited{color:#000}.black_key{position:absolute;background-color:#000;background:linear-gradient(to bottom,#555 0,#000 50%);color:#FFF;z-index:10;border-color:#000;border-width:0 1px 1px 1px;border-style:none solid solid solid;box-shadow:2px 1px 1px #888;display:block;text-align:center;top:-2px;width:80%;height:102px;font-size:14px;font-weight:normal}.black_key span{display:inline-block;padding-top:75px}.black_key.is_after{left:60%}.black_key.is_before{left:-40%}.black_key.is_before.is_first{left:0;width:40%;border-radius:0 0 3px 0;border-left-style:none}.black_key.is_after.is_last{left:60%;width:40%;border-radius:0 0 0 3px;border-right-style:none}.black_key.is_before.is_first span,.black_key.is_after.is_last span{display:none}.black_key.in_chord,.black_key.in_scale{color:#000}.white_key.in_chord,.white_key.in_chord.in_scale,.white_key.in_chord.in_scale.scale_root{background-color:#9DC5F6;background:linear-gradient(to right,#67809d 0,#9DC5F6 20%,#9DC5F6 90%,#67809d 100%);border-bottom-width:1px}.black_key.in_chord,.black_key.in_chord.in_scale,.black_key.in_chord.in_scale.scale_root{background:#9DC5F6;box-shadow:none}.white_key.in_chord.chord_root,.white_key.in_chord.chord_root.in_scale,.white_key.in_chord.chord_root.in_scale.scale_root{background-color:#60A3F3;font-weight:bold;background:linear-gradient(to right,#396294 0,#60A3F3 20%,#60A3F3 90%,#396294 100%)}.black_key.in_chord.chord_root,.black_key.in_chord.chord_root.in_scale,.black_key.in_chord.chord_root.in_scale.scale_root{background:#60A3F3;font-weight:bold}.white_key.in_scale{background-color:#FFD89A;background:linear-gradient(to right,#c7a878 0,#FFD89A 20%,#FFD89A 90%,#c7a878 100%);border-bottom-width:1px}.black_key.in_scale{background-color:#FFD89A;background:#FFD89A;box-shadow:none}.white_key.in_scale.scale_root{background-color:#FFBE58;background:linear-gradient(to right,#c29043 0,#FFBE58 20%,#FFBE58 90%,#c29043 100%);border-bottom-width:1px;font-weight:bold}.black_key.in_scale.scale_root{background-color:#FFBE58;background:linear-gradient(to right,#c29043 0,#FFBE58 20%,#FFBE58 90%,#c29043 100%);color:#000;font-weight:bold}@media only screen and (min-width:645px) and (max-width:900px){.white_key{width:7.1428571428571%}.white_key.hide_tablet{display:none}.white_key .is_first_tablet.black_key.is_before,.white_key.is_first_tablet .black_key.is_before{width:40%;left:0;border-radius:0 0 3px 0;border-left-style:none}.white_key .is_last_tablet.black_key.is_after,.white_key.is_last_tablet .black_key.is_after{width:40%;left:60%;border-radius:0 0 0 3px;border-right-style:none}.white_key .is_first_tablet.black_key.is_before span,.white_key.is_first_tablet .black_key.is_before span,.white_key .is_last_tablet.black_key.is_after span,.white_key.is_last_tablet .black_key.is_after span{display:none}}@media only screen and (max-width:644px){.white_key{width:8.3333333333333%}.white_key.hide_tablet,.white_key.hide_mobile{display:none}.white_key .is_first_mobile.black_key.is_before,.white_key.is_first_mobile .black_key.is_before{width:40%;left:0;border-radius:0 0 3px 0;border-left-style:none}.white_key .is_last_mobile.black_key.is_after,.white_key.is_last_mobile .black_key.is_after{width:40%;left:60%;border-radius:0 0 0 3px;border-right-style:none}.black_key span{display:none}.white_key{border:1px solid #000;font-size:14px}}