//--------------------------------------------------------------
// Copyright (C) joomla-monster.com
// License: http://www.joomla-monster.com/license.html Joomla-Monster Proprietary Use License
// Website: http://www.joomla-monster.com
// Support: info@joomla-monster.com
//---------------------------------------------------------------

// MENUS
//---------------------------------------------------------------

.nav.menu {
	margin: 0;
	li {
		display: block;
		background-image: none;
		position: relative;
		padding: 0;
	}
	ul {
		padding: 0;
		margin: 0;
	}
	//all elements
	li a,
	li span.separator {
		display: block;
		color: @JMmenuItemFontColor;
		line-height: @baseLineHeight; // 20px
		font-weight: @JMbaseFontWeight;
		padding-top: 6px;
		padding-bottom: 6px;
		padding-left: 15px;
		padding-right: 0;
		text-decoration: none;
		background-color: transparent;
		background-image: url('../images/li.png');
		background-repeat: no-repeat;
		background-position: left center;
		&:hover {
			color: @JMmenuItemFontColorHover;
		}
	}
	li.active > a,
	li.active > span.separator {
		color: @JMmenuItemFontColorHover;
	}
	//main elements
	> li > a,
	> li > span.separator {
		background: none;
		padding-top: 14px;
		padding-bottom: 14px;
		padding-left: 0;
		padding-right: 0;
		border-top: 1px solid @JMmenuItemBorder;
	}
	> li:first-child {
		> a,
		> span.separator {
			border-top: none;
			padding-top: 0;
		}
	}
	> li:last-child {
		> a,
		> span.separator {
			padding-bottom: 0;
		}
	}
	//nav-header
	li span.nav-header {
		color: @JMmenuItemFontColor;
		font-weight: @JMbaseFontWeight;
		font-family: @JMmoduleTitleFontFamily;
		text-shadow: none;
		padding-top: 6px;
		padding-bottom: 6px;
	}
	li > span.nav-header {
		padding-top: 14px;
		padding-bottom: 14px;
	}
	//parents
	> li.parent > a,
	> li.parent > span.separator {
		position: relative;
		padding-right: 10px;
		&:after {
			content: '+';
			font-family: Arial, Helvetica, sans-serif;
			position: absolute;
			right: 0;
			left: auto;
		}
	}
	> li.parent.active > a,
	> li.parent.active > span.separator {
		&:after {
			content: '-';
		}
	}
	> li.parent > ul {
		margin-top: -14px;
	}
	> li > ul {
		padding-left: 10px;
	}
	ul {
		padding-left: 15px;
	}
	 //image
	li a img {
		vertical-align: middle;
		margin: 0 9px 0 0;
	}
}

//color-ms
#jm-allpage .color-ms {
	.nav.menu {
		li a,
		li span.separator {
			background-image: url('../images/li-white.png');
			&:hover {
				color: jmdarken(@JMcolormsBackground, 20%);
			}
		}
		li.active > a,
		li.active > span.separator {
			color: jmdarken(@JMcolormsBackground, 20%);
		}
		> li > a,
		> li > span.separator {
			background: none;
			border-color: jmdarken(@JMcolormsBackground, 20%);
		}
	}
}

//dark
#jm-top3,
#jm-bottom1,
#jm-footer-mod {
	.nav.menu {
		li a,
		li span.separator {
			background-image: url('../images/li-white.png');
		}
		> li > a,
		> li > span.separator {
			background: none;
			border-color: jmdarken(@JMtop3Background, 20%);
		}
	}
}

//white-ms
#jm-allpage .white-ms {
	.nav.menu {
		li a,
		li span.separator {
			background-image: url('../images/li.png');
		}
		> li > a,
		> li > span.separator {
			background: none;
			border-color: @JMmenuItemBorder;
		}
	}
}

//classic-ms
#jm-allpage .jm-module {
	&.classic-ms .nav.menu,
	.nav.menu.classic-ms {
		li a,
		li span.separator {
			font-family: inherit;
		}
		> li > a,
		> li > span.separator {
			background: none !important;
			border: none !important;
			padding-top: 4px;
			padding-bottom: 4px;
		}
		> li:first-child {
			> a,
			> span.separator {
				border-top: none;
				padding-top: 0;
			}
		}
		> li:last-child {
			> a,
			> span.separator {
				padding-bottom: 0;
			}
		}
	}
}

// topbar
//----------------------------

#jm-top-bar .nav.menu {
	.cf();
	margin-top: -1px;
	margin-left: 1px;
	> li {
		float: left;
		background: none;
		vertical-align: top;
		margin: 0 0 -1px -1px;
		padding: 0 10px;
		border: 1px solid @JMmenuItemBorder;
	}
	li a,
	li span.separator {
		line-height: @JMtopbarHeight;
	}
	> li > a,
	> li > span.separator {
		padding: 0;
		margin: 0;
		border: none;
	}
	ul,
	> li.parent > a:after,
	> li.parent > span.separator:after {
		display: none;
	}
}

