/* 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; }

.container { width: 100%; }
.container:after { content:""; clear: both; display: table; }

section[role="main"]:before { content: " "; position: absolute; z-index: -1; top: 0; left: -100%; width: 100%; height: 100%; }

section[role="complementary"], section[role="main"] {
	width: 100%; display: block; position: relative; z-index: 1;
	/*-webkit-transition: 0.25s all ease-in; -moz-transition: 0.25s all ease-in; -o-transition: 0.25s all ease-in; transition: 0.25s all ease-in; */
  -webkit-transition: none;
  -moz-transition: none;
  -o-transition: none;
  transition: none;
 }

.hide-extras section[role="complementary"] { display: block; }

section[role="complementary"] {
	margin-left: -100%;
	width: 70%;
	float: left;
	z-index: 2;
	padding-bottom: 1000px;
	margin-bottom: -1000px;
	background: #333637; /* offcanvas panel background color */
	position: absolute;
}

section[role="main"] { margin-left: 0; float: right; z-index: 1; position: relative; }

.active .container {
	overflow: hidden;
}

.active section[role="complementary"] {
	margin-left: 0;

}

.active section[role="main"] {
	left: 70%;
	position: fixed;
	height: 100%;
	/*overflow: hidden;*/
}

.active-menu section[role="navigation"]#topMenu { margin-top: 0 !important; }




.sidebar-button {
	background: #333637!important;
    border-radius: 0 0 6px 0;
    font-size: 27.5px;
    left: 0;
    padding: 6px 4px 6px 12px;
    position: fixed;
    top: 0px;
    color: #FFF;
    z-index: 200;
}

.off-canvas.active .sidebar-button {
	position: absolute;
}

.sidebar-button i {
	color: #FFF;
}


/**
 * Offcanvas menu styling
 */

.offcanvaspanel .menu {
	background: rgba(15, 16, 16, 0.04);
}

.offcanvaspanel .menu a {
	border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.04) !important;
}

.offcanvaspanel .menu > li.active:hover {
	background: transparent;
}

.offcanvaspanel .menu > li.active {
	border-right: 1px solid #333333;
}

.offcanvaspanel .menu .active a {
	background: rgba(0,0,0,.1);
	border-top: 1px solid rgba(0, 0, 0, 0.2) !important;
}

.offcanvaspanel .menu li ul li {
	border-left: none;
}

.offcanvaspanel .menu li ul li a {
	background: transparent;
	color: #777777;
}

.offcanvaspanel .menu li ul.sub-menu li a:before {
	color: rgba(255, 255, 255, 0.4);
}

.offcanvaspanel .menu > li.has-flyout > a:first-child:after {
	 border-color: #E6E6E6 transparent transparent;
}

.offcanvaspanel .menu > li.has-flyout > a:first-child:before {
	display: none;
}



@media all and (min-width: 768px) {
	menu-button, .sidebar-button { display: none; }
	section[role="complementary"] { width: 0%; margin-left: 0; float: left; }
	section[role="main"] { width: 100%; }
	.hide-extras section[role="main"] { width: 100%; }
	.hide-extras section[role="complementary"] { display: none; }
	section[role="navigation"]#topMenu { display: none; }
}

/* disable all offcanvas features on ie8 */

.lt-ie9 .container {
	float: left;
}

.lt-ie9 section[role="main"] {
	float: left;
}

.lt-ie9 section[role="complementary"] {
	display: none;
}