/* Off canvas layout CSS/JS provided by or adapted from work by Jason Weaver and Luke Wroblewski Requires globals.css grid.css */
body.off-canvas							{ padding: 0; margin: 0; }
canvas										{ background: #23B9D2; }
#mobile-menu .container					{ width: 100%; }
#mobile-menu .row							{ overflow: hidden; }
#mobile-menu .row .row						{ overflow: visible; }
#mobile-menu .paneled .container			{ overflow: hidden; }

/* ==============================
     ---- Main Nav Styles ---- 
=================================*/

a.sidebar-button							{margin-top: 8px; margin-bottom: 6px; display: inline-block;}
a.sidebar-button img						{margin-top: -16px; width: 30px;}
a.sidebar-button h1						{display: inline !important; font-family: "league-gothic", Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif; margin-left: 10px; line-height: 1; color: #fff; font-weight: 100;}
#mobile-menu								{position: fixed !important; background: #333; height: 100%; padding: 0px; -webkit-box-shadow: inset -2px 0px 8px -1px #111111; box-shadow: inset -2px 0px 8px -1px #111111; padding-top: 10px; }
#mobile-menu h5 a							{font-size: 20px !important; }
#mobile-menu hr							{margin: 8px 0 20px 0; border-color: #444444 !important;}
#mobile-menu h6,#mobile-menu h5			{color:#727272; text-transform: uppercase; margin-bottom: 0px;}
#mobile-menu h6							{font-size: 14px; font-weight: bold;}
#mobile-menu .nav-bar						{background: none; margin-bottom: 0px;}
#mobile-menu .nav-bar li					{width: 100%; box-shadow: none !important; }
#mobile-menu .nav-bar li a					{font-size: 20px !important; font-weight: 100; color: #ccc; padding: 0px !important;}

.nav-bar									{height:110px; background: #4d4d4d; margin-left: 0; margin-top: 8px !important;  }
.nav-bar.goodness							{height:120px; background: #4d4d4d; margin-left: 0; margin-top: 20px; padding: 0; }
.nav-bar > li								{float: left; display: block; position: relative; padding: 0; margin: 0; border: 1px solid #333333; border-right: none; line-height: 38px; }
.nav-bar > li a.current					{color: #ffffff !important; font-weight: 700; }
.nav-bar > li > a							{color: #bbbbbb; display: block;}
.nav-bar > li ul							{margin-bottom: 0; }
.nav-bar > li .flyout						{display: none; }

#mobile-menu .main-menu					{overflow-x: hidden; }
#mobile-menu .main-menu,
#mobile-menu .side-colophon				{padding: 0px 15px; }

#mobile-menu .side-colophon				{padding-bottom: 25px; margin-top: -5px;}
#mobile-menu .side-colophon ul.top li		{display: inline-block; margin-left: 0px; line-height: 1;}
#mobile-menu .side-colophon ul.top li a	{color: #727272; text-transform: uppercase; font-size: 13px; padding: 5px; font-weight: 100;}

#page:before								{content: " "; position: absolute; z-index: -1; top: 0; left: -100%; width: 100%; height: 100%; background: #fff;}
#page										{width: 100%;}
#mobile-menu, #page						{display: block; position: relative; z-index: 1; -webkit-transition: 0.08s all ; -moz-transition: 0.08s all ; -o-transition: 0.8s all; transition: 0.08s all ;}
.paneled #page								{padding: 0; }
.page-panel									{width: 100%; padding: 0 15px; -webkit-transition: 0.05s margin linear-out; -moz-transition: 0.05s margin linear-out; -o-transition: 0.05s margin linear-out; transition: 0.05s margin linear-out; background: #fff; }
#switchPanels								{margin: 0 -15px; }
.hide-extras #mobile-menu					{display: block; }
[role="navigation"]#topMenu				{-webkit-transition: 0.05s all linear; -moz-transition: 0.05s all linear; -o-transition: 0.05s all linear; transition: 0.05s all linear; }
[role="navigation"]#topMenu ul			{margin-top: 0; }
#mobile-menu								{margin-left: -85%; width: 85%; float: left; z-index: 2; }
#page										{margin-left: 0; z-index: 1; position: relative;}
.paneled #page								{background: #fff; width: 500%; overflow: hidden; float: none; position: relative; left: 0; -webkit-transition: 0.00s all linear; -moz-transition: 0.00s all linear; -o-transition: 0.00s all linear; transition: 0.00s all linear; }
.page-panel									{min-height: 400px; float: left; margin: 0; width: 20%; }
.active #mobile-menu						{margin-left: 0;}
.active #page								{margin-right: -85%; }
.active-menu [role="navigation"]#topMenu	{margin-top: 0 !important; }

@media all and (min-width: 768px) {
	menu-button, .sidebar-button			{display: none; }
	#mobile-menu							{width: 20%; margin-left: 0; float: left; }
	#page									{width: 80%;}
	.paneled #page							{width: 100%; padding: 0; background: #f4f4f4; left: 0 !important; }
	.page-panel								{display: block; min-height: 800px; float: none; margin: 0; width: 100%; background: #f4f4f4; }
	.hide-extras #page						{ width: 100%;}
	.hide-extras #mobile-menu				{display: none;}
	[role="navigation"]#topMenu			{display: none;}
	.active #page							{margin-right: 0%;}
}


/* ------------------------------------------------------------
  Disables Overflow on mobile - Had issues with Foundation 4 
------------------------------------------------------------ */
@media all and (max-width: 767px) { 
	html									{overflow-x: hidden;}
	body.off-canvas						{padding: 0; margin: 0; overflow-x: hidden;}
	#page									{float: right;}
}