[role="navigation"],
[role="banner"],
[role="main"],
[role="contentinfo"] {
	max-width: 90em;
	margin: 0 auto;
}

/* @group Elements */

blockquote {
	margin-left: -2.2222em; /* 40px */
}
li {
	margin-left: 0;
}
form {
	margin: 0 2.5em; /* 40px */
}
form li input,
form li select,
form li textarea {
	width: 61.8034%;
}

/* @end Elements */

/* @group Classes */

/* @group buttons  */

button,
.button,
.networking a {
	font-size: 0.875em; /* 14px */
}
.nav button {
	font-size: 0.75em; /* 12px */
}

/* @end */

/* @group hAtom */

.hfeed {
	padding-left: 2.5em; /* 40px */
}
.hentry,
li.hentry {
	margin-left: -2.5em; /* 40px */
	padding-left: 2.5em; /* 40px */
}
.hentry h3.entry-title {
	margin-left: -2em; /* 40px */
	padding-left: 2em; /* 40px */
	padding-right: 2em; /* 40px */
}

/* @end hAtom*/

/* @group feed */

.feed li {
	clear: both;
	position: relative;
	overflow: hidden;
}
.feed .data {
	width: 38.1966%;
	min-width: 330px;
	margin-left: 2.5em; /* 40px */
	clear: left;
	float: left;
}
.feed .description {
	clear: right;
	margin-left: 38.1966%;
	padding-left: 5em; /* 80px */
	margin-top: 0.5em; /*  8px */
}

/* @end feed */
/* @group prose */

.prose p,
.prose li,
.prose dl {	
	margin-left: 2.5em; /* 40px */
}
.prose .instructions li {
	margin-left: 2em; /* 40px */
}
.prose ul,
.prose ol {
	margin-bottom: 1em;
}
.prose ul li {
	list-style: disc;
}

/* @end prose */

/* @end Classes */

/* @group Structure */

.nav,
.header,
.message,
.section {
	display: block;
	margin-left: 2.5em; /* 40px */
	margin-right: 2.5em; /* 40px */
	max-width: 90em;
	position: relative;
	overflow: hidden;
	zoom: 1; /* this causes me great pain */
}

/* @group nav */

.nav {
	padding: 0.25em 0; /*  4px */
	margin-right: 0;
}
.nav ul {
	display: inline;
	position: relative;
	float: left;
	margin-left: 2.5em; /* 40px */
}
.nav li {
	display: inline;
	margin: 0 0.25em 0 0; /*  4px */
}
.nav li a {
	display: inline-block;
	font-size: 1em;
}
.nav form {
	float: right;
	margin: 0 0 0 2.5em; /* 40px */
}

/* @end nav */

/* @group header#logo */

