// vars for the menu

$menu-height : 42px
$menu-font-color: white
$menuBgColor : #67686C
.userMenu
	width: 100%
	position: fixed
	height: $menu-height
	left: 0
	margin: 0
	//background-color: #FFAF1C
	//+background-image(linear-gradient(to right , $color-green, #5E80A2) )
	background-color: $menuBgColor
	z-index: 2
	> ul
		@extend .clear-fix
		+box-sizing(border-box)
		max-width: 100%
		width: $site-width
		margin: auto
		background: image-url("logo.png") no-repeat 50% 50% 
		background-size: 20px
		li
			float: left
			margin: 0 20px 0 0
			position: relative
			display: block
			> a
				line-height: $menu-height
				padding: 0 .5em
				display: inline-block
				color: rgba($menu-font-color, 0.7)!important
				font-size: 1.1em
				position: relative
				font-weight: 400
				+box-sizing(border-box)
				&:hover
					color: $menu-font-color!important
					text-decoration: none


			&.current  a
				color: $menu-font-color!important


/* Menu specific entries */ 

.userMenu li

	&.userMenu-home 
		a span.label
			display: block!important
			text-align: center
		.menu-news
			position: absolute
			text-align: center
			display: none
			top: 4px
			right: -7px
			background: $main-color-color
			width: 15px 
			height: 15px
			line-height: 15px
			font-size: 10px
			padding: 1px
			font-weight: 900
			+border-radius(50%)
			letter-spacing: -0.01em
			+box-sizing(content-box)
			color: white
			&.show 
				display: block

	&.userMenu-dhtindicator, &.userMenu-connections, &.userMenu-messages
		display: none!important

	&.userMenu-config, &.userMenu-search
		float: right
		position: relative
		margin-right: 0
		color: $menu-font-color
		+ a 
			color: $main-color-dark 
	&.userMenu-search
		> input 
			border: 1px solid #dedede
			line-height: $menu-height/2
			font-size: 12px
			padding: 0 7px
			background: white
			&:focus 
				border-color: $main-color-dark
	&.userMenu-config > a
		@extend .icon-cog
		@extend .extend-icon
		font-size: 1.5rem