//skin-3 should be used along with "no-skin" because of some overlappings
//<body class="no-skin skin-3">

/* skin 3 */
.skin-3 {
 @body-background: #BBB;
 @navbar-background: #404040;
 @sidebar-background: #DBDBDB;
 @sidebar-border: #A4C6DD;

 @nav-item-background: #E3E3E3;
 @nav-item-color: #5A5A5A;
 @nav-item-border: #F2F2F2;

 //different states
 @nav-item-color-hover: mix(#1963AA , #4D96CB);
 @nav-item-background-hover: #FFF;
 
 @nav-item-color-open: @nav-item-color-hover;
 @nav-item-background-open: #F8F8F8;

 @nav-item-background-active: lighten(saturate(#EEF8FF , 10%), 1%);
 @nav-item-color-active: #4D96CB;
 
 @nav-item-border-active: #A4C6DD;
 @nav-item-border-hover: desaturate(darken(@nav-item-border-active , 5%) , 5%);


 //submenu colors
 @submenu-background: #FFF;
 @submenu-border: #E5E5E5;

 @submenu-background-active: #FFF; //darken(@submenu-background-active , 2.5%);
 @submenu-border-active: #E5E5E5;

 @submenu-item-color: #616161;
 @submenu-item-border: #E4E4E4;

 @submenu-item-background: transparent;
 @submenu-item-background-hover: #F1F5F9;
 @submenu-item-background-active: #F5F7FA;


 
 @breadcrumbs-background: #E7F2F8;

 @sidebar-toggle-icon-color: #FFF;
 @sidebar-toggle-background: #D0D0D0;
 @shortcuts-background: @sidebar-background;
 @shortcuts-border: @nav-item-border;


 
 background-color: @body-background;
 
 //add a lined-paper like effect
 .main-container {
	&:before {
		background: #FFF;

		background: -moz-linear-gradient(top, #EEF5FA 0%, #FFF 8%) 0 4px;
		background: -webkit-gradient(linear, 0 0, 0 100%, from(#EEF5FA), color-stop(4%, #FFF)) 0 4px;
		background: -webkit-linear-gradient(top, #EEF5FA 0%, #FFF 8%) 0 4px;
		background: -o-linear-gradient(top, #EEF5FA 0%, #FFF 8%) 0 4px;
		background: -ms-linear-gradient(top, #EEF5FA 0%, #FFF 8%) 0 4px;
		background: linear-gradient(top, #EEF5FA 0%, #FFF 8%) 0 4px;

		-moz-background-size: 100% 26px;
		-webkit-background-size: 100% 26px;
		-o-background-size: 100% 26px;
		-ms-background-size: 100% 26px;
		background-size: 100% 26px;
	}
	
	@media (min-width: @screen-sm-min) {
		&.container:before {
			.box-shadow(~"0 0 0 1px rgba(50, 100, 200, 0.1)");
		}
	}
}
 
 
 .navbar {
	background: @navbar-background;
 }
 .sidebar {
	background-color: @sidebar-background;
	
	border-style: solid;
	border-width: 0 1px 0 0;
	border-color: @sidebar-border;
 }

 .nav-list > li {
	border-color: @nav-item-border !important;
	> a {
		background-color: @nav-item-background;
		color: @nav-item-color;

		> .arrow {
			color: inherit;
		}
		
		&:focus {
			background-color: lighten(@nav-item-background , 2%);
			color: @nav-item-color;
		}
	}

	&:hover {
		border-color: @nav-item-border-hover !important;
		& + li {
			border-top-color: @nav-item-border-hover !important;
		}
	}
	&.open {
		border-color: @nav-item-border-hover !important;
		& + li {
			border-top-color: @nav-item-border-hover !important;
		}
	}
	&.active {
		border-color: @nav-item-border-active !important;
		& + li {
			border-color: @nav-item-border-active !important;
			&:last-child {
				border-bottom-color: @nav-item-border !important;
				&:hover {
					border-bottom-color: @nav-item-border-hover !important;
				}
			}
		}
	}


	&:hover > a {
		background-color: @nav-item-background-hover;
		color: @nav-item-color-hover;
	}

	&.open > a , &.open:hover > a  {
		color: @nav-item-color-open;
		background-color: @nav-item-background-open;
	}
	&.open > a > .arrow {
		color: inherit;
	}

	&.active > a , &.active.highlight > a {
		background-color: @nav-item-background-active !important;
		color: @nav-item-color-active !important;
	}
 }


 .nav-list > li:hover:before , .nav-list > li.open:before {
	display: block;
	background-color: saturate(lighten(mix(#4D96CB , #444) , 10%), 10%) !important;
 }
 .nav-list > li.active:before {
	display: block;
	background-color: #4D96CB !important;
 }

 .page-content {
	background-color:transparent;
	//so that .main-content's background can be seen
 }
 .infobox-container .infobox:not(.infobox-dark) {
	border-style: solid;
	background-color: transparent;
 }

 .nav-list > li.active:after {
	display: none;
 }

 .nav-list li.active > a:after {
	right: -1px;
	top: 3px;

    border-width: 16px 10px;
	border-right-color: #FFF;
	-moz-border-right-colors: #FFF;
 }
 .nav-list li.active > a:before {
	display: block;
	content: "";
	
	position: absolute;
	
	top: 3px;
	right: 0;
	background-color: transparent;
	
	border-style: solid;
	border-color: transparent;
	
	border-right-color: darken(@sidebar-border , 5%);
	-moz-border-right-colors: darken(@sidebar-border , 5%);

    border-width: 16px 10px;
 }
 
 .nav-list > li.active > .submenu li.active > a {
	&:before, &:after {
		top: 1px;
	}
 }
 
 
 .nav-list li.active.open > a:before {
	display: none;
 }
 .nav-list li.active:not(.open) li.active > a:before {
	//hide the active caret when parent submenu is being closed (not open)
	display: none !important;
 }
 

  
  

  


  .nav-list > li.highlight.active > a:after {
	border-left-color: @nav-item-background-active;
	-moz-border-left-colors: @nav-item-background-active;
  }
  .nav-list > li.highlight.active > a:before {
	border-left-color: darken(@sidebar-border , 5%);
	-moz-border-left-colors: darken(@sidebar-border , 5%);
  }


  .nav-list li > .arrow:before {
		border-right-color: darken(#A4C6DD , 10%);
		-moz-border-right-colors: darken(#A4C6DD , 10%);
  }
  
  
 .nav-list > li .submenu > li {
  &.active:not(.open) > a {
	background-color: @submenu-item-background-active;
	&:hover {
		background-color: @submenu-item-background-hover;
	}
  }
 }

 
 
 .enable_submenu_hover_skin_3() when(@enable-submenu-hover = true) {
  .nav-list li.hover > .submenu {
	border-color: darken(@sidebar-border , 3%);
  }
  @media only screen and (min-width: @grid-float-breakpoint) {
	.nav-list li.hover {
		&.active > a:before {
			display: block;
		}
		.submenu > li.active > a:before {
			display: none ;
		}
	}
  }
 }
 .enable_submenu_hover_skin_3();

 .menu_min_skin_3() {
	  .nav-list > li > a > .menu-text {
		background-color: lighten(#EDF3F7 , 1%);
		border-color: #A4C6DD;
	  }
	  .nav-list > li.active > a > .menu-text {
		background-color: #EDF3F7;
	  }
	  .nav-list > li > .submenu {
		border-color: #A4C6DD;
		border-top-color: #C9DAE5;
	  }
	  

	  .nav-list > li.active > .arrow:before {
			border-right-color: #709FBF;
			-moz-border-right-colors: #709FBF;
	  }
	  .nav-list > li > .arrow:after {
			border-right-color: #EDF3F7;
			-moz-border-right-colors: #EDF3F7;
	  }
  
 
	 .nav-list li.active > a {
		&:after , &:before {
			display: none;
		}
	 } 
	 .nav-list > li.active > a {
		&:after, &:before {
			display: block;
			border-width: 9px 7px;
			top: 10px;
		}
	 }
	 
	 .enable_responsive_menu_tmp_in1() when(@enable-responsive-menu = true) {
		 @media only screen and (max-width: @grid-float-breakpoint-max) {
			&.responsive .nav-list > li.active > a {
				&:after, &:before {
					display: none;
				}
			}
		 }
	 }
	 .enable_responsive_menu_tmp_in1();
	 
	 
	 .nav-list > li.active.highlight > a {
		&:after, &:before {
			border-width: 20px 0 21px 10px;
			top: -1px;
		}
	 }
	.nav-list > li.active:hover > a{
		&:after, &:before {
			display: none;
		}
	}
	 
	 
	 .sidebar-shortcuts-large {
		background-color: #F5F5F5;
	 }
 }
 
 .enable_sidebar_collapse_skin_3() when(@enable-sidebar-collapse = true) {
  .sidebar.menu-min {
	.menu_min_skin_3();
  }
 }
 .enable_sidebar_collapse_skin_3();
 
 
 @media only screen and (max-width: @grid-float-breakpoint-max) {
	.sidebar.responsive {
		border-bottom-width: 1px !important;
	}
	.sidebar.navbar-collapse {
		border-bottom-color: #A4C6DD;
	}
	
	.nav-list li.active > a {
		&:after , &:before {
			display: none;
		}
	}
	
	.enable_minimized_responsive_menu_skin_3() when(@enable-minimized-responsive-menu = true) {
	 .sidebar.responsive-min {
		.menu_min_skin_3();
	 }
	 .sidebar.responsive-max {
		border-width: 0 1px 1px 0;
		.nav-list li.hover.active > a:before {
			display: none;
		}
	  }
	 }
	 .enable_minimized_responsive_menu_skin_3();
	 

	 .sidebar.navbar-collapse .sidebar-shortcuts-large {
		background-color: transparent;
	 }
 }

 

 

 //extra
 .sidebar-shortcuts , .sidebar-shortcuts-mini {
	background-color: @shortcuts-background;
	//border-color: @shortcuts-border;
 }
 .sidebar-shortcuts-large > .btn:focus {
	outline: none;
 } 
 .sidebar > .nav-search {
	background-color: @shortcuts-background;
	//border-color: @shortcuts-border;
 }

 .sidebar-toggle {
	background-color: @sidebar-toggle-background;
	border-color: @nav-item-border; 
	//border-width: 0 0 1px;

	&:before {
		border-color: @nav-item-border;
	}

	> .@{icon} {
		background-color: @sidebar-toggle-icon-color;
		background-color:#FFF;
		border-color:#999;
		color:#999;
	}
 }

 .enable_collapsible_responsive_menu_skin_3_tmpp() when(@enable-collapsible-responsive-menu = true) {
	 @media only screen and (max-width: @grid-float-breakpoint-max) {
	  .sidebar.navbar-collapse {
		.nav-list > li:before {
			height: @nav-item-height + 4 !important;
		}
		.sidebar-shortcuts {
			padding: 0 0 3px !important;
		}
	  }
	 }
 }
 .enable_collapsible_responsive_menu_skin_3_tmpp();
 
 
 
 .nav-list > li.active.hover:hover > a.dropdown-toggle:after,
 .nav-list > li.active.hover:hover > a.dropdown-toggle:before {
	display: none;
 }
 


 
 .enable_old_menu_toggle_button_skin_3() when(@enable-old-menu-toggle-button = true) {
 .main-container .menu-toggler {
	background-color: #62A8D1;
	color: #FFF;
	
	&:before, &:after {
		border-color: #FFF;
	}
	
	> .toggler-text {
		border-top-color: #62A8D1;
		-moz-border-top-colors: #62A8D1;
		&:after {
			color: #FFF;
		}
	}
 }
 }
 .enable_old_menu_toggle_button_skin_3();


 .navbar .navbar-toggle {
	//box-shadow: none;
	//border-radius: 0;
	border-color: rgba(255, 255, 255, 0.15);

	transition: background-color 0.1s ease 0s;
	background-color: #648CAE;
	
	&:focus {
		background-color: #648CAE;
		border-color: rgba(255, 255, 255, 0.15);
	}
	&:hover {
		background-color: darken(#648CAE , 4%);
		border-color: rgba(255, 255, 255, 0.15);
	}
	&.display, &[data-toggle=collapse]:not(.collapsed) {
		background-color: darken(#648CAE , 8%);
		border-color: rgba(255, 255, 255, 0.3);
	}
 }
 

  .enable_breadcrumbs_skin_3() when(@enable-breadcrumbs = true) {
	 .breadcrumbs {
		border-width: 0;
		background-color: @breadcrumbs-background;
		border-radius: 4px;
		
		margin: 8px 8px 0;
	}
	
	.navbar:not(.navbar-fixed-top):not(.h-navbar) + .main-container .breadcrumbs {
		margin-top: auto;//margin-top moves .sidebar down as well
		top: 8px;
		margin-bottom: 8px;		
	}

	@media only screen and (max-width: @grid-float-breakpoint-max) {
		.breadcrumbs {
			margin: 5px 5px 0;
		}
		.navbar:not(.navbar-fixed-top):not(.h-navbar) + .main-container .breadcrumbs,
		.navbar:not(.navbar-fixed-top) + .main-container .breadcrumbs {
			margin-top: auto;//margin-top moves .sidebar down as well
			top: 5px;
			margin-bottom: 5px;
		}
		
		.menu-toggler + .sidebar.responsive + .main-content .breadcrumbs {
			margin: 0;
			top: auto;
			border-radius: 0;
		}
	}


	.enable_fixed_breadcrumbs_skin_3() when(@enable-fixed-breadcrumbs = true) {
		@media (min-width: @screen-fixed-breadcrumbs) {
			.breadcrumbs.breadcrumbs-fixed + .page-content {
				padding-top: @page-content-padding-top + @breadcrumb-height + 8;
			}
		}
		@media (min-width: @screen-fixed-breadcrumbs) and (max-width: @grid-float-breakpoint-max) {
			.breadcrumbs.breadcrumbs-fixed + .page-content {
				padding-top: @page-content-padding-top + @breadcrumb-height + 5;
			}

			.menu-toggler + .sidebar.reponsive + .main-content .breadcrumbs.breadcrumbs-fixed + .page-content {
				padding-top: @page-content-padding-top + @breadcrumb-height;
			}
		}


		.enable_container_breadcrumbs_skin_3() when(@enable-breadcrumbs = true) {
		 //because breadcrumbs has 8px margin on left and right
		 .container.main-container {
			@media (min-width: max(@screen-sm-min , @screen-fixed-breadcrumbs)) and (max-width: @grid-float-breakpoint-max) {
				.breadcrumbs-fixed {
					width: @container-sm - 10;
				}
				.sidebar.compact + .main-content .breadcrumbs-fixed {
					width: @container-sm - 10;
				}
				.sidebar.menu-min + .main-content .breadcrumbs-fixed {
					width: @container-sm - 10;
				}
				
				.sidebar.responsive-min + .main-content .breadcrumbs-fixed {
					width: @container-sm - @sidebar-min-width - 10;
				}
			 }

			 @media (min-width: @screen-md-min) {
				.breadcrumbs-fixed {
					width: @container-md - @sidebar-width - 16;
				}
				.sidebar.compact + .main-content .breadcrumbs-fixed {
					width: @container-md - @sidebar-compact-width - 16;
				}
				.sidebar.menu-min + .main-content .breadcrumbs-fixed {
					width: @container-md - @sidebar-min-width - 16;
				}
			 }

			 @media (min-width: @screen-lg-min) {
				.breadcrumbs-fixed {
					width: @container-lg - @sidebar-width - 16;
				}
				.sidebar.compact + .main-content .breadcrumbs-fixed {
					width: @container-lg - @sidebar-compact-width - 16;
				}
				.sidebar.menu-min + .main-content .breadcrumbs-fixed {
					width: @container-lg - @sidebar-min-width - 16;
				}
			 }
		 }
		}
		.enable_container_breadcrumbs_skin_3();
	}
	.enable_fixed_breadcrumbs_skin_3();

 }
 .enable_breadcrumbs_skin_3();
 

 @media only screen and (max-width: @grid-float-breakpoint-max) {
	.nav-list li.active > a:before, .nav-list li.active > a:after {
		display: none;
	}
 }

 .sidebar-shortcuts-large > .btn {
	line-height: 26px;
	border-width: 1px;
 }
 .sidebar-shortcuts-mini {
	padding-top: 3px;
	padding-bottom: 3px;
	padding-left: 1px;
 }
 .sidebar-shortcuts-mini > .btn {
	border-width: 1px !important;
	opacity: 1;
	padding: 7px !important;
	margin: 1px 1px 0 0;
 }
 
 
 
.enable_horizontal_menu_skin_3() when(@enable-horizontal-menu = true) {
 @media only screen and (min-width: @grid-float-breakpoint) {
 //top menu
 .sidebar.h-sidebar {
	background-color: @nav-item-background;
	&:before {
		background-color: #CBD0D6;
		border-bottom-width: 0;
	}
	
	.sidebar-shortcuts-mini > .btn {
		padding: 8px !important;
	}
	.sidebar-shortcuts-large {
		background-color: #FFF;
		line-height: 36px;
	}
	
	+ .main-content .breadcrumbs {
		border-color: desaturate(darken(@breadcrumbs-background , 5%) , 5%);
		top: 2px;
	}
	
	.nav-list > li.hover > .submenu {
		//border-color: #CCC;
		border-color: #A4C6DD;
	}
	
 
 	.nav-list > li {
		border-color: @nav-item-border;
		&:hover {
			border-color: @nav-item-border-hover;
		}
		&.active {
			border-color: @nav-item-border-active;
		}
	}



	
	 .nav-list > li.active > a:after {
		left: 0;
		top: auto;
		right: auto;
		bottom: -2px;
		
		left: 50%;
		margin-left: -7px;
		
		border-color: transparent;
		-moz-border-right-colors: none;

		border-width: 8px 7px !important;
		border-bottom-color: #FFF;
		-moz-border-bottom-colors: #FFF;
	 }
	 .nav-list > li.active > a:before {
		display: block;
		left: 0;
		top: auto;
		right: auto;
		
		bottom: -1px;
		
		left: 50%;
		margin-left: -8px !important;
		
		border-width: 8px !important;
		
		border-color: transparent;
		-moz-border-right-colors: none;
		
		border-bottom-color:  lighten(#4D96CB, 10%);
		-moz-border-bottom-colors: lighten(#4D96CB, 10%);
	 }
	 
	 
	 .nav-list > li.hover {
		> .arrow:before {
			-moz-border-right-colors: none;
			border-right-color: transparent;
			
			border-bottom-color:  darken(#A4C6DD , 10%);
			-moz-border-bottom-colors:  darken(#A4C6DD , 10%);
		}
	}
 
 }
 }//@media
}
.enable_horizontal_menu_skin_3();



.sidebar-scroll {
 .sidebar-shortcuts {
	//border-bottom: 1px solid desaturate(lighten(@nav-item-border-active , 5%) , 5%);
	border-bottom-color: 1px solid #99B6C9;
 }
 .sidebar-toggle {
	//border-top: 1px solid desaturate(lighten(@nav-item-border-active , 5%) , 5%);
	border-top-color: #99B6C9;
 }


 //.nav-list li.active > a:before, .nav-list li.active > a:after {
	//display: none !important;
 //}

 .scroll-track {
	background-color: transparent;
 }
 .scroll-bar {
	background-color: #CCC;
	background-color: rgba(0,0,0,0.2);
 }
}


 
@media only screen and (min-width: @screen-sm-min) and (max-width: @grid-float-breakpoint-max) {
 .navbar.navbar-collapse {
	background-color: transparent;
	&:before , .navbar-container {
		background: @navbar-background;
	}
 }
}




}//.skin-3