Responsive Design CSS

responsive.css

a { color: #669; text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font: 36px; }
#page { padding: 5px; width: 960px; margin: 20px auto; }
#header { height: 180px; }
#content { width: 630px; float: left; }
#sidebar { width: 300px; float: right; }
#footer { clear: both; } 
/* for 980px or less */
@media screen and (max-width: 980px) {
	#page { width: 99%; }
	#content { width: 67%; }
	#sidebar { width: 30%; }
}
/* for 700px or less */
@media screen and (max-width: 700px) {
	#content { width: auto; float: none; }
	#sidebar { width: auto; float: none; }
}
/* for 480px or less */
@media screen and (max-width: 480px) {
	#header { height: auto; }
	h1 { font-size: 24px; }
	#sidebar { display: none; }
}
#content { background: #f8f8f8; }
#sidebar { background: #f0efef; }
#header, #content, #sidebar { margin-bottom: 5px; }
#page, #header, #content, #sidebar, #footer { border: solid 1px #ccc; }