It generally looks great, and the css is much better than many commercial books I've seen. But here are a few observations if you want to tweak it.
1) Using absolute values for the cover image width and height causes its aspect ratio to change if the viewing window is smaller than the supplied values. Since the bulk of devices have a 4:3 aspect ratio and your picture is the same proportions it's often safe to leave out the width attribute and simply use height: 100%. But the best method is to wrap the image in some svg to ensure that any scaling is done proportionally.
Code:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 600 800" preserveAspectRatio="xMidYMid meet">
<image width="600" height="800" xlink:href="images/TWPCover.jpg" />
</svg>
2) Your idea of wrapping each element (toc, preface, body and colophon) in its own div is a good one. Unfortunately, you've run into a bug in ADE in which margin-top values are disregarded after a css pagebreak. To get your top margin to appear you should use the padding value instead:
Code:
div.section {
margin: 0;
padding: 1em 0 0 0;
page-break-after: always;
} /* Sets top margin and page break for preface and chapters */
Personally, I'd set more space above and below the headings, but that's a matter of style.
3) You set the body margin to 2%. This will scale as the
text is zoomed up viewport width changes [edit], potentially leading to margins that are too large. The page margins are the one portion that are better done using fixed lengths. I find that margin-left/right values of 12pt are enough the give the text some breathing room on my 505, and they're also enough so that the ADE page number on the right doesn't encroach on the text. To set the margins for the page top and bottom you can use the @page directive instead (the body top and bottom margins will apply to the entire text).
4) I see you defined a class for a flush paragraph but didn't use it. Personally I really think that setting the first paragraph of a section flush looks a lot better.
5) Although most well-behaved readers will respect the css pagebreaks you insert, some don't (they don't show up in the calibre reader for example). The only sure-fire way to make sure the reader puts in a pagebreak is to break the text into separate flows (separate xhtml files).