/* 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 #menuListLG1 { font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; position: absolute; left:0; bottom: 8px; padding: 0 8px 0; margin: 0; font-size:.9em;/*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 #mainMenuLG1 ul { list-style-type: none; margin: 0 1em 0 0; } /* remove space around all ul's and remove list bullets */ #headerTail #menuList ul, #headerTail #menuListLG1 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 #menuListLG1 li { float:left;/*allows the list items to display horizontally*/ background-color: transparent;/*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: #; border-width: 1px; border-style: solid;*/ margin-left:0; margin-right: 0;/*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; } /* hover style on all li's, but particularly for top-level, as children styles are subsequently modified */ #headerTail #menuList li:hover, #headerTail #menuListLG1 li:hover, #headerTail #menuList li.iehover, #headerTail #menuListLG1 li.iehover { /* cw-Horizontal Menu Links Hover */ color: #FFFFFF; /*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: #FF9900!important;/*important avoids potential conflict multicolour treatments */ background-image: url(bg_nav_level1_hover2.gif); background-position: 0 0; background-repeat: repeat-x; } /* 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 #menuListLG1 ul li.currentPage, #headerTail #menuList ul li.submenu.currentPage, #headerTail #menuListLG1 ul li.submenu.currentPage { /* cw-MenuHorizontal Current Page List Background */ background-color: #0068D2!important;/*important avoids potential conflict multicolour treatments */ background-image: url(bg_nav_level1_current.gif); background-position: 0 0; background-repeat: repeat-x; } /* style all anchors, but particularly for top-level, as children styles are subsequently modified */ #headerTail #menuList a, #headerTail #menuListLG1 a { display: block;/*needed to get full 'padded' shape*/ padding:7px 15px 6px;/*space above and to the sides of the anchor words*/ /* cw-Horizontal Menu Link Backgrounds */ background-color: transparent; /*keep transparent so that the arrows are visible */ /* cw-Horizontal Menu Link Text */ color:#000000; 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*/ } /* hover style for all anchors, but particularly for top-level, as children styles are subsequently modified */ #headerTail #menuList a:hover, #headerTail #menuListLG1 a:hover { /* cw-Horizontal Menu Link Text - top level Hover */ color: #000000; text-decoration: none; /*nav hover colour, 2 of 2 places, see previous list declaration for first entry*/ /* cw-Horizontal Menu Links Background Hover */ background-color: #FF9900; background-image: url(bg_nav_level1_hover2.gif); background-position: 0 0; background-repeat: repeat-x; } /* Highlighting the current top-level page anchor. Subsequent declarations revert the effect on children */ #headerTail #menuList ul li.currentPage a, #headerTail #menuListLG1 ul li.currentPage a { background-color: transparent!important;/* do not change: must remain transparent to allow bgd image to be seen */ /* cw-MenuHorizontal Current Page Link Text */ color: #FFFFFF!important;/* to override any futher multi-coloured navigation */ font-weight: bold; background-image: url(bg_nav_level1_current.gif)!important; } /* revert the background image */ #headerTail #menuList ul li.currentPage li a, #headerTail #menuListLG1 ul li.currentPage li a { background-image: none!important; } /*============================================================================ ADDITIONAL FOR ULs : SUBMENUS / FLYOUTS ============================================================================*/ /* All ul's containing submenus / flyouts */ #headerTail #menuList ul ul, #headerTail #menuListLG1 ul ul { position: absolute; /* cw-Horizontal Menu Submenu Background */ background-color: #FF9900; /*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: #;*/ /*the top border of the submenus border-top-color: #; border-top-width: 1px; border-top-style: solid;*/ padding: 0; margin: 0 0 0 0;/* -1px left required only to account for a border on top-level LI. If no border, set to zero*/ list-style-type: none;/*for all rows subsequent to top row*/ } /* Menus level 3 and beyond */ #headerTail #menuList ul ul ul, #headerTail #menuListLG1 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 #menuListLG1 li:hover ul ul, #headerTail #menuList li:hover ul ul ul, #headerTail #menuListLG1 li:hover ul ul ul, #headerTail #menuList li:hover ul ul ul ul, #headerTail #menuListLG1 li:hover ul ul ul ul, #headerTail #menuList li.iehover ul ul, #headerTail #menuListLG1 li.iehover ul ul, #headerTail #menuList li.iehover ul ul ul, #headerTail #menuListLG1 li.iehover ul ul ul, #headerTail #menuList li.iehover ul ul ul ul, #headerTail #menuListLG1 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 #menuListLG1 li:hover ul, #headerTail #menuList li.iehover ul, #headerTail #menuListLG1 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 #menuListLG1 li li:hover ul, #headerTail #menuList li li li:hover ul, #headerTail #menuListLG1 li li li:hover ul, #headerTail #menuList li li li li:hover ul, #headerTail #menuListLG1 li li li li:hover ul, #headerTail #menuList li li.iehover ul, #headerTail #menuListLG1 li li.iehover ul, #headerTail #menuList li li li.iehover ul, #headerTail #menuListLG1 li li li.iehover ul, #headerTail #menuList li li li li.iehover ul, #headerTail #menuListLG1 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 #menuListLG1 ul ul li { width: 15em;/*If using borders: .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: #0054E3; border-color: #D8E4F8; border-width: 1px; border-style: solid; border-top:none;*/ background-image: url(bg_nav_level1_hover2.gif); background-position: -20px 0; background-repeat: no-repeat; text-transform: none; } /* Top Level Menu: Background treatment of Top level Submenu item, eg. colours and images */ #headerTail #menuList ul li.submenu, #headerTail #menuListLG1 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 */ #headerTail #menuList ul li.submenu.currentPage, #headerTail #menuListLG1 ul li.submenu.currentPage { /* 2 of 4 related treatments, also see the previous 2 and following 1 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 #menuListLG1 ul li.submenu li.submenu { /* 3 of 4 related treatments, also see the previous 1 and following 2 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 Menu: Background treatment of submenu items level 2 and beyond, eg. colours and images */ #headerTail #menuList ul li.submenu li.submenu a, #headerTail #menuListLG1 ul li.submenu li.submenu a { /* x of x related treatments */ background-image: url(bg_nav_level1_hover2.gif); background-position: -20px 0; background-repeat: no-repeat; } /* Beyond Top Level Current: Background treatment of current item in Submenu beyond top level, eg. colours and images */ #headerTail #menuList ul li.submenu li.submenu.currentPage, #headerTail #menuListLG1 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(bg_nav_level1_current.gif)!important; background-position: 0 0; background-repeat: repeat-x; } /* Beyond Top Level Current: Arrow treatment of current item in Submenu beyond top level, eg. colours and images */ #headerTail #menuList ul li.submenu li.submenu.currentPage a.submenu, #headerTail #menuListLG1 ul li.submenu li.submenu.currentPage a.submenu { /* highlight the current top level menu item anchor */ /* x of x related treatments */ background-image: url(menuBulletArrow.gif)!important; background-position: 100% center; background-repeat: no-repeat; } /* Hover treatment on top level submenu */ #headerTail #menuList ul li.submenu:hover, #headerTail #menuListLG1 ul li.submenu:hover, #headerTail #menuList ul li.submenuiehover, #headerTail #menuListLG1 ul li.submenuiehover { /* cw-MenuHorizontal Top Level Submenu List Background Hover */ background-color: #FF9900;/* hover and trailing colour for top level */ background-image: url(bg_nav_level1_hover2.gif); background-position: 0 0; background-repeat: repeat-x; } /* Hover treatment on submenus beyond top level submenu */ #headerTail #menuList ul ul li.submenu:hover, #headerTail #menuListLG1 ul ul li.submenu:hover, #headerTail #menuList ul ul li.submenuiehover, #headerTail #menuListLG1 ul ul li.submenuiehover { /* cw-MenuHorizontal Beyond Top Level Submenu List Background Hover */ background-color: #FF9900;/* hover and trailing colour for submenus 2 and beyond */ background-image: url(bg_nav_level1_hover2.gif); background-position: 0 0; background-repeat: repeat-x; } /* Highlighting the current page beyond the top level menu, via the list item */ #headerTail #menuList ul ul li.currentPage, #headerTail #menuListLG1 ul ul li.currentPage { /* cw-MenuHorizontal Beyond Top Level Current Page List Background */ background: transparent; } /* Highlighting the current page hover beyond the top level menu, via the list item */ #headerTail #menuList ul ul li.currentPage:hover, #headerTail #menuListLG1 ul ul li.currentPage:hover { /* cw-MenuHorizontal Beyond Top Level Current Page List Background Hover */ background: #FF9900; } /*============================================================================ ANCHORS / LINKS ============================================================================*/ /* Reverting effects on children of the current top level page anchor*/ #headerTail #menuList ul li.currentPage li a, #headerTail #menuListLG1 ul li.currentPage li a { /* cw-Children of MenuHorizontal Current Page Link Text */ color: #FFFFFF; font-weight: normal; } /* Highlighting the current subpage anchor for level 2 and beyond */ #headerTail #menuList ul ul li.currentPage a, #headerTail #menuListLG1 ul ul li.currentPage a { /* cw-MenuHorizontal Current Page Link Text */ color: #FFFFFF; font-weight: bold; background-image: none; } /* Reverting effects on children of current subpage anchor*/ #headerTail #menuList ul ul li.currentPage li a, #headerTail #menuListLG1 ul ul li.currentPage li a { /* cw-Children of MenuHorizontal Submenu Current Page Link Text */ color: #FFFFFF; font-weight: normal; } /* Spacing on submenus items if requiring background arrows / bullets */ #headerTail #menuList ul li.submenu a, #headerTail #menuListLG1 ul li.submenu a { padding-right: 20px; } /* Only applies to anchors within list items of fixed widths */ #headerTail #menuList ul ul a, #headerTail #menuListLG1 ul ul a { white-space: normal;/* allow wrapping of text */ } /* Hover on menu level 2 anchor text */ #headerTail #menuList ul li.submenu ul li a:hover, #headerTail #menuListLG1 ul li.submenu ul li a:hover { text-decoration: none; /* cw-Horizontal Menu Links Submenu Text Hover */ color: #000000; } /* On hover, allow potential image to show through Submenu Anchor Background, eg. an arrow */ #headerTail #menuList ul li.submenu:hover a:hover, #headerTail #menuListLG1 ul li.submenu:hover a:hover, #headerTail #menuList ul li.submenuiehover a:hover, #headerTail #menuListLG1 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 #menuListLG1 li#changeMenuStyle a { background-color: #FF9900; color:#FFFFFF; } /* Hover treatment of 'Change Menu Style' anchors */ #headerTail #menuList li#changeMenuStyle a:hover, #headerTail #menuListLG1 li#changeMenuStyle a:hover { text-decoration: none; } /*============================================================================ Non-Standard Sample Additions ============================================================================*/