/* $Header: /var/cvsroot2svn/blumen.tchibo.de/src/templates/css/navigation.css,v 1.10 2010-04-01 15:58:28 florian Exp $ */ /* navigation_de.css */ /* --- mainnav = ReiterNavigation --- */ /* Haupt-Element UL - final positioniert */ .mainnav { position: absolute; margin: 0; padding: 0; left: 146px; top: 84px; width: 671px; height: 45px; list-style: none; z-index: 5; } /* Standardbreite der LI usw. */ .mainnav li { height: 45px; position: absolute; top: 0; z-index: 3; } /* A-Tag per Default einen Abstand nach oben - 14px zur LI */ .mainnav li a { display: block; height: 31px; margin: 14px 0 0 0; } /* Linktexte ausblenden - im Quelltext beibehalten - ggfs. Relevant fuer Suchmaschinen */ .mainnav li a em { display: none; } /* Ausgangspositionierung der Hintergrundgrafik der LIs sowie der A-Tag A-Tags sind zunaechst immer 14px nach verschoben, beim Mouseover immer 53px */ .n1 { left: 11px; width: 115px; background-position: 0 0; } .n1 a { background-position: 0 -14px; } .n1 a:hover { background-position: 0 -59px; } .n2 { left: 126px; width: 77px; background-position: -115px 0; } .n2 a { background-position: -115px -14px; } .n2 a:hover { background-position: -115px -59px; } .n3 { left: 202px; width: 73px; background-position: -191px 0; } .n3 a { background-position: -191px -14px; } .n3 a:hover { background-position: -191px -59px; } .n4 { left: 274px; width: 52px; background-position: -263px 0; } .n4 a { background-position: -263px -14px; } .n4 a:hover { background-position: -263px -59px; } .n5 { left: 325px; width: 62px; background-position: -314px 0; } .n5 a { background-position: -314px -14px; } .n5 a:hover { background-position: -314px -59px; } .n6 { left: 386px; width: 94px; background-position: -375px 0; } .n6 a { background-position: -375px -14px; } .n6 a:hover, .n6 a.hoverclass { background-position: -375px -59px; } .n7 { left: 479px; width: 66px; background-position: -468px 0; } .n7 a { background-position: -468px -14px; } .n7 a:hover, .n7 a.hoverclass { background-position: -468px -59px; } .n8 { left: 544px; width: 56px; background-position: -533px 0; } .n8 a { background-position: -533px -14px; width: 55px; } .n8 a:hover { background-position: -533px -59px; } /* .n9 { left: 599px; width: 96px; background-position: -588px 0; } .n9 a { background-position: -588px -14px; width: 96px; } .n9 a:hover { background-position: -588px -59px; } */ /* nav1 aktiv */ #nav1 .n1 { height: 45px; width: 139px; top: 0px; left: 11px; } /* A-Tag der ersten Liste benoetigt weniger Platz als die LI selbst - daher margin-left von 25px und abweichende Position der Hintergrundgrafik */ #nav1 .n1 a { margin: 0 0 0 0; height: 45px; background-position: -25px 116px !important; } #nav1 .n1 a:hover { margin: 0 0 0 0px; height: 45px; background-position: 0 0px !important; } #nav1 .n2 { left: 150px; width: 77px; background-position: -139px 0!important; } #nav1 .n2 a { background-position: -139px -14px!important; } #nav1 .n2 a:hover { background-position: -139px -59px!important; } #nav1 .n3 { left: 227px; width: 72px; background-position: -191px 0; } #nav1 .n3 a { background-position: -191px -14px; } #nav1 .n3 a:hover { background-position: -191px -59px; } #nav1 .n4 { left: 299px; width: 52px; background-position: -263px 0; } #nav1 .n4 a { background-position: -263px -14px; } #nav1 .n4 a:hover { background-position: -263px -59px; } #nav1 .n5 { left: 350px; width: 62px; background-position: -314px 0; } #nav1 .n5 a { background-position: -314px -14px; } #nav1 .n5 a:hover { background-position: -314px -59px; } #nav1 .n6 { left: 411px; width: 94px; background-position: -375px 0; } #nav1 .n6 a { background-position: -375px -14px; } #nav1 .n6 a:hover, .n6 a.hoverclass { background-position: -375px -59px; } #nav1 .n7 { left: 504px; width: 66px; background-position: -468px 0; } #nav1 .n7 a { background-position: -468px -14px; } #nav1 .n7 a:hover, .n7 a.hoverclass { background-position: -468px -59px; } #nav1 .n8 { left: 569px; width: 56px; background-position: -533px 0; } #nav1 .n8 a { background-position: -533px -14px; width: 55px; } #nav1 .n8 a:hover { background-position: -533px -59px; } /* #nav1 .n9 { left: 624px; width: 76px; background-position: -588px 0; } #nav1 .n9 a { background-position: -588px -14px; width: 87px; } #nav1 .n9 a:hover { background-position: -588px -59px; } */ /* nav2 aktiv */ #nav2 .n1 { width: 113px; left: 10px; background-position: 0px 0px!important; } #nav2 .n1 a { background-position: 0px -14px!important; } #nav2 .n1 a:hover { background-position: 0px -59px!important; } #nav2 .n2 { top: 0px; left: 123px; width: 105px; background-position: -113px 0!important; } #nav2 .n2 a { margin: 0; height: 45px; background-position: 124px 0!important; } #nav2 .n3 { width: 78px; left: 228px; background-position: -218px 0!important; } #nav2 .n3 a { background-position: -218px -14px!important; } #nav2 .n3 a:hover { background-position: -218px -59px!important; } #nav2 .n4 { left: 299px; width: 52px; background-position: -263px 0; } #nav2 .n4 a { background-position: -263px -14px; } #nav2 .n4 a:hover { background-position: -263px -59px; } #nav2 .n5 { left: 350px; width: 62px; background-position: -314px 0; } #nav2 .n5 a { background-position: -314px -14px; } #nav2 .n5 a:hover { background-position: -314px -59px; } #nav2 .n6 { left: 411px; width: 94px; background-position: -375px 0; } #nav2 .n6 a { background-position: -375px -14px; } #nav2 .n6 a:hover, .n6 a.hoverclass { background-position: -375px -59px; } #nav2 .n7 { left: 504px; width: 66px; background-position: -468px 0; } #nav2 .n7 a { background-position: -468px -14px; } #nav2 .n7 a:hover, .n7 a.hoverclass { background-position: -468px -59px; } #nav2 .n8 { left: 569px; width: 56px; background-position: -533px 0; } #nav2 .n8 a { background-position: -533px -14px; width: 55px; } #nav2 .n8 a:hover { background-position: -533px -59px; } /* #nav2 .n9 { left: 624px; width: 76px; background-position: -588px 0; } #nav2 .n9 a { background-position: -588px -14px; width: 87px; } #nav2 .n9 a:hover { background-position: -588px -59px; } */ /* nav3 aktiv */ #nav3 .n2 { left: 125px; width: 77px; background-position: 0px 0px!important; } #nav3 .n2 a { background-position: 0 -14px!important; } #nav3 .n2 a:hover { background-position: 0 -59px!important; } #nav3 .n3 { width: 100px; left: 202px; background-position: -77px 0!important; } #nav3 .n3 a { margin: 0; height: 45px; background-position: -77px 0!important; } #nav3 .n4 { width: 52px; left: 299px; background-position: -174px 0!important; } #nav3 .n4 a { background-position: -174px -14px!important; } #nav3 .n4 a:hover { background-position: -174px -59px!important; } #nav3 .n5 { left: 350px; width: 62px; background-position: -314px 0; } #nav3 .n5 a { background-position: -314px -14px; } #nav3 .n5 a:hover { background-position: -314px -59px; } #nav3 .n6 { left: 411px; width: 94px; background-position: -375px 0; } #nav3 .n6 a { background-position: -375px -14px; } #nav3 .n6 a:hover, .n6 a.hoverclass { background-position: -375px -59px; } #nav3 .n7 { left: 504px; width: 66px; background-position: -468px 0; } #nav3 .n7 a { background-position: -468px -14px; } #nav3 .n7 a:hover, .n7 a.hoverclass { background-position: -468px -59px; } #nav3 .n8 { left: 569px; width: 56px; background-position: -533px 0; } #nav3 .n8 a { background-position: -533px -14px; width: 55px; } #nav3 .n8 a:hover { background-position: -533px -59px; } /* #nav3 .n9 { left: 624px; width: 76px; background-position: -588px 0; } #nav3 .n9 a { background-position: -588px -14px; width: 87px; } #nav3 .n9 a:hover { background-position: -588px -59px; } */ /* nav4 */ #nav4 .n3 { left: 202px; width: 71px; background-position: 0px 0px!important; } #nav4 .n3 a { background-position: 0 -14px!important; } #nav4 .n3 a:hover { background-position: 0 -59px!important; } #nav4 .n4 { width: 77px; left: 273px; background-position: -71px 0!important; } #nav4 .n4 a { margin: 0; height: 39px; background-position: -71px 0!important; } #nav4 .n5 { width: 61px; left: 350px; background-position: -148px 0!important; } #nav4 .n5 a { background-position: -148px -14px!important; } #nav4 .n5 a:hover { background-position: -148px -59px!important; } #nav4 .n6 { left: 411px; width: 94px; background-position: -375px 0; } #nav4 .n6 a { background-position: -375px -14px; } #nav4 .n6 a:hover, .n6 a.hoverclass { background-position: -375px -59px; } #nav4 .n7 { left: 504px; width: 66px; background-position: -468px 0; } #nav4 .n7 a { background-position: -468px -14px; } #nav4 .n7 a:hover, .n7 a.hoverclass { background-position: -468px -59px; } #nav4 .n8 { left: 569px; width: 56px; background-position: -533px 0; } #nav4 .n8 a { background-position: -533px -14px; width: 55px; } #nav4 .n8 a:hover { background-position: -533px -59px; } /* #nav4 .n9 { left: 624px; width: 76px; background-position: -588px 0; } #nav4 .n9 a { background-position: -588px -14px; width: 87px; } #nav4 .n9 a:hover { background-position: -588px -59px; } */ /* nav5 */ #nav5 .n4 { width: 50px; left: 274px; background-position: 0px 0px!important; } #nav5 .n4 a { background-position: 0px -14px!important; } #nav5 .n4 a:hover { background-position: 0px -59px!important; } #nav5 .n5 { width: 87px; left: 324px; background-position: -50px 0!important; } #nav5 .n5 a { margin: 0; height: 39px; background-position: -50px 0!important; } #nav5 .n6 { width: 93px; left: 411px; background-position: 100px 0px!important; } #nav5 .n6 a { background-position: -137px -14px!important; } #nav5 .n6 a:hover { background-position: -137px -59px!important; } #nav5 .n7 { left: 504px; width: 66px; background-position: -468px 0; } #nav5 .n7 a { background-position: -468px -14px; } #nav5 .n7 a:hover, .n7 a.hoverclass { background-position: -468px -59px; } #nav5 .n8 { left: 569px; width: 56px; background-position: -533px 0; } #nav5 .n8 a { background-position: -533px -14px; width: 55px; } #nav5 .n8 a:hover { background-position: -533px -59px; } /* #nav5 .n9 { left: 624px; width: 76px; background-position: -588px 0; } #nav5 .n9 a { background-position: -588px -14px; width: 87px; } #nav5 .n9 a:hover { background-position: -588px -59px; } */ /* nav6 */ #nav6 .n4 { left: 274px; width: 51px; background-position: -263px 0px!important; } #nav6 .n4 a { background-position: -263px -14px!important; } #nav6 .n4 a:hover { background-position: -263px -59px!important; } #nav6 .n5 { left: 325px; width: 60px; background-position: 0px 0px!important; } #nav6 .n5 a { background-position: 0px -14px!important; } #nav6 .n5 a:hover { background-position: 0px -59px!important; } #nav6 .n6 { width: 119px; left: 385px; background-position: -60px 0!important; } #nav6 .n6 a { margin: 0; height: 39px; background-position: -60px 0px!important; } #nav6 .n7 { left: 504px; width: 65px; background-position: -179px 0!important; } #nav6 .n7 a { background-position: -179px -14px!important; } #nav6 .n7 a:hover { background-position: -179px -59px!important; } #nav6 .n8 { left: 569px; width: 56px; background-position: -533px 0; } #nav6 .n8 a { background-position: -533px -14px; width: 55px; } #nav6 .n8 a:hover { background-position: -533px -59px; } /* #nav6 .n9 { left: 624px; width: 76px; background-position: -588px 0; } #nav6 .n9 a { background-position: -588px -14px; width: 87px; } #nav6 .n9 a:hover { background-position: -588px -59px; } */ /* nav7 */ #nav7 .n4 { width: 51px; left: 274px; } #nav7 .n5 { left: 325px; width: 61px;} #nav7 .n6 { left: 386px; width: 92px; background-position: 0 0px!important;} #nav7 .n6 a { background-position: 0 -14px!important; } #nav7 .n6 a:hover { background-position: 0 -59px!important; } #nav7 .n7 { width: 91px; left: 478px; background-position: -92px 0!important; } #nav7 .n7 a { width: 91px; background-position: -93px -14px!important; } #nav7 .n8 { left: 569px; width: 56px; background-position: -183px 0!important; } #nav7 .n8 a { background-position: -183px -14px!important; } #nav7 .n8 a:hover { background-position: -183px -59px!important; } /* #nav7 .n9 { left: 624px; width: 76px; background-position: -588px 0; } #nav7 .n9 a { background-position: -588px -14px; width: 87px; } #nav7 .n9 a:hover { background-position: -588px -59px; } */ /* nav8 aktiv */ #nav8 .n4 { left: 274px; width: 51px; } #nav8 .n5 { width: 61px; left: 325px; } #nav8 .n6 { width: 93px; left: 386px; } #nav8 .n7 { width: 64px; left: 479px; background-position: 0 23px!important; } #nav8 .n7 a { background-position: 0 -14px!important; } #nav8 .n7 a:hover { background-position: 0 -59px!important; } #nav8 .n8 { left: 543px; width: 82px; background-position: -64px 23px!important; } #nav8 .n8 a { width: 82px; background-position: -64px -59px!important; } /* #nav8 .n9 { left: 624px; width: 87px; background-position: -145px 23px!important;} #nav8 .n9 a { background-position: -145px -14px!important;} #nav8 .n9 a:hover { background-position: -145px -59px!important; } */ /* nav 9 aktiv */ #nav9 .n4 { left: 274px; } #nav9 .n5 { left: 325px; } #nav9 .n6 { left: 386px; } #nav9 .n7 { left: 479px; } #nav9 .n8 { left: 544px; width: 54px; height: 45px; background-position: 0px 0px!important; } #nav9 .n8 a { background-position: 0px -14px!important; } #nav9 .n8 a:hover { background-position: 0px -59px!important; } /* #nav9 .n9 { left: 598px; width: 107px; background-position: -54px 0px!important; } #nav9 .n9 a { background-position: -54px -14px!important; width:115px; } */ /* ENDE ReiterNavi */ /**********************************/ /* ReiterNavi Hintergrund */ /* navi_x.jpg x = aktiver Reiter */ /**********************************/ .mainnav li, .mainnav li a { background-image: url(img/nav/navigation.gif); background-repeat: no-repeat; } .selNav { background: transparent url(img/nav/navi_8.gif) 0 0 no-repeat!important; }