body,h1,h2,h3,h4,h5,h6,div,p,input,textarea,button,select,option,a,img,pre {
	margin: 0;
	padding: 0;
	font-size: 100%;
	font-family: inherit;
	font-weight: inherit;
	border: 0;
	outline: none;
}

pre {
	font-family: "Bitstream Vera Sans Mono", "Droid Sans", "Lucida Console", monospace;
	font-size: 80%;
}

ol,ul {
	margin: 0;
	padding: 0;
	list-style-position: inside;
}

li > ol, li > ul {
	padding: 0 0 0 1em;
}

@font-face {
	font-family: 'ImpactLabelReversedRegular';
	src: url('resources/Impact_label_reversed.eot');
	src: local('Impact Label Reversed Regular'), local('ImpactLabelReversed'), url('resources/Impact_label_reversed.ttf') format('truetype');
}


/* Main body elements ******************************************************* */

body {
	font-family: "Trebuchet MS", "Trebuchet", sans-serif;
	font-size: 12pt;
	background: #444 url('resources/background.png');
	background-image: -moz-linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0) 400px), url("resources/background.png");
	background-image: -webkit-gradient(linear, left top, left 400, from(rgba(0,0,0,0.5)), to(rgba(0,0,0,0))), url("resources/background.png");
}

#header, #body, #footer {
	margin: 0 15%;
	border: solid #222;
	border-width: 0 2px;
	-moz-box-shadow: 0 0 32px #000;
	-webkit-box-shadow: 0 0 32px #000;
	box-shadow: 0 0 32px #000;
}

@media (max-width: 800px) {
	#header, #body, #footer {
		margin: 0;
	}
}

#header {
	background: #693;
	background-image: url('resources/dots.png');
	background-image: url('resources/dots.png'), -moz-radial-gradient(center 150%, cover, rgba(0,0,0,0), rgba(0,0,0,0) 60%, rgba(0,0,0,0.5)), -moz-linear-gradient(top, #693, #360);
	background-image: url('resources/dots.png'), -webkit-gradient(linear, left top, left bottom, from(#693), to(#360));
	padding: 24px;
	color: #df9;
	text-align: center;
	font-size: 400%;
	text-shadow: 1px 1px 2px #000;
	line-height: 50%;
	font-family: "ImpactLabelReversedRegular", serif;
	margin-top: 8px;
	border-top-width: 2px;
	-moz-border-radius: 8px 8px 0 0;
	-webkit-border-top-left-radius: 8px;
	-webkit-border-top-right-radius: 8px;
	border-radius: 8px 8px 0 0;
}

#header a {
	color: inherit;
	text-decoration: none;
}

#body {
	background: #eee;
	padding: 8px;
}

#footer {
	background: #222;
	background-image: url('resources/dots.png');
	background-image: url('resources/dots.png'), -moz-radial-gradient(center 150%, cover, rgba(0,0,0,0), rgba(0,0,0,0) 60%, rgba(0,0,0,0.5)), -moz-linear-gradient(top, #333, #111);
	background-image: url('resources/dots.png'), -webkit-gradient(linear, left top, left bottom, from(#333), to(#111));
	font-size: 80%;
	color: #888;
	text-shadow: 1px 1px 2px #000;
	padding: 16px 16px 24px;
	-moz-border-radius: 0 0 8px 8px;
	-webkit-border-bottom-left-radius: 8px;
	-webkit-border-bottom-right-radius: 8px;
	border-radius: 0 0 8px 8px;
	margin-bottom: 32px;
	border-bottom-width: 2px;
}

#footer .footerOne, #footer .footerTwo, #footer .footerThree {
	display: inline-block;
	width: 31%;
	vertical-align: top;
	padding: 0 1%;
}

#footer .footerThree {
	text-align: justify;
}

#footer h1 {
	font-family: "ImpactLabelReversedRegular", serif;
	font-size: 150%;
	color: white;
	margin: 0 0 0.5ex;
}

