/* Misc. customizations */

h2.imgtitle {
	float: left;
}

div.imagetitle, span.imagetitle {
	font-weight: bold;
}

div.prevnext {
	clear: both;
	text-align: right;
}

h2 + div.prevnext {
	clear: none;
	float: right;
	margin-left: 2em;
}

div.breadcrumb {
	clear: right;
	float: right;
	text-align: right;
	font-weight: bold;
	padding: 1em 0em;
	margin-left: 2em;
}

div.maindisplay {
	clear: both;
	text-align: center;
}

div.maindisplay img {
	margin: 1em 0em;
	max-width: 100%;
}

p.description {
	padding-top: 1em;
	clear: left;
}



/* Tables */

/* The page flow is achieved by placing an image and a table inside a div.
 * The div has text-align set to "center" to make it look pretty.
 * The table's display style is set to "inline-block".
 *     That way it acts like a replaced element (like an image).
 * Both the table and the image have vertical-align set to "middle".
 *     This puts their middles at the same height if they're on the same line.
 * Finally, the image has max-width set to 100%, to let it scale with the page.
 *     Its horizontal margins are zeroed, in case they would interfere.
 */

table {
	display: inline-block;
	vertical-align: middle;
	margin: 1em;
	border-spacing: 0.1em;
	background: #7ad;
}

th, td {
	background: #bdf;
	padding: 0.2em;
}
th {
	text-align: right;
}
td {
	text-align: left;
}

td > ul {
	padding-left: 1em;
}



/* Image listing */

ul.imagelist > li {
	display: block;
	list-style-type: none;
	float: left;
	width: 22em;
	height: 9em;
	margin: 0.5em;
}

/* Make spacing and dimensions work out */
ul.imagelist img {
	max-height: 8em;
	max-width: 8em;
}
ul.imagelist span.imagetitle {
	margin-left: -1em;
}
ul.imagelist span.imagecontainer {
	text-align: center;
	height: 8em;
	width: 8.5em;
	margin-right: 1.0em;
}
ul.imagelist span.verticalspacer {
	height: 8em;
	width: 0.5em;
}

/* verticalspacer exists mostly to let vertical-align: middle work its magic.
 * It also provides imagestats's left padding. */
ul.imagelist span.imagestats, ul.imagelist span.verticalspacer, ul.imagelist span.imagecontainer {
	display: inline-block;
	vertical-align: middle;
}

ul.imagelist span.imagestats {
	width: 11.5em;
}

/* Make the links pretty */
ul.imagelist > li > a {
	display: block;
	width: 21em;
	height: 8em;
	padding: 0.5em;
	text-decoration: none;
	background: #bdf;
}
ul.imagelist > li > a:hover {
	background: #cef;
}



/* Forms */
div.prevnext select, div.prevnext input {
	width: auto !important;
}
div.prevnext input[type="submit"] {
	padding: 0em;
	margin: 0em;
}