/**
 * Table list module
 * 
 * <h3>Customer Relationship Marketing</h3>
 * <table>
 *   <tr>
 *     <td>
 *       <img src="" /> 
 *       Target Selection
 *     </td>
 *     <td>
 *       <ul>
 *         <li></li> <li></li> <li></li>
 *       </ul>
 *     </td>
 *   </tr>
 * </table>
 * </div>
 */

.orange.table-list td {
    border : 1px solid #F9A94A;
}
.orange.table-list h3 {
    background : #F9A94A;
}
.orange.table-list h3:before {
    border-bottom : 17px #F9A94A solid;
    border-left   : 13px #F9A94A solid;
}
.orange.table-list li:before {
    color : #F9A94A;
}
/** orange */

/** dark orange */
.dark-orange.table-list td {
    border : 1px solid #F98F4F;
}
.dark-orange.table-list h3 {
    background : #F98F4F;
}
.dark-orange.table-list h3:before {
    border-bottom : 17px #F98F4F solid;
    border-left   : 13px #F98F4F solid;
}
.dark-orange.table-list li:before {
    color : #F98F4F;
}
/**
 * yellow
 * #fabd2f
 */
.yellow.table-list td {
    border : 1px solid #FABD2F;
}
.yellow.table-list h3 {
    background : #FABD2F;
}
.yellow.table-list h3:before {
    border-bottom : 17px #FABD2F solid;
    border-left   : 13px #FABD2F solid;
}
.yellow.table-list li:before {
    color : #FABD2F;
}
/** end of dark orange theme */

.table-list {
    position   : relative;
    margin     : 50px 0;
    padding    : 50px;
    box-shadow : 0 0 20px 5px #9D9D9D;
}
.table-list td {
    width   : 50%;
    padding : 20px;
}
.table-list td a {
    color : #000000;
    text-decoration: none;
}
/**
 * here comes the border config of the table
 * we do not want border for some cells
 */
.table-list tr:first-child td {
    border-top : none;
}
.table-list tr:last-child td {
    border-bottom : none;
}
.table-list tr td:first-child {
    border-left : none;
}
.table-list tr td:last-child {
    border-right : none;
}
/**
 * the title is out side the box
 */
.table-list h3 {
    position : absolute;
    padding  : 5px 10px;
    color    : white;
    top      : -20px;
    left     : -10px;
}
/**
 * again use the border property for triangle
 */
.table-list h3:before {
    content      : ' ';
    position     : absolute;
    right        : -26px;
    bottom       : 0;
    border-top   : 17px solid transparent;
    border-right : 13px solid transparent;
}
.table-list table {
    border-collapse : collapse;
    vertical-align  : middle;
    width           : 100%;
}
.table-list td {
    padding-left   : 100px;
    vertical-align : middle;
}
.table-list td img {
    vertical-align : middle;
    margin-right   : 10px;
}
.table-list ul {
    list-style : none;
    position   : relative;
    font-size  : 14px;
}
.table-list li {
    position      : relative;
    margin-bottom : 20px;
}
.table-list li.last {
    margin-bottom : 0px !important;
}
.table-list li:before {
    content  : '❯';
    position : absolute;
    left     : -20px;
}
.table-list li strong {
    font-size : 20px;
}