h2.banner {
  font-size: 24px;
  font-variant: normal;
  text-tranform: uppercase;
  color: black;
  background: #fdc291;
  border: 1px solid black;
}

/* <div class='slogan'> -- A box with a catchphrase or slogan for a show.
 * TO DO: adjust size gracefully for small screens.
 */
div.slogan
{
  font-size: 24px;
  line-height: 1.2;
  text-align: center;
  border: 1px solid #c66d5d;
  padding: 5px;
  margin-top: 5px;
  margin-bottom: 5px;
  margin-right: 3em;
  margin-left: 3em;
  /* padding-left: 35px; */
  background-color: #ffddad;
  /* background-image images/postquote.png left top no-repeat */
  overflow: auto;
  clear: both;
}

/* <div class='inset'> -- a box with no border, but with inset margins.
 * Generally has some other sort of textual distinction like <em> or
 * <strong> applied to the text within it, but that's not encapsulated
 * here (it should be, but nested tags like <cite> or <strong> in the
 * text mean that takes more thought than I have brain for at the moment).
 * Also, we should adjust for small screen sizes.
 */
div.inset
{
  margin: 0 2em;
}

/* <span class='headphrase'> -- emphasized initial phrase.  Usually
 * corresponds to 'redbold' on the WordPress site.  Example usage:
 *
 * <span class='headphrase'>It’s go time!</span>  Join Red and the crew...
 *
 * or
 *
 * <span class='headphrase'><cite>Reynardine</cite>:</span> In a small 
 * English village, tempers flare...
 */
span.headphrase
{
  color: red;
  font-weight: bold;
  letter-spacing: 1px;
}

/* The "lightbluebold" class is inherited from the Wordpress site,
 * where it was used mainly to style "PMRP" and "Post-Meridian Radio
 * Players", but also in other places for emphasis.  We should replace
 * it with something else (i.e., create a new class with a different,
 * more semantic name, and use that instead).  It probably shouldn't be
 * light blue on the new site, but dark blue or purple look like links
 * For now, it's bold and letterspaced.
 */
span.lightbluebold
{
  font-weight: bold;
  letter-spacing: 1px;
}

/* <img class='left' ...> floats left and has a right margin so the text
 * doesn't run right up against it.
 */
img.left {
  float: left;
  margin-right: 1ex;
}

/* <img class='right' ...> floats right and has a left margin so the text
 * doesn't run right up against it.
 */
img.right {
  float: right;
  margin-left: 1ex;
}