.map{
  background-color: black;
  overflow: hidden;
}

.map .item{
  margin: 0;
  padding: 0;
  width: 16px;
  height: 16px;
  float:left;
  background-color: transparent;
  background-image: url(items.png);
  background-repeat: no-repeat;
}
.map .item:hover{
  background-color: rgba(255,255,255, 0.5);
}
.map .item.node{
  background-position: 0 -32px;
}

.map .item.node.upway{
  background-position: -16px -32px;
}

.map .item.node.rightway{
  background-position: -32px -32px;
}

.map .item.node.downway{
  background-position: -48px -32px;
}

.map .item.node.leftway{
  background-position: -64px -32px;
}

.map .item.node.up-right{
  background-position: -80px -32px;
}
.map .item.node.up-down{
  background-position: -96px -32px;
}
.map .item.node.up-left{
  background-position: -112px -32px;
}

.map .item.node.down-right{
  background-position: -128px -32px;
}
.map .item.node.left-right{
  background-position: -144px -32px;
}

.map .item.node.down-left{
  background-position: -160px -32px;
}

.map .item.node.no-left{
  background-position: -176px -32px;
}

.map .item.node.no-up{
  background-position: -192px -32px;
}

.map .item.node.no-right{
  background-position: -208px -32px;
}
.map .item.node.no-down{
  background-position: -224px -32px;
}
.map .item.node.allway{
  background-position: -240px -32px;
}

.map .item.line.up-right{
  background-position: -80px 0;
}
.map .item.line.up-down{
  background-position: -96px 0;
}
.map .item.line.up-left{
  background-position: -112px 0;
}

.map .item.line.down-right{
  background-position: -128px 0;
}
.map .item.line.left-right{
  background-position: -144px 0;
}

.map .item.line.down-left{
  background-position: -160px 0;
}

.map .item.line.no-left{
  background-position: -176px 0;
}

.map .item.line.no-up{
  background-position: -192px 0;
}

.map .item.line.no-right{
  background-position: -208px 0;
}
.map .item.line.no-down{
  background-position: -224px 0;
}
.map .item.line.cross{
  background-position: -240px 0;
}