@charset "utf-8";
/* CSS Document */
.long-neck-default { 
  border: 4px solid #efefef;
  border-radius: 6px;
  margin: 4px 0;
 }
.long-neck-default .guitar-module-main-wrapper { position: relative; overflow: hidden; }
.long-neck-default .guitar-module-main-wrapper .top-wrapper { width: 1440px; position: relative; overflow: auto; }
.long-neck-default .guitar-module-main-wrapper .neckmodule { position: relative; background: url('../images/horizontal-long-neck.png') no-repeat 60px 0; width: 1440px; height: 192px; margin: 0; background-size: 1440px; }
.long-neck-default .guitar-module-main-wrapper div { box-sizing: border-box; }
.long-neck-default .guitar-module-main-wrapper .neckmodule .note { cursor: pointer; }
.guitar-module-main-wrapper .controls-toggler {
  position: absolute;
  top: 5px;
  right: 5px;
  border: 1px solid #cccccc;
  border-radius: 3px;
  padding: 5px;
  z-index: 3000;
  text-align: center;
  width: 55px;
  line-height: 1.0em;
  background: #000000;
  font-size: 0.9em;
  font-weight: bold;
}

.guitar-module-main-wrapper .sound-trigger-options {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 5px;
}

.guitar-module-main-wrapper .sound-trigger-options label,
.guitar-module-main-wrapper .sound-trigger-options input {
  cursor: pointer;
}

.long-neck-default .guitar-module-main-wrapper .scale-only-link-wrapper {
  margin: 10px 0 0;
}

.guitar-module-main-wrapper .controls-toggler span {
  display: block;
  cursor: pointer;
  color: white;
}

.guitar-module-main-wrapper .string1,
.guitar-module-main-wrapper .string2,
.guitar-module-main-wrapper .string3,
.guitar-module-main-wrapper .string4,
.guitar-module-main-wrapper .string5,
.guitar-module-main-wrapper .string6 {
  font-family: 'Archivo Narrow', sans-serif;
  font-weight: bold;
  font-size: 13px;
  color: black;
  text-align: center;
  position: absolute;
  width: 19px;
  height: 19px;
  padding-top: 1px;
  /*border: solid 1px #FFC200;*/
  /*border: solid 1px #f5ab00;*/
  border-radius: 50%;
  border: solid 1px #930101;
  background: aliceblue;
}

/* STYLING TEMPLATES? */
/* positioner styles for note-grid, Adding more fretboard background images/design-templates will force these settings into separate stylesheets */
.long-neck-default .guitar-module-main-wrapper .note.string1 { top: 0; }
.long-neck-default .guitar-module-main-wrapper .note.string2 { top: 27px; }
.long-neck-default .guitar-module-main-wrapper .note.string3 { top: 55px; }
.long-neck-default .guitar-module-main-wrapper .note.string4 { top: 84px; }
.long-neck-default .guitar-module-main-wrapper .note.string5 { top: 112px; }
.long-neck-default .guitar-module-main-wrapper .note.string6 { top: 140px; }

.long-neck-default .guitar-module-main-wrapper .note.fret0 { left: 40px; }
.long-neck-default .guitar-module-main-wrapper .note.fret1 { left: 90px; }
.long-neck-default .guitar-module-main-wrapper .note.fret2 { left: 152px; }
.long-neck-default .guitar-module-main-wrapper .note.fret3 { left: 220px; }
.long-neck-default .guitar-module-main-wrapper .note.fret4 { left: 284px; }
.long-neck-default .guitar-module-main-wrapper .note.fret5 { left: 348px; }
.long-neck-default .guitar-module-main-wrapper .note.fret6 { left: 414px; }
.long-neck-default .guitar-module-main-wrapper .note.fret7 { left: 479px; }
.long-neck-default .guitar-module-main-wrapper .note.fret8 { left: 544px; }
.long-neck-default .guitar-module-main-wrapper .note.fret9 { left: 609px; }
.long-neck-default .guitar-module-main-wrapper .note.fret10 { left: 674px; }
.long-neck-default .guitar-module-main-wrapper .note.fret11 { left: 739px; }
.long-neck-default .guitar-module-main-wrapper .note.fret12 { left: 804px; }
.long-neck-default .guitar-module-main-wrapper .note.fret13 { left: 868px; }
.long-neck-default .guitar-module-main-wrapper .note.fret14 { left: 933px; }
.long-neck-default .guitar-module-main-wrapper .note.fret15 { left: 998px; }
.long-neck-default .guitar-module-main-wrapper .note.fret16 { left: 1063px; }
.long-neck-default .guitar-module-main-wrapper .note.fret17 { left: 1128px; }
.long-neck-default .guitar-module-main-wrapper .note.fret18 { left: 1192px; }
.long-neck-default .guitar-module-main-wrapper .note.fret19 { left: 1258px; }
.long-neck-default .guitar-module-main-wrapper .note.fret20 { left: 1322px; }
.long-neck-default .guitar-module-main-wrapper .note.fret21 { left: 1388px; }
.long-neck-default .guitar-module-main-wrapper .note.muted { opacity: .2; }

