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; /* fallback for old browsers */ }
.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 { color: #888; font-size: 21px; display: block; transition: color 0.2s; margin-top: 3px; }

#logo:hover, .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; }

.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); }