/* This is a playground to understand grid systems. It is based on the 960 Grid System, licensed under GPL and MIT. Learn more: http://960.gs/
*/

/*
=================================================================
CLEARFIX
=================================================================
*/

/* http://sonspring.com/journal/clearing-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:before,
.clearfix:after,
.container:before,
.container:after {
  content: '.';
  display: block;
  overflow: hidden;
  visibility: hidden;
  font-size: 0;
  line-height: 0;
  width: 0;
  height: 0;
}

.clearfix:after,
.container:after {
  clear: both;
}

/*
  The following zoom:1 rule is specifically for IE6 + IE7.
  Move to separate stylesheet if invalid CSS is a problem.
*/

.clearfix,
.container {
  zoom: 1;
}


/*
=================================================================
CONTAINER
=================================================================
*/

.container {
    width: 100%;
}

/*
=================================================================
GRID >> GLOBAL
=================================================================
*/

.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10 {
    display: inline;
    float: left;
    margin-left: 1%;
    margin-right: 1%;
    margin-bottom: 2%;
}

.push_1, .pull_1,
.push_2, .pull_2,
.push_3, .pull_3,
.push_4, .pull_4,
.push_5, .pull_5,
.push_6, .pull_6,
.push_7, .pull_7,
.push_8, .pull_8,
.push_9, .pull_9, {
    position: relative;
}

.alpha {
    margin-left: 0;
}

.omega {
    margin-right: 0;
}

/*
=================================================================
GRID >> COLUMNS
=================================================================
*/

.container .grid_1 {
    width: 8%;
}

.container .grid_2 {
    width: 18%;
}

.container .grid_3 {
    width: 28%;
}

.container .grid_4 {
    width: 38%;
}

.container .grid_5 {
    width: 48%;
}

.container .grid_6 {
    width: 58%;
}

.container .grid_7 {
    width: 68%;
}

.container .grid_8 {
    width: 78%;
}

.container .grid_9 {
    width: 88%;
}

.container .grid_10 {
    width: 98%;
}

/*
=================================================================
GRID >> PREFIX + SUFFIX EXTRA SPACE
=================================================================
*/

.container .prefix_1 {
    margin-left: 11%;
}

.container .prefix_2 {
    margin-left: 21%;
}

.container .prefix_3 {
    margin-left: 31%;
}

.container .prefix_4 {
    margin-left: 41%;
}

.container .prefix_5 {
    margin-left: 51%;
}

.container .prefix_6 {
    margin-left: 61%;
}

.container .prefix_7 {
    margin-left: 71%;
}

.container .prefix_8 {
    margin-left: 81%;
}

.container .prefix_9 {
    margin-left: 91%;
}

.container .suffix_1 {
    margin-right: 11%;
}

.container .suffix_2 {
    margin-right: 21%;
}

.container .suffix_3 {
    margin-right: 31%;
}

.container .suffix_4 {
    margin-right: 41%;
}

.container .suffix_5 {
    margin-right: 51%;
}

.container .suffix_6 {
    margin-right: 61%;
}

.container .suffix_7 {
    margin-right: 71%;
}

.container .suffix_8 {
    margin-right: 81%;
}

.container .suffix_9 {
    margin-right: 91%;
}

/*
=================================================================
GRID >> PUSH + PULL SPACE
=================================================================
*/

.container .push_1 {
    left: 10%;
}

.container .push_2 {
    left: 20%;
}

.container .push_3 {
    left: 30%;
}

.container .push_4 {
    left: 40%;
}

.container .push_5 {
    left: 50%;
}

.container .push_6 {
    left: 60%;
}

.container .push_7 {
    left: 70%;
}

.container .push_8 {
    left: 80%;
}

.container .push_9 {
    left: 90%;
}

.container .pull_1 {
    left: -10%;
}

.container .pull_2 {
    left: -20%;
}

.container .pull_3 {
    left: -30%;
}

.container .pull_4 {
    left: -40%;
}

.container .pull_5 {
    left: -50%;
}

.container .pull_6 {
    left: -60%;
}

.container .pull_7 {
    left: -70%;
}

.container .pull_8 {
    left: -80%;
}

.container .pull_9 {
    left: -90%;
}