/* Created using Style Master from Western Civilisation { 286 118 451 409 } */

body {
	font-family: Verdana, Helvetica, Arial, sans-serif;
	font-size: 11px;
	color: #4f516e;
	text-align: left;
	padding: 0px;
	margin: 0px;
 }

/*NOTE: I had to use margin-left here for IE5 OSX
to get it to position, and below I had to use margin-top for IE6*/

div#header {
	width: 80%;
	position: absolute;
	top: 45px;
	height: 30px;
	margin-left: 10%; 
	background-color: transparent;

}

div#main {
	position: absolute;
	height: 416px;
	width: 80%;
	left: 10%;
	top: 90px;
	text-align: left;
	letter-spacing: .02em;
	line-height: 2em;
	word-spacing: -2px;
	background-color: transparent;
	bottom: auto;
	clear: left;
	border: 1px #dddddd dotted; 
}

div#linkContainer {
	position: absolute;
	right: 0px;
	width: 150px;
	background-color: transparent;
	top: 0%; 
}
div.storyContainer {
	position: absolute;
	width: 400px;
	left: 20%;
	right: auto;
	top: 7.5em;
	text-align: center; 
}


div.links {
	width: 100px;
	height: 20px;
	background-color: #fdfdfd;
	position: relative;
	right: 0px;
	text-align: right;
	left: auto; 
}

div.boxedDiv {
	position: relative;
	height: 25px;
	width: 124px;
	border: 1px #a6a6a6 solid;
	margin: 0px;
	right: 0px;
	float: right;
	margin-bottom: 10px;
	z-index: 100;
	text-align: center; 
}

div.boxedDiv span.name {
	font-family: Verdana, Helvetica, Arial, sans-serif;
	font-size: 9px;
	color: #747474;
	font-weight: bold;
	letter-spacing: .55em;
	text-align: center; 
}


span.boxed {
	border: 1px #000000 solid;
	background-color: #de68cd;
	padding-left: 5px;
	padding-right: 0px; 
}

img.lowerleft {
	position: absolute;
	bottom: 0px;
	border: 1px #7f7f7f solid;
	right: 0px; 
}

div.text {
	position: absolute;
	top: 0px;
	left: 0px;
	border: 1px #a1a1a1 none;
	width: 68%;
	text-align: left;
	border-left: 1px #666666 none;
	border-bottom: 1px #666666 none;
	bottom: 0px; 
}

div.textLinks {
	width: 90%;
	text-align: left;
	margin-left: 5%;
	margin-top: 1.2em;
	background-color: #d4d4d4;
	position: relative;
	height: 80%; 
}
div.linksLeft {
	width: 20em;
	margin-left: 6%;
	margin-top: 0;
}
div.linksRight {
	width: 260px;
	height: 322px;
	top: 13%;
	margin-left: 40%;
	background-color: white;
	position: absolute; 
}

span.booktitle {
	text-transform: capitalize;
	color: #aeaeae;
	font-family: Verdana, Helvetica, Arial, sans-serif;
	font-size: 10px; 
}

p {
	margin-bottom: .1em;
	text-align: left;
	color: #000;
	font-size: 10px; 
}

p.story {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 21px;
	text-align: center;
	line-height: 1.3em; 
}

p.credits {
	text-align: left;
	color: #838383;
	font-size: 11px;
	margin-left: 8%; 
}

ul.credits {
	list-style: none;
	width: 25%;
	font-weight: bold;
	clear: left;
	text-align: left; 
}
ul.creditsRight {
	list-style: none;
	width: 25%;
	font-weight: bold;
	margin-right: 20%;
	position: relative;
	top: 0; 
}
span.name {
	color: #dc080f; 
}
/* ===========headers============ */
/*
h1 {
	font-family: Verdana, Helvetica, Arial, sans-serif;
	font-size: 21px;
	color: #000000;
	text-align: right;
	letter-spacing: .02em;
	padding-bottom: 1px;
	margin-bottom: 0px;
	border-bottom: 1px black solid;
	font-weight: lighter;
	position: absolute;
	width: 100%; 
}
*/
h1 {
	font-family: Verdana, Helvetica, Arial, sans-serif;
	font-size: 21px;
	color: #000000;
	text-align: right;
	letter-spacing: .02em;
	padding-bottom: 1px;
	/*margin-bottom: 30px;*/
	margin-top: 5px;
	border-bottom: 1px black solid;
	font-weight: lighter;
	width: 100%; 
		position: absolute;

}
/*
h2 {
	font-family: Verdana, Helvetica, Arial, sans-serif;
	font-size: 13px;
	text-align: left;
	color: #949494;
	letter-spacing: .2em; 
}
*/

h2 {
	font-family: Verdana, Helvetica, Arial, sans-serif;
	font-size: 13px;
	text-align: left;
	color: #949494;
	letter-spacing: .2em;
	margin-top: 4%;
	margin-left: 8%; 
}

