* {
	
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	background-image: url('../img/back.jpg');
	background-position: center top;
	background-repeat: no-repeat;
}

body, html, p, h1, h2, h3, h4, h5, h6 {
  font-family: "Lato", "Helvetica", serif;
  font-weight: normal; }

code {
  font-family: "Consolas", "Monaco", monospace;
  font-weight: normal; }

body, html, p, code {
  color: #888888; }

h1, h2, h3, h4, h5, h6 {
  color: #444444; }

pre {
  overflow: scroll;
  background: #eeeeee;
  padding: 1px; }

.content {
	width: 960px;
	margin: 80px auto;
}

.formats .format {
  display: inline-block; }

.zip {
  background: url("../images/zip.png");
  display: block;
  width: 128px;
  height: 128px; }

.tar {
  background: url("../images/tar.png");
  display: block;
  width: 128px;
  height: 128px; }

.fork {
  position: absolute;
  top: 0;
  left: 0;
  border: 0; }

.button {
  display: block;
  padding: 20px;
  width: 200px;
  color: white;
  background: #888888;
  margin: 20px 0;
  text-align: center;
  text-decoration: none;
  border-radius: 4px; }

pre .support.tag {
  color: #000088; }
pre .support.attribute {
  color: #880000; }
pre .string.value {
  color: #008800; }

.example {
  position: relative; }
  .example .brick {
    opacity: 1;
    cursor: pointer;
    position: relative; }
    .example .brick .delete {
      display: block;
      color: red;
      background: rgba(255, 255, 255, 0.2);
      width: 40px;
      height: 40px;
      top: 0;
      right: 0;
      position: absolute;
      text-align: center;
      line-height: 40px; }
    .example .brick.small {
      width: 140px;
      height: 140px; }
    .example .brick.large {
      width: 300px;
      height: 300px; }
    .example .brick.dragging {
      opacity: 0.8; }
    .example .brick:nth-child(20n + 1) {
      background: url('../img/dreveny-plot-1.jpg') no-repeat;
 }
    .example .brick:nth-child(20n + 2) {
      background: url('../img/dreveny-plot-2.jpg') no-repeat;
 }
    .example .brick:nth-child(20n + 3) {
      background: url('../img/dreveny-plot-3.jpg') no-repeat;
 }
    .example .brick:nth-child(20n + 4) {
      background: url('../img/dreveny-plot-4.jpg') no-repeat;
 }
    .example .brick:nth-child(20n + 5) {
      background: url('../img/dreveny-plot-5.jpg') no-repeat;
; }
    .example .brick:nth-child(20n + 6) {
      background: url('../img/dreveny-plot-6.jpg') no-repeat;
; }
    .example .brick:nth-child(20n + 7) {
      background: url('../img/dreveny-plot-2.jpg') no-repeat;
 }
    .example .brick:nth-child(20n + 8) {
      background: url('../img/dreveny-plot-6.jpg') no-repeat;
 }
    .example .brick:nth-child(20n + 9) {
      background: url('../img/dreveny-plot-9.jpg') no-repeat;
 }
    .example .brick:nth-child(20n + 10) {
      background: url('../img/dreveny-plot-6.jpg') no-repeat;
 }
    .example .brick:nth-child(20n + 11) {
      background: url('../img/dreveny-plot-2.jpg') no-repeat;
; }
    .example .brick:nth-child(20n + 12) {
      background: url('../img/dreveny-plot-6.jpg') no-repeat;
 }
    .example .brick:nth-child(20n + 13) {
      background: url('../img/dreveny-plot-13.jpg') no-repeat;
 }
    .example .brick:nth-child(20n + 14) {
      background: url('../img/dreveny-plot-14.jpg') no-repeat;
 }
    .example .brick:nth-child(20n + 15) {
      background: url('../img/dreveny-plot-15.jpg') no-repeat;
 }
    .example .brick:nth-child(20n + 16) {
      background: url('../img/dreveny-plot-16.jpg') no-repeat;
 }
    .example .brick:nth-child(20n + 17) {
      background: url('../img/dreveny-plot-17.jpg') no-repeat;
 }
    .example .brick:nth-child(20n + 18) {
      background: url('../img/dreveny-plot-18.jpg') no-repeat;
 }
    .example .brick:nth-child(20n + 19) {
      background: url('../img/dreveny-plot-19.jpg') no-repeat;
 }
    .example .brick:nth-child(20n + 20) {
      background: url('../img/dreveny-plot-20.jpg') no-repeat;
 }
   .example .brick:nth-child(20n + 21) {
      background: url('../img/dreveny-plot-21.jpg') no-repeat;
 }
   .example .brick:nth-child(20n + 22) {
      background: url('../img/dreveny-plot-22.jpg') no-repeat;
 }
   .example .brick:nth-child(20n + 23) {
      background: url('../img/dreveny-plot-23.jpg') no-repeat;
 }
   .example .brick:nth-child(20n + 24) {
      background: url('../img/dreveny-plot-24.jpg') no-repeat;
 }
   .example .brick:nth-child(20n + 25) {
      background: url('../img/dreveny-plot-25.jpg') no-repeat;
 }
   .example .brick:nth-child(20n + 26) {
      background: url('../img/dreveny-plot-26.jpg') no-repeat;
 }
   .example .brick:nth-child(20n + 27) {
      background: url('../img/dreveny-plot-27.jpg') no-repeat;
 }
   .example .brick:nth-child(20n + 28) {
      background: url('../img/dreveny-plot-28.jpg') no-repeat;
 }
   .example .brick:nth-child(20n + 29) {
      background: url('../img/dreveny-plot-29.jpg') no-repeat;
 }
   .example .brick:nth-child(20n + 30) {
      background: url('../img/dreveny-plot-30.jpg') no-repeat;
 }
   .example .brick:nth-child(20n + 31) {
      background: url('../img/dreveny-plot-31.jpg') no-repeat;
 }
   .example .brick:nth-child(20n + 32) {
      background: url('../img/dreveny-plot-32.jpg') no-repeat;
 }
   .example .brick:nth-child(20n + 33) {
      background: url('../img/dreveny-plot-33.jpg') no-repeat;
 }