pre {
	border-left: 3px solid gray;
	margin-left: 2.5em;
	padding-left: 1em;
}

pre.wrong {
	border-color: red;
}

pre.correct {
	border-color: green;
}

pre.shell code:before {
	content: "$ "
}

#content h1 {
	border-bottom: 1px solid gray;
}

#nav {
	padding-top: 1em;
	padding-right: 1em;
	padding-bottom: 1em;
	display: table;
	border: 1px solid #999;
	background-color: #f9f9f9;
}

#content {
	padding: 0em 2em 1em 2em;
}

span.wrong {
	color: red;
}

span.correct {
	color: green;
}

.anchor:link, .anchor:visited {
	color: #666;
	margin-left: .3em;
	text-decoration: none;
	visibility: hidden;
}

.reference_link, .reference_list {
	display: none;
}

h1:hover > a.anchor,
h2:hover > a.anchor,
h3:hover > a.anchor,
h4:hover > a.anchor,
h5:hover > a.anchor,
h6:hover > a.anchor {
	visibility: visible;
}

.hovervisible {
	/* Dear IE, I hate you. Why must I use a transparent image to get clicks/hover of a block element? */
	background-image: url(data:image/png;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==);
}

.hovervisible * {
	visibility: hidden;
}

.hovervisible:hover * {
	visibility: visible;
}

@media print {

.reference_list {
	display: block;
}

.reference_link {
	display: inline;
}

}