/*****************resets ***************/

* {
	margin:0;
	padding:0;
	border:0;
	font-size:100%;
	-moz-box-sizing:border-box;
	-webkit-border-box:border-box;
	box-sizing:border-box;	
}

/* for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display:block;	
}

#main-header, #main-footer, .col1of4, .col2of4, .col3of4, .col4of4 {
	background:cyan;	
	padding:1%;
	margin:1%;
}

 #content {
		overflow:hidden; 
 }
 
 /***************  nav *******************/
 #main-nav {
	 overflow:hidden;
 }
 
 #main-nav li {
		list-style-type:none;
		background:gray;
		padding:1%; 
 }
 
#main-nav li a {
	  text-decoration:none;
}

/* Portrait Tablet */
@media only screen and (min-width:500px) {
 .col1of4, .col2of4, .col3of4, .col4of4 {
	 width:48%;
	 float:left;
 }
 
 /************ nav ****************/
 #main-nav {
	overflow:hidden; 
 }
 #main-nav li {
		width:10%;
		float:left; 
 }
 
 }
	 
/*larger tablets and desktop */
@media only screen and (min-width:980px) {
	.col1of4, .col2of4, .col3of4, .col4of4 {
		 width:23%;
	 }
}