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 | |
---|
87 | body { |
---|
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; } |
---|
95 | img { 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 | |
---|
113 | h1 { |
---|
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 */ |
---|
131 | html>/**/body h1 { z-index: 3; } |
---|
132 | |
---|
133 | |
---|
134 | h1 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 | |
---|
151 | h1.de a { |
---|
152 | /* Deutscher Banner */ |
---|
153 | background-image: url(../img/banner/big.de.png); |
---|
154 | } |
---|
155 | |
---|
156 | h1.en a { |
---|
157 | /* English banner */ |
---|
158 | background-image: url(../img/banner/big.en.png); |
---|
159 | } |
---|
160 | |
---|
161 | h1.int a { |
---|
162 | /* International banner (Deutsch grosse Schrift, englisch klein drunter) */ |
---|
163 | background-image: url(../img/banner/int.jpg); |
---|
164 | } |
---|
165 | |
---|
166 | h1.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 | |
---|
171 | h1.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 | |
---|
177 | h1 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 | |
---|
195 | h1.de-v3 { |
---|
196 | background-image: url(../img/fresh.design/freshbanner-v3.bg.png); |
---|
197 | } |
---|
198 | |
---|
199 | h1.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 | |
---|
345 | html>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 -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 */ |
---|
708 | html>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 | |
---|
820 | h2, 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 | |
---|
850 | p { text-align: justify; } |
---|
851 | |
---|
852 | a:link, a:visited { |
---|
853 | color: #224B88; |
---|
854 | text-decoration: underline; |
---|
855 | } |
---|
856 | |
---|
857 | a: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 | |
---|
875 | html>body a.arrow, |
---|
876 | html>body a.go { |
---|
877 | background-position: center left; |
---|
878 | background-repeat: no-repeat; |
---|
879 | padding-left: 13px; |
---|
880 | } |
---|
881 | |
---|
882 | html>body a.arrow:link, |
---|
883 | html>body a.arrow:visited, |
---|
884 | html>body a.go:link, |
---|
885 | html>body a.go:visited { |
---|
886 | background-image: url(../img/fresh.design/arrowbg.a.png); |
---|
887 | } |
---|
888 | |
---|
889 | html>body a.arrow:hover, |
---|
890 | html>body a.arrow:active, |
---|
891 | html>body a.arrow:focus, |
---|
892 | html>body a.go:hover, |
---|
893 | html>body a.go:active, |
---|
894 | html>body a.go:focus { |
---|
895 | background-image: url(../img/fresh.design/arrowbg-hot.a.png); |
---|
896 | } |
---|
897 | |
---|
898 | html>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 | |
---|
910 | ul.nav, ul#nav { |
---|
911 | list-style: none; |
---|
912 | padding: 0; |
---|
913 | } |
---|
914 | |
---|
915 | ul.nav li, ul#nav li { |
---|
916 | margin: 0; |
---|
917 | padding: 0; |
---|
918 | } |
---|
919 | |
---|
920 | ul.nav li a, ul#nav li a { |
---|
921 | padding-left: 13px; |
---|
922 | background-position: bottom left; |
---|
923 | background-repeat: no-repeat; |
---|
924 | } |
---|
925 | |
---|
926 | ul.nav li a:link, ul#nav li a:link, |
---|
927 | ul.nav li a:visited, ul#nav li a:visited { |
---|
928 | background-image: url(../img/double.a.png); |
---|
929 | } |
---|
930 | |
---|
931 | ul.nav li a:hover, ul#nav li a:hover, |
---|
932 | ul.nav li a:active, ul#nav li a:active, |
---|
933 | ul.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 | \***********************************************************************************/ |
---|