body{
	background-color: rgb(100, 188, 247);
	font-family: arial, sans-serif;
	color: rgb(4, 70, 64);
}
h1{
	font-size: 5em;
	font-weight: bold;	
	font-family: karlmedium;
	color: white;
	text-align: center;
	white-space: nowrap;
}
h2{
	font-size: 2em;
	font-weight: bold;
	font-family: karlmedium;
	text-decoration: underline;
	color: rgb(0, 0, 0);
	margin-bottom: 3px;
}
h3{
	font-size: 1.4em;
	font-family: karlmedium;
	font-weight: bold;
	
}
ol, ul{
	list-style-position: inside;
	font-size: 1.4em;
	font-family: karlmedium;
	padding-left: 0px;
}
li{	
	font-family: karlmedium, arial, sans-serif;
	font-size: 1em;
}
p{
	font-family: arial, sans-serif;
	font-size: 1em;
	margin-top: 0px;
}


img.float {
	width: 100%;
}

#wrapper {
	width: 96%;
	max-width: 920px;
	margin: auto;
	padding: 2%;
	background-color: rgba(165, 216, 250, .5);
}

#header {
	background-color: rgb(255, 113, 159);
	width: 100%;
	margin-bottom: 10px;
}
#bg-topleft {
	position: fixed;
	top: 0px;
	left: 0px;
	z-index: -1;
}
#bg-topright{
position: fixed;
	top: 0px;
	right: 0px;
	z-index: -1;
	
}
#bg-bottomleft {
	position: fixed;
	bottom: 0px;
	left: 0px;
	z-index: -1;
}
#bg-bottomright{
position: fixed;
	bottom: 0px;
	right: 0px;
	z-index: -1;
	
}
#karlimg{
	position: absolute;
}

#imgspace {
	/*
		This block resides in h1 and is only activated when the screen is downsized
		far enough that we need to prevent the header from colliding with Karl.
	*/
	width: 88px;
	display: none;
}

ul#navlist
{
	padding: 0;
	margin: 0;
	list-style-type: none;
	float: left;
	width: 100%;
	color: #fff;
	background-color: white;
	margin-bottom: 20px;
}
ul#navlist li { display: inline; }
ul#navlist li a
{
	float: left;
	width: 125px;
	color: black;
	background-color: white;
	padding: 0.2em 1em;
	text-decoration: none;
	border-right: 1px solid rgb(255, 113, 159);
}
ul#navlist li a:hover
{
background-color: rgb(255, 113, 159);
color: #fff;
}

.images{
	width: 100%;
	margin-bottom: 0px;
}

@font-face {
    font-family: 'karlmedium';
    src: url('../media/font/karl-webfont.eot');
    src: url('../media/font/karl-webfont.eot?#iefix') format('embedded-opentype'),
         url('../media/font/karl-webfont.woff2') format('woff2'),
         url('../media/font/karl-webfont.woff') format('woff'),
         url('../media/font/karl-webfont.ttf') format('truetype'),
         url('../media/font/karl-webfont.svg#karlmedium') format('svg');
    font-weight: normal;
    font-style: normal;
}

@media screen and (max-width: 700px) {
	#bg-topleft {display: none;}
	#bg-bottomleft {display: none;}
	#bg-bottomright {display: none;}
}

@media screen and (max-width: 450px) {
	#imgspace {
		display: inline-block;
	}
	#karlimg {
		margin-left: -10px;
	}
}