Portfolio: 3D/ Animation

	3D/ Animation

Zuletzt aktualisiert: 19. März 2007

BOWCRAFT GmbH

(als Angestellter von tma pure

3D-Ansicht zu Anwendungsbeispielen von BOWCRAFT GmbH

-Produkten. Dieses Bild wurde im Produkt-Prospekt (2007) der Firma verwendet.

3D-Umsetzung eines Dachstuhls

Höhn Abwassertechnik GmbH (Produkt-CD)

(als Angestellter von tma pure

Extrem aufwendige Umsetzung zur Vorgehensweise der Firma Höhn Abwassertechnik GmbH

bei Problemen mit Rohrleitungen und Abwasser im und um das Haus.

Screenshots der Animation

Während der Entwicklungsphase...

Die Animation beinhaltet nicht nur eine sehr schöne, dynamische Kamerafahrt, sondern auch noch weiche Überblendungen, was in der Folge den ganzen Film noch geschmeidiger wirken läßt.
Die Produkt-CD startet nach dem Einlegen in das CD/DVD-Laufwerk automatisch und im Vollbildmodus.

Eingesetzte Techniken/ Effekte sind (u.a.): Individuelle Objektmodellierung, Querschnitte (bei Objekten und Modellen), Explosionszeichnung (3D-Darstellung), realistische Texturierung, Bump Mapping, verschiedene (umgebungsabhängige) Beleuchtungsmodelle, Reflektionen, Effekte [z.B. Darstellung von Bewegung (“Verwisch-Effekt”)], Dynamik, athmosphärische Effekte (z.b. Rauch, Nebel), Partikel (z.B. Regen), aufwendige Kamerafahrten, Überblendungen (z.B. bei Szenenwechsel)

Die technische Umsetzung der Benutzeroberfläche erfolgte komplett mit Flash^® MX 2004 Professional.

BKU Beton-Korrosionsschutz GmbH (Produkt-CD)

(als Angestellter von tma pure

Auch hier Produktion einer selbst startenden Produkt-CD (2005).

Screenshots der Animation

(CD-Hülle: Design von Thomas Margraf-Angotti (tma pure

)

In diesem Fall kann der Benutzer mit den Inhalten interagieren, indem er mit den Richtungstasten (auf dem Bildschirm oder direkt über die Tastatur) zwischen den Einzelszenen navigiert. Wenn der Betrachter beispielsweise den Text noch einmal hören möchte (CD beinhaltet auch Audio-Aufnahmen), so kann er zum Anfang dieser Sequenz zurückspringen.

Zwischendurch wird immer wieder eine Inhaltsübersicht der BKU Beton-Korrosionsschutz GmbH -Produkt-CD angezeigt - so wird nicht nur der Überblick gewahrt: Der Benutzer kann so direkt zu den Informationen gelangen, die für ihn relevant sind.

Eingesetzte Techniken/ Effekte sind (u.a.): Individuelle Objektmodellierung, Querschnitte (bei Objekten und Modellen), realistische Texturierung, Bump Mapping, Überblendungen (z.B. bei Szenenwechsel)

AQUAGENIUS® Holding AG (3D-Kugel für Website und Verfahrens-Prospekt)

(als Angestellter von tma pure


Nicht verwendete Variation:

Prospekt: Design von Thomas Margraf-Angotti (tma pure

)

Website: AQUAGENIUS Holding AG

3D-Test mit Shape

Mit einfachen Mitteln können ausdrucksstarke Symbole geschaffen werden!

Extrudiertes Shape

In diesem Beispiel habe ich mit der Maus in CorelDRAW (Hilfsmittel “Freihand”) eine geschlossene Form erstellt, diese mit dem Hilfsmittel “Form” verfeinert und anschließend als Adobe Illus- trator-Datei (“shape.ai”) gespeichert.

Diese Datei wird im 3D-Programm geöffnet und “extrudiert”; d.h. aus einer “flachen” Form machen wir durch hinzufügen einer Tiefeninformation ein (räumliches) 3D-Objekt. Diesem wird (nach dem Positionieren) noch eine Farbe, (Teil-) Transparenz und die Oberflächen-Eigenschaften zugewiesen.

Ohne Licht kein Schatten: Die Lichtstrahlen steigern jedoch auch die plastische Wirkung des Objekts. Durch gezielte Verwendung des Materials (bzw. der Oberflächeneigenschaften) wird der gewünschte Effekt erzielt. In diesem Beispiel sollte das Symbol aus- sehen wie aus Acrylglas.

3D-Logo “Brainfood” für die Firma VitalTalent

Entwurf und Erstellung des Logos der Firma VitalTalent

Firmenlogo VitalTalent

Denkmal mit Animation (Kamerafahrt)

Screenshots der Animation

Hinweis: Die Personen auf dem ersten Bild sind fertige Modelle von einem Fremdhersteller. Alles andere -wie sonst auch- wurde von mir geplant und ausgeführt.

Wohnung (Ausschnitt aus Animation)

In mehrwöchiger Arbeit hatte ich mal meine Wohnung (1998) am PC nachgebildet und mit einer Kamerafahrt durch alle Räume aus- gestattet. Hier sehen Sie einen der Räume:

Ausschnitt (Standbild) der Wohnung

Bild 1: Die Objekte sind zwar eingefärbt, können so aber niemals echt wirken. Dies ist (wie in Bild 2 zu sehen) erst mit Texturen, Licht und Schatten möglich. Ein großer Schritt in Richtung realistische Nachbildung (jedoch auch hier noch weit entfernt!).

Das Bild wurde mit dem Raytracing-Verfahren berechnet. Das heißt, dass der Schattenwurf absolut realistisch -also nach den Vorgaben in der realen Welt- berechnet wird. Dieses Verfahren kostet zwar viel Rechenzeit, dafür sieht der Schatten täuschend echt aus.

Schreibtisch

Darstellung meines Schreibtisches. Fand Verwendung in einer kompletten Nachbildung meiner Wohnung, inkl. Kamerafahrt durch sämtliche Räume.

Mein Schreibtisch (1998)

1 = Drahtgitteransicht
2 = Körper und Lichter
3 = Texturierte Ansicht

EBICON Küchen-, Büro- und Badplaner

In der Produktpalette der EBICON AG (nun ConfiSoft

) befand sich der virtuelle Küchen-, Büro- und Badplaner mit von mir erstellten 3D-Objekten und 2D-Kataloge (Auswahl der Einzelkomponenten).

Screenshot der Benutzerober- fläche (Browser)	Screenshots des 3D-Ansichts- bereichs

Hinweis: Die Personen auf dem zweiten Bild sind fertige Modelle von einem Fremdhersteller.

Anwendung der Planer-Software:
Zuerst müssen die Mauern erstellt werden, damit der Grundriss ihrer eigenen häuslichen Räumlichkeiten gegeben ist. Aus dem Produktkatalog (nach Kategorien sortiert) wählen Sie dann im 2D- Bereich die Möbel aus, welche für Sie interessant sind (ebenso können Sie zwischen verschiedenen Holzsorten und Farben wählen).

Schon während Sie die “flachen” 2D-Möbel nach ihren Vorstellungen verschieben, wird parallel dazu die Anzeige im 3D-Bereich aktualisiert. Haben Sie alle Einzelteile positioniert, so maximieren Sie idealerweise den 3D-Anzeigebereich, um mit einem virtuellen Rundgang zu starten: Denn hier können Sie sich in den vorher erstellten Räumlichkeiten -sozusagen auf “Augenhöhe”- frei bewegen.

EBICON AG (3D-Haus)

Ein von mir erstelltes (begehbares) Haus wurde u.a. auch als Teaser zum firmeninternen Programm “Draw” verwendet.

EBICON AG-Website
- mit von mir erstelltem Haus in 3D

3D-Animation

Eine meiner ersten Animationen (1998):

Screenshots der Animation

Ein Schriftzug, der sich um den eigenen Mittelpunkt dreht, wurde so “gerendert” (berechnet), dass allein durch die Teiltransparenz, Licht und Schatten ein kleiner, aber dynamischer Film realisiert wurde, welcher -in Endlosschleife abgespielt (der Endpunkt knüpfte nahtlos an den Anfangspunkt)- einen kleinen “Augenstern” darstellte.

Weitere 3D-Bilder finden Sie in meiner 3D-Galerie. Vielleicht finden Sie hier ein stimmungsvolles Bild für ihren Desktop?

Impressum

Seitenanfang


@charset "utf-8";
/* ===========================================
// Overview
=========================================== //
[x] Reset, defaults, Web Fonts (and/or font-face), clearfix, misc.
[x] HTML5 fix
[x] Default layout
	[Header, navigation, container, sticky footer, misc.]	
[x] Content
	[Headlines, images, misc.]
[x] Google Maps (page "Anfahrt und Öffnungszeiten")
[x] IE fixes and filters
[x] Plugins
	[Slimbox 2, jQuery Validation]
[x] No JavaScript
[x] Print

/* ===========================================
// [x] Reset, defaults, Web Fonts (and/or font-face), clearfix, misc.
=========================================== */
* { margin: 0; padding: 0 }
body { background: #225c96 url(../img/defaultLayout/bg.png) repeat-x; font: normal 14px/18px Arial, Helvetica, sans-serif; color: white }
h1, h2, h3 { font: normal 18px/25px 'Oswald', Arial, Helvetica, sans-serif; text-shadow: 4px 2px 3px #333; color: #fdf467; margin-bottom: 15px }
h2 { font-size: 16px; line-height: 20px; margin-bottom: 10px }
h3 { font-size: 15px; line-height: 19px; margin-bottom: 6px }
ul, dl { list-style: none; margin-bottom: 25px }
ul.bulletList { list-style-type: disc; list-style-position: inside }
ul sup { text-decoration: underline }
ol { list-style: decimal; padding-left: 20px; margin-bottom: 15px }
dt { float: left; margin-right: 7px }
section, p { margin-bottom: 15px }
hr { background-color: #aaa; height: 1px; border: 0 }
img, img a { outline: none; border: none }
a:link, a:visited { color: #fdf467; text-decoration: none; border-bottom: 1px dotted red; outline: none }
a:hover, a:active { color: #ffef27; border-bottom-color: #fdf467 }
li.active, li.active a:link, li.active a:visited, li.active a:hover { color: #fdf467; text-decoration: none }
.accentuate { font-weight: bold; color: #ccc }
.separator { border-bottom: 1px solid #888; padding-bottom: 30px; margin-bottom: 10px }
.item { margin-bottom: 10px }
.noShow { visibility: hidden; height: 0 }
.group, .item { overflow: hidden }
.group:after, .item:after { clear: both; content: "."; display: block; font-size: 0; height: 0; min-height: 0; visibility: hidden }

/* Force scrollbar + -webkit-font-smoothing (http://maxvoltar.com/archive/-webkit-font-smoothing) */
html { overflow-y: scroll; -webkit-font-smoothing: antialiased }

/* ===========================================
// [x] HTML5 fix
=========================================== */
header, hgroup, nav, aside, article, section, figure, footer { display: block }

/* ===========================================
// [x] Default layout
=========================================== */
.wrap .layout { position: relative; width: 874px; margin: 0 auto }
section.default { margin-bottom: 80px }
.fadedLogo { position: absolute; top: 252px; left: -136px; background: url(../img/defaultLayout/bgLogo.png) no-repeat; width: 228px; height: 154px; z-index: 1 }
.allProducts .fadedLogo { top: 94px }
.drape  .fadedLogo { top: 119px }
.carpets .fadedLogo { top: 145px }
.hangings .fadedLogo { top: 193px }
.lining .fadedLogo { top: 196px }
.sunscreen .fadedLogo { top: 218px }
.measuredCarpets .fadedLogo { top: 244px }
.brands .fadedLogo { top: 258px }
.beforeAfterwards .fadedLogo { top: 291px }
.approach .fadedLogo { top: 329px }
.contact .fadedLogo { top: 360px }
	
	/* Header
	// =========================================== */
	header { color: #2f2f2f }
	.wrap .layout header hgroup, .wrap .layout header a, .wrap header h1 { border-bottom: 0; text-indent: -9999px; width: 424px; height: 110px; 
	margin: 0 auto 22px }
	.wrap .layout header hgroup { background: url(../img/defaultLayout/logo.png) 0 24px no-repeat }
	
	/* Navigation
	// =========================================== */
	nav { position: relative; z-index: 2; float: left; width: 200px; font-size: 15px; text-shadow: 4px 2px 3px #333; margin-bottom: 37px }
	nav li { list-style-type: none }
	nav a:link, nav a:visited, nav a:active { font: normal 20px/26px Oswald, Arial, Helvetica, sans-serif; color: white; border-bottom-color: red }
	nav a:link span, nav a:visited span, nav a:active span { font-size: 14px; color: #ccc }
	nav a:hover, nav a:hover span, nav li.active a span { color: #ffef27 }
	nav li { margin-bottom: 5px }
	nav li.beforeAfter { margin-bottom: 12px }
	nav li ul { margin: 7px 0 6px 68px }
	nav li ul li { list-style: disc outside; display: list-item; font-size: 13px; font-weight: normal; margin-bottom: 3px }
	nav li ul li a:link, nav li ul li a:visited { font-size: 15px; line-height: 22px }
	nav .offer { text-decoration: none }
	nav a:link.start, nav a:visited.start, nav a:hover.start { font-size: 13px; margin-top: 7px }
	
	/* Sticky Footer (New CSS Sticky Footer: http://www.cssstickyfooter.com/)
	// =========================================== */
	html, body { height: 100% }
	.wrap { min-height: 100% }
	#main { overflow: auto; padding-bottom: 200px }
	body:before { content: ""; height: 100%; float: left; width: 0; margin-top: -32767px; /} /* Opera Fix */
	footer { position: relative; margin-top: -140px /* negative value of footer height */; height: 140px; clear: both }
	
	/* Footer (additional styles)
	// =========================================== */
	footer { background: black url(../img/defaultLayout/bgFooter.png) repeat-x }
	footer .wrap { width: 874px; margin: 0 auto }
	footer a.showroom { display: inline-block; float: left; border-bottom: 0; -moz-transition: -moz-transform 200ms ease-in-out; 
	-webkit-transition: -webkit-transform 200ms ease-in-out; -ms-transition: -ms-transform 200ms ease-in-out /*IE (up to 9) does not support*/; 
	-o-transition: -o-transform 200ms ease-in-out; transition: transform 200ms ease-in-out; margin-top: -85px }
	footer a.showroom:hover { -webkit-transform: scale(1.25); -moz-transform: scale(1.25); -o-transform: scale(1.25); -ms-transform: scale(1.25); transform: scale(1.25) }
	footer a.showroom img { border: 2px solid #5d688a }
	footer ul { float: left; width: 530px; display: inline-block; color: #fdf467; margin: 9px 0 0 27px }
	footer li { float: left; display: inline-block; font-weight: bold; margin-bottom: 2px }
	footer a.imprint { float: right; font-size: 13px; text-decoration: none; color: white; margin-top: 9px }
	footer a.imprint:hover, footer a.imprint.active { color: #fdf467 }

/* ===========================================
// [x] Content
=========================================== */
section.main h1, section.intro h1 { display: inline-block; border-bottom: 1px solid #888; padding: 0 53px 7px 0; text-indent: 53px; line-height: 50px; height: 33px; 
background: url(../img/defaultLayout/bgHeadline.png) no-repeat }
.content, article { float: right; width: 640px; margin-bottom: 50px }
.content { padding-top: 10px }
	
	/* Claim
	// =========================================== */
	section.intro { width: 780px; position: relative; margin: 0 auto }
	section.intro h1 { border: 0; color: white; text-indent: 47px; line-height: 47px; margin-bottom: 9px }
	section.intro div { position: absolute; left: 125px; bottom: 118px }
	
	/* Galleries
	// =========================================== */
	section.slimbox { width: 100%; margin-top: 15px }
	section.slimbox a { float: left; width: 188px; height: 120px; overflow: hidden; background: #e4e0dd; border: 4px solid #ccc; -moz-border-radius: 8px; 
	-webkit-border-radius: 8px; -ms-border-radius: 8px; -o-border-radius: 8px; border-radius: 8px; -moz-box-shadow: 3px 4px 4px #222; -webkit-box-shadow: 3px 4px 4px #222; 
	-ms-box-shadow: 3px 4px 4px #222; -o-box-shadow: 3px 4px 4px #222; box-shadow: 3px 4px 4px #222; margin: 0 17px 16px 0; font-size: 0 }
	section.slimbox a:hover { margin: 1px 15px 15px 2px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; 
	border-radius: 5px; -moz-box-shadow: 3px 3px 3px #222; -webkit-box-shadow: 3px 3px 3px #222; -ms-box-shadow: 3px 3px 3px #222; -o-box-shadow: 3px 3px 3px #222; 
	box-shadow: 3px 3px 3px #222 } 
	section.slimbox img.arrow { float: left; margin: 45px 8px 0 0 }
	section.slimbox .keys { font: normal 19px/24px Oswald, Arial, Helvetica, sans-serif; color: #fff215; letter-spacing: 2px; text-transform: uppercase }
	
	/* Page "Links zu unseren Marken"
	// =========================================== */
	.brands h2 { margin-bottom: 7px }
	
	/* Page "Vorher-Nachher"
	// =========================================== */
	.beforeAfter section { float: left }
	.beforeAfter section a:first-child { margin-left: 90px }
	.beforeAfter .separator { padding-bottom: 1px; margin-bottom: 1px }
	.beforeAfter section.slimbox a:hover { margin-right: 17px }
	
	/* Page "Kontakt"
	// =========================================== */
	#form { position: relative; margin-top: 4px; border: 1px solid #ccc; -moz-border-radius: 8px; -webkit-border-radius: 8px; -ms-border-radius: 8px; 
	-o-border-radius: 8px; border-radius: 8px; width: 417px; padding: 30px 37px 20px 13px; background: #013059 url(../img/defaultLayout/bgForm.png) repeat-x; 
	background: -moz-linear-gradient(top, #225c96 0%, #013059 100%); background: -webkit-linear-gradient(top, #225c96 0%, #013059 100%); 
	background: -ms-linear-gradient(top, #225c96 0%, #013059 100%); background: -o-linear-gradient(top, #225c96 0%, #013059 100%); 
	linear-gradient(top, #225c96 0%, #013059 100%) }
	#form .required { position: absolute; top: 17px; right: 20px }
	#form input, #form textarea { background-color: white; border: 1px solid white; -moz-border-radius: 6px; -webkit-border-radius: 6px; -ms-border-radius: 6px; 
	-o-border-radius: 6px; border-radius: 6px;	-moz-box-shadow: 3px 4px 4px #222; -webkit-box-shadow: 3px 4px 4px #222; -ms-box-shadow: 3px 4px 4px #222; 
	-o-box-shadow: 3px 4px 4px #222; box-shadow: 3px 4px 4px #222; width: 265px; font-size: 14px; color: #555; padding: 4px 10px; margin: 0 7px 9px 0 }
	#form fieldset { border: 0; margin-bottom: 20px }
	#form .position label { width: 120px; line-height: 15px }
	#form .position div { height: 22px }
	#form fieldset.gender { margin-bottom: 9px }
	#form fieldset.gender div div { float: right; width: 295px }
	#form fieldset.gender div div input { float: left; background: 0; padding: 0; width: auto; color: black; margin: 5px 6px 0 0 }
	#form .gender div label { float: left; margin-right: 25px }
	#form label { float: left; line-height: 26px }
	#form input, #form textarea { float: right }
	#form .wrapZipCity .descZipCity { float: left; width: 120px }
	#form .wrapZipCity .descZipCity label { width: auto; float: none; display: inline }
	#form .wrapZipCity .zipCity { float: right }
	#form .wrapZipCity .zipCity input { float: left; width: 41px }
	#form .wrapZipCity .zipCity input.city { float: right; width: 194px }	
	#form .approach { margin: -14px 0 29px }
	#form .approach label.labelApproach { width: 100%; margin: 0 }
	#form .approach input { float: left; background: 0; padding: 0; width: auto; line-height: 20px; color: black; margin: 5px 2px 0 0 }
	#form .approach label { height: 20px; line-height: 24px; padding-top: 0; margin: 0 25px 0 5px }
 	#form textarea { font: normal 14px/18px Arial, Helvetica, sans-serif; width: 270px; min-width: 270px; max-width: 270px; height: 150px; min-height: 18px; 
	max-height: 300px; padding-right: 5px; margin-bottom: 18px }
	#form input#send { width: 140px; height: 28px; color: white; border: 1px solid white; background-color: #225c96; background: -moz-linear-gradient(top,#225c96, #003059); 
	background: -webkit-linear-gradient(top, #225c96, #003059); background: -ms-linear-gradient(top, #225c96 0%, #013059 100%); 
	background: -o-linear-gradient(top, #225c96 0%, #013059 100%); background: linear-gradient(top, #225c96 0%, #013059 100%); -moz-border-radius: 8px; 
	-webkit-border-radius: 8px; -ms-border-radius: 8px; -o-border-radius: 8px; border-radius: 8px; margin-right: 154px; cursor: pointer }

/* ===========================================
// [x] Google Maps (page "Anfahrt und Öffnungszeiten")
=========================================== */
#map { border: 1px solid black; background-color: #f4f3f0; color: black; width: 638px; height: 400px }
#map .location { margin-bottom: 5px }
#map .location div { font-weight: bold; color: #003059 }
#map .routePlanner { border-top: 1px solid #ccc; font-size: 12px; margin-bottom: 10px }
#map .routePlanner input { height: 20px; margin-right: 10px }
#map .routePlanner input#route { float: left; border: 1px solid #ccc; width: 224px }
#map .routePlanner input.submit { width: 65px; height: 23px; margin: 0 }

/* ===========================================
// [x] IE fixes and filters
=========================================== */
section.slimbox a, .ie6-8 #form, .ie6-8 #form input, .ie6-8 #form textarea, .ie6-8 #form input#send { behavior: url(assets/ie/PIE.htc) } /* PIE.htc for CSS 3 support for 
IE 6-IE 8 (CSS3 Pie: http://css3pie.com/) */
.ie6-8 .wrap .layout header hgroup { cursor: pointer }
.ie6-8 a#lbPrevLink img, .ie6-8 a#lbNextLink img, .ie6-8 a#lbCloseLink img { display: none }
.ie6-8 #form { z-index: 1 } /* Necessary fix for IE 8 [regarding the CSS 3 support for IE 6-IE 8 (CSS3 Pie: http://css3pie.com/)] */
.ie6-8 #form, .ie6-8 #form input#send { border-width: 1px 2px 2px 1px }
.ie6-8 #form input, .ie6-8 #form textarea { border-radius: 6px 6px 8px 8px }
.ie6-8 #form .gender input, .ie6-8 #form .approach input, .ie9 #form .gender input, .ie9 #form .approach input { width: 10px; height: 10px }
.ie6-8 #form .wrapZipCity .zipCity { width: 294px }
.ie6-8 #form .approach label { line-height: 20px }

	/* IE 6 only
	// =========================================== */
	*html .ie6-8 .group, *html .ie6-8 .item { height: 1% }
	*html .ie6-8 ul.subMenu { margin-top: -14px }
	*html .ie6-8 .main h1, *html .ie6-8 .intro h1 { padding-bottom: 0; line-height: 40px; background-image: none; 
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=crop src='assets/img/defaultLayout/bgHeadline.png') }
	*html .ie6-8 .fadedLogo { background-image: none; 
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=crop src='assets/img/defaultLayout/bgLogo.png') }
	*html .ie6-8 .slimbox a { cursor: pointer }
	*html .ie6-8 footer ul { margin: 9px 0 0 28px }
	*html .ie6-8 footer a.showroom { position: relative; z-index: 2 }
	*html .ie6-8 section.intro div { bottom: 132px }
	*html .ie6-8 .beforeAfter .separator { padding-bottom: 16px }
	*html .ie6-8 .beforeAfter a:hover { margin: 1px 15px 13px 2px }
	*html .ie6-8 #form .wrapZipCity .zipCity input.city { width: 191px }
	*html .ie6-8 #form .approach { margin-top: -5px }
	
	/* IE 7 only
	// =========================================== */
	*+html .ie6-8 section.intro div { bottom: 133px }
	*+html .ie6-8 ul.subMenu { margin-top: -14px }
	*+html .ie6-8 .approach ul { line-height: 22px }
	*+html .ie6-8 .beforeAfter .separator { padding-bottom: 16px }
	
	/* IE 9 only
	// =========================================== */
	.ie9 #form input#send { filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#225c96', endColorstr='#013059') } }
		
/* ===========================================
// [x] Plugins
=========================================== */
	/* Slimbox 2
	// =========================================== */
	#lbBottomContainer #lbCaption { font-size: 12px; line-height: 16px; color: #444; width: 88%; margin: -2px 0 5px }
	#lbBottomContainer #lbCaption a:link, #lbBottomContainer #lbCaption a:visited, #lbBottomContainer #lbCaption a:hover { color: #124778; 
	border-bottom: 1px dotted #124778 }
	#lbCenter a, #lbBottom a { border-bottom: 0 }
	
	/* jQuery Validation
	// =========================================== */
	#form ul.errorlist { display: block; clear: both; float: right; border: 2px solid red; width: 263px; padding: 3px 10px; margin: 0 7px 15px 0 }
	
/* ==================================================
// [x] No JavaScript
================================================== */
.noJS section.slimbox:before { display: block; border: 2px solid red; font-size: 13px; font-weight: bold; font-style: italic; padding: 10px; margin-bottom: 20px; 
content: "Ohne aktiviertes JavaScript stehen Ihnen die Funktionalitäten der Bilder-Galerien dieser Website nicht zur Verfügung. Die Bilder sind dann nur auf Basis von HTML verlinkt." }
.noJS section.slimbox.index:before { margin-top: -22px }
.noJS #map:before { display: block; border: 2px solid red; font-size: 13px; font-weight: bold; font-style: italic; padding: 10px; margin: 20px 0 0 132px; 
width: 350px; text-align: center; content: "Ohne aktiviertes JavaScript steht Ihnen Google Maps und der Routenplaner nicht zur Verfügung." }

/* ===========================================
// [x] Print
=========================================== */
@media print {
* { background: transparent!important; color: #000!important; text-shadow: none }
header hgroup, section.intro, footer img, a.imprint { display: none }
header { height: 120px }
nav a { font-size: 14px!important; line-height: 13px!important }
.content { padding: 0 }
a, a:visited { color: #444!important; text-decoration: none; border-bottom: 1px dotted #fdf467 }
a:after { content: " (" attr(href) ")" }
abbr:after { content: " (" attr(title) ")" }
.ir a:after { content: "" }
pre, blockquote { border: 1px solid #999; page-break-inside: avoid }
img { page-break-inside: avoid }
@page { margin: 0.5cm }
p, h1, h2, h3 { orphans: 3; widows: 3 }
h1, h2, h3 { text-shadow: none; text-indent: 0; page-break-after: avoid }
footer { position: absolute; margin: 0; top: 0 }
footer li { display: block; margin-right: 30px }
}

Programmierung + Webdesign	(56)
3D/ Animation	(12)
Printwerbung	(2)
Briefpapier, Flyer	(1)
Visitenkarten	(1)

Stefan Plagge (Frontend Developer/ Webdesigner)	1.
Lebenslauf (PDF)	2.
Photos	3.
	4.
	5.
	6.