@import "/addons/fontawesome/css/font-awesome.min.css";

body {
	margin: 0 auto;
	background: rgb(98.8%, 96.9%, 93.7%) url(200-60-3.png);
	color: rgba(10,12,10,0.8);
	font-family: "futura-pt-1","futura-pt-2",Futura,sans-serif;
	font-weight: 300;
}

main {
	color: rgba(10,12,10,0.8);
	background-color: rgba(250,250,250,0.6);
	border-radius: 10px;
	min-width: 26rem;
	width: 100%;
	max-width: 43rem;
	margin: 4.32rem auto 0.76rem;
	box-shadow: -0.2rem 0.2rem 5rem rgba(250,250,250,1);
}

#close:target aside#about-craig,
aside#about-craig {
	visibility: hidden;
	position: absolute;
	bottom: -3rem;
	left: 50%;
	width: 25rem;
	margin-left: -23.5rem;
	background: #FFF;
	border: 2px solid rgba(250,250,250,0.6);
	border-bottom-left-radius: 15px;
	padding: 2em;
	font-size: 1rem;
	box-shadow: -0.2rem 0.2rem 1rem rgba(10,12,10,0.1);
}

aside#about-craig:target {
	visibility: visible;
}

aside .close {
	font-family: "futura-pt-1","futura-pt-2",Futura,sans-serif;
	font-weight: 300;
	color: #666 !important;
	text-decoration: none;
	font-size: 1.2rem;
	position: absolute;
	top: 0px;
	right: 8px;
}

article {
	font-size: 1.3rem;
	line-height: 1.52;
	font-family: "calluna-1","calluna-2",Georgia, serif;
	padding: 2.88rem 1.44rem 1.44rem 4.32rem;
	text-rendering: optimizeLegibility;
}

article ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

ul li:before {
	margin-left: -1.25rem;
	margin-right: 0.5rem;
    content: '\2576';
}

article ul.inline li {
	display: inline-block;
}

article ul.inline li:before {
	content: '';
	margin: 0;
}

article ul.inline li:after {
	content: ', ';
}

article ul.inline li:last-of-type::after {
	content: '. ';
}


article h1 {
	line-height: 1.1;
	font-size: 1.8em;
}

article h1,
article h1 * {
	font-family: "futura-pt-1","futura-pt-2",Futura,sans-serif;
	font-weight: 700;
	rgba(10,12,10,0.9);
}

article h2,
article h2 * {
	font-family: "futura-pt-1","futura-pt-2",Futura,sans-serif;
	font-weight: 300;
	rgba(10,12,10,0.9);
}

article h2 {
	font-size: 1.3em;
	margin: 0;
}

article p+h2,
article ul+h2  {
	margin-top: 1em;
}

article h3 {
	font-size: 1.18em;
	line-height: 1.16;
}

article h3,
article h3 * {
	font-family: "futura-pt-1","futura-pt-2",Futura,sans-serif;
	font-weight: 500;
	rgba(10,12,10,0.9);
}

#tilde-launch ul {
	margin: 0;
	padding: 0;
}

#tilde-launch ul li:before {
	margin: 0;
	content: '';
}

#tilde-launch ul li {
	display: inline;
}

#tilde-launch ul li:after {
	content: ", ";
}

#tilde-launch section ul li:last-child {
	text-transform: lowercase;
}

#tilde-launch ul li:last-child:after {
	content: "";
}

h1, h2, h3, h4, h5, h6 {
	margin-bottom: 0;
}

p {
	color: rgba(10,10,10,0.9);
	margin: 0;
}

*:not(p)+p,
p:first-of-type {
	text-indent: 0;
}

#civicjournalism>p:first-of-type {
	font-size: 1.6rem;
	line-height: 1.33;
	margin-bottom: 0.2rem;
}

p, ul+p, section+p, p+section p:first-child {
	text-indent: 1.44rem;
}

p.note {
	margin: 2em 0;
	text-indent: 0;
	text-align: center;
	font-style: italic;
}

p.date {
	margin-top: 2.88rem;
	text-align: right;
	font-size: 0.86rem;
}

p.date,
p.date a:link,
p.date a:visited {
	color: rgba(180,180,180,0.9);
	font-family: "futura-pt-1","futura-pt-2",Futura,sans-serif;
	font-weight: 300;
}


a:link {
	text-decoration: none;
	color: #2F2C7D
/*	color: rgba(51%,14%,6%,0.9); */
}

a:hover {
	color: rgba(78%,6%,3%,1);
	text-decoration: underline;
}

a:visited {
	color: #571655;
}

abbr, acronym {
	text-decoration: none;
	border-bottom: 1px dotted rgba(0,0,0,0.6);
}

ins {
	text-decoration: none;
	color: rgba(0,0,0,1);
}

del {
	color: rgba(0,0,0,0.5);
}

.info, abbr, acronym {
	cursor: help;
}

.info:hover, abbr:hover, acronym:hover {
	border-color: rgba(78%,6%,3%,0.8)
}

