@import url(https://fonts.googleapis.com/css?family=Crete+Round);@import url(https://fonts.googleapis.com/css?family=Crete+Round|Open+Sans|Raleway);#top[data-v-21e0e126]{height:50px}#top>[data-v-21e0e126]{position:absolute}#nav[data-v-21e0e126]{width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}#nav>[data-v-21e0e126]{-webkit-box-flex:0;-ms-flex:0 1 auto;flex:0 1 auto;text-decoration:none}#printBtn[data-v-21e0e126]{right:1em}body{font-family:Open Sans,sans-serif}h1,h2,h3,h4,h5,h6{font-family:Crete Round,serif;font-weight:400}h1{font-size:2.5em}html{height:100%;background:#27475e}body{background:linear-gradient(0,#27475e,#286078);color:#fff;font-size:16px;margin:0;padding:1em 0;min-height:100%}*{box-sizing:border-box}a:hover{text-decoration:underline}a{color:#fff;text-decoration:none}.title{text-align:center}.titleContainer{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.titleContainer>*{-webkit-box-flex:0;-ms-flex:0 1 auto;flex:0 1 auto;margin-left:25px;margin-right:25px}.pageMenu{margin-left:65px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-ms-flex-wrap:wrap;flex-wrap:wrap}.pageMenu>*{-webkit-box-flex:0;-ms-flex:0 1 auto;flex:0 1 auto;margin:5px}@media{.fretNumber{font-size:16px;text-shadow:0 1px 1px rgba(0,0,0,.3);text-anchor:middle}.line{stroke-width:1px;stroke:#000}.blackKey{transition:fill .5s ease-out;fill:#000a12;stroke-width:0}.blackKey:hover{transition:fill 0s;fill:#37474f}.whiteKey{transition:fill .5s ease-out;fill:#eee}.whiteKey:hover{transition:fill 0s;fill:#cfd8dc;fill-opacity:.7}.logoPath{fill:#27b2c1}.string{fill:none}.pianoOuterRect,.string{stroke-width:.5px;vector-effect:non-scaling-stroke}.pianoOuterRect{fill:#fff}}@media screen{.fretNumber{fill:#eceff1}.string{stroke-width:1px;stroke:#eceff1}.marker{fill:rgba(39,178,193,.2)}.pitch{transition:opacity .25s ease-in-out}.pitch text{fill:#eceff1}.pianoOutline{display:none}}@media print{.fretNumber{fill:#333}.string{stroke:#333}.marker{fill:#dae2ea}.whiteKey{fill:#fff}.pianoOutline{stroke-width:.5px;vector-effect:non-scaling-stroke;stroke:#000;fill:none}}@media{.pitchPlaying circle:first-child{fill:darkred}.pitchPlaying circle:nth-child(2){fill:#c71585}.pitchCurrentExactly{transition:opacity 0s}.pitchCurrentExactly circle:first-child{fill:transparent}.pitchCurrentExactly circle:nth-child(2){fill:#ad4746;-webkit-transform:translate(1px,1px);transform:translate(1px,1px)}.pitchCurrentExactly text{fill:#eceff1;-webkit-transform:translate(1px,1px);transform:translate(1px,1px);font-size:16px;text-shadow:0 1px 1px rgba(0,0,0,.3)}.pitchCurrent circle:first-child{fill:transparent}.pitchCurrent circle:nth-child(2){fill:#c16665}.pitchCurrent circle:nth-child(2),.pitchCurrent text{-webkit-transform:translate(1px,1px);transform:translate(1px,1px)}.pitchCurrent text{fill:#eceff1;font-size:16px;text-shadow:0 1px 1px rgba(0,0,0,.3)}.pitchHide{transition:opacity .5s ease-in-out;opacity:0}.pitchHide circle:first-child{fill:#125057}.pitchHide circle:nth-child(2){fill:#27b2c1}.pitchDefault circle:first-child{fill:#125057}.pitchDefault circle:nth-child(2){fill:#27b2c1}}@media screen{.pitch circle:first-child{fill:#09292d;fill:#125057}.pitch text{fill:#eceff1}.pitchRoot circle:first-child{fill:#487831}.pitchRoot circle:nth-child(2){fill:#85c168}.pitchRoot text{fill:#eceff1;font-size:16px;text-shadow:0 1px 1px rgba(0,0,0,.3)}.pitchDefault circle:first-child{fill:#125057}.pitchDefault circle:nth-child(2){fill:#27b2c1}.pitchDefault text{fill:#eceff1;font-size:16px;text-shadow:0 1px 1px rgba(0,0,0,.3)}}@media print{.pitchRoot circle:first-child{fill:#487831}.pitchRoot circle:nth-child(2){fill:#85c168}.pitchRoot text{fill:#eceff1;font-size:16px;text-shadow:0 1px 1px rgba(0,0,0,.3)}.pitchDefault circle:first-child{fill:#07090c}.pitchDefault circle:nth-child(2){fill:#34495e}.pitchDefault text{fill:#eceff1;font-size:16px;text-shadow:0 1px 1px rgba(0,0,0,.3)}}.btn{padding:.1rem .5rem;cursor:pointer;display:inline-block;width:auto;text-align:center;background:#239eac;line-height:2em;transition:background-color .5s ease-out;border:none}.btn:hover{background:#1e8b97;transition:background-color 0s}.btn:active{background:#c16665}.btn.selected{background:#85c168}.btn-alternative{background:#85c168!important}.roundBtn{padding:.1rem .5rem;cursor:pointer;display:inline-block;width:auto;text-align:center;background:#239eac;line-height:2em;transition:background-color .5s ease-out;border:none;border-radius:1em;padding:0 1em;font-size:1.3em;margin:0 .25em;box-shadow:3px 3px 8px rgba(33,33,33,.3)}.roundBtn:hover{background:#1e8b97;transition:background-color 0s}.roundBtn:active{background:#c16665}.roundBtn.selected{background:#85c168}.roundBtn:hover{box-shadow:2px 2px 8px rgba(33,33,33,.3);-webkit-transform:translate(1px,1px);transform:translate(1px,1px)}.roundBtn:active{box-shadow:none;-webkit-transform:translate(3px,3px);transform:translate(3px,3px)}@media screen{.card{background-color:hsla(0,0%,100%,.05);box-shadow:3px 3px 8px rgba(33,33,33,.3);margin:1.33em;padding:1em 0;border-radius:1em}}@media print{.card{page-break-inside:avoid}}.tool{position:relative}.tool:after,.tool:before{position:absolute;left:50%;opacity:0;z-index:-100}.tool:focus:after,.tool:focus:before,.tool:hover:after,.tool:hover:before{opacity:1;z-index:100}.tool:before{border-style:solid;border-width:0 1em 1em;border-color:transparent transparent #3e474f;bottom:-60%;margin-left:-.5em;content:" "}.tool:after{background:#3e474f;border-radius:.25em;bottom:-180%;color:#fff;padding:.5em;margin-left:-.5em;content:attr(data-tip)}@media print{*{background:transparent!important;color:#000!important;text-shadow:none!important;box-shadow:none!important;border:none!important}.noprint{display:none!important}}.fretboardContainer[data-v-590c0dc0]{width:100%;padding:20px}.fretboard[data-v-590c0dc0]{width:100%}.pitch[data-v-d47a59c4]{pointer-events:none}.pianoContainer[data-v-d47a59c4]{width:100%;padding:0 20px 0 65px}.line[data-v-d47a59c4]{stroke-width:1;stroke:#000;vector-effect:non-scaling-stroke}.choose[data-v-a1c5d1ee]{border-left:1em solid #239eac;border-right:1em solid #239eac;border-radius:1em;background-color:#239eac;box-shadow:3px 3px 8px rgba(33,33,33,.3)}.choose ul[data-v-a1c5d1ee]{list-style:none;padding:0;margin:0;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.choose ul li[data-v-a1c5d1ee]{-webkit-box-flex:0;-ms-flex:0 1 auto;flex:0 1 auto;white-space:nowrap}.message[data-v-75feeb29]{margin:4em auto;text-align:center}