//high contrast buttons
#jm-allpage #jm-page-settings {
	.nav.menu {
		ul {
			display: block;
			padding: 0;
			li {
				float: left;
				margin: 0 2px;
				a,
				span.separator,
				button {
					padding: 0;
					background: none;
				}
			}
		}
		.contrast {
			line-height: @JMtopbarHeight;
			li.contrast-label {
				padding-right: 5px;
				span {
					text-decoration: none;
					pointer-events: none;
				}
			}
			a,
			button {
				display: inline-block;
				vertical-align: middle;
				line-height: 1;
				padding: 5px 7px;
				border: 1px solid @JMbaseFontColor;
				.box-sizing(border-box);
				&:hover {
					text-decoration: underline;
				}
			}
			.jm-highcontrast {
				background: @JMhcBackground;
				color: @JMhcFontColor;
			}
			.jm-highcontrast2 {
				background: @JMhc2Background;
				color: @JMhc2FontColor;
			}
			.jm-highcontrast3 {
				background: @JMhc3Background;
				color: @JMhc3FontColor;
			}

		}
		.day-night {
			li + li {
				margin-left: 10px;
				padding-left: 10px;
				border-left: 1px solid @JMmenuItemBorder;
			}
			[class^="fa-"], [class*=" fa-"] {
				margin-right: 5px;
				vertical-align: top;
				top: 0;
			}
		}
		.container-width {
			line-height: @JMtopbarHeight;
			li.width-label {
				padding-right: 5px;
				span {
					text-decoration: none;
					pointer-events: none;
				}
			}
			a,
			button {
				display: inline-block;
				border: none;
				line-height: 1;
				[class^="fa-"], [class*=" fa-"] {
					line-height: 1;
					padding: 5px 7px;
					border: 1px solid @JMbaseFontColor;
					.box-sizing(border-box);
					font-size: @JMtopbarFontSize;
				}
			}
		}
		.resizer {
			line-height: @JMtopbarHeight;
			li.resizer-label {
				padding-right: 5px;
				span {
					text-decoration: none;
					pointer-events: none;
				}
			}
			a,
			button {
				display: inline-block;
				border: none;
				line-height: 1;
				[class^="fa-"], [class*=" fa-"] {
					line-height: 1;
					padding: 5px 7px;
					border: 1px solid @JMbaseFontColor;
					.box-sizing(border-box);
					font-size: @JMtopbarFontSize;
				}
			}
		}
	}
}

// skip-ms
//----------------------------

#jm-allpage #jm-top-bar .skip-ms {
	position: absolute;
	top: 0;
	left: 0;
	right: auto;
	z-index: 9999;
	.nav.menu {
		margin: 0;
		> li {
			padding: 0;
			margin: 0;
			border: none;
			background: none;
		}
		> li > a {
			color: @JMskipmsItemFontColorHover;
			background: @JMskipmsItemBackgroundHover;
			position: absolute;
			top: 0;
			left: -9999px;
			right: auto;
			white-space: nowrap;
			padding: 0 10px;
			&:focus {
				left: 0;
			}
			&:hover,
			&:focus {
				color: @JMskipmsItemFontColorHover;
				background: @JMskipmsItemBackgroundHover;
			}
		}
	}
}

// tags
//----------------------------

#jm-allpage {
	.tagspopular ul,
	.tagssimilar ul,
	.nav.menu.tag-ms,
	.tag-ms .nav.menu {
		margin: 0;
		padding: 0;
		text-align: center;
		li {
			border: none;
			background: none;
			margin: 0;
			padding: 0;
		}
		li a {
			display: inline-block;
			color: @JMtagsLinkColor;
			padding: 5px 15px!important;
			background: @JMtagsBackgroundColor;
			border: 1px solid @JMtagsBorderColor;
			font-size: 13px;
			font-weight: @JMbaseFontWeight;
			text-decoration: none;
			.border-radius(3px);
			margin: 3px;
			&:after {
				display: none;
			}
		}
		li:hover > a,
		li.active > a {
			color: @JMtagsActiveLinkColor!important;
			border: 1px solid @JMtagsActiveBorderColor;
			background: @JMtagsActiveBackground;
			&:hover {
				color: @JMtagsActiveLinkColor!important;
			}
		}
		ul {
			padding: 0;
			margin: 0;
		}
	}

	.tagspopular ul,
	.tagssimilar ul {
		> li {
			margin: 0 6px 10px 0;
		}
		> li a {
			padding: 6px 18px;
		}
	}
}

// sitemap
//----------------------------

#jm-sitemap .nav.menu {
	> li {
		display: inline-block;
	}
	//main elements
	> li > a,
	> li > span.separator {
		padding: 2px 10px 0;
		border: none;
		font-size: inherit;
		color: @JMcopyrightFontColor;
		&:hover {
			color: @JMmenuItemFontColorHover;
			text-decoration: underline;
		}
	}
	li.active > a,
	li.active > span.separator {
		color: @JMmenuItemFontColorHover;
	}
	ul {
		display: none;
	}
}
