.cf:before, .cf:after { content: " "; display: table; }
.cf:after { clear: both; }
.cf { *zoom: 1; }
.cl { clear: left; }
.cr { clear: right; }
.cb { clear: both; }
.cn { clear: none; }
@media screen and (min-width: 30em) {
 .cl-ns { clear: left; }
 .cr-ns { clear: right; }
 .cb-ns { clear: both; }
 .cn-ns { clear: none; }
}
@media screen and (min-width: 30em) and (max-width: 60em) {
 .cl-m { clear: left; }
 .cr-m { clear: right; }
 .cb-m { clear: both; }
 .cn-m { clear: none; }
}
@media screen and (max-width: 60em) and (orientation: landscape) {
 .cl-ml { clear: left; }
 .cr-ml { clear: right; }
 .cb-ml { clear: both; }
 .cn-ml { clear: none; }
}
@media screen and (min-width: 60em) {
 .cl-l { clear: left; }
 .cr-l { clear: right; }
 .cb-l { clear: both; }
 .cn-l { clear: none; }
}