:root {
	/*--accentColor: #1f83ad;*/
  /*--accentColor: #76e0d9;*/
  /*--accentColor:  #76e0bb;*/
  --accentColor:  #66B9BF;
  /*--accentColor85: #76e0d9d9;*/
  --accentColor85: #66b9bfd9;
  --accentColor30: #66b9bf4d;
  --accentColorDarker:  #07889B;
	-webkit-focus-ring-color: var(--accentColor);
  --playSvg: url('data:image/svg+xml;utf8,<svg height="1024" width="512" xmlns="http://www.w3.org/2000/svg"><path fill="%2366B9BF" d="M0 192l512 320L0 832V192z" /></svg>');
  --eyeSvg: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 100 125" enable-background="new 0 0 100 100" xml:space="preserve"><path fill="%23999999" d="M50,33c-12.557,0-23.35,7.076-29.3,17c5.945,9.915,16.733,17,29.3,17c12.558,0,23.35-7.076,29.3-17  C73.354,40.085,62.567,33,50,33z M37,50c0-7.2,5.8-13,13-13s13,5.8,13,13s-5.8,13-13,13S37,57.2,37,50z M56,50c0,3.3-2.7,6-6,6  s-6-2.7-6-6s2.7-6,6-6S56,46.7,56,50z"/></svg>');
  --eyeSvgShow: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 100 125" enable-background="new 0 0 100 100" xml:space="preserve"><path fill="%2366B9BF" d="M50,33c-12.557,0-23.35,7.076-29.3,17c5.945,9.915,16.733,17,29.3,17c12.558,0,23.35-7.076,29.3-17  C73.354,40.085,62.567,33,50,33z M37,50c0-7.2,5.8-13,13-13s13,5.8,13,13s-5.8,13-13,13S37,57.2,37,50z M56,50c0,3.3-2.7,6-6,6  s-6-2.7-6-6s2.7-6,6-6S56,46.7,56,50z"/></svg>');
  /*eye svg: show by Setyo Ari Wibowo from the Noun Project https://thenounproject.com/seochan.art/collection/show-hide/?i=878105 */
}

body {
	/*background: whitesmoke;
  background: #f5f5f570;*/
  background: #c9d2dc38;
	/*--accentColor: #1f83ad;
	-webkit-focus-ring-color: var(--accentColor);*/
  font-size: 17px;
  color: #000;
  font-family: Arial, sans-serif;
  margin: 0 8px;
  box-sizing: border-box;
}

body * {
	outline-color: var(--accentColor);
}

a {
  color:  var(--accentColor);
  text-decoration: none;
}
a:visited {
  color:  var(--accentColorDarker);
}

h1, h2 {
  font-size: 1.4em;
  font-weight: bold;
}

h2 {
  margin-top: 1.5em;
}

h1.pullquote {
  font-size: 2.4em;
  font-weight: bold;
}

h3 {
  font-size: 1.17em;
  font-weight: bold;
  color: var(--accentColor);
  margin-top: 1.5em;
}

h4 {
  font-size: 1.1em;
  color: #999999;
  font-weight: bold;
  margin: 1em 0 0.5em 0;
}

p{
  margin: 1em 0;
  max-width: 900px;
}

img.full{
  max-width: 100%;
}

#page-wrapper,
.single-wrapper,
#title-bar,
#header-bar, 
.notation, 
.fingerings-container,
.text-wrapper {
  box-sizing: border-box;
}

#page-wrapper {
  position: relative;
  padding-bottom: 1em;
}

#title-bar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap:  wrap;
}

#header-bar {
    background: white;
    display: inline-block;
    padding: 0 5px;
    margin: 0;
    border-radius: 5px 5px 0 0;
    position: sticky;
    top: 0;
    z-index: 100;
    border-bottom: 2px solid #8080802e;
    /*border-bottom: 2px solid var(--accentColor30);*/
    width: 100%;
}

.single-wrapper{
  min-height: 180px;
}

#footer-bar {
  bottom: 0;
  position: absolute;
}

ul#sort-links {
    list-style: none;
    padding-left: 10px;
    margin: 0;
    margin-right: 80px;
    display: flex;
    flex-wrap: wrap;
}

#sort-links li{
  display: inline-block;
  color: #999999;
}

#sort-links li.active{
  color:  #000;
}

#sort-links li, #sort-links li.active {
  padding: 15px 8px;
}

#sort-links li.about {
  border-right: 1px solid #8080802e;
  padding-right: 23px;
}

#sort-links li.info {
    color:  var(--accentColor);
    font-weight: bold;
}

#sort-links li a {
    text-decoration: none;
    /*color: var(--accentColor);*/
    color: #999999;
}

#sort-links li a:hover {
  color: var(--accentColorDarker);
}

