/*
	jQuery.mmenu widescreen extension CSS
*/
//	To use on widescreens only, include it using a mediaquery:
//	<link type="text/css" href="mmenu-widescreen.css" media="all and (min-width: 900px)"/>

@import "../inc/variables";

$mm_widescreenMenuWidth: 0.3 !default;


// Positioning and sizing
html, body
{
	min-height: 100%;
	overflow: auto;
}
body
{
	position: relative;
}
#mm-blocker
{
	display: none !important;
}
.mm-page
{
	box-shadow: none !important;
	background: inherit;
	width: percentage( 1 - $mm_widescreenMenuWidth ) !important;
	min-height: 100%;
	height: auto !important;
	margin: 0 !important;
	left: percentage( $mm_widescreenMenuWidth ) !important;
	top: 0 !important;
	position: relative !important;
	z-index: 1;

	@include mm_vendor-prefix( "box-sizing", border-box );
}
.mm-menu
{
	z-index: 0;
	width: percentage( $mm_widescreenMenuWidth ) !important;
	
	&.mm-top,
	&.mm-right,
	&.mm-bottom
	{
		top: 0 !important;
		right: auto !important;
		bottom: auto !important;
		left: 0 !important;
	}
	
	&:first-child,
	&.mm-current
	{
		display: block;
	}
}