/* main wraps */
.outer-wrap {	width: 100%; }
.inner-wrap {	width: 960px; margin:0 auto; padding-top: 20px; }

.clear	 { clear: both;}

/*  
	LEGEND: b<width>	= box
			bc<width>	= box centered align (margin: 0 auto;)
			pt-half		= half padding top (10px)
			pt-full		= full padding top (20px)
			mt-half		=  half margin top {10px}
			mt-full		= full margin top {20px}
			pl  		= padding left (20px) as gutter
			pr 			= padding right (20px) as gutter
			
	EXAMPLE: you want a box with 220 with right gutter = class="b220 pr"
*/

/* margin and padding */
.pl			{	padding-left: 20px; }
.pr			{	padding-right: 20px; }
.pt-half	{	padding-top: 10px;	}
.pt-full	{	padding-top: 20px;	}
.mt-half	{	margin-top: 10px;	}
.mt-full	{	margin-top: 20px;	}
.pt40	{	padding-top: 40px;	}
.mt40	{	margin-top: 40px;	}

/* basic boxes  */
.b60		{	width:60px;	}
.b140		{	width:140px;}
.b220		{	width:220px;}
.b300		{	width:300px;}
.b380		{	width:380px;}
.b460		{	width:460px;}
.b540		{	width:540px;}
.b620		{	width:620px;}
.b700		{	width:700px;}
.b780		{	width:780px;}
.b860		{	width:860px;}
.b940		{	width:940px;}
.b960		{	width:960px;}

/* basic boxes with center alignment  */
.bc60		{	width:60px; margin: 0 auto;	}
.bc140		{	width:140px; margin: 0 auto;}
.bc220		{	width:220px; margin: 0 auto;}
.bc300		{	width:300px; margin: 0 auto;}
.bc380		{	width:380px; margin: 0 auto;}
.bc460		{	width:460px; margin: 0 auto;}
.bc540		{	width:540px; margin: 0 auto;}
.bc620		{	width:620px; margin: 0 auto;}
.bc700		{	width:700px; margin: 0 auto;}
.bc780		{	width:780px; margin: 0 auto;}
.bc860		{	width:860px; margin: 0 auto;}
.bc940		{	width:940px; margin: 0 auto;}
.bc960		{	width:960px; margin: 0 auto;}