﻿html {
	background-color: #fafafa;
}

body, input, button {
	font-family: "Source Serif Pro", serif;
	font-size: 1.125rem;
	font-weight: 400;
}

body, input, button, header>h1 {
	line-height: 1.875rem;
}

body, input, button, header>nav:last-of-type>a, aside>nav>a {
	color: #002b36;
}

h1, h3, hr+ol::before, h4, h5, h6, header>nav:first-of-type>a {
	font-family: "Source Sans Pro", Arial, sans-serif;
}

h1 {
	font-size: 2.5rem;
	line-height: 3.75rem;
	font-weight: 900;
}

h2, h3, hr+ol::before, article>h4, section>h5:not(:first-child)>a {
	font-size: 1.375rem;
}

h2, h3, hr+ol::before, h4, section>h5:not(:first-child)>a, header>nav:last-of-type>a {
	font-weight: 700;
}

h4, h5, h6, nav, aside, figcaption, blockquote, input, button {
	font-size: 0.96875rem;
}

h5, h6, button, nav {
	font-weight: 600;
}

h5, header>nav:first-of-type>a {
	font-variant: small-caps;
	text-transform: lowercase;
}

h5, h6, figcaption {
	color: #777;
}

h6 {
	color: #777;
	font-style: italic;
}

ol, ul {
	list-style-position: outside;
	padding-left: 0.625rem;
}

ul {
	list-style-type: square;
}

blockquote {
	color: #586e75;
}

figcaption, input[type="text"] {
	padding-right: 0.375rem;
	padding-left: 0.375rem;
}

figcaption {
	background: #002b36;
	color: #fafafa;
}

input[type="text"] {
	background: OldLace;
	box-shadow: inset 2px 2px 1px #ddd;
	caret-color: #9C2421;
}

input[type="text"]:focus {
	background-color: FloralWhite;
}

