@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 }
}
Jeder Webdesigner/ Developer entscheidet natürlich selbst welche Standards beim Aufbau des Markups Verwendung finden. Die meisten Templates werden sich deshalb
in Details unterscheiden.
