* {
	font-family: serif;
	color: #cccccc;
	background-color: #000000;
}

h1 {
	font-family: monospace;
	font-size: 4em;
}

#wrapper {
	padding: 3%;
	margin: auto;
/*	border: 5px solid #333333;*/
	max-width: 550px;
}

ul {
	padding: 0px;
}

nav {
	max-width: 100%;
}

nav li {
	display: inline;
	background-color: #cccccc;
	height: auto;
	margin: auto;
	padding: 0px;
}

nav li a {
	padding: 1em;
	text-decoration: none;
	background-color: inherit;
	border: 1px solid #cccccc;
	color: #000000;
	margin: 0px;
	width: 100%;
	height: 100%;
}

nav li a.active {
	background-color: #888888;
	border-color: #888888;
}

h1:hover {
	color: #aaaaaa;
}

nav li a:hover {
	background-color: #aaaaaa;
	border-color: #aaaaaa;
}

a {
	font-weight: bold;
}

img {
	width: 200px;
	max-width: 200px;
}

ul#album-list {
	list-style: none;
}


ul#album-list > li {
	border: 2px solid #333333;
	padding: 2em;
	margin: 1em;
}

#main {
	padding-top: 5px;
}

iframe {
	max-width: 100%;
}

@media screen and (max-width: 800px) {
	h1 {
		font-size: 3em;
	}

	nav {
		max-width: 90%;
	}

	nav li {
		display: inline;
		/*width: 40%;*/
		margin: 1em 1em 1em 1em;
	}
	
	nav li a {
		display: block;
		padding: auto;
		max-width: 100%;
	}
}

.right {
	float: right;
}