/**
 * 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;
}

.error {
    background: #e28e94;
}

.settings {
    background:linear-gradient(60deg, #b2c7db, #717dca);
}

.credits {
    margin-top: 50px;
    color: cornsilk;
}

.credits a {
    color: cornsilk;
}

body {
    background:#666;
}

/* Piano Wrapper */
#p-wrapper {
    background:#000;
    background:linear-gradient(-60deg,#000,#333,#000,#666,#333 70%);
    overflow-x: scroll;
    position:relative;
    -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:2px 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-top:2px solid #222;
}

ul#piano li {
    list-style:none;
    float: left;
    display:inline;
    background:#aaa;
    width:40px;
    position:relative;
}

ul#piano li a,ul#piano li div.anchor {
    display:block;
    height:220px;
    background:#fff;
    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.anchor: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.anchor: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.anchor: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 span {
    position:absolute;
    top:0px;
    left:-12px;
    width:20px;
    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 span:active {
    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;
}

ul#piano li li {
    width:150px;
    height:auto;
    display:block;
    float:none;
    background:transparent;
}

ul#piano li li a,ul#piano li li a:active {
    height:auto;
    display:block;
    padding:10px 15px;
    background:#333;
    font:normal 12px Arial,Sans-Serif;
    color:#fff;
    text-decoration:none;
    -webkit-box-shadow:none;
    -moz-box-shadow:none;
    box-shadow:none;
    border-radius:0px;
    -webkit-border-radius:0px;
    -moz-border-radius:0px;
    border-width:1px 0;
    border-style:solid;
    border-color:#444 transparent #222 transparent;
    top:0px;
    margin-top:0px;
}

ul#piano li li a:active:before,ul#piano li li a:active:after {
    border:none !important;
}

ul#piano li:hover ul,ul#piano li:hover #search,ul#piano li:hover #contact {
    visibility:visible;
    opacity:1;
    margin-top:15px;
}

ul#piano li li a:hover {
    background:#111;
    border-top-color:#222;
    border-bottom-color:#000;
}

.clear {
    clear:both;
}


/* Animation */
@-webkit-keyframes taufik {
    from {opacity:0;}
    to {opacity:1;}
}
@-moz-keyframes taufik {
    from {opacity:0;}
    to {opacity:1;}
}
@keyframes taufik {
    from {opacity:0;}
    to {opacity:1;}
}