em based responsive line lengths with cascading breakpoints and stuff

style.css

/* 
* The basic idea:
* No more "mobile first", just take up the entire browser width when
* optimum line length gets near viewport width.
*/

body
{
	width: 100%;
}
@media only screen and (min-width: 47em) {
	body
	{
		width: 44em;
		max-width: 100%;
		margin: 17px auto; /* Centre the body */
		padding: 20px;
	}
}

/* The idea: Specify *everything* with ems (text-centric units) 'cos most content on the web is text */
/* Usage:
* Try loading http://test.waterpigs.co.uk and make the text very very big.
* Only really works in FF at the mo, but webkit works if you persuade it
* to redraw by fiddling with the window width
*/