@charset "utf-8";
/* CSS Document */

/******************** RESETS ***********************/
* {
	margin:0;
	padding:0;
	border:0;
	font-size:100%;
	font:inherit; /* this is to inherit css properties from the parent element */
	vertical-align:baseline; /* images will align to the baseline, descenders will be below the baseline that the image sits on */
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;		
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display:block;
}	

/****************** STRUCTURE **********************/
#main-header, #main-footer {
	text-align:center;
	color:#FFF;	
}

hgroup {
	/*display:block;	*/
	padding-top:1%;
}

#main-header {
	background-color:skyblue;	
}

#main-footer {
	background-color:pink;	
	padding:1%;	
}

#content {
	width:95%;
	max-width:960px;
	margin:auto;
	padding:1%;
	overflow:hidden;
	background-color:rgba(255,255,255,.5);		
}

.col1of2 {
	padding:1%;
	margin:1%;
}

/*#main-footer {
	clear:both;	
}*/

/*********** NAV **************/
#main-nav {
	background-color:pink;	
}

#main-nav li {
	list-style-type:none;
	display:block;
	padding:1%;	
}

#main-nav li a {
	text-decoration:none;
	color:#FFF;	
}

/************ FONTS *************/
h1 {
	font-size:2em;
	margin-top:.4em;
	margin-bottom: .2em;
	color:rgb(59,49,64);		
}

h2 {
	font-size:1.5em;
	color:rgb(59,49,64);
	margin-bottom:.4em;
}

#main-header h1 {
	font-size:2.5em;
}

#main-header h2 {
	font-style: italic;
	color:#505050;	
}

p {
	padding-bottom:1em;
	line-height:1.5em;	
}

/********* MEDIA QUERIES *********/
/* tablet */
@media all and (min-width:37.5em) {
	#main-nav {
		overflow:hidden;	
		
	}
	
	#main-nav li {
		float:left;
		width:16%;	
	}
	
	body {
		background: url("../images/skulls.png") repeat;	
	}
	
	.col1of2 {
		width:48%;
		float:left;	
	}	
	
}