.about-wrapper{
  padding: 10px;
}

.fingerings-container {
    position: relative;
}

.single-wrapper,
.text-wrapper {
  margin-bottom: 2em;
  background: white;
  padding: 0 5px;
  border-radius: 5px;
}

.text-wrapper {
    border-radius: 0 0 5px 5px;
}

.single-wrapper:nth-child(3){
  border-top-right-radius: 0;
  border-top-left-radius: 0;
}

.notation, .image-container {
	background: white;
}

.single-wrapper h3 {
    font-weight: normal;
    font-size: 1.3em;
    position: absolute;
    left: 20px;
}
.image-container {
  min-height: 5px;
	padding: 5px 0;
	position: relative;
  transition: padding 0.5s ease-in-out;
}
.image-container.closed{
  padding: 0;
}
.fingering {
	position: relative;
	float: left;
  min-height: 135px;
}
.has-name .fingering{
  min-height: 170px;
}
.fingering span{
  position: absolute;
  top: 140px;
  max-width: 50px;
  overflow-wrap: anywhere;
  font-size: small;
  color: #595959;
}
.fingerings-container img {
    transform: scale(.25);
	transform-origin: top left;
}
.fingerings-container img.registerkeys {
	position: absolute;
    top: 0;
    z-index: 3;
}
.fingerings-container img.righthand {
	position: absolute;
    top: 20px;
    left: 3px;
}
.fingerings-container img.sidekeys {
    position: absolute;
	top: 59px;
	left: 2px;
}
.fingerings-container .expand {
	position: absolute;
    left: 10px;
    cursor: pointer;
    top: 15px;
    /*text-align: right;
    width: 121px;*/
    border: none;
    background: none;
    padding-left: 23px;
}
.expand span {
    display: none;
}
button.expand:before {
    content: "";
    height: 25px;
    width: 30px;
    background-size: 30px;
    position: absolute;
    top: -6px;
    left: -5px;
    /*background-image: url(http://vexflow.localimg/eye.png);*/
    background-image: var(--eyeSvgShow);
}
.expanded span.expanded {
    display: inline;
}
.closed span.closed {
    display: inline;
}
button.expanded:before {
    background-image: var(--eyeSvg);
}

.caret .glyph{
  display: none;
}

.matches {
    box-sizing: border-box;
    position: absolute;
    width: 63px;
    top: -1.5em;
    padding-right: 19px;
    text-align: center;
}

.matches .alt {
  background: #ffffffbf;
    position: absolute;
    top: -20px;
    left: 40px;
    text-align: left;
    font-size: 13px;
    z-index: 100;
    padding: 4px;
}

.matches div:hover .alt {
    display: block !important;
}

.volume-container {
	position: absolute;
	right: 10px;
	background-image: url(img/speaker_icon.svg);
    background-size: 18px;
    background-repeat: no-repeat;
    background-position: right 0;
    width: 72px;
    top: 16px;
}
input.volume {
	width: 50px;
	margin-top: 2px;
	background: transparent;
}

.fingering-audio {
    display: inline-block;
}
.fingering-audio, .fingering {
    width: 63px;
}
.playPause.button-wrapper {
	--trackBg: #d8d8d8;
  	--progressBg: #7b7b7b;
    margin-left: 5px;
    height: 30px;
    width: 30px;
    border-radius: 15px;
    /*background-image: linear-gradient(90deg, #7c7c7c 0, #d8d8d8 0);*/
    margin-left: 5px;
    cursor: pointer;
    background-image: linear-gradient(
	    90deg,
	    var(--trackBg) 50%,
	    /*var(--progressBg) 50%*/
	    var(--accentColor) 50%
	);
	background-position: var(--playProgressPercent);
    --playProgressPercent: 0px;
    background-size: 60px;
    transition: background-position linear .3s;
}
button.playPause {
    background-size: 10px;
    background-repeat: no-repeat;
    border: 3px solid transparent;
    background-position: center;
    height: 34px;
    width: 34px;
    margin: -2px 0 0 -2px;
    background-color: unset;
    border-radius: 16px;
}
button.playPause:focus {
	outline: none;
  border-color: var(--accentColor85);
}
button.playPause.play {
    /*background-image: url(img/play.svg);*/
    background-image: var(--playSvg);
}
button.playPause.pause {
    background-image: url(img/pause.svg);
}

.diagrams {
	/*height: 150px;*/
	max-height: 150px;
    overflow-y: hidden;
    -webkit-transition: max-height 0.5s ease-in-out;
    -moz-transition: max-height 0.5s ease-in-out;
    -o-transition: max-height 0.5s ease-in-out;
    transition: max-height 0.5s ease-in-out;
}

.diagrams.has-name{
  max-height: 170px;
}

.closed .diagrams {
	max-height: 0;
}

