/* Global reset */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline}:focus{outline:0}body{line-height:1;color:#000;background:#fff}ol,ul{list-style:none}table{border-collapse:separate;border-spacing:0}caption,th,td{text-align:left;font-weight:normal}blockquote:before,blockquote:after,q:before,q:after{content:""}blockquote,q{quotes:"" ""}
input,button{overflow:visible}strong{font-weight:bold}em{font-style:normal}hr{display:none}
/* Paddings & margins */
.margin-top { margin-top: 15px }
.margin-bottom { margin-bottom: 15px }
.margin-left { margin-left: 15px }
.margin-right { margin-right: 15px }
/* Floats */
.left { float: left }
.right { float: right }
.clear { clear: both }
/* Positions */
.text-left { text-align: left }
.text-right { text-align: right }
.text-center { text-align: center }
.middle { vertical-align: middle }
/* Basic selectors styles */
h1 { font: normal 22px Arial, Tahoma, Helvetica, sans-serif; }
h2 { font: normal 20px Arial, Tahoma, Helvetica, sans-serif; }
h3 { font: normal 25px Arial, Tahoma, Helvetica, sans-serif; color: #3E3F40; }
a { text-decoration: none; outline: none; cursor: pointer }
a:hover { text-decoration: underline; }
html, body {
min-height: 100%;
_height: 100%;
}
html {
background: #fcfcfc url(../img/html.gif) repeat-x;
}
body {
font: 17px Arial, Tahoma, Helvetica, sans-serif;
color: #3e3f40;
background: #d7d7d9 url(../img/bg-home.gif) repeat-x;
}
#subpage {
background: transparent url(../img/bg.gif) 0 bottom repeat-x;
}
/* Container
---------------------------------------------- */
#container { width: 980px; margin: 0 auto -57px; min-height: 100%; height: auto !important; height: 100%; }
#container .push { clear: both; height: 57px; }
/* Header
---------------------------------------------- */
#header { height: 480px; position: relative; }
/* Headers */
.site-start { background: url(../img/header/headers/startsite.jpg) no-repeat; }
.site-product { background: url(../img/header/headers/produkt.jpg) 30px 0 no-repeat; }
.site-contact { background: url(../img/header/headers/kontakt.jpg) 30px 0 no-repeat; }
.site-fragebogen { background: url(../img/header/headers/fragebogen.jpg) 30px 0 no-repeat; }
.site-service { background: url(../img/header/headers/service.jpg) 30px 0 no-repeat; }
.site-press { background: url(../img/header/headers/presse.jpg) 30px 0 no-repeat; }
/* Logo */
#header h1 { position: absolute; top: 20px; left: 0; width: 244px; height: 43px; }
#header h1 a { display: block; height: 100%; background: url(../img/header/logo.gif) no-repeat; text-indent: -999999px }
#header h2 { position: absolute; text-indent: -999999px }
#header p { position: absolute; text-indent: -999999px }
#phone-number { position: absolute; right: 20px; top: 200px; width: 235px; height: 205px; text-indent: -999999px; }
#subpage #phone-number { right: 0; top: 75px; width: 225px; height: 200px; }
/* Menu */
#menu { position: absolute; bottom: 0; left: 40px; }
#menu li { float: left; margin-right: 10px; }
#menu li a { float: left; height: 43px; background: url(../img/header/menu.gif) no-repeat; text-indent: -999999px; }
#menu .menu-item-1 { width: 170px; margin-right: 0; }
#menu .menu-item-1 a { width: 100px; background-position: -2px 0; }
#menu .menu-item-1 a:hover,
#menu .menu-item-1 .current { background-position: -2px -43px; }
#menu .menu-item-2 a { width: 82px; background-position: -117px 0; }
#menu .menu-item-2 a:hover,
#menu .menu-item-2 .current { background-position: -117px -43px; }
/*
#menu .menu-item-3 a { width: 91px; background-position: -212px 0; }
#menu .menu-item-3 a:hover,
#menu .menu-item-3 .current { background-position: -212px -43px; }
*/
#menu .menu-item-3 a { width: 75px; background-position: -552px 0; }
#menu .menu-item-3 a:hover,
#menu .menu-item-3 .current { background-position: -552px -43px; }
#menu .menu-item-4 a { width: 106px; background-position: -316px 0; }
#menu .menu-item-4 a:hover,
#menu .menu-item-4 .current { background-position: -316px -43px; }
#menu .menu-item-5 a { width: 105px; background-position: -436px 0; }
#menu .menu-item-5 a:hover,
#menu .menu-item-5 .current { background-position: -436px -43px; }
/* Content
---------------------------------------------- */
#content { font-size: 17px; width: 550px; min-height: 200px; _height: 200px; padding: 20px 0 40px 215px; background: url(../img/content/bg.gif) 145px 45px no-repeat; }
#content h3 { font-size: 1.47em; }
p { margin-bottom: 15px; line-height: 140%; }
/* List */
#content ul li { padding: 0 0 10px 15px; background: url(../img/content/arr-gray.gif) 0 4px no-repeat; }
#content ol li { margin: 0 0 10px 15px; list-style: decimal; }
.small { font-size: 0.71em; }
ol.small { margin-left: 15px; }
/* Logos */
#logos { height: 71px; }
#content #logos li,
#left #logos li { float: left; position: relative; width: 74px; height: 71px; padding: 0; margin: 0 10px 10px 0; background: url(../img/content/logos.gif) no-repeat; }
#logos li a { display: block; width: 74px; height: 71px; text-indent: -999999px; }
#logos li a:hover { background-position: 0 bottom; }
#logos .logo1 a { background-image: url(../img/content/logos/logo1.gif); }
#logos .logo2 a { background-image: url(../img/content/logos/logo2.gif); }
#logos .logo3 a { background-image: url(../img/content/logos/logo3.gif); }
#logos .logo4 a { background-image: url(../img/content/logos/logo4.gif); }
#logos .logo5 a { background-image: url(../img/content/logos/logo5.gif); }
#logos .logo6 a { background-image: url(../img/content/logos/logo6.gif); }
#logos .zoom { position: absolute; width: 110px; height: 110px; top: 0; left: 0; margin: -18px 0 0 -18px; z-index: 20; cursor: pointer; }
#logos .logo1 .zoom { background-image: url(../img/content/logos/logo1_big.gif); }
#logos .logo2 .zoom { background-image: url(../img/content/logos/logo2_big.gif); }
#logos .logo3 .zoom { background-image: url(../img/content/logos/logo3_big.gif); }
#logos .logo4 .zoom { background-image: url(../img/content/logos/logo4_big.gif); }
#logos .logo5 .zoom { background-image: url(../img/content/logos/logo5_big.gif); }
#logos .logo6 .zoom { background-image: url(../img/content/logos/logo6_big.gif); }
/* Tooltip */
.tooltip { position: absolute; z-index: 99; bottom: 95px; width: 300px; padding-bottom: 15px; margin-left: -110px; background: url(../img/content/tooltip.gif) right bottom no-repeat; }
.tooltip.on-left, .tooltip.on-left .inner { background-image: url(../img/content/tooltip-left.gif); }
.tooltip .inner { padding: 10px 15px; color: #fff; font-size: 13px; background: url(../img/content/tooltip.gif) no-repeat; }
.tooltip img.left { padding: 1px; border: 1px solid #0e694d; margin: 4px 10px 5px 0; }
/* Subpage
---------------------------------------------- */
#subpage #header { height: 325px; margin-bottom: 25px; }
#subpage #header h1 { left: 15px; }
#subpage #menu li a { background-image: url(../img/header/menu-subpage.gif); }
#content .green { color: #189a73; font-weight: normal; }
#content .red { color: #ce1010; font-weight: normal; }
/* Content */
#subpage #content { float: left; width: 495px; min-height: 520px; padding: 0 30px; background: url(../img/content/content.gif) right 0 no-repeat; }
#subpage #content h1 { margin-bottom: 15px; font-size: 1.47em; }
#subpage #content h2 { margin-bottom: 15px; font-size: 1.47em; }
#subpage #content h3 { margin-bottom: 15px; font-size: 1em; font-style: italic; }
#subpage #content h4 { margin-bottom: 15px; font-size: 1em; font-weight: bold; text-transform: uppercase; }
#subpage #content a { color: #3e3f40; text-decoration: underline; }
#subpage #content a:hover { text-decoration: none; }
/* Image */
#subpage .image { float: left; margin: 4px 15px 5px 0; }
#subpage .image.right { float: right; margin: 4px 0 5px 15px; }
#subpage .image p { line-height: 120%; margin: 0; font-size: 0.76em; font-style: italic; }
#subpage .image img { display: block; padding: 3px; margin-bottom: 5px; border: 1px solid #c1c2c2; background: #efeff0; }
/* Button */
#subpage #content .button { position: relative; float: left; height: 50px; padding-right: 19px; margin: 0 0 5px -5px; *margin-bottom: 0; text-transform: uppercase; font-size: 12px; color: #3e3f40; text-decoration: none; background: url(../img/content/button.png) right bottom no-repeat; }
#subpage #content .button:hover { color: #0f966d; }
#subpage #content .button strong { float: left; height: 50px; line-height: 42px; padding: 0 1px 0 20px; background: url(../img/content/button.png) no-repeat; }
#subpage #content .button .helper { position: absolute; right: 0; top: 0; width: 19px; height: 50px; margin-right: -1px; background: url(../img/content/button-ie.png); }
/* Big button */
#subpage #content .big-button { position: relative; float: left; height: 81px; padding-right: 28px; margin: 0 0 10px -15px; *margin-bottom: 0; font-weight: bold; font-size: 18px; color: #0f966d; text-decoration: none; background: url(../img/content/big-button.png) right bottom no-repeat; }
#subpage #content .big-button:hover { color: #3e3f40; }
#subpage #content .big-button strong { float: left; height: 81px; line-height: 80px; padding: 0 2px 0 30px; background: url(../img/content/big-button.png) no-repeat; }
#subpage #content .big-button .helper { position: absolute; right: 0; top: 0; width: 28px; height: 81px; margin-right: -1px; background: url(../img/content/big-button-ie.png); }
/* products */
#subpage #products { width: 492px; }
#subpage #products li { position: relative; _height: 200px; padding: 0; padding-bottom: 15px; margin-bottom: 30px; background: url(../img/content/product-e.gif) 0 bottom no-repeat; }
#subpage #products h3 { width: 492px; height: 44px; padding: 0; margin: 0; *margin-bottom: -5px; text-transform: none; color: #fff; font-size: 1em; font-weight: bold; background: url(../img/content/product-b.gif) 0 bottom no-repeat; }
#subpage #products h3 span,
#subpage #products h3 a { float: left; height: 30px; line-height: 30px; padding: 0 10px; color: #fff; text-decoration: none; background: #0f966d; }
#subpage #products h3 a:hover { color: #3e3f40; }
#subpage #products h3 .right { padding-right: 10px; line-height: 30px; font-weight: bold; font-size: 14px; color: #0f966d; font-style: normal; }
#subpage #products .product { overflow: hidden; width: 100%; background: url(../img/content/product-bg.gif) repeat-y; }
#subpage #products .photo { float: left; padding-left: 9px; width: 205px; padding-bottom: 50px; }
#subpage #products .photo img { display: block; margin: 15px 0; }
#subpage #products .show { position: absolute; left: 9px; bottom: 14px; display: block; width: 155px; height: 30px; padding: 10px 0 10px 50px; font-weight: bold; text-decoration: none; color: #0f966d; line-height: 30px; font-size: 14px; text-decoration: none; }
#subpage #products .show:hover { color: #3e3f40; }
#subpage #products .show.show-3d { background: url(../img/content/product-3d.gif) 0 center no-repeat; }
#subpage #products .show.show-big { background: url(../img/content/product-show.gif) 0 center no-repeat; }
#subpage #products ul { float: right; width: 255px; padding-right: 10px; font-size: 0.76em; }
#subpage #products ul li { padding: 5px 0 5px 15px; margin: 0; background: url(../img/content/arr-green.gif) 0 8px no-repeat; height: auto; }
/* Left column */
#left { float: left; width: 155px; min-height: 300px; padding: 0 25px 25px 0; background: url(../img/content/left.gif) right 25px no-repeat; }
#left #logos { min-height: 225px; }
#left #logos li { margin: 0 2px 2px 0; }
.submenu { margin-bottom: 25px; font-size: 14px; font-weight: bold; }
.submenu li { padding: 4px 0; line-height: 120%; }
.submenu li a { display: block; _height: 10px; padding-left: 20px; color: #0f966d; background: url(../img/content/arr-green.gif) 0 3px no-repeat; }
.submenu li span { display: block; font-size: 12px; font-weight: normal; }
/* Right column */
#right { float: right; width: 220px; }
#right dt { margin-bottom: 10px; font-size: 14px; font-weight: bold; text-transform: uppercase; color: #0f966d; }
#right dd { padding: 2px 0; }
#right dd a { display: block; _height: 10px; font-size: 15px; padding-left: 15px; color: #3e3f40; background: url(../img/content/arr-gray.gif) 0 3px no-repeat; }
#right .player a { height: auto; padding: 0; background: none; }
#right .player img { display: block; }
#right .button { display: block; margin-top: 15px; width: 186px; height: 46px; background: url(../img/button.gif) no-repeat; text-indent: -999999999px; }
/* Footer
---------------------------------------------- */
#footer { height: 57px; color: #616264; font-size: 12px; text-transform: uppercase; background: #d8d9db url(../img/footer/bg.gif) repeat-x; }
#footer ul { width: 650px; position: relative; left: 50px; top: 24px; margin: 0 auto; }
#footer ul li { float: left; margin-right: 35px; }
#footer ul li a { color: #616264; padding-right: 22px; }
#footer .print a { background: url(../img/footer/print.gif) right center no-repeat; }
#footer .top a { background: url(../img/footer/top.gif) right center no-repeat; }
#footer .size span { float: left; margin-right: 5px; }
#footer .size a { float: left; width: 16px; height: 15px; margin-right: 5px; padding: 0; text-indent: -99999999px; }
#footer .size .plus { background: url(../img/footer/plus.gif) no-repeat; }
#footer .size .minus { background: url(../img/footer/minus.gif) no-repeat; }
#footer ul .last { float: right; margin: 0; }
#footer ul .last a { padding: 0; }
/* Fragebogen
---------------------------------------------- */
#fragebogen {
}
#fragebogen label.error {
color: #fff;
background: #ea2b2b;
font-size: 14px;
margin-top: 10px;
padding: 2px 5px;
display: none;
text-align: left;
vertical-align: middle
}
#fragebogen td label.error {
width: auto;
float: none;
font-size: 12px;
margin-right: 5px;
padding: 0 5px;
}
#fragebogen #step-3 label.error {
display: none !important;
}
#fragebogen #step-3 input.error {
border: 1px solid #ea2b2b;;
}
#fragebogen ol {
margin: 0;
}
#fragebogen ol li {
list-style-type: none;
padding-bottom: 15px;
margin-left: 0;
border-bottom: 1px solid #ddd;
}
#fragebogen ol li em {
display: block;
margin-bottom: 5px;
color: #000;
font-weight: bold;
}
#fragebogen ol li p.info {
margin-top: 10px;
margin-bottom: 0;
}
#fragebogen input.text,
#fragebogen textarea,
#fragebogen select {
padding: 4px;
width: 220px;
}
#fragebogen small {
font-size: 15px;
line-height: 1em;
}
#fragebogen label {
display: block;
}
#fragebogen textarea{
width: 350px;
height: 100px;
padding: 4px;
}
#fragebogen button,
#fragebogen input.submit {
padding: 4px 8px;
}
#fragebogen table {
width: 100%;
border-collapse: collapse;
border: 0;
padding: 0;
zoom: 1;
}
#fragebogen table .t small {
color: #ddd;
}
#fragebogen table .t {
font-size: 15px;
padding: 5px 6px;
}
#fragebogen table .v {
padding: 5px 6px;
}
#fragebogen table td {
border-top: 1px solid #ddd;
}
#fragebogen table th {
background: #13946D;
color: #fff;
}
#fragebogen table tr:nth-child(even) {
background: #f6f6f6;
}
#fragebogen .fragebogen_buttons {
overflow: hidden;
margin-bottom: 15px;
}
#fragebogen .fragebogen_buttons .fragebogen_button_prev {
float: left;
}
#fragebogen .fragebogen_buttons .fragebogen_button_next,
#fragebogen .fragebogen_buttons .submit {
float: right;
}
#fragebogen .data {
overflow: hidden;
margin-bottom: 15px;
}
#fragebogen .data p {
margin-bottom: 5px;
}
#fragebogen .data label {
float: left;
display: block;
width: 130px;
padding-right: 10px;
text-align: right
}
dl {
margin-bottom: 20px;
}
.overlay {
padding: 0;
width: 854px;
height: 480px;
display: none;
}
.close {
background: url(http://static.flowplayer.org/img/overlay/close.png) no-repeat;
position: absolute;
top: -35px;
right: -35px;
display: block;
width: 35px;
height: 35px;
cursor: pointer;
z-index: 90;
}
#player {
width: 854px;
height: 480px;
display: block;
position: relative;
z-index: 10;
}
/* 20/07/2011 */
a.btn {
text-decoration: none !important;
}
a.btn > span {
display: inline-block;
height: 30px;
line-height: 30px;
padding: 0 15px;
color: #fff;
font-size: 14px;
font-weight: bold;
text-decoration: none;
background: url(../img/bg_button.png);
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}
#subpage #products .product .btn {
position: absolute;
bottom: 20px;
right: 20px;
}