@import ../bourbon/bourbon
@import ../neat/neat

$colors: #1ABC9C, #16A085, #2ECC71, #27AE60, #3498DB, #2980B9, #9B59B6, #8E44AD, #34495E, #2C3E50, #F1C40F, #F39C12, #E67E22, #D35400, #E74C3C, #C0392B, #ECF0F1, #BDC3C7, #95A5A6, #7F8C8D

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: #888

h1, h2, h3, h4, h5, h6
  color: #444

pre
  overflow: scroll
  background: #EEE
  padding: 10px

.content
  width: 980px
  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: #FFF
  background: #888
  margin: 20px 0
  text:
    align: center
    decoration: none
  border:
    radius: 4px

pre
  .support
    &.tag
      color: #008
    &.attribute
      color: #800
  .string
    &.value
      color: #080

.example
  position: relative
  .brick
    opacity: 1.0
    cursor: pointer
    position: relative
    .delete
      display: block
      color: #FFF
      background: rgba(#FFF, 0.2)
      width: 40px
      height: 40px
      top: 0
      right: 0
      position: absolute
      text-align: center
      line-height: 40px
    &.small
      width:  140px
      height: 140px
    &.large
      width:  300px
      height: 300px
    &.dragging
      opacity: 0.8
    $index: 0
    $length: length($colors)
    @each $color in $colors
      $index: $index + 1
      &:nth-child(#{$length}n + #{$index})
        background: $color