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

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

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

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

.maplist {
  position: absolute;
  background: rgba(0,0,0,.25) ;
  left: 0 ;
  top: 40px ;
  bottom: 40px ;
  right: 0 ;
  text-align: center ;
  line-height: 0 ;
  padding-top: 10px ;
  padding-bottom: 10px ;
  overflow-x: hidden ;
  overflow-y: auto ;
}
#create-map-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-map-button i {
  margin-right: 0px ;
}
#create-map-button span {
  white-space: nowrap ;
  margin-left: 10px ;
}
.map-box {
  position: relative ;
  cursor: pointer ;
  display: inline-block ;
  margin: 1px ;
  width: 96px ;
  height: 116px ;
  font-size: 12px ;
  padding: 4px 0 ;
  background: rgba(255,255,255,.1);
  border-radius: 4px ;
  overflow: hidden ;
}
.map-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 ;
}
.map-box.selected {
  margin: 0px;
  border: solid 1px rgba(255,255,255,.5) ;
  background: rgba(255,255,255,.2);
}

.map-box .icon-box {
  height: 96px ;
  width: 96px ;
  overflow: hidden ;
  margin-bottom: 10px ;
}

.map-box canvas {
  width: 100%;
}

.mapbar {
    position: absolute;
    right: 0;
    top: 0px;
    bottom: 0;
    width: 274px;
    background: rgba(0,0,0,.25);
    overflow: auto ;
}

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

.mapbar input {
  width: 100% ;
}
.map-sprite-list {
  position: absolute ;
  top: 300px ;
  left: 0 ;
  right: 0 ;
  bottom: 0 ;
  text-align: center ;
  padding: 2px ;
}
.mapinfo {
  position: absolute;
  right: 0px ;
  left: 2px ;
  top: 0px ;
  height: 40px;
  padding-left: 10px ;
  background: hsl(200,30%,30%);
  white-space: nowrap;
}
.mapinfo * {
  display: inline-block ;
  font-size: 16px ;
}
.mapinfo .buttons {
  display: inline-block ;
  margin-left: 20px ;
}
.mapinfo .buttons div {
  margin-left: 1px ;
  padding: 10px 15px ;
  cursor: pointer ;
  background: hsl(160,50%,40%);
}
.mapinfo .buttons div:hover {
  background: hsl(160,50%,60%);
}
.mapinfo .buttons div#delete-map {
  background: hsl(0,50%,50%);
}
.mapinfo .buttons div#delete-map:hover {
  background: hsl(0,50%,60%);
}

.mapinfo input {
  border: none ;
  border-radius: 3px ;
  margin:6px 20px 0px 0px ;
  font-size: 14px ;
  padding: 5px ;
  background: rgba(255,255,255,.4);
}
.mapinfo input:focus {
  outline: none ;
  background: rgba(255,255,255,.6);
}
.mapinfo input#map-width,.mapinfo input#map-height,.mapinfo input#map-block-width,.mapinfo input#map-block-height {
  width: 30px ;
  text-align: center ;
  margin: 0 3px ;
}
.mapinfo .validate-button-container {
  display: inline-block ;
  width: 100px ;
  margin-left: 7px ;
  transition-duration: .5s ;
  transition-property: width ;
  overflow: hidden ;
  height: 30px ;
  vertical-align: middle ;
}
.mapinfo .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;
}
#mapeditor-container {
  position: absolute;
  right: 0px ;
  left: 0px ;
  top: 40px ;
  bottom: 0 ;
}
#mapeditor-wrapper {
  position: absolute;
  right: 0px ;
  left: 0px ;
  top: 0px ;
  bottom: 40px ;
}
#mapeditor-bottombar {
  position: absolute;
  right: 2px ;
  left: 2px ;
  bottom: 0 ;
  height: 40px ;
  background: hsl(200,30%,30%);
  text-align: left ;
  padding: 0 10px ;
  white-space: nowrap ;
  overflow: hidden ;
}
#map-underlay-select {
  padding: 3px 6px ;
  border-radius: 5px ;
}
.mapeditor-splitbar {
  background: hsl(200,30%,30%);
  position: absolute ;
  left: 400px ;
  top: 0 ;
  bottom: 0 ;
  width: 10px ;
  cursor: ew-resize;
  z-index: 2 ;
}
.mapeditor {
  position: absolute;
  right: 100px ;
  left: 0px ;
  top: 0px ;
  bottom: 0 ;
  text-align: center ;
}
.mapeditor canvas {
  box-shadow: 0 0 30px #000 ;
  border: solid 1px rgba(255,255,255,.2);
  border-radius: 4px ;
  display: none ;
  cursor: crosshair ;
}
#map-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 ;
}
#map-editor-locked i {
  margin-right: 5px ;
}
.map-sprite-box {
  cursor: pointer ;
  display: inline-block ;
  margin: 1px ;
  width: 64px ;
  height: 64px ;
  padding: 4px 0 ;
  overflow: hidden ;
  background: rgba(255,255,255,.1);
  border-radius: 4px ;
  vertical-align: top ;
}
.map-sprite-box.selected {
  margin: 0px;
  border: solid 1px rgba(255,255,255,.5) ;
  background: rgba(255,255,255,.2);
}

.map-sprite-box .icon-box {
  height: 64px ;
  width: 64px ;
  margin-bottom: 10px ;
}

.map-sprite-box img {
  width: 100% ;
  image-rendering: pixelated;
}
.map-tilepicker {
  text-align: center ;
}
.map-tilepicker canvas {
  margin: 10px 10px ;
  box-shadow: 0 0 3px #FFF ;
  cursor: crosshair ;
}