/*-----| PARAMS |---------------------------------------------------------------------------------------------------------------- WHITE rgba( 255,255,255,1 ) BLACK rgba( 0,0,0,1 ) MAIN COLOR: RED rgba( 221,40,34,1 ) #dd2821 BLUE rgba( 0,77,135,1 ) Z-Stack Button 100 Header 90 Button Shadow 80 Greybar / Shop Navi 70 Footer Shadow 1 Footer Container 2 Footer Button 3&4 -------| END PARAMS |--------------------------------------------------------------------------------------------------------------*/ /*-----| Skelleton |--------------------------------------------------------------------------------------------------------------*/ html { height: 100%; } body { font: 13px 'open sans', Arial, Helvetica, sans-serif; background: #f7f7f3; } #skeleton { width: 100%; min-height: 100vH; } .shop .shoppadding { padding-right: 40px; } .ui-datepicker {z-index: 2 !important} /*-----| BUTTON |--------------------------------------------------------------------------------------------------------------*/ #button_container { position: relative; z-index: 100; width: 50%; height: 0; } #button_box { position: absolute; right: -157px; top: -54px; width: 314px; height: 314px; } #button { width: 314px; height: 314px; padding-top: 54px; border-radius: 157px; overflow: hidden; } #button_logo { display: block; height: 185px; background: url("/www_peterhans/pages/img/logo.jpg") no-repeat 35px center #ffffff; background-size: auto 80%; } /*#button_shop { display: block; height: 75px; background: url("/www_peterhans/pages/img/button_shop.jpg") no-repeat center; }*/ #button_shop { display: block; height: 75px; background: url("/www_peterhans/pages/img/b-red.jpg") no-repeat center; } #button_shadow { position: relative; z-index: 80; width: 50%; height: 0; } #button_shadow_box { position: absolute; right: -157px; top: -54px; width: 314px; height: 314px; border-radius: 157px; box-shadow: 0 0 10px rgba( 0,0,0,0.2 ); } .shop #button_box { height: 239px; overflow: hidden; } .shop #button_shadow { display: none; } /*-----| HEADER |--------------------------------------------------------------------------------------------------------------*/ header { position: relative; height: 186px; z-index: 90; background: url("/www_peterhans/pages/img/header4_bw.jpg") no-repeat center; background-size: cover; border-bottom: 1px solid #acaca8; box-shadow: 0 0 10px rgba( 0,0,0,0.2 ); } .button_spacer div { width: 274px; } .navi_background { height: 36px; margin-top: 149px; background: rgba( 255,255,255,0.95 ); } .header_right { height: 149px; padding: 0 40px 0 60px; } nav.service { height: 82px; padding-top: 59px; } nav.service li { float: right; list-style: none; border-left: 1px solid #ffffff; } nav.service li:last-child { border-left: none; } nav.service li a { display: block; padding: 0 7px; font-size: 12px; font-family: Helvetica, sans-serif; line-height: 12px; text-decoration: none; color: #ffffff; } /*-----| HEADER: Search |--------------------------------------------------------------------------------------------------------------*/ #search_container { position: relative; height: 36px; padding: 0 40px 0 40px; border-radius: 18px; border: 1px solid #acaca8; background: url('../img/search_24_black_6right.png') no-repeat 8px center rgba( 234,234,234,1 ); background-size: auto 24px; } #search_container.busy { background: url('/pages2015/img/loader.gif') no-repeat 9px center rgba( 255,255,255,1 ); background-size: auto 16px; } #search_container > div { height: 100%; } #search_container form { height: 100%; } #search_container input { border: none; outline: none; line-height: 100%; height: 100%; color: rgba( 34,34,34,1 ); font-size: 15px; background: none; } #searchResultBox_container { position: absolute; left: 0; top: 35px; width: 100%; padding: 0 18px; } #searchResultBox { position: relative; } #nav_toggler { display: none; } .header_12 #menu { display: block; position: absolute; left: 0; top: 30%; width: 60%; height: 80%; } .header_12 #menu div { width: 100%; height: 10%; margin-top: 10%; border-radius: 5px; background: rgba( 64,64,64,1 ); } .ui-autocomplete.searchResult { z-index: 1000 !important; left: 0px !important; top: 0 !important; width: 100% !important; max-height: 80vH; overflow-y: auto; padding: 0 0 20px 0; border-radius: 0 0 12px 12px; background: #f1f0eb; border: solid #d5d5d1; border-width: 0 1px 1px 1px; box-shadow: 0 5px 10px rgba( 0,0,0,0.2 ); } .ui-autocomplete.searchResult li { margin: 0 !important; padding: 0 !important; list-style: none; border: 0 !important; width: 100% !important; } .ui-autocomplete.searchResult li:nth-child(2N-1) { background: #dfded9; } .ui-autocomplete.searchResult li a { display: block; margin: 0; padding: 5px; 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: #dd2821; color: #ffffff; } /*-----| HEADER: CMS-Navigation |--------------------------------------------------------------------------------------------------------------*/ #mToggler { display: none; } nav.cms li { position: relative; list-style: none; } nav.cms.cms_left > div > ul > li { float: right; padding-right: 60px; } nav.cms.cms_right { margin: 0; } nav.cms.cms_right > div > ul > li { float: left; padding-left: 60px; } nav.cms li a { display: block; font-size: 14px; font-family: 'Raleway', sans-serif; font-weight: bold; line-height: 36px; text-decoration: none; color: #000000; } nav.cms div ul div { display: none; position: absolute; left: 44px; top: 25px; padding: 11px 0 0 0; min-width: 150px; } nav.cms.cms_left div ul div { left: -16px; } nav.cms div ul li:hover div { display: block; } nav.cms div ul div ul { padding: 15px 0; border-radius: 0 0 10px 10px; border: solid #acaca8; border-width: 0 1px 1px 1px; box-shadow: 0 5px 10px rgba( 0,0,0,0.3 ); background: #f6f8fa; } nav.cms div ul div ul li { border-bottom: 1px solid #d5d5d1; } nav.cms div ul div ul li:nth-child(2N-1) { background: #e5f0f7; } nav.cms div ul div ul li:first-child { border-top: 1px solid #d5d5d1; } nav.cms div ul div ul li a { padding: 0 15px; font-family: 'Raleway', sans-serif; font-weight: 300; line-height: 23px; white-space: nowrap; } nav.cms div ul div ul li a:hover { color: #dd2821; } nav.cms div ul div ul div { display: none !important; } #hamburgerNavigation { display: none; } /*nav.cms div ul div { display: none; position: absolute; left: 60px; top: 25px; padding: 20px 0 0 0; } nav.cms div ul li:hover div { display: block; } nav.cms div ul div ul { padding: 15px 0; border-radius: 10px; border: 1px solid #d5d5d1; box-shadow: 0 3px 10px rgba( 0,0,0,0.2 ); background: #f1f0eb; } nav.cms div ul div ul li { border-bottom: 1px solid #d5d5d1; } nav.cms div ul div ul li:nth-child(2N-1) { background: #f7f7f3; } nav.cms div ul div ul li:first-child { border-top: 1px solid #d5d5d1; } nav.cms div ul div ul li a { padding: 0 15px; font-family: 'Raleway', sans-serif; font-weight: 300; line-height: 23px; } nav.cms div ul div ul li a:hover { color: #dd2821; }*/ /*-----| GREYBAR |--------------------------------------------------------------------------------------------------------------*/ .greybar { position: relative; z-index: 70; height: 24px; margin-bottom: 21px; background: #f1f0eb; border-bottom: 1px solid #d5d5d1; box-shadow: 0 0 10px rgba( 0,0,0,0.1 ); } /*-----| NAVIGATION: SHOP |--------------------------------------------------------------------------------------------------------------*/ nav.shop { position: relative; z-index: 70; height: 48px; margin-bottom: 21px; padding-top: 5px; background: #f1f0eb; border-bottom: 1px solid #d5d5d1; box-shadow: 0 0 10px rgba( 0,0,0,0.1 ); } /*nav.shop ul { max-width: 1200px; height: 64px; margin: 0 auto -21px auto; } nav.shop ul li { position: relative; float: left; list-style: none; margin: 0 24px; }*/ nav.shop ul.navi_main { display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; -webkit-flex-wrap: wrap; flex-wrap: wrap; width: 100%; max-width: 1200px; height: 64px; margin: 0 auto -21px auto; padding: 0 24px; } nav.shop ul li { display: inline-block; position: relative; list-style: none; } nav.shop ul li a { display: block; padding: 8px 13px 13px 13px; border-radius: 10px 10px 0 0; font-size: 14px; font-family: 'Raleway', sans-serif; font-weight: bold; line-height: 22px; text-decoration: none; color: #000000; text-transform: uppercase; } nav.shop > ul > li.current { border-bottom: 10px solid #f7f7f3; } nav.shop > ul > li.current > a { padding: 7px 12px 13px 12px; background: #f7f7f3; border-style: solid; border-width: 1px 1px 0 1px; border-color: #d5d5d1; } nav.shop > ul > li.navi_main_sub:hover > a{ padding: 7px 12px 13px 12px; background: #f7f7f3; border-style: solid; border-width: 1px 1px 0 1px; border-color: #d5d5d1; } nav.shop > ul > li.navi_main_nosub:hover > a{ padding: 7px 12px; background: #f7f7f3; border: 1px solid #d5d5d1; border-radius: 10px; } nav.shop > ul > li.navi_main_nosub.current:hover > a{ padding: 7px 12px 13px 12px; border-radius: 10px 10px 0 0; border-bottom: none; } nav.shop > ul > li > ul { display: none; position: absolute; left: 0; top: 42px; height: auto; padding: 10px 0; border-radius: 0 0 10px 10px; background: #f7f7f3; border: solid #d5d5d1; border-width: 0 1px 1px 1px; box-shadow: 0 5px 10px rgba( 0,0,0,0.1 ); } nav.shop > ul > li:last-child > ul { left: auto; right: 0; } nav.shop > ul > li:hover > ul { display: block; } nav.shop ul ul li { float: none; margin: 0; clear: both; display: block; } nav.shop ul ul li a { padding: 5px 12px; min-width: 300px; font-weight: normal; } nav.shop ul ul li a:hover { color: #dd2821; } nav.shop > ul > li > ul ul { height: auto; padding: 5px 0 30px 30px; } /*-----| SIDE Navigation |--------------------------------------------------------------------------------------------------------------*/ /*-----| Content |--------------------------------------------------------------------------------------------------------------*/ /*-----| Footer |--------------------------------------------------------------------------------------------------------------*/ /*-----| Content |--------------------------------------------------------------------------------------------------------------*/ /*-----| FOOTER |--------------------------------------------------------------------------------------------------------------*/ .footer_button_container { position: relative; z-index: 3; width: 50%; } .footer_button_inner { position: absolute; right: -132.7px; top: -10px; width: 265.4px; height: 85px; border-bottom-left-radius: 120px 70px; border-bottom-right-radius: 120px 70px; overflow: hidden; } .footer_button { position: absolute; z-index: 3; left: -24.3px; top: -229px; width: 314px; height: 314px; overflow: hidden; background: url("/www_peterhans/pages/img/footer_lines.jpg") no-repeat -20px 260px #f7f7f3; background-size: 200px auto; border-radius: 157px; } .footer_button_shadow { position: absolute; z-index: 4; left: -24.3px; top: -229px; width: 314px; height: 314px; box-shadow: inset 0 0 10px rgba( 0,0,0,0.15 ); border-radius: 157px; } .footer_button a { display: none; width: 314px; height: 75px; margin-top: 239px; box-shadow: 0 0 10px rgba( 0,0,0,0.1 ); border-bottom-left-radius: 120px 70px; border-bottom-right-radius: 120px 70px; background: url("/www_peterhans/pages/img/button_home.jpg") no-repeat center; background-size: cover; } .shop .footer_button a { display: block; } .shop .footer_button { z-index: 6; } .footer_shadow_container { position: relative; z-index: 1; } .footer_shadow_gap { width: 265.4px; } .footer_shadow { box-shadow: 0 0 10px rgba( 0,0,0,0.3 ); height: 10px; } .footer_container { position: relative; z-index: 2; margin-top: -10px; min-height: 100px; background: url("/www_peterhans/pages/img/footer_stripe.jpg") repeat-x left top #c9c9c4; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; } /*.footer_content_gap { width: 234px; }*/ .footer_content_container:after { max-width: 483px; } .footer_content_container:after { display: block; content: ""; clear: both; } .footer_content_box { float: left; padding: 0 0 40px 20px; } .footer_content_title { line-height: 24px; margin-bottom: 10px; font-weight: bold; } .footer_content_text td { padding-right: 20px; } .footer_content_container_right .footer_content_box { float: right; padding: 0 0 40px 20px; } .footer_container a { text-decoration: none; color: #000000; } /*-----| Crump |--------------------------------------------------------------------------------------------------------------*/ #crump { padding: 0 1vW 0 0; margin-right: 10px; } #crump ul { padding: 0; } #crump ul li { list-style: none; float: left; height: 21px; font-weight: 100; padding-right: 12px; background-repeat: no-repeat; background-position: right center; background-image: url('/www_peterhans/pages/img/crump_n.jpg'); background-color: #d9d9d3; } #crump ul li.first { background-image: url('/www_peterhans/pages/img/crump_f.jpg'); background-color: #dd2821; } #crump ul li.first.before_last { background-image: url('/www_peterhans/pages/img/crump_f_bl.jpg'); } #crump ul li.before_last { background-image: url('/www_peterhans/pages/img/crump_n_bl.jpg'); } #crump ul li.last { background-image: none; background-color: transparent; padding: 0 0 0 5px; } #crump ul li a { display: block; padding: 0 10px; height: 21px; line-height: 21px; color: #818181; text-decoration: none; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 13px; } #crump ul li.first a { color: #ffffff; } #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#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; } /*-----| SIDE Navigation |--------------------------------------------------------------------------------------------------------------*/ nav#side_navi { position: fixed; z-index: 25; right: 0; top: 275px; width: 40px; } nav#side_navi ul { margin-bottom: 20px; background: #dd2821; border-radius: 10px 0 0 10px; } nav#side_navi ul li { position: relative; list-style: none; } nav#side_navi ul li a { display: block; height: 44px; background-repeat: no-repeat; background-position: center; } nav#side_navi ul li:hover a { background-color: rgba(0,77,135,1); } nav#side_navi ul li:first-child a { border-top-left-radius: 10px; } nav#side_navi ul li:last-child a { border-bottom-left-radius: 10px; } nav#side_navi ul ul { display: none; position: absolute; right: 40px; top: 0; padding: 5px; background: rgba(0,77,135,1); border-radius: 10px 0 10px 10px; } nav#side_navi ul li:hover ul { display: block; } nav#side_navi ul ul li a { white-space: nowrap; color: #ffffff; height: auto; padding: 5px; cursor: pointer; } 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 span { display: none; } nav#side_navi #snBasket.full { background-color: rgba(0,77,135,1); } nav#side_navi #snBasket.full span { display: block; position: absolute; left: -8px; bottom: -8px; width: 24px; height: 24px; background: rgba(228,5,22,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 #snNewsletter { background-image: url('/pages2015/img/sn_mail.png'); } nav#side_navi #snMyShop { background-image: url('/pages2015/img/sn_user.png'); } 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'); } /*-----| SORTIMENT |--------------------------------------------------------------------------------------------------------------*/ .sTen_box, .sEleven_box { box-shadow: none !important; background: none; } .sTen_header, .sEleven_header { display: table; background: #dd2821 !important; border-radius: 10px 10px 0 0; } .sTen_header div, .sEleven_header div { vertical-align: middle; text-align: center; } .sTen_header div span, .sEleven_header div span { color: #ffffff; font-family: 'Source Sans Pro', sans-serif; font-weight: 600; font-size: 15px } .sTen_link:hover .sTen_header, .sEleven_link:hover .sEleven_header { background: #000000 !important; } .sTen_image_container, .sTen_image_container_large, .sEleven_image_container, .sEleven_image_container_large { background: #dfded9; } .sTen_link:hover .sTen_image_container, .sTen_link:hover .sTen_image_container_large, .sEleven_link:hover .sEleven_image_container, .sEleven_link:hover .sEleven_image_container_large { background: #000000; } .sTen_navi, .sEleven_navi { padding: 5px 0; } .sTen_navi li, .sEleven_navi li { font-size: 13px; font-weight: 300; } .sTen_navi li:nth-child(2N), .sEleven_navi li:nth-child(2N) { background: #dfded9; } .sTen_navi li:hover, .sEleven_navi li:hover { background: #dd2821; } .sTen_navi li:hover a, .sEleven_navi li:hover a { color: #ffffff; } .sTen_image, .sEleven_image { border: 5px solid #ffffff; } /*-----| CONTENT |--------------------------------------------------------------------------------------------------------------*/ .cms #content { max-width: 1280px; width: 100vW; padding: 60px 80px; margin: 0 auto; } .cms #content a { text-decoration: none; color: rgba( 0,77,135,1 ); } .cms #content a:hover { color: rgba( 221,40,34,1 ); } .cms #content ul { padding: 0 0 12px 18px; } .cms #content p { padding-bottom: 12px; } .flex_container { display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; -webkit-flex-wrap: wrap; flex-wrap: wrap; } .flex_box { padding-bottom:50px; margin-bottom: 15px; line-height: 1px; border-radius: 15px; overflow: hidden;position: relative; float:left; display:inline-block } .flex_box img { max-width: 100%; } .flex_box.flex_box_link { cursor: pointer; } .flex_box.flex_box_25 { width: 22%; padding-bottom: 32px; } .flex_box.flex_box_25 img { width: 100%; } .flex_box.flex_box_33 { width: 30%; padding-bottom: 32px; } .flex_box.flex_box_home.flex_box_33 { width: 33%; padding-bottom: 0; } .flex_box.flex_box_33 img { width: 100%; } .flex_box.flex_box_50 { width: 47%; padding-bottom: 32px; } .flex_box.flex_box_66 { width: 60%; padding-bottom: 32px; } .flex_box.flex_box_home.flex_box_66 { width: 66.5%; padding-bottom: 0; } .flex_box.flex_box_100 { width: 100%; padding-bottom: 32px; } .flex_box.flex_box_100 h1 { padding-bottom: 12px; } .flex_box.flex_box_home.flex_box_100 { width: 100%; padding-bottom: 0; } .flex_box_home img { width: 100%; border: 1px solid #d4d4cd; border-radius: 15px; } .flex_box_text { padding:50px; line-height: 34px; color:#ffffff; text-transform: uppercase; font-weight: 400; font-size: 19px; text-align:} .flex_box.flex_box_link:hover .flex_box_text { color: #000000; } .flex_box.flex_box_content { line-height: 20px; border-radius: 0; } .longborder { height:160px;} .cms #content .img_cms.LA { margin: 0 24px 12px 0; } .section_intro { padding: 24px 0; border-top: 3px dotted #969696; } .section_navigation { padding: 24px 0; } .section_navigation ul { padding: 0 !important; } .section_navigation ul li { position: relative; list-style: none; } .section_container { border-top: 3px solid #969696; padding: 24px 0 48px 0; } .cT1 { width: 100%; } .cT1 tr:nth-child(2N-1) { background: #f1f1f1; } .cT1 tr td { padding: 5px; } .cT1 img { width: 15vW; max-width: 150px; } .cT2 { width: 100%; } .cT2 tr td { padding: 5px 15px 5px 0; } .cT2 tr td:last-child { padding: 5px 0; } .cT3 { width: 100%; } .cT3 tr.odd { background: #f1f1f1; } .cT3 tr td { padding: 5px; } @media screen and (max-width: 680px) { #content_product_det .pdgM_container > table { background: #ffffff; } #content_product_det .pdgM_container a { color: #dd2821; } .adhMHeader_slider { background: #ffffff; border: 10px solid #ffffff; margin: 0 -10px; } .adhMContainer { padding-bottom: 50px; } } .blockUI.blockMsg { background: none !important; border: none !important; }