#nav{
	list-style:none;
	font-weight: normal;
    font-size: 11px;
    font-family: verdana, arial;
	margin-bottom:5px;
	float:left;
	width:100%;
}
#nav li{
	float:left;
	margin-right:10px;
	position:relative;
    width: 240px;
    z-index: 10;
}
#nav a{
	display:block;
	padding:3px;
	color:#000000;
	background:#F89838;
	text-decoration:none;
  padding-top: 4px;
  padding-bottom:4px;
  padding-left: 4px;
  padding-right: 4px;
}
#nav a:hover{
	color:#000000;
	background:#11437C;
	text-decoration:none;
}

/*--- DROPDOWN ---*/
#nav ul{
	list-style:none;
	position:absolute;
    padding: 0;
	left:-9999px; /* Hide off-screen when not needed (this is more accessible than display:none;) */
}
#nav ul li{
	padding-top:3px; /* Introducing a padding between the li and the a give the illusion spaced items */
	float:none;
    height: 18px;
    width: 240px;
}
#nav ul a{
	white-space:nowrap; /* Stop text wrapping and creating multi-line dropdown items */
}
#nav li:hover ul{ /* Display the dropdown on hover */
	left:0; /* Bring back on-screen when needed */
}
#nav 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-color: #FBB473;
  background: -moz-linear-gradient(top, #FDDDBD, #F89838); /* for firefox 3.6+ */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F89838', endColorstr='#FDDDBD'); /* for IE */
  background: -webkit-gradient(linear, left top, left bottom, from(#FDDDBD), to(#F89838)); /* for webkit browsers */
  text-decoration:none;
}
#nav 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. */
	text-decoration:none;
}
#nav li:hover ul li a:hover{ /* Here we define the most explicit hover states--what happens when you hover each individual link. */
	background:#11437C;
    color: #FFFFFF;
}
#nav a.active {
  vertical-align: middle;
  border: 1px solid #585858;
  background-image: url(/images/dcdown.gif);
  background-position: 97% 40%;
  background-repeat: no-repeat;
  background-color: #F89838;
  background: -moz-linear-gradient(top, #FDDDBD, #F89838); /* for firefox 3.6+ */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F89838', endColorstr='#FDDDBD'); /* for IE */
  background: -webkit-gradient(linear, left top, left bottom, from(#FDDDBD), to(#F89838)); /* for webkit browsers */

  -moz-border-radius: 3px;
  border-radius: 3px;
}
.ui-menu .ui-menu-item a {
    text-decoration: none !important;
    display: block;
    padding: 2px .4em;
    line-height: 1.5;
    min-height: 0;
    font-weight: normal;
    width: auto;
    font-size: 12px;
    color: #11437C;
}
.ui-state-active {
   color: #0033CC !important;
}