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

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

Footer verändert, Relationen eingebaut.

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