// Topnav Header Styles
// --------------------------------------------------------------------------


/* Drop Downs */

#topnav {
	margin: 0;
	border:none; 
	padding-left: 8px;
	padding-right: 8px;
	box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2);
	&:extend(.clearfix all);


	// Logo
		.navbar-brand {
			.text-hide() !important; 
			background: url("") no-repeat top left; // Put your logo here
			height: @navbar-height;
			width: @navbar-brand-width;
				@media (max-width: @screen-xs-max) { // reduce width of navbar-brand in small screen
					width: 68px;
				}
			padding: 16px 0 !important;
		}
		//-- Logo Code: Start - remove/modify this as you see fit
	    &.navbar-default .navbar-brand, &.navbar-bluegraylight .navbar-brand, &.navbar-graylight .navbar-brand {background: url("../img/logo-dark.png") no-repeat left 0 center; } // dark logo
	    .navbar-brand {background: url("../img/logo.png") no-repeat left 0 center;} //white logo
		//-- Logo Code: End


	// Our Dropdown Menus don't lose styles on small screens, so we apply them again
		.dropdown-menu {
			background-color: @dropdown-bg;
			border: 0px solid @dropdown-fallback-border; // IE8 fallback
			border: 0px solid @dropdown-border;
			border-radius: @border-radius-base;
			.box-shadow(0 4px 9px 0 rgba(0,0,0,.24));
		}

	//Keep topnav toolbar from collapsing even in small screens
		.navbar-nav .open .dropdown-menu {position: absolute;}


	// Trigger Styles
		.logo-area {
			display: block;
			float: left;
			&:extend(.clearfix all);

			> a, > span, > div {
				display: block;
				float: left;
			}

			.toolbar-trigger a {
				display: block;
				padding: 8px 0;
				margin-right: 24px;
				span.icon-bg {
					display: block;
					border-radius: 50%;
					height: 40px;
					width: 40px;
					padding: 0;
					line-height: 40px;
					font-size: 17px;
					text-align: center;
					i {
					}
				}
			}

			@media (min-width: @screen-sm-min) {
				width: 456px;
				height: 56px;
				display: inline-block;
			}	
		}
		
	// Toolbar Icon
		.toolbar-icon-bg {
			> a:hover, > a:focus, > a.active {background-color: transparent;}
			&.open > a {
				background-color: transparent;
				&:hover {background-color: transparent;}
				span.icon-bg { &:hover {}}
			}
		}
		.toolbar.pull-right .toolbar-icon-bg {
			> a {
				padding: 8px 0;
				span.icon-bg {
					display: block; 
					border-radius: 20px; 
					padding: 0;
					line-height: 40px;
					font-size: 17px; 
					text-align: center; 
					height: 40px; 
					width: 40px;
					i {}
				}
			}
			&:hover {
				span.icon-bg {}
			}
		}

	// UserInfo
		.userinfo {
			min-width: 200px;
			li a {
				&:extend(.clearfix all);
				color: @gray-dark;
				i {margin-right: 16px; color: @gray-light;}
				.badge {position: static; margin-top: 2px;}
				&:hover, &:focus {
					color: @gray-darker;
					i {color: @gray;}
				}
			}
		}

	// Stylings for small screens
		.navbar-nav           {margin: 0;
			&.toolbar   {
				>li {
					float: left; 
					margin-right: 8px;
					>a {padding: 14px 16px; }
					&:last-child {margin-right: 0;}
				}
			}
		}

	// User Icon
		a.username {
			padding: 8px 0 !important;
			&:extend(.clearfix all);
			img {
				height: 40px;
				width: 40px;
				float: right;
				border-radius: 50%;
			}
		}
	
	//Badges
		.nav .badge {
			text-align: center;
			text-shadow: none !important;

			top: 8px;
			right: 0;
			position: absolute;
		}

	// Toolbar Search
		#toolbar-search {
			float: left;

			&.active {
				display: block !important;
				right: 0;
				left: 0;
				top: 0;
				position: absolute;
				z-index: 999;
				margin: 0;
				.input-group {
					padding: 0 8px;
					width: 100%;
				}
		  	}

			.input-group {
				width: 208px;
				.input-group-btn {
					width: 40px;
					height: 40px;
					button {
						&.active, &:active {box-shadow: none !important;}
						transition: none !important;
						
						border:none !important;
						border-radius: 20px 0 0 20px;
						padding: 10px;
						font-size: 16px;
						text-align: center;
						height: 40px;
						width: 40px;
						line-height: 1em;
						i {
							line-height: inherit;
						}
					}
				}
				.input-group-btn:last-child {
					button {
						border-radius: 0 20px 20px 0;
					}
					display: none;
					@media (max-width: @screen-xs-max) {
						display: table-cell;
					}
				}
				.form-control {
					height: 40px;
					margin: 8px 0;
					border: none;
					// border-radius: 0 20px 20px 0;
					padding-left: 0;

					&:focus, &:hover {
						box-shadow: none !important;
						border: none;
					}
				}
			}
		}

	// Topnav Dropdown
		.topnav-dropdown-header, .topnav-dropdown-footer {
			height: 32px;
			line-height: 32px;
			padding-left: 12px;
			padding-right: 12px;
			font-size: 12px;
			color: @gray-50;
		}
		.topnav-dropdown-header {
			border-bottom: 1px solid @border-lighter;
			span {
				color: @gray;
				font-weight: 600;
				text-transform: uppercase;
			}
		}
		.topnav-dropdown-footer {
			border-top: 1px solid @border-lighter;
			a {
				display: block; 
				text-align: center;
			}
		}


	// Notifications
		.notifications {
			padding: 0;

			@media (max-width: @screen-xs-max) { //re-arrange position in small screen
				right: -48px;
				&::before, &::after {right: 60px;}
			}

			.scroll-pane {
				height: 290px;
				width: 288px;
			}
			.notification-heading {
				margin: 0;
				font-size: @font-size-base;
				font-weight: normal;
				line-height: @line-height-base;
				color: @gray-dark;
			}
			.notification-time {
				font-size: @font-size-small;
				line-height: @line-height-small;
				color: @gray-light;
			}
			.media {
				margin-top: 0;
				border-bottom: 1px solid @gray-100;
				&:last-child {border-bottom: none;}
			}
			.media a {
				display: block;
				padding: 16px;
				// background-color: @gray-50;
				border-radius: @border-radius-base;
				&:hover {background-color: @gray-50;}
			}
			.media-list {
				.media-left {padding-right: 8px;}
			}

			.notification-icon {
				height: 32px;
				width: 32px;
				display: block;
				background: @gray;
				border-radius: 16px;

				i {
					display: block;
					text-align: center;
					line-height: 32px;
					width: 32px;
					color: #fff;
				}
			}

			.notification-success .notification-icon {background: @light-green-300}
			.notification-info    .notification-icon {background: @cyan-300}
			.notification-danger  .notification-icon {background: @red-300}
			.notification-warning .notification-icon {background: @amber-300}
			.notification-primary .notification-icon {background: @light-blue-300}
			.notification-inverse .notification-icon {background: @gray-300}
			.notification-teal	  .notification-icon {background: @teal-300}
			.notification-indigo  .notification-icon {background: @indigo-300}

			.notification-message {
				.avatar {
					height: 32px;
					width: 32px;
				}
			}
		}


	// Active Icons
		.icon-ti, .icon-fa {line-height: 40px;}

		.icon-ti {font-size: 17px;}
		.icon-fa {font-size: 16px;}

		// Exceptions
		.userinfo {
			.icon-fa, .icon-ti {line-height: 17px;}
		}
}