//## fixed Navbar 
//
// body { 
// 	padding: 0;
// 	&.blank { padding: 0; }
// 	&.app { padding: 50px 0 50px; }
// 	// #body { padding:0; margin:0; }
// }

#fixed_nav {
	position: fixed;
	// let graphic card render header:
	// @include transform( translateZ( 0 ) );
	@include gpu_render;
	top: 0; left: 0; right: 0;
	@include border-radius(0);
	z-index: 999;
	min-height: 30px;
	background: #333;
	// background: #727270;
	color: #fff;
	.navbar-brand {
		padding: 0 10px 0 0;
		height: 40px;
		line-height: 40px;
		&.logo {
			width: 150px;
			overflow: hidden;
			text-indent: -1000px;
			background-color: transparent;
			background-image: image-url('magic/arrows/arrow1.png');
			background-position: center center;
			background-repeat: no-repeat;
			background-size: contain;
		}
	}
	
	
	.full-links {
		border: solid 1px #000;
		@include box-shadow( inset 0 1px 0 0 rgba(255,255,255,.25) );
		ul.nav > li {
			& > a {
				padding: 10px;
				line-height: 20px;
				&:hover {
					background: #000 !important;
					color: #fff !important;
				}
			}
			& > span {
				padding: 10px;
				line-height: 20px;
			}
			form {
				padding: 4px 0;
			}
			&.active a { background: #000; color: $brand-color; }
		}
	}
	.bubble-links {
		background: #fff;
		padding: 0 42px;
		ul.nav.navbar-nav > li {
			padding: 8px;
			& > a {
				padding: 2px 12px;
				line-height: 20px;
				color: #777;
				&:hover {
					background: transparent;
					color: #333;
				}
				&.btn {
					color: #fff;
					&:hover {
						background: $brand-color;
					}
				}
			}
			&.active > a, &.open > a {
				background: transparent;
				color: $brand-color;
			}
		}
		ul.nav.navbar-nav.navbar-left > li {
			padding: 8px;
			& > a {
				border: solid 1px transparent;
				@include border-radius(15px);
				&:hover {
					background: transparent !important;
					color: #333 !important;
					border: solid 1px $main-border-color;
				}
			}
			&.active > a, &.open > a {
				background: transparent;
				color: $brand-color;
				border: solid 1px $brand-color;
			}
		}
	}
	.bubble-links, .navbar-brand {
		.navbar-nav > li > .dropdown-menu {
			margin-top: 3px;
			border-radius: 3px;
			li a { color: #333; }
		}
	
		li.dropdown > a.dropdown-toggle {
			padding-top: 5px;
			padding-bottom: 5px;
			line-height: 30px;
			color: #fff;
			&:hover {
				background: #000;
				color: #fff;
				@include box-shadow(none);
			}
			& > * { vertical-align: middle; &.avatar {vertical-align: top; }}
		}
		li.dropdown.open > a.dropdown-toggle {
			background: #000;
			color: $brand-color;
		}
	}
}



//## Aside-Navigation
#nav-aside {
	display: block; position: fixed;
	// @include transform( translateZ( 0 ) );
	@include gpu_render;
	margin: 0; padding: 0;
	
	right: 0; left: 0; bottom: 0;
	background: #e1e1e1;
	z-index: 99;
	.inner-aside {
		height: 100%;
		border: solid 1px #ccc;
	}
	.aside-btn {
		display: block; position: relative;
		margin: 0 -1px; padding: 12px 0 8px;
		width: 50px;
		line-height: 30px;
		text-align: center;
		font-size: 22px;
		
		// @include box-shadow( inset 0 1px 0 0 rgba(255,255,255,.42) );
		border: none;
		border: solid 1px #ccc;
		border-top: solid 1px rgba(255,255,255,.42);
		
		color: #555;
		text-shadow: 0 1px 0 rgba( 255,255,255,.42 );
		
		&:hover {
			color: $brand-color;
			text-decoration: none;
		}
		&:active, &.active {
			background: $brand-color;
			color: #fff;
			@include antialiased_text;
			border: solid 1px darken($brand-color, 15%);
			@include box-shadow( inset 0 1px 0 0 rgba(255,255,255,.42) );
			text-shadow: 0 1px 2px rgba( 0,0,0,.42 );
		}
		.bubble-counter {
			display: block; position: absolute;
			padding: 0 5px; margin: 0;
			top: 3px; left: 27px;
			line-height: 14px;
			font-size: 10px;
			background: #cc4246;
			@include border-radius( 2px );
			color: #fff;
			text-shadow: 0 1px 1px rgba( 0,0,0,.20 );
		}
	}
}


body.front { padding: 42px 0 0; }




// # # #  R E S P O N S I V E - S T E P S  # # # # # # # # # # # # # # # # # # # # # # # # # # # 
@include responsiveStep-xs-only {
	#fixed_nav .logo-cell {display: none;}
	#nav-aside .inner-aside {
		display: table;
		table-layout:fixed;
		width: 100%;
		.aside-btn {
			display: table-cell;
			width: auto;
			// border: none;
			// border-right: solid 1px #ccc;
			// &:last-child { border-right:  none; }
			// &:hover { border-bottom: solid 2px #999; }
			// &:active, &.active { border-bottom: solid 2px $brand-color; }
		}
	}
}
@include responsiveStep-sm {
	#fixed_nav.full-links .navbar-header > .navbar-brand {display: none;}
	body.app { 
		padding: 42px 0 0;
		#body { padding:0; margin-left: 50px; }
		#fixed_nav .container-fluid { padding: 0 20px 0 50px;}
	}
	
	#nav-aside {
		top: 0; right: auto; padding: 42px 0 0;
		.aside-btn {
			// border: none;
			// border-bottom: solid 1px #ccc;
			&:last-child { @include box-shadow( 0 1px 0 0 rgba(255,255,255,.42) ); }
			// &:hover { border-right: solid 2px #999; }
			// &:active, &.active { border-right: solid 2px $brand-color; }
		}
	}
}
@include responsiveStep-md {
	
}
@include responsiveStep-lg {
	
}