/*
This CSS file is for styling the tor circuit display, which consists of a title,
a domain, and a bulleted list.

Each bullet in the circuit node list is supposed to represent a Tor circuit node,
and lines drawn between them to represent Tor network inter-relay connections.

CSS for line between bullets is derived in part from https://jsfiddle.net/5JP8Q/
*/

/* The circuit-display div encloses all other HTML elements.
   Color the background to make circuit display distinct
   from the rest of the popup. */
div#circuit-display {
  background-color: #e8f4f4;
  font-family: Arial;
  width: 100%;
  height: 100%;
  padding: 8px;
  /* Magically keep popup menu from clipping div: */
  display: table-cell;
  cursor: default;
}

/* Format the title text. */
div#circuit-display p#title {
  font-size: 15px;
  font-weight: bold;
  color: #2c26a7;
  margin: 0;
}

/* Format the domain text. */
div#circuit-display p#domain {
  font-size: 13px;
  color: black;
  margin: 4px;
}

/* Format the circuit node list. */
ul#circuit-nodes {
  font-family: Arial;
  font-size: 14px;
  color: black;
  margin-top: 8px;
  padding-left: 8px;
  padding-right: 8px;
}

/* Hide default bullets, and position pseudoelements (our new bullets) relative
   to the list items. */
ul#circuit-nodes li {
  list-style: none;
  position:relative;
}

/* Pad the list item text at left or right to be tastefully
   separated from bullets. */
ul#circuit-nodes li:-moz-dir(ltr) {
  padding-left: 18px;
}
ul#circuit-nodes li:-moz-dir(rtl) {
  padding-right: 18px;
}

/* Drawn bullets, centered vertically for each list item. */
ul#circuit-nodes li:after {
  /* bullets */
  content: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2711%27%20height%3D%2711%27%3E%3Ccircle%20cx%3D%275.5%27%20cy%3D%275.5%27%20r%3D%274%27%20style%3D%27stroke%3A%20%23195021%3B%20stroke-width%3A%202px%3B%20fill%3A%20white%3B%27%2F%3E%3C%2Fsvg%3E");
  position: absolute;
  top: 1px;
}

/* Move the bullets to the far left or right,
   depending on text directionality. */
ul#circuit-nodes li:-moz-dir(ltr):after {
  left: 0px;
}
ul#circuit-nodes li:-moz-dir(rtl):after {
  right: 0px;
}

/* Draw a connecting vertical line through the bullets. */
ul#circuit-nodes li:before {
  content: "";
  position: absolute;
  border-left: 3px solid #4d363a;
  height: 100%;
  width: 0px;
}

/* Position lines through the middle of the bullet. */
ul#circuit-nodes li:-moz-dir(ltr):before {
  left: 4px;
}
ul#circuit-nodes li:-moz-dir(rtl):before {
  right: 4px;
}

/* Shorten the first list item's line so that it starts under the bullet. */
ul#circuit-nodes li:first-child:before {
  top: 50%;
}

/* Shorten the last list item's line so that it ends under the bullet. */
ul#circuit-nodes li:last-child:before {
  height: 50%;
}

/* Onion site relay node text should be gray. */
ul#circuit-nodes li.relay {
  color: gray;
}