Ok, I think I got it good enough in a browser.
That's great!
In answer to your questions above (which may help):
1. How do I keep the right edge of the rotating images in line with the right edge of the separator and the nav items?
Make sure that imagePadding="0", stagePadding="0" and imageHAlign="RIGHT".
2. The height of the JuiceBox area is too high. How can I make the height be only what it needs to be?
Reducing the gallery's height (in the embedding code) should help.
Unfortunately, I do not have a Windows Phone on which to test so I'm not sure what you're seeing.
Setting imageVAlign="TOP" may help (to at least ensure that the gallery image is always at the top of the page rather than being vertically centered within the container).
If you want your text to wrap around your gallery (floated to the right side of the page), then try something like the following code (again, with a 'Body text layout' of '1-column wide').
<script src="/gallery/jbcore/juicebox.js"></script>
<script>
new juicebox({
baseUrl: "/gallery/",
containerId : "juicebox-container",
galleryWidth: "400",
galleryHeight: "300",
backgroundColor: "#222222"
});
</script>
<div id="juicebox-container" style="width: 400px; height: 300px; float: right;"></div>
<p>Text goes here.</p>