Styled OL as referenced here... http://www.456bereastreet.com/archive/201105/styling_ordered_list_numbers/

styled-ol.scss

.styled-ol {
  counter-reset: li; // Initiate a counter
  margin-left: 0; // Remove the default left margin
  padding-left: 0; // Remove the default left padding
  & > li {
    position: relative; // Create a positioning context
    padding: 0 0 0 3em; // Give each list item a left margin to make room for the numbers
    //padding: 4px 8px; // Add some spacing around the content
    list-style: none; // Disable the normal item numbering
    border-top: 2px solid #666;
    background: #f6f6f6;
    &:before {
      content: counter(li); // Use the counter as content
      counter-increment: li; // Increment the counter by 1
      // Position and style the number
      position: absolute;
      top: -2px;
      left: 0;
      box-sizing: border-box;
      width: 3em;
      // Some space between the number and the content in browsers that support generated content but not positioning it (Camino 2 is one example)
      padding: 5px 2px;
      border-top: 2px solid #666;
      color: #fff;
      background: #666;
      text-align: center;
    }
  }

  li ol,
  li ul {
    margin-top: 6px;
  }
  ol ol li:last-child {
    margin-bottom: 0;
  }
} // .styled-ol