/* -- 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;
  }
}