/* ================================================================ This copyright notice must be untouched at all times. The original version of this stylesheet and the associated (x)html is available at http://www.cssplay.co.uk/menu/one_page.html Copyright (c) 2005-2007 Stu Nicholls. All rights reserved. This stylesheet and the assocaited (x)html may be modified in any way to fit your requirements. =================================================================== */ /* common styling */ /* set up the overall width of the menu div, the font and the margins with a relative position*/ #menu2 { font-family: verdana, arial, sans-serif; width:675px; margin:0; position:relative; z-index:90; height:40px; } #menu3 { font-family: verdana, arial, sans-serif; width:675px; margin:0; position:relative; z-index:89; height:40px; } #menu4 { font-family: verdana, arial, sans-serif; width:675px; margin:0; position:relative; z-index:88; height:40px; } #menu5 { font-family: verdana, arial, sans-serif; width:675px; margin:0; position:relative; z-index:87; height:40px; } #menu6 { font-family: verdana, arial, sans-serif; width:675px; margin:0; position:relative; z-index:86; height:40px; } #menu7 { font-family: verdana, arial, sans-serif; width:675px; margin:0; position:relative; z-index:85; height:40px; } /* remove the bullets and set the margin and padding to zero for the unordered list */ #menu2 ul { padding:0; list-style-type: none; border:0; } #menu3 ul { padding:0; list-style-type: none; border:0; } #menu4 ul { padding:0; list-style-type: none; border:0; } #menu5 ul { padding:0; list-style-type: none; border:0; } #menu6 ul { padding:0; list-style-type: none; border:0; } #menu7 ul { padding:0; list-style-type: none; border:0; } /* float the list so that the items are in a line */ #menu2 ul li { float:left; } #menu3 ul li { float:left; } #menu4 ul li { float:left; } #menu5 ul li { float:left; } #menu6 ul li { float:left; } #menu7 ul li { float:left; } /* style the links to be 249px wide by 30px high with a top and right border 1px solid white. Set the background color and the font size. */ #menu2 ul li a { display:block; text-align:left; text-decoration:none; width:600px; height:30px; color:#012440; border:0; line-height:14px; font-size:12px; font-weight:bold;} #menu3 ul li a { display:block; text-align:left; text-decoration:none; width:600px; height:30px; color:#012440; border:0; line-height:14px; font-size:12px; font-weight:bold;} #menu4 ul li a { display:block; text-align:left; text-decoration:none; width:600px; height:30px; color:#012440; border:0; line-height:14px; font-size:12px; font-weight:bold;} #menu5 ul li a { display:block; text-align:left; text-decoration:none; width:600px; height:30px; color:#012440; border:0; line-height:14px; font-size:12px; font-weight:bold;} #menu6 ul li a { display:block; text-align:left; text-decoration:none; width:600px; height:30px; color:#012440; border:0; line-height:14px; font-size:12px; font-weight:bold;} #menu7 ul li a { display:block; text-align:left; text-decoration:none; width:600px; height:30px; color:#012440; border:0; line-height:14px; font-size:12px; font-weight:bold;} /* make the dropdown ul invisible */ #menu2 ul li ul { display: none; } #menu3 ul li ul { display: none; } #menu4 ul li ul { display: none; } #menu5 ul li ul { display: none; } #menu6 ul li ul { display: none; } #menu7 ul li ul { display: none; } /* specific to non IE browsers */ /* set the background and foreground color of the main menu li on hover */ #menu2 ul li:hover a { color:#0073a4; } #menu3 ul li:hover a { color:#0073a4; } #menu4 ul li:hover a { color:#0073a4; } #menu5 ul li:hover a { color:#0073a4; } #menu6 ul li:hover a { color:#0073a4; } #menu7 ul li:hover a { color:#0073a4; } /* make the sub menu ul visible and position it beneath the first list item */ #menu2 ul li:hover ul { text-align:left; display:block; position:absolute; top:15px; left:60px; text-align:left; } #menu3 ul li:hover ul { text-align:left; display:block; position:absolute; top:25px; left:60px; text-align:left; } #menu4 ul li:hover ul { text-align:left; display:block; position:absolute; top:15px; left:60px; text-align:left; } #menu5 ul li:hover ul { text-align:left; display:block; position:absolute; top:15px; left:60px; text-align:left; } #menu6 ul li:hover ul { text-align:left; display:block; position:absolute; top:15px; left:60px; text-align:left; } #menu7 ul li:hover ul { text-align:left; display:block; position:absolute; top:15px; left:60px; text-align:left; } /* make the sub menu ul li the full width with padding and border. Add an auto scroll bar */ #menu2 ul li:hover ul li { background:#fffee5; color:#000; padding:5px; width:500px; border:10px solid #012440; } #menu3 ul li:hover ul li { background:#fffee5; color:#000; padding:5px; width:500px; border:10px solid #012440; } #menu4 ul li:hover ul li { background:#fffee5; color:#000; padding:5px; width:500px; border:10px solid #012440; } #menu5 ul li:hover ul li { background:#fffee5; color:#000; padding:5px; width:500px; border:10px solid #012440; } #menu6 ul li:hover ul li { background:#fffee5; color:#000; padding:5px; width:500px; border:10px solid #012440; } #menu7 ul li:hover ul li { background:#fffee5; color:#000; padding:5px; width:500px; border:10px solid #012440; } /*float the image left with padding and no border */ #menu2 ul li:hover ul li img { padding:10px 10px 10px 0; border:0; } #menu3 ul li:hover ul li img { padding:10px 10px 10px 0; border:0; } #menu4 ul li:hover ul li img { padding:10px 10px 10px 0; border:0; } #menu5 ul li:hover ul li img { padding:10px 10px 10px 0; border:0; } #menu6 ul li:hover ul li img { padding:10px 10px 10px 0; border:0; } #menu7 ul li:hover ul li img { padding:10px 10px 10px 0; border:0; } /* style the paragraph font height */ #menu2 ul li:hover ul li p { font-size:12px; font-weight:normal; } #menu3 ul li:hover ul li p { font-size:12px; font-weight:normal; } #menu4 ul li:hover ul li p { font-size:12px; font-weight:normal; } #menu5 ul li:hover ul li p { font-size:12px; font-weight:normal; } #menu6 ul li:hover ul li p { font-size:12px; font-weight:normal; } #menu7 ul li:hover ul li p { font-size:12px; font-weight:normal; } /* style the background and foreground color of the submenu links */ #menu2 ul li:hover ul li a { display:inline; color:#ef3624; text-decoration:none; border:0; } #menu3 ul li:hover ul li a { display:inline; color:#ef3624; text-decoration:none; border:0; } #menu4 ul li:hover ul li a { display:inline; color:#ef3624; text-decoration:none; border:0; } #menu5 ul li:hover ul li a { display:inline; color:#ef3624; text-decoration:none; border:0; } #menu6 ul li:hover ul li a { display:inline; color:#ef3624; text-decoration:none; border:0; } #menu7 ul li:hover ul li a { display:inline; color:#ef3624; text-decoration:none; border:0; } /* style the background and forground colors of the links on hover */ #menu2 ul li:hover ul li a:hover { text-decoration:none; color:#000; } #menu3 ul li:hover ul li a:hover { text-decoration:none; color:#000; } #menu4 ul li:hover ul li a:hover { text-decoration:none; color:#000; } #menu5 ul li:hover ul li a:hover { text-decoration:none; color:#000; } #menu6 ul li:hover ul li a:hover { text-decoration:none; color:#000; } #menu7 ul li:hover ul li a:hover { text-decoration:none; color:#000; } /* common styling */ /* set up the overall width of the menu div, the font and the margins with a relative position*/ #menu8 { font-family: verdana, arial, sans-serif; width:675px; margin:0; position:relative; z-index:84; height:40px; } #menu9 { font-family: verdana, arial, sans-serif; width:675px; margin:0; position:relative; z-index:83; height:40px; } #menu10 { font-family: verdana, arial, sans-serif; width:675px; margin:0; position:relative; z-index:82; height:40px; } #menu11 { font-family: verdana, arial, sans-serif; width:675px; margin:0; position:relative; z-index:81; height:40px; } #menu12 { font-family: verdana, arial, sans-serif; width:675px; margin:0; position:relative; z-index:80; height:40px; } #menu13 { font-family: verdana, arial, sans-serif; width:675px; margin:0; position:relative; z-index:79; height:40px; } /* remove the bullets and set the margin and padding to zero for the unordered list */ #menu8 ul { padding:0; list-style-type: none; border:0; } #menu9 ul { padding:0; list-style-type: none; border:0; } #menu10 ul { padding:0; list-style-type: none; border:0; } #menu11 ul { padding:0; list-style-type: none; border:0; } #menu12 ul { padding:0; list-style-type: none; border:0; } #menu13 ul { padding:0; list-style-type: none; border:0; } /* float the list so that the items are in a line */ #menu8 ul li { float:left; } #menu9 ul li { float:left; } #menu10 ul li { float:left; } #menu11 ul li { float:left; } #menu12 ul li { float:left; } #menu13 ul li { float:left; } /* style the links to be 249px wide by 30px high with a top and right border 1px solid white. Set the background color and the font size. */ #menu8 ul li a { display:block; text-align:left; text-decoration:none; width:600px; height:30px; color:#012440; border:0; line-height:14px; font-size:12px; font-weight:bold;} #menu9 ul li a { display:block; text-align:left; text-decoration:none; width:600px; height:30px; color:#012440; border:0; line-height:14px; font-size:12px; font-weight:bold;} #menu10 ul li a { display:block; text-align:left; text-decoration:none; width:600px; height:30px; color:#012440; border:0; line-height:14px; font-size:12px; font-weight:bold;} #menu11 ul li a { display:block; text-align:left; text-decoration:none; width:600px; height:30px; color:#012440; border:0; line-height:14px; font-size:12px; font-weight:bold;} #menu12 ul li a { display:block; text-align:left; text-decoration:none; width:600px; height:30px; color:#012440; border:0; line-height:14px; font-size:12px; font-weight:bold;} #menu13 ul li a { display:block; text-align:left; text-decoration:none; width:600px; height:30px; color:#012440; border:0; line-height:14px; font-size:12px; font-weight:bold;} /* make the dropdown ul invisible */ #menu8 ul li ul { display: none; } #menu9 ul li ul { display: none; } #menu10 ul li ul { display: none; } #menu11 ul li ul { display: none; } #menu12 ul li ul { display: none; } #menu13 ul li ul { display: none; } /* specific to non IE browsers */ /* set the background and foreground color of the main menu li on hover */ #menu8 ul li:hover a { color:#0073a4; } #menu9 ul li:hover a { color:#0073a4; } #menu10 ul li:hover a { color:#0073a4; } #menu11 ul li:hover a { color:#0073a4; } #menu12 ul li:hover a { color:#0073a4; } #menu13 ul li:hover a { color:#0073a4; } /* make the sub menu ul visible and position it beneath the first list item */ #menu8 ul li:hover ul { text-align:left; display:block; position:absolute; top:15px; left:60px; text-align:left; } #menu9 ul li:hover ul { text-align:left; display:block; position:absolute; top:15px; left:60px; text-align:left; } #menu10 ul li:hover ul { text-align:left; display:block; position:absolute; top:15px; left:60px; text-align:left; } #menu11 ul li:hover ul { text-align:left; display:block; position:absolute; top:15px; left:60px; text-align:left; } #menu12 ul li:hover ul { text-align:left; display:block; position:absolute; top:15px; left:60px; text-align:left; } #menu13 ul li:hover ul { text-align:left; display:block; position:absolute; top:15px; left:60px; text-align:left; } /* make the sub menu ul li the full width with padding and border. Add an auto scroll bar */ #menu8 ul li:hover ul li { background:#fffee5; color:#000; padding:5px; width:500px; border:10px solid #012440; } #menu9 ul li:hover ul li { background:#fffee5; color:#000; padding:5px; width:500px; border:10px solid #012440; } #menu10 ul li:hover ul li { background:#fffee5; color:#000; padding:5px; width:500px; border:10px solid #012440; } #menu11 ul li:hover ul li { background:#fffee5; color:#000; padding:5px; width:500px; border:10px solid #012440; } #menu12 ul li:hover ul li { background:#fffee5; color:#000; padding:5px; width:500px; border:10px solid #012440; } #menu13 ul li:hover ul li { background:#fffee5; color:#000; padding:5px; width:500px; border:10px solid #012440; } /*float the image left with padding and no border */ #menu8 ul li:hover ul li img { padding:10px 10px 10px 0; border:0; } #menu9 ul li:hover ul li img { padding:10px 10px 10px 0; border:0; } #menu10 ul li:hover ul li img { padding:10px 10px 10px 0; border:0; } #menu11 ul li:hover ul li img { padding:10px 10px 10px 0; border:0; } #menu12 ul li:hover ul li img { padding:10px 10px 10px 0; border:0; } #menu13 ul li:hover ul li img { padding:10px 10px 10px 0; border:0; } /* style the paragraph font height */ #menu8 ul li:hover ul li p { font-size:12px; font-weight:normal; } #menu9 ul li:hover ul li p { font-size:12px; font-weight:normal; } #menu10 ul li:hover ul li p { font-size:12px; font-weight:normal; } #menu11 ul li:hover ul li p { font-size:12px; font-weight:normal; } #menu12 ul li:hover ul li p { font-size:12px; font-weight:normal; } #menu13 ul li:hover ul li p { font-size:12px; font-weight:normal; } /* style the background and foreground color of the submenu links */ #menu8 ul li:hover ul li a { display:inline; color:#ef3624; text-decoration:none; border:0; } #menu9 ul li:hover ul li a { display:inline; color:#ef3624; text-decoration:none; border:0; } #menu10 ul li:hover ul li a { display:inline; color:#ef3624; text-decoration:none; border:0; } #menu11 ul li:hover ul li a { display:inline; color:#ef3624; text-decoration:none; border:0; } #menu12 ul li:hover ul li a { display:inline; color:#ef3624; text-decoration:none; border:0; } #menu13 ul li:hover ul li a { display:inline; color:#ef3624; text-decoration:none; border:0; } /* style the background and forground colors of the links on hover */ #menu8 ul li:hover ul li a:hover { text-decoration:none; color:#000; } #menu9 ul li:hover ul li a:hover { text-decoration:none; color:#000; } #menu10 ul li:hover ul li a:hover { text-decoration:none; color:#000; } #menu11 ul li:hover ul li a:hover { text-decoration:none; color:#000; } #menu12 ul li:hover ul li a:hover { text-decoration:none; color:#000; } #menu13 ul li:hover ul li a:hover { text-decoration:none; color:#000; }