Usable CSS Global Site Classes for Layout Designers

    /* Positioning */
    .fl-left {
        float: left;
    }
    .fl-right {
        float: right;
    }
    .text-center {
        text-align: center;
    }
    .top-bot-spacer {
        margin: 1em 0 !important;
    }
    .half-top-bot-spacer {
        margin: 0.5em 0 !important;
    }
    .top-bot-spacer-auto {
        margin: 1em auto !important;
    }
    .top-spacer {
        margin: 1em 0 0 0 !important;
    }
    .half-top-spacer {
        margin: 0.5em 0 0 0 !important;
    }
    .top-spacer-auto {
        margin: 1em auto 0 auto !important;
    }
    .bot-spacer {
        margin: 0 0 1em 0 !important;
    }
    .half-bot-spacer {
        margin: 0 0 0.5em 0 !important;
    }
    .bot-spacer-auto {
        margin: 0 auto 1em auto !important;
    }
    .left-spacer {
        margin-left: 0.5em !important;
    }
    .left-spacer-big {
        margin-left: 1em !important;
    }
    .right-spacer {
        margin-right: 0.5em !important;
    }
    .right-spacer-big {
        margin-right: 1em !important;
    }
    .inline-block {
        display: inline-block;
    }
    /* If using floats, you might want .clearfix */
    .clearfix:before,
    .clearfix:after {
        content: "";
        display: table;
        border-collapse: collapse;
    }
    .clearfix:after {
        clear: both;
    }
    .clearfix {
        min-height: 0; /* support: IE7 */
    }
    .auto-overflow {
        overflow: auto;
    }
    /* Colors */
    .alert {
        color: red !important;
    }
    .highlight {
        color: orangered !important;
    }
    .light-highlight {
        color: orange !important;
    }
    .background-highlight {
        background:#FEF9ED !important;
    }
    .background-strong-highlight {
        background: #FFFFBE !important;
    }
    /* Text styling */
    .text--info {
        color: #7c838d;
        font-weight: 300;
    }
    .text--info--desc:after {
        content: ': ';
    }
    .text--negative {
        color: #a35154 !important;
    }
    .text--negative-impact {
        color: #a35154 !important;
        background-color: #FBE3E4;
        padding: 0.5em;
        margin: 0.5em 0;
        border-radius: 3px;
    }
    .text--additional {
        font-style: italic;
        color: #969ca4;
    }
    .text--neg-imp {
        color: #d56265;
    }
    .text--lighter {
        color: #969ca4 !important;
    }
    i.text--lighter {
        margin-right: 0.375em;
        position: relative;
        top: 2px;
    }
    .text--regular {
        color: #4a4f55 !important;
    }
    .text--positive {
        color: #388de4 !important;
    }
    .text--bold {
        color: #22bb46 !important;
    }
    .smalltext {
        font-size: 0.8em;
    }
    .tooltip {
        border-bottom: thin dotted #7c838d;
    }
    .blur {
        color: transparent !important;
        text-shadow: 0 0 5px rgba(0,0,0,0.5) !important;
    }
    .subtitle {
        color: #7c838d;
        font-style: italic;
        margin: -0.5em 0 0 0;
    }
    .time {
        color: #969ca4;
        font-size: 0.8em;
        margin-left: 0.5em;
        padding-left: 0.5em;
        border-left: thin solid #f2f5f5;
    }
    /* Pre-styled list */
    .list--line {
        padding-left: 0;
    }
    .list--line li {
        list-style: none;
        padding: 0.5em;
    }
    .list--line li:nth-child(odd) {
        background: #f8fafb;
    }
    .list--line li + li {
        border-top: thin solid #e4eaea;
    }
    .list--alt-bg li {
        list-style: none;
        padding: 0.5em 0;
    }
    .list--alt-bg li:nth-child(even) {
        background: rgba(0,0,0,0.02);
    }
    .list--horizontal > span + span {
        padding-left: 0.5em;
        margin-left: 0.5em;
        border-left: thin solid #ebedee;
    }