.sprites-left {
  position: absolute ;
  left: 0 ;
  width: 400px ;
  top: 0 ;
  bottom: 0 ;
  overflow: hidden ;
}

.sprites-right {
  position: absolute ;
  right: 0px ;
  width: 400px ;
  top: 0 ;
  bottom: 0 ;
  overflow: hidden ;
}

.sprites-right.vertical-split .spriteinfo {
  border-top: solid 2px rgba(0,0,0,.5) ;
}

.sprites-splitbar {
  background: hsl(200,30%,30%);
  position: absolute ;
  left: 400px ;
  top: 0 ;
  bottom: 0 ;
  width: 10px ;
  cursor: ew-resize;
  z-index: 2 ;
}

.spritelist {
  position: absolute;
  background: rgba(0,0,0,.25) ;
  left: 2px ;
  right: 2px ;
  top: 2px ;
  bottom: 42px ;
  text-align: center ;
  line-height: 0 ;
  padding-top: 10px ;
  padding-bottom: 10px ;
  overflow-x: hidden ;
  overflow-y: auto ;
}
#create-sprite-button {
  position: absolute ;
  bottom: 0px ;
  height: 40px;
  left: 0 ;
  right: 0 ;
  padding: 0px 30px ;
  background: hsl(160,50%,40%);
  font-size: 18px ;
  cursor: pointer ;
  color: #FFF ;
  z-index: 1 ;
  box-shadow: 0 -10px 20px #000;
  line-height: 40px ;
  text-align: center ;
}
#create-sprite-button i {
  margin-right: 0px ;
}
#create-sprite-button span {
  white-space: nowrap ;
  margin-left: 10px ;
}
.sprite-box {
  position: relative ;
  cursor: pointer ;
  display: inline-block ;
  margin: 1px ;
  width: 64px ;
  height: 84px ;
  font-size: 12px ;
  padding: 4px 0 ;
  background: hsl(200,20%,20%);
  box-shadow: 0 0 4px 0px #000;
  border-radius: 4px ;
  overflow: hidden ;
}
.sprite-box.selected {
  margin: 0px;
  border: solid 1px rgba(255,255,255,.5) ;
  background: rgba(255,255,255,.2);
}

.sprite-box .icon-box {
  height: 64px ;
  width: 64px ;
  overflow: hidden ;
  margin-bottom: 10px ;
}
/*
.sprite-box img {
  width: 100% ;
  image-rendering: pixelated;
}*/
.sprite-box .active-user {
  display: none ;
  position: absolute ;
  bottom: 20px ;
  left: 4px ;
  font-size: 8px ;
  color: #FFF ;
  background: hsl(0,50%,50%);
  padding: 4px ;
  border-radius: 8px ;
}

.spritebar {
    position: absolute;
    padding: 0px;
    right: 0;
    top: 40px;
    bottom: 0;
    width: 220px;
    background: rgba(0,0,0,.25);
    /*border-left: solid 4px rgba(255,255,255,.2);*/
}

.spritebar h3 {
  margin: 5px 0 0 0 ;
  font-size: 14px;
}

.spritetools {
  position: absolute ;
  left: 0 ;
  top: 0 ;
  bottom: 0 ;
  width: 44px ;
}

.spritetooloptions {
  position: absolute ;
  left: 58px ;
  top: 0 ;
  /* Space for spritehelpers */
  bottom: 60px ;
  right: 0 ;
  padding: 8px ;
  overflow-x: hidden ;
  overflow-y: auto ;
}

.spritetooloptions input {
  margin-bottom: 20px ;
}

.spritetooloptions label {
  font-size: 14px ;
}

.spritetooloptions .toolbox {
  text-align: center ;
}

.spritetoolbutton {
  display: inline-block ;
  margin: 4px 0px 0px 4px ;
  border-radius: 5px ;
  background: rgba(255,255,255,.1);
  padding: 10px 2px 5px 2px;
  line-height: 16px ;
  font-size: 10px ;
  text-align: center ;
  width: 46px ;
  cursor: pointer ;
}

.spritetoolbutton:hover {
  background: rgba(255,255,255,.2);
}

.spritetoolbutton i {
  background: none ;
  font-size: 18px ;
}

.spritetoolbutton.selected , .spritetoolbutton:active {
  background: rgba(255,255,255,.8);
  color: rgba(0,0,0,.8);
}

