#main,.introjs-bullets,.introjs-progressbar{text-align:center}.introjs-button{background-image:-webkit-linear-gradient(#f4f4f4,#ececec);background-image:linear-gradient(#f4f4f4,#ececec)}.introjs-button:active,.introjs-button:focus{background-image:-webkit-linear-gradient(#ececec,#f4f4f4);background-image:linear-gradient(#ececec,#f4f4f4)}.introjs-hidehint{display:none}.introjs-helperLayer,.introjs-overlay{-webkit-transition:all .3s ease-out;-moz-transition:all .3s ease-out;-ms-transition:all .3s ease-out;-o-transition:all .3s ease-out}.introjs-overlay{position:absolute;z-index:999999;background-color:#000;opacity:0;background:-moz-radial-gradient(center,ellipse cover,rgba(0,0,0,.4) 0,rgba(0,0,0,.9) 100%);background:-webkit-gradient(radial,center center,0,center center,100%,color-stop(0,rgba(0,0,0,.4)),color-stop(100%,rgba(0,0,0,.9)));background:-webkit-radial-gradient(center,ellipse cover,rgba(0,0,0,.4) 0,rgba(0,0,0,.9) 100%);background:-o-radial-gradient(center,ellipse cover,rgba(0,0,0,.4) 0,rgba(0,0,0,.9) 100%);background:-ms-radial-gradient(center,ellipse cover,rgba(0,0,0,.4) 0,rgba(0,0,0,.9) 100%);background:radial-gradient(center,ellipse cover,rgba(0,0,0,.4) 0,rgba(0,0,0,.9) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#66000000', endColorstr='#e6000000', GradientType=1);-ms-filter:"alpha(opacity=50)";filter:alpha(opacity=50);transition:all .3s ease-out}.introjs-fixParent{z-index:auto!important;opacity:1!important;position:absolute!important;-webkit-transform:none!important;-moz-transform:none!important;-ms-transform:none!important;-o-transform:none!important;transform:none!important}.introjs-showElement,tr.introjs-showElement>td,tr.introjs-showElement>th{z-index:9999999!important}.introjs-disableInteraction{z-index:99999999!important;position:absolute}.introjs-relativePosition,tr.introjs-showElement>td,tr.introjs-showElement>th{position:relative}.introjs-helperLayer{position:absolute;z-index:9999998;background-color:#FFF;background-color:rgba(255,255,255,.9);border:1px solid #777;border:1px solid rgba(0,0,0,.5);border-radius:4px;box-shadow:0 2px 15px rgba(0,0,0,.4);transition:all .3s ease-out}.introjs-tooltipReferenceLayer{position:absolute;visibility:hidden;z-index:10000000;background-color:transparent;-webkit-transition:all .3s ease-out;-moz-transition:all .3s ease-out;-ms-transition:all .3s ease-out;-o-transition:all .3s ease-out;transition:all .3s ease-out}.introjs-helperLayer *,.introjs-helperLayer :after,.introjs-helperLayer :before{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;-ms-box-sizing:content-box;-o-box-sizing:content-box;box-sizing:content-box}.introjs-helperNumberLayer{position:absolute;visibility:visible;top:-16px;left:-16px;z-index:9999999999!important;padding:2px;font-family:Arial,verdana,tahoma;font-size:13px;font-weight:700;color:#fff;text-align:center;text-shadow:1px 1px 1px rgba(0,0,0,.3);background:#ff3019;background:-webkit-linear-gradient(top,#ff3019 0,#cf0404 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#ff3019),color-stop(100%,#cf0404));background:-moz-linear-gradient(top,#ff3019 0,#cf0404 100%);background:-ms-linear-gradient(top,#ff3019 0,#cf0404 100%);background:-o-linear-gradient(top,#ff3019 0,#cf0404 100%);background:linear-gradient(to bottom,#ff3019 0,#cf0404 100%);width:20px;height:20px;line-height:20px;border:3px solid #fff;border-radius:50%;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff3019', endColorstr='#cf0404', GradientType=0);filter:progid:DXImageTransform.Microsoft.Shadow(direction=135, strength=2, color=ff0000);box-shadow:0 2px 5px rgba(0,0,0,.4)}.introjs-arrow{border:5px solid #fff;content:'';position:absolute}.introjs-arrow.top,.introjs-arrow.top-middle,.introjs-arrow.top-right{top:-10px;border-color:transparent transparent #fff}.introjs-arrow.top-right{right:10px}.introjs-arrow.top-middle{left:50%;margin-left:-5px}.introjs-arrow.left,.introjs-arrow.right{top:10px}.introjs-arrow.right,.introjs-arrow.right-bottom{right:-10px;border-color:transparent transparent transparent #fff}.introjs-arrow.right-bottom{bottom:10px}.introjs-arrow.bottom{bottom:-10px;border-color:#fff transparent transparent}.introjs-arrow.left,.introjs-arrow.left-bottom{left:-10px;border-color:transparent #fff transparent transparent}.introjs-arrow.left-bottom{bottom:10px}.introjs-tooltip{position:absolute;visibility:visible;padding:10px;background-color:#fff;min-width:200px;max-width:300px;border-radius:3px;box-shadow:0 1px 10px rgba(0,0,0,.4);-webkit-transition:opacity .1s ease-out;-moz-transition:opacity .1s ease-out;-ms-transition:opacity .1s ease-out;-o-transition:opacity .1s ease-out;transition:opacity .1s ease-out}.introjs-tooltipbuttons{text-align:right;white-space:nowrap}.introjs-button{position:relative;overflow:visible;display:inline-block;padding:.3em .8em;border:1px solid #d4d4d4;margin:10px 0 0;text-decoration:none;text-shadow:1px 1px 0 #fff;font:11px/normal sans-serif;color:#333;white-space:nowrap;cursor:pointer;outline:0;background-color:#ececec;background-image:-webkit-gradient(linear,0 0,0 100%,from(#f4f4f4),to(#ececec));background-image:-moz-linear-gradient(#f4f4f4,#ececec);background-image:-o-linear-gradient(#f4f4f4,#ececec);background-image:linear-gradient(#f4f4f4,#ececec);-webkit-background-clip:padding;-moz-background-clip:padding;-o-background-clip:padding-box;-webkit-border-radius:.2em;-moz-border-radius:.2em;border-radius:.2em;zoom:1}#app,#sheet,body{overflow-x:hidden}#app,body{overflow-y:hidden}body,div{padding:0}.introjs-button:hover{border-color:#bcbcbc;text-decoration:none;box-shadow:0 1px 1px #e3e3e3}.introjs-button:active,.introjs-button:focus{background-image:-webkit-gradient(linear,0 0,0 100%,from(#ececec),to(#f4f4f4));background-image:-moz-linear-gradient(#ececec,#f4f4f4);background-image:-o-linear-gradient(#ececec,#f4f4f4);background-image:linear-gradient(#ececec,#f4f4f4)}.introjs-button::-moz-focus-inner{padding:0;border:0}.introjs-skipbutton{margin-right:5px;color:#7a7a7a}.introjs-prevbutton{-webkit-border-radius:.2em 0 0 .2em;-moz-border-radius:.2em 0 0 .2em;border-radius:.2em 0 0 .2em;border-right:0}.introjs-nextbutton{-webkit-border-radius:0 .2em .2em 0;-moz-border-radius:0 .2em .2em 0;border-radius:0 .2em .2em 0}.introjs-disabled,.introjs-disabled:focus,.introjs-disabled:hover{color:#9a9a9a;border-color:#d4d4d4;box-shadow:none;cursor:default;background-color:#f4f4f4;background-image:none;text-decoration:none}.backboard,.keyboard{box-shadow:3px 3px 4px 1px rgba(0,0,0,.9)}.introjs-bullets ul{clear:both;margin:15px auto 0;padding:0;display:inline-block}.introjs-bullets ul li{list-style:none;float:left;margin:0 2px}.introjs-bullets ul li a{display:block;width:6px;height:6px;background:#ccc;border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;text-decoration:none}.hidden,.introjs-hidehint{display:none}.introjs-bullets ul li a.active,.introjs-bullets ul li a:hover{background:#999}.introjs-progress{overflow:hidden;height:10px;margin:10px 0 5px;border-radius:4px;background-color:#ecf0f1}.introjs-progressbar{float:left;width:0;height:100%;font-size:10px;line-height:10px;background-color:#08c}.introjsFloatingElement{position:absolute;height:0;width:0;left:50%;top:50%}.introjs-fixedTooltip{position:fixed}.introjs-hint{position:absolute;background:0 0;width:20px;height:15px}.introjs-fixedhint{position:fixed}.introjs-hint:hover>.introjs-hint-pulse{border:5px solid rgba(60,60,60,.57)}.introjs-hint-pulse{width:10px;height:10px;border:5px solid rgba(60,60,60,.27);-webkit-border-radius:30px;-moz-border-radius:30px;border-radius:30px;background-color:rgba(136,136,136,.24);z-index:10;position:absolute;-webkit-transition:all .2s ease-out;-moz-transition:all .2s ease-out;-ms-transition:all .2s ease-out;-o-transition:all .2s ease-out;transition:all .2s ease-out}.introjs-hint-dot{border:10px solid rgba(146,146,146,.36);background:0 0;-webkit-border-radius:60px;-moz-border-radius:60px;border-radius:60px;height:50px;width:50px;-webkit-animation:introjspulse 3s ease-out;-moz-animation:introjspulse 3s ease-out;animation:introjspulse 3s ease-out;-webkit-animation-iteration-count:infinite;-moz-animation-iteration-count:infinite;animation-iteration-count:infinite;position:absolute;top:-25px;left:-25px;z-index:1;opacity:0}#app,#main{height:100vh;width:100%}#app,#sheet{left:0;right:0}@-moz-keyframes intrjspulse{0%{-moz-transform:scale(0);opacity:0}25%{-moz-transform:scale(0);opacity:.1}50%{-moz-transform:scale(.1);opacity:.3}75%{-moz-transform:scale(.5);opacity:.5}100%{-moz-transform:scale(1);opacity:0}}@-webkit-keyframes introjspulse{0%{-webkit-transform:scale(0);opacity:0}25%{-webkit-transform:scale(0);opacity:.1}50%{-webkit-transform:scale(.1);opacity:.3}75%{-webkit-transform:scale(.5);opacity:.5}100%{-webkit-transform:scale(1);opacity:0}}body{font:1em Verdana,Geneva,sans-serif;color:#000;background-color:#f5f5f5}div{margin:0}button{cursor:pointer}#app{position:relative;top:0;bottom:0;background-image:url(img/pattern.jpg);background-repeat:repeat}#app>header{margin:0;padding:0 .5em;font-size:1.5em;color:#f5f5f5}#app>footer{position:absolute;bottom:0;padding:.25em;color:#f5f5f5}#sheet,.backboard,.stave{position:relative}#main{padding:4px}.keyboard{padding-bottom:6px;background-color:#8b4513;background:-webkit-linear-gradient(top,#2A1506,#8b4513);background:linear-gradient(top,#2A1506,#8b4513)}.backboard{height:32px;background-color:#2A1506;border-bottom:2px solid #000}.keyboard .piano-key{display:inline-block;border-bottom-right-radius:4px;border-bottom-left-radius:4px;cursor:pointer}.keyboard .piano-key.white{width:20px;height:150px;background-color:Ivory;box-shadow:3px 3px 4px 1px rgba(0,0,0,.7);z-index:1}.keyboard .piano-key.white.down{background-color:#F1F1F0;background:-webkit-linear-gradient(top,Ivory,#D5D5D0);background:linear-gradient(top,Ivory,#D5D5D0);box-shadow:2px 2px 3px 1px rgba(0,0,0,.6)}.keyboard .piano-key.black{position:relative;width:16px;height:100px;left:-11px;margin-right:-22px;vertical-align:top;background-color:#000;box-shadow:2px 2px 3px 1px rgba(0,0,0,.6);z-index:2}.keyboard .piano-key.black.down{background-color:#111;background:-webkit-linear-gradient(top,#000,#222);background:linear-gradient(top,#000,#222);box-shadow:1px 1px 2px 1px rgba(0,0,0,.6)}.tools{margin:50px 20px;display:-webkit-box;display:-ms-flexbox;display:flex}@media only screen and (min-width:840px){.tools{margin:50px 83px;display:-webkit-box;display:-ms-flexbox;display:flex}}.clef button,.key_note{margin-left:15px}.stave *,.tools .note button,.tools .pause button{display:inline}#whole_note{background-position:0 0}#half_note{background-position:-50px 0}#quarter_note{background-position:-100px 0}#eighth_note{background-position:-150px 0}#sixteenth_note{background-position:-200px 0}#g_key{background-position:-250px 0}#whole_pause{background-position:-50px -55px}#half_pause{background-position:0 -55px}#quarter_pause{background-position:-100px -55px}#eighth_pause{background-position:-150px -55px}#sixteenth_pause{background-position:-200px -55px}#f_key{background-position:-250px -55px}#undo{background-position:-300px 0}#play{background-position:-300px -55px}.tools button{background:url(img/buttons.jpg) no-repeat;height:55px;width:50px;border:1px solid;border-radius:10px;margin-top:5px}#sheet{min-height:165px;overflow-y:auto;width:100%}.stave{height:165px;width:100%;background:url(img/stave.jpg) no-repeat;background-size:100% 100%;z-index:1}#key_control,#meter{color:#000;width:100%;height:30px;font-size:14px}.tools p{color:#fff}.stave *{float:left;vertical-align:top;z-index:2}.tools button:hover{box-shadow:0 12px 16px 0 rgba(0,0,0,.24),0 17px 50px 0 rgba(0,0,0,.19)}.clef button{display:block;margin-right:10px}.func button{display:block;margin-left:5px;margin-right:20px}#key_control,#key_p,#meter,#meter_p{display:inline}#keys,#meters{margin:20px 5px 15px}