/*
Theme name: Barryvan 2013
Theme URI: http://www.barryvan.com.au/
Description: The 2013 theme for barryvan.com.au
Author: barryvan
Version: 1.0
*/
@charset 'utf-8';

/* Reset */

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, main {
	display: block;
}
audio, canvas, video {
	display: inline-block;
}
audio:not([controls]) {
	display: none;
}
button, input, select, textarea {
	font-family: inherit;
	font-size: 100%;
}
button::-moz-focus-inner, input::-moz-focus-inner {
	padding: 0;
	border: 0;
}
button, html input[type="button"], input[type="reset"], input[type="submit"] {
	-webkit-appearance: button;
	cursor: pointer;
}
label, select, button, input[type="button"], input[type="reset"], input[type="submit"], input[type="radio"], input[type="checkbox"] {
	cursor: pointer;
}
input[type="search"] {
	box-sizing: content-box;
	-webkit-appearance: textfield;
}
input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button {
	-webkit-appearance: none;
}
textarea {
	overflow: auto;
	vertical-align: top;
}
h1,h2,h3,h4,h5,h6,p {
	margin: 0;
}


/* Style it up */

body {
	font-family:'Segoe UI', 'Calibri', 'Trebuchet MS', 'Helvetica', sans-serif;
	font-size: 12pt;
	color: #999;
	padding: 0;
	margin: 0;
	background: #222;
}

body > header {
	background-color: #111;
	border-bottom: 0.5ex solid #080808;
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	box-shadow: 0 4px 24px #080808;
	z-index: 100;
}

body > header > .relative {
	width: 90ex;
	height: 6ex;
	margin: 0 auto;
	position: relative;
}

body > header > .relative > a {
	text-decoration: none;
	color: #f90;
	font-weight: bold;
	text-shadow: 0 2px #000;
	font-size: 4ex;
	transition: color 0.25s;
}

body > header > .relative > a:hover {
	color: #fff;
}

body > header > .relative > nav {
	position: absolute;
	top: 1.5ex;
	left: 50%;
	right: 0;
}

