/* ========== 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: 100%; 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 0; /* left of bar. */ padding: 0 0 0 0; /* top "border". */ border: 0; } .mainMenu li { list-style-type: none; text-indent: 0; display: block; float: left; width:150px; margin: 0px 0 0px 0px; /*margin: 0 1px 0 0; gap between tabs. NOTE: if "left" is non-zero, IE6-7 loses margin when hover. */ padding: 0 0 0 0; /* "border" below each li, to give separation if wrap to multiple rows. */ border: 0; } .mainMenu a { text-decoration: none; text-align: left; display: block; /* To fill the li's height. */ margin: 0; padding: 5px 0 5px 10px; /**/ font-family: Arial, Helvetica, sans-serif; color: #000000; text-decoration: none; font-size: 15px; } .mainMenu a:link { text-decoration: none; /* override any main stylesheet */ } .mainMenu a:visited { text-decoration: none; /* override any main stylesheet */ } .mainMenu a:hover { color: #000000; background-color:#f8a00c; /*background-image:url(../images/menu_f_a.png);*/ } .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: #000000; font-weight:bold; background-color:#f8a00c; /*background-image:url(../images/menu_f_a.png);*/ }