.legend.i{
  -webkit-border-radius:18px;
  -moz-border-radius:18px;
  border-radius:18px;
  float: left;
  margin-right:8px;
  opacity: 1;
  width:18px;
  height: 18px;
}
.circle{  
  -webkit-border-radius:18px;
  -moz-border-radius:18px;
  border-radius:18px;
  float: left;
  margin-right:8px;
  opacity: 1;
  width:18px;
  height: 18px;
}
.pbarbox {
  height: 18px;
  width: 100%;
  border-radius: 4px;
  background: #FFF;
  border: 1px solid #AAA;
  overflow: hidden;  

}
.pbar {
    height: 100%;
    color: #fff;
    text-align: right;
    line-height: 22px; /* same as #progressBar height if we want text middle aligned */
    width: 0;
    background-color: #0099ff;
    border-right: 1px solid #AAA;
}

.k{
  width:32px;
  height: 150px;
  /* IE10 Consumer Preview */ 
  background-image: -ms-linear-gradient(bottom, #000000 0%, #00E2E2 20%, #5555FF 40%, #00007F 60%, #A80057 80%, #FF1D00 100%);

  /* Mozilla Firefox */ 
  background-image: -moz-linear-gradient(bottom, #000000 0%, #00E2E2 20%, #5555FF 40%, #00007F 60%, #A80057 80%, #FF1D00 100%);

  /* Opera */ 
  background-image: -o-linear-gradient(bottom, #000000 0%, #00E2E2 20%, #5555FF 40%, #00007F 60%, #A80057 80%, #FF1D00 100%);

  /* Webkit (Safari/Chrome 10) */ 
  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #000000), color-stop(0.2, #00E2E2), color-stop(0.4, #5555FF), color-stop(0.6, #00007F), color-stop(0.8, #A80057), color-stop(1, #FF1D00));

  /* Webkit (Chrome 11+) */ 
  background-image: -webkit-linear-gradient(bottom, #000000 0%, #00E2E2 20%, #5555FF 40%, #00007F 60%, #A80057 80%, #FF1D00 100%);

  /* W3C Markup, IE10 Release Preview */ 
  background-image: linear-gradient(to top, #000000 0%, #00E2E2 20%, #5555FF 40%, #00007F 60%, #A80057 80%, #FF1D00 100%);
  border-radius: 4px;
}

.background{
  background-color: #000;
  border-radius: 4px;
  padding: 10px;
  float: center;
  width: 120px;
  text-align: center;
  vertical-align: center;

}

.rails{
  border-bottom: solid #eff312;
  border-bottom-width: 2px;
  width: 100%;
}
.corridors{
  border-bottom: solid #FF7817;
  border-bottom-width: 1px;
  width: 100%;
}
.metros{
  border: solid #fff;
  border-width: 1.5px;
  opacity: .6;
  width: 100%;
  height: 30px;
}
.metroText{
  font-family: 'Open Sans', sans-serif;
  float: center;
  color:#fff;
  vertical-align: center;
  font-size: 16px;
  letter-spacing: -.5;
}
.rivers{
  border-bottom: solid #D3EFF0;
  border-width: 1.5px;
  opacity: .6;
  width: 100%;
  height: 30px;
}


.legendRamp{
  height:10px;
  width: 80px;
  margin-top: 0px;
  margin-left: -4px;
  border-radius: 0px;
}

.lLabel {
  font-size: 18px;
  position: absolute;
  margin-top: 0px;
  margin-left: 37px;
}
.lLabelBottom {
  font-size: 18px;
  position: absolute;
  margin-top: 136px;
  margin-left: 37px;
}
.awesome {
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
}
.radio{
  font-size: 18px;
}
#mapForm{
  font-size: 80px;
}
#metroLabel{
  margin-top: 5px;
  opacity: 0.8;
  color: white;
  vertical-align: center;
}
.legendLabel{
  line-height: 20px;
  color: #555;
  text-align: center;
  font-size: 18px;
  padding: 0px;
  margin: 0px;
}
#riverLabel{
  font-family: Times;
  font-style: italic;
  margin-top: 5px;
  opacity: 0.8;
  color: #D3EFF0;
  vertical-align: center;
}
.countyName{
  font-variant: small-caps;
}