H4.cast, #CastSection {
    clear: both;
}

.program {
  position: relative;
}

.program, .people .people_bg {
  width: 30em; /* if you change this, change .people .bio { left }*/
  padding: 0.5em 0.5em;
}

.program {
  border: 1px solid black;
  padding: 0.5em 0.5em;
}
.bios { 
  float: right;
}

/* DL-structured program */
.people dt.name {
    float: left;
    background-color: white;
}
.people dd.line {
    height: 1.1em;
    display:block;
    text-align: right;
    background-image: url('/images/dots');
    background-position: left bottom; 
    background-repeat: repeat-x;
}

/* /DL-structured program */

.bio { 
  display: none;
  border: 1px solid black;
/*  border-left: 1px solid white; */
  padding: 0.5em;
}

.bio, .bio_bg {
  min-width: 20em;
  max-width: 30em;
}

.people .bio { 
  position: absolute;
  left: 30em; /* should = .program { width } */
  margin-top: -0.5em; /* should = .bio { padding }*/
  max-width: 30em;
}

/*.people .bio:before, can't use 'position' property on :before*/
.people .bio .bridge { 
/*  content: url("/images/bridge"); */
/*
  background-image: url("images/bridge") url("/images/bridge");
*/
  background-image: url("/images/bridge");
  background-position: center;
  background-repeat: no-repeat;

  position: absolute;
  display: block;
  left: -7px;
  top: 0.8em;
  z-index: 200;
}
.people .bio .bridge img { 
  visibility: hidden;
}

.bio, .bios { 
  text-align: left;
}

.bio .name.position { 
  text-align: left;
  font-style: italic;
}

.bio .name.real { 
  text-align: right;
  display: none;
}

.program .name[onclick], #Cast .name [onclick] {
  color: #3D486D;
  text-decoration: underline;
  cursor: pointer;
}

.program .note {
    margin: 1em 1em 0em;
    text-align: right;
}