/*------------------------------------*\
	NAV
\*------------------------------------*/
#nav{
	list-style: none;
	/* Clear floats */
	float: left;
	width: 100%;
	padding-left: 0px;
	/* Bring the nav above everything else--uncomment if needed.
	position:relative;
	z-index:5;
	*/
}
#nav li{
	float: left;
	position: relative;
}
#nav a{
	display: block;
	text-decoration: none;
}
#nav a:hover{
	text-decoration: none;
}

/*--- DROPDOWN ---*/
#nav ul{
	list-style: none;
	position: absolute;
	left: -9999px;
	padding-left: 0px;
}
#nav ul li{
	float: none;
}
#nav ul a{
	white-space:nowrap; /* Stop text wrapping and creating multi-line dropdown items */
}
#nav li:hover ul{ /* Display the dropdown on hover */
	left: 0px; /* Bring back on-screen when needed */
}
#nav li:hover a{ /* These create persistent hover states, meaning the top-most link stays 'hovered' even when your cursor has moved down the list. */
	text-decoration: none;
	display: block;
}
#nav li:hover ul a{ /* The persistent hover state does however create a global style for links even before they're hovered. Here we undo these effects. */
	text-decoration: none;
}

/*Style 'show menu' label button and hide it by default*/
.show-menu {
	text-decoration: none;
	display: none;
	font-size: .9em;
}

/*Hide checkbox*/
input[type=checkbox]{
    display: none;
    -webkit-appearance: none;
}

/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #navVertical {
    display: block;
}