.spritetooloptions .toolbox .spritetoolbutton.selected {
  background: hsl(200,50%,50%);
  color: #FFF;
}

.spritetoolbutton.transform {
  display: block ;
  width: auto ;
}


.spritebar input {
  width: 100% ;
}
.spriteinfo {
  position: absolute;
  right: 0px ;
  left: 2px ;
  top: 0px ;
  height: 40px;
  padding-left: 10px ;
  background: hsl(200,30%,30%);
  white-space: nowrap;
}
.spriteinfo * {
  display: inline-block ;
}
.spriteinfo .buttons {
  display: inline-block ;
  margin-left: 40px ;
}
.spriteinfo .buttons div {
  margin-left: 1px ;
  padding: 10px 15px ;
  cursor: pointer ;
  background: hsl(160,50%,40%);
}
.spriteinfo .buttons div:hover {
  background: hsl(160,50%,60%);
}
.spriteinfo .buttons div#delete-sprite {
  background: hsl(0,50%,50%);
}
.spriteinfo .buttons div#delete-sprite:hover {
  background: hsl(0,50%,60%);
}

.spriteinfo input {
  border: none ;
  border-radius: 3px ;
  margin:6px 3px 0px 0px ;
  font-size: 14px ;
  padding: 5px ;
  background: rgba(255,255,255,.4);
}
.spriteinfo input:focus {
  outline: none ;
  background: rgba(255,255,255,.6);
}
.spriteinfo input#sprite-width,.spriteinfo input#sprite-height {
  width: 40px ;
  text-align: center ;
  margin: 0 3px ;
}
.spriteinfo input#sprite-width {
  margin-left: 40px ;
}
.spriteinfo .validate-button-container {
  display: inline-block ;
  width: 100px ;
  margin-left: 7px ;
  transition-duration: .5s ;
  transition-property: width ;
  overflow: hidden ;
  height: 30px ;
  vertical-align: middle ;
}
.spriteinfo .validate-button {
  display: inline-block ;
  padding: 5px 10px ;
  font-size: 14px ;
  border-radius: 3px ;
  background: hsl(160,50%,40%);
  color: #FFF ;
  cursor: pointer ;
  white-space: nowrap;
}
#spriteeditorcontainer {
  position: absolute ;
  right: 222px ;
  left: 2px ;
  top: 42px ;
  bottom: 162px ;
}
.spriteeditor {
  position: absolute;
  right: 0 ;
  left: 0 ;
  top: 0 ;
  bottom: 0 ;
  text-align: center ;
  overflow: hidden ;
  line-height: 0px ;
  /*border-left: solid 4px rgba(255,255,255,.2);*/
}
.spriteeditor:focus {
  outline: none ;
}
#sprite-zoom {
  position: absolute ;
  right: 12px ;
  bottom: 12px ;
}
#sprite-zoom i {
  margin-top: 8px ;
  padding: 8px ;
  border-radius: 20px ;
  font-size: 18px ;
  background: hsl(200,30%,30%);
  box-shadow: 0 0 8px #000;
  color: rgba(255,255,255,.8) ;
  cursor: pointer ;
}
#sprite-zoom i:hover {
  background: hsl(200,50%,50%);
  color: #FFF ;
}
#sprite-grab-info-container {
  position: absolute ;
  bottom: 12px ;
  left: 0 ;
  right: 0 ;
  text-align: center ;
}
#sprite-grab-info {
  display: inline-block ;
  border-radius: 20px ;
  padding: 5px 10px ;
  background: hsl(200,30%,30%);
  color: rgba(255,255,255,.8) ;
  box-shadow: 0 0 8px #000 ;
  display: none ;
}
#sprite-grab-info.active {
  background: hsl(200,50%,50%);
  color: #FFF ;
}
#sprite-grab-info i {
  margin-right: 10px ;
}
#spriteeditorcontainer.expanded {
  bottom: 42px ;
}
#sprite-editor-locked {
  position: absolute ;
  right: 264px ;
  left: 260px ;
  top: 60px ;
  padding: 20px ;
  z-index: 100 ;
  height: 20px ;
  transition-duration: .5s ;
  transition-property: left ;
  border-radius: 10px ;
  color: #FFF ;
  font-size: 16px ;
  display: none ;
}
#sprite-editor-locked i {
  margin-right: 5px ;
}
.colorpicker {
/*  margin-top: 20px;*/
}
.colorpicker canvas {
  width: 100% ;
  cursor: pointer ;
}
.spriteeditor canvas {
  box-shadow: 0 0 20px #000 ;
  /*border: solid 1px rgba(255,255,255,.2);
  border-radius: 4px ;*/
  margin: 40px ;
  display: none ;
  cursor: crosshair ;
}
.spriteeditor canvas.colorpicker {
  cursor: url( '/img/eyedropper.svg' ) 0 24, pointer;
}

