app.css

/*clearfix these classes*/
.c-fix:after{
  content:""; 
  display:table; 
  clear:both;
}

.metro-interactive, .metro-interactive .makesans *, text{
  font-family: franklin-gothic-urw, arial, helvetica, sans-serif;
  line-height:1.5em;
}

text{
  fill:#111111;
}

.metro-interactive p{
  margin:0em;
}

.buttons{
  margin:0em 1em 0em 1em;
}

.buttons > p{
  display:block;
  padding:0em 0.25em;
  margin:0em;
  cursor:pointer;
  font-family:arial, helvetica;
  text-align:center;
  line-height:1.5em;
  font-size:0.9em;

  -ms-user-select: none;
  user-select: none;
}

.buttons *.selected{
  background-color:#31b244;
  color:#ffffff;
}


.map-wrap, .button-wrap{
  min-height:100px;
}

g.x-axis line{
  stroke:#aaaaaa;
  shape-rendering:crispEdges;
}

g.x-axis path{
  visibility:hidden;
}

#cat-bar g.x-axis text{
  font-size:13px;
}

@media (min-width:0px){
  .map-wrap, .button-wrap{
    float:none;
    width:auto;
  }

  .button-wrap > div{
    padding: 0em;
    border-bottom:0px solid #aaaaaa;
    margin-bottom:0em;
  }

  .buttons > p{
    display:inline-block;
    padding:0.25em 0.5em;
    margin:0.25em 0.25em 0em 0.25em;
  }

  #cat-bar text{
    font-size:13px;
  }

}

@media (min-width:600px){
   #cat-bar text{
    font-size:15px;
  } 
}


@media (min-width:1200px){
  .map-wrap{
    float:right;
    width:80%;
  }

  .button-wrap{
    float:left;
    width:20%;
  }

  .button-wrap > div{
    padding: 4em 0em 0.25em 0em;
    border-bottom:1px solid #aaaaaa;
    margin-bottom:1em;
  }


  .buttons > p{
    display:block;
    padding:0em 0.25em;
    margin:0em;
  }

  #cat-bar text{
    font-size:16px;
  }

}

.button-wrap > div.buttons{
  padding:0em;
  border-bottom:0px solid #aaaaaa;
  margin-bottom:0em;
}

#cat-bar{
  max-width:1400px;
  margin:0px auto;
}

#cat-bar svg path, #cat-bar svg rect, #cat-bar svg line {
  shape-rendering:crispEdges;
}