/* Region map of the "Mapa uživatelů" pages (was an inline <style> of mapka.php) */
#ma { padding: 0; background: #bccf53 url(/poz.gif) top left no-repeat; width: 200px; font-size: 1px; }
#ma img { border: 0 none; padding: 0; margin: 0; width: 200px; }
.mapa-polozka { border-top: 2px solid grey; min-height: 250px; overflow: hidden; background-color: transparent; }
.mapa-polozka .foto { float: left; margin-right: 20px; margin-left: 10px; }
.mapa-polozka .foto img { max-width: 200px; margin-top: 5px; }
/* Phones and small tablets (below Bootstrap md): a floated 200px photo left a ~160-280px text column,
   and #main's overflow-wrap (css/rebuild.css) then split names and regions mid-word ("Sehnalo|vá",
   "Moravskosl|ezský"). Stack the photo above the text instead, and shrink the 40px filter heading so
   "Moravskoslezský kraj" fits the line. */
@media (max-width: 767.98px) {
  .mapa-polozka { min-height: 0; padding-top: 10px; }
  .mapa-polozka .foto { float: none; margin: 0 0 10px 0; }
  .mapa-polozka .foto p { margin-bottom: 0; }
  .mapa-polozka .foto img { max-width: 160px; }
  .mapa-uzivatelu .okno2 h1 { font-size: 1.75rem; }
}
.mapa-detail { margin-top: 20px; overflow: hidden; }
.mapa-detail .foto { float: right; margin-right: 20px; margin-left: 10px; }
.mapa-detail .foto img { width: 300px; max-width: 100%; }