
nav { margin:5px 0 15px 15px; padding-top:19px; color:#fff; width:700px; float:left;  /* controls for navigation */
	a { color:inherit; display:block; text-decoration:none; margin:0; padding:0; font-weight:bold }
}

.navigation { .cf; font-size:17px; z-index:100; color:#fff;
	ul, li, a { float: left; margin:0; padding:0;  }

	ul {}
	li { z-index:100; position:relative }
	li:hover {
		a { color:#fff; background:#4e6089
		}
		.children {
			left:4.5em; margin-top:8px; 	
			a {
				background:none; color:#333
			}
			a:hover {
				background:#4e6089; color:#fff;
			}
		}
}
a.active { background:#4e6089; color:#fff }	/* active button color */
	
	li:last-child { border-right:none }
	a { height:35px; line-height:35px; margin:3px; padding:0 15px; }
	.children {
		background:#f7f2e3;
		.box-shadow();
		left:-999em;
		margin-left:-65px;
		position:absolute;
		top:30px;
		width:130px;
		z-index:200;
		li, a { float:none; }
		li { border-right:none; }
		a {
			height: 30px;
			line-height: 30px;
			margin: 3px;
		}
	}
}

.border-radius (@radius: 5px) {
	-moz-border-radius:@radius;
	-webkit-border-radius:@radius;
	border-radius:@radius;
}
.box-shadow (@x: 0, @y: 5px, @blur: 5px, @spread: -5px, @color: #000) {
	-moz-box-shadow:@x @y @blur @spread @color;
	-webkit-box-shadow:@x @y @blur @spread @color;
	box-shadow:@x @y @blur @spread @color;
}
.linear-gradient (@start: #fff, @end: #ddd, @percent: 100%) {
	background:@start; /* Old */
	background:-moz-linear-gradient(top, @start 0%, @end @percent); /* FF3.6+ */
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,@start), color-stop(@percent,@end)); /* Chrome, Safari 4+ */
	background:-webkit-linear-gradient(top, @start 0%,@end @percent); /* Chrome 10+, Safari 5.1+ */
	background:-o-linear-gradient(top, @start 0%,@end @percent); /* Opera 11.10+ */
	background:-ms-linear-gradient(top, @start 0%,@end @percent); /* IE 10+ */
	background:linear-gradient(top, @start 0%,@end @percent); /* W3C */
}

/* For modern browsers */
.cf:before,
.cf:after {
    content:"";
    display:table;
}
.cf:after {
    clear:both;
}
/* For IE 6/7 (trigger hasLayout) */
.cf {
    zoom:1;
}

