@media queries added

First attempt with @media queries after being inspired at this year's Web Directions.

It's still pretty basic, but it works (mostly). You drag the width of your supported browser (Safari for example) until it's a bit less than the 960px grid used here, and the sidebar will drop down to below the content as the whole design takes on a fluid width.

Try it and see!

Here's the css code, in may cases overwriting an existing style (so put this at the bottom of your stylesheet):

/***************************************************************
 *
 * For skinny screens XD
 *
 ***************************************************************/
@media only screen and (max-width: 960px), only screen and (max-device-width: 480px) {
	.outer {
		width: 100%;
	}
	.widthlimiter {
		width: 100%;
	}
	#menu{
		width: 100%
	}
	#content{
		width: 90%;
		float:none;
		margin:0 auto;
	}
	#sidebar{
		width:90%;
		float:none;
		margin:0 auto;
		padding:0;
	}
	body.home #content {
		width: 100%;
		padding:0;
	}
	#cta1, #cta2, #cta3{
		margin: 0;
	}
	div#content div.cta {
		width:90%;
		float: none;
		margin:5px auto;
	}
}

Now, there is a trick to getting your iPhone to display this at a nice, readable width. You'll need to add this line to your head:
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />

Once you have done that, you'll end up with something like this: