/* This style sheet is used for the horizontal flyout menu navigation. note: comments starting with cw- are used by the ComWeb Style Sheet Theme (colour) Editor. Where more than one such comment is on consecutive lines, this is for backwards compatibility. The first of these such lines is the latest label for the Style sheet editor to display and the latter entries are older or redundant labels. */ /*============================================================================ FOR ALL MENU LEVELS ============================================================================*/ /* establish general styles */ #headerTail #menuList, #headerTail #menuListLG2 { font-family: Arial; position: absolute; left: 25px; bottom: 0; padding: 0 8px 0; margin: 0; font-size: 1em;/*safeguard in case an item is not a link, so it remains same size as links*/ line-height: 1.2em; width: auto; overflow: visible;/*to allow the flyouts to be seen outside the div*/ margin-left: 0px;/*specific override*/ z-index: 100; } /* high level of specificity, to override the mainContent.css treatment of (indented) bulleted lists, and tighten up the spacing */ #content #mainMenu ul, #content #mainMenuLG2 ul { list-style-type: none; margin: 0 1em 0 0; } /* remove space around all ul's and remove list bullets */ #headerTail #menuList ul, #headerTail #menuListLG2 ul { padding: 0; margin: 0; list-style-type: none; } /* style all li's, but particularly for top-level, as children styles are subsequently modified */ #headerTail #menuList li, #headerTail #menuListLG2 li { float: left;/*allows the list items to display horizontally*/ background: url(bg_hori_nav_shadow_top.png) 0 0 repeat-x; background-color: #e77e1d;/*can be used for top level only, if combined with a later rule which colours subnav li's differently*/ /* cw-Horizontal Menu Individual Borders border-color: #FF0000; border-width: 1px; border-style: solid;*/ margin-left: 0; margin-right: 0px;/*spacing between the top-level items*/ margin-top: 0;/*Do not modify this: overrides global margin settings from within mainContent.css to create default spacing in navigation lists*/ margin-bottom: 0;/*Do not modify this: overrides global margin settings from within mainContent.css to create default spacing in navigation lists*/ text-transform: uppercase; font-weight: bold; min-height: 34px; line-height: 34px; border-right: 1px solid #efac6d; border-left: 1px solid #e7561d; } /* hover style on all li's, but particularly for top-level, as children styles are subsequently modified */ #headerTail #menuList li:hover, #headerTail #menuListLG2 li:hover, #headerTail #menuList li.iehover, #headerTail #menuListLG2 li.iehover { /* cw-Horizontal Menu Links Hover */ color: #FFF; /*nav hover colour, 1 of 2 places, see further anchor declaration for 2nd entry. The first is for list items that do not contain links */ /* cw-Horizontal Menu List Item Background Hover */ background-color: #E85116!important;/*important avoids potential conflict multicolour treatments */ } /* Highlighting the current top-level page via the list item (excluding li class of submenu which is styled in subsequent declarations)*/ #headerTail #menuList ul li.currentPage, #headerTail #menuListLG2 ul li.currentPage, #headerTail #menuList ul li.submenu.currentPage, #headerTail #menuListLG2 ul li.submenu.currentPage { /* cw-MenuHorizontal Current Page List Background */ background-color: #FFF!important;/*important avoids potential conflict multicolour treatments */ } /* style all anchors, but particularly for top-level, as children styles are subsequently modified */ #headerTail #menuList a, #headerTail #menuListLG2 a { display: block;/*needed to get full 'padded' shape*/ padding: 0px 10px;/*space above and to the sides of the anchor words*/ /* cw-Horizontal Menu Link Backgrounds */ background-color: transparent;/*keep transparent so that any arrows are visible */ /* cw-Horizontal Menu Link Text */ color: #FFF; text-decoration: none; margin: 0; margin-top: 0;/*Do not modify this: overrides global margin settings from within mainContent.css to create default spacing in navigation lists*/ margin-bottom: 0;/*Do not modify this: overrides global margin settings from within mainContent.css to create default spacing in navigation lists*/ white-space: nowrap; font-weight: bold; } /* hover style for all anchors, but particularly for top-level, as children styles are subsequently modified */ #headerTail #menuList a:hover, #headerTail #menuListLG2 a:hover { /* cw-Horizontal Menu Link Text - top level Hover */ color: #FFF; text-decoration: underline; /*nav hover colour, 2 of 2 places, see previous list declaration for first entry*/ /* cw-Horizontal Menu Links Background Hover */ background-color: #E85116; } /* Highlighting the current top-level page anchor. Subsequent declarations revert the effect on children */ #headerTail #menuList ul li.currentPage a, #headerTail #menuListLG2 ul li.currentPage a { background-color: transparent!important;/* do not change: must remain transparent*/ /* cw-MenuHorizontal Current Page Link Text */ color: #000!important;/* to override any futher multi-coloured navigation */ font-weight: bold; } /*============================================================================ ADDITIONAL FOR ULs: SUBMENUS / FLYOUTS ============================================================================*/ /* All ul's containing submenus / flyouts */ #headerTail #menuList ul ul, #headerTail #menuListLG2 ul ul { position: absolute; /* cw-Horizontal Menu Submenu Background */ background-color: #FFFFFF; /*seems like should be a submenu but not*/ width: 15em; left: -9999em;/* hides all submenus until required (upon rollover), using left positioning to hide menus instead of display attribute, because display: none isn't read by screen readers */ /* cw-Horizontal Menu Submenu Borders */ border-color: #695E4B; /*the top border of the submenus*/ border-top-color: #695E4B; border-top-width: 1px; border-top-style: solid; padding: 0; margin: 0 0 0 0;/* -1px left required only to account if there is a 1px border on top-level LI, such as in SampleV4*/ list-style-type: none;/*for all rows subsequent to top row*/ } /* Menus level 3 and beyond */ #headerTail #menuList ul ul ul, #headerTail #menuListLG2 ul ul ul { margin-top: -1.9em;/*positions the top of the flyout menus*/ } /* Hide menus level 3 to 5 until required (upon rollover)*/ #headerTail #menuList li:hover ul ul, #headerTail #menuListLG2 li:hover ul ul, #headerTail #menuList li:hover ul ul ul, #headerTail #menuListLG2 li:hover ul ul ul, #headerTail #menuList li:hover ul ul ul ul, #headerTail #menuListLG2 li:hover ul ul ul ul, #headerTail #menuList li.iehover ul ul, #headerTail #menuListLG2 li.iehover ul ul, #headerTail #menuList li.iehover ul ul ul, #headerTail #menuListLG2 li.iehover ul ul ul, #headerTail #menuList li.iehover ul ul ul ul, #headerTail #menuListLG2 li.iehover ul ul ul ul { left: -9999em;/* using left positioning to hide menus instead of display attribute, because display: none isn't read by screen readers */ } /* Reposition and display menu level 2 upon hover / rollover */ #headerTail #menuList li:hover ul, #headerTail #menuListLG2 li:hover ul, #headerTail #menuList li.iehover ul, #headerTail #menuListLG2 li.iehover ul { left: auto;/* auto places the ul leftmost in the li parent */ } /* Reposition and display menus level 3 to 5 upon hover / rollover */ #headerTail #menuList li li:hover ul, #headerTail #menuListLG2 li li:hover ul, #headerTail #menuList li li li:hover ul, #headerTail #menuListLG2 li li li:hover ul, #headerTail #menuList li li li li:hover ul, #headerTail #menuListLG2 li li li li:hover ul, #headerTail #menuList li li.iehover ul, #headerTail #menuListLG2 li li.iehover ul, #headerTail #menuList li li li.iehover ul, #headerTail #menuListLG2 li li li.iehover ul, #headerTail #menuList li li li li.iehover ul, #headerTail #menuListLG2 li li li li.iehover ul { left: auto; margin-left: 14.5em;/*position how far the menu is placed to the right of its' parent, usually half an em less than the parent width*/ } /*============================================================================ LIST ITEMS ============================================================================*/ /* Cascade to every level of submenu, and target individual list items */ #headerTail #menuList ul ul li, #headerTail #menuListLG2 ul ul li { width: 14.8em;/*.2em is approximating the 2px necessary to shorten the li, as a compensation for the 1px borders on the ul around it. Without this fix, the li pokes out by 2px*/ border-top: none;/* removed so the lines do not double up with the preceeding border-bottom */ padding: 0; margin: 0; /* cw-Horizontal Menu Submenu Items Background */ background-color: #FFFFFF; border-color: #695E4B; border-width: 1px; border-style: solid; border-top: none; font-weight: bold; text-transform: none; line-height: 1.2em; min-height: 24px; } /* Top Level Menu: Background treatment of Top level Submenu item, eg. colours and images */ #headerTail #menuList ul li.submenu, #headerTail #menuListLG2 ul li.submenu { /* 1 of 4 related treatments, also see the following 3 declaration blocks */ /* cw-MenuHorizontal Top Level Submenu Background */ background-image: url(menuBulletArrow.gif); background-position: 100% center; background-repeat: no-repeat; } /* Top Level Menu Current: Background treatment of current item in Top Level Submenu, eg. colours and images */ /* APPLY TO NON IE6 ONLY AS IE6 MISINTERPRETS DOT NOTATION/CHAINED SELECTORS. The following declaration block is ignored by IE6, and we do not give it an alternative */ body>div #headerTail #menuList ul li.submenu.currentPage, body>div #headerTail #menuListLG2 ul li.submenu.currentPage { /* 2 of 4 related treatments, also see the previous 1 and following 2 declaration blocks */ /* cw-MenuHorizontal Top Level Submenu Current Page Background */ background-image: url(menuBulletArrow.gif); background-position: 100% center; background-repeat: no-repeat; } /* Beyond Top Level Menu: Background treatment of submenu items level 2 and beyond, eg. colours and images */ #headerTail #menuList ul li.submenu li.submenu, #headerTail #menuListLG2 ul li.submenu li.submenu { /* 3 of 4 related treatments, also see the previous 2 and following 1 declaration blocks */ /* cw-MenuHorizontal Submenu Background Level 2 and beyond */ background-image: url(menuBulletArrow.gif); background-position: 100% center; background-repeat: no-repeat; } /* Beyond Top Level Current: Background treatment of current item in Submenu beyond top level, eg. colours and images */ /* APPLY TO NON IE6 ONLY AS IE6 MISINTERPRETS DOT NOTATION/CHAINED SELECTORS. The following declaration block is ignored by IE6, and we do not give it an alternative */ body>div #headerTail #menuList ul li.submenu li.submenu.currentPage, body>div #headerTail #menuListLG2 ul li.submenu li.submenu.currentPage { /* highlight the current top level menu item anchor */ /* 4 of 4 related treatments, also see the previous 3 declaration blocks */ /* cw-MenuHorizontal Current Page Background in Submenu beyond top level */ background-image: url(menuBulletArrow.gif); background-position: 100% center; background-repeat: no-repeat; } /* Hover treatment on top level submenu */ #headerTail #menuList ul li.submenu:hover, #headerTail #menuListLG2 ul li.submenu:hover, #headerTail #menuList ul li.submenuiehover, #headerTail #menuListLG2 ul li.submenuiehover { /* cw-MenuHorizontal Top Level Submenu List Background Hover */ background-color: #E85116;/* hover and trailing colour for top level */ background-image: url(menuBulletArrowHover.gif); } /* Hover treatment on submenus beyond top level submenu */ #headerTail #menuList ul ul li.submenu:hover, #headerTail #menuListLG2 ul ul li.submenu:hover, #headerTail #menuList ul ul li.submenuiehover, #headerTail #menuListLG2 ul ul li.submenuiehover { /* cw-MenuHorizontal Beyond Top Level Submenu List Background Hover */ background-color: #E85116!important;/* hover and trailing colour for submenus 2 and beyond */ background-image: url(menuBulletArrowHover.gif); } /* Highlighting the current page beyond the top level menu, via the list item */ #headerTail #menuList ul ul li.currentPage, #headerTail #menuListLG2 ul ul li.currentPage { /* cw-MenuHorizontal Beyond Top Level Current Page List Background */ background-color: transparent; } /* Highlighting the current page hover beyond the top level menu, via the list item */ #headerTail #menuList ul ul li.currentPage:hover, #headerTail #menuListLG2 ul ul li.currentPage:hover { /* cw-MenuHorizontal Beyond Top Level Current Page List Background Hover */ background-color: #E85116; } /*============================================================================ ANCHORS / LINKS ============================================================================*/ /* anchors beyond top level */ #headerTail #menuList ul ul a, #headerTail #menuListLG2 ul ul a { color: #000; } /* Reverting effects on children of the current top level page anchor*/ #headerTail #menuList ul li.currentPage li a, #headerTail #menuListLG2 ul li.currentPage li a { /* cw-Children of MenuHorizontal Current Page Link Text */ color: #FFFFFF; font-weight: bold; } /* Highlighting the current subpage anchor for level 2 and beyond */ #headerTail #menuList ul ul li.currentPage a, #headerTail #menuListLG2 ul ul li.currentPage a { /* cw-MenuHorizontal Current Page Link Text */ color: #FFFFFF; font-weight: bold; } /* Reverting effects on children of current subpage anchor*/ #headerTail #menuList ul ul li.currentPage li a, #headerTail #menuListLG2 ul ul li.currentPage li a { /* cw-Children of MenuHorizontal Submenu Current Page Link Text */ color: #FFFFFF; font-weight: bold; } /* Spacing on submenus items if requiring background arrows / bullets */ #headerTail #menuList ul li.submenu a, #headerTail #menuListLG2 ul li.submenu a { padding-right: 20px; } /* Submenu items */ #headerTail #menuList ul ul a, #headerTail #menuListLG2 ul ul a { white-space: normal;/* allow wrapping of text - only applies to anchors within list items of fixed widths */ padding: 8px 10px; } /* Hover on menu level 2 anchor text */ #headerTail #menuList ul li.submenu ul li a:hover, #headerTail #menuListLG2 ul li.submenu ul li a:hover { text-decoration: underline; /* cw-Horizontal Menu Links Submenu Text Hover */ color: #FFF; } /* On hover, allow potential image to show through Submenu Anchor Background, eg. an arrow */ #headerTail #menuList ul li.submenu:hover a:hover, #headerTail #menuListLG2 ul li.submenu:hover a:hover, #headerTail #menuList ul li.submenuiehover a:hover, #headerTail #menuListLG2 ul li.submenuiehover a:hover { background-color: transparent;/*leave transparent if require arrow image to show at all times. Colour this if want no image. In addition, it will also need to have no trail, so set trail (ctrl-f on trail) of previous declarations to transparent */ } /*============================================================================ SPECIFICS ============================================================================*/ /* Treatment of 'Change Menu Style' anchors */ #headerTail #menuList li#changeMenuStyle a, #headerTail #menuListLG2 li#changeMenuStyle a { background-color: #FFF; color: #FFFFFF; } /* Hover treatment of 'Change Menu Style' anchors */ #headerTail #menuList li#changeMenuStyle a:hover, #headerTail #menuListLG2 li#changeMenuStyle a:hover { text-decoration: underline; } /*============================================================================ Non-Standard Sample Additions ============================================================================*/ /* Hover text colour under current submenu */ #headerTail #menuList ul li.submenu.currentPage li a:hover, #headerTail #menuListLG2 ul li.submenu.currentPage li a:hover { /* cw-MenuHorizontal Current Page Link Text */ color: #FFF!important; }