@charset "utf-8";
/* CSS Document */
.guitar-module-main-wrapper { line-height: 1.0; max-width: 100%; }
.guitar-module-main-wrapper a { color: blue; }

.guitar-module-main-wrapper { margin: 0; padding-top: 5px; }
.guitar-module-main-wrapper, .guitar-module-main-wrapper .main-title, .guitar-module-main-wrapper h2, .guitar-module-main-wrapper p {
  font-family: 'Archivo Narrow', sans-serif;
  font-size: 13px;
}
.guitar-module-main-wrapper sub, sup {
  position: relative;
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline;
  top: -.5em;
}

.guitar-module-main-wrapper div { box-sizing: border-box; }
.guitar-module-main-wrapper .info-display-div { padding-left: 10px; }
.guitar-module-main-wrapper .top-wrapper #info { margin: 5px 0; }
.guitar-module-main-wrapper .top-left { width: 50%; float: left; }
.guitar-module-main-wrapper .top-right { width: 50%; float: right; position: relative; padding-top: 15px; }

.guitar-module-main-wrapper h2.chord-name { font-size: 3.0em; margin: 20px 0 0; padding: 0; }
.guitar-module-main-wrapper .logo { position: relative; top: 5px; right: 10px; z-index: 1000; }
.guitar-module-main-wrapper .newneck-wrapper { background: #ffffff; }
/*.guitar-module-main-wrapper sup { vertical-align: top; font-size: 0.5em; }*/
.guitar-module-main-wrapper .chord_in_key { position: relative; z-index: 501; }

.guitar-module-main-wrapper #keyNotes { position: relative; z-index: 502; }
.guitar-module-main-wrapper #keyNotes ul { margin: 0.5em 0 0; padding: 0 !important; }
.guitar-module-main-wrapper #keyNotes li { display: inline-block; padding-right: 1em; }

.guitar-module-main-wrapper #controls { position: relative; }
.guitar-module-main-wrapper #color_key { position: relative; left: 0; max-width: 240px; }
.guitar-module-main-wrapper #color_key h5 {  padding: 0; margin: 0; height: 20px; }
.guitar-module-main-wrapper .main-title { font-family: 'Archivo Narrow', sans-serif; font-size: 2.75em; margin: 2px 0 0; }

.guitar-module-main-wrapper .showing { font-size: 16px; }
.guitar-module-main-wrapper #notesPerChord, .guitar-module-main-wrapper #showing { padding: 0; margin: 0; }
.guitar-module-main-wrapper .sharp { display: none; }
.guitar-module-main-wrapper .flat { display: none; }

/* Selectors */
.guitar-module-main-wrapper #scaleSelector, .guitar-module-main-wrapper #keyChordsSelector { padding: 0; margin: 0; }

.guitar-module-main-wrapper #changeKey select, .guitar-module-main-wrapper #fretselectors select { width: auto; font-size: 13px; margin-bottom: 0; height: auto; padding: 3px 18px 3px 5px; border-radius: 3px; }
.guitar-module-main-wrapper #scaleSelector li { display: inline-block; padding: 1em 0.5em 0 0; }
.guitar-module-main-wrapper #scaleSelector li a { color: #666666; font-weight: bold; text-decoration: none; }
.guitar-module-main-wrapper #scaleSelector li a:hover { color: blue; text-decoration: underline; }

.guitar-module-main-wrapper #keyChordsSelector li { display: block; list-style: none; }
.guitar-module-main-wrapper #keyChordsSelector li a { color: #666666; font-weight: bold; text-decoration: none; }
.guitar-module-main-wrapper #keyChordsSelector li a:hover { color: blue; text-decoration: underline; }

.guitar-module-main-wrapper #fretselectors { position: relative; }
.guitar-module-main-wrapper #fretselectors #lowfret { margin-right: 10px; }

.guitar-module-main-wrapper #changeKey { font-family: 'Archivo Narrow', sans-serif; margin: 0; }
/* end selectors */

/* Buttons that show up below the fretboard for each chord in a key area. See note re styling templates above */
.guitar-module-main-wrapper .button-wrapper { margin: 1em 0; }
.guitar-module-main-wrapper .chordButton {
  -moz-box-shadow: inset 0px 1px 0px 0px #ffffff;
  -webkit-box-shadow: inset 0px 1px 0px 0px #ffffff;
  box-shadow: inset 0px 1px 0px 0px #ffffff;
  background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
  background: -moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
  /*background-color: #ededed;*/
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  border-radius: 6px;
  border: 1px solid #dcdcdc;
  display: inline-block;
  color: #8c8d8f;
  font-family:arial;
  font-size: 22px;
  padding: 6px 15px;
  text-decoration:none;
  text-shadow: 1px 1px 0px #ffffff;
  cursor: hand;
  cursor: pointer;
}
.guitar-module-main-wrapper .chordButton:hover {
  background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) );
  background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
  background-color:#dfdfdf;
}

