/********menu**********/ .menu-round-corner {width:131px; height:4px; background-image:url(../images/home-nav-roundcorner.png); background-repeat:no-repeat; display:block;} /* The menu styling */ .menu {font-family:"Lucida Grande",Tahoma,Arial,Helvetica,sans-serif; font-size:0.8em; height:50px; margin:0; padding:0; z-index:14;list-style-image:none; list-style-position:outside; list-style-type:none; white-space:nowrap; } /*.nav-reflection {background-image:url(../images/nav_reflection.gif); padding:0; margin:0; repeat scroll 0%; width:1000px; height:35px; display:block; }*/ /*aligns the li's to the left - the text*/ .menu li {float:left;} /* 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; z-index:14; } /* 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;z-index:10;} /* Default top link link styling */ .menu li.top a.top_link {display:block; float:left; height:50px; } .menu li.top a span {position:absolute; left:-9999px; top:0; z-index:0; font-size:0.8em;} /* move the link text off screen */ /* pre-load the hover images into the lists */ /* pre-load the hover images into the lists */ .menu li.p1 {width:105px; background:url(../images/navigation/home-btn.gif) no-repeat; background-position:0px -50px; margin:0; } .menu li.p2 {width:123px; background:url(../images/navigation/tickets-btn.gif) no-repeat; background-position:0px -50px; margin:0; } .menu li.p3 {width:122px; background:url(../images/navigation/about-btn.gif) no-repeat; background-position:0px -50px; margin:0; } .menu li.p4 {width:122px; background:url(../images/navigation/hotstuff-btn.gif) no-repeat; background-position:0px -50px; margin:0; } .menu li.p5 {width:123px; background:url(../images/navigation/musicvideo-btn.gif) no-repeat; background-position:0px -50px; margin:0; } .menu li.p6 {width:122px; background:url(../images/navigation/socialize-btn.gif) no-repeat; background-position:0px -50px; margin:0; } .menu li.p7 {width:125px; background:url(../images/navigation/thegossip-btn.gif) no-repeat; background-position:0px -50px; margin:0; } .menu li.p8 {width:127px; background:url(../images/navigation/shop-btn.gif) no-repeat; background-position:0px -50px; margin:0; } /* set up the normal unhovered images in the links */ .menu li a#home{width:105px; background:url(../images/navigation/home-btn.gif) no-repeat; } .menu li a#tickets {width:123px; background:url(../images/navigation/tickets-btn.gif) no-repeat; } .menu li a#about {width:122px; background:url(../images/navigation/about-btn.gif) no-repeat; } .menu li a#hotstuff {width:122px; background:url(../images/navigation/hotstuff-btn.gif) no-repeat; } .menu li a#musicvideo {width:123px; background:url(../images/navigation/musicvideo-btn.gif) no-repeat;} .menu li a#socialize {width:122px; background:url(../images/navigation/socialize-btn.gif) no-repeat;} .menu li a#thegossip {width:125px; background:url(../images/navigation/thegossip-btn.gif) no-repeat;} .menu li a#shop {width:127px; background:url(../images/navigation/shop-btn.gif) no-repeat;} .menu li a#home-on {width:105px; background:url(../images/navigation/home-btn.gif) no-repeat; background-position:0px -50px; } .menu li a#tickets-on {width:123px; background:url(../images/navigation/tickets-btn.gif) no-repeat; background-position:0px -50px; } .menu li a#about-on {width:122px; background:url(../images/navigation/about-btn.gif) no-repeat; background-position:0px -50px; } .menu li a#hotstuff-on {width:122px; background:url(../images/navigation/hotstuff-btn.gif) no-repeat; background-position:0px -50px; } .menu li a#musicvideo-on {width:123px; background:url(../images/navigation/musicvideo-btn.gif) no-repeat; background-position:0px -50px; } .menu li a#socialize-on {width:122px; background:url(../images/navigation/socialize-btn.gif) no-repeat; background-position:0px -50px;} .menu li a#thegossip-on {width:125px; background:url(../images/navigation/thegossip-btn.gif) no-repeat; background-position:0px -50px;} .menu li a#shop-on {width:127px; background:url(../images/navigation/shop-btn.gif) no-repeat; background-position:0px -50px;} /* Style the list OR link hover. Depends on which browser is used */ .menu a:hover {visibility:visible;} /* for IE6 */ .menu li:hover { z-index:14;} /* 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#about, .menu li a#tickets:hover, .menu li:hover a#hotstuff, .menu li a#musicvideo:hover, .menu li a#thegossip:hover, .menu li a#socialize:hover, .menu li:hover a#shop {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 */ /*****positioning of the sub nav drop down is different for IE6. see IE6.css*******/ .menu :hover ul.sub {left:3px; top:48px; margin:0; padding:0 0 10px 0; white-space:nowrap; width:185px; height:auto; overflow:hidden; text-align:left; z-index:14; position:absolute; background-image:url(../images/navigation/nav-bg.gif); background-repeat:repeat-x; background-color:#752468; } .menu :hover ul.sub li {display:block; height:21px; position:relative; margin:0; padding:0; float:left; width:185px; overflow:hidden; } .menu :hover ul.sub li a {width:185px; height:21px; color:#FFF; display:block; float:left; font-family:Arial, Helvetica, sans-serif;font-size:12px; font-weight:bold; line-height:25px; margin:0; padding:0; white-space:nowrap; padding-left:5px; text-decoration:none; } .menu :hover ul.sub li a.fly {background:#fff;} .menu :hover ul.sub li a:hover {background-color:#bc649c; background-image:url(../images/hover.gif); color:#710e62; } .menu :hover ul.sub li a.fly:hover {background:#bc649c; color:#fff;} .menu :hover ul li:hover > a.fly {background:#bc649c; 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 { background-color:#d2232a; white-space:nowrap; width:93px; height:auto; z-index:14;}