.wrap {
  width: 960px;
  margin: 0 auto;
}

.col-box {
  width: 104%;
}

.col-20 {
  width: 16%;
}

.col-25 {
  width: 21%;
}

.col-33 {
  width: 29.3%;
}

.col-50 {
  width: 46%;
}

.col-66 {
  width: 62%;
}

.col-75 {
  width: 71%;
}

.col {
  padding: 0 4% 0 0;
  float: left;
}

.col-last {
  padding: 0;
  float: left;
}

/* 
 * Non-semantic helper classes 
 */

/* for image replacement */
.ir { display: block; text-indent: -999em; overflow: hidden; background-repeat: no-repeat; text-align: left; direction: ltr; }

/* Hide for both screenreaders and browsers
   css-discuss.incutio.com/wiki/Screenreader_Visibility */
.hidden { display: none; visibility: hidden; } 

/* Hide only visually, but have it available for screenreaders 
   www.webaim.org/techniques/css/invisiblecontent/  &  j.mp/visuallyhidden  */
.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: Updated to prevent margin-collapsing on child elements << j.mp/bestclearfix */
.clearfix:before, .clearfix:after {
  content: "\0020"; display: block; height: 0; visibility: hidden;	
} 

.clearfix:after { clear: both; }
/* Fix clearfix: blueprintcss.lighthouseapp.com/projects/15318/tickets/5-extra-margin-padding-bottom-of-page */
.clearfix { zoom: 1; }