*{box-sizing:border-box}body{margin:0;background:#222}ul{height:18.875em;width:72em;margin:5em auto;padding:3em 0 0 3em;border:1px solid #160801;border-radius:1em;background:linear-gradient(to bottom right,rgba(0,0,0,.3),transparent),url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/187/vwood.png);box-shadow:inset 0 0 50px rgba(0,0,0,.5),inset 0 1px rgba(212,152,125,.2),0 5px 15px rgba(0,0,0,.5)}li,ul{position:relative}li{margin:0;padding:0;list-style:none;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:inset -1px 0 0 hsla(0,0%,100%,.8),inset 0 0 5px #ccc,0 0 3px rgba(0,0,0,.2);background:linear-gradient(180deg,#eee 0,#fff)}ul .white:active{border-top:1px solid #777;border-left:1px solid #999;border-bottom:1px solid #999;box-shadow:inset 2px 0 3px rgba(0,0,0,.1),inset -5px 5px 20px rgba(0,0,0,.2),0 0 3px rgba(0,0,0,.2);background:linear-gradient(180deg,#fff 0,#e9e9e9)}.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:inset -1px -1px 2px hsla(0,0%,100%,.2),inset 0 -5px 2px 3px rgba(0,0,0,.6),0 2px 4px rgba(0,0,0,.5);background:linear-gradient(45deg,#222,#555)}.black:active{box-shadow:inset -1px -1px 2px hsla(0,0%,100%,.2),inset 0 -2px 2px 3px rgba(0,0,0,.6),0 1px 2px rgba(0,0,0,.5);background:linear-gradient(90deg,#444 0,#222)}.a,.c,.d,.f,.g{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}.button-pad{width:50px;height:50px;color:transparent;border:1px solid #000;border-radius:3px;box-shadow:inset -1px -1px 2px hsla(0,0%,100%,.2),inset 0 -5px 2px 3px rgba(0,0,0,.6),0 2px 4px rgba(0,0,0,.5);background:linear-gradient(45deg,#222,#555)}.button-pad:active{box-shadow:inset -1px -1px 2px hsla(0,0%,100%,.2),inset 0 -2px 2px 3px rgba(0,0,0,.6),0 1px 2px rgba(0,0,0,.5);background:linear-gradient(90deg,#444 0,#222)}