@charset "UTF-8";*{padding:0;margin:0}body{background-image:radial-gradient(#473962 15%,#2e2344 60%);font:20px/20px Lucida Grande,Tahoma,Verdana,sans-serif;color:#c1b8b7;overflow:hidden}body,html{height:100%}.pressed{-webkit-transform:rotateX(-10deg);transform:rotateX(-10deg)}.pressed-black{-webkit-transform:rotateX(-10deg) translateZ(-150px)!important;transform:rotateX(-10deg) translateZ(-150px)!important;margin-top:-20px!important}.piano{-webkit-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-perspective:1500;perspective:1500;width:1260px;top:0;left:0;right:0;bottom:0;margin:auto;margin-top:300px;-webkit-transform:translateZ(10px) rotateY(0deg) rotateX(-50deg);transform:translateZ(10px) rotateY(0deg) rotateX(-50deg)}.piano,.white-key-group{position:absolute;height:70px}.white-key-group{z-index:1;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;width:60px;-webkit-transform-origin:0 0 -400px;transform-origin:0 0 -400px;-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-transition:.2s;transition:.2s}.white-key-group .size-lr{width:400px;height:70px}.white-key-group .size-t{width:60px;height:400px}.white-key-group .tec{position:absolute;top:0;left:0;-webkit-transform-origin:0 0;transform-origin:0 0;border:1px solid #ccc}.white-key-group .y90-left,.white-key-group .y90-right{-webkit-transform:rotateY(90deg);transform:rotateY(90deg);background:#999;background-image:-webkit-gradient(linear,left top,right bottom,from(#fff),to(#999));background-image:linear-gradient(to bottom right,#fff,#999)}.white-key-group .y90-right{left:60px}.white-key-group .x90-top{-webkit-transform:rotateX(-90deg);transform:rotateX(-90deg);background:#fff;background-image:-webkit-gradient(linear,left top,right bottom,from(#eee),to(#fff));background-image:linear-gradient(to bottom right,#eee,#fff)}.white-key-group .x90-front{-webkit-transform:rotateX(0deg);transform:rotateX(0deg);width:60px;height:70px;background:#eee;background-image:-webkit-gradient(linear,top bottom,from(#fff),to(#eee));background-image:linear-gradient(to top bottom,#fff,#eee);position:relative}.white-key-group .x90-front2{-webkit-transform:rotateY(0deg);transform:rotateY(0deg);margin-left:60px;width:60px;height:70px;background:#eee;background-image:-webkit-gradient(linear,left top,right bottom,from(#999),to(#eee));background-image:linear-gradient(to bottom right,#999,#eee)}.black-key-group{margin-top:-42px;-webkit-transform:translateZ(-150px);transform:translateZ(-150px);z-index:100;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;width:30px;height:40px;position:absolute;-webkit-transform-origin:0 0 -250px;transform-origin:0 0 -250px;-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-transition:.2s;transition:.2s}.black-key-group .size-lr{width:250px;height:40px}.black-key-group .size-t{width:30px;height:250px}.black-key-group .tec{position:absolute;top:0;left:0;-webkit-transform-origin:0 0;transform-origin:0 0;border:1px solid #222}.black-key-group .y90-left,.black-key-group .y90-right{-webkit-transform:rotateY(90deg);transform:rotateY(90deg);background:#222;background-image:-webkit-gradient(linear,left top,right bottom,from(#111),to(#222));background-image:linear-gradient(to bottom right,#111,#222)}.black-key-group .y90-right{left:30px}.black-key-group .x90-top{-webkit-transform:rotateX(-90deg);transform:rotateX(-90deg);background:#111;background-image:-webkit-gradient(linear,left top,right bottom,from(#333),to(#111));background-image:linear-gradient(to bottom right,#333,#111)}.black-key-group .x90-front{-webkit-transform:rotateX(0deg);transform:rotateX(0deg);width:30px;height:40px;background:#333;background-image:-webkit-gradient(linear,top bottom,from(#111),to(#333));background-image:linear-gradient(to top bottom,#111,#333);position:relative}.black-key-group .x90-front2{-webkit-transform:rotateY(0deg);transform:rotateY(0deg);margin-left:30px;width:30px;height:40px;background:#333;background-image:-webkit-gradient(linear,left top,right bottom,from(#222),to(#333));background-image:linear-gradient(to bottom right,#222,#333)}.black-key-group .f-notes{color:#eee;top:5%}.black-key-group .f-keymap{color:#eee;bottom:5%}.active{-webkit-box-shadow:0 0 150px 10px #72ecfc;box-shadow:0 0 150px 10px #72ecfc}.scene{position:absolute;width:1200px;height:200px;top:-20%;left:-5%;right:0;bottom:0;margin:auto}.menu{position:fixed;top:0;width:100%;background:#191426;text-align:center;color:#c1b8b7;font-size:14px}.menu,.menu .options{height:70px;line-height:70px}.menu .options{border-left:1px solid #2f2647;float:right}.menu .options.left{width:400px}.menu .options.right{width:350px}.menu .title{float:left;font-size:20px;margin-left:7%}.menu label{margin:0 15px;vertical-align:middle;padding-top:3px;line-height:20px}.f-notes{font-size:16px;top:10%}.f-keymap,.f-notes{font-weight:700;color:#222;position:absolute;width:100%;text-align:center;visibility:hidden}.f-keymap{font-size:12px;bottom:10%}.info-active{visibility:visible}.info{left:50px}.credits,.info{position:absolute;bottom:30px;font-size:14px}.credits{right:50px}.octave{position:absolute;top:100px;left:25px}.octave p{font-size:14px;margin-bottom:5px}.octave .box{float:left;line-height:50px;text-align:center;width:50px;height:50px;border:1px solid #ccc;border-radius:7px;margin-right:10px;-webkit-transition:.4s;transition:.4s;cursor:pointer}.octave .box.b-active{background:#ccc;color:#191426}.octave .box.b-active:hover{background:#ccc}.octave .box:hover{background:#453769}.volume{position:absolute;top:130px;right:-30px;height:50px;font-size:14px;-webkit-transform:rotate(-90deg);transform:rotate(-90deg);opacity:.2;z-index:1000;-webkit-transition:.2s;transition:.2s}.volume:hover{opacity:.9}.volume label{display:block;text-align:center}.animate{-webkit-animation-name:a;animation-name:a;-webkit-animation-duration:10s;animation-duration:10s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-direction:alternate;animation-direction:alternate}@-webkit-keyframes a{0%{-webkit-transform:rotateY(-30deg) rotateX(-40deg);transform:rotateY(-30deg) rotateX(-40deg)}to{-webkit-transform:rotateY(20deg) rotateX(-35deg);transform:rotateY(20deg) rotateX(-35deg)}}@keyframes a{0%{-webkit-transform:rotateY(-30deg) rotateX(-40deg);transform:rotateY(-30deg) rotateX(-40deg)}to{-webkit-transform:rotateY(20deg) rotateX(-35deg);transform:rotateY(20deg) rotateX(-35deg)}}.dropdown{display:inline-block;position:relative;overflow:hidden;vertical-align:middle;height:28px;width:150px;background:#f2f2f2;line-height:20px;border:1px solid;border-color:#fff #f7f7f7 #f5f5f5;border-radius:3px;background-image:-webkit-gradient(linear,left top,left bottom,from(transparent),to(rgba(0,0,0,.06)));background-image:linear-gradient(180deg,transparent,rgba(0,0,0,.06));-webkit-box-shadow:0 1px 1px rgba(0,0,0,.08);box-shadow:0 1px 1px rgba(0,0,0,.08)}.dropdown:after,.dropdown:before{content:"";position:absolute;z-index:2;top:9px;right:10px;width:0;height:0;border:4px dashed;border-color:#888 transparent;pointer-events:none}.dropdown:before{border-bottom-style:solid;border-top:none}.dropdown:after{margin-top:7px;border-top-style:solid;border-bottom:none}.dropdown-select{position:relative;width:130%;margin:0;padding:6px 8px 6px 10px;height:28px;line-height:14px;font-size:16px;color:#62717a;text-shadow:0 1px #fff;background:#f2f2f2;background:transparent!important;border:0;border-radius:0;-webkit-appearance:none}.dropdown-select:focus{z-index:3;width:100%;color:#394349;outline:2px solid #49aff2;outline:2px solid -webkit-focus-ring-color;outline-offset:-2px}.dropdown-select>option{margin:3px;padding:6px 8px;text-shadow:none;background:#f2f2f2;border-radius:3px;cursor:pointer}.lt-ie9 .dropdown{z-index:1}.lt-ie9 .dropdown-select{z-index:-1}.lt-ie9 .dropdown-select:focus{z-index:3}@-moz-document url-prefix(){.dropdown-select{padding-left:6px}}[type=checkbox]:checked,[type=checkbox]:not(:checked){position:absolute;left:-9999px}[type=checkbox]:checked+label,[type=checkbox]:not(:checked)+label{position:relative;padding-left:25px;cursor:pointer}[type=checkbox]:checked+label:before,[type=checkbox]:not(:checked)+label:before{content:"";position:absolute;left:0;top:2px;width:17px;height:17px;border:1px solid #aaa;background:#f8f8f8;border-radius:3px;-webkit-box-shadow:inset 0 1px 3px rgba(0,0,0,.3);box-shadow:inset 0 1px 3px rgba(0,0,0,.3)}[type=checkbox]:checked+label:after,[type=checkbox]:not(:checked)+label:after{content:"✔";position:absolute;top:0;left:-2px;font-size:35px;color:#47afc4;-webkit-transition:all .2s;transition:all .2s}[type=checkbox]:not(:checked)+label:after{opacity:0;-webkit-transform:scale(0);transform:scale(0)}[type=checkbox]:checked+label:after{opacity:1;-webkit-transform:scale(1);transform:scale(1)}[type=checkbox]:disabled:checked+label:before,[type=checkbox]:disabled:not(:checked)+label:before{-webkit-box-shadow:none;box-shadow:none;border-color:#bbb;background-color:#ddd}[type=checkbox]:disabled:checked+label:after{color:#999}[type=checkbox]:disabled+label{color:#aaa}[type=checkbox]:checked:focus+label:before,[type=checkbox]:not(:checked):focus+label:before{border:1px dotted blue}