css - CSS で楕円が積み上げられた昔ながらの目次を作成するにはどうすればよいですか?

Question

複製しようとしている目次は次のとおりです。

これが私がこれまでに持っているものです: http://jsfiddle.net/hTt6L/。何をすればいいのかわからないので、積み上げ楕円を実行しようとさえしていないことに気付くでしょう。

<div style="margin:25px 22px 200px 22px;">
     <div style="text-align:center;font-size:150%;letter-spacing:.1em;margin-bottom:10px;margin-right:-.1em;">CONTENTS</div>
     <div style="margin-bottom:9px;">EDITOR&rsquo;S INTRODUCTION</div>
      <div style="margin:0 0 .5em 1em;">1. Historical</div>
      <div style="margin:0 0 .5em 1em;">2. Epistemology</div>
      <div style="margin:0 0 .5em 1em;">3. Epistemology of Morals</div>
      <div style="margin:0 0 .5em 1em;">4. Psychology of Morals</div>
      <div style="margin:0 0 .5em 1em;">5. The Moral System</div>
      <div style="margin:0 0 1.5em 1em;">6. Morals and Theology</div>
     <div style="margin:0 2em .5em 1em;text-indent:-1em;">A REVIEW OF THE PRINCIPAL QUESTIONS IN MORALS</div>
     <div style="margin:0 2em .5em 1em;">INDEX</div>
 </div>

最後に、これはコンテキストでどのように見えるかです: http://www.dinkypage.com/185740#S2