static.css

/*   Resposive design Wireframe by @mobifreaks for www.mobifreaks.com 
	Last Update Feb 2, 2012
*/
body{
	margin:0;
	padding:0;
	color:#000;
	background:#1d1d1d;
}
.clear{	clear:both; }/* clear's float from both side */
.wrap{
	width:1200px; /* required */
	padding:40px;
	background:#fff;
	margin:0 auto;
}
.wrap,
header,
footer,
.col1,
.col2{
	/* for smooth animated effect */
	transition:all .2s linear;
	-moz-transition:all .2s linear;/* firefox */
	-webkit-transition:all .2s linear; /* safari and chrome */
	-o-transition:all .2s linear; /* opera */
	-ms-transition:all .2s linear;
}
header,
footer{
	height:150px; /* fixed just for demo */
}
header{
	margin:0 0 40px 0;
}
footer{
	margin:40px 0 0 0;
}
header,
footer,
.col1,
.col2{
	/* play with this styling or just remove it */
	background:#b1eaff;
	-moz-border-radius:.5em;
	-webkit-border-radius:.5em;
	-o-border-radius:.5em;
	-khtml-border-radius:.5em;
	border-radius:.5em;
	padding:10px;
}
.col1{
	width:820px; /* required */
}
.col2{
	width:300px; /* required */
	margin:0 0 0 40px;	/* change the margins if you have changed float:left to float:right */
}
.col1,
.col2{
	float:left; /* reverse the polarity, if you want your sidebar on left make it float:right [don't forget to reverse the margins to0]*/
	height:500px;
}
@media all and (max-width:1280px) and (min-width:1024px){
	.wrap{
		width:984px; /* required */
		padding:20px;
	}
	header{
		margin:0 0 20px 0;
	}
	footer{
		margin:20px 0 0 0;
	}
	.col1{
		width:624px; /* required */
	}
	.col2{
		width:300px; /* required */
		margin:0 0 0 20px;
	}
}
@media all and (max-width:1024px) and (min-width:800px){
	.wrap{
		width:760px; /* required */
		padding:20px;
	}
	header{
		margin:0 0 20px 0;
	}
	footer{
		margin:20px 0 0 0;
	}
	.col1{
		width:400px; /* required */
	}
	.col2{
		width:300px; /* required */
		margin:0 0 0 20px;
	}
}
@media all and (max-width:800px) and (min-width:640px){
	.wrap{
		width:600px; /* required */
		padding:20px;
	}
	header{
		margin:0 0 20px 0;
	}
	footer{
		margin:20px 0 0 0;
	}
	.col1,
	.col2{
		width:580px; /* required */
		float:inherit;
		margin:0 0 20px 0;
	}
}
@media all and (max-width:640px) and (min-width:480px){
	.wrap{
		width:440px; /* required */
		padding:20px;
	}
	header{
		margin:0 0 20px 0;
	}
	footer{
		margin:0;
	}
	.col1,
	.col2{
		width:420px; /* required */
		float:inherit;
		margin:0 0 20px 0;
	}
}
@media all and (max-width:480px) and (min-width:320px){
	.wrap{
		width:300px; /* required */
		padding:10px;
	}
	header{
		margin:0 0 10px 0;
	}
	footer{
		margin:0;
	}
	.col1,
	.col2{
		width:280px; /* required */
		float:inherit;
		margin:0 0 10px 0;
	}
}
@media all and (max-width:320px) and (min-width:220px){
	.wrap{
		width:200px; /* required */
		padding:10px;
	}
	header{
		margin:0 0 10px 0;
	}
	footer{
		margin:0;
	}
	.col1,
	.col2{
		width:180px; /* required */
		float:inherit;
		margin:0 0 10px 0;
	}
}