title: Getting hanging indent and Word-style mixed number/letter lists in HTML
body: <p>I'd like to produce a list in HTML that looks like this:</p>
  
  <pre><code>1. Top level element
      a. Nested list item
          i. Even a third level!
      b. Another nested item
      c. A third nested item
  2. Second top level element
  </code></pre>
  
  <p>By default HTML will use numbers for each level, so I'll get something like this:</p>
  
  <pre><code>1. Top level element
      1. Nested list item
          1. Even a third level!
  ...
  </code></pre>
  
  <p>I've managed to Frankenstein together a CSS style sheet that almost works with pieces of other answers:</p>
  
  <pre><code>ol {
      counter-reset: item;
  }
  ol li {
      list-style: none;
  }
  ol li:before {
      content: counters(item, ".")". ";
      counter-increment: item
  }
  ol ol li:before {
      content: counter(item, lower-alpha)". ";
  }
  ol ol ol li:before {
      content: counter(item, lower-roman)". ";
  }
  </code></pre>
  
  <p>The problem is that I don't get a hanging indent. I want:</p>
  
  <pre><code>1. Imagine that this is a really long
     line that gets wrapped.
  </code></pre>
  
  <p>but I get:</p>
  
  <pre><code>   1. Imagine that this is a really long
     line that gets wrapped.
  </code></pre>
  
  <p><a href="http://jsfiddle.net/rS7Y8/" rel="nofollow">Here's a JSFiddle showing the problem</a>. Ideally I'd like an answer that works even once the list numbers are more than one digit long, and better yet if the numbers line up on the right:</p>
  
  <pre><code> 9. Foo
  10. Bar
  </code></pre>
  
  <p>Thanks!</p>