/* ---------------------------------------------------------------------
Base page defintion

*/

#page { margin: 0 auto; width: 1000px; }
#page.is--preview {
  margin: 0 0;
}
/* mobile iframe preview */
#previewMobile {
  position: absolute;
  top: 0;
  left: 1015px;
}
body.wireframe #page { margin:  0; }
#content {
  padding: 20px 20px 0;
  width: 960px;
}
/* IE Styles */
.ie7 #content {
    position:relative;
    z-index: -1;
}

/* ---------------------------------------------------------------------
CSS for the "default-config" layout.

#page composition consists of three sections:
	- primary, secondary, tertiary

The default classes follow the "section master" layout (Aug 2011):
	- main content followed by rail + additional footer below

Styles applicable to this layout should be defined here

*/

.primary,
.secondary {
	float: left;
	margin: 0 10px;
}
.tertiary {
	clear: left;
}

/* ---------------------------------------------------------------------
Grid column

*/
.gridcol {
	display: inline;
	float: left;
	position: relative;
	margin: 0 10px;
}

/* ---------------------------------------------------------------------
Column widths for all Escenic grid layouts

*/
.s1of12, .x60   { width: 60px;  margin: 0 10px; }
.s2of12, .x140  { width: 140px; margin: 0 10px; }
.s3of12, .x220  { width: 220px; margin: 0 10px; }
.s4of12, .x300  { width: 300px; margin: 0 10px; }
.s5of12, .x380  { width: 380px; margin: 0 10px; }
.s6of12, .x460  { width: 460px; margin: 0 10px; }
.s7of12, .x540  { width: 540px; margin: 0 10px; }
.s8of12, .x620  { width: 620px; margin: 0 10px; }
.s9of12, .x700  { width: 700px; margin: 0 10px; }
.s10of12, .x780 { width: 780px; margin: 0 10px; }
.s11of12, .x860 { width: 860px; margin: 0 10px; }
.s12of12, .x940 { width: 940px; margin: 0 10px; }

.column-1 { clear:left; }

.x700x220 .column-1 { width:700px; margin: 0 10px 0 0; }
.x700x220 .column-2 { width:220px; margin: 0 0 0 10px; }

.x620x300 .column-1 { width:620px; margin: 0 10px 0 0; }
.x620x300 .column-2 { width:300px; margin: 0 0 0 10px; }

.x460x460 .column-1 { width:460px; margin: 0 10px 0 0; }
.x460x460 .column-2 { width:460px; margin: 0 0 0 10px; }

.x460x140 .column-1 { width:460px; margin: 0 10px 0 0; }
.x460x140 .column-2 { width:140px; margin: 0 0 0 10px; }

.x300x300x300 .column-1 { width:300px; margin: 0 10px 0 0; }
.x300x300x300 .column-2 { width:300px; margin: 0 10px; }
.x300x300x300 .column-3 { width:300px; margin: 0 0 0 10px; }

.x300x300x220 .column-1 { width:300px; margin: 0 10px 0 0; }
.x300x300x220 .column-2 { width:300px; margin: 0 10px; }
.x300x300x220 .column-3 { width:220px; margin: 0 0 0 10px; }

.x380x270x220 .column-1 { width:380px; margin: 0 10px 0 0; }
.x380x270x220 .column-2 { width:270px; margin: 0 10px; }
.x380x270x220 .column-3 { width:220px; margin: 0 0 0 10px; }

.x380x220 .column-1 { width:380px; margin: 0 10px 0 0; }
.x380x220 .column-2 { width:220px; margin: 0 0 0 10px; }

.x220x380 .column-1 { width: 220px; margin: 0 10px 0 0; }
.x220x220 .column-2 { width:220px; margin: 0 0 0 10px; }

.x300x300 .column-1 { width:300px; margin: 0 10px 0 0; }
.x300x300 .column-2 { width:300px; margin: 0 0 0 10px; }

.x300x140x140 .column-1 { width:300px; margin: 0 10px 0 0; }
.x300x140x140 .column-2 { width:140px; margin: 0 10px; }
.x300x140x140 .column-3 { width:140px; margin: 0 0 0 10px; }

.x220x220x220x220 .column-1 { width:220px; margin: 0 10px 0 0; }
.x220x220x220x220 .column-2 { width:220px; margin: 0 10px; }
.x220x220x220x220 .column-3 { width:220px; margin: 0 10px; }
.x220x220x220x220 .column-4 { width:220px; margin: 0 0 0 10px; }

