anchor.diff:    }
   }
   
  -#navigation {
  +// then comes the map. on desktop the map is absolute positioned to fill the area to the
  +// right of the sidebar. on phone/tablet it fits neatly between title and navigation.
  +#map {
  +  // stretch to fill the entire right side of the screen
  +  @include stretch($navbar_height, 0, 0, $sidebar_width);
  +
  +  a:hover {
  +    border-bottom: none;
  +  }
  +  img {
  +    max-width: none;
  +  }
  +
  +  @media (max-width: 768px) {
  +    // fixed height, clear absolute positioning
  +    @include size($map_height_tablet, 100%);
  +    @include stretch();
  +    position: relative;
  +  }
  +
  +  @media (max-width: 480px) {
  +    height: $map_height_phone;
  +  }
  +}
  +
  +// on desktop title and navigation fill the sidebar but no more
  +#title, #navigation {
     min-width: 320px;
     width: $sidebar_width;
     float: left;
   
  +  @media (max-width: 768px) {
  +    width: 100%;
  +  }
  +}
  +
  +// requires absolute positioning on desktop to put it right below the title.
  +#navigation {
  +  position: absolute;
  +  top: $navbar_height + $title_height + 1;
  +  bottom: 0;
  +  left: 0;
  +  overflow: scroll;
  +
  +  @media (max-width: 768px) {
  +    // but on mobile it's super easy relative layout
  +    position: relative;
  +    top: 0;
  +  }
   
     .subnav {
       height:33px;
  
positive.code: $map_height_phone: 150px;
  $map_height_tablet: 260px;
  $borderRadius: 7px;
  
  body {
    background: url('<%= image_path("background/background-stripes.png") %>') repeat #dcdcd7;
  
negative.code: }
  
  .btn.btn-stop {
    padding: 2px 5px;
    border-bottom: none;
    vertical-align: baseline;
  }
  
  .btn.btn-go {
  