body * { outline: none !important }
    
    body {
      padding-top: 50px;
    }

    .container {
        min-width: 930px;
        margin-left: 30px;
        margin-right: 30px;
    }

    #intro, #epilogue {
        width: 920px;
        margin: auto;
    }

    #scrolly {
        min-width: 920px;
        max-width: 1500px;
        margin: auto;
    }

    svg text { font-family: Helvetica,Arial }
    
    /* canvas sharpening - from http://stackoverflow.com/questions/7615009/disable-interpolation-when-scaling-a-canvas */
    canvas {
        image-rendering: optimizeSpeed;
        image-rendering: -moz-crisp-edges;
        image-rendering: -webkit-optimize-contrast;
        image-rendering: -o-crisp-edges;
        image-rendering: pixelated;
        -ms-interpolation-mode: nearest-neighbor;
    }

    #sections {
      position: relative;
      display: inline-block;
      top: 0px;
      margin-right: 10px;
    }
    
    .step {
      margin-bottom: 150px;
    }
    
    #sections .title {
      font-family: Arial,Helvetica,"san-serif";
      font-size: 16px;
      font-weight: bold;
      margin-bottom: 2px;
      color: #262626;
      line-height: 1.2em;
    }
        
    #vis {
      display: inline-block;
      margin-left: 0;
      -webkit-transform: translate3d(0,0,0); /* for Safari on iPad; see http://stackoverflow.com/questions/9807620/ipad-safari-scrolling-causes-html-elements-to-disappear-and-reappear-with-a-dela */

      /* the following two will be overridden (or removed) depending on scroll state */ 
      float: right;
      padding-top: 0px;
    }
    
    .VisControlLink {
        color: chocolate;
        cursor: pointer;
        border-bottom: 1px dashed green;
    }

    .VisHighlightLink {
        /* color: rgb(68, 102, 255); */
        color: #ff3366;
        cursor: help;
    }

    .VisHighlightLink:hover {
        color: red;
    }

    /* tooltip style from http://bl.ocks.org/d3noob/a22c42db65eb00d4e369 */
    div.vistooltip {
        position: fixed;
        text-align: center;			
        min-width: 100px;
        height: 44px;
        padding: 8px;
        font: 12px sans-serif;		
        background: #ffdc74;
        border: 0px;		
        border-radius: 6px;
        pointer-events: none;			
    }

    // selectively copied from Bootstrap
    /*!
     * Bootstrap v3.3.7 (http://getbootstrap.com)
     * Copyright 2011-2016 Twitter, Inc.
     * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
     */
    /*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
    html {
      font-family: sans-serif;
      -webkit-text-size-adjust: 100%;
          -ms-text-size-adjust: 100%;
    }
    body {
      margin: 0;
    }
    article,
    aside,
    details,
    figcaption,
    figure,
    footer,
    header,
    hgroup,
    main,
    menu,
    nav,
    section,
    summary {
      display: block;
    }
    audio,
    canvas,
    progress,
    video {
      display: inline-block;
      vertical-align: baseline;
    }
    audio:not([controls]) {
      display: none;
      height: 0;
    }
    [hidden],
    template {
      display: none;
    }
    a {
      background-color: transparent;
      cursor: pointer; /* added */
    }
    a:active,
    a:hover {
      outline: 0;
    }
    a {
      color: #337ab7;
      text-decoration: none;
    }
    a:hover,
    a:focus {
      color: #23527c;
      text-decoration: underline;
    }
    a:focus {
      outline: 5px auto -webkit-focus-ring-color;
      outline-offset: -2px;
    }
    a:visited {
      color: purple;
    }
    a.tiponly {
      color: #337ab7 !important;
    }
    a.tiponly:hover,
    a.tiponly:focus {
      text-decoration: none;
      cursor: default;
    }

    abbr[title] {
      border-bottom: 1px dotted;
    }

    b,
    strong {
      font-weight: bold;
    }
    dfn {
      font-style: italic;
    }
    h1 {
      margin: .67em 0;
      font-size: 2em;
    }
    mark {
      color: #000;
      background: #ff0;
    }
    small {
      font-size: 80%;
    }
    sub,
    sup {
      position: relative;
      font-size: 75%;
      line-height: 0;
      vertical-align: baseline;
    }
    sup {
      top: -.5em;
    }
    sub {
      bottom: -.25em;
    }
    img {
      border: 0;
    }
    svg:not(:root) {
      overflow: hidden;
    }
    figure {
      margin: 1em 40px;
    }
    hr {
      height: 0;
      -webkit-box-sizing: content-box;
         -moz-box-sizing: content-box;
              box-sizing: content-box;
    }
    pre {
      overflow: auto;
    }
    code,
    kbd,
    pre,
    samp {
      font-family: monospace, monospace;
      font-size: 1em;
    }
    button,
    input,
    optgroup,
    select,
    textarea {
      margin: 0;
      font: inherit;
      color: inherit;
    }
    button {
      overflow: visible;
    }
    button,
    select {
      text-transform: none;
    }
    button,
    html input[type="button"],
    input[type="reset"],
    input[type="submit"] {
      -webkit-appearance: button;
      cursor: pointer;
    }
    button[disabled],
    html input[disabled] {
      cursor: default;
    }
    button::-moz-focus-inner,
    input::-moz-focus-inner {
      padding: 0;
      border: 0;
    }
    input {
      line-height: normal;
    }
    input[type="checkbox"],
    input[type="radio"] {
      -webkit-box-sizing: border-box;
         -moz-box-sizing: border-box;
              box-sizing: border-box;
      padding: 0;
    }
    input[type="number"]::-webkit-inner-spin-button,
    input[type="number"]::-webkit-outer-spin-button {
      height: auto;
    }
    input[type="search"] {
      -webkit-box-sizing: content-box;
         -moz-box-sizing: content-box;
              box-sizing: content-box;
      -webkit-appearance: textfield;
    }
    input[type="search"]::-webkit-search-cancel-button,
    input[type="search"]::-webkit-search-decoration {
      -webkit-appearance: none;
    }
    fieldset {
      padding: .35em .625em .75em;
      margin: 0 2px;
      border: 1px solid #c0c0c0;
    }
    legend {
      padding: 0;
      border: 0;
    }
    textarea {
      overflow: auto;
    }
    optgroup {
      font-weight: bold;
    }
    table {
      border-spacing: 0;
      border-collapse: collapse;
    }
    td,
    th {
      padding: 0;
    }

    html {
      font-size: 10px;

      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    }
    body {
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      font-size: 14px;
      line-height: 1.42857143;
      color: #333;
      background-color: #fff;
    }

    .lead {
      margin-bottom: 20px;
      font-size: 16px;
      font-weight: 300;
      line-height: 1.4;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    .h1,
    .h2,
    .h3,
    .h4,
    .h5,
    .h6 {
      font-family: inherit;
      font-weight: 500;
      line-height: 1.1;
      color: inherit;
    }

    .navbar {
      position: relative;
      min-height: 50px;
      margin-bottom: 20px;
      border: 1px solid transparent;
    }

    .navbar-fixed-top .navbar-collapse,
    .navbar-static-top .navbar-collapse,
    .navbar-fixed-bottom .navbar-collapse {
        padding-right: 0;
        padding-left: 0;
      }
    }
    .navbar-fixed-top .navbar-collapse,
    .navbar-fixed-bottom .navbar-collapse {
      max-height: 340px;
    }

    .navbar-fixed-top {
      top: 0;
      border-width: 0 0 1px;
    }

    .navbar-fixed-top,
    .navbar-fixed-bottom {
      position: fixed;
      right: 0;
      left: 0;
      z-index: 1030;
    }

    .navbar-fixed-top {
      top: 0;
      border-width: 0 0 1px;
    }

    .navbar-inverse {
      background-color: #222;
      border-color: #080808;
    }
    .navbar-inverse .navbar-brand {
      color: #9d9d9d;
    }
    .navbar-inverse .navbar-brand:hover,
    .navbar-inverse .navbar-brand:focus {
      color: #fff;
      background-color: transparent;
    }
    .navbar-inverse .navbar-text {
      color: #9d9d9d;
    }
    .navbar-inverse .navbar-nav > li > a {
      color: #9d9d9d;
    }
    .navbar-inverse .navbar-nav > li > a:hover,
    .navbar-inverse .navbar-nav > li > a:focus {
      color: #fff;
      background-color: transparent;
    }
    .navbar-inverse .navbar-nav > .active > a,
    .navbar-inverse .navbar-nav > .active > a:hover,
    .navbar-inverse .navbar-nav > .active > a:focus {
      color: #fff;
      background-color: #080808;
    }
    .navbar-inverse .navbar-nav > .disabled > a,
    .navbar-inverse .navbar-nav > .disabled > a:hover,
    .navbar-inverse .navbar-nav > .disabled > a:focus {
      color: #444;
      background-color: transparent;
    }
    .navbar-inverse .navbar-toggle {
      border-color: #333;
    }
    .navbar-inverse .navbar-toggle:hover,
    .navbar-inverse .navbar-toggle:focus {
      background-color: #333;
    }
    .navbar-inverse .navbar-toggle .icon-bar {
      background-color: #fff;
    }
    .navbar-inverse .navbar-collapse,
    .navbar-inverse .navbar-form {
      border-color: #101010;
    }
    .navbar-inverse .navbar-nav > .open > a,
    .navbar-inverse .navbar-nav > .open > a:hover,
    .navbar-inverse .navbar-nav > .open > a:focus {
      color: #fff;
      background-color: #080808;
    }

    .container > .navbar-header,
    .container-fluid > .navbar-header,
    .container > .navbar-collapse,
    .container-fluid > .navbar-collapse {
      margin-right: -15px;
      margin-left: -15px;
    }

    .navbar-brand {
      float: left;
      padding: 15px 15px;
      font-size: 18px;
      line-height: 20px;
      text-decoration: none;
    }

    .navbar-brand:hover,
    .navbar-brand:focus {
      text-decoration: none;
    }

    .thumbnail > img,
    .thumbnail a > img {
        display: block;
        max-width: 100%;
        height: auto;
    }

    .thumbnail {
      display: block;
      padding: 4px;
      margin-bottom: 20px;
      line-height: 1.42857143;
      background-color: #fff;
      border: 1px solid #ddd;
      border-radius: 4px;
      -webkit-transition: border .2s ease-in-out;
           -o-transition: border .2s ease-in-out;
              transition: border .2s ease-in-out;
    }

    .thumbnail > img,
    .thumbnail a > img {
      margin-right: auto;
      margin-left: auto;
    }
    a.thumbnail:hover,
    a.thumbnail:focus,
    a.thumbnail.active {
      border-color: #337ab7;
    }
    .thumbnail .caption {
      padding: 9px;
      color: #333;
    }

    blockquote {
      padding: 10px 20px;
      margin: 0 0 20px;
      border-left: 5px solid #eeeeee;
    }

    blockquote p {
      font-size: 17px;
      font-weight: 300;
      line-height: 1.25;
    }

    blockquote p:first-child {  /* ael added */
      margin-top: 0;
    }

    blockquote p:last-child {
      margin-bottom: 0;
    }

    blockquote small {
      display: block;
      line-height: 1.428571429;
      color: #999999;
    }

    blockquote small:before {
      content: '\2014 \00A0';
    }

    blockquote.pull-right {
      padding-right: 15px;
      padding-left: 0;
      border-right: 5px solid #eeeeee;
      border-left: 0;
    }

    blockquote.pull-right p,
    blockquote.pull-right small {
      text-align: right;
    }

    blockquote.pull-right small:before {
      content: '';
    }

    blockquote.pull-right small:after {
      content: '\00A0 \2014';
    }

    q:before,
    q:after,
    blockquote:before,
    blockquote:after {
      content: "";
    }

    .tooltip {
      position: absolute;
      z-index: 1030;
      display: block;
      font-size: 12px;
      line-height: 1.4;
      opacity: 0;
      filter: alpha(opacity=0);
      visibility: visible;
    }

    .tooltip.in {
      opacity: 0.9;
      filter: alpha(opacity=90);
    }

    .tooltip.top {
      padding: 5px 0;
      margin-top: -3px;
    }

    .tooltip.right {
      padding: 0 5px;
      margin-left: 3px;
    }

    .tooltip.bottom {
      padding: 5px 0;
      margin-top: 3px;
    }

    .tooltip.left {
      padding: 0 5px;
      margin-left: -3px;
    }

    .tooltip-inner {
      max-width: 200px;
      padding: 3px 8px;
      color: #ffffff;
      text-align: center;
      text-decoration: none;
      background-color: #000000;
      border-radius: 4px;
    }

    .tooltip-arrow {
      position: absolute;
      width: 0;
      height: 0;
      border-color: transparent;
      border-style: solid;
    }

    .tooltip.top .tooltip-arrow {
      bottom: 0;
      left: 50%;
      margin-left: -5px;
      border-top-color: #000000;
      border-width: 5px 5px 0;
    }

    .tooltip.top-left .tooltip-arrow {
      bottom: 0;
      left: 5px;
      border-top-color: #000000;
      border-width: 5px 5px 0;
    }

    .tooltip.top-right .tooltip-arrow {
      right: 5px;
      bottom: 0;
      border-top-color: #000000;
      border-width: 5px 5px 0;
    }

    .tooltip.right .tooltip-arrow {
      top: 50%;
      left: 0;
      margin-top: -5px;
      border-right-color: #000000;
      border-width: 5px 5px 5px 0;
    }

    .tooltip.left .tooltip-arrow {
      top: 50%;
      right: 0;
      margin-top: -5px;
      border-left-color: #000000;
      border-width: 5px 0 5px 5px;
    }

    .tooltip.bottom .tooltip-arrow {
      top: 0;
      left: 50%;
      margin-left: -5px;
      border-bottom-color: #000000;
      border-width: 0 5px 5px;
    }

    .tooltip.bottom-left .tooltip-arrow {
      top: 0;
      left: 5px;
      border-bottom-color: #000000;
      border-width: 0 5px 5px;
    }

    .tooltip.bottom-right .tooltip-arrow {
      top: 0;
      right: 5px;
      border-bottom-color: #000000;
      border-width: 0 5px 5px;
    }