Sugarcane HTML structure

As a reference for those writing stylesheets, the HTML structure of the Sugarcane Story format looks like this:

  <body data-tags="">
    <ul id="sidebar">
      <li id="title" class="storyElement">
        <span id="storyTitle" class="storyElement">Untitled Story</span>
        <span id="storySubtitle" class="storyElement"></span>
        <span id="titleSeparator">
          <br>
        </span>
        <span id="storyAuthor" class="storyElement">Anonymous</span>
      </li>
      <li id="storyMenu" class="storyElement" style="display:none"></li>
      <li id="snapback">Rewind</li>
      <li id="restart">Restart</li>
      <li>
        <a id="bookmark" title="Permanent link to this passage" href="#.0">Bookmark</a>
      </li>
      <li id="credits">This story was created with 
        <a href="http://twinery.org/">Twine</a>
         and is powered by 
        <a href="http://tiddlywiki.com/">TiddlyWiki</a>
      </li>
    </ul>
    <div id="snapbackMenu" class="menu"></div>
    <div id="passages">
      <div id="passageStart" class="passage" style="visibility: visible;">
        <div class="header"></div>
        <div class="body content">
        Your story will display this passage first. Edit it by double clicking it.</div>
        <div class="footer"></div>
      </div>
    </div>
    <div id="storeArea" hidden="">
    ...passage data is stored here...
    </div>
  </body>
  

Some notes: