<!-- Switcher -->
<div class="demo-options" style="display:none;">
    <div class="demo-options-icon"><i class="fa fa-spin fa-fw fa-smile-o"></i></div>
    <div class="demo-heading">Demo Settings</div>

    <div class="demo-body">
        <div class="tabular">
            <div class="tabular-row">
                <div class="tabular-cell">Fixed Header</div>
                <div class="tabular-cell demo-switches"><input class="bootstrap-switch" type="checkbox" checked data-size="mini" data-on-color="success" data-off-color="default" name="demo-fixedheader" data-on-text="I" data-off-text="O"></div>
            </div>
            <div class="tabular-row">
                <div class="tabular-cell">Boxed Layout</div>
                <div class="tabular-cell demo-switches"><input class="bootstrap-switch" type="checkbox" data-size="mini" data-on-color="success" data-off-color="default" name="demo-boxedlayout" data-on-text="I" data-off-text="O"></div>
            </div>
            <div class="tabular-row">
                <div class="tabular-cell">Collapse Leftbar</div>
                <div class="tabular-cell demo-switches"><input class="bootstrap-switch" type="checkbox" data-size="mini" data-on-color="success" data-off-color="default" name="demo-collapseleftbar" data-on-text="I" data-off-text="O"></div>
            </div>
            <div class="tabular-row">
                <div class="tabular-cell">Collapse Rightbar</div>
                <div class="tabular-cell demo-switches"><input class="bootstrap-switch" type="checkbox" checked data-size="mini" data-on-color="success" data-off-color="default" name="demo-collapserightbar" data-on-text="I" data-off-text="O"></div>
            </div>
            <div class="tabular-row hide" id="demo-horizicon">
                <div class="tabular-cell">Horizontal Icons</div>
                <div class="tabular-cell demo-switches"><input class="bootstrap-switch" type="checkbox" checked data-size="mini" data-on-color="primary" data-off-color="warning" data-on-text="S" data-off-text="L" name="demo-horizicons" ></div>
            </div>
        </div>

    </div>

    <div class="demo-body">
        <div class="option-title">Header Colors</div>
        <ul id="demo-header-color" class="demo-color-list">
            <li><span class="demo-white"></span></li>
            <li><span class="demo-black"></span></li>
            <li><span class="demo-midnightblue"></span></li>
            <li><span class="demo-primary"></span></li>
            <li><span class="demo-info"></span></li>
            <li><span class="demo-alizarin"></span></li>
            <li><span class="demo-green"></span></li>
            <li><span class="demo-violet"></span></li>                
            <li><span class="demo-indigo"></span></li> 
        </ul>
    </div>

    <div class="demo-body">
        <div class="option-title">Sidebar Colors</div>
        <ul id="demo-sidebar-color" class="demo-color-list">
            <li><span class="demo-white"></span></li>
            <li><span class="demo-black"></span></li>
            <li><span class="demo-midnightblue"></span></li>
            <li><span class="demo-primary"></span></li>
            <li><span class="demo-info"></span></li>
            <li><span class="demo-alizarin"></span></li>
            <li><span class="demo-green"></span></li>
            <li><span class="demo-violet"></span></li>                
            <li><span class="demo-indigo"></span></li> 
        </ul>
    </div>

    <div class="demo-body hide" id="demo-boxes">
        <div class="option-title">Boxed Layout Options</div>
        <ul id="demo-boxed-bg" class="demo-color-list">
            <li><span class="pattern-brickwall"></span></li>
            <li><span class="pattern-dark-stripes"></span></li>
            <li><span class="pattern-rockywall"></span></li>
            <li><span class="pattern-subtle-carbon"></span></li>
            <li><span class="pattern-tweed"></span></li>
            <li><span class="pattern-vertical-cloth"></span></li>
            <li><span class="pattern-grey_wash_wall"></span></li>
            <li><span class="pattern-pw_maze_black"></span></li>
            <li><span class="patther-wild_oliva"></span></li>
            <li><span class="pattern-stressed_linen"></span></li>
            <li><span class="pattern-sos"></span></li>
        </ul>
    </div>

</div>
<!-- /Switcher -->