h1 {margin-bottom: 10px;}
p.credit.border {border-top: none;}

/*.main-content { width: 600px;}*/

p.franklin {width: 90%; margin: 0 auto;}
p.franklin.legend {margin-bottom: 10px;}

#map {height:auto; position:relative; width: 100%;}

.state {
  stroke: #fff;
  stroke-width: 1px;
}

.state.selected {stroke: #000; stroke-width:1.5px;}

.range1 {fill:#fde7dc; background-color:#fde7dc;}
.range2 {fill:#f5cdbc; background-color:#f5cdbc;}
.range3 {fill:#eda289; background-color:#eda289;}
.range4 {fill: #e0674c; background-color:#e0674c;}
.range5 {fill: #cd422e; background-color:#cd422e;}
.range6 {fill: #ad3428; background-color:#ad3428;}

div.key-container {
  width: 315px;
}

ul.key {
  list-style-type: none;
  margin: 0 0 3px 0;
  width: 100%;
}

ul.key li {
  float: left;
  /*margin: 0 15px 5px 0;*/
  font-size: 1.1em;
  font-family: FranklinITCProThin, Helvetica, Arial, sans-serif;
}

span.keybox {
  width: 50px;
  height: 10px;
  float: left;
  border-right: 1px solid #fff;
  /*margin: 5px 5px 0 0;*/
}

ul.key-labels {
  list-style-type: none;
  margin: 0 0 10px 0;
  width: 100%;
}

ul.key-labels li {
  float: left;
  width: 95px;
  font-size: 1.1em;
}

ul.key-labels li:last-child {
  width: auto;
}

span.marker {
    float: left;
    margin: 2px 4px 0 0;
    width: 9px;
    height: 9px;
    -moz-border-radius: 35px;
    border-radius: 35px;
    -webkit-border-radius: 35px;
    }

#state-borders {
  fill: none;
  stroke: #fff;
  stroke-width: 1.5px;
  stroke-linejoin: round;
  stroke-linecap: round;
  pointer-events: none;
}

@media (max-width: 400px) {
    div.key-container {
      width: 195px;
    }

    span.keybox {
      width: 30px;
    }

    ul.key-labels li {
      width: 55px;
    }
}