/* 
CSS for the menu bar, dropdown menus, and related markup 
*/

/* The top-level container for the menu.  This is the level at which to position the entire menu. */
.menuBar {
position: relative;
margin-left: auto;
margin-right: auto;
text-align: center;
line-height: 15pt;
clear: both;
font-size: 15pt;
z-index: 10;	/* Lift the menu bar above the background */
display: table; /* 'Shrink-wraps' the menu bar so it centers properly.  Except on IE. */
}

.menuBarFirstItem {
-moz-border-radius-topleft: 20px;
-moz-border-radius-bottomleft: 20px;
-webkit-border-top-left-radius: 20px;
-webkit-border-bottom-left-radius: 20px;
}

.menuBarLastItem {
-moz-border-radius-topright: 20px;
-moz-border-radius-bottomright: 20px;
-webkit-border-top-right-radius: 20px;
-webkit-border-bottom-right-radius: 20px;
}

.menu, 
.menu * {
margin: 0;
padding: 0;
list-style: none;
}

.menu {
line-height: 1.0;
}

.menu ul {
position: absolute;
top: -999em;
width: 10em;	
}

.menu ul li {
width: 100%;
}

.menu li:hover {
visibility: inherit;    /* fixes IE7 'sticky bug' */
}

.menu li {
float: left;
position: relative;
}

.menu a {
display: block;
position: relative;
}

.menu li:hover ul,
.menu li.sfHover ul {   /* sfHover class is assigned dynamically by superfish.js */
left: 0;
top: 1.6em; 
z-index: 99;
}

/** Menu borders **/
ul.menu li ul {
border-left: solid 4px #ccc;
border-right: solid 4px #ccc;
border-bottom: solid 4px #ccc;
-moz-border-radius-bottomright: 20px;
-moz-border-radius-bottomleft: 20px;
-webkit-border-bottom-right-radius: 20px;
-webkit-border-bottom-left-radius: 20px;
}

li.lastItem {
-moz-border-radius-bottomright: 16px;
-moz-border-radius-bottomleft: 16px;
-webkit-border-bottom-right-radius: 16px;
-webkit-border-bottom-left-radius: 16px;
}

.subMenuSeparator {
float: left;
width: 100%;
height: 1px;
margin: 0;
padding: 0;
}

.subMenuArrow {
width: 13px;
height: 12px;
border: none;
}

.menu {
margin-bottom: 1em;
}

.menu a {
padding: .3em 1em;
text-decoration: none;
}

.menu li {
color: #bbb;
}

.menu a,
.menu a:link,
.menu a:visited {  
color: inherit;   /* This allows manipulation of the colors of the <li> element containing an <a> to change the <a> colors */
}

.menu li {
background:	#2F3440;
}

.menu li li {
background:	#424959;
}