.header#logo {
	margin: 3.75em 2.5em 0.0625em; /* 60px 40px 1px */
}
.header#logo img,
.header#logo object {
	padding-left: 1em; /* 40px */
}
.header#logo a {
	background-image: url(data:image/gif;base64,R0lGODlhKAAPAPcAAP///yksLvb39zc8Qp6goyAiJRgaHCIkJhQWGT5BRVFVWRcYGisuMCYpK1xhZWxyexIWGG1yduXm6TE0Nj1AQ/r6+h4hJGFpchYYGY2RloOGiv7+/kVJTH2Bhb7AxUNGSRYaHsbIykBERy4xM/n5+f39/RgZGnF1emRpbyYpLDE1OTk9QBQWF9na3dvc3h4jKR8gIuHi4iImKSgrLr2+vhocHs3Oz6qtrpufpdTV2S4zOcDCxENJThwfIrCztDI2OERHSaKkpkJFRxweIDY5Om5wcnp9giUnKWZqcq+ytBseIdLS06WoqklNURsiKsLEyhwgIayusPP09FFVV3Z5ex4iJRkcHh8lKnx+hTk7PhweHhMWFzU6P4iNlhIUFxoeIT0/QkxRVK+xtLS3un+Difj4+B0gIzAyNL6/wPHx8g4REh0gJN7f4hkcHS0xNLO1tRASFMnJy3d9hVldYh0gIq2wth0fIe7u7ktPUjAyM6mvuTI4Pe/v8FtfY19hZfLy8xscHX6Agqipq2RoaRoeIKanqE5TVSQlJx0eIezs7O3u79LU1RwgIkpNUDQ2OTI3PHd7gNfY293e3lpdXiEhI0FDRsPExVtfZMvO1a+yuBweIZucoScqK5yeouvs7ebn58LDw7e6v8bGx+jp6nN1dyInLB0hI7i7w5OXnUpPVJGSlLm6u7u8vf79/R4hJkRJS/T09fX29mhqbWludp6iqEhLTh4iJhseHywxM0xOURcaG3uAh9/h47S1thkdII+WohsdIGBmbTE1O66xsvv7+42Qkn2DilFWXTg8PxAUFREUFjQ4PFdcXzc5PDc6PYiMk4yPlGttcRETFG1vcRkeJhofIby/xxseIBsfIYKEhZiZnZmcnZyenyQoK01QU+3t70dOVU9QVElPWC4wMSMoKzw+PyEoLhwfIefo6F5fYoGHkO3u7T9FTVRYW1ZaXsjJzXyBiMvMzV5iY9HT1VldYYuRmZidpc/R1vz8/Pz9/aWor6eorKerrvDw8bu9wgAAACH5BAEAAAAALAAAAAAoAA8AAAj/AAEIJAGA2LpP8SzdIEAgiI84llYJomHjzoZYAjMKLCNwQysBfPqVEbAIjQ8xGVAo4PLCyZUBex4loNANRCkR8opxAyWpBEEp796gScKPCQ5UtN4N48FugA5z1Jw40SHsVQIVB5RAqHGgyosvEGQsE+HnDYAdEVAcE3cB3AV1v/TkkDMrGBkyKJDUg8ajmxkZuizIoJDiXAFyjKr5MgBhhpEwyCIgeQBPzoMMvCQA8HSRWIl8f5JACgDixwdm7bw54GIAmCkLa17b6WHrSwMsKJ4ZO9UFRwyNGuMM4KKiyRR6CqyucOfMThsodOgUuAUFmxkL2YzgwCEB0xM2G4AL/6yQac4rRzAOLRixot2HCUJGNChgZci1Nm1qWJkWKsS9b2w84UIJ4mVEhSsHFEDIEWfUwoEIAdQwTjlEaLKAAQYsYIIypADQQhob5OCBZgUK5EIT3uTSyAcNNBMAGM5Iw4IJQ6SQgCMHtGEFHLIAAMsfAFhjzzwYlZjIJBAgMgQL0kyAxxRgtKGLFoAUcAYlBhzQABxFjDLGDQDos8sYxJQIQAlLhDNDAAz8kAUQM1RSwAJDYIDBFnZy0oAa6YjRgQaRnNBBHVKYKVA2PQQQwBFbEAHEAV4gYCcLyXgBAxWBUBDNPpd0kEEqEXRBopkxCFEABAgwMIISFgQwQh4TNFEDhB+CpNFCFNqQMgEWffwQgSotGCrQEqLQsE0UhQQRRC+s0ICGDejgQ1AOm5yACy5zuIGMCEX4I+xAAFQggEBFFqhIJycMUoQDQjhgyAk+BAQAOw%3D%3D);
	background-repeat: no-repeat;
	background-position: -40px 75%;
}
.header#logo a:hover,
.header#logo a:focus {
	background-position: 0 75%;
}

/* @end header#logo */

/* @group section */

.section {
	clear: both;
	padding-bottom: 2.5em; /* 40px */
}
.section h2 {
	padding-left: 1.4286em; /* 40px */
}

/* @group section header */

.section .header {
	max-width: 90em;
	margin: 0 0 2.5em; /* 40px */
	padding-left: 2.5em; /* 40px */
}
.section .header.vcard h1 {
	margin-left: -1em; /* 40px */
	padding-left: 1em; /* 40px */
	background-repeat: no-repeat;
	background-position: left;
}
.section .header .section {
	overflow: visible;
}
.section .header .aside h2 {
	padding-top: 0.07em; /* 2px */
	padding-bottom: 0.07em; /* 2px */
}
.section .header .aside .pagination {
	margin-bottom: 0;
}
/* @end section header */

/* @group section section */

.section .section {
	width: 61.8034%;
	min-width: 330px;
	float:  left;
	margin-left: 0;
	margin-right: 0;
	padding-bottom: 0;
}
.section .section form li input,
.section .section form li select,
.section .section form li textarea {
	width: 100%;
}
.section .section .hentry h3.vcard a.url img.photo {
	margin-left: -2em;  /*-40px */
}
.section .section .sorting {
	float: right;
	padding-top: 1em; /* 16px */
}

