As a reference for those writing stylesheets, the HTML structure of the Jonah Story format is shown here.
When displaying three passages with this code:
:: Start This is the first passage. [[Next]] :: Next [special] This is the second passage, with a special tag. [[End]] :: End This is the final passage.
Then, the resulting HTML DOM structure looks like this:
<body data-tags=""> <div id="floater"> <div class="container"> <div id="storyMenu" class="storyElement"></div> <p> <a id="restart" href="#">Restart Story</a> </p> </div> </div> <div id="content1"> <div id="content2"> <div id="header"></div> <div id="titleLine"></div> <h1> <span id="storyTitle" class="storyElement">Untitled Story</span> </h1> <h2> <span id="storySubtitle" class="storyElement"></span> </h2> <h3> <span id="storyAuthor" class="storyElement">Anonymous</span> </h3> <div id="passages"> <div id="passageStart" class="passage" style="visibility: visible;"> <div class="header"></div> <div class="title"> Start <span class="toolbar"> <a class="toolbar-bookmark" href="#.0" title="Bookmark this point in the story">bookmark</a> <a class="toolbar-rewind" title="Rewind the story to this point">rewind to here</a> </span> </div> <div class="body content"> This is the first passage. <br> <br> <a class="internalLink">Next</a> </div> <div class="footer"></div> </div> <div id="passageNext" class="passage" style="visibility: visible;" data-tags="special"> <div class="header"></div> <div class="title"> Next <span class="toolbar"> <a class="toolbar-bookmark" href="#.0.3" title="Bookmark this point in the story">bookmark</a> <a class="toolbar-rewind" title="Rewind the story to this point">rewind to here</a> </span> </div> <div class="body content"> This is the second passage, with a special tag. <br> <br> <a class="internalLink">End</a> </div> <div class="footer"></div> </div> <div id="passageEnd" class="passage" style="visibility: visible;"> <div class="header"></div> <div class="title"> End <span class="toolbar"> <a class="toolbar-bookmark" href="#.0.3.1" title="Bookmark this point in the story">bookmark</a> <a class="toolbar-rewind" title="Rewind the story to this point">rewind to here</a> </span> </div> <div class="body content">This is the final passage.</div> <div class="footer"></div> </div> </div> <p id="footer"> This story was created with <a class="externalLink" href="http://twinery.org/">Twine</a> and is powered by <a class="externalLink" href="http://www.tiddlywiki.com/">TiddlyWiki</a>. </p> </div> </div> <div id="storeArea" hidden=""> ...passage data is stored here... </div> </body>
Some notes: