/**
 * Pure CSS3 Piano by Taufik Nurrohman
 * On: 1 December 2011
 * URL: http://hompimpaalaihumgambreng.blogspot.com/
 * Note: This experiment is under the God Almighty License.
 * Please do not replace or remove the attribution above if you want to save/modify this project legally.
 * Good luck!
 */

* {margin:0px; padding:0px; list-style:none;}
:focus {outline:none !important;}
a {color:indigo; text-decoration:none;}
a:hover {text-decoration:underline;}
/* Piano Wrapper */
#p-wrapper {background:#000; width:1150px; position:relative; top:25px; left:10ｓpx; -webkit-box-shadow:0 2px 0px #666,0 3px 0px #555,0 4px 0px #444,0 6px 6px #000,inset 0 -1px 1px rgba(255,255,255,0.5),inset 0 -4px 5px #000; -moz-box-shadow:0 2px 0px #666,0 3px 0px #555,0 4px 0px #444,0 6px 6px #000,inset 0 -1px 1px rgba(255,255,255,0.5),inset 0 -4px 5px #000; box-shadow:0 2px 0px #666,0 3px 0px #555,0 4px 0px #444,0 6px 6px #000,inset 0 -1px 1px rgba(255,255,255,0.5),inset 0 -4px 5px #000; border:3px solid #333; -webkit-border-radius:0 0 5px 5px; -moz-border-radius:0 0 5px 5px; border-radius:0 0 5px 5px; -webkit-animation:taufik 2s; -moz-animation:taufik 2s; animation:taufik 2s;}
/* Tuts */
ul#piano {display:block; width:100%; height:240px; border-left: solid 5px #222; border-top: solid 1px #222;}
ul#piano li {list-style:none; float:left; display:inline; background:#aaa; width:45px; position:relative;}
ul#piano li a,ul#piano li div.kbw {display:block; width:45px; height:220px; background:#fff; line-height:420px; text-align:center; background:-webkit-linear-gradient(-30deg,#f5f5f5,#fff); background:-moz-linear-gradient(-30deg,#f5f5f5,#fff); background:-ms-linear-gradient(-30deg,#f5f5f5,#fff); background:-o-linear-gradient(-30deg,#f5f5f5,#fff); background:linear-gradient(-30deg,#f5f5f5,#fff); border:1px solid #ccc; -webkit-box-shadow:inset 0 1px 0px #fff,inset 0 -1px 0px #fff,inset 1px 0px  0px #fff,inset -1px 0px 0px #fff,0 4px 3px rgba(0,0,0,0.7); -moz-box-shadow:inset 0 1px 0px #fff,inset 0 -1px 0px #fff,inset 1px 0px 0px #fff,inset -1px 0px 0px #fff,0 4px 3px rgba(0,0,0,0.7); box-shadow:inset 0 1px 0px #fff,inset 0 -1px 0px #fff,inset 1px 0px 0px #fff,inset -1px 0px 0px #fff,0 4px 3px rgba(0,0,0,0.7); -webkit-border-radius:0 0 3px 3px; -moz-border-radius:0 0 3px 3px; border-radius:0 0 3px 3px;}

