/* -- GENERAL TYPOGRAPHY -- */
.fretTitle { color: #555; text-align: center; font-family: "Helvetica Neue", sans-serif; line-height: 1.4; font-size: 1.6em; margin: 10px 0 10px 0; font-weight: 900; padding: 5px; }
section { padding: 20px; }
.content { max-width: 960px; margin: auto; }
/* Fretboard Container/Wrapper */
.fretContainer, .fretContainer_h { outline: solid 1px #eeee; margin: 0 auto; padding: 15px 0; }
.fretContainer { width: 320px; }
.fretContainer_h { max-width: 400px; }
.svg_wrapper { background-color: #fff; position: relative; height: 0; }
.svg_wrapper svg.fretboard_bg { position: absolute; top: 0; left: 0; z-index: 0; }
.svg_wrapper .cells { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
.svg_wrapper.v4 { padding-top: 91.6666666667%; }
.svg_wrapper.v5 { padding-top: 106.9444444444%; }
.svg_wrapper.v7 { padding-top: 137.5%; }
.svg_wrapper.v9 { padding-top: 168.0555555556%; }
.svg_wrapper.v12 { padding-top: 213.8888888889%; }
.svg_wrapper.v15 { padding-top: 259.7222222222%; }
.svg_wrapper.v .cell svg { width: 12.5%; float: left; display: block; }
.svg_wrapper.v4 .cell svg { height: 16.6666666667%; }
.svg_wrapper.v5 .cell svg { height: 14.2857142857%; }
.svg_wrapper.v7 .cell svg { height: 11.1111111111%; }
.svg_wrapper.v9 .cell svg { height: 9.0909090909%; }
.svg_wrapper.v12 .cell svg { height: 7.1428571429%; }
.svg_wrapper.v15 .cell svg { height: 5.8823529412%; }
.svg_wrapper.h5 { padding-top: 85.7142857143%; }
.svg_wrapper.h6 { padding-top: 75%; }
.svg_wrapper.h7 { padding-top: 72.7272727273%; }
.svg_wrapper.h .cell svg { height: 12.5%; float: left; display: block; z-index: 2; }
.svg_wrapper.h5 .cell svg { width: 14.2857142857%; }
.svg_wrapper.h6 .cell svg { width: 12.5%; }
.svg_wrapper.h7 .cell svg { width: 12.1212121212%; }
/* Fretboard Element Styles */
.cell.dot .fretb_dot { fill: #27a9e1; }
.cell.dot.root .fretb_dot { fill: #f05a28; }
.cell.dot.faded .fretb_dot { opacity: .25; }
.fretboard_bg .fret_bg rect { fill: #fff; }
.fretboard_bg .frets rect { fill: #ddd; }
.fretboard_bg .nut rect { fill: #6e6e6e; }
.fretboard_bg .strings rect { fill: #6e6e6e; }
.svg_wrapper.noNut .fretboard_bg .nut rect { fill: none; }
.markdown-body pre.fretboard { background-color: transparent; }
@media all and (max-width: 400px) {
 .fretContainer_h { max-width: 288px; }
}
@media all and (max-width: 420px) {
 .fretContainer { max-width: 220px; }
}