/* demo.css */

h1 {
  font-family: "Helvetica Neue";
  font-size: extra-large;
}

body {
  font-family: "Helvetica Neue";
  font-size: small;
  position: relative;
  margin: auto;
  margin-top: 40px;
  margin-bottom: 4em;
}

footer {
  font-size: small;
  margin-top: 8em;
}

aside {
  font-size: small;
  left: 780px;
  position: absolute;
  width: 180px;
}

body > p, li > p {
  line-height: 1.5em;
}

body > p {
  width: 720px;
}

body > blockquote {
  width: 640px;
}


li {
  width: 680px;
}

a {
  color: steelblue;
}

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


#demo_1 svg, #demo_2 svg          { border:         0px; }


.node ellipse                     { stroke:         #000;   }
.node ellipse[class^="active_"]   { stroke-width:   6px;    }
.node ellipse.active_ib           { stroke:         blue;   }
.node ellipse.active_im           { stroke:         green;  }
.node ellipse.active_mo           { stroke:         red;    }


.link {
  fill:                           none;
  stroke:                         #ccc;
  stroke-opacity:                 0.3;
  stroke-width:                   2px;
}

.link.active_ib, .link.active_im, .link.active_mo {
  stroke-opacity:                 1;
  stroke-width:                   3px;
}

.link.active_ib                   { stroke:       blue;   }
.link.active_im                   { stroke:       green;  }
.link.active_mo                   { stroke:       red;    }


.notes .ib                        { color:        blue;   }
.notes .im                        { color:        green;  }
.notes .mo                        { color:        red;    }