example.css

html, body {
  height: 100%;
}

body {
  margin: 0;
  background: #E5E0D9;
}

svg {
  display: block;
  overflow: hidden;
  width: 100%;
  height: 100%;
}

#copy {
  position: absolute;
  left: 0;
  bottom: 4px;
  padding-left: 5px;
  font: 9px sans-serif;
  color: #fff;
  cursor: default;
}

#copy a {
  color: #fff;
}

.compass .back {
  fill: #eee;
  fill-opacity: .8;
}

.compass .fore {
  stroke: #999;
  stroke-width: 1.5px;
}

.compass rect.back.fore {
  fill: #999;
  fill-opacity: .3;
  stroke: #eee;
  stroke-width: 1px;
  shape-rendering: crispEdges;
}

.compass .direction {
  fill: none;
}

.compass .chevron {
  fill: none;
  stroke: #999;
  stroke-width: 5px;
}

.compass .zoom .chevron {
  stroke-width: 4px;
}

.compass .active .chevron, .compass .chevron.active {
  stroke: #fff;
}

.compass.active .active .direction {
  fill: #999;
}