h3 {
	font-family: Verdana, Helvetica, Arial, sans-serif;
	font-size: 9px;
	color: #ccc;
	text-align: left;
	letter-spacing: .01em;
	background-color: transparent;
	/*
	left: 0; 
	top: 32px; ==> doesn't work in IE
okay...I got this h3 for the date to work in IE6 like the other browsers by doing this, margin and absolute. the top positioning didn't work, though it did for the good browsers. Is there extra space for the headers in IE6 like in NN7?
*/
	position: absolute;
	margin-top: 32px; 
}

h3.name {
	color: #d9ae8e;
	letter-spacing: 1.6em;
	margin-left: 16em; 
}

h4 {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 22px;
	text-align: left;
	color: #949494; 
}

h5 {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 14px;
	color: #d0d0d0;
	text-align: center;
	margin-bottom: 1.5em; 
}


span.spacer {
	margin-bottom: 5em; 
}

br.spacer {
	border: 1px; 
}
/* ===========links============ */
a:link {
	color: #1d19ff;
	font-family: Verdana, Helvetica, Arial, sans-serif;
	font-size: 10px;
	text-decoration: none; 
}

a:visited {
	color: #63a2ff;
	font-family: Verdana, Helvetica, Arial, sans-serif;
	font-size: 10px;
	text-decoration: none;
	letter-spacing: .05em; 
}

a:hover {
	color: #FF0000;
	text-decoration: underline; 
}

/* ===NAVIGATION===  First I made my design, then I turned to Zeldman's book and overhauled it in accordance with that */
/*
NOTE (17 Jan 04) I used the underline hack
below to shift the nav 1 px to the right for winIE6
*/
#nav {
	position: absolute;
	top: -1px;
	right: 0px;
/*note: the underline hack below 
for  winIE6
prevents this from validating
*/
	_right: -1px;
	z-index: 10; 
	width: 126px;
	height: 235px;
	
}


#nav ul {
	list-style: none;
	padding: 0;
	margin: 0 0;
	border: 0; 
}
/* setting the nav li width to 126px closed the boxes that contain links and lined them up for everything except IE6
Note: I need to analyze a bit sometime
on jan 16 I added a margin-left to this li and the topnav at the bottom

*/
#nav li {
	text-align: center;
	border-bottom: 1px solid #ccc;
	border-top: 1px solid #ccc;
	width: 126px;
	margin-top: 0px;
	margin-bottom: 3px;
	margin-left: 1px;
	padding: 0px;
	font: 10px/15px "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, arial, helvetica, sans-serif;
	color: #f79b60;
	background: #fdf8f2;
	z-index: 100; 
}

#nav li a {
	display: block;
	font-weight: normal;
	padding: 0;
	border-left: 1px solid #ccc;
	border-right: 1px solid #ccc;
	background: #fff;
	color: #f79b60;
	text-decoration: none;
	width: 124px;
	/* False value for IE4-5.x/Win. */
 	voice-family: "\"}\"";
	voice-family:inherit;
	width: 124px;
	/* You get it. Good value for compliant browers. */

}

#nav li p.mailLInk a {
	display: block;
	font-weight: normal;
	padding: 0;
	border-left: 1px solid #ccc;
	border-right: 1px solid #ccc;
	background: #fff;
	color: #f79b60;
	text-decoration: none;
	width: 124px;
	/* False value for IE4-5.x/Win. */
 	voice-family: "\"}\"";
	voice-family:inherit;
	width: 124px;
	/* You get it. Good value for compliant browers. */

}
html>#nav li a {
	width: 124px;
	/* Be nice to Opera */ 
}



div#imgBox {
	position: absolute;
	top: 180px;
	bottom: 0px;
	border: 1px #979797 solid;
	right: -1px;
	width: 124px;
	height: 235px;
	background-image: url("../images/mejpeg_fade.jpg");
	background-position: -95px -30px; 
}
div.graphic1 {
	background-image: url("../images/tree1.gif");
	position: relative;
	top: 5em;
	right: 8em; 
	width: 260px;
	height: 325px;
}

#nav li a:link {
	color: #63a2ff;
	font-family: Verdana, Helvetica, Arial, sans-serif;
	font-size: 9px;
	text-decoration: none; 
}

#nav li a:visited {
	color: #63a2ff;
	font-family: Verdana, Helvetica, Arial, sans-serif;
	font-size: 9px;
	text-decoration: none;
	letter-spacing: .05em; 
}

#nav li a:hover {
	color: #FF0000;
	text-decoration: none; 
}



#nav li.topnav {
	width: 124px;
	border-top: 1px solid #ccc;
	/*
	background-color: #f8f8f8;
	color: #8d8a88;
	*/
	background-color: #F4F4F4;
	color: #D3D3D3;
	border-left: 1px solid #ccc;
	border-right: 1px solid #ccc;
	letter-spacing: .36em;
	padding: 0em;
	text-align: center; 
	margin-left: 1px;

}

.divider {
margin-left: 3.2em;
}

.white {
	background-color: white; 
}