<div>
    <style type="text/css">
        /* MinColWidthSlider Control */
        #gridConfigurationWrapper .MinColWidthSlider {
            width: 150px;
            border: 2px solid #9FA0A4;
            height: 3px;    
            display: inline-block;
            margin-left: 20px;
        }

        #gridConfigurationWrapper .MinColWidthSlider .ui-slider-handle {
            height: 20px;
            width: 10px;
            top: -10px;
            border: 1px solid #6C7F90;
            background: linear-gradient(#FFF, #D2D7DC) repeat scroll 0% 0% transparent;
            border-radius: 3px;
        }
        
        #gridConfigurationWrapper .EnableSimpleRender {
            width: 75px;
            display: inline-block;
            vertical-align: top;
        }

        #gridConfigurationWrapper .EnableSimpleRenderDescription {
            width: 650px;
            display: inline-block;
            font-style: italic;
            font-size: 12px;
        }

        #gridConfigurationWrapper .leftSide {
            width: 300px;
            float: left;
        }

        #gridConfigurationWrapper .rightSide {
            width: 440px;
            float: right;
            padding-top: 95px;
            overflow-y: hidden;
            overflow-x: auto;
        }

        #gridConfigurationWrapper .rightSide .sampleRenderTable {
            border: solid 1px #CBCBCB;
        }

        #gridConfigurationWrapper .rightSide .sampleRenderTable th {
            background-color: #E6E6E6;
            border: solid 1px #CBCBCB;
        }

        #gridConfigurationWrapper .rightSide .sampleRenderTable th.FirstCell, #gridConfigurationWrapper .rightSide .sampleRenderTable th .ColumnHeader0,
        #gridConfigurationWrapper .rightSide .sampleRenderTable td .RowHeader1, #gridConfigurationWrapper .rightSide .sampleRenderTable td .RowHeader2 {
            width: 130px;
        }

        #gridConfigurationWrapper .rightSide .sampleRenderTable td, #gridConfigurationWrapper .rightSide .sampleRenderTable th {
            height: 36px;
            text-align: right;
            border-bottom: solid 1px #CBCBCB;
            font-weight: bold;
            padding-right: 20px;
        }

    </style>

    <div id="gridConfigurationWrapper">

        <div class="leftSide">
            
            <div class="headerTextSmall themeColor"><%loc Gadgets.GridConfigurationSettingsControl_ColumnContents %></div>
            <div class="clearGap"></div>
            <div class="firstColumnTypeOptions"></div>

            <div class="clearGap"></div>
            <div class="clearGap"></div>

            <div class="headerTextSmall themeColor"><%loc Gadgets.GridConfigurationSettingsControl_MinColumnWidth %></div>
            <div class="clearGap"></div>
            <input name="MinColWidthValue" class="MinColWidthValue form-control input-small" type="text" maxlength="3" />
            <div class="MinColWidthSlider"></div>

            <div class="clearGap"></div>
            <div class="clearGap"></div>

            <div class="headerTextSmall themeColor"><%loc Gadgets.RealtimeDataControl_Interval %></div>
            <div class="clearGap"></div>
            <select name="UpdateInverval" class="update-interval">
                <option value="1"><%loc General.Time_Continuous %></option>
                <option value="3"><%loc General.Time_3Seconds %></option>
                <option value="5"><%loc General.Time_5Seconds %></option>
                <option value="10"><%loc General.Time_10Seconds %></option>
                <option value="15"><%loc General.Time_15Seconds %></option>
                <option value="30"><%loc General.Time_30Seconds %></option>
                <option value="60"><%loc General.Time_60Seconds %></option>
                <option value="120"><%loc General.Time_2Minutes %></option>
                <option value="300"><%loc General.Time_5Minutes %></option>
                <option value="600"><%loc General.Time_10Minutes %></option>
                <option value="900"><%loc General.Time_15Minutes %></option>
            </select>
        </div>

        <div class="rightSide">

            <table class="sampleRenderTable">
                <tbody>
                    <tr>
                        <th class="FirstCell">
                            <div class="ColumnHeader0 ellipsis"></div>
                        </th>
                        <th>
                            <div class="ColumnHeader1 ellipsis"></div>
                        </th>
                        <th>
                            <div class="ColumnHeader2 ellipsis"></div>
                        </th>
                    </tr>
                    <tr>
                        <td>
                            <div class="RowHeader1 ellipsis"></div>
                        </td>
                        <td>
                            <div class="ellipsis">---</div>
                        </td>
                        <td>
                            <div class="ellipsis">---</div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div class="RowHeader2 ellipsis"></div>
                        </td>
                        <td>
                            <div class="ellipsis">---</div>
                        </td>
                        <td>
                            <div class="ellipsis">---</div>
                        </td>
                    </tr>
                </tbody>
            </table>

        </div>

        <div class="clearGap"></div>
        <div class="clearGap"></div>
        <div class="clearGap"></div>
        <div class="clearGap" style="border-bottom: 1px solid #CBCBCB"></div>
        <div class="clearGap"></div>
        <div class="headerTextSmall themeColor removeIfSmall"><%loc Gadgets.GridConfigurationSettingsControl_EnableSimpleRendering %></div>
        <div class="clearGap removeIfSmall"></div>
        <div class="EnableSimpleRender"></div>
        <div class="EnableSimpleRenderDescription"><%loc Gadgets.GridConfigurationSettingsControl_EnableSimpleRendering_Description %></div>

    </div>
</div>