/****** GENERAL ******/ body { margin:0; font-family:'Open Sans', sans-serif; color:#002b3e; font-size:14px; } h1, h2, h3, h4, h5, h6 { font-weight:900; line-height:22px; } h1 { font-size:18px; font-weight :bolder; color:#296178; border-bottom:1px #a14032 solid; display:inline-block; margin-bottom:20px; } h2 { font-size:100%; margin-bottom:-14px; font-weight:bold; } p { line-height:22px; margin:18px 0; } a { color:#000; text-decoration:none; } a:hover { color:green; } .clearer { clear:both; height:0; line-height:0; margin:0; padding:0; } .red { color:#db513d; } .row { clear:both; padding:60px 0; display:block; position:relative; min-width:777px; background:-moz-linear-gradient(top, rgba(254,240,228,1) 0%, rgba(255,255,255,0) 25%); background:-webkit-linear-gradient(top, rgba(254,240,228,1) 0%,rgba(255,255,255,0) 25%); background:linear-gradient(to bottom, rgba(254,240,228,1) 0%,rgba(255,255,255,0) 25%); filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#fef0e4', endColorstr='#00ffffff',GradientType=0 ); } .row:first-child { background:#fff; } .product-detail .row.content { margin-top:118px; padding-top:35px; } .row::before { width:120px; height:20px; background:#a24033; display:block; content:""; position:absolute; top:-10px; left:0; z-index:1001; } .row::after { width:120px; height:20px; background:#a24033; display:block; content:""; position:absolute; top:-10px; right:0; z-index:1001; } .col-777 { max-width:777px; margin:0 auto; } .col-1040 { max-width:1040px; margin:0 auto; } .col-1-3 { width:36%; float:left; position:relative; } .col-2-3 { width:62%; margin-right:20px; float:left; position:relative; } .col-1-4 { width:245px; margin-right:20px; float:left; position:relative; min-height:250px; } .col-1-4:nth-child(4) { margin-right:0; } .col-1-5 { width:20%; float:left; position:relative; } /****** HEADER ******/ .header { position:fixed; top:0; left:0; width:100%; background:rgba(0, 0, 0, 0.7); z-index:1003; } .header ul { max-width:900px; margin:0 auto; } .header li { list-style:none; float:left; margin:0; } .header li a { color:#fcd4b1; font-size:110%; padding:20px 15px 20px 15px; display:block; } .header li a:hover { background:#296178; } /****** SEARCHBAR ******/ .searchbar { position:fixed; top:65px; width:100%; padding:6px 0; background:rgba(252, 212, 177, 0.7); z-index:1000; } .searchbar form { margin:0; } .searchbar .searchfield { width:390px; position:relative; float:left; } .searchbar .searchfield input[type="text"] { border:2px #a14032 solid; border-radius:7px; font-size:100%; padding:8px 40px 8px 10px; color:#002b3e; width:86%; margin:4px; } .searchbar .searchfield input[type="text"]:focus { border:3px #a14032 solid; outline:none; margin:3px; } .searchbar button { position:absolute; color:#a14032; top:4px; right:-3px; border:0; font-size:140%; cursor:pointer; padding:7px 10px 6px 10px; background:transparent; border-bottom-right-radius:6px; border-top-right-radius:7px; border-left:1px #a14032 solid; } .searchbar button:hover { color:#fff; background:#a14032; } .searchbar select { position:relative; display:block; border:2px #a14032 solid; background:#fff; width:120px; padding:5px; font-size:100%; line-height:1; border-radius:7px; height:32px; -webkit-appearance:none; float:left; margin:4px 10px 4px 0; } .searchbar select:last-of-type { margin-right:0; } .searchbar select:focus { outline:none; } .searchbar .search-filter-important { width:auto; float:right; } /****** BANNER ******/ .banner { min-height: 300px; background: transparent; } .banner img { width:392px; padding:130px 0 40px 0; display:block; margin:0 auto; } /****** home-search-intro ******/ .home-search-intro { text-align:center; font-family:'Lora', serif; font-style:italic; font-size:150%; line-height:150%; } .home-search-intro p { line-height:140%; } .home-search-intro form { position:relative; width:550px; margin:20px auto 40px auto; } .home-search-intro input.search-field-content { border:2px #a14032 solid; border-radius:7px; font-size:100%; padding:12px 40px 12px 10px; color:#002b3e; width:91%; margin:2px; } .home-search-intro input.search-field-content:focus { border:3px #a14032 solid; outline:none; margin:1px; } .home-search-intro .search-filter-quick { display:none; } .home-search-intro button { position:absolute; color:#a14032; top:0; right:-5px; border:0; font-size:140%; cursor:pointer; padding:9px 9px 9px 11px; margin:2px 0 0 0; background:transparent; border-bottom-right-radius:8px; border-top-right-radius:8px; } .home-search-intro button:hover { color:#fff; background:#a14032; } .search-filter-quick { text-align:left; padding:0 20px; } .search-filter-quick a { font-family:'Open Sans', sans-serif; font-style:normal; color:#a14032; font-size:70%; } .search-filter-quick a:last-of-type { float:right; } .home-search-intro select { position:relative; display:block; border:2px #a14032 solid; background:transparent; width:150px; padding:5px; font-size:100%; line-height:1; border-radius:7px; height:45px; -webkit-appearance:none; float:left; margin:3px 30px 0 0; } .home-search-intro select:last-of-type { margin-right:0; } .home-search-intro select:focus { outline:none; } /****** FOOTER ******/ .footer { padding:60px 0; } .footer h3 { color:#fff; margin:4px 0; } .footer a { color:#fcd4b1; } .footer a:hover { color:#a14032; } .footer ul { padding:0; margin:0; } .footer li { list-style-type:none; padding:2px 0; margin:0; } /****** IMPRINT ******/ .imprint { background:#000; text-align:center; color:#fcd4b1; padding:10px 0; } .imprint a { color:#fcd4b1; } .imprint a:hover { color:#a14032; } .imprint img { margin:0 10px -3px 0; } /****** SEARCH RESULTS Variante 3 ******/ .search-results-item { position:absolute; top:0; left:0; width:100%; z-index:999; } .search-results-item:hover { top:-10px; left:-16px; width:278px; z-index:1002; border:1px #002b3e solid; border-radius:7px; -webkit-box-shadow:10px 10px 60px 0px rgba(0,0,0,0.75); -moz-box-shadow:10px 10px 60px 0px rgba(0,0,0,0.75); box-shadow:10px 10px 60px 0px rgba(0,0,0,0.75); } .search-results-item .search-results-item-img { border-top-left-radius:7px; border-top-right-radius:7px; } .search-results-item .search-results-item-img img { -webkit-clip-path:inset(33px 0 33px 0); clip-path:inset(33px 0 33px 0); width:245px; margin:-33px 0; } .search-results-item:hover .search-results-item-img img { -webkit-clip-path:inset(0 0 0 0); clip-path:inset(0 0 0 0); width:278px; margin:0 0; border-top-left-radius:6px; border-top-right-radius:6px; } .search-results-item .search-results-item-info { background:#fef0e4; padding:10px; border-bottom-right-radius:7px; border-bottom-left-radius:7px; } .search-results-item:hover .search-results-item-info { border-bottom-right-radius:0; border-bottom-left-radius:0; } .search-results-item .search-results-item-info h2 { margin:0; padding:0; } .search-results-item .search-results-item-description { display:none; margin:0; } .search-results-item:hover .search-results-item-description { display:block; } .search-results-item .search-results-item-meta { padding:5px; background:#fff; border-bottom-right-radius:7px; border-bottom-left-radius:7px; font-size:11px; } .search-results-item:hover .search-results-item-meta { padding:5px 10px; } .search-results-item .search-results-item-meta p { margin:0; } .search-results-item .search-results-item-meta ul { margin:0; padding:0; width:180px; } .search-results-item .search-results-item-meta li { list-style:none; margin:0; padding:2px 11px; float:left; border-right:1px #002b3e solid; height:16px; } .search-results-item .search-results-item-meta li { } .search-results-item .search-results-item-meta li.cert svg { width:16px; } .search-results-item .search-results-item-meta li.din svg { margin-top:-2px; width:20px; } .search-results-item .search-results-item-meta li svg path { fill:#296178 !important; } .search-results-item:hover .search-results-item-meta li { padding:2px 11px; } .search-results-item .search-results-item-meta li i { font-size:13px; color:#296178; } .search-results-item .search-results-item-meta li:first-child { padding-left:0; } .search-results-item .search-results-item-meta li:last-child { border-right:0; padding-right:0; } .search-results-item:hover .search-results-item-meta li:last-child { padding-left:10px; } .search-results-item .search-results-item-meta .search-results-item-meta-compl { width:180px; float:left; margin-bottom:6px; } .search-results-item:hover .search-results-item-meta .search-results-item-meta-compl { width:205px; } .search-results-item .search-results-item-meta-status { width:35px; padding:0 0 3px 5px; float:right; border-left:1px #002b3e solid; text-align:center; } .search-results-item .search-results-item-meta .search-results-item-meta-compl-bar { background:#c9d7dd; width:100%; height:7px; } .search-results-item .search-results-item-meta .search-results-item-meta-compl-bar span { background:#296178; height:7px; display:block; } .search-results-item .search-results-item-meta .search-results-item-meta-date { display:none; margin-top:3px; } .search-results-item:hover .search-results-item-meta .search-results-item-meta-date { display:block; } .search-results-item .search-results-item-meta .search-results-item-meta-date .released { float:right; } .search-results-item .search-results-item-meta-status svg { transform:rotate(-90deg); stroke-dasharray:251; /* (2PI * 40px) */ stroke-dashoffset:251; animation:offsettozero 1s linear forwards; } @keyframes offsettozero { to { stroke-dashoffset:200; } } /****** PRODUCT DETAIL PAGE ******/ .product-detail .row img.product-img { width:100%; border-radius:7px; } .product-detail table.product-meta { width:100%; background:#fef0e4; padding:20px; position:relative; border-radius:7px; } .product-detail table.product-meta a { color:#db513d; } .product-detail table.product-meta th { text-align:left; padding:10px 0 0 0; } .product-detail table.product-meta td { vertical-align:top; } .product-detail table.product-meta h3 { font-weight:normal; font-size:11px; border-top:1px #296178 solid; margin:0; display:block; } .product-detail table.product-meta h3:first-child { margin-top:0; } .product-detail table.product-meta ul { padding:0 0 0 20px; margin:-3px 0 0 0; } .product-detail table.product-meta li { list-style-type:circle; } .product-detail table.product-meta svg { transform:rotate(-90deg); stroke-dasharray:502; /* (2PI * 40px) */ stroke-dashoffset:502; animation:offsettozero 1s linear forwards; } .product-detail table.product-meta @keyframes offsettozero { to { stroke-dashoffset:180; } } /****** ELEMENTS ******/ .profile-completed { width:100%; } .profile-completed p { width:auto; float:right; margin:0; color:#db513d; } .profile-completed-bar { display:block; background:#c9d7dd; width:86%; height:20px; float:left; } .profile-completed-bar span { background:#296178; height:20px; display:block; }