Use existing column CSS for screenshot placement

I was having sporadic trouble with image loading before. I think what was happening was sometimes the iphone_frame image loaded at different times between the other images, which was messing up the layout and putting the iphone frames all the way off to the right.

Rather than deal with fixing that custom CSS, I realized I should just be using the column classes I have elsewhere. To make that work I need to resize the mobile and desktop screenshots, so have replaced both of those with full-res versions again, and updated the proportions of the desktop screenshots with new images. I'll scale them down again in a future commit.

Also, ARGH at CSS and clearing floats. Because RDiscount automatically makes the wrapper <p> tags for my images, I can't add a clearfix class. Adding an empty div after seemed hacky, even if I put it in the Jekyll img tag. I couldn't find a better solution, so this will have to do for now. At some point I might want to switch to Kramdown, which lets you specify block attributes. http://stackoverflow.com/a/1633170/551814 is the CSS I used.
Re-shrink images to larger width for new layout