<style>
   .dialPad p, .dialPad ol, .dialPad ul, .dialPad li {
        margin: 0;
        padding: 0;
        border: 0;
        font: inherit;
        font-size: 100%;
        vertical-align: baseline
    }
    .dialPad ol, .dialPad ul {
        list-style: none
    }
    
    body {
        font: 100% 'Open Sans', Arial, Helvetica, sans-serif;
    }
    .dialPad .number {
        width: 89%;
        position: relative;
        z-index: 2;
        padding: 15px 20px;
        color: #4d4d4d;
        font-weight: 300;
        font-size: 40px;
        background: #fff;
        height: 78px
    }
    .dialPad .dials {
        margin: -1px 0 0 -1px;
        background: #1d1918;
        cursor: pointer
    }
    .dialPad .dials:before, .dialPad .dials:after {
        content: "\0020";
        display: block;
        height: 0;
        overflow: hidden
    }
    .dialPad .dials:after {
        clear: both
    }
    .dialPad .dials .digits {
        float: left;
        width: 33.33%
    }
    .dialPad .dials .digits p {
        font-weight: 600;
        padding: 15px 25px;
        border-top: 1px solid #4d4d4d;
        border-right: 1px solid #000;
        border-bottom: 1px solid #000;
        border-left: 1px solid #4d4d4d
    }
    .dialPad .dials .digits p strong {
        font-size: 50px;
        margin-right: 8px;
        color: #fff
    }
    .dialPad .dials .digits:active {
        background: #00caf2;
        border-top-color: #b2f2ff
    }
    .dialPad .dials .digits p {
        padding: 25px 15px
    }
    .dialPad .dials .digits p strong {
        font-size: 30px
    }
    .dialPad .dials .digits p sup {
        color: #c1c1c1
    }
    .dialPad .dials .pad-action {
        background: #093
    }
    .dialPad .dials .pad-action:active {
        background: #0c3
    }
    
    #main-wrapper {
        width: 400px;
    }
</style>

<div id="main-wrapper">
    <section role="main">
        <div class="dialPad">
            <input type="text" class="number" />
            <div class="dials">
                <ol>
                    <li class="digits">
                        <p><strong>1</strong></p>
                    </li>
                    <li class="digits">
                        <p><strong>2</strong><sup>ABC</sup></p>
                    </li>
                    <li class="digits">
                        <p><strong>3</strong><sup>DEF</sup></p>
                    </li>
                    <li class="digits">
                        <p><strong>4</strong><sup>GHI</sup></p>
                    </li>
                    <li class="digits">
                        <p><strong>5</strong><sup>JKL</sup></p>
                    </li>
                    <li class="digits">
                        <p><strong>6</strong><sup>MNO</sup></p>
                    </li>
                    <li class="digits">
                        <p><strong>7</strong><sup>PQRS</sup></p>
                    </li>
                    <li class="digits">
                        <p><strong>8</strong><sup>TUV</sup></p>
                    </li>
                    <li class="digits">
                        <p><strong>9</strong><sup>WXYZ</sup></p>
                    </li>
                    <li class="digits">
                        <p><strong>*</strong></p>
                    </li>
                    <li class="digits">
                        <p><strong>0</strong><sup>+</sup></p>
                    </li>
                    <li class="digits">
                        <p><strong>#</strong></p>
                    </li>
                    <li class="digits action action-clear">
                        <p><strong><i class="icon-refresh icon-large"></i></strong> <sup>Clear</sup></p>
                    </li>
                    <li class="digits action action-delete">
                        <p><strong><i class="icon-remove-sign icon-large"></i></strong> <sup>Delete</sup></p>
                    </li>
                    <li class="digits pad-action action action-call">
                        <p><strong><i class="icon-phone icon-large"></i></strong> <sup>Call</sup></p>
                    </li>
                </ol>
            </div>
        </div>
    </section>
</div>
