//@extend-elements
//original selectors
//#nav.sub-popup >ul.nav-wrap >li.home, #nav.sub-droplist >ul.nav-wrap >li.home
%extend_mn_1 {
	padding: 2px 8px 3px;
	position: absolute;
	top: 3px;
	left: 15px;
}

//original selectors
//#nav.sub-droplist >ul.nav-wrap li ul li >a >span.navicon, #nav.sub-droplist >ul.nav-wrap li ul li >a >span.listicon
%extend_mn_2 {
	position: absolute;
	left: 7px;
	top: 5px;
}


#snav {
}
#nav-menu {
	display: none;
}
#nav {
	width: 100%;
	li {
		margin-right: 2px;
		float: left;
		a {
			text-decoration: none;
			color: $white;
			> span.navicon {
				padding-right: 4px;
				position: relative;
				top: -3px;
			}
		}
	}
	> ul.nav-wrap {
		padding: 0 23px 2px 47px;
		border-top: 1px solid $black;
		background: $color_emperor_approx;
		background: linear-gradient($color_emperor_approx 0, $color_fuscous_gray_approx 100%);
		position: relative;
		z-index: 42;
		zoom: 1;
		> li {
			> p {
				padding: 5px 16px;
				> span.curicon {
					display: none;
				}
			}
			&.home > a > span {
				display: block;
				margin-top: 2px;
				text-indent: -99999px;
				width: 14px;
				height: 12px;
				background: $url_mn_1 no-repeat left center;
			}
		}
	}
	&.sub-popup > ul.nav-wrap > li {
		&.home {
			@extend %extend_mn_1;
		}
		&.hover {
			> p {
				position: relative;
				> span.curicon {
					display: block;
					position: absolute;
					bottom: -4px;
					left: 50%;
					z-index: 2;
					width: 11px;
					height: 5px;
					background: $url_mn_2 no-repeat;
				}
			}
			> ul.nav-detail {
				z-index: 40;
				li {
					padding: 3px 0 0;
				}
			}
		}
		&.bg-default {
			&.hover > p {
				> a {
					color: $color_alto_approx;
				}
				> span.curicon {
					background: $url_mn_2 no-repeat;
				}
			}
			&.menu-entity.hover {
			}
			&.menu-action.hover {
			}
			&.selected > p > a {
				color: $color_alto_approx;
			}
			> ul.nav-detail {
				border-bottom: 1px solid $color_pink_swan_approx;
				background: $color_mercury_approx;
				background: linear-gradient($color_mercury_approx 0, $color_celeste_approx 100%);
				> li {
					> a:hover {
						background: $color_mine_shaft_approx;
						background: linear-gradient($color_mine_shaft_approx 0, $color_silver_chalice_approx 100%);
					}
					&.selected > a {
						background: $color_mine_shaft_approx;
						background: linear-gradient($color_mine_shaft_approx 0, $color_silver_chalice_approx 100%);
					}
					&.subMenuRoot > ul.subMenuList li {
						&:hover {
							background: $color_gallery_approx;
						}
						&.selected {
							background: $color_gallery_approx;
						}
						&.menu-action.selected {
							background: $url_mn_6 no-repeat 7px 7px $color_gallery_approx;
						}
						&.menu-entity.selected {
							background: $url_mn_6 no-repeat 7px 7px $color_gallery_approx;
						}
					}
				}
			}
		}

		> ul.nav-detail {
			display: none;
			margin-top: 3px;
			padding: 0 0 3px;
			position: absolute;
			left: 0;
			z-index: 9;
			width: 100%;
			> li {
				margin-left: 15px;
				> a {
					display: block;
					color: $color_chicago_approx;
					padding: 2px 7px;
					&:hover {
						//Instead of the line below you could use @include border-radius($radius, $vertical-radius)
						border-radius: 15px;
						color: $white;
					}
				}
				&.subMenuRoot {
					position: relative;
					> a {
						padding: 2px 22px 2px 7px;
					}
					> span.node-cursor {
						position: absolute;
						right: 7px;
						top: 11px;
						background: $url_mn_3 no-repeat;
						width: 8px;
						height: 5px;
					}
					&.hover > span.node-cursor {
						background: $url_mn_4 no-repeat;
					}
					> ul.subMenuList {
						display: none;
						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;
						z-index: 5;
						li {
							float: none;
							min-width: 130px;
							white-space: nowrap;
							margin: 0;
							padding: 0;
							position: relative;
							a {
								padding: 3px 26px 4px 25px;
								color: $color_chicago_approx;
								display: block;
								&:hover {
									background: none;
									//Instead of the line below you could use @include border-radius($radius, $vertical-radius)
									border-radius: 0;
								}
							}
							&.change-area {
								> ul {
									display: none;
									position: absolute;
									top: 0;
									left: 130px;
									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 {
									}
								}
								> a > span.listicon {
								}
								> span.node-cursor {
									position: absolute;
									right: 10px;
									top: 8px;
									background: $url_mn_5 no-repeat;
									width: 5px;
									height: 7px;
								}
							}
							> a > span.listicon {
								position: absolute;
								background-image: none;
								left: 7px;
								top: 5px;
							}
						}
					}
					&.open > ul.subMenuList {
						display: block;
						li.change-area:hover > ul {
							display: block;
						}
					}
				}
				&.selected > a {
					//Instead of the line below you could use @include border-radius($radius, $vertical-radius)
					border-radius: 15px;
					color: $white;
				}
			}
		}
	}
	&.sub-droplist > ul.nav-wrap {
		> li {
			&.home {
				@extend %extend_mn_1;
			}
			> p {
				position: relative;
				border: 1px solid $color_emperor_approx;
				border-bottom: none;
			}
			&.menu-node {
				> p {
					padding-right: 23px;
					> span.curicon {
						display: block;
						position: absolute;
						right: 7px;
						top: 11px;
						background: $url_mn_4 no-repeat;
						width: 8px;
						height: 5px;
					}
				}
				&.hover > p {
					z-index: 45;
					> a {
						color: $color_chicago_approx;
					}
					> span.curicon {
						background: $url_mn_3 no-repeat;
					}
				}
			}
			> ul {
			}
			&.bg-default {
				ul {
					background: $white;
					> li {
						&:hover {
							background: $color_link_water_approx;
						}
						&.selected {
							background: $color_link_water_approx;
						}
						&.menu-action.selected {
							background: $url_mn_6 no-repeat scroll 7px 7px $color_link_water_approx;
						}
						&.menu-entity.selected {
							background: $url_mn_6 no-repeat scroll 7px 7px $color_link_water_approx;
						}
					}
				}
				&:hover > p {
					background: $color_mine_shaft_approx;
				}
				&.selected > p {
					background: $color_mine_shaft_approx;
				}
				&.menu-action.selected > p {
					background: $url_mn_6 no-repeat scroll 2px 8px $color_mine_shaft_approx;
				}
				&.menu-entity.selected > p {
					background: $url_mn_6 no-repeat scroll 2px 8px $color_mine_shaft_approx;
				}
				&.menu-node.hover {
					> p {
						background: $white;
						border-color: $color_mountain_mist_approx;
					}
					> ul {
						border-color: $color_mountain_mist_approx;
					}
				}
			}
			&.hover > ul {
				border-style: solid;
				border-width: 1px;
				z-index: 40;
				//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 {
					height: 100%;
					overflow: visible;
				}
			}
		}
		li {
			position: relative;
			ul {
				position: absolute;
				top: 0;
				left: 0;
				margin: 0;
				padding: 0;
				z-index: 40;
				li {
					height: 0;
					overflow: hidden;
					float: none;
					margin: 0;
					padding: 0;
					width: 100%;
					white-space: nowrap;
					a {
						padding: 3px 24px 4px 25px;
						color: $color_chicago_approx;
						display: block;
					}
					ul {
						top: 0;
						left: 100%;
					}
					> a > span {
						&.navicon {
							@extend %extend_mn_2;
						}
						&.listicon {
							@extend %extend_mn_2;
						}
					}
					> span.node-cursor {
						position: absolute;
						right: 10px;
						top: 8px;
						background: $url_mn_5 no-repeat;
						width: 5px;
						height: 7px;
					}
					&:hover > ul {
						border-style: solid;
						border-width: 1px;
						//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 {
							height: 100%;
							overflow: visible;
						}
					}
				}
			}
			&.bg-default ul li:hover > ul {
				border-color: $color_mountain_mist_approx;
			}
		}
	}
	&.noitem > ul.nav-wrap > li.home {
		position: relative;
		left: -32px;
		padding: 5px 8px 9px;
		top: 0;
	}
}
#widget {
	margin-top: 8px;
	float: left;
	width: 198px;
	position: relative;
	z-index: 2;
}
*:first-child + html #widget {
	float: left;
}
