source: t29-www/shared/css/fresh.css @ 86

Last change on this file since 86 was 86, checked in by sven, 15 years ago

Telefunken T40W:

  • Bilddateien in eigenes Verzeichnis verschoben
  • Slider um Automatik-Play-Modus erweitert

Heribert hat zwar schon nen Text geschrieben, den ich aber
versehentlich ueberschrieben habe. Der kommt also morgen.

-- Sven @ t29

  • Property svn:keywords set to
    Id
    Revision
    Author
    Date
File size: 36.0 KB
Line 
1/***********************************************************************************\
2**                             ,---.-,                                             **
3**     ___          ,----,    '   ,'  '.    technikum29.de                         **
4**   ,--.'|_      .'   .' \  /   /      \   Screendesign der Version 5.8           **
5**   |  | :,'   ,----,'    |.   ;  ,/.  :                                          **
6**   :  : ' :   |    :  .  ;'   |  | :  ;   Seit Version 5.7 ist fresh.css das     **
7** .;__,'  /    ;    |.'  / '   |  ./   :   Standarddesign der Homepage.           **
8** |  |   |     `----'/  ;  |   :       ,   screen.css steht jedoch immer noch     **
9** :__,'| :       /  ;  /    \   \      |   als gleichwertige Alternative zur      **
10**   '  : |__    ;  /  /-,    `---`---  ;   Verfuegung.                            **
11**   |  | '.'|  /  /  /.`|       |   |  |                                          **
12**   ;  :    ;./__;      :       '   :  ;   "Spezialstyles" fuer einzelne          **
13**   |  ,   / |   :    .'        |   |  '   Inhaltsseiten sind in common.css       **
14**    ---`-'  ;   | .'           ;   |.'    zusammengefasst.                       **
15**            `---'              '---'                                             **
16**                                          Workarounds fuer den IE6 sind haupt-   **
17**                                          saechlich in fresh-iefixing.css        **
18** This is $Revision:: 86 $ from            festgehalten, fuer den IE7 hier.       **
19** $Author:: sven    $, latest change at                                           **
20** $Date:: 2006-07-22 21:42:37 -0700 (Sat, Jul 2006)$                              **
21**                                                                                 **
22**    Alle technikum29-CSS sind valide CSS3: http://tinyurl.com/t29-css-valid      **
23**                                                                                 **
24*************************************************************************************
25**                                                                                 **
26** Changelog seit v5.7                                                             **
27**                                                                                 **
28**   v5.7FINAL: eingeführt                                                         **
29**   v5.7.1:    Schriftgröße runtergesetzt, Menü l3 nun ständig angezeigt          **
30**   v5.7.5:    Kosmetische Verbesserungen (Sourcecode), Verallgemeinerungen       **
31**              für Textabstand zu links floatenden Bildern, Restrukturierung      **
32**              Navibereich, Transfer von allgemeinen Teilen (bildboxen) zu        **
33**              common.css, Styleswticher, etc.                                    **
34**   v5.7.6:    opacity:.99; für Safari2-Bug                                       **
35**   v5.7.21:   Seitenmindesthöhe vergrößert                                       **
36**   v5.8.0:    Extraseiten-Hintergründe hinzugefügt. Generalüberholung des        **
37**              gesamten Stylesheets, Kommentare aufgeräumt, Menünavigation        **
38**              verschönert (:focus-Effekt jetzt identisch zu :hover). Neuer       **
39**              Beginn des Stylesheets, Neues Design fuer Sprachlinks              **
40**              (Registerkartenimitate)                                            **
41**                                                                                 **
42*************************************************************************************
43**                                                                                 **
44** Ueber dieses Design                                                             **
45**                                                                                 **
46** Dieses Design hat seit der Idee viele Veränderungen durchgemacht. So wundert    **
47** wenig, wie ich damals davon gesprochen habe:                                    **
48**                                                                                 **
49*** "fresh" -- das klingt nach Freiheit, Frische, Vitalitaet, ein Design, was      **
50*** alte Zoepfe abschneidet trotzdem aestetisch schoen ist. So oder so aehnlich    **
51*** war es auch in der ersten Version geplant -- was in dieser hier vorliegenden   **
52*** Endfassung davon uebrig geblieben ist, haben viele Leute unabhaengig von-      **
53*** einander auf den Punkt gebracht: Konservativ. Jedes einzige der "frischen"     **
54*** Elemente wurde in einer zaehen, langen Woche Stueck fuer Stueck entfernt       **
55*** und durch etwas ersetzt, was in seiner Ganzheit nun von einigen Leuten als     **
56*** schlichtweg "haesslich", von anderen als "konservativ" und "altbacken" be-     **
57*** zeichnet wird. Eigentlich trifft nur eins zu: Es trifft vermutl. im Grossen    **
58*** und ganzen die Vorstellungen des "Kunden", wenn auch jede Hoffnung auf das,    **
59*** was man von einem "Redesign" erhoffen koennte, weitgehend gestorben ist.       **
60*** So bleibt nur noch der Name, den ich - entgegen jedem Frust - aus Hoffnung     **
61*** heraus nicht in "conservative.css" geaendert habe. Denn auch Rueckschritt      **
62*** kann Frische bringen, und, um mit den Worten der Leute zu schliessen, die      **
63*** das Design als "neutral" und "nicht schlecht" empfunden haben, es passt doch   **
64*** zu einem Museum auch ein bisschen.                                             **
65*** In diesem Sinne viel Spass beim Lesen eines Stylesheets, was meinem Empfinden  **
66*** nach fuer ein solches Aussehen ueberpropertional umfangreich ist.              **
67***  -- Sven, 15.07.2007 23:00                                                     **
68**                                                                                 **
69**                                                                                 **
70*************************************************************************************
71**                                                                                 **
72** Table of contents                                                               **
73**                                                                                 **
74** Da dieses CSS recht lang ist (dieser aussergewoehnlich lange Kommentar am       **
75** Anfang tut dazu sein uebriges), wurde es in verschiedene nummerierte Abschnitte **
76** eingeteilt:              (typische tags)                                        **
77**                                                                                 **
78**   1. banner              (h1, #h1-subtitle)                                     **
79**   2. general             (#wrapper, #page, #sidebar, #footer)                   **
80**   3. sidebar             (#sidebar, #lang)                                      **
81**   4. menu                (#menu, #menu ul.l[123].a, #menu li em, ...)           **
82**   4. content             (h2, p, a, a:hover, a:focus, ul.nav)                   **
83**   5. footer              (#footer, #footer li a, #copyright)                    **
84**                                                                                 **
85\***********************************************************************************/
86
87body {
88    margin: 0; padding: 0;
89    color: #000; background-color: #fff;
90    font-family: Verdana,Tahoma,Helvetica,Arial,sans-serif;
91    /* exiplit keine font-size */
92}
93
94.hidden { display: none; }
95img     { border: none; }
96.center { text-align: center; }
97.left   { text-align: left; }
98.block, .justify  { text-align: justify; }
99.clear  { /* clearendes element, inhalt egal */
100          display: block; clear: both;
101          height: 2px; overflow: hidden; }
102
103
104/***********************************************************************************\
105**   _     _                                   Der Banner besteht aus dem System   **
106** /| |   | |__   __ _ _ __  _ __   ___ _ __    <h1><a class="[lang]" href="...>   **
107**  | |   | '_ \ / _` | '_ \| '_ \ / _ \ '__|    <span>technikum29</span></a></h1> **
108**  | |_  | |_) | (_| | | | | | | |  __/ |     und ggf. weiteren Elementen wie     **
109**  |_(_) |_.__/ \__,_|_| |_|_| |_|\___|_|     einem Folgenden #subtitle.          **
110**                                             [lang] besteht aus (de,en,dev,none) **
111\***********************************************************************************/
112
113h1 {
114    margin: 0; padding: 0;
115    height: 110px; /* vor schattenversuch: 98px */
116    text-align: center;
117    /*background-color: #5E7FAD;*/ /* war gesetzt vor schattenversuch */
118    /* Schatten (seit v5.8):
119       Der reale Banner ist nur 96px hoch, px 97 bis 110 sind transparent auslaufender
120       Schatten. Per Z-Index koennen Elemente (siehe Sprachlink) mit diesem Schatten
121       arbeiten.
122    */
123    background-repeat: repeat-x;
124    background-image: url(../img/fresh.design/freshbanner-shaded.bg.png);
125    position: relative; /* fuer z-index */
126    /* IE6 und 7 haben einen z-index-Bug, der das Layout unmoeglich macht.
127       z-index bei h1 nicht setzen is eine Kompromissloesung */
128}
129
130/* CSS-Hack: Alle modernen Browser ausser IE7 */
131html>/**/body h1 { z-index: 3; }
132
133
134h1 a {
135    /* Schriftzug als Link zu /[Sprache]/ */
136    position: absolute;
137    top: 0;
138    left: 50%;
139    margin-left: -438px;
140    /*margin-left: auto;
141    margin-right: auto;*/
142    display: block;
143
144    /* background-image: multilangual => h1.[lang] a */
145    background-position: top center;
146    background-repeat: no-repeat;
147    width: 877px;
148    height: 96px;
149}
150
151h1.de a {
152    /* Deutscher Banner */
153    background-image: url(../img/banner/big.de.png);
154}
155
156h1.en a {
157    /* English banner */
158    background-image: url(../img/banner/big.en.png);
159}
160
161h1.int a {
162    /* International banner (Deutsch grosse Schrift, englisch klein drunter) */
163    background-image: url(../img/banner/int.jpg);
164}
165
166h1.dev a {
167    /* Banner fuer Development-Zone (weil er nun mal hier im Verzeichnis steckt) */
168    background-image: url(../img/banner/dev.png);
169}
170
171h1.none a {
172    /* Banner with no subtitle in any language */
173    /* Banner mit ueberhaupt keinem Subtitel */
174    background-image: url(../img/banner/logo.png);
175}
176
177h1 a span, h1 .old, #h1-subtitle {
178    /* a span: Beschriftung fuer Druck/designlose Darstellung */
179    /* h1 .old, #h1-subtitle: Legacylast zwecks Kombatibilitaet screen.css */
180    /* #h1-subtitle hiess frueher #h1border und wird jetzt im printlayout genutzt */
181    display: none;
182}
183
184/***********************************************************************************\
185**  ____                                      _   Das General Page Layout um-      **
186** |___ \      __ _  ___ _ __   ___ _ __ __ _| |  schliesst #sidebar, #content,    **
187**   __) |    / _` |/ _ \ '_ \ / _ \ '__/ _` | |  #page, ..., also allgemeine      **
188**  / __/ _  | (_| |  __/ | | |  __/ | | (_| | |  grundlegende Seitenbereiche, die **
189** |_____(_)  \__, |\___|_| |_|\___|_|  \__,_|_|  positioniert werden. Hier werden **
190**            |___/                               auch Navigationsleistenhinter-   **
191**                                                gruende definiert.               **
192\***********************************************************************************/
193
194#wrapper {
195    /* Wrapper, der #content und #sidebar umfliesst. Er ist fuer
196       min-width notwendig, damit #sidebar aus dem Bildschirm ver-
197       schwinden kann. Hier wird auch der Hintergrund definiert */
198    position: relative;
199    min-width: 1000px; /* seit v5.7.1 nur 1000px damit ein 1024px-Bildschirm nicht scrollen braucht */
200
201    background-position: top right;
202    background-image: url(../img/fresh.design/menu-bg/binary.png);
203    background-repeat: repeat-y;
204    /*background-attachment: fixed; netter effekt, aber komisch */
205}
206
207/* NAVIGATIONSLEISTENHINTERGRUENDE
208** Die Klasse um #wrapper rum ist einfach die $location-SSI-Variable.
209** Wegen IE6 braucht's leider noch einen Wrapper um den #wrapper :/
210*/
211
212/*
213** Eine Uebersicht ueber die existierenden und noch nicht existierenden
214** Menu-Bg-Grafiken erhaelt man auf
215** http://technikum29.de/shared/img/fresh.design/menu-bg/
216**/
217.rundfunk #wrapper, .tontechnik #wrapper, .ultramar #wrapper, .telefunken650 #wrapper,
218.schaub-lorenz-supraphon #wrapper, .telefunkent40w #wrapper
219    { background-image: url(../img/fresh.design/menu-bg/rundfunk.jpg); }
220.fernsehen #wrapper, .saba-telerama #wrapper
221    { background-image: url(../img/fresh.design/menu-bg/fernsehen.jpg); }
222/*
223.faxtechnik -> .morse-telegraph, .hellfax
224*/
225.messtechnik #wrapper
226    { background-image: url(../img/fresh.design/menu-bg/messtechnik.jpg); }
227.elektro-mechanik #wrapper, .sprocket-wheel-machine #wrapper
228    { background-image: url(../img/fresh.design/menu-bg/elektro-mechanik.jpg); }
229.tabelliermaschine #wrapper
230    { background-image: url(../img/fresh.design/menu-bg/tabelliermaschine.png); }
231.lochkarten #wrapper, .punchcard-sorter #wrapper, .punchcard-collator #wrapper,
232.univac-cardreader #wrapper
233    { background-image: url(../img/fresh.design/menu-bg/lochkarte.jpg); }
234.elektronenroehren #wrapper, .anita #wrapper
235    { background-image: url(../img/fresh.design/menu-bg/elektronenroehren.jpg); }
236.transistoren #wrapper, .wanderer #wrapper
237    { background-image: url(../img/fresh.design/menu-bg/transistoren.png); }
238/*
239.programmierbare -> wang320
240*/
241/*
242.ic-technik -> wang700
243*/
244/*
245.kommerzielle -> ncr446, nixdorf820
246*/
247.fruehe-computer #wrapper, .dec-history #wrapper, .lab8e #wrapper, .wang2200 #wrapper,
248.details2 #wrapper
249    { background-image: url(../img/fresh.design/menu-bg/fruehe-computer.png); }
250/*
251.univac -> .univac, .univac-frontpanel, .univac-console, .univac-servo,
252          [.univac-cardreader (we use the punch card image at this place)],
253           .univac-bandcontroller, .univac-discdrives, .univac-highspeed-printer,
254           .univac-board, .univac-9300, .univac-werbung
255*/
256.univac-kosten #wrapper
257    { background-image: url(/shared/img/fresh.design/menu-bg/autos.png); }
258
259.analogrechner #wrapper
260    { background-image: url(../img/fresh.design/menu-bg/analogrechner.png); }
261.speichermedien #wrapper
262    { background-image: url(../img/fresh.design/menu-bg/kernspeicher.jpg);
263    /*background-image: url(../img/fresh.design/menu-bg/speichermedien.png);*/ }
264/* .speichermedien nicht passend fuer -> .threaded-rom, .magnetic-stick-memory,
265                                         .plated-wire-storage
266*/
267
268
269#sidebar {
270    /* Rechte Seitenleiste, relativ zum #wrapper */
271    /* "Navigation rechts" empfinden Manche als "sehr ungewöhnlich". Es gibt allerdings sehr häufig,
272       vor allem in letzter Zeit, rechtsausgerichtete Navigationen, z.B. in sehr, sehr vielen Blog-
273       designs. Wissenschaftliche Studien meinen, es wäre ergonomisch sinnvoller und würde zu
274       schnellerer Navigation auf Webseiten führen, weil der Abstand zu den Scrollleisten nicht so
275       groß ist. Wie dem auch sei, im fresh-Design habe ich bewusst eine rechtsausgerichtete Navigation
276       gewählt, damit die Schrift nicht so an den Rand geklatscht aussieht -- dadurch, dass sie links
277       ausgerichtet ist, entsteht mehr Freiraum. Außerdem ist es ein weiterer Indiz dafür, dass es sich
278       nicht um ein stinknormales langweiliges Layout handelt.
279    */
280    position: absolute;
281    /* Der Banner ohne Schatten ist 97px lang. */
282    right: 0; top: 97px;
283    width: 210px;
284    padding: 0 20px 0 0;
285}
286
287#content, .content {
288    /* Allgemeines fuer Inhalt */
289    /*font-family: "Times New Roman", "Times", serif;*/
290    font-size: 90%; /*  kleinere Schrift für Inhalt, seit v5.7.1 gewünscht*/
291    /* problematishce Sache. VOrher stand font-size:105% ausgeklammert, d.h. 100% wurde genutzt.
292       Afaik soll sogar ein Schriftwechsler implementiert werden.
293    */
294    line-height: 125%; /* 1.5em sieht auch nett aus */
295}
296
297#content {
298    /* Inhalt (nur in Zusammenhang mit #menu nutzen!) */
299    margin-right: 230px; /* #sidebar.width + 2*#sidebar.padding! */
300    padding: 5%;
301    padding-bottom: 0;  /* Kleines Workaround, um keine Riesenabstaende */
302    margin-bottom: 5%;  /* unten zu kriegen, denn margins ueberlagern sich */
303
304    min-height: 1100px;
305    height: 1100px; /* IE workaround */
306    overflow: visible;
307    position: relative; /* für #sidebar-footnote, absolut dazu positiniert */
308}
309
310.extra #wrapper #content {
311    /* Extraseiten: Keine Mindesthoehe! */
312    min-height: inherit;
313    height: 50px; /* IE7 bug: inherit geht nicht. */
314}
315
316html>body #content, html>body .extra #wrapper #content {
317    height: auto;
318}
319
320#page, .content {
321    /* Fuer seiten ohne #menu */
322    /* muss man ggf. noch anders regeln */
323    margin: 2em;
324}
325
326/************************************************************************************\
327**  _____        _     _      _                 In diesem Abschnitt werden Elemente **
328** |___ /    ___(_) __| | ___| |__   __ _ _ __  der Sidebar ausgezeichnet, u.a. das **
329**   |_ \   / __| |/ _` |/ _ \ '_ \ / _` | '__| Sprachlinksystem sowie die          **
330**  ___) |  \__ \ | (_| |  __/ |_) | (_| | |    Fussnoten.                          **
331** |____(_) |___/_|\__,_|\___|_.__/ \__,_|_|    Das Menü ist erst Bestandteil von   **
332**                                              Punkt 4.                            **
333\************************************************************************************/
334
335#sidebar {
336    /* Fuer Positionsangaben siehe #sidebar weiter oben unter 2.content */
337    font-size: 12px;
338    /*background-color: #fafafa; geregelt als img für #wrapper */
339    font-weight: bold; /* Herihässlich */
340}
341
342/* Sprachlink-Box */
343#lang {
344    position: relative; /* fuer absolute Positioniereung drinnen */
345    height: 41px;
346}
347
348/* Zugängliche ausgeschriebene Kommentare ausblenden */
349#lang span {
350    display: none;
351}
352
353/* Sprachlink-Liste, nur der Semantik wegen eine Liste */
354#lang ul, #lang li {
355    list-style: none;
356    margin: 0;
357    padding: 0;
358}
359
360/* Sprachlink- sowie Anzeige der jetzigen Sprache: */
361#lang a, #lang strong {
362    /* Dimensionen fuer den Link + Schriftformatierung */
363    display: block;
364    position: absolute;
365    width: 108px;
366    /* Höhe beträgt 41px, aber damit Schrift nicht wegen der 6px
367       (in den Banner geschoben) blöd aussieht, diese 6px in der
368       Box wieder kompensieren: */
369    height: 35px; /* Eigentlich 41, -6px padding = 35px */
370    line-height: 35px;
371
372    text-align: center;
373    background-position: bottom right;
374    background-repeat: no-repeat;
375}
376
377/* englischsprachige(r) Link/Anzeige: */
378#lang .en {
379    /* rechts neben dem deutschsprachigen */
380    left: 102px;
381}
382
383/* Anzeige der jetzigen Sprache: */
384#lang strong {
385    /* In den Banner "reinschieben", damit Tab-Aussehen zustande kommt */
386    top: -6px;
387    left: 0px;
388    z-index: 4; /* ueber <h1> darstellen, also ueber Schatten */
389
390    /* Das blaue Bild hat die Höhe 41px, davon sind 6px im Banner.
391       Damit Text auch mittig ist: */
392    padding-top: 6px;
393
394    color: white;
395    background-image: url(../img/fresh.design/langbg-on.menu.png);
396}
397
398/* Link auf andere Sprache: */
399#lang a {
400    top: 0; left: 0;
401    z-index: 2; /* unter <h1> darstellen, also unter Schatten */
402    /* Der Sprachlink ist jetzt in einem Azur/Mint-Ton. Der ist völlig neu
403       auf der Homepage, von Heribert aber gewollt, weil "englisch etwas
404       besonderes" sei. */
405    background-image: url(../img/fresh.design/langbg.menu.png);
406
407    text-decoration: none;
408    color: black;
409}
410
411/* Geehoverter Link auf andere Sprache: */
412#lang a:hover {
413    background-image: url(../img/fresh.design/langbg-hot.menu.png);
414    z-index: 5; /* nach ganz oben. */
415}
416
417
418/*
419#lang a, #lang span {
420    display: block;
421    line-height: 140%;
422    padding: 5px 12px 5px 20px;
423    background-color: #fff;
424    **background-image: url(../img/fresh.design/langbg.menu.png);**
425    text-decoration: none;
426    border: 1px solid #5D7EAB;
427}
428
429#lang a:hover, #lang a:focus {
430    border: 1px outset #5D7EAB;
431    color: #000;
432    background: #f0c194 url(../img/fresh.design/orangebg.menu.png) repeat-x;
433}
434*/
435
436/* Schriftgroesseneinstellung/Styleswitcher */
437#styleswitcher {
438    border: 1px solid #555;
439    background-color: #fff;
440    padding: 5px 20px;
441    text-align: right;
442}
443
444#styleswitcher em {
445    display: block;
446    text-align: center;
447    font-style: normal;
448}
449
450#styleswitcher a.small {
451    float: left;
452}
453
454/* Fussnote fuer die Sidebar*/
455
456#sidebar-footnote {
457    /* Container, der in #content steckt und rechts in der Seitenleiste
458       angeordnet wird und z.B. benutzt werden kann, um auf den Hintergrund
459       einzugehen. */
460    position: absolute;
461    /* Position relativ zum inneren padding von #content! */
462    bottom: 0;
463    right: -230px;
464    width: 230px;
465}
466
467#sidebar-footnote a {
468    display: block;
469    padding: 1em;
470    text-align: center;
471}
472
473/***********************************************************************************\
474**  _  _                                                                           **
475** | || |     _ __ ___   ___ _ __  _   _    Das Menue mit allen Submenues, den     **
476** | || |_   | '_ ` _ \ / _ \ '_ \| | | |   aktiven/inaktiven Seiten und Menues    **
477** |__   _|  | | | | | |  __/ | | | |_| |   wird an dieser Stelle ausgezeichnet.   **
478**    |_|(_) |_| |_| |_|\___|_| |_|\__,_|                                          **
479**                                                                                 **
480\***********************************************************************************/
481
482/* Menü level 1 (Hauptmenü) */
483#menu ul.l1, #menu li {
484    list-style: none;
485    margin: 0; padding: 0;
486}
487
488#menu li {
489    display: inline;
490}
491
492#menu ul ul {
493    margin: 0; padding: 0;
494}
495
496/* Beschreibung aller allgemeinen Links. Das simple Linkschema lautet:
497    a    = echter link
498    em   = Kategorienüberschrift
499    a.on = Seite, auf der man ist (kein Link)
500*/
501#menu a, #menu em {
502    text-decoration: none;
503    display: block;
504    padding: 6px 3px 6px 20px;
505    position: relative; /* fuer absolut positionierbares #menu a span */
506}
507
508/*111111111111111111111111111111111111111111111111111111111111111111111111111111111*\
509**11                  HAUPT_KATEGORIE -- MENU LEVEL 1                            11**
510\*111111111111111111111111111111111111111111111111111111111111111111111111111111111*/
511
512/* Beschreibung der Elemente der Hauptkategorie.
513   Diese umfassen die Überschriften für Unterkategorien (l2), also em.l2,
514   sowie alle Links auf der Ebene der Hauptkategorie (l1), also li.l1 a.
515   li.l1 a.on bzw. #menu a.on wird hier "nur wegen der margin-top-dominanz"
516   aufgelistet bzw. "muss das hier teilweise überschreiben, siehe weiter unten".
517*/
518#menu em.l2, #menu li.l1 a:link, #menu li.l1 a:visited, #menu li.l1 a.on {
519    margin-top: 15px !important; /* wird sonst von #menu a:link ueberschrieben */
520    /*text-align: right;*/
521    font-weight: bold;
522    font-style: normal;
523    color: #fff;  /*#5D7EAB;*/
524    /*background-color: #5d7eab;*/
525    background-image: url(../img/fresh.design/headl1-bg.menu.png);
526    /*border: 1px outset #5d7eab; IE machts komisch, also aufgesplittet: */
527    border-top: 2px solid #d9e0ea;
528    border-left: 2px solid #d9e0ea;
529    border-right: 2px solid #929dad;
530    border-bottom: 2px solid #929dad;
531}
532
533/* Allgemeiner Orange-Hover-Effekt (muss unter li.l1 a stehen) */
534#menu a:hover, #menu li.l1 a:hover, #menu a:focus, #menu li.l1 a:focus, #menu li.l1 a:active {
535    /* alle gehoverten Links */
536    background-color: #F0C494; /*#f0d994*/
537    background-image: url(../img/fresh.design/orangebg.menu.png);
538    background-repeat: repeat-x;
539    color: #000;
540    border: 1px outset #ffbf00;
541    padding: 5px 2px 5px 19px; /* um den 1px border zu kompensieren (gegen ruckeln) */
542}
543
544/* Für Links aus der Hauptkategorie: */
545#menu li.l1 a:hover, #menu li.l1 a:focus {
546    /* Um 1px Rahmen wieder zu ueberschreiben */
547    border-width: 2px;
548    /* und um 2px-Kompensation zu überschreiben, da sich rahmenbreite nicht ändert */
549    padding: 6px 3px 6px 20px;
550}
551
552/* Für mehrzeilige (lange) Links: */
553#menu li.long a:hover, #menu li.long3 a:hover, #menu li.long3 a:focus {
554    /* (in der Höhe) langer Hintergrund: */
555    background-image: url(../img/fresh.design/orangebg-long.menu.png);
556}
557
558/*222222222222222222222222222222222222222222222222222222222222222222222222222222222*\
559**22                  UNTER_KATEGORIE -- MENU LEVEL 2                            22**
560\*222222222222222222222222222222222222222222222222222222222222222222222222222222222*/
561
562
563/* Hauptunterkategorie bzw. erstes Unterkategorienlevel bzw. "level 2": */
564#menu ul.l2 {
565    /* Abstand von erstem Link kompensieren um direkten Anschluss
566       an die Ueberschrift zu gewaehrleisten */
567    /*margin-top: -2px;*/
568    padding: 7px 0;
569}
570
571/* Gehoverte und/oder aktive (=da ist man) Hauptunterkategorie: */
572#menu li.l2:hover ul.l2, #menu li div.on ul.l2 {
573    /* Hintergrundfarbe (halbtransparent): */
574    /*background-color: #DEE5EE;*/
575    background-image: url(../img/fresh.design/catl1-bg.menu.png);
576}
577
578/* Links in der ersten Hauptunterkategorie (Links vom "level 2"): */
579#menu ul.l2 a {
580    /* Mehr Abstand oben und unten: */
581    margin-top: 1px;
582    margin-bottom: 1px;
583}
584
585/* "Besuchte-Seiten-Haeckchen" -- einfaches, aber mächtiges Feature,
586   war leider nicht gewollt. */
587/*
588#menu ul.l2 a:visited span {
589    * Link-Span fuer Haeckchen fuer bereits besuchte
590       Seiten anzeigen nutzen *
591    right: 0;
592    width: 18px; height: 26px;
593    background-image: url(../img/fresh.design/visitedbg.menu.png);
594}
595#menu ul.l2 li.long a:visited span,
596#menu ul.l2 li.long3 a:visited span {
597    height: 42px;
598}
599*/
600
601/* Erzeugung der allgemeinen Listenpfeilchen aller Links in Level 2 und 3: */
602#menu ul.l2 a:link span, #menu ul.l2 a:visited span, #menu li.l3 em span {
603    /* kleine blaue Pfeile: */
604    display: block;
605    position: absolute;
606    top: 0; left: 0;
607    width: 20px; height: 20px;
608    overflow: hidden; /* wegen &nbsp;-Inhalt */
609    background-image: url(../img/fresh.design/arrowbg.menu.png);
610    background-repeat: no-repeat;
611    background-position: 6px 7px;
612}
613
614/* Gehoverte Links: Position der Listenpfeilchen */
615html>body #menu ul.l2 a:hover span, html>body #menu ul.l2 a:focus span {
616    /* position:absolute geht nach border, und der ist jetzt 1px breit.
617       Also muss die Position beim Hovern korrigiert werden. Der IE
618       sieht das anders, für ihn also nicht korrigieren. */
619    top: -1px; left: -1px;
620}
621
622/* nicht mehr Pfeil, also stehen lassen. *//*
623#menu ul.l2 a:focus span {
624    ** Ausblenden bei focus -> da kommt der schwarze grosse Pfeil **
625    display: none;
626}*/
627
628/*333333333333333333333333333333333333333333333333333333333333333333333333333333333*\
629**33               UNTER_UNTER_KATEGORIE -- MENU LEVEL 3                         33**
630\*333333333333333333333333333333333333333333333333333333333333333333333333333333333*/
631
632
633/* Beschreibung der Elemente zur UnterUnterkategorie (level 3): */
634#menu li.l3 div {
635    /* Abstand der 3. Unterkategorie zu anderen Punkten: */
636    margin: 10px 0;
637}
638
639/* Überschriften der UnterUnterkategorie (level 3): */
640#menu li.l3 em {
641    font-weight: bold;
642    font-style: normal;
643    color: #224B88;
644    background-image: url(../img/fresh.design/catl2-bg.menu.png);
645}
646
647/* Gehoverte oder aktive (=da ist man) Überschrift der UnterUnterkategorie (level 3)*/
648#menu li.l3:hover em, #menu li.l3 div.on em {
649    /* Ueberschrift der Unterkategorien Level3 -- gehovert oder aktiv */
650    /*border-bottom: 1px solid #d4d4d4;*/ /* Border ruckelt -- wozu zum Teufel border? */
651    background-image: url(../img/fresh.design/headl2-bg.menu.png);
652    color: #000;
653}
654
655/* Erzeugung der Runterpfeilchen für Überschriften des level 3: */
656#menu li.l3 em span, #menu li.l3 div.on em span {
657    /* Siehe Erzeugung der allgemeinen Listenpfeilchen -- diese Eigenschaften
658       werden hier geerbt. */
659    /* Icon ist immer runtergefahren */
660    background-image: url(../img/fresh.design/subarrow.menu.png);
661    background-position: 4px 10px;
662}
663
664/* Beschreibung des Blocks der UnterUnterkategorie (level 3): */
665#menu li.l3 ul {
666    display: block;
667    /*margin-top: -2px;*/
668    padding: 5px 0 5px 10px;
669    background-image: url(../img/fresh.design/catl2-bg.menu.png);
670    /*background-color: #BACEEC;*/
671    /*border-left: 5px solid #d4d4d4;*/
672    opacity: 0.7;
673}
674
675/* Gehoverter oder aktiver (=da ist man) Block der UnterUnterkategorie (level 3): */
676#menu li.l3:hover ul, #menu li.l3 div.on ul {
677    /* Beim hovern komplett darstellen. */
678    opacity: .99;
679    /* 99% = Workaround um Safari2-Bug: opacity:1 blendet das Ding komplett aus! */
680}
681
682/*<=<=<=<=<=<=<=<=<=<=<=<=<=<=<=<=<=<=<=<=<=<=<=<==<=<=<=<=<=<=<=<=<=<=<=<=<=<=<=<=*\
683**=>                  SCHWARZE PFEILE BEI AKTIVEN SEITEN                         <=**
684\*=>=>=>=>=>=>=>=>=>=>=>=>=>=>=>=>=>=>=>=>=>=>=>=>=>=>=>=>=>=>=>=>=>=>=>=>=>=>=>=>=*/
685
686/* hier entfernt: #menu a:focus, #menu li.l1 a:focus, bei Focus nicht Pfeil
687   anzeigen (wegen unterschiedlichen Höhen!) sondern bei dem orangen bg bleiben. */
688#menu a.on, #menu a.on:hover, #menu li.l1 a.on {
689    /* Formatierung des Dings, wo man gerade ist */
690    /* Dort soll ein schwarzer Pfeil links raushaengen */
691    background-image: url(../img/fresh.design/blackarrow.menu.png);
692    background-position: left center;
693    background-repeat: no-repeat;
694    color: #000;
695    margin-left: -12px;
696    padding: 6px 5px 6px 31px; /* gegen :hover-Ueberschreibung */
697    font-weight: bold;
698    height: 19px;
699    /* gegen allgemeines #menu a:hover */
700    background-color: transparent !important; /* IE7 bug: inherit geht nicht. */
701    border: none !important;
702}
703
704#menu li.long a.on, #menu li.long a.on:hover { /*, #menu li.long a:focus {*/
705    /* Zweizeilige oder dreizeilige Elemente */
706    background-image: url(../img/fresh.design/blackarrow-long.menu.png);
707    height: 32px;
708    /* ggf. :focus-Teil entfernen, der laesst den Pfeil bereits */
709    /* vor dem Laden der neuen Seite erscheinen */
710}
711
712#menu li.long3 a.on, #menu li.long3 a.on:hover { /*, #menu li.long3 a:focus { */
713    /* Dreizeilige Elemente */
714    background-image: url(../img/fresh.design/blackarrow-long3.menu.png);
715    height: 48px;
716}
717
718 /***********************************************************************************\
719 **  ____                  _             _    Alle Auszeichnungen, die den Inhalt   **
720 ** | ___|  ___ ___  _ __ | |_ ___ _ __ | |_  (#content, #page oder .content)       **
721 ** |___ \ / __/ _ \| '_ \| __/ _ \ '_ \| __  betreffen und (nur) dort gelten,      **
722 **  ___) | (_| (_) | | | | ||  __/ | | | |_  werden in dem folgenden Bereich       **
723 ** |____(_)___\___/|_| |_|\__\___|_| |_|\__| notiert.                              **
724 **                                                                                 **
725 \***********************************************************************************/
726
727h2 {
728    font-weight: bold;
729    font-size: 160%;
730    line-height: 125%; /* wird sonst relativ zu falscher schriftgroesse vererbt */
731    margin: 0 0 0.7em 0;
732    padding: 0;
733}
734
735p { text-align: justify; }
736
737a:link, a:visited {
738    color: #224B88;
739    text-decoration: underline;
740}
741
742a:hover, a:active, a:focus {
743    color: #882224;
744    text-decoration: underline;
745}
746
747/*>> >> >> >> >> >> >> >> >> >> >> >> >> >> >> >> >> >> >> >> >> >> >> >> >> >> >> *\
748**>>                DOPPEL-PFEILCHEN BEI LINKS UND LISTEN                        <<**
749**>>                           a.go & a.arrow                                    <<**
750\* << << << << << << << << << << << << << << << << << << << << << << << << << << <<*/
751
752/* Alternative Form, Bilder sehen aber schöner aus: */
753/*a.arrow:before, a.go:before {
754    content: "»";
755    text-decoration: none;
756    padding-right: 0.5em;
757    font-weight: bold;
758}*/
759
760html>body a.arrow,
761html>body a.go {
762    background-position: center left;
763    background-repeat: no-repeat;
764    padding-left: 13px;
765}
766
767html>body a.arrow:link,
768html>body a.arrow:visited,
769html>body a.go:link,
770html>body a.go:visited {
771    background-image: url(../img/fresh.design/arrowbg.a.png);
772}
773
774html>body a.arrow:hover,
775html>body a.arrow:active,
776html>body a.arrow:focus,
777html>body a.go:hover,
778html>body a.go:active,
779html>body a.go:focus {
780    background-image: url(../img/fresh.design/arrowbg-hot.a.png);
781}
782
783html>body #content ul {
784    /* Allgemeine Listen: Listenzeichen Dreieck */
785    list-style-image: url(../img/fresh.design/arrowbg.menu.png);
786    /* transparentes PNG => IE bitte nicht. */
787}
788
789/*  Navigationslisten: <ul class="nav">/<ul id="nav">
790    werden im Prinzip nur von Extraseiten (/de/geraete) verwendet,
791    und da es seit v5.8 auch die in dem Sinne nicht mehr gibt, sind
792    diese Listen OBSOLET.
793*/
794
795ul.nav, ul#nav {
796    list-style: none;
797    padding: 0;
798}
799
800ul.nav li, ul#nav li {
801    margin: 0;
802    padding: 0;
803}
804
805ul.nav li a, ul#nav li a {
806    padding-left: 13px;
807    background-position: bottom left;
808    background-repeat: no-repeat;
809}
810
811ul.nav li a:link, ul#nav li a:link,
812ul.nav li a:visited, ul#nav li a:visited {
813    background-image: url(../img/double.a.png);
814}
815
816ul.nav li a:hover, ul#nav li a:hover,
817ul.nav li a:active, ul#nav li a:active,
818ul.nav li a:focus, ul#nav li a:focus {
819    background-image: url(../img/double-hot.a.png);
820}
821
822/***********************************************************************************\
823**   __     __             _                                                       **
824**  / /_   / _| ___   ___ | |_ ___ _ __   Der Footer (#footer) sowie der           **
825** | '_ \ | |_ / _ \ / _ \| __/ _ \ '__|  obligatorische Copyright-Hinweis werden  **
826** | (_) ||  _| (_) | (_) | ||  __/ |     hier ausgezeichnet. Der Footer kann seit **
827**  \___(_)_|  \___/ \___/ \__\___|_|     v5.8 mehrere Backlinks enthalten.        **
828**                                                                                 **
829\***********************************************************************************/
830
831/* Seitenrelationenleiste ganz unten: */
832#footer {
833    clear: both; padding: 0;
834    font-size: 12px;
835
836    /*border-top: 2px solid #C8C8C8; color: #eee;*/
837    /*background: #5F80AE url(../img/fresh.designbody.bg.png) repeat-y top left;*/
838    background-image: url(../img/fresh.design/bg.footer.png);
839    background-repeat: repeat-x;
840    background-position: top left;
841    background-color: #5D7EAB; /* ehemals #305690 als fallback */
842
843    position: relative;
844    min-height: 58px; /* eigentlich height:, aber große Schriftgroessen fliegen dann raus */
845    height: 4em; /* Wenn jemand die Schriftgroessen aufdreht, ist die Box groß genug */
846
847    border-top: 1px solid #0B0F07;
848}
849
850* html #footer { height: 58px; } /* Damit IE keinen Quatsch macht */
851
852/* .border: Legacy zwecks Kompatibilitaet zu screen.css
853    span:   Dummyelement für IE6-Kompatibilität (vgl. fresh-iefixing.css) */
854#footer .border, #footer span {
855    display: none;
856}
857
858#footer ul, #footer li {
859    /* Alle Listen-Eigenschaften abschalten. */
860    list-style: none;
861    margin: 0; padding: 0;
862    display: inline;
863}
864
865#footer li a {
866    color: #000;
867    display: block;
868    position: absolute;
869    top: 0;
870    text-decoration: none;
871
872    color: #fff;
873    margin: 8px 20px;
874    padding: 5px;
875    /*min-width: 30%;*/
876    background-repeat: no-repeat;
877}
878
879#footer a:hover, #footer a:focus {
880    background-color: #b5c4d9;
881    color: #000;
882}
883
884#footer li.prev a {
885    left: 0;
886    background-position: left center;
887    background-image: url(../img/fresh.design/white-left.footer.png);
888    padding-left: 22px;
889}
890
891#footer li.next a {
892    right: 220px;
893    background-position: right center;
894    background-image: url(../img/fresh.design/white-right.footer.png);
895    padding-right: 22px;
896    text-align: right;
897}
898
899#footer li.up a {
900    right: 5px;
901    width: 195px;
902    background-position: right center;
903    background-image: url(../img/fresh.design/white-up.footer.png);
904    padding-right: 22px;
905    margin-left: 0;
906    margin-right: 0;
907    text-align: right;
908}
909
910/* Copyright-Hinweis. */
911#copyright  {
912    background-color: #fff; /* um bodybg auszublenden */
913    margin: 0;
914    padding: 17px 5%; /* 20% war vorher*/
915
916    font-size: 13px;
917    font-weight: bold;
918    color: #808f93;
919    text-align: center;
920}
921
922/***********************************************************************************\
923**              __                                                                 **
924**   ___  ___  / _|  eof -- end of file.                                           **
925**  / _ \/ _ \| |_   Bitte beachten sie: Das technikum29-Design unterliegt dem     **
926** |  __/ (_) |  _|  Copyright. Wenden sie sich bei Anfrage auf Benutzung bitte    **
927**  \___|\___/|_|    an development $$ technikum29.de ($$ durch ein @ ersetzen)    **
928**                                                                                 **
929\***********************************************************************************/
Note: See TracBrowser for help on using the repository browser.
© 2008 - 2013 technikum29 • Sven Köppel • Some rights reserved
Powered by Trac
Expect where otherwise noted, content on this site is licensed under a Creative Commons 3.0 License