#debug-splitbar {
  background: hsl(300,30%,35%);
  position: absolute ;
  left: 400px ;
  top: 0 ;
  bottom: 0 ;
  width: 10px ;
  cursor: ew-resize;
  z-index: 2 ;
  box-sizing: border-box;
  border-left: solid 2px hsl(200,10%,10%);
}

#debug-main-view {
  background: hsl(270,10%,20%);
  position: absolute ;
  top: 0 ;
  bottom: 0 ;
  right: 0 ;
  color: rgba(0,0,0,.8) ;
  font-size: 12px ;
  box-sizing:border-box;
}

.watch-line {
  position: relative ;
  margin-bottom: 1px ;
  margin-right: 2px ;
  padding: 2px 3px ;
  border-radius: 3px ;
  min-width: 117px ;
}
.watch-line.open {
  margin-bottom: 5px ;
}
.watch-line i {
  color: rgba(0,0,0,.5) ;
  margin-right: 5px ;
  vertical-align: middle ;
  cursor: pointer ;
  width: 14px ;
}
.watch-line-content {
  margin-left: px ;
  padding: 2px ;
  border-radius: 5px ;
  background: hsl(270,10%,20%) ;
  position: relative;
  left: 3px;
  top: 3px;
}
.watch-line.number > div > i:before { content: "\f1ec" ; }
.watch-line.string > div > i:before { content: "\f10d" ; }
.watch-line.list > div > i:before { content: "\f03a" ; }
.watch-line.object > div > i:before { content: "\f468" ; }
.watch-line.function > div > i:before { content: "\f2db" ; }

.watch-line.object > div > i:hover:before, .watch-line.list > div > i:hover:before {
  content: "\f067";
}

.watch-line.string { background: hsl(110,40%,70%) ; }
/*.watch-line.string:nth-child(odd) { background: hsl(90,40%,60%) ; }*/
.watch-line.string .watch-line-value { background: hsl(110,40%,90%) ; }

.watch-line.number { background: hsl(20,40%,70%) ; }
/*.watch-line.number:nth-child(odd) { background: hsl(20,40%,60%) ; }*/
.watch-line.number .watch-line-value { background: hsl(20,40%,90%) ; }

.watch-line.function { background: hsl(50,40%,70%) ; }
/*.watch-line.function:nth-child(odd) { background: hsl(300,40%,60%) ; }*/
.watch-line.function .watch-line-value { background: hsl(50,40%,90%) ; }

.watch-line.list { background: hsl(180,40%,70%) ; }
/*.watch-line.list:nth-child(odd) { background: hsl(200,40%,60%) ; }*/
.watch-line.list .watch-line-value { background: hsl(200,40%,90%) ; }

.watch-line.object { background: hsl(210,40%,70%) ; }
/*.watch-line.object:nth-child(odd) { background: hsl(160,40%,60%) ; }*/
.watch-line.object .watch-line-value { background: hsl(160,40%,90%) ; }



.watch-line-value {
  position: absolute;
  right: 2px;
  top: 1px;
  bottom: 1px;
  width: 100px;
  height: 17px ;
  padding: 0px 10px;
  background: hsl(270,50%,90%);
  border-radius: 3px;
  white-space: nowrap;
  overflow: hidden ;
}

.watch-line input {
  position: absolute;
  right: 2px;
  top: 1px;
  bottom: 1px;
  width: 98px;
  height: 15px ;
  background: hsl(270,50%,100%);

  border: solid 1px rgba(0,0,0,.5) ;
  border-radius: 3px ;
  font-size: 12px ;
  padding: 0px 10px;
  color: rgba(0,0,0,.8);
  font-family: "Source Sans Pro",Verdana ;

}
.watch-line input:focus {
  outline: none ;
}


#debug-main-toolbar {
  background: hsl(300,40%,45%) ;
  position: absolute ;
  top: 0 ;
  left: 0 ;
  right: 0 ;
  box-sizing: border-box ;
  height: 40px ;
  padding: 8px 10px ;
  white-space: nowrap ;
  overflow: hidden ;
  display: none ;
}

