Utility CSS classes - grids, floats, clears, image replacement

utility.css

/*	--------------------------
	Utility classes
	--------------------------	*/
.clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}


.flush-c {text-align:center;}
.flush-l {text-align:left;}
.flush-r {text-align:right;}
.inlineList li {display:inline;list-style-type:none;}

.thumbList {margin:0;padding:0;}
.thumbList li {float:left;list-style-type:none;overflow:hidden;margin-bottom:10px;}
.thumbList li img {vertical-align:top;}

.block {display:block;}

.float-l, .alignleft {float:left;}
.float-r, .alignright {float:right;margin:0 0 20px 20px;}
.float-c, .aligncenter {clear:both;}

.hide {display: none;}

	.goldenLeft .colOne {width:60%;float:left;}
	.goldenLeft .colTwo {width:35%;float:right;}
	
	.goldenRight .colOne {width:60%;float:right;}
	.goldenRight .colTwo {width:35%;float:left;}

	.colOne img, .colTwo img, .home img, figure img {
	  max-width: 99.5%;
	  /* just in case, to force correct aspet ratio */
	  height: auto !important;
	-ms-interpolation-mode: bicubic; 
	}
	
.twoCol {overflow:hidden;margin-bottom:.8em;position:relative;}
.colOne, .colTwo {width:49%;}
	
.colOne {float:left;}
.colTwo {float:right;}
/*
<div class="twoCol">
	<div class="colOne">

	</div><!-- .colOne -->
	<div class="colTwo">

	</div><!-- .colTwo -->
</div><!-- .twoCol -->
*/

.threeCol {overflow:hidden;margin-bottom:1em;}
.threeCol .colOne , .threeCol .colTwo, .threeCol .colThree {width:32.5%;float:left;text-align:center;}

/*
<div class="threeCol">
	<div class="colOne">

	</div><!-- .colOne -->
	<div class="colTwo">

	</div><!-- .colOne -->
	<div class="colThree">

	</div><!-- .colThree -->
</div><!-- .threeCol -->
*/

.fourCol {overflow:hidden;margin-bottom:1em;}
.fourCol .col {width:23%;float:left;padding-right:10px;}

iframe {overflow-y:hidden;}

.rCorner {
border-radius: 8px; /* css3 */
-moz-border-radius: 8px; /* firefox */
-webkit-border-radius: 8px; /* safari/chrome */
-khtml-border-radius: 8px; /* konqueror */
}


.floatList {margin:0;padding:0;overflow:hidden;}
.floatList li {float:left;list-style-type: none;margin:0 15px 15px 0;text-align: center;background:none;}
.floatList li a img {border:2px solid #ccc;}
.floatList li a:hover {text-decoration: none;}
.floatList li a:hover img {border:2px solid #f47735;}
.floatList .text, .floatList .title {display: block;padding-right:30px;}

.hidden {display: none;}
img.border {border:1px solid #e2e2e2;}



.ieUpdate {text-align:center;border:1px solid #ccc;background-color:#F0F8FF;padding:20px;margin:20px 0;}