.spritehelpers {
  position: absolute ;
  bottom: 0px ;
  left: 0px ;
  right: 0px ;
  height: 60px ;
}

.spritehelper {
  display: inline-block ;
  margin: 4px 0px 0px 4px ;
  border-radius: 5px ;
  background: rgba(255,255,255,.1);
  padding: 10px 2px 5px 2px;
  line-height: 16px ;
  font-size: 10px ;
  text-align: center ;
  width: 64px ;
  cursor: pointer ;
}

.spritehelper:hover {
  background: rgba(255,255,255,.2);
}

.spritehelper i {
  background: none ;
  font-size: 18px ;
}

.spritehelper.selected {
  background: rgba(255,255,255,.8);
  color: rgba(0,0,0,.8);
}
#colorpicker-group {
  text-align: center ;
}
.colortext {
  margin-top: 10px ;
  position: relative ;
  color: rgba(0,0,0,.7) ;
}
.colortext input {
  text-align: center;
  background: hsla(200,40%,80%,.8);
  box-sizing: border-box;
  border-radius: 5px;
  border: none ;
  padding: 5px 5px 5px 10px ;
  font-family: 'Ubuntu Mono';
  width: 145px ;
}
.colortext input:focus {
  border: none ;
  outline: none ;
  background: hsla(200,40%,80%,1);
}
.colortext input::selection {
  background: rgba(0,0,0,.3);
}
.colortext i {
  position: absolute ;
  left: 4px ;
  top: 5px ;
  font-size: 14px ;
  cursor: pointer ;
}

#colorpicker-group .spritetoolbutton {
  width: 100% ;
  box-sizing: border-box ;
  margin: 2px 0 ;
}
#sprite-animation-panel {
  position: absolute;
  left: 2px ;
  right: 222px ;
  bottom: 40px ;
  height: 120px ;
  background: hsl(200,40%,20%);
  text-align: center ;
  overflow: hidden ;
  transition-property: bottom;
  transition-duration: .5s;
}
#sprite-animation-panel.collapsed {
  bottom: -120px ;
}
#sprite-animation-title {
  position: absolute;
  left: 10px;
  padding: 7px 10px;
  bottom: 150px;
  height: 14px;
  text-align: left;
  font-size: 12px;
  cursor: pointer;
  border-radius: 10px;
  background: linear-gradient(180deg,hsl(200,50%,50%) 0%,hsl(200,50%,50%) 10%,hsl(200,40%,20%) 20%) ;
  transition-property: bottom,background,padding;
  transition-duration: .5s;
  z-index: 1;
  display: block;
  box-shadow: 0 -1px 1px #000;
}
#sprite-animation-title.collapsed {
  bottom: 50px ;
  background: hsl(200,50%,50%);
  padding: 3px 10px;
  box-shadow: 0 0 1px #000;
}
#sprite-animation-title i {
  margin-right: 5px
}
#sprite-animation-panel .button {
  color: #FFF;
  margin: 28px 25px;
  border-radius: 3px;
  cursor: pointer;
  display: inline-block;
  position: relative;
  top: 0px;
  bottom: 0px;
  vertical-align: top;
  font-size: 24px;
  cursor: pointer;
}
#sprite-animation-steps {
  position: absolute;
  right: 140px ;
  left: 0px ;
  padding: 18px 10px 0 10px;
  top: 0px ;
  bottom: 0px ;
  text-align: left ;
  font-size: 12px ;
  overflow: auto ;
  white-space: nowrap ;
  line-height: 0 ;
}
#sprite-animation-list {
  white-space: nowrap ;
  line-height: 0 ;
  display: inline-block ;
}
.sprite-animation-frame {
  position: relative ;
  margin: 2px 2px ;
  line-height: 0 ;
  display: inline-block ;
}
.sprite-animation-frame canvas {
  background: hsla(200,0%,50%,.5);
}
.sprite-animation-frame i {
  position: absolute ;
  padding: 5px ;
  border-radius: 3px ;
  color: #FFF ;
  font-size: 18px ;
  right: 0 ;
  bottom: 0 ;
  cursor: pointer ;
  display: none ;
  text-shadow: 0 0 2px #000 ;
}
.sprite-animation-frame.selected {
  border: solid 2px rgba(255,255,255,.8);
  margin: 0 ;
}
.sprite-animation-frame:hover {
  border: solid 2px rgba(255,255,255,.5);
  margin: 0 ;
}
.sprite-animation-frame:hover i {
  display: block ;
}
.sprite-animation-frame .remove {
  top: 0 ;
  bottom: unset ;
}
.sprite-animation-frame .clone {
  top: 0 ;
  right: unset ;
  bottom: unset ;
  left: 0 ;
}
.sprite-animation-frame .moveleft {
  right: unset ;
  left: 0 ;
}
.sprite-animation-frame span {
  position: absolute ;
  color: #FFF ;
  text-shadow: 0.5px 0.5px 2px #000;
  font-size: 14px ;
  top: 10px ;
  left: 5px ;
  font-family: Ubuntu ;
}
.sprite-animation-frame:hover span {
  display: none ;
}

