// Reference

body.reference {
  h3 {
    &.mixin, &.constant {
      font-family: Monaco, courier;
      font-weight: 200;
      @include text-shadow;
      background-color: #eeeeee;
      border: 1px solid #aaaaaa;
      padding: 0.75em;
      margin-bottom: 0;
      a.permalink {
        @include hover-link;
        @include link-colors(inherit, inherit); } }
    .arg[data-default-value] {
      color: #666666;
      &:before {
        content: "["; }
      &:after {
        content: "]"; } } }
  .source-documentation {
    background-color: #eeeeee;
    border: 1px solid #aaaaaa;
    border-top-width: 0;
    padding: 0.75em; }
  dl.source-documentation {
    margin-top: 0;
    dt {
      font-weight: bold;
      float: left;
      margin-right: 15px; }
    dt:not(:first-child) {
      margin-top: 1em; } }
  span.view-source {
    float: right;
    margin: 1em;
  }
  span.color + span.swatch { margin: 0 3px 3px; border: 1px solid #333333; width: 1em; height: 1em; @include inline-block; }
  .color-snippet { width: 100px; height: 20px; @include border-radius(3px); }
  a.help { font-size: 75%; }
  .mixin-source {
    pre {
      @include box-sizing(border-box);
      display: none;
      overflow-x: auto;
      width: 100%;
      padding: $base-rhythm-unit;
    }
    pre:target {
      display: block;
    }
  }
  
}

body.docs {
  .code {
    @include code-text;
    border: 1px solid #ccc;
    padding: 2px;
    background-color: #e7e7e7;
  }
  pre { @extend .code; }
  p, ol, ul, dl, table { code { @extend .code; }}
}

table.constants {
  width: 100%;
  @include alternating-rows-and-columns(#eeeeee, #bbbbbb, #191919);
  @include outer-table-borders(1px);
  @include inner-table-borders(1px);
  td, th {
    padding: 0.25em 0.5em; } }

dl.examples {
  display: table;
  margin-bottom: 2em;
  dt, dd {
    display: table-cell;
  }
  dd {
    padding-left: 0.33em;
    &:before {
      content: " - ";
    }
  }
}