/***********************************************************************************\ ** ,---.-, ** ** ___ ,----, ' ,' '. technikum29.de ** ** ,--.'|_ .' .' \ / / \ Screendesign der Version 5.8 ** ** | | :,' ,----,' |. ; ,/. : ** ** : : ' : | : . ;' | | : ; Seit Version 5.7 ist fresh.css das ** ** .;__,' / ; |.' / ' | ./ : Standarddesign der Homepage. ** ** | | | `----'/ ; | : , screen.css steht jedoch immer noch ** ** :__,'| : / ; / \ \ | als gleichwertige Alternative zur ** ** ' : |__ ; / /-, `---`--- ; Verfuegung. ** ** | | '.'| / / /.`| | | | ** ** ; : ;./__; : ' : ; "Spezialstyles" fuer einzelne ** ** | , / | : .' | | ' Inhaltsseiten sind in common.css ** ** ---`-' ; | .' ; |.' zusammengefasst. ** ** `---' '---' ** ** Workarounds fuer den IE6 sind haupt- ** ** saechlich in fresh-iefixing.css ** ** This is $Revision:: 13#$ from festgehalten, fuer den IE7 hier. ** ** $Author:: sven $, latest change at ** ** $Date:: 2006-07-22 21:42:37 -0700 (Sat, Jul 2006)$ ** ** ** ** Alle technikum29-CSS sind valide CSS3: http://tinyurl.com/t29-css-valid ** ** ** ************************************************************************************* ** ** ** Changelog seit v5.7 ** ** ** ** v5.7FINAL: eingeführt ** ** v5.7.1: Schriftgröße runtergesetzt, Menü l3 nun ständig angezeigt ** ** v5.7.5: Kosmetische Verbesserungen (Sourcecode), Verallgemeinerungen ** ** für Textabstand zu links floatenden Bildern, Restrukturierung ** ** Navibereich, Transfer von allgemeinen Teilen (bildboxen) zu ** ** common.css, Styleswticher, etc. ** ** v5.7.6: opacity:.99; für Safari2-Bug ** ** v5.7.21: Seitenmindesthöhe vergrößert ** ** v5.8.0: Extraseiten-Hintergründe hinzugefügt. Generalüberholung des ** ** gesamten Stylesheets, Kommentare aufgeräumt, Menünavigation ** ** verschönert (:focus-Effekt jetzt identisch zu :hover). Neuer ** ** Beginn des Stylesheets, Neues Design fuer Sprachlinks ** ** (Registerkartenimitate) ** ** ** ************************************************************************************* ** ** ** Ueber dieses Design ** ** ** ** Dieses Design hat seit der Idee viele Veränderungen durchgemacht. So wundert ** ** wenig, wie ich damals davon gesprochen habe: ** ** ** *** "fresh" -- das klingt nach Freiheit, Frische, Vitalitaet, ein Design, was ** *** alte Zoepfe abschneidet trotzdem aestetisch schoen ist. So oder so aehnlich ** *** war es auch in der ersten Version geplant -- was in dieser hier vorliegenden ** *** Endfassung davon uebrig geblieben ist, haben viele Leute unabhaengig von- ** *** einander auf den Punkt gebracht: Konservativ. Jedes einzige der "frischen" ** *** Elemente wurde in einer zaehen, langen Woche Stueck fuer Stueck entfernt ** *** und durch etwas ersetzt, was in seiner Ganzheit nun von einigen Leuten als ** *** schlichtweg "haesslich", von anderen als "konservativ" und "altbacken" be- ** *** zeichnet wird. Eigentlich trifft nur eins zu: Es trifft vermutl. im Grossen ** *** und ganzen die Vorstellungen des "Kunden", wenn auch jede Hoffnung auf das, ** *** was man von einem "Redesign" erhoffen koennte, weitgehend gestorben ist. ** *** So bleibt nur noch der Name, den ich - entgegen jedem Frust - aus Hoffnung ** *** heraus nicht in "conservative.css" geaendert habe. Denn auch Rueckschritt ** *** kann Frische bringen, und, um mit den Worten der Leute zu schliessen, die ** *** das Design als "neutral" und "nicht schlecht" empfunden haben, es passt doch ** *** zu einem Museum auch ein bisschen. ** *** In diesem Sinne viel Spass beim Lesen eines Stylesheets, was meinem Empfinden ** *** nach fuer ein solches Aussehen ueberpropertional umfangreich ist. ** *** -- Sven, 15.07.2007 23:00 ** ** ** ** ** ************************************************************************************* ** ** ** Table of contents ** ** ** ** Da dieses CSS recht lang ist (dieser aussergewoehnlich lange Kommentar am ** ** Anfang tut dazu sein uebriges), wurde es in verschiedene nummerierte Abschnitte ** ** eingeteilt: (typische tags) ** ** ** ** 1. banner (h1, #h1-subtitle) ** ** 2. general (#wrapper, #page, #sidebar, #footer) ** ** 3. sidebar (#sidebar, #lang) ** ** 4. menu (#menu, #menu ul.l[123].a, #menu li em, ...) ** ** 4. content (h2, p, a, a:hover, a:focus, ul.nav) ** ** 5. footer (#footer, #footer li a, #copyright) ** ** ** \***********************************************************************************/ body { margin: 0; padding: 0; color: #000; background-color: #fff; font-family: Verdana,Tahoma,Helvetica,Arial,sans-serif; /* exiplit keine font-size */ } .hidden { display: none; } img { border: none; } .center { text-align: center; } .left { text-align: left; } .block, .justify { text-align: justify; } .clear { /* clearendes element, inhalt egal */ display: block; clear: both; height: 2px; overflow: hidden; } /***********************************************************************************\ ** _ _ Der Banner besteht aus dem System ** ** /| | | |__ __ _ _ __ _ __ ___ _ __

.morse-telegraph, .hellfax */ .messtechnik #wrapper { background-image: url(../img/fresh.design/menu-bg/messtechnik.jpg); } .elektro-mechanik #wrapper, .sprocket-wheel-machine #wrapper { background-image: url(../img/fresh.design/menu-bg/elektro-mechanik.jpg); } .tabelliermaschine #wrapper { background-image: url(../img/fresh.design/menu-bg/tabelliermaschine.png); } .lochkarten #wrapper, .punchcard-sorter #wrapper, .punchcard-collator #wrapper, .univac-cardreader #wrapper { background-image: url(../img/fresh.design/menu-bg/lochkarte.jpg); } .elektronenroehren #wrapper, .anita #wrapper { background-image: url(../img/fresh.design/menu-bg/elektronenroehren.jpg); } .transistoren #wrapper, .wanderer #wrapper { background-image: url(../img/fresh.design/menu-bg/transistoren.png); } /* .programmierbare -> wang320 */ /* .ic-technik -> wang700 */ /* .kommerzielle -> ncr446, nixdorf820 */ .fruehe-computer #wrapper, .dec-history #wrapper, .lab8e #wrapper, .wang2200 #wrapper, .details2 #wrapper { background-image: url(../img/fresh.design/menu-bg/fruehe-computer.png); } /* .univac -> .univac, .univac-frontpanel, .univac-console, .univac-servo, [.univac-cardreader (we use the punch card image at this place)], .univac-bandcontroller, .univac-discdrives, .univac-highspeed-printer, .univac-board, .univac-9300, .univac-werbung */ .univac-kosten #wrapper { background-image: url(/shared/img/fresh.design/menu-bg/autos.png); } .analogrechner #wrapper { background-image: url(../img/fresh.design/menu-bg/analogrechner.png); } .speichermedien #wrapper { background-image: url(../img/fresh.design/menu-bg/kernspeicher.jpg); /*background-image: url(../img/fresh.design/menu-bg/speichermedien.png);*/ } /* .speichermedien nicht passend fuer -> .threaded-rom, .magnetic-stick-memory, .plated-wire-storage */ #sidebar { /* Rechte Seitenleiste, relativ zum #wrapper */ /* "Navigation rechts" empfinden Manche als "sehr ungewöhnlich". Es gibt allerdings sehr häufig, vor allem in letzter Zeit, rechtsausgerichtete Navigationen, z.B. in sehr, sehr vielen Blog- designs. Wissenschaftliche Studien meinen, es wäre ergonomisch sinnvoller und würde zu schnellerer Navigation auf Webseiten führen, weil der Abstand zu den Scrollleisten nicht so groß ist. Wie dem auch sei, im fresh-Design habe ich bewusst eine rechtsausgerichtete Navigation gewählt, damit die Schrift nicht so an den Rand geklatscht aussieht -- dadurch, dass sie links ausgerichtet ist, entsteht mehr Freiraum. Außerdem ist es ein weiterer Indiz dafür, dass es sich nicht um ein stinknormales langweiliges Layout handelt. */ position: absolute; /* Der Banner ohne Schatten ist 97px lang. */ right: 0; top: 97px; width: 210px; padding: 0 20px 0 0; } #content, .content { /* Allgemeines fuer Inhalt */ /* Wesentlicher Punkt Schriftgroesse: * Urspruenglich 100% (ich wollte eine grosse Schrift) * seit v5.7.1 dann 90% gewuenscht (Heribert hat auf nem 19" TFT mit 1024x768px gearbeitet => scheinbar grosse Schrift) * Zwischenzeitlich stand mal ein Schriftwechsler (a aa AAA) in der Diskussion, wurde aber auch nie umgesetzt * seit 03.01.2009 wieder 100% (Heribert arbeitet seit ein paar Wochen mit 1280x1024 um ein schaerferes Bild zu erhalten) */ font-size: 100%; /* Zeilenhoehe: * war 125% ("1.5em sieht auch nett aus") * seit 03.01.09 marginal groesser (130%) */ line-height: 130%; } #content { /* Inhalt (nur in Zusammenhang mit #menu nutzen!) */ margin-right: 230px; /* #sidebar.width + 2*#sidebar.padding! */ padding: 5%; padding-bottom: 0; /* Kleines Workaround, um keine Riesenabstaende */ margin-bottom: 5%; /* unten zu kriegen, denn margins ueberlagern sich */ min-height: 100em; /* fuer kurze Seiten, jetzt relativ fuer grosse Schriften */ height: 100em; /* IE workaround */ overflow: visible; position: relative; /* für #sidebar-footnote, absolut dazu positiniert */ } .extra #wrapper #content { /* Extraseiten: Keine Mindesthoehe! */ min-height: inherit; height: 50px; /* IE7 bug: inherit geht nicht. */ } html>body #content, html>body .extra #wrapper #content { height: auto; } #page, .content { /* Fuer seiten ohne #menu */ /* muss man ggf. noch anders regeln */ margin: 2em; } /************************************************************************************\ ** _____ _ _ _ In diesem Abschnitt werden Elemente ** ** |___ / ___(_) __| | ___| |__ __ _ _ __ der Sidebar ausgezeichnet, u.a. das ** ** |_ \ / __| |/ _` |/ _ \ '_ \ / _` | '__| Sprachlinksystem sowie die ** ** ___) | \__ \ | (_| | __/ |_) | (_| | | Fussnoten. ** ** |____(_) |___/_|\__,_|\___|_.__/ \__,_|_| Das Menü ist erst Bestandteil von ** ** Punkt 4. ** \************************************************************************************/ #sidebar { /* Fuer Positionsangaben siehe #sidebar weiter oben unter 2.content */ font-size: 12px; /*background-color: #fafafa; geregelt als img für #wrapper */ font-weight: bold; /* Herihässlich */ } /* Sprachlink-Box */ #lang { position: relative; /* fuer absolute Positioniereung drinnen */ height: 41px; } /* Zugängliche ausgeschriebene Kommentare ausblenden */ #lang span { display: none; } /* Sprachlink-Liste, nur der Semantik wegen eine Liste */ #lang ul, #lang li { list-style: none; margin: 0; padding: 0; } /* Sprachlink- sowie Anzeige der jetzigen Sprache: */ #lang a, #lang strong { /* Dimensionen fuer den Link + Schriftformatierung */ display: block; position: absolute; width: 108px; /* Höhe beträgt 41px, aber damit Schrift nicht wegen der 6px (in den Banner geschoben) blöd aussieht, diese 6px in der Box wieder kompensieren: */ height: 35px; /* Eigentlich 41, -6px padding = 35px */ line-height: 35px; text-align: center; background-position: bottom right; background-repeat: no-repeat; } /* englischsprachige(r) Link/Anzeige: */ #lang .en { /* rechts neben dem deutschsprachigen */ left: 102px; } /* Anzeige der jetzigen Sprache: */ #lang strong { /* In den Banner "reinschieben", damit Tab-Aussehen zustande kommt */ top: -6px; left: 0px; z-index: 4; /* ueber

darstellen, also ueber Schatten */ /* Das blaue Bild hat die Höhe 41px, davon sind 6px im Banner. Damit Text auch mittig ist: */ padding-top: 6px; color: white; background-image: url(../img/fresh.design/langbg-on.menu.png); } /* Link auf andere Sprache: */ #lang a { top: 0; left: 0; z-index: 2; /* unter