.media-container {
    background: whitesmoke;
    padding: 10px 0;
    border-radius: 5px;
    /*max-width: 1030px;*/
}

.notation {
  min-height: 180px;
}

.vf-stavenote.playing * {
	fill: var(--accentColorDarker);
}

.vf-stavenote * {
    transition: fill .2s;
}

/*move down note names*/
.vf-stavenote text {
    transform: translateY(15px);
}

input[type="range"] {
  --thumbSize: 14px;
  --trackSize: 8px;
  --thumbBg: #000;
  --trackBg: #d8d8d8;
  --progressBg: #7b7b7b;
  

  /* webkit progress workaround */
  --webkitProgressPercent: 50%;
}

input[type="range"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  height: var(--thumbSize);
  /*width: 100%;
  margin: 0;*/
  padding: 0;
}
input[type="range"]:focus {
  outline: none;
  --progressBg: var(--accentColor);
}

/* Thumb */
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: var(--thumbSize);
  height: var(--thumbSize);
  background-color: var(--thumbBg);
  border-radius: calc(var(--thumbSize) / 2);
  border: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  margin-top: calc(((var(--thumbSize) - var(--trackSize)) / 2) * -1);
  cursor: pointer;
}
input[type="range"]::-moz-range-thumb {
  -moz-appearance: none;
  appearance: none;
  width: var(--thumbSize);
  height: var(--thumbSize);
  background-color: var(--thumbBg);
  border-radius: calc(var(--thumbSize) / 2);
  border: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  margin-top: calc(((var(--thumbSize) - var(--trackSize)) / 2) * -1);
  cursor: pointer;
}
input[type="range"]::-ms-thumb {
  -ms-appearance: none;
  appearance: none;
  width: var(--thumbSize);
  height: var(--thumbSize);
  background-color: var(--thumbBg);
  border-radius: calc(var(--thumbSize) / 2);
  border: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  margin-top: calc(((var(--thumbSize) - var(--trackSize)) / 2) * -1);
  cursor: pointer;
}

/* Track */
input[type="range"]::-webkit-slider-runnable-track {
  height: var(--trackSize);
  background-image: linear-gradient(
    90deg,
    var(--progressBg) var(--webkitProgressPercent),
    var(--trackBg) var(--webkitProgressPercent)
  );
  border-radius: calc(var(--trackSize) / 2);
}
input[type="range"]::-moz-range-track {
  height: var(--trackSize);
  background-color: var(--trackBg);
  border-radius: calc(var(--trackSize) / 2);
}
input[type="range"]::-ms-track {
  height: var(--trackSize);
  background-color: var(--trackBg);
  border-radius: calc(var(--trackSize) / 2);
}

/* Progress */
input[type="range"]::-moz-range-progress {
  height: var(--trackSize);
  background-color: var(--progressBg);
  border-radius: calc(var(--trackSize) / 2) 0 0 calc(var(--trackSize) / 2);
}
input[type="range"]::-ms-fill-lower {
  height: var(--trackSize);
  background-color: var(--progressBg);
  border-radius: calc(var(--trackSize) / 2) 0 0 calc(var(--trackSize) / 2);
}

.key-diagrams{
  display: flex;
  flex-wrap: wrap;
}

.diagram-block{
  text-align: center;
  margin-right: 20px;
  margin-bottom: 30px;
  width: 50px;
}

.key-diagrams img{
  margin-bottom: 10px;
}

.key-diagrams.registerkeys img{
  width: 50px;
}

.key-diagrams.sidekeys img{
  width: 25px;
}

.key-diagrams.righthand img{
  height: 160px;
}

.sources{
    display: grid;
    grid-template-columns: 2em auto;
    width: fit-content;
    margin-bottom:  1em;
}

.sources .key {
  grid-column-start: 1;
  grid-column-end: 2;
  margin:  0;
}

.sources .legend {
  grid-column-start: 2;
  grid-column-end: 3;
}

.temp .about-wrapper {
    padding-top: 1em;
    color:  #7b7b7b;
}

@keyframes spinner-rolling {
  0% { transform: translate(-50%,-50%) rotate(0deg); }
  100% { transform: translate(-50%,-50%) rotate(360deg); }
}
.spinner-rolling div {
  position: absolute;
  width: 50px;
  height: 50px;
  border: 10px solid #999999;
  border-top-color: transparent;
  border-radius: 50%;
}
.spinner-rolling div {
  animation: spinner-rolling 1.408450704225352s linear infinite;
  top: 50px;
  left: 50px
}
.loading-spinner-rolling {
  width: 30px;
  height: 30px;
  display: inline-block;
  overflow: hidden;
  background: #ffffff;
  vertical-align: middle;
}
.spinner-rolling {
  width: 100%;
  height: 100%;
  position: relative;
  transform: translateZ(0) scale(0.3);
  backface-visibility: hidden;
  transform-origin: 0 0; /* see note above */
}
.spinner-rolling div { box-sizing: content-box; }
/* generated by https://loading.io/ */

