/*  GRID IS BASED OFF 12 COLUMNS   ============================================================================= */

.container { max-width: 80em; margin: 0 auto; }
.row { clear: both; padding: 0px; margin: 0px; }
.group:before, .group:after { content:""; display:table; }
.group:after { clear:both; }
.group { zoom:1; /* For IE 6/7 (trigger hasLayout) */ }
.col { display: block; float:left; margin: 0.7%; }
.alpha { margin-left: 0; }
.omega { margin-right: 0; }
.mtop { margin-top: 0.625em; }
.mbottom { margin-bottom: 0.625em; }

.span12 { width: 100%; }
.span11 {width: 91.53%;}
.span10 {width: 81.9%;}
.span9 {width: 73.5%;}
.span8 {width: 65.5%;}
.span7 {width: 56.4%;}
.span6 {width: 48.5%;}
.span5 {width: 40.73%;}
.span4 {width: 31.7%;}
.span3 {width: 23.4%;}
.span2 {width: 15.25%;}
.span1 {width: 6.86%;}


/*  VIEW @ 940 PIXELS */

@media only screen and (max-width: 80em) {
	.container { max-width: 60em; margin: 0 auto; }
    .span9 { width: 65.6%; }
    .span6 {width: 65%;}
	.span3 {width: 31.6%}

}

/*  VIEW @ LESS THAN 940 PIXELS */

@media only screen and (max-width: 60em) {
	.span12, .span11, .span10, .span9, .span8, .span7, .span6, .span5, .span4, .span3, .span2, .span1 {width: 100%;}
    .col { margin: 0; }
    .ghost { display: none;}
}