/*----------------------------------------------------------------- ------------/\\\--------------------------------------------------- /\\\\\ /\\\/\\\ 4SELLERS Webshop /\\\/\/\\\ Copyright © 2013 logic-base GmbH /\\\/__\/\\\ /\\\\\\\\\\\\\\\\ CSS-Style \///////////\\\// Erstellung: 2013-1 (MP) \/\\\ -------------------\///------------------------------------------ ----------------------------------------------------------------*/ /* Reset für diverse Browser */ /* ---------------------------------------------------------- */ body {font-family: Arial; margin: 0px; padding: 0px; font-size: 12px; line-height: 16px; background: #fff; color: #332C19;} .body {font-family: Arial; margin: 20px; padding: 0px; font-size: 12px; line-height: 16px; background: #fff; color: #332C19;} /* für pages */ a {text-decoration: none; color: #EE7400; outline: none;} a:active, a:hover{text-decoration: none; color: #332C19; outline: none;} h1, h2, h3, h4, h5, h6, p, img, form, input, li, ul, ol, select, fieldset {margin: 0px; padding: 0px; border: 0px; font-weight: normal;} ul, ol {list-style-type: none;} html, button, select, textarea {font-family: Arial; margin: 0px; vertical-align: baseline; vertical-align: middle; line-height: normal;} img {vertical-align: middle;} table {border-collapse: collapse; border-spacing: 0px;} td, th {vertical-align: top;} h1 {font-family: 'Roboto Slab', serif; font-weight:700; line-height: 22px; font-size: 18px; margin-bottom: 10px;} h2 {font-family: 'Roboto Slab', serif; font-weight:700; line-height: 22px; font-size: 18px; margin-bottom: 10px;} h3 {font-family: 'Roboto Slab', serif; font-weight:700; line-height: 22px; font-size: 18px; margin-bottom: 10px;} h4 {font-family: 'Roboto Slab', serif; font-weight:700; line-height: 22px; font-size: 18px; margin-bottom: 10px;} h5 {font-family: 'Roboto Slab', serif; font-weight:700; line-height: 22px; font-size: 18px;} h6 {font-family: 'Roboto Slab', serif; font-weight:700; line-height: 16px; font-size: 14px; margin-bottom:10px;} hr {display: block; height: 1px; border: 0; border-top: 1px solid #EAEAEA; margin: 5px 0px 5px 0px; padding: 0px;} /* ---------------------------------------------------------- */ /* Globale Definition - gilt für alle Seiten */ /* ---------------------------------------------------------- */ #main {} /*Bugfix für iPad Ansicht */ .left {float: left;} .right {float: right;} /* Spacer - Abstände */ .space_5 {height: 5px; display: block; overflow: hidden;} .space_10 {height: 10px; display: block; overflow: hidden;} .space_20 {height: 20px; display: block; overflow: hidden;} .space_30 {height: 30px; display: block; overflow: hidden;} .space_40 {height: 40px; display: block; overflow: hidden;} /* Margin - Abstände */ .mt_10 {margin-top: 10px;} .mt_20 {margin-top: 20px;} .mb_5 {margin-bottom: 5px;} .mb_10 {margin-bottom: 10px;} .mb_20 {margin-bottom: 20px;} .mr_10 {margin-right: 10px;} .mr_20 {margin-right: 20px;} .ml_10 {margin-left: 10px;} .ml_20 {margin-left: 20px;} /* Dropdownlisten */ select {border: solid 1px #ccc; padding: 3px; } /* Textboxen (global & Fehlerklassen) */ input {/*width: 200px;*/ padding: 5px 10px 5px 10px; border: solid 1px #ccc; line-height: normal;} input[type="radio"] {width: auto; padding: 0px 5px 0px 0px; border: 0; background: none;} input[type="checkbox"] {width: auto; padding: 0px 5px 0px 0px; border: 0; background: none;} .input_error {padding: 5px 10px 5px 10px; color: Red;} textarea {padding: 5px 10px 5px 10px; border: solid 1px #ccc;} .textarea_error {padding: 5px 10px 5px 10px; border: solid 1px #f00;} .radio {width: auto; padding: 0px 5px 0px 0px; border: 0;} .radio input {width: auto; padding: 0px 5px 0px 0px; border: 0; background: none;} /* Workaround */ /* IE6 - IE8 Hack bzgl. Aufhebung der float-Elemente */ * html .clear {height:1%} /* Optimierung IE6 */ .clear:after {content:"."; clear:both; display:block; height:0; visibility:hidden} .clear {display: inline-block; } /* Verstecke vor IE-mac \*/ * html .clear {height: 1%;} /* Optimierung IE6 */ .clear {display: block;} /* Ende Verstecke vor IE-mac */ /* Globale Druckansicht - !Darf nicht mit Block-Styles kombiniert werden! */ @media print {.print_none {display: none;}} /* ---------------------------------------------------------- */ /* Textformatierungen */ /* ---------------------------------------------------------- */ .text_10 {font-size: 10px; line-height: 12px;} .text_11 {font-size: 11px; line-height: 13px;} .text_12 {font-size: 12px; line-height: 14px;} .text_13 {font-size: 13px; line-height: 15px;} .text_14 {font-size: 14px; line-height: 16px;} .text_15 {font-size: 15px; line-height: 17px;} .text_16 {font-size: 16px; line-height: 18px;} .text_17 {font-size: 17px; line-height: 19px;} .text_18 {font-size: 18px; line-height: 20px;} .text_19 {font-size: 19px; line-height: 21px;} .text_20 {font-size: 20px; line-height: 22px;} .text_22 {font-size: 22px; line-height: 24px;} /* Farben */ .red {color: #f00;} .orange {color: #f60;} .green {color: #62A21D;} .grey {color: #999;} .greydark {color: #666;} .orange4 {color: #EE7400;} /* Verfügbarkeit */ .bg_stock {background-image: url(icons/bg-stock.png); background-position: 0px 0px; background-repeat: no-repeat; height: 15px; font-family: 'Roboto Slab', serif; color: #82BF00; font-size: 12px; line-height: 15px; text-indent: 20px; width: 150px;} .av_orange {background-position: 0px -15px; color: #E67800;} .av_red {background-position: 0px -30px; color: #CE0000;} /* Preis */ .discount {color: red; font-weight: bold; font-size: 11px; line-height: 12px;} .price {font-family: 'Roboto Slab', serif; color: #CE0000; font-size: 20px; line-height: 20px;} .priceDetail {font-family: 'Roboto Slab', serif; color: #CE0000; font-size: 30px; line-height: 30px;} .priceholder {height: 55px;} /* nur für Rabatt, durchgestrichenen Preis & normaler Preis */ .totalprice {font-family: 'Roboto Slab', serif; color: #CE0000; font-size: 20px; line-height: 20px;} .priceDiscount {font-family: 'Roboto Slab', serif; color: #CE0000; font-size: 14px; line-height: 14px; text-decoration: line-through;} .priceUVP {color: #666; text-decoration: line-through;} .priceinfo {font-size:20px;} /* * Preisangaben... */ .price_vat {text-align:center; padding:0 0 15px 0; font-size: 11px; line-height: 14px; color: #ABABAB; background: #322B17;} .price_vat a {color: #ABABAB; text-decoration: underline;} .price_vat a:hover {color: #fff;} /* Für Warenkorbansicht */ .priceHappyHour {font-family: 'Roboto Slab', serif; color: #EE7400; font-size: 20px; line-height: 20px;} .priceDiscount2 {color: red; font-weight: bold; text-decoration: line-through; font-size: 12px;} .price2 {color: #332C19; font-weight: bold;} /* ---------------------------------------------------------- */ /* Tabellenformatierung */ /* ---------------------------------------------------------- */ .tbl {width: 100%;} th {background: #EAEAEA; padding: 10px; font-family: 'Roboto Slab', serif; font-size: 14px; line-height: 16px; text-align: left;} .td {width: 25%;} /* Tabellenzelle mit fester Breite */ .tbl td {padding: 10px;} /* kompakte Darstellung */ .tbl_clear {width: 100%;} .tbl_clear th {background: url(icons/bg-grey-small.png) repeat-x; padding: 5px 0px 5px 0px; font-family: 'Roboto Slab', serif; font-size: 14px; line-height: 14px; font-weight: normal; text-align: center;} .tbl_clear td {padding: 2px;} /* kompakte Darstellung mit Linien und Mouse-Over */ .tbl_small {border-left: 1px solid #EAEAEA; border-bottom: 1px solid #EAEAEA; width: 100%;} .tbl_small th {border-right: 1px solid #EAEAEA; background: url(icons/bg-grey-small.png) repeat-x; padding: 5px; font-family: 'Roboto Slab', serif; font-size: 14px; line-height: 14px; font-weight: normal; text-align: center;} .tbl_small td {padding: 2px; border-right: 1px solid #EAEAEA; text-align: center;} .tbl_small .td2 {background-color: #f0f0f0;} .tbl_small tr:hover {background-color: #f0f0f0;} .tbl_small_sml {border-left: 1px solid #EAEAEA; border-bottom: 1px solid #EAEAEA; width: 100%;} .tbl_small_sml td {padding: 5px; border-right: 1px solid #EAEAEA; text-align: left;} .tbl_small_sml .td2 {background-color: #f0f0f0;} /* Fusstabellen in grau */ .tbl_footer {width: 100%; background: #EAEAEA;} .tbl_footer td {border-bottom: 1px solid #fff; border-left: 1px solid #fff; padding: 5px 10px 5px 10px;} /* Tabelle mit Div-Aufbau */ .row {margin-bottom: 10px;} .col {float: left; width: 200px; color: #666;} .col_100 {float: left; width: 100px; color: #666;} /* ---------------------------------------------------------- */ /* Tooltip */ /* ---------------------------------------------------------- */ .ui-tooltip, .tooltip_arrow:after {border: 2px solid white; position: absolute; z-index: 999999; background: #fff; max-width: 300px; } .ui-tooltip {padding: 20px; -webkit-border-radius: 5px; border-radius: 5px; } .tooltip_arrow {width: 70px; height: 16px; overflow: hidden; position: absolute; left: 50%; margin-left: -35px; bottom: -16px; } .tooltip_arrow.top {top: -16px; bottom: auto;} .tooltip_arrow.left {left: 20%;} .tooltip_arrow:after {content: ""; position: absolute; left: 20px; top: -20px; width: 25px; height: 25px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); tranform: rotate(45deg); border: 1px solid #999;} .tooltip_arrow.top:after {bottom: -20px; top: auto;} /* ---------------------------------------------------------- */ /* Bildgrößen */ /* ---------------------------------------------------------- */ .img_box {width: 150px; height: 150px; position: relative; background: #fff; } .img_box img {width: 150px; max-height: 150px;} .img, .sale {position: absolute; top: 0; left: 0; } /* Schnellansicht */ .img_box .bt_small a {position: absolute; top: 120px; left: 25px; padding: 2px 10px 2px 10px; width: 78px; text-align: center; display: none;} .img_box:hover .bt_small a {position: absolute; top: 120px; left: 25px; padding: 2px 10px 2px 10px; width: 78px; text-align: center; display: block;} .img_detail {height: 350px; width:350px; margin-bottom: 10px; border: 1px solid #EAEAEA;} .img_detail img {width: 350px; cursor: pointer;} /* Lightbox - Thumbbilder */ .img_detail_thumb {height: 48px; width: 48px; float: left; margin: 0px 10px 10px 0px; border: 1px solid #eaeaea; font-size: 10px; line-height: 11px;} .img_detail_thumb:hover {border: 1px solid #EE7400;} .img_detail_thumb img {width: 48px; max-height: 48px; cursor: pointer;} /* Für Warenkorb, Merkzettel, Stücklisten, Bestellprozess */ .img_clear {height: 80px; width: 80px; float: left; margin: 0px 10px 0px 0px; font-size: 10px; line-height: 11px;} .img_clear img {width: 80px; max-height: 80px;} /* Kategoriebilder */ .cat_img {width: 340px; margin-bottom: 20px; padding: 15px; background: #fff; border-left: 1px solid #D6D6D6; border-top: 1px solid #D6D6D6; border-right: 1px solid #999; border-bottom: 1px solid #999; -webkit-border-radius: 5px; border-radius: 5px;} .cat_img img {width: 340px; height: 100px;} /* Lightbox */ .lblightbox {position: fixed; background: url(icons/bg-lightbox.png) repeat; top: 0; left: 0; z-index: 20000; width: 100%; height: 100% } .lblightbox .content {position: fixed; top: 20px; width: 960px; height: 760px; padding: 20px; box-shadow: 0 0 30px 1px #000; z-index: 20001; background: #fff; -webkit-border-radius: 5px; border-radius: 5px; } .lblightbox .contentCart {position: fixed; top: 20px; width: 960px; padding: 20px; box-shadow: 0 0 30px 1px #000; z-index: 20001; background: #fff; -webkit-border-radius: 5px; border-radius: 5px; } .lblightbox .controls h1 {float: left; } .lblightbox .controls .close {float: right; cursor: pointer; width: 30px; height: 30px; background: url(icons/bt-lb-close.png) no-repeat;} .img_lightbox {width: 700px; float: left;} .img_lightbox img {max-width: 700px; max-height: 700px; -webkit-border-radius: 5px; border-radius: 5px; cursor: auto;} .img_lightbox_thumb {float: right; width: 240px;} .img_lightbox_thumb .img_detail_thumb {margin: 0px 0px 10px 10px;} /* 4SELLERS ImageZoom */ .img_detail .img_detail_big { position: relative; z-index: 100; } .sourceWrapper { position: absolute; } .sourceWrapper .view { position: relative; height: auto; background: rgba(0, 0, 0, 0.1); border: 1px solid red; z-index: 1; background: rgba(255, 255, 255, .2); border-radius: 3px; } .sourceWrapper .layer { cursor: move; background: none; } .imagezoom_destination { position: fixed; z-index: 200; width: 648px; overflow: hidden; box-shadow: 0 0 10px 1px rgba(0, 0, 0, .2); } /* 4SELLERS RotationPlayer Overrides */ .lblightbox .rotationplayer4sellers {} .lblightbox .rotationplayer4sellers img { max-width: none; max-height: none; -webkit-border-radius: none; border-radius: none; } .lblightbox .rotationplayer4sellers img { cursor: auto; } .lblightbox .rotationplayer4sellers.zoom img { cursor: move; } .lblightbox .rotationplayer4sellers .loading .img { position: relative; } .lblightbox .rotationplayer4sellers #controls { width: 240px; } /* ---------------------------------------------------------- */ /* Layoutgerüst */ /* ---------------------------------------------------------- */ .bg_teaser { background: url(icons/bg_startteaser.png) repeat-x 0 0; } /* Alternative Positionierung des Hintergrundbild auf der Startseite */ .bg_header { background: url(icons/bg_header.png) repeat-x 0 0; } .container {width:1000px; margin: 0 auto 0 auto;} .col_216 {float: left; width: 216px;} .col_764 {float: right; width: 764px;} .left_480 {float: left; width:480px;} .right_480 {float: right; width:480px;} .left_50 {float: left; width: 50%;} .bg_footer {background: url(icons/bg-footer2.png) repeat-x 0px bottom;} .banner_right {position: absolute; left: 50%; margin-left: 520px; width: 150px; height: 500px; -webkit-border-radius: 5px; border-radius: 5px;} .banner_left {position: absolute; left: 50%; margin-left: -670px; width: 150px; height: 500px; -webkit-border-radius: 5px; border-radius: 5px;} /* ---------------------------------------------------------- */ /* Templates (Linke & Rechte Spalte) */ /* ---------------------------------------------------------- */ /* Linke Spalte */ .sat {margin-bottom: 20px; padding: 15px; background: url(icons/bg-grey.png) repeat-x 0px bottom; border-left: 1px solid #D6D6D6; border-top: 1px solid #D6D6D6; border-right: 1px solid #999; border-bottom: 1px solid #999; -webkit-border-radius: 5px; border-radius: 5px;} .sat_content {} .sat select {width: 100%;} /* Hauptinhalt */ .sat_main {margin-bottom: 20px;} .main_content {padding: 15px; background: #fff; border: 1px solid #EAEAEA;} .main_content_highlight {padding: 15px; background: #fff; border: 2px solid #EE7400;} /* ---------------------------------------------------------- */ /* Kontaktbox */ /* ---------------------------------------------------------- */ .contact {margin-bottom: 20px; background: #fff url(icons/bg-grey.png) repeat-x 0px bottom; border-left: 1px solid #D6D6D6; border-top: 1px solid #D6D6D6; border-right: 1px solid #999; border-bottom: 1px solid #999; -webkit-border-radius: 5px; border-radius: 5px;} .contact img {-webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; } .contact p {font-family: 'Roboto Slab', serif;} .contact_content {padding: 15px 0px 15px 15px;} /* ---------------------------------------------------------- */ /* Zuletzt angesehen */ /* ---------------------------------------------------------- */ .last_viewed {margin-bottom: 20px;} /* Standard Bildgrößen überschreiben */ .last_viewed .img_box {width: 98px; height: 98px; margin-right: 10px; float: left; position: relative; border: 1px solid #EAEAEA;} .last_viewed .img {width: 100%; height: 100%; position: absolute; top: 5px; left: 5px; } .last_viewed .img_box img {width: 88px; height: 88px;} /* ---------------------------------------------------------- */ /* Kompatibilitäten-Formular Startseite */ /* ---------------------------------------------------------- */ .col_330 {float: left; width: 330px; color:#FFF; padding-top:30px;} .col_330 h2 {font-size:26px; line-height:34px; margin:0 0 20px 0;} .col_330 select {width:300px; height:35px; padding:5px; display:block; margin-bottom:10px;} .col_330 input[type=button].start-submit-btn { color:#fff; margin-top:10px; font-size:20px; font-weight:bold; padding:0; text-align:left; text-indent:20px; background:url(icons/start-submit.png) no-repeat 0 0; border:none; width:180px; height:36px; cursor:pointer; display:inline-block;} .col_330 input[type=button].start-submit-btn:hover {background:url(icons/start-submit.png) no-repeat 0 -36px;} a.delete-filter:link, a.delete-filter:active, a.delete-filter:visited {background:url(icons/small-delete.png) 0 0 no-repeat; float:right; display:inline-block; margin:20px 0 0 0; width:100px; height:15px; padding-left:20px; color:#FFF; text-decoration:underline;} a.delete-filter:hover {color:#CE0000;} /* ---------------------------------------------------------- */ /* Kompatibilitäten-Formular linke Spalte */ /* ---------------------------------------------------------- */ #mainleft.col_216 #divCompatibilityFilter { background:url(icons/bg-compatibility-filter.png) repeat-x left bottom #EE9700; padding:10px; margin-bottom:20px;} #mainleft.col_216 #divCompatibilityFilter h2 {color:#FFF; font-size:16px; line-height:20px;} #mainleft.col_216 #divCompatibilityFilter select { width:195px; height:28px; margin-bottom:10px;} #mainleft.col_216 #divCompatibilityFilter input[type=button].start-submit-btn { color:#fff; margin:0 0 0 28px; font-size:16px; font-weight:bold; text-align:left; text-indent:15px; background:url(icons/list-submit.png) no-repeat 0 0; border:none; width:140px; padding:0; height:28px; cursor:pointer; display:inline-block;} #mainleft.col_216 #divCompatibilityFilter input[type=button].start-submit-btn:hover {background:url(icons/list-submit.png) no-repeat 0 -28px;} #mainleft.col_216 #divCompatibilityFilter a.delete-filter { float:none; margin:0 0 10px 46px;} #mainleft.col_216 #divCompatibilityFilter a.delete-filter:hover { color:#332C19;} /* ---------------------------------------------------------- */ /* Startseite FAQ */ /* ---------------------------------------------------------- */ .bg-faq {background:url(icons/bg_startfaq.png) repeat-x left top #E67800; height:450px; padding:30px 0; color:#FFF;} .bg-faq a:link, .bg-faq a:active, .bg-faq a:visited {color:#FFF; text-decoration:underline;} .bg-faq a:hover {color:#332C19;} .bg-faq h4 {color:#FFF; margin-bottom:20px;} .start2cols {width:50%; float:left;} p.faq-question {background:url(icons/faq-question.png) no-repeat 0 0; font-weight:bold; padding-left:22px; padding-right:20px; margin-bottom:10px;} p.faq-answer {background:url(icons/faq-answer.png) no-repeat 0 2px; padding-left:20px; padding-right:22px; margin-bottom:30px;} /* ---------------------------------------------------------- */ /* Startseite Features */ /* ---------------------------------------------------------- */ .start3cols {width:33%; float:left; margin:35px 0 25px 0;} .start3cols h3 {color:#EE7400; line-height:24px;} .start3cols p {margin:0 15px 15px 0; line-height:18px;} .start3cols a:link, .start3cols a:active, .start3cols a:visited {color:#332C19;} .start3cols a:hover {color:#EE7400; text-decoration:underline;} .start3cols.col1 ul li {background:url(icons/check.png) no-repeat 0 4px; padding:3px 0 3px 18px;} .start3cols.col3 ul li {background:url(icons/arrow-orange.png) no-repeat 0 4px; padding:3px 0 3px 18px;} /* ---------------------------------------------------------- */ /* Happy Hour-Artikel */ /* ---------------------------------------------------------- */ .happyhour_title {background: url(icons/bg-happy-title.png) no-repeat; width: 270px; height: 40px; line-height: 40px; text-indent: 20px; color: #fff; text-transform: uppercase; font-family: 'Roboto Slab', serif; font-size: 25px;} .happyhour {width: 228px; height: 269px; padding: 20px 20px 0px 20px; background: #fff url(icons/bg-grey.png) repeat-x 0px bottom; border-left: 1px solid #D6D6D6; border-right: 1px solid #999; border-bottom: 1px solid #999; -webkit-border-radius: 5px; -webkit-border-top-left-radius: 0; -webkit-border-top-right-radius: 0; border-radius: 5px; border-top-left-radius: 0; border-top-right-radius: 0;} .happyhour p {font-size: 11px; color: #666; line-height: 14px; margin-top: 10px;} /* Separator für Countdown */ .cntSeparator {font-size: 22px; margin: 7px 5px 0px 5px;} .countdown_label div {float:left; width:40px; font-size:9px; margin: 3px 16px 0px 0px; text-align:center;} /* Standard Bildgrößen überschreiben */ .happyhour .img_box {width: 98px; height: 98px; margin-right: 10px; float: left; position: relative; border-left: 1px solid #D6D6D6; border-top: 1px solid #D6D6D6; border-right: 1px solid #999; border-bottom: 1px solid #999; -webkit-border-radius: 5px; border-radius: 5px;} .happyhour .img {width: 100%; height: 100%; position: absolute; top: 5px; left: 5px; } .happyhour .img_box img {width: 88px; height: 88px;} /* ---------------------------------------------------------- */ /* Breadcrumb */ /* ---------------------------------------------------------- */ .breadcrumb {font-size: 11px; line-height: 11px; margin-bottom: 23px; margin-top:-43px; color:#FFF; height:20px; /*margin-left:45px;*/ margin-left:280px; } .col_764 .breadcrumb {margin-left:45px;} .breadcrumb div {float: left;} .breadcrumb_arrow {background: url(icons/arrow-white.png) no-repeat 0px center; width: 5px; height: 10px; margin: 0px 8px 0px 12px; display: block;} *+html .breadcrumb_arrow {background: url(icons/arrow-white.png) no-repeat 0px 3px; width: 5px; height: 10px; margin: 0px 8px 0px 12px; display: block;} /* nur für den IE7 */ .breadcrumb a:link, .breadcrumb a:active, .breadcrumb a:visited {text-decoration: none; color: #EE7400;} .breadcrumb a:hover {text-decoration: underline; color: #EE7400;} .breadcrumbpath {width: 720px; height:20px; margin-top:-43px; margin-bottom:30px; margin-left:280px; overflow:hidden;} .breadcrumbpath .breadcrumb {margin-top:0px; margin-left:0px;} /* Für Detailansicht */ .goshopping {float: left; text-indent: 15px; padding-right: 8px; border-right: 2px solid #fff; background: url(icons/arrow-white-back.png) no-repeat 0px center; font-size: 11px; line-height: 11px; margin: 0px 15px 0px 0px; color:#FFF;} *+html .goshopping {float: left; text-indent: 15px; padding-right: 8px; border-right: 2px solid #fff; background: url(icons/arrow-white-back.png) no-repeat 0px 3px; font-size: 11px; line-height: 11px; margin: 0px 15px 0px 0px; color:#FFF;} /* nur für den IE7 */ .goshopping a {color: #fff;} .goshopping a:active, .goshopping a:hover {color: #fff; text-decoration:underline;} /* ---------------------------------------------------------- */ /* Messagesystem */ /* ---------------------------------------------------------- */ .message {text-align: center; color: #666; font-size: 12px; padding: 20px 0px 20px 0px; font-style: italic;} /* Messagebox */ .msg {position:fixed; width: 960px; padding: 20px 20px 0px 20px; top: 20px; box-shadow: 0 0 30px 1px #000; z-index: 1001; background: #fff; -webkit-border-radius: 5px; border-radius: 5px;} .msg_content {padding: 0px 0px 20px 0px;} .msg_content li {margin-bottom: 5px;} .msg_red li a, .msg_red li a:visited {color: #ff0000; } .msg_red li a:active, .msg_red li a:hover {color: #000;} .msg_green li a, .msg_green li a:visited {color: #62A21D;} .msg_green li a:active, .msg_green li a:hover {color: #000;} /* Header */ .error {padding: 15px; border: 1px solid #f00; margin-bottom: 20px; -webkit-border-radius: 5px; border-radius: 5px;} /* ---------------------------------------------------------- */ /* Header */ /* ---------------------------------------------------------- */ .messageline {color:#fff; font-family: 'Roboto Slab', serif; font-size:12px; border-bottom:2px solid #FFF; height:28px; text-align:center; line-height:26px; background:#CE0000;} .topline {color:#fff; font-family: 'Roboto Slab', serif; font-size:12px; height:28px; text-align:center; line-height:26px;} .col_225_h {float: left; width: 225px; margin:10px 50px 30px 0;} .col_420 {float: left; width: 420px;} .headerright {width:720px; height:75px; float:right;} /* Siegel */ .bg_seal {margin: 19px 10px 10px 60px;} .bg_seal li {float: left; margin: 0px 10px 0px 0px;} .bg_seal li a, .bg_seal li div {background-image: url(icons/bg-seal.png); background-repeat: no-repeat; width: 40px; height: 40px; display: block;} .bg_seal li a.trusted {background-position: 0px 0px;} .bg_seal li a.trusted:hover {background-position: 0px -40px;} .bg_seal li a.it_recht {background-position: -40px 0px;} .bg_seal li a.it_recht:hover {background-position: -40px -40px;} .bg_seal li div.friendly {background-position: -80px 0px;} .bg_seal li div.friendly:hover {background-position: -80px -40px;} .bg_seal li div.comodo {background-position: -120px 0px; width: 61px;} .bg_seal li div.comodo:hover {background-position: -120px -40px;} .trusted_big a {background: url(icons/bg-seal.png) no-repeat 0px -80px; width: 80px; height: 80px; display: block;} .trusted_big a:hover {filter: alpha(opacity=80); opacity: 0.8;} .trusted_moneyback {width:283px;cursor:pointer;} /* Suche */ .search {background: #fff; height: 25px; padding:5px; width:410px; -webkit-box-shadow: inset 0px 0px 6px 6px rgba(240, 240, 240, 0.9); box-shadow: inset 0px 0px 6px 6px rgba(240, 240, 240, 0.9);} .search input {font-size: 12px; width: 370px; padding: 0px 0px 0px 10px; height: 25px; line-height: 25px; border: 0px; float: left; background: none; color: #332C19;} .search a, .search a:visited {background: url(icons/bg-icons.png) no-repeat 0px 0px; width: 25px; height: 25px; display: block; float: left;} .search a:active, .search a:hover {background: url(icons/bg-icons.png) no-repeat -25px 0px;} /* Submenü Merkzettel & Sitemap */ ul.submenu {float:left; margin:10px 0 10px -3px;} .submenu li {float: left; font-size: 12px; color: #fff; } .submenu li a, .submenu li a:visited {font-family: Arial; color: #fff; margin: 0 3px 0 3px;} .submenu li a:active, .submenu li a:hover {color: #000;} /* Warenkorb */ .ordervalue {float: right; width: 210px; height: 50px; margin: 28px 10px 0px 0px;} /* Feste Höhe! */ .ordervalue p {float: left; font-size: 12px; margin: 0px 0px 3px 0px; font-weight:bold; color:#fff;} .ordervalue p span {} .ordervalue .bt a {float: left; padding: 2px 10px 2px 10px; font-family: 'Roboto Slab', serif; font-size:11px; font-weight:700;} .cart_link a {width: 35px; height: 30px; float: left; display: block; background: url(icons/bg-minicart.png) no-repeat 0px 0px; margin:12px 10px 0 0;} .cart_link a:hover {filter: alpha(opacity=80); opacity: 0.8;} /* Submenu-Warenkorb*/ .minicart {display: none; z-index: 999; line-height: normal; position: relative; left: -267px; top: 0px; width: 450px; background: #fff; padding: 0px 15px 15px 15px; border: 1px solid #D6D6D6;} .cart_left_mini {float: left; width: 360px;} /* ---------------------------------------------------------- */ /* Sprachumstellung */ /* ---------------------------------------------------------- */ .languages {/*height: 30px; width: 80px;*/ float: right; margin:14px 0 0 0;} /* Feste Höhe & Breite! */ .language_active {margin-right: 3px;} /* Aktive Sprache */ /*.language_active {cursor: pointer; padding: 5px 0px 5px 10px; border-left: 1px solid #D6D6D6; border-top: 1px solid #D6D6D6; border-right: 1px solid #999; border-bottom: 1px solid #999; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; background: #fff url(icons/arrow-down.png) 60px 13px no-repeat; } .language_active p {font-family: 'Roboto Slab', serif; font-size: 16px; line-height: 16px; text-transform: uppercase; display: inline-block; float: left; margin: 0px 10px 0px 0px;}*/ .de_on a {background: url(icons/bg-flag.png) 0px 0px no-repeat; width: 16px; height: 11px; display: inline-block;} .de a {background: url(icons/bg-flag.png) -16px 0px no-repeat; width: 16px; height: 11px; display: inline-block;} .de a:hover {background: url(icons/bg-flag.png) 0px 0px no-repeat;} .en_on a {background: url(icons/bg-flag.png) 0px -11px no-repeat; width: 16px; height: 11px; display: inline-block;} .en a {background: url(icons/bg-flag.png) -16px -11px no-repeat; width: 16px; height: 11px; display: inline-block;} .en a:hover {background: url(icons/bg-flag.png) 0px -11px no-repeat;} /* weitere Sprachen */ /*.language_all {display: none; padding: 5px 0px 5px 10px; z-index: 998; line-height: normal; position: relative; left: 0px; width: 68px; border-left: 1px solid #D6D6D6; border-top: 1px solid #D6D6D6; border-right: 1px solid #999; border-bottom: 1px solid #999; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: 5px 5px 10px 0px #ccc; box-shadow: 5px 5px 10px 0px #ccc; background: #fff;} .language_all p {font-family: 'Roboto Slab', serif; font-size: 16px; line-height: 16px; text-transform: uppercase; display: inline-block; float: left; margin: 0px 10px 0px 0px;}*/ /* ---------------------------------------------------------- */ /* MegaDropDown-Menü - Horizontal */ /* ---------------------------------------------------------- */ .topmenu {height: 53px; margin:0; width:720px; clear:right; margin-left:280px;} .topmenu li {float: left; cursor: pointer;} .topmenu li a {z-index: 999; font-family: 'Roboto Slab', serif; height:33px; margin-top:20px; padding:0 23px 0 23px; transition: color 0.7s; text-transform: uppercase; width: auto; text-align: center; line-height: 18px; display: block; font-size: 20px; color: #fff; background: none; } .topmenu li#topmenu_4 {padding-right:0;} /* Erstes Element - für Abweichung */ .topmenu li.home a {width: 20px; height:18px; padding:0; display: block; background: url(icons/bg-topmenu-home.png) no-repeat 0px 0px; } .topmenu li.home a:hover {background: url(icons/bg-topmenu-home.png) no-repeat 0px -18px; } /* Letztes Element - für Abweichung .topmenu li.last a { background: none;} */ .topmenu li.active, .topmenu li:hover {} .topmenu li.active a, .topmenu li:hover a {color: #332C19; background:url(icons/dropdown-arrow.png) no-repeat bottom center;} .topmenu li#topmenu_2 .sub {margin-left:-2px;} .topmenu li#topmenu_3 .sub {margin-left:-162px;} .topmenu li#topmenu_4 .sub {margin-left:-306px;} /* Submenü */ .topmenu li .sub {display: none; position: absolute; cursor: default; width: 480px; height: auto; margin-top:0; padding: 20px; background: #fff; z-index: 998; border-left: 1px solid #D6D6D6; border-right: 1px solid #D6D6D6; border-bottom: 1px solid #D6D6D6;} .topmenu li .sub.fullwidth {width: 958px;} .topmenu li .sub .col {float:left; width: 250px; margin-right: 20px; display: inline;} .topmenu li .sub.fullwidth .col {float:left; width: 250px; margin-right: 0px; display: inline;} /* Text */ .topmenu li .sub .col h2 {margin-bottom: 10px; color: #EE7400;} .topmenu li .sub .col p {line-height: 20px;} /* Formatierung für Sub- & Fullwidth */ .topmenu li .sub .col_right {float:left; width: 210px; padding-top:0px; display: inline;} .topmenu li .sub.fullwidth .col_right {float:left; width: 688px; padding-top: 30px; display: inline;} /* Submenü Links - Vererbung überschreiben! */ .topmenu li .sub ul {display: block; } .topmenu li .sub ul li {float: none; font-family: Arial; } .topmenu li .sub ul li a {width: 210px; display: block; line-height:normal; transition: none; padding:8px 5px; margin:0; height:auto; border-bottom:1px solid #D6D6D6; text-transform: none; font-family: Arial; font-size: 12px; font-weight: bold; color: #332C19; z-index: 200; text-align: left;} .topmenu li .sub ul li:hover {} .topmenu li .sub ul li:hover a {color: #FFF; background:#EE7400;} .topmenu .sub ul li.active, .topmenu .sub ul li:hover { background: none; } .topmenu .sub ul li.active a, .topmenu .sub ul li:hover a {} /* Submenü Fullwidth Links - Vererbung überschreiben! .topmenu li .sub.fullwidth ul {display: block; } .topmenu li .sub.fullwidth ul li {float: left; font-family: Arial; width: 209px; margin: 0px 0px 10px 20px; background: none; } .topmenu li .sub.fullwidth ul li a {width: 210px; display: block; min-height: 30px; line-height: 30px; text-indent: 0px; text-transform: none; font-family: Arial; font-size: 12px; font-weight: bold; color: #332C19; z-index: 200; text-align: left; background: none; } .topmenu li .sub.fullwidth ul li a:hover {background: none; color: #EE7400;} .topmenu li .sub.fullwidth ul li li {float: left; font-family: Arial; margin: 0px; } .topmenu li .sub.fullwidth ul li li a {width: 210px; display: block; height: 15px; line-height: 15px; font-size: 11px; font-weight: normal; color: #666; background: none;} .topmenu li .sub ul li li:hover a {background: none; color: #EE7400;} .topmenu .sub.fullwidth ul li.active, .topmenu .sub.fullwidth ul li:hover {background: none; } .topmenu .sub.fullwidth ul li.active a, .topmenu .sub.fullwidth ul li:hover a {background: none;} */ /* Bilder innerhalb des Submenüs */ .topmenu li .sub img {margin-top: 20px;} /* ---------------------------------------------------------- */ /* AnythingSlider v1.2 - Startseite */ /* ---------------------------------------------------------- */ #page-wrap {height: 445px; width: 670px; margin:-55px 0 0 0; float: left;} .anythingSlider {width: 670px; position: relative; padding: 0px;} .anythingSlider .wrapper {width: 670px; overflow: auto; height: 445px; margin: 0px; padding: 0px; position: absolute; top: 0; left: 0; } .anythingSlider .wrapper ul {width: 32700px; position: absolute; top: 0; left: 0;} .anythingSlider ul li {display: block; float: left; height: 445px; width: 670px;} .anythingSlider .arrow {display: none; /* display: block; */ height: 80px; width: 20px; background: #000; text-indent: -9999px; position: absolute; top: 120px; cursor: pointer; } .anythingSlider .forward {background-position: 0 0; right: 0px; } .anythingSlider .forward:hover {background-position: 0 -80px; } .anythingSlider .back {background-position: -20px 0; left: 0px; } .anythingSlider .back:hover {background-position: -20px -80px; } #thumbNav {position: relative; top: 428px; text-align:center;} #thumbNav a {background: url(icons/bg-thumb.png) no-repeat -10px 0px; color: #fff; font-size: 0px; text-indent:-3000px; display: inline-block; width: 10px; height: 10px; line-height: 10px; text-align: center; margin: 0 5px 0 0;} #thumbNav a:hover {background: url(icons/bg-thumb.png) no-repeat 0px 0px; color: #332C19; } #thumbNav a.cur {background: url(icons/bg-thumb.png) no-repeat 0px 0px; color: #332C19; } #start-stop {display: none;} .anythingSlider .wrapper ul ul {position: static; background: none; overflow: visible; width: auto;} .anythingSlider .wrapper ul ul li {float: none; } /* SliderContent */ .teaser {width: 710px; height: 330px; position: relative; } .teaser_img {width: 100%; height: 100%; position: absolute; top: 0; left: 0; } .teaser_content {width: 340px; position: absolute; top: 20px; left: 350px; color: #fff;} .teaser_content h4 {font-size: 25px; line-height: 25px; margin: 0px;} .teaser_content h2 {font-size: 60px; line-height: 60px; text-transform: uppercase; margin-bottom: 20px;} .teaser_content ul li {font-family: 'Roboto Slab', serif; width: auto; height: auto; padding: 5px 20px 5px 20px; display: inline-block; margin-bottom: 10px; font-size: 16px; color: #332C19; border-left: 1px solid #D6D6D6; border-top: 1px solid #D6D6D6; border-right: 1px solid #999; border-bottom: 1px solid #999; background: #F0F0F0 url(icons/bg-buttons.png) repeat-x; -webkit-border-radius: 5px; border-radius: 5px;} /* ---------------------------------------------------------- */ /* Tab Navigation */ /* ---------------------------------------------------------- */ .tab_start {margin-bottom: 20px;} .tab_start li {float: left; cursor: pointer; width: 167px;} /* feste Breite fix for IE7 :-) */ .tab_start li a {float: left; font-family: 'Roboto Slab', serif; text-transform: uppercase; width: 164px; text-indent: 20px; line-height: 35px; display: block; font-size: 18px; color: #999; -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; border-left: 1px solid #D6D6D6; border-top: 1px solid #D6D6D6; border-bottom: 1px solid #D6D6D6; border-right: 1px solid #999;} .tab_start li a:hover {color: #332C19; background: url(icons/bg-topmenu.png) repeat-x 0px -35px;} .tab_start li a.tab_on {color: #332C19; background: url(icons/bg-topmenu.png) repeat-x 0px -35px; cursor: default; border-bottom: 1px solid #fff; } .tab_start ul {position: relative; z-index: 21;} /* Überlagerung der Linie :-) */ .tab_content {position: relative; top: -1px; z-index: 20; background: #fff url(icons/bg-grey.png) repeat-x 0px bottom; border-left: 1px solid #D6D6D6; border-top: 1px solid #D6D6D6; border-right: 1px solid #999; border-bottom: 1px solid #999; -webkit-border-radius: 5px; -webkit-border-top-left-radius: 0; border-radius: 5px; border-top-left-radius: 0; padding-top: 10px;} /* Highlight Icons */ .tab_start li a.tab_on .top {background: url(icons/bg-highlight.png) 0px 0px; width: 35px; height: 35px; display: inline-block; float: right;} .tab_start li a .top {background: url(icons/bg-highlight.png) 0px -35px; width: 35px; height: 35px; display: inline-block; float: right;} .tab_start li a.tab_on .new {background: url(icons/bg-highlight.png) -35px 0px; width: 35px; height: 35px; display: inline-block; float: right;} .tab_start li a .new {background: url(icons/bg-highlight.png) -35px -35px; width: 35px; height: 35px; display: inline-block; float: right;} .tab_start li a.tab_on .sell {background: url(icons/bg-highlight.png) -70px 0px; width: 35px; height: 35px; display: inline-block; float: right;} .tab_start li a .sell {background: url(icons/bg-highlight.png) -70px -35px; width: 35px; height: 35px; display: inline-block; float: right;} /* ---------------------------------------------------------- */ /* Namenhafte Hersteller (Marquee) */ /* ---------------------------------------------------------- */ #producer {margin: auto auto 20px auto; background: url(icons/bg-producer.png) repeat-x; height: 88px; -webkit-border-radius: 5px; border-radius: 5px; border-left: 1px solid #EA8948; border-top: 1px solid #EA8948; border-right: 1px solid #952A10; border-bottom: 1px solid #952A10;} .producer_icons {width: 936px; float: left;} .producer_icons ul {display: block;} .producer_icons li {margin: 20px 0px 0px 20px; display: block; float: left; width: 136px; height:50px; background: #fff; -webkit-border-radius: 5px; border-radius: 5px; text-align: center;} .producer_icons li img {height: 50px;} #prev {float: left; width: 20px; height: 50px; margin-top: 20px; display: block; background: url(icons/bt-arrows.png) no-repeat -20px 0px;} #prev:active, #prev:hover {background: url(icons/bt-arrows.png) no-repeat -20px -50px;} #next {float: right; width: 20px; height: 50px; margin-top: 20px; display: block; background: url(icons/bt-arrows.png) no-repeat 0px 0px;} #next:active, #next:hover {background: url(icons/bt-arrows.png) no-repeat 0px -50px;} /* Globales Herstellericon */ .producer {border: 1px solid #EAEAEA; text-align: center; margin-bottom: 10px;} .producer img {height: 50px; } .max_w_186 {width: 186px;} /* ---------------------------------------------------------- */ /* Artikelbilder Detailansicht (Marquee) */ /* ---------------------------------------------------------- */ .itemimages_icons {width: 300px; float: left;} .itemimages_icons ul {display: block;} .itemimages_icons li {height: 48px; width: 48px; float: left; margin: 0px 0px 0px 10px; border: 1px solid #eaeaea;} .itemimages_icons li:hover {border: 1px solid #EE7400;} .itemimages_icons li img {width: 48px; max-height: 48px; cursor: pointer;} #itemimages_prev {float: left; width: 20px; height: 50px; display: block; background: url(icons/bt-arrows.png) no-repeat -20px 0px;} #itemimages_prev:active, #itemimages_prev:hover {background: url(icons/bt-arrows.png) no-repeat -20px -50px;} #itemimages_next {float: left; margin-left: 10px; width: 20px; height: 50px; display: block; background: url(icons/bt-arrows.png) no-repeat 0px 0px;} #itemimages_next:active, #itemimages_next:hover {background: url(icons/bt-arrows.png) no-repeat 0px -50px;} /* ---------------------------------------------------------- */ /* Listenansicht mit Lightbox-Thumbnails */ /* ---------------------------------------------------------- */ .list_item .itemimages_icons {width: 48px; float: left; display: block; height:144px;} .list_item .itemimages_icons ul {display: block;} .list_item .itemimages_icons .caroufredsel_wrapper, .list_item .itemimages_icons #image_interaction {height:144px !important; width: 48px !important;} .list_item .itemimages_icons li {height: 42px; width: 42px; border:1px solid #EAEAEA; margin: 0px 0px 4px 4px; float:none; display:block;} .list_item .itemimages_icons li:hover {border:1px solid #E67800;} .list_item .itemimages_icons li img {width: 42px; max-height: 42px; cursor: pointer;} /* ---------------------------------------------------------- */ /* Listendarstellung mit diversen Ansichten */ /* ---------------------------------------------------------- */ .title_max {height: 45px; overflow: hidden; margin-bottom: 10px;} /* mit Begrenzung für diverse Ansichten*/ .title_max a, .title_max3 {color: #332C19; font-size: 12px; line-height: 15px; font-weight: bold;} .title_max a:visited {color: #999;} /* bessere Usability */ .title_max a:active, .title_max a:hover {color: #EE7400;} .title_max2 {margin-bottom: 10px;} /* mit Begrenzung für diverse Ansichten*/ .title_max2 a, .title_max2 span {color: #332C19; font-size: 16px; line-height: 22px; font-weight: bold;} .title_max2 a:visited {color: #999;} /* bessere Usability */ .title_max2 a:active, .title_max2 a:hover {color: #EE7400;} .title_max2 span.title_addinfotext {color: #CE0000;} /* Filter in der Listenansicht */ .sortdisplay {margin-bottom: 20px; padding: 10px; background: #EAEAEA;} .sortdisplay p {font-size: 10px; color: #666;} .list_compare {} .max_w_150 {width: 150px;} .max_w_150 select {width: 90px;} /* Darstellungs-Icons */ .bg_view li {float: left;} .bg_view li a {background-image: url(icons/bg-view.png); background-position: 0px 0px; background-repeat: no-repeat; display: block; width: 27px; height: 24px;} .bg_view li a.view_col4 {background-position: 0px 0px;} .bg_view li a.view_col4:hover {background-position: 0px -24px;} .bg_view li a.view_col4_on {background-position: 0px -24px;} .bg_view li a.view_list {background-position: -27px 0px;} .bg_view li a.view_list:hover {background-position: -27px -24px;} .bg_view li a.view_list_on {background-position: -27px -24px;} .bg_view li a.view_quick {background-position: -54px 0px;} .bg_view li a.view_quick:hover {background-position: -54px -24px;} .bg_view li a.view_quick_on {background-position: -54px -24px;} /* Artikelvergleich */ .compare_box {font-size: 11px; margin-top: 10px; width: 150px;} .compare_box img {float: left; margin: 0px 10px 0px 0px;} .compare_box a, .compare_box a:visited {color: #999;} .compare_box a:active, .compare_box a:hover {color: #EE7400;} /* Icon für Seitenanzahl */ .icon a, .icon a:visited {background-image: url(icons/bg-paging.png); background-repeat: no-repeat; background-position: 0px 0px; width: 24px; height: 24px; display: block; float: left;} .prev a, .prev a:visited {background-position: 0px 0px; margin-right: 5px;} .prev a:active, .prev a:hover {background-position: 0px 0px;} .prev_on a, .prev_on a:visited {background-position: 0px -24px; margin-right: 5px;} .prev_on a:active, .prev_on a:hover {background-position: 0px -48px;} .go a, .go a:visited {background-position: -24px 0px; margin-left: 5px;} .go a:active, .go a:hover {background-position: -24px 0px;} .go_on a, .go_on a:visited {background-position: -24px -24px; margin-left: 5px;} .go_on a:active, .go_on a:hover {background-position: -24px -48px;} /* (Listendarstellung) Hintergrund für die einzelnen Artikel */ h2.headline-highlight {background:#E67800; color:#fff; height:47px; line-height:38px; padding:10px 0 0 15px; width:745px; float:left;} .listcontact {width:218px; float:right; height:47px; padding:10px 0 0 12px; background: #EAEAEA;} .listcontact img {float:left; margin:0 8px 0 0;} .listcontact p {font-size:10px; line-height:12px;} .listcontact p span {font-size:17px; font-weight:bold; display:inline-block; margin-bottom:5px;} .list_item, .list_item_compare {padding: 10px 10px 6px 10px;} .SearchResultContainer fieldset:nth-child(even) {background-color: #EAEAEA;} .SearchResultContainer fieldset:nth-child(odd) {background-color: #FFF;} .list_item .list_pic .img_box {width:138px; height:138px; float:left; border:1px solid #EAEAEA;} .list_item .list_pic .img_box:hover {border:1px solid #E67800;} .list_item .list_pic .img_box img {width:138px; height:138px;} .list_item .list_pic .img_box img:hover {cursor:pointer;} .ItemInfoLink { display:inline-block; margin:18px 0 0 0; float:right; width:295px; font-weight:bold;} .col_764 .ItemInfoLink { display:inline-block; margin:5px 0 15px 0; float:none; width:250px; font-weight:bold;} .list_pic {float: left; width: 190px;} .list_desc {float: left; margin-left: 10px; width: 550px;} .col_764 .list_desc, .col_764_detail .list_desc {width:250px;} .tab_content_detail .list_desc {float: left; margin-left: 10px; width: 250px;} .short_desc p {margin: 0px 0px 10px 0px; font-size: 11px;} .lb_quantity {width:12px; margin:0 5px 0 0;} .list_right {float: right; width: 220px;} .list_right .bt_cart a, .list_right .bt_variant a {min-width: 144px;} /* bessere Optik in der Listendarstellung */ .accessorytext { background:#EE7400; color:#FFF; padding:8px; font-size:12px; font-weight:bold; margin-bottom:5px;} /* Bewertungen */ .rating {margin-top: 5px; height: 20px; width: 390px;} /* (4-Artikel) Hintergrund für Topseller, Topangebote, Neu im Sortiment */ .col4_item {float: left; background: none; width: 171px; height: 290px; padding: 10px; border-bottom:1px solid #EAEAEA; margin-bottom:15px;} .col4_item2 {float: left; background: none; width: 171px; height: 290px; padding: 10px; border-bottom:1px solid #EAEAEA; margin-bottom:15px;} .col4_item_compare {float: left; background: none; width: 171px; height: 290px; padding: 10px;} .col4_item2_compare {float: left; background: none; width: 171px; height: 290px; padding: 10px;} .col4_price {height: 70px; margin-top: 10px;} /* (5-Artikel) Hintergrund für Topseller, Topangebote, Neu im Sortiment */ .col5_item {float: left; background: none; width: 169px; height: 290px; margin-left: 10px; padding: 10px;} .col5_item2 {float: left; background: none; width: 169px; height: 290px; margin-left: 10px; padding: 10px;} /* Preview für Artikel */ .item_list {position: relative; } .item_list .preview_box {position: absolute; left: 0; margin-top: -80px; width: 724px; display: none; padding: 20px; background: #fff; box-shadow: 0 0 10px 1px #999; z-index: 100; -webkit-border-radius: 5px; border-radius: 5px;} .item_list .preview_box .arrow {position: absolute; width: 40px; height: 18px; background: url(icons/arrow-preview.png) no-repeat; top: -18px; } .preview_right {float: left; width: 330px;} .col5_item_compare {float: left; background: url(icons/bg-col-5.png) no-repeat 0px 0px; width: 169px; height: 290px; margin-left: 10px; padding: 10px;} .col5_item2_compare {float: left; background: url(icons/bg-col-5.png) no-repeat -189px 0px; width: 169px; height: 290px; margin-left: 10px; padding: 10px} /* ItemListVersions */ .bl_1 {border-left: 1px solid #EAEAEA;} .bl_1_white {border-left: 1px solid #fff;} .bg_grey {background: #EAEAEA;} .hr_white {display: block; height: 1px; background: #fff; border: 0; padding: 0px; margin: 0px;} /* Anpassung Schnellbestellerliste speziell für Bremsleitungen optimiert */ .tbl-quickview {margin-bottom:20px;} .tbl-quickview th {background:#414141; border-right:1px solid #FFF; color:#FFF; font-family:Arial; font-size:12px; font-weight:bold; white-space:nowrap; padding:5px 5px;} .tbl-quickview tr td {padding:5px 5px; border-right:1px solid #FFF;} .tbl-quickview tr:nth-child(even) {background-color: #fff;} .tbl-quickview tr:nth-child(odd) {background-color: #EAEAEA;} .tbl-quickview tr td .price { font-family:Arial; font-size:12px; color:#332C19;} .tbl-quickview tr td .bt a, .tbl-quickview tr td .bt a:visited {background:url(icons/list-detail-bt.png) 0 0 no-repeat; border:none; padding:4px 12px 4px 12px; color:#FFF; font-size:12px; text-align:left;} .tbl-quickview tr td .bt a:active, .tbl-quickview tr td .bt a:hover {background:url(icons/list-detail-bt.png) 0 -24px no-repeat;} /* Sale-Icon */ .sale {z-index: 10; margin: 10px 0px 0px 10px; width: 50px; height: 42px; background: url(icons/bg-sale.png) no-repeat; text-align: center; padding-top: 8px; color: #fff;} .sale p , .sale2 p {font-size: 9px; line-height: 9px; } .sale-hour {z-index: 11; margin: 0px 0px 0px 10px; width: 50px; height: 42px; background: url(icons/bg-sale.png) no-repeat; text-align: center; padding-top: 8px; color: #fff;} .sale-hour p, .sale-hour2 p {font-size: 10px; line-height: 10px; } .big {font-family: 'Roboto Slab', serif; font-size: 26px; line-height: 26px;} /* Icons Top, Neu, Seller mit Legende */ .img_box .top {background: url(icons/bg-highlight.png) no-repeat 0px 0px; width: 35px; height: 35px; position: absolute; top: 0; right: 0; } .img_box .new {background: url(icons/bg-highlight.png) no-repeat -35px 0px; width: 35px; height: 35px; position: absolute; top: 0; right: 0;} .img_box .sell {background: url(icons/bg-highlight.png) no-repeat -70px 0px; width: 35px; height: 35px; position: absolute; top: 0; right: 0;} .img_box .deal {background: url(icons/bg-highlight.png) no-repeat -105px 0px; width: 35px; height: 35px; position: absolute; top: 0; right: 0;} .legend p {padding-top: 10px;} .legend .top {background: url(icons/bg-highlight.png) no-repeat 0px 0px; width: 35px; height: 35px; float: left; margin-right: 10px; } .legend .new {background: url(icons/bg-highlight.png) no-repeat -35px 0px; width: 35px; height: 35px; float: left; margin-right: 10px;} .legend .sell {background: url(icons/bg-highlight.png) no-repeat -70px 0px; width: 35px; height: 35px; float: left; margin-right: 10px;} .legend .deal {background: url(icons/bg-highlight.png) no-repeat -105px 0px; width: 35px; height: 35px; float: left; margin-right: 10px;} /* Für Warenkorb-Bestellprozess */ .sale2 {width: 50px; height: 42px; background: url(icons/bg-sale.png) no-repeat; text-align: center; padding-top: 8px; color: #fff;} .sale-hour2 {width: 50px; height: 42px; background: url(icons/bg-sale.png) no-repeat; text-align: center; padding-top: 8px; color: #fff;} /* Artikelvergleich */ .recommend_left {width: 100px; overflow: hidden; color: #666;} .recommend_item {width: 150px; float: left; padding-right: 10px;} /* ---------------------------------------------------------- */ /* Detailansicht */ /* ---------------------------------------------------------- */ .col_764_detail {float: left; width: 764px;} .col_216_detail {float: right; width: 216px;} .col_370 {float: left; width: 370px;} .col_390 {float: left; width: 390px;} .box_216 {margin-bottom: 20px; width: 204px; background: url(icons/bg-grey.png) repeat-x 0px bottom; padding: 15px; margin-left:-20px; border: 2px solid #EAEAEA;} .box_216 .sale {position: relative; float: right; margin: 0px; } /* Anpassung Sale-Icon */ .box {float:left; width:20px; text-align:center; margin-right:5px;} input.box {padding:5px;} .zoom {background: url(icons/bg-icons.png) no-repeat -70px -80px; height: 10px; line-height: 10px; font-size: 10px; font-weight: bold; text-indent: 20px; margin-bottom: 10px;} /* Reitersystem (ähnlich der Startseite) */ .tab {position: relative; z-index: 32; float: left; font-family: 'Roboto Slab', serif; font-size:14px; width: 167px; text-align:center; line-height: 35px; height:31px; margin:0 2px 3px 0; display: block; color: #333; background:#EAEAEA; font-weight:normal; border: 1px solid #EAEAEA;} .tab_hover {color: #333; background: #fff; border: 1px solid #eaeaea; border-bottom: 1px solid #fff; height:34px; margin:0 2px 0 0;} .tab_active {color: #333; background: #fff; cursor: default; border: 1px solid #eaeaea; border-bottom: 1px solid #fff; height:34px; margin:0 2px 0 0} .tab_content_detail {position: relative; top: -1px; z-index: 31; background: #fff; border: 1px solid #eaeaea; padding:15px; margin-bottom: 20px;} .tab_content_cross {border: 1px solid #eaeaea; margin-bottom: 20px; padding-top: 20px;} .tab_content_cross h2 {display: none;} .tab_content_cross .col5_item {height:275px;} .tab_content_cross .col5_item2 {height:275px;} /* Anpasssung der Artikelbeschreibung */ .shopdesc strong {font-size: 14px; line-height: 20px;} .shopdesc p {margin-bottom: 20px; line-height: 20px;} .shopdesc ul {margin: 20px 0px 20px 20px;} .shopdesc ul li {background: url(icons/bg-icons.png) no-repeat -170px -94px; color: #666; padding: 3px 0px 3px 15px;} /* Downloads */ .downloads {margin: 35px 0px 20px 0px; background: #EAEAEA; padding: 15px;} .downloads h3 {color: #EE7400; font-size: 14px;} .downloads img {float: left; width: 40px; margin-right: 10px;} .downloads a {font-size: 11px;} /* Stücklistenkonfigurator */ .selected {float: left; width: 550px; padding-right: 60px; margin-top: 10px; background: url(icons/icon-check.png) no-repeat right 0px;} .unselected {float: left; width: 550px; padding-right: 60px; margin-top: 10px;} /* Variantenauswahl */ .variant {float: left; width: 242px; cursor: pointer; margin-bottom: 10px;} .variant_left {width: 90px; float: left; font-weight: bold; line-height: 25px;} .variantitem {float:left;border: 1px solid #D6D6D6; -webkit-border-radius: 5px; border-radius: 5px; text-align: center; margin-bottom: 10px; margin-right:5px; padding:5px; color: #999;} .variantitem:hover {float:left;border-left: 1px solid #D6D6D6; border-top: 1px solid #D6D6D6; border-right: 1px solid #999; border-bottom: 1px solid #999; color: #EE7400; background: url(icons/bg-grey-small.png) repeat-x;} .versionitemactive {border-color:#EE7400;} .versionitemdisable {border-color:#DDD;color: #DDD; cursor:inherit;} .variantitem img {width: 48px; max-height: 48px; cursor: pointer; -webkit-border-radius: 5px; border-radius: 5px;} .variantcoloritem {border: 1px solid #D6D6D6; -webkit-border-radius: 5px; border-radius: 5px; text-align: center; margin-bottom: 10px; margin-right:5px; padding:5px;} .variantcoloritem:hover {border-left: 1px solid #D6D6D6; border-top: 1px solid #D6D6D6; border-right: 1px solid #999; border-bottom: 1px solid #999; background: url(icons/bg-grey-small.png) repeat-x;} .versionLabel {float:left; margin-bottom:5px;margin-right:5px; color:#EE7400; font-weight:bold;} .versionSelection {float:left; color:#666; font-weight:bold;} /* Fragenkatalog */ .question {color: #666; font-weight: bold; font-style: italic; Padding: 0px 0px 10px 15px; margin-top: 10px; background-image: url(icons/arrow.gif); background-repeat: no-repeat; background-position: left 3px;} .melvin-colors .red {display:none;} .list_item .melvin-colors {width:auto;} .melvin-colors select { min-width:230px;} .questionAnswer {padding: 5px 0px 10px 0;} /* Accordion für Sachmerkmale */ .Accordion {overflow: hidden; outline: none;} .AccordionPanel {margin: 0px; padding: 0px;} .AccordionPanelTab {background: url(icons/bg-grey-small.png) repeat-x; padding: 10px; font-family: 'Roboto Slab', serif; font-size: 14px; line-height: 14px; font-weight: normal; text-align: left; cursor: pointer;} .AccordionPanelTab:active, .AccordionPanelTab:hover {color: #EE7400;} .AccordionPanelTab img {float: left; margin: 0px 10px 0px 0px;} *+html .AccordionPanelTab img { float: left; margin: 10px 10px 0px 10px;} .AccordionPanelContent {margin: 0px; padding: 0px;} .AccordionPanelContent td {vertical-align: top; padding: 5px; border-bottom: solid 1px #EAEAEA;} .AccordionPanelContent tr:active, .AccordionPanelContent tr:hover {background-color: #f0f0f0;} /* ---------------------------------------------------------- */ /* Warenkorb */ /* ---------------------------------------------------------- */ .cart_left {float: left; width: 270px;} /* Kleine Eingabe auch für Wunschzettel.. */ .small_input {width: 47px; text-align: center;} /* ---------------------------------------------------------- */ /* Anmeldeseite */ /* ---------------------------------------------------------- */ .col_320 {float: left; width: 320px;} .login_min_h {min-height: 80px;} .ssl {background: url(icons/bg-icons.png) no-repeat -70px -55px; height: 15px; line-height: 15px; font-size: 11px; text-indent: 20px; margin-top: 20px; color: #999;} /* ---------------------------------------------------------- */ /* Bestellvorgang */ /* ---------------------------------------------------------- */ .payment_left {float: left; width: 200px; cursor: pointer;} .payment_right {float: right; width: 730px;} /* linke Auswahl der Zahlungsanbieter*/ .pc {background: url(icons/radio-off.png) no-repeat 0px 0px; text-indent:25px; margin-bottom: 10px} .pc:hover {color: #EE7400;} .pc_on {background: url(icons/radio-on.png) no-repeat 0px 0px; font-weight: bold;} /* Zahlungsanbieter - Beschreibung */ .pc_desc {margin-bottom: 10px; color: #999;} .pc_desc a, .pc_desc a:visited {font-family: 'Roboto Slab', serif; margin-top: 5px; cursor: pointer; padding: 2px 15px 2px 15px; display: inline-block; font-size: 12px; line-height: 13px; color: #332C19; border-left: 1px solid #D6D6D6; border-top: 1px solid #D6D6D6; border-right: 1px solid #999; border-bottom: 1px solid #999; background: #F0F0F0 url(icons/bg-buttons.png) repeat-x 0px -5px; -webkit-border-radius: 10px; border-radius: 10px;} .pc_desc a:active, .pc_desc a:hover {color: #EE7400; background:#EAEAEA;} .pc_logo img {margin-bottom: 20px;} /* Zusteller - Beschreibung */ .forwarder {border: 1px solid #ccc; padding:10px; margin-bottom:10px; cursor:pointer; background: url(icons/radio-off.png) no-repeat 10px 10px; padding-left: 30px;} .f_on {border: 1px solid #EE7400; background: url(icons/radio-on.png) no-repeat 10px 10px;} .forwarder img {float:right;} .f_desc {margin-top: 5px; text-indent: 0px; color: #999;} .paymentconditionIcon {position:absolute; left:945px; top:5px; z-index:2000; background: url(icons/arrow-down.png) no-repeat center center; cursor:pointer; width:15px; height:15px; display: block;} /* Bestellschritte (nur B2C) */ .step {float: left; font-family: 'Roboto Slab', serif; font-size: 11px; line-height: 40px; width: 200px; height: 60px; text-indent: 18px; background-image: url(icons/bg-step.png); background-repeat: no-repeat; background-position: -400px 0px;} .on {color: #fff; background-position: -200px 0px;} .closed {color: #fff; background-position: 0px 0px;} /* Kurzbeschreibung für Buttonlösung */ .desc_small {color: #999; font-size: 11px; line-height: 11px; max-height:50px; overflow:auto;} /* ---------------------------------------------------------- */ /* Mein Konto ControllCenter*/ /* ---------------------------------------------------------- */ .cc_box {width: 322px; margin-top: 20px; float: left; height:120px; border-bottom: 1px solid #EAEAEA; padding-bottom: 20px;} .cc_left {float: left; width: 200px;} .cc_left p {font-size: 11px; color: #666; line-height: 14px; margin-bottom: 10px; min-height: 43px; } .cc a {background-image: url(icons/bg-account.png); background-repeat: no-repeat; background-position: 0px 0px; display: block; height: 100px; width: 100px; float: left; margin-right: 10px;} .img1 a, .img1 a:visited {background-position: 0px 0px;} .img1 a:active, .img1 a:hover {background-position: 0px -100px;} .img2 a, .img2 a:visited {background-position: -200px 0px;} .img2 a:active, .img2 a:hover {background-position: -200px -100px;} .img3 a, .img3 a:visited {background-position: -300px 0px;} .img3 a:active, .img3 a:hover {background-position: -300px -100px;} .img4 a, .img4 a:visited {background-position: -400px 0px;} .img4 a:active, .img4 a:hover {background-position: -400px -100px;} .img5 a, .img5 a:visited {background-position: -600px 0px;} .img5 a:active, .img5 a:hover {background-position: -600px -100px;} .img6 a, .img6 a:visited {background-position: -700px 0px;} .img6 a:active, .img6 a:hover {background-position: -700px -100px;} .img7 a, .img7 a:visited {background-position: -800px 0px;} .img7 a:active, .img7 a:hover {background-position: -800px -100px;} .img8 a, .img8 a:visited {background-position: -900px 0px;} .img8 a:active, .img8 a:hover {background-position: -900px -100px;} .img9 a, .img9 a:visited {background-position: -100px 0px;} .img9 a:active, .img9 a:hover {background-position: -100px -100px;} .img10 a, .img10 a:visited {background-position: -500px 0px;} .img10 a:active, .img10 a:hover {background-position: -500px -100px;} .img11 a, .img11 a:visited {background-position: -1000px 0px;} .img11 a:active, .img11 a:hover {background-position: -1000px -100px;} .img12 a, .img12 a:visited {background-position: -1100px 0px; height: 70px; width: 70px; margin-right: 20px;} .img12 a:active, .img12 a:hover {background-position: -1100px -70px;} /* Dokumentendetails */ .col_33_pro {float: left; width: 33%} /* ---------------------------------------------------------- */ /* Sitemap auf 5 Ebenen /* ---------------------------------------------------------- */ .sitemap {-moz-column-count: 2; -webkit-column-count: 2; column-count: 2;} .site, .site:visited {color: #332C19; line-height: 20px; display: block; cursor: pointer; text-decoration: none;} .site:active, .site:hover {color: #EE7400;} .m1 {text-indent: 10px; font-weight: bold; background: url(icons/bg-icons.png) no-repeat -10px -31px;} .m2 {text-indent: 20px;} .m3 {text-indent: 30px;} .m4 {text-indent: 40px;} .m5 {text-indent: 50px;} /* ---------------------------------------------------------- */ /* FAQ - Frequently Asked Questions /* ---------------------------------------------------------- */ .faqCategory {background: url(icons/bg-grey-small.png) repeat-x; padding: 10px; font-family: 'Roboto Slab', serif; font-size: 18px; line-height: 18px; cursor: pointer;} .faqCategory:hover {color: #EE7400;} .faqQuestion {cursor:pointer; Padding: 0px 0px 10px 25px; background: url(icons/arrow-right.png) no-repeat 10px 5px; line-height: 18px; height: 18px;} .faqQuestion:hover {color: #EE7400;} .faqAnswer {Padding: 0px 0px 10px 25px; display:none; font-style: italic; color: #666;} /* ---------------------------------------------------------- */ /* Fusszeile */ /* ---------------------------------------------------------- */ .footerstart {padding: 30px 0 15px 0;} .footerstart h3 {color: #EE7400;} .footerstart p {line-height: 20px; margin-bottom:15px;} .start_box {padding: 20px 0px 20px 20px; border-left: 1px solid #D6D6D6; border-top: 1px solid #D6D6D6; border-right: 1px solid #999; border-bottom: 1px solid #999; -webkit-border-radius: 5px; border-radius: 5px;} /* Zahlungsarten */ .bg_payment li {float: left; margin-right: 19px;} .bg_payment li a {background-image: url(icons/bg-payment.jpg); background-position: 0px 0px; background-repeat: no-repeat; display: block; height: 40px;} .bg_payment li a.mastercard {background-position: 0px 0px; width: 70px;} .bg_payment li a.mastercard:hover {background-position: 0px -40px;} .bg_payment li a.visa {background-position: -70px 0px; width: 69px;} .bg_payment li a.visa:hover {background-position: -70px -40px;} .bg_payment li a.americanexpress {background-position: -139px 0px; width: 69px;} .bg_payment li a.americanexpress:hover {background-position: -139px -40px;} .bg_payment li a.paypal {background-position: -208px 0px; width: 70px;} .bg_payment li a.paypal:hover {background-position: -208px -40px;} .bg_payment li a.clickandbuy {background-position: -278px 0px; width: 62px;} .bg_payment li a.clickandbuy:hover {background-position: -278px -40px; } .bg_payment li a.sofortueberweisung {background-position: -340px 0px; width: 100px;} .bg_payment li a.sofortueberweisung:hover {background-position: -340px -40px;} .bg_payment li a.klarna {background-position: -440px 0px; width: 113px;} .bg_payment li a.klarna:hover {background-position: -440px -40px;} .bg_payment li a.skrill {background-position: -553px 0px; width: 72px;} .bg_payment li a.skrill:hover {background-position: -553px -40px;} .bg_payment li a.amazon {background-position: -625px 0px; width: 62px;} .bg_payment li a.amazon:hover {background-position: -625px -40px;} .bg_payment li a.billsafe {background-position: -687px 0px; width: 93px;} .bg_payment li a.billsafe:hover {background-position: -687px -40px;} /* Export Preissuchmaschinen */ .bg_export li {float: left; margin-right: 19px;} .bg_export li a {background-image: url(icons/bg-export.jpg); background-position: 0px 0px; background-repeat: no-repeat; display: block; height: 40px;} .bg_export li a.billiger {background-position: 0px 0px; width: 104px;} .bg_export li a.billiger:hover {background-position: 0px -40px;} .bg_export li a.preissuchmaschine {background-position: -104px 0px; width: 87px;} .bg_export li a.preissuchmaschine:hover {background-position: -104px -40px;} .bg_export li a.google {background-position: -191px 0px; width: 115px;} .bg_export li a.google:hover {background-position: -191px -40px;} .bg_export li a.yatego {background-position: -306px 0px; width: 165px;} .bg_export li a.yatego:hover {background-position: -306px -40px;} .bg_export li a.idealo {background-position: -471px 0px; width: 156px;} .bg_export li a.idealo:hover {background-position: -471px -40px;} .bg_export li a.guenstiger {background-position: -627px 0px; width: 135px;} .bg_export li a.guenstiger:hover {background-position: -627px -40px;} .bg_export li a.preis {background-position: -761px 0px; width: 57px;} .bg_export li a.preis:hover {background-position: -761px -40px;} /* Fusszeile */ .bg-footer {background:#322B17 url(icons/bg_footer.png) repeat-x left top; padding: 30px 0px 25px 0; color: #fff;} .footer h5 {color: #EE7400; font-size:14px; margin-bottom:10px;} .col_150 {float: left; width: 150px;} .footer strong {color: #fff; font-size: 12px;} .footer p {font-size: 11px; line-height: 18px; color: #ABABAB;} .col_150 li {padding: 2px 0px 6px 0px;} .col_150 li a {color: #ABABAB; font-size: 11px; line-height: 11px;} .col_150 li a:hover {color: #fff;} /* rechte Spalte mit Social Media & Partner */ .col_360_r {float: right; width: 360px;} .maxheigh {height: 110px;} /* IE7 fix */ /* Social Media */ .col_130 {float: left; width: 130px;} .bg_social li {float: left; margin: 0px 10px 20px 0px;} .bg_social li a {background-image: url(icons/bg-social.png); background-position: 0px 0px; background-repeat: no-repeat; display: block; width: 32px; height: 32px;} .bg_social li a.facebook {background-position: 0px 0px;} .bg_social li a.facebook:hover {filter: alpha(opacity=80); opacity: 0.8;} .bg_social li a.twitter {background-position: -32px 0px;} .bg_social li a.twitter:hover {filter: alpha(opacity=80); opacity: 0.8;} .bg_social li a.google {background-position: -64px 0px;} .bg_social li a.google:hover {filter: alpha(opacity=80); opacity: 0.8;} .bg_social li a.youtube {background-position: -96px 0px;} .bg_social li a.youtube:hover {filter: alpha(opacity=80); opacity: 0.8;} /* Partner */ .col_230 {float: left; width: 230px;} .bg_seal2 li {float: left; margin: 0px 10px 0px 0px;} .bg_seal2 li a {background-image: url(icons/bg-seal.png); background-repeat: no-repeat; width: 40px; height: 40px; display: block;} .bg_seal2 li div {background-image: url(icons/bg-seal.png); background-repeat: no-repeat; width: 40px; height: 40px; display: block;} .bg_seal2 li a.trusted {background-position: 0px -40px;} .bg_seal2 li a.trusted:hover {filter: alpha(opacity=80); opacity: 0.8;} .bg_seal2 li a.it_recht {background-position: -40px -40px;} .bg_seal2 li a.it_recht:hover {filter: alpha(opacity=80); opacity: 0.8;} .bg_seal2 li div.friendly {background-position: -80px -40px;} .bg_seal2 li div.friendly:hover {filter: alpha(opacity=80); opacity: 0.8;} .bg_seal2 li div.comodo {background-position: -120px -40px; width: 61px;} .bg_seal2 li div.comodo:hover {filter: alpha(opacity=80); opacity: 0.8;} /* Newsletter */ .newsletter input {font-size: 12px; width: 215px; padding: 0px 0px 0px 10px; height: 35px; line-height: 35px; border: 0px; float: left; background: #fff; -webkit-border-top-left-radius: 5px; -webkit-border-bottom-left-radius: 5px; border-top-left-radius: 5px; border-bottom-left-radius: 5px; -webkit-border-top-right-radius: 0px; -webkit-border-bottom-right-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px;} .newsletter a, .newsletter a:visited {background: url(icons/bg-icons.png) no-repeat 0px -55px; width: 35px; height: 35px; display: block; float: left;} .newsletter a:active, .newsletter a:hover {background: url(icons/bg-icons.png) no-repeat -35px -55px;} .copyright {padding: 10px 0px 10px 0px; font-size: 10px; color: #666;} /* ---------------------------------------------------------- */ /* Allgemeine Buttons (globale Verwendung) */ /* ---------------------------------------------------------- */ .bt a, .bt a:visited {font-family: 'Roboto Slab', serif; cursor: pointer; padding: 5px 15px 5px 15px; display: inline-block; font-size: 14px; color: #332C19; -webkit-border-radius: 15px; border-radius: 15px; color: #332C19; border-left: 1px solid #D6D6D6; border-top: 1px solid #D6D6D6; border-right: 1px solid #999; border-bottom: 1px solid #999; background: #F0F0F0 url(icons/bg-buttons.png) repeat-x; transition: background-color 0.7s; -webkit-border-radius: 15px; border-radius: 15px;} .bt a:active, .bt a:hover {background: #EAEAEA; color:#EE7400;} .arrowdown {background: url(icons/arrow-down.png) no-repeat 0px center; width: 8px; height: 5px; display: inline-block; float: left; margin: 6px 10px 0px 0px;} .arrowright {background: url(icons/arrow-right.png) no-repeat 0px center; width: 5px; height: 8px; display: inline-block; float: left; margin: 4px 10px 0px 0px;} .arrowleft {background: url(icons/arrow-left.png) no-repeat 0px center; width: 5px; height: 8px; display: inline-block; float: left; margin: 4px 10px 0px 0px;} .bt_small a, .bt_small a:visited {font-family: 'Roboto Slab', serif; cursor: pointer; padding: 2px 15px 2px 15px; display: inline-block; font-size: 11px; line-height: 13px; color: #332C19; border-left: 1px solid #D6D6D6; border-top: 1px solid #D6D6D6; border-right: 1px solid #999; border-bottom: 1px solid #999; background: #F0F0F0 url(icons/bg-buttons.png) repeat-x 0px -5px; -webkit-border-radius: 10px; border-radius: 10px;} .bt_small a:active, .bt_small a:hover {color: #EE7400; background:#EAEAEA;} .next a, .next a:visited {border-left: 1px solid #EA8948; border-top: 1px solid #EA8948; border-right: 1px solid #952A10; border-bottom: 1px solid #952A10; background: #DB3D18 url(icons/bg-buttons.png) repeat-x 0px -48px; color: #fff;} .next a:active, .next a:hover {background: #DB3D18 url(icons/bg-buttons.png) repeat-x 0px -106px; color: #fff;} .arrow a, .arrow a:visited {background-position: 0px -340px; color: #332C19; font-weight: normal; font-size: 12px; height: 20px; line-height: 20px;} .arrow a:active, .arrow a:hover {background-position: 0px -340px; color: #EE7400; } /* Mindestbreiten für die Astehtik */ .min_width a {min-width: 120px;} /* Buttons für die Detailansicht */ .bt_detail a {background-image: url(icons/bg-icons.png); background-repeat: no-repeat; background-position: 0px 0px; cursor: pointer; display: block; float: left; margin: 0px 10px 0px 0px; width: 30px; height: 30px;} .print a, .print a:visited {background-position: 0px -90px; } .print a:active, .print a:hover {background-position: 0px -120px;} .mail a, .mail a:visited {background-position: -30px -90px; } .mail a:active, .mail a:hover {background-position: -30px -120px;} .rate a, .rate a:visited {background-position: -60px -90px;} .rate a:active, .rate a:hover {background-position: -60px -120px;} /* Warenkorb-Button mit Varianten */ .bt_cart a, .bt_cart a:visited {font-family: 'Roboto Slab', serif; cursor: pointer; padding: 3px 10px 3px 10px; line-height: 20px; display: inline-block; font-size: 14px; -webkit-border-radius: 15px; border-radius: 15px; border-left: 1px solid #EA8948; border-top: 1px solid #EA8948; border-right: 1px solid #952A10; border-bottom: 1px solid #952A10; background: #DB3D18 url(icons/bg-buttons.png) repeat-x 0px -48px; color: #fff;} .bt_cart a:active, .bt_cart a:hover {background: #DB3D18 url(icons/bg-buttons.png) repeat-x 0px -106px; color: #fff;} .cart {background: url(icons/bg-icons.png) no-repeat -70px 0px; width: 21px; height: 21px; display: inline-block; float: left; margin: 0px 5px 0px 0px;} /* Größer-Button für Bestellprozess bzw. Highlight */ .bt_big a, .bt_big a:visited {font-family: 'Roboto Slab', serif; float: right; cursor: pointer; padding: 5px 40px; line-height: 20px; display: inline-block; font-size: 14px; -webkit-border-radius: 15px; border-radius: 15px; border-left: 1px solid #EA8948; border-top: 1px solid #EA8948; border-right: 1px solid #952A10; border-bottom: 1px solid #952A10; background: #DB3D18 url(icons/bg-buttons.png) repeat-x 0px -48px; color: #fff;} .bt_big a:active, .bt_big a:hover {background: #DB3D18 url(icons/bg-buttons.png) repeat-x 0px -106px; color: #fff;} .cash {background: url(icons/bg-icons.png) no-repeat -102px 0px; width: 26px; height: 21px; display: inline-block; float: left; margin: 0px 10px 0px 0px;} .bt_variant a, .bt_variant a:visited {font-family: 'Roboto Slab', serif; cursor: pointer; padding: 3px 10px 3px 10px; text-align:center; line-height: 20px; display: inline-block; font-size: 14px; -webkit-border-radius: 15px; border-radius: 15px; color: #332C19; border-left: 1px solid #D6D6D6; border-top: 1px solid #D6D6D6; border-right: 1px solid #999; border-bottom: 1px solid #999; background: #F0F0F0 url(icons/bg-buttons.png) repeat-x;} .bt_variant a:active, .bt_variant a:hover {color: #EE7400; background:#EAEAEA} .bt_variant .cart {display: none;} .bt_cart_small a, .bt_cart_small a:visited {cursor: pointer; padding: 3px 0px 3px 10px; display: inline-block; -webkit-border-radius: 5px; border-radius: 5px; border-left: 1px solid #EA8948; border-top: 1px solid #EA8948; border-right: 1px solid #952A10; border-bottom: 1px solid #952A10; background: #DB3D18 url(icons/bg-buttons.png) repeat-x 0px -48px;} .bt_cart_small a:active, .bt_cart_small a:hover {background: #DB3D18 url(icons/bg-buttons.png) repeat-x 0px -106px;} /* LB-Buttons Merkzettel & Einkaufsliste */ .bt_form {height:20px;} .bt_ddl, .bt_ddl:visited {font-family: 'Roboto Slab', serif; width: 120px; cursor:pointer; display:block; padding: 2px 15px 2px 15px; font-size: 12px; line-height: 13px; color: #332C19; border-left: 1px solid #D6D6D6; border-top: 1px solid #D6D6D6; border-right: 1px solid #999; border-bottom: 1px solid #999; background: #F0F0F0 url(icons/bg-buttons.png) repeat-x 0px -5px; -webkit-border-radius: 10px; border-radius: 10px;} .bt_ddl:active, .bt_ddl:hover {color: #EE7400; background:#EAEAEA;} .bt_ddl_container {display: none; position: relative; background: #fff; cursor:pointer; width: 160px; padding: 10px; font-size: 11px; border-left: 1px solid #D6D6D6; border-right: 1px solid #999; border-bottom: 1px solid #999; z-index:9999;} .bt_ddl_container p {padding: 5px 0px 0px 10px;} /*..bt_ddl_element:hover {color: #EE7400;} .bt_ddl_elementSelected {color: #000; font-weight: bold; }*/ /* Buttons diverse Aktionen */ .bt_action { margin-left: 28px;} .bt_action a {background-image: url(icons/bg-icons.png); background-repeat: no-repeat; background-position: 0px 0px; cursor: pointer; display: block; float: left; margin: 10px 10px 0px 0px; width: 30px; height: 30px;} .delete a {background-position: -90px -90px; } .delete a:hover {background-position: -90px -120px;} .update a {background-position: -120px -90px; } .update a:hover {background-position: -120px -120px;} /* ---------------------------------------------------------- */ /* Hauptmenü für 5 Ebenen */ /* ---------------------------------------------------------- */ .categories {margin-bottom:20px;} .cat, .cat:visited {background:#FF9622; color: #fff; display: block;} .cat:active, .cat:hover {color: #fff;} .c1, .c1:visited {color: #fff; font-family: 'Roboto Slab', serif; font-size:14px; line-height: normal; height: auto; padding:6px 0 6px 20px; transition: background 0.4s; background:url(icons/arrow-white.png) no-repeat 10px 12px #E67800; border-bottom:1px solid #FFF;} .c1:active, .c1:hover {background:url(icons/arrow-white.png) no-repeat 10px 12px #FF9622; color: #fff; } .c1_on, .c1_on:visited {background:url(icons/arrow-white.png) no-repeat 10px 12px #E67800; font-size:14px; color: #fff; font-family: 'Roboto Slab', serif; transition: background 0.4s; line-height: normal; height: auto; padding:6px 0 6px 20px; border-bottom:1px solid #FFF;} .c1_on:active, .c1_on:hover {background:url(icons/arrow-white.png) no-repeat 10px 12px #FF9622;} .c2, .c2:visited {color: #333; font-weight: normal; line-height: normal; height: auto; padding:7px 0 7px 30px; transition: background 0.4s; background:url(icons/arrow-right.png) no-repeat 20px 10px #EAEAEA; border-bottom:1px solid #FFF;} .c2:active, .c2:hover {background:url(icons/arrow-white.png) no-repeat 20px 10px #E67800; color: #fff; } .c2_on, .c2_on:visited {background:url(icons/arrow-white.png) no-repeat 20px 10px #E67800; color: #fff; font-weight: bold; transition: background 0.4s; line-height: normal; height: auto; padding:7px 0 7px 30px; border-bottom:1px solid #FFF;} .c2_on:active, .c2_on:hover {background:url(icons/arrow-white.png) no-repeat 20px 10px #FF9622; color: #fff;} .c3, .c3:visited {color: #333; font-weight: normal; line-height: normal; height: auto; padding:7px 0 7px 40px; transition: background 0.4s; background:url(icons/arrow-right.png) no-repeat 30px 10px #EAEAEA; border-bottom:1px solid #FFF;} .c3:active, .c3:hover {background:url(icons/arrow-white.png) no-repeat 30px 10px #E67800; color: #fff; } .c3_on, .c3_on:visited {background:url(icons/arrow-white.png) no-repeat 30px 10px #E67800; color: #fff; font-weight: bold; transition: background 0.4s; line-height: normal; height: auto; padding:7px 0 7px 40px; border-bottom:1px solid #FFF;} .c3_on:active, .c3_on:hover {background:url(icons/arrow-white.png) no-repeat 30px 10px #FF9622; color: #fff;} .c4, .c4:visited {color: #333; font-weight: normal; line-height: normal; height: auto; padding:7px 0 7px 50px; transition: background 0.4s; background:url(icons/arrow-right.png) no-repeat 40px 10px #FF9622; border-bottom:1px solid #FFF;} .c4:active, .c4:hover {background:url(icons/arrow-white.png) no-repeat 40px 10px #E67800; color: #fff; } .c4_on, .c4_on:visited {background:url(icons/arrow-white.png) no-repeat 40px 10px #E67800; color: #fff; font-weight: bold; transition: background 0.4s; line-height: normal; height: auto; padding:7px 0 7px 50px; border-bottom:1px solid #FFF;} .c4_on:active, .c4_on:hover {background:url(icons/arrow-white.png) no-repeat 40px 10px #FF9622; color: #fff;} /* ---------------------------------------------------------- */ /* Linke Spalte */ /* ---------------------------------------------------------- */ .leftbox {background:#EAEAEA; padding:15px; margin-bottom:15px;} .left-hl {color: #EE7400; font-size: 14px; display:block; font-family: 'Roboto Slab', serif; margin-bottom:10px;} .left-about img, .left-service img {float:left; margin:0 8px 0 0;} .left-about, .left-service {border-bottom:1px solid #fff; padding-bottom:15px; margin-bottom:15px;} .left-service p {font-size:10px; line-height:14px;} .left-service p span {font-size:17px; font-weight:bold; display:inline-block; margin-bottom:3px;} /* ---------------------------------------------------------- */ /* Übersichtsbox (globale Verwendung) /* ---------------------------------------------------------- */ .overviewbox {padding: 10px; border: 1px solid #EAEAEA;} /* ---------------------------------------------------------- */ /* Erweiterung FactFinder BEGIN */ /* ---------------------------------------------------------- */ div.suggestLayer {position: relative; top: 0px; left: 0px; display: block; padding: 0; margin: 0; z-index: 1000000;} table.suggestLayer {font-size: 11px; width: 441px; border: 1px solid #ccc; height: 12px; background-color: white; color: #005abe; cursor: pointer;} tr.suggestLayer {height: 12px;} td.suggestLayer {padding: 10px; height: 12px;} tr.suggestHeader {color: #173553; font-weight: normal; font-size: 10px;} tr.suggestHeader td {border-bottom: 1px solid #5C637D; padding: 5px;} td.suggestFooter {height:25px; border-top:solid 1px #5C637D; font-size:9px; color: #173553; background-color: #f0f0f0;} td.suggestTextQuery {font-weight: bold; padding: 5px;} span.suggestTextQueryTyped { color: #EE7400; text-decoration: underline;} td.suggestTextType {padding: 5px; width: 30%;} td.suggestTextAmount {padding: 5px; width: 30%; text-align: right;} tr.suggestRow {padding: 5px; background-color: #FCFCFC;} tr.suggestHighlight {color: #fff; background-color: #EE7400;} tr.suggestHighlight span.suggestTextQueryTyped {color: white;} input[type=file] {width:220px;} .errorinput {visibility:hidden; width:1px; background:red; margin:0 0 0 0; padding:0; border:none;} .jcl { box-sizing: border-box; width: 100%; text-align: center; background: rgba(238, 132, 0, 0.9); color: #332C19; font-size: 11px; z-index: 1000; line-height: 20px; margin: 0; padding: 0; } .jcl-text { display: inline-block; line-height: 20px; vertical-align: middle; } .jcl-text a { color: #fff; text-decoration: underline; } .jcl-exit { color: #fff; vertical-align: middle; box-sizing: border-box; display: inline-block; width: 40px; height: 20px; background: rgba(50, 43, 23, 0.9); border: 1px solid #EE8400; margin-left: 10px; text-align: center; line-height: 20px; cursor: pointer; text-decoration: none; } .jcl-exit:hover { color: #fff; }