/* Forces backgrounds to span full width, even if there is horizontal scrolling. Increase this if your layout is wider. Note: IE6 works fine without this fix. */
body {
    min-width:960px;
}
.gridtest {
    text-align:center;
    background:#ccc;
}

/* Containers ---------------------------------------------------------------------------------------------------- */
#wrapper {
    width:960px;
    margin-right:auto;
    margin-left:auto;
}

/* Grid >> Global ---------------------------------------------------------------------------------------------------- */
.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12 {
    position:relative;
    float:left;
    display:inline;
    margin-right:10px;
    margin-bottom:10px;
    margin-left:10px;
}
.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,
.push_10,
.pull_10,
.push_11,
.pull_11,
.push_12,
.pull_12 {
    position:relative;
}

/* Grid >> Children (Alpha ~ First, Omega ~ Last) ---------------------------------------------------------------------------------------------------- */
.alpha {
    margin-left:0;
}
.omega {
    margin-right:0;
}

/* Grid >> 12 Columns ---------------------------------------------------------------------------------------------------- */
#wrapper  .grid_1 {
    width:60px;
}
#wrapper  .grid_2 {
    width:140px;
}
#wrapper .grid_3 {
    width:220px;
}
#wrapper .grid_4 {
    width:300px;
}
#wrapper .grid_5 {
    width:380px;
}
#wrapper  .grid_6 {
    width:460px;
}
#wrapper  .grid_7 {
    width:540px;
}
#wrapper  .grid_8 {
    width:620px;
}
#wrapper  .grid_9 {
    width:700px;
}
#wrapper  .grid_10 {
    width:780px;
}
#wrapper  .grid_11 {
    width:860px;
}
#wrapper  .grid_12 {
    width:940px;
}

/* Prefix Extra Space >> 12 Columns ---------------------------------------------------------------------------------------------------- */
#wrapper  .prefix_1 {
    padding-left:80px;
}
#wrapper  .prefix_2 {
    padding-left:160px;
}
#wrapper  .prefix_3 {
    padding-left:240px;
}
#wrapper  .prefix_4 {
    padding-left:320px;
}
#wrapper  .prefix_5 {
    padding-left:400px;
}
#wrapper  .prefix_6 {
    padding-left:480px;
}
#wrapper  .prefix_7 {
    padding-left:560px;
}
#wrapper  .prefix_8 {
    padding-left:640px;
}
#wrapper  .prefix_9 {
    padding-left:720px;
}
#wrapper  .prefix_10 {
    padding-left:800px;
}
#wrapper  .prefix_11 {
    padding-left:880px;
}

/* Suffix Extra Space >> 12 Columns ---------------------------------------------------------------------------------------------------- */
#wrapper  .suffix_1 {
    padding-right:80px;
}
#wrapper  .suffix_2 {
    padding-right:160px;
}
#wrapper  .suffix_3 {
    padding-right:240px;
}
#wrapper  .suffix_4 {
    padding-right:320px;
}
#wrapper  .suffix_5 {
    padding-right:400px;
}
#wrapper  .suffix_6 {
    padding-right:480px;
}
#wrapper  .suffix_7 {
    padding-right:560px;
}
#wrapper  .suffix_8 {
    padding-right:640px;
}
#wrapper  .suffix_9 {
    padding-right:720px;
}
#wrapper  .suffix_10 {
    padding-right:800px;
}
#wrapper  .suffix_11 {
    padding-right:880px;
}

/* Push Space >> 12 Columns ---------------------------------------------------------------------------------------------------- */
#wrapper  .push_1 {
    left:80px;
}
#wrapper  .push_2 {
    left:160px;
}
#wrapper  .push_3 {
    left:240px;
}
#wrapper  .push_4 {
    left:320px;
}
#wrapper  .push_5 {
    left:400px;
}
#wrapper  .push_6 {
    left:480px;
}
#wrapper  .push_7 {
    left:560px;
}
#wrapper  .push_8 {
    left:640px;
}
#wrapper  .push_9 {
    left:720px;
}
#wrapper  .push_10 {
    left:800px;
}
#wrapper  .push_11 {
    left:880px;
}

/* Pull Space >> 12 Columns ---------------------------------------------------------------------------------------------------- */
#wrapper  .pull_1 {
    left:-80px;
}
#wrapper  .pull_2 {
    left:-160px;
}
#wrapper  .pull_3 {
    left:-240px;
}
#wrapper  .pull_4 {
    left:-320px;
}
#wrapper  .pull_5 {
    left:-400px;
}
#wrapper  .pull_6 {
    left:-480px;
}
#wrapper  .pull_7 {
    left:-560px;
}
#wrapper  .pull_8 {
    left:-640px;
}
#wrapper  .pull_9 {
    left:-720px;
}
#wrapper  .pull_10 {
    left:-800px;
}
#wrapper  .pull_11 {
    left:-880px;
}

/* http://sonspring.com/journal/clearing-floats */
.clear {
    width:0;
    height:0;
    overflow:hidden;
    clear:both;
    display:block;
    visibility: hidden;
}

/* http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified */
.clearfix:before,
.clearfix:after {
    width:0;
    height:0;
    overflow:hidden;
    display:block;
    content: '020';
    visibility: hidden;
}
.clearfix:after {
    clear:both;
}

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