/*------------------------------------*\
    NAV TOP MENU BAR
\*------------------------------------*/

/* Main Menu bar - level 1 */
#nav{
   	height: 40px;
   	background-color: #B6C6E6;
	list-style:none;
    float:left;
    width:96%;
    position:relative;
    z-index:1010;
    padding-top: 15px;
    text-align: center;
    font-size: 10pt;
   	font-family: 'Arial Narrow', Arial, sans-serif; font-stretch: condensed;
}

/* Headings across main menu bar */
#nav li{
    float:left;
    margin-right:20px;
    position:relative;
}

/* Not sure what this does! */
#nav li li{
    float:left;
    margin-right:5px;
    position:relative;
}

/* Nor sure what this one does either! */
#nav li li li{
    float:left;
    margin-right:5px;
    position:relative;
}

/* Spacing of top menu bar items and width/fill of drop downs */
#nav a{
    display:block;
    padding:5px;
    color:#000000;
    background:#B6C6E6;
    text-decoration:none;
}

/* Not sure if this is necessary */
#nav a:hover{
    color:#000000;
    background:#B6C6E6;
    text-decoration:none;
}

/*--- DROPDOWN ---*/
/* Causes 1st level menus to drop down */
#nav ul{
    background:#FFFFFF; /* 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;) */
}

/* Gives format and size to first level drop down menu &*/
#nav ul li{
    /* padding-top:1px; /* Introducing a padding between the li and the a give the illusion spaced items */
    border-bottom: 0px #CDCDCF solid;
    border-top: 0px #CDCDCF solid;
    border-left: 0px #CDCDCF solid;
    border-right: 0px #CDCDCF solid;
    float: none;
    width: 100%;
    left: -25px;
}

/* Keeps everything on one line - BUT makes different menus different widths */
#nav ul a{
    white-space:nowrap; /* Stop text wrapping and creating multi-line dropdown items */
}

/* Makes level one menu display on main menu item hover */
#nav li:hover > ul{ /* Display the dropdown on hover */
    left:0; /* Bring back on-screen when needed */
    background:#FFFFFF;
}

/* Not quite sure whatthis achieves */
#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. */
    text-decoration:none;
}

/* Not quite sure what this one achieves either */
#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;
    background:#FFFFFF;
    color: #000000;
    font-weight: bold;
    font-size: 10pt;
}

/* Or this one! */
#nav li:hover ul li a:hover{/* Here we define the most explicit hover states--what happens when you hover each individual link. */
    /*background:#ACAFB2;*/
    color: #FFFFFF;
    text-decoration:none;
    width: 100%;
    background: -webkit-linear-gradient(left, #FFFFFF, #000000); /* For Safari 5.1 to 6.0 */
	background: -o-linear-gradient(right, #FFFFFF, #000000); /* For Opera 11.1 to 12.0 */
	background: -moz-linear-gradient(right, #FFFFFF, #000000); /* For Firefox 3.6 to 15 */
	background: linear-gradient(to right, #FFFFFF, #000000); /* Standard syntax */

}

#nav > li > ul li > ul{   /* Third Level & beyond */
  display:none;
  background:#FFFFFF;
}

/* Causes level 3 menu to display */
#nav > li > ul li:hover > ul{
  display:block;
  position:absolute;
  left:100%;
  border-left:solid 0px #FFFFFF;
  top:0;
  width: auto;
}

/* Not used
#nav > li > ul > li ul > li{
  display:block;
  padding:3px 10px;
  border-top:solid 2px #FFFFFF;
  white-space:nowrap;
}
*/

#nav > li > ul > li ul > li:hover > span{
  color:#000000;
}

ul.children li ul.children {
position: absolute;
left: 100%;
top: 0;
}

ul.children > li { position: relative; }

/*for submenu.*/   
.dropdownmenu 
{
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;

    -moz-box-shadow: 10px 8px 14px #000;
    -webkit-box-shadow: 10px 8px 14px #000;
    box-shadow: 10px 8px 14px #000;  
}

#menuleft {
	clear: both;
	position: relative;
	top: -20px;
	float: left;
	background-color:#E7ECF7;
	width: 230px;
	height: auto;
	font-family: Arial Narrow, Arial, sans-serif; font-stretch: ultra-condensed;
	font-size: 10pt;
}

#menuleftlevel1 {
	clear: both;
	position: relative;
	top: -20px;
	float: left;
	background-color:#FFE8FF;
	width: 230px;
	height: auto;
	font-family: Arial Narrow, Arial, sans-serif; font-stretch: condensed;
	font-size: 10pt;
}