.clearfix:before,  
.clearfix:after {  
    content: " ";  
    display: table;  
}  
.clearfix:after {  
    clear: both;  
}  
.clearfix {  
    zoom: 1;  
}  

html, body {
	margin: 0;
	padding: 0;
	background-color: 0x111111;
	overflow: hidden;
}

nav {
	display: table;
	margin: 3em auto;
}

nav ul {
	display: block;
	padding: 0; /* remove default padding */
	margin: 0; /* remove default margin */
}

nav li {
	display: inline; /* remove bullet-point */
}

nav a {
	display: inline-block;
	position: relative;
	cursor: pointer;
	top: 0;
	width: 2.5em;
	height: 2.5em;
	margin: 0 10px;
	background: #333333;
	border-radius: 5px;
	box-shadow: 0px 5px 0px #212121, 0px 10px 5px rgba(0, 0, 0, .3);
	-webkit-transition: all .1s linear;
	transition: all .1s linear;
	color: #FFFFFF;
	font-size: 3em;
	text-decoration: none;
	text-align: center;
	line-height: 2.5em;
}

nav a:active {
	top: 3px;
	box-shadow: 0px 2px 0px #212121, 0px 5px 3px rgba(0, 0, 0, .3);
}

.kirby_icon {
	background: #333333 url('/sprite/icons/kirby.png') center no-repeat;
	background-size: 50%;
}