//
// Menus
// --------------------------------------------------

// General
// -------------------------

.ui-resizable-helper { 
	&.menu { border: 1px dotted gray; border-left: none; background: rgba(0,0,0,.3); }
}
.ui-resizable-handle { 
	width: 3px; 
	border-style: solid; 
	border-width: 0; 
	border-color: @sidebarResizableBorder; 
}

// Left menu
// -------------------------

#menu {
	.profile {
		display: block;
		height: 44px;
		line-height: normal;
		padding: 10px;
		border-bottom: 1px solid @sidebarBorder1;
		background: @sidebarBackground3;
		span {
			text-align: left;
			display: block;
			padding: 3px 0 0 0;
			width: 130px;
			float: right;
			strong {
				display: block;
				color: @sidebarColor1;
				font-size: 14px;
				font-weight: normal;
			}
			a { color: @primaryColor; font-size: 14px; padding: 0 25px 0 0; i:before { font-size: 17px; color: #64625f; left: auto; right: 0; top: 2px; } }
		}
		.img {
			border: 2px solid @sidebarBorder2;
			display: block;
			width: 40px;
			float: left;
			.rounded(5px,5px,5px,5px);
			img { .rounded(5px,5px,5px,5px); }
			&:hover { border-color: lighten(@sidebarBorder2, 20%); }
		}
	}
	#notif {
		ul {
			margin: 0;
			padding: 10px;
			list-style: none; 
			text-align: center;
			li {
				height: 22px; line-height: 22px;
				display: inline-block;
				padding: 0 2px;
				&:last-child { padding: 0 0 0 2px; }
				> a {
					.text { display: inline-block; padding-left: 10px; }
					display: block;
					background: @sidebarBackground2;
					color: @sidebarColor1;
					text-decoration: none;
					padding: 0 5px;
					.rounded(5px,5px,5px,5px);
					&.glyphicons { 
						padding: 0 5px 0 25px; 
						i:before { color: @sidebarColor2; font-size: 15px; top: 3px; left: 5px; }
					}
					&:hover { 
						color: @sidebarColor1;
						background: lighten(@sidebarBackground2, 10%);
						&.glyphicons { i:before { color: @sidebarColor1; } } 
					}
				}
			}
		}
	}
	width: 204px;
	float: left;
	position: absolute;
	left: 0;
	top: 0;
	overflow: hidden;
	margin-bottom: -99999px;
	padding-bottom: 99999px;
	background: @sidebarBackground1;
	color: @sidebarColor1;
	.slim-scroll > ul, > ul {
		~ ul { border-top: none; }
		list-style: none;
		float: left;
		margin: 0;
		padding: 0;
		display: block;
		width: 100%;
		background: @sidebarMenuBg1;
		border-top: 1px solid @sidebarMenuBorder1;
		&.affix {
			top: 0;
			width: 203px;
			z-index: 1000;
		}
		> li { 
			display: block;
			height: 39px;
			line-height: 39px;
			border-bottom: 1px solid @sidebarMenuBorder1;
			position: relative;
			overflow: hidden;
			padding: 0;
			margin: 0;
			.count { 
				display: inline-block;
				background: @sidebarBackground2;
				color: @sidebarColor1;
				font-weight: 600;
				font-size: 10px;
				padding: 1px 8px;
				position: absolute;
				.rounded(3px,3px,3px,3px);
				top: 10px;
				right: 15px;
				line-height: normal;
			}
			a {
				display: block;
				width: auto;
				padding: 0;
				margin: 0;
				color: @sidebarColor1;
				height: 39px;
				line-height: 39px;
				text-decoration: none;
				font-size: 13px;
				font-weight: 600;
				&.glyphicons {
					padding: 0 0 0 45px;
					i:before {
						font-size: 17px;
						color: @sidebarColor1;
						top: 10px;
						left: 15px;
					} 
				}
				&:hover { background: @sidebarBackground2; }
			}
			&.active { 
				position: relative;
				overflow: visible;
				> a { background: @sidebarBackground2; }
			}
			&.glyphicons {
				a { 
					padding: 0 0 0 45px;
					i:before {
						font-size: 17px;
						color: @sidebarColor1;
						top: 10px;
						left: 15px;
					} 
				}
			}
			&.hasSubmenu, .hasSubmenu {
				position: relative;
			}
			&.hasSubmenu.active {
				height: auto;
				background: @sidebarMenuBg2;
				> a { 
					background: @sidebarMenuBg2;
					color: @sidebarColor1;
					i:before { color: @sidebarColor1; }
				}
				padding: 0;
			}
			&.heading {
				height: 25px;
				line-height: 25px;
				background: @sidebarBackground1;
				span { 
					display: block; 
					color: @sidebarColor1;
					border-bottom: 1px solid @sidebarMenuBorder1;
					text-align: center; 
					font-size: 9pt;
					text-transform: uppercase; 
				}
			}
			&.large {
				height: 70px;
				line-height: 70px;
				> a {
					height: 70px;
					line-height: 70px;
				}
				a { text-align: center; padding: 0 0 0 0; }
				&.glyphicons {
					> a {
						i { 
							display: block;
							height: 37px;
							line-height: 37px; 
							&:before {
								font-size: 24px;
								color: @sidebarColor1;
								top: 13px;
								left: auto;
								position: relative;
							}
						}
						span {
							display: block;
							height: 33px;
							line-height: 33px;
						}
					}
				}
			}
		}
		ul {
			margin: 0;
			padding: 0;
			list-style: none;
			li {
				height: auto;
				a {
					padding: 0 0 0 45px;
					height: 35px;
					line-height: 35px;
					font-weight: 400;
					&.glyphicons {
						i:before { font-size: 12px; top: 7px; left: 22px; color: #222; }
					}
					&:hover { background: rgba(0, 0, 0, 0.1); }
				}
				.count { top: 9px; }
				&.active {
					> a { font-weight: 600; background: @sidebarBackground2; }
				}
				&.hasSubmenu.active {
					background: rgba(0,0,0,.1);
				}
				ul {
					li {
						a {
							height: 34px;
							line-height: 34px;
							border-bottom: 1px solid rgba(0,0,0,.1);
							span:before { display: block; font-family: "Glyphicons"; font-size: 14px; content: "\e369"; display: block; float: left; font-weight: 400; margin: 0 5px 0 0; }
						}
						&:first-child a { border-top: 1px solid rgba(0,0,0,.1); }
						&.active, &:hover {
							> a { color: @sidebarColor1; text-decoration: underline; span:before { color: @sidebarColor1; } }
						}
					}
				}
			}
		}
	}
	&.ui-state-disabled {
		opacity: 1;
		filter: Alpha(Opacity=100);
	}
}

.menu-left .ui-resizable-e {
	background: rgba(255,255,255,.2);
	right: 0;
	border-left-width: 1px;
	border-right-width: 1px;
	&:hover { background: rgba(255,255,255,.4); }
}

// Right menu
// -------------------------

.menu-right {
	.ui-resizable-w {
		background: rgba(255,255,255,.2);
		left: 0;
		border-left-width: 1px;
		border-right-width: 1px;
		&:hover { background: rgba(255,255,255,.4); }
	}
	#menu { 
		left: auto; 
		right: 0;
	}
	#content { margin: 0 204px 0 0; }
}

