body {
  font-family: "Open Sans", Arial, sans-serif;
  margin: 0;
  padding: 0;
  font-weight: 400;
}

p {
  line-height: 1.4;
  font-size: 1.3rem;
  padding-bottom: 10px;
}

p > a {
  text-decoration: none;
  color: #b56969;
  border-bottom: 1px solid #b56969 !important;
}

p > a:hover {
  color: #b56969;
  text-decoration: none;
  cursor: pointer;
}

ul {
  list-style: none;
  padding-inline-start: 0;
}

.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 3px;
  float: left;
  margin-top: 5px;
}

.group-dot, .group, .hetero-dot, .hetero {
  background-color: #47acb1;
}

.alone-dot, .alone, .lgbt-dot, .lgbt {
  background-color: #ffcd34;
}

.family-dot, .family {
  background-color: #add5d7;
}

.nonfamily-dot, .nonfamily {
  background-color: #f26522;
}

.bar-container {
  max-width: 600px;
  padding: 20px 0 60px 0;
  display: list-item;
  list-style: none;
}

.stacked-bar {
  height: 30px;
  float: left;
  text-align: center;
  font-size: 0.9rem;
  font-weight: 800;
  color: #fff;
  padding-top: 3px;
}

.bar-label {
  font-weight: 800;
  font-size: 1.1rem;
  padding-bottom: 8px;
}

/* grouped bar chart */
#grouped-bar-chart {
  display: block;
  /* fixes layout wonkiness in FF1.5 */
  position: relative;
  height: 200px;
  margin: 50px 0;
  padding: 0;
  background: transparent;
  font-size: 1rem;
}

#grouped-bar-chart tr, #grouped-bar-chart th {
  position: absolute;
  bottom: 0;
  width: 150px;
  z-index: 2;
  margin: 0;
  padding: 0;
  text-align: center;
}

#grouped-bar-chart td {
  position: absolute;
  bottom: 0;
  width: 140px;
  z-index: 2;
  margin: 0;
  padding: 0;
  text-align: center;
}

#grouped-bar-chart thead tr {
  left: 100%;
  top: 50%;
  bottom: auto;
  margin: -2.5em 0 0 5em;
}

#grouped-bar-chart thead th {
  width: 7.5em;
  height: auto;
  padding: 0.5em 1em;
}

#grouped-bar-chart thead th.hetero-bar {
  top: 0;
  left: 0;
  line-height: 2;
}

#grouped-bar-chart thead th.lgbt-bar {
  top: 2.75em;
  line-height: 2;
  left: 0;
}

#grouped-bar-chart tbody tr {
  height: 296px;
  padding-top: 2px;
  color: #898989;
}

#grouped-bar-chart #age-50-64 {
  left: 0;
}

#grouped-bar-chart #age-65-plus {
  left: 142px;
}

#grouped-bar-chart tbody th {
  bottom: -2em;
  vertical-align: top;
  font-weight: normal;
  color: #212121;
  font-size: 1rem;
  font-weight: 800;
}

#grouped-bar-chart .bar {
  width: 60px;
  border-bottom: none;
  color: #212121;
}

#grouped-bar-chart .bar p {
  margin: 5px 0 0;
  padding: 0;
  font-size: 1rem;
  font-weight: 800;
}

#grouped-bar-chart .hetero-bar {
  left: 13px;
  background-color: #47acb1;
}

#grouped-bar-chart .lgbt-bar {
  left: 75px;
  background-color: #ffcd34;
}