#footer a {
	color: #ccc;
	text-decoration: none;
	text-shadow: 0 0 2px rgba(255,255,255,0.25);
}

#footer a:hover {
	color: #fff;
	text-decoration: none;
}

/* General markup *********************************************************** */

h1 {
	
}

h1 a {
	color: inherit;
	text-decoration: none;
}

#body > h1 { /* Used for "archived" etc. headings */
	text-align: center;
	font-size: 100%;
	color: #693
}

.article {
	margin: 0 0 4em;
}

.article .header .time {
	float: right;
	padding: 0.5em 0 0;
	color: #888;
	font-size: 80%;
}

.article .header h1, .article .footer {
	background: #222;
	color: #fff;
	-moz-box-shadow: 2px 2px 4px rgba(0,0,0,0.5);
	-webkit-box-shadow: 2px 2px 4px rgba(0,0,0,0.5);
	box-shadow: 2px 2px 4px rgba(0,0,0,0.5);
	text-shadow: 1px 1px 2px #000;
}

.article .header h1 {
	font-family: "ImpactLabelReversedRegular", serif;
	font-size: 150%;
	width: auto;
	padding: 1px 96px 4px 48px;
	display: inline-block;
	-moz-border-radius: 4px 4px 0 0;
	-webkit-border-top-left-radius: 4px;
	-webkit-border-top-right-radius: 4px;
	border-radius: 4px 4px 0 0;
	background-image: url('resources/dots.png');
	background-image: url('resources/dots.png'), -moz-radial-gradient(center 150%, cover, rgba(0,0,0,0), rgba(0,0,0,0) 60%, rgba(0,0,0,0.5)), -moz-linear-gradient(top, #333, #111);
	background-image: url('resources/dots.png'), -webkit-gradient(linear, left top, left bottom, from(#333), to(#111));
}

.article > .content, #respond, .navigation {
	padding: 16px 8px 1px;
	-moz-box-shadow: inset 0 0 16px rgba(0,0,0,0.75), 2px 2px 4px rgba(0,0,0,0.5);
	-webkit-box-shadow: inset 0 0 16px rgba(0,0,0,0.75), 2px 2px 4px rgba(0,0,0,0.5);
	box-shadow: inset 0 0 16px rgba(0,0,0,0.75), 2px 2px 4px rgba(0,0,0,0.5);
	background: #222;
	background-image: url('resources/dots.png');
	background-image: url('resources/dots.png'), -moz-linear-gradient(top, #111, #333);
	background-image: url('resources/dots.png'), -webkit-gradient(linear, left top, left bottom, from(#222), to(#333));
	color: white;
	-moz-border-radius: 0 4px;
	-webkit-border-top-right-radius: 4px;
	-webkit-border-bottom-left-radius: 4px;
	border-radius: 0 4px;
}

@media (min-width: 1600px) {
	.article .content {
		-moz-column-count: 2;
		-webkit-column-count: 2;
		column-count: 2;
	}
}

@media (min-width: 2400px) {
	.article .content {
		-moz-column-count: 3;
		-webkit-column-count: 3;
		column-count: 3;
	}
}

.article .content h1, .article .content h2, .article .content h3 {
	font-weight: bold;
	color: #693;
}

.article .content h1 {
	font-size: 130%;
}

.article .content h2 {
	font-size: 120%;
}

.article .content h3 {
	font-size: 110%;
}

.article .content p {
margin: 0 0 1em;
}

.article .content .screenshots {
	text-align: center;
}

.article .content .screenshots img {
	margin: 8px;
	vertical-align: bottom;
	padding: 8px;
	border: solid 1px #111;
	background: white;
}

.article .content pre {
	background: #222;
	background-color: rgba(0,0,0,0.75);
	margin: 0 0 1em;
	border: solid 1px #111;
	overflow-x: auto;
	padding: 8px;
	color: #ccc;
}
.article .content a, #respond a, .comments a, .navigation a {
	color: #693;
	text-decoration: none;
}

.article .content a:hover, #respond a:hover, .comments a:hover, .navigation a:hover {
	text-decoration: none;
	color: #9c6;
}

.article .footer {
	padding: 4px 24px 4px 0;
	text-align: right;
	-moz-border-radius: 0 0 4px 4px;
	-webkit-border-bottom-left-radius: 4px;
	-webkit-border-bottom-right-radius: 4px;
	border-radius: 0 0 4px 4px;
	color: #666;
	font-size: 80%;
	display: inline-block;
	float: right;
	background-image: url('resources/dots.png');
	background-image: url('resources/dots.png'), -moz-radial-gradient(center 150%, cover, rgba(0,0,0,0), rgba(0,0,0,0) 60%, rgba(0,0,0,0.5)), -moz-linear-gradient(top, #222, #333);
	background-image: url('resources/dots.png'), -webkit-gradient(linear, left top, left bottom, from(#222), to(#333));
}

.article .footer .tags, .article .footer .categories, .article .footer .comments, .article .footer .edit {
	display: inline-block;
	margin: 0 0 0 24px;
	font-size: 100%;
}

.article .footer a {
	color: #999;
	text-decoration: none;
}

.article .footer a:hover {
	color: #fff;
	text-decoration: none;
}

.article .footer .comments a {
	color: #fff;
	font-weight: bold;
}

.comments {
	font-size: 80%;
	margin: 0 0 4em 0;
}

.comment {
	display: inline-block;
	width: 31%;
	vertical-align: top;
	padding: 0 1%;
	border-top: solid 1px #ccc;
}

.comment .meta {

}

.comment .meta .author {
	font-weight: bold;
	color: #693;
}

.comment .meta .author a {
	text-decoration: none;
	color: inherit;
}

.comment .meta .time {
	color: #666;
	font-size: 80%;
}

.comment .content {
	max-height: 150px;
	overflow-y: auto;
}

#respond, .navigation {
	font-size: 80%;
	margin: 0 10% 4em;
	display: inline-block;
	width: 80%;
	padding: 8px 8px 16px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
}

.navigation {
	padding: 8px;
	text-align: center;
}

.navigation > div {
	display: inline-block;
	margin: 0 2em;
}

#respond h1 {
	font-family: "ImpactLabelReversedRegular", serif;
	font-size: 200%;
	margin: 0 0 0.5ex 0;
}

#respond .userInfo {
	width: 40%;
	display: inline-block;
	vertical-align: top;
}

#respond label {
	font-family: "ImpactLabelReversedRegular", serif;
	font-size: 150%;
	display: block;
	width: 8em;
	margin: 0 1em 0 0;
}

#respond input {
	display: block;
	border: 0;
	margin: 0 1em 1em 0;
	width: 90%;
	padding: 2px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	background: rgba(255,255,255,0.5);
}

#respond textarea {
	border: 0;
	margin: 4px 0;
	width: 58%;
	padding: 2px;
	height: 160px;
	display: inline-block;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	background: rgba(255,255,255,0.5);
}

#respond button {
	display: block;
	margin: 1em 1em 0 0;
}

button {
	background: #ccc;
	background-image: -moz-linear-gradient(top, #ccc, #aaa);
	background-image: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#aaa));
	padding: 4px 48px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	border: 0;
	cursor: pointer;
	text-shadow: 1px 1px 1px #fff;
}

button:hover {
	background-image: -moz-linear-gradient(top, #ddd, #bbb);
	background-image: -webkit-gradient(linear, left top, left bottom, from(#ddd), to(#bbb));
}

button:active {
	background-image: -moz-linear-gradient(top, #aaa, #ccc);
	background-image: -webkit-gradient(linear, left top, left bottom, from(#aaa), to(#ccc));
}