body > header > .relative > nav > ul {
	list-style-type: none;
	margin: 0;
	padding: 0 1ex;
	background: #333;
	background-image: repeating-linear-gradient(to top, rgba(0,0,0,0.25), rgba(0,0,0,0) 2px), linear-gradient(-45deg, #363636, #282828);
	border-radius: 0.25ex 0.25ex 0 0;
	height: 6ex;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	position: relative;
	box-shadow: inset 0 1px #444, 0 2px 24px rgba(0,0,0,0.5);
	text-align: center;
	line-height: 1.4;
}

body > header > .relative > nav > ul::before {
	content: '';
	position: absolute;
	bottom: 0;
	left: -1ex;
	background: linear-gradient(45deg, transparent, transparent 50%, #1e1e1e 50%, #1e1e1e);
	width: 1ex;
	height: 1ex;
}

body > header > .relative > nav > ul > li {
	display: inline-block;
	font-size: 80%;
	padding: 0 1ex;
}

body > header > .relative > nav > ul > li > a {
	display: inline-block;
	color: #f90;
	text-decoration: none;
	text-shadow: 0 -1px #000;
	transition: color 0.25s;
}

body > header > .relative > nav > ul > li > a:hover {
	color: #fff;
}

body > main {
	width: 90ex;
	margin: 10ex auto;
}

main > h1 {
	
}

main > article {
	position: relative;
	margin: 0 0 8ex;
	padding: 0 0 8ex;
	border-bottom: 24px dotted #202020;
}

main > article > header {
	margin: 0 33% 0 0;
	line-height: 1.0;
}

main > article > header > h1 {
	font-size: 3ex;
	font-weight: normal;
	color: #f90;
}

main > article > header > h1 > a {
	color: inherit;
	text-decoration: none;
	transition: color 0.25s;
}

main > article > header > h1 > a:hover {
	color: #fff;
}

main > article > header > time {
	font-size: 80%;
}

main > article > .content {
	margin: 0 33% 0 0;
	padding: 1ex 1ex 1ex 0;
	text-shadow: 0 -1px #000;
}

main > article > footer {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 8ex;
	border-left: 8px solid #111;
	background: #1a1a1a;
	width: 33%;
	padding: 3ex 1ex;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	font-size: 80%;
	border-radius: 0 4px 4px 0;
}

main > article > footer > .categories {
	
}

main > article > footer > .categories > a {
	display: inline-block;
	text-decoration: none;
	background: #222;
	white-space: nowrap;
	padding: 0 1ex;
	border-radius: 4ex 1ex 1ex 4ex;
	border-top: 1px solid #333;
	border-bottom: 1px solid #111;
	color: #555;
	text-shadow: 0 -1px #040404;
	margin: 0 1ex 1ex 0;
	box-shadow: 0 -1px #111;
	opacity: 0.8;
	transition: opacity 0.25s;
}

main > article > footer > .categories > a::before {
	content: '\2022';
	margin: 0 0.5ex 0 0;
	text-shadow: 0 1px #333, 0 -1px #111;
	color: #1a1a1a;
}

main > article > footer > .categories > a:hover {
	opacity: 1.0;
}

main > article > footer > .comments {
	border-top: 1px dotted #111;
	padding: 1ex 0 0;
}

main > article > footer > .comments > a {
	text-decoration: none;
	color: #f90;
	transition: color 0.25s;
}

main > article > footer > .comments > a:hover {
	color: #fff;
}

main > article > .comments {
	margin: 0 33% 0 0;
	padding: 1ex;
	background: #1d1d1d;
	font-size: 80%;
}

main > article > .comments > article {
	margin: 0 0 4ex;
}

main > article > .comments > article:last-child {
	margin: 0;
}

main > article > .comments > article > header {
	
}

main > article > .comments > article > header > h1 {
	font-size: 130%;
	font-weight: normal;
	color: #666;
}

main > article > .comments > article > header > h1 > a {
	color: #999;
	text-decoration: none;
	transition: color 0.25s;
}

main > article > .comments > article > header > h1 > a:hover {
	color: #aaa;
}

main > article > .comments > article > header > time {
	
}

main > article > .comments > article > .content {
	color: #666;
}

main > article > .respond {
	margin: 4ex 33% 0 0;
}

main > article > .respond > p {
	
}

main > article > .respond > p > a {
	
}

main > article > .respond > label {
	display: block;
	margin: 0.25ex 1ex 0 0;
}

main > article > .respond > label > .text {
	display: inline-block;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	width: 25%;
}

main > article > .respond > label > input {
	display: inline-block;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	width: 75%;
	box-shadow: inset 0 1px 1px #111;
	border: none;
	border-radius: 0.25ex;
	background: #333;
	padding: 0.25ex 1ex;
	color: #f90;
}

main > article > .respond > textarea {
	box-shadow: inset 0 1px 1px #111;
	border: none;
	border-radius: 0.25ex;
	background: #333;
	padding: 0.25ex 1ex;
	color: #f90;
	display: block;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	height: 6em;
	width: 100%;
	width: calc(100% - 1ex);
	margin: 1ex 0;
}

main > article > .respond > button {
	border: none;
	background: #f90;
	background-image: linear-gradient(to bottom, transparent, rgba(0,0,0,0.25));
	box-shadow: 0 1px 4px #111, inset 0 1px 1px rgba(255,255,255,0.25), inset 0 -1px 1px rgba(0,0,0,0.25);
	color: #fff;
	font-weight: bold;
	padding: 1ex 4ex;
	font-size: 90%;
	line-height: 1.0;
	text-shadow: 0 -1px rgba(0,0,0,0.25);
	border-radius: 0.5ex;
	opacity: 0.8;
	transition: opacity 0.25s;
}

main > article > .respond > button:hover {
	opacity: 1.0;
}

main > article > .respond > button:focus,
main > article > .respond > button:active {
	opacity: 0.25;
}

main > nav {
	text-align: center;
}

main > nav > a {
	color: #f90;
	text-decoration: none;
	text-shadow: 0 -1px #000;
	transition: color 0.25s;
	margin: 0 8ex;
}

main > nav > a:hover {
	color: #fff;
}

body > footer {
	background: #111;
	padding: 4ex 0 16ex;
	border-top: 0.5ex solid #080808;
}

body > footer > .content {
	width: 90ex;
	margin: 0 auto;
}

body > footer > .content > h1 {
	color: #555;
	font-size: 150%;
	font-weight: normal;
	text-shadow: 0 -1px #000;
}

body > footer > .content > p {
	color: #444;
	text-shadow: 0 -1px #000;
}

body > footer > .content a {
	color: #666;
	text-decoration: none;
	transition: color 0.25s;
}

body > footer > .content a:hover {
	color: #999;
}

body > footer > .content .music-license {
	border-top: 24px dotted #181818;
	margin: 24px 0 0;
	padding: 24px 0 0;
}

body > footer > .content .music-license img {
	display: block;
	margin: 0 auto;
}

body > footer > .content .music-license small {
	color: #333;
	font-size: 100%;
}


/* Article content styling */
main > article > .content p,
main > article > .comments > article > .content p {
	line-height: 1.5;
}

main > article > .content p + p,
main > article > .comments > article > .content p + p {
	margin: 2ex 0 0;
}

main > article > .content a,
main > article > .comments > article > .content a {
	color: #f90;
	text-decoration: none;
	opacity: 0.5;
	transition: color 0.25s, opacity 0.25s;
}

main > article > .content a img,
main > article > .comments > article > .content a img {
	border: none;
}

main > article > .content a:hover,
main > article > .comments > article > .content a:hover {
	opacity: 1.0;
	color: #fff;
}

main > article > .content h1,
main > article > .comments > article > .content h1 {
	font-size: 150%;
	opacity: 0.5;
	margin: 1ex 0 0.1ex;
}

main > article > .content h2,
main > article > .comments > article > .content h2 {
	font-size: 150%;
	font-weight: normal;
	opacity: 0.5;
	margin: 1ex 0 0.1ex;
}

main > article > .content h3,
main > article > .comments > article > .content h3 {
	font-size: 125%;
	font-weight: bold;
	opacity: 0.5;
	margin: 1ex 0 0.1ex;
}

main > article > .content pre,
main > article > .comments > article > .content pre {
	display: block;
	white-space: pre-wrap;
	background: #1c1c1c;
	padding: 2ex;
	border-radius: 0.5ex;
	color: #555;
	-moz-tab-size: 2;
	tab-size: 2;
}