Changing my above CSS to the following should do what: <br />body.someclass #passage {<br />max-width: 80%;<br />}<br />

I see that I can change every passage with: #passage { max-width:80% }

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

#passage[name] a

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 />

You can use CSS to size the textarea like so: <br />#passages .textArea {<br />width: 600px;<br />height: 200px;<br />}<br />

canvas = document.querySelector(&quot;#passages .canvas&quot;);<br />if (canvas !== null) {<br />html2canvas(canvas, {<br />onrendered : function (canvas) {<br />docum

(note: I have included a commented copy of the original value for each property I changed) <br />#sidebar {<br />/* width: 12em; */<br />width: 20em;<br />}<br />#passage

All I want to do is make the sidebar wider and shift the main passage area over so they don't overlap. I can move and resize the text just fine, using a width value under #sidebar, but there's a 1 px

Actually, a duplicate #passages div in sugarcane sounds ideal! I was trying to figure out how to do just that by messing with the Sugarcane html file with no success.