/*
  Landscape styles
  Author: Tom W.M. <http://freecog.net/>
  Created: July 29, 2006
  Modified: 
*/


/* White space reset */
html, body, div, p, blockquote,
h1, h2, h3, h4, h5, h6, pre,
label, ul, ol, dl, dt, dd, li,
fieldset, address {
	margin: 0;
	padding: 0;
}
li, dd {
	margin-left: 5%;
}
li {
	list-style: square;
}
fieldset {
	padding: .5em;
	padding-top: .2em;
	padding-bottom: .75em;
}
blockquote {
	margin-right: 5%;
	margin-left: 5%;
}
p {
	text-indent: 5%;
}
.noindent,
blockquote p:first-child {
	text-indent: 0;
}
pre, ul, ol, dl, blockquote {
	margin-top: 1em;
	margin-bottom: 1em;
}

h1 {
	font-size: 2em;
	font-weight: normal;
}
h2, h3, h4, h5, h6 {
	font-weight: normal;
	font-style: italic;
}

:link,
:visited {
	text-decoration: underline;
	color: #ddd;
}
:visited, 
:link:active,
:visited:active {
	color: #555;
}
:link:hover,
:visited:hover {
	color: white;
}

h2 {
	clear: left;
	padding-left: 50px;
	background: url(h2-dithered.png) no-repeat bottom left;
	margin-left: -50px;
	min-height: 38px;
}

.sidebar {
	float: right;
	width: 12em;
	max-width: 40%;
	margin: .5em 1.5em;
	margin-right: -10%;
	background: #111 url(black-tear-bottom.png) no-repeat bottom left;
	padding: .25em 1em;
	padding-bottom: 30px;
	font-size: .8em;
	line-height: 1.6;
}

/* Layout */

html, body {
	position: relative;
	overflow: hidden;
	width: 100%;
	height: 100%;
	color: #ddd;
	background: black;
}

body {
	background: url(SilhouetteBW.png) no-repeat bottom right;
	font: .9em Helvetica, Arial, sans-serif;
}

#head {
	position: absolute;
	top: 10px; right: 40px;
	z-index: 3;
}

#head img {
	letter-spacing: -.085em;
	text-align: right;
	font-family: Helvetica, Arial, sans-serif;
	text-transform: lowercase;
	color: white;
	font-size: 50px;
}

#nav {
	position: absolute;
	right: 40px;
	top: 100px;
	text-align: right;
	line-height: 2;
	width: 250px;
	z-index: 3;
}
#nav li {
	list-style: none;
}

#doc-wrap {
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 100%;
	overflow: auto;
	overflow-x: hidden;
	z-index: 2;
	background: url(top-left.png) no-repeat -20px -20px;
}

#document {
	margin-left: 13%;
	margin-right: 150px; /* static */
	padding-right: 20%; /* flexible */
	padding-top: 2em;
	padding-bottom: 170px; /* height of bottom image */
	color: #ddd;
	line-height: 1.8;
}

/* Forms */
div.form {
	overflow: hidden;
	margin: 1em 0;
}

p.formitem {
	text-indent: 0;
	overflow: hidden;
}
p.formitem label {
	display: block;
	float: left;
	width: 30%;
}
p.formitem input {
	float: left;
}
p.formitem span.desc {
	display: block;
	float: left;
	width: 40%;
	margin-left: 2%;
	font-size: .9em;
}


/* Decorative elements */

#mountain {
	position: absolute;
	bottom: 0; right: 100px;
	height: 50px;
	width: 1006px;
	background: url(SilhouetteBW.png) no-repeat bottom left;
	z-index: 4;
}

/* Prepare for crazy DIV mess!  This is necessary to avoid
   blocking click-throughs in transparent areas of the mountain
   image */
#mt0, #mt1, #mt2, #mt3, #mt4, #mt5,
#mt6, #mt7, #mt8, #mt9, #mt10, #mt11 /*, #mt12*/ {
	position: absolute;
	bottom: 0; right: 0;
	width: 100px;
	background: url(SilhouetteBW.png) no-repeat bottom right;
	background-attachment: fixed;
}

#mt0 {
	right: 780px;
	height: 66px;
}

#mt1 {
	right: 700px;
	height: 100px;
	width: 80px;
}

#mt2 {
	right: 580px;
	width: 120px;
	height: 130px;
}

#mt3 {
	right: 540px;
	width: 40px;
	height: 100px;
}

#mt4 {
	right: 440px;
	height: 89px;
}

#mt5 {
	right: 390px;
	width: 50px;
	height: 105px;
}

#mt6 {
	right: 340px;
	width: 50px;
	height: 120px;
}

#mt7 {
	right: 300px;
	width: 40px;
	height: 137px;
}

#mt8 {
	right: 250px;
	width: 50px;
	height: 160px;
}

#mt9 {
	right: 200px;
	width: 50px;
	height: 180px;
}

#mt10 {
	right: 80px;
	width: 120px;
	height: 220px;
}

#mt11 {
	right: 0;
	width: 80px;
	height: 180px;
}
/*
#mt12 {
	right: 0;
	width: 100px;
	height: 150px;
}*/