/***************************************************************************\ | _ _ _ | | /\ \ /\ \ / /\ technikum29.de | | \_\ \ / \ \ / / \ Screendesign der Version 5.7 | | /\__ \ / /\ \ \ / / /\ \ | | / /_ \ \\/_/\ \ \/_/ /\ \ \ Seit Version 5.7 default-css fuer | | / / /\ \ \ / / /\ \ \_\ \ \ die Homepage. screen.css steht | | / / / \/_/ / / / \ \/__\ \ \ jedoch immer noch als gleichwertige | | / / / / / / _ \_____\ \ \ Alternative zur Verfuegung. | | / / / / / /_/\_\ \ \ \ | |/_/ / / /_____/ / \ \ \ Alle "Spezialstyles" fuer einzelne | |\_\/ \________/ \_\/ Inhaltsseiten sind in common.css | | mit dem ehemal. print.css | | zusammengefasst. | | | | $Id:: $ | | | | IE6-Workarounds sind hauptsaechlich in fresh-iefixing.css festgehalten! | \***************************************************************************/ /* ** 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: Extraseitenstyles hinzugefügt. ** ** ** */ /* ** "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 */ 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; } /* ** Table of contents: ** 1. Banner ** 2. General page layout (#wrapper, #page, #menu, #content,...) ** 3. Sidebar (Menu, language link,...) ** 4. Common content ** 5. Footer (Relations, copyright) ** */ /****************************************************************************** ** 1. Banner */ h1 { margin: 0; padding: 0; height: 98px; text-align: center; background-color: #5E7FAD; background-repeat: repeat-x; background-image: url(../img/fresh.design/freshbanner.bg.png); } h1 a { /* Schriftzug als Link zu /[Sprache]/ */ position: absolute; top: 0; left: 50%; margin-left: -438px; /*margin-left: auto; margin-right: auto;*/ display: block; /* background-image: multilangual => h1.[lang] a */ background-position: top center; background-repeat: no-repeat; width: 877px; height: 96px; } h1.de a { /* Deutscher Banner */ background-image: url(../img/banner/big.de.png); } h1.en a { /* English banner */ background-image: url(../img/banner/big.en.png); } h1.int a { /* International banner (Deutsch grosse Schrift, englisch klein drunter) */ background-image: url(../img/banner/int.jpg); } h1.dev a { /* Banner fuer Development-Zone (weil er nun mal hier im Verzeichnis steckt) */ background-image: url(../img/banner/dev.png); } h1.none a { /* Banner with no subtitle in any language */ /* Banner mit ueberhaupt keinem Subtitel */ background-image: url(../img/banner/logo.png); } h1 a span, h1 .old, #h1-subtitle { /* a span: Beschriftung fuer Druck/designlose Darstellung */ /* h1 .old, #h1-subtitle: Legacylast zwecks Kombatibilitaet screen.css */ /* #h1-subtitle hiess frueher #h1border und wird jetzt im printlayout genutzt */ display: none; } /****************************************************************************** ** 2. General Page Layout (#sidebar, #content, #page,...) ** ** An dieser Stelle nur allgemeine grundlegende Bereiche beschreiben, kein ** Design. */ #wrapper { /* Wrapper, der #content und #sidebar umfliesst. Er ist fuer min-width notwendig, damit #sidebar aus dem Bildschirm ver- schwinden kann. Hier wird auch der Hintergrund definiert */ position: relative; min-width: 1000px; /* seit v5.7.1 nur 1000px damit ein 1024px-Bildschirm nicht scrollen braucht */ background-position: top right; background-image: url(../img/fresh.design/menu-bg/binary.png); background-repeat: repeat-y; /*background-attachment: fixed; netter effekt, aber komisch */ } /* NAVIGATIONSLEISTENHINTERGRUENDE ** Die Klasse um #wrapper rum ist einfach die $location-SSI-Variable. ** Wegen IE6 braucht's leider noch einen Wrapper um den #wrapper :/ */ .rundfunk #wrapper, .tontechnik #wrapper { background-image: url(../img/fresh.design/menu-bg/rundfunk.jpg); } .fernsehen #wrapper { background-image: url(../img/fresh.design/menu-bg/fernsehen.jpg); } .messtechnik #wrapper { background-image: url(../img/fresh.design/menu-bg/messtechnik.jpg); } .elektro-mechanik #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 { background-image: url(../img/fresh.design/menu-bg/lochkarte.jpg); } .speichermedien #wrapper { background-image: url(../img/fresh.design/menu-bg/speichermedien.png); } .transistoren #wrapper { background-image: url(../img/fresh.design/menu-bg/transistoren.png); } .fruehe-computer #wrapper { background-image: url(../img/fresh.design/menu-bg/fruehe-computer.png); } .analogrechner #wrapper { background-image: url(../img/fresh.design/menu-bg/analogrechner.png); } .elektronenroehren #wrapper { background-image: url(../img/fresh.design/menu-bg/elektronenroehren.jpg); } /* Es fehlen noch spezielle Hintergründe für: * Faxtechnik * Programmierbare Rechner 2. Generation * 3. Generation mit ICs * Kommerzielle Rechner * Univac */ /* ** Navigationsleistenhingergruende fuer Extraseiten. ** Auch jede Extraseite hat seit v5.8 einen Namen und ist im Seitendesign integriert. **/ .univac-kosten #wrapper { background-image: url(/shared/img/fresh.design/menu-bg/autos.png); } #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; right: 0; top: 98px; width: 210px; padding: 10px 20px 0 0; } #content, .content { /* Allgemeines fuer Inhalt */ /*font-family: "Times New Roman", "Times", serif;*/ font-size: 90%; /* kleinere Schrift für Inhalt, seit v5.7.1 gewünscht*/ /* problematishce Sache. VOrher stand font-size:105% ausgeklammert, d.h. 100% wurde genutzt. Afaik soll sogar ein Schriftwechsler implementiert werden. */ line-height: 125%; /* 1.5em sieht auch nett aus */ } #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: 1100px; height: 1100px; /* IE workaround */ overflow: visible; position: relative; /* für #sidebar-footnote, absolut dazu positiniert */ } html>body #content { height: auto; } .extra #wrapper #content { /* Extraseiten: Keine Mindesthoehe! */ min-height: inherit; height: inherit; } #page, .content { /* Fuer seiten ohne #menu */ /* muss man ggf. noch anders regeln */ margin: 2em; } /****************************************************************************** ** 3. Sidebar: Menue, Languagelink, Footnote */ #sidebar { font-size: 12px; /*background-color: #fafafa; geregelt als img für #wrapper */ font-weight: bold; /* Herihässlich */ } /* Sprachlink */ #lang { /* Link auf englische/deutsche Version, auffällig */ margin: 12px 0 20px 0; } #lang a { 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; } /* Menue */ #menu ul.l1, #menu li { /* Menue Level1, Hauptmenue */ list-style: none; margin: 0; padding: 0; } #menu li { display: inline; } #menu ul ul { margin: 0; padding: 0; } /* Beschreibung aller allgemeinen Links */ #menu a, #menu em { /* a=link, em=Kategorieueberschrift, a.on=hier ist man */ text-decoration: none; display: block; padding: 6px 3px 6px 20px; position: relative; /* fuer absolut positionierbares #menu a span */ } /* Beschreibung der Elemente der Hauptkategorie */ #menu em.l2, #menu li.l1 a:link, #menu li.l1 a:visited, #menu li.l1 a.on { /* die zwei Ueberschriften fuer Hauptunterkategorien & ^--- a.on nur wegen margin-top-dominanz! Ausserdem die Links der Hauptkategorie Achtung: #menu a.on muss das hier teilweise ueberschreiben, siehe weiter unten */ 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 { /* 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) */ } #menu li.l1 a:hover { /* 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; } #menu li.long a:hover, #menu li.long3 a:hover { /* fuer mehrzeilige (lange) Links langer Hintergrund */ /* long3 wird zwar bis jetzt nicht mehr genutzt, aber egal. */ background-image: url(../img/fresh.design/orangebg-long.menu.png); } #menu ul.l2 { /* Erstes Unterkategorielevel Abstand von erstem Link kompensieren um direkten Anschluss an die Ueberschrift zu gewaehrleisten */ /*margin-top: -2px;*/ padding: 7px 0; } #menu li.l2:hover ul.l2, #menu li div.on ul.l2 { /* Unterkategorien gehovert/aktiv - allgemein - Hintergrundfarbe */ /*background-color: #DEE5EE;*/ background-image: url(../img/fresh.design/catl1-bg.menu.png); } #menu ul.l2 a { /* Ein bisschen Abstand fuer normale Links */ margin-top: 1px; margin-bottom: 1px; } /* Besuchte-Seiten-Haeckchen letzendlich voellig entfernt :( #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; } */ #menu ul.l2 a:link span, #menu ul.l2 a:visited span, #menu li.l3 em span { /* Allgemeine Listenpunkte (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; } html>body #menu ul.l2 a:hover span { /* IE darf nicht mitmachen, der positioniert anders */ /* position:absolute geht nach border, und der ist jetzt 1px breit */ top: -1px; left: -1px; } #menu ul.l2 a:focus span { /* Ausblenden bei focus -> da kommt der schwarze grosse Pfeil */ display: none; } /* Beschreibung der Elemente zur 3. Unterkategorie */ #menu li.l3 div { /* Abstand 3. Unterkategorie zu anderen Punkten */ margin: 10px 0; } #menu li.l3 em { /* Ueberschriften der Unterkategorien Level3 */ font-weight: bold; font-style: normal; color: #224B88; /* siehe auch z.317 direkt hier drueber wegen allgemeinen Listenpunkten */ /* -> nein. keine allgemeinen Listenpunkte mehr. Nur noch runtergehende */ } #menu li.l3 ul { /* Unterkategorien Level3 */ 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; } #menu li.l3:hover ul, #menu li.l3 div.on ul { opacity: .99; /* Safari2-Bug: opacity:1 blendet das Ding komplett aus! */ } #menu li.l3 em { background-image: url(../img/fresh.design/catl2-bg.menu.png); } #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; } #menu li.l3 em span, #menu li.l3 div.on em span { /* Icon ist immer runtergefahren */ background-image: url(../img/fresh.design/subarrow.menu.png); background-position: 4px 10px; } #menu a.on, #menu a.on:hover, #menu a:focus, #menu li.l1 a.on, #menu li.l1 a:focus { /* #menu a.on.l1, #menu a.on.l1:hover */ /* 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: inherit !important; 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; } #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: 0; right: -230px; width: 230px; } #sidebar-footnote a { display: block; padding: 1em; text-align: center; } /****************************************************************************** ** 4. Common Content */ 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; } p { text-align: justify; } a:link, a:visited { color: #224B88; text-decoration: underline; } a:hover, a:active, a:focus { color: #882224; text-decoration: underline; } /* Links mit Pfeilen: a.go & a.arrow entweder mit Bildern oder mit »-Dooppelpfeil */ /*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: