/* ========== Simple Horizontal Menu ========== */ .clearfloats { clear: both; width: 1%; /*TBD*/ line-height: 1px; font-size: 1px; margin: 0 0 -1px 0; /* so total height is zero. */ margin: 0;/*TEST*/ padding: 0; } .mainMenu { width: 780px; /*690px*/ margin: 0; padding: 0; /* if L/R non-zero, adds to 100% width, and extends too far. */ border: 0; } .mainMenu ul { list-style: none; width: auto; display: block; margin: 0 0 0 1px; /* left of bar. */ padding: 1px 0 0 0; /* top "border". */ border: 0; } .mainMenu li { list-style-type: none; text-indent: 0; display: block; float: left; margin: 0 1px 0 0; /* gap between tabs. NOTE: if "left" is non-zero, IE6-7 loses margin when hover. */ padding: 0 10px 1px 0; /* "border" below each li, to give separation if wrap to multiple rows. */ border: 0; } .mainMenu a { text-decoration: none; text-align: center; display: block; /* To fill the li's height. */; margin: 0; padding: 2px 3px 0px 3px; /**/ font-family: Arial, Helvetica, sans-serif; color: #FFFFFF; text-decoration: none; font-size: 12px; font-weight: bold } .mainMenu a:link { text-decoration: none; /* override any main stylesheet */ } .mainMenu a:visited { text-decoration: none; /* override any main stylesheet */ } .mainMenu a:hover { text-decoration: none; color: #1A2049; } .mainMenu a:focus { } .mainMenu a:active { } /* An alternate to "menu.js", is to add these as you add menu items. Requires adding id to each html tag, e.g., #home .mainMenu .home a, #main1 .mainMenu .main1 a, #main2 .mainMenu .main2 a, #main3 .mainMenu .main3 a, #main4 .mainMenu .main4 a, */ .mainMenu .currentPageMenuItem a { color: #1A2049; }