/* From http://www.informationarchitects.jp/100E2R/ and others... */

BODY {
	font: 100%/1.45 sans-serif;
	text-rendering: optimizeLegibility;
	max-width: 40em;
	margin: auto;
	padding: 0 8px;
}

/* Multi-Column Layout, conditional on column & column-span support detected by modernizr */

/* Wide 2 column layout */
@media (min-width: 84em) {
	.csscolumns.csscolumns-span .stylobate {
		max-width: 84em;
	}
}

/* Wide Bazooka! 3 column layout! http://www.youtube.com/watch?v=z0cvDxA27e8 */
@media (min-width: 126em) {
	.csscolumns.csscolumns-span .stylobate {
		max-width: 126em;
	}
}

.csscolumns.csscolumns-span .stylobate MAIN {
	-webkit-column-width: 40em;
	-moz-column-width: 40em;
	column-width: 40em;
	
	-webkit-column-rule: 1px dotted #999;
	-moz-column-rule: 1px dotted #999;
	column-rule: 1px dotted #999;
	
	-webkit-column-gap: 2em;
	-moz-column-gap: 2em;
	column-gap: 2em;
}

.csscolumns.csscolumns-span SECTION {
	-webkit-column-break-inside: avoid;
	-moz-column-break-inside: avoid;
	column-break-inside: avoid;
}

.csscolumns.csscolumns-span SECTION.long {
	-webkit-column-break-inside: auto;
	-moz-column-break-inside: auto;
	column-break-inside: auto;	
}

.csscolumns.csscolumns-span FOOTER {
	-webkit-column-span: all;
	-moz-column-span: all;
	column-span: all;	
}

.csscolumns.csscolumns-span H1 {
	-webkit-column-span: all;
	-moz-column-span: all;
	column-span: all;
}

/* Navigation Menu */

NAV {
	text-align: center;
}

NAV UL {
	padding: 0.3em 0 0.3em 0;
	border-color: gray;
	border-width: 0 0 2px 0;
	border-style: solid;
}

NAV LI {
	list-style: none;
	display: inline-block;
	min-width: 3.5em;
}

/* Adjust the navigation layout when the viewport is narrow */

@media (max-width: 30em) {
	NAV .collapsable { display: none; }
}

/* General Elements */

IMG {
	max-width: 100%;
}

CODE {
	white-space: pre-wrap; /* css-3 */
	white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
	white-space: -pre-wrap;      /* Opera 4-6 */
	white-space: -o-pre-wrap;    /* Opera 7 */
	word-wrap: break-word;       /* Internet Explorer 5.5+ */
}

ABBR { border-bottom: thin dotted; cursor: help; }

.screenshot {
	width: 100%;
	height: auto;
}

.fauxapplelabel {
	color: gray;
	text-align: center;
}

A[HREF^="http://web.archive.org/"], A[HREF^="https://web.archive.org/"] {
	padding-right: 20px;
	background: transparent url(web-archive.png) no-repeat center right;
}
