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

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

Partial Results of the upcoming t29 translation system improvement session:

  • Swapped the messages from the settings to an ordinary XML file, loaded synchronously via AJAX
  • Dynamically loaded CSS seems to work by now (I think so...)
  • Started to implement the fixed box (is intended to replace the submit box at the editor area with much more features like better help button, total page editor, exit button, infos about http://edit.technikum29.de where the submissions are supposed to be stored for much more Simplicity), body border also missing yet (commented out)

Sven

  • Property svn:keywords set to
    Id
    Revision
    Author
    Date
File size: 39.3 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:: 20#$ 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,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/************************************************************************************\
356**  _____        _     _      _                 In diesem Abschnitt werden Elemente **
357** |___ /    ___(_) __| | ___| |__   __ _ _ __  der Sidebar ausgezeichnet, u.a. das **
358**   |_ \   / __| |/ _` |/ _ \ '_ \ / _` | '__| Sprachlinksystem sowie die          **
359**  ___) |  \__ \ | (_| |  __/ |_) | (_| | |    Fussnoten.                          **
360** |____(_) |___/_|\__,_|\___|_.__/ \__,_|_|    Das Menü ist erst Bestandteil von   **
361**                                              Punkt 4.                            **
362\************************************************************************************/
363
364#sidebar {
365    /* Fuer Positionsangaben siehe #sidebar weiter oben unter 2.content */
366    font-size: 12px;
367    /*background-color: #fafafa; geregelt als img für #wrapper */
368    font-weight: bold; /* Herihässlich */
369}
370
371/* Sprachlink-Box */
372#lang {
373    position: relative; /* fuer absolute Positioniereung drinnen */
374    height: 41px;
375}
376
377/* Zugängliche ausgeschriebene Kommentare ausblenden */
378#lang span {
379    display: none;
380}
381
382/* Sprachlink-Liste, nur der Semantik wegen eine Liste */
383#lang ul, #lang li {
384    list-style: none;
385    margin: 0;
386    padding: 0;
387}
388
389/* Sprachlink- sowie Anzeige der jetzigen Sprache: */
390#lang a, #lang strong {
391    /* Dimensionen fuer den Link + Schriftformatierung */
392    display: block;
393    position: absolute;
394    width: 108px;
395    /* Höhe beträgt 41px, aber damit Schrift nicht wegen der 6px
396       (in den Banner geschoben) blöd aussieht, diese 6px in der
397       Box wieder kompensieren: */
398    height: 35px; /* Eigentlich 41, -6px padding = 35px */
399    line-height: 35px;
400
401    text-align: center;
402    background-position: bottom right;
403    background-repeat: no-repeat;
404}
405
406/* englischsprachige(r) Link/Anzeige: */
407#lang .en {
408    /* rechts neben dem deutschsprachigen */
409    left: 102px;
410}
411
412/* Anzeige der jetzigen Sprache: */
413#lang strong {
414    /* In den Banner "reinschieben", damit Tab-Aussehen zustande kommt */
415    top: -6px;
416    left: 0px;
417    z-index: 4; /* ueber <h1> darstellen, also ueber Schatten */
418
419    /* Das blaue Bild hat die Höhe 41px, davon sind 6px im Banner.
420       Damit Text auch mittig ist: */
421    padding-top: 6px;
422
423    color: white;
424    background-image: url(../img/fresh.design/langbg-on.menu.png);
425}
426
427/* Link auf andere Sprache: */
428#lang a {
429    top: 0; left: 0;
430    z-index: 2; /* unter <h1> darstellen, also unter Schatten */
431    /* Der Sprachlink ist jetzt in einem Azur/Mint-Ton. Der ist völlig neu
432       auf der Homepage, von Heribert aber gewollt, weil "englisch etwas
433       besonderes" sei. */
434    background-image: url(../img/fresh.design/langbg.menu.png);
435
436    text-decoration: none;
437    color: black;
438}
439
440/* Geehoverter Link auf andere Sprache: */
441#lang a:hover {
442    background-image: url(../img/fresh.design/langbg-hot.menu.png);
443    z-index: 5; /* nach ganz oben. */
444}
445
446
447/*
448#lang a, #lang span {
449    display: block;
450    line-height: 140%;
451    padding: 5px 12px 5px 20px;
452    background-color: #fff;
453    **background-image: url(../img/fresh.design/langbg.menu.png);**
454    text-decoration: none;
455    border: 1px solid #5D7EAB;
456}
457
458#lang a:hover, #lang a:focus {
459    border: 1px outset #5D7EAB;
460    color: #000;
461    background: #f0c194 url(../img/fresh.design/orangebg.menu.png) repeat-x;
462}
463*/
464
465/* Schriftgroesseneinstellung/Styleswitcher */
466#styleswitcher {
467    border: 1px solid #555;
468    background-color: #fff;
469    padding: 5px 20px;
470    text-align: right;
471}
472
473#styleswitcher em {
474    display: block;
475    text-align: center;
476    font-style: normal;
477}
478
479#styleswitcher a.small {
480    float: left;
481}
482
483/* Fussnote fuer die Sidebar*/
484
485#sidebar-footnote {
486    /* Container, der in #content steckt und rechts in der Seitenleiste
487       angeordnet wird und z.B. benutzt werden kann, um auf den Hintergrund
488       einzugehen. */
489    position: absolute;
490    /* Position relativ zum inneren padding von #content! */
491    bottom: -20px;
492    right: -230px;
493    width: 230px;
494}
495
496#sidebar-footnote a, #sidebar-footnote p {
497    /* #sidebar-footnote p: Anpassungen fuer counter (testweise ab 11.07.09) */
498    display: block;
499    padding: 4px 1em;
500    margin: 0;
501    text-align: center;
502}
503
504/* Infoboxen in der Sidebar, unter dem Menue
505 * Eingefuehrt mit den Hostinfos, Erweitert mit dem Uebersetzungssystem
506 * September 2010
507 */
508#sidebar .box {
509        background: url("../img/fresh.design/catl2-bg.menu.png");
510        font-weight:normal;
511        margin-top:15px;
512        padding: 10px 20px 10px 20px;   
513}
514
515.de #wrapper #sidebar .box .en, .en #wrapper #sidebar .box .de {
516        display: none; /* simple internationalisation for sidebar boxes */
517}
518#sidebar-tr .tr-disabled h3 { margin: 0; font-size: 100%; }
519#sidebar-tr .tr-disabled p {    margin: 5px 0; font-size: 90%; }
520#sidebar-tr .tr-disabled { color: #444; }
521
522#sidebar-tr .tr-disabled a {
523        /* simple button like link for translation system */
524        display: inline-block;
525        zoom: 1; /* IE7 inline-block hack */ *display: inline;
526        text-decoration: none; outline: none;
527        margin: 0 2px; padding: 0.4em 1.5em 0.42em;
528        text-align: center; vertical-align: baseline;
529        color: #404040; font-size: 90%;
530        text-shadow: 0 1px 1px #ccc;
531        background-color: #eee; opacity: 0.8;
532        border: 1px solid #b7b7b7;
533        -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.2);
534        -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.2);
535        box-shadow: 0 1px 2px rgba(0,0,0,0.2);
536        -moz-border-radius: 0.5em 0.5em 0.5em 0.5em;
537        -webkit-border-radius: 0.5em 0.5em 0.5em 0.5em;
538        border-radius: 0.5em 0.5em 0.5em 0.5em;
539}
540
541#sidebar-tr .tr-disabled a:hover {
542        background-color: white;
543        color: black; opacity: 1;
544        -moz-box-shadow: 0 1px 2px #333;
545        text-shadow: 0 1px 1px #efefef;
546        background: url("../img/fresh.design/orangebg.menu.png");
547}
548
549/* Hostinfo-System: */
550#sidebar-hostinfo { border: 1px solid red; }
551
552/***********************************************************************************\
553**  _  _                                                                           **
554** | || |     _ __ ___   ___ _ __  _   _    Das Menue mit allen Submenues, den     **
555** | || |_   | '_ ` _ \ / _ \ '_ \| | | |   aktiven/inaktiven Seiten und Menues    **
556** |__   _|  | | | | | |  __/ | | | |_| |   wird an dieser Stelle ausgezeichnet.   **
557**    |_|(_) |_| |_| |_|\___|_| |_|\__,_|                                          **
558**                                                                                 **
559\***********************************************************************************/
560
561/* Menü level 1 (Hauptmenü) */
562#menu ul.l1, #menu li {
563    list-style: none;
564    margin: 0; padding: 0;
565}
566
567#menu li {
568    display: inline;
569}
570
571#menu ul ul {
572    margin: 0; padding: 0;
573}
574
575/* Beschreibung aller allgemeinen Links. Das simple Linkschema lautet:
576    a    = echter link
577    em   = Kategorienüberschrift
578    a.on = Seite, auf der man ist (kein Link)
579*/
580#menu a, #menu em {
581    text-decoration: none;
582    display: block;
583    padding: 6px 3px 6px 20px;
584    position: relative; /* fuer absolut positionierbares #menu a span */
585}
586
587/*111111111111111111111111111111111111111111111111111111111111111111111111111111111*\
588**11                  HAUPT_KATEGORIE -- MENU LEVEL 1                            11**
589\*111111111111111111111111111111111111111111111111111111111111111111111111111111111*/
590
591/* Beschreibung der Elemente der Hauptkategorie.
592   Diese umfassen die Überschriften für Unterkategorien (l2), also em.l2,
593   sowie alle Links auf der Ebene der Hauptkategorie (l1), also li.l1 a.
594   li.l1 a.on bzw. #menu a.on wird hier "nur wegen der margin-top-dominanz"
595   aufgelistet bzw. "muss das hier teilweise überschreiben, siehe weiter unten".
596*/
597#menu em.l2, #menu li.l1 a:link, #menu li.l1 a:visited, #menu li.l1 a.on {
598    margin-top: 15px !important; /* wird sonst von #menu a:link ueberschrieben */
599    /*text-align: right;*/
600    font-weight: bold;
601    font-style: normal;
602    color: #fff;  /*#5D7EAB;*/
603    /*background-color: #5d7eab;*/
604    background-image: url(../img/fresh.design/headl1-bg.menu.png);
605    /*border: 1px outset #5d7eab; IE machts komisch, also aufgesplittet: */
606    border-top: 2px solid #d9e0ea;
607    border-left: 2px solid #d9e0ea;
608    border-right: 2px solid #929dad;
609    border-bottom: 2px solid #929dad;
610}
611
612/* Allgemeiner Orange-Hover-Effekt (muss unter li.l1 a stehen) */
613#menu a:hover, #menu li.l1 a:hover, #menu a:focus, #menu li.l1 a:focus, #menu li.l1 a:active {
614    /* alle gehoverten Links */
615    background-color: #F0C494; /*#f0d994*/
616    background-image: url(../img/fresh.design/orangebg.menu.png);
617    background-repeat: repeat-x;
618    color: #000;
619    border: 1px outset #ffbf00;
620    padding: 5px 2px 5px 19px; /* um den 1px border zu kompensieren (gegen ruckeln) */
621}
622
623/* Für Links aus der Hauptkategorie: */
624#menu li.l1 a:hover, #menu li.l1 a:focus {
625    /* Um 1px Rahmen wieder zu ueberschreiben */
626    border-width: 2px;
627    /* und um 2px-Kompensation zu überschreiben, da sich rahmenbreite nicht ändert */
628    padding: 6px 3px 6px 20px;
629}
630
631/* Für mehrzeilige (lange) Links: */
632#menu li.long a:hover, #menu li.long3 a:hover, #menu li.long3 a:focus {
633    /* (in der Höhe) langer Hintergrund: */
634    background-image: url(../img/fresh.design/orangebg-long.menu.png);
635}
636
637/*222222222222222222222222222222222222222222222222222222222222222222222222222222222*\
638**22                  UNTER_KATEGORIE -- MENU LEVEL 2                            22**
639\*222222222222222222222222222222222222222222222222222222222222222222222222222222222*/
640
641
642/* Hauptunterkategorie bzw. erstes Unterkategorienlevel bzw. "level 2": */
643#menu ul.l2 {
644    /* Abstand von erstem Link kompensieren um direkten Anschluss
645       an die Ueberschrift zu gewaehrleisten */
646    /*margin-top: -2px;*/
647    padding: 7px 0;
648}
649
650/* Gehoverte und/oder aktive (=da ist man) Hauptunterkategorie: */
651#menu li.l2:hover ul.l2, #menu li div.on ul.l2 {
652    /* Hintergrundfarbe (halbtransparent): */
653    /*background-color: #DEE5EE;*/
654    background-image: url(../img/fresh.design/catl1-bg.menu.png);
655}
656
657/* Links in der ersten Hauptunterkategorie (Links vom "level 2"): */
658#menu ul.l2 a {
659    /* Mehr Abstand oben und unten: */
660    margin-top: 1px;
661    margin-bottom: 1px;
662}
663
664/* "Besuchte-Seiten-Haeckchen" -- einfaches, aber mächtiges Feature,
665   war leider nicht gewollt. */
666/*
667#menu ul.l2 a:visited span {
668    * Link-Span fuer Haeckchen fuer bereits besuchte
669       Seiten anzeigen nutzen *
670    right: 0;
671    width: 18px; height: 26px;
672    background-image: url(../img/fresh.design/visitedbg.menu.png);
673}
674#menu ul.l2 li.long a:visited span,
675#menu ul.l2 li.long3 a:visited span {
676    height: 42px;
677}
678*/
679
680/* Erzeugung der allgemeinen Listenpfeilchen aller Links in Level 2 und 3: */
681#menu ul.l2 a:link span, #menu ul.l2 a:visited span, #menu li.l3 em span {
682    /* kleine blaue Pfeile: */
683    display: block;
684    position: absolute;
685    top: 0; left: 0;
686    width: 20px; height: 20px;
687    overflow: hidden; /* wegen &nbsp;-Inhalt */
688    background-image: url(../img/fresh.design/arrowbg.menu.png);
689    background-repeat: no-repeat;
690    background-position: 6px 7px;
691}
692
693/* Gehoverte Links: Position der Listenpfeilchen */
694html>body #menu ul.l2 a:hover span, html>body #menu ul.l2 a:focus span {
695    /* position:absolute geht nach border, und der ist jetzt 1px breit.
696       Also muss die Position beim Hovern korrigiert werden. Der IE
697       sieht das anders, für ihn also nicht korrigieren. */
698    top: -1px; left: -1px;
699}
700
701/* nicht mehr Pfeil, also stehen lassen. *//*
702#menu ul.l2 a:focus span {
703    ** Ausblenden bei focus -> da kommt der schwarze grosse Pfeil **
704    display: none;
705}*/
706
707/*333333333333333333333333333333333333333333333333333333333333333333333333333333333*\
708**33               UNTER_UNTER_KATEGORIE -- MENU LEVEL 3                         33**
709\*333333333333333333333333333333333333333333333333333333333333333333333333333333333*/
710
711
712/* Beschreibung der Elemente zur UnterUnterkategorie (level 3): */
713#menu li.l3 div {
714    /* Abstand der 3. Unterkategorie zu anderen Punkten: */
715    margin: 10px 0;
716}
717
718/* Überschriften der UnterUnterkategorie (level 3): */
719#menu li.l3 em {
720    font-weight: bold;
721    font-style: normal;
722    color: #224B88;
723    background-image: url(../img/fresh.design/catl2-bg.menu.png);
724}
725
726/* Gehoverte oder aktive (=da ist man) Überschrift der UnterUnterkategorie (level 3)*/
727#menu li.l3:hover em, #menu li.l3 div.on em {
728    /* Ueberschrift der Unterkategorien Level3 -- gehovert oder aktiv */
729    /*border-bottom: 1px solid #d4d4d4;*/ /* Border ruckelt -- wozu zum Teufel border? */
730    background-image: url(../img/fresh.design/headl2-bg.menu.png);
731    color: #000;
732}
733
734/* Erzeugung der Runterpfeilchen für Überschriften des level 3: */
735#menu li.l3 em span, #menu li.l3 div.on em span {
736    /* Siehe Erzeugung der allgemeinen Listenpfeilchen -- diese Eigenschaften
737       werden hier geerbt. */
738    /* Icon ist immer runtergefahren */
739    background-image: url(../img/fresh.design/subarrow.menu.png);
740    background-position: 4px 10px;
741}
742
743/* Beschreibung des Blocks der UnterUnterkategorie (level 3): */
744#menu li.l3 ul {
745    display: block;
746    /*margin-top: -2px;*/
747    padding: 5px 0 5px 10px;
748    background-image: url(../img/fresh.design/catl2-bg.menu.png);
749    /*background-color: #BACEEC;*/
750    /*border-left: 5px solid #d4d4d4;*/
751    opacity: 0.7;
752}
753
754/* Gehoverter oder aktiver (=da ist man) Block der UnterUnterkategorie (level 3): */
755#menu li.l3:hover ul, #menu li.l3 div.on ul {
756    /* Beim hovern komplett darstellen. */
757    opacity: .99;
758    /* 99% = Workaround um Safari2-Bug: opacity:1 blendet das Ding komplett aus! */
759}
760
761/*<=<=<=<=<=<=<=<=<=<=<=<=<=<=<=<=<=<=<=<=<=<=<=<==<=<=<=<=<=<=<=<=<=<=<=<=<=<=<=<=*\
762**=>                  SCHWARZE PFEILE BEI AKTIVEN SEITEN                         <=**
763\*=>=>=>=>=>=>=>=>=>=>=>=>=>=>=>=>=>=>=>=>=>=>=>=>=>=>=>=>=>=>=>=>=>=>=>=>=>=>=>=>=*/
764
765/* hier entfernt: #menu a:focus, #menu li.l1 a:focus, bei Focus nicht Pfeil
766   anzeigen (wegen unterschiedlichen Höhen!) sondern bei dem orangen bg bleiben. */
767#menu a.on, #menu a.on:hover, #menu li.l1 a.on {
768    /* Formatierung des Dings, wo man gerade ist */
769    /* Dort soll ein schwarzer Pfeil links raushaengen */
770    background-image: url(../img/fresh.design/blackarrow.menu.png);
771    background-position: left center;
772    background-repeat: no-repeat;
773    color: #000;
774    margin-left: -12px;
775    padding: 6px 5px 6px 31px; /* gegen :hover-Ueberschreibung */
776    font-weight: bold;
777    height: 19px;
778    /* gegen allgemeines #menu a:hover */
779    background-color: transparent !important; /* IE7 bug: inherit geht nicht. */
780    border: none !important;
781}
782
783#menu li.long a.on, #menu li.long a.on:hover { /*, #menu li.long a:focus {*/
784    /* Zweizeilige oder dreizeilige Elemente */
785    background-image: url(../img/fresh.design/blackarrow-long.menu.png);
786    height: 32px;
787    /* ggf. :focus-Teil entfernen, der laesst den Pfeil bereits */
788    /* vor dem Laden der neuen Seite erscheinen */
789}
790
791#menu li.long3 a.on, #menu li.long3 a.on:hover { /*, #menu li.long3 a:focus { */
792    /* Dreizeilige Elemente */
793    background-image: url(../img/fresh.design/blackarrow-long3.menu.png);
794    height: 48px;
795}
796
797 /***********************************************************************************\
798 **  ____                  _             _    Alle Auszeichnungen, die den Inhalt   **
799 ** | ___|  ___ ___  _ __ | |_ ___ _ __ | |_  (#content, #page oder .content)       **
800 ** |___ \ / __/ _ \| '_ \| __/ _ \ '_ \| __  betreffen und (nur) dort gelten,      **
801 **  ___) | (_| (_) | | | | ||  __/ | | | |_  werden in dem folgenden Bereich       **
802 ** |____(_)___\___/|_| |_|\__\___|_| |_|\__| notiert.                              **
803 **                                                                                 **
804 \***********************************************************************************/
805
806h2, html>body #page h2 {
807    font-weight: bold;
808    font-size: 160%;
809    line-height: 125%; /* wird sonst relativ zu falscher schriftgroesse vererbt */
810    margin: 0 0 0.7em 0;
811    padding: 0;
812}
813
814#content h2, #content h3 {
815    /* Seit 04.01.2010: Neues Ueberschriftenlayout. Soll aber nur
816       auf Homepage genutzt werden, nicht etwa auf dev. oder so...! */
817    font-weight: normal;
818    font-family: Trebuchet Ms,Verdana,Dejavu Sans,Helvetica,Arial,sans-serif;
819    font-size: 180%;
820    border-bottom: 3px double #aaa;
821}
822
823#content h3 {
824    /* Und das gleiche auch fuer Unter-Ueberschriften */
825    font-size: 140%;
826}
827
828p { text-align: justify; }
829
830a:link, a:visited {
831    color: #224B88;
832    text-decoration: underline;
833}
834
835a:hover, a:active, a:focus {
836    color: #882224;
837    text-decoration: underline;
838}
839
840/*>> >> >> >> >> >> >> >> >> >> >> >> >> >> >> >> >> >> >> >> >> >> >> >> >> >> >> *\
841**>>                DOPPEL-PFEILCHEN BEI LINKS UND LISTEN                        <<**
842**>>                           a.go & a.arrow                                    <<**
843\* << << << << << << << << << << << << << << << << << << << << << << << << << << <<*/
844
845/* Alternative Form, Bilder sehen aber schöner aus: */
846/*a.arrow:before, a.go:before {
847    content: "»";
848    text-decoration: none;
849    padding-right: 0.5em;
850    font-weight: bold;
851}*/
852
853html>body a.arrow,
854html>body a.go {
855    background-position: center left;
856    background-repeat: no-repeat;
857    padding-left: 13px;
858}
859
860html>body a.arrow:link,
861html>body a.arrow:visited,
862html>body a.go:link,
863html>body a.go:visited {
864    background-image: url(../img/fresh.design/arrowbg.a.png);
865}
866
867html>body a.arrow:hover,
868html>body a.arrow:active,
869html>body a.arrow:focus,
870html>body a.go:hover,
871html>body a.go:active,
872html>body a.go:focus {
873    background-image: url(../img/fresh.design/arrowbg-hot.a.png);
874}
875
876html>body #content ul {
877    /* Allgemeine Listen: Listenzeichen Dreieck */
878    list-style-image: url(../img/fresh.design/arrowbg.menu.png);
879    /* transparentes PNG => IE bitte nicht. */
880}
881
882/*  Navigationslisten: <ul class="nav">/<ul id="nav">
883    werden im Prinzip nur von Extraseiten (/de/geraete) verwendet,
884    und da es seit v5.8 auch die in dem Sinne nicht mehr gibt, sind
885    diese Listen OBSOLET.
886*/
887
888ul.nav, ul#nav {
889    list-style: none;
890    padding: 0;
891}
892
893ul.nav li, ul#nav li {
894    margin: 0;
895    padding: 0;
896}
897
898ul.nav li a, ul#nav li a {
899    padding-left: 13px;
900    background-position: bottom left;
901    background-repeat: no-repeat;
902}
903
904ul.nav li a:link, ul#nav li a:link,
905ul.nav li a:visited, ul#nav li a:visited {
906    background-image: url(../img/double.a.png);
907}
908
909ul.nav li a:hover, ul#nav li a:hover,
910ul.nav li a:active, ul#nav li a:active,
911ul.nav li a:focus, ul#nav li a:focus {
912    background-image: url(../img/double-hot.a.png);
913}
914
915/***********************************************************************************\
916**   __     __             _                                                       **
917**  / /_   / _| ___   ___ | |_ ___ _ __   Der Footer (#footer) sowie der           **
918** | '_ \ | |_ / _ \ / _ \| __/ _ \ '__|  obligatorische Copyright-Hinweis werden  **
919** | (_) ||  _| (_) | (_) | ||  __/ |     hier ausgezeichnet. Der Footer kann seit **
920**  \___(_)_|  \___/ \___/ \__\___|_|     v5.8 mehrere Backlinks enthalten.        **
921**                                                                                 **
922\***********************************************************************************/
923
924/* Seitenrelationenleiste ganz unten: */
925#footer {
926    clear: both; padding: 0;
927    font-size: 12px;
928
929    /*border-top: 2px solid #C8C8C8; color: #eee;*/
930    /*background: #5F80AE url(../img/fresh.designbody.bg.png) repeat-y top left;*/
931    background-image: url(../img/fresh.design/bg.footer.png);
932    background-repeat: repeat-x;
933    background-position: top left;
934    background-color: #5D7EAB; /* ehemals #305690 als fallback */
935
936    position: relative;
937    min-height: 58px; /* eigentlich height:, aber große Schriftgroessen fliegen dann raus */
938    height: 4em; /* Wenn jemand die Schriftgroessen aufdreht, ist die Box groß genug */
939
940    border-top: 1px solid #0B0F07;
941}
942
943* html #footer { height: 58px; } /* Damit IE keinen Quatsch macht */
944
945/* .border: Legacy zwecks Kompatibilitaet zu screen.css
946    span:   Dummyelement für IE6-Kompatibilität (vgl. fresh-iefixing.css) */
947#footer .border, #footer span {
948    display: none;
949}
950
951#footer ul, #footer li {
952    /* Alle Listen-Eigenschaften abschalten. */
953    list-style: none;
954    margin: 0; padding: 0;
955    display: inline;
956}
957
958#footer li a {
959    color: #000;
960    display: block;
961    position: absolute;
962    top: 0;
963    text-decoration: none;
964
965    color: #fff;
966    margin: 8px 20px;
967    padding: 5px;
968    /*min-width: 30%;*/
969    background-repeat: no-repeat;
970}
971
972#footer a:hover, #footer a:focus {
973    background-color: #b5c4d9;
974    color: #000;
975}
976
977#footer li.prev a {
978    left: 0;
979    background-position: left center;
980    background-image: url(../img/fresh.design/white-left.footer.png);
981    padding-left: 22px;
982}
983
984#footer li.next a {
985    right: 220px;
986    background-position: right center;
987    background-image: url(../img/fresh.design/white-right.footer.png);
988    padding-right: 22px;
989    text-align: right;
990}
991
992#footer li.up a {
993    right: 5px;
994    width: 195px;
995    background-position: right center;
996    background-image: url(../img/fresh.design/white-up.footer.png);
997    padding-right: 22px;
998    margin-left: 0;
999    margin-right: 0;
1000    text-align: right;
1001}
1002
1003/* Copyright-Hinweis. */
1004#copyright  {
1005    background-color: #fff; /* um bodybg auszublenden */
1006    margin: 0;
1007    padding: 17px 5%; /* 20% war vorher*/
1008
1009    font-size: 13px;
1010    font-weight: bold;
1011    color: #808f93;
1012    text-align: center;
1013}
1014
1015/***********************************************************************************\
1016**              __                                                                 **
1017**   ___  ___  / _|  eof -- end of file.                                           **
1018**  / _ \/ _ \| |_   Bitte beachten sie: Das technikum29-Design unterliegt dem     **
1019** |  __/ (_) |  _|  Copyright. Wenden sie sich bei Anfrage auf Benutzung bitte    **
1020**  \___|\___/|_|    an development $$ technikum29.de ($$ durch ein @ ersetzen)    **
1021**                                                                                 **
1022\***********************************************************************************/
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