created by http://livecoding.io

README.md

View this code at http://livecoding.io/6115060

options.json

{
    "libraries": [],
    "mode": "html",
    "layout": "fullscreen mode (vertical)",
    "resolution": "reset"
}

water.css

/* css goes here */
body {
  font-size: 12px;
}
#tags li {
  display: inline-block;
  border: 1px solid #dfdfdf;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  padding: 0 2px;
  line-height: 24px;
}
#tags li a {
  display: inline-block;
  width: 18px;
  height: 18px;
  position: relative;
  top: 4px;
}
#tags li.new {
  border-color: lightgreen;
}
#tags li.new a {
  background: url(http://l.yimg.com/g/images/flickr-sprite.png.v5) no-repeat -1810px -10px;
}
#tags li.old a {
  visibility: hidden;
  background: url(http://l.yimg.com/g/images/flickr-sprite.png.v5) no-repeat -1410px -10px;
}
#tags li.old:hover a {
  visibility: visible;
}
#tags li.old:hover a:hover {
  background-position: -1450px -50px;
}
#tags li.done a {
  background: url(http://l.yimg.com/g/images/flickr-sprite.png.v5) no-repeat -1530px -90px;
}
#tags li.loading a {
  visibility: visible;
  width: 28px;
  top: 6px;
  z-index: -1;
  background: url(http://www.flickr.com/images/pulser2.gif) no-repeat;
}
#tags li a span {
  position: absolute;
  left: -999px;
}

water.html

<!-- html goes here -->
<ul id="tags">
  <li class="new">osm:way=124345<a href><span>[x]</span></a></li>
  <li class="new done">osm:way=124345<a href><span>[x]</span></a></li>
  <li class="old">osm:way=7869<a href><span>[x]</span></a></li>
  <li class="old loading">osm:way=7865339<a href><span>[x]</span></a></li>
</ul>

water.js

/* javascript goes here */

water.json

{ }