.cs-map-navigation {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  padding: 0;
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
  height: 300px;
  width: 128px;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.cs-map-navigation-compass {
  pointer-events: auto;
  position: absolute;
  right: 10px;
  top: 10px;
  width: 128px;
  height: 128px;
  overflow: hidden;
  z-index: 9;
}
.cs-map-navigation-compass-ring {
  cursor: pointer;
  position: absolute;
  width: 128px;
  height: 128px;
  top: 0;
  -webkit-transform: rotate(0rad);
      -ms-transform: rotate(0rad);
          transform: rotate(0rad);
  background-image: url('../assets/ring.png');
}
.cs-map-navigation-compass-ring:active {
  background-image: url('../assets/ring_active.png');
}
.cs-map-navigation-compass-ring-center {
  width: 16px;
  height: 16px;
  position: absolute;
  top: 18px;
  left: 56px;
}
.cs-map-navigation-arrows {
  position: absolute;
  width: 128px;
  height: 128px;
  top: 10px;
  right: 10px;
  z-index: 8;
  background-image: url('../assets/compass_active.png');
  visibility: hidden;
}
.cs-map-navigation-arrows-e-active,
.cs-map-navigation-arrows-n-active,
.cs-map-navigation-arrows-s-active,
.cs-map-navigation-arrows-w-active {
  cursor: pointer;
  position: absolute;
  width: 24px;
  height: 24px;
  z-index: 10;
}
.cs-map-navigation-arrows-e-active {
  top: 62px;
  left: 62px;
}
.cs-map-navigation-arrows-e-active:active {
  background-image: url('../assets/arrows_e_active.png');
}
.cs-map-navigation-arrows-n-active {
  top: 42px;
  left: 42px;
}
.cs-map-navigation-arrows-n-active:active {
  background-image: url('../assets/arrows_n_active.png');
}
.cs-map-navigation-arrows-s-active {
  top: 82px;
  left: 42px;
}
.cs-map-navigation-arrows-s-active:active {
  background-image: url('../assets/arrows_s_active.png');
}
.cs-map-navigation-arrows-w-active {
  top: 62px;
  left: 24px;
}
.cs-map-navigation-arrows-w-active:active {
  background-image: url('../assets/arrows_w_active.png');
}
.cs-map-navigation-zoom {
  position: absolute;
  width: 30px;
  height: 150px;
  background-image: url('../assets/zoom.png');
  top: 130px;
  right: 60px;
  visibility: hidden;
}
.cs-map-navigation-zoom-in {
  position: absolute;
  z-index: 99;
  top: -2px;
  width: 32px;
  height: 32px;
  cursor: pointer;
}
.cs-map-navigation-zoom-in:active {
  background-image: url('../assets/zoom_active_in.png');
}
.cs-map-navigation-zoom-out {
  position: absolute;
  z-index: 99;
  width: 32px;
  height: 32px;
  bottom: -2px;
  cursor: pointer;
}
.cs-map-navigation-zoom-out:active {
  background-image: url('../assets/zoom_active_out.png');
}
.cs-map-navigation-zoom-bar {
  position: absolute;
  cursor: pointer;
  width: 32px;
  height: 32px;
  top: 65px;
  background-image: url('../assets/zoombar.png');
}
.cs-map-navigation-angle {
  position: absolute;
  width: 128px;
  height: 128px;
  background-image: url('../assets/tilt.png');
  right: 6px;
  top: 6px;
}
.cs-map-navigation-angle-bar {
  cursor: pointer;
  position: absolute;
  width: 16px;
  height: 16px;
  background-image: url('../assets/tiltbar.png');
  background-repeat: no-repeat;
  z-index: 10;
  left: 58px;
  top: 5px;
}
.cs-map-navigation:hover .cs-map-navigation-arrows,
.cs-map-navigation:active .cs-map-navigation-arrows,
.cs-map-navigation:hover .cs-map-navigation-zoom,
.cs-map-navigation:active .cs-map-navigation-zoom,
.cs-map-navigation:hover .cs-map-navigation-angle,
.cs-map-navigation:active .cs-map-navigation-angle {
  visibility: visible;
}