/* Crucial IE6 Fix: html must also have 100% height, or body/div 100% height fails */
html,
body {
  padding: 0;
  margin: 0;
  height: 100%;
}

table {
  border-top-width: 0px;
  border-bottom-width: 0px;
  border-left-width: 0px;
  border-right-width: 0px;
  border-collapse: collapse;
  border: 0;
  /* Logical properties do not exist in IE6, use the physical ones */
  margin-left: auto;
  margin-right: auto;
}

.main {
  /* 2. Standard browsers use this line to center; IE6 ignores it but we keep it */
  margin: 0 auto;

  /* 3. CRITICAL: Reset text alignment so our actual text inside isn't centered */
  text-align: left;

  /* 4. You MUST give the container a fixed width, or it will stretch to 100%.
        Must match .main table below, or every table spills out of it. */
  width: 788px;

  /* 5. Trigger IE6's hasLayout engine so it calculates borders/backgrounds correctly */
  zoom: 1;
}
/* 780px + 8px for borders */
.main table {
  width: 788px;
}
.main td {
  padding: 0;
}

/* Reset table */
.main table td table {
  width: 100%;
  table-layout: auto;
  margin-bottom: 0;
  padding: 4px;
}

td {
  margin: 0;
}

.center-text {
  display: block;
  text-align: center;
}

/* The content column. 330px total: 318px of content plus 6px gutters, so the
   text does not run straight into the borders. Needs td in the selector to
   outweigh the `.main td { padding: 0 }` reset above. */
.main td.middle-wrapper {
  width: 318px;
  padding: 0 6px;
}

/* Matches the content width of .middle-wrapper. Explicit px rather than 100%:
   IE6 can resolve a percentage against the padded box and then grow the cell,
   which would blow out the 788px total. */
.poster {
  width: 318px;
}

/* The wide variant of the content column, used by layouts/default when a page
   passes wide=true. The sidebar and the two rules beside it come out, so the
   column takes what is left of the 788px: 788 - 1 (left edge) - 229 (right
   side) = 558, less a 4px gutter each side = 550px of content.

   That 550 is not a coincidence worth losing - it is the stage size Flash
   authored to by default, so the archive plays at 1:1 instead of being scaled
   down into the narrow column. Anything that changes these numbers should keep
   the content at 550. */
.main td.theatre-wrapper {
  width: 550px;
  padding: 0 4px;
}

/* The footer sits beside the left edge alone here, rather than beside the
   sidebar as well: 788 - 1 = 787. */
.theatre td.footer {
  width: 787px;
}

/* 225px (outside borders) */
.left-side {
  width: 225px;
  background-color: #2e2e2e;
}

/* 225px + 4px for borders */
.right-side {
  width: 229px;
}

/* 330px (poster) + 229px (right side) - 19px (left padding) */
.footer {
  width: 559px;
}

/* These are ids in components/shoutbox.html, not classes */
#shout-box-input {
  width: 60%;
}
#shout-box-button {
  width: 30%;
}

.adornment-image {
  height: 16px;
  width: 16px;
  display: inline-block;
}

.float-left {
  float: left;
}

.float-right {
  float: right;
}

.side-banner {
  width: 220px;
  padding-bottom: 6px;
  padding-top: 6px;
}

.top-banner {
  float: right;
  width: 400px;
}

/* Borders */

.table-border-v {
  width: 1px;
  font-size: 0;
  line-height: 0;
}

.table-border-h {
  height: 1px;
  font-size: 0;
  line-height: 0;
}

.table-border-v-2 {
  width: 2px;
  font-size: 0;
  line-height: 0;
}

.table-border-h-2 {
  height: 2px;
  font-size: 0;
  line-height: 0;
}

/* Clears the floats so the container preserves its 100% height structural boundary */
.clear {
  clear: both;
  font-size: 0;
  height: 0;
  line-height: 0;
}

.mod {
  margin-left: 10px;
}

/* Edition page. The horizontal inset comes from .middle-wrapper, so everything
   here only sets vertical rhythm. */

.edition-title {
  margin: 8px 0;
}

.edition-tagline {
  padding-bottom: 6px;
}

/* Undo the 4px all round from `.main table td table` so the rows line up with
   the description underneath */
.main table td table.edition-facts {
  padding: 4px 0;
}

.edition-facts .edition-label {
  width: 70px;
}

.edition-description,
.edition-gallery,
.edition-downloads {
  padding: 6px 0;
}