._mdn {
  .index { // HTML, CSS
    -webkit-columns: 16em;
       -moz-columns: 16em;
            columns: 16em;

    > span {
      display: block;
      font-size: 1rem;
      font-weight: bold;
    }

    ul, ol {
      margin: 0 0 1em;
      padding: 0;
      line-height: 1.5;
      list-style: none;
    }

    li { padding-left: 1em; }
  }

  > h2 { @extend %block-heading; }

  > .note,
  .notice,
  .overheadIndicator,
  .syntaxbox,           // CSS, JavaScript
  .twopartsyntaxbox,    // CSS
  .inheritsbox,         // JavaScript
  .eval:first-of-type { // JavaScript
    @extend %note;
  }

  > .note {
    em {
      font-style: normal;
      font-weight: bold;
    }

    > ul { margin: 1em 0; }
    > p:last-child, > ul:last-child { margin-bottom: 0; }
  }

  .inlineIndicator {
    white-space: nowrap;
    @extend %label;
  }

  .syntaxbox a,        // CSS
  .twopartsyntaxbox a, // CSS
  .inlineIndicator > a {
    color: inherit;
    @extend %internal-link;
  }

  .deprecated, .obsolete { @extend %label-red; }
  .nonStandard, .projectSpecific, .experimental { @extend %label-orange; }

  .htmlelt,
  .cssprop {
    display: table;
    @extend %note, %note-blue;

    > li {
      display: table-row;
      margin: 0;

      > dfn {
        display: table-cell;
        padding: .125rem 1.5rem .125rem 0;
        white-space: pre;
        border: 0;
        cursor: inherit;

        &:after { content: ':'; }
      }
    }
  }

  dt > strong > code, // HTML element attribute
  dl > dt > code {    // CSS property value, Javascript function argument
    font-family: inherit;
    font-weight: bold;
  }

  .eventinfo { // DOM event
    > dd + dt { margin-top: 0; }
  }

  .cleared { clear: both; } // CSS/box-shadow

  code > strong { font-weight: normal; }
}
