body {
	background-color: #b6f084;
	font-family: Arial, sans-serif;
}
div.content {
	margin: 25px 25px 0px;
	border: 3px solid gray;
	padding: 10px;
	background-color: #fff;
}
div.info {
        margin: 0px 25px;
        border: 3px solid gray;
        padding: 5px 10px;
        background-color: gray;
	color: #fff;
}
hr {
	width: 50px;
}
pre {
	background-color: #d5dbd0;
	padding: 10px;
	margin: -10px;
}
p.result {
	background-color: #d5dbd0;
	padding: 10px;
	margin: -10px;
}
/* nav */
.nav {
	position: relative;
	margin: 20px 0;
}
.nav ul {
	margin: 0;
	padding: 0;
}
.nav li {
	margin: 0 5px 10px 0;
	padding: 0;
	list-style: none;
	display: inline-block;
}
.nav a {
	padding: 3px 12px;
	text-decoration: none;
	color: #999;
	line-height: 100%;
}
.nav a:hover {
	color: #000;
}
.nav .current a {
	background: #999;
	color: #fff;
	border-radius: 5px;
}
@media screen and (min-width: 601px) {
	br.desktop {
		display: none;
	}
	input {
		margin-right: 10px;
	}
	select {
		margin-right: 10px;
	}
}
@media screen and (max-width: 600px) {
	.nav {
		position: relative;
		min-height: 40px;
	}	
	.nav ul {
		width: 180px;
		padding: 5px 0;
		position: absolute;
		top: 0;
		left: 0;
		border: solid 1px #aaa;
		background-color: #fff;
		border-radius: 5px;
		box-shadow: 0 1px 2px rgba(0,0,0,.3);
	}
	.nav li {
		display: none;
		margin: 0;
	}
	.nav .current {
		display: block;
		background-color: #999;
	}
	.nav a {
		display: block;
		padding: 5px 5px 5px 32px;
		text-align: left;
	}
	.nav .current a {
		color: #fff;
	}

	/* on nav hover */
	.nav ul:hover {
		background-color: #fff;
	}
	.nav ul:hover li {
		display: block;
		margin: 0 0 5px;
	}
	.nav ul:hover .current {
		background-color: #666;
	}
}
<!--[if lt IE 9]>
        <script src="http://css3-mediaqueries-js.googlecode.com/files/css3-mediaqueries.js"></script>
        <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->