/* -----------------------------------------------------------------------------------------------------------------
	common
----------------------------------------------------------------------------------------------------------------- */	
	
	/* some nice to have resets */
	p,div, body, img { padding: 0; margin: 0; }
	a img{ border: none; }
	
	/* Clearing floats without extra markup - Based on How To Clear Floats Without Structural Markup by PiE
	   [http://www.positioniseverything.net/easyclearing.html] */
	.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
	
	/* Regular clearing -  apply to column that should drop below previous ones. */
	.clear { clear: both; }

/* -----------------------------------------------------------------------------------------------------------------
	predefined layout - add your site layout before; everything else after
----------------------------------------------------------------------------------------------------------------- */
	#wrap { width: 960px; margin: 0 auto; padding: 0; }

	.colmask { position: relative; clear: both; width: 100%; overflow: hidden; margin-bottom:30px;}
	.colmask .col1, .colmask .col2, .colmask .col3, .colmask .col4 { float: left; }
	
	/* |-------------------------50%-------------------------|-------------------------50%-------------------------| */
	.p50x50 .col1, .p50x50 .col2 { width: 49.9%; }
	/* |----------20%----------|----------------------------------------80%----------------------------------------| */
	.p20x80 .col1 { width: 19.9%; }
	.p20x80 .col2 { width: 79.9%; }
	/* |------------25%------------|--------------------------------------75%--------------------------------------| */
	.p25x75 .col1 { width: 24.9%; }
	.p25x75 .col2 { width: 74.9%; }
	/* |----------------------------------------80%----------------------------------------|----------20%----------| */
	.p80x20 .col1 { width: 79.9%; }
	.p80x20 .col2 { width: 19.9%; }
	/* |---------------30%---------------|-----------------------------------70%-----------------------------------| */
	.p30x70 .col1 { width: 29.9%; }
	.p30x70 .col2 { width: 69.9%; }
	/* |-----------------------------------70%-----------------------------------|---------------30%---------------| */
	.p70x30 .col1 { width: 69.9%; }
	.p70x30 .col2 { width: 29.9%; }
	/* |----------------33%----------------|----------------33%----------------|----------------33%----------------|  */
	.p33x33x33 .col1, .p33x33x33 .col2, .p33x33x33 .col3 { width: 33.3%; }
	/* |------------25%------------|-------------------------50%-------------------------|------------25%------------|  */
	.p25x50x25 .col1, .p25x50x25 .col3 { width: 24.45%; }
	.p25x50x25 .col2 { width: 50.9%; }	
	/* |------------25%------------|------------25%------------|------------25%------------|------------25%------------| */
	.p25x25x25x25 .col1, .p25x25x25x25 .col2, .p25x25x25x25 .col3, .p25x25x25x25 .col4 { width: 24.9%; }
	
	/* getting equal hight blocks; works due to the hidden overflow on colmask */
	.equal .col1, .equal .col2, .equal .col3, .equal .col4 { margin-bottom: -30000px; padding-bottom: 30000px; }
	
	/* set the default margin for the content div */
	#contentMain { margin: 0 10px; }
	
	/* give them some nice margin */
	.col1 .content, .col2 .content, .col3 .content { margin: 0 10px; }
	
	/* override col1 left margin and col2 right margin for 2 cols */
	/*.p50x50 .col1 .content, .p20x80 .col1 .content, .p80x20 .col1 .content, .p30x70 .col1 .content, .p70x30 .col1 .content { margin-left: 0; }
	.p50x50 .col2 .content, .p20x80 .col2 .content, .p80x20 .col2 .content, .p30x70 .col2 .content, .p70x30 .col2 .content { margin-right: 0; } */
	
	/* override col1 left margin and col3 right margin for 3 cols */
	/*.p33x33x33 .col1 .content, .p25x50x25 .col1 .content { margin-left: 0; }
	.p33x33x33 .col3 .content, .p25x50x25 .col3 .content { margin-right: 0; }*/