@import url("/css/thumbProducts.css"); /* Knappar och textbox */ ul#productslist li a.btn-info {display:block; text-decoration:none; float:left; cursor:pointer; background-color:#999; padding:5px 16px; color:#fff; font-weight:bold; font-size:12px; /*border:1px solid #888;*/ border-radius:2px; -moz-border-radius:2px; -webkit-appearance:none;} ul#productslist li a.btn-info:active {background-color:#888;} ul#productslist li a.btn-buy, div.product-left a.btn-buy {display:block; text-decoration:none; float:left; cursor:pointer; background-color:#2980b9; padding:5px 16px; color:#fff; font-weight:bold; font-size:12px; /*border:1px solid #0277bb;*/ border-radius:2px; -moz-border-radius:2px; margin:0 5px;} ul#productslist li a.btn-buy:active, div.product-left a.btn-buy:active {background-color:#1d6da2; -webkit-appearance:none;} ul#productslist li .tbx-amount, div.product-left .tbx-amount {font-weight:bold; font-size:12px; color:#888; height:14px; width:40px; float:left; line-height:12px; margin:0; padding:6px; border:1px solid #bbb; text-align:center; outline-width:0; -webkit-appearance:none;} ul#productslist li .tbx-amount-off, div.product-left .tbx-amount-off {font-weight:bold; font-size:12px; color:#ccc; height:14px; width:40px; float:left; line-height:12px; margin:0; padding:6px; border:1px solid #bbb; text-align:center; -webkit-appearance:none;} /* Produktlista */ ul#productslist {list-style:none; margin:0; padding:0; width:100%;} ul#productslist li {margin:20px 0 0 0; padding:20px 0 0 0; float:left; width:100%; border-top:1px solid #ccc;} ul#productslist li .img {width:165px; float:left; position:relative;} ul#productslist li .img img {max-width:100%;} ul#productslist li .img .campaign {width:35px; height:35px; z-index:99; top:-7px; right:-7px; position:absolute;} ul#productslist li .info {width:width:-moz-calc(100% - 175px); width:-webkit-calc(100% - 175px); width:calc(100% - 175px); float:right; overflow:hidden;} ul#productslist li h3 {margin:0 0 5px 0; padding:0; font-size:12px;} ul#productslist li p {margin:0; padding:0; font-size:12px;} ul#productslist li p.price {margin:0; padding:0; font-size:12px; font-weight:bold;} ul#productslist li p.campaign {margin:0; padding:0; font-size:12px; color:#b00; font-weight:bold;} ul#productslist li .buy {padding-top:10px;} /* En produkt */ div.product-left {width:330px; float:left;} div.product-left h1 {} div.product-left p.price {margin-top:5px; font-weight:bold; font-size:16px;} div.product-left p.price span.vat {font-weight:normal; font-size:12px;} div.product-left p.price-old {margin:5px 0 0 0; padding-bottom:0; font-weight:bold; font-size:16px;} div.product-left p.price-old span {text-decoration:line-through;} div.product-left p.price-campaign {font-weight:bold; font-size:16px; color:#b00;} div.product-left p.price-campaign span.vat {font-weight:normal; font-size:12px;} div.product-left p.artnr {margin-top:5px; font-weight:normal; font-size:10px; color:#888;} div.product-right {width:350px; float:right;} div.product-right img {border:0;} div.product-right div#product-images {width:350px; padding:0; margin:0;} div.product-right div#product-images-first {width:350px; padding:0; margin:0 0 10px 0;} div.product-right ul#product-images-list {width:350px; list-style:none; margin:0; padding:10px 0 0 0; border-top:1px solid #ccc; float:left;} div.product-right ul#product-images-list li {width:110px; height:110px; float:left; overflow:hidden; margin:0 10px 10px 0; padding:0; background-color:#f5f5f5;} div.product-right ul#product-images-list li.last {margin-right:0;} div.product-right ul#product-images-list li a {display:block; height:100%; width:100%; background-repeat:no-repeat; background-position:center center;} div.product-right ul#product-images-list li a img {height:100%; width:100%;} div.product-right ul#product-images-list li a:hover img {background:url(/gfx/webbedit/zoom-big.png) center center no-repeat;} @media only screen and (max-width: 860px) { div.product-left {width:100%; float:none; padding-bottom:10px;} div.product-right {width:100%; float:none; padding-top:10px; border-top:1px solid #ccc;} div.product-right div#product-images {margin:0 auto;} div.product-left .tbx-amount {padding:6px 4px; font-size:11px; width:25px;} ul#productslist li a.btn-info {padding:6px 10px; font-size:11px;} ul#productslist li a.btn-buy {padding:6px 10px; font-size:11px;} } @media only screen and (max-width: 480px) { ul#productslist li .img {width:120px !important;} ul#productslist li .img .campaign {width:30px; height:30px;} ul#productslist li .info {width:width:-moz-calc(100% - 130px) !important; width:-webkit-calc(100% - 130px) !important; width:calc(100% - 130px) !important;} ul#productslist li .tbx-amount {padding:6px 4px; font-size:11px; width:25px;} div.product-left a.btn-buy {padding:6px 10px; font-size:11px;} } @media only screen and (max-width: 350px) { div.product-right div#product-images {width:100%;} div.product-right div#product-images-first {width:100%;} div.product-right div#product-images-first img {width:100%; height:auto; display:block;} div.product-right ul#product-images-list {width:100%;} div.product-right ul#product-images-list li {width:30.3%; height:90px;} div.product-right ul#product-images-list li a {width:100%; height:100%; padding:0;} div.product-right ul#product-images-list li a img {width:100%; height:100%;} div.product-right ul#product-images-list li a:hover img {background:url(/gfx/webbedit/zoom-small.png) center center no-repeat;} } @media only screen and (max-width: 320px) { ul#productslist li .img {width:70px !important;} ul#productslist li .img .campaign {width:25px; height:25px;} ul#productslist li .info {width:width:-moz-calc(100% - 80px) !important; width:-webkit-calc(100% - 80px) !important; width:calc(100% - 80px) !important;} ul#productslist li .tbx-amount {padding:4px 4px; font-size:10px; width:25px;} ul#productslist li a.btn-info {padding:4px 8px; font-size:10px;} ul#productslist li a.btn-buy {padding:4px 8px; font-size:10px;} }