/*
we kick things off, mobile first, with the most basic styles for smaller viewports
IE6-8 will be delivered this setup too - they'll ignore the media queries, so you could perhaps add a max-width to the .wrapper just for IE6-8 (the classes are already hooked up to the html element)
*/


/*some base rules - box-sizing, because it's awesome, and fluid images*/
* { 
	-moz-box-sizing: border-box; 
	-webkit-box-sizing: border-box; 
	box-sizing: border-box; 
	}

img {
	max-width: 100%;
}

/*main structure*/
html {
	font-size: 100%;
	background: #f2594b;
}

body {
	font: 0.875em/1.5em Arial, sans-serif; /*base font-size of 14px (14/16 - lineheight based on 21px 1.5x14)*/
	color: #201e1e;
}

a {
	color: #fff;	
}

a:hover {
	text-decoration: none;	
}

p {
	margin: 0 0 1.5em 0;
}

ol, ul {
	padding: 0;
}

h1, h2, h3 {
	margin: 0 0 1.3em 0;
}

h2 {
	font-size: 1.7em;
}

h1.logo {
	margin: 0;
}

h1.logo a {
	text-decoration: none;
}

/*we need to hide the main nav too, because the select is currently in use*/
nav.primary ul {
	display: none;		
}

nav.primary select {
	width: 100%;
	height: 1.5em;
}

/*let's structure and color-code our main elements, so we can see what's going on*/

.wrapper {
	width: 100%;
	max-width: 2000px;	/*well, we don't want to get stupid now, eh?*/
	margin: 0 auto;
}

header,
nav.primary,
section.content,
aside,
footer {
	float: left;
	width: 100%;
	padding: 1.5em 4%;
	
	/*just to pretty things up while we're demoing*/
	-webkit-transition: all 0.4s ease-out;
	-moz-transition: all 0.4s ease-out;
	-o-transition: all 0.4s ease-out;
	-ms-transition: all 0.4s ease-out;
	transition: all 0.4s ease-out;
}

header {
	background: #63a69f;
}

nav.primary {
	background: #f2e1ac;
}

section.content {
	background: #f2836b;
}

aside {
	background: #f2594b;
}

footer {
	background: #cd2c24;
}

/*articles*/
article {
	padding: 0 0 1.5em;
	margin: 0 0 2.5em;
	border-bottom: 1px solid #e57057;
}

/*footer navs*/
footer nav {
	width: 100%;
}

footer nav ul li a {
	display: block;
	text-decoration: none;
	border-bottom: 1px solid #f2594b;
	line-height: 3em;
}

footer nav ul li:last-child a {
	border: none;
}

footer nav ul li a:hover {
	background: #f2594b;
	padding: 0 1em;
}




	/* -------------- media queries*/
	
	/* Up to Mobile Landscape Size */
	@media only screen and (max-width: 479px) {}

	/* Upwards of Mobile Landscape Size  */
	@media only screen and (min-width: 480px) {
		
		nav.primary select {
			display: none;
		}
		
		nav.primary ul {
			display: block;		
		}
		
		nav.primary ul,
		nav.primary ul li {
			margin: 0px;
		}
		
		nav.primary ul li {
			display: inline;
			float: left;
			position: relative;
			background: #e2d098;
		}
		
		nav.primary ul li a {
			display: inline-block;
			line-height: 3em;
			color: #fff;
			padding:  0 1em;
			text-decoration: none;
			font-weight: bold;
		}
		
		nav.primary ul li a:hover {
			background: #424242;
			cursor: pointer;
		}
		
		/*sub menu*/
		nav.primary ul ul {
			opacity: 0; 
		  	filter: alpha(opacity=0); 
		
			position: absolute;
			top:100%;
			left: 0;
			z-index: 999;
			background: #000;;
			
			height: 0px;
			overflow: hidden;
			
			width: 140%;
			
			-webkit-transition: opacity 0.4s ease-out;
			-moz-transition: opacity 0.4s ease-out;
			-o-transition: opacity 0.4s ease-out;
			-ms-transition: opacity 0.4s ease-out;
			transition: opacity 0.4s ease-out;
			
			-webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
		    -moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
		    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);	
		}
		
		nav.primary ul li span {
			display: none;
		}
		
		nav.primary ul li:hover ul {
			opacity: 10; 
		  	filter: alpha(opacity=100); 
		  	
			height: auto;
			overflow: auto;
		}
		
		nav.primary ul ul li {
			float: none;
			display: list-item;
			border-bottom: 1px solid #383737;
		}
		
		nav.primary ul ul li a {
			display: block;
			line-height: 3em;
			text-transform: none;
			background: #323232;
		}
		
		nav.primary ul li:hover > a {
			background: #424242;
		}
		
		/*footer navs*/
		footer nav {
			width: 50%;
			float: left;
		}
		
		footer nav ul li a {
			display: inline-block;
		}

		
	}
	/* Beyond All Mobile Sizes, Tablet Portrait etc. */
	@media only screen and (min-width: 768px) {

		/*structure*/
		
		header,
		nav.primary,
		section.content,
		aside,
		footer {
			padding: 1.5em 3%;
		}

		section.content {
			width: 60%;
		}

		aside {
			width: 40%;
		}
		
		footer nav {
			width: 25%;
		}
		
	}
		
	/* Beyond standard 960 */
	@media only screen and (min-width: 960px) {
		

		/*structure*/

		header,
		nav.primary,
		section.content,
		aside,
		footer {
			padding: 1.5em 2%;
		}
		
		section.content {
			width: 50%;
		}

		aside {
			width: 25%;
		}

		footer {
			width: 25%;
		}
		
		footer nav {
			width: 100%;
		}
		
		footer nav ul li a {
			display: block;
		}
		
	}
	
	/* now we're getting really big.. */
	@media only screen and (min-width: 1220px) {
				
		body {
			font: 1em/1.5em Arial, sans-serif; /*time to make things a wee bit bigger*/
		}
		
		footer {
			width: 15%;
		}

		nav.primary {
			width: 10%;
			padding: 1.5em 0;
		}
		
		nav.primary ul li{
			width: 100%;	
			background: none;		
		}
		
		nav.primary ul > li a {
			display: block; 			
		}
		
		/*sub menu*/
		nav.primary ul ul {
			opacity: 0; 
		  	filter: alpha(opacity=0); 
		
			position: absolute;
			top:0;
			left: 100%;
			z-index: 999;
			background: #000;;
			
			height: 0px;
			overflow: hidden;
			
			width: 200%;
		}
		
	}
	
		/* go on then, one last query.. */
	@media only screen and (min-width: 1420px) {
				
		body {
			font: 1.1em/1.5em Arial, sans-serif; /*even bigger, why not?*/
		}
		
		
		/*just to demo what we *could* do with columns*/
		article .meat {
			 -webkit-column-count: 2;
			 -webkit-column-gap: 2%;
			 -moz-column-count: 2;
			 -moz-column-gap: 2%;
			 column-count: 2;
			 column-gap: 2%;
		}
	
	}