/*------------------------------------*\
	nav
\*------------------------------------*/

nav .nav ul{
	background:#fff; /* Adding a background makes the dropdown work properly in IE7+. Make this as close to your page's background as possible (i.e. white page == white background). */
	background:rgba(255,255,255,0); /* But! Let's make the background fully transparent where we can, we don't actually want to see it if we can help it... */
	list-style:none;
	position:absolute;
	left:-9999px; /* Hide off-screen when not needed (this is more accessible than display:none;) */
	z-index: 6;
	top:35px;
	-webkit-box-shadow: 2px 2px 3px 0 rgba(0,0,0,0.3);
	   -moz-box-shadow: 2px 2px 3px 0 rgba(0,0,0,0.3);
	        box-shadow: 2px 2px 3px 0 rgba(0,0,0,0.3);
}

@media only screen and (min-width: 580px) {
	nav a {
		float: left;
		padding: 10px 15px;
		margin-bottom: 0;
		line-height: 1.2;
	}
	nav a:hover {
		text-decoration: none;
		background: rgba(0,0,0,0.1);
	}
	nav li:first-child a {
		margin-left: 0;
	}
	nav li:last-child  a {
		margin-right: 0;
	}

	nav li.active > a {
		background: #800707;
		box-shadow: inset 0 0 5px rgba(0,0,0,0.3);
	}

	nav li.home a {
		padding: 9px 15px;
		margin-left: 10px;
	}

	nav .nav{
		list-style:none;
		width:100%;
		position:relative;
		z-index: 5;
	}

	nav ul.nav li ul{
		display:block;
	}

	nav .nav li{
		float:left;
		margin-right:10px;
		position:relative;
	}
	nav .nav a{
		display: block;
		padding: 10px;
		z-index:5;
	}

	/*--- DROPDOWN ---*/

	nav .nav li {
		position:relative;
	}

	nav .nav ul li{
		float:none;
		margin-right: 0;
	}
	nav .nav ul a{
		white-space:nowrap; /* Stop text wrapping and creating multi-line dropdown items */
		float: none;
		display: block;
		min-width: 140px;
	}
	nav .nav li:hover ul{ /* Display the dropdown on hover */
		left:0; /* Bring back on-screen when needed */
	}
	nav .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. */
		background:#810606;
	}
	nav .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;
		text-transform: none;
		background:#810606;
	}
	nav .nav li:hover ul li a:hover{ /* Here we define the most explicit hover states--what happens when you hover each individual link. */
		background:#a80000;
	}
}

@media only screen and (min-width: 860px) {
	nav .nav li a{
		font-size:16px;
	}
}