Changeset 269 in t29-www for shared/css-v6/style.css
- Timestamp:
- Jun 1, 2012, 7:19:51 PM (12 years ago)
- File:
-
- 1 edited
Legend:
- Unmodified
- Added
- Removed
-
shared/css-v6/style.css
r265 r269 1 /* t29v6 Grey Style, 08.01.2012 */2 3 body {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 13 body, 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 24 h2, 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 nur34 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 58 nav.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 */79 h1, h2 { margin: 0; padding: 0; }80 html.js .no-js, html.no-js .js, hr { display: none; }81 nav li { display: inline; }82 nav a { display: block; text-decoration: none; }83 nav a:focus { outline: none; }84 85 /* Header */86 header.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 96 h1 { display: inline; }97 h1 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) */106 nav.horizontal {107 position: absolute;108 right: 0; bottom: 0;109 /*margin: 1em;*/ margin-right: 2em;110 }111 112 nav.horizontal .u1 > li {113 display: inline-block;114 /*margin-left: 1em;*/115 position: relative;116 }117 118 nav.horizontal .u1 > li > a {119 padding: 7px;120 margin-bottom: 3px;121 }122 123 nav.horizontal .u1 > li.has-submenu > a {124 padding-bottom: 10px;125 margin-bottom: 0;126 }127 128 nav.horizontal .u1 > li:hover > a {129 background-color: white;130 }131 132 nav.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 */141 nav.horizontal .u2 { display: none; }142 nav.horizontal .u1 > li:hover .u2, nav.horizontal .u1 li.dev-force-open .u2 {143 display: block;144 }145 146 147 nav.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 157 nav.horizontal .u2 a {158 padding: .2em .9em;159 }160 161 nav.horizontal .u2 a:hover {162 background-color: #efefef;163 }164 165 nav.horizontal .u2 > li.has-submenu {166 display: block;167 margin: 1em 0;168 }169 170 nav.horizontal .u3 > li > a {171 padding-left: 1.9em;172 font-weight: normal;173 }174 175 nav.horizontal ul.rich-text a {176 padding-top: .9em; padding-bottom: .9em;177 }178 179 nav.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 187 nav.horizontal ul.rich-text img {188 float: left;189 margin-right: 10px;190 }191 192 nav.horizontal ul.rich-text a:hover img {193 box-shadow: 0px 0px 4px #1a5160;194 /*outline: 1px solid #1a5160;*/195 }196 197 nav.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 */207 nav.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) */214 nav.top {215 position: absolute;216 right: 0; top: 0;217 margin: 1em; margin-right: 2em;218 }219 220 nav.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 228 nav.top form, nav.top ul {229 display: inline-block;230 position: relative;231 }232 nav.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 }239 nav.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 }246 nav.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 256 nav.top a {257 display: inline-block;258 margin-right: 1em;259 }260 nav.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 282 section.sidebar, #content {283 position: relative;284 left: -940px;285 }286 287 /* Rechtsnavi */288 section.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 */296 nav.side .guide-only { display: none; } /* Nur in nav.guide anzeigen */297 298 nav.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 307 nav.side .u2 {308 margin: 0 0 20px 0;309 }310 311 nav.side .u2 > li > a {312 text-transform: uppercase;313 font-size: 15px;314 margin: 0 -25px;315 padding: 5px 25px;316 }317 318 nav.side .u2 > li.active > a {319 color: #E90015; /* hellblau: #40a8e2; */320 font-weight: bold;321 }322 323 nav.side .u3 {324 margin-left: 12px;325 margin-bottom: 12px;326 }327 328 nav.side .u3 { display: none; }329 nav.side .u2 > li.active .u3 { display: block; }330 331 nav.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 339 nav.side .u3 > li.active a {340 color: #e90015;341 font-weight: bold;342 }343 344 nav 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 */350 nav 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 Navigationsleiste361 * Siehe Script, es gibt:362 * html.no-js - Ausgangslage ohne Javascript363 * html.static-menu - Default mit Javascript364 * html.fixed-menu - Umgeschaltet auf fix365 * 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 */368 html.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 383 html.fixed-menu nav.side {384 position: fixed;385 width: 210px;386 top: 15px;387 }388 389 html.stick-bottom-menu nav.side {390 position: absolute;391 width: 210px;392 /* Top-Wert durch JS gesetzt. */393 }394 395 /* Buttons in Navigationsleiste */396 section.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 407 section.sidebar .button:hover {408 background-color: white;409 }410 411 section.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 419 section.sidebar .button.collapse-menu {420 /* Ein/Ausklapp-Button */421 margin: 3em -25px 0 -25px;422 padding: 5px 25px;423 }424 425 section.sidebar.bottom {426 position: absolute;427 bottom: 0; left: 0;428 }429 430 section.sidebar.bottom .button.get-menu {431 position: static;432 margin-bottom: -25px;433 }434 435 html.button-stick-bottom section.sidebar.top .button.get-menu {436 display: none;437 }438 439 /* Footer */440 footer {441 clear: both;442 height: 104px; width: 100%;443 /* temp. um Navi-Kram zu uebermalen: */444 position: relative; z-index: 20;445 446 /*border-top: 1px solid #5d5c58;*/447 background: #f1f1f1 url("../img-v6/line.header-footer.png") top left repeat-x;448 }449 450 /* "Beam Navigation" nav.guide */451 nav.guide {452 position: absolute;453 z-index: 5; /* ueber nav.rel */454 top: -5px; left: -5px;455 width: 900px; margin: 0 25px; /* wie #content, in breite ein paar px mehr wegen ueberstehenden bullets */456 }457 nav.guide ul, nav.guide li { display: inline; }458 nav.guide a {459 float: left;460 position: relative;461 }462 463 nav.guide a:hover, nav.guide a:focus {464 background-color: inherit; /* Overwrite nav a:hover bg white */465 }466 467 nav.guide .text {468 display: block;469 /*font: 12px "Futura Std Book";*/470 font-size: 12px; font-weight: bold;471 text-transform: uppercase;472 color: #5d5c58;473 position: absolute;474 top: -19px; left: 0;475 white-space: nowrap;476 }477 478 nav.guide a.higher-text .text {479 /* Labeltexte, die die default dargestellten Texte (.visible)480 beim Hovern ueberpinseln und daher hoeher dargestellt werden */481 top: -34px;482 }483 484 nav.guide .bullet {485 width: 0; height: 0;486 border: 2px solid #5d5c58;487 padding: 4px;488 margin: 1px;489 display: inline-block;490 border-radius: 6px;491 position: relative;492 }493 494 nav.guide .visible > a > .bullet {495 border-width: 6px;496 padding: 0;497 }498 499 nav.guide .bullet, nav.guide .text { visibility: hidden; }500 nav.guide li.visible > a > .bullet, nav.guide .visible > a > .text,501 nav.guide a:hover .bullet, nav.guide a:hover .text,502 nav.guide a:focus .bullet, nav.guide a:focus .text { visibility:visible; }503 504 /*505 html.csstransitions nav.guide .bullet, html.csstransitions nav.guide .text {506 visibility: visible; opacity: 0;507 -webkit-transition: opacity .25s cubic-bezier(0.420, 0.000, 0.580, 1.000);508 -moz-transition: opacity .25s cubic-bezier(0.420, 0.000, 0.580, 1.000);509 -ms-transition: opacity .25s cubic-bezier(0.420, 0.000, 0.580, 1.000);510 -o-transition: opacity .25s cubic-bezier(0.420, 0.000, 0.580, 1.000);511 transition: opacity .25s cubic-bezier(0.420, 0.000, 0.580, 1.000);512 }513 html.csstransitions nav.guide li.visible > a > .bullet, html.csstransitions nav.guide .visible > a > .text,514 html.csstransitions nav.guide a:hover .bullet, html.csstransitions nav.guide a:hover .text,515 html.csstransitions nav.guide a:focus .bullet, html.csstransitions nav.guide a:focus .text {516 opacity: 1;517 -webkit-transition: opacity .25s cubic-bezier(0.420, 0.000, 0.580, 1.000);518 -moz-transition: opacity .25s cubic-bezier(0.420, 0.000, 0.580, 1.000);519 -ms-transition: opacity .25s cubic-bezier(0.420, 0.000, 0.580, 1.000);520 -o-transition: opacity .25s cubic-bezier(0.420, 0.000, 0.580, 1.000);521 transition: opacity .25s cubic-bezier(0.420, 0.000, 0.580, 1.000);522 }523 */524 525 nav.guide a:hover .bullet, nav.guide a:focus .bullet {526 527 }528 529 /*nav.guide .current > a > .text { color: #40a8e2; }*/530 531 /* Relationale Navigation */532 nav.rel {533 height: 20px;534 position: absolute;535 top: 20px; left: 40px;536 z-index: 0;537 }538 539 nav.rel a {540 /*font: 12px "Futura Std Medium";*/541 font-size: 12px;542 color: #40a8e2;543 text-transform: uppercase;544 display: inline-block;545 }546 547 nav.rel strong { display: block; }548 549 nav.rel li a {550 /*float: left;551 width: 45%; *//* per JS automatisch angepasst */552 padding: 10px; margin-top: 3px; /* footer bg */553 }554 555 nav.rel .prev a {556 text-align: right;557 }558 nav.rel .next a {559 text-align: left;560 }561 562 nav.rel a:hover {563 background-color: #dfeaf0;564 }565 566 /* Footer Icon-Sammlung und so */567 footer .right {568 position: absolute;569 top: 2px;570 right: 0;571 width: 230px;572 padding: 15px;573 text-align: right;574 }575 576 footer .right img.logo {577 float: right;578 width:30px;579 padding-left: 10px;580 padding-right: 11px;581 }582 583 footer .right div.icons {584 clear: left;585 padding-top: 8px;586 }587 588 footer .right .icons a { opacity: .5; }589 footer .right .icons a:hover, footer .right .icons a:focus { opacity: 1; }
Note: See TracChangeset
for help on using the changeset viewer.