.long-neck-default .guitar-module-main-wrapper .nm-container { padding-top: 20px; padding-bottom: 20px; }

.long-neck-default .string-togglers {
  position: absolute;
  top: -14px;
  left: -25px;
  width: 30px;
}

.long-neck-default .guitar-module-main-wrapper #color_key { width: auto; padding: 0 5px; background: transparent; border: 1px gray solid; border-radius: 3px; margin: 5px 0; text-align: center; }

.long-neck-default .guitar-module-main-wrapper h2.chord-name {
  font-size: 3.5em;
  margin: 20px 0 0;
  padding: 0;
}

.long-neck-default .guitar-module-main-wrapper sub, sup {
  position: relative;
  font-size: 50%;
  line-height: 0;
  vertical-align: baseline;
  top: -.75em;
}

.long-neck-default .guitar-module-main-wrapper .top-left { float: left; width: auto; }
.long-neck-default .guitar-module-main-wrapper .top-right { float: left; width: auto; position: relative; padding: 15px 0 0 30px; }


.guitar-module-main-wrapper .string-togglers li {
  list-style: none;
  margin-bottom: 2px;
  height: 20px;
  width: 20px;
  overflow: hidden;
  background: url('../images/show-hide-toggle.png') no-repeat -26px top;
  cursor: pointer;
  padding: 0;
  margin-bottom: 8px;
}

.guitar-module-main-wrapper .neckstyle-selector {
  position: relative;
  overflow: auto;
}

.guitar-module-main-wrapper .neckstyle-selector li {
  display: inline-block;
  height: 40px;
  width: 120px;
  cursor: pointer;
}

.guitar-module-main-wrapper .neckstyle-selector li.selected {
  border: 1px solid red;
  border-radius: 3px;
}

.guitar-module-main-wrapper .neckstyle-selector li.neck-default {
  background: url('../images/blankneck.jpg') no-repeat center 7px;
  background-size: contain;
}

.guitar-module-main-wrapper .neckstyle-selector li.neck-g {
  background: url('../images/g-neck.png') no-repeat center 9px;
  background-size: contain;
}

.guitar-module-main-wrapper .neckstyle-selector li.neck-f {
  background: url('../images/f-neck.png') no-repeat center 9px;
  background-size: contain;
}

.guitar-module-main-wrapper .neckstyle-selector li.neck-simple {
  background: url('../images/horizontal-long-neck.png') no-repeat center 9px;
  background-size: 1440px;
}

.guitar-module-main-wrapper .string-togglers li.off {
  background-position: 0 0;
}

.info-display-div h4 {
  display: inline-block;
}

/* Color settings for chord interval notes in grid when viewing a chord/arpeggio */
.long-neck-default .guitar-module-main-wrapper .int-1 { background: #ffadad;  color: black; border-color: black; }
.long-neck-default .guitar-module-main-wrapper .int-3 { background: #ffd6a5;  color: black; border-color: black; }
.long-neck-default .guitar-module-main-wrapper .int-5 {background: #caffbf;   color: black; border-color: black; }
.long-neck-default .guitar-module-main-wrapper .int-9 { background: #fdffb6;  color: black; border-color: black; }
.long-neck-default .guitar-module-main-wrapper .int-7 { background: #9bf6ff;  color: black; border-color: black; }
.long-neck-default .guitar-module-main-wrapper .int-11 { background: #ffc6ff; color: black; border-color: black; }

.guitar-module-main-wrapper .nm-container {
  overflow: scroll;
}

.long-neck-default .guitar-module-main-wrapper .pentatonic-btn {
  font-size: 14px;
  margin: 10px 0 8px 10px;
}

.long-neck-default .guitar-module-main-wrapper .nm-container {
  max-width: 100%;
  overflow: scroll;
}

@media screen and ( max-width: 400px ) {
  .long-neck-default .guitar-module-main-wrapper .main-title {
    font-size: 2.0em;
    text-transform: capitalize;
  }
}

@media screen and ( max-width: 360px ) {
  .long-neck-default .guitar-module-main-wrapper .main-title {
    font-size: 1.75em;
    text-transform: capitalize;
  }
}