/* @group LAYOUT FRAMEWORK */

* { margin: 0; padding: 0; }
.clearfix:after { clear: both; content: ' '; display: block; font-size: 0; line-height: 0; visibility: hidden; width: 0; height: 0; }
.clearfix { display: inline-block; }
* html .clearfix { height: 1%; }
.clearfix { display: block; }

/* @end */

/* @group GRIDS */

/* @group 960PX Width */

.w_960 { width: 960px; }
.b1 { width: 640px; }
.b2 { width: 300px;}
.b1 .b1 { width: 310px; }
.b1 .b1 .b1 { width: 145px; }
.b2 .b2 { width: 140px; }

.b_half_col { width: 470px; }
.b_third_col { width: 300px; }
.b_fourth_col { width: 225px; }

/* @end */

/* @group 800PX Width */

.w_800 { width: 800px; }
.m1 { width: 200px; }
.m2 { width: 580px; }
.m2 .m2 { width: 280px; }

.m_half_col { width: 380px; }

/* @end */

/* @group LAYOUT Classes */

.full { width: 100%; }
.col { float: left; margin: 0 10px; display: inline; }
.wrapper { margin: 0 auto; }
.box { margin: 0 0 10px; }
.first_col { /* The first left component*/margin-left: 0; }
.last_col { /* The last right component*/margin-right: 0; }

/* @end */

/* @group FLUID */
/* Resized according to browser resolution */
.f1 { width: 25%; }
.f3 { width: 33%; }
.f_half { width: 50%; }
.f2 { width: 67%; }
.f4 { width: 75%;}

/* @end */

/* @group Spacing */

.left { display: inline; float: left; }
.gut, .push { margin-right: 20px; }
.inner { padding: 20px; }
.outer { margin: 20px; }
.prepend { padding-left: 20px; }
.append { padding-right: 20px; }
.pull { margin-left: 20px; }

/* @end */

/* @end */