/* CSS Document */

/* use this to style the main menu */
#menubar1 ul.horizontal li.level1 {
width: 122px;
font-size: 11px;
font-family: Arial, Helvetica, sans-serif;
}

/* controls the root menu's list item links, use this to style the main menus links */
#menubar1 ul.horizontal li.level1 a {
background: url(../images/menuBG1.gif) no-repeat top;
width: 122px;
padding: 6px 6px 15px 6px;
  color: #ffffff;
  text-decoration: none;
  text-align: center;
}

/* controls the root menu's list item links when a cursor is over them (mouseover) */
#menubar1 ul.horizontal li.level1 a:hover { color: #ffffff;
}

/* this controls the style of the dropdown and flyout menus, A great deal of the styling will be done here, probably. */
/* note that the comma needs to be there, don't remove it. */
#menubar1 ul.dropdown,
#menubar1 ul.flyout {width:116px;
border-top:1px solid #e8e8e8;
margin-left:3px;}
#menubar1 ul.dropdown li.level2,
#menubar1 ul.flyout li.level3 {
  border-bottom: 1px #e8e8e8 solid;
}

#menubar1 ul.dropdown li.level2 a,
#menubar1 ul.flyout li.level3 a { width:116px;
background: url(../images/menuBG1.gif) no-repeat bottom center;
font-size: 11px;
font-family: Arial, Helvetica, sans-serif;
  font-weight: normal;
  color: #ffffff;
  padding: 2px 5px 2px 5px;
  margin:0px !important; 
}

#menubar1 ul.dropdown li.level2 a:hover,
#menubar1 ul.flyout li.level3 a:hover {
  color: #e8e8e8;
}

#menubar1 ul.horizontal li#level1-2 a {
color: #ffffff;
background: url(../images/menuBG2.gif) no-repeat top center;
}

#menubar1 ul.horizontal li#level1-2 a:hover {
background: url(../images/menuBG2.gif) no-repeat top center;
color: #ffffff;
}

#menubar1 ul.horizontal li#level1-2 ul.dropdown li.level2 a,
#menubar1 ul.horizontal li#level1-2 ul.flyout li.level3 a {
background: url(../images/menuBG2.gif) no-repeat bottom center;
  color: #ffffff; }

#menubar1 ul.horizontal li#level1-2 ul.dropdown li.level2 a:hover,
#menubar1 ul.horizontal li#level1-2 ul.flyout li.level3 a:hover {
color:#e8e8e8; }

#menubar1 ul.horizontal li#level1-3 a {
color: #ffffff;
background: url(../images/menuBG3.gif) no-repeat top center;
}

#menubar1 ul.horizontal li#level1-3 a:hover {
background: url(../images/menuBG3.gif) no-repeat top center;
color: #ffffff;
}

#menubar1 ul.horizontal li#level1-3 ul.dropdown li.level2 a,
#menubar1 ul.horizontal li#level1-3 ul.flyout li.level3 a {
background: url(../images/menuBG3.gif) no-repeat bottom center;
color: #ffffff;}

#menubar1 ul.horizontal li#level1-3 ul.dropdown li.level2 a:hover,
#menubar1 ul.horizontal li#level1-3 ul.flyout li.level3 a:hover {
color:#e8e8e8;}

#menubar1 ul.horizontal li#level1-4 a {
color: #ffffff;
background: url(../images/menuBG4.gif) no-repeat top center;
}

#menubar1 ul.horizontal li#level1-4 a:hover {
background: url(../images/menuBG4.gif) no-repeat top center;
color: #ffffff;
}

#menubar1 ul.horizontal li#level1-4 ul.dropdown li.level2 a,
#menubar1 ul.horizontal li#level1-4 ul.flyout li.level3 a {
background: url(../images/menuBG4.gif) no-repeat bottom center;
color: #ffffff; }

#menubar1 ul.horizontal li#level1-4 ul.dropdown li.level2 a:hover,
#menubar1 ul.horizontal li#level1-4 ul.flyout li.level3 a:hover {
color:#e8e8e8; }

#menubar1 ul.horizontal li#level1-5 a {
color: #ffffff;
background: url(../images/menuBG5.gif) no-repeat top center;
}

#menubar1 ul.horizontal li#level1-5 a:hover {
background: url(../images/menuBG5.gif) no-repeat top center;
color: #ffffff;
}

#menubar1 ul.horizontal li#level1-5 ul.dropdown li.level2 a,
#menubar1 ul.horizontal li#level1-5 ul.flyout li.level3 a {
background: url(../images/menuBG5.gif) no-repeat bottom center;
color: #ffffff; }

#menubar1 ul.horizontal li#level1-5 ul.dropdown li.level2 a:hover,
#menubar1 ul.horizontal li#level1-5 ul.flyout li.level3 a:hover {
color:#e8e8e8;}

/* This is a set of CSS rules that allow the drop down menubar to function properly. Change these at your own risk!  */

/* this controls the div that is wrapped around the entire menubar */
#menubar1 { position: relative; float: left; z-index:2; }

/* controls the unordered list tag, I don't think styling should be done here either. Use more specific selectors to style the menu. */
#menubar1 ul { margin: 0px; padding: 0px; list-style: none; }

/* controls a list item in an unordered list tag, I don't think styling should be done here either. Use more specific selectors to style the menu. */
#menubar1 ul li { list-style: none; }

/* controls the list item link tag. */
#menubar1 ul li a { float: left; display: block; }

/* controls the root menu's list items. use this to style the main menu */
#menubar1 ul.horizontal li.level1 { float: left; }

/* controls the width of a list item's link tag. DON'T CHANGE UNLESS YOU KNOW WHAT YOU ARE DOING.
This is needed for things to function well. */
#menubar1 ul.horizontal > li.level1 a { width: auto; }

/* More functional css, don't change unless you know what you are doing */
/* Commented Backslash Hack hides rule from IE5-Mac */
#menubar1 ul li a { float:none; }
/* End IE5-Mac hack */

/* this controls the style of the dropdown and flyout menus, A great deal of the styling will be done here, probably. */
/* note that the comma needs to be there, don't remove it. */
#menubar1 ul.dropdown,
#menubar1 ul.flyout { position: relative; top: 0px; left: 0px; visibility: hidden; }

/* don't change this unless you know what you are doing, this makes sure that the menus appear on the top like they are supposed to */
#menubar1 ul { z-index: 1 !important; }

#menubar1 #bridgetools { margin-bottom: 0px; height: 5px; white-space: nowrap; }

#menubar1 #bridgetools a { padding: 2 10 2 10; margin:0px; height: 12px; }