//@extend-elements
//original selectors
//#nav li.menu-action.selected p a, #nav li.menu-entity.selected p a
%extend_mn_1 {
	background: $url_mn_2,$color_mercury_approx;
	background: $url_mn_2,linear-gradient($color_gray_nurse_approx 0, $color_alto_approx 51%, $color_alto_approx 51%, $color_iron_approx 54%, $color_pumice_approx 100%);
	background-repeat: no-repeat;
	background-position: 5% 50%;
}

#snav {
	position: relative;
	z-index: 2;
	float: left;
	width: 198px;
}
#nav-menu {
	padding: 5px 0;
	border: 1px solid $color_celeste_approx;
	overflow: hidden;
	background: $color_mercury_approx;
	li {
		float: left;
		margin-left: 5px;
		font-size: 11px;
		letter-spacing: -0.01em;
		&:first-child {
			margin-left: 5px;
		}
		a {
			padding: 4px 5px;
			display: block;
			width: 80px;
			color: $color_mine_shaft_approx;
			text-align: center;
			//Instead of the line below you could use @include border-radius($radius, $vertical-radius)
			border-radius: 15px;
			//Instead of the line below you could use @include text-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
			text-shadow: 1px 1px 0 $white;
			&:hover {
				padding: 3px 4px;
				border-top: 1px solid $color_silver_chalice_approx;
				border-left: 1px solid $color_celeste_approx;
				border-right: 1px solid $seashell;
				border-bottom: 1px solid $seashell;
				//Instead of the line below you could use @include border-radius($radius, $vertical-radius)
				border-radius: 14px;
				color: $color_tuatara_approx;
				background: linear-gradient($color_mercury_approx 0, $seashell 100%);
				//Instead of the line below you could use @include text-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
				text-shadow: none;
				text-decoration: none;
			}
		}
		&.current a {
			padding: 3px 4px;
			border-top: 1px solid $color_pink_swan_approx;
			border-left: 1px solid $color_pink_swan_approx;
			border-right: 1px solid $color_gunsmoke_approx;
			border-bottom: 1px solid $color_gunsmoke_approx;
			//Instead of the line below you could use @include border-radius($radius, $vertical-radius)
			border-radius: 14px;
			color: $white;
			background: $color_nobel_approx;
			background: linear-gradient($color_storm_dust_approx 0, $color_gunsmoke_approx 100%);
			//Instead of the line below you could use @include text-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
			text-shadow: none;
			font-weight: bold;
		}
	}
}
#nav {
	padding-bottom: 40px;
	width: 100%;
	li {
		margin-bottom: 5px;
		padding: 0 7px;
		position: relative;
		zoom: 1;
		a {
			color: $color_black_approx;
			zoom: 1;
			&:hover {
				text-decoration: none;
			}
		}
		&.home {
			padding: 5px 7px;
			//Instead of the line below you could use @include border-radius($radius, $vertical-radius)
			border-radius: 0;
			border: none;
			border-bottom: 1px solid $color_bon_jour_approx;
			background: $wild_sand;
			a {
				padding: 5px;
				//Instead of the line below you could use @include border-radius($radius, $vertical-radius)
				border-radius: 3px;
				border: 1px solid $color_pumice_approx;
				display: block;
				background: $color_mercury_approx;
				background: linear-gradient($white 0, $alto 51%, $alto 51%, $color_quill_gray_approx 54%, $color_nobel_approx 100%);
				span {
					display: block;
					padding-left: 20px;
					background: $url_mn_1 no-repeat left 0.2em;
				}
				&:hover {
					background: linear-gradient($color_gray_nurse_approx 0, $color_alto_approx 51%, $color_alto_approx 51%, $color_iron_approx 54%, $color_pumice_approx 100%);
				}
			}
		}
		span {
			&.navicon {
				position: absolute;
				top: 8px;
				right: 17px;
			}
			&.curicon {
				position: absolute;
				top: 11px;
				left: 18px;
				display: block;
				width: 5px;
				height: 7px;
				background: $url_mn_3 no-repeat;
				text-indent: -9999px;
			}
		}
		&.hover {
			p a {
				//Instead of the line below you could use @include border-radius($radius, $vertical-radius)
				border-radius: 0;
				//Instead of the line below you could use @include border-top-left-radius($radius)
				border-top-left-radius: 3px;
				//Instead of the line below you could use @include border-top-right-radius($radius)
				border-top-right-radius: 3px;
			}
			ul.nav-detail {
				display: block;
				border: 1px solid $color_cloud_approx;
				border-top: none;
				//Instead of the line below you could use @include border-bottom-left-radius($radius)
				border-bottom-left-radius: 3px;
				//Instead of the line below you could use @include border-bottom-right-radius($radius)
				border-bottom-right-radius: 3px;
				li {
					margin-bottom: 0;
					padding: 0;
					&.current a span.navicon-02 {
						position: absolute;
						top: 11px;
						right: 9px;
						width: 12px;
						height: 9px;
						display: block;
					}
				}
				a {
					padding: 7px 26px 6px 25px;
					display: block;
				}
			}
			span.curicon {
				top: 13px;
				width: 7px;
				height: 5px;
				background: $url_mn_4 no-repeat;
			}
		}
		p a {
			padding: 5px 7px 4px 25px;
			//Instead of the line below you could use @include border-radius($radius, $vertical-radius)
			border-radius: 3px;
			border: 1px solid $color_pumice_approx;
			border-bottom: none;
			// border-bottom: 1px solid $color_pumice_approx\9;
			display: block;
			background: $color_mercury_approx;
			background: linear-gradient($seashell 0, $alto 51%, $alto 51%, $color_quill_gray_approx 54%, $color_nobel_approx 100%);
			zoom: 1;
			&:hover {
				background: linear-gradient($color_gray_nurse_approx 0, $color_alto_approx 51%, $color_alto_approx 51%, $color_iron_approx 54%, $color_pumice_approx 100%);
			}
		}
		&.menu-action.selected p a {
			@extend %extend_mn_1;
		}
		&.menu-entity.selected p a {
			@extend %extend_mn_1;
		}
		ul.nav-detail {
			display: none;
		}
		&.bg-default.hover ul {
			&.nav-detail {
				li {
					&.menu-node.selected > a {
						background: $color_gallery_approx;
					}
					&.menu-action.selected > a {
						background: $url_mn_2 no-repeat scroll 5% 50% $color_gallery_approx;
					}
					&.menu-entity.selected > a {
						background: $url_mn_2 no-repeat scroll 5% 50% $color_gallery_approx;
					}
					&.current a {
						background: $color_chardon_approx;
						font-weight: bold;
					}
				}
				a:hover {
					background: $color_gallery_approx;
				}
			}
			&.subMenuList li:hover {
				background: $color_gallery_approx;
			}
		}
		&.subMenuRoot.open ul.subMenuList a {
			padding: 3px 26px 4px 25px;
		}
	}
	.subMenuRoot.open .change-area {
		ul {
			display: none;
			position: absolute;
			top: 0;
			left: 130px;
		}
		&:hover > ul {
			display: block;
			background: none repeat scroll 0 0 $white;
			border: 1px solid $color_mountain_mist_approx;
			//Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
			box-shadow: 2px 2px 8px $color_quill_gray_approx;
			> li {
				position: relative;
				background: none repeat scroll 0 0 $white;
			}
		}
	}
}
.subMenuRoot {
	.subMenuList {
		display: none;
	}
	.listicon {
		background-image: none;
		position: absolute;
		top: 5px;
		left: 7px;
	}
	&.open .subMenuList {
		display: block;
		background: none repeat scroll 0 0 $white;
		border: 1px solid $color_mountain_mist_approx;
		//Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
		box-shadow: 2px 2px 8px $color_quill_gray_approx;
		position: absolute;
		top: 25px;
		left: 25px;
		z-index: 5;
		li {
			min-width: 130px;
			white-space: nowrap;
		}
	}
	> .node-cursor {
		position: absolute;
		left: 10px;
		top: 11px;
		background: $url_mn_3 no-repeat;
		width: 5px;
		height: 7px;
	}
}
#widget {
	margin-top: 5px;
	float: left;
	width: 198px;
	position: relative;
	z-index: 2;
}
.subMenuList li > .node-cursor {
	position: absolute;
	right: 10px;
	top: 8px;
	background: $url_mn_3 no-repeat;
	width: 5px;
	height: 7px;
}
*:first-child + html #widget {
	float: left;
}
