/** * Color Defination * @color #474747 - navigation background * @color #f1f5f8 - body background * @color #c7dded - very light blue (footer background) * @color #0082c8 - light blue (header effect) * @color #003565 - dark blue * @color #fb771b - orange (background) * @color #df620a - stronger orange (border) * @color #c1c1c1 - light grey (borders) */ /* * * * Color Changes * * * */ /* Some Block-Backgrounds */ .gridView .titleBox, .itemSlider .titleBlock, .itemSlider .titleBlock:hover, .gridView .priceBox, .box h3, .box h2, .sectionHead, .pageHead, #currencies a.selected, #languages a.selected, .flyoutMenu a.selected, .dropDown a.selected, .thumbNav a.cur, .thumbNav a.cur:hover, .promoBox strong.promoPrice, .itemSlider .prevItem span.slideBg, .itemSlider .nextItem span.slideBg, .specBox h3 {background:#003565; text-shadow:none !important;} .box ul, .box ol, .box .content{border-color:#003565;} img{max-width: 100%; max-height: 100%;} /* Most orange background/effects */ .FXgradOrange, .removeButton, .sf-menu li.current, .sf-menu li.sfHover, .sf-menu li:hover, .gridView div.priceBox:hover, .gridView div.titleBox:hover, .featuredList a:hover, .featuredList li.articleImage:hover + li.articleTitle > a, #footer .list a:hover, #currencies a:hover, #languages a:hover, .flyoutMenu a:hover, .submitButton:hover, .basketFlyout li a:hover, .dropDown ul a:hover, div.anythingSlider span.arrow:hover, .thumbNav a:hover, .itemSlider .prevItem:hover span.slideBg, .itemSlider .nextItem:hover span.slideBg, a.viewAllHover, .itemSlider li a.viewAllHover,.specBoxTitles a.title:hover, .actionLinks li:hover {background:#0082c8;} /* Some of the grey backgrounds */ .FXgradGreyLight, .sf-menu li ul, #footer #panel, .box ul, .box ol, .box .content, .loginForm, #currencies, #languages, .flyoutMenu, .basketFlyout, div.anythingSlider .arrow, .thumbNav {background:#fff;} /* Generall CSS */ body{background:#f1f5f8;} a,span,h1,h2,h3,button,label,div{text-transform:none !important;} input.inputError{border-color:#f00;} #headerBackground{position:absolute; width:100%; height:109px; top:0; left:0; background:#fff;} #navigationBackground{position:absolute; width:100%; height:36px; top:109px; left:0; background:#474747;} .jsWarningWrapper{position:fixed; width:100%; border-bottom:5px solid #522; background:#e70114; z-index:14;} .jsWarningWrapper .jsWarning{margin:22px auto; width:940px; color:#fff; font-size:18px; font-weight:bold; text-align:center;} #pageContent{background:#fff; overflow:hidden; width:940px; margin:0 10px; padding:20px 0 15px;} #content{width:750px; margin:10px 0 0; padding:0 10px 0 0;} #page.bigPage #content{margin-top:-10px; padding:0 15px; width:910px;} #pageContent .oxSlider{margin:-20px 0 0 -20px; padding:0;} #pageContent .promoShadow{display:none;} #contactForm, .cmsContent{padding:0 5px;} #delCountrySelect, #invCountrySelect{width:204px;} div.anythingSlider .arrow{box-shadow:none;} div.anythingSlider .thumbNav{overflow:hidden; margin:0 10px; padding:0; border-radius:2px 2px 0 0;} div.anythingSlider .back a{background-position:-3px 1px;} div.anythingSlider .back a:hover{background-position:-3px -76px;} div.anythingSlider .forward a{background-position:-89px 1px;} div.anythingSlider .forward a:hover{background-position:-89px -76px;} .pager{background:none;} .pager .active{background:#0082c8;} h1.noPadding{padding:0 0 4px !important;} .form label.req:after{content:" *"; font-weight:bold; color:#f00;} .colorStyle{border:1px solid #df620a; color:#fff; background:#fb771b;} .verify{display:none !important;} .addressCollumns h3.blockHead, .checkoutCollumns h3.blockHead{height:35px; padding:0; line-height:35px;} /* color list */ .colorList{margin:10px;} .colorList li{list-style:none;} .colorList li i{padding:0 7px 0 0; color:#0082c8; font-size:14px;} /* popup design */ #content.popup{width:650px;} #content.popup .closePopup{width:120px; margin:10px 0 0 375px;} #content.popup .closePopup a{font-size:13px; text-decoration:underline;} /* error messages */ #content .status.corners.error{margin:10px 0 10px 0;} /* oxid dropdowns */ .dropDown ul{background:#fff;} .dropDown ul a{border-top:none;} .dropDown .selectMessage{color:#0082c8;} .dropDown ul a:hover, .dropDown ul a.selected{background:#003565;} .dropDown li.asc span, .dropDown li.desc span, .dropDown p span.asc, .dropDown p span.desc {background:transparent;} /* List Header - PÜL, Search */ #content .pageHead{padding:9px 5px 7px 0; border:none; background:none; color:#000; font-size:25px; font-weight:normal; box-shadow:none;} #content .listRefine{border:none; background:none;} /* Generell - Buttons */ body .submitButton[disabled], body .submitButton{position:relative; overflow:hidden; height:auto; padding:2px 17px 2px 5px; border:1px solid #df620a; background:#fb771b; color:#fff; font-size:13px; text-shadow:none; border-radius:2px;} body .submitButton.smallButton{padding:1px 16px 1px 5px; font-size:11px;} body .submitButton.largeButton{padding:4px 19px 4px 7px; font-size:13px;} body a.submitButton{padding:4px 20px 4px 8px; color:#fff;} body a.submitButton.smallButton{height:13px; padding:4px 19px 4px 8px;} body a.submitButton.largeButton{height:16px; padding:6px 22px 6px 10px; line-height:16px; font-size:13px;} body .submitButton:before{position:absolute; content:url('../../img/pfeil-klein.png'); top:3px; right:8px;} body .submitButton.largeButton:before{top:4px;} body a.submitButton.largeButton:before{top:5px;} body .submitButton.notImportant{padding:2px 5px 2px 5px; border-color:#c1c1c1; background:#c1c1c1;} body a.submitButton.notImportant{padding:4px 8px 4px 8px;} body .submitButton.notImportant:before{content:none;} body a.submitButton.notImportant:before{content:none;} body .submitButton[disabled]:hover, body .submitButton:hover{background:#fb771b; text-shadow:none;} body .submitButton.notImportant:hover{background:#c1c1c1;} body a.submitButton.back{padding:4px 8px 4px 20px;} body a.submitButton.back:before{content:url('../../img/pfeil-klein_back.png'); left:8px; right:auto;} .lineBox{border:none; background:transparent;} button.textLink{padding:0; background:none; color:#00f; cursor:pointer; font-size:12px; font-weight:normal; text-decoration:underline;} /* Generell - Header */ #header .headerMenuWrapper{position:absolute; top:0; right:10px;} #header .selectedValue{margin-top:6px;} #header .selectedValue a.flag{line-height:14px;} #logoutLink{margin:0 0 0 5px; padding-left:0; background:none;} #logoutLink i{margin:0 5px 0 0; font-size:13px; color:#0082c8;} #header #logo{position:absolute; margin:0; top:34px; left:10px;} #header #logo img{float:left; width:175px; margin:0 8px 0 0;} #header #logo span{float:right; font-size:17px; font-style:oblique; padding:15px 0 0;} #basketFlyout.new, #header .searchWrapper.outer{background:url('../../img/searchBG.png'); border-radius:0 15px;} #header .searchWrapper.outer{position:absolute; width:330px; height:55px; top:67px; right:10px;} #header .searchBox{top:13px; left:14px;} #header .searchBox .innerLabel{padding:4px 0; font-size:14px;} #header .searchBox .textbox{width:185px; height:28px; margin:0; border:none; font-size:14px; line-height:28px;} #header .searchBox .searchSubmit{width:38px; height:30px; padding:0 0 0 2px; background:#474747; border-radius:0 2px 2px 0;} #header .searchBox .searchSubmit:hover{cursor:pointer;} #header .searchBox .searchSubmit i{font-size:17px;} #header #miniBasket{top:-15px; right:20px;} #header #miniBasket img{position: relative;} #header #basketFlyout{top:-42px; right:15px;} #modalbasketFlyout.new i.closePop, .basketFlyout i.closePop{float:right; margin:-4px 5px 0 0; font-size:18px; color:#0082c8;} #modalbasketFlyout.new i.closePop:hover, .basketFlyout i.closePop:hover{cursor:pointer;} #loginBox .loginForm{width:170px;} #loginBox .loginForm p{overflow:hidden;} #loginBox .loginForm .textbox{width:158px;} #loginBox .loginForm .forgotPasswordOpener{float:right; color:#a9a9a9;} #loginBox .loginForm .forgotPasswordOpener:hover{color:#a9a9a9; text-decoration:underline;} #forgotPassword i.closePop{position:absolute; top:5px; right:7px; font-size:18px; color:#0082c8;} #forgotPassword i.closePop:hover{cursor:pointer;} /* Generell - Headernavi */ #navigation{width:940px; margin:109px 0 10px; padding:0;} #navigation .sf-sub-indicator{display:none;} #navigation .home a{padding:7px 15px 8px;} #navigation .home a i{font-size:21px; line-height:21px;} #navigation > li{padding:0; border-radius:0; background:none;} #navigation > li > a{padding:10px 15px; color:#fff;} #navigation > li:hover, #navigation > li.current{background:#0082c8;} #navigation > li:hover > a, #navigation > li.current > a.current{color:#fff;} #navigation > li > ul{margin-top:5px; background:#fff; border-radius:0;} #navigation > li > ul > li{border:none; border-radius:0 !important;} #navigation > li > ul > li > a{font-size:12px;} /* start */ .topArticle{} .topArticle .oldPrice{text-decoration:line-through; font-weight:normal; font-size:12px;} .topArticle .reduced{color:#f00;} .topArticle a:hover{text-decoration:none;} .topArticle a:hover .name{text-decoration:underline;} /* wk steps*/ .checkoutSteps{margin:0 -15px; border:none;} .checkoutSteps li{height:34px; margin-left:-17px; padding-left:17px; color:#4f4f51; background-image:url('../../img/steps.png'); background-position:100% -6px; font-weight:bold; line-height:33px;} .checkoutSteps span{display:block; width:85%; padding-left:0; text-align:center;} .checkoutSteps a{color:#4f4f51;} .checkoutSteps li.step1, .checkoutSteps li.step2, .checkoutSteps li.step3, .checkoutSteps li.step4{width:210px;} .checkoutSteps li.step5{width:100px;} .checkoutSteps li.passed, .checkoutSteps li.active{background-position:100% -53px;} .checkoutSteps li.activeLast{background-position:0 -53px;} .checkoutCollumns #addressText .formNote a{text-decoration:underline;} #selectAjaxCountry{width:204px;} #selectAjaxAccounting{width:204px;} #accounting-spinner{margin:20px 0 15px 232px;} .invoiceAdress{margin:10px 0 25px 155px; line-height:20px;} .summary .totalNetto > th, .summary .totalNetto > td{border-top-color:#C9D3D7; font-weight: bold;} /* left navigation */ #sidebar{width:165px; margin:10px 0 0 15px;} #sidebar .sidebarMenu, #sidebar .categoryBox{border:none;} #sidebar .sidebarMenu li, #sidebar .categoryBox li{margin:8px 0; background:none;} #sidebar .tree li > a, #sidebar .tree li.exp > a, #sidebar .tree li.active > a{padding:0; box-shadow:none; border:none; background:none; color:#000;} #sidebar .tree li.main{margin:0 0 20px;} #sidebar .tree li.main.multipleHeadlines{margin-top:20px;} #sidebar .tree li.main > a{font-size:18px;} /* normal Kategorie - activ + hover*/ #sidebar .tree li.active{text-shadow:none;} #sidebar .tree li.active > a, #sidebar .tree a:hover{background:none; color:#000; text-decoration:none; font-weight:bold;} #sidebar .tree a > i{float:none; width:auto; height:auto; margin:0 5px 0 6px; padding:0; background:none;} #sidebar .tree li > a > i span{display:none;} /* Breadcrumbs */ #breadCrumb{} #breadCrumb span{} #breadCrumb span.last{color:#000000;} /* Category List */ .catList{overflow:hidden;} .catList .pageHead{margin-bottom:0;} .catList .cat{position:relative; float:left; width:235px; height:197px; margin:25px 34px;} .catList .cat:hover{cursor:pointer;} .catList img{border-radius:0 18px;} .catList .submitButton{position:absolute; right:7px; bottom:7px;} .catList .submitButton:before{top:3px;} /* Article List */ .gridView{margin:0;} .gridView .productData{height:auto; margin:15px 21px; padding:0; text-align:center;} .gridView .productData > .productLink{display:block; margin:0 0 10px;} .gridView .productData > .buttonWrapper{display:block; margin:0 0 20px;} .gridView .productPicture{padding:0 0 10px;} .gridView .productName{display:block; width:185px; height:23px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} .gridView .productPrice{font-size:18px;} .gridView .productLink:hover{text-decoration:none;} .gridView .productLink:hover .productName{text-decoration:underline;} #sortItems{float:left;} #itemsPerPage{float:left;} #viewOptions{float:left;} #itemsPager{float:right;} #itemsPagerbottom{float:right; margin:0 0 10px; border:none;} .refineParams{padding:6px 0 4px;} /* Contact Page */ #contactForm{} #contactForm ul{width:auto;} #contactForm li{width:auto;} #contactForm textarea{width:330px;} /* EAA */ #details #productinfo{padding:0;} .pictureBlock{float:left; width:303px; padding:0 10px 0 0;} .pictureBlock .picture{float:none; width:100%; height:265px;} .pictureBlock .picture a{width:100%; height:260px; line-height:260px;} .pictureBlock .picture .cloud-zoom-lens{border-color:#fb771b;} .pictureBlock #cloud-zoom-big{top:14px !important; left:300px !important; border-color:#0082c8;} .pictureBlock #zoomTrigger{float:none; position:relative; width:auto; padding:0 0 0 20px; top:auto; left:auto; background:none; text-decoration:underline; text-indent:0;} .pictureBlock #zoomTrigger i{position:absolute; top:2px; left:0; font-size:14px;} .detailsInfo .information{float:left; width:355px; min-height:0; padding:0;} .detailsInfo .information .productMainInfo #productTitle{margin:20px 0; padding:0;} .detailsInfo .information .productMainInfo h1{font-size:19px; line-height:23px;} .detailsInfo .information .productMainInfo p{margin:7px 0;} #zoomModal i{float:right; color:#000; font-size:12px; font-style:normal;} #zoomModal i:hover{text-decoration:underline; cursor:pointer;} #zoomModal .zoomed{display:table-cell; vertical-align:middle;} .detailsInfo #variants{margin:10px 0 0; padding:0;} .detailsInfo #variants .dropDown{min-width:300px; cursor:default;} .detailsInfo #variants label{display:block; padding:0 0 2px; font-size:12px; font-weight:bold;} .detailsInfo #variants.variantError label{color:#f00;} .detailsInfo #variants select{width:200px; padding:1px; border:1px solid #c1c1c1; font-size:12px; border-radius:2px;} .detailsInfo #variants.variantError select{border-color:#f00;} .detailsInfo #variants select:hover{cursor:pointer;} .detailsInfo .variantMessage{display:none; padding:0; margin:8px 0;} .detailsInfo .toBasketWrapper{float:right; width:186px; margin:20px 0 0; padding:15px; border:1px solid #c1c1c1; border-radius:2px;} .detailsInfo .deliveryDate{margin:8px 0;} .detailsInfo .stockFlag{padding:0 0 0 25px; background-position:7px -45px;} .detailsInfo .stockFlag.lowStock{background-position:7px 3px;} .detailsInfo .stockFlag.notOnStock{background-position:7px -21px;} .detailsInfo .price{margin:10px 0; font-size:20px; font-weight:bold;} .detailsInfo .addPriceInfo{margin:0 0 10px; font-size:12px;} .detailsInfo .amountPriceInfo{margin:0 0 8px; font-size:11px;} .detailsInfo .amountPriceInfo th{padding:0 0 0 1px; border:none; text-align:left; font-weight:normal;} .detailsInfo .amountPriceInfo td{width:75px; padding:0 15px 0 3px; border-top:2px solid #fff; background:#f1f5f8;} .detailsInfo .toBasket p{margin:5px 0;} .detailsInfo .toBasket input{font-size:12px;} .detailsInfo .toBasket #amountToBasket{width:30px; height:20px; margin:0 3px; line-height:18px; text-align:center;} .detailsInfo .toBasket #minOrderChange{display:none; color:#f00;} .detailsInfo .toBasket #toBasket{width:100%; height:32px;} .detailsInfo .toBasket #toBasket:before{top:5px;} .detailsInfo .toBasket #noticeList{margin:4px 0 0; text-align:right; text-decoration:underline;} .stockError{clear:both; margin:0 0 10px; padding:5px 0 0 ; color:#f00; font-size:11px; line-height:14px; display:none;} .basketitems .arrowAmount, .toBasket .arrowAmount{float:left; margin:4px 0 6px;} .basketitems .arrowBox, .toBasket .arrowBox{position:relative; float:right; width:24px; height:24px; margin:0 0 0 -4px;} .basketitems .arrowBox .fa, .toBasket .arrowBox .fa{width:14px; border:1px solid #8c8989; border-left:none; text-align:center; font-size:16px; color:#474747; line-height:9px;} .basketitems .arrowBox .fa:hover, .toBasket .arrowBox .fa:hover{cursor:pointer;} .basketitems .arrowBox .fa-angle-up, .toBasket .arrowBox .fa-angle-up{position:absolute; height:11px; top:0;} .basketitems .arrowBox .fa-angle-down, .toBasket .arrowBox .fa-angle-down{position:absolute; height:10px; bottom:0;} #details #detailsRelated{padding:30px 5px 0;} #details #detailsRelated #itemTabs > li{border-radius: 4px 4px 0 0; margin: 0; padding: 10px 12px 8px; border:1px solid #c1c1c1;} #details #detailsRelated #itemTabs > li.ui-tabs-selected{border-bottom-color:#fff;} #details #detailsRelated #itemTabs > li > a{font-size:13px;} #details #detailsRelated .widgetBoxBottomRound{border-color:#c1c1c1;} #details #detailsRelated #description{padding:20px 150px 10px 10px;} #details #detailsRelated #attributes{padding:10px 0;} /* WK - Popup*/ #modalbasketFlyout{padding:5px 15px 15px;} #modalbasketFlyout .title{padding:0 0 7px; line-height:20px;} #modalbasketFlyout .title .note{font-size:13px;} #modalbasketFlyout .title .closePop{margin:3px 0 0 8px; margin:-1px -5px 0 8px;} #modalbasketFlyout ul{width:300px;} #modalbasketFlyout .totals{width:280px;} #modalbasketFlyout .functions{padding:10px 5px 0 0;} #modalbasketFlyout .functions .textButton{float:right;} /* WK */ /* Step 1 */ .step1TopMargin{margin:0;} .step1TopMargin + .error{margin-top:20px;} .basketitems td{border:none;} .basketitems th:first-child{padding-left:2px;} .basketitems tbody tr{border-top:5px solid #eceff0;} #topMenu a:hover, .selectedValue a:hover, .basketFunctions button{color:#0082c8;} .basketFunctions .stockError{margin:0; padding:0;} .basketitems .editCol{width:0;} .basketitems .checkbox{width:0;} .basketitems .quantity{position:relative;} .basketitems .amount{overflow:hidden; margin:3px 0 0;} .basketitems .arrowWrapper{margin-left:-5px;} .basketitems .basketFunctions{position:absolute; width:350px; margin:5px 0 0; padding:0; left:-156px; text-align:center;} .basketitems .textbox{margin:0; text-align:center;} .basketitems .arrowBox{float:left; width:16px; height:19px; margin:0 0 0 -1px;} .basketitems .arrowBox .fa{height:8px; left:0; font-size:12px; line-height:8px;} .basketitems .basketFunctions button:hover{text-decoration:underline;} .basketitems .basketFunctions .info{display:none; margin:0 0 1px; color:#f00; font-size:11px;} .couponBox{position: inherit; margin-top: 10px; width: 537px;} /* Step 2 */ .step2TopMargin{margin:0;} .step2TopMargin + form[name=order]{margin:20px 0 0;} .checkoutOptions{} .checkoutOptions h3{margin-bottom:15px; font-size:15px} .checkoutOptions ul{width:auto; margin-top:15px; margin-bottom:15px;} .checkoutOptions li{width:auto;} .checkoutOptions label{width:110px; margin:4px 0 0;} .checkoutOptions input[type=password], .checkoutOptions input[type=text]{width:238px; height:23px; font-size:12px;} .checkoutOptions #optionLogin{border-right:1px solid #000; border-radius:0;} .checkoutOptions #step2PswdOpener{color:#a9a9a9; font-size:12px; text-decoration:underline;} .checkoutOptions .option{width:370px; margin:27px 0 20px; padding:0 42px; background:transparent;} .checkoutOptions .stepsPasswordbox{width:238px !important;} .checkoutOptions .buttonLi{text-align:right;} .checkoutCollumns .blockHead{margin-top:0;} .checkoutCollumns #userChangeAddress.largeButton, .checkoutCollumns #userChangeShippingAddress.largeButton{padding:2px 17px 2px 5px;} .checkoutCollumns #userChangeAddress.largeButton:before, .checkoutCollumns #userChangeShippingAddress.largeButton:before{top:3px;} /* Step 3 */ .step3TopMargin{margin:0;} /* Step 4 */ .step4TopMargin{margin:0;} #orderAddress{margin-top:23px; overflow:hidden;} .orderAddress{width:50%; float:left;} label.agbError span{color:#f00; font-weight:bold;} .stockChanged{} .stockChanged .quantity{color:#f00;} .stockChanged input[type="text"]{color:#f00;} /* Step 4 and 2*/ .mayOrder.spacer{margin:80px 0 0 0;} .mayOrder img {float:left; padding:0 25px 65px 0;} .mayOrder img.smallSpace{float:left; padding:0 20px 20px 20px;} /* Step .5 */ .checkoutSteps + .cmsContent{margin-top:27px;} /* My Account */ .form .required::after { content: ' *'; color: red; } .accountDashboardView h1, #addressSettingsHeader, #personalSettingsHeader{padding:0 0 4px !important;} .accountDashboardView{padding:0 0 20px;} .accountDashboardView .submitButton{} #noticelistProductList .gridView .productData{margin:10px 1px 15px;} /* My Account - Orderhistory */ #orderList{overflow:hidden; width:750px; padding:0;} #orderList .head{overflow:hidden; font-weight:bold;} #orderList .orderRow{overflow:hidden;} #orderList .row1, #orderList .row2, #orderList .row3, #orderList .row4, #orderList .row5, #orderList .row6{float:left; height:23px; margin:0; padding:7px 0 0; font-size:13px;} #orderList .row1{width:45px;} #orderList .row2{width:110px;} #orderList .row3{width:210px;} #orderList .row4{width:90px;} #orderList .row5{width:110px;} #orderList .row6{width:180px;} #orderList .orderHead{overflow:hidden; background:#f1f5f8; margin:0 0 2px;} #orderList .orderHead:hover{cursor:pointer;} #orderList .orderHead .row1{padding:6px 0 0; text-align:center;} #orderList .orderHead .row1 .fa{font-size:16px; padding:0 3px; border-radius:4px;} #orderList .orderHead .row1 .fa-angle-right{padding:0 5px;} #orderList .orderHead .row1 .fa:hover{cursor:pointer;} #orderList .orderArticles{float:left; display:none;} #orderList .orderRow.showOrder .orderArticles{display:block;} #orderList .articleRow{margin:5px 0; border-bottom:2px solid #f1f5f8; overflow:hidden;} #orderList .articleRow.last{border:none;} #orderList .articleRow img, #orderList .articleRow .name, #orderList .articleRow .amount, #orderList .articleRow .value, #orderList .articleRow .toBasket{float:left;} #orderList .articleRow img{margin:0 0 5px 55px; padding:0 30px 0 0; width:70px;} #orderList .articleRow .name{width:210px;} #orderList .articleRow > a:hover .name b{text-decoration:underline;} #orderList .articleRow .amount{width:90px;} #orderList .articleRow .value{width:110px;} #orderList .articleRow .toBasket{width:180px; margin:25px 0 0;} /* Footer */ #footer{width:100%; margin:20px 0; padding:0; background:#c7dded;} #footer .panel{overflow:hidden; width:445px; margin:0 auto; padding:15px 0; border:none; background:transparent;} #footer .panel dl{width:auto; margin:0 28px; border:none;} #footer .panel dl dt{margin:0 0 8px; padding:0; color:#003565; font-size:15px; font-weight:normal;} #footer .panel dl a{padding:3px 0; text-shadow:none;} #footer .panel dl a:hover{background:none; color:#0082c8;} #footer .shortFooter{text-align:center; font-size:12px;} #footer .shortFooter .delimiter{margin:0 7px;} #powered{margin:0 0 13px; text-align:center;} /* New Basket Flyouts */ .searchWrapper:hover #basketFlyout.new{display:block;} #header #basketFlyout.new{right:0; top:43px; width:296px; padding:25px 20px 14px 14px; border:none; box-shadow:none;} #header #basketFlyout.new.hide{display:none !important;} #header #basketFlyout.new .wkempty{margin:0; padding:0 0 8px; font-weight:bold; text-align:center;} #header #basketFlyout.new ul{overflow:auto; max-height:300px; width:auto; padding:10px 20px 0; background:#fff;} #header #basketFlyout.new .total{margin:0 0 22px; padding:7px 10px; border-top:1px solid #a2a9ab; font-weight:bold;} #header #basketFlyout.new .buttons{overflow:hidden; margin:17px 0 5px;} #header #basketFlyout.new .buttons .submitButton{float:left;} #modalbasketFlyout.new{display:none; background:#fff; border-radius:5px;} #modalbasketFlyout.new > div{overflow:hidden;} #modalbasketFlyout.new h3{display:block; float:left; width:530px; margin:10px 15px 0 0; padding:0 0 10px; border-bottom:2px solid #c1c1c1; font-size:17px; font-weight:normal;} #modalbasketFlyout.new i.closePop{float:none; margin:5px 0 0; font-size:24px;} #modalbasketFlyout.new .product{margin:30px 0 15px;} #modalbasketFlyout.new .left{float:left; margin:0 30px 0 0;} #modalbasketFlyout.new img{width:130px; border:2px solid #c1c1c1; border-radius:4px;} #modalbasketFlyout.new .right{overflow:hidden; float:left; font-size:13px;} #modalbasketFlyout.new h4{overflow:hidden; width:350px; margin:0 20px 15px; white-space:nowrap; text-overflow:ellipsis;} #modalbasketFlyout.new p{overflow:hidden; width:230px; margin:0 0 15px; padding-left:20px;} #modalbasketFlyout.new p > span{float:left; width:140px;} #modalbasketFlyout.new p.total{margin:20px 0 0 0; padding-top:7px; padding-bottom:7px; border-top:1px solid #c1c1c1; border-bottom:1px solid #c1c1c1; font-weight:bold;} #modalbasketFlyout.new .buttons{clear:both; padding:15px 0 0;} #modalbasketFlyout.new .buttons .submitButton{float:right;} #modalbasketFlyout.new .buttons .back{float:left;} /*EAA and PÜL Price reducement color settings*/ .reducedPrice{color:#da0006;} .reducedPrice.grid{font-size:18px;} .oldPrice{padding:0 8px 0 0; color:#c2c2c2;} .oldPrice.grid{padding:0 5px 0 0; font-size:12px;} /*Price reducement*/ /*EAA*/ .redCornerWrapper{position:absolute;width:265px;height:101px;top:16px;overflow:hidden;} .redCorner{position:absolute;width:141px;height:65px;top:-34px;left:156px;background-color:#da0006;transform:rotate(35deg);-ms-transform: rotate(35deg); /* IE 9 */-webkit-transform: rotate(35deg); /* Safari */} .redCorner span{position:absolute;line-height:40px;transform:rotate(-35deg);color:#ffffff;-ms-transform: rotate(-35deg); /* IE 9 */-webkit-transform: rotate(-35deg); /* Safari */} .redCorner span.upTo{top:27px;left:48px;font-size:12px;} .redCorner span.percent{top:26px;left:75px;font-size:15px;font-weight:bold;} .redCorner span.percent.standAlone{top:20px; left:85px; font-size:26px;} /*PÜL*/ .redCornerWrapper.grid{width:150px; height:150px; top:0; left:17px;} .redCorner.grid{height:57px;width:144px;top:-25px;left:48px;} .redCorner.grid span.upTo{top:18px;} .redCorner.grid span.percent{left:65px;top:19px;} .redCorner.grid span.percent.standAlone{top:16px;left:77px;} /* Evopayment - Own Site */ #evosmartpaycwPaymentForm{} #evosmartpaycwPaymentForm .form{width:auto;} #evosmartpaycwPaymentForm .form > .note{padding:5px 0 0; font-style:normal;} #evosmartpaycwPaymentForm .control-group{width:auto; padding:10px 0;} #evosmartpaycwPaymentForm .control-group > .control-label{width:140px; font-size:12px; font-weight:bold;} #evosmartpaycwPaymentForm .control-group > .control-element{overflow:hidden; padding:0;} #evosmartpaycwPaymentForm .control-group > .note{width:750px; padding:4px 0 0 150px; font-style:normal;} #evosmartpaycwPaymentForm .control-group > .control-label > .required{color:#f00; font-weight:bold;} #evosmartpaycwPaymentForm .control-group > .control-label > .required::before{content:": "; color:#000; font:bold 12px Arial;} #evosmartpaycwPaymentForm .control-group > .control-element .card-brand-image-selection{float:left; margin:0 0 0 5px;} #evosmartpaycwPaymentForm .control-group > .control-element .hidden-control{margin-right:6px;} /* B2B Module */ .clear + .b2bInfo{margin:-40px 0 0;} .b2bInfo{margin:0;} .b2bInfo .form{width:100%; margin:0; padding:0;} .b2bInfo .form li.formSubmit{width:100%; margin:5px 0; padding:0; text-align:right;} .smxb2b2UserList{width:auto; margin:0 0 20px;} .smxb2b2UserList li{width:auto;} .smxb2b2UserList li label{float:none; width:350px; padding:0;} .smxb2b2UserList li button{width:80px; margin:0 0 0 -2px; padding:0; text-align:left; color:#00f; text-decoration:underline; background:#fff; cursor:pointer;} .smxb2b2UserList li .placeholder{float:left; width:82px; height:18px;} .b2bUserBasketForm{overflow:hidden; clear:both; position:relative; margin:25px 0 30px; padding:0 0 20px; border-bottom:2px solid #eceff0;} .b2bUserBasketForm.noBorder{padding:0; border:none;} .b2bUserBasketForm .submitButton{margin:0 0 15px;} .b2bBasketInfo{float:left; width:450px; margin:0 0 10px;} .b2bBasketInfo > a{text-decoration:underline;} .largerForm{} .largerForm .form{width:auto;} .largerForm .form li{width:auto;} .largerForm .form label{width:250px; padding:0;} .largerForm .form input[type=checkbox]{margin-left:0;} .largerForm .form .formSubmit{width:452px; margin:10px 0; padding:0; text-align:right;} .largerForm .form .formSubmit button{} #b2borderoverview{margin:15px 0;} #b2borderoverview th{padding:5px 0; font-weight:bold; text-align:left;} #b2borderoverview td{padding:5px 30px 5px 0;} .smxb2bUserAdmin{} .smxb2bUserAdmin .invoiceAdress{margin-left:255px;} .smxb2bUserAdmin #accounting-spinner{margin:20px 50px 20px 255px;} /* FF - Suggest */ /* reset positioning of .searchBox and apply it to searchWrapper instead */ .searchWrapper.outer{position:absolute; top:58px; right:185px;} /*.searchWrapper div.searchBox{position:static; right:auto; top:auto;}*/ #suggestLayer{position:absolute; top:32px; right:0; z-index:999; width:875px;/* max width of suggest popup */} ul.suggestLayerList, ul.suggestLayerBlock, div.suggestLayerBlock{ position:absolute; right:0; background-color:white; border:1px solid #efefef; min-width:241px; border-collapse:separate; box-shadow:0 4px 3px #c2c4c6; color:#58585a; cursor:pointer; font-size:11px; list-style:outside none none; padding:5px 10px 3px 10px; margin:0; } .suggestLayerBlock ul.noborder{padding-left:0; border-image:none; border-style:none; border-width:medium medium medium 0; border-color: transparent;} .suggestLayerBlockImage, .suggestLayerBlockText{float:left; max-width:400px; margin:0; padding:0 10px 0 0;} .suggestLayerBlockImage{width:auto;} .suggestLayerBlockText + .suggestLayerBlockImage{padding-left:10px; border-left:1px solid #d7d7d7;} ul.suggestLayerList li, ul.suggestLayerBlock li, ul.suggestLayerBlockText li, ul.suggestLayerBlockImage li{display:block; list-style:outside none none;} ul.suggestLayerBlockImage li span.suggestTextQuery{display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;} li.suggestHeader{margin:0 0 5px; padding:5px 10px 3px 5px; border-bottom:1px solid #d7d7d7; color:#b0b1b3; font-size:14px; font-weight:normal;} li.suggestRow{padding:5px 0; font-size:13px;} li.suggestRowWithImage{height:40px; line-height:40px;} span.suggestTextQuery{} span.suggestTextQueryTyped{font-weight:bold;} span.suggestTextType{float:right; padding-left:20px; font-size:10px;} span.suggestTextAmount{float:right; width:auto; padding-left:10px; font-size:11px; text-align:right;} span.suggestParentCategory{padding-left:10px; color:#b0b1b3; font-size:10px;} li.suggestHighlight{text-decoration:underline;} li.suggestHighlight .suggestParentCategory{color:#fff;} span.suggestImage{float:left; height:40px; padding-right:20px;} span.suggestImage img{max-height:40px; max-width:120px;} /* related products */ #relProducts{float:none; margin:30px 0 0; width:100%;} .eaabox{width:100%; margin:0;} .eaabox h3{margin:0 0 15px; padding:0 0 5px; border-bottom:1px solid #c1c1c1; font-size:13px; color:#515353; background:transparent; box-shadow:none;} .eaabox ul{border:none;} .eaabox .productData{margin:15px 20px;} /* ------------------------------------ * * #COOKIE * ------------------------------------ */ .cookie-note { position: fixed; bottom: 0; left: 0; width: 100%; border-top: 1px solid #cdcdcd; background: #999999; z-index: 2; } .cookie-note .notify { position: relative; width: 960px; margin: 0 auto; padding: 30px 20px 30px 0; line-height: 1.4em; } .cookie-note .notify a { text-decoration: underline; } .cookie-note .dismiss { position: absolute; top: 30px; right: 0; } .cookie-note .dismiss i { font-size: 31px; cursor: pointer; } /* * charger pictogram */ .charger-infobox { background-color: #fff; display: grid; grid-template-columns: 1fr 1fr; justify-self: end; width: fit-content; padding: 5px 5px 0 5px; } .charger-info { aspect-ratio: 50/68; background: url(../../img/charger.svg) no-repeat 50% #fff; color: var(--body-color); cursor: help; display: flex; flex-direction: column; font-size: 8px; line-height: 1; min-width: 50px; position: relative; text-align: center; transition: all .2s ease-in-out; width: max-content; z-index: 1; } .charger-info:hover { border-radius:3px; box-shadow:0 .5px 2px rgba(0,0,0,.5); transform:scale(2); } .charger-info .spacer { flex-basis:42%; } .charger-info .range { flex-basis:16%; font-weight:700; padding:0 1.2em; } .charger-info .watt { flex-basis:20%; font-weight:700; } .charger-info .protocol { font-size:.7em; } .tobasket-wrapper.has-charger-small { position: relative; padding-top: 85px; } .tobasket-wrapper.has-charger-medium { position: relative; padding-top: 95px; } .tobasket-wrapper.has-charger-large { position: relative; padding-top: 105px; } .tobasket-wrapper.has-charger-small .charger-infobox, .tobasket-wrapper.has-charger-medium .charger-infobox, .tobasket-wrapper.has-charger-large .charger-infobox { position: absolute; top: 0; right: 0; }