.guitar-module-main-wrapper .chordButton.active {
  -moz-box-shadow:inset 0px 1px 0px 0px #9cf0b0;
  -webkit-box-shadow:inset 0px 1px 0px 0px #9cf0b0;
  box-shadow:inset 0px 1px 0px 0px #9cf0b0;
  background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #96f5a9), color-stop(1, #14c938) );
  background:-moz-linear-gradient( center top, #96f5a9 5%, #14c938 100% );
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#96f5a9', endColorstr='#14c938');
  background-color:#96f5a9;
  -webkit-border-top-left-radius:6px;
  -moz-border-radius-topleft:6px;
  border-top-left-radius:6px;
  -webkit-border-top-right-radius:6px;
  -moz-border-radius-topright:6px;
  border-top-right-radius:6px;
  -webkit-border-bottom-right-radius:6px;
  -moz-border-radius-bottomright:6px;
  border-bottom-right-radius:6px;
  -webkit-border-bottom-left-radius:6px;
  -moz-border-radius-bottomleft:6px;
  border-bottom-left-radius:6px;
  text-indent:0;
  border:1px solid #05520e;
  display:inline-block;
  color:#3d393d;
  text-shadow:1px 1px 0px #c1f7c3;
}

.guitar-module-main-wrapper .chordButton.active:hover {
  background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #14c938), color-stop(1, #96f5a9) );
  background:-moz-linear-gradient( center top, #14c938 5%, #96f5a9 100% );
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#14c938', endColorstr='#96f5a9');
  background-color:#14c938;
}
/* This button was generated using CSSButtonGenerator.com */

/* the hand cursor is commented out for later use possibly to trigger audio */
/*.guitar-module-main-wrapper .guitar-module-main-wrapper .note { cursor: hand; cursor: pointer; }*/

.note { -webkit-font-smoothing: antialiased; line-height: 15px; }
#color-key-wrapper h4 { margin: 5px 0 0; }

#color-key td div { width: 20px; height: 20px; border: 1px solid black; font-size: 1.25em; text-align: center; }

#color_key { width: auto; padding: 0 5px; background: #f7f7f7; border: 1px gray solid; border-radius: 3px; margin: 5px 0; text-align: center; max-width: 380px; margin: 5px auto; }
#color_key #color-key-wrapper ul#color-key { width: auto; margin: 5px auto; padding: 0; }
#color_key #color-key-wrapper ul#color-key li { display: inline-block; width: 20px; height: 20px; margin-right: 5px; text-align: center; line-height: 16px; }
#color_key #color-key-wrapper ul#color-key li div { border: 1px black solid; border-radius: 10px; height: 20px; font-size: 16px; line-height: 18px; }

.guitar-module-main-wrapper div:empty, .guitar-module-main-wrapper h1:empty, .guitar-module-main-wrapper h2:empty, .guitar-module-main-wrapper h3:empty, .guitar-module-main-wrapper p {
   display: none;
}

.guitar-module-main-wrapper .notesPerChord {
  display:inline-block;
  margin-bottom: 5px;
}

.guitar-module-main-wrapper .notesPerChord a.notes-per-chord-button {
  -moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
  -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
  box-shadow:inset 0px 1px 0px 0px #ffffff;
  background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
  background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
  background-color:#ededed;
  -moz-border-radius:6px;
  -webkit-border-radius:6px;
  border-radius:6px;
  border:1px solid #dcdcdc;
  color: #333333;
  font-size:14px;
  padding:3px 10px;
  text-decoration:none;
  cursor: hand;
  cursor: pointer;
}

.guitar-module-main-wrapper .notesPerChord a.notes-per-chord-button.active {
  -moz-box-shadow:inset 0px 1px 0px 0px #9cf0b0;
  -webkit-box-shadow:inset 0px 1px 0px 0px #9cf0b0;
  box-shadow:inset 0px 1px 0px 0px #9cf0b0;
  background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #96f5a9), color-stop(1, #14c938) );
  background:-moz-linear-gradient( center top, #96f5a9 5%, #14c938 100% );
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#96f5a9', endColorstr='#14c938');
  background-color:#96f5a9;
  -webkit-border-top-left-radius:6px;
  -moz-border-radius-topleft:6px;
  border-top-left-radius:6px;
  -webkit-border-top-right-radius:6px;
  -moz-border-radius-topright:6px;
  border-top-right-radius:6px;
  -webkit-border-bottom-right-radius:6px;
  -moz-border-radius-bottomright:6px;
  border-bottom-right-radius:6px;
  -webkit-border-bottom-left-radius:6px;
  -moz-border-radius-bottomleft:6px;
  border-bottom-left-radius:6px;
  border:1px solid #05520e;
  color:#3d393d;
}

.refresh-scale-link {
  -moz-box-shadow: inset 0px 1px 0px 0px #ffffff;
  -webkit-box-shadow: inset 0px 1px 0px 0px #ffffff;
  box-shadow: inset 0px 1px 0px 0px #ffffff;
  background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
  background: -moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
  /*background-color: #ededed;*/
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  border-radius: 6px;
  border: 1px solid #dcdcdc;
  display: inline-block;
  color: #8c8d8f;
  font-family:arial;
  font-size: 12px;
  padding: 6px 15px;
  text-decoration:none;
  text-shadow: 1px 1px 0px #ffffff;
  cursor: hand;
  cursor: pointer;
}