#nav-sidebar
	float: left
	width: 240px
	height: 100%!important
	overflow-y: auto
	z-index: 500
	background-color: $main-color
	border-right: 1px solid black
	li.maintab > a > i
		display: inline-block
		height: 30px
		width: 30px
		font-size: 20px
		line-height: 30px
		color: white
		text-align: center
		@include border-radius(40px)
	li:not(.active)
		ul
			display: none
	li.active
		span.submenu_expand
			display: none
	ul.menu
		margin: 0
		padding: 0
		border-top: 1px black solid
		list-style: none
		li.maintab
			position: relative
			&.active
				a.title, a.title:hover
					color: contrast-color($brand-primary, white, #333, 10%)
					background-color: $brand-primary
					i
						color: black
						background-color: white

			&.active
				a.title:hover
					color: contrast-color($main-color, white, #333, 10%)
			&.expanded
				a.title
					color: white
					background-color: darken($main-color,10%)
					border-bottom: solid 1px darken($main-color,25%)
					&:hover
						background-color: lighten($main-color,10%)
					i
						color: white
				span.submenu_expand
					@extend .icon-angle-up
				ul.submenu
					display: block
					a
						color: lighten($main-color,30%)
						background-color: darken($main-color,15%)
						border-bottom: solid 1px darken($main-color,25%)
						&:hover
							color: white
							background-color: darken($main-color,5%)
			a.title
				display: block
				position: relative
				padding: 2px 0 2px 8px
				border-bottom: 1px solid darken($main-color,10%)
				font-size: 12px
				line-height: 28px
				$color: contrast-color($main-color, white, #333, 10%)
				color: mix($main-color, $color, 30%)
				background-color: $main-color
				text-transform: uppercase
				text-decoration: none
				@include transition-property(background-color, border, box-shadow)
				@include transition-duration(0.4s)
				@include transition-timing-function(ease-out)
				i
					color: lighten($main-color,25%)
					background-color: darken($main-color,25%)
					@include transition-property(color)
					@include transition-duration(0.4s)
					@include transition-timing-function(ease-out)
				&:hover
					background-color: lighten($main-color,10%)
					color: white
					i
						color: white
			span.submenu_expand
				position: absolute
				right: 10px
				top: 2px
				cursor: pointer
				font-family: FontAwesome
				font-size: 24px
				font-weight: 100
				color: black
				background-color: transparent
				@extend .icon-angle-down
				@include text-shadow(lighten($main-color,10%) 1px 1px 0)

				&:hover
					color: white
					@include text-shadow(darken($main-color,20%) -1px -1px 0)
	ul.submenu
		list-style: none
		padding: 0
		li
			a
				display: block
				padding: 4px 5px 4px 10px
				font-size: 12px
				border: none
				border-bottom: solid 1px #eee
				background-color: white
				&:hover
					color: $main-color
					background-color: mix(white, $main-color, 90%)
					text-decoration: none
			&:last-child a
				border-bottom: none
			&.active a
				color: contrast-color($brand-primary, white, #333, 10%)
				background-color: $brand-primary
				border-bottom: solid 1px darken($brand-primary,10%)
	@media (max-width: $screen-tablet)
		display: none

#nav-topbar
	position: fixed
	height: 28px
	top: 35px
	left: 80
	width: 100%
	z-index: 600
	background-color: white
	ul.menu
		height: 28px
		margin: 0
		padding: 0
		display: block
		list-style: none
		> li
			height: 28px
			padding: 0
			margin: 0
			border-right: solid 1px #aaa
			list-style: none
			position: relative
			float: left
			> a
				display: block
				line-height: 28px
				color: $main-color
				padding: 0 6px
				margin: 0
				i
					margin: 0
					width: 15px
					background-color: transparent
					font-size: 18px
				&:hover
					text-decoration: none
					background-color: $main-color
					color: white
					i
						color: white!important
			&.active
				> a
					color: contrast-color($main-color, white, #333, 10%)
					background-color: $main-color
					i
						color: white
	.menu-collapse
		display: none
	ul.submenu
		display: none!important
		@include box-shadow(rgba(black,0.3) 0 2px 4px)
	> ul.menu > li.expanded
		ul.submenu
			display: block!important
	> ul.menu > li
		ul.submenu
			display: none!important
			position: absolute
			margin: 0
			padding: 0
			left: 0
			top: 28px
			width: 200px!important
			li
				width: 200px
				padding: 0
				list-style: none
				a
					display: block
					padding: 4px 5px 4px 10px
					font-size: 12px
					background-color: white
					border-bottom: solid 1px #eee
					&:hover
						color: $main-color
						background-color: mix(white, $main-color, 90%)
						text-decoration: none
				&:last-child a
					border-bottom: none
				&.active a
					color: contrast-color($brand-primary, white, #333, 10%)
					background-color: $brand-primary
					border-bottom: solid 1px darken($brand-primary,10%)

.menu-collapse
	height: 54px
	width: 100%
	font-size: 2em
	text-align: center
	line-height: 55px
	display: block
	background-color: $main-color
	border-bottom: 3px solid darken($main-color,10%)
	color: darken($main-color,30%)

.page-topbar
	#main
		padding-top: 64px
	#nav-sidebar
		display: none
	.page-head
		top: 63px
	#content
		margin-left: 0
		width: 100%
		.page-head h2.page-title
			padding: 0 0 0 20px

.page-sidebar-closed
	#nav-sidebar
		width: 50px
		@include transition-property(width)
		@include transition-duration(0.4s)
		@include transition-timing-function(ease-out)
		span.title
			display: none
		ul.submenu
			display: none!important
			padding-top: 37px
			position: relative
			top: 0
			@include box-shadow(rgba(black,0.2) 1px 1px 0,rgba(black,0.3) 2px 2px 4px)
		> ul > li:hover
			width: 250px!important
			position: relative
			span.title
				display: inline-block
			ul.submenu
				display: block!important
				position: absolute
				left: 50px
				width: 200px!important
	#content
		margin-left: 50px
		.page-head h2.page-title
			padding: 0 0 0 70px
			@media (max-width: $screen-tablet)
				padding: 0 0 0 20px
		@media (max-width: $screen-tablet)
			margin-left: 0
			width: 100%
	.submenu_expand
		display: none

//icons
.icon-AdminDashboard
	@extend .icon-dashboard
.icon-AdminCatalog
	@extend .icon-book
.icon-AdminParentOrders
	@extend .icon-credit-card
.icon-AdminParentCustomer
	@extend .icon-group
.icon-AdminPriceRule
	@extend .icon-tags
.icon-AdminParentShipping
	@extend .icon-truck
.icon-AdminParentLocalization
	@extend .icon-globe
.icon-AdminParentModules
	@extend .icon-puzzle-piece
.icon-AdminParentPreferences
	@extend .icon-wrench
.icon-AdminTools
	@extend .icon-cogs
.icon-AdminAdmin
	@extend .icon-cog
.icon-AdminParentStats
	@extend .icon-bar-chart
.icon-AdminStock
	@extend .icon-archive

[class^="icon-Admin"]
	margin-right: 6px