@import "global";
.content-constrained
{
  max-width: $max-content-width; /*we have more padding than desirable so numbers from ol can exceed container*/
  margin-left: auto;
  margin-right: auto;
}
.content
{
  margin-left: auto;
  margin-right: auto;

  &:not(.content-wide)
  {
    max-width: $max-content-width; /*we have more padding than desirable so numbers from ol can exceed container*/
  }
  &.content-wide
  {
    max-width: 1400px;
  }

  padding-left: 15px;
  padding-right: 15px;

  h1, h2, h3, h4
  {
    &:not(:first-child)
    {
      margin-top: $spacing-vertical * 1.5;
    }
  }
  .meta
  {
    + h1, + h2, + h3, + h4
    {
      margin-top: $spacing-vertical * 0.5;
    }
  }

  &.content-dark
  {
    color: #e8e8e8;
    h1, h2, h3, h4, h5, h6 { color: #fff; }
    .link-primary { color: $color-light-alt; }
    .meta { color: #dddddd; }
  }

  &:not(.content-dark), &.content-light
  {
    color: #333;
    h1, h2, h3, h4, h5, h6
    {
      color: $color-text-dark;
    }

    .meta
    {
      color: $color-meta-light;
    }

    .link-primary { color: $color-primary; }

    blockquote
    {
      padding-left: 40px;
      border-left: solid 8px #f2f2f2;
    }
  }

  p
  {
      margin-bottom: $spacing-vertical;
      margin-left: auto;
      margin-right: auto;
  }
  p.pflow
  {
    margin-left: 0;
    margin-right: 0;
  }
  footer
  {
    font-size: 0.9em;
    font-style: italic;
    em { font-style: normal; }
  }
  ul, ol
  {
    > li
    {
      max-width: $max-text-width;
      margin-left: auto;
      margin-right: auto;
    }
    &.no-style
    {
      list-style: none;
      > li { list-style: none; }
    }
  }
  ul
  {
      margin-bottom: $spacing-vertical * 1.5;
      &:last-child { margin-bottom: $spacing-vertical / 2; }
      > li + li { margin-top: $spacing-vertical; }
  }
  ol {
    margin-bottom: $spacing-vertical * 1.5;
    &:last-child { margin-bottom: $spacing-vertical / 2; }
    padding-left: 2em;
    counter-reset: li-counter;
    > li {
      position: relative;
      padding-left: 1em;
      list-style: none;
      min-height: 2em;
      border-left: 1px solid rgba(160,160,160,0.5);
      &:before
      {
        position: absolute;
        top: -0.25em;
        left: -1em;
        width: 0.8em;

        font-size: 2em;
        text-align: right;
        opacity: 0.5;

        content: counter(li-counter);
        counter-increment: li-counter;
      }
      ol
      {
        margin-top: $spacing-vertical / 2;
        > li
        {
          border-left-style: dashed;
          font-size: 0.9em;
          min-height: 1em;
          &:before
          {
            content: counter(li-counter, lower-alpha);
            top: -0.15em;
            font-size: 1.4em;
            text-transform: uppercase;
          }
        }
      }
      + li { margin-top: $spacing-vertical; }
    }
  }
  img
  {
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
}
.content-inset
{
  margin-left: $spacing-vertical;
  margin-right: $spacing-vertical;
}
main > .content
{
  margin-top: $spacing-vertical;
}

@media(max-width: $max-text-width + 30)
{
  .content ol
  {
    margin-left: 30px; /*on small screens there is no space for numbers to exceed container*/
  }
}