a{
	text-decoration: none;
}
a, label{
	color:#448;
}
a:hover{
	text-decoration:underline;
	color:#77a;
}
label:hover{
	cursor:pointer;
}
h1,h2,h3,h4,h5{
	line-height:2em;
	text-decoration: underline;
}
html,body{
	height:100%;
	font-family: "arial";
}
body{
	color:#555;
	text-align: center;
}
li{
	list-style:none;
	text-align:left;
	white-space:nowrap;
}
.content{
	position:relative;
	top:25%;
}
.navbar>li{
	display: inline-block;
	padding:2em;
	height:1em;
}
.dropdown{
	position:relative;
	display:block;
}

input[type="checkbox"]{
	position:absolute;
	top:-999px;
}
input[type="checkbox"] ~ label::after{
	content:"→ ";
	display:inline-block;
	width:1em;
}
input[type="checkbox"]:checked ~ label::after{
	content:"↓ ";
}
input[type="checkbox"]:checked ~ .dropdown-content{
	display:block;
}
.dropdown-content{
	position: absolute;
	display:none;
	border:1px solid black;
	border-top:0px;
	padding:1em;
	border-radius:0px 0px 0.3em 0.3em;
	z-index:1;
}
.dropdown-content, body{
	background-color: #eef;
}
.dropdown-content>*{
	margin:0;
	padding:0;
}
@media only screen and (max-width: 40rem){
	.dropdown{
		position: inherit;
	}
	.navbar>li{
		display:block;
		padding:0.5em;
	}
	.dropdown-content{
		position:relative;
		padding:0 0 0 0;
		margin: 0 0 0 0;
		border: 0px;
	}
	input[type="checkbox"]:checked ~ .dropdown-content{
		display: inherit;
	}
	label,a {
		display:inline-block;
		width:100%;
	}
}

.navigation{
	width: auto;
	padding:0px;
	margin:1em;
	border:1px solid black;
}

.navigation > .column{
	margin:0px;
}