html * {
	margin: 0;
	padding: 0;
	color: #fff;
}


body   {background-color: transparent; color: transparent;
} 


}
p { padding: 0 0 0em 0; }
section, aside { display: block; }


body { 
	font: 100%/1.6 Helvetica, Arial, sans-serif; 
	background: transparent;
	font-size: .975em;
}

/* -- Top Status Bar --*/
body:before { 
	content: "";
	display: block;
	width: 100%;
	height: 0px;
	background-color: #323232;
	line-height: 0.0em;
	padding-top: 40px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	font-weight: bold;
}

#container {
	padding: 0em;
	background: rgba(00,0,0,.65);
	color: #FFFFFF;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

header {
	margin: 0 0 0em 0;
	padding: .0em;
	background: rgba(0,0,0,.70);
}

footer {
	margin: 0 0 0em 0;
	padding: .0em;
	background: black;
}


div[role="main"] section {
	margin: 0 0 0em 0;
	padding: .0em;
	background: #121212;
}

div[role="main"] aside p {
	margin: 0 0 0em 0;
	padding: .0em;
	background: transparent;
}

/* Media Queries -------------- */




/* iPhone, etc portrait ------Between 320 and 480------ */
@media only screen and (min-width: 320px) {
	
	body { background: grey; }
	body:before { content: ""; }
  	
}

/* iPhone, etc landscape -----Between 480 and 608----- */
@media only screen and (min-width: 480px) {	
	
	body { background: grey; }
	body:before { content: ""; }
  
}

/* iPad, tablets etc portrait -----Between 638 and 900---- */
@media only screen and (min-width: 638px) {    	
	
	body { 
		background: grey; 
		font-size: .975em;
	}
	
	body:before { content: "  "; }
	
	#container { padding: 0em; }
	
	header,
	footer,
	div[role="main"] section { padding: 0em; }
	
	div[role="main"] {
		overflow: auto;
		background: none;
	}
	
	div[role="main"] section {
		float: left;
		width: 50%;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		padding: .0em;
	}

	div[role="main"] aside {
		float: left;
		width: 50%;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		padding: 0 0 0 0em;
	}
	
 
}

/* Laptops, Desktops, etc -----Between 1024 and 1200------- */
@media only screen and (min-width: 1024px) {	
    	
	body { background: grey; }
	body:before { content: " ";}
	
	#container {
		
		max-width: 1024px;
		margin: 0 auto;

	}

}

/* Large Screen Laptops, Desktops, etc -----Greater than 1200------- */

@media only screen and (min-width: 1200px) {	
    	
	body { background: grey; }
	body:before { content: "  ";}
  
}