[enuddleyarbl]

Originally Posted by JSWolf

One thing, don't use the margin shorthand. Use the separate margin lines such as margin-top: margin-right:. It's a lot easier to read the CSS that way.

As for div.poetry p, 3em is too large. Think of reading this on a small cell phone screen. You already have a 2em margin. 1em is better. Also, you don't need padding and you don't need left align.

blockquote.poetry {
  margin-top: 1em;
  margin-right: 0;
  margin-bottom: 1em;
  margin-left: 2em;
}
blockquote.poetry p {
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 1.5em;
  text-indent: -1.5em;
}
blockquote.poetry p.indented {
  margin-left: 2em;
}
blockquote.poetry p.first {
  margin-top: 1em;
}

I was playing with this stuff last night and found the same issues you mentioned. I went through and specified margin types and reduced the padding/indent to something more reasonable.

I also decided to set up div classes for poems, songs and letters. I'll use blockquotes for more generic blocks of quotes (<- )