/*-----| PARAMS |---------------------------------------------------------------------------------------------------------------- WHITE rgba( 255,255,255,1 ) BLACK rgba( 0,0,0,1 ) Grey Superdark rgba( 35,31,32,1 ) 231f20 Sub-Navigation Grey Mediumdark rgba( 64,64,65,1 ) 404041 Navigation Grey dark rgba( 88,88,90,1 ) 58585a Sub-Sub-Navigation Brown dark rgba( 153,129,107,1 ) 99816b MüllerBrüller Brown rgba( 187,171,155,1 ) bbab9b Brown light rgba( 232,225,217,1 ) e8e1d9 Orange rgba( 244,121,47,1 ) f4792f Red rgba( 242,47,52,1 ) f22f34 Z-Stack Header: 200 Header Search: 10000 Navigation: 100 / 100000 when mobile Superside: 300 -------| END PARAMS |--------------------------------------------------------------------------------------------------------------*/ /*-----| Skelleton |--------------------------------------------------------------------------------------------------------------*/ html { height: 100%; } body { position: relative; min-height: 100%; font: 14px 'open sans', Arial, Helvetica, sans-serif; background: rgba( 64,64,65,1 ); } #skeletable { min-height: 100vH; width: 90%; background: #ffffff; max-width: 1400px; margin: 0 auto; box-shadow: 0 0 25px #000000, 0 0 100px #ffffff, 0 0 200px #ffffff, 0 0 300px #ffffff, 0 0 400px #ffffff, 0 0 500px #ffffff, 0 0 600px #ffffff, 0 0 700px #ffffff; } .mobile { display: none; } .cms #skeletable { } #skeletable tr.main { height: 100%; } a { color: #bbab9b; text-decoration: none; } a:hover { color: rgba( 0,0,0,1 ); } /*-----| Header |--------------------------------------------------------------------------------------------------------------*/ header { position: relative; z-index: 200; } #header_whitestripe { height: 7.2vW; max-height: 72px; } #header_top { position: absolute; right: 0; top: 0; z-index: 110; height: 10.8vW; max-height: 108px; background: #ffffff; border-radius: 0 0 0 72px; overflow: hidden; } #header_top #logo { display: inline-block; height: 10.8vW; max-height: 108px; } #header_top #logo img { height: 10.8vW; max-height: 108px; } #header_top #toggler { display: none; } #header_image { max-width: 1400px; width: 100%; height: 42.1vW; max-height: 421px; background-color: white; background-repeat: no-repeat; background-position: center; background-size: cover; } .shop #header_image { height: 21vW; max-height: 210px; background-size: cover; } #header_search { position: absolute; left: 0; bottom: 0; z-index: 110; height: 5.2vW; max-height: 52px; width: 65vW; max-width: 650px; background: #ffffff; border-top-right-radius: 104px 52px; overflow: hidden; } #header_search #id_searchBox { height: 52px; line-height: 52px; width: 100%; padding: 0 78px; background: url(/www_mueller/pages/img/search.png) no-repeat 13px center; background-size: auto 38px; border: none; font-size: 18px; color: #404041; } #header_search #id_searchBox.busy { height: 52px; line-height: 52px; width: 100%; padding: 0 78px; background: url(/pages2015/img/loader_onwhite_36.gif) no-repeat 14px center; background-size: auto 36px; } /*-----| Header:Search |--------------------------------------------------------------------------------------------------------------*/ .ui-autocomplete.searchResult { left: 0px !important; top: 0px !important; z-index: 10000 !important; width: 65vW !important; max-width: 650px !important; max-height: 50vH; overflow-y: auto; padding: 0; background: none; border: none !important; } .shop .ui-autocomplete.searchResult { max-height: 70vH; } .ui-autocomplete.searchResult li { margin: 0 !important; padding: 0 !important; list-style: none; border: 0 !important; background: rgba( 187,171,155,1 ); } .ui-autocomplete.searchResult li a { display: block; margin: 0; padding: 5px; background: rgba(255,255,255,0.6); color: #000000; border: 0 !important; } .ui-autocomplete.searchResult li a .sThumb { line-height: 1px; } .ui-autocomplete.searchResult li a .sThumb div { margin: 0 10px 0 0; padding: 4px; background: rgba(255,255,255,1); } .ui-autocomplete.searchResult li a .sThumb div div { width: 44px; height: 44px; margin: 0; padding: 0; background-repeat: no-repeat; background-position: center; background-size: contain; } .ui-autocomplete.searchResult li a .sText { padding: 0; vertical-align: middle; line-height: 18px; font-weight: bold; font-size: 12px;} .ui-autocomplete.searchResult li.ui-state-focus a, .ui-autocomplete.searchResult li:hover a { background: rgba( 244,121,47,1 ); color: #ffffff; } .ui-front { z-index: 10000; } .ui-front.ui-dialog { z-index: 10001; } /*-----| Navigation |--------------------------------------------------------------------------------------------------------------*/ nav#shop_navi { position: relative; z-index: 100; background: rgba( 64,64,65,1 ); } nav ul.navi_main:after { display: block; content: ""; clear: both; } nav ul.navi_main li { float: left; position: relative; list-style: none; } nav ul.navi_main li a { display: block; text-decoration: none; padding: 0 50px 0 10px; line-height: 46px; color: #ffffff; font-size: 16px; } nav ul.navi_main li.current a, nav ul.navi_main li a:hover { color: #bbab9b; } nav ul.navi_main li ul { display: none; position: absolute; left: 0; top: 46px; z-index: 250; width: 30vW; max-width: 300px; padding: 10px 0 20px 0; background: #404041; box-shadow: 0 5px 10px rgba( 0,0,0,0.2 ); } nav ul.navi_main li:hover ul { display: block; } nav ul.navi_main li ul li { float: none; } nav ul.navi_main li ul li a { line-height: 32px; font-size: 14px; } section#navi_sub { position: relative; } nav table.navi_sub { width: 100%; background: #231f20; } nav table.navi_sub td { vertical-align: middle; line-height: 1px; } nav table.navi_sub td .sesame { padding: 3px 0; } nav table.navi_sub td a { display: block; text-decoration: none; max-height: 30px; padding: 0 8px; overflow: hidden; border-left: 1px solid #bbab9b; border-right: 1px solid #bbab9b; line-height: 15px; color: #ffffff; font-size: 10px; } nav table.navi_sub td.current > div > a, nav table.navi_sub td a:hover, nav table.navi_sub td .sesame:hover > a { color: #bbab9b; } nav table.navi_sub td.first a { border-left: none; } nav table.navi_sub td.last a { border-right: none; } div.navi_sub_sub { display: none; width: 100%; position: absolute; left: 0; top: 100%; background: #58585a; } .cms div.navi_sub_sub { max-width: 100%; } .sesame:hover > div.navi_sub_sub { display: block; } .navi_sub_sub table.navi_sub { background: none; } .navi_sub_sub table.navi_sub td { padding: 10px 10px 16px 10px; vertical-align: top; } .navi_sub_sub table.navi_sub td a { display: block; border: none; max-height: none; } .navi_sub_sub table.navi_sub td a.navi_sub_sub { height: 100%; line-height: 22px; font-size: 15px; } .navi_sub_sub table.navi_sub td a.navi_sub_sub_sub { font-size: 11px; } .navi_sub_sub table.navi_sub td:nth-child(2n+1 ){ grid-rows:none} /*-----| Footer |--------------------------------------------------------------------------------------------------------------*/ footer { background: rgba( 187,171,155,1 ); color: rgba( 0,0,0,1 ); } footer ul { padding: 0 0 18px 0; } footer ul ul { padding: 0; } footer ul li { list-style: none; } footer ul li a { text-decoration: none; font-weight: bold; color: #000000; } footer ul li.current a, footer ul li a:hover { color: #ffffff; } footer ul li ul li a { font-weight: normal; } .footer_address { width: 61.8vW; max-width: 618px; height: 5vW; max-height: 50px; padding: 8px 0 0 24px; background: #ffffff; border-top-right-radius: 104px 52px; } .footer_address a { color: #000000; } .footer_address a:hover { color: rgba( 187,171,155,1 ); } /*-----| Crump |--------------------------------------------------------------------------------------------------------------*/ #crump { padding: 20px 10px 0 20px; } #crump ul:after { display: block; content: ""; clear: both; } #crump ul li { position: relative; list-style: none; float: left; height: 24px; line-height: 24px; padding-right: 24px; } #crump ul li:after { position: absolute; right: 0; top: 0; width: 24px; height: 24px; text-align: center; content: ">"; color: #bbab9b; font-weight: bold; } #crump ul li.last { padding-right: 0; color: #bbab9b; font-weight: bold; } #crump ul li.last:after { width: 0; content: ""; } #crump ul li a { color: #bbab9b; font-weight: bold; text-decoration: none; } #crump ul li a:hover { color: #000000; } #crump ul li.cPrevNext { float: right; width: 24px; height: 24px; margin-left: 10px; cursor: pointer; border-radius: 12px; border: 1px solid #969696; background-color: transparent; background-position: center; background-repeat: no-repeat; background-size: auto 16px; } #crump ul li.cPrevNext:after { display: none; } #crump ul li.cPrevNext#cNext { background-image: url(/pages2015/img/crump/next_969696.png); } #crump ul li.cPrevNext#cPrev { background-image: url(/pages2015/img/crump/prev_969696.png); } #crump ul li.cPrevNext:hover { border-color: #e40516; } #crump ul li.cPrevNext#cNext:hover { background-image: url(/pages2015/img/crump/next_e40516.png); } #crump ul li.cPrevNext#cPrev:hover { background-image: url(/pages2015/img/crump/prev_e40516.png); } .pZoom_button.pZoom_button_out:hover { background-image: url(/pages2015/img/minus32_e40516.png); } .pZoom_button.pZoom_button_in:hover { background-image: url(/pages2015/img/plus32_e40516.png); } #crump ul li.cPrevNext#cFav { position: relative; } #crump ul li.cPrevNext#cFav #cFav_container { display: none; position: absolute; top: 0; right: 0; width: 300px; padding: 26px 0 0 0; } #crump ul li.cPrevNext#cFav:hover #cFav_container { display: block; } .cFav_box { padding: 20px 20px 0 20px; background: linear-gradient(to bottom, #fafafa 1%,#f0f0f0 100%) !important; box-shadow: 0 5px 10px #cccccc; } .cFav_box h2, .cFav_box .pdzText_text { display: none; } /*-----| Content |--------------------------------------------------------------------------------------------------------------*/ main { display: block; padding: 40px 0; } .cms main { max-width: 1400px; } .shop main { padding: 0px 10px 0px 10px; } .shop #content_sortiment, .shop #content_product_det { padding-top: 20px; } main p { padding: 0 0 19px 0; } .column_container:after { display: block; content: ""; clear: both; } .column { display: block; } .columnL { float: left; } .columnLink { cursor: pointer; } .column33 { width: 32%; margin-right: 2%; padding: 20px; } .column50 { width: 48%; margin-right: 2%; padding: 20px; } .column50:nth-child(2N-1) { clear: both; } .column * { width: 100%; } .columnHomeMobile { display: none; } .columnHome_background { position: relative; padding: 50%; background-color: #e8e1d9; background-repeat: no-repeat; background-position: center; background-size: cover; } .columnHome_text { position: absolute; left: 0; top: 0; z-index: 1; width: 100%; height: 100%; padding: 42px 10px 10px 10px; } .columnHome_title { position: absolute; left: 0; top: 0; z-index: 1; width: 70%; height: 32px; padding: 2px 10px; background-color: #9a816b; border-bottom-right-radius: 32px; line-height: 28px; font-size: 18px; font-weight: bold; } /*.columnOranje .columnHome_title { background-color: #9a816b; color: #ffffff; }*/ .columnBrueller .columnHome_title { background: url(/www_mueller/pages/img/brueller.jpg) no-repeat 10px center #99816b; background-size: auto 80%; } article h1 { font-size: 30px; font-weight: bold; color: #bbab9b; padding: 0 20px 36px 20px; } article .mapframe { width: 100%; height: 28vW; max-height: 280px; border: none; } /*-----| SIDE Navigation |--------------------------------------------------------------------------------------------------------------*/ .shop nav#side_navi { position: fixed; z-index: 300; left: 50%; margin-left: -480px; top: 0; padding-top: 0; } .cms nav#side_navi { position: absolute; z-index: 300; right: 0; top: 200px; width: 40px; } nav#side_navi ul { margin-bottom: 20px; background: rgba( 153,129,107,1 ); border-radius: 10px 0 0 10px; } .shop nav#side_navi ul { float: left; margin: 0 20px 0 0; border-radius: 0 0 10px 10px; } nav#side_navi ul li { position: relative; list-style: none; } .shop nav#side_navi ul li { float: left; } nav#side_navi ul li a { display: block; height: 44px; width: 44px; background-repeat: no-repeat; background-position: center; background-size: auto 26px; } nav#side_navi ul li:hover a { background-color: rgba( 244,121,47,1 ); } .cms nav#side_navi ul li:first-child a { border-top-left-radius: 10px; } .cms nav#side_navi ul li:last-child a { border-bottom-left-radius: 10px; } .shop nav#side_navi ul li:first-child a { border-bottom-left-radius: 10px; } .shop nav#side_navi ul li:last-child a { border-bottom-right-radius: 10px; } nav#side_navi ul ul { display: none; position: absolute; right: 40px; top: 0; padding: 5px; background: rgba( 244,121,47,1 ); border-radius: 10px 0 10px 10px; } .shop nav#side_navi ul ul { display: none; position: absolute; left: 0; top: 44px; padding: 5px; background: rgba( 244,121,47,1 ); border-radius: 0 10px 10px 10px; width: 150px; } nav#side_navi ul li:hover ul { display: block; } .shop nav#side_navi ul ul li { float: none; } nav#side_navi ul ul li a { white-space: nowrap; color: #ffffff; height: auto; padding: 5px; cursor: pointer; } .shop nav#side_navi ul ul li a { width: 100%; display: block; border-radius: 5px !important; } nav#side_navi ul ul li a:hover { background: rgba( 0,0,0,1 ); } nav#side_navi ul ul li:first-child a { border-radius: 6px 6px 0 0; } nav#side_navi ul ul li:last-child a { border-radius: 0 0 6px 6px; } /*nav#side_navi #snBasket { position: relative; background-image: url('/pages2015/img/sn_basket.png'); }*/ nav#side_navi #snBasket { position: relative; background-image: url('/pages2015/img/svgicons/basket_white.svg'); } nav#side_navi #snBasket span { display: none; } nav#side_navi #snBasket.full { } nav#side_navi #snBasket.full span { display: block; position: absolute; left: -8px; bottom: -8px; width: 24px; height: 24px; background: rgba( 242,47,52,1 ); border-radius: 12px; color: rgba( 255,255,255,1 ); text-align: center; line-height: 22px; } /*nav#side_navi #snLogin { background-image: url('/pages2015/img/login.png'); }*/ nav#side_navi #snLogin { background-image: url('/pages2015/img/svgicons/login_white.svg'); } /*nav#side_navi #snMyShop { background-image: url('/pages2015/img/sn_user.png'); }*/ nav#side_navi #snMyShop { background-image: url('/pages2015/img/svgicons/user_white.svg'); } nav#side_navi #snFav { background-image: url('/pages2015/img/sn_fav.png'); } nav#side_navi #snLogout { background-image: url('/pages2015/img/sn_logout.png'); } nav#side_navi #snExport { background-image: url('/pages2015/img/sn_export.png'); } nav#side_navi #snPrint { background-image: url('/pages2015/img/sn_print.png'); } nav#side_navi #snRecomment { background-image: url('/pages2015/img/sn_mail.png'); } main .sEleven_box, main .sTen_box { background: none; box-shadow: none !important; } main .sEleven_box:hover .sEleven_header, main .sTen_box:hover .sTen_header { color: rgba(255,255,255,1); font-weight:normal; } main .sEleven_box .sEleven_header div, main .sTen_box .sTen_header div { height: 48px; } main .sTen_box:hover .sTen_image_container, main .sTen_box:hover .sTen_image_container_large, main .sEleven_box:hover .sEleven_image_container, main .sEleven_box:hover .sEleven_image_container_large, main .sTen_box:hover .sTen_header, main .sEleven_box:hover .sEleven_header { background: rgba(64,64,65,1); } .tpl_aktion { width: 100%; display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; -webkit-flex-wrap: wrap; flex-wrap: wrap; align-self: flex-start; } .tpl_aktion_bild { width: 48%; line-height: 1px; } .tpl_aktion_bild img { width: 100% !important; } .tpl_aktion_text { width: 48%; } .msnNavigation li a.msnUser.current, .msnNavigation li a.msnUser:hover { background-image: url(/pages2015/img/myshop/address_50_ff5722.png) } .msnNavigation li a.msnChangePassword.current, .msnNavigation li a.msnChangePassword:hover { background-image: url(/pages2015/img/myshop/password_50_ff5722.png) } .msnNavigation li a.msnFavorite.current, .msnNavigation li a.msnFavorite:hover { background-image: url(/pages2015/img/myshop/favorite_50_ff5722.png) } .msnNavigation li a.msnSupplier.current, .msnNavigation li a.msnSupplier:hover { background-image: url(/pages2015/img/myshop/supplier_50_ff5722.png) } .msnNavigation li a.msnDeliveryAddress.current, .msnNavigation li a.msnDeliveryAddress:hover { background-image: url(/pages2015/img/myshop/deliveryaddress_50_ff5722.png) } .msnNavigation li a.msnSavedBaskets.current, .msnNavigation li a.msnSavedBaskets:hover { background-image: url(/pages2015/img/myshop/savedbasket_50_ff5722.png) } .msnNavigation li a.msnOpenOrders.current, .msnNavigation li a.msnOpenOrders:hover { background-image: url(/pages2015/img/myshop/openorders_50_ff5722.png) } .msnNavigation li a.msnExecutedOrders.current, .msnNavigation li a.msnExecutedOrders:hover { background-image: url(/pages2015/img/myshop/executedorders_50_ff5722.png) } .msnNavigation li a.msnPriceRequests.current, .msnNavigation li a.msnPriceRequests:hover { background-image: url(/pages2015/img/myshop/pricerequest_50_ff5722.png) } .msnNavigation li a.msnOrderedProducts.current, .msnNavigation li a.msnOrderedProducts:hover { background-image: url(/pages2015/img/myshop/orderedproducts_50_ff5722.png) } .msnNavigation li a.msnBarcodeUpload.current, .msnNavigation li a.msnBarcodeUpload:hover { background-image: url(/pages2015/img/myshop/barcode_50_ff5722.png) } .msnNavigation li a.msnAddress.current, .msnNavigation li a.msnAddress:hover { background-image: url(/pages2015/img/myshop/address_50_ff5722.png) } .msnNavigation li a.msnUser.current, .msnNavigation li a.msnUser:hover { background-image: url(/pages2015/img/myshop/user_50_ff5722.png) } .msnNavigation li a.msnGroup.current, .msnNavigation li a.msnGroup:hover { background-image: url(/pages2015/img/myshop/group_50_ff5722.png) } .msnNavigation li a.msnBlock.current, .msnNavigation li a.msnBlock:hover { background-image: url(/pages2015/img/myshop/block_64_ff5722.png) } .bhtContainer { margin: 0 -10px !important; padding: 5px 10px; background: rgba( 187,171,155,1 ); color: #ffffff; } #newsSlider .pBox_text { position: relative; padding-bottom: 32px !important; height: 130px; } #newsSlider .top_stage_buy { position: absolute; left: 0; bottom: 0; width: 50%; } #newsSlider .top_stage_buy a { color: #ffffff !important; cursor: pointer; } #newsSlider .top_stage_detail { position: absolute; right: 0; bottom: 0; width: 50%; } tr.current { background-color:#BBAB9B !important} #datatab_art tbody tr:hover { background-color:#BBAB9B !important} table.dataTable .marked { background-color:#BBAB9B !important} .tbl_ansprechbar > tbody > tr > td:nth-of-type(1) { width: auto; padding: 4px 10px 0 0; } .tbl_ansprechbar > tbody > tr > td:nth-of-type(2) { white-space: normal; } .tbl_ansprechbar > tbody > tr > td:nth-of-type(1) img { width: 68px; }