/* -----------------------------------
Navigation
----------------------------------- */

#nav ul {
	margin: 0;
	padding: 0;
	width: 100%;
	display: block;
	list-style: none;
	line-height: 1;
	
}
#nav li {
	display: inline;	
}/*for IE*/
#nav a {
	display: block;
	padding: .5em .3em;
	color: #333;
	background: #f6eb14;
	border-bottom: 1px solid #fff;
	text-decoration: none;
}
#nav-toggle {
	display: block;
	padding: .5em .5em .5em 40px;
	color: #fff;
	background-color: #f6eb14;
	background-image: url(responsive-nav.png);
	background-repeat: no-repeat;
	background-position: 10px 50%;
	text-decoration: none;
	border-bottom: 1px solid #fff;
}
#nav a:focus, #nav-toggle:focus {
	background-color: #01a6dc;
	color: #fff;
}
#nav a:hover, #nav-toggle:hover {
	background-color: #01a6dc;
	color: #fff;
}
#nav a:active, #nav-toggle:active {
	background-color: #01a6dc;
	color: #fff;
}
/* -----------------------------------
Predefined
----------------------------------- */

.js #nav {
	clip: rect(0 0 0 0);
	max-height: 0;
	position: absolute;
	display: block;
	overflow: hidden;
	zoom: 1;
}
#nav.opened {
	max-height: 9999px;
}

/* -----------------------------------
Navigation wide screen
----------------------------------- */

@media (min-width: 38em) {
.js #nav {
	position: relative;
}
.js #nav.closed {
	max-height: none;
}
#nav-toggle {
	display: none;
}
#nav {
	clear: both;
	float: right;
	width: 20em;
	overflow: hidden;
	zoom: 1; /*for older versions of IE */
	background-color: #f6eb14;
	border-bottom-left-radius: 10px;
	-moz-border-bottom-left-radius: 10px;
	-webkit-border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	-moz-border-bottom-right-radius: 10px;
	-webkit-border-bottom-right-radius: 10px;
}
#nav a {
	float: left;
	padding: .5em 1.2em .5em 1.2em;
	border-bottom: 0;
}


#nav a:focus{
	background-color: #f6eb14;
	color: #01a6dc;
}
#nav a:hover {
	background-color: #f6eb14;
	color: #01a6dc;
}
#nav a:active {
	background-color: #f6eb14;
	color: #01a6dc;
}

}