/* ------------------------------------------------------------------------------ MINIMALIST EBAY TEMPLATE MADE BY PIXELSAFARI.NET Template Name: Minimalist Description: Minimalist eBay Template by Pixelsafari.net Author: Daniel Kolb Author URI: https://pixelsafari.net Version: 2.7 1. Wrapper 2. Header & Navigation 3. Top Content 4. Gallery 5. Short Description 6. Price Container & Button 7. Feedback 8. Tab Bar 9. Best Sellers 10. Footer 11. Max width 820px (Tablet) 12. Max width 480px (Smartphone) ------------------------------------------------------------------------------ */ /* Ergänzung */ .crossSellerItem .img_cross{ width: 100%; padding-top: 100%; position: relative; } .crossSellerItem .content{ position: absolute; top: 0; left: 0; bottom: 0; right: 0; } /* 1. Wrapper */ #wrapper { position: relative; margin: 0 auto; max-width: 1390px; font-family: 'Lato', sans-serif; } .clearer { clear: both; } /* 2. Header & Navigation */ .header { margin-bottom: 40px; padding-top: 30px; text-align: center; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .header h2 { margin-bottom: 15px; font-weight: 300; font-size: 54px; font-family: 'Cardo', serif; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .header h2:hover { color: #BF392B; cursor: default; } .header a, .header a:visited { color: inherit; text-decoration: none; } .header img { margin-bottom: 20px; max-width: 260px; max-height: 120px; } .navigation { margin-bottom: 50px; height: 50px; border-top: 1px solid #333; border-bottom: 1px solid #333; } .navList { margin: 0; padding: 0; } .navList li { display: inline-block; margin: 0 60px 0 0; color: #333; text-transform: uppercase; font-weight: 400; font-size: 14px; font-family: 'Lato', sans-serif; line-height: 50px; } .navList li:hover, .navList li a:hover { text-decoration: underline; } .navList a, .navList a:visited { text-decoration: none; } /* 3. Top Content */ .upperBody { margin-bottom: 50px; margin-left: 50%; padding-top: 1px; padding-left: 25px; font-family: 'Lato', sans-serif; } .upperBody h1, .upperBody h4 { margin-top: 10px; margin-bottom: 0px; color: #1F1F1F; font-weight: 400; font-size: 30px; font-family: 'montserrat', sans-serif; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .upperBody h3 { margin-top: 7px; color: #999999; font-weight: 300; font-size: 16px; font-family: 'cardo', sans-serif; } .upperBody p, .upperBody ul, .upperBody ol, .upperBody li, { color: #555555; font-weight: 400; font-size: 15px; font-family: 'open sans', sans-serif; } /* 4. Short Description */ .shortdescription { overflow: hidden; padding-right: 15px; max-width: 670px; line-height: 1.6; } .variationContainer { margin: 20px 0 0 0; padding-bottom: 45px; padding-left: 25px; max-width: 345px; border-top: 1px solid #ddd; font-family: 'montserrat', sans-serif; } .variationContainer h5 { margin-top: 25px; margin-bottom: 10px; font-weight: 400; font-size: 14px; } .varList1 { margin: 0; padding: 0; list-style: none; } .varList1 li { display: inline-block; margin-right: 5px; margin-bottom: 5px; padding: 5px 10px; border: 1px solid #333; background-color: fff; color: #333; font-size: 12px; } .varList1 li:hover { cursor: default; } .varList2 { margin: 0; padding: 0; list-style: none; } .varList2 li { display: inline-block; margin-right: 5px; margin-bottom: 5px; padding: 5px 10px; border: 1px solid #333; color: #333; font-size: 12px; } .varList2 li:hover { cursor: default; } /* 5. Price Container & Button */ .priceContainer { margin: 0 0 35px 0; padding-top: 25px; padding-left: 25px; width: 345px; height: 100px; background-color: #eee; } .priceContainer h4 { display: inline-block; color: #333; font-size: 32px; font-family: 'lato', sans-serif; } .priceContainer h5 { position: relative; top: 15px; left: -25px; display: inline; color: #333; font-weight: 400; font-size: 12px; font-family: 'lato', sans-serif; } .priceContainer sup { color: #333; font-size: 14px; font-family: 'lato', sans-serif; } #askNowButton { display: inline-block; margin-left: 0px; padding: 0 5px; width: 125px; height: 45px; border: 2px solid #000; background-color: #fff; text-align: center; line-height: 45px; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } #askNowButton a, #askNowButton a:hover, #askNowButton a:visited { color: inherit; text-decoration: none; } #askNowButton:hover { background-color: #333; cursor: pointer; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } #askNowButton:hover h4 { color: #fff; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } #askNowButton h4 { margin: 0; padding: 0; color: #333; font-size: 16px; font-family: 'montserrat', sans-serif; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } /* 6. Feedback */ .feedbackContainer { display: inline-block; margin-left: 20px; padding: 0px 20px 20px 0px; max-width: 490px; } .feedbackContainer h4 { color: #444444; font-size: 21px; font-family: 'cardo', sans-serif; line-height: 1.5; } .underline { margin: 13px 0; width: 20px; height: 3px; background-color: #000; } .feedback { font-family: 'lato', sans-serif; } .feedback p { padding: 10px 10px; color: #333; font-size: 14px; } .feedback i { position: relative; top: 20px; left: -40px; padding-top: 5px; font-style: italic; font-size: 12px; } .feedback span { position: relative; top: 5px; left: 25px; font-style: italic; font-size: 12px; } /** 7. Gallery **/ .gallery { width: 50%; margin-right: 2%; margin-bottom: 40px; float: left; position: relative; } .bigPic { position: absolute; display: block; top: 0; left: 0; width: 100%; height: 630px; text-align: center; opacity: 0; background-color: #fff; transition: opacity 0.5s; margin: 0; } .bigPic img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; max-width: 100%; max-height: 100%; } .gallery .bigPic:first-of-type { position: relative; pointer-events: auto; opacity: 1; z-index: 2; } .galleryNav { padding-top: 15px; padding-left: 0; text-align: left; } .galleryThumb { position: relative; display: inline-block; margin-right: 1%; margin-left: -4px; width: 24.2%; height: 140px; text-align: center; margin-bottom: 5px; transition: all 0.2s; } .galleryThumb:hover, .galleryThumb:visited, .galleryThumb:link { text-decoration: none; } .galleryThumb:nth-child(4n+1) { margin-left: 0; } .galleryThumb:nth-child(4n) { margin-right: 0; } .galleryThumb:hover { opacity: 0.7; cursor: pointer; transition: all 0.2s; } .galleryThumb img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; max-width: 100%; max-height: 100%; } .gallery .control-operator { display: none !important; } .gallery .control-operator:target~.bigPic { pointer-events: none; opacity: 0; -webkit-animation: none; -o-animation: none; animation: none; z-index: 2; } .gallery .control-operator:nth-of-type(1):target~.bigPic:nth-of-type(1), .gallery .control-operator:nth-of-type(2):target~.bigPic:nth-of-type(2), .gallery .control-operator:nth-of-type(3):target~.bigPic:nth-of-type(3), .gallery .control-operator:nth-of-type(4):target~.bigPic:nth-of-type(4), .gallery .control-operator:nth-of-type(5):target~.bigPic:nth-of-type(5), .gallery .control-operator:nth-of-type(6):target~.bigPic:nth-of-type(6), .gallery .control-operator:nth-of-type(7):target~.bigPic:nth-of-type(7), .gallery .control-operator:nth-of-type(8):target~.bigPic:nth-of-type(8), .gallery .control-operator:nth-of-type(9):target~.bigPic:nth-of-type(9), .gallery .control-operator:nth-of-type(10):target~.bigPic:nth-of-type(10), .gallery .control-operator:nth-of-type(11):target~.bigPic:nth-of-type(11), .gallery .control-operator:nth-of-type(12):target~.bigPic:nth-of-type(12) { pointer-events: auto; opacity: 1; } /** Zoom Gallery **/ .overlay { background: rgba(0, 0, 0, 0.6); position: fixed; width: 100%; height: 100%; top: 0px; left: 0px; z-index: 1000; display: none; } .zoom-bigPic { width: 70%; height: auto; margin: 0 auto; background: #fff; text-align: center; padding: 2% 2% 2% 2%; margin-top: 20px; } .zoom-bigPic img { max-width: 100%; max-height: 800px; } .overlay a.close-text { margin-top: 20px; color: #555 !important; text-decoration: none; font-size: 15px; clear: both; display: block; font-weight: normal; text-decoration: underline; } .overlay a i { color: #555 !important; font-size: 40px; margin-bottom: 20px; z-index: 2000; float: right; } #zoompic-1:target, #zoompic-2:target, #zoompic-3:target, #zoompic-4:target, #zoompic-5:target, #zoompic-6:target, #zoompic-7:target, #zoompic-8:target, #zoompic-9:target, #zoompic-10:target, #zoompic-11:target, #zoompic-12:target { display: block; } /* 8. Tab Bar */ .tabContent h1, .tabBar h2, .tabContent h2, .tabBar h2 { color: #333; font-weight: 300; font-size: 28px; font-family: 'cardo'; } .tabContent ol, .tabContent ul { margin: 0; padding-left: 20px; text-align: left; line-height: 1.5; } .tabContent ul li { margin-bottom: 8px; } #tab2, #tab3, #tab4, #tab5, #tab6 { display: none; } .tabContent { clear: both; overflow: auto; } .tabBar input[type=radio] { visibility: hidden; margin: 0; padding: 0; height: 0; width: 0; position: absolute; } .tablinks:first-child { margin-left: 0; } .tablinks { display: inline-block; width: 150px; background-color: #EFF0EB; color: #666666; text-align: center; text-transform: uppercase; font-size: 16px; font-family: 'Lato', sans-serif; line-height: 40px; -webkit-transition: all 0.1s ease-in-out; -moz-transition: all 0.1s ease-in-out; -o-transition: all 0.1s ease-in-out; transition: all 0.1s ease-in-out; border: 1px solid #EFF0EB; position: relative; } .tablinks:hover { border: 1px solid #D6D6D6; border-bottom: 1px solid #fff; background-color: #fff; color: #000; cursor: pointer; } #tab1-btn:checked + .tablinks, #tab2-btn:checked + .tablinks, #tab3-btn:checked + .tablinks, #tab4-btn:checked + .tablinks, #tab5-btn:checked + .tablinks, #tab6-btn:checked + .tablinks { border: 1px solid #D6D6D6; border-bottom: 1px solid #fff; background-color: #fff; color: #000; position: relative; z-index: 2; display: inline-block; text-align: center; text-transform: uppercase; font-size: 16px; font-family: 'Lato', sans-serif; cursor: pointer; border-bottom: 1px solid #fff; top: 1px; } #tab1-btn:checked ~ #tab1 { display: block; } #tab1-btn:checked ~ #tab2, #tab1-btn:checked ~ #tab3, #tab1-btn:checked ~ #tab4, #tab1-btn:checked ~ #tab5, #tab1-btn:checked ~ #tab6 { display: none; } #tab2-btn:checked ~ #tab2 { display: block; } #tab2-btn:checked ~ #tab1, #tab2-btn:checked ~ #tab3, #tab2-btn:checked ~ #tab4, #tab2-btn:checked ~ #tab5, #tab2-btn:checked ~ #tab6 { display: none; } #tab3-btn:checked ~ #tab3 { display: block; } #tab3-btn:checked ~ #tab1, #tab3-btn:checked ~ #tab2, #tab3-btn:checked ~ #tab4, #tab3-btn:checked ~ #tab5, #tab3-btn:checked ~ #tab6 { display: none; } #tab4-btn:checked ~ #tab4 { display: block; } #tab4-btn:checked ~ #tab1, #tab4-btn:checked ~ #tab2, #tab4-btn:checked ~ #tab3, #tab4-btn:checked ~ #tab5, #tab4-btn:checked ~ #tab6 { display: none; } #tab5-btn:checked ~ #tab5 { display: block; } #tab5-btn:checked ~ #tab1, #tab5-btn:checked ~ #tab2, #tab5-btn:checked ~ #tab3, #tab5-btn:checked ~ #tab4, #tab5-btn:checked ~ #tab6 { display: none; } #tab6-btn:checked ~ #tab6 { display: block; } #tab6-btn:checked ~ #tab1, #tab6-btn:checked ~ #tab2, #tab6-btn:checked ~ #tab3, #tab6-btn:checked ~ #tab4, #tab6-btn:checked ~ #tab5 { display: none; } .descriptionFeaturesList { margin: 0 auto !important; padding: 0 0 0 20px; max-width: 380px; list-style: none; text-align: left; } .descriptionFeatures h1, .descriptionFeatures h2 { font-size: 40px; } .descriptionFeaturesList li { margin-bottom: 10px; } .descriptionFeaturesList i { margin-right: 8px; } .tabBar { clear: both; padding-bottom: 80px; font: 15px 'Lato', sans-serif; } .contentBorder { border: 1px solid #D6D6D6; padding: 25px 50px 55px 50px; } .tabContent { overflow: hidden; margin: 0; padding: 0; color: #555555; text-align: left; font: 16px 'Lato', sans-serif; line-height: 1.5; } .tabContent a { color: #BF392B; } .tabContent a:hover, .tabContent a:visited { color: #c0392b; } .tabContent img { margin: 5px; max-width: 100%; height: auto; } .videoWrapperContainer { margin: 0 auto; width: 50%; } .videoWrapper { position: relative; padding-top: 25px; padding-bottom: 56.25%; height: 0; } .videoWrapper object, .videoWrapper embed { position: absolute; top: 0; left: 0; margin: 20px auto 0 auto; width: 100%; height: 100%; } .contentImgLeft { float: left; margin-top: 0; margin-right: 30px; margin-bottom: 20px; margin-left: 0px; max-width: 50%; } .contentImgRight { float: right; margin-top: 0; margin-right: 0px; margin-bottom: 20px; margin-left: 30px; max-width: 50%; } .contentImgLeft img, .contentImgRight img { max-width: 100%; } .contentImgInline { display: inline-block; margin-top: 0; margin-right: 0px; margin-bottom: 15px; margin-left: 15px; } /* 9. Best Sellers */ .crossSellerItem, .crossSellerItem1, .crossSellerItem2, .crossSellerItem3 { display: inline-block; margin-bottom: 5px; padding: 10px; width: 29%; border: 1px solid #fff; vertical-align: top; text-align: center; font-weight: 300; font-family: 'cardo', 'open sans'; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .crossSellerItem img, .crossSellerItem1 img, .crossSellerItem2 img, .crossSellerItem3 img { max-width: 100%; max-height: 100%; width: auto; height: auto; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .crossSellerItem h3, .crossSellerItem1 h3, .crossSellerItem2 h3, .crossSellerItem3 h3 { margin-bottom: 7px; color: #333; font-weight: 400; font-size: 22px; } .crossSellerItem h4, .crossSellerItem1 h4, .crossSellerItem2 h4, .crossSellerItem3 h4 { margin-top: 0; color: #BF392B; font-weight: 400; font-size: 18px; font-family: 'lato'; } .crossSellerItem a, .crossSellerItem a:hover, .crossSellerItem a:visited, .crossSellerItem1 a, .crossSellerItem1 a:hover, .crossSellerItem1 a:visited, .crossSellerItem2 a, .crossSellerItem2 a:hover, .crossSellerItem2 a:visited, .crossSellerItem3 a, .crossSellerItem3 a:hover, .crossSellerItem3 a:visited { color: inherit; text-decoration: none; } .crossSellerItem sup, .crossSellerItem1 sup, .crossSellerItem2 sup, .crossSellerItem3 sup { color: #BF392B; font-size: 13px; } .crossSellerItem:hover img, .crossSellerItem1:hover img, .crossSellerItem2:hover img, .crossSellerItem3:hover img { opacity: 0.7; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .crossSellerItem:hover, .crossSellerItem1:hover, .crossSellerItem2:hover, .crossSellerItem3:hover { border: 1px solid #BF392B; cursor: pointer; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .crossSellerContainer { overflow: hidden; margin-top: 10px; margin-bottom: 80px; text-align: center; } .linethrough { margin-top: 20px; width: 100%; height: 1px; background-color: #333; } .crossSellerContainer h2 { position: relative; top: -13px; z-index: 9999; display: inline-block; margin: 0 20px; padding: 5px 10px 0 10px; background-color: #fff; font-weight: 400; font-size: 24px; font-family: 'cardo', "open sans"; } .crossSellerItem1 { margin-left: 10px; } .crossSellerItem2 { margin: 0 auto; } .crossSellerItem3 { margin-right: 10px; } /* 10. Footer */ .footerContainer { margin: 0; padding-bottom: 40px; padding-right: 60px; overflow: auto; background-color: #252525; font-family: 'Lato'; } .footerContainer h2 { margin: 0 0 20px 0; color: #f0f0f0; text-transform: uppercase; font-weight: 400; font-size: 17px; font-family: 'montserrat'; } .footerColumn { float: left; margin-left: 4.8%; width: 220px; margin-top: 40px; } .footerColumn p { margin: 0 0 0 0; margin-bottom: 0; padding: 0; color: #D6D6D6; font-size: 15px; line-height: 1.35; } .footerColumn a, .footerColumn span { color: #BF392B; font-weight: 300; text-decoration: none; } .footerColumn a:hover { text-decoration: underline; } .footerRow:first-of-type { padding-top: 5px; } .footerRow { margin-bottom: 12px; } .footerRow i { float: left; color: #d6d6d6; font-size: 20px; line-height: 18px; margin-right: 10px; } .footerRow p { line-height: 20px; font-size: 14px; } #copyright { margin-top: 12px; color: #D6D6D6; font-size: 9px; } #copyright a { color: #ffffff; text-decoration: underline; } /****************/ /**** TABLET ****/ /****************/ /* 11. Max width 820px (Tablet) */ @media only screen and (max-width: 820px) { .header img { max-width: 60%; } .navigation { height: auto; } .navList { padding-left: 0; } .navigation li { display: block; padding: 0px; width: 100%; border-top: 1px solid #ddd; } .navigation li:first-child { border-top: none; } .gallery { clear: both; width: 100%; margin-bottom: 0; } .bigPic { width: 100%; } .upperBody { clear: both; margin-bottom: 50px; margin-left: 0; padding: 0; text-align: center; } .shortdescription { padding-right: 0; max-width: 820px; } .upperBody ul, .upperBody ol { text-align: left; } .variationContainer { margin-right: auto; margin-left: auto; padding-left: 0; } .priceContainer { margin: 0 auto; margin-bottom: 40px; padding: 10px 10px 40px 10px; width: auto; height: auto; } #askNowButton { position: relative; right: 15px; margin-top: 30px; } .feedbackContainer { display: block; margin-right: auto; margin-left: auto; max-width: 360px; } .feedbackContainer h4 { text-align: center; } .underline { margin-right: auto; margin-left: auto; } .tabBar .tablinks { width: 46%; margin-right: 1%; margin-left: 1%; margin-bottom: 10px; border: 1px solid #D6D6D6; !important; border-bottom: 1px solid #D6D6D6; !important; } #tab1-btn:checked + .tablinks, #tab2-btn:checked + .tablinks, #tab3-btn:checked + .tablinks, #tab4-btn:checked + .tablinks, #tab5-btn:checked + .tablinks, #tab6-btn:checked + .tablinks .tabContent { border: 1px solid #D6D6D6; !important; border-bottom: 1px solid #D6D6D6; !important; top: 0; } .tabContent img { margin: 0; max-width: 100%; max-height: auto; width: auto; height: auto; } .contentImgLeft, .contentImgRight { float: none; clear: both; margin: 0 auto; max-width: 100%; width: auto; text-align: center; } .contentImgLeft img, .contentImgRight img { margin-bottom: 10px; } .descriptionFeaturesList { padding-right: 10px; padding-left: 10px; } .videoWrapperContainer { width: 90%; } .crossSellerItem1, .crossSellerItem2, .crossSellerItem3 { float: none; clear: both; margin: 0 auto; width: 90%; } } /*********************/ /**** SMARTPHONES ****/ /*********************/ /* 12. Max width 480px (Smartphone) */ @media only screen and (max-width: 480px) { .header img { max-width: 95%; } #askNowButton { right: 0; } .bigPic { margin-bottom: 5px; height: 350px; } .galleryThumb { width: 23%; height: 90px; } .footerContainer { padding: 0; } .footerColumn { text-align: center; margin: 60px auto; float: none; } .footerRow { text-align: left; } } /*ANIMATIONS*/ .animated { -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translateX(10px); } 100% { opacity: 1; -webkit-transform: translateX(0); } } @-moz-keyframes fadeInRight { 0% { opacity: 0; -moz-transform: translateX(10px); } 100% { opacity: 1; -moz-transform: translateX(0); } } @-o-keyframes fadeInRight { 0% { opacity: 0; -o-transform: translateX(10px); } 100% { opacity: 1; -o-transform: translateX(0); } } @keyframes fadeInRight { 0% { opacity: 0; transform: translateX(10px); } 100% { opacity: 1; transform: translateX(0); } } .fadeInRight { -webkit-animation-name: fadeInRight; -moz-animation-name: fadeInRight; -o-animation-name: fadeInRight; animation-name: fadeInRight; }