button {
	background: #ddd;
	background: linear-gradient(#eee, #ddd);
	padding-right: 0.75rem;
	padding-left: 0.75rem;
}

button:hover, button:focus {
	cursor: pointer;
	background: #eee;
}

a, header a:visited {
	text-decoration: none;
	color: #dc322f;
}

a:hover, a:focus, button:hover, button:focus, a.current {
	text-decoration: underline;
}

a:visited {
	color: #9C2421;
}

::selection {
	background-color: LemonChiffon;
	text-shadow: none;
}

::-moz-selection {
	background-color: LemonChiffon;
	text-shadow: none;
}

::before, ::after, header>h5>a, figure>h3>a, aside>nav>* {
	display: inline-block;
	vertical-align: top;
}

::before, ::after {
	font-family: "Heydings Icons";
	text-transform: none;
	font-variant: normal;
}

::before {
	margin-right: 0.125rem;
}

::after {
	margin-left: 0.125rem;
}

p a::before, article>aside>h5, aside>nav>* {
	margin-right: 0.375rem;
}

/* Layout */

*+* {
	margin-top: 1.875rem;
}

body, main, h1, br, a, span, img, figure, figure>*, article>aside, aside>nav, article>aside>h5, footer>h4+p, section>h5, section>h5+*:not(h3), section>form, section>form>*, aside>nav>a {
	margin-top: 0;
}

header>*, main>*, h1+h2, section>h3+p, aside>*+*:not(h5), section>h5:first-child+h3 {
	margin-top: 0.9375rem;
}

section>h3 {
	clear: left;
}

header>nav:first-of-type {
	margin-top: 0.3125rem;
}

header>form {
	margin-top: 0.625rem;
}

header {
	padding-bottom: 0.9375rem;
	padding-bottom: calc(0.9375rem - 2px);
}

body {
	max-width: 57.5rem;
	margin-left: auto;
	margin-right: auto;
	padding-right: 1.25rem;
	padding-left: 1.25rem;
}

body>*, main>* {
	width: 100%;
}

body>*, header>*, header>h1>a>*, header>nav>a, header>form>*, main>*, article>aside>h5 {
	float: left;
}

article>aside+* {
	clear: left;
}

/* Header */

header {
	border-bottom: 2px dotted #555;
}

	header>h1 {
		font-size: 1.75rem;
		text-transform: lowercase;
		font-style: italic;
	}

		header>h1>a>span {
			clear: left;
		}

		header>h1>a>span:last-of-type {
			font-size: 2.125rem;
			margin-left: 0.9375rem;
		}

		header>h1>a>img {
			max-width: 3rem;
			min-height: 1.875rem;
			padding-left: 0.5rem;
			z-index: -9;
		}

	header>nav:last-of-type {
		width: 100%;
		background: ;
		border-top: 2px solid #555;
		padding-top: 0.625rem;
		padding-top: calc(0.625rem - 2px);
		margin-bottom: -0.625rem;
	}

	header>nav:first-of-type>a, header>nav:last-of-type>a {
		margin-left: 0.5rem;
	}

	header>nav:first-of-type>a:not(:last-of-type) {
		margin-right: 0.5rem;
	}

	section>h3:last-child>* {
		margin-right: 1rem;
	}

	header>nav:last-of-type>a:not(:last-of-type)::after {
		content: '|';
		color: #ccc;
		margin-left: 0.5rem;
	}

/* Main */

main {
	padding-bottom: 1.875rem;
}

article>*, section:not(.home-lead) {
	max-width: 33.75rem;
}

.home-warning {
    text-decoration: none;
    background-color: #dc322f;
    color: #EFEFEF;
    text-align: center;
}

figure {
	max-width: 440px;
}

	section>h1+h5, section>h3+h5 {
		line-height: 0.9375rem;
		padding-top: 0.3125rem;
		padding-bottom: 0.625rem;
	}

	section.archive>h3+h5, section+aside>h5 {
		line-height: 1.5rem;
		padding-bottom: 0.375rem; padding-bottom: calc(0.375rem - 2px);border-bottom: 2px dotted #ccc;
	}

	a[title="Download"]::before, a[title="Menu"]::before {
		font-family: "Heydings Controls";
	}

	a.external-link::before {
		content: 'a';
	}

	a.archive::before {
		content: '5';
	}

	a.issue::before {
		content: 'Z';
		color: PaleYellow;
	}

	a.category::before {
		content: 't';
		color: GoldenRod;
	}

	a[title="Download"]::before {
		content: 'l';
	}

	a[title="Donate"]::before {
		content: '*';
		color: LimeGreen;
	}

	a[title="Donate"]:hover::before {
		color: ForestGreen;
	}

	a[href="mailto:editor@weeklyworker.co.uk"]::before {
		content: 'b';
	}

hr+ol::before {
	content: 'Notes';
	padding-bottom: 1.875rem;
}

header.js>nav:first-of-type, header.js>form {
	margin-top: 0.9375rem;
	clear: both;
}

header.js>nav:last-of-type {
	margin-top: 0.625rem;
	padding-left: 0;
}

header>h5>a, figure>h3>a {
	text-align: center;
}

header>h5 {
	clear: left;
}

header>h5>a {
	text-transform: lowercase;
	font-variant: small-caps;
	min-width: 3.75rem;
	border-radius: 0.3125rem;
}

header>h5>a, header>h5>a:visited, figure>h3>a, figure>h3>a:visited {
	color: #fafafa;
	background-color: #dc322f;
	background: linear-gradient(#dc322f, #FF363F);
}

header>h5>a:hover, header>h5>a:focus, figure>h3>a:hover, figure>h3>a:focus, a.open {
	background-color: #9C2421;
	background: linear-gradient(#9C2421, #dc322f);
}

header>h5>a:first-child::before {
	content: 'o';
}

header>h5>a:not(:last-of-type) {
	margin-right: 0.3125rem;
}

figure>h3 {
	position: relative;
}

figure>h3>a {
	position: absolute;
	top: -1.875rem;
	right: 0;
	min-width: 1.5rem;
}

@media screen and (min-width: 320px) {

	header>h5 {
		float: right;
		clear: none;
		margin-top: 2.8125rem;
	}

}

@media screen and (min-width: 500px) {

	figure, article>aside {
		float: right;
		clear: right;
		width: 38.636363%;
		margin-bottom: 0.9375rem;
		margin-left: 1.25rem;
	}

	figure {
		margin-top: -0.9375rem;
	}

	article>aside {
		max-width: 18.75rem;
	}

}

@media screen and (min-width: 558px) {

	header>nav:first-of-type, header>form {
		float: right;
		clear: right;
	}
}

@media screen and (min-width: 720px) {

	figure, article>aside {
		margin-left: 2.5rem;
		width: 50%;
	}

	section:not(.home-lead) {
		width: 61.363636%;
	}

	main>aside {
		float: right;
		clear: right;
		width: 38.636363%;
		padding-left: 2.5rem;
		margin-bottom: 0.9375rem;
	}

	aside>nav>* {
		display: block;
	}

	aside>nav>h5 {
		line-height: 1.5rem;
		padding-bottom: 0.375rem; padding-bottom: calc(0.375rem - 2px);
		border-bottom: 2px dotted #ccc;
	}

	aside>nav>a {
		margin-top: 0.9375rem;
	}

}