/* large screens */
@media only screen and ( min-width: 1115px ) {
    #page-wrapper {
      margin: auto;
    }

  #page-wrapper,
  .single-wrapper,
  #title-bar,
  #header-bar, 
  .notation, 
  .fingerings-container,
  .text-wrapper {
    max-width: 1115px;
  }

  .notation {
    margin-left: 70px;
  }

  .audio-container, .diagrams {
    margin-left: 140px;
  }

}

/* medium screens */
@media only screen and ( min-width: 870px ) {
  .about-wrapper{
    padding: 10px 78px 1em 78px;
  }

  .key-diagrams.righthand {
    width: 500px;
  }

  #page-wrapper:not(.key) .sources {
    display: grid;
    grid-template-columns: 2em auto 3em auto 3em auto;
    width: fit-content;
  }

  #page-wrapper:not(.key) .sources .key:nth-child(1),
  #page-wrapper:not(.key) .sources .key:nth-child(3) {
    grid-column-start: 1;
    grid-column-end: 2;
    margin-left: 1em;
  }

  #page-wrapper:not(.key) .sources .legend:nth-child(2),
  #page-wrapper:not(.key) .sources .legend:nth-child(4) {
    grid-column-start: 2;
    grid-column-end: 3;
    margin-left: 1em;
  }

  #page-wrapper:not(.key) .sources .key:nth-child(5),
  #page-wrapper:not(.key) .sources .key:nth-child(7) {
    grid-column-start: 3;
    grid-column-end: 4;
    margin-left: 1em;
  }

    #page-wrapper:not(.key) .sources .legend:nth-child(6),
  #page-wrapper:not(.key) .sources .legend:nth-child(8) {
    grid-column-start: 4;
    grid-column-end: 5;
    margin-left: 1em;
  }

  #page-wrapper:not(.key) .sources .key:nth-child(9),
  #page-wrapper:not(.key) .sources .key:nth-child(11) {
    grid-column-start: 5;
    grid-column-end: 6;
    margin-left: 1em;
  }

    #page-wrapper:not(.key) .sources .legend:nth-child(10),
  #page-wrapper:not(.key) .sources .legend:nth-child(12) {
    grid-column-start: 6;
    grid-column-end: 7;
  }

  #page-wrapper:not(.key) .sources div:nth-child(1),
  #page-wrapper:not(.key) .sources div:nth-child(2),
  #page-wrapper:not(.key) .sources div:nth-child(5),
  #page-wrapper:not(.key) .sources div:nth-child(6),
  #page-wrapper:not(.key) .sources div:nth-child(9),
  #page-wrapper:not(.key) .sources div:nth-child(10) {
    grid-row-start: 1;
    grid-row-end: 2;
  }

  
  #page-wrapper:not(.key) .sources div:nth-child(3),
  #page-wrapper:not(.key) .sources div:nth-child(4),
  #page-wrapper:not(.key) .sources div:nth-child(7),
  #page-wrapper:not(.key) .sources div:nth-child(8),
  #page-wrapper:not(.key) .sources div:nth-child(11),
  #page-wrapper:not(.key) .sources div:nth-child(12) {
    grid-row-start: 2;
    grid-row-end: 3;
  }

  #sort-links li {
    font-size: 1.1em;
  }

  #sort-links li.info {
    padding-right: 10px;
    padding-left: 15px;
  }
}

/* small screens */
@media only screen and ( max-width: 800px ) {
  #sort-links li.info {
    display: none;
  }
}

/* phablets */
@media only screen and ( max-width: 600px ) {
  #sort-links li, #sort-links li.active, #sort-links li.about {
    padding: 10px 8px;
  }

  #sort-links li.about {
    border-right:  none;
  }

  .volume-container {
    top: 10px;
  }
}

/* phones */
@media only screen and ( max-width: 460px ) {
  #title-bar{
    padding: 0 10px 10px;
  }

  #sort-links li.about, #sort-links li.key {
    order: -1;
  }

  h3.notation-title {
    margin-top: .5em;
  }

  .caret .glyph {
    display: inline;
    margin-right: 5px;
  }

  .accordion{
    display: none;
  }
}

/* not large screens */
@media only screen and ( max-width: 1114px ) {
  /* hide "Sorted by" */
  #sort-links li:nth-child(n+4) .sb-full {
      display: none;
  }

  .media-container, .image-container {
    width:  970px;
  }

  .single-wrapper{
    overflow-x:  scroll;
  }

  .expand span {
    display: none !important;
  }

  .audio-container, .diagrams {
    margin-left: 70px;
  }
}