darstellen, also unter Schatten */ /* Der Sprachlink ist jetzt in einem Azur/Mint-Ton. Der ist völlig neu auf der Homepage, von Heribert aber gewollt, weil "englisch etwas besonderes" sei. */ background-image: url(../img/fresh.design/langbg.menu.png); text-decoration: none; color: black; } /* Geehoverter Link auf andere Sprache: */ #lang a:hover { background-image: url(../img/fresh.design/langbg-hot.menu.png); z-index: 5; /* nach ganz oben. */ } /* #lang a, #lang span { display: block; line-height: 140%; padding: 5px 12px 5px 20px; background-color: #fff; **background-image: url(../img/fresh.design/langbg.menu.png);** text-decoration: none; border: 1px solid #5D7EAB; } #lang a:hover, #lang a:focus { border: 1px outset #5D7EAB; color: #000; background: #f0c194 url(../img/fresh.design/orangebg.menu.png) repeat-x; } */ /* Schriftgroesseneinstellung/Styleswitcher */ #styleswitcher { border: 1px solid #555; background-color: #fff; padding: 5px 20px; text-align: right; } #styleswitcher em { display: block; text-align: center; font-style: normal; } #styleswitcher a.small { float: left; } /* Fussnote fuer die Sidebar*/ #sidebar-footnote { /* Container, der in #content steckt und rechts in der Seitenleiste angeordnet wird und z.B. benutzt werden kann, um auf den Hintergrund einzugehen. */ position: absolute; /* Position relativ zum inneren padding von #content! */ bottom: -20px; right: -230px; width: 230px; } #sidebar-footnote a, #sidebar-footnote p { /* #sidebar-footnote p: Anpassungen fuer counter (testweise ab 11.07.09) */ display: block; padding: 4px 1em; margin: 0; text-align: center; } /***********************************************************************************\ ** _ _ ** ** | || | _ __ ___ ___ _ __ _ _ Das Menue mit allen Submenues, den ** ** | || |_ | '_ ` _ \ / _ \ '_ \| | | | aktiven/inaktiven Seiten und Menues ** ** |__ _| | | | | | | __/ | | | |_| | wird an dieser Stelle ausgezeichnet. ** ** |_|(_) |_| |_| |_|\___|_| |_|\__,_| ** ** ** \***********************************************************************************/ /* Menü level 1 (Hauptmenü) */ #menu ul.l1, #menu li { list-style: none; margin: 0; padding: 0; } #menu li { display: inline; } #menu ul ul { margin: 0; padding: 0; } /* Beschreibung aller allgemeinen Links. Das simple Linkschema lautet: a = echter link em = Kategorienüberschrift a.on = Seite, auf der man ist (kein Link) */ #menu a, #menu em { text-decoration: none; display: block; padding: 6px 3px 6px 20px; position: relative; /* fuer absolut positionierbares #menu a span */ } /*111111111111111111111111111111111111111111111111111111111111111111111111111111111*\ **11 HAUPT_KATEGORIE -- MENU LEVEL 1 11** \*111111111111111111111111111111111111111111111111111111111111111111111111111111111*/ /* Beschreibung der Elemente der Hauptkategorie. Diese umfassen die Überschriften für Unterkategorien (l2), also em.l2, sowie alle Links auf der Ebene der Hauptkategorie (l1), also li.l1 a. li.l1 a.on bzw. #menu a.on wird hier "nur wegen der margin-top-dominanz" aufgelistet bzw. "muss das hier teilweise überschreiben, siehe weiter unten". */ #menu em.l2, #menu li.l1 a:link, #menu li.l1 a:visited, #menu li.l1 a.on { margin-top: 15px !important; /* wird sonst von #menu a:link ueberschrieben */ /*text-align: right;*/ font-weight: bold; font-style: normal; color: #fff; /*#5D7EAB;*/ /*background-color: #5d7eab;*/ background-image: url(../img/fresh.design/headl1-bg.menu.png); /*border: 1px outset #5d7eab; IE machts komisch, also aufgesplittet: */ border-top: 2px solid #d9e0ea; border-left: 2px solid #d9e0ea; border-right: 2px solid #929dad; border-bottom: 2px solid #929dad; } /* Allgemeiner Orange-Hover-Effekt (muss unter li.l1 a stehen) */ #menu a:hover, #menu li.l1 a:hover, #menu a:focus, #menu li.l1 a:focus, #menu li.l1 a:active { /* alle gehoverten Links */ background-color: #F0C494; /*#f0d994*/ background-image: url(../img/fresh.design/orangebg.menu.png); background-repeat: repeat-x; color: #000; border: 1px outset #ffbf00; padding: 5px 2px 5px 19px; /* um den 1px border zu kompensieren (gegen ruckeln) */ } /* Für Links aus der Hauptkategorie: */ #menu li.l1 a:hover, #menu li.l1 a:focus { /* Um 1px Rahmen wieder zu ueberschreiben */ border-width: 2px; /* und um 2px-Kompensation zu überschreiben, da sich rahmenbreite nicht ändert */ padding: 6px 3px 6px 20px; } /* Für mehrzeilige (lange) Links: */ #menu li.long a:hover, #menu li.long3 a:hover, #menu li.long3 a:focus { /* (in der Höhe) langer Hintergrund: */ background-image: url(../img/fresh.design/orangebg-long.menu.png); } /*222222222222222222222222222222222222222222222222222222222222222222222222222222222*\ **22 UNTER_KATEGORIE -- MENU LEVEL 2 22** \*222222222222222222222222222222222222222222222222222222222222222222222222222222222*/ /* Hauptunterkategorie bzw. erstes Unterkategorienlevel bzw. "level 2": */ #menu ul.l2 { /* Abstand von erstem Link kompensieren um direkten Anschluss an die Ueberschrift zu gewaehrleisten */ /*margin-top: -2px;*/ padding: 7px 0; } /* Gehoverte und/oder aktive (=da ist man) Hauptunterkategorie: */ #menu li.l2:hover ul.l2, #menu li div.on ul.l2 { /* Hintergrundfarbe (halbtransparent): */ /*background-color: #DEE5EE;*/ background-image: url(../img/fresh.design/catl1-bg.menu.png); } /* Links in der ersten Hauptunterkategorie (Links vom "level 2"): */ #menu ul.l2 a { /* Mehr Abstand oben und unten: */ margin-top: 1px; margin-bottom: 1px; } /* "Besuchte-Seiten-Haeckchen" -- einfaches, aber mächtiges Feature, war leider nicht gewollt. */ /* #menu ul.l2 a:visited span { * Link-Span fuer Haeckchen fuer bereits besuchte Seiten anzeigen nutzen * right: 0; width: 18px; height: 26px; background-image: url(../img/fresh.design/visitedbg.menu.png); } #menu ul.l2 li.long a:visited span, #menu ul.l2 li.long3 a:visited span { height: 42px; } */ /* Erzeugung der allgemeinen Listenpfeilchen aller Links in Level 2 und 3: */ #menu ul.l2 a:link span, #menu ul.l2 a:visited span, #menu li.l3 em span { /* kleine blaue Pfeile: */ display: block; position: absolute; top: 0; left: 0; width: 20px; height: 20px; overflow: hidden; /* wegen  -Inhalt */ background-image: url(../img/fresh.design/arrowbg.menu.png); background-repeat: no-repeat; background-position: 6px 7px; } /* Gehoverte Links: Position der Listenpfeilchen */ html>body #menu ul.l2 a:hover span, html>body #menu ul.l2 a:focus span { /* position:absolute geht nach border, und der ist jetzt 1px breit. Also muss die Position beim Hovern korrigiert werden. Der IE sieht das anders, für ihn also nicht korrigieren. */ top: -1px; left: -1px; } /* nicht mehr Pfeil, also stehen lassen. *//* #menu ul.l2 a:focus span { ** Ausblenden bei focus -> da kommt der schwarze grosse Pfeil ** display: none; }*/ /*333333333333333333333333333333333333333333333333333333333333333333333333333333333*\ **33 UNTER_UNTER_KATEGORIE -- MENU LEVEL 3 33** \*333333333333333333333333333333333333333333333333333333333333333333333333333333333*/ /* Beschreibung der Elemente zur UnterUnterkategorie (level 3): */ #menu li.l3 div { /* Abstand der 3. Unterkategorie zu anderen Punkten: */ margin: 10px 0; } /* Überschriften der UnterUnterkategorie (level 3): */ #menu li.l3 em { font-weight: bold; font-style: normal; color: #224B88; background-image: url(../img/fresh.design/catl2-bg.menu.png); } /* Gehoverte oder aktive (=da ist man) Überschrift der UnterUnterkategorie (level 3)*/ #menu li.l3:hover em, #menu li.l3 div.on em { /* Ueberschrift der Unterkategorien Level3 -- gehovert oder aktiv */ /*border-bottom: 1px solid #d4d4d4;*/ /* Border ruckelt -- wozu zum Teufel border? */ background-image: url(../img/fresh.design/headl2-bg.menu.png); color: #000; } /* Erzeugung der Runterpfeilchen für Überschriften des level 3: */ #menu li.l3 em span, #menu li.l3 div.on em span { /* Siehe Erzeugung der allgemeinen Listenpfeilchen -- diese Eigenschaften werden hier geerbt. */ /* Icon ist immer runtergefahren */ background-image: url(../img/fresh.design/subarrow.menu.png); background-position: 4px 10px; } /* Beschreibung des Blocks der UnterUnterkategorie (level 3): */ #menu li.l3 ul { display: block; /*margin-top: -2px;*/ padding: 5px 0 5px 10px; background-image: url(../img/fresh.design/catl2-bg.menu.png); /*background-color: #BACEEC;*/ /*border-left: 5px solid #d4d4d4;*/ opacity: 0.7; } /* Gehoverter oder aktiver (=da ist man) Block der UnterUnterkategorie (level 3): */ #menu li.l3:hover ul, #menu li.l3 div.on ul { /* Beim hovern komplett darstellen. */ opacity: .99; /* 99% = Workaround um Safari2-Bug: opacity:1 blendet das Ding komplett aus! */ } /*<=<=<=<=<=<=<=<=<=<=<=<=<=<=<=<=<=<=<=<=<=<=<=<==<=<=<=<=<=<=<=<=<=<=<=<=<=<=<=<=*\ **=> SCHWARZE PFEILE BEI AKTIVEN SEITEN <=** \*=>=>=>=>=>=>=>=>=>=>=>=>=>=>=>=>=>=>=>=>=>=>=>=>=>=>=>=>=>=>=>=>=>=>=>=>=>=>=>=>=*/ /* hier entfernt: #menu a:focus, #menu li.l1 a:focus, bei Focus nicht Pfeil anzeigen (wegen unterschiedlichen Höhen!) sondern bei dem orangen bg bleiben. */ #menu a.on, #menu a.on:hover, #menu li.l1 a.on { /* Formatierung des Dings, wo man gerade ist */ /* Dort soll ein schwarzer Pfeil links raushaengen */ background-image: url(../img/fresh.design/blackarrow.menu.png); background-position: left center; background-repeat: no-repeat; color: #000; margin-left: -12px; padding: 6px 5px 6px 31px; /* gegen :hover-Ueberschreibung */ font-weight: bold; height: 19px; /* gegen allgemeines #menu a:hover */ background-color: transparent !important; /* IE7 bug: inherit geht nicht. */ border: none !important; } #menu li.long a.on, #menu li.long a.on:hover { /*, #menu li.long a:focus {*/ /* Zweizeilige oder dreizeilige Elemente */ background-image: url(../img/fresh.design/blackarrow-long.menu.png); height: 32px; /* ggf. :focus-Teil entfernen, der laesst den Pfeil bereits */ /* vor dem Laden der neuen Seite erscheinen */ } #menu li.long3 a.on, #menu li.long3 a.on:hover { /*, #menu li.long3 a:focus { */ /* Dreizeilige Elemente */ background-image: url(../img/fresh.design/blackarrow-long3.menu.png); height: 48px; } /***********************************************************************************\ ** ____ _ _ Alle Auszeichnungen, die den Inhalt ** ** | ___| ___ ___ _ __ | |_ ___ _ __ | |_ (#content, #page oder .content) ** ** |___ \ / __/ _ \| '_ \| __/ _ \ '_ \| __ betreffen und (nur) dort gelten, ** ** ___) | (_| (_) | | | | || __/ | | | |_ werden in dem folgenden Bereich ** ** |____(_)___\___/|_| |_|\__\___|_| |_|\__| notiert. ** ** ** \***********************************************************************************/ h2, html>body #page h2 { font-weight: bold; font-size: 160%; line-height: 125%; /* wird sonst relativ zu falscher schriftgroesse vererbt */ margin: 0 0 0.7em 0; padding: 0; } #content h2 { /* Seit 04.01.2010: Neues Ueberschriftenlayout. Soll aber nur auf Homepage genutzt werden, nicht etwa auf dev. oder so...! */ font-weight: normal; font-family: Trebuchet Ms; font-size: 180%; border-bottom: 3px double #aaa; } #content h3 { /* Und das gleiche auch fuer Unter-Ueberschriften */ font-weight: normal; font-family: Trebuchet Ms; font-size: 140%; border-bottom: 3px double #aaa; } p { text-align: justify; } a:link, a:visited { color: #224B88; text-decoration: underline; } a:hover, a:active, a:focus { color: #882224; text-decoration: underline; } /*>> >> >> >> >> >> >> >> >> >> >> >> >> >> >> >> >> >> >> >> >> >> >> >> >> >> >> *\ **>> DOPPEL-PFEILCHEN BEI LINKS UND LISTEN <<** **>> a.go & a.arrow <<** \* << << << << << << << << << << << << << << << << << << << << << << << << << << <<*/ /* Alternative Form, Bilder sehen aber schöner aus: */ /*a.arrow:before, a.go:before { content: "»"; text-decoration: none; padding-right: 0.5em; font-weight: bold; }*/ html>body a.arrow, html>body a.go { background-position: center left; background-repeat: no-repeat; padding-left: 13px; } html>body a.arrow:link, html>body a.arrow:visited, html>body a.go:link, html>body a.go:visited { background-image: url(../img/fresh.design/arrowbg.a.png); } html>body a.arrow:hover, html>body a.arrow:active, html>body a.arrow:focus, html>body a.go:hover, html>body a.go:active, html>body a.go:focus { background-image: url(../img/fresh.design/arrowbg-hot.a.png); } html>body #content ul { /* Allgemeine Listen: Listenzeichen Dreieck */ list-style-image: url(../img/fresh.design/arrowbg.menu.png); /* transparentes PNG => IE bitte nicht. */ } /* Navigationslisten:
    /