/* Allgemeine Auzeichnungen */ * { padding:0; margin:0; list-style:none; } body { font:normal 100.01% arial, sans-serif; color:#000; margin:20px; background:#ddd; } /* sorgt fuer die Ränder und Hintergrundfarbe des gesamten Navigationsmenues */ div#menue { border-left: 1px solid #fff; border-right:1px solid #777; border-bottom:1px solid #777; background:#eef; padding:0; font:normal 0.9em arial, sans-serif; /* die Breitenangabe in em laesst bei Textvergrößerungen mitskalieren */ width:10em; } /* blendet Trennzeichen und "Standort:" aus: */ span.unsichtbar { position:absolute; left:-1000px; top:-1000px; width:0; height:0; overflow:hidden; display:inline; } /* gestaltet die Ueberschrift */ h2 { font: bold 1em arial, sans-serif; color:#222; background:#ccf; padding:3px 12px; border-top: 1px solid #fff; border-bottom:1px solid #777; } #menue li { /* gibt allen Links der ersten Ebene einen Abstand: */ margin:7px 0 0; border-top: 2px solid #99f; border-bottom: 1px solid #fff; } /* Kontextselektor fuer die Listeneintraege ab der zweiten Ebene: */ #menue li li { /* verhindert Linien oben fuer Eintraege ab der 2. Ebene: */ border:0; /* verhindert Abstaende fuer die Links ab der zweiten Ebene: */ margin:0; /* verhindert unerwuenschte Abstaende im IE: */ display:inline; } #menue li a { display:block; color: #000; padding: 1px 5px 3px 10px; /* Linien erzeugen in Zusammenspiel mit den Raendern des Navigationsmenues einen Schaltflaecheneffekt: */ border:1px solid #eef; border-top: 1px solid #fff; border-bottom: 1px solid #aaf; border-left:0; background:#eef; } /* uebernimmt die notwendigen Formatierungen der Links fuer die aufgerufene Seite und erweitert sie, unter anderem um ein Hintergrundbild: */ #menue strong { display:block; color: #fff; padding: 2px 5px 3px 10px; background: #006; border-right: 1px solid #fff; border-top: 1px solid #808000; border-bottom: 1px solid #ddf; border-left: 2px solid #bbb; } #menue strong dfn { color: #eef; } /* sorgt fuer Einzuege und Hoehe der Links und der aufgerufenen Seite in der zweiten Ebene: */ #menue li li a, #menue li li a:hover, #menue li li strong { padding-left:20px; } #menue a:visited { color:#444; /* bereits besuchte Links erhalten rechts ein zusaetzliches, sich nicht wiederholendes Hintergrundbild und eine dickere Randlinie in der Hintergrundfarbe: */ background:#eef url(butvis.gif) top right no-repeat; } /* Drucktasteneffekt beim Überfahren mit der Maus: */ #menue a:hover { color:#000; padding: 2px 5px 2px 10px; border-top: 1px solid #bbb; /* Bei lokalen Darstellungen bleibt ein Hover-Effekt erhalten: */ border-right: 7px solid #fff; border-bottom: 1px solid #ddf; border-left: 1px solid #99f; background: #fff; text-decoration:none; } /* stärkere Kontraste beim Antabben: */ #menue a:focus, #menue a:active { color:#ff0; font-weight:bold; border-top: 1px solid #ff0; border-right: 7px solid #ff0; border-bottom: 1px solid #000; border-left: 1px solid #000; background: #33a; } /* formatiert die Ordnungszahlen: */ #menue dfn { font: bold 0.7em tahoma, sans-serif; color:#00c; margin-right:3px; } #menue a:focus dfn, #menue a:active dfn { color:#ff0; } /* selbe Farbe wie der Link bei angezeigten Seiten: */ #menue strong dfn { color: #fff; }