GSYH/WebRoot/WEB-INF/classes/static/ace/css/less/skins/skin-2.less

//skin 2
.skin-2 {
  
 @color1: #00BE67;
 @color2: #5ED02B;
 @color3: #A7D700;
 @color4: #CEE100;
 @color5: #F8C600;
 @color6: #FFAB00;
 @color7: #FF6E00;
 @color8: #F21C30;//#E24D59
 @color9: #DB348A; //#E258A0;
 @color10: #C55EE7;
 @color11: #218BEE;
 @color12: #2ECEE7;


 @default-color: @color9;//you can use one color only, you should comment .colorize1(1) and .colorize2(1)
 
 @body-background: #5C5C5C;
 @navbar-background: #C6487E;   //#56A580 green  #669CBA blue
 @sidebar-background: #505050;

 @nav-item-background: #393939;//#4C313C 
 @nav-item-color: #E6E6E6;
 @nav-item-border: #484848;


 //different states

 @nav-item-color-hover: rgba(0,0,0,0.6);
 @nav-item-icon-hover: #FFF;
 @nav-item-background-hover: desaturate(@default-color , 25%);

 @nav-item-color-open: rgba(0,0,0,0.6);  
 @nav-item-icon-open: #FFF;
 @nav-item-background-open: @nav-item-background-hover;

 @nav-item-color-active: #FFF;
 @nav-item-background-active: #242424;
 @nav-item-background-active2: @nav-item-background-hover;//.active.highlight


 //submenu colors
 @submenu-background: mix(@default-color , #303030, 12%);
 @submenu-item-color: #EEE;
 @submenu-item-background-hover: rgba(0,0,0,0.1);
 @submenu-item-background-active: rgba(0,0,0,0.05);

 @hover-submenu-border: rgba(0,0,0,0.4);


 @breadcrumbs-background: #E7F2F8;

 
 @sidebar-toggle-background: #2F2F2F;
 @sidebar-toggle-border: lighten(@nav-item-border , 18%);
 @sidebar-toggle-icon-background: #333;
 @sidebar-toggle-icon-color: #AAA;
 @sidebar-toggle-icon-border: #BBB;
 
 @shortcuts-background: #393939;



 background-color: @body-background;
 .navbar {
	background: @navbar-background;
 }
 .sidebar {
	background-color: @sidebar-background;
	border-right-width: 0;
 }

 .nav-list > li {
	border-color: @nav-item-border;
	&:first-child {
		border-top-color: lighten(@nav-item-border , 7%);
	}
	&:last-child {
		border-bottom-color: lighten(@nav-item-border , 10%);
	}

	> a {
		background-color: @nav-item-background;
		color: @nav-item-color;
		> .menu-text , > .arrow {
			color: @nav-item-color;//if removed, it will have li:nth-child(n) color
		}
	}


	&:hover > a, &.hover-show > a {
		background-color: @nav-item-background-hover;
		> .menu-text {
			font-weight: bold;
			color: @nav-item-color-active;//for IE that doesn't support rgba
			color: @nav-item-color-hover;
		}
		> .menu-icon , > .arrow {
			color: @nav-item-icon-hover;
		}
	}
	&.open > a {
		background-color: @nav-item-background-open;
		> .menu-text {
			font-weight: bold;
			color: @nav-item-color-open;
		}
		> .menu-icon , > .arrow {
			color: @nav-item-icon-open;
		}
	}

	&.active > a {
		background-color: @nav-item-background-active;
		color: @nav-item-color-active;

		> .menu-icon {
			color: inherit;
		}
		> .menu-text , > .arrow {
			color: @nav-item-color-active;
		}
	}
	&.active:hover > a, &.active:not(.highlight):hover > a,
	&.active.hover-show > a, &.active:not(.highlight).hover-show > a,
	&.active.open > a, &.active.open:not(.highlight) > a
	{
		background-color: @nav-item-background-active;
	}

	&.active.highlight > a {
		background-color: @nav-item-background-active2;
		> .menu-icon {
			color: @nav-item-color-active;
		}
	}

 }


 //highlights and active states
 .nav-list li.active > a:after {
	border-right-color: #FFF;
	-moz-border-right-colors: #FFF;

	//border-width: 16px 10px;
	//top: 3px;
	
	border-width: 11px 7px;
	top: 8px;
	right: 0;
 }
 //the long active item line
 //.nav-list > li.active:after, .sidebar.responsive .nav-list li.active > a:after {
	//display: none;
 //}
 
 .nav-list > li.active > .submenu li.active > a {
	&:after {
		//top: 1px;
		top: 6px;
	}
 }
 .nav-list > li:before {
	top: 0;
	height: @nav-item-height;
 }
 .nav-list > li.active:before {
	display: block;
	background-color: mix(desaturate(@default-color , 25%) , #FFF, 75%);
 }
 .nav-list > li.active.highlight:before , .nav-list > li:before {
	background-color: mix(desaturate(@default-color , 25%) , #FFF, 50%);
 }


 //submenu
 .nav-list > li {
	> .submenu {
		border-top-width: 0;
		background-color: @submenu-background;

		//border-left: 1px solid;
		//border-left-color: #333;
		//border-left-color: rgba(0,0,0,0.4);
	}

	> .submenu > li ,
	> .submenu > li > .submenu ,
	> .submenu > li > .submenu > li,
	> .submenu > li > .submenu > li .submenu,
	> .submenu > li > .submenu > li .submenu li
	{
		background-color: inherit;
	}


	.submenu > li > a {
		border-top: 1px solid;
		border-top-color: #555;
		border-top-color: rgba(255,255,255,0.08);

		background-color: transparent;
		&:hover {
			background-color: @submenu-item-background-hover;
			color: #FFF;
			
			> .menu-icon {
				background-color: transparent;
			}
		}
	}

	&.active .submenu > li > a:hover {
		background-color: @submenu-item-background-hover;
	}
 }

 .nav-list > li {
	> .submenu > li {
		> a {
			color: @submenu-item-color;			
		}
		&:first-child > a {
			border-top-width: 0;
		}
		&.active > a {
			background-color: @submenu-item-background-active;
			font-weight: bold;

			> .menu-icon {
				color: inherit;
				background-color: transparent;
			}
		}
	}
 }
  //3rd & 4th level menu
 .nav-list li .submenu li > a {
	color: @submenu-item-color;
	font-size: @base-font-size;
 }


 //hide submenu dotted tree menu
 .nav-list > li > .submenu {
	&:before, & > li:before {
		display: none;
	}
 }

 //change the paddings a little bit
 .nav-list > li .submenu > li > a {
	padding-left: 32px;
	> .menu-icon {
		left: 12px;
	}
 }
 @media only screen and (min-width: @screen-hover-menu) {
 .nav-list > li .submenu > li.hover > a {
	padding-left: 26px;
	> .menu-icon {
		left: 6px;
	}
 }
 }
 .nav-list > li > .submenu li > .submenu > li {
	 > a {
		margin-left: 0;
		
		padding-left: 37px;
		padding-top: 8px;
		padding-bottom: 10px;
		
		border-top-width: 0;
	}
	> .submenu > li > a {
		margin-left: 0;
		padding-left: 51px;
	}
 }

 @media only screen and (min-width: @screen-hover-menu) {
 .nav-list > li > .submenu li > .submenu > li.hover > a {
	border-top-width: 1px;
	padding-bottom: 9px;
 }
 .nav-list > li > .submenu li > .submenu > li.hover:first-child > a {
	border-top-width: 0;
 }
 }

 //submenu active item color
 .nav-list > li > .submenu li {
	&:hover, &.hover-show, &.active, &.open {
		> a {
			color: lighten(desaturate(@default-color , 15%) , 15%);//submenu item color
		}
	}

	> a > .@{icon} {
		background-color: transparent;
	}
 }


 //the .badge and .label on hover
 .nav-list > li {
	&:hover:not(.active) > a ,  &.hover-show:not(.active) > a ,  &.open:not(.active) > a, &.active.highlight {
		.badge, .label {
			background-color: rgba(0,0,0,0.5) !important;
		}

		.badge.badge-transparent, .label.label-transparent {
			color: rgba(255,255,255,0.8) !important;
			background-color: transparent !important;
			.@{icon} {
				color: rgba(255,255,255,0.8) !important;
			}
		}
	}
 }
 

//-li > .arrow
.sub_arrow() {
	&:after {
		border-right-color: @submenu-background;
		-moz-border-right-colors: @submenu-background;
	}
	&:before {
		border-right-color: #191919;
		-moz-border-right-colors: #191919;
		//-moz-border-right-colors: rgba(0,0,0,0.7);
		//border-right-color: rgba(0,0,0,0.7);
	}
}
.nav-list li > .arrow {
	.sub_arrow() 
}
.nav-list > li.pull_up > .arrow {
	.sub_arrow() !important;
}



 ////////////
.enable_highlight_active_skin_2() when(@enable-highlight-active = true) {
 //.active.highlight state //remove if not wanted
 .nav-list > li.active.highlight > a:after {
	border-right-color: transparent;
	-moz-border-right-colors: none;
	
	border-left-color: @nav-item-background-active2;
	-moz-border-left-colors: @nav-item-background-active2;
	border-width: 20px 0 20px 10px;
	
	z-index: 1;
	top: 0;
	right: -10px;

	display: block;
 }
}
.enable_highlight_active_skin_2();
 ////////////


//apply different colors
.colorize1 (@index) when (@index < 13) {
	@color-val: ~`"color@{index}"`;

	.nav-list > li:nth-child(@{index}) > a {
		color: @@color-val;
	}

	.nav-list > li:nth-child(@{index}):hover > a,
	.nav-list > li:nth-child(@{index}).hover-show > a,
	.nav-list > li.open:nth-child(@{index}) > a {
		background-color: desaturate(@@color-val , 25%);//nav item hover background
	}

	.enable_highlight_active_skin_2_colors() {
	 //.active.highlight state //remove if not wanted
	 .nav-list > li.highlight.active:nth-child(@{index}) > a {
		background-color: desaturate(@@color-val , 25%);//nav item hover background
	 }
	 .nav-list > li.active.highlight:nth-child(@{index}) > a:after {
		border-left-color: desaturate(@@color-val , 25%);
		-moz-border-left-colors: desaturate(@@color-val , 25%);
	 }
	}
	
	
	
	@submenu-background:  mix(@@color-val , #303030, 12%);//it's like having an overlay with #303030 and 88% opacity
	.nav-list > li:nth-child(@{index}) > .submenu {
		background-color: @submenu-background;
	}
	
	//-li > .arrow
	.nav-list > li:nth-child(@{index}) > .arrow:after,
	.nav-list > li:nth-child(@{index}) li > .arrow:after {
		border-right-color: @submenu-background;
		-moz-border-right-colors: @submenu-background;
	}
	.nav-list > li.pull_up:nth-child(@{index}) > .arrow:after {
		border-right-color: @submenu-background !important;
		-moz-border-right-colors: @submenu-background !important;
	}


	.enable_horizontal_menu_skin_2_colors() {
		.sidebar.h-sidebar {
			.nav-list > li.hover:nth-child(@{index}) > a {
				//to override .menu-min
				color: @@color-val;
			}
			.nav-list > li.hover:nth-child(@{index}) > .arrow:after {
				border-bottom-color: @submenu-background;
				-moz-border-bottom-colors: @submenu-background;
			}
		}
	}


	.nav-list > li:nth-child(@{index}) > .submenu li {
		&:hover , &.hover-show, &.active, &.open {
			> a {
				color: lighten(desaturate(@@color-val , 15%) , 15%);//submenu item color
			}
		}
	}
	
	//the hover 
	.nav-list > li.active:nth-child(@{index}):before {
		background-color: mix(desaturate(@default-color , 25%) , #FFF, 75%);
		background-color: mix(desaturate(@@color-val , 25%) , #FFF, 75%);
	}
	.nav-list > li.active.highlight:nth-child(@{index}):before ,
	.nav-list > li:nth-child(@{index}):before {
		background-color: mix(desaturate(@@color-val , 25%) , #FFF, 50%);
	}

	.colorize1(@index + 1);
}
.colorize1(1);

.enable_horizontal_menu_skin_2_colorsss() when(@enable-horizontal-menu = true) {
  @media only screen and (min-width: @grid-float-breakpoint) {
	.enable_horizontal_menu_skin_2_colors();
  }
}
.enable_horizontal_menu_skin_2_colorsss();


.enable_highlight_active_skin_2_colorsss() when(@enable-highlight-active = true) {
	.enable_highlight_active_skin_2_colors();
}
.enable_highlight_active_skin_2_colorsss();




 
 //some extras
 .sidebar-shortcuts .btn {
    background-color: #555 !important;
    border-radius: 32px;
    border-width: 2px;

	&:hover {
		background-color: #222 !important;
	}
	&:focus {
		outline: none;
	}
 }
 .sidebar-shortcuts-mini .btn {
    border-radius: 32px;
    border-width: 2px;
    opacity: 1;
    padding: 6px;
 }
 
 .sidebar-shortcuts , .sidebar-shortcuts-mini {
	background-color: @shortcuts-background;
 }
 .sidebar > .nav-search {
	background-color: @shortcuts-background;
 }

 .sidebar-toggle {
	background-color: @sidebar-toggle-background;
	border-color: @sidebar-toggle-border;

	&:before {
		border-color: inherit;
	}

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


 
 .enable_breadcrumbs_skin_2() when(@enable-breadcrumbs = true) {
   .breadcrumbs {
		border-width: 0;
		background-color: @breadcrumbs-background;
		border-radius: 4px;

		margin: 8px 8px 0;
   }

	@media only screen and (max-width: @grid-float-breakpoint-max) {
		.breadcrumbs {
			margin: 5px 5px 0;
		}

		.menu-toggler + .sidebar.responsive + .main-content .breadcrumbs {
			margin: 0;
			border-radius: 0;
		}
	}

   .enable_fixed_breadcrumbs_skin_2() 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_2() 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, @screen-compact-menu)) and (max-width: @grid-float-breakpoint-max) {
			   .sidebar.compact + .main-content .breadcrumbs-fixed {
					width: @container-sm - 10;
				}
			}
			@media (min-width: max(@screen-sm-min , @screen-fixed-breadcrumbs)) and (max-width: @grid-float-breakpoint-max) {
				.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: max(@screen-md-min, @screen-compact-menu)) {
				.sidebar.compact + .main-content .breadcrumbs-fixed {
					width: @container-md - @sidebar-compact-width - 16;
				}
			 }
			 @media (min-width: max(@screen-md-min)) {
				.breadcrumbs-fixed {
					width: @container-md;
				}
				.sidebar + .main-content .breadcrumbs-fixed {
					width: @container-md - @sidebar-width - 16;
				}				
				.sidebar.menu-min + .main-content .breadcrumbs-fixed {
					width: @container-md - @sidebar-min-width - 16;
				}
			 }
			 
			 @media (min-width: max(@screen-lg-min, @screen-compact-menu)) {
				.sidebar.compact + .main-content .breadcrumbs-fixed {
					width: @container-lg - @sidebar-compact-width - 16;
				}
			 }
			 @media (min-width: @screen-lg-min) {
				.breadcrumbs-fixed {
					width: @container-lg - 16;
				}
				.sidebar + .main-content .breadcrumbs-fixed {
					width: @container-lg - @sidebar-width - 16;
				}				
				.sidebar.menu-min + .main-content .breadcrumbs-fixed {
					width: @container-lg - @sidebar-min-width - 16;
				}
			 }

			 @media (min-width: @screen-sm-min) {
				.sidebar.h-sidebar + .main-content .breadcrumbs-fixed {
					width: auto;
				}
			 }
		   }
		  }
		  .enable_container_breadcrumbs_skin_2();
		  
	}
	.enable_fixed_breadcrumbs_skin_2();
 }
 .enable_breadcrumbs_skin_2();




 //default responsive
 @media only screen and (max-width: @grid-float-breakpoint-max) {
  .sidebar {
	border-width: 0;
	.box-shadow(none);
  }
  .nav-list li.active > a:after {
	display: none;
  }
 }


 //collapsed menu
 .menu_min_skin_2() {
	.nav-list > li.open > a {
		color: @nav-item-color;
	}
	.nav-list > li.active > a {
		color: @nav-item-color-active;
	}
	.nav-list > li.active > a:after {
		border-width: 9px 6px;
		top: 10px;
	}
	.nav-list > li.active.highlight > a:after {
		border-width: 20px 0 20px 10px;
		top: 0;
	}

	.nav-list > li > a > .menu-text {
		background-color: inherit;
		font-weight: bold;
		color: @nav-item-color-hover;//because it only shows up if hovered!

		border-width: 0 0 0 1px;
		border-style: solid;
		border-color: #333;
		border-color: rgba(0,0,0,0.4);
		
		.box-shadow(none);
		
		margin-left: 1px;

		//top: -1px;
		//height: @nav-item-height;
	}
	.nav-list > li.active > a > .menu-text {
		background-color: inherit;
		color: #FFF;
	}


	.nav-list > li > .submenu {
		border-style: solid;
		border-width: 1px 0 0 1px;
		border-color: #444;
		border-color: rgba(0,0,0,0.3);

		.box-shadow(none);
		
		margin-left: 1px;
		&:after {
			//the extra pixel @ min.less
			display: none;
		}
	}

	.nav-list > li.active > .submenu {
		border-top-color: rgba(0,0,0,0.5);
	}


	.sidebar-shortcuts-large {
		background-color: @shortcuts-background;
		.box-shadow(none);
		
		border: 1px solid lighten(@nav-item-border , 5%);
		border-width: 0 1px 1px 0;
		
		top: 0;

		border-color: #666;
	}

	
	//-li > .arrow
	.nav-list > li > .arrow,
	.nav-list > li.active.highlight > .arrow {
		&:after {
			border-right-color: desaturate(@default-color , 25%);
			-moz-border-right-colors: desaturate(@default-color , 25%);
		}
		&:before {
			border-right-color: #333;
			border-right-color: rgba(0,0,0,0.7);
			-moz-border-right-colors: rgba(0,0,0,0.7);
		}
	}
	
	.nav-list > li.active:not(.highlight) > a:not(.dropdown-toggle) > .menu-text {
		border-width: 1px;
		border-top-color: lighten(@nav-item-border , 5%);
		border-bottom-color: lighten(@nav-item-border , 5%);
		border-right-color: lighten(@nav-item-border , 5%);
	}

	.nav-list > li > a > .menu-text,
	.nav-list > li.active.highlight > a > .menu-text {
		border-left-color: #333;
		border-left-color: rgba(0,0,0,0.5);
	}
	.nav-list > li.pull_up > a > .menu-text,
	.nav-list > li.pull_up.active.highlight > a > .menu-text	{
		border-left-color: #222;
		border-left-color: rgba(0,0,0,0.7);
	}
	.nav-list > li.pull_up.active:not(.highlight) > a > .menu-text {
		border-left-color: #666;
	}

	//-li > .arrow
	.colorize2 (@index) when (@index < 13) {
		@color-val: ~`"color@{index}"`;
		.nav-list > li:nth-child(@{index}) > .arrow:after,
		.nav-list > li.active.highlight:nth-child(@{index}) > .arrow:after
		{
			border-right-color: desaturate(@@color-val , 25%);
			-moz-border-right-colors: desaturate(@@color-val , 25%);
		}
		.colorize2(@index + 1);
	}
	.colorize2(1);



	
	.nav-list > li.active > a > .menu-text {
		border-left-color: #777;
	}
	//-li > .arrow
	.nav-list > li.active > .arrow {
		&:after {
			border-right-color: @nav-item-background-active;
			-moz-border-right-colors: @nav-item-background-active;
		}
		&:before {
			border-right-color: #888;
			-moz-border-right-colors: #FFF;
		}
	}


 }

 .enable_sidebar_collapse_skin_2() when(@enable-sidebar-collapse = true) {
  .sidebar.menu-min {
	.menu_min_skin_2();
  }
 }
 .enable_sidebar_collapse_skin_2();
 
 .enable_responsive_menu_skin_2() when(@enable-responsive-menu = true) {
  //responsive-collapsed-style
  @media (max-width: @grid-float-breakpoint-max) {
	.sidebar.responsive {
		.nav-list > li.active > a:after {
			display: none;
		}
		.nav-list > li.active.highlight > a:after {
			display: block;
		}
	}
  }
 }
 .enable_responsive_menu_skin_2();
 
 .enable_minimized_responsive_menu_skin_2() when(@enable-minimized-responsive-menu = true) {
  //responsive-collapsed-style
  @media (max-width: @grid-float-breakpoint-max) {
	.sidebar.responsive-min {
		.menu_min_skin_2();
		.nav-list > li.active > a:after {
			display: block;
		}		
	}
  }
 }
 .enable_minimized_responsive_menu_skin_2();



 
  //highlight .hover menus when mouse is in submenus
 .hover_highlight_skin_2() {
	.nav-list > li {
		.submenu > li.hover:hover > a , .submenu > li.hover.hover-show > a {
			background-color: @submenu-item-background-hover;
		}
		&.active .submenu > li.hover:hover > a , &.active .submenu > li.hover.hover-show > a {
			background-color: @submenu-item-background-hover;
		}
	}
 }


 //.hover
 .enable_hover_submenu_skin_2() when(@enable-submenu-hover = true) {
 @media only screen and (min-width: @screen-hover-menu) {
 .nav-list li.hover > .submenu {
	padding-left: 0;
	padding-right: 0;
	
	border: 1px solid;
    border-color: @hover-submenu-border;

	> li > a {
		margin-bottom: 0;
		margin-top: 0;
	}
	> li:first-child > a {
		border-top-width: 0;
	}
 }

 //3rd & 4th
 .nav-list li .submenu > li.hover.active > a {
	background-color: @submenu-item-background-active;
 }
 .nav-list > li > .submenu li.hover > .submenu {
	padding: 2px;
 }
 .nav-list > li > .submenu li > .submenu > li.hover > a {
	border-top-color: #222;//for IE8
	border-top-color: rgba(255,255,255,0.08);
 }
 .nav-list > li.active.hover:hover > a.dropdown-toggle:after,
 .nav-list > li.active.hover.hover-show > a.dropdown-toggle:after,
 .menu-min .nav-list > li.active:hover > a:after, .menu-min .nav-list > li.active.hover-show > a:after {
	display: none;
 }
 }//@media

 .enable_collapsible_responsive_menu_skin_2_tmp() when(@enable-collapsible-responsive-menu = true) {
  //sometimes .hover items are opened in small view, and back in large view we reset the open highlight state
  @media only screen and (min-width: max(@screen-hover-menu, @grid-float-breakpoint)) {
  .sidebar.navbar-collapse {
	.nav-list > li.open.hover:not(:hover):not(:focus):not(.active) > a {
		background-color: @nav-item-background;
		font-weight: normal;
		> .menu-icon , > .menu-text , > .arrow {
			color: inherit;
		}
	}

	.nav-list > li > .submenu li.open.hover:not(:hover):not(:focus):not(.active) > a {
		color: @submenu-item-color;
	}
	
	.nav-list > li > .submenu > li.open.hover:not(:hover):not(:focus):not(.active) > a {
		> .menu-icon {
			display: none;
		}
	}

   }
  }
  }
  .enable_collapsible_responsive_menu_skin_2_tmp();

  @media only screen and (min-width: @screen-hover-menu) {
   .sidebar:not(.navbar-collapse) {
	.hover_highlight_skin_2();
   }
  }
 }
 .enable_hover_submenu_skin_2();


.enable_collapsible_responsive_menu_skin_2() when(@enable-collapsible-responsive-menu = true) {
//navbar-collapse
@media only screen and (max-width: @grid-float-breakpoint-max) {
 .sidebar.navbar-collapse {
	.nav-list > li > .submenu:before,
	.nav-list > li > .submenu > li:before ,
	.nav-list > li > .submenu > li > .submenu:before {
		display: none;
	}

	.nav-list > li:before {
		height: @nav-item-height + 2 !important;
		top: 0;
	}
	
	.nav-list > li > .submenu li > .submenu > li > a {
		margin-left: 0;
		padding-left: 42px;
	}
	.nav-list > li > .submenu li > .submenu > li > .submenu > li > a {
		margin-left: 0;
		padding-left: 58px;
	}
	.nav-list > li > a > .menu-text, .nav-list > li.active.highlight > a > .menu-text {
		border-width: 0;
	}
  }
}

 .enable_hover_submenu_skin_2_tmp() when(@enable-submenu-hover = true) {
   @media only screen and (min-width: @screen-hover-menu) and (max-width: @grid-float-breakpoint-max) {
   .sidebar.navbar-collapse {
	.nav-list > li.hover > .submenu {
		padding-bottom: 0;
	}
	.nav-list li.hover > .submenu {
		//background-color: transparent;
		border-width: 0;
	}

	.nav-list li li.hover:hover > a , .nav-list li li.hover.hover-show > a {
		background-color: transparent;
	}
	.nav-list li li.hover > a:hover {
		background-color: @submenu-item-background-hover;
	}
	.nav-list > li > .submenu > li.active.hover:hover > a ,
	.nav-list > li > .submenu > li.active.hover.hover-show > a {
		background-color: @submenu-item-background-active;
	}
	.nav-list > li > .submenu > li.active.hover > a:hover {
		background-color: @submenu-item-background-hover;
	}

	.nav-list > li > .submenu li.hover > .submenu {
		border-left-width: 0t;
		padding: 0;
	}
	.nav-list > li > .submenu li.hover > .submenu > li > a {
		margin-left: 0 !important;
		padding-left: 37px !important;
	}
	.nav-list > li > .submenu li > .submenu > li > .submenu > li > a {
		margin-left: 0 !important;
		padding-left: 51px !important;
	}
	.nav-list li.hover > .submenu li > a {
		padding-left: 32px !important;
		> .menu-icon {
			background-color: transparent;
		}
	}
	
	.nav-list li.hover > .submenu > li.active > a {
		background-color: transparent;
		font-weight: normal;
	}
	.nav-list > li.hover > .submenu > li.active > a {
		background-color: @submenu-item-background-active;
		font-weight: bold;
	}
	.nav-list li.hover > .submenu > li.active > a:hover {
		background-color: @submenu-item-background-hover;
	}
	

	.nav-list > li > .submenu li > .submenu > li.hover > a {
		border-top-width: 0;
	}
	

	
	.nav-list > li .submenu > li.hover > a {
		> .menu-icon {
			left: 12px;
		}
	}
	
	.hover_highlight_skin_2();
	
	
	
	   &.menu-min .nav-list li.hover > .submenu li > a {
			padding-left: 32px;
		}
	
	}

  }//@media
 }
 .enable_hover_submenu_skin_2_tmp();

 
 @media only screen and (max-width: @grid-float-breakpoint-max) {
  .sidebar.navbar-collapse {
   .enable_sidebar_collapse_skin_22() when(@enable-sidebar-collapse = true) {
	&.menu-min {
		.sidebar-shortcuts-large {
			border-width: 0;
		}
		
		.nav-list > li {
			> a > .menu-text {
				font-weight: normal;
				color: @nav-item-color;
				margin-left: 0;
			}
			&:hover > a > .menu-text {
				font-weight: bold;
				color: @nav-item-color-hover;
			}
			&.active > a > .menu-text {
				font-weight: bold;
				color: @nav-item-color-active;
			}	
			
			> .submenu {
				margin-left: 0;
				border-top-width: 0;
			}
		}

		.nav-list > li > .submenu li > a > .menu-icon {
			left: 12px;
		}
	}
   }
   .enable_sidebar_collapse_skin_22();

 }
}

}
.enable_collapsible_responsive_menu_skin_2();

@media (min-width: @screen-compact-menu) {
 .sidebar.compact .nav-list > li:before {
	height: auto;
	bottom: 0;
 }
}


 
.enable_old_menu_toggle_button_skin_2() when(@enable-old-menu-toggle-button = true) {
 .main-container .menu-toggler {
	@color: #D685B0;
	background-color: @color;

	&:before {
		border-top-color: #FFF;
		border-bottom-color: #FFF;
	}
	&:after {
		border-top-color: #FFF;
		border-bottom-color: #FFF;
	}
	
	> .toggler-text {
		border-top-color: @color;
		-moz-border-top-colors: @color;
	}
 }
}
.enable_old_menu_toggle_button_skin_2();

 .navbar .navbar-toggle {
	background-color: #DB78A1;
	
	&:focus {
		background-color: #DB78A1;
		border-color: transparent;
	}
	&:hover {
		background-color: darken(#DB78A1 , 4%);
		border-color: rgba(255,255,255,0.1);
	}
	&.display, &[data-toggle=collapse]:not(.collapsed) {
		background-color: darken(#DB78A1 , 8%);
		box-shadow: inset 1px 1px 2px 0 rgba(0, 0, 0, 0.25);
		border-color: rgba(255, 255, 255, 0.35);
	}
 }



 @media only screen and (min-width: @screen-sm-min) {
	.container.main-container:before {
		box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1);
	} 
 }



 //horizontal menu
.enable_horizontal_menu_skin_2() when(@enable-horizontal-menu = true) {
 @media only screen and (min-width: @grid-float-breakpoint) {
	.sidebar.h-sidebar {
		background-color: @nav-item-background;
		&:before {
			background-color: lighten(@sidebar-background , 15%);
			border-bottom-color: lighten(@nav-item-border , 20%);
		}

		.nav-list {
			border-bottom-width: 0;
		}

		.nav-list > li > a > .menu-text {
			color: @nav-item-color;
			font-weight: normal;
		}		
		.nav-list > li:hover > a > .menu-text ,
		.nav-list > li.hover-show > a > .menu-text {
			color: @nav-item-color-active;
			font-weight: normal;
		}
		.nav-list > li.active > a > .menu-text {
			font-weight: bold;
			color: @nav-item-color-active;
		}

		.nav-list > li:before {
			left: 0;
			right: 0;
		}
		
		.nav-list > li.hover > .submenu {
			margin-left: -1px;
			border-width: 1px;
			border-top-color: rgba(0, 0, 0, 0.4);
		}
		.nav-list > li .submenu > li.hover > a {
			padding-left: 22px;
		}
		.nav-list > li .submenu > li.hover > a > .menu-icon {
			left: 4px;
		}
		
		&.compact .nav-list > li.active:before {
			height: 2px;
			bottom: auto;
		}
		

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

		.nav-list > li.hover.active > a:after {
			display: block;

			-moz-border-left-colors: none;
			-moz-border-right-colors: none;
			-moz-border-bottom-colors: #FFF;

			border-color: transparent transparent #FFF;
			border-width: 8px;

			top: auto;
			bottom: 0;

			right: auto;
			left: 50%;
			margin-left: -8px;
		}
		.nav-list > li.hover.active:hover > a:after,
		.nav-list > li.hover.active.hover-show > a:after {
			display: none;
		}
		
		
		.sidebar-shortcuts-large {
			background-color: @sidebar-background;
			border-width: 1px 0 0 !important;//to override .rtl + .menu-min.h-sidebar
			border-top: 1px solid #777;
			top: 100%;
		}
		.sidebar-shortcuts-mini {
			padding-top: 2px;
		}
		.sidebar-shortcuts-mini > .btn {
			padding: 7px;
		}
		
		
		.nav-list > li.active.highlight > .arrow {
			&:after {
				border-right-color: transparent;
				border-bottom-color: desaturate(@default-color , 25%);
			}
			&:before {
				border-right-color: transparent;
				-moz-border-right-colors: none;
				
				border-bottom-color: #191919;
				-moz-border-bottom-colors: #191919;
			}
		}

		//-li > .arrow
		.nav-list > li.hover > .arrow {
			&:after {
				border-right-color: transparent;
				-moz-border-right-colors: none;
				
				border-bottom-color: @submenu-background;
				-moz-border-bottom-colors: @submenu-background;
			}
			&:before {
				-moz-border-right-colors: none;
				border-right-color: transparent;
			
				border-bottom-color: #191919;
				-moz-border-bottom-colors: #191919;
				//border-bottom-color: rgba(0,0,0,0.8);
			}
		}
		

		
		.sidebar-shortcuts-large {
			&:after {
				border-bottom-color: @sidebar-background;
			}
			&:before {
				border-bottom-color: #999;
				-moz-border-bottom-colors: #999;
			}
		}
		
		&.menu-min {
			.sidebar-shortcuts-mini {
				padding-top: 3px;
			}
			.sidebar-shortcuts-mini > .btn {
				padding: 6px;
			}
			
			.nav-list > li > a > .menu-text {
				border-width: 1px 0 0 0;
				border-top-color: rgba(0, 0, 0, 0.5);
			}
			
			.nav-list > li > .arrow, .nav-list > li.active.highlight > .arrow {
				&:before {
					-moz-border-bottom-colors: rgba(0, 0, 0, 0.7);
					border-bottom-color: rgba(0, 0, 0, 0.7);
				}
			}
		}
		


		.colorize3 (@index) when (@index < 13) {
			@color-val: ~`"color@{index}"`;
			&.menu-min .nav-list > li:nth-child(@{index}) > .arrow:after,
			&.menu-min .nav-list > li.active.highlight:nth-child(@{index}) > .arrow:after
			{
				border-bottom-color: desaturate(@@color-val , 25%);
				-moz-border-bottom-colors: desaturate(@@color-val , 25%);
			}
			.colorize3(@index + 1);
		}
		.colorize3(1);
		
		&.menu-min .nav-list > li.active > .arrow {
			&:after {
				border-bottom-color: @nav-item-background-active;
				-moz-border-bottom-colors: @nav-item-background-active;
			}
			&:before {
				border-bottom-color: #888;
				-moz-border-bottom-colors: #FFF;
			}
		}
		
		&.menu-min .nav-list > li > a > .menu-text,
		&.menu-min .nav-list > li.active.highlight > a > .menu-text {
			border-top-color: #333;
			border-top-color: rgba(0,0,0,0.5);
		}
		&.menu-min .nav-list > li.active > a > .menu-text {
			border-top-color: #777;
		}
		


		+ .main-content .breadcrumbs {
			border-color: desaturate(darken(@breadcrumbs-background , 5%) , 5%);
			top: 2px;
		}

	}
	
	.h-sidebar.sidebar-fixed {
		+ .main-content {
			padding-top: 86px;
		}
		&.no-gap + .main-content {
			padding-top: 72px;
		}
		
		&.menu-min + .main-content {
			padding-top: 61px;
		}
		&.menu-min.no-gap + .main-content {
			padding-top: 47px;
		}
	}
	
	.main-content .h-sidebar.sidebar .nav-list {
		border-left: 1px solid lighten(@nav-item-border , 6%);
	}

 }//@media
 

}
.enable_horizontal_menu_skin_2();


.sidebar-scroll {
 .sidebar-shortcuts {
	border-bottom-color: lighten(@nav-item-border , 5%);
 }
 .sidebar-toggle {
	border-top-color: lighten(@nav-item-border , 5%);
 }
}
.scrollout .scroll-track {
	background-color: transparent;
}
.scrollout .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;
	}
  }
 }

 
 
	//disabled
 	.nav-list > li.disabled:before {
		display: none !important;
	}
	.nav-list > li.disabled > a , .nav-list > li > a.disabled {
		background-color: #555 !important;
		color: #CCC !important;
		> .menu-text {
			color: #CCC !important;
		}
		
		.label, .badge {
			background-color: rgba(0, 0, 0, 0.5) !important;
		}
	}
	.nav-list > li.active.highlight.disabled > a:after,
	.nav-list > li.active.highlight > a.disabled:after {
		-moz-border-left-colors: #555 !important;
		border-left-color: #555 !important;
	}
	
	.nav-list li .submenu > li.disabled > a , .nav-list li .submenu > li > a.disabled,
	.nav-list li.disabled .submenu > li > a , .nav-list li > a.disabled + .submenu > li > a {
		background-color: #666 !important;
		color: #DDD !important;
		cursor: not-allowed !important;
		> .menu-icon {
			display: none;
		}
	}


}//.skin-2