/******************************************************************************\
  GRID STRUCTURE
\******************************************************************************/

/* TODO possible :not(span):not()... blacklist */
* {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
.fancybox-wrap { overflow: visible !important; }

/* this really a 960px grid, the 980px width is to offset border 
   spacing with using a "display: table" grid system */


/* Columns ------------------------------------------------------------------ */

.column {
  display: table;
  table-layout:fixed;
  border-spacing: 20px 10px;
  width: 980px;
  margin: 0 auto;
  border-collapse: separate;
  clear: both;
}

.column > * {
  display: table-cell;
  vertical-align: top;
}


/* Nested Columns ----------------------------------------------------------- */

/* We turn nested columns into floated elements because we can't easily 
   control border-spacing in nested tables. The disadvantage to this is 
   elements in nested columns won't have even heights. */

.column .column {
  display: block;
  float: left;
  width: auto;
}

.column .column > * {
  display: block;
  float: left;
  margin-left: 20px;
}

.column .column > *:first-child {
  margin-left: 0;
}

.nest > * {
  /* this is here as a placeholder, right now the nest class serves no 
  purpose other than readability in the HTML markup */
}


/* Grouping into rows ------------------------------------------------------- */

/* for stacking sections with-in the same column */

.stack > * {
  display: block;
  margin-top: 20px;
  width: auto;
}

.stack > *:first-child {
  margin-top: 0;
}

/* Global padding on sections: top and sides -------------------------------- */
section { padding: 18px 18px 0; }

/* Column Widths and Paddings ----------------------------------------------- */

/* single column */
.one > * { width: 100%; }

/* two columns */
.two > * { width: 460px; }

/* note, as of right now the only columns that can have nests inside them are three and
four column grids.  We can add this to others in the future if we think it's needed. */

/* three columns */
.three > * { width: 300px; }
/* nested: */
.three .two > * { width: 140px; }
.three .three > * { width: 86px; }

.three > .span-2 { width: 620px; }
/* nested: */
.three .span-2 .two > * { width: 300px; }
.three .span-2 .three > * { width: 193px; }
.three .span-2 .four > * { width: 140px; }

/* four columns */
.four > * { width: 220px; }
/* nested: */
.four .two > * { width: 100px; }

.four > .span-2 { width: 460px; }
/* nested: */
.four .span-2 .two > * { width: 220px; }
.four .span-2 .three > * { width: 140px; }

.four > .span-3 { width: 700px; }
/* nested: */
.four .span-3 .two > * { width: 340px; }
.four .span-3 .three > * { width: 220px; }
.four .span-3 .four > * { width: 160px; }

/* five columns */
.five > * { width: 172px; }
.five > .span-2 { width: 364px; }
.five > .span-3 { width: 556px; }
.five > .span-4 { width: 748px; }

/* six columns */
.six > * { width: 140px; }
.six > .span-2 { width: 300px; }
.six > .span-3 { width: 460px; }
.six > .span-4 { width: 620px; }
.six > .span-5 { width: 780px; }

/* Edge cases */

/* Two column stacked in a span 3 section in a five column layout #whoa */
.five > .stack.span-3 > .two > * { width: 280px; }

/* Zend page "character" overrides */
div.character.column { width: 382px; float: right; }
div.agegate.column { text-align: center; }

div.character.column section { padding: 0 7px 4px; }
.character section { padding: 0; }