Template:Countrymap/styles.css

/* When overriding these styles in user's Common.css it may be necessary
   to add .mw-parser-output class ancestor selector before .countrymap
   related selectors, see templatestyles extension help for further details.
*/
.countrymap {
  max-width: 2204px; /* 2x basemap + 4px border and margin */
  table-layout: fixed; /* do not let table overflow viewport */
}
.countrymap .mw-collapsible-content > div {
  overflow: auto; /* scroll on countrymap, not viewport */
  overflow-x: auto;
  overflow-y: hidden;
}
.countrymap .mw-collapsible-content > div > div {
  max-width: 2200px; /* 2x basemap width */
  min-width: 590px; /* because marker size does not scale */
  position: relative; /* to properly position .pin elements */
}
.countrymap .mw-collapsible-content .noresize,
.countrymap .mw-collapsible-content .noresize img {
  width: 100% !important;
  height: auto !important;
}
.countrymap .mw-collapsible-content .noresize div {
  display: none; /* desc image fails to scale properly */
}
.countrymap .pin {
  position: absolute;
  z-index: 100;
  line-height: 1;
  /* ● not placed exactly in center of line-height, thus -65% y-translation */
  transform: translate(-50%, -65%);
}
.countrymap .pin a,
.countrymap .pin a:visited {
  /* first 3 fonts are verified to have similar appearance for circle symbol,
     since Arial uses smaller circle at equal font-size, let Courier precede */
  font-family: 'DejaVu Sans', 'Noto Sans', Courier, sans-serif;
  text-decoration: none;
  /* same color as in File:Location_dot_dark_red.svg, File:Locator_Dot.svg */
  color: #9c0000;
}
.countrymap .pin a:hover {
  /* suppress the underline normally appearing when hovering the link */
  text-decoration: none;
  /* use a slightly lighter shade of the same color to provide visual feedback */
  color: #c04040;
}
body:not(.skin-minerva) .countrymap.mw-collapsed {
  /* .mw-collapsed is only useful to detect collapsed state on desktopview,
     on mobile .mw-collapsible is shown, but .mw-collapsed is never removed */
  width: 200px !important;
}
body.skin-minerva .countrymap,
.countrymap:not(.mw-collapsed) {
  float: none;
}