/* ------------------------------------------------- * * Ezy Grid by Frej Raahede Nielsen * http://github.com/raahede/ezy * ------------------------------------------------- * */ /* ------------------------------------------------- * * Micro Clearfix * http://nicolasgallagher.com/micro-clearfix-hack/ */ .page:before, .grid:before, .page:after, .grid:after { content: " "; display: table; } .page:after, .grid:after { clear: both; } .page, .grid { /** * For IE 6/7 only * Include this rule to trigger hasLayout and contain floats. */ *zoom: 1; } /* --- End clearfix --- */ .page { margin-left: auto; margin-right: auto; } .column { /* Grid column base at a 4-column context */ margin-left: 4.16667%; margin-right: 4.16667%; float: left; /* Fixing double margin on IE6 */ _display: inline; } .page { max-width: 330px; /* Forcing static grid on IE6 and IE7 */ *width: 330px; padding-left: 1em; padding-right: 1em; } @media (min-width: 990px) { .page { max-width: 690px; /* Forcing static grid on IE6 and IE7 */ *width: 690px; padding-left: 50px; padding-right: 100px; } } @media (min-width: 1250px) { .page { max-width: 1050px; /* Forcing static grid on IE6 and IE7 */ *width: 1050px; padding-left: 100px; padding-right: 100px; } } .no-media-queries .page { /* Fallback for browsers not supporting media queries */ max-width: 1050px; /* Forcing static grid on IE6 and IE7 */ *width: 1050px; padding-left: 100px; padding-right: 100px; } .grid { margin-left: -4.54545%; margin-right: -4.54545%; } @media (min-width: 990px) { .grid { margin-left: -2.17391%; margin-right: -2.17391%; } } @media (min-width: 1250px) { .grid { margin-left: -1.42857%; margin-right: -1.42857%; } } .no-media-queries .grid { /* Fallback for browsers not supporting media queries */ margin-left: -1.42857%; margin-right: -1.42857%; } .column { /* Spanning 4 of 4 columns */ width: 91.66667%; } @media (min-width: 990px) { .column { /* Spanning 4 of 8 columns */ width: 45.83333%; margin-left: 2.08333%; margin-right: 2.08333%; } } @media (min-width: 1250px) { .column { /* Spanning 4 of 12 columns */ width: 30.55556%; margin-left: 1.38889%; margin-right: 1.38889%; } } .no-media-queries .column { /* Fallback for browsers not supporting media queries */ /* Spanning 4 of 12 columns */ width: 30.55556%; margin-left: 1.38889%; margin-right: 1.38889%; }