/* This style sheet is used for the vertical 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 */ #leftContent #leftNavigation #menuList, #leftContent #leftNavigation #menuListLG1 { font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; padding: 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; overflow: visible;/*to allow the flyouts to be seen outside the div*/ margin-left: 0px;/*specific override*/ z-index: 100; } /* remove space in and around all ul's and remove list bullets, general dimensions, spacing and coloring */ #leftContent #leftNavigation #menuList ul, #leftContent #leftNavigation #menuListLG1 ul { width: 200px; float: left; padding: 0; margin: 0; list-style-type: none; border-color: #8CB0F8; border-width: 0px; border-style: solid; border-bottom: none; background-color: #F5F8FE; } /* style all li's, but particularly for top-level, as children styles are subsequently modified */ #leftContent #leftNavigation #menuList li, #leftContent #leftNavigation #menuListLG1 li { float: left; margin: 0; padding: 0; width: 200px;/*subtract any left and right padding and/or border widths*/ height: 38px; /* cw-Vertical Menu Items Background */ background-color: #5C5993; background-image: url(bg_nav.jpg); background-position: 80% center; background-repeat: no-repeat; /* cw-Vertical Menu List Borders */ border-bottom-color: #BEBDD7; border-bottom-width: 1px; border-bottom-style: solid; } /* hover style on all li's, but particularly for top-level, as children styles are subsequently modified */ #leftContent #leftNavigation #menuList li:hover, #leftContent #leftNavigation #menuListLG1 li:hover, #leftContent #leftNavigation #menuList li.iehover, #leftContent #leftNavigation #menuListLG1 li.iehover { /* cw-Vertical 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-Vertical Menu List Item Background Hover */ background-color: #BEBDD7!important;/*important avoids potential conflict multicolour treatments */ background-image: url(bg_nav_current.jpg); background-position: 80% center; background-repeat: no-repeat; } /* Highlighting the current top-level page via the list item (excluding li class of submenu which is styled in subsequent declarations)*/ #leftContent #leftNavigation #menuList ul li.currentPage, #leftContent #leftNavigation #menuListLG1 ul li.currentPage, #leftContent #leftNavigation #menuList ul li.submenu.currentPage, #leftContent #leftNavigation #menuListLG1 ul li.submenu.currentPage { /* cw-VerticalMenu Current Page List Background */ background-color: #8786B5!important;/*important avoids potential conflict multicolour treatments */ /* cw-Vertical Menu Top Level Submenu Current Page Background */ background-image: url(bg_nav_current.jpg); background-position: 80% center; background-repeat: no-repeat; } /* Highlighting the current page hover beyond the top level menu, via the list item */ #leftContent #leftNavigation #menuList ul li.currentPage:hover, #leftContent #leftNavigation #menuListLG1 ul li.currentPage:hover { /* cw-Vertical Menu Beyond Top Level Current Page List Background Hover */ background-color: #BEBDD7; } /* style all anchors, but particularly for top-level, as children styles are subsequently modified */ #leftContent #leftNavigation #menuList a, #leftContent #leftNavigation #menuListLG1 a { display: block;/*needed to get full 'padded' shape*/ padding: 12px 5px 0px 20px;/*space above and to the sides of the anchor words*/ /* cw-Vertical Menu Link Backgrounds */ background-color: transparent;/*keep transparent so that any arrows are visible */ /* cw-Vertical Menu Link Text */ color: #000; 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*/ font-weight: normal;/*default font-weight normal differs from the overall website anchors in page content which may be set to bold*/ width: 175px;/*width obtained by subtracting the width of the anchor's left-and-right padding and any borders, eg. 200px - (5px + 20px)*/ border-bottom: none;/*to override the borders set in MenuText.css*/ height: 26px;/*38px minus y-padding*/ white-space: normal;/* allow wrapping of text - only applies to anchors within list items of fixed widths */ } /* hover style for all anchors, but particularly for top-level, as children styles are subsequently modified */ #leftContent #leftNavigation #menuList a:hover, #leftContent #leftNavigation #menuListLG1 a:hover { /* cw-Vertical Menu Link Text - top level Hover */ color: #FFFFFF; /*nav hover colour, 2 of 2 places, see previous list declaration for first entry*/ text-decoration: none; /* cw-Vertical Menu Links Background Hover */ background-color: transparent; } /* Highlighting the current top-level page anchor. Subsequent declarations revert the effect on children */ #leftContent #leftNavigation #menuList ul li.currentPage a, #leftContent #leftNavigation #menuListLG1 ul li.currentPage a { background-color: transparent!important;/* do not change: must remain transparent*/ /* cw-Vertical Current Page Link Text */ color: #FFFFFF; font-weight: bold; } #leftContent #leftNavigation #menuList ul li.currentPage a:hover { /* cw-Vertical Menu Current Page Link Text Hover */ color: #FFFFFF; } #leftContent #leftNavigation #menuList ul li.currentPage li a:hover { /* cw-Vertical Menu Current Page Flyout Children Link Text Hover */ color: #000000; } /* prevents nested items from compound scaling*/ #leftContent #leftNavigation #menuList p p, #leftContent #leftNavigation #menuList li li, #leftContent #leftNavigation #menuList a li a { font-size: 1em; } /*============================================================================ ADDITIONAL FOR SUBMENUS / FLYOUTS ============================================================================*/ /* Menus level 2 and beyond */ #leftContent #leftNavigation #menuList ul ul, #leftContent #leftNavigation #menuListLG1 ul ul { margin-top: -32px;/*positions the top of the flyout menus*/ border: 1px solid #BEBDD7; position: absolute; left: -9999em; } /* Hide menus level 2 to 5 until required (upon rollover)*/ #leftContent #leftNavigation #menuList li:hover ul, #leftContent #leftNavigation #menuListLG1 li:hover ul, #leftContent #leftNavigation #menuList li:hover ul ul, #leftContent #leftNavigation #menuListLG1 li:hover ul ul, #leftContent #leftNavigation #menuList li:hover ul ul ul, #leftContent #leftNavigation #menuListLG1 li:hover ul ul ul, #leftContent #leftNavigation #menuList li.iehover ul, #leftContent #leftNavigation #menuListLG1 li.iehover ul, #leftContent #leftNavigation #menuList li.iehover ul ul, #leftContent #leftNavigation #menuListLG1 li.iehover ul ul, #leftContent #leftNavigation #menuList li.iehover ul ul ul, #leftContent #leftNavigation #menuListLG1 li.iehover 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 menus level 2 to 5 upon hover / rollover */ #leftContent #leftNavigation #menuList li:hover ul, #leftContent #leftNavigation #menuListLG1 li:hover ul, #leftContent #leftNavigation #menuList li li:hover ul, #leftContent #leftNavigation #menuListLG1 li li:hover ul, #leftContent #leftNavigation #menuList li li li:hover ul, #leftContent #leftNavigation #menuListLG1 li li li:hover ul, #leftContent #leftNavigation #menuList li.iehover ul, #leftContent #leftNavigation #menuListLG1 li.iehover ul, #leftContent #leftNavigation #menuList li li.iehover ul, #leftContent #leftNavigation #menuListLG1 li li.iehover ul, #leftContent #leftNavigation #menuList li li li.iehover ul, #leftContent #leftNavigation #menuListLG1 li li li.iehover ul { left: auto; margin-left: 192px;/*position how far the menu is placed to the right of its' parent, usually half an em less than the parent width*/ } /*============================================================================ SUBMENU LIST ITEMS ============================================================================*/ /* Cascade to every level of submenu, and target individual list items */ #leftContent #leftNavigation #menuList ul li, #leftContent #leftNavigation #menuListLG1 ul li { width: 200px;/*subtract any borders*/ padding: 0; margin: 0; /* cw-Vertical Menu Borders border-color: #D8E4F8; border-width: 1px; border-style: solid; border-top: none; */ } /* Top Level Submenu: Background treatment of Top level Submenu item, eg. colours and images */ #leftContent #leftNavigation #menuList ul li.submenu, #leftContent #leftNavigation #menuListLG1 ul li.submenu { /* 1 of 6 related treatments, also see the following 3 declaration blocks */ /* cw-Vertical Menu Top Level Submenu Background */ background-image: url(bg_nav.jpg); background-position: 100% center; background-repeat: no-repeat; } /* Top Level Submenu 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 #leftContent #leftNavigation #menuList ul li.submenu.currentPage, body>div #leftContent #leftNavigation #menuListLG1 ul li.submenu.currentPage { /* 2 of 6 related treatments, also see the previous 1 and following 4 declaration blocks */ /* cw-Vertical Menu Top Level Submenu Current Page Background */ background-image: url(bg_nav_current.jpg); background-position: 100% center; background-repeat: no-repeat; } /* Beyond Top Level Submenu: Background treatment of submenu items level 2 and beyond, eg. colours and images */ #leftContent #leftNavigation #menuList ul li.submenu li.submenu, #leftContent #leftNavigation #menuListLG1 ul li.submenu li.submenu { /* 3 of 6 related treatments, also see the previous 2 and following 3 declaration blocks */ /* cw-Vertical Menu Submenu Background Level 2 and beyond */ background-image: url(bg_nav.jpg); background-position: 100% center; background-repeat: no-repeat; } /* Beyond Top Level Current Submenu: 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 #leftContent #leftNavigation #menuList ul li.submenu li.submenu.currentPage, body>div #leftContent #leftNavigation #menuListLG1 ul li.submenu li.submenu.currentPage { /* highlight the current top level menu item anchor */ /* 4 of 6 related treatments, also see the previous 3 declaration blocks and following 2 declaration blocks */ /* cw-Vertical Menu Current Page Background in Submenu beyond top level */ background-image: url(bg_nav_current.jpg); background-position: 100% center; background-repeat: no-repeat; } /* Hover treatment on top level submenu */ #leftContent #leftNavigation #menuList ul li.submenu:hover, #leftContent #leftNavigation #menuListLG1 ul li.submenu:hover, #leftContent #leftNavigation #menuList ul li.submenuiehover, #leftContent #leftNavigation #menuListLG1 ul li.submenuiehover { /* 5 of 6 related treatments, also see the previous 4 declaration blocks and following declaration block */ /* cw-Vertical Menu Top Level Submenu List Background Hover */ background-color: #BEBDD7!important;/* hover and trailing colour for submenus 2 and beyond */ background-image: url(bg_nav_current.jpg); background-position: 100% center; background-repeat: no-repeat; } /* Hover treatment on submenus beyond top level submenu */ #leftContent #leftNavigation #menuList ul ul li.submenu:hover, #leftContent #leftNavigation #menuListLG1 ul ul li.submenu:hover, #leftContent #leftNavigation #menuList ul ul li.submenuiehover, #leftContent #leftNavigation #menuListLG1 ul ul li.submenuiehover { /* 5 of 6 related treatments, also see the previous 5 declaration blocks */ /* cw-Vertical Menu Beyond Top Level Submenu List Background Hover */ background-color: #BEBDD7!important;/* hover and trailing colour for submenus 2 and beyond */ background-image: url(bg_nav_current.jpg); background-position: 100% center; background-repeat: no-repeat; } /*============================================================================ SUBMENU ANCHORS / LINKS ============================================================================*/ /* Reverting effects on children of the current page anchor treatment */ #leftContent #leftNavigation #menuList ul li.currentPage li a, #leftContent #leftNavigation #menuListLG1 ul li.currentPage li a { /* cw-Children of Vertical Menu Current Page Link Text */ color: #000000; font-weight: normal; } /* Highlighting the current subpage anchor for level 2 and beyond */ #leftContent #leftNavigation #menuList ul ul li.currentPage a, #leftContent #leftNavigation #menuListLG1 ul ul li.currentPage a { /* cw-Vertical Menu Current Page Link Text */ color: #FFFFFF; font-weight: bold; } /* Reverting effects on children of current subpage anchor treatment*/ #leftContent #leftNavigation #menuList ul ul li.currentPage li a, #leftContent #leftNavigation #menuListLG1 ul ul li.currentPage li a { /* cw-Children of Vertical Menu Submenu Current Page Link Text */ color: #000000; font-weight: normal; } /* Spacing on submenu items if requiring background arrows / bullets */ #leftContent #leftNavigation #menuList ul li.submenu a, #leftContent #leftNavigation #menuListLG1 ul li.submenu a { padding-right: 30px; width: 150px;/* after subtracting left and right borders-and-padding */ } /* Hover on menu level 2 anchor text */ #leftContent #leftNavigation #menuList ul li.submenu ul li a:hover, #leftContent #leftNavigation #menuListLG1 ul li.submenu ul li a:hover { text-decoration: none; /* cw-Vertical Menu Links Submenu Text Hover */ color: #FFFFFF; } /* On hover, allow potential image to show through Submenu Anchor Background, eg. an arrow */ #leftContent #leftNavigation #menuList ul li.submenu:hover a:hover, #leftContent #leftNavigation #menuListLG1 ul li.submenu:hover a:hover, #leftContent #leftNavigation #menuList ul li.submenuiehover a:hover, #leftContent #leftNavigation #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 */ #leftContent #leftNavigation #menuList li#changeMenuStyle a, #leftContent #leftNavigation #menuListLG1 li#changeMenuStyle a { background-color: #BEBDD7; color: #FFFFFF; } /* Hover treatment of 'Change Menu Style' anchors */ #leftContent #leftNavigation #menuList li#changeMenuStyle a:hover, #leftContent #leftNavigation #menuListLG1 li#changeMenuStyle a:hover { text-decoration: none; } /*Conceals the unnecessary horizontal navigation strip, set up in Master.css. There is another of this rule within MenuText.css*/ #headerTail { height: 0em; border: none; background-image: none; } /*makes a dropdown flyout fly up instead*/ li.flyUp ul { margin: 0!important; bottom: 0!important; } /*============================================================================ Non-Standard Sample Additions ============================================================================*/