/*
 * Navigataur: A pure CSS responsive navigation menu
 * Author: Mike King (@micjamking)
 */

/*
 	Notes:
 
 	- Media queries should be edited in both style sections if you require 
	  a different breakpoint for your navigation.
	  
	- Toggle class & menu anchor tags in list items have box-sizing: border-box 
	  style property to allow padding inside the container without conflicting with layout.	

*/

/*--------------------------------
 Functional Styles (Required)
---------------------------------*/
/* Tim Pietrusky advanced checkbox hack (Android <= 4.1.2) */
body{ -webkit-animation: bugfix infinite 1s; }
@-webkit-keyframes bugfix { from {padding:0;} to {padding:0;} }

#toggle, .toggle { display: none; }
.menu > li { list-style: none; float:left; margin:0 30px 0 0; }
.menu > li.last { margin:0 0 0 0; }

/* Nicolas Gallagher micro clearfix */
.clearfix:before, .clearfix:after { display: table; content: ""; }
.clearfix:after { clear: both; }

div#menu-container {
	width:100%;
	position:absolute;
	top:0;
	left:0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding:0 42px;
	z-index:300;
}

div#menu {
	float:right;
}

.menu > li > a {
	color:#b4b4b4;
	text-decoration:none;
	text-transform:uppercase;
	font-size:13px;
	font-weight:bold;
	display:block;
	padding:12px 0;
}

@media only screen and (min-width: 850px){

	.menu > li#link08 > a {
		padding:0 0 0 0;
		background:url(../images/german_flag.png) no-repeat 0 5px;
		text-indent:-9000px;
		width:27px;
		height:37px;
	}

}

.menu > li > a:hover {
	color:#fff;
}

body.home .menu > li#link01 > a { color:#fff; }
body.about .menu > li#link02 > a { color:#fff; }
body.walks .menu > li#link03 > a { color:#fff; }
body.rides .menu > li#link04 > a { color:#fff; }
body.news .menu > li#link05 > a { color:#fff; }
body.testimonials .menu > li#link06 > a { color:#fff; }
body.contact .menu > li#link07 > a { color:#fff; }

@media only screen and (max-width: 850px){
	
	.menu { display: none; opacity: 0; width: 100%; position: absolute; left:0; z-index:600; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; border-bottom:1px solid #e6e6e6; }
	.menu > li { display: block; width: 100%; margin: 0; float:none; }
	.toggle { display: block; position: relative; cursor: pointer; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
	#toggle:checked ~ .menu { display: block; opacity: 1;}
	
	.menu > li > a {
		color:#000;
		padding:12px 0 12px 0;
		display:block;
		width:100%;
		text-indent:10px;
		background-color:#fff;
		border-top:1px solid #e6e6e6;
	}
	
	.menu > li > a:hover {
		color:#000;
		text-decoration:none;
	}
	
	body.home .menu > li#link01 > a { color:#000; }
	body.about .menu > li#link02 > a { color:#000; }
	body.walks .menu > li#link03 > a { color:#000; }
	body.rides .menu > li#link04 > a { color:#000; }
	body.news .menu > li#link05 > a { color:#000; }
	body.testimonials .menu > li#link06 > a { color:#000; }
	body.contact .menu > li#link07 > a { color:#000; }
	
	.toggle:after {
		content: 'Show Menu';
		color:#b4b4b4;
		text-decoration:none;
		text-transform:uppercase;
		font-size:13px;
		font-weight:bold;
		display:block;
		padding:12px 0;
	}
	
	#toggle:checked + .toggle:after{
		content: 'Hide Menu';
	}
		
}

@media only screen and (max-width: 900px){
	
	div#menu-container {
		padding:0 15px;
	}
	
}