body{overflow-x:hidden;font-family:"Roboto","Helvetica Neue",Helvetica,Arial,sans-serif;transition:padding-left 0.2s}body.blank{padding:0}.sidebar-visible .cover{position:fixed;top:0;bottom:0;left:0;right:0;background-color:rgba(0,0,0,0.5);z-index:5;transition:background-color 0.2s;display:none}a:visited,a:active,a:link{text-decoration:none}p,li{font-size:18px;line-height:1.5em;margin-bottom:1.5em;color:#777;font-family:"Roboto","Helvetica Neue",Helvetica,Arial,sans-serif}li{margin-bottom:0;max-width:540px}strong{color:#000}h1{font-family:Georgia;padding-top:180px;margin-left:0;margin-bottom:18px;line-height:1.25em}.post-content>h1:first-of-type{padding-top:40px}h1 small.sub{display:block;text-transform:uppercase;font-family:"Roboto","Helvetica Neue",Helvetica,Arial,sans-serif;font-size:16px;letter-spacing:1px;margin-bottom:9px;color:#F16264}h2{font-family:Georgia}.main-container{position:fixed;left:360px;top:0;bottom:0;right:0;overflow-y:scroll;transition:left 0.2s;padding-bottom:200px;overflow-x:hidden}main{margin:0;padding:30px;position:relative;width:610px}sidebar{position:fixed;left:0;top:0;bottom:0;width:360px;background-color:#F4F4F4;border-right:1px solid #EEE;padding:30px;z-index:30;transition:left 0.2s;overflow-y:scroll;padding-right:20px;padding-bottom:60px;padding-top:20px}sidebar h3{font-size:22px;margin-top:36px;font-weight:normal}sidebar p{font-size:16px}sidebar .signup{background-color:#3FA9B4;border-radius:100px;padding:15px 30px;color:#FFF;opacity:1;transition:opacity 0.2s}sidebar .signup:hover{text-decoration:none;opacity:0.5;transition:opacity 0.2s}sidebar ul{padding:0}sidebar ul li{list-style-type:none;line-height:1.5em}body{min-width:610px}@media screen and (max-width: 950px){sidebar{left:-360px}.sidebar-visible .cover{display:block}.main-container .menu,sidebar .sidebar-menu{display:block}sidebar.sidebar-visible{left:0;box-shadow:0 0 10px rgba(0,0,0,0.2);border-right:1px solid #DDD}.main-container{left:0;transition:left 0.2s}.preorder-banner{margin-top:40px}}.topic{display:block;margin-right:10px;transition:background 0.2s;text-decoration:none;height:48px;margin-bottom:4px;border-radius:2px}.topic:hover{text-decoration:none;transition:background 0.2s;background:#EEE}.topic:hover .coming-soon{transition:opacity 0.2s;opacity:1}.topic:hover .topic-pic{transition:background-color 0.2s;background-color:#000 !important}.topic .topic-pic{width:56px;height:48px;display:inline-block;border-radius:2px;float:left;margin-right:15px;transition:background-color 0.2s}.topic h3{font-size:18px;margin:0;color:#444;line-height:48px}.topic .intro{background-image:url("/assets/images/toc/triangle.png");background-size:16px 19px;background-repeat:no-repeat;background-position:center;background-color:#d0c490}.topic .wave{background-image:url("/assets/images/toc/wave.png");background-size:50px 20px;background-repeat:no-repeat;background-position:center}.topic .harmony{background-image:url("/assets/images/toc/harmony.png");background-size:100px 20px;background-repeat:no-repeat;background-position:center}.topic .pentatonic{background-image:url("/assets/images/toc/pentatonic.png");background-size:35px 16px;background-repeat:no-repeat;background-position:center}.topic .chromatic{background-image:url("/assets/images/toc/chromatic.png");background-size:22px 18px;background-repeat:no-repeat;background-position:center}.topic .chords{background-image:url("/assets/images/toc/chord.png");background-size:22px 26px;background-repeat:no-repeat;background-position:center}.topic .key{background-image:url("/assets/images/toc/treble.png");background-size:14px 40px;background-repeat:no-repeat;background-position:center}.topic .interval{background-image:url("/assets/images/toc/interval.png");background-size:40px 7px;background-repeat:no-repeat;background-position:center}.topic .timbre{background-image:url("/assets/images/toc/timbre.png");background-size:39px 27px;background-repeat:no-repeat;background-position:center}.topic .consonance{background-image:url("/assets/images/toc/consonance.png");background-size:52px 18px;background-repeat:no-repeat;background-position:center}.topic .drum{background-image:url("/assets/images/toc/drum.png");background-size:40px 28px;background-repeat:no-repeat;background-position:center}.topic .guitar{background-image:url("/assets/images/toc/guitar.png");background-size:30px 26px;background-repeat:no-repeat;background-position:center}.topic .piano{background-image:url("/assets/images/toc/piano.png");background-size:41px 16px;background-repeat:no-repeat;background-position:center}.topic .melody{background-image:url("/assets/images/toc/melody.png");background-size:33px 21px;background-repeat:no-repeat;background-position:center}.topic .doremi{background-image:url("/assets/images/toc/doremi.png");background-size:47px 12px;background-repeat:no-repeat;background-position:center}.topic .blues{background-image:url("/assets/images/toc/blues-guitar.png");background-size:35px 35px;background-repeat:no-repeat;background-position:center}.topic.soon div{background-color:#333}.topic .coming-soon{color:#FFF;background-color:#25CB68;padding:6px 8px 4px;border-radius:2px;float:right;position:relative;top:10px;right:-4px;box-shadow:-2px 3px 3px rgba(0,0,0,0.15);text-transform:uppercase;font-size:12px;letter-spacing:1px;opacity:0;transition:opacity 0.2s}.topic .coming-soon.new{background-color:#000;opacity:1}.share-buttons{position:fixed;right:20px;top:20px;z-index:10}.share-buttons a{color:rgba(255,255,255,0)}.share-buttons .fb-share-button{top:-5px;margin-left:5px}#logo{display:inline-block;height:21px;width:155px;background-image:url("/assets/images/lightnote-logo@2x.png");background-repeat:no-repeat;background-size:155px 21px;margin-bottom:30px;margin-top:20px}#logo:hover{opacity:0.75}.prem-link:hover h3{text-decoration:none;color:#333;transition:color 0.2s}.prem-link h3{color:#888;margin-bottom:0;transition:color 0.2s}.menu,.sidebar-menu{position:absolute;width:70px;cursor:pointer;top:10px;z-index:10;display:none;padding:20px}.menu{left:10px}.sidebar-menu{right:10px}.menu .menu-line,.sidebar-menu .menu-line{height:3px;background-color:#AAA;margin-bottom:3px;transition:background-color 0.2s}.menu:hover .menu-line,.sidebar-menu:hover .menu-line{background-color:#555;transition:background-color 0.2s}p.sub{text-transform:uppercase;font-size:14px}.todo{background-color:#FFC}.narrative p.sub{color:red}.narrative{border-left:2px solid #955;padding-left:20px;margin-left:-20px}.overlap{margin-bottom:-205px}.note{display:inline-block;background-color:#EEE;height:40px;width:40px;margin-right:1px;text-align:center;padding:10px;cursor:pointer;color:#FFF}h1 .note{font-size:14px;font-family:"Roboto","Helvetica Neue",Helvetica,Arial,sans-serif;padding-top:3px !important;position:relative;bottom:8px;margin-right:10px}.note.round{border-radius:200px}.empty-note{display:inline-block;height:40px;width:40px;margin-right:1px}.note1,.note.active.note-C4,.note.active.note-C5{background-color:#E54C4E}.note2{background-color:#DF844A}.note3,.note.active.note-D4{background-color:#E4AB51}.note4{background-color:#E3C749}.note5,.note.active.note-E4{background-color:#DFE44E}.note6,.note.active.note-F4{background-color:#AED747}.note7{background-color:#3FBC46}.note8,.note.active.note-G4{background-color:#3FA9B4}.note9{background-color:#407CB4}.note10,.note.active.note.active.note-A4{background-color:#4E45B3}.note11{background-color:#8D45B7}.note12,.note.active.note-B4{background-color:#CA4593}.full-wave{position:relative;left:-35px}.progress-btn{background-color:#c0a490;border-radius:500px;display:inline-block;font-size:16px;text-transform:uppercase;padding:15px 30px;color:#000;letter-spacing:2px;cursor:pointer;opacity:1;transition:opacity 0.2s}.progress-btn:hover{opacity:0.5;transition:opacity 0.2s}.play-btn{background-color:#F16264;border-radius:500px;display:inline-block;font-size:16px;text-transform:uppercase;padding:10px 20px;color:#FFF;letter-spacing:2px;cursor:pointer;opacity:1;transition:opacity 0.2s;margin-bottom:27px}.play-btn:hover{opacity:0.5;transition:opacity 0.2s}.next-btn,.next-btn:link,.next-btn:visited,.next-btn:active{background-color:#3FA9B4;border-radius:500px;display:inline-block;font-size:16px;text-transform:uppercase;padding:15px 30px;color:#FFF;letter-spacing:2px;cursor:pointer;opacity:1;transition:opacity 0.2s;text-decoration:none}.next-btn:hover{opacity:0.5;transition:opacity 0.2s;color:#FFF;text-decoration:none}svg{font:10px sans-serif}.axis path,.axis line{fill:none;stroke:#000;shape-rendering:crispEdges}.x.axis line{shape-rendering:auto}.line{fill:none;stroke:#000;stroke-width:1.5px}#music-box{background:#70e1f5;background:-webkit-linear-gradient(to left, #70e1f5, #ffd194);background:linear-gradient(to left, #70e1f5, #ffd194);width:550px;height:60px;display:inline-block;margin-top:40px;border-radius:4px;padding:20px;cursor:pointer;text-align:right;color:#FFF}.choice{display:inline-block;cursor:pointer;background-color:#EEE;padding:10px 20px;border-radius:400px;text-align:center;margin-bottom:36px;margin-right:4px}.choice:hover{background-color:#DDD}.piano .white-key{border:1px solid #CCC;border-bottom-width:4px;display:inline-block;width:50px;height:180px;border-radius:6px;cursor:pointer}.piano .white-key:hover{background-color:#F6F6F6}.piano .black-key{background-color:#333;display:inline-block;border:5px solid #000;border-top-width:2px;border-bottom-width:10px;width:26px;height:120px;margin-left:-13px;margin-right:-13px;position:relative;z-index:5;margin-bottom:60px;border-radius:4px;cursor:pointer}.piano .black-key:hover{background-color:#000}.inactive{opacity:0.15}.note-board{margin-bottom:36px}.keys,.key-types{margin-top:18px}.keys .key,.key-types .key-type{background-color:#EEE;color:#000;display:inline-block;min-width:40px;height:40px;border-radius:50px;text-align:center;padding:10px;cursor:pointer}.key-types .key-type{min-width:110px}.keys .key.selected,.key-types .key-type.selected{background-color:#000;color:#FFF}.keys .key.selected:hover,.key-types .key-type.selected:hover{background-color:#000}.keys .key:hover,.key-types .key-type:hover{background-color:#DDD}.chord{text-align:center;display:inline-block;padding:15px;background-color:#AAA;margin-right:1px;height:65px;width:65px;font-family:Georgia;font-size:24px;color:#FFF;cursor:pointer}.chord1,.chord8{background-color:#E54C4E}.chord2{background-color:#E4AB51}.chord3{background-color:#DFE44E}.chord4{background-color:#AED747}.chord5{background-color:#3FA9B4}.chord6{background-color:#4E45B3}.chord7{background-color:#8D45B7}.new-tag{background-color:#337ab7;color:#FFF;font-size:10px;padding:4px;border-radius:3px;margin-left:5px;position:relative;bottom:2px;text-transform:uppercase;letter-spacing:1px}.play-circle{background:url("/assets/images/play-button.svg");height:30px;width:30px;display:inline-block;line-height:30px;vertical-align:middle;margin-right:10px;cursor:pointer;opacity:1;transition:opacity 0.2s}.play-circle:hover{opacity:0.5;transition:opacity 0.2s;margin-right:10px}.rating-container{text-align:center}.star-rating{display:inline-block;height:23px;width:144px;background-image:url("/assets/images/stars.png");background-size:144px 23px;margin-bottom:10px}.push{margin-bottom:60px}.measure{width:274px;display:inline-block;vertical-align:top;margin-right:3px}.line{height:128px;width:33px;display:inline-block}.n{display:inline-block;height:19px;width:32px;background-color:#EEE;margin-right:1px;vertical-align:top;cursor:pointer}.n.active{background-color:blue}.drum-machine{margin-left:40px}.controls h3{text-transform:uppercase;font-size:21px;color:#9B9B9B;margin:0;margin-top:10px}#play,#stop{height:20px;width:30px;display:inline-block;float:right;padding:20px;cursor:pointer;background-repeat:no-repeat;background-position:center;opacity:1;transition:opacity 0.2s}#play:hover,#stop:hover{opacity:0.5;transition:opacity 0.2s}#stop{background-image:url("/assets/images/drum-machine/stop-btn.png");background-size:20px 20px}#play{background-image:url("/assets/images/drum-machine/play-btn.png");background-size:20px 23px}.track{height:55px}.beat{display:inline-block;height:50px;width:35px;margin-right:5px;margin-bottom:5px;background-color:#DDD;border-radius:3px;cursor:pointer}.beat.down{background-color:#CCC}.track-cy .beat.active{background-color:#8D45B7}.track-hh .beat.active{background-color:#E54D4E}.track-sd .beat.active{background-color:#3FA9B4}.track-bd .beat.active,.track-kd .beat.active{background-color:#E4AB51}.track-3 .beat.active{background-color:#4E45B3}.indicator{display:inline-block;height:50px;width:55px;border-radius:3px;margin-right:5px;float:left;margin-left:-11px;background-repeat:no-repeat;background-position:center}.indicator-cy{background-image:url("/assets/images/drum-machine/crash.png");background-size:41px 19px}.indicator-hh{background-image:url("/assets/images/drum-machine/cymbals.png");background-size:39px 18px}.indicator-sd{background-image:url("/assets/images/drum-machine/snare.png");background-size:34px 29px}.indicator-bd,.indicator-kd{background-image:url("/assets/images/drum-machine/kick-drum.png");background-size:40px 40px}.ch{display:inline-block;height:50px;width:55px;margin-right:2px;margin-bottom:5px;background-color:#DDD;border-radius:3px;cursor:pointer}.controls{background-color:#F6F6F6;position:fixed;top:0;left:0;right:0;padding:4px;padding-left:10px}.melody-machine{margin-top:40px;margin-left:90px;display:flex;flex-direction:row}.melody-machine .note-container{display:flex;flex-direction:column}.melody-machine .note{background-color:#eee;display:inline-block;height:10px;width:75px;cursor:pointer;margin-right:5px;margin-bottom:5px}.gc-fretboard{height:198px;width:2000px;display:inline-block;margin-left:300px;border-radius:3px;margin-top:20px;background-image:url("/assets/images/fretboard/fretboard-even.png");background-size:787px 160px;background-repeat:no-repeat;padding:20px;background-position:40px 20px;position:relative}.gc-fretboard .finger{display:inline-block;height:26px;width:26px;border-radius:300px;position:absolute;top:0;left:0}.gc-fretboard h2{position:absolute;top:30px;left:-200px}.boxContainer{position:fixed;top:0;left:0;width:2000px;height:50px;z-index:40}.boxContainer .noteBox{display:inline-block;height:50px;width:50px;border-right:1px solid #FFF;color:#FFF;font-weight:bold;padding:14px;text-align:center;cursor:pointer;box-shadow:0 3px 3px rgba(0,0,0,0.1)}.new-piano{height:160px;text-align:center;padding-bottom:10px;z-index:1000;-ms-transform:perspective(100rem) rotateX(20deg) scale(1);-webkit-transform:perspective(100rem) rotateX(20deg) scale(1);transform:perspective(100rem) rotateX(20deg) scale(1);transition:bottom 0.2s;margin-top:-50px}.new-piano .white-key{background-color:#FFF;height:100%;border:2px solid #000;border-bottom-width:6px;width:50px;display:inline-block;margin-right:-2px;margin-bottom:20px;cursor:pointer;transition:background-color 0.1s, box-shadow 0.1s;box-shadow:0 20px 15px rgba(0,0,0,0.1)}.new-piano .white-key.active{background-color:#FFC019;border-bottom-width:4px;transition:background-color 0.1s, box-shadow 0.1s}.new-piano .white-key:first-child{border-top-left-radius:4px;border-bottom-left-radius:6px}.new-piano .white-key:last-child{border-top-right-radius:4px;border-bottom-right-radius:6px}.new-piano .black-key{background:#333;height:55%;border-radius:4px;border:4px solid #111;border-bottom-width:16px;border-top-width:2px;display:inline-block;position:absolute;width:28px;margin-left:-14px;margin-top:-3px;cursor:pointer;box-shadow:0px 4px 1px rgba(0,0,0,0.1);transition:background 0.1s, border-bottom-width 0.1s, border-color 0.1s, box-shadow 0.1s}.new-piano .black-key.active{background:#b28100;border-bottom-width:13px;box-shadow:inset 0px 0px 5px rgba(0,0,0,0.5);transition:background 0.1s, border-bottom-width 0.04s, border-color 0.1s, box-shadow 0.1s}