/* ================================================================================================================== */
/* CSS Reset and some generic stuff */

html,body,h1,h2,h3,h4,h5,h6,p,ol,ul,li,dl,dt,dd,blockquote,figure,fieldset,legend,textarea,pre,iframe,button,input,select,textarea,strong,em,i,b,cite{margin:0;padding:0;border:0;font:inherit}ul{list-style:none}table{border-collapse:collapse;border-spacing:0}td,th{font:inherit;padding:0;text-align:left}

main{display:block;} /* fixes IE9, ugh. */

html { box-sizing: border-box; }
*,*::before,*::after { box-sizing: inherit; }

img, object, iframe { max-width: 100%; }
img { height: auto; }


/* ================================================================================================================== */
/* Fonts */

@font-face {
	font-family: 'Open Sans'; font-style: normal; font-weight: 400;
	src: local('Open Sans Regular'), local('OpenSans-Regular'), url('../fonts/opensans400.woff2') format('woff2'), url('../fonts/opensans400.woff') format('woff');
}
@font-face {
	font-family: 'Open Sans'; font-style: italic; font-weight: 400;
	src: local('Open Sans Italic'), local('OpenSans-Italic'), url('../fonts/opensans400i.woff2') format('woff2'), url('../fonts/opensans400i.woff') format('woff');
}
@font-face {
	font-family: 'Open Sans'; font-style: normal; font-weight: 700;
	src: local('Open Sans Bold'), local('OpenSans-Bold'), url('../fonts/opensans700.woff2') format('woff2'), url('../fonts/opensans700.woff') format('woff');
}
@font-face {
	font-family: 'Open Sans'; font-style: italic; font-weight: 700;
	src: local('Open Sans Bold Italic'), local('OpenSans-BoldItalic'), url('../fonts/opensans700i.woff2') format('woff2'), url('../fonts/opensans700i.woff') format('woff');
}
@font-face {
	font-family: 'Roboto Mono'; font-style: normal; font-weight: 400;
	src: local('Roboto Mono'), local('RobotoMono-Regular'), url('../fonts/robotomono400.woff2') format('woff2'), url('../fonts/robotomono400.woff') format('woff');
}


/* ================================================================================================================== */
/* Basics */

/* 320=12,1024=14,1600=16 */

html { 
	font-size: 12px;
	font-size: calc( 0.284vw + 11.091px );
}
@media screen and ( min-width: 1024px ) {
	html { 
		font-size: calc( 0.347vw + 10.444px );
	}
}
@media screen and ( min-width: 1600px ) {
	html { 
		font-size: 16px;
	}
}
body {
	background: url(../img/bg.png) #578 no-repeat top left;
 	color: #333; line-height: 1.5; font-family: 'Open Sans',sans-serif;
}


/* Building blocks */

.container {
	max-width: 72rem; padding: 1rem 1rem; margin: 0 auto;
}

header, aside {
	padding: 1rem;
}
main header {
	background-color: #e7ecee;
}
aside {
	margin-top: 1rem;
	background-color: #e7ecee;
}
aside.minor {
	font-size: 0.813rem;
}
main {
	margin-top: 2rem;
}
main > header {
	padding: 1rem;
}
.logo {
	width: 20rem; max-width: 60%;
}


/* Content formatting */

a {
	color: #17649a;
}
a span {
	color: #f00 !important;
}
a span::after {
	display: inline-block;
	content: 'Possible spam or hazardous link!';
	margin-left: 0.25em; padding: 0 0.25em; border-radius: 0.25em;
	background: #f00;
	color: #fff; font-size: 0.813em;
}
a:hover {
	color: #000;
}
strong {
	font-weight: 700;
}
em {
	font-style: italic;
}

h1, h2 {
	font-weight: 700;
}
h1 {
	font-size: 1.25rem; line-height: 1;
}
.main-header h1 {
	font-size: 1.25rem;
}
h2 {
	font-size: 1.25rem;
}
.minor {
	font-weight: 400; font-size: 0.813rem;
}



