body
{
	margin: 0;
	padding: 0;
	border: 0;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 15px;
	line-height: 1.4;
	color: #333;
	background: white;
	/* This is just to avoid having the top nav jump left if a vertical
	 * scrollbar appears on some pages but not others.
	*/
	overflow-y: scroll;
}

header
{
	padding-top: 80px;
	background-image: url("../images/bitbabbler.png");
	background-position: center top;
	background-repeat: no-repeat;
}

footer
{
	padding-top: 2em;
	font-size: 11px;
	text-align: center;
	clear: both;
}

h1
{
	margin: 2px 2px 5px;
	padding: 5px;
	clear: both;
	font-weight: bold;
	font-size: 18px;
	line-height: 22px;
	text-align: center;
	color: white;
	border-radius: 11px 11px 3px 3px;
	background: #574630;
	background-image: -webkit-linear-gradient(top, #816f45, #351515);
	background-image: -moz-linear-gradient(top, #816f45, #351515);
	background-image: -o-linear-gradient(top, #816f45, #351515);
	background-image: linear-gradient(to bottom, #816f45, #351515);
	box-shadow: 0px 1px 2px black;
}

h2
{
	margin: 0.5em;
	padding: 5px 10px 5px;
	clear: both;
	font-weight: bold;
	font-size: 17px;
	line-height: 20px;
	text-align: center;
	color: white;
	border-radius: 27px 27px 5px 5px;
	background: #574630;
	background-image: -webkit-linear-gradient(top, #816f45, #351515);
	background-image: -moz-linear-gradient(top, #816f45, #351515);
	background-image: -o-linear-gradient(top, #816f45, #351515);
	background-image: linear-gradient(to bottom, #816f45, #351515);
	box-shadow: 0px 1px 2px black;
}

h3
{
	margin: 0.7em 1em 0.3em;
	font-size: 17px;
	line-height: 20px;
	text-align: center;
	text-shadow: 0px 0px 15px #feaa00;
	color: #b34f07;
	border-bottom: 1px dotted #bbb;
}

h4
{
	margin: 0.5em 1em 0.3em;
	font-size: 16px;
	line-height: 18px;
	text-align: center;
	text-shadow: 0px 0px 1px #feaa00;
	color: #b34f07;
	border-bottom: 1px dotted #bbb;
}

h5
{
	margin: 0.5em 1em 0.3em;
	font-size: 15px;
	text-align: left;
	color: black;
}

h6
{
	margin: 0.5em 1em 0.3em;
	font-size: 15px;
	text-align: center;
	color: #b34f07;
}

p
{
	/* We need to use zero top margin here, otherwise the multi-column
	 * layout will add multiple margin gaps at the top when a paragraph
	 * flows into the second column from the first.  Firefox 31.4.0 adds
	 * the top margin to the top of the div, even when the paragraph
	 * doesn't start at the top of the column.  Which seems like a bug,
	 * but deal with what we've got ...
	 */
	margin: 0em 0.75em 0.75em;
}

p.topmargin
{
	margin-top: 1.5em;
}

a
{
	text-decoration: none;
}

a:hover
{
	text-decoration: underline;
}

.navbox
{
	/* The black spot */
	background: url("data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=")
			repeat-x bottom;
}

nav a
{
	display: inline-block;
	float: left;
	margin-top: 2px;
	padding: 5px 20px;
	font-weight: bold;
	color: white;
	border-radius: 7px 7px 0 0;
	border-width: 1px 1px 1px;
	border-style: solid;
	border-color: #404040;
	background: #676768;
	background-image: -webkit-linear-gradient(top, #41474b, #4f4f59, #676768, #878787, #bdbdbd);
	background-image: -moz-linear-gradient(top, #41474b, #4f4f59, #676768, #878787, #bdbdbd);
	background-image: -o-linear-gradient(top, #41474b, #4f4f59, #676768, #878787, #bdbdbd);
	background-image: linear-gradient(to bottom, #41474b, #4f4f59, #676768, #878787, #bdbdbd);
	box-shadow: 1px -1px 5px gray;
}

nav a:hover
{
	opacity: .80;
	filter: alpha(opacity=80); /* IE 8 */
	text-decoration: none;
}

nav a.you-are-here,
nav a:hover.you-are-here
{
	margin-top: 0px;
	padding: 6px 20px;
	color: #febe06;
	opacity: 1.0;
	border-bottom-color: #dddddd;
	box-shadow: 2px -5px 5px #999;
}

figure
{
	margin: 0.5em 3em;
	font-weight: bold;
	text-align: center;
}

figure img
{
	max-width: 100%;
}

code
{
	font-size: 85%;
}

.rj
{
	text-align: right;
}

.single-col
{
	margin-left: 1em;
	margin-right: 1em;
}

.multi-col
{
	/* We use zero column gap here, because if the text is in paragraphs,
	 * they already add side margins and the gap gets too wide otherwise.
	 */
	margin-left: 1em;
	margin-right: 1em;
	-webkit-column-width: 25em;
	-webkit-column-count: 2;
	-webkit-column-gap: 0em;
	-moz-column-width: 25em;
	-moz-column-count: 2;
	-moz-column-gap: 0em;
	column-width: 25em;
	column-count: 2;
	column-gap: 0em;
	text-align: justify;
}

.multi-col blockquote
{
	margin: -0.5em 1em 0.5em;
	padding: 0.5em;
	font-size: 14px;
	line-height: 1.2;
	text-align: left;
	background: #f6f0dd;
	border-radius: 3px;
}

.multi-col ul
{
	margin-right: 1em;
	padding-left: 1em;
}

.multi-col ol
{
	margin-right: 1em;
	padding-left: 2.5em;
}

.multi-col li
{
	margin-bottom: 0.5em;
}

.highlight-box
{
	margin: 1em 10%;
	padding: 1em;
	background: #f6f0dd;
	border-radius: 11px;
	box-shadow: 1px -1px 5px #968926;
	text-align: justify;
}

.highlight-box ul
{
	margin-right: 1em;
	padding-left: 1em;
}

.highlight-box li
{
	margin-bottom: 0.5em;
}

.pre-apt
{
	margin: 0.5em 5%;
	margin: 0em 0em 0.75em 2em;
	white-space: nowrap;
	font-family: monospace;
	font-size: 85%;
}

.pre-ent
{
	display: table;
	margin: 0.5em auto;
	padding: 0.3em 1em;
	white-space: pre;
	font-size: 13px;
	line-height: 1.3;
	overflow-x: auto;
	background: #f6f0dd;
	border-radius: 5px;
}

.screencap-monospace
{
	display: table;
	margin: 0.5em auto;
	padding: 0.3em 1em;
	white-space: pre;
	font-family: monospace;
	font-size: 10px;
	line-height: 0.9;
	overflow-x: auto;
	background: #f6f0dd;
	border-radius: 5px;
}

.screencap-mono-wide
{
	display: table;
	margin: 0.5em auto;
	padding: 0.3em 1em;
	white-space: pre;
	font-family: monospace;
	font-size: 10px;
	line-height: 1.2;
	overflow-x: auto;
	background: #f6f0dd;
	border-radius: 5px;
}

.table-dhsummary
{
	display: table;
	margin: 0.5em auto;
	padding: 0.3em 1em;
	background: #f6f0dd;
	border-radius: 5px;
}

.table-dhsummary pre
{
	margin: 1em 0.3em;
	font-size: 10px;
	white-space: pre;
	font-family: monospace;
}

@media only screen and (max-width: 640px) {
	.screencap-mono-wide	{ font-size: 9px; }
}

@media only screen and (max-width: 510px) {
	.screencap-mono-wide	{ font-size: 7px; }
}

@media only screen and (max-width: 460px) {
	.pre-ent		{ font-size: 12px; }
}

@media only screen and (max-width: 450px) {
	.screencap-monospace	{ font-size: 9px; }
}

@media only screen and (max-width: 438px) {
	.pre-ent		{ font-size: 11px; }
}

@media only screen and (max-width: 405px) {
	.screencap-mono-wide	{ font-size: 5px; }
}

@media only screen and (max-width: 388px) {
	.pre-ent		{ font-size: 10px; }
	.table-dhsummary	{ font-size: 14px; }
	.table-dhsummary pre	{ font-size: 9px; }
}

@media only screen and (max-width: 355px) {
	.pre-ent		{ font-size: 9px; }
	.pre-apt		{ margin-left: 1em; }
	.screencap-monospace	{ font-size: 7px; }
}

@media only screen and (max-width: 330px) {
	.pre-apt		{ margin-left: 0.3em; }
}


@media only screen and (min-width: 550px) {
	.screencap-monospace	{ font-size: 11px; }
	.table-dhsummary pre	{ font-size: 11px; }
}

@media only screen and (min-width: 650px) {
	.screencap-monospace	{ font-size: 13px; }
	.table-dhsummary pre	{ font-size: 13px; }
}

@media only screen and (min-width: 750px) {
	.pre-ent		{ font-size: 14px; }
	.screencap-mono-wide	{ font-size: 11px; }
}

@media only screen and (min-width: 850px) {
	.pre-ent		{ font-size: 15px; }
	.screencap-mono-wide	{ font-size: 13px; }
}


.img-row-x1
{
	margin: 0.3em auto;
	margin: 0 auto;
	text-align: center;
}

.img-row-x1 img
{
	max-width: 100%;
}

.img-row-x2
{
	margin: 0.3em auto;
	margin: 0 auto;
	text-align: center;
}

.img-row-x2 img
{
	max-width: 48%;
}

.left-icon
{
	float: left;
	margin: 0px 5px 5px 0px;
	max-width: 40%;
}

.centered-block
{
	display: table;
	margin: 0 auto;
}

.center-list
{
	margin: 0.7em 10% 1.5em;
	padding: 0.5em 1em 0.3em;
	list-style-position: inside;
	font-weight: bold;
	font-size: 16px;
	background: #e4e6d4;
	border-radius: 11px;
	box-shadow: 1px -1px 5px #968926;
}

.center-list p
{
	font-weight: normal;
	font-size: 15px;
	text-align: justify;
}

.QandA
{
	margin: 1em;
	font-weight: bold;
	font-size: 16px;
	background: #f5f6f0;
	border-radius: 11px;
	box-shadow: 1px -1px 5px #968926;
}

.QandA li
{
	/* The bottom padding here is a bit special.  With FF 31.4.0, if there
	 * is no bottom padding then the margin of any internal element is
	 * collapsed with the li block.  But if there is any padding at all,
	 * the margin is then respected ...
	 */
	margin: 0.5em 0.5em 0.5em 0px;
	padding: 0.5em 0.5em 1px 0.5em;
	border-radius: 11px;
	box-shadow: 1px -1px 5px #968926;
}

.QandA li[style*="zoom-in"]:hover
{
	color: #00f;
	opacity: .60;
	filter: alpha(opacity=60); /* IE 8 */
}

/* This is the simple and portable way to fold the questions, but it kind of
 * sucks, because what you're hovering over jumps about when things close, so
 * moving to the next question is difficult, and you also can't have more than
 * one answer open at a time.  So, bite the bullet and do it with javascript
 * instead (and fall back gracefully to just leaving them all open).
.QandA div { display: none; }
.QandA li:hover div { display: block; }
*/

.QandA p
{
	font-weight: normal;
	font-size: 15px;
}

/* This either needs to come after '.QandA p',
 * or be duplicated as '.QandA p.small', since we need it to trump .QandA p
 */
p.small
{
	font-size: 11px;
	line-height: 1.1;
}

p.medium
{
	font-size: 13px;
	line-height: 1.1;
}

.num-table
{
	margin: 10px auto;
	border-collapse: collapse;
	text-align: center;
}

.num-table caption
{
	caption-side: bottom;
	font-weight: bold;
	font-size: 12px;
}

.num-table thead
{
	background-color: #ddd;
}

.num-table th
{
	border-top: 1px solid black;
	font-size: 11px;
}

.box-cell
{
	border: 1px solid black;
	padding: 0px 2px;
	font-size: 10px;
}

.num-table th.gap-cell
{
	border-width: 1px;
	border-style: dashed none;
	border-color: black;
	padding: 0px 15px;
	background-color: white;
}

.num-table th.lcell
{
	border-left: 1px solid black;
}

.num-table th.rcell
{
	border-right: 1px solid black;
}

.num-table th.vcell
{
	background-color: #ddd;
	border-left: 1px solid black;
	border-bottom: 1px solid black;
	border-top-style: none;
}

@media only screen and (max-width: 430px) {
	.num-table th		{ font-size: 10px; }
	.box-cell		{ font-size: 9px; }
}

@media only screen and (max-width: 380px) {
	.num-table th		{ font-size: 10px; }
	.box-cell		{ font-size: 8px; }
}

@media only screen and (max-width: 335px) {
	.num-table th		{ font-size: 8px; }
	.box-cell		{ font-size: 7px; }
}

@media only screen and (max-width: 320px) {
	.num-table th		{ font-size: 7px; }
	.box-cell		{ font-size: 7px; }
}

@media only screen and (min-width: 550px) {
	.num-table caption	{ font-size: 13px; }
	.num-table th		{ font-size: 12px; }
	.box-cell		{ font-size: 11px; }
}

@media only screen and (min-width: 650px) {
	.num-table caption	{ font-size: 14px; }
	.num-table th		{ font-size: 13px; }
	.box-cell		{ font-size: 12px; }
}

.feedbutton {
	background: #F60 none repeat scroll 0% 0%;
	color: #FFF !important;
	border-width: 1px;
	border-style: solid;
	border-color: #CA9 #930 #310 #C96;
	padding: 0px 0.5em;
	font-family: sans-serif;
	font-weight: bold;
	font-size: small;
	text-decoration: none;
	margin-top: 1em;
}

.blog-box
{
	margin: 1em 5%;
	padding: 0.5em;
	background: #fffcf5;
	border-radius: 11px;
	-webkit-box-shadow: 1px -1px 5px #968926;
	-moz-box-shadow: 1px -1px 5px #968926;
	box-shadow: 1px -1px 5px #968926;
}

.blog-box hr
{
	margin: 1em 10%;
	border: 1px dotted #bbb;
}

.result-table
{
	margin: 10px auto;
	border: 1px solid black;
	border-collapse: collapse;
	text-align: center;
}

.result-table caption
{
	caption-side: bottom;
	font-weight: bold;
	font-size: 13px;
}

.result-table th
{
	padding: 0px 12px;
	background-color: #ddd;
}

.result-table td
{
	border: 1px solid black;
	padding: 0px 12px;
}