/* CSS-RESET-TECHNIK */ @import url("reset.css"); body { margin: 0; padding: 0; color: #FFFFFF; background-image: url(../images/background_blue_gradient.png); background-color:#526B84; font-size: 11px; font-family: Verdana, sans-serif; /* Der einzige Weg, den DIV#container im uralten IE 5/6 zu zentrieren */ text-align: center; } table { margin-right:5px; } td { vertical-align:top; padding:5px; } .text { line-height:15px; } th { vertical-align:top; text-align:left; padding:5px; font-weight:bold; } a:link { color: #FFFFFF; } a:visited { color: #FFFFFF; } a:hover { color: #000000; } a:active { color: #000000; } /* This is for automatic typographic quoting */ /* use for quotes! */ q { quotes: "„" "“" "‚" "‘" } q:before { content: open-quote } q:after { content: close-quote } #no_ie6{ display: none; } .blogpic { float:left; padding: 5px 5px 5px 0; } .contentpic { float:right; padding: 5px; } /* =========================================================================== Container = Die eigentliche sichtbare Seite =========================================================================== */ #container { width: 100%; /* Die gesamte Seite soll 100% des Browserfenster breit werden */ margin: 0 auto; /* margin:auto zusammen mit width zentriert den container */ /*padding: 20px 0 20px 0;*/ text-align: left; /* ueberschreibt 'text-align:center' aus dem -Element */ } /* =========================================================================== Das DIV#content mit den drei Hauptspalten =========================================================================== */ #content { /*background: #FFFFFF;*/ } /* Floatende Element VOR denen, die sie umfliessen sollen! */ /* Floatende Element brauchen eine eigene Breite (width)! */ #warm_welcome { margin: 100px 0 0 19px; width: 520px; height: 300px; position: absolute; } #web20 { margin: 70px 0 0 580px; float: left; width: 300px; height: 480px; position: absolute; line-height:15px; border-radius-bottomleft:5px; border-radius-bottomright:5px; -moz-border-radius-bottomleft:5px; -moz-border-radius-bottomright:5px; border-width: 0px 1px 1px 1px; border-style: solid; border-color: #FFF; background-image: url(../images/10proz_white.png); overflow:hidden; } .web20_link { cursor:pointer; display:block; height:18px; border-top: 1px solid #FFFFFF; border-bottom: 1px solid #FFFFFF; background-repeat: no-repeat; background-position: right; background-color: #969FA7; font-size:10px; font-weight:bold; margin-top:1px; padding-top:2px; padding-left:8px; } .web20_link a:hover { background-color: #697581; } .web20_link a.selected { background-color: #697581; } .web20_content { padding:5px; padding-top:0px; line-height: 15px; color: #FFF; } .web20_content a { color: #FFF; padding-left:10px; text-decoration: none; background: url(../images/but_go.gif) left no-repeat; } .web20_content a:hover { text-decoration: underline; } .diverter { height:1px; width:100%; background-color:#fff; } .web20_hoverbox { visibility:hidden; position: absolute; top:300px; left:15px; z-index:99; width:263px; height:50px; background-color:#526B84; line-height:15px; border-radius:5px; border-radius:5px; -moz-border-radius:5px; -moz-border-radius:5px; border-width: 1px 1px 1px 1px; border-style: solid; border-color: #FFF; overflow:hidden; padding:5px; } #blog { margin: 230px 0 0 5px; float: left; position: absolute; height:288px; width:520px; } #CV { margin: 60px 0 0 1100px; float: left; position: absolute; height:453px; width:520px; } #skills { margin: 60px 0 0 2200px; float: left; position: absolute; height:453px; width:520px; } #arbeitsproben { margin: 60px 0 0 3300px; float: left; position: absolute; height:453px; width:520px; } #research { margin: 60px 0 0 4400px; float: left; position: absolute; height:453px; width:520px; } #press { margin: 60px 0 0 5500px; float: left; position: absolute; height:453px; width:280px; } #awards { margin: 60px 0 0 5850px; float: left; position: absolute; height:453px; width:280px; } #teachings { margin: 60px 0 0 6200px; float: left; position: absolute; height:453px; width:280px; } #privat { margin: 60px 0 0 6600px; float: left; position: absolute; height:453px; width:520px; } #kontakt { margin: 60px 0 0 8050px; float: left; position: absolute; height:453px; width:300px; } #impressum { margin: 60px 0 0 7700px; float: left; position: absolute; height:453px; width:300px; } #last_div { margin: 60px 0 0 8800px; float: left; position: absolute; height:1px; width:1px; } .white_back { background-color: #969FA7; padding: 3px; border: 1px solid white; } .white_headline_box { margin-top:10px; margin-left:10px; height:25px; width:100%; border:1px solid white; background-image: url(../images/30proz_white.png); } .dragger { position:absolute;top:17px;right:-7px; cursor:move; } .white_box { width:100%; height:100%; margin-left: 10px; border:1px solid white; border-top:0px; border-radius-bottomleft:5px; border-radius-bottomright:5px; -moz-border-radius-bottomleft:5px; -moz-border-radius-bottomright:5px; background-image: url(../images/10proz_white.png); overflow:hidden; } .white_box ul { margin-left:14px; line-height:18px; list-style-type:circle; } .headlines { position: absolute; top:-20px; left:0px; /*position: absolute; top:0px; left:0px;*/ font-size: 90px; color: #FFFFFF; } .headline_welcome { position: absolute; top:-50px; left:-11px; color: #FFFFFF; font-size: 5em; height:120px; } .headlines_blue { position: absolute; top:-18px; left:0px; color: #2B3B4C; height:60px; width:350px; font-size: 3em; } .openclose { position:absolute;top:1px;right:1px; } .func_headline_box { /* moveable ! */ height:15px; border-width: 3px 1px 1px 1px; border-style: solid; border-color: #FFF; background-color: #FFF; } .func_box_resizer { /* div-resize-grabber */ width: 15px; height: 15px; position: absolute; bottom: -35px; right: -10px; cursor: se-resize; background-image: url(../images/button_resizer.png); } .content_smoother { padding:5px; line-height: 15px; color: #FFF; } .table_left_floater { float:left;margin-right:5px;margin-top:3px; } .capitals { margin-top:5px; font-weight:bold; font-style:italic; } /* =========================================================================== Header =========================================================================== */ #header { background-color:#FFFFFF; opacity: 0.3; filter:Alpha(opacity=30); height:51px; width:10000px; position:fixed; top:0px; left:0px; } #header-white-line { border-top:1px solid white; height:0px; width:10000px; position:fixed; top:50px; left:0px; } .portfolio { position:fixed; color: #FFFFFF; font-size: 4em; margin-top:11px; margin-left:9px; } h1 { color: #ffffff; font-size: 36px; /* Den margin des letzten Elements im DIV#header auf 0 setzen verhindert unschoene Luecke zum DIV#content! */ margin: 0; } h1 a:link, h1 a:hover, h1 a:visited { color: #ffffff; text-decoration: none; } #throbber_container { position:fixed; top:0px; width:100%; height:0px; margin: 20px; text-align: center; } /* =========================================================================== Footer =========================================================================== */ #footer { position:fixed; bottom:0px; width:10000px; height:30px; background-color:#FFFFFF; opacity: 0.3; filter:Alpha(opacity=30, style=0); padding: 0 0px; /*background:#A45C30;*/ } #footer-white-line { border-bottom:1px solid white; height:0px; width:10000px; position:fixed; bottom:29px; left:0px; } #footer-nav { /* Den margin des ersten Elments im DIV#header auf 0 setzen verhindert unschoene Luecke zum DIV#content! */ position:fixed; bottom:0px; width:100%; height:0px; margin: 20px; font-variant: small-caps; color: #fff; text-align: center; } #footer-nav a:link, #footer a:hover, #footer a:visited { color: #FFFFFF; } /* ==================================================== */ /* Navigation */ /* ==================================================== */ #navbar { /*float: left;*/ position: fixed; right: 120px; top: 24px; width: 220px; } #language_bar { position: fixed; right: 20px; top: 26px; width: 80px; } ul#navigation { /* Grundstyling Navigation */ /*background-image: url(../images/30proz_white.png);*/ background-color: #2B3C4B; border: 1px solid white; border-top: 0px; border-radius-bottomleft:5px; border-radius-bottomright:5px; -moz-border-radius-bottomleft:5px; -moz-border-radius-bottomright:5px; font-size: 1.1em; list-style-type: none; margin: 0px; padding: 10px; } ul#navigation li { /* Listenelemente linksb¸ndig (=horizontal) anordnen */ /*float: left;*/ position: relative; } ul#navigation li a, ul#navigation li a:visited { /* Grundstyling Text-Links */ color: #fff; display: block; padding: 2px 15px 6px 0; text-decoration: none; } ul#navigation li a.current { /* Aktiven Punkt highlighten */ color: #000; } ul#navigation li ul { /* Alle Unterlisten erstmal ausblenden */ display: none; list-style-type: none; margin: 0; padding: 0; } ul#navigation li:focus a, ul#navigation li:hover a, ul#navigation li a:focus, ul#navigation li a:hover { /* Roll-Over-Effekt */ /*background: #fff;*/ color: #000; background-image: url(../images/hover_ani_Nav.gif); background-repeat:repeat-x; /*background-position:-4px 4px;*/ } ul#navigation li:hover ul, ul#navigation li a:hover ul { /* Untermenues einblenden */ /*background-image: url(../images/30proz_white.png); border: 1px solid white;*/ background-color:#FFF; padding: 5px; display: block; left: 150px; position: absolute; top: 2px; } ul#navigation li:hover ul li ul, ul#navigation li a:hover ul li a ul { height: 0; position: absolute; visibility: hidden; width: 0; } ul#navigation li:hover ul li a, ul#navigation li a:hover ul li a { /*background: #fff;*/ color: #000; display: block; height: auto; padding-right: 0; padding-left:5px; width: 120px; } ul#navigation li:hover ul li a:hover, ul#navigation li a:hover ul li a:hover { /*background: #fff;*/ color: #526B84; } ul#navigation li a.current { color: #000; } ul#navigation li:hover ul li a.current, ul#navigation li a:hover ul li a.current { color: #000; } /* =========================================================================== Weitere Klassen =========================================================================== */ /* ================= */ .rechtsfluss { float: right; margin-left: 8px; } .linksfluss { float: left; margin-right: 8px; } /* BR#clearfloat bewirkt, das der DIV#content sauber alle 3 Spalten komplett beinhaltet und sich nix ueberlappt */ .clearfloat { clear:both; height:0; font-size: 1px; line-height: 0px; } /* --------Forms and Inputs------------ */ input { border:1px #FFF solid; background:#727F8C; font-size:10px; font-weight:normal; text-decoration : none; color:#FFF; } .input_200 { border:1px #FFF solid; width:140px; padding-left: 3px; } .input_200_on { width:140px; padding-left: 3px; background:#FF9900; } select { width:140px; border:1px #FFF solid; background:#727F8C; font-size:10px; text-decoration : none; color:#FFF; } .select_on { background:#FF9900; } textarea { width:143px; border:1px #FFF solid; background:#727F8C; font-size :10px; text-decoration : none; color:#FFF; } .textarea_on { width:140px; border:1px #FFF solid; background:#FF9900; font-size:10px; text-decoration : none; color:#FFF; } .secondcolumn { width:140px; } .secondcolumn_off { width:140px; } .secondcolumn_on { background:#FF9900; width:140px; } .radio { border:0px; } .mini_submit { border:2px #FF9900 solid; background:#727F8C; background-color:#727F8C; color:#FFF; font-size:10px; font-weight:bold; } .achtung { border: 1px solid white; background-color:#FF9900; color:#FFF; padding:5px; margin:5px; line-height:15px; } /* ==================================================== */ /* iFrames for Content */ /* ==================================================== */ #iframe_content { text-align:left; line-height:15px; padding:10px; } #iframe_content ul { margin-left:14px; line-height:18px; list-style-type:circle; } .abstand { margin-bottom:10px; } #unsichtbare_inlines { display: none; }