@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700,900,400italic);
body { 
	background-color: #f3f3f3; 
	text-align: center; 
	font-family: "Lato", "Segoe UI", sans-serif; 
	color: #777;
}
header img { 
	border: 1px solid #eee; box-shadow: 0 0 30px #ccc; 
	height: auto; max-height: 60%; width: auto; max-width: 100%;
}
h1 { margin: 0; font-weight: 900; font-size: 4.2em; color: #222; }
h2 { margin: 10px; font-weight: 900; font-size: 2.2em; color: #222; }
h3 { margin: 0; font-weight: 300; color: #888; }

red { color: #d05; }
yellow { color: #da0; }
orange { color: #e60; }
gray, grey { color: #666; }
green { color: #0a3; }
blue { color: #05f; }
purple, magenta { color: #d0f; }
cyan { color: #0cf; }

m { font-family: "Consolas", monospace; font-weight: bold; }
k { 
	display:block; font-family: "Consolas", monospace; font-weight: bold; font-size: 1.3em; 
	margin-bottom: 0.3em; margin-top: 1em; padding: 0;
}

@media (max-height: 500px) { header img { display: none; } }

code { margin:10px; tab-size: 4; }
pre > code { font-size: 0.9em;}

a, a:visited { color: #444; text-decoration: none; cursor: pointer; }
a:hover { text-decoration: underline; }
p { margin: 0; padding: 0; }

div#content { color: #000; margin: 20px auto; max-width: 600px; text-align: left;}
div#content p {margin: 0.7em 0; line-height: 1.4em;}
div#content p a {text-decoration: underline;}
div#content p a:hover {color: #888;}
div#content code { 
	border-left: 2px solid #ccc; background-color: #fff; 
	display: block; padding: 5px 10px; font-family: "Consolas", monospace;
}
div#content h2 { 
	font-size: 1.4em; font-weight: 700; margin: 0; 
	padding: 5px 0; border-bottom: 1px solid #ccc; 
	margin-top: 1em;
}
ul { list-style-type: none; margin: 0; padding: 0; } ul li { margin:2px 5px; padding: 2px 10px; } ul li:before { content: "–  "; }

span.active { background-color: #000; color: #f3f3f3; padding: 2px 5px; border-radius: 2px; }