1. BASIC
/* SEO4 CSS STYLESHEET */
html, body {font-family:Tahoma, sans-serif; margin:0px; padding:0px;}
/* DIV SECTIONS */
.section {clear: both; padding: 0px; margin: 0px;}
.col {display:block; float:left; margin:1% 0 1% 1.5%;}
.col:first-child {margin-left: 0;}
.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }
.hidden {visibility: hidden;}Simple span grid for your content
/* SEO4 SIMPLE GRID (1, 2, 3) */
.fullwidth, .grid1, .span_2_of_2, .span_3_of_3, .span_4_of_4, .span_5_of_5, .span_6_of_6, .span_8_of_8, .span_10_of_10, .span_12_of_12 {width: 100%;}
.halfwidth, .grid2, .span_1_of_2, .span_2_of_4, .span_3_of_6, .span_4_of_8, .span_5_of_10, .span_6_of_12 {width: 49.25%;}
.onequart, .span_2_of_3, .span_4_of_6, .span_8_of_12 {width: 66.16%;}
.twoquart, .grid3, .span_1_of_3, .span_2_of_6, .span_4_of_12 {width: 32.33%;}
/* SEO4 SYSTEM GRID (4, 5, 6, 8, 10, 12) */
.grid4, .span_1_of_4, .span_2_of_8, .span_3_of_12 {width: 23.87%;}
.grid5, .span_1_of_5, .span_2_of_10 {width: 18.8%;}
.grid6, .span_1_of_6, .span_2_of_12 {width: 15.41%;}
.grid8, .span_1_of_8 {width: 11.18%;}
.grid10, .span_1_of_10 {width: 8.65%;}
.grid12, .span_1_of_12 {width: 6.958%;}SPAN GRID EXTENDED
/* SEO4 SPAN GRID EXTENDED - SINGLES */
.span_3_of_10 {width: 28.95%;}
.span_3_of_8 {width: 36.56%;}
.span_2_of_5, .span_4_of_10 {width: 39.1%;}
.span_5_of_12 {width: 40.79%;}
.span_7_of_12 {width: 57.70%;}
.span_3_of_5, .span_6_of_10 {width: 59.4%;}
.span_5_of_8 {width: 61.93%;}
.span_7_of_10 {width: 69.55%;}
.span_3_of_4, .span_6_of_8, .span_9_of_12 {width: 74.62%;}
.span_4_of_5, .span_8_of_10 {width: 79.7%;}
.span_5_of_6, .span_10_of_12 {width: 83.08%;}
.span_7_of_8 {width: 87.31%;}
.span_9_of_10 {width: 89.85%;}
.span_11_of_12 {width: 91.54%;}Full width on mobile (580px)
/* GO FULL WIDTH BELOW 580 PIXELS */
@media only screen and (max-width: 580px) {
.col { margin: 1% 0 1% 0%; }
.hidden {display: none;}
.span_1_of_4, .span_2_of_4, .span_3_of_4, .span_4_of_4 { width: 100%; }
.span_3_of_3, .span_2_of_3, .span_1_of_3 { width: 100%; }
.span_2_of_2, .span_1_of_2 {width: 100%;}
}/* INFINITY GRID */
.grid2:nth-child(2n+1),
.grid3:nth-child(3n+1),
.grid4:nth-child(4n+1),
.grid5:nth-child(5n+1),
.grid6:nth-child(6n+1),
.grid7:nth-child(7n+1),
.grid8:nth-child(8n+1),
.grid10:nth-child(10n+1),
.grid12:nth-child(12n+1) {clear:left; margin-left: 0;}Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
/* SEO4 SIMPLE GRID (1, 2, 3) */
.fullwidth, .grid1, .span_2_of_2, .span_3_of_3, .span_4_of_4, .span_5_of_5, .span_6_of_6, .span_8_of_8, .span_10_of_10, .span_12_of_12 {width: 100%;}
.halfwidth, .grid2, .span_1_of_2, .span_2_of_4, .span_3_of_6, .span_4_of_8, .span_5_of_10, .span_6_of_12 {width: 49.25%;}
.onequart, .span_2_of_3, .span_4_of_6, .span_8_of_12 {width: 66.16%;}
.twoquart, .grid3, .span_1_of_3, .span_2_of_6, .span_4_of_12 {width: 32.33%;}
/* SEO4 SYSTEM GRID (4, 5, 6, 8, 10, 12) */
.grid4, .span_1_of_4, .span_2_of_8, .span_3_of_12 {width: 23.87%;}
.grid5, .span_1_of_5, .span_2_of_10 {width: 18.8%;}
.grid6, .span_1_of_6, .span_2_of_12 {width: 15.41%;}
.grid8, .span_1_of_8 {width: 11.18%;}
.grid10, .span_1_of_10 {width: 8.65%;}
.grid12, .span_1_of_12 {width: 6.958%;}Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
../seo4.css
/* GO FULL WIDTH BELOW 580 PIXELS */
@media only screen and (max-width: 580px) {
.col { margin: 1% 0 1% 0%; }
.hidden {display: none;}
.span_1_of_4, .span_2_of_4, .span_3_of_4, .span_4_of_4 { width: 100%; }
.span_3_of_3, .span_2_of_3, .span_1_of_3 { width: 100%; }
.span_2_of_2, .span_1_of_2 { width: 100%;}
}