/* BE SURE TO INCLUDE THE CSS RESET FOUND IN THE DEMO PAGE'S CSS */
		/*------------------------------------*\
	TopMenu
\*------------------------------------*/
		#TopMenu
		{
			list-style: none;
		height:25px;
			margin: 0; /* Clear floats */
			float: left;
			width: 100%; /* Bring the TopMenu above everything else--uncomment if needed.
	position:relative;
	z-index:5;
	*/
		}
		#TopMenu li
		{
			float: left;
			margin: 0 1px 0 0;
			position: relative;
			width: 150px;
			z-index:999;
			
		}
		#TopMenu a
		{
			display: block;
			line-height:25px;
			color: #fff;
			background: #743E1C;
			text-decoration: none;
			font-size: 12px;
			text-align:center;
		}
		#TopMenu a:hover
		{
			color: #000;
			background: #E9BE00;
			text-decoration: underline;
		}
		
		/*--- DROPDOWN ---*/
		#TopMenu ul
		{
			background: #fff; /* Adding a background makes the dropdown work properly in IE7+. Make this as close to your page's background as possible (i.e. white page == white background). */
			background: rgba(255,255,255,0); /* But! Let's make the background fully transparent where we can, we don't actually want to see it if we can help it... */
			list-style: none;
			position: absolute;
			left: -9999px; /* Hide off-screen when not needed (this is more accessible than display:none;) */
		}
		#TopMenu ul li
		{
			/* padding: 1px 0 0 0; Introducing a padding between the li and the a give the illusion spaced items */
			margin:0;
			padding:1px 0 0 0;
			float: none;
		}
		#TopMenu ul a
		{
			white-space: nowrap; /* Stop text wrapping and creating multi-line dropdown items */
		}
		#TopMenu li:hover ul
		{
			/* Display the dropdown on hover */
			left: 0px; /* Bring back on-screen when needed */
		}
		#TopMenu li:hover a
		{
			/* These create persistent hover states, meaning the top-most link stays 'hovered' even when your cursor has moved down the list. */
			background: #E9BE00;
			text-decoration: none;
		}
		#TopMenu li:hover ul a
		{
			/* The persistent hover state does however create a global style for links even before they're hovered. Here we undo these effects. */
			background-color: #F2D672;
			text-decoration: none;
			font-size: 12px;
			color:#000;
		}
		#TopMenu li:hover ul li a:hover
		{
			/* Here we define the most explicit hover states--what happens when you hover each individual link. */
			background: #E9BE00;
		}
		
		#TopMenu a.selected
		{ 
			/*root item at top of list*/
			color: #000;
			background-color: #e9be00;
		}