/* @override http://kenny.mess-marketing.com/assets/scripts/css/menu.css */ /* JC NAV HERE ------- */ /* ================================================================ This copyright notice must be kept untouched in the stylesheet at all times. The original version of this stylesheet and the associated (x)html is available at http://www.cssplay.co.uk/menus/pro_drop.html Copyright (c) 2005-2007 Stu Nicholls. All rights reserved. This stylesheet and the associated (x)html may be modified in any way to fit your requirements. =================================================================== */ #multi-level {padding-top: 1px; height:30px; position:relative; z-index:100; margin-left: 78px;} #multi-level .pad {float:left;} /* The menu styling */ /* Remove the padding, margins and bullets from the lists */ .menu, .menu ul {list-style-type:none; padding:0; margin:0; font-family:arial, sans-serif;} /* Set up the top level list items and float left to place inline */ .menu li.top {display:block; float:left; position:relative;} /* Style and position the table so it takes no part in the menu function. The font size is necessary for IE5.5 */ .menu table {border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0;} /* Default top link link styling */ .menu li.top a.top_link {display:block; float:left; height:35px;} .menu li.top a span {position:absolute; left:-9999px; top:0; z-index:0; font-size:10px;} /* move the link text off screen */ /* pre-load the hover images into the lists */ .menu li.p1 {width:53px; background:url(../../../images/navigation/home_on.gif) no-repeat; border-right: 1px solid #303030;} .menu li.p2 {width:66px; background:url(../../../images/navigation/safety_on.gif) no-repeat; border-right: 1px solid #303030;} .menu li.p3 {width:101px; background:url(../../../images/navigation/about_on.gif) no-repeat; border-right: 1px solid #303030;} .menu li.p4 {width:86px; background:url(../../../images/navigation/portfolio_on.gif) no-repeat; border-right: 1px solid #303030;} .menu li.p5 {width:70px; background:url(../../../images/navigation/groups_on.gif) no-repeat; border-right: 1px solid #303030;} .menu li.p6 {width:75px; background:url(../../../images/navigation/careers_on.gif) no-repeat; border-right: 1px solid #303030;} .menu li.p7 {width:137px; background:url(../../../images/navigation/markets_on.gif) no-repeat; border-right: 1px solid #303030;} .menu li.p8 {width:92px; background:url(../../../images/navigation/contact_on.gif) no-repeat;} /* set up the normal unhovered images in the links */ .menu li a#home {width:53px; background:url(../../../images/navigation/home_off.gif) no-repeat; border-right: 1px solid #303030;} .menu li a#safety {width:66px; background:url(../../../images/navigation/safety_off.gif) no-repeat; border-right: 1px solid #303030;} .menu li a#about {width:101px; background:url(../../../images/navigation/about_off.gif) no-repeat; border-right: 1px solid #303030;} .menu li a#portfolio1 {width:86px; background:url(../../../images/navigation/portfolio_off.gif) no-repeat; border-right: 1px solid #303030;} .menu li a#groups {width:70px; background:url(../../../images/navigation/groups_off.gif) no-repeat; border-right: 1px solid #303030;} .menu li a#careers {width:75px; background:url(../../../images/navigation/careers_off.gif) no-repeat; border-right: 1px solid #303030;} .menu li a#markets {width:137px; background:url(../../../images/navigation/markets_off.gif) no-repeat; border-right: 1px solid #303030;} .menu li a#contact {width:92px; background:url(../../../images/navigation/contact_off.gif) no-repeat;} /* pre-load the hover images into the lists */ html>body .menu li.p1 {width:53px; background:url(../../../images/navigation/home_on.gif) no-repeat; border-right: 2px solid #303030;} html>body .menu li.p2 {width:66px; background:url(../../../images/navigation/safety_on.gif) no-repeat; border-right: 2px solid #303030;} html>body .menu li.p3 {width:101px; background:url(../../../images/navigation/about_on.gif) no-repeat; border-right: 2px solid #303030;} html>body .menu li.p4 {width:86px; background:url(../../../images/navigation/portfolio_on.gif) no-repeat; border-right: 2px solid #303030;} html>body .menu li.p5 {width:70px; background:url(../../../images/navigation/groups_on.gif) no-repeat; border-right: 2px solid #303030;} html>body .menu li.p6 {width:75px; background:url(../../../images/navigation/careers_on.gif) no-repeat; border-right: 2px solid #303030;} html>body .menu li.p7 {width:137px; background:url(../../../images/navigation/markets_on.gif) no-repeat; border-right: 2px solid #303030;} html>body .menu li.p8 {width:92px; background:url(../../../images/navigation/contact_on.gif) no-repeat;} /* set up the normal unhovered images in the links */ html>body .menu li a#home {width:53px; background:url(../../../images/navigation/home_off.gif) no-repeat; border-right: 2px solid #303030;} html>body .menu li a#safety {width:66px; background:url(../../../images/navigation/safety_off.gif) no-repeat; border-right: 2px solid #303030;} html>body .menu li a#about {width:101px; background:url(../../../images/navigation/about_off.gif) no-repeat; border-right: 2px solid #303030;} html>body .menu li a#portfolio1 {width:86px; background:url(../../../images/navigation/portfolio_off.gif) no-repeat; border-right: 2px solid #303030;} html>body .menu li a#groups {width:70px; background:url(../../../images/navigation/groups_off.gif) no-repeat; border-right: 2px solid #303030;} html>body .menu li a#careers {width:75px; background:url(../../../images/navigation/careers_off.gif) no-repeat; border-right: 2px solid #303030;} html>body .menu li a#markets {width:137px; background:url(../../../images/navigation/markets_off.gif) no-repeat; border-right: 2px solid #303030;} html>body .menu li a#contact {width:92px; background:url(../../../images/navigation/contact_off.gif) no-repeat;} /* NEW ADDITIONS 2.8.08 ///////////////////////////////////////*/ /* ACTIVE STANDARDS*/ html>body .menu li.p3 #active {width:101px; background:url(../../../images/navigation/about_on.gif) no-repeat; border-right: 2px solid #303030;} html>body .menu li.p2 #active {width:66px; background:url(../../../images/navigation/safety_on.gif) no-repeat; border-right: 2px solid #303030;} html>body .menu li.p4 #active {width:86px; background:url(../../../images/navigation/portfolio_on.gif) no-repeat; border-right: 2px solid #303030;} html>body .menu li.p5 #active {width:70px; background:url(../../../images/navigation/groups_on.gif) no-repeat; border-right: 2px solid #303030;} html>body .menu li.p6 #active {width:75px; background:url(../../../images/navigation/careers_on.gif) no-repeat; border-right: 2px solid #303030;} html>body .menu li.p7 #active {width:137px; background:url(../../../images/navigation/markets_on.gif) no-repeat; border-right: 2px solid #303030;} html>body .menu li.p8 #active {width:92px; background:url(../../../images/navigation/contact_on.gif) no-repeat;} /* ACTIVE IE */ .menu li.p2 #active {width:66px; background:url(../../../images/navigation/safety_on.gif) no-repeat; border-right: 1px solid #303030;} .menu li.p3 #active {width:101px; background:url(../../../images/navigation/about_on.gif) no-repeat; border-right: 1px solid #303030;} .menu li.p4 #active {width:86px; background:url(../../../images/navigation/portfolio_on.gif) no-repeat; border-right: 1px solid #303030;} .menu li.p5 #active {width:70px; background:url(../../../images/navigation/groups_on.gif) no-repeat; border-right: 1px solid #303030;} .menu li.p6 #active {width:75px; background:url(../../../images/navigation/careers_on.gif) no-repeat; border-right: 1px solid #303030;} .menu li.p7 #active {width:137px; background:url(../../../images/navigation/markets_on.gif) no-repeat; border-right: 1px solid #303030;} .menu li.p8 #active {width:92px; background:url(../../../images/navigation/contact_on.gif) no-repeat;} /* END NEW ADDITIONS 2.8.08 ///////////////////////////////////////*/ /* Style the list OR link hover. Depends on which browser is used */ .menu a:hover {visibility:visible;} /* for IE6 */ .menu li:hover { position:relative; z-index:200;} /* for IE7 */ /* make the links transparent on hover so that the hover images in the lists show through (no flicker) */ .menu li a#home:hover, .menu li:hover a#home, .menu li a#safety:hover, .menu li:hover a#safety, .menu li a#about:hover, .menu li:hover a#about, .menu li a#portfolio1:hover, .menu li:hover a#portfolio, .menu li a#groups:hover, .menu li:hover a#groups, .menu li a#careers:hover, .menu li:hover a#careers, .menu li a#markets:hover, .menu li:hover a#markets, .menu li a#contact:hover, .menu li:hover #contact /* maybe for sub-nav transparency fixme ? ? */ .menu li a#privacy:hover, .menu li:hover a#privacy {background:transparent;} /* keep the 'next' level invisible by placing it off screen. */ .menu ul, .menu :hover ul ul, .menu :hover ul :hover ul ul, .menu :hover ul :hover ul :hover ul ul, .menu :hover ul :hover ul :hover ul :hover ul ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0;} /* set up the first drop down sub level */ /* top: below is a spacer below menubar for sub-nav */ .menu :hover ul.sub {left:0; top:30px; background:url(../../../images/navigation/subNav_bg.gif); padding:3px 0; border:0px solid #888; white-space:nowrap; width:170px; height:auto;} .menu :hover ul.sub li {background:url(../../../images/navigation/sub_bg_off.gif); display:block; height:22px; position:relative; float:left; width:170px;} .menu :hover ul.sub li a {background:url(../../../images/navigation/sub_bg_off.gif); display:block; font-size:11px; height:22px; width:170px; line-height:20px; text-indent:2px; color:#fff; text-decoration:none; border:0px solid #fff; border-width:0 0 0 0px;} .menu :hover ul.sub li a.fly {background:url(../../../images/navigation/subNav_bg.gif) 90px 4px no-repeat;} .menu :hover ul.sub li a:hover {background:url(../../../images/navigation/sub_bg_on.gif); color:#fff;} .menu :hover ul.sub li a.fly:hover {background:url(../../../images/navigation/sub_bg_on.gif) 90px 4px no-repeat; color:#fff;} .menu :hover ul li:hover > a.fly {background:url(../../../images/navigation/sub_bg_on.gif) 90px 4px no-repeat; color:#fff;} /* set up the flyout levels when hovering */ .menu :hover ul :hover ul, .menu :hover ul :hover ul :hover ul, .menu :hover ul :hover ul :hover ul :hover ul, .menu :hover ul :hover ul :hover ul :hover ul :hover ul {left:90px; top:0px; background:url(../../../images/navigation/subNav_bg.gif); padding:1px 0; border:0px solid #888; white-space:nowrap; width:170px; z-index:200; height:auto; z-index:300; background-repeat: no-repeat;} /* set up the first drop down sub level */ /* top: below is a spacer below menubar for sub-nav */ html>body .menu :hover ul.sub {left:0; top:30px; background:url(../../../images/navigation/subNav_bg.gif); padding:3px 0; border:0px solid #888; white-space:nowrap; width:190px; height:auto;} html>body .menu :hover ul.sub li {background:url(../../../images/navigation/sub_bg_off.gif); display:block; height:22px; position:relative; float:left; width:190px;} html>body .menu :hover ul.sub li a {background:url(../../../images/navigation/sub_bg_off.gif); display:block; font-size:11px; height:22px; width:190px; line-height:20px; text-indent:2px; color:#fff; text-decoration:none; border:0px solid #fff; border-width:0 0 0 0px;} /* set up the flyout levels when hovering */ html>body .menu :hover ul :hover ul, html>body .menu :hover ul :hover ul :hover ul, html>body .menu :hover ul :hover ul :hover ul :hover ul, html>body .menu :hover ul :hover ul :hover ul :hover ul :hover ul {left:90px; top:0px; background:url(../../../images/navigation/subNav_bg.gif); padding:1px 0; border:0px solid #888; white-space:nowrap; width:190px; z-index:200; height:auto; z-index:300; background-repeat: no-repeat;} /* END JC NAV -------- */