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

Last change on this file since 804 was 214, checked in by sven, 13 years ago

Entwicklungsprojekte: Text verbessert (Tippfehler, unverständliche Formulierung, Formatierung, Links).
h4-Stil eingeführt.

  • Property svn:keywords set to
    Id
    Revision
    Author
    Date
File size: 39.8 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:: 21#$ from            festgehalten, fuer den IE7 hier.       **
19** $Author:: heribert $, 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,Dejavu Sans,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/* Auf Wunsch von Heribert: Banner-Verschandelung (intern: Banner-v3).
185 * Heribert kam im Juli 2009 ploetzlich auf die Idee, dass man doch die wohldefinierte
186 * Farbpalette des technikum29-Designs ueber Bord werfen koennte und alles gruen
187 * machen koennte. Nachdem er einsah, dass ein Farbverlauf gruen-blau im Banner
188 * wirklich scheusslich aussieht, hat er sich halt fuer ein haessliches graublau
189 * entschieden, welches dem Banner seinen kompletten Glanz nimmt. Die Entfernung
190 * des "Spiegeleffektes" tut dazu sein uebriges.
191 * Um mit diesem "Experiment" nicht die guten Banner zu zerstoeren, laueft es unter
192 * einer "Pseudo"-Sprache "de-v3", erst mal nur auf deutsch.
193 */
194
195h1.de-v3 {
196    background-image: url(../img/fresh.design/freshbanner-v3.bg.png);
197}
198
199h1.de-v3 a {
200    /* "Neuer" deutscher Banner */
201    background-image: url(../img/banner/big.de-v3.png);
202}
203
204/***********************************************************************************\
205**  ____                                      _   Das General Page Layout um-      **
206** |___ \      __ _  ___ _ __   ___ _ __ __ _| |  schliesst #sidebar, #content,    **
207**   __) |    / _` |/ _ \ '_ \ / _ \ '__/ _` | |  #page, ..., also allgemeine      **
208**  / __/ _  | (_| |  __/ | | |  __/ | | (_| | |  grundlegende Seitenbereiche, die **
209** |_____(_)  \__, |\___|_| |_|\___|_|  \__,_|_|  positioniert werden. Hier werden **
210**            |___/                               auch Navigationsleistenhinter-   **
211**                                                gruende definiert.               **
212\***********************************************************************************/
213
214#wrapper {
215    /* Wrapper, der #content und #sidebar umfliesst. Er ist fuer
216       min-width notwendig, damit #sidebar aus dem Bildschirm ver-
217       schwinden kann. Hier wird auch der Hintergrund definiert */
218    position: relative;
219    min-width: 1000px; /* seit v5.7.1 nur 1000px damit ein 1024px-Bildschirm nicht scrollen braucht */
220
221    background-position: top right;
222    background-image: url(../img/fresh.design/menu-bg/binary.png);
223    background-repeat: repeat-y;
224    /*background-attachment: fixed; netter effekt, aber komisch */
225}
226
227/* NAVIGATIONSLEISTENHINTERGRUENDE
228** Die Klasse um #wrapper rum ist einfach die $location-SSI-Variable.
229** Wegen IE6 braucht's leider noch einen Wrapper um den #wrapper :/
230*/
231
232/*
233** Eine Uebersicht ueber die existierenden und noch nicht existierenden
234** Menu-Bg-Grafiken erhaelt man auf
235** http://technikum29.de/shared/img/fresh.design/menu-bg/
236**/
237.rundfunk #wrapper, .tontechnik #wrapper, .ultramar #wrapper, .telefunken650 #wrapper,
238.schaub-lorenz-supraphon #wrapper, .telefunkent40w #wrapper
239    { background-image: url(../img/fresh.design/menu-bg/rundfunk.jpg); }
240.fernsehen #wrapper, .saba-telerama #wrapper
241    { background-image: url(../img/fresh.design/menu-bg/fernsehen.jpg); }
242/*
243.faxtechnik -> .morse-telegraph, .hellfax
244*/
245.messtechnik #wrapper
246    { background-image: url(../img/fresh.design/menu-bg/messtechnik.jpg); }
247.elektro-mechanik #wrapper, .sprocket-wheel-machine #wrapper
248    { background-image: url(../img/fresh.design/menu-bg/elektro-mechanik.jpg); }
249.tabelliermaschine #wrapper
250    { background-image: url(../img/fresh.design/menu-bg/tabelliermaschine.png); }
251.lochkarten #wrapper, .punchcard-sorter #wrapper, .punchcard-collator #wrapper,
252.univac-cardreader #wrapper
253    { background-image: url(../img/fresh.design/menu-bg/lochkarte.jpg); }
254.elektronenroehren #wrapper, .anita #wrapper
255    { background-image: url(../img/fresh.design/menu-bg/elektronenroehren.jpg); }
256.transistoren #wrapper, .wanderer #wrapper
257    { background-image: url(../img/fresh.design/menu-bg/transistoren.png); }
258/*
259.programmierbare -> wang320
260*/
261/*
262.ic-technik -> wang700
263*/
264/*
265.kommerzielle -> ncr446, nixdorf820
266*/
267.fruehe-computer #wrapper, .dec-history #wrapper, .lab8e #wrapper, .wang2200 #wrapper,
268.details2 #wrapper
269    { background-image: url(../img/fresh.design/menu-bg/fruehe-computer.png); }
270/*
271.univac -> .univac, .univac-frontpanel, .univac-console, .univac-servo,
272          [.univac-cardreader (we use the punch card image at this place)],
273           .univac-bandcontroller, .univac-discdrives, .univac-highspeed-printer,
274           .univac-board, .univac-9300, .univac-werbung
275*/
276.univac-kosten #wrapper
277    { background-image: url(/shared/img/fresh.design/menu-bg/autos.png); }
278
279.analogrechner #wrapper
280    { background-image: url(../img/fresh.design/menu-bg/analogrechner.png); }
281.speichermedien #wrapper
282    { background-image: url(../img/fresh.design/menu-bg/kernspeicher.jpg);
283    /*background-image: url(../img/fresh.design/menu-bg/speichermedien.png);*/ }
284/* .speichermedien nicht passend fuer -> .threaded-rom, .magnetic-stick-memory,
285                                         .plated-wire-storage
286*/
287
288
289#sidebar {
290    /* Rechte Seitenleiste, relativ zum #wrapper */
291    /* "Navigation rechts" empfinden Manche als "sehr ungewöhnlich". Es gibt allerdings sehr häufig,
292       vor allem in letzter Zeit, rechtsausgerichtete Navigationen, z.B. in sehr, sehr vielen Blog-
293       designs. Wissenschaftliche Studien meinen, es wäre ergonomisch sinnvoller und würde zu
294       schnellerer Navigation auf Webseiten führen, weil der Abstand zu den Scrollleisten nicht so
295       groß ist. Wie dem auch sei, im fresh-Design habe ich bewusst eine rechtsausgerichtete Navigation
296       gewählt, damit die Schrift nicht so an den Rand geklatscht aussieht -- dadurch, dass sie links
297       ausgerichtet ist, entsteht mehr Freiraum. Außerdem ist es ein weiterer Indiz dafür, dass es sich
298       nicht um ein stinknormales langweiliges Layout handelt.
299    */
300    position: absolute;
301    /* Der Banner ohne Schatten ist 97px lang. */
302    right: 0; top: 97px;
303    width: 210px;
304    padding: 0 20px 0 0;
305}
306
307#content, .content {
308    /* Allgemeines fuer Inhalt */
309    /* Wesentlicher Punkt Schriftgroesse:
310        * Urspruenglich 100% (ich wollte eine grosse Schrift)
311        * seit v5.7.1 dann 90% gewuenscht (Heribert hat auf nem 19" TFT
312          mit 1024x768px gearbeitet => scheinbar grosse Schrift)
313        * Zwischenzeitlich stand mal ein Schriftwechsler (a aa AAA)
314          in der Diskussion, wurde aber auch nie umgesetzt
315        * seit 03.01.2009 wieder 100% (Heribert arbeitet seit ein paar
316          Wochen mit 1280x1024 um ein schaerferes Bild zu erhalten)
317    */
318    font-size: 100%;
319    /* Zeilenhoehe:
320       * war 125% ("1.5em sieht auch nett aus")
321       * seit 03.01.09 marginal groesser (130%)
322    */
323    line-height: 130%;
324}
325
326#content {
327    /* Inhalt (nur in Zusammenhang mit #menu nutzen!) */
328    margin-right: 230px; /* #sidebar.width + 2*#sidebar.padding! */
329    padding: 5%;
330    padding-bottom: 0;  /* Kleines Workaround, um keine Riesenabstaende */
331    margin-bottom: 5%;  /* unten zu kriegen, denn margins ueberlagern sich */
332
333    min-height: 100em; /* fuer kurze Seiten, jetzt relativ fuer grosse Schriften */
334    height: 100em; /* IE workaround */
335    overflow: visible;
336    position: relative; /* für #sidebar-footnote, absolut dazu positiniert */
337}
338
339.extra #wrapper #content {
340    /* Extraseiten: Keine Mindesthoehe! */
341    min-height: inherit;
342    height: 50px; /* IE7 bug: inherit geht nicht. */
343}
344
345html>body #content, html>body .extra #wrapper #content {
346    height: auto;
347}
348
349#page, .content {
350    /* Fuer seiten ohne #menu */
351    /* muss man ggf. noch anders regeln */
352    margin: 2em;
353}
354
355.external-content {
356        /* Fuer Inhalte, die wie #content in der Breite formatiert */
357        /* werden sollen (mit #menu also), aber nicht in #content */
358        /* stehen duerfen. */
359        padding: 5%;
360        padding-bottom: 0;
361        margin-right: 230px; /* siehe #content fuer alle Werte */
362}
363
364/************************************************************************************\
365**  _____        _     _      _                 In diesem Abschnitt werden Elemente **
366** |___ /    ___(_) __| | ___| |__   __ _ _ __  der Sidebar ausgezeichnet, u.a. das **
367**   |_ \   / __| |/ _` |/ _ \ '_ \ / _` | '__| Sprachlinksystem sowie die          **
368**  ___) |  \__ \ | (_| |  __/ |_) | (_| | |    Fussnoten.                          **
369** |____(_) |___/_|\__,_|\___|_.__/ \__,_|_|    Das Menü ist erst Bestandteil von   **
370**                                              Punkt 4.                            **
371\************************************************************************************/
372
373#sidebar {
374    /* Fuer Positionsangaben siehe #sidebar weiter oben unter 2.content */
375    font-size: 12px;
376    /*background-color: #fafafa; geregelt als img für #wrapper */
377    font-weight: bold; /* Herihässlich */
378}
379
380/* Sprachlink-Box */
381#lang {
382    position: relative; /* fuer absolute Positioniereung drinnen */
383    height: 41px;
384}
385
386/* Zugängliche ausgeschriebene Kommentare ausblenden */
387#lang span {
388    display: none;
389}
390
391/* Sprachlink-Liste, nur der Semantik wegen eine Liste */
392#lang ul, #lang li {
393    list-style: none;
394    margin: 0;
395    padding: 0;
396}
397
398/* Sprachlink- sowie Anzeige der jetzigen Sprache: */
399#lang a, #lang strong {
400    /* Dimensionen fuer den Link + Schriftformatierung */
401    display: block;
402    position: absolute;
403    width: 108px;
404    /* Höhe beträgt 41px, aber damit Schrift nicht wegen der 6px
405       (in den Banner geschoben) blöd aussieht, diese 6px in der
406       Box wieder kompensieren: */
407    height: 35px; /* Eigentlich 41, -6px padding = 35px */
408    line-height: 35px;
409
410    text-align: center;
411    background-position: bottom right;
412    background-repeat: no-repeat;
413}
414
415/* englischsprachige(r) Link/Anzeige: */
416#lang .en {
417    /* rechts neben dem deutschsprachigen */
418    left: 102px;
419}
420
421/* Anzeige der jetzigen Sprache: */
422#lang strong {
423    /* In den Banner "reinschieben", damit Tab-Aussehen zustande kommt */
424    top: -6px;
425    left: 0px;
426    z-index: 4; /* ueber <h1> darstellen, also ueber Schatten */
427
428    /* Das blaue Bild hat die Höhe 41px, davon sind 6px im Banner.
429       Damit Text auch mittig ist: */
430    padding-top: 6px;
431
432    color: white;
433    background-image: url(../img/fresh.design/langbg-on.menu.png);
434}
435
436/* Link auf andere Sprache: */
437#lang a {
438    top: 0; left: 0;
439    z-index: 2; /* unter <h1> darstellen, also unter Schatten */
440    /* Der Sprachlink ist jetzt in einem Azur/Mint-Ton. Der ist völlig neu
441       auf der Homepage, von Heribert aber gewollt, weil "englisch etwas
442       besonderes" sei. */
443    background-image: url(../img/fresh.design/langbg.menu.png);
444
445    text-decoration: none;
446    color: black;
447}
448
449/* Geehoverter Link auf andere Sprache: */
450#lang a:hover {
451    background-image: url(../img/fresh.design/langbg-hot.menu.png);
452    z-index: 5; /* nach ganz oben. */
453}
454
455
456/*
457#lang a, #lang span {
458    display: block;
459    line-height: 140%;
460    padding: 5px 12px 5px 20px;
461    background-color: #fff;
462    **background-image: url(../img/fresh.design/langbg.menu.png);**
463    text-decoration: none;
464    border: 1px solid #5D7EAB;
465}
466
467#lang a:hover, #lang a:focus {
468    border: 1px outset #5D7EAB;
469    color: #000;
470    background: #f0c194 url(../img/fresh.design/orangebg.menu.png) repeat-x;
471}
472*/
473
474/* Schriftgroesseneinstellung/Styleswitcher */
475#styleswitcher {
476    border: 1px solid #555;
477    background-color: #fff;
478    padding: 5px 20px;
479    text-align: right;
480}
481
482#styleswitcher em {
483    display: block;
484    text-align: center;
485    font-style: normal;
486}
487
488#styleswitcher a.small {
489    float: left;
490}
491
492/* Fussnote fuer die Sidebar*/
493
494#sidebar-footnote {
495    /* Container, der in #content steckt und rechts in der Seitenleiste
496       angeordnet wird und z.B. benutzt werden kann, um auf den Hintergrund
497       einzugehen. */
498    position: absolute;
499    /* Position relativ zum inneren padding von #content! */
500    bottom: -20px;
501    right: -230px;
502    width: 230px;
503}
504
505#sidebar-footnote a, #sidebar-footnote p {
506    /* #sidebar-footnote p: Anpassungen fuer counter (testweise ab 11.07.09) */
507    display: block;
508    padding: 4px 1em;
509    margin: 0;
510    text-align: center;
511}
512
513/* Infoboxen in der Sidebar, unter dem Menue
514 * Eingefuehrt mit den Hostinfos, Erweitert mit dem Uebersetzungssystem
515 * September 2010
516 */
517#sidebar .box {
518        background: url("../img/fresh.design/catl2-bg.menu.png");
519        font-weight:normal;
520        margin-top:15px;
521        padding: 10px 20px 10px 20px;   
522}
523
524.de #wrapper #sidebar .box .en, .en #wrapper #sidebar .box .de {
525        display: none; /* simple internationalisation for sidebar boxes */
526}
527#sidebar-tr .tr-disabled h3 { margin: 0; font-size: 100%; }
528#sidebar-tr .tr-disabled p {    margin: 5px 0; font-size: 90%; }
529#sidebar-tr .tr-disabled ul {
530        margin: 5px 0; font-size: 90%;
531        list-style: square; padding-left: 12px;
532}
533#sidebar-tr .tr-disabled { color: #444; }
534#sidebar-tr .credits { margin-top: 15px; }
535
536#sidebar-tr .tr-disabled a {
537        /* simple button like link for translation system */
538        display: inline-block;
539        zoom: 1; /* IE7 inline-block hack */ *display: inline;
540        text-decoration: none; outline: none;
541        margin: 0 2px; padding: 0.4em 1.5em 0.42em;
542        text-align: center; vertical-align: baseline;
543        color: #404040; font-size: 90%;
544        text-shadow: 0 1px 1px #ccc;
545        background-color: #eee; opacity: 0.8;
546        border: 1px solid #b7b7b7;
547        -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.2);
548        -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.2);
549        box-shadow: 0 1px 2px rgba(0,0,0,0.2);
550        -moz-border-radius: 0.5em 0.5em 0.5em 0.5em;
551        -webkit-border-radius: 0.5em 0.5em 0.5em 0.5em;
552        border-radius: 0.5em 0.5em 0.5em 0.5em;
553}
554
555#sidebar-tr .tr-disabled a:hover {
556        background-color: white;
557        color: black; opacity: 1;
558        -moz-box-shadow: 0 1px 2px #333;
559        text-shadow: 0 1px 1px #efefef;
560        background: url("../img/fresh.design/orangebg.menu.png");
561}
562
563/* Hostinfo-System: */
564#sidebar-hostinfo { border: 1px solid red; }
565
566/***********************************************************************************\
567**  _  _                                                                           **
568** | || |     _ __ ___   ___ _ __  _   _    Das Menue mit allen Submenues, den     **
569** | || |_   | '_ ` _ \ / _ \ '_ \| | | |   aktiven/inaktiven Seiten und Menues    **
570** |__   _|  | | | | | |  __/ | | | |_| |   wird an dieser Stelle ausgezeichnet.   **
571**    |_|(_) |_| |_| |_|\___|_| |_|\__,_|                                          **
572**                                                                                 **
573\***********************************************************************************/
574
575/* Menü level 1 (Hauptmenü) */
576#menu ul.l1, #menu li {
577    list-style: none;
578    margin: 0; padding: 0;
579}
580
581#menu li {
582    display: inline;
583}
584
585#menu ul ul {
586    margin: 0; padding: 0;
587}
588
589/* Beschreibung aller allgemeinen Links. Das simple Linkschema lautet:
590    a    = echter link
591    em   = Kategorienüberschrift
592    a.on = Seite, auf der man ist (kein Link)
593*/
594#menu a, #menu em {
595    text-decoration: none;
596    display: block;
597    padding: 6px 3px 6px 20px;
598    position: relative; /* fuer absolut positionierbares #menu a span */
599}
600
601/*111111111111111111111111111111111111111111111111111111111111111111111111111111111*\
602**11                  HAUPT_KATEGORIE -- MENU LEVEL 1                            11**
603\*111111111111111111111111111111111111111111111111111111111111111111111111111111111*/
604
605/* Beschreibung der Elemente der Hauptkategorie.
606   Diese umfassen die Überschriften für Unterkategorien (l2), also em.l2,
607   sowie alle Links auf der Ebene der Hauptkategorie (l1), also li.l1 a.
608   li.l1 a.on bzw. #menu a.on wird hier "nur wegen der margin-top-dominanz"
609   aufgelistet bzw. "muss das hier teilweise überschreiben, siehe weiter unten".
610*/
611#menu em.l2, #menu li.l1 a:link, #menu li.l1 a:visited, #menu li.l1 a.on {
612    margin-top: 15px !important; /* wird sonst von #menu a:link ueberschrieben */
613    /*text-align: right;*/
614    font-weight: bold;
615    font-style: normal;
616    color: #fff;  /*#5D7EAB;*/
617    /*background-color: #5d7eab;*/
618    background-image: url(../img/fresh.design/headl1-bg.menu.png);
619    /*border: 1px outset #5d7eab; IE machts komisch, also aufgesplittet: */
620    border-top: 2px solid #d9e0ea;
621    border-left: 2px solid #d9e0ea;
622    border-right: 2px solid #929dad;
623    border-bottom: 2px solid #929dad;
624}
625
626/* Allgemeiner Orange-Hover-Effekt (muss unter li.l1 a stehen) */
627#menu a:hover, #menu li.l1 a:hover, #menu a:focus, #menu li.l1 a:focus, #menu li.l1 a:active {
628    /* alle gehoverten Links */
629    background-color: #F0C494; /*#f0d994*/
630    background-image: url(../img/fresh.design/orangebg.menu.png);
631    background-repeat: repeat-x;
632    color: #000;
633    border: 1px outset #ffbf00;
634    padding: 5px 2px 5px 19px; /* um den 1px border zu kompensieren (gegen ruckeln) */
635}
636
637/* Für Links aus der Hauptkategorie: */
638#menu li.l1 a:hover, #menu li.l1 a:focus {
639    /* Um 1px Rahmen wieder zu ueberschreiben */
640    border-width: 2px;
641    /* und um 2px-Kompensation zu überschreiben, da sich rahmenbreite nicht ändert */
642    padding: 6px 3px 6px 20px;
643}
644
645/* Für mehrzeilige (lange) Links: */
646#menu li.long a:hover, #menu li.long3 a:hover, #menu li.long3 a:focus {
647    /* (in der Höhe) langer Hintergrund: */
648    background-image: url(../img/fresh.design/orangebg-long.menu.png);
649}
650
651/*222222222222222222222222222222222222222222222222222222222222222222222222222222222*\
652**22                  UNTER_KATEGORIE -- MENU LEVEL 2                            22**
653\*222222222222222222222222222222222222222222222222222222222222222222222222222222222*/
654
655
656/* Hauptunterkategorie bzw. erstes Unterkategorienlevel bzw. "level 2": */
657#menu ul.l2 {
658    /* Abstand von erstem Link kompensieren um direkten Anschluss
659       an die Ueberschrift zu gewaehrleisten */
660    /*margin-top: -2px;*/
661    padding: 7px 0;
662}
663
664/* Gehoverte und/oder aktive (=da ist man) Hauptunterkategorie: */
665#menu li.l2:hover ul.l2, #menu li div.on ul.l2 {
666    /* Hintergrundfarbe (halbtransparent): */
667    /*background-color: #DEE5EE;*/
668    background-image: url(../img/fresh.design/catl1-bg.menu.png);
669}
670
671/* Links in der ersten Hauptunterkategorie (Links vom "level 2"): */
672#menu ul.l2 a {
673    /* Mehr Abstand oben und unten: */
674    margin-top: 1px;
675    margin-bottom: 1px;
676}
677
678/* "Besuchte-Seiten-Haeckchen" -- einfaches, aber mächtiges Feature,
679   war leider nicht gewollt. */
680/*
681#menu ul.l2 a:visited span {
682    * Link-Span fuer Haeckchen fuer bereits besuchte
683       Seiten anzeigen nutzen *
684    right: 0;
685    width: 18px; height: 26px;
686    background-image: url(../img/fresh.design/visitedbg.menu.png);
687}
688#menu ul.l2 li.long a:visited span,
689#menu ul.l2 li.long3 a:visited span {
690    height: 42px;
691}
692*/
693
694/* Erzeugung der allgemeinen Listenpfeilchen aller Links in Level 2 und 3: */
695#menu ul.l2 a:link span, #menu ul.l2 a:visited span, #menu li.l3 em span {
696    /* kleine blaue Pfeile: */
697    display: block;
698    position: absolute;
699    top: 0; left: 0;
700    width: 20px; height: 20px;
701    overflow: hidden; /* wegen &nbsp;-Inhalt */
702    background-image: url(../img/fresh.design/arrowbg.menu.png);
703    background-repeat: no-repeat;
704    background-position: 6px 7px;
705}
706
707/* Gehoverte Links: Position der Listenpfeilchen */
708html>body #menu ul.l2 a:hover span, html>body #menu ul.l2 a:focus span {
709    /* position:absolute geht nach border, und der ist jetzt 1px breit.
710       Also muss die Position beim Hovern korrigiert werden. Der IE
711       sieht das anders, für ihn also nicht korrigieren. */
712    top: -1px; left: -1px;
713}
714
715/* nicht mehr Pfeil, also stehen lassen. *//*
716#menu ul.l2 a:focus span {
717    ** Ausblenden bei focus -> da kommt der schwarze grosse Pfeil **
718    display: none;
719}*/
720
721/*333333333333333333333333333333333333333333333333333333333333333333333333333333333*\
722**33               UNTER_UNTER_KATEGORIE -- MENU LEVEL 3                         33**
723\*333333333333333333333333333333333333333333333333333333333333333333333333333333333*/
724
725
726/* Beschreibung der Elemente zur UnterUnterkategorie (level 3): */
727#menu li.l3 div {
728    /* Abstand der 3. Unterkategorie zu anderen Punkten: */
729    margin: 10px 0;
730}
731
732/* Überschriften der UnterUnterkategorie (level 3): */
733#menu li.l3 em {
734    font-weight: bold;
735    font-style: normal;
736    color: #224B88;
737    background-image: url(../img/fresh.design/catl2-bg.menu.png);
738}
739
740/* Gehoverte oder aktive (=da ist man) Überschrift der UnterUnterkategorie (level 3)*/
741#menu li.l3:hover em, #menu li.l3 div.on em {
742    /* Ueberschrift der Unterkategorien Level3 -- gehovert oder aktiv */
743    /*border-bottom: 1px solid #d4d4d4;*/ /* Border ruckelt -- wozu zum Teufel border? */
744    background-image: url(../img/fresh.design/headl2-bg.menu.png);
745    color: #000;
746}
747
748/* Erzeugung der Runterpfeilchen für Überschriften des level 3: */
749#menu li.l3 em span, #menu li.l3 div.on em span {
750    /* Siehe Erzeugung der allgemeinen Listenpfeilchen -- diese Eigenschaften
751       werden hier geerbt. */
752    /* Icon ist immer runtergefahren */
753    background-image: url(../img/fresh.design/subarrow.menu.png);
754    background-position: 4px 10px;
755}
756
757/* Beschreibung des Blocks der UnterUnterkategorie (level 3): */
758#menu li.l3 ul {
759    display: block;
760    /*margin-top: -2px;*/
761    padding: 5px 0 5px 10px;
762    background-image: url(../img/fresh.design/catl2-bg.menu.png);
763    /*background-color: #BACEEC;*/
764    /*border-left: 5px solid #d4d4d4;*/
765    opacity: 0.7;
766}
767
768/* Gehoverter oder aktiver (=da ist man) Block der UnterUnterkategorie (level 3): */
769#menu li.l3:hover ul, #menu li.l3 div.on ul {
770    /* Beim hovern komplett darstellen. */
771    opacity: .99;
772    /* 99% = Workaround um Safari2-Bug: opacity:1 blendet das Ding komplett aus! */
773}
774
775/*<=<=<=<=<=<=<=<=<=<=<=<=<=<=<=<=<=<=<=<=<=<=<=<==<=<=<=<=<=<=<=<=<=<=<=<=<=<=<=<=*\
776**=>                  SCHWARZE PFEILE BEI AKTIVEN SEITEN                         <=**
777\*=>=>=>=>=>=>=>=>=>=>=>=>=>=>=>=>=>=>=>=>=>=>=>=>=>=>=>=>=>=>=>=>=>=>=>=>=>=>=>=>=*/
778
779/* hier entfernt: #menu a:focus, #menu li.l1 a:focus, bei Focus nicht Pfeil
780   anzeigen (wegen unterschiedlichen Höhen!) sondern bei dem orangen bg bleiben. */
781#menu a.on, #menu a.on:hover, #menu li.l1 a.on {
782    /* Formatierung des Dings, wo man gerade ist */
783    /* Dort soll ein schwarzer Pfeil links raushaengen */
784    background-image: url(../img/fresh.design/blackarrow.menu.png);
785    background-position: left center;
786    background-repeat: no-repeat;
787    color: #000;
788    margin-left: -12px;
789    padding: 6px 5px 6px 31px; /* gegen :hover-Ueberschreibung */
790    font-weight: bold;
791    height: 19px;
792    /* gegen allgemeines #menu a:hover */
793    background-color: transparent !important; /* IE7 bug: inherit geht nicht. */
794    border: none !important;
795}
796
797#menu li.long a.on, #menu li.long a.on:hover { /*, #menu li.long a:focus {*/
798    /* Zweizeilige oder dreizeilige Elemente */
799    background-image: url(../img/fresh.design/blackarrow-long.menu.png);
800    height: 32px;
801    /* ggf. :focus-Teil entfernen, der laesst den Pfeil bereits */
802    /* vor dem Laden der neuen Seite erscheinen */
803}
804
805#menu li.long3 a.on, #menu li.long3 a.on:hover { /*, #menu li.long3 a:focus { */
806    /* Dreizeilige Elemente */
807    background-image: url(../img/fresh.design/blackarrow-long3.menu.png);
808    height: 48px;
809}
810
811 /***********************************************************************************\
812 **  ____                  _             _    Alle Auszeichnungen, die den Inhalt   **
813 ** | ___|  ___ ___  _ __ | |_ ___ _ __ | |_  (#content, #page oder .content)       **
814 ** |___ \ / __/ _ \| '_ \| __/ _ \ '_ \| __  betreffen und (nur) dort gelten,      **
815 **  ___) | (_| (_) | | | | ||  __/ | | | |_  werden in dem folgenden Bereich       **
816 ** |____(_)___\___/|_| |_|\__\___|_| |_|\__| notiert.                              **
817 **                                                                                 **
818 \***********************************************************************************/
819
820h2, html>body #page h2 {
821    font-weight: bold;
822    font-size: 160%;
823    line-height: 125%; /* wird sonst relativ zu falscher schriftgroesse vererbt */
824    margin: 0 0 0.7em 0;
825    padding: 0;
826}
827
828#content h2, #content h3, #content h4 {
829    /* Seit 04.01.2010: Neues Ueberschriftenlayout. Soll aber nur
830       auf Homepage genutzt werden, nicht etwa auf dev. oder so...! */
831    font-weight: normal;
832    font-family: Trebuchet Ms,Verdana,Dejavu Sans,Helvetica,Arial,sans-serif;
833    font-size: 180%;
834    border-bottom: 3px double #aaa;
835}
836
837#content h3 {
838    /* Und das gleiche auch fuer Unter-Ueberschriften */
839    font-size: 140%;
840        margin: 2em 0 0.3em;
841}
842
843#content h4 {
844        font-weight: bold;
845        font-size: 100%;
846        border-bottom: 1px solid #aaa;
847        margin: 2.3em 0 1em;
848}
849
850p { text-align: justify; }
851
852a:link, a:visited {
853    color: #224B88;
854    text-decoration: underline;
855}
856
857a:hover, a:active, a:focus {
858    color: #882224;
859    text-decoration: underline;
860}
861
862/*>> >> >> >> >> >> >> >> >> >> >> >> >> >> >> >> >> >> >> >> >> >> >> >> >> >> >> *\
863**>>                DOPPEL-PFEILCHEN BEI LINKS UND LISTEN                        <<**
864**>>                           a.go & a.arrow                                    <<**
865\* << << << << << << << << << << << << << << << << << << << << << << << << << << <<*/
866
867/* Alternative Form, Bilder sehen aber schöner aus: */
868/*a.arrow:before, a.go:before {
869    content: "»";
870    text-decoration: none;
871    padding-right: 0.5em;
872    font-weight: bold;
873}*/
874
875html>body a.arrow,
876html>body a.go {
877    background-position: center left;
878    background-repeat: no-repeat;
879    padding-left: 13px;
880}
881
882html>body a.arrow:link,
883html>body a.arrow:visited,
884html>body a.go:link,
885html>body a.go:visited {
886    background-image: url(../img/fresh.design/arrowbg.a.png);
887}
888
889html>body a.arrow:hover,
890html>body a.arrow:active,
891html>body a.arrow:focus,
892html>body a.go:hover,
893html>body a.go:active,
894html>body a.go:focus {
895    background-image: url(../img/fresh.design/arrowbg-hot.a.png);
896}
897
898html>body #content ul {
899    /* Allgemeine Listen: Listenzeichen Dreieck */
900    list-style-image: url(../img/fresh.design/arrowbg.menu.png);
901    /* transparentes PNG => IE bitte nicht. */
902}
903
904/*  Navigationslisten: <ul class="nav">/<ul id="nav">
905    werden im Prinzip nur von Extraseiten (/de/geraete) verwendet,
906    und da es seit v5.8 auch die in dem Sinne nicht mehr gibt, sind
907    diese Listen OBSOLET.
908*/
909
910ul.nav, ul#nav {
911    list-style: none;
912    padding: 0;
913}
914
915ul.nav li, ul#nav li {
916    margin: 0;
917    padding: 0;
918}
919
920ul.nav li a, ul#nav li a {
921    padding-left: 13px;
922    background-position: bottom left;
923    background-repeat: no-repeat;
924}
925
926ul.nav li a:link, ul#nav li a:link,
927ul.nav li a:visited, ul#nav li a:visited {
928    background-image: url(../img/double.a.png);
929}
930
931ul.nav li a:hover, ul#nav li a:hover,
932ul.nav li a:active, ul#nav li a:active,
933ul.nav li a:focus, ul#nav li a:focus {
934    background-image: url(../img/double-hot.a.png);
935}
936
937/***********************************************************************************\
938**   __     __             _                                                       **
939**  / /_   / _| ___   ___ | |_ ___ _ __   Der Footer (#footer) sowie der           **
940** | '_ \ | |_ / _ \ / _ \| __/ _ \ '__|  obligatorische Copyright-Hinweis werden  **
941** | (_) ||  _| (_) | (_) | ||  __/ |     hier ausgezeichnet. Der Footer kann seit **
942**  \___(_)_|  \___/ \___/ \__\___|_|     v5.8 mehrere Backlinks enthalten.        **
943**                                                                                 **
944\***********************************************************************************/
945
946/* Seitenrelationenleiste ganz unten: */
947#footer {
948    clear: both; padding: 0;
949    font-size: 12px;
950
951    /*border-top: 2px solid #C8C8C8; color: #eee;*/
952    /*background: #5F80AE url(../img/fresh.designbody.bg.png) repeat-y top left;*/
953    background-image: url(../img/fresh.design/bg.footer.png);
954    background-repeat: repeat-x;
955    background-position: top left;
956    background-color: #5D7EAB; /* ehemals #305690 als fallback */
957
958    position: relative;
959    min-height: 58px; /* eigentlich height:, aber große Schriftgroessen fliegen dann raus */
960    height: 4em; /* Wenn jemand die Schriftgroessen aufdreht, ist die Box groß genug */
961
962    border-top: 1px solid #0B0F07;
963}
964
965* html #footer { height: 58px; } /* Damit IE keinen Quatsch macht */
966
967/* .border: Legacy zwecks Kompatibilitaet zu screen.css
968    span:   Dummyelement für IE6-Kompatibilität (vgl. fresh-iefixing.css) */
969#footer .border, #footer span {
970    display: none;
971}
972
973#footer ul, #footer li {
974    /* Alle Listen-Eigenschaften abschalten. */
975    list-style: none;
976    margin: 0; padding: 0;
977    display: inline;
978}
979
980#footer li a {
981    color: #000;
982    display: block;
983    position: absolute;
984    top: 0;
985    text-decoration: none;
986
987    color: #fff;
988    margin: 8px 20px;
989    padding: 5px;
990    /*min-width: 30%;*/
991    background-repeat: no-repeat;
992}
993
994#footer a:hover, #footer a:focus {
995    background-color: #b5c4d9;
996    color: #000;
997}
998
999#footer li.prev a {
1000    left: 0;
1001    background-position: left center;
1002    background-image: url(../img/fresh.design/white-left.footer.png);
1003    padding-left: 22px;
1004}
1005
1006#footer li.next a {
1007    right: 220px;
1008    background-position: right center;
1009    background-image: url(../img/fresh.design/white-right.footer.png);
1010    padding-right: 22px;
1011    text-align: right;
1012}
1013
1014#footer li.up a {
1015    right: 5px;
1016    width: 195px;
1017    background-position: right center;
1018    background-image: url(../img/fresh.design/white-up.footer.png);
1019    padding-right: 22px;
1020    margin-left: 0;
1021    margin-right: 0;
1022    text-align: right;
1023}
1024
1025/* Copyright-Hinweis. */
1026#copyright  {
1027    background-color: #fff; /* um bodybg auszublenden */
1028    margin: 0;
1029    padding: 17px 5%; /* 20% war vorher*/
1030
1031    font-size: 13px;
1032    font-weight: bold;
1033    color: #808f93;
1034    text-align: center;
1035}
1036
1037/***********************************************************************************\
1038**              __                                                                 **
1039**   ___  ___  / _|  eof -- end of file.                                           **
1040**  / _ \/ _ \| |_   Bitte beachten sie: Das technikum29-Design unterliegt dem     **
1041** |  __/ (_) |  _|  Copyright. Wenden sie sich bei Anfrage auf Benutzung bitte    **
1042**  \___|\___/|_|    an development $$ technikum29.de ($$ durch ein @ ersetzen)    **
1043**                                                                                 **
1044\***********************************************************************************/
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