@import 'css/_mmi-variables.scss';


.station-summary {
  display: block;
  list-style: none;
  padding: 0;

  > li {
    display: block;
    float: left;
    padding: 4px;
    text-align: center;
    width: 25%;

    > abbr {
      clear: left;
      color: #999;
      cursor: help;
      font-size: .6875em;
    }
  }

  &:after {
    clear: both;
    content: ' ';
    display: block;
  }
}


.station-summary-intensity {
  text-align: center;

  > abbr {
    color: #999;
    font-size: .6875em;
  }
}


.station-popup > dl.station-metadata {
  > dd {
    margin-left: 7em;
  }

  > dt {
    width: 6em;
  }
}

.station-channels-map {
  width: 100%;
}

.station-layer-icon {
  position: absolute;

  &:before {
    border: 10px solid transparent;
    border-left-width: 6px;
    border-right-width: 6px;
    content: ' ';
    display: block;
    left: 1px;
    position: absolute;
    top: -10px;
    z-index: 2;
  }

  &:after {
    border: 12px solid transparent;
    border-bottom-color: #666;
    border-left-width: 8px;
    border-right-width: 8px;
    content: ' ';
    display: block;
    left: -1px;
    position: absolute;
    top: -13px;
    z-index: 1;
  }
}

.station-mmiI:before {
  border-bottom-color: $mmiI;
}
.station-mmiII:before {
  border-bottom-color: $mmiII;
}
.station-mmiIII:before {
  border-bottom-color: $mmiIII;
}
.station-mmiIV:before {
  border-bottom-color: $mmiIV;
}
.station-mmiV:before {
  border-bottom-color: $mmiV;
}
.station-mmiVI:before {
  border-bottom-color: $mmiVI;
}
.station-mmiVII:before {
  border-bottom-color: $mmiVII;
}
.station-mmiVIII:before {
  border-bottom-color: $mmiVIII;
}
.station-mmiIX:before {
  border-bottom-color: $mmiIX;
}
.station-mmiX:before {
  border-bottom-color: $mmiX;
}
.station-mmiXI:before {
  border-bottom-color: $mmiXI;
}
.station-mmiXII:before {
  border-bottom-color: $mmiXII;
}


.dyfi-layer-icon {
  border: 1px solid #666;
  border-radius: 50%;
  position: absolute;
}

.dyfi-station-mmiI {
  background-color: $mmiI;
}
.dyfi-station-mmiII {
  background-color: $mmiII;
}
.dyfi-station-mmiIII {
  background-color: $mmiIII;
}
.dyfi-station-mmiIV {
  background-color: $mmiIV;
}
.dyfi-station-mmiV {
  background-color: $mmiV;
}
.dyfi-station-mmiVI {
  background-color: $mmiVI;
}
.dyfi-station-mmiVII {
  background-color: $mmiVII;
}
.dyfi-station-mmiVIII {
  background-color: $mmiVIII;
}
.dyfi-station-mmiIX {
  background-color: $mmiIX;
}
.dyfi-station-mmiX {
  background-color: $mmiX;
}
.dyfi-station-mmiXI {
  background-color: $mmiXI;
}
.dyfi-station-mmiXII {
  background-color: $mmiXII;
}