* {
	outline:			none !important;
}

body {
	background:			#eee;
	color:				#111;
	position:			absolute;

	width:				100%;
	height:				100%;
	margin:				0;

	font-family:		"Open Sans", 'lucida grande', 'Segoe UI', 'Arial', verdana, 'lucida sans unicode', tahoma, sans-serif;
	font-size:			0;
}

a {
	color:				inherit;

	text-decoration:	none;
}

article {
	width:				1000px;
	margin:				auto;
}

body > nav {
	background:			#28a;
	color:				#fff;

	padding:			5px 0;
}

body > nav > article > a {
	display:			inline-block;
	position:			relative;

	top:				-2px;
	margin:				0;

	font-size:			20px;
	font-weight:		100;
}

body > nav > article > aside {
	display:			inline-block;

	float:				right;
}

body > nav > article > aside > a {
	display:			inline-block;

	margin-left:		50px;
	padding:			3px 0;

	font-size:			14px;
}

body > nav > article > aside > a:hover {
	color:				#ddd;
}

body > nav > article > aside > a.live:after {
	background:			#f22;
	content:			'';
	display:			inline-block;
	position:			relative;

	top:				-5px;
	left:				5px;
	width:				5px;
	height:				5px;

	border-radius:		50%;
	animation:			live-animation 1s infinite;
}

@keyframes live-animation {
	0%, 50% {
		background:		#d44;
	}
	51%,100% {
		background:		transparent;
	}
}

body > header {
	background:			#28a url('../images/background.png') no-repeat center center;
	background-size:	cover;
	position:			relative;

	width:				100%;
	padding:			100px 0 0 0;

	text-align:			center;
}

body > header > h1 {
	color:				#fff;

	margin:				0;

	font-size:			50px;
	font-weight:		100;
	text-shadow:		5px 0 rgba(0,0,0,.1);
}

body > header > a {
	background:			transparent;
	color:				#fff;
	display:			inline-block;

	margin:				50px;
	padding:			15px 15px 15px 39px;

	border:				none;
	border-radius:		2px;
	box-shadow:			5px 5px 0 0 rgba(0,0,0,.1); 
	font-size:			16px;
}

body > header > a.download {
	background:			#2a6 url('../images/download.png') no-repeat 10px center;

	border:				1px solid rgba(0,0,0,.25);
}

body > header > a.source {
	background:			#28a url('../images/source.png') no-repeat 10px center;

	border:				1px solid rgba(0,0,0,.1);
}

body > header > a:active {
	position:			relative;

	top:				1px;
	left:				1px;

	box-shadow:			4px 4px 0 0 rgba(0,0,0,.1); 
}

body > header > div {
	background:			#fff;
	position:			relative;

	margin-top:			200px;
	padding-top:		200px;
}

body > header > div > img {
	display:			block;
	position:			absolute;

	top:				-200px;
	left:				50%;
	width:				800px;
	height:				auto;
	margin-left:		-400px;

	border-radius:		5px;
	box-shadow:			0 0 5px 1px rgba(0,0,0,.5); 
}

body > header > div > p {
	color:				#666;

	width:				800px;
	margin:				auto;
	padding:			50px;

	font-size:			30px;
	text-align:			justify;
}

body > section {
	position:			relative;

	width:				100%;
	margin:				50px 0;
}

body > section:after {
	content:			'';
	display:			block;

	clear:				both;
}

body > section:nth-child(even) {
	text-align:			right;
}

body > section > article {
	border-bottom:		1px solid rgba(0,0,0,.1);
}

body > section > article > h3 {
	color:				#444;
	display:			block;

	margin:				0;

	font-size:			50px;
	font-weight:		100;
}

body > section > article > p {
	color:				#666;
	display:			block;

	width:				500px;
	margin:				20px 0;

	font-size:			20px;
	font-weight:		normal;
	float:				left;
}

body > section:nth-child(even) > article > p {
	float:				right;
}

body > section > article > p > a.github {
	background:			#ddd url('../images/github.png') no-repeat 20px center;
	color:				#111;
	display:			block;

	width:				200px;
	margin:				100px auto;
	padding:			10px 0;

	border:				1px solid rgba(0,0,0,.1);
	border-radius:		2px;
	box-shadow:			5px 5px 0 0 rgba(0,0,0,.25); 
	font-size:			16px;
	text-align:			center;
}

body > section > article > p > a.github:active {
	position:			relative;

	top:				1px;
	left:				1px;

	box-shadow:			4px 4px 0 0 rgba(0,0,0,.25); 
}

body > section > article > img {
	display:			block;

	width:				500px;
	height:				300px;
}

body > section > article > img.rounded {
	border-radius:		0 75px 0 0;
}

body > section > article > img.octocat {
	width:				500px;
	height:				auto;
}

body > footer {
	background:			#ddd;

	padding:			50px 0;
}

body > footer > article > a {
	color:				#111;

	margin-right:		50px;
	padding:			5px 0;

	font-size:			14px;
}

body > footer > article > a:hover {
	color:				#666;
}