.x220x220x440 .column-1 { width:220px; margin: 0 10px 0 0; }
.x220x220x440 .column-2 { width:220px; margin: 0 10px; }
.x220x220x440 .column-3 { width:440px; margin: 0 0 0 10px; }

.x220x220x140 .column-1 { width:220px; margin: 0 10px 0 0; }
.x220x220x140 .column-2 { width:220px; margin: 0 10px; }
.x220x220x140 .column-3 { width:140px; margin: 0 0 0 10px; }

.x140x140x140x140 .column-1 { width:140px; margin: 0 10px 0 0; }
.x140x140x140x140 .column-2 { width:140px; margin: 0 10px; }
.x140x140x140x140 .column-3 { width:140px; margin: 0 10px; }
.x140x140x140x140 .column-4 { width:140px; margin: 0 0 0 10px; }

.x140x140x300 .column-1 { width:140px; margin: 0 10px 0 0; }
.x140x140x300 .column-2 { width:140px; margin: 0 10px; }
.x140x140x300 .column-3 { width:300px; margin: 0 0 0 10px; }

.x140x140x140 .column-1 { width:140px; margin: 0 10px 0 0; }
.x140x140x140 .column-2 { width:140px; margin: 0 10px; }
.x140x140x140 .column-3 { width:140px; margin: 0 0 0 10px; }

.x140x140 .column-1 { width:140px; margin: 0 10px 0 0; }
.x140x140 .column-2 { width:140px; margin: 0 0 0 10px; }

.x140x140x140x140x140x140 .column-1 { width:140px; margin: 0 10px 0 0; }
.x140x140x140x140x140x140 .column-2 { width:140px; margin: 0 10px; }
.x140x140x140x140x140x140 .column-3 { width:140px; margin: 0 10px; }
.x140x140x140x140x140x140 .column-4 { width:140px; margin: 0 10px; }
.x140x140x140x140x140x140 .column-5 { width:140px; margin: 0 10px; }
.x140x140x140x140x140x140 .column-6 { width:140px; margin: 0 0 0 10px; }

.x380x300 .column-1 { width:380px; margin: 0 10px 0 0; }
.x380x300 .column-2 { width:300px; margin: 0 0 0 10px; }

.x380x300x220 .column-1 { width:380px; margin: 0 10px 0 0; }
.x380x300x220 .column-2 { width:300px; margin: 0 10px; }
.x380x300x220 .column-3 { width:220px; margin: 0 0 0 10px; }

.x220x380 .column-1 { width:220px; margin: 0 10px 0 0; }
.x220x380 .column-2 { width:380px; margin: 0 0 0 10px; }

.x220x220x220 .column-1 { width:220px; margin: 0 10px 0 0; }
.x220x220x220 .column-2 { width:220px; margin: 0 10px; }
.x220x220x220 .column-3 { width:220px; margin: 0 0 0 10px; }

.x300x140 .column-1 { width:300px; margin: 0 10px 0 0; }
.x300x140 .column-2 { width:140px; margin: 0 0 0 10px; }

.x140x460 .column-1 { width:140px; margin: 0 10px 0 0; }
.x140x460 .column-2 { width:460px; margin: 0 0 0 10px; }

/* ---------------------------------------------------------------------
Grid children (alpha - first, omega - last)

*/

.alpha { margin-left: 0; }
.omega { margin-right: 0; }


/* ---------------------------------------------------------------------
Clear yer floats

*/
.clear {
  clear: both;
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
}
/* http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified */
.clearfix { zoom: 1; }
.clearfix:after,
header:after,
footer:after,
nav:after,
nav ul:after,
#attic:after,
#page:after,
#content:after,
#content > section:after,
.top_full_width > section:after,
.primary > section:after,
.secondary > section:after,
.tertiary > section:after,
.top_full_width:after,
.x220x380 > .column-2 > .widget_stories:after,
.x220x380 > .column-2 > section:after {
  clear: both;
  content: '\0020';
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
}

.secondary section { clear: left; }

.top_full_width { padding: 0 20px; }
.top_full_width_home { padding: 20px 20px 0; }
.top_full_width > section { margin: 10px 0; }
.top_full_width > section:first-child { margin-top: 0; }

.primary .x620,
.primary .x620 .column-1 { margin: 0 }

/* ---------------------------------------------------------------------
Config section preview mode

*/
.widget_preview {
    padding: 5px;
    border: 1px solid #a2a2a2;
    background-color: #ccc;
    color: #000;
    text-align: center;
    font: normal 14px/1.2 Helvetica, Arial, sans-serif !important;
}