html {
	background-color: black;
	color: white;
}

body {
	background-color: black;
	color: white;
	font: normal 82%/1.5 Verdana, Arial, sans-serif;
	margin: 0;
	padding: 0;
	text-align: center;
}

/* Firefox/Opera use font for H1 when images are off. */
h1 {
	font: normal 449% "Flemish Script", "FlemishScript BT", "Flemish Script BT", "Flemish Script II", serif;
	font-size-adjust: 0.28;
	margin: 0.25em auto 0.19em;
}
h2 {
	font: small-caps 177% "Copperplate Gothic Bold", "Copperplate Gothic", Georgia, serif;
	margin: 1em auto 0.3em
}
h3 {
	clear: both; /* for floated screenshots */
	color: rgb(255,207,178);
	font: normal 147% Georgia, serif;
	margin: 1.2em auto 0.4em;
}
	h2 + h3 {
		margin-top: 0.4em;
	}
h4 {
	color: rgb(255,248,100);
	font: italic bold 117% Georgia, serif;
	margin: 1em auto 0.4em;
}
h5 {
	color: rgb(255,153,22);
	font: bold 100% Verdana, sans-serif;
	margin: 1em auto 0.1em;
}

/* Paragraph top margin is zero for reduced margin with headers. Space between
 * paragraphs or lists doesn't seem to be affected, perhaps because of
 * collapsing margins?
 */
p {
	margin-top: 0;
}


a:link    { color: rgb(240,220,110); text-decoration: none }
a:visited { color: rgb(236,118,60); text-decoration: none }
a:active  { color: rgb(255,165,0); text-decoration: underline }
a:hover   { text-decoration: underline }

a img       { border-width: 0 }
img.preview { float: right; padding: 0 0 16px 8px }
img.mapdb   { vertical-align: bottom } /* legacy map database only */

/* I use a graphical "horizontal rule", so I'm using the method as used for
 * heading images in the CSS Zen Garden, except now for the hr tag.
 * The div (with proper size) gets a background, and the hr is hidden.
 */
div.separator {
	background: url("images/separator.jpg");
	clear: both; /* for floated screenshots */
	height: 40px;
	margin: 12px auto;
	text-align: center;
	width: 243px;
}
	div.separator hr {
		display: none;
	}

div#skip {
	margin: 3px 6px;
	position: absolute;
}

/* Top of the pages (top index + page title + host logo) is centered */
#header {	text-align: center }
#host   {	text-align: right }

/* If I bring back position: fixed, I also need top/left/width/z-index, but not
 * margin or padding. But that creates a margin problem (extra margin-top
 * needed for elements or they're obscured when linking to anchors). */
#index {
	background: url("images/top.gif") repeat-x top;
	display: table;
	height: 30px;
	margin: 0;
	padding: 0;
	white-space: nowrap;
	width: 100%;
}
	#index li {
		display: inline;
	}
	#index img {
		margin: 4px 6px;
	}


/* General content is 40em wide (~80 characters), but never wider than the
 * screen (leaving a bit of margin). Align left and center. */
#content {
	margin: auto;
	max-width: 98%;
	position: relative;
	text-align: left;
	width: 40em;
}

/* Page author information. */
address {
	font: italic 100% Georgia, serif;
}

/* Author subtitle, enclosed in H# tag. Used for file attribution. */
span.author {
	font: italic 68% Verdana, sans-serif;
}


#footer {
	text-align: center;
	padding-bottom: 1em;
}

/* The links page has its links in two categories, civ2 on the left, maps on the
 * right. To make the whole look centered the left column is aligned to the
 * right and the right column aligned to the left. */
#civlinks {
	position: absolute;
	right: 51%;
	text-align: right;
	width: 59%;
}
#maplinks {
	left: 51%;
	overflow: hidden;
	position: relative;
	text-align: left;
	width: 59%;
}

/* Links and link info in links.html. */
dl.links {
	margin-top: 0;
}
	dl.links dt {
		font-weight: normal;
	}
	dl.links dd {
		font-size: 85%;
		margin: 0 0 0.75em 0;
	}

/* table space, captions in italic, headers left-aligned */
table {
	margin: 0.8em 0;
}
	caption {
		font-style: italic;
	}
	td {
		padding: 4px;
		vertical-align: top;
	}
	th {
		text-align: left;
}

/* "Advanced Scenario Design" ToC and others: lower levels get letters */
ol ol {
	list-style-type: lower-alpha;
}

/* "Fire!" ToC. First level is in upper romans, first element is the unmarked
 * foreword, so counting starts at 0 (zero), making the second element 1 (one).
 * Counters don't work in IE. Opera can't do any fancy stuff with the counter,
 * like fix its width, let it replace the list marker or align its text.
 */
ul.fire {
	list-style-type: none;
}
	ul.fire li:first-child {
		counter-reset: fire -1;
	}
	ul.fire > li:before {
		content: counter(fire, upper-roman) ". ";
		counter-increment: fire;
	}