 // меню строится на разметке как в MaxSite CMS

 // классы .group .divider предопределены
 
.menu() {
	
	// минимальные стили для выпадающего меню
	.base(@zindex: 10) {
		position: relative; 
		list-style: none; 
		margin: 0; 
		padding: 0;
		z-index: @zindex; 
		
		li {
			position: relative;
		}
		
		a {
			display: block;
		
			&:hover {
				text-decoration: none;
			}
		}
		
		// верхние пункты
		> li {
			float: left; 
			vertical-align: middle;
			display: block;
		}
		
		// подменю
		ul {
			display: none;
			position: absolute; 
			list-style: none; 
			margin: 0; 
			padding: 0;
			top: 100%; 
			left: 0; 
			z-index: @zindex + 1; 
			line-height: 1em;
			min-width: 150px;
			background: #EEEEEE; 
			
			// под-подменю
			ul {
				top: 0; 
				left: 100%;
			}
			
			li {
				display: block;
			}
				
		}
		
		/*
		если вынести отдельно, то можно сделать видимость по клику, а не hover
		нужно подумать как сделать
		*/
		li:hover > ul {
			display: block; // видимость подменю при наведении
		}
		
	}

	// верхние пункты
	.top() {
		
		.color(@color) {
			> li a {
				color: @color;
			}
		}
		
		.color(@color; @bg) {
			> li a {
				color: @color;
				background-color: @bg;
			}
		}
		
		.color(@color; @bg; @bold) {
			> li a {
				color: @color;
				background-color: @bg;
				font-weight: @bold;
			}
		}
		
		.hover(@color) {
			> li a:hover {
				color: @color;
			}
		}
		
		.hover(@color; @bg) {
			> li a:hover {
				color: @color;
				background-color: @bg;
			}
		}
		
		.hover(@color; @bg; @bold) {
			> li a:hover {
				color: @color;
				background-color: @bg;
				font-weight: @bold;
			}
		}
		
		.height(@height: auto; @l_height: auto; @padding: 0; @margin: 0) {
			> li > a { 
				height: @height;
				line-height: @l_height;
				padding: @padding;
				margin: @margin;
			}
		}
		
		// группа верхнего меню
		.group() {
		
			.color(@color) {
				> li.group > a {
					color: @color;
				}
			}
			
			.color(@color; @bg) {
				> li.group > a {
					color: @color;
					background-color: @bg;
				}
			}	
		
			.hover(@color) {
				> li.group > a:hover {
					color: @color;
				}
			}
			
			.hover(@color; @bg) {
				> li.group > a:hover {
					background-color: @bg;
					color: @color;
				}
			}
			
		}
	}
	
	// подменю
	.submenu() {
		
		.color(@color) {
			li.group ul li a { // это только пункты подменю
				color: @color;
			}
		}
		
		.color(@color; @bg) {
			li.group ul li a { 
				color: @color;
				background-color: @bg;
			}
		}
		
		.color(@color; @bg; @bold) {
			li.group ul li a { 
				color: @color;
				background-color: @bg;
				font-weight: @bold;
			}
		}
		
		.hover(@color) {
			li.group ul li a:hover {
				color: @color;
			}
		}
		
		.hover(@color; @bg) {
			li.group ul li a:hover {
				color: @color;
				background-color: @bg;
			}
		}
		
		.hover(@color; @bg; @bold) {
			li.group ul li a:hover {
				color: @color;
				background-color: @bg;
				font-weight: @bold;
			}
		}
		
		.height(@height: auto; @l_height: auto; @padding: 0; @margin: 0) {
			li.group ul li a { 
				height: @height;
				line-height: @l_height;
				padding: @padding;
				margin: @margin;
			}
		}
		
		.nowrap() {
			li.group ul li a { 
				white-space: nowrap;
			}
		}
	}
	
	// разделитель
	.divider(@border: #ccc 1px solid; @margin: 0) {
	
		li.divider {
			display: block !important;
			height: 1px !important;
			padding: 0 !important;
			
			> span {
				display: block;
				padding: 0;
				height: 1px;
				border: @border;
				margin: @margin;
			}
		}
		
	}
	
	// иконки стрелок групп на основе шрифта
	.set_arrows(@ff: FontAwesome; @c1: "\f107"; @c2: "\f105"; @color: inherit) {
	
		> li.group > a:after,
		li.group ul li.group > a:after
		{
			font-family: @ff;
			color: @color;
			display: inline-block;
			font-weight: normal;
			font-style: normal;
			text-decoration: none;
		}
		
		// верх
		> li.group > a:after {
			content: @c1;
			margin: 0 0 0 10px;
			float: right;
		}
		
		// подменю
		li.group ul li.group > a:after {
			content: @c2;
			position: absolute;
			right: 5px;
		}
	}

	// текущий пункт
	.selected() {
	
		.color(@color) {
			color: @color;
		}
		
		.color(@color; @bg) {
			background-color: @bg;
			color: @color;
		}
		
		.hover(@color) {
			&:hover {
				color: @color;
			}
		}
		
		.hover(@color; @bg) {
			&:hover {
				background-color: @bg;
				color: @color;
			}
		}
		
	}
	
	// специфичный z-index для меню
	.zindex(@index: 10) {
		z-index: @index;
		
		ul {
			z-index: @index + 1; 
		}
	}
	
}
