/* MINI-STYLEGUIDE: pink: #8a004b grey: #a1a1a1 darker: #7d7d7d (em & h1) light: #bfbfbf /* __include #BASIC RESET { ------------------------------------------------------------------------------------------------------------------------*/ * { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; } caption, th, td { text-align: left; } :focus { outline: 0; } table { border-collapse: collapse; border-spacing: 0; } ul { list-style-image: none; list-style-type: none; } /* } #GLOBAL LAYOUT CLASSES { ------------------------------------------------------------------------------------------------------------------------*/ .clear { clear: both; font-size:0px; line-height:0px; height:0px; } .clear_left { clear: left; font-size:0px; line-height:0px; height:0px; } .clear_right { clear: right; font-size:0px; line-height:0px; height:0px; } .nobreak { white-space: nowrap; } .align_center { text-align: center; } .align_right { text-align: right; } .align_left { text-align: left; } .align_top { vertical-align: top; } .align_middel { vertical-align: middle; } .align_bottom { vertical-align: bottom; } .float_left { float: left; } .float_right { float: right; } /* } #GRID (very poorly implemented) { ------------------------------------------------------------------------------------------------------------------------*/ .indent1 { margin-left: 10px; } .indent2 { margin-left: 20px; } .indent3 { margin-left: 30px; } .indent4 { margin-left: 40px; } .indent10 { margin-left: 100px; } .indent20 { margin-left: 200px; } .indent30 { margin-left: 300px; } .indent34 { margin-left: 400px; } .marginTop0 { margin-top: 0px; } .marginTop1 { margin-top: 10px; } .marginTop2 { margin-top: 20px; } .marginTop3 { margin-top: 30px; } .marginTop4 { margin-top: 40px; } .marginTop10 { margin-top: 100px; } .marginTop20 { margin-top: 200px; } .marginTop30 { margin-top: 300px; } .marginTop40 { margin-top: 400px; } /* } #FONTS, COLORS, TEXT-DECORATION, MARGINS ETC. { ------------------------------------------------------------------------------------------------------------------------*/ * { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } h1, p { margin-left: 30px; margin-right: 20px; } address, input, label, li, option, p, pre, select, td, textarea, th, caption { font-size: 13px; color: #a1a1a1; } input, select { font-size: 13px; } p, address { margin-bottom: 10px; font-size: 13px; line-height: 17.5px; } p { text-align: justify; } pre { margin-bottom: 5px; font-family: "Courier New", monospace; font-size: 11px; } .small { font-size: 0.8em; } h1 { color: #7d7d7d; font-size: 16px; border-bottom: 1px solid #a1a1a1; margin-bottom: 10px; padding-bottom: 4px; } h2 { color: #707173; font-size: 13px; text-transform: uppercase; } h3 { color: #707173; font-size: 10px; font-weight: bold; font-style: italic; border-bottom: 1px dashed #707173; padding-bottom: 3px; margin-bottom: 10px; } h4 { color: #004a7f; font-size: 11px; margin-bottom: 5px; font-weight: bold; } h5 { color: #004a7f; font-size: 11px; margin-bottom: 5px; font-style: italic; } h6 { color: #004a7f; font-size: 11px; margin-bottom: 5px; } hr { height: 1px; border-bottom: 1px solid #a1a1a1; margin: 10px 0 10px 13px; width: 700px; } em { color: #7d7d7d; } strong, b { font-weight: bold;} a:link { text-decoration: none; color: #8a004b;} a:visited { text-decoration: none; color: #8a004b; } a:hover, a:active { text-decoration: underline; } a.arrow, a.arrow:link, a.arrow:active, a.arrow:visited, a.arrow:hover { padding-left: 15px; background: transparent url(../images/arrow_black.gif) 0 -3px no-repeat; font-weight: normal; color: inherit; } /* ul { padding: 2px 0; margin-bottom: 5px; } ul li { background: transparent url(../images/icon_arrow_list.gif) 0 5px no-repeat; padding-left: 13px; margin-left: 10px; } */ ol { list-style-type: decimal; list-style-position:inside; padding: 2px 0; margin-bottom: 5px; } ol li { margin-left: 10px; } /* } #BOX-MODEL { ------------------------------------------------------------------------------------------------------------------------*/ #container { width: 720px; margin: 0 auto; padding-left: 130px; position: relative; } #logo { position: absolute; top: 0px; left: 17px; } #header { height: 61px; position: relative; padding-top: 29px; } #content { margin: 5px 0 45px; } #footer { height: 90px; } /* } #NAVIGATION { ------------------------------------------------------------------------------------------------------------------------*/ #nav { list-style-type: none; list-style-image: none; margin: 0 0 0 13px; padding: 0; } #nav li a { display: block; background: transparent url('../images/nav.gif') no-repeat; } #nav li { float: left; margin: 0; } #nav li a span { display: block; height: 0; width: 0; overflow: hidden; } #nav_start a { width: 73px; height: 25px; } #nav_start { background: url('../images/nav.gif') no-repeat; background-position: 0 -25px; } #nav_start a:link, #nav_start a:visited, #nav_start a:active { background-position: 0 0; } #nav_start a:hover, #nav_start.active a { background-image: none; } #nav_bilder a { width: 75px; height: 25px; } #nav_bilder { background: url('../images/nav.gif') no-repeat; background-position: -73px -25px; } #nav_bilder a:link, #nav_bilder a:visited, #nav_bilder a:active { background-position: -73px 0; } #nav_bilder a:hover, #nav_bilder.active a { background-image: none; } #nav_ueber_mich a { width: 109px; height: 25px; } #nav_ueber_mich { background: url('../images/nav.gif') no-repeat; background-position: -147px -25px; } #nav_ueber_mich a:link, #nav_ueber_mich a:visited, #nav_ueber_mich a:active { background-position: -147px 0; } #nav_ueber_mich a:hover, #nav_ueber_mich.active a { background-image: none; } #nav_kontakt a { width: 95px; height: 25px; } #nav_kontakt { background: url('../images/nav.gif') no-repeat; background-position: -255px -25px; } #nav_kontakt a:link, #nav_kontakt a:visited, #nav_kontakt a:active { background-position: -255px 0; } #nav_kontakt a:hover, #nav_kontakt.active a { background-image: none; } #nav_space { width: 75px; height: 25px; } #nav_erfuellte_wuensche a { width: 131px; height: 25px; } #nav_erfuellte_wuensche { background: url('../images/nav.gif') no-repeat; background-position: -425px -25px; } #nav_erfuellte_wuensche a:link, #nav_erfuellte_wuensche a:visited, #nav_erfuellte_wuensche a:active { background-position: -425px 0; } #nav_erfuellte_wuensche a:hover, #nav_erfuellte_wuensche.active a { background-image: none; } #nav_impressum a { width: 88px; height: 25px; } #nav_impressum { background: url('../images/nav.gif') no-repeat; background-position: -556px -25px; } #nav_impressum a:link, #nav_impressum a:visited, #nav_impressum a:active { background-position: -556px 0; } #nav_impressum a:hover, #nav_impressum.active a { background-image: none; } #nav_agb a { width: 51px; height: 25px; } #nav_agb { background: url('../images/nav.gif') no-repeat; background-position: -644px -25px; } #nav_agb a:link, #nav_agb a:visited, #nav_agb a:active { background-position: -644px 0; } #nav_agb a:hover, #nav_agb.active a { background-image: none; } #navLine { margin: 0 0 0 13px; } #navImages { list-style-type: none; list-style-image: none; margin: 0 0 0 13px; padding: 0; } #navImages li a { display: block; background: transparent url('../images/nav_bilder.gif') no-repeat; } #navImages li { float: left; margin: 0; } #navImages li a span { display: block; height: 0; width: 0; overflow: hidden; } #navImages_maerchen a { width: 94px; height: 25px; } #navImages_maerchen { background: url('../images/nav_bilder.gif') no-repeat; background-position: 0 -25px; } #navImages_maerchen a:link, #navImages_maerchen a:visited, #navImages_maerchen a:active { background-position: 0 0; } #navImages_maerchen a:hover, #navImages_maerchen.active a { background-image: none; } #navImages_sternzeichen a { width: 129px; height: 25px; } #navImages_sternzeichen { background: url('../images/nav_bilder.gif') no-repeat; background-position: -94px -25px; } #navImages_sternzeichen a:link, #navImages_sternzeichen a:visited, #navImages_sternzeichen a:active { background-position: -94px 0; } #navImages_sternzeichen a:hover, #navImages_sternzeichen.active a { background-image: none; } #navImages_raeume a { width: 71px; height: 25px; } #navImages_raeume { background: url('../images/nav_bilder.gif') no-repeat; background-position: -223px -25px; } #navImages_raeume a:link, #navImages_raeume a:visited, #navImages_raeume a:active { background-position: -223px 0; } #navImages_raeume a:hover, #navImages_raeume.active a { background-image: none; } #navImages_berufe_hobby a { width: 140px; height: 25px; } #navImages_berufe_hobby { background: url('../images/nav_bilder.gif') no-repeat; background-position: -294px -25px; } #navImages_berufe_hobby a:link, #navImages_berufe_hobby a:visited, #navImages_berufe_hobby a:active { background-position: -294px 0; } #navImages_berufe_hobby a:hover, #navImages_berufe_hobby.active a { background-image: none; } #navImages_anlaesse a { width: 89px; height: 25px; } #navImages_anlaesse { background: url('../images/nav_bilder.gif') no-repeat; background-position: -434px -25px; } #navImages_anlaesse a:link, #navImages_anlaesse a:visited, #navImages_anlaesse a:active { background-position: -434px 0; } #navImages_anlaesse a:hover, #navImages_anlaesse.active a { background-image: none; } #navImages_lustige_typen a { width: 134px; height: 25px; } #navImages_lustige_typen { background: url('../images/nav_bilder.gif') no-repeat; background-position: -523px -25px; } #navImages_lustige_typen a:link, #navImages_lustige_typen a:visited, #navImages_lustige_typen a:active { background-position: -523px 0; } #navImages_lustige_typen a:hover, #navImages_lustige_typen.active a { background-image: none; } /* } #LAYOUT BOXES { ------------------------------------------------------------------------------------------------------------------------*/ .boxHalfLeft { width: 47.5%; float: left; } .boxHalfRight { width: 47.5%; float: right; } .boxThreeForths { width: 75%; } .boxHalf { width: 50%; } .boxOneThird { width: 30%; } .boxTwoThirds { width: 60%; } .boxCenteredFloatOuter { clear: both; float: left; overflow: hidden; width: 100%; } .boxCenteredFloatInner { float: left; left: 50%; margin: 0 auto; position: relative; } .boxCenteredFloatElement { float: left; position: relative; right: 50%; } /* } #TABLES { ------------------------------------------------------------------------------------------------------------------------*/ table { width: 100%; border-top: 1px solid #cdcdcd; border-right: 1px solid #cdcdcd; margin: 10px auto; } caption { margin-top: 10px; caption-side:top; font-weight: bold; } td { border-left: 1px solid #cdcdcd; padding: .3em 1em; } th { border-bottom: 1px solid #cdcdcd; border-left: 1px solid #cdcdcd; padding: .3em 1em; } th.column1 { background-color: #eee; border-bottom: 1px solid #fff; text-align: center; } thead th { text-align: center; color: #004a7f; font-size: 13px; background:transparent url(../rpp_img1/bg_gradient_short_blue.gif) repeat-x scroll 0 0; border-bottom-width: 2px; padding-top: 5px; padding-bottom: 5px;} tfoot th { text-align:center; font-size: 12px; background:transparent url(../rpp_img1/bg_hatching_bottom.gif) repeat-x scroll left bottom; color: #004a7f; padding-top: 12px; padding-bottom: 12px; } tfoot th { border-top: 1px solid #cdcdcd; } tfoot td { border-bottom: 1px solid #cdcdcd; } table.light { margin: 10px 0; } table.light th.column1, table.light td { border-bottom: 1px solid #cdcdcd; } table.semantic { margin: 10px 0; width: auto; border: none; } table.semantic th, table.semantic td { padding: 0; background: none; border: none; border: none; padding: 0; } /* } #LISTS { ------------------------------------------------------------------------------------------------------------------------*/ ul.yearList { margin-top: 10px; } ul.yearList li { float: left; } /* } #FORMS { ------------------------------------------------------------------------------------------------------------------------*/ input.image { border: none; background-color: #a1a1a1; } a.button, span.button { border: 1px solid #dbdbdb; background: #dbdbdb url(../rpp_img1/bg_submit.gif) 0 0 repeat-x; background-color: #fff; color: #707173; padding: 2px 5px; text-decoration: none; font-size: 10px; } span.button { color: #dbdbdb; } /* simulate disabled button for preview of offer */ a.button.float_right, span.button.float_right { margin-left: 5px; } a.button.float_left, span.button.float_left { margin-right: 5px; } textarea { border: 1px solid #b1b1b1; background-color: #fff; color: #b1b1b1; padding: 1px 2px; margin-bottom: 10px; width: 300px; height: 100px; } span.mceEditor { margin-bottom: 10px; display: block; } input { border: 1px solid #b1b1b1; background-color: #fff; color: #a1a1a1; padding: 2px 2px; margin-right: 2px; height: 18px; } input.submit { border: none; background: #000 url(../images/arrow_nav.gif) 0 0 no-repeat; margin: 0; height: 20px; padding-left: 20px; color: #fff; } input.submit.large { width: 130px; } input.submit[disabled] { color: #dbdbdb; } input.file { height: auto; } label.file { padding-top: 6px; } p.file { padding-top: 6px; padding-left: 10px; } input.submit.float_right { margin-left: 5px; } /* this is to prevent that multiple floated buttons get squished */ select { border: 1px solid #b1b1b1; background-color: #fff; color: #b1b1b1; padding: 1px 2px; margin-right: 2px; } label { display: block; } input { margin: 5px 0 10px 0; } select { margin: 5px 0 10px 0; } input.nl { display: block; } input[disabled] { background-color: #cdcdcd; } select { margin-bottom: 10px; } select.nl { display: block; } input.checkbox_vertical { margin: 0; float: left; clear: both; border: none; } label.checkbox_vertical { line-height: 15px; margin-left: 20px; padding-bottom: 5px; } input.checkbox_horizontal { margin: 0; float: left; border: none; } label.checkbox_horizontal { margin: 0 15px 0 5px; float: left;} input.checkbox { margin: 0; padding: 0; height: auto; } input.radio_vertical { margin: 0; float: left; clear: both; border: none; } label.radio_vertical { line-height: 15px; margin-left: 20px; padding-bottom: 10px; } input.radio_horizontal { margin: 0; float: left; border: none; } label.radio_horizontal { margin: 0 15px 0 5px; float: left; } label.error, input.error, textarea.error { color: #ff0000; } input.error, textarea.error { margin-bottom: 0px; border-color: #ff0000; } label.error { margin-bottom: 5px; margin-left: 150px; font-size: 11px; } select.error { margin-bottom: 0px; border-color: #ff0000; } label.left { float: left; width: 135px; padding: 3px 15px 0 0; line-height: 15px; font-size: 12px; } label.long { width: 150px; } /* DIMENSIONS */ input.extra_short { width: 50px; } input.short { width: 100px; } input.short_medium { width: 150px; } input.medium { width: 200px; } input.long { width: 300px; } input.extra_long { width: 400px; } select.extra_short { width: 57px; } select.short { width: 107px; } select.medium { width: 207px; } select.long { width: 307px; } select.extra_long { width: 407px; } textarea.full { width: 99%; } textarea.heigh { height: 500px; } textarea.mediumHeigh { height: 250px; } /* COMBINED INPUT FIELDS */ .combLeft { margin-right: 5px; } input.combMediumShorter { width: 65px; } input.combMediumLonger { width: 123px; } input.combLongShorter { width: 80px; } input.combLongLonger { width: 208px; } input.combExtraLongShorter { width: 100px; } input.combExtraLongLonger { width: 288px; } select.combShortShorter { width: 44px; } select.combShortLonger { width: 60px; } select.combMediumShorter { width: 72px; } select.combMediumLonger { width: 130px; } /* } #ERROR AND NOTICES { ------------------------------------------------------------------------------------------------------------------------*/ #noscript { margin-top: 5px; padding: 10px; background-color: red; } #errorMessage { margin-top: 5px; padding: 10px; margin-right: 15px; } #errorMessage.error { background-color: #a4ca1d; } #errorMessage.notice { background-color: #eeeeee; } #errorMessage h1 { margin: 0 0 10px 0; text-transform: none; } #errorMessage p { font-size: 12px; margin-bottom: 5px; } .messageHeadlineOnly h2 { margin: 0; text-transform: none; } p.error, em.error { color: #a4ca1d; font-size: 12px; } p.error { margin: 5px 0; } /* } #CONTENT-SPECIFIC { ------------------------------------------------------------------------------------------------------------------------*/ /* images / products */ #imagesBack, #imagesForth { display: block; height: 368px; width: 50px; background-color: transparent; background-repeat: no-repeat; text-decoration: none; } #imagesBack { background-image: url(../images/back.gif); background-position: center right; } #imagesForth { background-image: url(../images/forth.gif); background-position: center left; } #priceBox { border: 1px solid #8a004b; padding: 0 2px 2px 10px; float: right; margin-top: 20px; margin-right: 20px; width: 200px; } #requestFormContainer { margin: 20px 0; } #requestFormContainer p { margin-left: 0; } #submitRequest { margin: 0 0 0 150px; width: auto; height: auto; padding: 0; } #previews { margin: 15px 0; text-align: center; } #previews img, #activePreview { margin-right: 22px; float: left; } #activePreview { position: relative; width: 41px; height: 41px; display: block; } #activePreview img { margin: 0; } #previews #activePreviewFrame { position: absolute; top: 0; left: 0; margin: 0; } #footNoteImages { font-size: 11px; margin-top: 20px; text-align: center; } .highlightPositive { padding: 5px; margin: 10px 20px 10px 30px; background-color: #a4ca1d; } .highlightNegative { padding: 5px; margin: 10px 20px 10px 30px; background-color: #ec6b22; } .highlightNegative p, .highlightPositive p { margin: 0; color: black; } /*#captchaImage { margin-left: 150px; }*/ /* gtc / terms */ ol.terms { list-style-type: decimal; margin: 0 20px 0 30px; padding: 0; } ol.terms li { list-style-position: outside; } ol.terms li p { margin: 0 0 5px 0; } ol.terms li ol { margin-left: 20px; } /* references */ #referencesContainer { width: 600px; margin: 50px auto; } .referenceImage { float: left; margin: 0 15px 15px 0; } .last { margin-right: 0; } /* } ------------------------------------------------------------------------------------------------------------------------*/