CSS - Two Tone Container

by bizamajig

HTML

<div class="blocks-blue" href="#">
    <div class="blocks-content">
        <h3>
            Last, First
        </h3>
        <ul>
            <li>More</li>
            <li>More</li>
        </ul>
    </div>
    <div class="blocks-toolbar" style="background-color: none;">
        C<br />S
    </div>
</div>
<br />
<div class="blocks-light" href="#">
    <div class="blocks-content">
        <h3>
            Last, First
        </h3>
        <ul>
            <li>More</li>
            <li>More</li>
        </ul>
    </div>
    <div class="blocks-toolbar" style="background-color: none;">
        C<br />S
    </div>
</div>

CSS

body {
     margin: 20px;   
}
.blocks-blue {
    padding: 1px 0 0 0;
    width: 200px;
    height: 105px;
    overflow: hidden;
    
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */

    border: 1px solid #2b88d9;
    border-radius: 3px;
    color: white;
    text-decoration: none;
    font-family: sans-serif;
    
    background: #87e0fd; /* Old browsers */
    background: -moz-linear-gradient(top,  #87e0fd 2%, #53cbf1 2%, #05abe0 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(2%,#87e0fd), color-stop(2%,#53cbf1), color-stop(100%,#05abe0)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #87e0fd 2%,#53cbf1 2%,#05abe0 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #87e0fd 2%,#53cbf1 2%,#05abe0 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #87e0fd 2%,#53cbf1 2%,#05abe0 100%); /* IE10+ */
    background: linear-gradient(top,  #87e0fd 2%,#53cbf1 2%,#05abe0 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#87e0fd', endColorstr='#05abe0',GradientType=0 ); /* IE6-9 */

}
/*
.blocks-blue:after {
    content: '▼';
    color: white;
}
*/
.blocks-blue .blocks-content {
    margin-right: 5%;
    padding-top: 15px;
    float: left;
    width: 80%;
    height: 100%;
    
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */

    border-right: 1px solid #2b88d9;
    
    background: #00b7ea; /* Old browsers */
    background: -moz-linear-gradient(top,  #00b7ea 0%, #009ec3 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00b7ea), color-stop(100%,#009ec3)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, ...