/* ============================================================================ interactive-image.bgpw.css Kopia InteractiveMap/interactive-image.min.css BEZ deklaracji fontu ikon. Oryginal zostaje nietkniety - ten plik ma trafic do TEGO SAMEGO katalogu /InteractiveMap/, bo url(...) w srodku bylby wzgledny. Co zostalo usuniete i dlaczego: @font-face{font-family:icomoon; src:url(fonts/interactive-image-icomoon...)} [class*=" icon-"],[class^=icon-]{font-family:icomoon; ...} .icon-radio-checked:before{content:"\EA54"} Oryginalna regula pasowala do KAZDEGO elementu w serwisie, ktorego klasa zaczyna sie od "icon-" - m.in. #back-to-top.icon-uparrow w stopce szablonu i w dymkach mapy - a jej @font-face nosil te sama nazwe rodziny co icomoon Joomli. Dzis wygrywa Joomla, bo jej arkusz laduje sie pozniej. Usuniecie tych trzech regul utrwala ten stan: icomoon jest wiodacy zawsze, niezaleznie od kolejnosci arkuszy w . Ten plik odpowiada wiec wylacznie za uklad mapy. Wszystkie jego reguly sa schowane pod .interactive-image i nie dotykaja niczego poza nia. JESLI po wgraniu znikna znaczniki punktow na mapie, znaczy to, ze glif bral sie z fontu InteractiveMap, a nie z icomoon. Wtedy dopisz na koncu pliku: @font-face{font-family:interactive-image-icons;src:url(fonts/interactive-image-icomoon.woff) format("woff")} .interactive-image .hotspot{font-family:interactive-image-icons} .interactive-image .icon-radio-checked:before{content:"\EA54"} To zawezenie dotyczy tylko wnetrza mapy - reszta serwisu nadal zostaje przy icomoon. ============================================================================ */ .interactive-image{font-family:Arial,sans-serif;position:relative;z-index:1;caret-color:transparent;cursor:default} .interactive-image .unsupported-screen{display:none;width:120px;margin:20px auto;padding:20px;color:#1d2129;box-shadow:0 3px 5px rgba(0,0,0,.6);font-size:13px} @media screen and (max-width:320px){.interactive-image{background-image:none;background-color:#fff;max-width:320px}.interactive-image .unsupported-screen{display:block}} .interactive-image .hotspot{position:absolute;z-index:2;width:30px;height:30px;color:#C0D1C8;/*display:none;*/cursor:pointer;font-size:28px} .interactive-image .hotspot:hover{text-shadow:0 0 3px #fff} .interactive-image .picture{max-width:200px;max-height:200px} .interactive-image .item{position:absolute;z-index:3;background-color:#fff;color:#1d2129;min-width:100px;min-height:60px;height:auto;display:none;text-align:center;border-radius:2px;box-shadow:0 3px 5px rgba(0,0,0,.6)} .interactive-image .item:after,.interactive-image .item:before{bottom:100%;left:50%;border:solid transparent;content:" ";height:0;width:0;position:absolute;/*pointer-events:none*/} .interactive-image .item:after{border-bottom-color:#fff;border-width:7px;margin-left:-7px} .interactive-image .audio-item{padding:15px;max-width:300px;text-align:left} .interactive-image audio{width:270px;margin-bottom:-4px} .interactive-image .picture-item{position:relative;max-width:200px;max-height:200px;margin:15px} .interactive-image .picture-item:before{content:attr(data-caption);position:absolute;background:rgba(0,0,0,.6);color:#fff;padding:5px;right:0;bottom:0;left:0;text-align:center;font-size:12px} .interactive-image .picture-item .picture{margin-bottom:-4px} .interactive-image .provider-item{padding:15px} .interactive-image iframe{width:400px;height:225px;margin-bottom:-4px} .interactive-image .text-item{padding:15px;max-width:300px} .interactive-image .text-item .title{font-size:18px;width:100%;text-align:left;font-family:Lato,Arial,sans-serif;font-weight:600;text-transform:uppercase;/*font-variant:small-caps*/;display:inline-block;color:#333} .interactive-image .text-item .description{text-align:left;font-size:16px;font-weight:400;margin-top:10px;margin-bottom:0} .interactive-image .text-item .picture{margin-top:15px;margin-bottom:-2px} .interactive-image .text-item a{text-decoration:underline;color:#000;/*display:block*/margin-top:10px} .interactive-image .text-item a:active,.interactive-image .text-item a:hover,.interactive-image .text-item a:visited{color:#1d2129} .interactive-image .video-item{padding:15px;text-align:left} .interactive-image .caption{display:block;margin-bottom:15px} .interactive-image video{width:400px;margin-bottom:-4px}