/* Paint your palette gray and gray */
body
{
  background-color: lightgray;
  margin: 1em 0.5em 4em 0.5em;  /* some room at the bottom */
}

table
{
  width: 100%;
  height: 100%;
  border-collapse: collapse; /* Make adjoining rows or columns share a single border */
  font-size: 75%;
}

/* The cells that contain text span four rows, but need to hold just two lines of text, so the rows don't need to be full height. */
tr
{
  line-height: 0.6em;
}

/* Used only to illustrate page structure */
/*
td
{
  border: 1px solid gray;
}
*/

/* Used for the cells that contain names */
td.name
{
  /* Six columns with 6 x 14% = 84% of page width, leaving the other 16% for the linking columns in between */
  width: 14%;
  /* These three settings were empirically found to position the two lines of text correctly */
  vertical-align: top;
  padding: 0.2em 0.1em 0.1em 0.2em;
  line-height: 1.1em;
  /* To stand out against the gray */
  background-color: white;
  border: 1px solid gray;
}

/* Used to draw connecting lines between td cells tagged with class="name".  Can't use the "border-radius" property to create rounded corners, because the "border-collapse: collapse" property is applied to the table. */
td.v_line
{
  border-left: 1px solid red;
}
td.t_r
{
  border-top: 1px solid red;
  border-right: 1px solid red;
}
td.b_r
{
  border-bottom: 1px solid red;
  border-right: 1px solid red;
}
td.t_l
{
  border-top: 1px solid red;
  border-left: 1px solid red;
}
td.b_l
{
  border-bottom: 1px solid red;
  border-left: 1px solid red;
}


td:last-child
{
  border-right: none;
}

/* NOT HELPFUL IN SPACING THE TWO LINES OF A .name CELL */
/*
div.line1
{
  height: 50%;
  vertical-align: top;
}
div.line2
{
  height: 50%;
  vertical-align: bottom;
}
*/


/* For links to individual family pages */
a.tree
{
  color: blue;
}