html { height: 100%; }

body {
	font-family: Georgia, serif;
	font-size: 16px;
	line-height: 1.5em;
	color: #111;
	background: #000;
	margin: 0;
	padding: 0;
	height: 100%;
	}
#container {
	position: relative;
	}

.wrapper { max-width: 740px; margin: 0 auto; padding: 0 2em; }
a { color: #800; text-decoration: underline; }

h1, h2, h3, h4 { font-weight: normal; }
h1 { font-size: 1.25em; }
h2 { font-size: 1.125em; }
h3 { font-size: 1em; }
h4 { font-size: 1em; }
p { margin: 1.5em 0; }

sup { line-height: 0; }

blockquote { margin: 0; padding: 1px 1.5em; background: #EEE; font-size: 14px; line-height: 1.5em; }
#content blockquote h4 { margin: 1.5em 0; }

#header { background-color: #000; color: #FFF; border-bottom: 4px solid #800; }
#header a { text-decoration: none; }
#header .inner { border-bottom: 4px solid #FFF; }
#header .wrapper {
	background-image: url(/media/images/mask.png);
	background-position: 96% 100%;
	background-repeat: no-repeat;
	padding-top: 6em;
	padding-bottom: 3em;
	}
#header h1 { letter-spacing: .1em; }
#header h1 a { color: #FFF; border-bottom: none; }
#header h1 span { text-transform: uppercase; font-size: .85em; }

#nav { margin: 0; padding: 0; }
#nav li { float: left; list-style: none; margin: 0; padding: 0; }
#nav li a { display: block; margin-right: 1.5em; color: #888; }

#content { padding: 1.5em 0 4.5em; background: #FFF; }
#content .wrapper { max-width: 600px; }
#content h2 { color: #800; font-weight: bold; font-size: 1.5em; line-height: 1.5em; margin: 2em 0 1em 0; }
#content h3 { }
#content h4 { font-size: 1em; line-height: 1.5em; margin: 3em 0 1.5em; font-weight: bold; }
#content p { }
#content ul { margin: 1.5em 0 1.5em; padding: 0 0 0 1.5em; }
#content hr { background: none; border: none; text-align: center; }
#content hr:after { content: "***********************"; }

#content .haiku { text-align: center; }

#footer {
	background-color: #000;
	color: #FFF;
	border-top: 4px solid #800;
	width: 100%;
	}
#footer .inner { border-top: 4px solid #FFF; }
#footer .wrapper {
	background-image: url(/media/images/elf.png);
	background-position: 4% 100%;
	background-repeat: no-repeat;
	padding-top: 6em;
	padding-bottom: 4.5em;
	}
#footer p { margin-left: 250px; color: #888; font-style: italic; }
#footer a { color: #FFF; text-decoration: none; border-bottom: 1px solid #333; }
#footer a:hover { border-bottom: 1px solid #666; }

p.special, p.drop { margin-top: 3em; }
p.special:first-letter, p.drop:first-letter {
	float: left;
	font-size: 4.5em;
	line-height: .7em;
	font-style: italic;
	margin: -.12em .1em -.1em -.1em;
	}

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

@media screen and (max-width: 600px) {
	body { font-size: 14px; }
	#header .wrapper { padding-top: 1.5em; padding-bottom: 1.5em; }
	#nav li { float: none; }
	#content { padding: 1px 0 1.5em; }
	#footer .wrapper { background-position: 50% 100%; padding-top: 1.5em; padding-bottom: 19.5em; }
	#footer p { margin-left: 0; }
}
@media screen and (max-width: 500px) {
	.wrapper { padding-left: 1.5em; padding-right: 1.5em; }
}