Cacher is the code snippet organizer for pro developers

/*assegno le stesse proprietà che ho usato per il layout statico, sapendo che la pagina si vedrà bene su schermi da 960px in su*/
body {
	width: 960px;
	margin: auto;
}
nav {
	width: 200px;
	margin-right: 40px;
}
aside {
	width: 160px;
	margin-left: 60px;
}
section {
	width: 500px;
}
footer > div {
	width: 300px;
}
footer > div:nth-child(2) {
	margin-right: 30px;
	margin-left: 30px;
}
nav, aside, section {
	float: left;
}
footer {
	clear: both;
}
footer > div {
	float: left;
}
header {
	margin-top: 20px;
}
header, nav, section {
	margin-bottom: 30px;
}
article, footer {
	margin-bottom: 20px;
}
h1, h2, h3, li, p, small {
	padding: 10px;
}
img {
	margin-right: 10px;
}
article {
	height: 220px;
}
footer > div {
	height: 240px;
}
footer {
	height: 240px;
}
header {
	background-color: #FCF;
}
nav {
	background-color: #CCF;
}
article {
	background-color: #9F9;
}
aside {
	background-color: #FC9;
}
footer div {
	background-color: #9CC;
}
a {
	text-decoration: none;
	color: inherit;
}
/*ora restringo la finestra del browser a 768 pixel e faccio gli aggiustamenti necessari*/
@media screen and (max-width : 768px) {
body {
	width: 768px;
}
nav {
	float: none;
	width: 768px;
}
nav > ul > li > ul {
	display: none;
}
nav > ul > li:hover > ul {
	display: block;
}
nav > ul > li {
	position: relative;
}
nav > ul > li:nth-child(1) > ul {
	position: absolute;
	left: 130px;
	top: 0;
	color: #F66;
}
nav > ul > li:nth-child(2) > ul {
	position: absolute;
	left: 130px;
	top: -80%;
	color: #FC3;
}
nav > ul > li:nth-child(3) > ul {
	position: absolute;
	left: 130px;
	bottom: 0;
	color: #C3C;
}
footer > div {
	width: 230px;
}
footer > div:nth-child(2) {
	margin-right: 13px;
	margin-left: 13px;
}
}
/*ora restringo la finestra del browser a 480 pixel e faccio gli aggiustamenti necessari*/
 @media screen and (max-width : 480px) {
body {
	width: 480px;
}
nav {
	width: 480px;
}
section {
	width: 480px;
	float: none;
}
aside {
	float: none;
	width: 480px;
	margin-left: 0;
	margin-bottom: 20px;
}
footer > div {
	width: 140px;
}
footer > div:nth-child(2) {
	margin-right: 10px;
	margin-left: 10px;
}
/*ora restringo la finestra del browser a 320 pixel e faccio gli aggiustamenti necessari*/
 @media screen and (max-width : 320px) {
 body {
	 width: 320px;
}
nav {
 	width:320px;
}
nav > ul > li:nth-child(1) > ul {
 	left: 100px;
}
nav > ul > li:nth-child(2) > ul {
	left: 100px;
}
nav > ul > li:nth-child(3) > ul {
 	left: 100px;
}
section {
 	width: 320px;
}
article {
	padding-bottom: 80px;
}
aside {
	width:320px;
}
footer > div {
	float:none;
	width: 320px;
	margin-bottom: 20px;
}
footer > div:nth-child(2) {
 	margin-right:0;
 	margin-left: 0;
}
}