/* Some stylesheet reset */
ul.nav, .nav>li, .nav>li>a {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

ul.nav {
	line-height: 1;
}

/* Basic layout & positioning */
.nav, .nav ul {
	position: relative;
	display: block;
	list-style: none;
	margin: 0;
	padding: 0;
	width: 160px;
}

	/* The list elements containing the links */
	.nav li, .nav ul li {
		display: block;
		position: relative;
		padding: 0;
		margin: 0;
	}

	/* The navigation links */
	.nav>li>a {
		/* Layout */
		position: relative;
		display: block;
		width: 140px;
		padding: 10px 10px 10px 15px;
		border-top: 1px solid #252525;
		border-left: 1px solid #252525;
		border-right: 1px solid #252525;

		/* Text */
		font-family: Arial, Helvetica, sans-serif;
		font-weight: bold;
		font-size: 14px;
		text-decoration: none;
		color: #fff;
		text-shadow: 0 1px 1px #000;

		/* Background & effects */
		background: #434343; /* Background for old browsers */
		background: -webkit-linear-gradient(bottom, #434343, #515151); /* Background for Chrome & Safari */
		background: -ms-linear-gradient(bottom, #434343, #515151); /* Background for Internet Explorer 10 */
		background: -moz-linear-gradient(bottom, #434343, #515151); /* Background for Firefox */
		background: -o-linear-gradient(bottom, #434343, #515151); /* Background for Opera */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#515151', endColorstr='#434343',GradientType=0); /* Background for Internet Explorer 8-9 */
		box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2); /* Subtle white inner shadow */
	}

	/* The arrow indicating a dropdown menu */
	.dropdown>a::after {
		 content: "";
		 position: absolute;
		 top: 16px;
		 right: 10px;
		 width: 0px;
		 height: 0px;

		 /* Creating the triangle using borders */
		 border-top: 5px solid #fff;
		 border-left: 4px solid transparent;
		 border-right: 4px solid transparent;
		 border-bottom: 5px solid transparent;
		}

	/* The hover state of the links */
	.nav>li>a:hover, .nav>li:hover>a {
		background: #373737;
		background: -webkit-linear-gradient(bottom, #373737, #444444);
		background: -ms-linear-gradient(bottom, #373737, #444444); 
		background: -moz-linear-gradient(bottom, #373737, #444444);
		background: -o-linear-gradient(bottom, #373737, #444444);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#444444', endColorstr='#373737',GradientType=0);
	}

	/* Subtle drop shadow for the last navigation link */
	.nav>li:last-child>a {
		border-bottom: 1px solid #252525;
		box-shadow: inset 0px 1px 0px rgba(255, 255, 255, .2),
					0px 1px 1px rgba(0, 0, 0, .3);
	}

	/* The dropdown list elements containing the sub-links */
	.nav ul li {
		position: absolute;
		height: 0px;
		top: -9999px;

		/* Creating the slide effect using transitions */
		-webkit-transition: height .3s ease-out;
		-ms-transition: height .3s ease-out;
		-moz-transition: height .3s ease-out;
		-o-transition: height .3s ease-out;
	}

	.nav li:hover li {
		/* Expanding the list elements */
		height: 30px;
		position: relative;
		top: auto;
	}

	/* The dropdown menu's links */
	.nav ul li a {
		/* Layout & positioning */
		position: relative;
		display: block;
		width: 130px;
		padding: 8px 10px 8px 25px;
		border-top: 1px solid #252525;

		/* Text */
		font-family: Arial, Helvetica, sans-serif;
		font-weight: normal;
		font-size: 13px;
		text-decoration: none;
		border-left: 1px solid #252525;
		border-right: 1px solid #252525;
		background: #2f2f2f;
		color: #9f9f9f;
		
	}

	/* The hover state of the dropdown menu links */
	.nav ul li a:hover {
		color: #fff;
	}

	.nav .dropdown:hover li:first-child a {
		box-shadow: inset 0px 1px 1px rgba(0, 0, 0, .12);
		border-top: 1px solid #252525;
	}

	.nav li:last-child ul li:last-child a {
		border-bottom: 1px solid #252525;
		box-shadow: 0px 1px 1px rgba(0, 0, 0, .3);
	}