/* CSS Styles for Website dieVetters, Author Tim Reeves, Stand 28.07.05 */ /* For the xml parser the canvas is , not */ html { height: 100%; /* Gecko and Opera both need this, in html AND body */ width: 100%; background-color: #E5E5E5; margin: 0px; padding: 0px; overflow: hidden; } body { height: 100%; width: 100%; /* MSIE has a stupidly large default value */ background-color: #E5E5E5; text-align: center; /* For MSIE 5.x, der margin:auto bei Blockelementen missachtet */ margin: 0px; padding: 0px; overflow: auto; } table.mitte { width: 100%; height: 100%; margin: 0px; padding: 0px; border-style: none; } td.mitte { vertical-align: middle; /* This is the ONLY way to get vertical centering in CSS */ text-align: center; /* For MSIE 5.x, der margin:auto bei Blockelementen missachtet */ width: 100%; height: 100%; margin: 0px; padding: 0px; /* border: 1px solid #000000; INTERESSANTE MÖGLICHKEITEN */ } div.mitte { position: relative; margin: 0px auto; width: 935px; height: 533px; text-align: left; background-color: transparent; background-image: url(../images/hintergrund.png); background-repeat: no-repeat; background-position: 0px 0px; } div.links { position: absolute; top: 0px; left: 0px; width: 217px; height: 100%; background-color: #B8B8B8; } div.textlinks { position: absolute; /* top wird jeweils als style dazugegeben */ left: 31px; width: 174px; margin: 0px; padding: 0px; background-color: transparent; } div.einsmedium { position: absolute; top: 0px; right: 0px; width: 700px; height: 118px; background-color: #CECECE; } div.zweimedium { position: absolute; top: 137px; right: 0px; width: 700px; height: 118px; background-color: #CECECE; } div.dreimedium { position: absolute; top: 276px; right: 0px; width: 700px; height: 118px; background-color: #CECECE; } div.viermedium { position: absolute; top: 415px; right: 0px; width: 700px; height: 118px; background-color: #CECECE; } h2, h3, h4 { font-family: Arial, Helvetica, Geneva, Swiss, SunSans-Regular, sans-serif, Tahoma; color: #000000; text-decoration: none; } img { border-style: none; } /* h1 same as paragraph, used for seo */ p, h1, h5, ul, li, td, th, a { font-family: Arial, Helvetica, Geneva, Swiss, SunSans-Regular, sans-serif, Tahoma; color: #000000; text-decoration: none; } h2 { font-size: 18px; letter-spacing: 3px; margin: 0px 0px 8px 0px; padding: 10px 0px 0px 0px; } h3 { font-size: 16px; margin: 0px; } h1, p, td { font-size: 12px; } /* The margins and paddings order: top right bottom left */ h1, p { margin: 3px 0px; } div.textlinks p.impressum { text-align: center; font-size: 11px; margin: 3px 20px 3px 0px; } p.underbar { text-indent: -0.8em; margin: 4px 0px 12px 0.8em !important; } *.grau { color: #808080; } *.breit { line-height: 140%; } *.weit { line-height: 180%; } *.breiter { line-height: 150%; letter-spacing: 1px; } *.breitfett { line-height: 120%; letter-spacing: 1px; font-weight: bold; } *.normal { font-weight: normal; } *.platzoben { margin-top: 8px; } *.nobotmarg { margin-bottom: 0px; } /* Standard link style : white links */ a, a:link, a:visited, a:active, a:focus { color: white; font-size: 11px; font-weight: bold; letter-spacing: 2px; text-decoration: none; } /* Except on Hover */ a:hover { color: #666666; font-size: 11px; font-weight: bold; letter-spacing: 2px; text-decoration: none; } /* Special link style : as though current */ a.greylink, a.greylink:link, a.greylink:visited, a.greylink:active, a.greylink:focus { color: #666666; } /* This is for a current (non-klickable) link - look like a grey link */ *.curlink { color: #666666; font-size: 11px; font-weight: bold; letter-spacing: 2px; } /* Classes for Navigation */ div.mitte div a.eins, div.mitte div a.zwei, div.mitte div a.drei, div.mitte div a.vier { display: block; text-align: right; height: 118px; margin: 0px; padding: 3px 18px 0px 0px; background-repeat: no-repeat; background-position: 0px 0px; } a.eins, a.eins:link, a.eins:visited, a.eins:active, a.eins:focus { background-image: url(../images/einsmedium.png); } /* Except on Hover */ a.eins:hover { color: white; background-image: url(../images/einsmediumhover.jpg); } a.zwei, a.zwei:link, a.zwei:visited, a.zwei:active, a.zwei:focus { background-image: url(../images/zweimedium.png); } /* Except on Hover */ a.zwei:hover { color: white; background-image: url(../images/zweimediumhover.jpg); } a.drei, a.drei:link, a.drei:visited, a.drei:active, a.drei:focus { background-image: url(../images/dreimedium.png); } /* Except on Hover */ a.drei:hover { color: white; background-image: url(../images/dreimediumhover.jpg); } a.vier, a.vier:link, a.vier:visited, a.vier:active, a.vier:focus { background-image: url(../images/viermedium.png); } /* Except on Hover */ a.vier:hover { color: white; background-image: url(../images/viermediumhover.jpg); } /* Ab hier die Definitionen für Unterseiten */ div.mitte div.submenu { position: absolute; right: 0px; width: 700px; height: 20px; background-color: #CECECE; } div.mitte div.spekmenu { top: 0px; } div.mitte div.portmenu { top: 30px; } div.mitte div.philmenu { top: 60px; } div.mitte div.portmenulow { bottom: 60px; } div.mitte div.philmenulow { bottom: 30px; } div.mitte div.kontmenu { bottom: 0px; } div.mitte div a.submenu { display: block; text-align: right; height: 20px; margin: 0px; padding: 3px 18px 0px 0px; } div.mitte div.spektrum { position: absolute; top: 0px; right: 0px; width: 700px; height: 443px; background-color: transparent; /* png statt gif wäre 12kb statt 28kb - aber MSIE packt png mit Transparenz nicht */ background-image: url(../images/spektrum.gif); background-repeat: no-repeat; background-position: 0px 0px; } div.mitte div.portfolio { position: absolute; top: 30px; right: 0px; width: 700px; height: 443px; background-color: transparent; /* png statt gif wäre 12kb statt 28kb - aber MSIE packt png mit Transparenz nicht */ background-image: url(../images/portfolio.gif); background-repeat: no-repeat; background-position: 0px 0px; } div.mitte div.arbeiten { background-image: url(../images/arbeiten.gif); } div.mitte div.referenzen { background-image: url(../images/referenzen.gif); } div.mitte div.philosophie { position: absolute; top: 60px; right: 0px; width: 700px; height: 443px; background-color: transparent; /* png statt gif wäre 12kb statt 28kb - aber MSIE packt png mit Transparenz nicht */ background-image: url(../images/philosophie.gif); background-repeat: no-repeat; background-position: 0px 0px; } div.mitte div.philowie { background-image: url(../images/philo_wie.gif); } div.mitte div.philowas { background-image: url(../images/philo_was.gif); } div.mitte div.philowarum { background-image: url(../images/philo_warum.gif); } div.mitte div.philowann { background-image: url(../images/philo_wann.gif); } div.mitte div.kontakt { position: absolute; bottom: 0px; right: 0px; width: 700px; height: 443px; background-color: transparent; /* png statt gif wäre 12kb statt 28kb - aber MSIE packt png mit Transparenz nicht */ background-image: url(../images/kontakt-wir.gif); background-repeat: no-repeat; background-position: 0px 0px; } p.curritem { position: absolute; top: 3px; right: 18px; margin: 0px; padding: 0px; font-size: 11px; font-weight: bold; letter-spacing: 2px; color: #666666; } *.mainindent { margin-left: 24px; } p.spruch { position: absolute; top: 75px; left: 0px; line-height: 32px; vertical-align: middle; font-size: 14px; font-weight: bold; letter-spacing: 1px; } div.wir { position: absolute; top: 163px; left: 456px; width: 232px; height: 280px; /* Genug auch für den Absatz unter den Bildern */ } a.juergen, a.juergen:link, a.juergen:visited, a.juergen:active, a.juergen:focus { display: block; position: absolute; top: 0px; left: 0px; width: 116px; height: 168px; margin: 0px; padding: 0px; background-image: url(../images/juergen_unscharf.jpg); background-repeat: no-repeat; background-position: 0px 0px; } a.juergen:hover { background-image: url(../images/juergen_vetter.jpg); } a.marcus, a.marcus:link, a.marcus:visited, a.marcus:active, a.marcus:focus { display: block; position: absolute; top: 0px; left: 116px; width: 116px; height: 168px; margin: 0px; padding: 0px; background-image: url(../images/marcus_unscharf.jpg); background-repeat: no-repeat; background-position: 0px 0px; } a.marcus:hover { background-image: url(../images/marcus_vetter.jpg); } p.mehr { position: absolute; top: 180px; left: 0px; font-weight: bold; font-size: 11px; } div.fliesstext { position: absolute; top: 150px; left: 24px; width: 412px; } div.fliesstext h1, div.fliesstext p { margin: 3px 0px 6px 0px; } div.fliesstext a, div.fliesstext a:link, div.fliesstext a:visited, div.fliesstext a:active, div.fliesstext a:focus, div.fliesstext a:hover { font-size: inherit; } img.spekbild { position: absolute; top: 158px; left: 9px; } img.portbild { position: absolute; top: 163px; left: 456px; } img.arbeitsbild { position: absolute; top: 160px; left: 355px; } a.ambild, a.ambild:link, a.ambild:visited, a.ambild:active, a.ambild:focus, a.ambild:hover { display: block; position: absolute; top: 383px; width: 48px; height: 39px; margin: 0px; padding: 0px; background-repeat: no-repeat; background-position: 0px 0px; } a.ambildcur, a.ambildcur:link, a.ambildcur:visited, a.ambildcur:active, a.ambildcur:focus, a.ambildcur:hover { top: 382px; width: 46px; border: 1px solid black; } a.ambild01, a.ambild01:link, a.ambild01:visited, a.ambild01:active, a.ambild01:focus, a.ambild01:hover { left: 10px; background-image: url(../images/arbeiten/arbmenu01.png); } a.ambild02, a.ambild02:link, a.ambild02:visited, a.ambild02:active, a.ambild02:focus, a.ambild02:hover { left: 58px; background-image: url(../images/arbeiten/arbmenu02.png); } a.ambild03, a.ambild03:link, a.ambild03:visited, a.ambild03:active, a.ambild03:focus, a.ambild03:hover { left: 106px; background-image: url(../images/arbeiten/arbmenu03.jpg); } a.ambild04, a.ambild04:link, a.ambild04:visited, a.ambild04:active, a.ambild04:focus, a.ambild04:hover { left: 154px; background-image: url(../images/arbeiten/arbmenu04.jpg); } a.ambild05, a.ambild05:link, a.ambild05:visited, a.ambild05:active, a.ambild05:focus, a.ambild05:hover { left: 202px; background-image: url(../images/arbeiten/arbmenu05.png); } a.ambild06, a.ambild06:link, a.ambild06:visited, a.ambild06:active, a.ambild06:focus, a.ambild06:hover { left: 250px; background-image: url(../images/arbeiten/arbmenu06.jpg); } a.ambild07, a.ambild07:link, a.ambild07:visited, a.ambild07:active, a.ambild07:focus, a.ambild07:hover { left: 298px; background-image: url(../images/arbeiten/arbmenu07.jpg); } a.ambild08, a.ambild08:link, a.ambild08:visited, a.ambild08:active, a.ambild08:focus, a.ambild08:hover { left: 346px; background-image: url(../images/arbeiten/arbmenu08.jpg); } a.ambild09, a.ambild09:link, a.ambild09:visited, a.ambild09:active, a.ambild09:focus, a.ambild09:hover { left: 394px; background-image: url(../images/arbeiten/arbmenu09.jpg); } a.ambild10, a.ambild10:link, a.ambild10:visited, a.ambild10:active, a.ambild10:focus, a.ambild10:hover { left: 442px; background-image: url(../images/arbeiten/arbmenu10.png); } a.ambild11, a.ambild11:link, a.ambild11:visited, a.ambild11:active, a.ambild11:focus, a.ambild11:hover { left: 490px; background-image: url(../images/arbeiten/arbmenu11.png); } a.ambild12, a.ambild12:link, a.ambild12:visited, a.ambild12:active, a.ambild12:focus, a.ambild12:hover { left: 538px; background-image: url(../images/arbeiten/arbmenu12.jpg); } a.ambild13, a.ambild13:link, a.ambild13:visited, a.ambild13:active, a.ambild13:focus, a.ambild13:hover { left: 586px; background-image: url(../images/arbeiten/arbmenu13.jpg); } div.mitte div.portfolio div.fliesstext { width: 288px; } div.mitte div.portfolio div.bildnein { position: absolute; top: 312px; left: 24px; width: 288px; height: 40px; background-image: none; background-color: transparent; } div.mitte div.portfolio div.bildwahl { position: absolute; top: 335px; right: 368px; width: auto; height: 20px; margin: 0px; padding: 0px; background-image: none; background-color: transparent; }