@font-face {
    font-family: 'nevis';
    src: url('fonts/nevis.ttf');
}

body {
    margin:0;
    padding:0;
    font: 12px/15px 'Helvetica Neue', sans-serif;
}

.map-attribution {
    background:rgba(0, 0, 0, 0.6);
}

.map-attribution a {
    color:#666;
}

#sidebar {
    position:absolute;
    vertical-align:top;
    top:20px;
    left:20px;
    width:400px;
    z-index:99;
    background:#333;
    color:#eee;
}

#tooltip {
    background:rgba(55,55,55,.5);
    height:250px;
}

#icon {
    background:url(img/sprite.png);
    background-position:-600px 0;
    width: 200px;
    height: 120px;
    margin: 20px auto;
}

#icon.tornado       { background-position:-200px 0; }
#icon.winter,
#icon.blizzard      { background-position:-400px 0; }
#icon.wind          { background-position:0 0; }
#icon.flood         { background-position:0 120px; }
#icon.fire          { background-position:-200px 120px; }
#icon.thunderstorm  { background-position:-400px 120px; }

#type {
    text-shadow:0 -2px -2px rgba(0,0,0,0.8);
    font: bold 20px/20px 'nevis', sans-serif;
    text-transform:uppercase;
    text-align:center;
}

span.title {
    display:block;
    background:#222;
    padding:20px 20px;
    text-shadow:0 -2px -2px rgba(0,0,0,0.8);
    font: bold 28px/30px 'nevis', sans-serif;
    text-transform: uppercase;
    margin:0;
}

span.date {
    display:block;
    font: bold 20px/30px 'nevis', sans-serif;
    margin-left:10px;
    text-shadow:none;
    font-weight:normal;
    color:#E6FCFF;
}

p {
    margin:0;
    padding:10px 20px;
    font: normal 15px/20px 'nevis', sans-serif;
}

.swatch, .label {
    padding:5px 5px;
    color:#333;
    font: normal 18px/20px 'nevis', sans-serif;
    vertical-align: text-bottom;
    font-weight:bold;
}

.swatch {
    transition:opacity 200ms linear;
    display:inline-block;
}

.inv {
    color:#eee;
}

.swatch::last-child {
    border:none;
}

.label {
    color:#eee;
    padding:5px 15px;
}
.swatch:hover {
    opacity:1;
}
#geolocate {
  background:#fff;
  position:absolute;
  bottom: 0;
  width:100%;
  z-index:1000;
  font:13px/18px 'nevis', sans-serif;
  text-align:center;
  text-decoration: none;
  padding:10px 0;
  background:#FFF;
  color:#3C4E5A;
  display:block;
  }
  #geolocate:hover { background:#ECF5FA; }

#warnings { list-style: none; }

.zoomer {
    right:20px;
    top: 20px;
    left: inherit; /* HACK */
    background-color:#555;
    border: 0;
    -webkit-border-radius:0;
          border-radius:0;
    }
    .zoomer:hover { background-color:#666; }
    .zoomin { right:52px; }