* {
	box-sizing: border-box;		
	}

html, body {
	min-width:100%;}
a {text-decoration:none;}

.main-header {
	background:linear-gradient(#3f94bf, #246485);
	padding:5px;
	text-align:center;
	color:white;
	text-shadow:#222 0 -1px 1px;
	position:fixed;
	width:100%;
	left:0;
	transition: all 0.3s ease;
	}
	
	.main-header a {
		position:absolute;
		left:20px;
		top:20px;
		color:#FFF;
		font-size:32px;
		}
		
		.page-wrap {
			float:right;
			width:100%;
			transition: width 0.3s ease;
			}
			
		.main-nav {
			position:fixed;
			top:0;
			width:0;
			height:100%;
			background: #3b3b3b;
			overflow-y:auto;
			
			}	
			.main-nav a {
				display:block;
				background: linear-gradient(#3e3e3e, #383838);
				border-top: 1px solid #2e2e2e;
				border-bottom: 1px solid #2e2e2e;
				color:#FFF;
				padding: 15px;}
				
			.main-nav a:hover, main-nav a:focus {
				background: linear-gradient(#484848, #383838);}
				
			.main-nav:after {
				content:"";
				position:absolute;
				top: 0;
				right:0;
				height:100%;
				width:34px;
				background: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,0.4)); }	
			.content {
				padding: 100px 20px 100px 20px;
				}	
			.close-menu {
				display:none;}	
			#main-nav:target {
			width:20%;}	
			
			#main-nav:target + .page-wrap {
				width: 80%;}				
			#main-nav:target + .page-wrap .open-menu {
				display:none;}	
				
			#main-nav:target + .page-wrap .close-menu {
				display:block;}			
			#main-nav:target + .page-wrap .main-header {
				width:80%;
				left:20%;
				}	
				
		 img[alt="CSS Validate"], img[alt="html5 Validate"] {
	 width:44px;
	 height:15px;
	display:inline-block;
	
	 margin: 10px auto;
	 text-align:center;
	 }
	 div.val {
		 width:100%;
		 margin:0 auto;
		 text-align:center}