/* @end section section  */

/* @group section nav */

.section .nav {
	margin: 0;
	padding: 0;
	min-width: 0;
}
.section .nav h2 {
	padding-left: 0.7143em; /* 20px */
}
.section .nav .tags {
	padding-left: 1.4286em; /* 20px */
	text-align: left;
}
.section .nav .tags a {
	display: block;
}

/* @end section nav */

/* @group about */

.about {
	clear: both;
	overflow: hidden;
}
.about h2 {
	border: none;
}
.about .prose {
	margin: 0 25%;
}
.about .illustration {
	width: 25%;
	max-width: 300px;
	margin-bottom: 2.5em; /* 40px */
}
.about .before {
	float: left;
	margin-right: 2.5em; /* 40px */
}
.about .after {
	float: right;
	margin-left: 2.5em; /* 40px */
}

/* @end section about */

/* @end section */

/* @group aside */

.aside {
	width: 38.1966%;
	float: right;
	position: relative;
	overflow: hidden;
}
/*	This is the only concession I'm making to IE6. */
* html .aside {
	width: 33.3333%;
}
/*	A little part of me just died. */

.aside h2 {
	margin-left: 1.4286em; /* 40px */
	padding-left: 1.0714em; /* 30px */
}
.aside .info {
	padding-left: 1.875em; /* 30px */
}
.aside .info {
	margin-left: 2.5em; /* 40px */
	margin-bottom: 2.5em; /* 40px */
}
.aside .tags {
	margin-left: 2.8571em; /* 40px */
	margin-bottom: 2.8571em; /* 40px */
}
.aside .pagination {
	margin-top: -2.5em; /*-40px */
	margin-bottom: 2.5em; /* 40px */
}
.aside blockquote {
	margin-left: -1.6667em; /* 30px */
	padding-left: 1.6667em; /* 30px */
}

/* @group aside hfeed */

.aside .hfeed {
	padding-bottom: 3.75em; /* 60px */
}
.aside .hentry {
	margin-left: 0;
	padding-left: 1.875em; /* 30px */
}
.aside .hentry+.hentry {
	border-top: 0;
	margin-top: 0;
}
.aside .hentry h3.vcard a.url img.photo {
	margin-left: -1.5em; /*-30px */
}
.aside .hentry form li input,
.aside .hentry form li select,
.aside .hentry form li textarea {
	width: 90%;
}

/* @end aside hfeed */

/* @group aside share */

.aside .share li {
	list-style: none;
	overflow: hidden;
}
.aside .share label {
	width: 4em;
	float: left;
}
.aside .share input {
	width: 75%;
	float: right;
	font-family: "Courier New", monospace;
	font-size: 12px;
	line-height: 1;
}

/* @end aside share */

/* @end aside */

/* @group footer */

.footer {
	clear: both;
	margin-top: 2.5em; /* 40px */
	padding: 2.5em 2.5em 5em 5em; /* 40px 80px */
}
.footer dt {
	width: 5em; /*100px */
	float: left;
}
.footer dd {
	margin-left: 7.5em; /*120px */
}

/* @end footer*/

/* @end Structure */

@media all and (max-width: 60em) {
	.section .section,
	.section .aside {
		width: 50%;
		min-width: 0;
	}
}
@media all and (max-width: 50em) {
	.nav ul,
	.nav form {
		float: none;
	}
	.nav form {
		margin-top: 1em; /* 16px */
	}
	.header#logo {
		margin-top: 1.25em; /* 20px */
	}
	.section .section,
	.section .aside {
		width: 100%;
		float: none;
	}
	.section .aside h2,
	.section .aside .info,
	.section .aside .tags,
	.section .aside .hfeed {
		margin-left: 0;
	}
	.section .aside .hfeed {
		padding-left: 0;
	}
	.section .header .aside {
		width: auto;
		margin-left: -2.5em; /*-40px */
	}
	.section .header .aside h2 {
		padding-left: 1.4286em; /* 40px */
	}
	.feed .data {
		width: auto;
		float: none;
	}
	.feed .description {
		margin-left: 0;
		padding-left: 2.5em; /* 40px */
	}
	.footer .aside {
		width: auto;
		float: none;
	}
	.footer .aside h2,
	.footer .aside .info {
		margin-left: 0;
		padding-left: 0;
	}
}