/******************************************************************************
 * StoryCapsule.css
 *
 * RealPatterns Web Application Framework :: Story Capsule
 *
 * Copyright 2007 RealPatterns, Inc.  All rights reserved.
 *
 * A Story Capsule is a small box containing an attention-getter title, a
 * link, a story summary, and a small image. It is used to provide a compact
 * story summary of a featured article, news, or special report. Layout is
 * accomplished by using a three-row table providing a grid of nine cells.
 * The cells on this grid are denoted, from left to right and top to bottom:
 * north west, north, north east, west, center, east, south west, south, and
 * south east. All except the center cell are bordering cells, and are used
 * to decortate the borders and corners of the Story Capsule. The center cell
 * contains a nested two-row table. The first row spans two columns and bears
 * the title of the story. The second row contains two cells. The first one
 * contains a link to the story, and a summary. The second cell contains a
 * small image associated with the story.
 *
 * Color map:
 * ----------
 * rgb(50, 50, 50);     (Dark Gray)
 * rgb(169, 119, 93);   (Cinnamon)
 * rgb(128, 153, 80);   (Olive)
 */

/******************************************************************************
 * Story Capsule.
 * Apply to top-level table element containing all content.
 */
.StoryCapsule {

  width: 468px;
  border: none;
  z-index: 10;

  color: rgb(50, 50, 50);
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
  font-size: 12px;
  font-family: sans-serif;
}

/******************************************************************************
 * Story Capsule::North West.
 * Apply to 1st row, 1st cell.
 */
.StoryCapsuleNorthWest {

  width: 10px;
  height: 10px;
  text-align: left;
  vertical-align: top;

  color: rgb(50, 50, 50);
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
  font-size: 12px;
  font-family: sans-serif;
}

/******************************************************************************
 * Story Capsule::North.
 * Apply to 1st row, 2nd cell.
 */
.StoryCapsuleNorth {

  text-align: center;
  vertical-align: top;

  color: rgb(50, 50, 50);
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
  font-size: 12px;
  font-family: sans-serif;
}

/******************************************************************************
 * Story Capsule::North East.
 * Apply to 1st row, 3rd cell.
 */
.StoryCapsuleNorthEast {

  width: 10px;
  height: 10px;
  text-align: right;
  vertical-align: top;

  color: rgb(50, 50, 50);
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
  font-size: 12px;
  font-family: sans-serif;
}

/******************************************************************************
 * Story Capsule::West.
 * Apply to 2nd row, 1st cell.
 */
.StoryCapsuleWest {

  width: 10px;
  text-align: left;
  vertical-align: middle;

  color: rgb(50, 50, 50);
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
  font-size: 12px;
  font-family: sans-serif;
}

/******************************************************************************
 * Story Capsule::Center.
 * Apply to 2nd row, 2nd cell.
 */
.StoryCapsuleCenter {

  height: 76px;
  text-align: center;
  vertical-align: middle;

  color: rgb(50, 50, 50);
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
  font-size: 12px;
  font-family: sans-serif;
}

/******************************************************************************
 * Story Capsule::East.
 * Apply to 2nd row, 3rd cell.
 */
.StoryCapsuleEast {

  width: 10px;
  text-align: right;
  vertical-align: middle;

  color: rgb(50, 50, 50);
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
  font-size: 12px;
  font-family: sans-serif;
}

/******************************************************************************
 * Story Capsule::South West.
 * Apply to 3rd row, 1st cell.
 */
.StoryCapsuleSouthWest {

  width: 10px;
  height: 10px;
  text-align: left;
  vertical-align: bottom;

  color: rgb(50, 50, 50);
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
  font-size: 12px;
  font-family: sans-serif;
}

/******************************************************************************
 * Story Capsule::South.
 * Apply to 3rd row, 2nd cell.
 */
.StoryCapsuleSouth {

  text-align: center;
  vertical-align: bottom;

  color: rgb(50, 50, 50);
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
  font-size: 12px;
  font-family: sans-serif;
}

/******************************************************************************
 * Story Capsule::Sourth East.
 * Apply to 3rd row, 3rd cell.
 */
.StoryCapsuleSouthEast {

  width: 10px;
  height: 10px;
  text-align: right;
  vertical-align: bottom;

  color: rgb(50, 50, 50);
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
  font-size: 12px;
  font-family: sans-serif;
}

/******************************************************************************
 * Story Capsule::Copy.
 * Apply to nested table element containing story summary copy.
 */
.StoryCapsuleCopy {

  border: none;
  z-index: 10;
  text-align: left;
  vertical-align: middle;

  color: rgb(50, 50, 50);
  margin: 0px 0px 0px 2px;
  padding: 0px 0px 0px 0px;
  font-size: 12px;
  font-family: sans-serif;
}

/******************************************************************************
 * Story Capsule::Title.
 * Apply to 1st row/cell of summary copy table.
 */
.StoryCapsuleTitle {

  border: none;
  z-index: 10;
  text-align: left;
  vertical-align: top;

  color: rgb(128, 153, 80);
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
  font-size: 16px;
  font-weight: bold;
  font-family: sans-serif;
}

/******************************************************************************
 * Story Capsule::Summary.
 * Apply to 2nd row, 1st cell of nested table element.
 */
.StoryCapsuleSummary {

  border: none;
  z-index: 10;
  text-align: left;
  vertical-align: bottom;

  color: rgb(50, 50, 50);
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
  font-size: 12px;
  font-family: sans-serif;
}

/******************************************************************************
 * Story Capsule::Icon.
 * Apply to 2nd row, 2nd cell of nested table element.
 */
.StoryCapsuleIcon {

  border: none;
  z-index: 10;

  color: rgb(50, 50, 50);
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
  font-size: 12px;
  font-family: sans-serif;
}

/******************************************************************************
 * Story Capsule::Link.
 * Apply to story summary link.
 */
.StoryCapsuleLink {

  border: none;
  z-index: 10;
  text-align: left;
  color: rgb(169, 119, 93);
  vertical-align: middle;
  font-weight: bold;
  text-decoration: underline;

  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
  font-size: 12px;
  font-family: sans-serif;
}