/* common styling */
/* set up the overall width of the menu div, the font and the margins */
.menu { font-family: arial, sans-serif; width: 1000px; margin: 0px 0px 0px 0px; position: relative; z-index: 100; margin: 0 0 0 0; }
/* remove the bullets and set the margin and padding to zero for the unordered list */
.menu ul { padding: 0; margin: 0; list-style-type: none; }
/* float the list so that the items are in a line and their position relative so that the drop down list will appear in the right place underneath each list item */
.menu ul li { float: left; position: relative; }
/* style the links to be 104px wide by 30px high with a top and right border 1px solid white. Set the background color and the font size. */
.menu ul li a, .menu ul li a:visited { display: block; text-align: center; width: 166px; color: #c4dfea; height: 27px; padding-top:10px; padding-bottom:10px; }
/* make the dropdown ul invisible */
.menu ul li ul { display: none; }
/* specific to non IE browsers */
/* set the background and foreground color of the main menu li on hover */
.menu ul li:hover a { display: block; color: #ffdf2e; background:url(../images/m2.jpg); height: 27px; padding-top:10px; padding-bottom:10px;  }
/* make the sub menu ul visible and position it beneath the main menu list item */
.menu ul li:hover ul { display: block; position: absolute; top: 47px; left: 0; width: 166px;  height: 30px; }
/* style the background and foreground color of the submenu links */
.menu ul li:hover ul li a { display: block; background: #0E1B2D; color: #ffffff;  height: 30px;}
/* style the background and forground colors of the links on hover */
.menu ul li:hover ul li a:hover { background: #dfc184; color: #000; height: 30px; }