hr {
	margin: 1.44rem auto;
	color: rgba(10,10,10,0.9);
	background-color: none;
	width: 33%;
	border: 0;
	border-top: 2px dashed rgba(10,10,10,0.3);
}

/*=Logo=*/
body>header {
	font-family: "metallophile-sp8-1","metallophile-sp8-2",Futura,"Century Gothic",sans-serif;
	font-family: "futura-pt-1","futura-pt-2",Futura,sans-serif;
	font-weight: 700;
	position: absolute;
	right: 4.32rem;
	top: 2.1rem;
	border: 2px double black;
	border-radius: 5px;
	height: 2.88rem;
	padding: 2px 5px 5px;
	background:  rgba(245,245,245,1);
}

body>header h1 {
	margin: 0;
	font-size: 30px;
}

body>header h1 a:link,
body>header h1 a:visited {
	color: rgba(51%,14%,6%,0.9);
	text-decoration: none !important;
}

body>header h2 {
	margin: 0;
	margin-top: -6px;
	padding-left: 1px;
	font-size: 12px;
	font-size: 13px;
	letter-spacing: 1px;
	font-weight: normal;
	text-transform: lowercase;
}

body>header nav {
	display: none;
}

/*=Footer=*/
#elsewhere {
	margin: 0 0 2.88rem 1rem;
	padding: 0;
	list-style: none;
	color: rgba(10,12,10,0.7);
	font-size: 0.76rem;
	text-align: center;
}

#elsewhere li {
	list-style: none;
	display: inline;
	marign: 0;
}

#elsewhere li a {
	color: rgba(10,12,10,0.8) !important;
	display: inline-block;
	height: 22px;
	width: 21px;
}

#elsewhere li a.tildeclub {
	position: relative;
	top: -7px;
	height: 18px;
	width: 18px;
	font-family: sans-serif;
	color: #FFF !important;
	background-color: rgba(10,12,10,0.8);
	border: 2px solid rgba(10,12,10,0);
	border-radius: 5px;
}

#elsewhere a:hover {
	color: #2F2C7D !important;
	text-decoration: none;
	background-color: #FFF;
}
#elsewhere a.fa-twitter-square:hover {
	color: #55ACEE !important;
}
#elsewhere a.fa-tumblr-square:hover {
	color: #35465c !important;
}
#elsewhere a.fa-facebook-square:hover {
	color: #3B5998 !important;
}
#elsewhere a.fa-google-plus-square:hover {
	color: #d34836 !important;
}
#elsewhere a.fa-linkedin-square:hover {
	color: #007bb6 !important;
}
#elsewhere a.fa-instagram:hover {
	color: #517fa4 !important;
}
#elsewhere li a.tildeclub:hover {
	color: rgb(0,255,0) !important;
}

#elsewhere li a span {
	display: none;
}

#elsewhere li:before,
#elsewhere li:last-child:after {
	content: '';
	marign: 0;
}

#elsewhere li:after {
	content: ' ';
	margin-left: 0.5rem;
	margin-right: 1rem;
}


#copyright {
	color: rgba(10,12,10,0.7);
	font-size: 0.76rem;
	text-align: center;
	padding: 2.88rem 0 0.76rem;
}

#copyright * {
vertical-align: top;
}

#copyright .note {
	display: block;
	margin-top: 0.72rem;
	font-style: italic;
}

#spring {
	background: url('/images/content/colour_of_spring') -20px -10px no-repeat, url('/images/content/colour_of_spring') 60px 20px no-repeat, url('/images/content/colour_of_spring') 10px 30px no-repeat;
	text-align: center;
	font-family: "futura-pt-1","futura-pt-2",futura, sans-serif;
}

#spring>p {
	font-size: 18rem;
	color: rgba(251,249,244,1);
	text-shadow: 1px 4px 6px rgba(221,229,224,1), 1px 4px 6px rgba(151,149,144,1);
}

#dante {
	text-align: center;
	font-family: futura, 'Century Gothic', sans-serif;
}

#dante>p {
	font-size: 18rem;
	color: rgba(254,42,0,0.5);
}

#dante>p:after {
	content: "?";
	margin-left: -8.5rem;
	vertical-align: -0.2rem;
	color: rgba(82,49,54,0.5);

}

#fiveyears>p:first-of-type {
	font: bold 5em "Avenir Next", Futura, sans-serif;
	color: rgba(215,75,65,0.4);
	word-spacing: -0.55em;
	text-align: center;
	white-space: pre;
	padding: 2.5ex 0;
	-webkit-transition: color 5s;
	transition: color 5s;
}

#fiveyears>p:first-of-type:hover {
	color: rgba(215,75,65,0.8);
}

#fiveyears>p+p {
	font-size: 0.5em;
}

#fiveyears>p:first-of-type b {
	background: transparent;
	color: rgba(210,75,64,0.7);
	-webkit-transition: color 5s;
	transition: color 5s;
}

#fiveyears>p:first-of-type:hover b {
	color: rgba(215,75,65,0.3);
}