<!-- css3-mediaqueries.js for IE8 or older -->
<!--[if lt IE 9]>
    <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

body {
}

html * {
	font-family: Arial, Helvetica, sans-serif;
}

a, a:visited, a:active {
	color: #000;
    text-decoration: none;
    border-bottom: 1px #000 dotted;
}

a:hover {
    color: #8c001a;
    text-decoration: none;
    border-bottom: 1px #8c001a solid;
}

h1 {
	font: bold 36px/100% Arial, Helvetica, sans-serif;
}

#pagewrap {
	padding: 5px;
	width: 960px;
	margin: 20px auto;
}

#header {
	padding: 20px 20px 20px 20px;
    background-color: #8c001a;
    color: #fff;
	margin-bottom: 5px;
}

#content {
	width: 920px;
	float: left;
	padding: 10px 20px 10px 20px;
	margin-bottom: 5px;
}

#footer {
	clear: both;
    background-color: #8c001a;
}

h2 {
    color: #8c001a;
    margin-top: 30px;
}

h4 {
    color: #8c001a;
}

@media screen and (max-width: 980px) {
	#pagewrap {
		width: 94%;
	}
	#content {
		width: 94%;
	}
}

@media screen and (max-width: 700px) {
	#header, #content {
		width: auto;
		float: none;
	}
}

@media screen and (max-width: 480px) {
	#header {
		height: auto;
	}
	h1 {
		font-size: 24px;
	}
}

ul {
    margin: 1em; padding: 0;
}

li {
    margin: 0 0 10px 0;
}

/*
#pagewrap, #header, #content, #footer {
	border: solid 1px #ccc;
}
*/

#photo {
    content:url(img/me.jpg);
}
/*#photo:hover {
    content:url(img/real_me.jpg);
*/}

#photo {
    float: left;
    width: 20%;
}

#intro {
    display: inline-block;
    margin-top: 20px;
    width: 95%;
}
#intro p {
    float: left;
    width: 50%;
    padding: 0px 0px 0px 40px;
}

p {
    line-height: 140%;
}

li {
    line-height: 140%;
}

.smallfont {
    font-size: 80%;
}