I'm making an /*annotated*/ style.template.css document so I'll have the defaults the way I like them, so I won't keep forgetting how to control each thingy, and so things like input boxes will be ready to tweak rather than needing to be inserted each time.

However, I realized I have no idea what div#squiffy-container means! I tried changing their values to figure it out, but they made no difference to anything. I also threw in some <div> and other elements, but they all just acted like part of the section they were in.

Does anybody know? Thanks.

Looks like the basic structure of the page in Squiffy is:

• html
  • head
    • all the scripts and stuff
  • body
    • div#squiffy-container
      • div#squiffy-header
        • a.squiffy-header-link (the restart button)
      • div#squiffy
        • All the content gets added here once the script starts running

So I guess #squiffy-container will be in the background, entirely covered by the two divs that are inside it

Note that this will be different in preview and in the editor, because there's a different structure there (including #squiffy-editor as well), which is why it's hard to debug CSS there.