/*
  Variable Grid System.
  Learn more ~ http://www.spry-soft.com/grids/
  Based on 960 Grid System - http://960.gs/

  Licensed under GPL and MIT.
*/


/* Containers
   ---------- */
.container_4 {
  margin-left: auto;
  margin-right: auto;
  width: 800px }


/* Grid >> Global
   -------------- */

.grid_1,
.grid_2,
.grid_3,
.grid_4 {
  display: inline;
  float: left;
  position: relative;
  margin-left: 10px;
  margin-right: 10px }


/* Grid >> Children (Alpha ~ First, Omega ~ Last)
   ---------------------------------------------- */

.alpha {
  margin-left: 0 }

.omega {
  margin-right: 0 }

/* Grid >> 4 Columns
   ----------------- */

.container_4 .grid_1 {
  width: 180px }

.container_4 .grid_2 {
  width: 380px }

.container_4 .grid_3 {
  width: 580px }

.container_4 .grid_4 {
  width: 780px }


/* Prefix Extra Space >> 4 Columns
   ------------------------------- */

.container_4 .prefix_1 {
  padding-left: 200px;
}

.container_4 .prefix_2 {
  padding-left: 400px }

.container_4 .prefix_3 {
  padding-left: 600px }


/* Suffix Extra Space >> 4 Columns
   ------------------------------- */

.container_4 .suffix_1 {
  padding-right: 200px;
}

.container_4 .suffix_2 {
  padding-right: 400px }

.container_4 .suffix_3 {
  padding-right: 600px }



/* Push Space >> 4 Columns
   ----------------------- */

.container_4 .push_1 {
  left: 200px;
}

.container_4 .push_2 {
  left: 400px }

.container_4 .push_3 {
  left: 600px }


/* Pull Space >> 4 Columns
   ----------------------- */

.container_4 .pull_1 {
  left: -200px;
}

.container_4 .pull_2 {
  left: -400px }

.container_4 .pull_3 {
  left: -600px }


/* Clear Floated Elements
   ---------------------- */

/* http://sonspring.com/journal/clearing-floats */

.clear {
  clear: both;
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0 }

/* http://perishablepress.com/press/2008/02/05/lessons-learned-concerning-the-clearfix-css-hack */

.clearfix:after {
  clear: both;
  content: ' ';
  display: block;
  font-size: 0;
  line-height: 0;
  visibility: hidden;
  width: 0;
  height: 0 }

.clearfix {
  display: inline-block }

* html .clearfix {
  height: 1% }

.clearfix {
  display: block }