<style>

    .whmpress.whmpress_price_matrix.simple-03 button,
    .whmpress.whmpress_price_matrix.simple-03 a.whmpress-btn,
    .whmpress.whmpress_price_matrix.simple-03 a.buy-button,
    .whmpress.whmpress_price_matrix.simple-03 a.www-button,
    .whmpress.whmpress_price_matrix.simple-03 a.whois-button,
    .whmpress.whmpress_price_matrix.simple-03 a.whmpress_order_button,
    .whmpress.whmpress_price_matrix.simple-03 input[type="submit"]{
        background: transparent;
        border: none;
        color: blue;
    }
    .whmpress.whmpress_price_matrix.simple-03 button:hover,
    .whmpress.whmpress_price_matrix.simple-03 a.whmpress-btn:hover,
    .whmpress.whmpress_price_matrix.simple-03 a.buy-button:hover,
    .whmpress.whmpress_price_matrix.simple-03 a.www-button:hover,
    .whmpress.whmpress_price_matrix.simple-03 a.whois-button:hover,
    .whmpress.whmpress_price_matrix.simple-03 a.whmpress_order_button:hover,
    .whmpress.whmpress_price_matrix.simple-03 input[type="submit"]:hover{
        background: transparent;
        border: none;
        color: blue;
        text-decoration: underline;
    }
    @media only screen and (min-width: 641px){
        .whmpress.whmpress_price_matrix.simple-03 ul{
            width: 100%;
            display: table;
            table-layout: fixed; /* optional */
        }

        .whmpress.whmpress_price_matrix.simple-03 ul li {
            /*display: inline-block;*/
            /*padding: 10px 0px;*/
            /*width: 100%;*/
            /*max-width: 92px;*/
            /*text-align: center;*/
            display: table-cell;
            width: auto;
        }
        .whmpress.whmpress_price_matrix.simple-03 ul li:first-child {
            width: 60px;
        }
    }
    @media only screen and (max-width: 640px) {
        .whmpress.whmpress_price_matrix.simple-03 ul li[data-content]:before {
            content: attr(data-content) ": ";
            display: inline-block;
            font-weight: bold;
            width: 45%;
        }
        .whmpress.whmpress_price_matrix.simple-03 ul.ul-heading{
            display: none;
        }
    }
</style>

<div class="whmpress whmpress_price_matrix simple-03">
    {if $params.data_table|lower eq "yes"}
    <script>
        jQuery(function ()
        {
            jQuery('table#{$params.table_id}').DataTable();
        });
    </script>
    {else}
    <!--<label>{$search_label}</label>-->
    <!--<input type='search' placeholder='Search' id='{$params.table_id}_search_price_table' style='width:50%'>-->
    <script>
        jQuery(function ()
        {
            jQuery('input#{$params.table_id}_search_price_table').quicksearch('table#{$params.table_id} tbody tr');
        });
    </script>
    {/if}
    <div class="table-responsive">
        <div id='{$params.table_id}' class="table-responsive table-striped table-condensed">
            <div>
            <ul class="ul-heading">
                {if $sr_title}
                <li>{$sr_title}</li>
                {/if}
                {if $id_title}
                <li>{$id_title}</li>
                {/if}
                {if $name_title}
                <li>{$name_title}</li>
                {/if}
                {if $group_title}
                <li>{$group_title}</li>
                {/if}
                {if $monthly_title}
                <li>{$monthly_title}</li>
                {/if}
                {if $quarterly_title}
                <li>{$quarterly_title}</li>
                {/if}
                {if $semiannually_title}
                <li>{$semiannually_title}</li>
                {/if}
                {if $annually_title}
                <li>{$annually_title}</li>
                {/if}
                {if $biennially_title}
                <li>{$biennially_title}</li>
                {/if}
                {if $triennially_title}
                <li>{$triennially_title}</li>
                {/if}
                <li>Order Now</li>
            </ul>
        </div>
            <div>
            {foreach from=$data item=whmp}
            <ul>
                {if $sr_title}
                <li data-content="{$sr_title}">{$whmp.sr}.</li>
                {/if}
                {if $id_title}
                <li data-content="{$id_title}">{$whmp.id}</li>
                {/if}
                {if $name_title}
                <li data-content="{$name_title}">{$whmp.name}</li>
                {/if}
                {if $group_title}
                <li data-content="{$group_title}">{$whmp.group}</li>
                {/if}
                {if $monthly_title}
                <li data-content="{$monthly_title}">{$whmp.monthly}</li>
                {/if}
                {if $quarterly_title}
                <li data-content="{$quarterly_title}">{$whmp.quarterly}</li>
                {/if}
                {if $semiannually_title}
                <li data-content="{$semiannually_title}">{$whmp.semiannually}</li>
                {/if}
                {if $annually_title}
                <li data-content="{$annually_title}">{$whmp.annually}</li>
                {/if}
                {if $biennially_title}
                <li data-content="{$biennially_title}">{$whmp.biennially}</li>
                {/if}
                {if $triennially_title}
                <li data-content="{$triennially_title}">{$whmp.triennially}</li>
                {/if}
                <li data-content="Order Now">{if $whmp.order_url}{$whmp.order_url}{/if}</li>
                <!--<li><button class='whmpress whmpress_order_button' type='button' onclick="window.location.href = '?product_id=3';">Details</button></li>-->

            </ul>
            {/foreach}
            </div>
        </div>
    </div>
</div>