// Hidden menu
// -------------------------

.menu-hidden {
	#menu { display: none; }
	#content { margin: 0; }
	.navbar.main .appbrand { display: none; }
	.navbar.main .btn-navbar { left: 5px; }
	.navbar.main .topnav {
		&.tn1 { left: 45px; }
	}
	&.login, &.documentation {
		.navbar.main .appbrand { 
			display: inline-block;
			border: none;
			span { border: none; } 
		}
	}
}

// Top navbar
// -------------------------

.navbar.main { 
	height: 46px; 
	background: @navbarTopBg;
	margin: 0;
	position: relative;
	.appbrand {
		color: #ffffff;
		font-size: 14px;
		font-weight: 700;
		display: inline-block;
		text-decoration: none;
		height: 46px;
		padding: 0 0 0 15px;
		line-height: 46px;
		width: 190px;
		> span { 
			display: block;
			height: 46px;
			line-height: 46px; 
			span { font-size: 10px; font-weight: 400; }
		}
	}
	.btn-navbar {
		height: 32px;
		line-height: 32px;
		padding: 0 10px; 
		margin: 0; 
		position: absolute; 
		float: none; 
		left: 205px; 
		top: 6px;
		display: block; 
		background: lighten(@primaryColor, 10%);
		box-shadow: 0 1px 0 darken(@primaryColor, 20%);
		-moz-box-shadow: 0 1px 0 darken(@primaryColor, 20%);
		-webkit-box-shadow: 0 1px 0 darken(@primaryColor, 20%);
		border: none;
		.icon-bar { background: #fff; }
		&:hover { background: lighten(@primaryColor, 15%); }
		&.ui-state-disabled {
			opacity: 1;
			filter: Alpha(Opacity=100);
		}
	}
	.topnav {
		&.tn1 {
			position: absolute;
			left: 246px;
			top: 0;
		}
		&, ul {
			margin: 0;
			padding: 0;
			list-style: none;
		}
		& {
			padding: 6px 5px 0 0;
		}
		> li {
			position: relative; 
			float: left; 
			height: 32px; 
			line-height: 32px;
			display: block;
			padding: 0 3px;
			&:last-child { padding: 0 0 0 3px; }
			> a {
				.text { display: inline-block; padding-left: 10px; }
				display: block;
				background: lighten(@primaryColor, 10%);
				color: #fff;
				text-decoration: none;
				padding: 0 10px;
				box-shadow: 0 1px 0 darken(@primaryColor, 20%);
				-moz-box-shadow: 0 1px 0 darken(@primaryColor, 20%);
				-webkit-box-shadow: 0 1px 0 darken(@primaryColor, 20%);
				.rounded(5px,5px,5px,5px);
				> img { margin: 0 0 3px; }
				&.glyphicons { 
					padding: 0 10px 0 35px; 
					i:before { color: #fff; font-size: 17px; top: 7px; left: 10px; }
					&.logout {
						padding: 0 38px 0 0;
						i:before { left: auto; right: 10px; }
					} 
				}
				&:hover { 
					color: #fff;
					background: lighten(@primaryColor, 15%);
					&.glyphicons { i:before { color: #fff; } } 
				}
			}
			&:last-child.open .dropdown-menu { right: 0; }
			&.open {
				height: 40px;
				> a {
					background: #363432;
					height: 40px;
					color: #f5f5f5;
					position: relative;
					line-height: 34px;
					i:before { top: 9px; color: #f5f5f5; }
					.caret { border-top-color: #333; }
					&:hover { i:before { color: #f5f5f5; } }
					.rounded(5px, 5px, 0, 0);
				}
				.dropdown-menu {
					background: #363432;
					border: none;
					box-shadow: none;
					-webkit-box-shadow: none;
					-moz-box-shadow: none;
					right: 3px;
					&.pull-left { left: 3px; }
					width: 246px;
					li {
						border-bottom: 1px solid #4a4947;
						&:last-child {
							border-bottom: none;
						}
						&:first-child {
							> a, > a:hover, > span { border-top: none; }
						}
						> a, > a:hover, > span {
							height: 29px;
							line-height: 29px;
							padding: 0 10px;
							display: block;
							background: #363432;
							color: #c8c8c8;
							&.glyphicons { i:before { left: auto; right: 10px; top: 8px; font-size: 17px; color: #c4c4c4; } }
						}
						> a:hover {
							background: darken(#363432, 10%);
						}
						&.active {
							background: darken(#363432, 15%);
							a { background: darken(#363432, 15%); }
						}
						.btn { margin: 3px 0; }
						&.highlight {
							> a, > a:hover, > span {
								background: rgba(0,0,0,.1);
							}
							&.profile {
								a:hover { color: #fff; }
								> a, > a:hover, > span {
									height: auto;
									line-height: normal;
									padding: 5px 10px 10px;
									.heading {
										display: block;
										text-transform: uppercase;
										font-weight: 600;
										margin-bottom: 5px;
										a { text-transform: none; }
									}
									.img {
										display: inline-block;
										float: left;
										width: 47px;
										height: 45px;
										line-height: 45px;
										background: #272729;
										margin: 0 10px 0 0;
										position: relative;
										&:before {
											text-align: center;
											width: 47px;
											height: 45px;
											line-height: 45px;
											content: "\e004";
											color: #595959;
											font-family: "Glyphicons";
											font-size: 24px;
											position: absolute;
											display: block;
										}
									}
									.clearfix { display: block; }
								}
							}
						}
					}
				}
			}
		}
		.dropdown > a { .caret { border-top-color: #fafafa; top: 8px; position: relative; } }
		.dropdown-menu { .rounded(); }
	}
}

.submenu-show {
    display: block;
    margin-top: -29px !important;
    position: absolute;
    &.pull-left {
    	left: auto !important;
    	right: 100% !important;
    }
    &.pull-right {
    	right: auto !important;
    	left: 100% !important;
    }
}
.submenu-hide {
    display: none !important;
    position: relative;
    top: auto;
    float: left;
}