/*
+------------------------------------------------------------------------------------------------+
    Navigation Bar
	
	- Made using Tony Thomas' CSS-only dropdown menu tutorial. 
	- http://medialoot.com/blog/how-to-create-a-responsive-navigation-menu-using-only-css/
	
+------------------------------------------------------------------------------------------------+
*/

/*Strip the ul of padding and list styling*/
#nav_menu ul.nav_menu
{
	list-style-type:	none;
	margin:				0;
	padding:			0;
	position: 			absolute;
}

#nav_menu
{
	padding-left:		0;
	margin:				0;	
}

/*Create a horizontal list with spacing*/
li.menu_option
{
	display:			inline-block;
}

/*Style for menu links*/
li.menu_option a.nav_link
{
	display:			inline-block;
	width:				100%;
	min-width:			130px;
	text-align: 		center;
	font-family: 		"Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size:			11px;
	font-weight:		bold;
	color: 				#F8F8F8;
	text-decoration: 	none;
	text-transform:		uppercase;
	padding:			0.5em 0;
	margin:				auto;
}

li.submenu_option a.nav_link {
	text-align:			left!important;
}

/*Hover state for top level links*/
li.menu_option:hover a.nav_link
{
	background: 		#de5020;
}

/*Style for dropdown links*/
li.menu_option:hover ul.nav_submenu a.nav_link
{
	background: 		#f3f3f3;
	color: 				#1F1F23; /*dark*/
	height: 			40px;
	line-height: 		40px;
}

/*Hover state for dropdown links*/
li.menu_option:hover ul.nav_submenu a.nav_link:hover
{
	background: 		#de5020;
	color: 				#F8F8F8;
}

/*Hide dropdown links until they are needed*/
li.menu_option ul
{
	display: 			none;
}

/*Make dropdown links vertical*/
li.menu_option ul.nav_submenu li.submenu_option
{
	display: 			block;
	float: 				none;
}

/*Prevent text wrapping*/
li.menu_option ul.nav_submenu li.submenu_option a.nav_link
{
	width: 				100%;
	min-width: 			100px;
	padding: 			0 10px;
}

/*Display the dropdown on hover*/
ul.nav_menu li a.nav_link:hover + .hidden, .hidden:hover,
a.nav_link:focus + .hidden, .hidden:focus,
a.nav_link:active + .hidden, .hidden:active
{
	display: 			block;
	position:			absolute;
	z-index:			100;
	padding:			0;
}

/*Style 'show menu' label button and hide it by default*/
.show-menu
{
	font-family: 		"Helvetica Neue", Helvetica, Arial, sans-serif;
	text-decoration: 	none;
	color: 				#F8F8F8;
	text-align: 		center;
	padding: 			10px 0;
	display: 			none;
	max-width: 960px;
	background: #2f3036;
	background: -webkit-linear-gradient(#2f3036, #58595e);
	background: -moz-linear-gradient(#2f3036, #58595e);
	background: linear-gradient(#2f3036, #58595e);
	border-top: 1px solid #7E7E7E;
	/* border-bottom: 1px solid #7E7E7E; */
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
}

/*Hide checkbox*/
#show-menu
{
    display: 			none;
}

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

/*Responsive Styles*/

@media screen and (max-width : 760px)
{
	/*Display 'show menu' link*/
	.show-menu {
		display:			block;
		font-family: 		"Helvetica Neue", Helvetica, Arial, sans-serif;
		font-size:			11px;
		font-weight:		bold;
		color: 				#F8F8F8;
		text-decoration:	none;
		text-transform:	 	uppercase!important;
	}
	/*Make dropdown links appear inline*/
	ul.nav_menu {
		position: 		static;
		display: 		none;
	}
	/*Create vertical spacing*/
	li {
		margin-bottom: 	1px;
	}
	/*Make all menu links full width*/
	ul li, li a.nav_link {
		width: 			100%;
	}
	/*Make Submenu links full width*/
	#nav_menu ul {
		position:		relative;
	}
}