/* Article display */

article {
	position: relative;
	background: #dde4e7;
}
.post-metadata {
	padding: 0.25rem 1rem;
	font-size: 0.813rem;
}

@media screen and (max-width: 799px) {
	.post-metadata {
		border-bottom: 1px dotted #c6cdcf;
	}
	.post-metadata::after {
		display: table; content: ''; clear: both;
	}
	.post-num, .post-author, .post-datetime {
		display: inline;
	}
	.post-num {
		width: 2rem;
		font-size: 0.813rem; text-align: center;
	}
	.post-num::after {
		content: ':';
	}
	.post-datetime::before {
		content: ' on';
	}
	.post-content {
		padding: 0.5rem 1rem;
	}
}
@media screen and (min-width: 800px) {

	article::before {
		content: ''; z-index: 1;
		position: absolute; top: 0; left: 0;
		width: 12rem; height: 100%;
		border-left: 1px solid #c6cdcf; border-right: 1px solid #c6cdcf;
	}
	article::after {
		display: table; content: ''; clear: both;
	}
	.post-content {
		padding: 1rem 1.5rem;
		margin-left: 12rem;
	}
	.post-content::after {
		display: table; content: ''; clear: both;
	}
	.post-metadata {
		position: relative; z-index: 2;
		float: left;
		width: 12rem; padding: 1rem;
	}

}

.post-author {
	font-weight: 700;
}
.post-edited {
	margin-top: 1.5rem;
	color: #888; font-size: 0.75rem;
}

* + article, * + .notice {
	margin-top: 2px;
}
*+p, *+.codebox, *+.quotebox, *+ol, *+ul {
	margin-top: 0.75em;
}

.codebox {
	position: relative;
	display: block;
	width: 100%; max-height: 20rem; overflow: auto;
	padding: 0.5rem 1rem; border: 1px solid #c6cdcf; border-left-width: 1rem;
	background-color: #f5f7f8;
}

.quotebox cite {
	display: inline-block;
	padding: 0 0.5rem 0 1rem;
	background-color: #c6cdcf;
	font-size: 0.813rem; line-height: 1.5rem;
}
.quotebox blockquote {
	padding: 0.5rem; border-left: 0.5rem solid #c6cdcf;
}
pre {
	line-height: 1.25;
}
code {
	font-size: 0.875em; font-family: 'Roboto Mono'; line-height: 1;
}


.notice {
	padding: 0.5rem 1rem;
	background: #e8edef;
}



/* ================================================================================================================== */
/* Forum overview table */

table {
	width: 100%;
}
table th {
	color: #fff; font-size: 0.813rem;
}
table th, table td {
	padding: 0.25rem 1rem;
}
table thead tr {
	background-color: #3a3a3a;
}
table tbody tr {
	background-color: #dde4e7;
}
table tbody tr + tr {
	border-top: 1px solid #ccc;
}
.forum-title,
.forum-subtitle {
	width: 40%;
}
.forum-status {
	width: 20%;
}
.forum-subtitle,
.forum-status {
	font-size: 0.813rem;
}
.topic-posts,
.topic-date {
	width: 12rem;
	font-size: 0.813rem;
}

/* Pagination */

.pagination {
	overflow: hidden;
	padding: 0.25rem 1rem; margin: 4px 0;
	background-color: #e8edef;
}
.pagination-number {
	float: left;
}
.pagination nav {
	float: right;
	overflow: hidden;
}
.pagination nav li {
	float: left; margin-right: 0.25rem;
}
.pagination nav li span,
.pagination nav li a {
	display: block;
	padding: 0 0.25rem; border: 1px solid #999;
	min-width: 2.5rem;
	text-decoration: none; text-align: center;
}
.pagination-current {
	background-color: #999;
	color: #e8edef; font-weight: 700;
}
.pagination-ellipsis {
	color: #999;
}
.pagination nav li a:hover {
	background-color: #fff;
}