/* 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; }
ol, ul { padding: 9px; margin: 9px; }

/* GRID */
/* 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; }

/* 800PX WIDTH*/
.w_800 { width: 800px; }
.m1 { width: 200px; }
.m2 { width: 580px; }
.m2 .m2 { width: 280px; }

.m_half_col { width: 380px; }

/* LAYOUT GENERAL 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; }

/* FLUID - RESIZED ACCORDING TO BROWER"S RESOLUTION */
.f1 { width: 25%; }
.f3 { width: 33%; }
.f_half { width: 50%; }
.f2 { width: 67%; }
.f4 { width: 75%;}

/* 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; }

/* FOR DEMO PURPOSES */
.border { border: 1px solid #444; }
.border_l { border-left: 1px solid #444; }
.border_r { border-right: 1px solid #444; }
.border_b { border-bottom: 1px solid #444; }
.border_t { border-top: 1px solid #444; }
.no_bullet { list-style: none; padding: 0; margin: 0; } /* FOR NO BULLET LIST */
.inline_li li { display: inline; margin: 0 20px 0 0; font-weight: 900; } /* FOR HORIZONTAL LIST */
pre, xmp {
	border: solid 1px #222;
	padding:15px; 
	background: #000;
	}