.synth {
  font-family: Ubuntu ;
}

.synth h1 {
  font-size: 30px ;
  margin-bottom: 10px ;
}

.synth .toolbar {
  background: rgba(0,0,0,.1) ;
  height: 40px ;
  margin-bottom: 10px ;
}

.synth .modules {
  white-space: nowrap ;
  line-height: 0 ;
}

#synth .content {
  position: static ;
}

.synth .module {
  margin: 0px 5px 5px 0 ;
  display: inline-block ;
  height: 175px ;
  background: rgba(255,255,255,.1);
  overflow: hidden ;
  line-height: 12px ;
}

.synth .module-content {
  padding: 5px ;
}

.synth .separator {
  position: relative;
      display: inline-block;
      width: 40px;
      height: 220px;
      border-radius: 0px;
      overflow: hidden;
      /*background: rgba(255,255,255,.2);*/
      padding: 2px;
      border-radius: 10px;
      display: none ;
}

.synth .module .inline {
  display: inline-block ;
  vertical-align: top ;
  text-align: center;
}
.synth .module .center {
  text-align: center ;
}


.synth .module .label {
  padding: 6px ;
  font-size: 11px ;
  color: rgba(255,255,255,.7) ;
  border-bottom: solid 2px rgba(0,0,0,.5);
  text-transform: uppercase;
  cursor: pointer ;
}
.synth .module .label i {
  color: hsl(20,100%,70%);
  margin-right: 5px ;
}

.synth .layers {
  background: rgba(255,255,255,.1) ;
  height: 40px ;
  margin-top: 10px ;
}

.synth .layers div {
  display: inline-block ;
}

.synth .module .knobline {
}

.synth .module .labelledknob {
  display: inline-block ;
  text-align: center ;
  margin: 5px ;
}
.synth .module .knoblabel {
  font-size: 9px;
  text-transform: uppercase;
  text-align: center;
  margin-top: 3px;
  color: rgba(255,255,255,.7);
}
.synth .knob {
  cursor: pointer ;
  display: block ;
}

.synth .module .labelledslider {
  display: inline-block ;
  text-align: center ;
  margin: 5px ;
}

.synth .module .buttongroup {
  margin-top: 5px ;
}
.synth .module .button {
  width: 30px ;
  height: 15px ;
  box-shadow: 0 0 3px #000 ;
  background: radial-gradient(#EEE,#AAA);
  display: block ;
  border-radius: 5px ;
  margin: 5px 5px ;
  cursor: pointer ;
}

.synth .module .button.selected {
  box-shadow: 0 0 10px hsl(30,100%,80%) ;
  background: radial-gradient(hsl(30,100%,85%),hsl(30,100%,70%));
}

.synth .module .selector {
  margin: 5px ;
  border-radius: 3px;
  overflow: hidden;
  line-height: 0;
  box-shadow: 0 0 3px #000;
  display: inline-block ;
  text-align: center ;
}

.synth .module .selector i {
  display: inline-block ;
  font-size: 16px;
  padding: 2px 6.5px;
  width: 7px;
  height: 16px;
  vertical-align: middle;
  color: #000 ;
  background: radial-gradient(#EEE,#AAA) ;
  cursor: pointer ;
}
.synth .module .selector i:active {
  background: radial-gradient(hsl(30,100%,85%),hsl(30,100%,70%)) ;
  box-shadow: 0 0 10px hsl(30,100%,80%);
}

.synth .module .selector .screen {
  display: inline-block ;
  width: 60px ;
  height: 14px ;
  background: radial-gradient(hsl(200,60%,20%),hsl(200,30%,10%)) ;
  vertical-align: middle ;
  color: hsl(200,100%,75%);
  text-shadow: 0 0 3px hsl(200,100%,50%);
  font-size: 9px;
  line-height: normal;
  text-align: center;
  padding-top: 6px;
  white-space: nowrap;
}

.synth .separator #combine-button {
  position: absolute;
      left: 2px;
      top: 85px;
      width: 40px;
      height: 40px;
      /* box-shadow: 0 0 10px hsl(30,100%,80%); */
      background: rgba(0,0,0,.5);
      display: block;
      border-radius: 40px;
      cursor: pointer;
      color: hsl(200,100%,80%);
      text-shadow: 0 0 5px hsl(200,100%,60%);
      font-size: 31px;
      padding: 0px;
      text-align: center;
}

.synth .separator #combine-button.rotate {
  transform: rotate(45deg);
}

#synth-window {
  width: auto ;
  height: auto ;
  border-radius: 10px ;
  box-shadow: 0 0 20px #000, 0 0 2px 0px #000 ;
  background: hsl(200,50%,10%);
  z-index: 10 ;
  display: block ;
  overflow: hidden ;
}
#synth-window .titlebar {
  position: static ;
    height: 20px;
    padding: 10px 10px;
    background: rgba(0,0,0,.1);
    color: #FFF;
    font-size: 16px;
    cursor: move;
}
#synth-window .titlebar .icon {
  display: inline-block ;
  margin-right: 10px ;
}
#synth-window .titlebar .title {
  display: inline-block ;
}
#synth-window .titlebar .minify {
  background: rgba(0,0,0,.5);
  border-radius: 20px ;
  padding: 6px 7px ;
  position: absolute ;
  right: 4px ;
  top: 4px ;
  text-align: center ;
  cursor: pointer ;
  font-size: 20px ;
}
#synth-window .navigation {
  position: absolute;
  bottom: 0 ;
  height: 40px ;
  left: 0 ;
  right: 0 ;
  background: rgba(0,0,0,.1);
}

#synth-window .navigation i.resize {
  padding: 12px 10px ;
  text-align: center ;
  position: absolute ;
  right: 0px ;
  width: 20px ;
  transform: rotateZ(-45deg);
  color: rgba(0,0,0,.5) ;
  cursor: nwse-resize ;
}

#synth-window .content {
  position: static ;
  padding: 5px 0 0 10px;
  overflow: auto ;
  font-size: 18px;
  font-family: Helvetica,sans-serif;
}

#synth-window .content::-webkit-scrollbar-track {
  background: rgba(0,0,0,.15);
  border-radius: 5px;
  margin: 4px 2px;
}

#synth-window .content::-webkit-scrollbar-thumb {
  background-color: rgba(0,0,0,.25);
  border-radius: 5px;
  margin: 4px 1px;
}