html, body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  margin: 0 auto;
  background: black;
  color: white;
}

a {
  color: inherit;
}

.quilt {
  font-family: "Baskerville", Georgia, serif;
}

.quilt-square.blurred {
  opacity: 0.2;
  pointer-events: none;
}

.quilt-square.focused {
  z-index: 1;
}

.quilt-square {
  position: relative;
  display: inline-block;
  vertical-align: bottom;
  font-size: 20px;
  -moz-transition: opacity 1s, -moz-transform 1s;
  -moz-transform-origin: 0% 0%;
  -webkit-transition: opacity 1s, -webkit-transform 1s;
  -webkit-transform-origin: 0% 0%;
  -o-transition: opacity 1s, -o-transform 1s;
  -o-transform-origin: 0% 0%;
}

.quilt-square section {
  position: relative;
}

.quilt-square section > img {
  position: absolute;
  top: 0px;
  left: 0px;
  clip: rect(0px, 128px, 128px, 0px);
}

.quilt-square section > h1 {
  position: absolute;
  top: 40px;
  left: 0px;
  z-index: 500;
  font-size: 30px;
  font-family: 'LeagueGothicRegular';
  text-transform: uppercase;
  font-weight: normal;
  margin: 0px;
  padding: 10px;
  line-height: 25px;
  background: rgba(0, 0, 0, 0.5);
  cursor: pointer;
}

.quilt-square section > h1:hover {
  text-decoration: underline;
}

.quilt-square section > ul {
  display: none;
}

.quilt-square.focused section > ul {
  display: block;
  position: absolute;
  top: 0px;
  left: 128px;
  width: 512px;
  -moz-transform: scale(0.25);
  -moz-transform-origin: 0% 0%;
  -webkit-transform: scale(0.25);
  -webkit-transform-origin: 0% 0%;
  -o-transform: scale(0.25);
  -o-transform-origin: 0% 0%;
}

.quilt-square section > ul {
  margin-top: 0px;
  margin-bottom: 0px;
  padding: 10px;
}

.quilt-square section > ul > li {
  list-style-type: none;
  padding-bottom: 10px;
  font-size: 14px;
  color: #f0f0f0;
}

.quilt-square section > ul > li:first-child > blockquote:first-child {
  margin-top: 0px;
}

.quilt-square section > ul > li > blockquote:first-child {
  margin-top: 10px;
  margin-bottom: 10px;
}

.quilt-square section > ul > li > blockquote:first-child {
  margin-left: 0px;
  font-size: 20px;
  font-family: 'LeagueGothicRegular';
  text-transform: uppercase;
  padding-bottom: 10px;
  color: white;
}

#status-bar {
  position: fixed;
  bottom: 0px;
  left: 0px;
  right: 0px;
  font-size: 12px;
  padding: 4px;
  background: rgba(0, 0, 0, 0.75);
  z-index: 2500;
}

#embedded-quilt {
  display: none;
}