/*@import url('plugins.css');*/ @media handheld{} /* ========================================== 1. WERSJA DESKTOP (BAZA) ========================================== */ @media all, screen, handheld{ body,h1,h2,h3,h4,h5,h6,p,form,fieldset,img,ul{margin:0;padding:0;border:0;} body,table{background-color:#282828;color:#222;font-size:0.75em;font-family:Verdana, Arial, sans-serif;} body{padding:2px 0;background:#282828;text-align:center;overflow:scroll;} .input, select, textarea{border:1px solid #9d9ea8;font:0.917em Arial, sans-serif;color:#FFF;} .submit{font:1em Arial, sans-serif;cursor:pointer;} .hide{display:none;} a{background-color:inherit;color:#222;text-decoration:none;} .clear{clear:both;height:0px;font-size:0px;line-height:0px;} .skiplink{position:absolute;top:-500px;left:0px;overflow:hidden;} .left{text-align:left;} .center{text-align:center;} .right{text-align:right;} #cookies_accept_content a{background-color:inherit;color:#9E9EA8;text-decoration:none;} #container{margin:0 auto;background:#282828;} #main{margin:0 auto;border:8px solid #282828;text-align:left;} * html #main{} #language{float:right;margin:-35px 0px 0 0;} #language a:hover{text-decoration:none;box-shadow:1px 1px 3px #434452;} #head1 a{float:right;} #menu1{float:right;margin:4px 15px 4px 0;list-style:none;} #menu1 li{float:left;padding:12px 8px 0;} #menu1 li a{padding-left:13px;background:url('img/point.gif') no-repeat 0 5px;color:#5c3c25;font:bold 0.917em sans-serif;text-decoration:none;} #menu1 li a:hover, #menu1 .selected{background-color:inherit;color:#d01c02;text-decoration:underline;} #menu1 li#basketMenu{padding:5px 8px 5px 20px;} #menu1 li#basketMenu a{padding:2px 0 0 18px;background:url('img/cart.png') no-repeat 0;color:#e62808;} #menu1 li#basketMenu span{display:block;font-size:0.727em;font-family:sans-serif;} #menu1 li#basketMenu span strong{background-color:inherit;color:#e62808;} #menu1 id{padding:12px 8px 0;} #head2{clear:both;width:100%;height:70px;background:#2F2F2F url('img/header_dark.jpg') right no-repeat;color:#000;} #logo{margin:24px 0px 0px 10px;float:left;} #logo h1 a { display: block !important; width: 200px !important; /* Szerokość Twojego logo */ height: 35px !important; /* Wysokość Twojego logo */ background-image: url('img/logo_dark.png'); background-repeat: no-repeat; background-size: contain; background-position: center; /* Ukrywamy tekst, ale zostawiamy go dla wyszukiwarek */ text-indent: -9999px; overflow: hidden; float: left; } #logo h2{clear:left;float:left;width:90%;padding:0 0 0 222px;background:inherit;color:#9d9ea8;font:bold 0.9em Tahoma, sans-serif;} * html #logo h2{width:100%;} #goToNumberFormID{float:left;margin:-2px 0px 0px 0px;padding:5px 6px 3px 0px;color:#7A7F91;text-decoration:none;} #goToNumberForm{margin:-19px 0px 0px;padding:0px 0px 0px 119px;color:#7A7F91;text-decoration:none;} #goToNumberForm .input{background-color:#282828;} #goToNumberForm .submit2{} #pagesBefore, #navipath{overflow:hidden;padding:8px 0 6px 0px;margin:-6px 0px 0px 0px;width:98%;color:#7A7F91;text-decoration:none;} #naviSwitch{float:left;margin:-2px 0px 0px 0px;padding:5px 0px 7px 0px;color:#7A7F91;text-decoration:none;} #navipath_bottom{overflow:hidden;padding:8px 0 6px 0px;margin:0px 0;width:98%;color:#7A7F91;text-decoration:none;border-top:1px solid #9D9EA8;} #pagesBefore, #navipath strong, #navipath_bottom strong, #naviSwitch strong{border:0;background:left bottom;color:#FFF;text-decoration:none;} #pagesBefore, #navipath a, #navipath_bottom a, #naviSwitch a{background:left bottom;color:#7A7F91;text-decoration:none;} #pagesBefore, #navipath a:hover, #navipath_bottom a:hover, #naviSwitch a:hover{background:left top;color:#c7c7c7;text-decoration:none;box-shadow:1px 1px 3px #434452;} #head3{float:left;width:100%;border-top:2px solid #222222;background:#222222 url('img/nav.gif');} #menu2{float:left;font-size:1.08em;list-style:none;} #menu2 li{float:left;} #menu2 a{display:block;float:left;height:38px;padding:0 14px;border-right:1px solid #dddddd;background:url('img/nav.gif');background-color:inherit;color:#9E9EA8;font-weight:bold;line-height:38px;text-decoration:none;} #menu2 a:hover{background:url('img/nav.gif') left bottom;background-color:inherit;color:#dddddd;text-decoration:none;} #menu2 .selected{background:url('img/nav.gif') left bottom;background-color:inherit;color:#dddddd;text-decoration:none;} #body{clear:both;float:left;width:100%;margin:1px 0;background-color:#transparent;} #orderbody{margin:1px 0;clear:both;float:left;width:100%;background:#transparent;} #column{ margin: -54px 0 0 0; float:left; width:235px; background:#2F2F2F; overflow:hidden; } #column .type{margin:0 0 0 0;padding:5px 0 5px 15px;background:#e6e6e6 url('img/nav.gif');color:#9e9ea8;font-weight:bold;font-size:1.1em;} #buttonHS{width:70px;height:38px;margin:16px 0px 4px -15px;transform:rotate(270deg);-webkit-transform:rotate(270deg);-moz-transform:rotate(270deg);-o-transform:rotate(270deg);} #buttonHSText{padding:0px 16px 14px 17px;margin:0px 0px 0px 0px;text-align:center;background-color:inherit;color:#9e9ea8;text-decoration:none;} #fbButtonMobile { display: none !important; } #column #searchForm{ margin:0 0 0 0; padding:25px 0px 22px 0px; background:#2F2F2F; text-align:right; } #column #searchForm .input{ width:150px; height:20px; font-family:Verdana, Arial, sans-serif; font-size:1.1em; } #searchForm .input{background-color:#2F2F2F;} #searchForm {margin:10px 0 10px 0;} #searchForm label{display:none;} #searchForm .submit{ font-size:0.8em; /* 2. Resetujemy wymiary, żeby tekst był widoczny */ width: auto !important; height: 20px !important; margin:0 0 0 10px; /* 3. Dodajemy odstępy (padding), żeby przycisk wyglądał jak przycisk */ padding: 7px 12px 16px !important; text-align:right; background: #464C77 !important; /* Dajemy tło jak w menu, żeby pasowało * /* 4. Tekst i czcionka */ color: #FFF !important; font-size: 0.8em; text-align: center; border: none; cursor: pointer; margin: 0 0 0 5px; /* 5. Estetyka - lekkie zaokrąglenie, by pasowało do nowoczesnego stylu */ border-radius: 3px; } /* Opcjonalnie: efekt po najechaniu myszką na komputerze */ #searchForm .submit:hover { background: #5a6199 !important; color: #fff !important; } #menu3{margin:2px 0 0 0;} #menu4{margin:2px 0 0 0;} #menu5{margin:2px 0 0 0;} #menu6{margin:2px 0 0 0;} #menu7{margin:2px 0 0 0;} #menu3 ul, #menu4 ul, #menu5 ul, #menu6 ul, #menu7 ul{margin:0px 0 0 0;padding:10px 15px 11px;background:#transparent;list-style:none;} #menu3 a, #menu4 a, #menu5 a, #menu6 a, #menu7 a{display:block;display:inline-block;width:89%;padding:6px 6%;background:url('img/point.gif') no-repeat 0 11px;color:#7a7f91;text-decoration:none;} #menu3 a:hover, #menu4 a:hover, #menu5 a:hover, #menu6 a:hover, #menu7 a:hover{background-color:inherit;color:#c7c7c7;text-decoration:none;box-shadow:1px 1px 4px #434452;} #menu3 .l1 a, #menu4 .l1 a, #menu5 .l1 a, #menu6 .l1 a, #menu7 .l1 a{border-top:0;} #menu3 .sub1, #menu4 .sub1, #menu5 .sub1, #menu6 .sub1, #menu7 .sub1{margin:0;padding:0 0 10px 0;border:0;} #menu3 .sub1 a, #menu4 .sub1 a, #menu5 .sub1 a, #menu6 .sub1 a, #menu7 .sub1 a{display:block;width:75%;padding:2px 10% 2px 15%;border:0;background:url('img/point_sub.gif') no-repeat 15px 6px;} #menu3 .sub2 a, #menu4 .sub2 a, #menu5 .sub2 a, #menu6 .sub2 a, #menu7 .sub2 a{padding-left:18%;} #menu3 .sub3 a, #menu4 .sub3 a, #menu5 .sub3 a, #menu6 .sub3 a, #menu7 .sub3 a{padding-left:21%;} * html #menu3 a, * html #menu4 a, * html #menu3 .sub1 a, * html #menu4 .sub1 a, * html #menu5 a, * html #menu6 a, * html #menu5 .sub1 a, * html #menu6 .sub1 a, * html #menu7 a, * html #menu7 .sub1 a{width:100%;} #menu3 .selected, #menu4 .selected, #menu5 .selected, #menu6 .selected, #menu7 .selected{background-color:inherit;color:#FFF;font-weight:bold} #content{ width:calc(100% - 235px); //min-width: 960px; /* Opcjonalnie, żeby strona nie "zgniotła się" za bardzo */ float:left; padding:10px 0 0px 0px; margin:-50px 0 8px 0px; text-align:center; background-color:transparent; } /* Magiczna klasa, którą doda JS */ body.menu-hidden #column { display: none !important; } body.menu-hidden #content { width: 100% !important; float: none !important; } #page{float:left;display:block;margin:0 0 6px 0;padding:0 0 10px 31px;text-align:left;} #pagesPictures{ float:left; display:block; margin:0 0 6px 0; padding:0 0 10px 31px; text-align:left; } #pagesPicturesScroll{float:left;display:block;margin:0 0 6px 0;padding:0 0 10px 31px;text-align:left;} #pagesTextlist{float:left;display:block;margin:0 0 6px 0;padding:0 0 10px 31px;text-align:left;} #page h3, .message h3{margin:0 0 0px;padding:5px 0 18px 0px;background:inherit;color:#9E9EA8;font:normal 2.1em Verdana, sans-serif;} #pagesPictures h3, #pagesPicturesScroll h3{margin:0 0 0px;padding:5px 10px 18px 0px;background:inherit;color:#9E9EA8;font:normal 2.1em Verdana, sans-serif;} #pagesTextlist h3{margin:0 0 0px;padding:5px 10px 18px 0px;background:inherit;color:#9E9EA8;font:normal 2.1em Verdana, sans-serif;} #licznikDiv{margin:-35px 0 0px;padding:0px 10px 21px 0px;background:inherit;text-align:right;} #licznikDiv a{color:#9E9EA8;} .message h3, #page .message h3{border:0;} #page div.content{font:1.08em Verdana, sans-serif;color:#7A7F91} #pagesPictures div.content, #pagesPicturesScroll div.content, #pagesTextlist div.content{font:1.08em Verdana, sans-serif;color:#7A7F91} #pageDescription{font:1.08em Verdana, sans-serif;color:#7A7F91;border-top:1px solid #9d9ea8;margin-top:28px;} #page #basket{height:507px;overflow:scroll;} #page .tS, #product .tS{float:right;margin:0 0 3px;} #page .tS div, #product .tS div{display:inline;} #page .tS a, #product .tS a{margin:0 2px;padding:0 1px;background:inherit;color:#222;font-weight:bold;text-decoration:none;} #page .tS0, #product .tS0{font-size:0.92em;} #page .tS1, #product .tS1{font-size:1.08em;} #page .tS2, #product .tS2{font-size:1.33em;} #pagesPictures .tS, #product .tS{float:right;margin:0 0 3px;} #pagesPictures .tS div, #product .tS div{display:inline;} #pagesPictures .tS a, #product .tS a{margin:0 2px;padding:0 1px;background:inherit;color:#222;font-weight:bold;text-decoration:none;} #pagesPictures .tS0, #product .tS0{font-size:0.92em;} #pagesPictures .tS1, #product .tS1{font-size:1.08em;} #pagesPictures .tS2, #product .tS2{font-size:1.33em;} #pagesPicturesScroll .tS{float:right;margin:0 0 3px;} #pagesPicturesScroll .tS div{display:inline;} #pagesPicturesScroll .tS a{margin:0 2px;padding:0 1px;background:inherit;color:#222;font-weight:bold;text-decoration:none;} #pagesPicturesScroll .tS0{font-size:0.92em;} #pagesPicturesScroll .tS1{font-size:1.08em;} #pagesPicturesScroll .tS2{font-size:1.33em;} #pagesTextlist .tS{float:right;margin:0 0 3px;} #pagesTextlist .tS div{display:inline;} #pagesTextlist .tS a{margin:0 2px;padding:0 1px;background:inherit;color:#222;font-weight:bold;text-decoration:none;} #pagesTextlist .tS0{font-size:0.92em;} #pagesTextlist .tS1{font-size:1.08em;} #pagesTextlist .tS2{font-size:1.33em;} #products, #productsPictures, #productsPicturesScroll, #productsMainFrame{float:left;width:100%;padding:2px 0 0 0;list-style:none;border-top:1px solid #9d9ea8;} #products li, #productsPictures li, #productsPicturesScroll li{clear:both;float:left;width:96%;padding:5px 2% 10px;border-bottom:1px solid #9d9ea8;} #productsPicturesScrollVideo, #productsMainFrameVideo{float:left;width:100%;padding:2px 0 0 0;list-style:none;border-top:1px solid #9d9ea8;} #productsPicturesScrollVideo li{clear:both;float:left;width:96%;padding:5px 2% 10px;border-bottom:1px solid #9d9ea8;} #products li .photo, #productsPictures li .photo, #productsPicturesScroll li .photo{float:left;margin:0 7px 5px 0;font-size:0px;line-height:0px;} #products li .photo img, #productsPictures li .photo img, #productsPicturesScroll li .photo img{border:2px solid #dddddd;} #products li .photo a:hover img, #productsPictures li .photo a:hover img, #productsPicturesScroll li .photo a:hover img{border:2px solid #dcc7a7;} #products li h3, #productsPictures li h3, #productsPicturesScroll li h3{padding:5px 8px 0;background:inherit;font-weight:normal;font-size:1.5em;border:0;} #products li h3 a, #productsPictures li h3 a, #productsPicturesScroll li h3 a{background:inherit;color:#d01c02;text-decoration:none;} #products li h3 a:hover, #productsPictures li h3 a:hover, #productsPicturesScroll li h3 a:hover{text-decoration:underline;} #products li h4, #productsPictures li h4, #productsPicturesScroll li h4{padding:2px 8px 7px;font-weight:normal;font-size:0.917em;} #products li h4, #products li h4 a, #productsPictures li h4, #productsPictures li h4 a, #productsPicturesScroll li h4, #productsPicturesScroll li h4 a{background:inherit;color:#a78b65;} #products li h4 em, #productsPictures li h4 em, #productsPicturesScroll li h4 em{padding:0 5px;} #products li h4 a:hover, #productsPictures li h4 a:hover, #productsPicturesScroll li h4 a:hover{background-color:inherit;color:#d01c02;} #products li h5, #productsPictures li h5, #productsPicturesScroll li h5{font-size:1em;font-weight:normal;} #products li h5 a, #productsPictures li h5 a, #productsPicturesScroll li h5 a{background:inherit;color:#666;} #products .tPhotoArea, #productsPictures .tPhotoArea, #productsPicturesScroll .tPhotoArea{float:left;height:250px;margin:10px 45px 45px 0px;padding:0;width:250px;} #products .tPhotoDescr, #productsPictures .tPhotoDescr, #productsPicturesScroll .tPhotoDescr{margin:0px auto auto 0px;text-align:center;} #products .tPhotoDescr a, #productsPictures .tPhotoDescr a, #productsPicturesScroll .tPhotoDescr a{background:inherit;color:#7a7f91;font:normal 1em Verdana, sans-serif;text-decoration:none;} #products .tPhotoDescr a:hover, #productsPictures .tPhotoDescr a:hover, #productsPicturesScroll .tPhotoDescr a:hover{background:inherit;color:#dddddd;font:normal 1em Verdana, sans-serif;text-decoration:none;} #products .tPhotoDescr span, #productsPictures .tPhotoDescr span, #productsPicturesScroll .tPhotoDescr span{background:inherit;color:#7a7f91;font:normal 1em Verdana, sans-serif;text-decoration:none;} #products .tPhotoDescr span:hover, #productsPictures .tPhotoDescr span:hover, #productsPicturesScroll .tPhotoDescr span:hover{background:inherit;color:#dddddd;font:normal 1em Verdana, sans-serif;text-decoration:none;} #products .tPhotoSuperDescr, #productsPictures .tPhotoSuperDescr, #productsPicturesScroll .tPhotoSuperDescr{display:none;width:220px;padding:15px;background:rgb(230,232,248);color:rgb(62,65,76);border:solid 1px rgb(150,150,150);position:absolute;} #products .tPhotoSuperDescr a, #productsPictures .tPhotoSuperDescr a, #productsPicturesScroll .tPhotoSuperDescr a{color:#1b1e29;text-align:left;font:0.75em Verdana, sans-serif;text-decoration:none;} #products .tPhoto, #productsPictures .tPhoto, #productsPicturesScroll .tPhoto{text-align:center;vertical-align:middle;margin:0px 0px 2px 0px;} #products .tPhoto, #productsDefault .tPhoto{background:white;} #products .tPhoto img, #productsPictures .tPhoto img, #productsPicturesScroll .tPhoto img{margin:0 0;box-shadow:1px 1px 1px #312c32;} #products .tPhoto a:hover img, #productsPictures .tPhoto a:hover img, #productsPicturesScroll .tPhoto a:hover img{padding:-0px 0 0 0px;margin:-2px 0 0 -2px;box-shadow:2px 2px 4px #312c32;} #products li.pages, #productsPictures li.pages, #productsPicturesScroll li.pages{color:#7A7F91;text-decoration:none;} #products li.pages strong, #productsPictures li.pages strong, #productsPicturesScroll li.pages strong{border:0;background:left bottom;color:#ffffff;text-decoration:none;} #products li.pages a, #productsPictures li.pages a, #productsPicturesScroll li.pages a{background:left bottom;color:#7A7F91;text-decoration:none;} #products li.pages a:hover, #productsPictures li.pages a:hover, #productsPicturesScroll li.pages a:hover{background:left top;color:#DDDDDD;text-decoration:none;} #product, #productDefault, #productDefaultScroll, #productDefaultScrollVideo{float:left;display:block;margin:0 0 0px;padding:0 0 35px 30px;text-align:left;} #product h3, #productDefault h3, #productDefaultScroll h3, #productDefaultScrollVideo h3{padding:5px 0 18px 0;margin:0 0 0px;background:inherit;color:#9E9EA8;font:normal 2.1em Verdana, sans-serif;} #product h4, #productDefault h4, #productDefaultScroll h4, #productDefaultScrollVideo h4{margin:13px 0 10px;padding:5px 0 10px;border-bottom:1px solid #9d9ea8;font-weight:normal;font-size:0.917em;} #product h4, #product h4 a, #productDefault h4, #productDefault h4 a, #productDefaultScroll h4, #productDefaultScroll h4 a, #productDefaultScrollVideo h4, #productDefaultScrollVideo h4 a{background:inherit;color:#7a7f91;text-decoration:none;} #product h4 a:hover, #productDefault h4 a:hover, #productDefaultScroll h4 a:hover, #productDefaultScrollVideo h4 a:hover{color:#fff;text-decoration:none;} #product h4 em, #productDefault h4 em, #productDefaultScroll h4 em, #productDefaultScrollVideo h4 em{padding:0 5px;} #productX{margin:-11px 0 0 0;padding:27px 0 0 0;border-bottom:1px solid #9d9ea8;} #productDefaultScroll{float:left;display:block;margin:0 0 10px;padding:0 0 10px 30px;border-bottom:1px solid #9d9ea8;text-align:left;} #productDefaultScroll h3{margin:0 0 0px;padding:5px 0 18px 0px;background:inherit;color:#9E9EA8;font:normal 2.1em Verdana, sans-serif;} #productDefaultScroll h4{margin:13px 0 10px;padding:5px 0 10px;border-bottom:1px solid #9d9ea8;font-weight:normal;font-size:0.917em;} #productDefaultScroll h4, #product h4 a{background:inherit;color:#7a7f91;text-decoration:none;} #productDefaultScroll h4 a:hover{color:#434452;box-shadow:1px 1px 5px 0px #000;} #productDefaultScroll h4 em{padding:0 5px;} #productDefaultScrollVideo{float:left;display:block;margin:0 0 10px;padding:0 0 10px 30px;border-bottom:1px solid #9d9ea8;text-align:left;} #productDefaultScrollVideo h3{margin:0 0 0px;padding:5px 0 18px 0px;background:inherit;color:#9E9EA8;font:normal 2.1em Verdana, sans-serif;} #productDefaultScrollVideo h4{margin:13px 0 10px;padding:5px 0 10px;border-bottom:1px solid #9d9ea8;font-weight:normal;font-size:0.917em;} #productDefaultScrollVideo h4, #product h4 a{background:inherit;color:#7a7f91;text-decoration:none;} #productDefaultScrollVideo h4 a:hover{color:#434452;box-shadow:1px 1px 5px 0px #000;} #productDefaultScrollVideo h4 em{padding:0 5px;} #head3 #box1{float:right;width:400px;margin:2px 0 0px 0px;padding:0px 0 0 0px;background:#9e9ea8 url('img/basket_bg_bottom.gif') repeat-x 0 bottom;color:#fff;text-align:center;} #head3 #box1 form{font-weight:bold;} #head3 #box1 li{float:left;list-style:none;} #product div.content, #productDefault div.content, #productDefaultScroll div.content{clear:left;font:1.08em Verdana, sans-serif;color:#767986;} #product div.content strong, #productDefault div.content strong, #productDefaultScroll div.content strong{clear:left;font:1.08em Verdana, sans-serif;color:#9E9EA8;font-weight:bold;} #productDescription{padding:0px 0px 0px 0px;margin:5px 0px 15px 20px;} #product #productX li{list-style:none;} #productDefault #productX li{list-style:none;} #productDefaultScroll #productX li{list-style:none;} #productDefaultScrollVideo #productX li{list-style:none;} .imagesList{list-style:none;} .imagesList li{margin:0 10px 10px 0;background:inherit;color:#5b5b5b;font-size:0.917em;text-align:left;} .imagesList li img{margin:0px 0px 0px 0} .imagesList li div{text-align:left;} #productsMainFrame{display:block;list-style:none;} #productsMainFrameItem{height:410px;width:410px;float:left;margin:10px 10px 20px 0;list-style:none;background:inherit;color:#5b5b5b;font-size:0.917em;text-align:left;} #productsMainFrameItem img{border:2px solid #7A7F91;} #productsMainFrameItem a:hover img{border:2px solid #9AA0B7;} #productsMainFrameItem a{} #productsMainFrameItem div{text-align:left;} .productsMainFrameClass{list-style:none;} .productsMainFrameClass li{list-style:none;width:400px;} #productsMainFrameItemTitle{margin:0px auto auto 0px;width:400px;float:left;list-style:none;} #productsMainFrameItemTitle a{margin:0px auto auto 0px;width:400px;float:left;background:inherit;color:#5B5B5B;font-size:1em;text-align:left;text-decoration:none;} #productsMainFrameVideo{display:block;list-style:none;} #productsMainFrameItemVideo{float:left;margin:10px 10px 20px 0;list-style:none;background:inherit;color:#5b5b5b;font-size:0.917em;text-align:left;} #productsMainFrameItemVideo img{border:2px solid #7A7F91;} #productsMainFrameItemVideo a:hover img{border:2px solid #9AA0B7;} #productsMainFrameItemVideo a{} #productsMainFrameItemVideo div{text-align:left;} .productsMainFrameClassVideo{list-style:none;} .productsMainFrameClassVideo li{list-style:none;width:400px;} #productsMainFrameItemTitleVideo{margin:0px auto auto 0px;width:400px;list-style:none;} #productsMainFrameItemTitleVideo a{margin:0px auto auto 0px;width:400px;float:left;background:inherit;color:#5B5B5B;font-size:1em;text-align:left;text-decoration:none;} #imagesList2{clear:right;float:right;margin:10px 0 0 10px;} #page #imagesList1{margin:10px 10px 0 0;} #pagesPictures #imagesList1{margin:10px 10px 0 0;} #pagesPicturesScroll #imagesList1{margin:10px 10px 0 0;} #pagesTextlist #imagesList1{margin:10px 10px 0 0;} #product #imagesList2{clear:right;margin:5px 0 0 10px;} #productDefault #imagesList2{clear:right;margin:5px 0 0 10px;} #productDefaultScroll #imagesList2{clear:right;margin:5px 0 0 10px;} #productDefaultScrollVideo #imagesList2{clear:right;margin:5px 0 0 10px;} #product .imagesList#imagesList1 li div{width:200px;} #product .imagesList#imagesList2 li div{width:100px;margin:0;} #productDefault .imagesList#imagesList1 li div{width:200px;} #productDefault .imagesList#imagesList2 li div{width:100px;margin:0;} #productDefaultScroll .imagesList#imagesList1 li div{width:200px;} #productDefaultScroll .imagesList#imagesList2 li div{width:100px;margin:0;} #productDefaultScrollVideo .imagesList#imagesList1 li div{width:200px;} #productDefaultScrollVideo .imagesList#imagesList2 li div{width:100px;margin:0;} #productsDefaultScroll #imagesList2{clear:right;margin:5px 0 0 10px;} #productsDefaultScroll .imagesList, #imagesList1 li div{} #productsDefaultScroll .imagesList, #imagesList2 li div{width:100px;margin:0;} #productsDefaultScrollVideo #imagesList2{clear:right;margin:5px 0 0 10px;} #productsDefaultScrollVideo .imagesList, #imagesList1 li div{} #productsDefaultScrollVideo .imagesList, #imagesList2 li div{width:100px;margin:0;} #product .imagesList#imagesList2 li div{margin:0 auto;} * html #product .subpagesList li{margin:0;} #filesList{padding:5px 0;font-size:0.917em;list-style:none;vertical-align:middle;} #filesList li{margin:0 0 4px;} #filesList img{margin:0 8px 0 0;vertical-align:middle;} #filesList em{background:inherit;color:#5b5b5b;} .subpagesList{float:left;width:100%;margin:0 0 0 0px;padding:25px 0 0 0;list-style:none;border-top:1px solid #9D9EA8;} .subpagesList li{clear:left;float:left;width:90%;margin:0px 0;color:#7a7f91;font:normal 0.9em Verdana, sans-serif;} * html .subpagesList li{width:100%;} .subpagesList li{float:left;margin:9px 6px 5px 0px;} .subpagesList li img{border:2px solid #dcdac9;} .subpagesList li h4{padding-bottom:2px;} .subpagesList li h4{background-color:inherit;background:inherit;color:#7a7f91;font-weight:bold;font-size:1em;text-decoration:none;} .subpagesList li h4 a{background-color:inherit;background:inherit;color:#7a7f91;font-weight:bold;font-size:1em;text-decoration:none;vertical-align:290%;margin-left:10px;} .subpagesList li h4 a:hover{background-color:inherit;color:#dddddd;text-decoration:none;} .subpagesList li h5{font-weight:normal;font-size:1em;} .subpagesList li ul, .subpagesList li ol{float:left;margin:0 0 0 30px;padding:0;} .subpagesList li li{padding:0;border-left:0;} .subpagesList li ul{list-style:disc;} .subpagesList li ol{list-style:decimal;} .ListLevel2{float:left;height:140px;width:150px;margin:0 0 0 0;list-style:none;} .imageListLevel2{height:84px;width:122px;list-style:none;} .imageListLevel2 a img{box-shadow:5px 5px 10px;color:#19191D;} .imageListLevel2 a img:hover{margin:-2px 0 0 -2px;box-shadow:9px 9px 10px 0px;} .imageListLevel2 a{display:block;color:#9e9ea8;height:45px;text-align:center;} .imageListLevel2 a:hover{color:#dddddd;} .titleListLevel2{width:122px;height:45px;text-align:center;} .titleListLevel2 a{color:#9e9ea8;} .titleListLevel2 a:hover{color:#dddddd;box-shadow:1px 1px 5px 0px #000;} #options{float:right;margin:0px 0 0 0;padding:0px 10px 0px;background:inherit;color:#7f7f66;font-size:0.917em;text-align:right;} #options .back, #options .print{float:right;} #options a{padding:0 7px 0;background-color:transparent;color:#7a7f91;text-decoration:none;} #options a:hover{padding:0 7px 0;color:#fff;text-decoration:none;} #options .print a{border-left:1px solid #7f7f66;} .message{padding:40px 0;text-align:center;} #column2{display:none;float:right;width:100px;} #foot{clear:both;float:left;width:100%;height:38px;padding:1px 0 0;background:#transparent url('img/foot.gif') repeat-x;background-color:#2f2f2f;color:#7a7f91;font-size:1.08em;} #foot a{background-color:transparent;color:#7a7f91;text-decoration:none;} #foot a:hover{color:#fff;text-decoration:none;} #werbung{float:right;} #copy{float:left;padding:10px 10px;text-align:left;} #powered{float:right;padding:10px 10px;} } /* ========================================== 2. WSPÓLNA BAZA MOBILNA (KAŻDY TELEFON) ========================================== */ @media screen and (max-width: 900px) { body,h1,h2,h3,h4,h5,h6,p,form,fieldset,img,ul{margin:5px 0px 0px 0px;padding:0;border:0;} body,table{background-color:#282828;color:#222;font-size:2em;font-family:Verdana, Arial, sans-serif;} body{padding:2px 0;background:#282828;text-align:center;overflow:scroll;} .input, select, textarea{border:1px solid #9d9ea8;font:0.917em Arial, sans-serif;color:#FFF;} .submit{font:1em Arial, sans-serif;cursor:pointer;width:10%;height:70px} .hide{display:none;} a{background-color:inherit;color:#222;text-decoration:none;} .clear{clear:both;height:0px;font-size:0px;line-height:0px;} .skiplink{position:absolute;top:-500px;left:0px;overflow:hidden;} .left{text-align:left;} .center{text-align:center;} .right{text-align:right;} /* Główny kontener - robimy z niego "pływający pasek" */ #cookies_accept { position: fixed !important; bottom: 0 !important; left: 0 !important; width: 100% !important; z-index: 10000 !important; /* Nad wszystkim, nawet nad przyciskiem FB/Menu */ background: rgba(25, 25, 29, 0.95) !important; /* Ciemne, lekko przezroczyste tło */ border-top: 1px solid #434452 !important; box-shadow: 0 -5px 15px rgba(0,0,0,0.5) !important; padding: 0 !important; margin: 0 !important; } #cookies_accept_content { padding: 0 !important; margin: 0 !important; } /* Link jako duży, czytelny przycisk */ #cookies_accept_content a { display: block !important; padding: 15px 20px !important; color: #ceced6 !important; text-decoration: none !important; font-size: 0.8em !important; line-height: 1.3 !important; /* Optymalny odstęp dla 4 linii */ text-align: center !important; } /* Opcjonalnie: wyróżnienie, że to jest klikalne */ #cookies_accept_content a:active { background: #3f446e !important; } #container{ margin:0 auto; background:#282828; padding-bottom: 80px !important; /* 80px da idealny luz pod przycisk, */ } #main{margin:0 auto;border:8px solid #282828;text-align:center;} * html #main{} /* Ustawiamy flagi języków */ #language { position: absolute !important; top: 0 !important; right: 10px !important; /* Flagi wylądują w prawym górnym rogu */ margin: 0 !important; z-index: 100; } #language a { display: inline-block !important; padding: 47px 0px 0px 0px !important; } #language img { width: 30px !important; /* Stała, wygodna wielkość flagi */ height: auto !important; border-radius: 2px; box-shadow: 0 0 3px rgba(0,0,0,0.5); } #head1 a{float:right;} #head2 { width: 100% !important; height: 70px !important; display: flex !important; justify-content: center !important; /* To jest jedyny silnik centrujący */ align-items: center !important; margin: 0 0 0 0!important; padding: 0 !important; overflow: hidden !important; position: relative !important; } #logo { /* Usuwamy stary wymiar 100% i zastępujemy go szerokością Twojego logo */ width: 200px !important; height: 35px !important; float: none !important; margin: 0 !important; /* Flexbox w #head2 zajmie się resztą */ padding: 0 !important; position: static !important; } #logo h1, #logo h1 a { display: block !important; width: 200px !important; height: 35px !important; background-image: url('img/logo_dark_2026.png'); background-repeat: no-repeat; background-size: contain; background-position: center; margin: 0 !important; padding: 0 !important; text-indent: -9999px; overflow: hidden; float: left; } #logo img { width: 200px !important; height: 35px !important; display: block !important; margin: 0 !important; border: none !important; /* Usuwamy paddingi, które czasem przeglądarki dodają do obrazków */ padding: 0 !important; float:left; } #logo h2{clear:left;float:left;width:90%;padding:0 0 0 222px;background:inherit;color:#9d9ea8;font:bold 0.9em Tahoma, sans-serif;} * html #logo h2{width:100%;} /* #goToNumberFormID{margin:-2px 0px 0px 0px;padding:5px 6px 3px 0px;color:#7A7F91;text-decoration:none;} #goToNumberForm{margin:25px 0px 0px 0px;color:#7A7F91;text-decoration:none;} #goToNumberForm .input{font-size:2em;background-color:#282828;} #goToNumberForm .submit2{} #pagesBefore, #navipath{width:50%;overflow:hidden;padding:8px 0 6px 0px;margin:0px 0px 0px 0px;width:98%;color:#7A7F91;text-decoration:none;} #naviSwitch{margin:25px 0px 25px 0px;padding:5px 0px 7px 0px;color:#7A7F91;text-decoration:none;font-size:1em;width:100%} #navipath_bottom{overflow:hidden;padding:8px 0 6px 0px;margin:0px 0;width:98%;color:#7A7F91;text-decoration:none;border-top:1px solid #9D9EA8;} #pagesBefore, #navipath strong, #navipath_bottom strong, #naviSwitch strong{margin: 0px 0px 0px 10px;border:0;background:left bottom;color:#FFF;text-decoration:none;font-size:1.2em;} #pagesBefore, #navipath a, #navipath_bottom a, #naviSwitch a{margin: 0px 0px 0px 5px;background:left bottom;color:#7A7F91;text-decoration:none;font-size:1em;} #pagesBefore, #navipath a:hover, #navipath_bottom a:hover, #naviSwitch a:hover{background:left top;color:#c7c7c7;text-decoration:none;box-shadow:1px 1px 3px #434452;font-size:1em;} */ /* 1. KONTENER FORMULARZA "PRZEJDŹ DO STRONY" */ #goToNumberFormID { display: block !important; width: 100% !important; text-align: center !important; margin: 10px 0 0 0 !important; padding: 10px 0 0 0 !important; font-size: 0.7em !important; color: #7A7F91; } #goToNumberForm { display: inline-block !important; /* Pozwala formularzowi być w jednej linii z tekstem */ margin: 0 0 0 10px !important; padding: 0 !important; vertical-align: middle; } #goToNumberForm fieldset { border: none; padding: 0; margin: 0; } /* Pole tekstowe (numer strony) */ #goToNumberForm .input { width: 50px !important; height: 35px !important; font-size: 0.8em !important; background-color: #282828 !important; color: #FFF !important; border: 1px solid #434452 !important; text-align: center; border-radius: 4px; } /* Przycisk (Submit) - jeśli to ikona/obrazek */ #goToNumberForm .submit { width: 35px !important; height: 35px !important; vertical-align: middle; margin-left: 5px; background-color: #434452 !important; /* Przykładowe tło, jeśli value="" */ border: none; border-radius: 4px; } /* 2. PRZEŁĄCZNIK STRON (1 2 3... Następna) */ #naviSwitch, #navipath_bottom { display: block !important; width: 100% !important; text-align: center !important; white-space: nowrap !important; /* Kluczowe: zabrania łamania wiersza */ overflow-x: auto !important; /* Jeśli się nie zmieści, pozwoli na delikatny scroll boczny zamiast łamania */ padding: 10px 2px !important; letter-spacing: -0.5px; /* Delikatne zbliżenie znaków do siebie */ margin: 0px 0 !important; border-top: 1px solid #2a2a2e; border-bottom: 1px solid #2a2a2e; line-height: 1.2em !important; /* Zwiększa odstępy między rzędami dla palca */ } /* Wygląd numerów stron i linków */ #naviSwitch a, #naviSwitch strong, #navipath_bottom a, #navipath_bottom strong { display: inline-block !important; min-width: 28px; height: 30px; line-height: 30px !important; /* Centrowanie tekstu w przycisku */ margin: 2px 0px !important; padding: 0 3px !important; text-decoration: none !important; border-radius: 4px; font-size: 0.6em !important; } /* Aktywna strona */ #naviSwitch strong, #navipath_bottom strong { background: #434452 !important; color: #FFF !important; } /* Pozostałe strony */ #naviSwitch a, #navipath_bottom a { background: #1f1f23 !important; color: #7A7F91 !important; border: 1px solid #333; } /* Przycisk "Następna" */ #naviSwitch a.pNext, #navipath_bottom a.pNext { padding: 0 15px !important; width: auto !important; } /* Ukrywamy oryginalny tekst w przyciskach Następna/Poprzednia */ #naviSwitch a.pPrev, #naviSwitch a.pNext, #navipath_bottom a.pPrev, #navipath_bottom a.pNext { font-size: 0 !important; width: 30px !important; height: 30px !important; padding: 0 !important; position: relative !important; /* To jest kluczowe dla pozycjonowania strzałek */ display: inline-block !important; vertical-align: middle !important; overflow: hidden !important; } /* Wspólne style dla obu strzałek */ #naviSwitch a.pPrev::before, #naviSwitch a.pNext::after, #navipath_bottom a.pPrev::before, #navipath_bottom a.pNext::after { font-size: 16px !important; position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; /* Idealne wycentrowanie w pionie i poziomie */ line-height: 1 !important; color: #7A7F91; display: block !important; } /* Definiujemy konkretne znaki */ #naviSwitch a.pPrev::before, #navipath_bottom a.pPrev::before { content: "\00AB" !important; } #naviSwitch a.pNext::after, #navipath_bottom a.pNext::after { content: "\00BB" !important; } /* Jeśli używasz kropek "...", też je odchudzamy */ #naviSwitch span, #navipath_bottom span { margin: 0 1px !important; color: #7A7F91; } /* Poprawka dla kontenera, aby strzałki nie "pływały" */ #naviSwitch, #navipath_bottom { line-height: 1 !important; /* Resetujemy line-height, bo teraz centrowanie robimy transformem */ } #head3{float:left;width:100%;border-top:2px solid #222222;background:#222222 url('img/nav-mobile.gif');} #body{ clear:both; float:left; width:100%; margin:10px 0; background-color:#transparent; } #orderbody{margin:1px 0;clear:both;float:left;width:100%;background:#transparent;} #column{ margin:-15px 0 0px 0; width:100%; background:#2F2F2F; } #column .type{ margin:0 0 0 0; padding:5px 0 5px 15px; background:#e6e6e6 url('img/nav-mobile.gif'); color:#9e9ea8; /*font-weight:bold;*/ font-size:0.9em; } /* +++++++++++++++++++++++ P R Z Y C I S K S H O W / H I D E M E N U ++++++++++++++++++++++++++++++++++++++++++++++ */ #buttonHS a { display: flex !important; align-items: center; /* Środkowanie w pionie */ justify-content: center; /* Środkowanie w poziomie */ width: 100%; height: 100%; } #buttonHS { position: fixed !important; /* Odkleja go od struktury strony */ bottom: 10px !important; /* Pływa w prawym dolnym rogu (pod kciukiem) */ right: 10px !important; z-index: 9999 !important; /* Zawsze na wierzchu wszystkiego */ overflow: hidden !important; /* To ucina wszystko, co wystaje poza koło */ background: rgba(70, 76, 119, 0.3) !important; /* 0.3 oznacza 30% widoczności (70% przezroczystości) */ border-radius: 50% !important; /* Robi z niego okrągły przycisk */ width: 60px !important; height: 60px !important; display: flex !important; align-items: center; justify-content: center; transform: none !important; /* Wyłączamy ten obrót 270st */ box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5) !important; } #buttonHSText { /*color: #9e9ea8 !important;*/ color: rgba(158, 158, 168, 1) !important; font-size: 0.6em !important; padding: 0px; margin: 0px; text-align: center; text-decoration: none; background-color: transparent !important; } /* +++++++++++++++++++++++ P R Z Y C I S K F A C E B O O K ++++++++++++++++++++++++++++++++++++++++++++++ */ #fbButtonMobile { position: fixed !important; bottom: 85px !important; right: 10px !important; z-index: 9998 !important; width: 60px !important; height: 60px !important; background: rgba(70, 76, 119, 0.3) !important; /* 0.3 oznacza 30% widoczności (70% przezroczystości) */ border-radius: 50% !important; background-color: transparent !important; /* ZMIANA: tutaj ustawiamy display na flex, ale przycisk i tak zniknie, gdy jego rodzic (#column) zostanie ukryty przez JS */ display: flex !important; align-items: center; justify-content: center; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5) !important; } #fbButtonMobile a { color: rgba(158, 158, 168, 1) !important; font-size: 0.6em; } /* Jeśli Twoje menu działa na zasadzie klasy .active na #column, możesz dla pewności dodać to (ale nie jest to konieczne, jeśli rodzic znika): */ #column[style*="display: none"] #fbButtonMobile { display: none !important; } /* +++++++++++++++++++++++ S T R E F A S E A R C H ++++++++++++++++++++++++++++++++++++++++++++++ */ /* Kontener bezpośredni dla input i submit */ #searchForm fieldset { display: block !important; /* Wymusza idealne przyleganie */ text-align: center !important; white-space: nowrap !important; /* Wymusza trzymanie elementów w jednej linii */ border: none !important; padding: 0 !important; } /* Ukrywamy kontenery span i em, żeby nie dodawały marginesów */ #searchForm fieldset span, #searchForm fieldset em { display: inline !important; margin: 0 !important; padding: 0 !important; } /* Kontener całego formularza */ #column #searchForm { margin: 0 !important; padding: 15px !important; background: #2F2F2F !important; text-align: center; } /* Pole wpisywania tekstu */ #column #searchForm .input { display: inline-block !important; width: 70% !important; /* Zajmuje większość szerokości paska */ height: 45px !important; /* Wygodna wysokość pod palec */ margin: 0 !important; font-size: 0.6em !important; /* Zmniejszamy z 2em, żeby tekst nie był gigantyczny */ background-color: #1a1a1a !important; border: 1px solid #444 !important; border-radius: 5px 0 0 5px !important; /* Zaokrąglone tylko lewe rogi */ color: #7a7f91 !important; padding-left: 10px !important; /* 2px to bardzo mało, 10px da ładny, profesjonalny odstęp */ padding-right: 10px !important; /* Żeby tekst nie znikał gwałtownie przy prawej krawędzi */ vertical-align: middle !important; box-sizing: border-box !important; } /* Przycisk wysyłania (ten, gdzie była lupa) */ #searchForm .submit { display: inline-block !important; width: 25% !important; /* Reszta szerokości */ height: 43px !important; /* Taka sama wysokość jak input */ /* KLUCZ DO ŚRODKOWANIA: */ line-height: 43px !important; /* Dokładnie tyle samo co height */ margin: 0 !important; padding: 0 !important; /* Zerujemy padding, żeby nie spychał tekstu */ /* Przesunięcie o -1px/ -4px jeśli nadal jest szparka między nimi */ margin-left: -5px !important; background-color: #464C77 !important; /* Twój granatowy kolor */ color: #7a7f91 !important; border: 1px solid #464C77 !important; border-radius: 0 5px 5px 0 !important; /* Zaokrąglone tylko prawe rogi */ font-size: 0.6em !important; text-align: center; vertical-align: middle !important; cursor: pointer; transition: background 0.3s; /* Płynna zmiana koloru */ box-sizing: border-box !important; } /* EFEKT NACIŚNIĘCIA (zamiast onMouseOver w JS) */ #searchForm .submit:active, #searchForm .submit:hover { background: #5a6199 !important; /* Rozjaśniony granat przy dotknięciu */ box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5) !important; } /* STAN 1: Normalny wygląd przycisku */ #menu3 a, #menu4 a, #menu5 a, #menu7 a { background-color: #464C77; color: #7a7f91; display: block; margin: 15px auto; padding: 6px 6%; text-decoration: none; background-image: none !important; } #menu3 ul, #menu4 ul, #menu5 ul, #menu6 ul, #menu7 ul{ margin: 0px 0 0 0; padding: 10px 15px 11px; background: #transparent; list-style: none; } /* STAN 2 i 3: Reakcja na dotyk (pacnięcie) */ #menu3 a:hover, #menu4 a:hover, #menu5 a:hover, #menu7 a:hover, #menu3 a:active, #menu4 a:active, #menu5 a:active, #menu7 a:active { background-color: #fff !important; color: #333 !important; display:block; margin: 15px auto; /*padding:6px 6%;*/ color:#c7c7c7; text-decoration:none; background-image: none !important; } /* STAN 4: Aktywna zakładka (tu teraz jestem) */ #menu3 .selected, #menu4 .selected, #menu5 .selected, #menu7 .selected { background-color: #989CE4 !important; color: #FFF !important; font-weight: bold; } #menu3 .l0 a, #menu4 .l0 a, #menu5 .l0 a, #menu6 .l0 a, #menu7 .l0 a{ font-size:0.8em; height: auto; width:100%; } #menu3 .l0 a:hover, #menu4 .l0 a:hover, #menu5 .l0 a:hover, #menu6 .l0 a:hover, #menu7 .l0 a:hover{ font-size:0.8em; height: auto; width:100% } #menu3 .l1 a, #menu4 .l1 a, #menu5 .l1 a, #menu6 .l1 a, #menu7 .l1 a{ font-size:0.7em; height:auto; width:80%; display: block; text-align: center; margin: 15px auto; } #menu3 .l1 a:hover, #menu4 .l1 a:hover, #menu5 .l1 a:hover, #menu6 .l1 a:hover, #menu7 .l1 a:hover{ font-size:0.7em; height:auto; width:80%; display: block; text-align: center; margin: 15px auto; } #menu3 .l0 .sub1{ } #menu3 .sub1 a, #menu4 .sub1 a, #menu5 .sub1 a, #menu6 .sub1 a, #menu7 .sub1 a{ border:0; background-color: #353469; margin: 15px auto; } #menu3 .sub1 a:hover, #menu4 .sub1 a:hover, #menu5 .sub1 a:hover, #menu6 .sub1 a:hover, #menu7 .sub1 a:hover{ border:0; background-color: #4d4d99; margin: 15px auto; } #menu3 .sub2 a, #menu4 .sub2 a, #menu5 .sub2 a, #menu6 .sub2 a, #menu7 .sub2 a{padding-left:18%;} #menu3 .sub3 a, #menu4 .sub3 a, #menu5 .sub3 a, #menu6 .sub3 a, #menu7 .sub3 a{padding-left:21%;} * html #menu3 a, * html #menu4 a, * html #menu3 .sub1 a, * html #menu4 .sub1 a, * html #menu5 a, * html #menu6 a, * html #menu5 .sub1 a, * html #menu6 .sub1 a, * html #menu7 a, * html #menu7 .sub1 a{width:100%;} #menu3 .selected, #menu4 .selected, #menu5 .selected, #menu6 .selected, #menu7 .selected{ margin: 15px auto; background-color:#989CE4; color:#FFF; /*font-weight:bold*/ } #menu3 .selected a:hover, #menu4 .selected a:hover, #menu5 .selected a:hover, #menu6 .selected a:hover, #menu7 .selected a:hover{ margin: 15px auto; background-color:inherit; color:#FFF; /*font-weight:bold*/ } /* CIACH*/ #pagesPicturesScroll{float:left;display:block;margin:0 0 6px 0;padding:0 0 10px 0px;text-align:left;} #pagesTextlist{float:left;display:block;margin:0 0 6px 0;padding:0 0 10px 0px;text-align:left;} #page h3, .message h3{margin:0 0 0px;padding:5px 0 18px 0px;background:inherit;color:#9E9EA8;font:normal 2.1em Verdana, sans-serif;} #pagesPictures h3, #pagesPicturesScroll h3{ margin:0 0 0px; padding:5px 10px 0px 0px; background:inherit; color:#9E9EA8; font:normal 0.8em Verdana, sans-serif; } #pagesTextlist h3{margin:0 0 0px;padding:5px 10px 18px 0px;background:inherit;color:#9E9EA8;font:normal 2.1em Verdana, sans-serif;} #licznikDiv{ margin:0px 0 0px 0px; padding:0px 10px 21px 0px; background:inherit; text-align:center; font:normal 0.8em Verdana, sans-serif; } #licznikDiv a{color:#9E9EA8;} .message h3, #page .message h3{border:0;} #page div.content{font:1.08em Verdana, sans-serif;color:#7A7F91} #pagesPictures div.content, #pagesPicturesScroll div.content, #pagesTextlist div.content{font:1.08em Verdana, sans-serif;color:#7A7F91} #pageDescription{font:1.08em Verdana, sans-serif;color:#7A7F91;border-top:1px solid #9d9ea8;margin-top:28px;} #page #basket{height:507px;overflow:scroll;} #page .tS, #product .tS{float:right;margin:0 0 3px;} #page .tS div, #product .tS div{display:inline;} #page .tS a, #product .tS a{margin:0 2px;padding:0 1px;background:inherit;color:#222;font-weight:bold;text-decoration:none;} #page .tS0, #product .tS0{font-size:0.92em;} #page .tS1, #product .tS1{font-size:1.08em;} #page .tS2, #product .tS2{font-size:1.33em;} #pagesPictures #basket, #pagesPicturesScroll #basket, #pagesTextlist #basket{height:507px;overflow:scroll;} #pagesPictures .tS, #product .tS{float:right;margin:0 0 3px;} #pagesPictures .tS div, #product .tS div{display:inline;} #pagesPictures .tS a, #product .tS a{margin:0 2px;padding:0 1px;background:inherit;color:#222;font-weight:bold;text-decoration:none;} #pagesPictures .tS0, #product .tS0{font-size:0.92em;} #pagesPictures .tS1, #product .tS1{font-size:1.08em;} #pagesPictures .tS2, #product .tS2{font-size:1.33em;} #pagesPicturesScroll .tS{float:right;margin:0 0 3px;} #pagesPicturesScroll .tS div{display:inline;} #pagesPicturesScroll .tS a{margin:0 2px;padding:0 1px;background:inherit;color:#222;font-weight:bold;text-decoration:none;} #pagesPicturesScroll .tS0{font-size:0.92em;} #pagesPicturesScroll .tS1{font-size:1.08em;} #pagesPicturesScroll .tS2{font-size:1.33em;} /* 1. KONTENER GŁÓWNY - resetujemy marginesy i paddingi */ #pagesTextlist { width: 100% !important; margin: 0 0 0 0 !important; padding: 0 15px 0 15px !important; float: none !important; box-sizing: border-box !important; } /* 2. TYTUŁ RELACJI (H3) - zmniejszamy z 2.1em */ #pagesTextlist h3 { font-size: 0.8em !important; padding: 10px 0 !important; line-height: 1.2 !important; text-align: center; } /* 3. TEKST (Akapity i klasy z MS Worda) */ #pageDescription p, #pageDescription .MsoNormal { font-size: 1rem !important; /* Czytelna wielkość na telefon */ line-height: 1.5 !important; margin-bottom: 15px !important; color: #ceced6 !important; text-align: left !important; } /* 4. ZDJĘCIA W TREŚCI - kluczowy element */ #pageDescription img { max-width: 100% !important; /* Zdjęcie nigdy nie wyjdzie poza ekran */ height: auto !important; /* Zachowanie proporcji */ display: block !important; margin: 20px auto !important; /* Centrowanie zdjęć i odstęp od tekstu */ box-shadow: 0 5px 15px rgba(0,0,0,0.5); border: none !important; } /* 5. RESETOWANIE SZEROKOŚCI DLA ELEMENTÓW Z WORD-A */ /* Czasem edytory wrzucają sztywne width w style inline */ #pageDescription * { max-width: 100% !important; box-sizing: border-box !important; } /* CIACH*/ #products li, #productsPictures li, #productsPicturesScroll li{clear:both;float:left;width:96%;padding:5px 2% 10px;border-bottom:1px solid #9d9ea8;} #productsPicturesScrollVideo, #productsMainFrameVideo{float:left;width:100%;padding:2px 0 0 0;list-style:none;border-top:1px solid #9d9ea8;} #productsPicturesScrollVideo li{clear:both;float:left;width:96%;padding:5px 2% 10px;border-bottom:1px solid #9d9ea8;} * html #products li{width:100%;} * html #productsPictures li{width:100%} * html #productsPicturesScroll li{width:100%} #products li .photo, #productsPictures li .photo, #productsPicturesScroll li .photo{float:left;margin:0 7px 5px 0;font-size:0px;line-height:0px;} #products li .photo img, #productsPictures li .photo img, #productsPicturesScroll li .photo img{border:2px solid #dddddd;} #products li .photo a:hover img, #productsPictures li .photo a:hover img, #productsPicturesScroll li .photo a:hover img{border:2px solid #dcc7a7;} #products li h3, #productsPictures li h3, #productsPicturesScroll li h3{padding:5px 8px 0;background:inherit;font-weight:normal;font-size:1.5em;border:0;} #products li h3 a, #productsPictures li h3 a, #productsPicturesScroll li h3 a{background:inherit;color:#d01c02;text-decoration:none;} #products li h3 a:hover, #productsPictures li h3 a:hover, #productsPicturesScroll li h3 a:hover{text-decoration:underline;} #products li h4, #productsPictures li h4, #productsPicturesScroll li h4{padding:2px 8px 7px;font-weight:normal;font-size:0.917em;} #products li h4, #products li h4 a, #productsPictures li h4, #productsPictures li h4 a, #productsPicturesScroll li h4, #productsPicturesScroll li h4 a{background:inherit;color:#a78b65;} #products li h4 em, #productsPictures li h4 em, #productsPicturesScroll li h4 em{padding:0 5px;} #products li h4 a:hover, #productsPictures li h4 a:hover, #productsPicturesScroll li h4 a:hover{background-color:inherit;color:#d01c02;} #products li h5, #productsPictures li h5, #productsPicturesScroll li h5{font-size:1em;font-weight:normal;} #products li h5 a, #productsPictures li h5 a, #productsPicturesScroll li h5 a{background:inherit;color:#666;} /* CIACH*/ #products .tPhoto a:hover img, #productsPictures .tPhoto a:hover img, #productsPicturesScroll .tPhoto a:hover img{padding:-0px 0 0 0px;margin:-2px 0 0 -2px;box-shadow:2px 2px 4px #312c32;} #products li.pages, #productsPictures li.pages, #productsPicturesScroll li.pages{color:#7A7F91;text-decoration:none;} #products li.pages strong, #productsPictures li.pages strong, #productsPicturesScroll li.pages strong{border:0;background:left bottom;color:#ffffff;text-decoration:none;} #products li.pages a, #productsPictures li.pages a, #productsPicturesScroll li.pages a{background:left bottom;color:#7A7F91;text-decoration:none;} #products li.pages a:hover, #productsPictures li.pages a:hover, #productsPicturesScroll li.pages a:hover{background:left top;color:#DDDDDD;text-decoration:none;} #product, #productDefault, #productDefaultScroll, #productDefaultScrollVideo{float:left;display:block;margin:0 0 0px;padding:0 0 35px 30px;text-align:left;} #product h3, #productDefault h3, #productDefaultScroll h3, #productDefaultScrollVideo h3{padding:5px 0 18px 0;margin:0 0 0px;background:inherit;color:#9E9EA8;font:normal 2.1em Verdana, sans-serif;} #product h4, #productDefault h4, #productDefaultScroll h4, #productDefaultScrollVideo h4{margin:13px 0 10px;padding:5px 0 10px;border-bottom:1px solid #9d9ea8;font-weight:normal;font-size:0.917em;} #product h4, #product h4 a, #productDefault h4, #productDefault h4 a, #productDefaultScroll h4, #productDefaultScroll h4 a, #productDefaultScrollVideo h4, #productDefaultScrollVideo h4 a{background:inherit;color:#7a7f91;text-decoration:none;} #product h4 a:hover, #productDefault h4 a:hover, #productDefaultScroll h4 a:hover, #productDefaultScrollVideo h4 a:hover{color:#fff;text-decoration:none;} #product h4 em, #productDefault h4 em, #productDefaultScroll h4 em, #productDefaultScrollVideo h4 em{padding:0 5px;} #productX{margin:-11px 0 0 0;padding:27px 0 0 0;border-bottom:1px solid #9d9ea8;} #productDefaultScroll{float:left;display:block;margin:0 0 10px;padding:0 0 10px 30px;border-bottom:1px solid #9d9ea8;text-align:left;} #productDefaultScroll h3{margin:0 0 0px;padding:5px 0 18px 0px;background:inherit;color:#9E9EA8;font:normal 2.1em Verdana, sans-serif;} #productDefaultScroll h4{margin:13px 0 10px;padding:5px 0 10px;border-bottom:1px solid #9d9ea8;font-weight:normal;font-size:0.917em;} #productDefaultScroll h4, #product h4 a{background:inherit;color:#7a7f91;text-decoration:none;} #productDefaultScroll h4 a:hover{color:#434452;box-shadow:1px 1px 5px 0px #000;} #productDefaultScroll h4 em{padding:0 5px;} #productDefaultScrollVideo{float:left;display:block;margin:0 0 10px;padding:0 0 10px 30px;border-bottom:1px solid #9d9ea8;text-align:left;} #productDefaultScrollVideo h3{margin:0 0 0px;padding:5px 0 18px 0px;background:inherit;color:#9E9EA8;font:normal 2.1em Verdana, sans-serif;} #productDefaultScrollVideo h4{margin:13px 0 10px;padding:5px 0 10px;border-bottom:1px solid #9d9ea8;font-weight:normal;font-size:0.917em;} #productDefaultScrollVideo h4, #product h4 a{background:inherit;color:#7a7f91;text-decoration:none;} #productDefaultScrollVideo h4 a:hover{color:#434452;box-shadow:1px 1px 5px 0px #000;} #productDefaultScrollVideo h4 em{padding:0 5px;} #head3 #box1{float:right;width:400px;margin:2px 0 0px 0px;padding:0px 0 0 0px;background:#9e9ea8 url('img/basket_bg_bottom.gif') repeat-x 0 bottom;color:#fff;text-align:center;} #head3 #box1 form{font-weight:bold;} #head3 #box1 li{float:left;list-style:none;} #product div.content, #productDefault div.content, #productDefaultScroll div.content{clear:left;font:1.08em Verdana, sans-serif;color:#767986;} #product div.content strong, #productDefault div.content strong, #productDefaultScroll div.content strong{clear:left;font:1.08em Verdana, sans-serif;color:#9E9EA8;font-weight:bold;} #productDescription{padding:0px 0px 0px 0px;margin:25px 0px 15px 20px;} #product #productX li{list-style:none;} #productDefault #productX li{list-style:none;} #productDefaultScroll #productX li{list-style:none;} #productDefaultScrollVideo #productX li{list-style:none;} .imagesList{list-style:none;} .imagesList li{margin:0 10px 10px 0;background:inherit;color:#5b5b5b;font-size:0.917em;text-align:left;} .imagesList li img{margin:25px 0px 0px 0;width:100%} .imagesList li div{text-align:left;} #productsMainFrame{display:block;list-style:none;} #productsMainFrameItem{height:410px;width:410px;float:left;margin:10px 10px 20px 0;list-style:none;background:inherit;color:#5b5b5b;font-size:0.917em;text-align:left;} #productsMainFrameItem img{border:2px solid #7A7F91;} #productsMainFrameItem a:hover img{border:2px solid #9AA0B7;} #productsMainFrameItem a{} #productsMainFrameItem div{text-align:left;} .productsMainFrameClass{list-style:none;} .productsMainFrameClass li{list-style:none;width:400px;} #productsMainFrameItemTitle{margin:0px auto auto 0px;width:400px;float:left;list-style:none;} #productsMainFrameItemTitle a{margin:0px auto auto 0px;width:400px;float:left;background:inherit;color:#5B5B5B;font-size:1em;text-align:left;text-decoration:none;} #productsMainFrameVideo{display:block;list-style:none;} #productsMainFrameItemVideo{float:left;margin:10px 10px 20px 0;list-style:none;background:inherit;color:#5b5b5b;font-size:0.917em;text-align:left;} #productsMainFrameItemVideo img{border:2px solid #7A7F91;} #productsMainFrameItemVideo a:hover img{border:2px solid #9AA0B7;} #productsMainFrameItemVideo a{} #productsMainFrameItemVideo div{text-align:left;} .productsMainFrameClassVideo{list-style:none;} .productsMainFrameClassVideo li{list-style:none;width:400px;} #productsMainFrameItemTitleVideo{margin:0px auto auto 0px;width:400px;list-style:none;} #productsMainFrameItemTitleVideo a{margin:0px auto auto 0px;width:400px;float:left;background:inherit;color:#5B5B5B;font-size:1em;text-align:left;text-decoration:none;} #imagesList2{clear:right;float:right;margin:10px 0 0 10px;} #page #imagesList1{margin:10px 10px 0 0;} #pagesPictures #imagesList1{margin:10px 10px 0 0;} #pagesPicturesScroll #imagesList1{margin:10px 10px 0 0;} #pagesTextlist #imagesList1{margin:10px 10px 0 0;} #product #imagesList2{clear:right;margin:5px 0 0 10px;} #productDefault #imagesList2{clear:right;margin:5px 0 0 10px;} #productDefaultScroll #imagesList2{clear:right;margin:5px 0 0 10px;} #productDefaultScrollVideo #imagesList2{clear:right;margin:5px 0 0 10px;} #product .imagesList#imagesList1 li div{width:200px;} #product .imagesList#imagesList2 li div{width:100px;margin:0;} #productDefault .imagesList#imagesList1 li div{width:200px;} #productDefault .imagesList#imagesList2 li div{width:100px;margin:0;} #productDefaultScroll .imagesList#imagesList1 li div{width:200px;} #productDefaultScroll .imagesList#imagesList2 li div{width:100px;margin:0;} #productDefaultScrollVideo .imagesList#imagesList1 li div{width:200px;} #productDefaultScrollVideo .imagesList#imagesList2 li div{width:100px;margin:0;} #productsDefaultScroll #imagesList2{clear:right;margin:5px 0 0 10px;} #productsDefaultScroll .imagesList, #imagesList1 li div{} #productsDefaultScroll .imagesList, #imagesList2 li div{width:100px;margin:0;} #productsDefaultScrollVideo #imagesList2{clear:right;margin:5px 0 0 10px;} #productsDefaultScrollVideo .imagesList, #imagesList1 li div{} #productsDefaultScrollVideo .imagesList, #imagesList2 li div{width:100px;margin:0;} html>/**/body #product .imagesList#imagesList2 li div{margin:0 auto;} * html #product .subpagesList li{margin:0;} #filesList{padding:5px 0;font-size:0.917em;list-style:none;vertical-align:middle;} #filesList li{margin:0 0 4px;} #filesList img{margin:0 8px 0 0;vertical-align:middle;} #filesList em{background:inherit;color:#5b5b5b;} /* .subpagesList{float:left;width:100%;margin:0 0 0 0px;padding:25px 0 0 0;list-style:none;border-top:1px solid #9D9EA8;} .subpagesList li{clear:left;float:left;width:90%;margin:0px 0;color:#7a7f91;font:normal 0.9em Verdana, sans-serif;} * html .subpagesList li{width:100%;} .subpagesList li{float:left;margin:9px 6px 5px 0px;} .subpagesList li img{border:2px solid #dcdac9;} .subpagesList li h4{padding-bottom:2px;} .subpagesList li h4{background-color:inherit;background:inherit;color:#7a7f91;font-weight:bold;font-size:1em;text-decoration:none;} .subpagesList li h4 a{background-color:inherit;background:inherit;color:#7a7f91;font-weight:bold;font-size:1em;text-decoration:none;vertical-align:290%;margin-left:10px;} .subpagesList li h4 a:hover{background-color:inherit;color:#dddddd;text-decoration:none;} .subpagesList li h5{font-weight:normal;font-size:1em;} .subpagesList li ul, .subpagesList li ol{float:left;margin:0 0 0 30px;padding:0;} .subpagesList li li{padding:0;border-left:0;} .subpagesList li ul{list-style:disc;} .subpagesList li ol{list-style:decimal;} .ListLevel2{float:left;width:100%;margin:0 0 0 0;list-style:none;} .Level2{height:102px;width:152px;list-style:none;} .imageListLevel2 a img{float:left;margin:0px 10px 10px 0px;box-shadow:5px 5px 10px;color:#19191D;width:30%;} .imageListLevel2 a img:hover{float:left;margin:-2px 10px 10px -2px;box-shadow:9px 9px 10px 0px;width:30%;} .imageListLevel2 a{float:left;color:#9e9ea8;text-align:left;font-size:1.5em;width:100%;} .imageListLevel2 a:hover{color:#dddddd;text-align:left;float:left;font-size:1.5em;width:100%;} .titleListLevel2{width:152px;height:45px;margin:5px 0px 0px 0px;text-align:center;font-size:1.2em;} .titleListLevel2 a{color:#9e9ea8;} .titleListLevel2 a:hover{color:#dddddd;box-shadow:1px 1px 5px 0px;color:#19191D;} /* #options{float:right;margin:0px 0 0 0;padding:0px 10px 0px;background:inherit;color:#7f7f66;font-size:0.917em;text-align:right;} #options .back, #options .print{float:right;} #options a{padding:0 7px 0;background-color:transparent;color:#7a7f91;text-decoration:none;} #options a:hover{padding:0 7px 0;color:#fff;text-decoration:none;} #options .print a{border-left:1px solid #7f7f66;} .message{padding:40px 0;text-align:center;} #column2{display:none;} /* +++++++++++++++++++++++ G A T U N K I ++++++++++++++++++++++++++++++++++++++++++++++ */ /* Pojedynczy wiersz/kafelek */ /* Nadpisujemy sztywny kontener desktopowy (150x140px) */ .ListLevel2 { float: none !important; width: 100% !important; height: auto !important; margin: 0 0 15px 0 !important; display: block !important; min-height: 90px !important; clear: both !important; } /* Resetujemy kontener obrazka */ .imageListLevel2 { float: none !important; width: 100% !important; height: auto !important; display: block !important; } /* Cały wiersz jako link - wymuszamy układ poziomy */ .imageListLevel2 a { display: block !important; width: 100% !important; height: auto !important; min-height: 80px !important; text-align: left !important; /* USUWA SPACJE MIĘDZY INLINE-BLOCKAMI: */ font-size: 0 !important; white-space: nowrap !important; /* Blokuje łamanie między foto a tekstem */ } /* Ikona - wymuszamy stały wymiar 120x80 */ .imageListLevel2 a img { display: inline-block !important; float: none !important; vertical-align: middle !important; width: 120px !important; height: 80px !important; margin: 0 15px 0 5px !important; box-shadow: 5px 5px 10px #19191D !important; } /* Pomocnik wyrównania - tworzy niewidoczny słup o wysokości 80px */ .imageListLevel2 a::before { content: ""; display: inline-block; height: 80px; /* Wysokość Twojej ikony */ vertical-align: middle; width: 0; /* Niewidoczny */ } /* Tekst obok zdjęcia */ .imageListLevel2 a span { display: inline-block !important; float: none !important; vertical-align: middle !important; /* ZMIANA: używamy rem lub px zamiast em, aby obejść font-size: 0 u rodzica */ font-size: 22px !important; color: #9e9ea8 !important; line-height: 1.2 !important; /* OGRANICZA SZEROKOŚĆ: */ width: calc(100% - 155px) !important; white-space: normal !important; /* Dodatkowo wymuszamy widoczność, gdyby desktopowe style go ukrywały */ visibility: visible !important; opacity: 1 !important; } /* Zapewniamy, że kontener nadrzędny pomieści zawartość */ .ListLevel2 { } /* Efekt hover dla całego paska na mobile */ .imageListLevel2 a:hover { background-color: #1f1f23 !important; color: #dddddd !important; } /* Wyłączamy desktopowe przesunięcie obrazka na hover */ .imageListLevel2 a img:hover { margin: 0 15px 0 5px !important; } /* +++++++++++++++++++++++ S T O P K A ++++++++++++++++++++++++++++++++++++++++++++++ */ #foot { height: auto !important; /* Usuwamy sztywne 38px, bo napisy zajmą więcej linii */ padding: 10px 0 !important; line-height: 1.2 !important; /* Ciaśniejsze składanie tekstu */ background-image: none !important; /* Usuwamy stary obrazek tła */ background-color: #232323 !important; text-align: center !important; float: none !important; width: 100% !important; } #foot #copy, #foot #powered, #foot #werbung { float: none !important; width: 100% !important; padding: 5px 0 !important; margin: 0 !important; text-align: center !important; /* Wszystko na środek */ font-size: 0.4em !important; /* Zmniejszamy czcionkę z Twojego 1.08em */ } /* 2. Niwelujemy odstępy między blokami Copyright i Powered */ #foot #copy, #foot #powered { padding: 2px 0 !important; /* Zmniejszone z poprzednich 5px/10px */ margin: 0 !important; display: block !important; float: none !important; } #foot a { display: inline-block; padding: 0 5px !important; /* Marginesy tylko po bokach linków */ } /* Ukrywamy ikonę W3C, jeśli uznasz, że tylko zabiera miejsce */ #werbung img { height: 25px !important; width: auto !important; margin-top: 10px; } } /* ========================================== 3. TYLKO PION MOBILE (PORTRAIT) ========================================== */ @media screen and (max-width: 768px) and (orientation: portrait) { html, body { overflow-x: hidden; /* Blokuje przewijanie na boki na poziomie całej strony */ width: 100%; position: relative; } /* +++++++++++++++++++++++ P A S E K A L F A B E T Y C Z N Y ++++++++++++++++++++++++++++++++++++++++++++++ */ .alphabet-nav { position: fixed; right: 15px; top: 13%; /* Wyżej/niżej zależnie od potrzeb */ width: 30px; /* Szerokość paska */ display: flex; /* KLUCZ: Wysokość to 100% ekranu minus np. 60px na Twoje przyciski na dole */ /* Dostosuj wartość 60px tak, aby pasek kończył się nad przyciskami */ height: calc(100vh - 300px); flex-direction: column; align-items: center; background: rgba(0, 0, 0, 0.1); /* Delikatne tło */ border-radius: 10px; overflow-y: auto; /* Włącza przewijanie liter wewnątrz tego okienka */ padding: 5px 0; z-index: 9999; font-family: sans-serif; line-height: 1.4; } .alphabet-nav a { color: #9e9ea8; padding: 8px 10px; /* Wyraźne odstępy dla palca */ text-decoration: none; font-size: 11px; font-weight: bold; display: block; width: 100%; text-align: center; } #container, #main, #content { width: 100% !important; max-width: 100vw; /* Viewport Width - nie pozwoli wyjść poza fizyczny ekran */ margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; box-sizing: border-box; /* Bardzo ważne: padding nie powiększa już szerokości elementu */ } * { box-sizing: border-box; /* Stosujemy to do wszystkich elementów, żeby marginesy ich nie rozpychały */ } #content{width:100%;float:left;padding:10px 0 0px 0px;margin: 0 0 8px 0px;text-align:center;background-color:#transparent;} #page{ float:left; display:block; margin:0 0 6px 0; padding:0 0 10px 0px; text-align:left; } #pagesPictures{ float:left; display:block; margin: 0px 0 6px 0; padding:0 0 10px 0px; text-align:center; /* naprawa różnic w wywołaniu tej samej strony */ /* Wymuszamy pełną szerokość */ width: 100% !important; max-width: 100% !important; /* Resetujemy ewentualne marginesy boczne, które mogą spychać element */ margin-left: 0 !important; margin-right: 0 !important; /* Resetujemy floaty, które mogą powodować zwężenie kontenera do zawartości */ float: none !important; display: block !important; /* Dodatkowo, aby upewnić się, że nic nie wystaje */ box-sizing: border-box !important; } /* +++++++++++++++++++++++ Z D J Ę C I A ++++++++++++++++++++++++++++++++++++++++++++++ */ #products, #productsPictures, #productsPicturesScroll, #productsMainFrame{ /*float:left; width:100%; padding:2px 0 0 0; list-style:none; border-top:1px solid #9d9ea8;*/ /* Wymuszamy reset wszystkiego, co mogło być w sekcji desktopowej */ float: none !important; display: block !important; margin: 10px 0 !important; /* Zerujemy boki, zostawiamy góra/dół */ padding: 0 !important; /* To usunie ten fioletowy pasek z Inspektora! */ width: 100% !important; text-align: center !important; } #products .tPhotoArea, #productsPictures .tPhotoArea, #productsPicturesScroll .tPhotoArea{ /*float:left; margin:20px 45px 45px 0px; padding:0; width:100%;*/ float: none !important; /* Wyłączamy opływanie */ clear: both !important; /* Czyścimy przedpole - nikt nie wejdzie obok */ width: 98% !important; /* Prawie cała szerokość */ margin: 0 auto 50px auto !important; /* Duży margines na dole (40px) dla oddechu */ display: block !important; height: auto !important; /* Pozwalamy kafelkowi urosnąć tyle, ile potrzebuje zdjęcie */ overflow: visible !important; /* Żeby opisy nie zostały ucięte */ text-align: center !important; /* To wycentruje wszystko w środku (zdjęcie i tekst) */ } #products .tPhotoDescr, #productsPictures .tPhotoDescr, #productsPicturesScroll .tPhotoDescr{margin:10px auto auto 0px;text-align:center;font-size:1.2em;} #products .tPhotoDescr a, #productsPictures .tPhotoDescr a, #productsPicturesScroll .tPhotoDescr a{ background:inherit; color:#7a7f91; font:normal 1em Verdana, sans-serif; text-decoration:none; } #products .tPhotoDescr a:hover, #productsPictures .tPhotoDescr a:hover, #productsPicturesScroll .tPhotoDescr a:hover{ background:inherit; color:#dddddd; font:normal 1em Verdana, sans-serif; text-decoration:none; } #products .tPhotoDescr span, #productsPictures .tPhotoDescr span, #productsPicturesScroll .tPhotoDescr span{ background:inherit; color:#7a7f91; font:normal 0.5em Verdana, sans-serif; text-decoration:none; line-height: 1.1 !important; /* Bardzo ciasny odstęp między nazwą a numerem */ display: block; /* Wymuszamy, by span zachowywał się jak blok */ padding-top: 5px; } #products .tPhotoDescr span:hover, #productsPictures .tPhotoDescr span:hover, #productsPicturesScroll .tPhotoDescr span:hover{ background:inherit; color:#7a7f91; font:normal 0.5em Verdana, sans-serif; text-decoration:none; } #products .tPhotoSuperDescr, #productsPictures .tPhotoSuperDescr, #productsPicturesScroll .tPhotoSuperDescr{display:none;width:220px;padding:15px;background:rgb(230,232,248);color:rgb(62,65,76);border:solid 1px rgb(150,150,150);position:absolute;} #products .tPhotoSuperDescr a, #productsPictures .tPhotoSuperDescr a, #productsPicturesScroll .tPhotoSuperDescr a{color:#1b1e29;text-align:left;font:0.75em Verdana, sans-serif;text-decoration:none;} #products .tPhoto, #productsPictures .tPhoto, #productsPicturesScroll .tPhoto{ /*text-align:center; vertical-align:middle; margin:0px 0px 2px 0px;*/ float: none !important; display: block !important; width: 100% !important; margin-bottom: 10px !important; height: auto !important; /* Usuwamy sztywną wysokość, jeśli była */ text-align: center; } #products .tPhoto, #productsDefault .tPhoto{background:white;} #products .tPhoto img, #productsPictures .tPhoto img, #productsPicturesScroll .tPhoto img{ /*width: 100% !important; height: auto; margin:0 auto;*/ float: none !important; width: 100% !important; /* Nie rozciągamy na siłę do 100% szerokości ekranu */ height: auto !important; max-width: 96% !important; /* Ale nie pozwalamy mu wyjść poza ekran */ max-height: 70vh !important; /* Żeby pionowe zdjęcia nie były "kilometrowe" */ display: inline-block !important; /* Pozwala na centrowanie przez text-align: center */ box-sizing: border-box; margin:0 auto !important; text-align: center; } /* +++++++++++++++++++++++ G A T U N K I ++++++++++++++++++++++++++++++++++++++++++++++ */ /* Główny kontener listy */ .subpagesList { float: left !important; width: 86% !important; margin: 20px 0 0 0 !important; padding: 1px 0 0 0 !important; list-style: none !important; border-top: 1px solid #9d9ea8 !important; } } /* ========================================== 4. TYLKO POZIOM (LANDSCAPE) ========================================== */ @media screen and (max-height: 500px) and (orientation: landscape) { html, body { overflow-x: hidden; /* Blokuje przewijanie na boki na poziomie całej strony */ width: 100%; position: relative; } /* +++++++++++++++++++++++ P A S E K A L F A B E T Y C Z N Y ++++++++++++++++++++++++++++++++++++++++++++++ */ .alphabet-nav { position: fixed; right: 21px; top: 5%; /* Wyżej/niżej zależnie od potrzeb */ width: 35px; /* Szerokość paska */ /* KLUCZ: Wysokość to 100% ekranu minus np. 60px na Twoje przyciski na dole */ /* Dostosuj wartość 60px tak, aby pasek kończył się nad przyciskami */ height: calc(100vh - 210px); overflow-y: auto; /* Włącza przewijanie pionowe, gdy liter jest za dużo */ display: flex; flex-direction: column; align-items: center; background: rgba(0, 0, 0, 0.3); /* Delikatne tło */ border-radius: 10px; padding: 5px 0px 0px 0px; z-index: 9999; font-family: sans-serif; line-height: 1.4; } .alphabet-nav a { color: #9e9ea8; padding: 8px 10px; /* Wyraźne odstępy dla palca */ text-decoration: none; font-size: 11px; font-weight: bold; display: block; width: 100%; text-align: center; } #container, #main, #content { width: 100% !important; max-width: 100vw; /* Viewport Width - nie pozwoli wyjść poza fizyczny ekran */ margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; box-sizing: border-box; /* Bardzo ważne: padding nie powiększa już szerokości elementu */ } * { box-sizing: border-box; /* Stosujemy to do wszystkich elementów, żeby marginesy ich nie rozpychały */ } #content{ width:100%; float: none !important; padding:10px 0 0px 0px; margin: 0px 0 8px 0px; text-align:center; background-color:#transparent; } #page{ float: none !important; display:block; margin:0 0 6px 0; padding:0 0 10px 0px; text-align:left; } #pagesPictures{ float: none !important; display:block; margin:10px 50px 6px 0; padding:0 0 10px 0px; text-align:center; } #products, #productsPictures, #productsPicturesScroll, #productsMainFrame{ /*float:left; width:100%; padding:2px 0 0 0; list-style:none; border-top:1px solid #9d9ea8;*/ /* Wymuszamy reset wszystkiego, co mogło być w sekcji desktopowej */ float: none !important; display: block !important; margin: 10px 0 !important; /* Zerujemy boki, zostawiamy góra/dół */ padding: 0 !important; /* To usunie ten fioletowy pasek z Inspektora! */ width: 100% !important; text-align: center !important; } #products .tPhotoArea, #productsPictures .tPhotoArea, #productsPicturesScroll .tPhotoArea{ /*float:left; margin:20px 45px 45px 0px; padding:0; width:100%;*/ float: none !important; /* Wyłączamy opływanie */ display: inline-block !important; height: auto !important; /* Pozwalamy kafelkowi urosnąć tyle, ile potrzebuje zdjęcie */ overflow: visible !important; /* Żeby opisy nie zostały ucięte */ text-align: center !important; /* To wycentruje wszystko w środku (zdjęcie i tekst) */ /* MAGIA: */ width: 300px !important; /* Stała szerokość kafelka */ max-width: 48% !important; /* Ale na bardzo małych ekranach nie więcej niż połowa */ margin: 10px !important; /* Odstępy między kafelkami */ clear: none !important; vertical-align: top; } #products .tPhotoDescr, #productsPictures .tPhotoDescr, #productsPicturesScroll .tPhotoDescr{margin:10px auto auto 0px;text-align:center;font-size:1.2em;} #products .tPhotoDescr a, #productsPictures .tPhotoDescr a, #productsPicturesScroll .tPhotoDescr a{background:inherit;color:#7a7f91;font:normal 1em Verdana, sans-serif;text-decoration:none;} #products .tPhotoDescr a:hover, #productsPictures .tPhotoDescr a:hover, #productsPicturesScroll .tPhotoDescr a:hover{background:inherit;color:#dddddd;font:normal 1em Verdana, sans-serif;text-decoration:none;} #products .tPhotoDescr span, #productsPictures .tPhotoDescr span, #productsPicturesScroll .tPhotoDescr span{ background:inherit; color:#7a7f91; font:normal 0.5em Verdana, sans-serif; text-decoration:none; line-height: 1.1 !important; /* Bardzo ciasny odstęp między nazwą a numerem */ display: block; /* Wymuszamy, by span zachowywał się jak blok */ padding-top: 5px; } #products .tPhotoDescr span:hover, #productsPictures .tPhotoDescr span:hover, #productsPicturesScroll .tPhotoDescr span:hover{ background:inherit; color:#7a7f91; font:normal 0.5em Verdana, sans-serif; text-decoration:none; } #products .tPhotoSuperDescr, #productsPictures .tPhotoSuperDescr, #productsPicturesScroll .tPhotoSuperDescr{display:none;width:220px;padding:15px;background:rgb(230,232,248);color:rgb(62,65,76);border:solid 1px rgb(150,150,150);position:absolute;} #products .tPhotoSuperDescr a, #productsPictures .tPhotoSuperDescr a, #productsPicturesScroll .tPhotoSuperDescr a{color:#1b1e29;text-align:left;font:0.75em Verdana, sans-serif;text-decoration:none;} #products .tPhoto, #productsPictures .tPhoto, #productsPicturesScroll .tPhoto{ /*text-align:center; vertical-align:middle; margin:0px 0px 2px 0px;*/ float: none !important; display: block !important; width: 100% !important; margin-bottom: 10px !important; height: auto !important; /* Usuwamy sztywną wysokość, jeśli była */ text-align: center; } #products .tPhoto, #productsDefault .tPhoto{background:white;} #products .tPhoto img, #productsPictures .tPhoto img, #productsPicturesScroll .tPhoto img{ /*width: 100% !important; height: auto; margin:0 auto;*/ float: none !important; width: auto !important; /* Nie rozciągamy na siłę do 100% szerokości ekranu */ height: auto !important; max-width: 100% !important; /* Ale nie pozwalamy mu wyjść poza ekran */ max-height: 55vh !important; /* Żeby pionowe zdjęcia nie były "kilometrowe" */ display: inline-block !important; /* Pozwala na centrowanie przez text-align: center */ box-sizing: border-box; margin:0 auto !important; } /* +++++++++++++++++++++++ G A T U N K I ++++++++++++++++++++++++++++++++++++++++++++++ */ /* Główny kontener listy */ .subpagesList { float: left !important; width: 100% !important; margin: 20px 0 0 0 !important; padding: 1px 0 0 0 !important; list-style: none !important; border-top: 1px solid #9d9ea8 !important; } }