/*
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;
		}
		
			
	}
	/* Beyond All Mobile Sizes, Tablet Portrait etc. */
	@media only screen and (min-width: 768px) {

			
	}
		
	/* Beyond standard 960 */
	@media only screen and (min-width: 960px) {
		
		body {
			font: 2em/1.5em Arial, sans-serif; /*base font-size of 14px (14/16 - lineheight based on 21px 1.5x14)*/
		}
			
	}
	
	/* now we're getting really big.. */
	@media only screen and (min-width: 1220px) {
				
			
	}
	
		/* go on then, one last query.. */
	@media only screen and (min-width: 1420px) {
				
		
	}