Matrix lists

Matrix Lists for clientResponse

HTML

<ul class="matrix four-col listStyles">
    <li>Lorem</li>
    <li>Ipsum</li>
    <li>Dolor</li>
    <li>Sit</li>
    <li>Amet</li>
    <li>Consectetur</li>
    <li>Lorem</li>
    <li>Ipsum</li>
    <li>Dolor</li>
    <li>Sit</li>
    <li>Amet</li>
    <li>Consectetur</li>
    <li>Lorem</li>
    <li>Ipsum</li>
    <li>Dolor</li>
    <li>Sit</li>
    <li>Amet</li>
    <li>Consectetur</li>
    <li>Dolor</li>
    <li>Sit</li>
</ul>

CSS

/* Housekeeping */
*{ margin:0; padding:0; }
html{
    color:#333;
    padding:1em;
    font:0.75em/1.5 sans-serif;
    background: #ccc;
}
ul{
    margin-bottom:1.5em;
}





/* Matrix object */
.matrix, .matrix > li {
    border: 1px solid transparent;
}
.matrix {
    list-style: none;
    margin-left: 0;
    overflow: hidden;
    border-width: 1px 0 0 1px;
}
    .matrix > li{
        float:left;
        border-width: 0 1px 1px 0;
        -webkit-box-sizing: border-box;
           -moz-box-sizing: border-box;
                box-sizing: border-box;
}

    /* Columns */
    .four-col > li{
        width: 25%;
    }

.listStyles, .listStyles > li {
    border-color: #ccc;
}
.listStyles {
    color: #fff;
}
    .listStyles > li {
        padding: 1em;
        background: none repeat scroll 0 0 #F8F9FB;
        color: #444444;;
    }
    .listStyles > li:hover {
        background: none repeat scroll 0 0 #FFFFFF;
        opacity: 0.8;
    }