1/* required styles */ 2 3.leaflet-pane, 4.leaflet-tile, 5.leaflet-marker-icon, 6.leaflet-marker-shadow, 7.leaflet-tile-container, 8.leaflet-pane > svg, 9.leaflet-pane > canvas, 10.leaflet-zoom-box, 11.leaflet-image-layer, 12.leaflet-layer { 13 position: absolute; 14 left: 0; 15 top: 0; 16 } 17.leaflet-container { 18 overflow: hidden; 19 } 20.leaflet-tile, 21.leaflet-marker-icon, 22.leaflet-marker-shadow { 23 -webkit-user-select: none; 24 -moz-user-select: none; 25 user-select: none; 26 -webkit-user-drag: none; 27 } 28/* Safari renders non-retina tile on retina better with this, but Chrome is worse */ 29.leaflet-safari .leaflet-tile { 30 image-rendering: -webkit-optimize-contrast; 31 } 32/* hack that prevents hw layers "stretching" when loading new tiles */ 33.leaflet-safari .leaflet-tile-container { 34 width: 1600px; 35 height: 1600px; 36 -webkit-transform-origin: 0 0; 37 } 38.leaflet-marker-icon, 39.leaflet-marker-shadow { 40 display: block; 41 } 42/* .leaflet-container svg: reset svg max-width decleration shipped in Joomla! (joomla.org) 3.x */ 43/* .leaflet-container img: map is broken in FF if you have max-width: 100% on tiles */ 44.leaflet-container .leaflet-overlay-pane svg, 45.leaflet-container .leaflet-marker-pane img, 46.leaflet-container .leaflet-shadow-pane img, 47.leaflet-container .leaflet-tile-pane img, 48.leaflet-container img.leaflet-image-layer, 49.leaflet-container .leaflet-tile { 50 max-width: none !important; 51 max-height: none !important; 52 } 53 54.leaflet-container.leaflet-touch-zoom { 55 -ms-touch-action: pan-x pan-y; 56 touch-action: pan-x pan-y; 57 } 58.leaflet-container.leaflet-touch-drag { 59 -ms-touch-action: pinch-zoom; 60 /* Fallback for FF which doesn't support pinch-zoom */ 61 touch-action: none; 62 touch-action: pinch-zoom; 63} 64.leaflet-container.leaflet-touch-drag.leaflet-touch-zoom { 65 -ms-touch-action: none; 66 touch-action: none; 67} 68.leaflet-container { 69 -webkit-tap-highlight-color: transparent; 70} 71.leaflet-container a { 72 -webkit-tap-highlight-color: rgba(51, 181, 229, 0.4); 73} 74.leaflet-tile { 75 filter: inherit; 76 visibility: hidden; 77 } 78.leaflet-tile-loaded { 79 visibility: inherit; 80 } 81.leaflet-zoom-box { 82 width: 0; 83 height: 0; 84 -moz-box-sizing: border-box; 85 box-sizing: border-box; 86 z-index: 800; 87 } 88/* workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=888319 */ 89.leaflet-overlay-pane svg { 90 -moz-user-select: none; 91 } 92 93.leaflet-pane { z-index: 400; } 94 95.leaflet-tile-pane { z-index: 200; } 96.leaflet-overlay-pane { z-index: 400; } 97.leaflet-shadow-pane { z-index: 500; } 98.leaflet-marker-pane { z-index: 600; } 99.leaflet-tooltip-pane { z-index: 650; } 100.leaflet-popup-pane { z-index: 700; } 101 102.leaflet-map-pane canvas { z-index: 100; } 103.leaflet-map-pane svg { z-index: 200; } 104 105.leaflet-vml-shape { 106 width: 1px; 107 height: 1px; 108 } 109.lvml { 110 behavior: url(#default#VML); 111 display: inline-block; 112 position: absolute; 113 } 114 115 116/* control positioning */ 117 118.leaflet-control { 119 position: relative; 120 z-index: 800; 121 pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */ 122 pointer-events: auto; 123 } 124.leaflet-top, 125.leaflet-bottom { 126 position: absolute; 127 z-index: 1000; 128 pointer-events: none; 129 } 130.leaflet-top { 131 top: 0; 132 } 133.leaflet-right { 134 right: 0; 135 } 136.leaflet-bottom { 137 bottom: 0; 138 } 139.leaflet-left { 140 left: 0; 141 } 142.leaflet-control { 143 float: left; 144 clear: both; 145 } 146.leaflet-right .leaflet-control { 147 float: right; 148 } 149.leaflet-top .leaflet-control { 150 margin-top: 10px; 151 } 152.leaflet-bottom .leaflet-control { 153 margin-bottom: 10px; 154 } 155.leaflet-left .leaflet-control { 156 margin-left: 10px; 157 } 158.leaflet-right .leaflet-control { 159 margin-right: 10px; 160 } 161 162 163/* zoom and fade animations */ 164 165.leaflet-fade-anim .leaflet-tile { 166 will-change: opacity; 167 } 168.leaflet-fade-anim .leaflet-popup { 169 opacity: 0; 170 -webkit-transition: opacity 0.2s linear; 171 -moz-transition: opacity 0.2s linear; 172 transition: opacity 0.2s linear; 173 } 174.leaflet-fade-anim .leaflet-map-pane .leaflet-popup { 175 opacity: 1; 176 } 177.leaflet-zoom-animated { 178 -webkit-transform-origin: 0 0; 179 -ms-transform-origin: 0 0; 180 transform-origin: 0 0; 181 } 182.leaflet-zoom-anim .leaflet-zoom-animated { 183 will-change: transform; 184 } 185.leaflet-zoom-anim .leaflet-zoom-animated { 186 -webkit-transition: -webkit-transform 0.25s cubic-bezier(0,0,0.25,1); 187 -moz-transition: -moz-transform 0.25s cubic-bezier(0,0,0.25,1); 188 transition: transform 0.25s cubic-bezier(0,0,0.25,1); 189 } 190.leaflet-zoom-anim .leaflet-tile, 191.leaflet-pan-anim .leaflet-tile { 192 -webkit-transition: none; 193 -moz-transition: none; 194 transition: none; 195 } 196 197.leaflet-zoom-anim .leaflet-zoom-hide { 198 visibility: hidden; 199 } 200 201 202/* cursors */ 203 204.leaflet-interactive { 205 cursor: pointer; 206 } 207.leaflet-grab { 208 cursor: -webkit-grab; 209 cursor: -moz-grab; 210 cursor: grab; 211 } 212.leaflet-crosshair, 213.leaflet-crosshair .leaflet-interactive { 214 cursor: crosshair; 215 } 216.leaflet-popup-pane, 217.leaflet-control { 218 cursor: auto; 219 } 220.leaflet-dragging .leaflet-grab, 221.leaflet-dragging .leaflet-grab .leaflet-interactive, 222.leaflet-dragging .leaflet-marker-draggable { 223 cursor: move; 224 cursor: -webkit-grabbing; 225 cursor: -moz-grabbing; 226 cursor: grabbing; 227 } 228 229/* marker & overlays interactivity */ 230.leaflet-marker-icon, 231.leaflet-marker-shadow, 232.leaflet-image-layer, 233.leaflet-pane > svg path, 234.leaflet-tile-container { 235 pointer-events: none; 236 } 237 238.leaflet-marker-icon.leaflet-interactive, 239.leaflet-image-layer.leaflet-interactive, 240.leaflet-pane > svg path.leaflet-interactive { 241 pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */ 242 pointer-events: auto; 243 } 244 245/* visual tweaks */ 246 247.leaflet-container { 248 background: #ddd; 249 outline: 0; 250 } 251.leaflet-container a { 252 color: #0078A8; 253 } 254.leaflet-container a.leaflet-active { 255 outline: 2px solid orange; 256 } 257.leaflet-zoom-box { 258 border: 2px dotted #38f; 259 background: rgba(255,255,255,0.5); 260 } 261 262 263/* general typography */ 264.leaflet-container { 265 font: 12px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif; 266 } 267 268 269/* general toolbar styles */ 270 271.leaflet-bar { 272 box-shadow: 0 1px 5px rgba(0,0,0,0.65); 273 border-radius: 4px; 274 } 275.leaflet-bar a, 276.leaflet-bar a:hover { 277 background-color: #fff; 278 border-bottom: 1px solid #ccc; 279 width: 26px; 280 height: 26px; 281 line-height: 26px; 282 display: block; 283 text-align: center; 284 text-decoration: none; 285 color: black; 286 } 287.leaflet-bar a, 288.leaflet-control-layers-toggle { 289 background-position: 50% 50%; 290 background-repeat: no-repeat; 291 display: block; 292 } 293.leaflet-bar a:hover { 294 background-color: #f4f4f4; 295 } 296.leaflet-bar a:first-child { 297 border-top-left-radius: 4px; 298 border-top-right-radius: 4px; 299 } 300.leaflet-bar a:last-child { 301 border-bottom-left-radius: 4px; 302 border-bottom-right-radius: 4px; 303 border-bottom: none; 304 } 305.leaflet-bar a.leaflet-disabled { 306 cursor: default; 307 background-color: #f4f4f4; 308 color: #bbb; 309 } 310 311.leaflet-touch .leaflet-bar a { 312 width: 30px; 313 height: 30px; 314 line-height: 30px; 315 } 316.leaflet-touch .leaflet-bar a:first-child { 317 border-top-left-radius: 2px; 318 border-top-right-radius: 2px; 319 } 320.leaflet-touch .leaflet-bar a:last-child { 321 border-bottom-left-radius: 2px; 322 border-bottom-right-radius: 2px; 323 } 324 325/* zoom control */ 326 327.leaflet-control-zoom-in, 328.leaflet-control-zoom-out { 329 font: bold 18px 'Lucida Console', Monaco, monospace; 330 text-indent: 1px; 331 } 332 333.leaflet-touch .leaflet-control-zoom-in, .leaflet-touch .leaflet-control-zoom-out { 334 font-size: 22px; 335 } 336 337 338/* layers control */ 339 340.leaflet-control-layers { 341 box-shadow: 0 1px 5px rgba(0,0,0,0.4); 342 background: #fff; 343 border-radius: 5px; 344 } 345.leaflet-control-layers-toggle { 346 background-image: url(images/layers.png); 347 width: 36px; 348 height: 36px; 349 } 350.leaflet-retina .leaflet-control-layers-toggle { 351 background-image: url(images/layers-2x.png); 352 background-size: 26px 26px; 353 } 354.leaflet-touch .leaflet-control-layers-toggle { 355 width: 44px; 356 height: 44px; 357 } 358.leaflet-control-layers .leaflet-control-layers-list, 359.leaflet-control-layers-expanded .leaflet-control-layers-toggle { 360 display: none; 361 } 362.leaflet-control-layers-expanded .leaflet-control-layers-list { 363 display: block; 364 position: relative; 365 } 366.leaflet-control-layers-expanded { 367 padding: 6px 10px 6px 6px; 368 color: #333; 369 background: #fff; 370 } 371.leaflet-control-layers-scrollbar { 372 overflow-y: scroll; 373 overflow-x: hidden; 374 padding-right: 5px; 375 } 376.leaflet-control-layers-selector { 377 margin-top: 2px; 378 position: relative; 379 top: 1px; 380 } 381.leaflet-control-layers label { 382 display: block; 383 } 384.leaflet-control-layers-separator { 385 height: 0; 386 border-top: 1px solid #ddd; 387 margin: 5px -10px 5px -6px; 388 } 389 390/* Default icon URLs */ 391.leaflet-default-icon-path { 392 background-image: url(images/marker-icon.png); 393 } 394 395 396/* attribution and scale controls */ 397 398.leaflet-container .leaflet-control-attribution { 399 background: #fff; 400 background: rgba(255, 255, 255, 0.7); 401 margin: 0; 402 } 403.leaflet-control-attribution, 404.leaflet-control-scale-line { 405 padding: 0 5px; 406 color: #333; 407 } 408.leaflet-control-attribution a { 409 text-decoration: none; 410 } 411.leaflet-control-attribution a:hover { 412 text-decoration: underline; 413 } 414.leaflet-container .leaflet-control-attribution, 415.leaflet-container .leaflet-control-scale { 416 font-size: 11px; 417 } 418.leaflet-left .leaflet-control-scale { 419 margin-left: 5px; 420 } 421.leaflet-bottom .leaflet-control-scale { 422 margin-bottom: 5px; 423 } 424.leaflet-control-scale-line { 425 border: 2px solid #777; 426 border-top: none; 427 line-height: 1.1; 428 padding: 2px 5px 1px; 429 font-size: 11px; 430 white-space: nowrap; 431 overflow: hidden; 432 -moz-box-sizing: border-box; 433 box-sizing: border-box; 434 435 background: #fff; 436 background: rgba(255, 255, 255, 0.5); 437 } 438.leaflet-control-scale-line:not(:first-child) { 439 border-top: 2px solid #777; 440 border-bottom: none; 441 margin-top: -2px; 442 } 443.leaflet-control-scale-line:not(:first-child):not(:last-child) { 444 border-bottom: 2px solid #777; 445 } 446 447.leaflet-touch .leaflet-control-attribution, 448.leaflet-touch .leaflet-control-layers, 449.leaflet-touch .leaflet-bar { 450 box-shadow: none; 451 } 452.leaflet-touch .leaflet-control-layers, 453.leaflet-touch .leaflet-bar { 454 border: 2px solid rgba(0,0,0,0.2); 455 background-clip: padding-box; 456 } 457 458 459/* popup */ 460 461.leaflet-popup { 462 position: absolute; 463 text-align: center; 464 margin-bottom: 20px; 465 } 466.leaflet-popup-content-wrapper { 467 padding: 1px; 468 text-align: left; 469 border-radius: 12px; 470 } 471.leaflet-popup-content { 472 margin: 13px 19px; 473 line-height: 1.4; 474 } 475.leaflet-popup-content p { 476 margin: 18px 0; 477 } 478.leaflet-popup-tip-container { 479 width: 40px; 480 height: 20px; 481 position: absolute; 482 left: 50%; 483 margin-left: -20px; 484 overflow: hidden; 485 pointer-events: none; 486 } 487.leaflet-popup-tip { 488 width: 17px; 489 height: 17px; 490 padding: 1px; 491 492 margin: -10px auto 0; 493 494 -webkit-transform: rotate(45deg); 495 -moz-transform: rotate(45deg); 496 -ms-transform: rotate(45deg); 497 transform: rotate(45deg); 498 } 499.leaflet-popup-content-wrapper, 500.leaflet-popup-tip { 501 background: white; 502 color: #333; 503 box-shadow: 0 3px 14px rgba(0,0,0,0.4); 504 } 505.leaflet-container a.leaflet-popup-close-button { 506 position: absolute; 507 top: 0; 508 right: 0; 509 padding: 4px 4px 0 0; 510 border: none; 511 text-align: center; 512 width: 18px; 513 height: 14px; 514 font: 16px/14px Tahoma, Verdana, sans-serif; 515 color: #c3c3c3; 516 text-decoration: none; 517 font-weight: bold; 518 background: transparent; 519 } 520.leaflet-container a.leaflet-popup-close-button:hover { 521 color: #999; 522 } 523.leaflet-popup-scrolled { 524 overflow: auto; 525 border-bottom: 1px solid #ddd; 526 border-top: 1px solid #ddd; 527 } 528 529.leaflet-oldie .leaflet-popup-content-wrapper { 530 zoom: 1; 531 } 532.leaflet-oldie .leaflet-popup-tip { 533 width: 24px; 534 margin: 0 auto; 535 536 -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)"; 537 filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678); 538 } 539.leaflet-oldie .leaflet-popup-tip-container { 540 margin-top: -1px; 541 } 542 543.leaflet-oldie .leaflet-control-zoom, 544.leaflet-oldie .leaflet-control-layers, 545.leaflet-oldie .leaflet-popup-content-wrapper, 546.leaflet-oldie .leaflet-popup-tip { 547 border: 1px solid #999; 548 } 549 550 551/* div icon */ 552 553.leaflet-div-icon { 554 background: #fff; 555 border: 1px solid #666; 556 } 557 558 559/* Tooltip */ 560/* Base styles for the element that has a tooltip */ 561.leaflet-tooltip { 562 position: absolute; 563 padding: 6px; 564 background-color: #fff; 565 border: 1px solid #fff; 566 border-radius: 3px; 567 color: #222; 568 white-space: nowrap; 569 -webkit-user-select: none; 570 -moz-user-select: none; 571 -ms-user-select: none; 572 user-select: none; 573 pointer-events: none; 574 box-shadow: 0 1px 3px rgba(0,0,0,0.4); 575 } 576.leaflet-tooltip.leaflet-clickable { 577 cursor: pointer; 578 pointer-events: auto; 579 } 580.leaflet-tooltip-top:before, 581.leaflet-tooltip-bottom:before, 582.leaflet-tooltip-left:before, 583.leaflet-tooltip-right:before { 584 position: absolute; 585 pointer-events: none; 586 border: 6px solid transparent; 587 background: transparent; 588 content: ""; 589 } 590 591/* Directions */ 592 593.leaflet-tooltip-bottom { 594 margin-top: 6px; 595} 596.leaflet-tooltip-top { 597 margin-top: -6px; 598} 599.leaflet-tooltip-bottom:before, 600.leaflet-tooltip-top:before { 601 left: 50%; 602 margin-left: -6px; 603 } 604.leaflet-tooltip-top:before { 605 bottom: 0; 606 margin-bottom: -12px; 607 border-top-color: #fff; 608 } 609.leaflet-tooltip-bottom:before { 610 top: 0; 611 margin-top: -12px; 612 margin-left: -6px; 613 border-bottom-color: #fff; 614 } 615.leaflet-tooltip-left { 616 margin-left: -6px; 617} 618.leaflet-tooltip-right { 619 margin-left: 6px; 620} 621.leaflet-tooltip-left:before, 622.leaflet-tooltip-right:before { 623 top: 50%; 624 margin-top: -6px; 625 } 626.leaflet-tooltip-left:before { 627 right: 0; 628 margin-right: -12px; 629 border-left-color: #fff; 630 } 631.leaflet-tooltip-right:before { 632 left: 0; 633 margin-left: -12px; 634 border-right-color: #fff; 635 } 636