ul#piano li a:active,ul#piano li div.kbw:active { -webkit-box-shadow:0 2px 2px rgba(0,0,0,0.4); -moz-box-shadow:0 2px 2px rgba(0,0,0,0.4); box-shadow:0 2px 2px rgba(0,0,0,0.4); position:relative; top:2px; height:216px;}
ul#piano li a:active:before,ul#piano li div.kbw:active:before {content:""; width:0px; height:0px; border-width:216px 5px 0px; border-style:solid; border-color:transparent transparent transparent rgba(0,0,0,0.1); position:absolute; left:0px; top:0px;}
ul#piano li a:active:after,ul#piano li div.kbw:active:after {content:""; width:0px; height:0px; border-width:216px 5px 0px; border-style:solid; border-color:transparent rgba(0,0,0,0.1) transparent transparent; position:absolute; right:0px; top:0px;}
/* Black Tuts */
ul#piano li div.kbb {position:absolute; top:0px; left:-18px; width:30px; height:120px; background:#333; background:-webkit-linear-gradient(-20deg,#333,#000,#333); background:-moz-linear-gradient(-20deg,#333,#000,#333); background:-ms-linear-gradient(-20deg,#333,#000,#333); background:-o-linear-gradient(-20deg,#333,#000,#333); background:linear-gradient(-20deg,#333,#000,#333); z-index:10; border-width:1px 2px 7px; border-style:solid; border-color:#666 #222 #111 #555; -webkit-box-shadow:inset 0px -1px 2px rgba(255,255,255,0.4),0 2px 3px rgba(0,0,0,0.4); -moz-box-shadow:inset 0px -1px 2px rgba(255,255,255,0.4),0 2px 3px rgba(0,0,0,0.4); box-shadow:inset 0px -1px 2px rgba(255,255,255,0.4),0 2px 3px rgba(0,0,0,0.4); -webkit-border-radius:0 0 2px 2px; -moz-border-radius:0 0 2px 2px; border-radius:0 0 2px 2px;}
ul#piano li div.kbb:active { /* background:#0f0; */ border-bottom-width:2px; height:123px; -webkit-box-shadow:inset 0px -1px 1px rgba(255,255,255,0.4),0 1px 0px rgba(0,0,0,0.8),0 2px 2px rgba(0,0,0,0.4),0 -1px 0px #000; -moz-box-shadow:inset 0px -1px 1px rgba(255,255,255,0.4),0 1px 0px rgba(0,0,0,0.8),0 2px 2px rgba(0,0,0,0.4),0 -1px 0px #000; box-shadow:inset 0px -1px 1px rgba(255,255,255,0.4),0 1px 0px rgba(0,0,0,0.8),0 2px 2px rgba(0,0,0,0.4),0 -1px 0px #000;}
/* Tooltips */
/* Paper */
.credit {margin:35px; width:590px; height:50px; padding:15px; position:relative; top:35px; background:#fff; font:1em Cambria,Georgia,Serif; color:#000; background:-webkit-gradient(linear,0% 20%,0% 92%,from(#fff),to(#f9f9f9),color-stop(.1,#fff)); background:-moz-linear-gradient(0 0 270deg,#fff,#fff 10%,#f9f9f9); background:-ms-linear-gradient(0 0 270deg,#fff,#fff 10%,#f9f9f9); background:-o-linear-gradient(0 0 270deg,#fff,#fff 10%,#f9f9f9); background:linear-gradient(0 0 270deg,#fff,#fff 10%,#f9f9f9); border:1px solid #ccc; -webkit-box-shadow:1px 1px 4px rgba(0,0,0,0.1); -moz-box-shadow:1px 1px 4px rgba(0,0,0,0.1); box-shadow:1px 1px 4px rgba(0,0,0,0.1); -webkit-border-bottom-right-radius:60px 5px; -moz-border-radius-bottomright:60px 5px;
border-bottom-right-radius:60px 5px; -webkit-animation:taufik 1s; -moz-animation:taufik 1s; animation:taufik 1s;}
.credit:before {content:""; width:98%; z-index:-1; height:100%; padding:0 0 1px 0; position:absolute; bottom:0; right:0; background:#fff; background:-webkit-gradient(linear,0% 20%,0% 92%,from(#fff),to(#f9f9f9),color-stop(.1,#fff)); background:-moz-linear-gradient(0 0 270deg,#fff,#fff 10%,#f9f9f9); background:-ms-linear-gradient(0 0 270deg,#fff,#fff 10%,#f9f9f9); background:-o-linear-gradient(0 0 270deg,#fff,#fff 10%,#f9f9f9); background:linear-gradient(0 0 270deg,#fff,#fff 10%,#f9f9f9); border:1px solid #ccc; -webkit-box-shadow:1px 1px 8px rgba(0,0,0,0.1); -moz-box-shadow:1px 1px 8px rgba(0,0,0,0.1); box-shadow:1px 1px 8px rgba(0,0,0,0.1); -webkit-border-bottom-right-radius:60px 5px; -moz-border-radius-bottomright:60px 5px;
border-bottom-right-radius:60px 5px; -webkit-transform:skew(2deg,2deg) translate(-4px,8px); -moz-transform:skew(2deg,2deg) translate(-4px,8px); -ms-transform:skew(2deg,2deg) translate(-4px,8px); -o-transform:skew(2deg,2deg) translate(-4px,8px); transform:skew(2deg,2deg) translate(-4px,8px);}
.credit:after {content:""; width:98%; z-index:-1; height:98%; padding:0 0 1px 0; position:absolute; bottom:0; right:0; background:#f3f3f3; background:-webkit-gradient(linear,0% 20%,0% 92%,from(#fff),to(#f9f9f9),color-stop(.1,#fff)); background:-moz-linear-gradient(0 0 270deg,#fff,#fff 10%,#f9f9f9); background:-ms-linear-gradient(0 0 270deg,#fff,#fff 10%,#f9f9f9); background:-o-linear-gradient(0 0 270deg,#fff,#fff 10%,#f9f9f9); background:linear-gradient(0 0 270deg,#fff,#fff 10%,#f9f9f9); border:1px solid #ccc; -webkit-box-shadow:0px 0px 8px rgba(0,0,0,0.1); -moz-box-shadow:0px 0px 8px rgba(0,0,0,0.1); box-shadow:0px 0px 8px rgba(0,0,0,0.1); -webkit-transform:rotate(-4deg) translate(-14px,-2px); -moz-transform:rotate(-4deg) translate(-14px,-2px); -ms-transform:rotate(-4deg) translate(-14px,-2px); -o-transform:rotate(-4deg) translate(-14px,-2px); transform:rotate(-4deg) translate(-14px,-2px);}
.credit_ribbon {position:absolute; top:0; left:0; width:115px; height:25px; background:rgba(0,0,0,0.1); background:-webkit-gradient(linear,555% 20%,0% 92%,from(rgba(0,0,0,0.1)),to(rgba(0,0,0,0.0)),color-stop(.1,rgba(0,0,0,0.2))); background:-moz-linear-gradient(555% 0 180deg,rgba(0,0,0,0.1),rgba(0,0,0,0.2) 10%,rgba(0,0,0,0.0)); background:-ms-linear-gradient(555% 0 180deg,rgba(0,0,0,0.1),rgba(0,0,0,0.2) 10%,rgba(0,0,0,0.0)); background:-o-linear-gradient(555% 0 180deg,rgba(0,0,0,0.1),rgba(0,0,0,0.2) 10%,rgba(0,0,0,0.0)); background:linear-gradient(555% 0 180deg,rgba(0,0,0,0.1),rgba(0,0,0,0.2) 10%,rgba(0,0,0,0.0)); border-left:1px dashed rgba(0,0,0,0.1); border-right:1px dashed rgba(0,0,0,0.1); -webkit-box-shadow:0px 1px 7px rgba(0,0,0,0.2); -moz-box-shadow:0px 1px 7px rgba(0,0,0,0.2); box-shadow:0px 1px 7px rgba(0,0,0,0.2); -webkit-transform:rotate(-30deg) skew(0,0) translate(-30px,-20px); -moz-transform:rotate(-30deg) skew(0,0) translate(-30px,-20px); -o-transform:rotate(-30deg) skew(0,0) translate(-30px,-20px); transform:rotate(-30deg) skew(0,0) translate(-30px,-20px);}
.clear {clear:both;}