body { background: #9CF; padding: 2% 0 0 0; }

h1 { width: 70%;
	margin: 0 auto;
	text-align: right;
	background: #FFCE99;
	padding: .8em 0 .8em 0;
	border-top: solid 2px black;
	border-left: solid 2px black;
	border-right: solid 2px black; }

h2 { margin: 2% 20px .2em 20px; padding-bottom: 5px; border-bottom: solid 2px black; clear: both;}

h2 a { text-decoration: none; }

h2 .doc { font-size: .8em; }

h3, h4 { margin: 2% 20px 0 20px; }

#nav { width: 70%; margin: 0 auto; position: relative; top: -28px;  }

#nav ul { list-style: none; margin: 0; padding: 0; height: 0;}

#nav li { text-align: center;
	margin: 0 2px;
	background: url(tabright_off.gif) no-repeat right top;
	height: 28px;
	float: left;
}

body.home #home, body.WebDev #WebDev, body.Resume #Resume, body.Read #Read { height: 30px;
	background: url(tabright_on.gif) no-repeat right top;
}

#nav li a	{
		color: black;
		font-weight: bold;
		padding: 5px 20px 0 20px;
		height: 23px;
		background: url(tableft_off.gif) no-repeat left top;
		display: block;
		text-decoration: none;
		/* makes it so display: block; actually works in IE. breaks firefox */
		width: 100%;
		}

/* fixes width in firefox */
html>body #nav li a
		{
		width: auto;
		}

body.home #home a, body.WebDev #WebDev a, body.Resume #Resume a, body.Read #Read a { background: url(tableft_on.gif) no-repeat left top;
	height: 25px;
	}

#nav li a:hover { color: blue; }

img.curve {float: left; clear: left; margin: -2px 2px 2px -2px; position: relative;  }

#content {  border: solid 2px black;  width: 70%; margin: 0 auto; padding-bottom: 20px; background:  white; min-height: 30em;}

#content p { margin: 0 20px 2% 20px; }

#footer { color: black; text-align: center; }

#rdmimage { text-align: center;  }

#rdmimage img { width: 400px; border: none; }

div.spacer { clear: both; }

div.thumb { float: left;  width: 200px; height: 300px; margin: 10px; text-align: center; }

div.thumb img { border: solid .2em gray; }