body {
  margin: 50px;
  font-family: 'helvetica neue', helvetica, arial, sans-serif;
  font-size: 14px;
  color: #222;
}

h1 {
  font-weight: normal;
  color: #888;
}

p {
  max-width: 700px;
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}

.funbox {
  position: relative;
  width: 300px;
  height: 400px;
  background: #cecece;
  overflow: hidden;
}

.bloat {
  position: absolute;
  width: 1000px;
  height: 1000px;
  background: url(pattern.png);
}

.scroll {
  overflow: scroll;
  margin-bottom: 20px;
}

.funbox:active {
  background: #c0c0c0;
}

.test, .outer, .inner {
  width: 100px;
  height: 100px;
  background: #68BFB6;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  tap-highlight-color: rgba(0,0,0,0);
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}

.abs {
  position: absolute;
}

.outer {
  background: #555;
}

.outer .inner {
  background: #57889D;
}

.wide {
  width: 200px;
}

.row {
  clear: both;
  max-width: 700px;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

.row > div {
  float: left;
  border: 2px solid white;
}

.alt {
  background: #57889D;
}

.hide {
  display: none;
}