source: t29-www/shared/css-v6/style.css @ 261

Last change on this file since 261 was 261, checked in by sven, 12 years ago

Some minor improvements:

  • template.php: Loading page specific CSS if present
  • messages.php: Documentation added
  • style.css: Precedence for correct display of old content
File size: 14.2 KB
Line 
1/* t29v6 Grey Style, 08.01.2012 */
2
3body {
4        background: #cbc5bd url("../img-v6/bg-v2.body.png") repeat-x;
5}
6
7.clear { clear: both; }
8
9/* Anpassungsstyles, die benoetigt werden damit der Text aussieht wie frueher */
10#content p { text-align: justify } /* !! */
11#content .center { text-align: center; }
12
13body, input { /* font */
14        font-family: "Trebuchet MS";
15}
16
17#content {
18        font-family: Verdana;
19        font-size: 15px;
20        line-height: 130%;
21        text-align: justify;
22}
23
24h2, html>body #page h2 {
25    font-weight: bold;
26    font-size: 160%;
27    line-height: 125%; /* wird sonst relativ zu falscher schriftgroesse vererbt */
28    margin: 0 0 0.7em 0;
29    padding: 0;
30}
31
32#content h2, #content h3, #content h4 {
33    /* Seit 04.01.2010: Neues Ueberschriftenlayout. Soll aber nur
34       auf Homepage genutzt werden, nicht etwa auf dev. oder so...! */
35    font-weight: normal;
36    font-family: Trebuchet Ms,Verdana,Dejavu Sans,Helvetica,Arial,sans-serif;
37    font-size: 180%;
38    border-bottom: 3px double #aaa;
39}
40
41#content h3 {
42    /* Und das gleiche auch fuer Unter-Ueberschriften */
43    font-size: 140%;
44        margin: 2em 0 0.3em;
45}
46
47#content h4 {
48        font-weight: bold;
49        font-size: 100%;
50        border-bottom: 1px solid #aaa;
51        margin: 2.3em 0 1em;
52}
53
54::-moz-selection{background:#07a;color:#fff;text-shadow:none}
55::selection{background:#07a;color:#fff;text-shadow:none}
56
57
58nav.horizontal a, nav.side .u1 > li > a {
59        /*font-family: "Futura Std Book", "Trebuchet MS";*/
60        font-family: "Trebuchet MS";
61}
62
63#footer-background-container {
64        background: url("../img-v6/bg-v2.body-footer.png") bottom left repeat-x;
65        padding-bottom: 1px;
66}
67
68#container {
69        width: 1200px;
70        margin: 16px auto;
71        background-color: #f1f1f1;
72        position: relative;
73        padding-top: 104px;
74        overflow: hidden; /* #background-color-container */
75        box-shadow: 1px 1px 2px 1px rgba(0,0,0,.5);
76}
77
78/* Generelle Grundlagen */
79h1, h2 { margin: 0; padding: 0; }
80html.js .no-js, html.no-js .js, hr { display: none; }
81nav li { display: inline; }
82nav a { display: block; text-decoration: none; }
83nav a:focus { outline: none; }
84
85/* Header */
86header.banner {
87        position: absolute;
88        top: 0; left: 0; /*z-index: 1;*//* aus wegen nav.horizontal klappmenue*/
89        height: 107px; width: 100%;
90        text-align: right;
91       
92        /*border-bottom: 1px solid #5d5c58;*/
93        background: url("../img-v6/line.header-footer.png") bottom left repeat-x;
94}
95
96h1 { display: inline; }
97h1 a {
98        position: absolute;
99        top: 10px; left: 10px; z-index: 2;
100        text-indent: -9999px;
101        width: 310px; height: 84px;
102        background: url("../img-v6/banner.png");
103}
104
105/* Horizontal Navigation (Hauptnavigation) */
106nav.horizontal {
107        position: absolute;
108        right: 0; bottom: 0;
109        /*margin: 1em;*/ margin-right: 2em;
110}
111
112nav.horizontal .u1 > li {
113        display: inline-block;
114        /*margin-left: 1em;*/
115        position: relative;
116}
117
118nav.horizontal .u1 > li > a {
119        padding: 7px;
120        margin-bottom: 3px;
121}
122
123nav.horizontal .u1 > li.has-submenu > a {
124        padding-bottom: 10px;
125        margin-bottom: 0;
126}
127
128nav.horizontal .u1 > li:hover > a {
129        background-color: white;
130}
131
132nav.horizontal a {
133        /*font: 15px "Futura Std Book";*/
134        font-size: 15px;
135        font-weight: bold;
136        text-transform: uppercase;
137        /*color: #124b6b;*/
138}
139
140/* Aufklappnavigation der Horizontalen Navi */
141nav.horizontal .u2 { display: none; }
142nav.horizontal .u1 > li:hover .u2, nav.horizontal .u1 li.dev-force-open .u2 {
143        display: block;
144}
145
146
147nav.horizontal .u2 {
148        position: absolute;
149        z-index: 100; /* Ueber allem */
150        left: 0; /* top: 0; */
151        text-align: left;
152        width: 23em;
153        background-color: white;
154        border-bottom: 3px solid #888;
155}
156
157nav.horizontal .u2 a {
158        padding: .2em .9em;
159}
160
161nav.horizontal .u2 a:hover {
162        background-color: #efefef;
163}
164
165nav.horizontal .u2 > li.has-submenu {
166        display: block;
167        margin: 1em 0;
168}
169
170nav.horizontal .u3 > li > a {
171        padding-left: 1.9em;
172        font-weight: normal;
173}
174
175nav.horizontal ul.rich-text a {
176        padding-top: .9em; padding-bottom: .9em;
177}
178
179nav.horizontal ul.rich-text a:after {
180        content: ".";
181        display: block;
182        clear: left;
183        height: 0; line-height: 0;
184        visibility: hidden;
185}
186
187nav.horizontal ul.rich-text img {
188        float: left;
189        margin-right: 10px;
190}
191
192nav.horizontal ul.rich-text a:hover img {
193        box-shadow: 0px 0px 4px #1a5160;
194        /*outline: 1px solid #1a5160;*/
195}
196
197nav.horizontal ul.rich-text a em {
198        display: block;
199        color: black;
200        text-transform: none;
201        font-weight: normal;
202        font-style: normal;
203        font-size: 13px; /* like body */
204}
205
206/* Farben */
207nav.horizontal a, nav.top li.active a, nav.side a {
208        color: #1a5160;
209        font-weight: bold;
210        opacity: .8;
211}
212
213/* Topnavigation (Nebenheadernavigation) */
214nav.top {
215        position: absolute;
216        right: 0; top: 0;
217        margin: 1em; margin-right: 2em;
218}
219
220nav.top, nav.top input, nav.top a {
221        /*font: 15px "Futura Std Medium";*/
222        font-size: 15px;
223        text-transform: uppercase;
224        color: #757575;
225        font-weight: bold;
226}
227
228nav.top form, nav.top ul {
229        display: inline-block;
230        position: relative;
231}
232nav.top input.text, nav.top input.text.defaultvalue {
233        border: 1px solid transparent; background: transparent;
234        /*width: 4em; text-align: right;
235        padding-right: 22px;*/
236        border: 2px solid #d8d8d8;
237        width: 10em; padding-left: .3em;
238}
239nav.top input.text:focus, nav.top input.text.no-defaultvalue {
240/*      text-align: left; width: 8em;
241        border: 1px solid #bababa;*/
242        background-color: white;
243        text-transform: none;
244        color: #000;
245}
246nav.top input.button {
247        display: block;
248        text-indent: -999px; border: none;
249        background: url("../img-v6/lupe.png") no-repeat;
250        width: 13px; height: 13px;
251        position: absolute; right: 0px; top: 4px;
252       
253        display: none;
254}
255
256nav.top a {
257        display: inline-block;
258        margin-right: 1em;
259}
260nav.top li.active a {
261        /*color: #124b6b;*/
262        border-bottom: 2px solid #6F2A41;
263}
264
265/* Content */
266#content {
267        padding: 30px 40px 60px;
268        width: 860px;
269        float: left;
270        color: black;
271}
272
273/* Hintergrund nach ganz unten durchschleifen */
274#background-color-container {
275        background-color: #dfeaf0;
276        float: left;
277        width: 100%;
278        position: relative;
279        left: 940px;
280}
281
282section.sidebar, #content {
283        position: relative;
284        left: -940px;
285}
286
287/* Rechtsnavi */
288section.sidebar {
289        width: 210px;
290        padding: 25px; padding-top: 35px;
291        /*background-color: #dfeaf0;*/  /* Die uebernimmt der Container*/
292        float: left;
293}
294
295/* Navigationsleiste */
296nav.side .guide-only { display: none; } /* Nur in nav.guide anzeigen */
297
298nav.side .u1 > li > a {
299        /*font: 18px "Futura Std Book";*/
300        font-size: 21px; font-weight: bold;
301        text-transform: uppercase;
302        /*color: #124b6b;*/
303        margin: 0 -25px;
304        padding: 5px 25px;
305}
306
307nav.side .u2 {
308        margin: 0 0 20px 0;
309}
310
311nav.side .u2 > li > a {
312        text-transform: uppercase;
313        font-size: 15px;
314        margin: 0 -25px;
315        padding: 5px 25px;
316}
317
318nav.side .u2 > li.active > a {
319        color: #E90015; /* hellblau:  #40a8e2; */
320        font-weight: bold;
321}
322
323nav.side .u3 {
324        margin-left: 12px;
325        margin-bottom: 12px;
326}
327
328nav.side .u3 { display: none; }
329nav.side .u2 > li.active .u3 { display: block; }
330
331nav.side .u3 > li > a {
332        font-size: 14px;
333        margin: 0 -25px 0 -40px;
334        padding: 1px 25px 1px 40px;
335        opacity: .9;
336        text-transform: uppercase;
337}
338
339nav.side .u3 > li.active a {
340        color: #e90015;
341        font-weight: bold;
342}
343
344nav a:hover, nav ul.rich-text li:hover a, nav a:focus, nav ul.rich-text li:focus a {
345        color: #A12A40;
346        background-color: white;
347}
348
349/* Nav-Hover-Transistions */
350nav a, nav a:link, nav a:visited, nav a:hover, nav a:focus {
351        /*-webkit-transition: color,background-color .18s cubic-bezier(0.420, 0.000, 0.580, 1.000);
352        -moz-transition: color,background-color .25s cubic-bezier(0.420, 0.000, 0.580, 1.000);
353        -ms-transition: color,background-color .25s cubic-bezier(0.420, 0.000, 0.580, 1.000);
354        -o-transition: color,background-color .25s cubic-bezier(0.420, 0.000, 0.580, 1.000);
355        transition: color,background-color .25s cubic-bezier(0.420, 0.000, 0.580, 1.000);
356        */
357}
358
359
360/* Scroll-Zustände der Navigationsleiste
361 * Siehe Script, es gibt:
362 *   html.no-js             - Ausgangslage ohne Javascript
363 *   html.static-menu       - Default mit Javascript
364 *   html.fixed-menu        - Umgeschaltet auf fix
365 *   html.stick-top-menu    - Zwischensituation wenn fix und ganz hochgescrollt (wie static-menu)
366 *   html.stick-bottom-menu - Zwischensituation wenn fix und ganz runtergescrollt (absolut positioniert)
367 */
368html.static-menu nav.side, html.stick-top-menu nav.side {
369        /* Ein/Ausblendeffekt fuer .get-menu-Button erzeugen  */
370        /* http://www.colorzilla.com/gradient-editor */
371        background: -moz-linear-gradient(top,  rgba(223,234,240,1) 0%, rgba(223,234,240,1) 82%, rgba(223,234,240,0) 100%); /* FF3.6+ */
372        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(223,234,240,1)), color-stop(82%,rgba(223,234,240,1)), color-stop(100%,rgba(223,234,240,0))); /* Chrome,Safari4+ */
373        background: -webkit-linear-gradient(top,  rgba(223,234,240,1) 0%,rgba(223,234,240,1) 82%,rgba(223,234,240,0) 100%); /* Chrome10+,Safari5.1+ */
374        background: -o-linear-gradient(top,  rgba(223,234,240,1) 0%,rgba(223,234,240,1) 82%,rgba(223,234,240,0) 100%); /* Opera 11.10+ */
375        background: -ms-linear-gradient(top,  rgba(223,234,240,1) 0%,rgba(223,234,240,1) 82%,rgba(223,234,240,0) 100%); /* IE10+ */
376        background: linear-gradient(top,  rgba(223,234,240,1) 0%,rgba(223,234,240,1) 82%,rgba(223,234,240,0) 100%); /* W3C */
377        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dfeaf0', endColorstr='#00dfeaf0',GradientType=0 ); /* IE6-9 */
378
379        padding-bottom: 200%; /* sic! die 82% aus dem gradient muessen unterhalb der Navi anfangen*/
380        position: relative; z-index: 10;
381}
382
383html.fixed-menu nav.side {
384        position: fixed;
385        width: 210px;
386        top: 15px;
387}
388
389html.stick-bottom-menu nav.side {
390        position: absolute;
391        width: 210px;
392        /* Top-Wert durch JS gesetzt. */
393}
394
395/* Buttons in Navigationsleiste */
396section.sidebar .button {
397        display: block;
398        cursor: pointer;
399
400        /*font: 14px "Myriad Pro Light";*/
401        font-size: 14px;
402        text-transform: uppercase;
403        color: #a07f60;
404        font-weight: bold;
405}
406
407section.sidebar .button:hover {
408        background-color: white;
409}
410
411section.sidebar .button.get-menu {
412        /* Menü-runterhol-Button */
413        position: fixed; z-index: 1;
414        bottom: 0; margin: 0 -25px;
415        padding: 15px 25px;
416        text-align: center; width: 210px;
417}
418
419section.sidebar .button.collapse-menu {
420        /* Ein/Ausklapp-Button */
421        margin: 3em -25px 0 -25px;
422        padding: 5px 25px;
423}
424
425/* Footer */
426footer {
427        clear: both;
428        height: 104px; width: 100%;
429        /* temp. um Navi-Kram zu uebermalen: */
430        position: relative; z-index: 20;
431       
432        /*border-top: 1px solid #5d5c58;*/
433        background: #f1f1f1 url("../img-v6/line.header-footer.png") top left repeat-x;
434}
435
436/* "Beam Navigation" nav.guide */
437nav.guide {
438        position: absolute;
439        z-index: 5; /* ueber nav.rel */
440        top: -5px; left: -5px;
441        width: 900px; margin: 0 25px; /* wie #content, in breite ein paar px mehr wegen ueberstehenden bullets */
442}
443nav.guide ul, nav.guide li { display: inline; }
444nav.guide a {
445        float: left;
446        position: relative;
447}
448
449nav.guide a:hover, nav.guide a:focus {
450        background-color: inherit; /* Overwrite nav a:hover bg white */
451}
452
453nav.guide .text {
454        display: block;
455        /*font: 12px "Futura Std Book";*/
456        font-size: 12px; font-weight: bold;
457        text-transform: uppercase;
458        color: #5d5c58;
459        position: absolute;
460        top: -19px; left: 0;
461        white-space: nowrap;
462}
463
464nav.guide a.higher-text .text {
465        /* Labeltexte, die die default dargestellten Texte (.visible)
466           beim Hovern ueberpinseln und daher hoeher dargestellt werden */
467        top: -34px;
468}
469
470nav.guide .bullet {
471        width: 0; height: 0;
472        border: 2px solid #5d5c58;
473        padding: 4px;
474        margin: 1px;
475        display: inline-block;
476        border-radius: 6px;
477        position: relative;
478}
479
480nav.guide .visible > a > .bullet {
481        border-width: 6px;
482        padding: 0;
483}
484
485nav.guide .bullet, nav.guide .text { visibility: hidden; }
486nav.guide li.visible > a > .bullet, nav.guide .visible > a >  .text,
487nav.guide a:hover .bullet, nav.guide a:hover  .text,
488nav.guide a:focus .bullet, nav.guide a:focus .text { visibility:visible; }
489
490/*
491html.csstransitions nav.guide .bullet, html.csstransitions nav.guide .text {
492        visibility: visible; opacity: 0;
493        -webkit-transition: opacity .25s cubic-bezier(0.420, 0.000, 0.580, 1.000);
494        -moz-transition: opacity .25s cubic-bezier(0.420, 0.000, 0.580, 1.000);
495        -ms-transition: opacity .25s cubic-bezier(0.420, 0.000, 0.580, 1.000);
496        -o-transition: opacity .25s cubic-bezier(0.420, 0.000, 0.580, 1.000);
497        transition: opacity .25s cubic-bezier(0.420, 0.000, 0.580, 1.000);
498}
499html.csstransitions nav.guide li.visible > a > .bullet, html.csstransitions nav.guide .visible > a >  .text,
500html.csstransitions nav.guide a:hover .bullet, html.csstransitions nav.guide a:hover  .text,
501html.csstransitions nav.guide a:focus .bullet, html.csstransitions nav.guide a:focus .text {
502        opacity: 1;
503        -webkit-transition: opacity .25s cubic-bezier(0.420, 0.000, 0.580, 1.000);
504        -moz-transition: opacity .25s cubic-bezier(0.420, 0.000, 0.580, 1.000);
505        -ms-transition: opacity .25s cubic-bezier(0.420, 0.000, 0.580, 1.000);
506        -o-transition: opacity .25s cubic-bezier(0.420, 0.000, 0.580, 1.000);
507        transition: opacity .25s cubic-bezier(0.420, 0.000, 0.580, 1.000);
508}
509*/
510
511nav.guide a:hover .bullet, nav.guide a:focus .bullet {
512
513}
514
515/*nav.guide .current > a > .text { color: #40a8e2; }*/
516
517/* Relationale Navigation */
518nav.rel {
519        height: 20px;
520        position: absolute;
521        top: 20px; left: 40px;
522        z-index: 0;
523}
524
525nav.rel a {
526        /*font: 12px "Futura Std Medium";*/
527        font-size: 12px;
528        color: #40a8e2;
529        text-transform: uppercase;
530        display: inline-block;
531}
532
533nav.rel strong { display: block; }
534
535nav.rel li  a {
536        /*float: left;
537        width: 45%; *//* per JS automatisch angepasst */
538        padding: 10px; margin-top: 3px; /* footer bg */
539}
540
541nav.rel .prev  a {
542        text-align: right;
543}
544nav.rel .next a {
545        text-align: left;
546}
547
548nav.rel a:hover {
549        background-color: #dfeaf0;
550}
551
552/* Footer Icon-Sammlung und so */
553footer .right {
554        position: absolute;
555        top: 2px;
556        right: 0;
557        width: 230px;
558        padding: 15px;
559        text-align: right;
560}
561
562footer .right img.logo {
563        float: right;
564        width:30px;
565        padding-left: 10px;
566        padding-right: 11px;
567}
568
569footer .right div.icons {
570        clear: left;
571        padding-top: 8px;
572}
573
574footer .right .icons a { opacity: .5; }
575footer .right .icons a:hover, footer .right .icons a:focus { opacity: 1; }
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