#map {
  position: relative;
  margin: 0 0 0 -15px;
}
#map .location {
  cursor: pointer;
  margin: -9px 0 0 -9px;
}
#map .location.regional:hover {
  background-color: #2e6ce1;
}
#map .location.distributor:hover {
  background-color: #00c956;
}
#map .location.otherOffice:hover {
  background-color: #808080;
}
#map > img.worldmap {
  width: 100%;
  /*height: 504px;*/
}
#caption {
  margin: -40px 0 0 0;
  position: relative;
  cursor: default;
}
#caption > .text {
  font-size: 0.9em;
  display: block;
  float: left;
  font-weight: 600;
  color: #154194;
  margin: -4px 0 0 20px;
}
#map span,
#caption span {
  cursor: grab;
}
#map .location,
#caption .location {
  width: 16px;
  height: 16px;
  position: absolute;
  float: left;
  border: 2px solid #fff;
  border-radius: 50%;
}
#map .location.regional,
#caption .location.regional {
  background-color: #154194;
}
#map .location.distributor,
#caption .location.distributor {
  background-color: #009640;
}
#map .location.otherOffice,
#caption .location.otherOffice {
  background-color: #666666;
}
#map .location.highlight,
#caption .location.highlight {
  background-color: red;
}
.webui-popover {
  font-size: 0.9em;
}
.webui-popover small {
  font-size: 0.9em;
  font-style: italic;
}
#officeList > .office {
  margin: 30px 0;
}
#officeList > .office > .header {
  color: #fff;
  font-size: 20px;
  font-weight: bold;
  padding: 30px;
}
#officeList > .office > .header > .flag {
  float: left;
  margin: -21px;
}
#officeList > .office > .header > .alternative-name {
  float: left;
  margin: -16px 0 0 30px;
}
#officeList > .office > .header > .description {
  float: right;
  margin: -16px -10px 0 0;
}
#officeList > .office.regional {
  border: 1px solid #5d7bb2;
}
#officeList > .office.regional > .header {
  background-color: #5d7bb2;
}
#officeList > .office.distributor {
  border: 1px solid #47a66f;
}
#officeList > .office.distributor > .header {
  background-color: #47a66f;
}
#officeList > .office.otherOffice {
  border: 1px solid #919191;
}
#officeList > .office.otherOffice > .header {
  background-color: #919191;
}
#officeList > .office > .body {
  padding: 20px;
}
#officeList > .office > .body > .picture,
#officeList > .office > .body span > .picture {
  display: inline-block;
  border: 1px solid #ccc;
}
#officeList > .office > .body > .picture.empty,
#officeList > .office > .body span > .picture.empty {
  width: 135px;
  height: 102px;
  background-image: url('../images/worldmap.png');
}
#officeList > .office > .body > .template {
  display: inline-block;
  vertical-align: top;
  margin: 5px 0 0 20px;
}
#officeList > .office > .body > .footer-template {
  margin: 10px 0 0 0;
  text-align: right;
}
#officeList > .office > .body > .languages {
  float: right;
}
#caption {
  margin: -5% 10% 0 0;
}