Wallpaper mit 3D-Motiven gibt es hier
Bücher Webdesign...
Interessante Bücher rund um das Thema
Adobe Flash®
Valide Flash®-Inhalte für XHTML 1.0-Doku- mente
Weitere geplante Tutorials
2. Quartal 2012:

jQuery & Co.

Hier zeige ich sinnvolle Anwendungsbeispiele anhand von jQuery Link und script.aculo.us Link.

Sliding-Doors...

-Technik (inkl. Sprites), auch für IE 6.

Clearfix optimiert!

Aktuellster Stand - ohne “Nebenwirkungen”, wie z.B. bei Verwendung mit “box-shadow” (CSS3).

Relaunch! | Version 6.0 demnächst...

Zuletzt aktualisiert: 01. Februar 2012

Ab 05. März 2012: Wieder “up-to-date”, mit Elementen der Social Media Link und Web 2.0 Link-Technologien, wird die jetzige veraltete Website (Version 4.1 von 2008!) abgelöst.

Fluid-Layout + media-queries + HTML5 + CSS 3...

01. Februar 2012/ von Stefan Plagge

Aktuelles Projekt ist eine “mobile” Demo-Seite (für alle Endgeräte) mit Fluid-Layout und den aktuellen Web-Technologien (HTML5 Link, CSS 3 Link, jQTouch Link, Sencha Touch Link, jQuery Mobile Link, Ext JS Link, jQuery Link, Ajax Link und PHP Link.
Die Demo-Seite ist ab 27. Februar 2012 verfügbar.

Screenshot Demo-Seite (Screenshot der Demo-Seite)

Aktuell suche ich eine Festanstellung:

Falls Sie sich für mich bzw. meine bisherigen Arbeiten (Portfolio) interessieren: Layout und Code werden zur Zeit komplett überarbeitet.
Bis die neue Version meiner Website fertiggestellt ist, finden Sie <hier>aktuelle</Codebeispiele> ...oder in meinen Referenzen: Z.B. COSMiQ Link, Kinopolis Link und Quoka GmbH Link. Weitere Referenzen sind (u.a.) Opel Deutschland (Microsite) und Zurich Versicherung AG.

Auf Anfrage zeige ich Ihnen gerne meine neuesten, namhaften Referenzen, welche hier noch nicht gelistet sind.


Portfolio: Programmierung + Webdesign (Auszug)

Opel (Microsite) Quoka GmbH Autop24 PMMI Certified Trainer alle anzeigen

Entwicklung: HTML, CSS, JavaScript + jQuery

Code-Samples dieser Website auf einem Klick: Code-Box (Markup und Skripts) öffnen

Portfolio: 3D/ Animation

3D/ Animation 3D/ Animation alle anzeigen

Portfolio: Gesamt-Übersicht (inkl. Print, Briefpapier, Flyer und Visitenkarten)

Gesamtübersicht meines Portfolios

Über mich:

Blog:

Artikel: How To Build A Mobile Website

27. November 2011/ von Stefan Plagge

Mobile Endgeräte Auf Smashing Magazine Link gibt es eine sehr interessante Einführung (in englisch) mit den Pros & Cons bezgl. der technischen Umsetzung von “mobilen” Websites: How To Build A Mobile Website Link.

Bei dieser Gelegenheit auch gleich noch die Artikel-Übersicht “Guidelines For Mobile Web DevelopmentLink mit einigen informativen Leitfäden zur Thematik “Entwicklung für mobile Endgeräte”.

Meine Meinung:

Smashing Magazine vermittelt mittels weniger Artikel bereits die wichtigsten (Grundlagen-) Informationen.

Aus aktuellem Anlass (bzgl. Flash® Link für mobile Endgeräte): Technologievordenker Steve Jobs Link setzte auf (die offiziellen) Webstandards und veröffentlichte, im April 2010, aufschlussreiche Gedanken hierzu: Thoughts on Flash Link (engl.).

Blog-Archiv (Anklicken öffnet Blog):

Vorschau auf Opera Dragonfly 1.1

19. Juni 2011/ von Stefan Plagge
Das seit Version 1.0 durchweg konkurrenzfähige Debugging-Tool wird ständig weiterentwickelt und kann -mit all seinen Verbesserungen- vorab mit einem aktuellem Opera Build (ab Version 11.50) Link ausprobiert werden.
Meine Meinung:

Neben Safaris Developer Tools Link (in ähnlicher Form auch in Google Chrome Link enthalten) befinden sich diese beiden Developer-Tools mittlerweile auf dem Niveau (mit kleinen Abstrichen) von Firebug Link.

U.a. wegen der enormen Erweiterbarkeit bleibt der Firefox Link mein Browser “für alle Gelegenheiten”.
Bei der Arbeit kann man auf eine riesige Anzahl von (Developer-) Add-Ons zurückgreifen, z.B. HTML Validator Link, JSView Link, QuickJava Link und EventBug Link.

Innovationsschub auf dem Browsermarkt

14. August 2010/ von Stefan Plagge
Aktuelles vom Browsermarkt liefert SPIEGEL ONLINE Link im Netzwelt Link-Artikel “Kampf der großen BrowserLink.
Das Magazin vergleicht, in kompakter Weise, den aktuellen Stand von Internet Explorer Link, Firefox Link, Safari Link, Opera Link und Chrome Link.
Meine Meinung:
Der “Einsteiger”-Artikel macht auch deutlich, dass für die Gesamt-Performance eines Browsers im Alltagsgebrauch mehr notwendig ist als “einfach nur schnell” zu sein.

Die besten Plugins für jQuery...

19. Juli 2010/ von Stefan Plagge

Die Auswahl an Plugins für jQuery Link im Web ist riesig und (naturgemäß) unübersichtlich. Die BLOGPROGRAMMIERER Link hatten im Vorjahr eine Auswahl zusammengestellt, welche die Bezeichnung “Best of...” wirklich verdient: jQuery: Die 20+ besten Content - Plugins (Scroll, Accordion, Slide) Link.

Auch einen Besuch wert ist die Zusammenstellung der Plugins im Teil 1 der “Best of jQuery-Tutorials” Link des Webstandard- Blogs Link. Bei dieser Gelegenheit lohnt auch ein Klick auf Teil 2 Link und Teil 3 Link der Bestenliste.

Meine Meinung:
Einige der (eher selten anzutreffenden) Zusammenstellungen, bei denen die vorgestellten Beipiele durchweg sinnvoll und “stimmig” sind.

Google Chrome 5: Beta-Version verfügbar

09. Mai 2010/ von Stefan Plagge
Wie das Team um den Google-Browser in ihrem Blog Link mitteilt, ist die aktuelle Beta-Version Link jetzt schon bis zu 35 Prozent schneller als die stabile Version 4.1.
Des weiteren wurden natürlich etliche Verbesserungen integriert. U.a. wurde die Unterstützung für HTML5 Link weiterhin verbessert.
Meine Meinung:

Chrome überholte Link im Januar Safari Link (Apple) und verfügt nun (Mai 2010) über einen Marktanteil um 7 Prozent Link.

Durch den -in absehbarer Zeit- zweistelligen Marktanteil kommen auch “Google-kritische” Web-Entwickler nicht mehr umhin, den Browser zu berücksichtigen; und die umstrittene Browser-ID Link lässt sich mittlerweile ja problemlos deaktivieren.

Firebug: Website mit neuem Layout

11. Februar 2010/ von Stefan Plagge
Die Website des Firefox Add-ons Firebug Link hat ein neues Layout.
Mein Tipp
Anschauen und informieren! Z.B. im FirebugWiki Link...

Schnell, schneller: jQuery 1.4

19. Januar 2010/ von Stefan Plagge
Hiervon profitiert nicht nur die relativ träge JavaScript-Engine des Internet Explorers: Ursprünglich als kleines Update geplant, beinhaltet jQuery 1.4 Link nicht nur neue Funktionen, sondern verfügt über eine um 40 Prozent höhere Performance im Vergleich zum direkten Vorgänger.
Mein Tipp:
Wegen einiger Inkompatibilitäten zu früheren Versionen: Testen, testen, testen... und dann mit der kommenden Version 3.6 von Firefox Link eine (fast) unschlagbare Performance genießen!

Firefox überholt Internet Explorer

01. Dezember 2009/ von Stefan Plagge
Das Hamburger Marktforschungsunternehmens Fittkau & Maaß Link hat ermittelt, dass der Firefox-Browser (in Deutschland) mit 45,4 Prozent Marktanteil vor dem Internet Explorer (44,5 Prozent) liegt.
Quelle: heise open Link
Meine Meinung:

Microsoft hatte zwar mit dem Internet Explorer 8 Link in mehrerer Hinsicht große Fortschritte gemacht; alleine schon aus Sicherheitsgründen (und natürlich der enormen Erweiterbarkeit!) sollte man jedoch Firefox Link den Vorzug geben.

Dank der riesigen Verfügbarkeit von Add-ons Link für Webentwickler (z.B. Firebug Link und Web Developer Link) gibt es zur Zeit keine gleichwertige Alternative.

Über wwwdesign.info (Version 4.1)

Update: 01. Februar 2012/ von Stefan Plagge

wwwdesign.info (die komplett neue Version 6.0 erscheint demnächst) ist meine Informationsseite mit Tutorials aus verschiedenen Bereichen der Webentwicklung und des Webdesigns. U.a. (X)HTML, CSS, JavaScript, jQuery, script.aculo.us, PHP (neu), Web 2.0 (neu) und Flash®.

Falls Sie an den Möglichkeiten interessiert sind welche sich mit 3D-Programmen ergeben, so finden Sie hier Beispiele für die beiden Szenarien “Stills” und “Animation”.

zum Portfolio: 3D/ Animation

Ich freue mich, falls auch Sie hier interessantes Material finden, welches Sie für die Umsetzung ihrer Webprojekte verwenden können!

Falls Sie mehr über meine bisherigen Arbeiten erfahren möchten, so finden Sie hier mein Portfolio, sowie ein paar Fakten über mich (Stefan Plagge), z.B. meinen Lebenslauf.

Für eine vollständige Übersicht aller Inhalte (bzw. Artikel) meiner Website besuchen Sie bitte die Sitemap.

Herzlichst,
Aktuelle Codebeispiele
Markup von www.hahn-bensheim.de Link:
Skripts dieser Website:

@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 }
}

	
Twittern