.navbar {
	
	&.horizontal-menu {
		position: relative;
		height: @horizontal-menu-height;
		background: @horizontal-menu-bg;
		margin: 0;
		padding: 0;
		z-index: 100 + 1;
		min-height: 0px;
		.box-shadow(0 0px 1px fade(#000, 15%));
		
		&.navbar-fixed-top {
			position: fixed;
			left: 0;
			right: 0;
			top: 0;
			
			+ .page-container {
				margin-top: @horizontal-menu-height;
				
				> .sidebar-menu.fixed .sidebar-menu-inner {
					top: @horizontal-menu-height;
				}
				
				> .main-content {
				}
			}
			
			.settings-pane-open & {
				position: relative;
				
				+ .page-container {
					margin-top: 0;
					
					> .sidebar-menu.fixed .sidebar-menu-inner {
						top: 0;
					}
				}
			}
		}
			
		+ .page-container {
			//margin-top: @horizontal-menu-height;
			
			> .sidebar-menu.fixed .sidebar-menu-inner {
				top: @horizontal-menu-height;
			}
		}
		
		.navbar-inner {
			&:extend(.clearfix all);
			
			.navbar-brand {
				padding: 0 @default-padding;
				margin: 0;
				float: left;
				height: @horizontal-menu-height;
				display: table;
				
				&:hover a[data-toggle="settings-pane"] {
					.opacity(1);
				}
				
				.settings-pane-open & a[data-toggle="settings-pane"] {
					.opacity(1);
					
					i {
						color: @text-color;
					}
				}
				
				a {
					display: table-cell;
					vertical-align: middle;
					
					&.logo {
						//display: block;
						
						img {
							margin: 0;
						}
					}
					
					&[data-toggle="settings-pane"] {
						padding-left: @base-padding;
						.opacity(0);
						&:extend(.transall);
						
						i {
							display: block;
							line-height: 1;
							font-size: @font-size-small;
							color: @main-text-color;
							margin-top: 1px;
							&:extend(.transall);
						}
						
						&:hover {
							
							i {
								color: @text-color;
							}
						}
					}
				}
			}
			
			@media screen and (min-width: @screen-sm){
			
				.navbar-nav {
					list-style: none;
					padding: 0;
					margin: 0;
					
					&.click-to-expand {
					
						.has-sub {		
						
							&:hover > a:before {
								.rotate(0deg);
							}
							
							&.expanded > a:before {
								.rotate(90deg);
							}
						}
					}
					
					a {
						position: relative;
						display: inline-block;
						line-height: 1;
						color: @horizontal-menu-link-color;
						z-index: 1;
						&:extend(.transall);
							
						> i {
							display: inline-block;
							margin-right: @base-padding/2;
						}
						
						> .label.pull-right {
							margin-top: 0;
						}
						
						> .title {
							display: inline-block;
							
							+ .badge {
								margin-left: @base-padding - 3;
							}
						}
							
						> .badge {
							
						}
					}
					
					li:hover > a, 
					li.active > a {
						color: @horizontal-menu-link-active-color;
					}
					
					> li {
						position: relative;
						z-index: 1;
						line-height: @horizontal-menu-height;
						border: 1px solid transparent;
						border-top: 0;
						border-bottom: 0;
						
						&:hover {
							z-index: 2;
						}
						
						&.active,
						&:hover {
							border-color: @horizontal-menu-link-active-border-color;
							background-color: @horizontal-menu-link-active-bg-color;
						}
						
						&.active {
							margin-left: -1px;
							
							+ li:hover {
								border-left-color: transparent;
							}
						}
						
						> a {
							padding: 0 @default-padding/2;
							line-height: @horizontal-menu-height;
						}
						
						> ul {
							position: absolute;
							min-width: @horizontal-menu-submenu-width;
							border: 1px solid #eee;
							visibility: hidden;
							display: block;
							left: -1px;
							.border-radius(0 0 @border-radius-base @border-radius-base);
							.box-shadow(~"0 2px 8px rgba(0,1,1,.05)");
							.transition(~"opacity 180ms linear, visibility 180ms linear");
							.opacity(0);
						}
						
						&.hover {
							
							> ul {
								visibility: visible;
								.opacity(1);
							}
						}
					}
					
					
					// First Level
					ul {
						position: relative;
						display: none;
						list-style: none;
						padding: 0;
						margin: 0;
						top: 100%;
						min-width: 100%;
						background: @horizontal-menu-submenu-bg;
						z-index: 2;
						
						// Second Level
						ul {
							display: block;
							height: 0px;
							overflow: hidden;
							visibility: hidden;
							.opacity(0);
							.transition(~"opacity 350ms linear");
							
							&.is-visible {
								height: auto;
								visibility: visible;
								.opacity(1);
							}
						}
						
						> li:last-child > a:after {
							display: none;
						}
						
						> li {
							@h-padd: @default-padding - 5;
							
							line-height: 1;
							margin: 0;
													
							> a {
								position: relative;
								display: block;
								white-space: nowrap;
								padding: @default-padding/2 @h-padd;
								color: @main-text-color;
								
								&:after {
									content: '';
									position: absolute;
									left: @h-padd;
									right: @h-padd;
									bottom: 0;
									background: #eee;
									height: 1px;
								}
							}
							
							&.active > a {
								color: @horizontal-menu-link-active-color;
								background: #fafafa;
								border-top: 1px solid #eee;
								margin-top: -2px;
								
								&:after {
									left: 0;
									right: 0;
								}
							}
							
							&.has-sub {
								
								> a {
								
									&:before {
										content: '\f105';
										font-family: 'FontAwesome';
										display: block;
										float: right;
										color: @main-text-color;
										position: relative;
										margin-left: @base-padding;
										line-height: 1.3;
										&:extend(.transall);
										.transform-origin(center center);
									}
								}
								
								&:hover > a:before,
								&.expanded > a:before {
									.rotate(90deg);
								}
							}
							
							&.hover {
							}
						
							ul {
								background: @horizontal-menu-submenu-sub-bg;
								border-top: 1px solid #eee;
								border-bottom: 1px solid #eee;
								margin-top: -1px;
								
								ul {
									@bg: darken(@horizontal-menu-submenu-sub-bg, 2%);
									@border: darken(@bg, 4%);
									
									background: @bg;
									border-top-color: @border;
									border-bottom-color: @border;
									
									a:after {
										background-color: @border;
									}
								
									ul {
										@bg: darken(@horizontal-menu-submenu-sub-bg, 4%);
										@border: darken(@bg, 4%);
										
										background: @bg;
										border-top-color: @border;
										border-bottom-color: @border;
										
										a:after {
											background-color: @border;
										}
										
									}
								}
							}
	
						}
					}
				}
			
			}
			
			.navbar-mobile-clear {
				display: block;
			}
			
			> .nav {
				list-style: none;
				margin: 0;
				padding: 0;
				
				&.navbar-right {
					//padding-right: @default-padding/2;
				}
				
				&.navbar-mobile {
					display: none;
				}
				
				> li {
					line-height: @horizontal-menu-height;
					display: inline-block;
					@link-active-color: darken(@userinfo-link-color, 15%);
												
					i {
						font-size: @font-size-base + 2;
						color: @userinfo-link-color;
						line-height: 1;
					}
					
					> a {
						position: relative;
						padding: 0 @default-padding/2;
						margin: 0;
						border: 1px solid transparent;
						border-top: 0;
						border-bottom: 0;
						z-index: 2;
						
						&:hover {
							background: @horizontal-menu-link-active-bg-color;
							//border-color: @horizontal-menu-link-active-border-color;
							
							i {
								color: @link-active-color;
							}
						}
						
						&.notification-icon {
							padding: 0 @base-margin;
							
							&:before {
								content: '';
								position: absolute;
								//display: block;
								height: 2px;
								top: 0px; left: 0; right: 0;
								background: @secondary-color;
								display: none;
							}
							
							&:hover:before {
								display: block;
							}
							
							i {
								margin-right: 2px;
							}
							
							.badge {
								font-size: 9px;
								position: absolute;
								top: 50%;
								right: 10px;
								padding: 4px;
								min-width: 18px;
								font-size: 400;
								line-height: 1;
								margin-top: -20px;
							}
							
							&.notification-icon-messages {
								
								&:before {
									background-color: @xe-purple;
								}
							}
						}
						
						&[data-toggle="chat"] {
							padding: 0 @base-margin;
							
							i {
								
								.chat-open & {
									color: @link-active-color;
								}
							}
						}
					}
					
					&.open > a.notification-icon {
						//background: @horizontal-menu-link-active-bg-color;
						background-color: #fff;
						border-color: @horizontal-menu-link-active-border-color;
						color: darken(@userinfo-link-color, 15%);
						
						i {
							color: @link-active-color;
						}
						
						&:before {
							display: block;
						}
					}
					
					> ul {
						z-index: 1;
						border-color: @horizontal-menu-link-active-border-color;
					}
					
					// Search field
					&.search-form {
						&:extend(.user-info-navbar .user-info-menu > li.search-form all);
						padding: 0 @base-margin;
					}
					
					// User Profile
					&.user-profile {
						&:extend(.user-info-navbar .user-info-menu > li.user-profile all);
						
						> a {
							border: 1px solid transparent;
							border-top: 0;
							border-bottom: 0;
							
							&:focus {
								background-color: #fff;
							}
						}
						
						&.open > a {
							background-color: #fff;
							border-color: @horizontal-menu-link-active-border-color;
						}
						
						&.open {
							
							> .dropdown-menu {
								margin-left: -1px;
							}
						}
					}
					
					// Dropdown Menus
					.dropdown-menu {
						&:extend(.user-info-navbar .user-info-menu > li .dropdown-menu all);
						line-height: @line-height-base;
						
						&.messages,
						&.notifications,
						&.user-profile-menu {
							z-index: 1;
							margin-top: -1px;
							//&:extend(.user-info-navbar .user-info-menu > li .dropdown-menu.messages all);
						}
						
						&.user-profile-menu {
							right: 0 !important;
						}
						
						&.notifications {
							//&:extend(.user-info-navbar .user-info-menu > li .dropdown-menu.notifications all);
						}
					}
				}
			}
			
			
				
			@media screen and (min-width: @screen-xs-max) and (max-width: @screen-md-min){
				
				.navbar-brand {
					padding: 0 @default-padding/2;
				}
				
				.navbar-nav {
					
					> li {
						line-height: @horizontal-menu-height - 1;
						
						> a {
							padding: 0 @base-padding;
							font-size: @font-size-base - 1;
							
							> .badge {
								display: none;
							}
						}
					}
				}
				
				> .nav {
					
					> li {
							
						i {
							font-size: @font-size-base;
						}
						
						> a {
							
							&.notification-icon {
								padding-left: @default-padding/2;
								padding-right: @default-padding/2;
							}
						}
						
						&.user-profile {
							
							> a {
								
								> span {
									display: none !important;
								}
							}
						}
					}
				}
			}
		}
		
		// Minimal
		&.navbar-minimal {			
			height: @horizontal-menu-height-minimal;
			
			&.navbar-fixed-top {
			
				+ .page-container {
					margin-top: @horizontal-menu-height-minimal;
					
					> .sidebar-menu.fixed .sidebar-menu-inner {
						top: @horizontal-menu-height-minimal;
					}
				}
			}
				
			+ .page-container {
				
				> .sidebar-menu.fixed .sidebar-menu-inner {
					top: @horizontal-menu-height-minimal;
				}
			}
			
			.navbar-inner {
			
				.navbar-brand {
					height: @horizontal-menu-height-minimal;
				}	
					
				@media screen and (min-width: @screen-sm){
				
					.navbar-nav {
						
						> li {
							line-height: @horizontal-menu-height-minimal;
							
							> a {
								line-height: @horizontal-menu-height-minimal;
							}
						}
					}
				
				}
				
				
				> .nav {
					
					
					> li {
						line-height: @horizontal-menu-height-minimal;
					}
				}
					
				@media screen and (min-width: @screen-xs-max) and (max-width: @screen-md-min){
					
					.navbar-nav {
						
						> li {
							line-height: @horizontal-menu-height-minimal - 1;
						}
					}
				}
			}
		}
	}
}


// Mobile
@media screen and (max-width: @screen-sm){

	.navbar {
		
		&.horizontal-menu {
			background: @brand-primary;
			color: #fff;
			height: auto;
			
			.chat-open & {
				left: -@sidebar-width;
			}
			
			&.navbar-fixed-top {
			position: relative;
			
			+ .page-container {
				margin-top: 0;
				
				> .sidebar-menu.fixed .sidebar-menu-inner {
					top: 0;
				}
			}
			
			.settings-pane-open & {
				position: relative;
				
				+ .page-container {
					margin-top: 0;
					
					> .sidebar-menu.fixed .sidebar-menu-inner {
						top: 0;
					}
				}
			}
		}
				
			+ .page-container {
			
			> .sidebar-menu.fixed .sidebar-menu-inner {
				top: @horizontal-menu-height;
			}
		}
			
			.navbar-inner {
				padding: @base-margin 0;
				
				.navbar-brand {
					height: auto;
					padding-left: @base-margin;
					
					a[data-toggle="settings-pane"] {
					
						display: none;
					}
				}
				
				.navbar-mobile-clear {
					display: block;
					clear: both;
				}
				
				.navbar-nav {
					display: none;
					.sidebar-menu > .main-menu;
					margin-bottom: 0;
					
					&.mobile-is-visible {
						display: block;
					}
				}
				
				> .nav {
					display: none;
					
					> li {
						line-height: 65px;
					}
				}
				
				// Mobile Toggles
				> .nav {
					
					&.nav-userinfo {
						float: none;
						width: 100%;
						display: none;
						background: #fff;
						position: relative;
						top: @base-margin;
						text-align: right;
						
						&.mobile-is-visible {
							display: block;
						}
						
						> .xs-left {
							float: left;
							
							&.open > .dropdown-menu {
								left: 1px;
							}
						}
						
						.notification-icon {
							
							.badge {
								top: 50%;
							}
						}
						
						.user-profile {
							
							> a {
								
								span {
									display: none;
								}
							}
							
							&.open > a {
								background-color: @horizontal-menu-link-active-bg-color;
							}
						}
					}
					
					&.navbar-mobile {
						display: block;
						float: right;
						padding-right: @base-margin;
						
						a {
							@s: 18px;
							
							position: relative;
							display: inline-block;
							color: @main-text-color;
							line-height: 1;
							margin-left: @default-padding/2;
							
							i {
								line-height: 1;
								font-size: @s;
								position: relative;
								top: 1px;
							}
	
							&:hover,
							&:active,
							&:focus {
								color: @main-text-active-color;
							}
							
							.badge {
								position: absolute;
								right: -3px;
								top: -8px;
								font-size: 8px;
								padding: 1px 2px;
								min-width: 14px;
							}
						}
					}
				}
			}
		}
	}
}