/* Note that the name of the marker directory, e.g. "/amarkers" is output in
   the HTML as a CSS class, so you can customise a version to go with your
   specific markers by prefixing your CSS rules with .amarkers (or whatever the
   name of your marker directory is)
*/

/* div is the element used for marker tags, i for font icons */
.leaflet-tagged-marker div,
.leaflet-tagged-marker i {
  position: relative;
  top: -37px;
  left: -40px;
  min-width: 80px; /* -2 times left */
  text-align: center;
  height: 0;  /* to avoid marker position shifting */
}
.leaflet-tagged-marker div {
  font-size: 11px;
}
.leaflet-tagged-marker i {
  font-size: 17px;
  font-style: normal;
  display: block; /* block and zero width to avoid marker position shifting */
  width: 0;
}

.leaflet-tagged-marker i.light {
  color: seashell;
}
.leaflet-tagged-marker i.dark {
  color: darkslategrey;
}
.leaflet-tagged-marker i.green {
  color: green;
}
.leaflet-tagged-marker i.red {
  color: red;
}

/* For http://www.flaticon.com, tested for /amarkers (32 x 42px) */
.leaflet-tagged-marker i[class^="flaticon-"]:before,
.leaflet-tagged-marker i[class*=" flaticon-"]:before {
  font-size: 14px;
  position: relative;
  top: -4px;
  left: -10px;
}

/* For http://fontello.com */
.leaflet-tagged-marker i[class^="icon-"]:before,
.leaflet-tagged-marker i[class*=" icon-"]:before {
  position: relative;
  top: -2px;
  left: 1px;
}

/* Adjust for the Google-style markers that live in the /markers directory */
.markers .leaflet-tagged-marker i {
  font-size: 11px;
  top: -30px;
}

.leaflet-tagged-marker div.tag-above-marker {
  top: -56px;
  color: red;
}
.leaflet-tagged-marker div.tag-below-marker {
  top: -1px;
  color: red;
}

.leaflet-marker-icon.tag-rounded-corners {
  font-size: 10px;
  width: 60px;
  padding: 0 3px 1px 2px;
  border-radius: 0 9px 9px 9px;
  border: 1px solid black;
  background-color: white;
}

.leaflet-marker-icon.tag-pointy-circle {
  text-align: center;
  width: 30px;
  height: 25px;
  padding-top: 5px;
  border-radius: 0 20px 20px 20px;
  border: 1px solid black;
  border-top: 1px solid red;
  border-left: 1px solid red;
  background-color: white;
}