#sprite-animation-preview {
  position: absolute ;
  top: 10px ;
  right: 0 ;
  bottom: 0 ;
  width: 110px ;
}
#sprite-animation-preview input {
  width: 80px ;
}

.selection-hint {
  margin: 10px 0 ;
  border-radius: 5px ;
  background: rgba(255,255,255,.1) ;
  padding: 5px 10px ;
  font-size: 14px ;
}
.selection-hint i {
  margin-left: 5px ;
  margin-right: 10px ;
}
.selection-hint span {
  background: rgba(255,255,255,.8);
  color: rgba(0,0,0,.8);
  padding: 2px 5px ;
  border-radius: 3px ;
}
.selection-hint.active {
  background: hsl(200,50%,40%);
}
.selection-operation {
  margin: 10px 0 ;
  border-radius: 5px ;
  background: hsl(160,50%,40%);
  padding: 10px ;
  font-size: 14px ;
  cursor: pointer ;
  text-align: center ;
}
.selection-operation:hover {
  background: hsl(160,50%,50%);
}
.selection-operation i.fa {
  font-size: 14px ;
  margin: 0 3px 10px 3px;
  vertical-align: middle ;
}
.selection-operation i.fa-th {
  font-size: 24px ;
  margin-bottom: 10px ;
}
.selection-operation i.fa-play {
  font-size: 14px ;
  margin-bottom: 10px ;
  color: hsl(160,50%,40%);
  background: #FFF ;
  border-radius: 3px ;
  padding: 5px 10px ;
}
.selection-actions {
  text-align: center ;
}

.auto-palette {
  padding: 5px;
    border-radius: 5px;
    background: rgba(255,255,255,.1);
    margin-top: 10px;
}

.auto-palette-title {
  margin-bottom: 5px ;
  font-size: 14px ;
  text-align: left ;
}

#auto-palette-lock {
  border-radius: 20px ;
  margin-left: 5px ;
  padding: 5px ;
  font-size: 10px ;
  background: hsl(160,50%,50%) ;
  color: #FFF ;
  cursor: pointer ;
}
#auto-palette-lock.locked {
  background: hsl(0,50%,50%) ;
}
#auto-palette-lock:hover {
  box-shadow: 0 0 4px #FFF ;
}

#auto-palette-list {
  line-height: 0 ;
  text-align: left ;
}

#auto-palette-list div {
  border-radius: 3px ;
  margin: 1px ;
  width: 15px ;
  height: 15px ;
  box-shadow: 0 0 2px #444 ;
  display: inline-block ;
  cursor: pointer ;
}

#auto-palette-list div:hover {
  box-shadow: 0 0 2px #FFF ;
}

#auto-palette-list div.selected {
  border-radius: 3px ;
  margin: 0px ;
  border: solid 1px #FFF ;
  box-shadow: 0 0 2px #000 inset ;
  display: inline-block ;
  cursor: pointer ;
}

#spriteeditor-bottombar {
  position: absolute;
  right: 220px ;
  left: 0px ;
  border-left: solid 2px #000 ;
  border-right: solid 2px #000 ;
  bottom: 0 ;
  height: 38px ;
  background: hsl(200,30%,30%);
  text-align: left ;
  padding: 0 10px ;
  white-space: nowrap ;
  overflow: hidden ;
}