/* 
 * Rubénerd Theme v9.5
 * Might work in IE, but haven't checked.
 * 2004-2014 Ruben Schade
 *
 * Obligatory "CSS is a horrible, horrible language" reference.
 *   "But Ruben, before we mixed style and content!"
 *   "But Ruben, I can write it so well!"
 *   "But Ruben, you can use SASS or [other short lived hipster thing]"
 * *BUZZER* Thanks for playing, but doesn't excuse horridness of CSS.
 * Wow, a rant at the beginning. Off to great start here!
 *
 */

/* Main Reset ************************************************************/
* {
    /* Use border-box to include margin,padding,border in width/height */
	-webkit-box-sizing:content-box;
	-moz-box-sizing:content-box;
	box-sizing:content-box;
	-moz-text-size-adjust:100%;
	-webkit-text-size-adjust:100%;
	-ms-text-size-adjust:100%;
}
html, body, h1, h2, h3, h4, form, fieldset, abbr, 
nav ul, nav ul li, nav ol, nav ol li {
	border:0;
	font-weight:normal;
	list-style-type:none;
	margin:0;
	padding:0;
	vertical-align:baseline;
	word-wrap:normal;
}
article, aside, details, figcaption, figure, footer, header, hgroup, 
menu, nav, section { display:block }

/* TOP LEVEL *************************************************************/
html, body {
	background:#fff;
	height:100%;
}
html {
	border-top:10px solid #0066ff;
	/* IE centering */
	text-align:center;
	/* Older Opera needs units for 0 values */
	padding:0px 20px;
}
body {
	color:#000;
	/* X11 "Helvetica" is a raster font, which looks TERRIBLE! */
	font:14px "Helvetica Neue",Arial,"Liberation Sans","BBAlphaSans",sans-serif;
	line-height:22px;
	/* Still my favourite CSS statement. Emblamantic of whole language */
	margin:0px auto;
	/* IE centering */
	text-align:left;
	width:740px;
}
h1,h2,h3 { 
	letter-spacing:-1px;
	/* Friends, don't let friends use this everywhere, unless you like
	the smell of toasted, overheating mobile devices */
	text-rendering:optimizeLegibility;
}
h2 {
	font-size:26px;
	line-height:28px;
}
h3 {
	font-size:22px;
	line-height:30px;
}
img { display:inline }
table { 
	border-collapse:collapse;
	border-spacing:0;
}
td { vertical-align:top }
a, h2 a:hover, h2 a:active { 
	color:#0066ff;
	text-decoration:underline; 
}
a:hover, a:active, h2 a { text-decoration:none; }
pre, code { font-family:Menlo,Monaco,"Source Code Pro","Dejavu Sans Mono","Lucida Console",monospace }
time { white-space:nowrap }

/* Accessibility *********************************************************/
hr {
	/* <hr /> for WAY easier reading in console browsers */
	display:none;
	visibility:hidden;
}
#skip, #skip:hover, #skip:visited, legend {
	/* Hide elements for GUI, still visible for screen readers, consoles */
	height:1px;
	left:0px;
	overflow:hidden;
	position:absolute;
	top:-1000px;
	width:1px;
}

/* Sidebar ***************************************************************/
#sidebar {
	float:right;
	line-height:20px;
	padding-top:50px;
	width:140px;
}
#sidebar h1 a { background:#fff }
#sidebar img { width:100% }

/* Navigation ************************************************************/
nav { padding-bottom:20px }
nav ul, nav li { padding-bottom:10px } 
nav #topics, nav #years {
	display:none;
	visibility:hidden;
}
nav .page { font-weight:bold }
nav a { white-space:nowrap }
nav .category, nav .year { display:inline }

/* Search, with HORRIBLE browser-specific stuff **************************/
/* Safari, maybe Chrome still, but ew Chrome */
::-webkit-input-placeholder { color:#0066ff }
/* FF 18 */
:-moz-placeholder { color:#0066ff } 
/* FF 19+ */
::-moz-placeholder { color:#0066ff } 
/* IE11+ (I think? What even is IE?) */
:-ms-input-placeholder { color:#0066ff }
/* Back to standards */
#search input[type="text"] {
	border:1px solid #e0d9ee;
	font-size:14px;
	padding:2px;
	width:134px;
}
#search input[type="submit"] { visibility:hidden }

/* Section ************************************************************/
#content {
	margin-right:190px;
	padding-top:50px;
}
#breadcrumbs { padding-bottom:40px }

/* Articles ***********************************************************/
article, .pages {
	padding-bottom:80px;
	width:500px;
}
article time {
	font-size:12px;
	text-transform:uppercase;
}
article .articleBody {
	/* Required for expanding code pre */
	position: relative;
}
article .articleBody blockquote {
	border-left:1px solid #ddd;
	font-style:italic;
	margin-left:20px;
	padding-left:20px;
	margin-right:0px;
	padding-right:0px;
}
article .articleBody img { max-width:100% }
article .pilcrow {
	color:#ddd;
	font-size:22px;
}

/* Code ***************************************************************/
article .articleBody pre {
	background:#f6f6f6;
	border:1px solid #ddd;
	font-size:13px;
	line-height:16px;
	margin:20px 0px;
	padding:1em;
	overflow-x:auto;  /* Use scroll to always have a scrollbar */
}
article .articleBody .codeblock { text-align:right }
article .articleBody .codeblock pre { 
	margin-bottom:0;
	text-align:left;
}
article .articleBody .codeblock a { font-size:13px }

/* Tables *************************************************************/
table { margin:20px 0px }
th { background:#f6f6f6 }
th, td { padding:5px 20px }
tr { border-bottom:1px solid #ddd }

/* Footer *************************************************************/
footer {
	margin-right:190px;
	padding-bottom:100px;
}

/* Reponsive 541-800px ************************************************/
@media screen and (max-width: 800px) {
	body {
		margin:0 auto;
		width:500px;
	}
	h1 { 
		float:left;
		margin:0;
		width:120px;
	}
	#sidebar {
		float:none;
		width:100%;
	}
	#sidebar #mascot,
	#sidebar .category,
	#sidebar #search,
	#sidebar nav .year {
		display:none;
		visibility:hidden;
	}
	#sidebar #tagline,
	#sidebar nav {
		clear:right;
		margin-left:140px;	
	}
	#sidebar nav li { float:left }
	#sidebar nav li a { margin-right:8px }
	#sidebar nav #topics,
	#sidebar nav #years {
		display:inline;
		visibility:visible;
	}
	section { padding:0 }
	section, footer { margin:0 }
	#breadcrumbs {
		padding-top:10px;
		text-align:center;
	}

}

/* Responsive 460-540px ***********************************************/
@media screen and (max-width: 540px) {
	body, article, .pages { width:380px }
	section { padding-top:0px }
	article img {
		height:auto !important;
		max-height:auto;
	}
	article iframe { max-width:380px !important }
	#breadcrumbs { padding-top:0px }
	#sidebar nav {
		clear:both;
		margin:0;
		padding-top:20px;
	}
}

/* Responsive 320-460px ***********************************************/
@media screen and (max-width: 460px) {
	body, article, .pages { width:280px }
	article iframe { max-width:280px !important }
}

/* EOF */