.bg-highlight{
background: rgb(69,72,77); /* Old browsers */
background: -moz-radial-gradient(top, ellipse cover,  rgba(69,72,77,1) 0%, rgba(0,0,0,1) 100%); /* FF3.6-15 */
background: -webkit-radial-gradient(bottom, ellipse cover,  rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: radial-gradient(ellipse at bottom,  rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.bg-panel1{
background: rgb(57,59,63); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(57,59,63,0.2) 0%, rgba(14,14,14,0.2) 93%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(57,59,63,0.2) 0%,rgba(14,14,14,0.2) 93%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(57,59,63,0.2) 0%,rgba(14,14,14,0.2) 93%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#393b3f', endColorstr='#0e0e0e',GradientType=0 ); /* IE6-9 */


}
html { box-sizing: border-box; }
*, *:before, *:after { 
  box-sizing: inherit;
  font-size:14px;
  font-family:helvetica,arial;
}
body,html{
  background-color: #1d1f20;
  color:#ccc;
  margin:0;
  padding:0;
}

.line,
.lastUnit {
x    overflow: hidden;
x    *overflow: visible;
    *zoom: 1;
}
.unit{ 
  float: left; 
}

/* * * */
.active{
  background-color:blue
}
.hidden{
  display:none;
}

.relative{
  position:relative;
}
.absolute{
  position:absolute;
}
/*
.bg-multigrad{
  background-image: 
    linear-gradient( 90deg, transparent, transparent 6px, #333 6px, #333 74px ),
    linear-gradient( #444, #eee, 4%, #ddd 97%, #333 100% );
}
*/

/* Header */
.header{
  background-color:black;
  padding:10px;
}
/* Fretboard styling */
.fretboard{ 
  height:185px;
  width:966px;
  position:relative;
  xborder-top: 10px solid #000;  
}
.fretdec{height:20px;text-align:center;color:red}
.fret-dot{
  width:10px;height:10px;background-color:red;border-radius:5px;display:inline-block;
}

.bg-multigrad{
background-image: 
    repeating-linear-gradient( 90deg, rgba(255,255,255,0.6), rgba(255,255,255,0.2) 6px, transparent 6px, transparent 80px ),
    linear-gradient( #444, #222 100% );
}

.fretulator{
  xbackground-color:#1d1f20;
}


.string{ position:absolute;box-shadow: 0 2px 5px 0 rgba(0,0,0,0.5) }
.string .fret, .fretdec .unit{ width: 80px; height:10px; }
.string1{ top:25px }
.string2{ top:70px }
.string3{ top:115px }
.string4{ top:160px }
.string5{ top:205px }
.string6{ top:250px }

.string-t1{ margin-top:-6px; } .string-t1 .fret{ height:12px; }
.string-t2{ margin-top:-5px; } .string-t2 .fret{ height:10px; }
.string-t3{ margin-top:-4px; } .string-t3 .fret{ height:8px; }
.string-t4{ margin-top:-3px; } .string-t4 .fret{ height:6px; }
.string-t5{ margin-top:-2px; } .string-t5 .fret{ height:5px; }
.string-t6{ margin-top:-1px; } .string-t6 .fret{ height:4px; }

.string .fret{ 
  background-image:
    repeating-linear-gradient( 90deg, #000, #bbb 1px, transparent 2px ),
    linear-gradient( #fff, #000 100% );
  position:relative;
}
.active{background-color:red;}

.fretted{
  position:absolute;
  height:28px;
  width:28px;
  border-radius:14px;
  background-color:red;
  display:none;
  color:white;
  xfont-weight:bold;
  font-size:16px;
  padding-top:6px;
  text-align:center;
  right:2px;
}
.fretted .active{ display:block }


.string-t1 .fretted{ top:-9px; }
.string-t2 .fretted{ top:-10px; }
.string-t3 .fretted{ top:-11px; }
.string-t4 .fretted{ top:-12px; }
.string-t5 .fretted{ top:-13px; }
.string-t6 .fretted{ top:-14px; }


/* Tuner */
.stringtuner{
  position:relative;
  width:100px;
  height:185px;
}
.stringtuner select{
  position:absolute;
  
}
.stringtuner .st1{ top:10px; right:10px; }
.stringtuner .st2{ top:55px; right:10px; }
.stringtuner .st3{ top:100px; right:10px; }
.stringtuner .st4{ top:145px; right:10px; }
.stringtuner .st5{ top:190px; right:10px; }
.stringtuner .st6{ top:235px; right:10px; }

/* Notes */
.C .fretted.C, 
.Cs .fretted.Cs,
.D .fretted.D, 
.Ds .fretted.Ds,
.E .fretted.E, 
.F .fretted.F,
.Fs .fretted.Fs, 
.G .fretted.G,
.Gs .fretted.Gs,
.A .fretted.A,
.As .fretted.As,
.H .fretted.H
{ display:block }

/* Root notes */
.Aroot .fretted.A,
.Asroot .fretted.As,
.Hroot .fretted.H,
.Croot .fretted.C,
.Csroot .fretted.Cs,
.Droot .fretted.D,
.Dsroot .fretted.Ds,
.Eroot .fretted.E,
.Froot .fretted.F,
.Fsroot .fretted.Fs,
.Groot .fretted.G,
.Gsroot .fretted.Gs{ 
  background-color:#33F; 
}



select{
  border:1px solid #343436; 
  background-color: #343436;
  Height:30px;
  color:white;
}


/**/


/* .slideOne */
.slide-check {
  width: 10px;
  height: 30px;
  background: #303030;
  margin: 20px auto 10px;
  position: relative;
  border-radius: 50px;
  box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.2);
}
.slide-check label {
  display: block;
  width: 16px;
  height: 16px;
  position: absolute;
  top: 17px;
  left: -3px;
  cursor: pointer;
  background: #fcfff4;
  background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
  background: linear-gradient(to bottom, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
  border-radius: 50px;
  box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3);
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.slide-check input[type=checkbox] {
  visibility: hidden;
}
.slide-check input[type=checkbox]:checked + label {
  top: -3px;
  background: #fcfff4;
  background: -webkit-linear-gradient(top, rgba(230,240,163,1) 0%,rgba(210,230,56,1) 50%,rgba(195,216,37,1) 51%,rgba(219,240,67,1) 100%);
  background: linear-gradient(to bottom, rgba(230,240,163,1) 0%,rgba(210,230,56,1) 50%,rgba(195,216,37,1) 51%,rgba(219,240,67,1) 100%);
}

.active-notes .slide-wrap{ 
  width:30px;
  display:inline-block;
  xcolor:#343436;
  color:#1d1f20;
  text-shadow: 0px -1px 0px rgba(255, 255, 255, 0.2) , 0px 1px 0px rgba(0, 0, 0, 0.2);
}
.slide-wrap.on{ 
  color:rgba(230,240,163,1) 
}


/* Panelstuff */

.panel{
  margin:0 20px 20px 0;
}
.panel.notes{
  width:460px;
  margin:30px auto;
}
.panel>.inner{
  border-radius:4px;
  border-left:1px solid rgba(0,0,0,0.1);
  border-top:1px solid rgba(0,0,0,0.1);
  border-right:1px solid rgba(0,0,0,0.1);
  border-bottom:1px solid rgba(255,255,255,0.05);
}
 .panel>.inner>.bd{
  border-radius:4px;
  border-right:1px solid rgba(255,255,255,0.05);
  border-bottom:1px solid rgba(0,0,0,0.1);
  border-left:1px solid rgba(255,255,255,0.05);
  border-top:1px solid rgba(255,255,255,0.05);
  xbackground-color: #343436; 
}
.rotate {
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);

  /* also accepts left, right, top, bottom coordinates; not required, but a good idea for styling */
  -webkit-transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  -o-transform-origin: 50% 50%;
  transform-origin: 50% 50%;

  /* Should be unset in IE9+ I think. */
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
.panel-title{ 
  position:absolute;
  font-size:12px;
  left:0px;
  top:-28px;
  color:#;
}
.scaleButton{
  xborder:1px solid #333;
  xborder-radius:4px;
  width:32px;
  background-color:#343436;
  color:white;
  border-radius:4px;
  border-right:1px solid rgba(255,255,255,0.05);
  border-bottom:1px solid rgba(0,0,0,0.1);
  border-left:1px solid rgba(255,255,255,0.05);
  border-top:1px solid rgba(255,255,255,0.05);
}
button:focus {outline:0;}
button.active,button:active{
  border:1px solid rgba(0,0,0,0.1);
  background-color:#343436;
  color:#ddf;
  text-shadow: 0 0 2px rgba(255,255,255,0.9);
}