/*################# CSS 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; } /* remember to define focus styles! */ :focus { outline: 0; } body { line-height: 1; color: black; background: white; font-family: Verdana, Geneva, sans-serif; } #anmeldung td { line-height: 1; color: #36393D font-family: Verdana, Geneva, sans-serif; font-size: 12px; } ol, ul { list-style: none; } /* tables still need 'cellspacing="0"' in the markup */ 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: "" ""; } /*################# LAYOUT #################*/ #loading { background: whitesmoke; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } #loading .loader { position: absolute; top: 48%; width: 100%; text-align: center; } #loading .loader h1 { margin: 20px; font-size: 18px; font-weight: bold; } #contentContainer { display: none; } a { text-decoration: underline; } #header { width: 822px; position: relative; height: 170px; margin: 0 auto; background: url(images/header.jpg) no-repeat; } #header .cobra { position: absolute; top: 60px; left: 60px; } #header .gross { position: absolute; top: 60px; left: 620px; } #header .liveSupport { position: absolute; top: 75px; left: 250px; width: 350px; text-align: center; } #container { width: 822px; margin: 0 auto; background: url(images/bg.jpg) repeat-y; } #container .menuContainer { width: 499px; float: left; margin-left: 51px; } #menu { position: relative; width: 495px; height: 14px; margin: 0 auto; background: #99ccff; padding-top: 13px; padding-left: 5px; padding-bottom: 13px; } #menu a:link, #menu a:visited { letter-spacing: -1px; padding: 10px !important; font-size: 13px; text-decoration: none; color: midnightblue; } #menu a:hover { color: black; } #menu #startseite:hover, #menu #startseite.active { padding: 10px !important; color: black; background: url(images/startseitehover.jpg) no-repeat bottom ; } #menu #produkte:hover, #menu #produkte.active { color: black; background: url(images/produktehover.jpg) no-repeat bottom ; } #menu #preisliste:hover, #menu #preisliste.active { color: black; background: url(images/preislistehover.jpg) no-repeat bottom ; } #menu #garantie:hover, #menu #garantie.active { color: black; background: url(images/garantiehover.jpg) no-repeat bottom ; } #menu #schnittstellen:hover, #menu #schnittstellen.active { color: black; background: url(images/schnittstellenhover.jpg) no-repeat bottom ; } #subMenu { width: 495px; height: 24px; margin: 0 auto; background: #cce5ff; padding-top: 6px; padding-left: 5px; } #subMenu a:link, #subMenu a:visited, #subMenu p.scrollVersionCompare { letter-spacing: -1px; padding: 5px 10px; font-size: 12px; text-decoration: none; color: darkslateblue; } #subMenu a:hover, #subMenu a.active, #subMenu p.scrollVersionCompare:hover { text-decoration: underline; color: black; } #subMenu p.scrollVersionCompare { cursor: pointer; display: inline; } #subMenu .tabMUV, #subMenu .tabM { display: none; } #subMenu .subVersionCompare2 { display: none; } #subMenu .showVersionCompare1, #subMenu .showVersionCompare2 { display: inline; cursor: pointer; } #subMenu .subProducts2 { display: none; } #subMenu .showProducts1, #subMenu .showProducts2 { display: inline; cursor: pointer; } #requestInfo { float: left; width: 223px; height: 70px; background: url(images/requestinfo.jpg) no-repeat; } #requestInfo a { display: block; height: 100%; text-decoration: none; } #content { width: 695px; padding: 20px 64px 5px 63px; margin: 0 auto; background: url(images/bg.jpg) repeat-y; } #content p { color: #36393D; font-size: 12px; line-height: 24px; } #content h1:first-child { font-size: 14px; font-weight: bold; line-height: 28px; margin-top: 0; } #content h1 { font-size: 14px; font-weight: bold; line-height: 28px; margin-top: 20px; } #content h2:first-child { font-size: 16px; font-weight: bold; line-height: 26px; margin-top: 0; } #content h2 { font-size: 16px; font-weight: bold; line-height: 26px; margin-top: 18px; } #content .italic { letter-spacing: 2px; font-style: italic; } #content .bold { font-weight: bold; } #content .geodataFont { font-size: 24px; color: grey; letter-spacing: -1px; text-transform: uppercase; font-family: Georgia, serif; font-weight: bold; font-style: italic; } #content img.floatLeft { float: left; } #content a { color: darkslateblue; } #content a:hover { text-decoration: none; } /* ##### Tour Starten ##### */ #content .startTour { margin: 20px auto; width: 200px; height: 75px; text-align: center; background: whitesmoke; border: 1px solid lightgrey; } #content .startTour:hover { border: 1px solid black; } #content .startTour a:link, #content .startTour a:visited { height: 45px; padding-top: 30px; display: block; font-weight: bold; font-size: 16px; text-decoration: none; color: black; } #content .startTour a:hover { background: lightblue; } /* ##### Tour Navigation ##### */ #content #tourNavigation { margin-left: 14%; } #content #tourNavigation .back, #content #tourNavigation .next, #content #tourNavigation .exit { margin: 25px 0; float: left; width: 25%; } #content #tourNavigation #exit { width: 100%; text-align: center; } #content #tourNavigation .back { background: url(images/back.png) no-repeat 15px; } #content #tourNavigation .next { background: url(images/next.png) no-repeat 125px; } #content #tourNavigation .back a { font-size: 12px; display: block; padding: 10px 0 10px 50px; } #content #tourNavigation .next a { font-size: 12px; display: block; padding: 10px 0 10px 30px; } #content #exitButton { background: url(images/exit.png) no-repeat 15px; color: darkslateblue; border: none; cursor: pointer; padding: 10px 0 10px 40px; } /* ##### Produkte ##### */ #content .productLink { width: 40%; height: 140px; text-align: center; display: block; float: left; } #content a.productLink { text-decoration: none; } #content a.productLink span.h2 { font-size: 16px; color: midnightblue; margin-top: 0; display: block; } #content a.productLink span.p { font-size: 13px; display: block; line-height: 16px; color: grey; margin-top: 5px; } #content .productLinkCenter { width: 100%; height: 140px; text-align: center; display: block; margin: 20px auto; } #content a.productLinkCenter { text-decoration: none; } #content a.productLinkCenter span.h2 { font-size: 16px; color: midnightblue; margin-top: 5px; display: block; } #content a.productLinkCenter span.p { font-size: 13px; line-height: 16px; color: grey; display: block; margin-top: 5px; } #content a.productCompare { font-size: 10px; width: 20%; padding-top: 35px; text-align: center; display: block; float: left; text-decoration: none; } #content a.productCompare img { margin-top: 10px; } #content ul, #content li { margin-left: 10px; line-height: 20px; list-style: outside disc; font-size: 13px; } #content ul { margin-top: 15px; margin-bottom: 15px; } #content .productPicture { float: left; width: 30%; } #content .productInformation { float: left; width: 70%; } #content .productInformation h2 { display: inline; } #content .productInformation p { margin-left: 5px; color: grey; display: inline; font-size: 12px; font-style: italic; } #content .productInformation p a { color: grey; } #content .versionOverview, #content .requestInformation { margin: 25px 0; float: left; width: 50%; } #content .priceList { margin: 0; width: 50%; float: left; } #content .versionOverview { background: url(images/compare.png) no-repeat 15px; } #content .requestInformation { background: url(images/reqinfo.png) no-repeat 15px; } #content .priceList { background: url(images/pricelist.png) no-repeat 15px; } #content .versionOverview a, #content .requestInformation a, #content .priceList a { display: block; padding: 25px 0 25px 70px; } /* ##### Preisliste ##### */ #content .pricelistInfo { border: 1px solid grey; background: url(images/info.png) 8px 50% no-repeat whitesmoke; padding: 5px; font-style: italic; margin-bottom: 10px; padding-left: 50px; } #content #pricelist p.info { font-size: 12px; line-height: 14px; } #content #pricelist .adressPlus .tbl .head td { width: 25%; height: 75px; vertical-align: middle; border-bottom: 1px solid grey; font-size: 12px; font-weight: bold; text-align: center; line-height: 18px; background: url(images/adressplus-tbl-bg.jpg) bottom repeat-x; } #content #pricelist .adressPlus .tbl .head td a { text-decoration: none; } #content #pricelist .adressPlus .tbl td.desc[colspan="4"] { vertical-align: middle; font-size: 13px; font-weight: bold; padding: 5px; background: whitesmoke; text-align: left; color: black; font-style: normal; } #content #pricelist .adressPlus .tbl td.desc { text-align: left; color: black; font-style: italic; } #content #pricelist .adressPlus .tbl { margin: 15px 0; } #content #pricelist .adressPlus .tbl td { text-align: center; font-size: 12px; padding: 5px; color: #36393D; } #content #pricelist .crmPlus .tbl .head td:first-child { width: 28%; } #content #pricelist .crmPlus .tbl .head td { width: 18%; height: 75px; vertical-align: middle; border-bottom: 1px solid grey; font-size: 12px; font-weight: bold; text-align: center; line-height: 18px; background: url(images/crm-tbl-bg.jpg) bottom repeat-x; } #content #pricelist .crmPlus .tbl .head td a { text-decoration: none; } #content #pricelist .crmPlus .tbl td.desc[colspan="5"] { vertical-align: middle; font-size: 13px; font-weight: bold; padding: 5px; background: whitesmoke; text-align: left; color: black; font-style: normal; } #content #pricelist .crmPlus .tbl td.desc { text-align: left; color: black; font-style: italic; } #content #pricelist .crmPlus .tbl { margin: 15px 0; } #content #pricelist .crmPlus .tbl td { text-align: center; font-size: 12px; padding: 5px; color: #36393D; } #content #pricelist .geodata .tbl .head td { width: 25%; height: 75px; vertical-align: middle; border-bottom: 1px solid grey; font-size: 12px; font-weight: bold; text-align: center; line-height: 18px; background: url(images/geodata-tbl-bg.jpg) bottom repeat-x; } #content #pricelist .geodata .tbl .head td a { text-decoration: none; } #content #pricelist .geodata .tbl td.desc[colspan="4"] { vertical-align: middle; font-size: 13px; font-weight: bold; padding: 5px; background: whitesmoke; text-align: left; color: black; font-style: normal; } #content #pricelist .geodata .tbl td.desc { text-align: left; color: black; font-style: italic; } #content #pricelist .geodata .tbl { margin: 15px 0; } #content #pricelist .geodata .tbl td { text-align: center; font-size: 12px; padding: 5px; color: #36393D; } /* ##### Aktualitätsgarantie ##### */ #content .garantieHead { margin-bottom: 10px; } #content .garantieHead h2 { display: inline; } #content .garantieHead p { margin-left: 5px; color: grey; display: inline; } #content .garantieInfo { border: 1px solid grey; background: url(images/info.png) 8px 50% no-repeat whitesmoke; padding: 5px; font-style: italic; margin-bottom: 10px; padding-left: 50px; } /* ##### Informationen anfordern ##### */ #content #requestInformations { margin: 10px 0; } #content #requestInformations h3 { border: 1px solid grey; padding: 5px; margin-left: 10px; background: white; font-size: 14px; font-weight: bold; font-style: italic; z-index: 10; display: inline; background: whitesmoke; position: relative; } #content #requestInformations .informationen { border: 1px solid grey; padding: 10px 5px 5px 5px; margin-bottom: 20px; z-index: 5; position: relative; } #content #requestInformations .kontaktdaten { border: 1px solid grey; padding: 10px 5px 5px 5px; z-index: 5; position: relative; } #content #requestInformations br { clear: both; } #content #requestInformations label { text-align: right; font-weight: bold; font-size: 14px; width: 12%; float: left; margin: 6px 5px; line-height: 16px; } #content #requestInformations label.extended { text-align: right; font-weight: bold; font-size: 14px; width: 35%; float: left; margin: 6px 5px; } #content #requestInformations label.check1 { text-align: left; width: 90%; float: left; margin: 5px; } #content #requestInformations input.check1 { float: left; margin: 5px; } #content #requestInformations input[type="text"] { border: 1px solid #eee; margin: 5px; width: 30%; float: left; background: #eee; } #content #requestInformations select { margin: 5px 6px 5px 6px; width: 15%; float: left; background: #eee; border: 1px solid #eee; } #content #requestInformations select#einsatz, #content #requestInformations select#woher, #content #requestInformations select#wawi { width: 25%; } #content #requestInformations input[type="checkbox"] { margin: 7px 2px 7px 7px; float: left; } #content #requestInformations span.check-desc { margin: 7px 3px; float: left; font-size: 12px; } #content #requestInformations input.small { width: 15%; float: left; } #content #requestInformations .kontaktdaten input#lizenzen { width: 25%; } #content #requestInformations input.required { border: 1px solid #B02B2C; background: #eee; } #content #requestInformations .break { margin: 5px 0 10px 0; font-size: 12px; border-bottom: 1px solid #eee; } #content #requestInformations abbr { border-bottom: 1px dotted grey; cursor: help; } #content #requestInformations label.textarea { width: 25%; } #content #requestInformations textarea { width: 60%; background: #eee; border: 1px solid #eee; } #content #requestInformations label.datenschutz { width: 12%; font-size: 12px; } #content #requestInformations .info { border: 1px solid grey; background: whitesmoke; padding: 5px; font-weight: bold; font-style: italic; text-align: center; margin-top: 10px; } #content #requestInformations input[type="submit"] { margin: 10px; background: url(images/reqinfo-submit.jpg) no-repeat; width: 125px; height: 60px; cursor: pointer; border: none; margin-left: 40%; } #content #message { padding: 5px 5px 5px 35px; margin: 0 0 20px 0; font-size: 14px; } #content #message.error { border: 1px solid orangered; background: url(images/cross.png) no-repeat 10px 50% antiquewhite; } #content #message.success { border: 1px solid darkgreen; background: url(images/tick.png) no-repeat 10px 50% beige; } /* ##### Versionsvergleich ##### */ #content #versionCompare div#tabNav { margin: 20px 0; text-align: center; } #content #versionCompare span.tab { cursor: pointer; padding: 5px; background: whitesmoke; border: 1px solid #ccc; color: #999; } #content #versionCompare span.tab:hover, #content #versionCompare span.activeTab { background: #ccc; border: 1px solid black; color: black; } #content #versionCompare div.tabM { display: none; } #content #versionCompare div.tabMUV { display: none; } #content #versionCompare #legend .contained { float: left; width: 18%; padding: 10px 0 10px 40px; background: url(images/contained.png) no-repeat 5px 50%; font-size: 12px; letter-spacing: -1px; } #content #versionCompare #legend .improved { float: left; width: 18%; padding: 10px 0 10px 40px; background: url(images/improved.png) no-repeat 5px 50%; font-size: 12px; letter-spacing: -1px; } #content #versionCompare #legend .new { float: left; width: 18%; padding: 10px 0 10px 40px; background: url(images/new.png) no-repeat 5px 50%; font-size: 12px; letter-spacing: -1px; } #content #versionCompare #legend .empty { float: left; width: 18%; padding: 10px 0 10px 40px; background: url(images/empty.png) no-repeat 5px 50%; font-size: 12px; letter-spacing: -1px; } #content #versionCompare #legend { margin: 10px 0; } #content #versionCompare .tbl { margin: 5px 0; } #content #versionCompare .tbl tr.topic td { font-style: normal; font-weight: bold; font-size: 14px; background: #eee; padding: 5px; text-align: left; } #content #versionCompare .tbl tr.topic img { float: right; cursor: pointer; } #content #versionCompare .tbl tr.head td { font-size: 12px; text-align: left; padding: 5px; background: whitesmoke; } #content #versionCompare .tbl tr.head td[class] { text-align: center; } #content #versionCompare .tbl td { border-bottom: 1px solid #eee; vertical-align: middle; width: 10%; font-size: 12px; font-style: italic; text-align: center; padding: 2px 0; } #content #versionCompare .tbl td p { font-size: 12px; line-height: 12px; } #content #versionCompare .tbl td.desc { width: 60%; padding: 5px; font-size: 13px; font-style: normal; text-align: left; } #content #versionCompare .tbl td.ten { background: url(images/geodata-tbl-bg.jpg) bottom repeat-x; } #content #versionCompare .tbl td.eleven { background: url(images/adressplus-tbl-bg.jpg) bottom repeat-x; } #content #versionCompare .tbl td.twelve { background: url(images/adressplus-tbl-bg.jpg) bottom repeat-x; } #content #versionCompare .tbl td.CRM { background: url(images/crm-tbl-bg.jpg) bottom repeat-x; } /* ##### Schnittstellen ##### */ #content .schnittstellenInfo { border: 1px solid grey; background: url(images/info.png) 8px 50% no-repeat whitesmoke; padding: 5px; font-style: italic; margin-bottom: 10px; padding-left: 50px; } #content .schnittstellenLink { width: 100%; margin: 20px 0; text-align: center; display: block; } #content a.schnittstellenLink { text-decoration: none; } /* ##### Seitenkarte ##### */ #content #sitemap li { list-style: none; } #content #sitemap li.main { background: url(images/root.gif) no-repeat 1px 50%; padding-left: 20px; font-size: 14px; margin-top: 10px; } #content #sitemap li.main a { text-decoration: none; color: black; letter-spacing: 2px; } #content #sitemap li.sub a { text-decoration: none; color: darkslategrey; } #content #sitemap li.sub2 a { text-decoration: none; color: dimgrey; } #content #sitemap li.main:first-child { margin-top: 0; } #content #sitemap li.sub { background: url(images/sub.gif) no-repeat 20px 50%; padding-left: 30px; font-size: 13px; } #content #sitemap li.sub2 { background: url(images/pdf.gif) no-repeat 42px 50%; padding-left: 60px; font-size: 12px; } /* ##### Impressum ##### */ #content .imprintData { float: left; width: 32%; display: block; } #content .imprintData br.extended { margin-bottom: 5px; } /* ##### Neuigkeiten ##### */ #content li.newsTitle { list-style: none; font-variant: small-caps; font-weight: bold; font-size: 14px; border-bottom: 2px solid #7b7e85; } #content li.newsContent { list-style: none; margin-bottom: 25px; } #content li.newsContent li.newsContentTitle { list-style: none; font-size: 12px; margin-left: -8px; font-weight: bold; margin-top: 15px; } #content li.newsContent li { font-weight: normal; list-style: outside disc; font-size: 12px; margin-left: 15px; } /* ##### Footer ##### */ #footer { width: 822px; position: relative; height: 75px; margin: 0 auto; background: url(images/footer.jpg) no-repeat; } #footer .copyright { position: absolute; top: 11px; left: 63px; font-size: 12px; } #footer .copyright a { text-decoration: none; color: black; line-height: 14px; } #footer .links { position: absolute; top: 8px; right: 60px; } #footer .links a:link, #footer .links a:visited, #footer p.top { text-decoration: none; font-size: 12px; padding: 5px; color: midnightblue; } #footer .links p.top { display: inline; cursor: pointer; } #footer .links a:hover, #footer p.top:hover { text-decoration: underline; } .stripViewer .panelContainer .panel ul { text-align: left; margin: 0 15px 0 30px; } .slider-wrap { /* This div isn't entirely necessary but good for getting the side arrows vertically centered */ margin: 20px 0; position: relative; width: 100%; } #content .slider-wrap h2 { border-bottom: 1px solid grey; padding-bottom: 1px; margin-bottom: 5px; } /* These 2 lines specify style applied while slider is loading */ .csw {width: 100%; height: 400px; background: #fff; overflow: scroll} .csw .loading {margin: 200px 0 300px 0; text-align: center} .stripViewer { /* This is the viewing window */ position: relative; overflow: hidden; /* borders hier */ border: 1px solid grey; margin: auto; width: 600px; /* Also specified in .stripViewer .panelContainer .panel below */ height: 400px; clear: both; background: #fff; } .stripViewer .panelContainer { /* This is the big long container used to house your end-to-end divs. Width is calculated and specified by the JS */ position: relative; left: 0; top: 0; width: 100%; list-style-type: none; /* -moz-user-select: none; // This breaks CSS validation but stops accidental (and intentional - beware) panel highlighting in Firefox. Some people might find this useful, crazy fools. */ } .stripViewer .panelContainer .panel { /* Each panel is arranged end-to-end */ float:left; height: 100%; position: relative; width: 600px; /* Also specified in .stripViewer above */ } .stripViewer .panelContainer .panel .wrapper { /* Wrapper to give some padding in the panels, without messing with existing panel width */ padding: 10px; } .stripNav { /* This is the div to hold your nav (the UL generated at run time) */ margin: auto; max-width: 600px; } #content .stripNav ul { list-style: none; margin: 0; padding: 0; text-align: center; } #content .stripNav li { float: left; margin: 0 0 5px 0; padding: 0; list-style: none; margin-right: 5px; /* If you change this, be sure to adjust the initial value of navWidth in coda-slider.1.1.1.js */ } .stripNav a { /* The nav links */ font-size: 10px; font-weight: bold; text-align: center; line-height: 32px; text-decoration: none; display: block; padding: 0 15px; } #content .stripNav li.tab1 a, #content .stripNav li.tab2 a, #content .stripNav li.tab3 a, #content .stripNav li.tab4 a { background: #eee; color: #999; } #content .stripNav li.tab5 a, #content .stripNav li.tab6 a, #content .stripNav li.tab7 a, #content .stripNav li.tab8 a { background: #eee; color: #999; } #content .stripNav li.tab9 a, #content .stripNav li.tab10 a, #content .stripNav li.tab11 a, #content .stripNav li.tab12 a { background: #eee; color: #999; } #content .stripNav li.tab13 a, #content .stripNav li.tab14 a, #content .stripNav li.tab15 a, #content .stripNav li.tab16 a { background: #eee; color: #999; } #content .stripNav li.tab17 a, #content .stripNav li.tab18 a, #content .stripNav li.tab19 a, #content .stripNav li.tab20 a { background: #eee; color: #999; } #content .stripNav li a:hover { background: #e7e7e7; color: black; } #content .stripNav li a.current { background: #99ccff; color: white; } .stripNavL, .stripNavR { /* The left and right arrows */ position: absolute; top: 250px; text-indent: -9000em; } .stripNavL a, .stripNavR a { display: block; height: 40px; width: 40px; } .stripNavL { left: 0; } .stripNavR { right: 0; } .stripNavL { background: url("images/arrow-left.gif") no-repeat center; } .stripNavR { background: url("images/arrow-right.gif") no-repeat center; } #content .stripViewer .box2 { display: none; } #content .stripViewer .wrapper li { list-style: inside; } #content .stripViewer span.neu { background: #FFFF88; color: #B02B2C; font-weight: bold; padding: 2px; } #content .stripViewer img.screenShot { float: left; padding: 5px 5px 5px 0; cursor: pointer; }