.cms-menu {
	z-index: 10;
	background-color: $color-widget-bg;
	@include box-shadow($color-shadow-light, 3px, 0, 3px);
	
	a {
		text-decoration: none;
	}
}

.cms-menu-list {
	li {
		background-color: $color-base;
		@include linear-gradient(color-stops(
			$color-base,
			darken($color-base, 20%)
		));
		border-bottom: 1px solid $color-shadow-light;
		
		a {
			display: block;
			height: 32px;
			vertical-align: middle;
			font-size: 14px;
			@include text-shadow($color-shadow-light);
			color: $color-text-dark;
			padding: 5px;
			
			.icon {
				display: block;
				float: left;
				margin-right: 5px;
				@include sprite-background("icons-32.png");
				@include sprite-position(1, 1);
			}
			
			.text {
				display: block;
				padding-top: 10px;
			}
		}
		
		&.current {
			background-color: $color-menu-button;
			@include linear-gradient(color-stops(
				$color-menu-button, 
				darken($color-menu-button, 20%)
			));
			
			li {
				background-color: darken($color-menu-button, 5%);
				@include linear-gradient(color-stops(
					darken($color-menu-button, 5%),
					darken($color-menu-button, 10%)
				));
			}
			
			a {
				color: $color-text-light;
				@include text-shadow($color-shadow-dark);
			}
		}
		
		// nested elements
		li {
		
			
			&:first {
				@include box-shadow($color-shadow-dark, 0, 4px, 4px);
			}
			
			a {
				font-size: 12px;
				@include text-shadow($color-shadow-dark);
				margin: 0;
				padding-left: 30px;
				color: $color-text-light;
			}
			
			&.current a {
				font-weight: bold;
			}
		}
		
	}
		
	li#Menu-CMSMain a .icon {@include sprite-position(1, 1);}
	li#Menu-CMSMain.current a .icon, li#Menu-CMSMain a:hover .icon {@include sprite-position(2, 1);}
	li#Menu-AssetAdmin a .icon {@include sprite-position(1, 2);}
	li#Menu-AssetAdmin.current a .icon, li#Menu-AssetAdmin a:hover .icon {@include sprite-position(2, 2);}
	
}