body,
html {
  padding: 0;
  margin: 0;
  overflow: hidden;
}
body {
  background-color: #252525;
}
#w {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  overflow: hidden;
  background-color: #575757;
}
li {
  float: left;
  position: relative;
  background-image: url(t.png);
  background-color: #575757;
  background-size: 300%;
  background-position: 50% 50%;
}
.ro { /* rock */
  background-position: 0 0;
}
.ir { /* iron */
  background-position: 100% 0;
}
.u, .r, .d, .l {
  background-image: url(m.gif), url(t.png);
  background-size: 100%, 300%;
  background-position: 50% 50%, 50% 50%;
  z-index: 700;
}
.u {
  -moz-transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
}
.r {
}
.d {
  -moz-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}
.l {
  -moz-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}
.t {
  background-image: url(to.gif);
  background-size: 200%;
  position: relative;
  z-index: 777;
}
.t1 {
  background-position: 100% 0;
}
.t2 {
  background-position: 0 100%;
}
.t3 {
  background-position: 100% 100%;
}