======Sugarcane HTML structure======

As a reference for those writing [[stylesheet]]s, 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:
  * Both the body element and the .passage element's data-tags attribute reflects the tags of the current passage. This was originally used just as a CSS hook, before the advent of tagged stylesheets in version 1.4.0.
  * The #titleSeparator, .header and .footer elements are unused by Twine's normal operations, but can be styled in any manner you like. .body.content contains all the rendered HTML of the passage.
  * #snapback is not present when no passage in the story is [[tag|tagged]] "bookmark".
  * #snapbackMenu is the floating menu that appears when you use the Rewind button.
  * When a different passage is displayed, a .passage div and its contents (.header, .footer and .content) are recreated anew and inserted into the #passages div.
  * During transitions, the #passages div contains the old passage (which transitions toward the styles assigned to .transition-out) and the new passage (which transitions from the styles assigned to .transition-in)