So adding this : &lt;&lt;script&gt;&gt;<br />$(&quot;#passages a&quot;).attr(&quot;tabindex&quot;, 0);<br />&lt;&lt;/script&gt;&gt;

So adding this : &lt;&lt;script&gt;&gt;<br />$(&quot;#passages a&quot;).attr(&quot;tabindex&quot;, 0);<br />&lt;&lt;/script&gt;&gt;

You can then use that class (options) to apply the following CSS which will center and add a margin to the left of all options except the first one <br />#passages .options {<br />text-ali

Try the following: <br />body {<br />/* This affects the entire page */<br />background-image: url(&quot;http://i.imgur.com/7lFkCif.jpg&quot;); <br />font-family: &

/>text-align: center;<br />}<br />#passages {<br />/* Box background (white with 70% opacity) */<br />background-color: rgba(255, 255, 255, 0.7);<br />/* Border */<

Original CSS Selector  =>  Harlowe CSS Selector (or an approximation as some things don't map exactly, like the placement of the background colour of the page) <br />#passages =&gt; tw-s

I would love to use this stylesheet: body {<br />margin: 5% 0 0 0;<br />background-color:#000;<br />}<br />#passages{<br />margin: 0;<br />padding: 0;<br />bo

and use some CSS to style it. <br />#passages p {<br />text-indent: 2em;<br />}<br />

the link bar element. */<br />$(&quot;#passages&quot;).after('&lt;div id=&quot;linkbar&quot;&gt;&lt;/div&gt;');<br />/* Setup a predisplay task to clear th

/>display: none;<br />}<br />#passages {<br />border-left: 0;<br />}<br />.revision-span-in {<br />opacity: 0;<br />}<br />.revision-span:not(.revis

{<br />background: wheat;}<br />#passageStart {<br />background: wheat;}

I am assuming that your resetting the default layout of the page using CSS like this: <br />/* Reset page layout */<br />body {<br />margin: 4em;<br />}<br />#sidebar {&l

Is there a better way to set the location of elements on a page so they're where you want them in relation to a background, regardless of differing user resolutions? Currently I'm running my tests off

And then use CSS to position the DIV instead of the <<choice>> macros: <br />#passages .choices {<br />position: fixed;<br />bottom: 3em;<br />}<br />#passage

But any declarations made with those either does what I've read it says it will do, changes all the links for every passage or all the links related to a single passage, which works wonderfully...If y

2b. Or use some CSS to add padding to the right side of each <<choice>> macro: <br />#passages .choice {<br />padding-right: 2em;<br />}<br />

You could try something like the following CSS, changing colours and font as you wish. <br />#passages button {<br />background-color: blue;<br />border-color: blue;<br />color

#passages {

(note: you can also add style rules for the "poem" and "one" classes.) <br />#passages .poem .two {padding-left: 2em;}<br />#passages .poem .three {padding-left: 4em;}&

Place the following CSS in your stylesheet passage: <br />#passages .pretty {<br />color:blue;<br />background-color:gray<br />}<br />