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

  h1, h2, h3, h4, h5, h6
  {
    color: $color-text-dark;
    &:not(:first-child)
    {
      margin-top: $spacing-vertical * 1.5;
    }
  }

  .meta
  {
    color: #505050;
  }

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

  p
  {
      max-width: $max-text-width;
      margin-bottom: $spacing-vertical;
      margin-left: auto;
      margin-right: auto;
  }
  ul, ol
  {
    > li
    {
      max-width: $max-text-width;
      margin-left: auto;
      margin-right: auto;
    }
  }
  ul
  {
      margin-bottom: $spacing-vertical * 1.5;
      > li + li { margin-top: $spacing-vertical; }
  }
  ol {
    margin-bottom: $spacing-vertical * 1.5;
    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;
      }
      + li { margin-top: $spacing-vertical; }
    }
  }
  img
  {
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
}

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