/* for image replacement */
.ir { display:block; text-indent:-999em; overflow:hidden; background-repeat:no-repeat; }
/* for buttons */
.btn { display:block; text-indent:-999em; overflow:hidden; background-repeat:no-repeat; background-image:url(../images/sp-buttons.png); }
/* for bulleted items */
.bul { display:block; background-repeat:no-repeat; background-image:url(../images/sp-bullets.png); }
/* Hide for both screenreaders and browsers
   css-discuss.incutio.com/wiki/Screenreader_Visibility */
.hidden { display:none!important; visibility:hidden; } 
/* Hide only visually, but have it available for screenreaders 
   www.webaim.org/techniques/css/invisiblecontent/ 
   Solution from:j.mp/visuallyhidden - Thanks Jonathan Neal! */
.visuallyhidden { position:absolute !important;    
	clip:rect(1px 1px 1px 1px); /* IE6, IE7 */
	clip:rect(1px, 1px, 1px, 1px); }
/* Hide visually and from screenreaders, but maintain layout */
.invisible { visibility:hidden; }
/* >> The Magnificent CLEARFIX << */
.clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }
.clearfix { display:inline-block; }
* html .clearfix { height:1%; } /* Hides from IE-mac \*/
.clearfix { display:block; }