/****

Responsive menu base framework

Scott Flaherty



USAGE:

1) Wrap Main Menu:

<nav id="main-navigation">
    <a href="javascript:;" class="menu-link">Navigation<span class="glyphicon glyphicon-tasks"></span></a>
    <div class="menu" id="menu">
        <?php // Call WordPress Menu Here ?>
    </div>
    <div style="clear: both"></div>
</nav>

2) Change the different break points + add more if you want. Two in this file (1199, 1200), one in nav.js (1199).


3) 
Ideally you should include this file AFTER your main CSS file. 
The default styles in here are black/grey/more grey (as placeholders so you can at least SEE if it's working) 
There is also no wrapper. I figured whatever you're slotting it in would have it's own wrapper. 

****/


.mobile-only {
	display: none!important;
}

#access li .mobile-only {
	display: none!important;
}


#main-navigation {
	background: #747474;
	margin-bottom: -50px;
	margin-left: auto;
	margin-right: auto;
}

#menu {
	margin-top: 10px;
}
/* 
	Only activate sub menu hover styles on desktop resolution
	Change this to (+1) your mobile nav breakpoint
 */
@media (min-width: 866px) {
	#main-navigation .menu ul li.menu-item-has-children:hover > ul {
		display: block;
	}
}

/**

Drop down thingamabobby

*/

#main-navigation .menu-link {
	display: none;
	/*display: block;*/
	color: #000;
	background: #fff;
	font-size: 14px;
	font-weight: bold;
	text-transform: uppercase;
	text-decoration: none;
	padding: 8px 7px;
	border: none;
	outline: none;
}

#main-navigation a.menu-link span {
  float: right;
  padding: 3px;
}

#main-navigation .glyphicon {
  position: relative;
  top: 1px;
  display: inline-block;
  font-family: 'Glyphicons Halflings';
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/***********************

Desktop Menu

*************************/

#main-navigation .menu {
	float: left;
}

#main-navigation ul.menu {
  padding: 0px;
  margin: 0px;
  list-style: none;
  position: relative;
  display: inline-table;
}

#main-navigation .menu ul li {
  position: relative;
  float: left;
  padding: 0px;
  list-style: none;
}

#main-navigation .menu ul li a {
  padding: 10px 25px;
  height: auto;
  display: block;
  text-decoration: none;
  text-transform: uppercase;
  color: #ffffff;
  font-size: 14px;
  border-bottom: solid 1px #adadad;
}

/* Sub Menus */

#main-navigation .menu ul li ul a {
	min-width: 15em;
}

#main-navigation .menu > li > ul.sub-menu {
	min-width: 15em;
	margin-left: 10px;
}

#main-navigation .menu ul ul {
	left: 10;
	display: none;
	position: absolute;
	top: 100%;
	min-width: 15em;
	-webkit-box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
	-moz-box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
	box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
	z-index: 99999;
}

/* Tertiary Sub Menu */

#main-navigation .menu ul ul ul {
  position: absolute;
  left: 100%;
  top: 0;
  padding-left: 0px;
}

/* Active / Hover Links */

#main-navigation .menu ul .active a {
  color: #fefeff;

}

#main-navigation .menu ul a:hover {
	background: #fefeff!important;
	color: #4d5a6b!important;
}



/*****************************


Mobile Transistion Breakpoints


*****************************/


@media (max-width: 865px) {

	/* Tweaks for Mobile */

	#access li .mobile-only {
		display: block!important;
	}

	.mobile-only {
	display: block!important;
}

	#main-navigation #menu {
		display: none;
	}

	#main-navigation {
		padding-top: 10px;
		padding-bottom: 10px;
	}

	#main-navigation .menu-link {
		display: block;
		max-width: 95%;
		margin-left: auto;
		margin-right: auto;
	}

	/* Menu Styles */

	#main-navigation .menu {
		width: 100%; 
		float: none;
		margin-left: auto;
		margin-right: auto;
	}

	#main-navigation .menu-main-menu-container {
		
	}

	#main-navigation .menu ul {
		display: inline;
		width: 100%;
		margin-left: auto;
		margin-right: auto;
	}

	#main-navigation .menu, #main-navigation .menu ul ul {
		overflow: hidden;
	}

	#main-navigation .menu li, #main-navigation .menu ul li {
  		display: block;
	}

	#main-navigation .menu ul li {
		float: none;
		position: relative;
	}

	#main-navigation .menu ul li a {
	  padding: 15px 12px;
	  width: 100%;
	  display: block;
	}

	#main-navigation .menu ul li ul li a {
		padding-left: 30px;
	}

	#main-navigation .menu ul li ul li ul li a {
		padding-left: 50px;
	}


	/* Sub Menu Styles */

	#main-navigation .menu li.has-submenu a:after, #main-navigation .menu li.menu-item-has-children > a:after {
		content: '+';
		position: absolute;
		top: 0;
		right: 0;
		display: block;
		font-size: 14px;
		padding: 15px 15px;
	}

	#main-navigation .menu li.has-submenu a.active:after, #main-navigation .menu li.menu-item-has-children > a.active:after {
		content: '-';
	}

	#main-navigation .menu ul ul, #main-navigation .menu ul ul ul {
		display: none;
		position: relative;
		left: auto;
		top: auto;
		box-shadow: none;
		border: none;
	}


	#main-navigation .menu ul ul.active {
		display: block!important;
	}

	#main-navigation .menu ul ul.active li a {
		background: #494949;
		border-bottom: solid 1px #adadad;
	}

	#main-navigation .menu ul ul.active li ul.active a {
		background: #424242;
		border-bottom: solid 1px #adadad;
	}

	#main-navigation menu ul ul.active li a:hover, #main-navigation .menu ul ul.active li ul.active a:hover {
		background: #fff;
	}

}

@media(max-width: 866px) {
	#main-navigation {
		display: block;
		margin-top: 20px;
	}
	#branding nav#access {
		display:none!important;
	}

	#primary {
		width: 85%;
	}
}

@media(min-width: 865px) {
	#main-navigation {
		display: none;
	}

	#branding nav#access {
		display: block!important;
	}
}

ul ul ul {
	margin-left: 10px!important;
}

body {
	overflow-x: hidden;
}

.entry-content iframe {
	max-width: 100%;
}