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

body {
	margin:0;
}

nav {
	min-height:60px;
	background: rgb(51,51,51); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(51,51,51,1) 0%, rgba(17,17,17,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(51,51,51,1)), color-stop(100%,rgba(17,17,17,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(51,51,51,1) 0%,rgba(17,17,17,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(51,51,51,1) 0%,rgba(17,17,17,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(51,51,51,1) 0%,rgba(17,17,17,1) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(51,51,51,1) 0%,rgba(17,17,17,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333333', endColorstr='#111111',GradientType=0 ); /* IE6-9 */

}

#input-toggle {
	opacity:0;
	position: absolute;
	top:0;
	left:0;
}

.navigation-toggle { 
	display:none; 
	width:44px; 
	height:33px; 
	margin:5px; 
	text-align:center; 
	border-radius:4px; 
	border:1px solid #404040; 
	background-image: linear-gradient(to bottom, #000, #111); 
	background-repeat: repeat-x; 
	color:#FFFFFF; 
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); 
	padding-top:10px; 
	position:absolute; 
	top:2px; right:2px; 
	cursor:pointer; 
}

.navigation-toggle span { 
	background-color: #F5F5F5; 
	border-radius: 1px 1px 1px 1px; 
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); 
	display:block; 
	height:2px; 
	width:18px; 
	margin:4px auto; 
}

nav ul {
	list-style:none; 
	padding:0; 
	margin:0; 		
	font-size:0;
	display: block;		
}

nav ul li {
	display: inline-block;		
	max-width:100px;
	min-width:15%;
	text-align: center;
}	

nav ul li a {
	font:bold 14px/60px 'Open Sans', sans-serif;
	color:#eee;
	height:60px;
	display: block;
	text-decoration: none;		
	border-right:1px solid #444;
	border-left:1px solid #111;
}

nav ul li a:hover, nav ul li a:active, nav ul li a:focus {
	background: rgb(241,231,103); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(241,231,103,1) 0%, rgba(254,182,69,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(241,231,103,1)), color-stop(100%,rgba(254,182,69,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(241,231,103,1) 0%,rgba(254,182,69,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(241,231,103,1) 0%,rgba(254,182,69,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(241,231,103,1) 0%,rgba(254,182,69,1) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(241,231,103,1) 0%,rgba(254,182,69,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1e767', endColorstr='#feb645',GradientType=0 ); /* IE6-9 */
	color:#333;
	box-shadow:-4px 0 3px -3px rgba(0, 0, 0, 0.6) inset,4px 0 3px -3px rgba(0, 0, 0, 0.6) inset;
}

@media screen and (max-width:500px) {
	.navigation-toggle {
		display:block;
	}
	
	nav ul {
		margin-top:55px;
		overflow: hidden;				
		max-height:0;
		transition:max-height 0.35s ease 0s;
		-webkit-transition:max-height 0.35s ease 0s;
		-moz-transition:max-height 0.35s ease 0s;
	}
	
	nav #input-toggle:checked + ul {
		max-height:500px;
	}
	
	nav ul li {
		border:0;
		width:100%;
		max-width: 100%;
		min-width:0;
		border-bottom:1px solid #333;

	}
	
	nav ul li a {
		display: block;
		text-align: center;
	}
	
}