#debug-main-toolbar div {
  display: inline-block ;
  border-radius: 5px ;
  background-color: hsl(300,30%,35%) ;
  margin-right: 20px ;
  color: rgba(255,255,255,.8);
  padding: 3px 10px ;
  font-size: 16px ;
  cursor: pointer ;
}

#debug-watch-view {
  position: absolute ;
  top: 0px ;
  left: 0 ;
  right: 0px ;
  bottom: 0 ;
}
#debug-watch-bar {
  position: absolute ;
  top: 0px ;
  left: 0px ;
  right: 0px ;
  box-sizing: border-box ;
  height: 40px ;
  background: hsl(300,30%,40%);
  color: rgba(255,255,255,.8) ;
  white-space: nowrap;
  overflow: hidden ;
  padding: 11px 20px ;
  font-size: 14px ;
}

#debug-watch-bar input {
  display: inline-block ;
  border: none ;
  border-radius: 3px ;
  font-size: 12px ;
  width: 60px ;
  padding: 2px 5px 1px 20px;
  background: rgba(255,255,255,.5);
  color: rgba(0,0,0,.8);
  font-family: "Source Sans Pro",Verdana ;
  margin-right: 20px ;
}
#debug-watch-bar i {
  margin-right: 10px ;
}
#debug-watch-bar i.fa-filter {
  color: rgba(0,0,0,.25) ;
  font-size: 12px ;
  position: relative ;
  right: -25px ;
}
#debug-watch-bar i.type {
  margin-right: 10px ;
  cursor: pointer ;
}
#debug-watch-bar i.type.filtered {
  color: rgba(255,255,255,.3);
}


#debug-watch-bar input:focus {
  outline: none ;
}

#debug-watch-content {
  position: absolute ;
  overflow: auto ;
  top: 42px ;
  left: 0 ;
  bottom: 0 ;
  right: 0px ;
}

#debug-timemachine-bar {
  position: absolute ;
  display: none ;
  top: 2px ;
  left: 0px ;
  right: 0px ;
  box-sizing: border-box ;
  height: 38px ;
  background: hsl(180,50%,40%);
  color: rgba(255,255,255,.8) ;
  white-space: nowrap;
  overflow: hidden ;
  padding: 6px 20px ;
  font-size: 16px ;
}
#debug-timemachine-bar * {
  vertical-align: middle ;
}
#debug-timemachine-bar i {
  margin-right: 10px ;
}

#debug-timemachine-buttons i {
  margin: 0px 2px ;
  padding: 5px ;
  border-radius: 5px ;
  font-size: 16px ;
  cursor: pointer ;
}
#debug-timemachine-bar i.rec {
  padding: 7px ;
  font-size: 12px ;
  color: hsl(0,30%,70%);
  background: rgba(0,0,0,.1);
  border-radius: 5px ;
  margin: 0 5px 0 20px ;
  cursor: pointer ;
}
#debug-timemachine-bar i.rec:hover {
  background: rgba(0,0,0,.2);
}

#debug-timemachine-bar i.recording {
  padding: 7px ;
  font-size: 12px ;
  color: hsl(0,100%,70%);
  background: rgba(0,0,0,.5);
  border-radius: 5px ;
  margin: 0 5px 0 20px ;
}
#debug-timemachine-bar i.looping {
  background: rgba(0,0,0,.25);
}

#debug-timemachine-buttons i:hover {
  background: rgba(0,0,0,.2) ;
}

#debug-timemachine-recording {
  white-space: nowrap ;
  display: inline-block ;
}

#debug-timemachine-buttons {
  margin: 0 0 0 20px ;
  white-space: nowrap ;
  display: inline-block ;
}

#debug-timemachine-recorder-trail {
  position: relative ;
  display: inline-block ;
  width: 160px ;
  height: 20px ;
  border-radius: 3px ;
  background: rgba(0,0,0,.1) ;
  box-sizing: border-box;
  vertical-align: middle ;
  margin-left: 5px ;
  cursor: pointer ;
}

#debug-timemachine-recorder-head {
  position: absolute ;
  left: -5px ;
  top: 0px ;
  width: 10px ;
  height: 20px ;
  border-radius: 3px ;
  box-shadow: 0 0 3px #000 ;
  background: #EEE ;
  box-sizing: border-box;
}