/* =============================================================================
   .clearfix class from h5bp.com project:
   https://github.com/paulirish/html5-boilerplate
   
   I just changed the name of it to fit this project even better... :)
   ========================================================================== */
.grid:before, .grid:after { content: ""; display: table; }
.grid:after { clear: both; }
.grid { zoom: 1; }

/* =============================================================================
   Idea taken from oocss.org project:
   https://github.com/stubbornella/oocss/blob/master/core/grid/grids.css
   
   Ruleset below means "select every element that is a child of .grid and in
   it's class attribute have any of following strings". No need for a new 
   class when you can target all your columns like this. :)
   
   NOTE: this selector doesn't work in IE6!
   
   If you want to add support for IE6 you need to do something like this:
   
   .grid .some-special-class-for-ie6{ float: left }
   
   Then in your markup do something like this:
   
   <div class="grid">
       <div class="s1o3 some-special-class-for-ie6">size 1 of 3</div>
       <div class="s1o3 some-special-class-for-ie6">size 1 of 3</div>
       <div class="s1o3 some-special-class-for-ie6">size 1 of 3</div>
   </div>
   ========================================================================== */
.grid [class*="s1o"],
.grid [class*="s2o"],
.grid [class*="s3o"],
.grid [class*="s4o"],
.grid [class*="s5o"],
.grid [class*="s6o"],
.grid [class*="s7o"],
.grid [class*="s8o"],
.grid [class*="s9o"],
.grid [class*="s10o"],
.grid [class*="s11o"] {
	float: left;
}

/* 2 columns */
.s1o2 { width: 50% }

/* 3 columns */
.s1o3 { width: 33.33333% }
.s2o3 { width: 66.66666% }

/* 4 columns */
.s1o4 { width: 25% }
.s2o4 { width: 50% }
.s3o4 { width: 75% }

/* 5 columns */
.s1o5{ width: 20% }
.s2o5{ width: 40% }
.s3o5{ width: 60% }
.s4o5{ width: 80% }

/* 6 columns */
.s1o6 { width: 16.66666% }
.s2o6 { width: 33.33332% }
.s3o6 { width: 49.99992% }
.s4o6 { width: 66.66658% }
.s5o6 { width: 83.33324% }

/* 7 columns */
.s1o7 { width: 14.28571% }
.s2o7 { width: 28.57142% }
.s3o7 { width: 42.85713% }
.s4o7 { width: 57.14284% }
.s5o7 { width: 71.42855% }
.s6o7 { width: 85.71426% }

/* 8 columns */
.s1o8 { width: 12.5% }
.s2o8 { width: 25% }
.s3o8 { width: 37.5% }
.s4o8 { width: 50% }
.s5o8 { width: 62.5% }
.s6o8 { width: 75% }
.s7o8 { width: 87.5% }

/* 9 columns */
.s1o9 { width: 11.11111% }
.s2o9 { width: 22.22222% }
.s3o9 { width: 33.33333% }
.s4o9 { width: 44.44444% }
.s5o9 { width: 55.55555% }
.s6o9 { width: 66.66666% }
.s7o9 { width: 77.77777% }
.s8o9 { width: 88.88888% }

/* 10 columns */
.s1o10 { width: 10% }
.s2o10 { width: 20% }
.s3o10 { width: 30% }
.s4o10 { width: 40% }
.s5o10 { width: 50% }
.s6o10 { width: 60% }
.s7o10 { width: 70% }
.s8o10 { width: 80% }
.s9o10 { width: 90% }

/* 12 columns */
.s1o12 { width: 8.3333% }
.s2o12 { width: 16.6666% }
.s3o12 { width: 24.9999% }
.s4o12 { width: 33.3332% }
.s5o12 { width: 41.6665% }
.s6o12 { width: 49.9998% }
.s7o12 { width: 58.3331% }
.s8o12 { width: 66.6664% }
.s9o12 { width: 74.9997% }
.s10o12 { width: 83.3334% }
.s11o12 { width: 91.6663% }
.s11o12 { width: 100% }