html,
body {
	margin: 0;
	padding: 0;
	height: 100%;
}
body {
	color: #999999;
	background-color: white;
	border: 0;  /* This removes the border around the viewport in old versions of IE */
}

#container {
	min-height: 100%;
	position: relative;
}

#header {
	background-color: #6a1a1a;
	background-image: url("../dingbats/header-texture.jpg");
	color: white;
	font-size: 18pt;
	padding: 10px;
	border-bottom: 2px solid black;
}

#content {
	padding: 0;
	padding-top: 10px;
	padding-bottom: 1.2em;   /* Height of the footer */
	width: 100%;
	position: relative;
}

ul.nav {
	font-size: 10pt;
	margin: 0px;
	padding: 12pt 4px 4px 100px;
	list-style-type: none;
	text-align: right;
	float: right;
}

ul.nav li {
	display: inline;
	margin: 0px;
	padding: 0px 12px;
	text-align: center;
}

ul.nav a {
	text-decoration: none;
	color: white;
}

ul.nav a:hover {
	text-shadow: white 2px 2px 5px;
	font-weight: bold;
	color: white;
}

#image {
	float: left;
	width: 71%;
	/* margin: 20px; */
	margin-top: 20px;
	margin-top: 2%;
	text-align: center;
}

#image img {
	border: 1px solid rgb(51,51,51);
}

/* Vertically center the image */
#distance { 
	width:1px;
	height:50%;
	/* Overridden with an image-specific height: */
	margin-bottom: -180px; /* half of container's height minus 25px */
	float:left;
}
#content {
	margin:0 auto;
	position:relative; /* puts container in front of distance */
	text-align:left;
	/* Overridden with an image-specific height: */
	height: 310px;
	clear:left;
}

#thumbnails {
	width: 21%;
	text-align: center;
	padding-bottom: 30px;
	padding-left: 75%;
}

#thumbnails img {
	padding: 15;  /* Was hspace and vspace, but this doesn't work. */
	border: 0;
	vertical-align: middle;
}

#thumbnails .directions {
	width: 50%;
	display: block;
	float: left;
	padding: 20px 0;
	height: 32px;  /* To prop up the empty div when there's no arrow */
}
#thumbnails hr {
	margin: 2em 0;
}

#footer {
	background-color: #6a1a1a;
	background-image: url("../dingbats/header-texture.jpg");
	color: white;
	clear: both;
	font-size: 18pt;
	/* This trick moves the footer to the bottom of the viewport. */
	/* This would actually do the right thing and place the footer at the
	   bottom of the viewport or of the content, whichever is longer, except
	   that my explicit setting of the height of the content div (in order to
	   center it vertically) pegs it to the bottom of the viewport. Sigh. */
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 1.2em;   /* Height of the footer */
	/* Because of position: absolute, we need to have 0px horizontal padding,
	  but we still want the padding, so we need to add it to a child div */
	padding: 10px 0;
	border-top: 2px solid black;
}
#footer > div {
	padding: 0 10px;
	float: left;
	font-size: 12pt;
}
#footer > .site-title {
	float: right;
	font-size: 18pt;
}

/* Note: I'm using the technique from
 * http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
 * to position the footer at the bottom of the viewport. */

/*
 * And just until I replace the front page of the gallery:
 */
td.highlight {
	background-color: #6a1a1a;
	background-image: url("../dingbats/header-texture.jpg");
}
a:link{ color: #333333 }