body {
	background-color: white;
	color: black;
	margin:0;
	padding:0;
	font-family: Verdana, ariel, sans-serif;
	font-size: 80%;
	line-height: 1.5em;
}
#header {
	background-color: #E2AEFC;
	color: black;
	padding: 30px 0 3px 0;
}
#header h1 {
	margin: 0 30px 30px 30px;
	font-size: 2em;
}
#navigation {
	margin:0;
	padding:3px 30px;
	background-color: white;
}
#navigation li {
	margin:0;
	padding:0;
	list-style-type: none;
	display: inline;
}
#navigation li a:link, 
#navigation li a:visited,
#navigation li a:hover, 
#navigation li a:active {
	padding: 3px;
	margin: 0 0.5em 0 0;
	font-size: 1.1em;
	line-height: 1.9em;
	white-space: nowrap;
	border: none;
}
#navigation li a:link, 
#navigation li a:visited {
	color: #973CC5;
	background-color: white;
	text-decoration: underline;
} 
#navigation li a:hover, 
#navigation li a:active {
	color: white;
	background-color: #973CC5;
	text-decoration: none;
}
#content {
	overflow: hidden;
	padding: 20px 30px 20px 30px;
	background-color: #F9FCAE;
}
a:link, 
a:visited,
a:hover, 
a:active {
	color: #973CC5;
	text-decoration: none;
	border-bottom: 1px solid #973CC5;
}	
a:visited {
	border-bottom: 1px solid #722D95;
}
a:hover, 
a:active {
	color: white;
	background-color: #973CC5;
	border: none;
}
p,
h2 {
	clear: both;
}
h2 {
	font-size: 1.1em;
	margin: 1em 0 0.5em 0;
}
h3 {
	font-size: 1em;
	margin: 1em 0 0.5em 0;
	text-decoration: underline;
}

/* Please note, these class names would normally reflect the semantic meaning of the columns, however for clarity of example they do not*/
.left-col {
	float: left;
	width: 49%;
}
.right-col {
	float: right;
	width: 49%;
}