<|start_filename|>resources/vendor/cleanui/src/templates/forms/checkboxes-radio.html<|end_filename|>
<div class="page-content-inner">

    <!-- Checkbox Buttons -->
    <section class="panel">
        <div class="panel-heading">
            <h3>Radio Buttons</h3>
        </div>
        <div class="panel-body">
            <div class="row">
                <div class="col-lg-6">
                    <h4>Default Radio Buttons</h4>
                    <p>Element: <code>.radio</code></p>
                    <p>Modifiers: <code>[checked]</code>, <code>[disabled]</code></p>
                    <br />
                    <div class="margin-bottom-50">
                        <div class="form-group">
                            <div class="radio">
                                <label>
                                    <input type="radio" name="example1" checked="">
                                    Option one is this
                                </label>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="radio">
                                <label>
                                    <input type="radio" name="example1">
                                    Option two can be something else
                                </label>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="radio">
                                <label disabled>
                                    <input type="radio" name="example1" disabled>
                                    Option three is disabled
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6">
                    <h4>Custom Radio Buttons</h4>
                    <p>Element: <code>.btn-group</code>, <code>label.btn</code></p>
                    <p>Modifiers: <code>.active</code>, <code>[checked]</code></p>
                    <br />
                    <div class="margin-bottom-50">
                        <div class="btn-group" data-toggle="buttons">
                            <label class="btn btn-default active">
                                <input type="radio" name="example4" checked="">
                                Red Label
                            </label>
                            <label class="btn btn-default">
                                <input type="radio" name="example4">
                                Blue Label
                            </label>
                        </div>
                        <br />
                        <div class="btn-group" data-toggle="buttons">
                            <label class="btn btn-default-outline">
                                <input type="radio" name="example5">
                                Red Label
                            </label>
                            <label class="btn btn-default-outline">
                                <input type="radio" name="example5">
                                Blue Label
                            </label>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- End Validation -->

    <!-- Radio Buttons -->
    <section class="panel">
        <div class="panel-heading">
            <h3>Checkboxes</h3>
        </div>
        <div class="panel-body">
            <div class="row">
                <div class="col-lg-6">
                    <h4>Default Checkboxes</h4>
                    <p>Element: <code>.checkbox</code></p>
                    <p>Modifiers: <code>[checked]</code>, <code>[disabled]</code></p>
                    <br />
                    <div class="margin-bottom-50">
                        <div class="form-group">
                            <div class="checkbox">
                                <label>
                                    <input type="checkbox" name="example6" checked="">
                                    Option one is this
                                </label>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="checkbox">
                                <label>
                                    <input type="checkbox" name="example6">
                                    Option two can be something else
                                </label>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="checkbox">
                                <label disabled>
                                    <input type="checkbox" name="example6" disabled>
                                    Option three is disabled
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6">
                    <h4>Custom checkboxes</h4>
                    <p>Element: <code>.btn-group</code>, <code>label.btn</code></p>
                    <p>Modifiers: <code>.active</code>, <code>[checked]</code></p>
                    <br />
                    <div class="margin-bottom-50">
                        <div class="btn-group" data-toggle="buttons">
                            <label class="btn btn-default active">
                                <input type="checkbox" name="example7" checked="">
                                Red Label
                            </label>
                            <label class="btn btn-default">
                                <input type="checkbox" name="example7">
                                Blue Label
                            </label>
                        </div>
                        <br />
                        <div class="btn-group" data-toggle="buttons">
                            <label class="btn btn-default-outline">
                                <input type="checkbox" name="example7">
                                Red Label
                            </label>
                            <label class="btn btn-default-outline">
                                <input type="checkbox" name="example7">
                                Blue Label
                            </label>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- End Radio -->

</div>

<|start_filename|>resources/vendor/cleanui/src/templates/pages/page-404.html<|end_filename|>
<div class="page-content-inner">

    <!-- Page 404 -->
    <div class="single-page-block">
        <div class="margin-auto text-center max-width-500">
            <h1>Error 404</h1>
            <p>The page you are looking for does not exist; it may have been moved, or removed altogether. You might want to try the search function. Alternatively, return to the front page.</p>
            <a href="javascript: void(0);" class="btn btn-link">Go Back</a>
        </div>
    </div>
    <!-- End Page 404 -->

</div>

<|start_filename|>resources/vendor/cleanui/src/templates/layout/sidebars.html<|end_filename|>
<section class="page-content-inner">

    <!-- Top Submenu -->
    <nav class="top-submenu top-submenu-with-background">
        <h3>Top Sidebar w/ Background</h3>
        <ul class="list-unstyled breadcrumb">
            <li>
                <a href="javascript: void(0);">Main</a>
            </li>
            <li>
                <a href="javascript: void(0);">Layout</a>
            </li>
            <li>
                <a href="javascript: void(0);">With background</a>
            </li>
            <li>
                <a href="javascript: void(0);">White</a>
            </li>
            <li>
                <span>Sidebars</span>
            </li>
        </ul>
    </nav>
    <nav class="top-submenu">
        <h3>Top Sidebar w/o Background</h3>
        <ul class="list-unstyled breadcrumb">
            <li>
                <a href="javascript: void(0);">Main</a>
            </li>
            <li>
                <a href="javascript: void(0);">Layout</a>
            </li>
            <li>
                <span>Sidebars</span>
            </li>
        </ul>
    </nav>
    <!-- End Top Submenu -->

    <!-- Panel with Left Sidebar -->
    <section class="panel panel-with-sidebar">
        <div class="panel-sidebar">
            <div class="btn-group-vertical btn-group-justified">
                <button type="button" class="btn">Provide Files</button>
                <button type="button" class="btn">User Action</button>
                <button type="button" class="btn">Access History</button>
            </div>
            <br />
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting
                industry. Lorem Ipsum has been the industry's standard dummy
                text ever since the 1500s, when an unknown printer took a galley
                of type and scrambled it to make a type specimen book.</p>
        </div>
        <div class="panel-heading">
            <div class="pull-right">
                <span class="margin-right-20">
                    User:
                    <a href="javascript: void(0);">Administrator</a>
                </span>
                <div class="dropdown">
                    <a href="javascript: void(0);" class="dropdown-toggle dropdown-inline-button" data-toggle="dropdown" aria-expanded="false">
                        <i class="dropdown-inline-button-icon icmn-database"></i>
                        <span class="hidden-lg-down">Dashboards</span>
                        <span class="caret"></span>
                    </a>
                    <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="" role="menu">
                        <div class="dropdown-header">Active</div>
                        <a class="dropdown-item" href="javascript:void(0)">Project Management</a>
                        <a class="dropdown-item" href="javascript:void(0)">User Inetrface Development</a>
                        <a class="dropdown-item" href="javascript:void(0)">Documentation</a>
                        <div class="dropdown-header">Inactive</div>
                        <a class="dropdown-item" href="javascript:void(0)">Marketing</a>
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item" href="javascript:void(0)"><i class="dropdown-icon icmn-cog"></i> Settings</a>
                    </ul>
                </div>
            </div>
            <h3>Panel w/ Left Sidebar</h3>
        </div>
        <div class="panel-body">
            <div class="row">
                <div class="col-lg-8">
                    <p>Modifier: <code>.panel-with-sidebar</code></p>
                    <p>Element: <code>div.panel-sidebar</code></p>
                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting
                        industry. Lorem Ipsum has been the industry's standard dummy
                        text ever since the 1500s, when an unknown printer took a galley
                        of type and scrambled it to make a type specimen book. It has
                        survived not only five centuries, but also the leap into
                        electronic typesetting, remaining essentially unchanged. It was
                        popularised in the 1960s with the release of Letraset sheets
                        containing Lorem Ipsum passages, and more recently with desktop
                        publishing software like Aldus PageMaker including versions of
                        Lorem Ipsum.</p>
                </div>
            </div>
        </div>
    </section>
    <!-- End Panel with Left Sidebar -->

    <!-- Panel with Right Sidebar -->
    <section class="panel panel-with-sidebar panel-with-right-sidebar">
        <div class="panel-sidebar">
            <div class="btn-group-vertical btn-group-justified">
                <button type="button" class="btn">Provide Files</button>
                <button type="button" class="btn">User Action</button>
                <button type="button" class="btn">Access History</button>
            </div>
            <br />
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting
                industry. Lorem Ipsum has been the industry's standard dummy
                text ever since the 1500s, when an unknown printer took a galley
                of type and scrambled it to make a type specimen book.</p>
        </div>
        <div class="panel-heading">
            <div class="pull-right">
                <span class="margin-right-20">
                    User:
                    <a href="javascript: void(0);">Administrator</a>
                </span>
                <div class="dropdown">
                    <a href="javascript: void(0);" class="dropdown-toggle dropdown-inline-button" data-toggle="dropdown" aria-expanded="false">
                        <i class="dropdown-inline-button-icon icmn-database"></i>
                        <span class="hidden-lg-down">Dashboards</span>
                        <span class="caret"></span>
                    </a>
                    <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="" role="menu">
                        <div class="dropdown-header">Active</div>
                        <a class="dropdown-item" href="javascript:void(0)">Project Management</a>
                        <a class="dropdown-item" href="javascript:void(0)">User Inetrface Development</a>
                        <a class="dropdown-item" href="javascript:void(0)">Documentation</a>
                        <div class="dropdown-header">Inactive</div>
                        <a class="dropdown-item" href="javascript:void(0)">Marketing</a>
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item" href="javascript:void(0)"><i class="dropdown-icon icmn-cog"></i> Settings</a>
                    </ul>
                </div>
            </div>
            <h3>Panel w/ Right Sidebar</h3>
        </div>
        <div class="panel-body">
            <div class="row">
                <div class="col-lg-8">
                    <p>Modifiers: <code>.panel-with-sidebar.panel-with-right-sidebar</code></p>
                    <p>Element: <code>div.panel-sidebar</code></p>
                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting
                        industry. Lorem Ipsum has been the industry's standard dummy
                        text ever since the 1500s, when an unknown printer took a galley
                        of type and scrambled it to make a type specimen book. It has
                        survived not only five centuries, but also the leap into
                        electronic typesetting, remaining essentially unchanged. It was
                        popularised in the 1960s with the release of Letraset sheets
                        containing Lorem Ipsum passages, and more recently with desktop
                        publishing software like Aldus PageMaker including versions of
                        Lorem Ipsum.</p>
                </div>
            </div>
        </div>
    </section>
    <!-- End Panel with Right Sidebar -->

</section>

<|start_filename|>resources/vendor/cleanui/src/templates/components/text-editor.html<|end_filename|>
<div class="page-content-inner">

    <!-- Text Editor -->
    <section class="panel">
        <div class="panel-heading">
            <h3>
                Text Editor
                <sup>
                    <small><a href="http://summernote.org/" target="_blank" class="link-underlined">Official Documentation</a></small>
                </sup>
            </h3>
        </div>
        <div class="panel-body">
            <div class="summernote">
                <h4><NAME> (26 April 1564 – 23 April 1616)</h4>
                Was an English poet, playwright, and actor, widely
                regarded as the greatest writer in the English language and the world's pre-eminent dramatist. He is
                often called England's national poet, and the "Bard of Avon". His extant works, including
                collaborations, consist of approximately 38 plays, 154 sonnets, two long narrative poems, and a
                few other verses, some of uncertain authorship. His plays have been translated into every major living
                language and are performed more often than those of any other playwright
            </div>
        </div>
    </section>
    <!-- End Text Editor -->

</div>

<!-- Page Scripts -->
<script>

    $(function() {
        $('.summernote').summernote({
            height: 350
        });
    });

</script>
<!-- End Page Scripts -->

<|start_filename|>resources/vendor/cleanui/src/templates/components/tabs.html<|end_filename|>
<div class="page-content-inner">

    <!-- Tabs -->
    <section class="panel">
        <div class="panel-heading">
            <h3>Tabs</h3>
        </div>
        <div class="panel-body">
            <div class="row">
                <div class="col-lg-6">
                    <h4>Horizontal Tabs</h4>
                    <p>Modifier: <code>.nav-tabs-horizontal</code></p>
                    <br />
                    <div class="margin-bottom-50">
                        <div class="nav-tabs-horizontal">
                            <ul class="nav nav-tabs" role="tablist">
                                <li class="nav-item">
                                    <a class="nav-link active" href="javascript: void(0);" data-toggle="tab" data-target="#home1" role="tab">Home</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" href="javascript: void(0);" data-toggle="tab" data-target="#profile1" role="tab">Profile</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" href="javascript: void(0);" data-toggle="tab" data-target="#messages1" role="tab">Messages</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" href="javascript: void(0);" data-toggle="tab" data-target="#settings1" role="tab">Settings</a>
                                </li>
                            </ul>
                            <div class="tab-content padding-vertical-20">
                                <div class="tab-pane active" id="home1" role="tabpanel">
                                    Mel, incorruptis confidam derepta inportuno perpetuam placatae. Expetenda summam
                                    venandi cotidie euripidis vexetur, scribendi recta fortunam
                                    hanc oblivione. Iniuria ipso statuam utrumque asperiores
                                    eae cogitemus, evertitur triarium perspexit conclusionemque
                                    propterea repellendus agatur scilicet, leniter intervalla
                                    nocet praeterierunt tuum privatione, senserit sale vias,
                                    delectatum dedecora ratione o religionis derigatur diuturnum
                                    arbitrantur conspiratione, legam opera splendore iste democritum
                                    apte romanum legum egregios.
                                </div>
                                <div class="tab-pane" id="profile1" role="tabpanel">
                                    Mnesarchum velit cumanum utuntur tantam deterritum, democritum vulgo contumeliae
                                    abest studuisse quanta telos. Inmensae. Arbitratu dixisset
                                    invidiae ferre constituto gaudeat contentam, omnium nescius,
                                    consistat interesse animi, amet fuisset numen graecos incidunt
                                    euripidis praesens, homines religionis dirigentur postulant.
                                    Magnum utrumvis gravitate appareat fabulae facio perveniri
                                    fruenda indicaverunt texit, frequenter probet diligenter
                                    sententia meam distinctio theseo legerint corporis quoquo,
                                    optari futurove expedita.
                                </div>
                                <div class="tab-pane" id="messages1" role="tabpanel">
                                    Faciendi denique miserius iudico, significet ingenii adduci angere efficit linguam.
                                    Delectatum copulatas solemus tenere legam ignaviamque diis
                                    peccant ornamenta videro, adquiescere bonorum quisquam ceramico
                                    minime quodsi corporisque. Nostri pauca gravioribus reici
                                    solvantur, angoribus naturalem sed epicurei occultum sola
                                    institutionem meminerunt quem fonte, confirmat. Cui eodem
                                    perspecta vim solis innumerabiles, videatur status qui quanto
                                    sapientiam nomini honestum, comit sumitur nati via.
                                </div>
                                <div class="tab-pane" id="settings1" role="tabpanel">
                                    Dicent feramus necesse proficiscuntur libidinem quisquis, petulantes divitias compositis,
                                    disseretur voluptates crudeli sustulisti. Hostis res utuntur
                                    bono incurrunt navigandi laboribus istae tali, miserum metuamus
                                    labor quasi synephebos iudicante. Effecerit sicine falsarum
                                    pugnantibus imperitos, vero successionem exhorrescere illis
                                    magnopere deteriora maioribus necessariam industria. Illi
                                    variari stabilique augendas suscipiet, corrigere conducunt,
                                    divinum affecti, eruditus clarorum. Spatio gustare cupiditates
                                    desideret aliena sinat utrumque.
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6">
                    <h4>Horizontal Tabs w/ Icons</h4>
                    <p>Elements: <code>i.(icon-selector)</code></p>
                    <br />
                    <div class="margin-bottom-50">
                        <div class="nav-tabs-horizontal">
                            <ul class="nav nav-tabs" role="tablist">
                                <li class="nav-item">
                                    <a class="nav-link active" href="javascript: void(0);" data-toggle="tab" data-target="#home2" role="tab">
                                        <i class="icmn-home"></i>
                                        Home
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" href="javascript: void(0);" data-toggle="tab" data-target="#profile2" role="tab">
                                        <i class="icmn-users"></i>
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" href="javascript: void(0);" data-toggle="tab" data-target="#messages2" role="tab">
                                        <i class="icmn-database"></i>
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" href="javascript: void(0);" data-toggle="tab" data-target="#settings2" role="tab">
                                        <i class="icmn-cog"></i>
                                    </a>
                                </li>
                            </ul>
                            <div class="tab-content padding-vertical-20">
                                <div class="tab-pane active" id="home2" role="tabpanel">
                                    Mel, incorruptis confidam derepta inportuno perpetuam placatae. Expetenda summam
                                    venandi cotidie euripidis vexetur, scribendi recta fortunam
                                    hanc oblivione. Iniuria ipso statuam utrumque asperiores
                                    eae cogitemus, evertitur triarium perspexit conclusionemque
                                    propterea repellendus agatur scilicet, leniter intervalla
                                    nocet praeterierunt tuum privatione, senserit sale vias,
                                    delectatum dedecora ratione o religionis derigatur diuturnum
                                    arbitrantur conspiratione, legam opera splendore iste democritum
                                    apte romanum legum egregios.
                                </div>
                                <div class="tab-pane" id="profile2" role="tabpanel">
                                    Mnesarchum velit cumanum utuntur tantam deterritum, democritum vulgo contumeliae
                                    abest studuisse quanta telos. Inmensae. Arbitratu dixisset
                                    invidiae ferre constituto gaudeat contentam, omnium nescius,
                                    consistat interesse animi, amet fuisset numen graecos incidunt
                                    euripidis praesens, homines religionis dirigentur postulant.
                                    Magnum utrumvis gravitate appareat fabulae facio perveniri
                                    fruenda indicaverunt texit, frequenter probet diligenter
                                    sententia meam distinctio theseo legerint corporis quoquo,
                                    optari futurove expedita.
                                </div>
                                <div class="tab-pane" id="messages2" role="tabpanel">
                                    Faciendi denique miserius iudico, significet ingenii adduci angere efficit linguam.
                                    Delectatum copulatas solemus tenere legam ignaviamque diis
                                    peccant ornamenta videro, adquiescere bonorum quisquam ceramico
                                    minime quodsi corporisque. Nostri pauca gravioribus reici
                                    solvantur, angoribus naturalem sed epicurei occultum sola
                                    institutionem meminerunt quem fonte, confirmat. Cui eodem
                                    perspecta vim solis innumerabiles, videatur status qui quanto
                                    sapientiam nomini honestum, comit sumitur nati via.
                                </div>
                                <div class="tab-pane" id="settings2" role="tabpanel">
                                    Dicent feramus necesse proficiscuntur libidinem quisquis, petulantes divitias compositis,
                                    disseretur voluptates crudeli sustulisti. Hostis res utuntur
                                    bono incurrunt navigandi laboribus istae tali, miserum metuamus
                                    labor quasi synephebos iudicante. Effecerit sicine falsarum
                                    pugnantibus imperitos, vero successionem exhorrescere illis
                                    magnopere deteriora maioribus necessariam industria. Illi
                                    variari stabilique augendas suscipiet, corrigere conducunt,
                                    divinum affecti, eruditus clarorum. Spatio gustare cupiditates
                                    desideret aliena sinat utrumque.
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-6">
                    <h4>Vertical Tabs</h4>
                    <p>Modifier: <code>.nav-tabs-vertical</code></p>
                    <br />
                    <div class="margin-bottom-50">
                        <div class="nav-tabs-vertical">
                            <ul class="nav nav-tabs" role="tablist">
                                <li class="nav-item">
                                    <a class="nav-link active" href="javascript: void(0);" data-toggle="tab" data-target="#home3" role="tab">Home</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" href="javascript: void(0);" data-toggle="tab" data-target="#profile3" role="tab">Profile</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" href="javascript: void(0);" data-toggle="tab" data-target="#messages3" role="tab">Messages</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" href="javascript: void(0);" data-toggle="tab" data-target="#settings3" role="tab">Settings</a>
                                </li>
                            </ul>
                            <div class="tab-content padding-vertical-10">
                                <div class="tab-pane active" id="home3" role="tabpanel">
                                    Mel, incorruptis confidam derepta inportuno perpetuam placatae. Expetenda summam
                                    venandi cotidie euripidis vexetur, scribendi recta fortunam
                                    hanc oblivione. Iniuria ipso statuam utrumque asperiores
                                    eae cogitemus, evertitur triarium perspexit conclusionemque
                                    propterea repellendus agatur scilicet, leniter intervalla
                                    nocet praeterierunt tuum privatione, senserit sale vias,
                                    delectatum dedecora ratione o religionis derigatur diuturnum
                                    arbitrantur conspiratione, legam opera splendore iste democritum
                                    apte romanum legum egregios.
                                </div>
                                <div class="tab-pane" id="profile3" role="tabpanel">
                                    Mnesarchum velit cumanum utuntur tantam deterritum, democritum vulgo contumeliae
                                    abest studuisse quanta telos. Inmensae. Arbitratu dixisset
                                    invidiae ferre constituto gaudeat contentam, omnium nescius,
                                    consistat interesse animi, amet fuisset numen graecos incidunt
                                    euripidis praesens, homines religionis dirigentur postulant.
                                    Magnum utrumvis gravitate appareat fabulae facio perveniri
                                    fruenda indicaverunt texit, frequenter probet diligenter
                                    sententia meam distinctio theseo legerint corporis quoquo,
                                    optari futurove expedita.
                                </div>
                                <div class="tab-pane" id="messages3" role="tabpanel">
                                    Faciendi denique miserius iudico, significet ingenii adduci angere efficit linguam.
                                    Delectatum copulatas solemus tenere legam ignaviamque diis
                                    peccant ornamenta videro, adquiescere bonorum quisquam ceramico
                                    minime quodsi corporisque. Nostri pauca gravioribus reici
                                    solvantur, angoribus naturalem sed epicurei occultum sola
                                    institutionem meminerunt quem fonte, confirmat. Cui eodem
                                    perspecta vim solis innumerabiles, videatur status qui quanto
                                    sapientiam nomini honestum, comit sumitur nati via.
                                </div>
                                <div class="tab-pane" id="settings3" role="tabpanel">
                                    Dicent feramus necesse proficiscuntur libidinem quisquis, petulantes divitias compositis,
                                    disseretur voluptates crudeli sustulisti. Hostis res utuntur
                                    bono incurrunt navigandi laboribus istae tali, miserum metuamus
                                    labor quasi synephebos iudicante. Effecerit sicine falsarum
                                    pugnantibus imperitos, vero successionem exhorrescere illis
                                    magnopere deteriora maioribus necessariam industria. Illi
                                    variari stabilique augendas suscipiet, corrigere conducunt,
                                    divinum affecti, eruditus clarorum. Spatio gustare cupiditates
                                    desideret aliena sinat utrumque.
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6">
                    <h4>Vertical Tabs w/ Icons</h4>
                    <p>Elements: <code>i.(icon-selector)</code></p>
                    <br />
                    <div class="margin-bottom-50">
                        <div class="nav-tabs-vertical">
                            <ul class="nav nav-tabs" role="tablist">
                                <li class="nav-item">
                                    <a class="nav-link active" href="javascript: void(0);" data-toggle="tab" data-target="#home4" role="tab">
                                        <i class="icmn-home"></i>
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" href="javascript: void(0);" data-toggle="tab" data-target="#profile4" role="tab">
                                        <i class="icmn-users"></i>
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" href="javascript: void(0);" data-toggle="tab" data-target="#messages4" role="tab">
                                        <i class="icmn-database"></i>
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" href="javascript: void(0);" data-toggle="tab" data-target="#settings4" role="tab">
                                        <i class="icmn-cog"></i>
                                    </a>
                                </li>
                            </ul>
                            <div class="tab-content padding-vertical-10">
                                <div class="tab-pane active" id="home4" role="tabpanel">
                                    Mel, incorruptis confidam derepta inportuno perpetuam placatae. Expetenda summam
                                    venandi cotidie euripidis vexetur, scribendi recta fortunam
                                    hanc oblivione. Iniuria ipso statuam utrumque asperiores
                                    eae cogitemus, evertitur triarium perspexit conclusionemque
                                    propterea repellendus agatur scilicet, leniter intervalla
                                    nocet praeterierunt tuum privatione, senserit sale vias,
                                    delectatum dedecora ratione o religionis derigatur diuturnum
                                    arbitrantur conspiratione, legam opera splendore iste democritum
                                    apte romanum legum egregios.
                                </div>
                                <div class="tab-pane" id="profile4" role="tabpanel">
                                    Mnesarchum velit cumanum utuntur tantam deterritum, democritum vulgo contumeliae
                                    abest studuisse quanta telos. Inmensae. Arbitratu dixisset
                                    invidiae ferre constituto gaudeat contentam, omnium nescius,
                                    consistat interesse animi, amet fuisset numen graecos incidunt
                                    euripidis praesens, homines religionis dirigentur postulant.
                                    Magnum utrumvis gravitate appareat fabulae facio perveniri
                                    fruenda indicaverunt texit, frequenter probet diligenter
                                    sententia meam distinctio theseo legerint corporis quoquo,
                                    optari futurove expedita.
                                </div>
                                <div class="tab-pane" id="messages4" role="tabpanel">
                                    Faciendi denique miserius iudico, significet ingenii adduci angere efficit linguam.
                                    Delectatum copulatas solemus tenere legam ignaviamque diis
                                    peccant ornamenta videro, adquiescere bonorum quisquam ceramico
                                    minime quodsi corporisque. Nostri pauca gravioribus reici
                                    solvantur, angoribus naturalem sed epicurei occultum sola
                                    institutionem meminerunt quem fonte, confirmat. Cui eodem
                                    perspecta vim solis innumerabiles, videatur status qui quanto
                                    sapientiam nomini honestum, comit sumitur nati via.
                                </div>
                                <div class="tab-pane" id="settings4" role="tabpanel">
                                    Dicent feramus necesse proficiscuntur libidinem quisquis, petulantes divitias compositis,
                                    disseretur voluptates crudeli sustulisti. Hostis res utuntur
                                    bono incurrunt navigandi laboribus istae tali, miserum metuamus
                                    labor quasi synephebos iudicante. Effecerit sicine falsarum
                                    pugnantibus imperitos, vero successionem exhorrescere illis
                                    magnopere deteriora maioribus necessariam industria. Illi
                                    variari stabilique augendas suscipiet, corrigere conducunt,
                                    divinum affecti, eruditus clarorum. Spatio gustare cupiditates
                                    desideret aliena sinat utrumque.
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-6">
                    <h4>Default Tabs</h4>
                    <br />
                    <div class="margin-bottom-50">
                        <div>
                            <ul class="nav nav-tabs" role="tablist">
                                <li class="nav-item">
                                    <a class="nav-link active" href="javascript: void(0);" data-toggle="tab" data-target="#home5" role="tab">Home</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" href="javascript: void(0);" data-toggle="tab" data-target="#profile5" role="tab">Profile</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" href="javascript: void(0);" data-toggle="tab" data-target="#messages5" role="tab">Messages</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" href="javascript: void(0);" data-toggle="tab" data-target="#settings5" role="tab">Settings</a>
                                </li>
                            </ul>
                            <div class="tab-content padding-vertical-20">
                                <div class="tab-pane active" id="home5" role="tabpanel">
                                    Mel, incorruptis confidam derepta inportuno perpetuam placatae. Expetenda summam
                                    venandi cotidie euripidis vexetur, scribendi recta fortunam
                                    hanc oblivione. Iniuria ipso statuam utrumque asperiores
                                    eae cogitemus, evertitur triarium perspexit conclusionemque
                                    propterea repellendus agatur scilicet, leniter intervalla
                                    nocet praeterierunt tuum privatione, senserit sale vias,
                                    delectatum dedecora ratione o religionis derigatur diuturnum
                                    arbitrantur conspiratione, legam opera splendore iste democritum
                                    apte romanum legum egregios.
                                </div>
                                <div class="tab-pane" id="profile5" role="tabpanel">
                                    Mnesarchum velit cumanum utuntur tantam deterritum, democritum vulgo contumeliae
                                    abest studuisse quanta telos. Inmensae. Arbitratu dixisset
                                    invidiae ferre constituto gaudeat contentam, omnium nescius,
                                    consistat interesse animi, amet fuisset numen graecos incidunt
                                    euripidis praesens, homines religionis dirigentur postulant.
                                    Magnum utrumvis gravitate appareat fabulae facio perveniri
                                    fruenda indicaverunt texit, frequenter probet diligenter
                                    sententia meam distinctio theseo legerint corporis quoquo,
                                    optari futurove expedita.
                                </div>
                                <div class="tab-pane" id="messages5" role="tabpanel">
                                    Faciendi denique miserius iudico, significet ingenii adduci angere efficit linguam.
                                    Delectatum copulatas solemus tenere legam ignaviamque diis
                                    peccant ornamenta videro, adquiescere bonorum quisquam ceramico
                                    minime quodsi corporisque. Nostri pauca gravioribus reici
                                    solvantur, angoribus naturalem sed epicurei occultum sola
                                    institutionem meminerunt quem fonte, confirmat. Cui eodem
                                    perspecta vim solis innumerabiles, videatur status qui quanto
                                    sapientiam nomini honestum, comit sumitur nati via.
                                </div>
                                <div class="tab-pane" id="settings5" role="tabpanel">
                                    Dicent feramus necesse proficiscuntur libidinem quisquis, petulantes divitias compositis,
                                    disseretur voluptates crudeli sustulisti. Hostis res utuntur
                                    bono incurrunt navigandi laboribus istae tali, miserum metuamus
                                    labor quasi synephebos iudicante. Effecerit sicine falsarum
                                    pugnantibus imperitos, vero successionem exhorrescere illis
                                    magnopere deteriora maioribus necessariam industria. Illi
                                    variari stabilique augendas suscipiet, corrigere conducunt,
                                    divinum affecti, eruditus clarorum. Spatio gustare cupiditates
                                    desideret aliena sinat utrumque.
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- End Tabs -->

</div>

<|start_filename|>resources/vendor/cleanui/src/templates/pages/page-500.html<|end_filename|>
<div class="page-content-inner">

    <!-- Page 500 -->
    <div class="single-page-block">
        <div class="margin-auto text-center max-width-500">
            <h1>Error 500</h1>
            <p>Looks like something went wrong!</p>
            <p>We track these errors automatically, but if the problem persists feel free to contact us. In the meantime, try refreshing.</p>
            <a href="javascript: void(0);" class="btn btn-link">Go Back</a>
            <a href="javascript: void(0);" class="btn btn-link">Contact Us</a>
        </div>
    </div>
    <!-- End Page 500 -->

</div>

<|start_filename|>resources/vendor/cleanui/src/templates/components/tooltips-popovers.html<|end_filename|>
<div class="page-content-inner">

    <!-- Popovers -->
    <section class="panel">
        <div class="panel-heading">
            <h3>
                Popovers
                <sup>
                    <small><a href="http://v4-alpha.getbootstrap.com/components/tooltips/" target="_blank" class="link-underlined">Official Documentation</a></small>
                </sup>
            </h3>
        </div>
        <div class="panel-body">
            <div class="row">
                <div class="col-lg-6">
                    <h4>Click Popovers</h4>
                    <p>Modifier: see documentation</p>
                    <br />
                    <div class="margin-bottom-50">
                        <button type="button" class="btn btn-default margin-inline" title="Popover Title" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
                            Popover on top
                        </button>
                        <button type="button" class="btn btn-default margin-inline" title="Popover Title" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
                            Popover on right
                        </button>
                        <button type="button" class="btn btn-default margin-inline" title="Popover Title" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
                            Popover on bottom
                        </button>
                        <button type="button" class="btn btn-default margin-inline" title="Popover Title" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
                            Popover on left
                        </button>
                    </div>
                </div>
                <div class="col-lg-6">
                    <h4>Hover Popovers</h4>
                    <p>Modifier: see documentation</p>
                    <br />
                    <div class="margin-bottom-50">
                        <button type="button" class="btn btn-default margin-inline" title="Popover Title" data-container="body" data-toggle="popover-hover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
                            Popover on top
                        </button>
                        <button type="button" class="btn btn-default margin-inline" title="Popover Title" data-container="body" data-toggle="popover-hover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
                            Popover on right
                        </button>
                        <button type="button" class="btn btn-default margin-inline" title="Popover Title" data-container="body" data-toggle="popover-hover" data-placement="bottom" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
                            Popover on bottom
                        </button>
                        <button type="button" class="btn btn-default margin-inline" title="Popover Title" data-container="body" data-toggle="popover-hover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
                            Popover on left
                        </button>
                    </div>
                </div>
            </div>

        </div>
    </section>

    <!-- End Popovers -->

    <!-- Tooltips -->
    <section class="panel">
        <div class="panel-heading">
            <h3>
                Tooltips
                <sup>
                    <small><a href="http://v4-alpha.getbootstrap.com/components/popovers/" target="_blank" class="link-underlined">Official Documentation</a></small>
                </sup>
            </h3>
        </div>
        <div class="panel-body">
            <div class="row">
                <div class="col-lg-6">
                    <h4>Hover Tooltip</h4>
                    <p>Modifier: see documentation</p>
                    <br />
                    <div class="margin-bottom-50">
                        <button type="button" class="btn btn-default-outlined margin-inline" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
                            Tooltip on top
                        </button>
                        <button type="button" class="btn btn-default-outlined margin-inline" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
                            Tooltip on right
                        </button>
                        <button type="button" class="btn btn-default-outlined margin-inline" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
                            Tooltip on bottom
                        </button>
                        <button type="button" class="btn btn-default-outlined margin-inline" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
                            Tooltip on left
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- End Tooltips -->

</div>

<!-- Page Scripts -->
<script>

    $(function () {

        $("[data-toggle=popover]").popover();
        $("[data-toggle=popover-hover]").popover({
            trigger: 'hover'
        });

        $("[data-toggle=tooltip]").tooltip();

    });

</script>
<!-- End Page Scripts -->

<|start_filename|>resources/vendor/cleanui/src/templates/layout/typography.html<|end_filename|>
<section class="page-content-inner">

    <!-- Typography -->
    <section class="panel">
        <div class="panel-heading">
            <h3>Typography</h3>
        </div>
        <div class="panel-body">
            <div class="row">
                <div class="col-lg-6">
                    <!-- Headings -->
                    <div class="margin-bottom-50">
                        <h4>Headings</h4>
                        <p>All HTML headings, <code>&lt;h1&gt;</code> through <code>&lt;h6&gt;</code>,
                            are available. <code>.h1</code> through <code>.h6</code> classes
                            are also available, for when you want to match the font styling
                            of a heading but still want your text to be displayed inline</p>
                        <div class="example">
                            <h1>h1. Bootstrap heading <span class="label label-default">LABEL</span></h1>
                            <h2>h2. Bootstrap heading <span class="label label-primary">LABEL</span></h2>
                            <h3>h3. Bootstrap heading <span class="label label-info">LABEL</span></h3>
                            <h4>h4. Bootstrap heading <span class="label label-danger">LABEL</span></h4>
                            <h5>h5. Bootstrap heading <span class="label label-success">LABEL</span></h5>
                            <h6>h6. Bootstrap heading <span class="label label-warning">LABEL</span></h6>
                        </div>
                    </div>
                    <!-- End Headings -->
                </div>

                <div class="col-lg-6">
                    <!-- Styled Headings -->
                    <div class="margin-bottom-50">
                        <h4>Styled Headings</h4>
                        <p>Create lighter, secondary text in any heading with a generic <code>&lt;small&gt;</code> tag or the <code>.small</code> class</p>
                        <br />
                        <div class="example">
                            <h1><i class="icon-heading icmn-home" aria-hidden="true"></i>Bootstrap heading
                                <small>Secondary text</small>
                            </h1>
                            <h2><i class="icon-heading icmn-home" aria-hidden="true"></i>Bootstrap heading
                                <small>Secondary text</small>
                            </h2>
                            <h3><i class="icon-heading icmn-home" aria-hidden="true"></i>Bootstrap heading
                                <small>Secondary text</small>
                            </h3>
                            <h4><i class="icon-heading icmn-home" aria-hidden="true"></i>Bootstrap heading
                                <small>Secondary text</small>
                            </h4>
                            <h5><i class="icon-heading icmn-home" aria-hidden="true"></i>Bootstrap heading
                                <small>Secondary text</small>
                            </h5>
                            <h6><i class="icon-heading icmn-home" aria-hidden="true"></i>Bootstrap heading
                                <small>Secondary text</small>
                            </h6>
                        </div>
                    </div>
                    <!-- End Styled Headings -->
                </div>
            </div>

            <div class="row">
                <div class="col-lg-4">
                    <!-- Body Copy -->
                    <div class="margin-bottom-50">
                        <h4>Body Copy</h4>
                        <p>Bootstrap's global default <code>font-size</code> is
                            <strong>14px</strong>, with a <code>line-height</code> of
                            <strong>1.5</strong>. This is applied to the <code>&lt;body&gt;</code> and all paragraphs. In addition, <code>&lt;p&gt;</code> (paragraphs)
                            receive a bottom margin of half their computed line-height (1rem
                            by default)</p>
                    </div>
                    <!-- End Body Copy -->
                </div>
                <div class="col-lg-4">
                    <!-- Highlight -->
                    <div class="margin-bottom-50">
                        <h4>Highlight</h4>
                        <p>For highlighting a run of text due to its relevance in another
                            context, use the <code>&lt;mark&gt;</code> tag. Like this:</p>
                        <p>You can use the mark tag to
                            <mark>highlight</mark> text</p>
                    </div>
                    <!-- End Highlight -->
                </div>
                <div class="col-lg-4">
                    <!-- Addresses -->
                    <div class="margin-bottom-50">
                        <h4>Addresses</h4>
                        <p>Present contact information for the nearest ancestor or the entire
                            body of work. Preserve formatting by ending all lines with <code>&lt;br&gt;</code></p>
                        <address>
                            <strong>Twitter, Inc.</strong>
                            <br> 795 Folsom Ave, Suite 600
                            <br> San Francisco, CA 94107
                            <br>
                            <abbr title="Phone">P:</abbr> (123) 456-7890
                        </address>
                        <address>
                            <strong>Full Name</strong>
                            <br>
                            <a href="mailto:#"><EMAIL></a>
                        </address>
                    </div>
                    <!-- End Addresses -->
                </div>
            </div>
            <div class="row">
                <div class="col-lg-4">
                    <!-- Lists - Unordered -->
                    <div class="margin-bottom-50">
                        <h4>Lists - Unordered</h4>
                        <p>A list of items in which the order does not explicitly matter</p>
                        <ul>
                            <li>Lorem ipsum dolor sit amet</li>
                            <li>Nulla volutpat aliquam velit
                                <ul>
                                    <li>Phasellus iaculis neque</li>
                                    <li>Purus sodales ultricies</li>
                                    <li>Vestibulum laoreet porttitor sem</li>
                                </ul>
                            </li>
                            <li>Faucibus porta lacus fringilla vel</li>
                            <li>Aenean sit amet erat nunc</li>
                            <li>Eget porttitor lorem</li>
                        </ul>
                    </div>
                    <!-- End Lists - Unordered -->
                </div>
                <div class="col-lg-4">
                    <!-- Lists - Ordered -->
                    <div class="margin-bottom-50">
                        <h4>Lists - Ordered</h4>
                        <p>A list of items in which the order does explicitly matter</p>
                        <ol>
                            <li>Lorem ipsum dolor sit amet</li>
                            <li>Nulla volutpat aliquam velit
                                <ol>
                                    <li>Phasellus iaculis neque</li>
                                    <li>Purus sodales ultricies</li>
                                    <li>Vestibulum laoreet porttitor sem</li>
                                </ol>
                            </li>
                            <li>Faucibus porta lacus fringilla vel</li>
                            <li>Aenean sit amet erat nunc</li>
                            <li>Eget porttitor lorem</li>
                        </ol>
                    </div>
                    <!-- End Lists - Ordered -->
                </div>
                <div class="col-lg-4">
                    <!-- Lists - Unstyled -->
                    <div class="margin-bottom-50">
                        <h4>Lists - Unstyled</h4>
                        <p>Remove the default default styles and left margin on list
                            items. Apply to each nested lists if you need</p>
                        <ul class="list-unstyled">
                            <li>Lorem ipsum dolor sit amet</li>
                            <li>Nulla volutpat aliquam velit
                                <ul>
                                    <li>Phasellus iaculis neque</li>
                                    <li>Purus sodales ultricies</li>
                                    <li>Vestibulum laoreet porttitor sem</li>
                                </ul>
                            </li>
                            <li>Faucibus porta lacus fringilla vel</li>
                            <li>Aenean sit amet erat nunc</li>
                        </ul>
                    </div>
                    <!-- End Lists - Unstyled -->
                </div>
            </div>
            <div class="row">
                <div class="col-lg-4">
                    <!-- Lists - Icons -->
                    <div class="margin-bottom-50">
                        <h4>Lists - Icons</h4>
                        <p>A list of terms with icons</p>
                        <ul class="list-icons">
                            <li>
                                <i class="list-icon icmn-checkmark2" aria-hidden="true"></i>
                                Lorem ipsum dolor sit amet
                            </li>
                            <li>
                                <i class="list-icon icmn-checkmark2" aria-hidden="true"></i>
                                Nulla volutpat aliquam velit
                                <ul>
                                    <li>Phasellus iaculis neque</li>
                                    <li>Purus sodales ultricies</li>
                                </ul>
                            </li>
                            <li>
                                <i class="list-icon icmn-checkmark2" aria-hidden="true"></i>Faucibus porta lacus
                                fringilla vel
                            </li>
                        </ul>
                    </div>
                    <!-- End Lists - Icons -->
                </div>
                <div class="col-lg-4 col-sm-6">
                    <!-- Collapsible Submenu -->
                    <div class="margin-bottom-50">
                        <h4>Collapsible Submenu</h4>
                        <p>A list of terms with icons</p>
                        <ul class="list-icons">
                            <li>
                                <i class="list-icon icmn-checkmark2" aria-hidden="true"></i>
                                Lorem ipsum dolor sit amet
                            </li>
                            <li>
                                <a data-toggle="collapse" href="#exampleSubmenu" aria-controls="exampleSubmenu" aria-expanded="false">
                                    <i class="list-icon icmn-checkmark2" aria-hidden="false"></i>
                                    Nulla volutpat aliquam velit
                                </a>
                                <ul class="collapse" id="exampleSubmenu" aria-expanded="false">
                                    <li>Phasellus iaculis neque</li>
                                    <li>Purus sodales ultricies</li>
                                </ul>
                            </li>
                            <li>
                                <i class="list-icon icmn-checkmark2" aria-hidden="true"></i>
                                Faucibus porta lacus fringilla vel
                            </li>
                        </ul>
                    </div>
                    <!-- End Collapsible Submenu -->
                </div>
                <div class="col-lg-4">
                    <!-- Lists - Inline -->
                    <div class="margin-bottom-50">
                        <h4>Lists - Inline</h4>
                        <p>Place all list items on a single line with <code>display: inline-block;</code> and some light padding</p>
                        <ul class="list-inline">
                            <li>Lorem ipsum</li>
                            <li>Phasellus iaculis</li>
                            <li>Nulla volutpat</li>
                        </ul>
                    </div>
                    <!-- End Lists - Inline -->
                </div>
            </div>
            <div class="row">
                <div class="col-lg-4">
                    <!-- Description -->
                    <div class="margin-bottom-50">
                        <h4>Description</h4>
                        <p>A list of terms with their associated descriptions</p>
                        <dl>
                            <dt>Description lists</dt>
                            <dd>A description list is perfect for defining terms</dd>
                            <dt>Euismod</dt>
                            <dd>Vestibulum id ligula porta felis euismod semper eget lacinia
                                odio</dd>
                            <dd>Donec id elit non mi porta gravida at eget metus</dd>
                            <dt>Malesuada porta</dt>
                            <dd>Etiam porta sem malesuada magna mollis euismod</dd>
                        </dl>
                    </div>
                    <!-- End Description -->
                </div>
                <div class="col-lg-8">
                    <!-- Horizontal Description -->
                    <div class="margin-bottom-50">
                        <h4>Horizontal Description</h4>
                        <p>Make terms and descriptions in <code>&lt;dl&gt;</code> line up
                            side-by-side. Starts off stacked like default <code>&lt;dl&gt;</code>s,
                            but when the navbar expands, so do these</p>
                        <dl class="dl-horizontal">
                            <dt>Description lists</dt>
                            <dd>A description list is perfect for defining terms</dd>
                            <dt>Euismod</dt>
                            <dd>Vestibulum id ligula porta felis euismod semper eget lacinia
                                odio sem nec elit</dd>
                            <dd>Donec id elit non mi porta gravida</dd>
                            <dt>Malesuada porta</dt>
                            <dd>Etiam porta sem malesuada magna mollis euismod</dd>
                            <dt>Qui eiusmod magna</dt>
                            <dd>Lorem ipsum In enim nostrud ut in mollit sint cillum laborum
                                ea quis qui</dd>
                        </dl>
                    </div>
                    <!-- End Horizontal Description -->
                </div>
            </div>
            <div class="row">
                <div class="col-lg-4">
                    <!-- Well -->
                    <div class="margin-bottom-50">
                        <h4>Well</h4>
                        <p>Use the well as a simple effect on an element to give it an inset
                            effect</p>
                        <div class="row">
                            <div class="col-sm-12">
                                <div class="well well-sm">Look, I'm in a small well!</div>
                                <div class="well">Look, I'm in a well!</div>
                                <div class="well well-lg">Look, I'm in a large well!</div>
                            </div>
                        </div>
                    </div>
                    <!-- End Well -->
                </div>
                <div class="col-lg-8">
                    <!-- Drop Cap -->
                    <div class="margin-bottom-50">
                        <h4>Drop Cap</h4>
                        <p>Use the class <code>.drop-cap</code> let the first letter drop
                            down of content texts</p>
                        <p>
                            <span class="drop-cap">L</span>ed cursus ante dapibus diam. Sed nisi. Nulla quis sem
                            at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris.
                            Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum
                            lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora
                            torquent per conubia nostra, per inceptos himenaeos. Curabitur
                            sodales ligula in libero. Sed dignissim lacinia nunc.sed cursus
                            ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum
                            imperdiet</p>
                        <p>
                            <span class="drop-cap drop-cap-reversed">L</span>ed cursus ante dapibus diam. Sed nisi. Nulla quis sem
                            at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris.
                            Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum
                            lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora
                            torquent per conubia nostra, per inceptos himenaeos. Curabitur
                            sodales ligula in libero. Sed dignissim lacinia nunc.sed cursus
                            ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum
                            imperdiet</p>
                    </div>
                    <!-- End Drop Cap -->
                </div>
            </div>
            <div class="row">
                <div class="col-lg-12">
                    <!-- Blockquotes -->
                    <div class="margin-bottom-0">
                        <h4>Blockquotes</h4>
                        <div class="row">
                            <div class="col-lg-10">
                                <blockquote>
                                    <p>
                                        <span class="drop-cap">L</span>ed cursus ante dapibus diam. Sed nisi. Nulla quis sem
                                        at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris.
                                        Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum
                                        lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora
                                        torquent per conubia nostra, per inceptos himenaeos. Curabitur
                                        sodales ligula in libero. Sed dignissim lacinia nunc.sed cursus
                                        ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum
                                        imperdiet</p>
                                    <div class="blockquote-footer">
                                        Someone famous
                                        <cite title="Source Title">(Wikipedia.org)</cite>
                                    </div>
                                </blockquote>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-10 col-lg-offset-2">
                                <blockquote class="blockquote-right">
                                    <p>
                                        Led cursus ante dapibus diam. Sed nisi. Nulla quis sem
                                        at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris.
                                        at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris.
                                        Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum
                                        lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora
                                        torquent per conubia nostra, per inceptos himenaeos. Curabitur
                                        sodales ligula in libero. Sed dignissim lacinia nunc.sed cursus
                                        ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum
                                        imperdiet</p>
                                    <div class="blockquote-footer">
                                        Someone famous
                                        <cite title="Source Title">(Wikipedia.org)</cite>
                                    </div>
                                </blockquote>
                            </div>
                        </div>
                    </div>
                    <!-- End Blockquotes -->
                </div>
            </div>
        </div>
    </section>
    <!-- End Typography -->

</section>

<|start_filename|>resources/vendor/cleanui/src/templates/components/collapse.html<|end_filename|>
<div class="page-content-inner">

    <!-- Collapse -->
    <section class="panel">
        <div class="panel-heading">
            <h3>
                Collapse
                <sup>
                    <small><a href="http://v4-alpha.getbootstrap.com/components/collapse/" target="_blank">Official Documentation</a></small>
                </sup>
            </h3>
        </div>
        <div class="panel-body">
            <div class="row">
                <div class="col-lg-6">
                    <h4>Accordion</h4>
                    <p>Elements: <code>div.accordion</code>, <code>div.panel</code>, <code>.accordion-indicator</code>, <code>.collapsed</code>, <code>.collapse</code></p>
                    <br />
                    <div class="margin-bottom-50">
                        <div class="panel-group accordion" id="accordion" role="tablist" aria-multiselectable="true">
                            <div class="panel panel-default">
                                <div class="panel-heading collapsed" role="tab" id="headingOne" data-toggle="collapse" data-parent="#accordion" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                                    <div class="panel-title">
                                        <span class="accordion-indicator pull-right">
                                            <i class="plus fa fa-plus"></i>
                                            <i class="minus fa fa-minus"></i>
                                        </span>
                                        <a>
                                            Collapsible Group Item #1
                                        </a>
                                    </div>
                                </div>
                                <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
                                    <div class="panel-body">
                                        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                                    </div>
                                </div>
                            </div>
                            <div class="panel panel-default">
                                <div class="panel-heading collapsed" role="tab" id="headingTwo" class="collapsed" data-toggle="collapse" data-parent="#accordion" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                                    <div class="panel-title">
                                        <span class="accordion-indicator pull-right">
                                            <i class="plus fa fa-plus"></i>
                                            <i class="minus fa fa-minus"></i>
                                        </span>
                                        <a>
                                            Collapsible Group Item #2
                                        </a>
                                    </div>
                                </div>
                                <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
                                    <div class="panel-body">
                                        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                                    </div>
                                </div>
                            </div>
                            <div class="panel panel-default">
                                <div class="panel-heading collapsed" role="tab" id="headingThree" class="collapsed" data-toggle="collapse" data-parent="#accordion" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                                    <div class="panel-title">
                                        <span class="accordion-indicator pull-right">
                                            <i class="plus fa fa-plus"></i>
                                            <i class="minus fa fa-minus"></i>
                                        </span>
                                        <a>
                                            Collapsible Group Item #3
                                        </a>
                                    </div>
                                </div>
                                <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
                                    <div class="panel-body">
                                        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus <NAME> ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <h4>Accordion with Spacing</h4>
                    <p>Modifiers: <code>.accordion-margin-bottom</code></p>
                    <br />
                    <div class="margin-bottom-50">
                        <div class="panel-group accordion accordion-margin-bottom" id="accordion2" role="tablist" aria-multiselectable="true">
                            <div class="panel panel-default">
                                <div class="panel-heading collapsed" role="tab" id="headingOne2" data-toggle="collapse" data-parent="#accordion2" data-target="#collapseOne2" aria-expanded="true" aria-controls="collapseOne2">
                                    <div class="panel-title">
                                        <span class="accordion-indicator pull-right">
                                            <i class="plus fa fa-plus"></i>
                                            <i class="minus fa fa-minus"></i>
                                        </span>
                                        <a>
                                            Collapsible Group Item #1
                                        </a>
                                    </div>
                                </div>
                                <div id="collapseOne2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne2">
                                    <div class="panel-body">
                                        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                                    </div>
                                </div>
                            </div>
                            <div class="panel panel-default">
                                <div class="panel-heading collapsed" role="tab" id="headingTwo2" class="collapsed" data-toggle="collapse" data-parent="#accordion2" data-target="#collapseTwo2" aria-expanded="false" aria-controls="collapseTwo2">
                                    <div class="panel-title">
                                        <span class="accordion-indicator pull-right">
                                            <i class="plus fa fa-plus"></i>
                                            <i class="minus fa fa-minus"></i>
                                        </span>
                                        <a>
                                            Collapsible Group Item #2
                                        </a>
                                    </div>
                                </div>
                                <div id="collapseTwo2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo2">
                                    <div class="panel-body">
                                        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus t<NAME> ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                                    </div>
                                </div>
                            </div>
                            <div class="panel panel-default">
                                <div class="panel-heading collapsed" role="tab" id="headingThree2" class="collapsed" data-toggle="collapse" data-parent="#accordion2" data-target="#collapseThree2" aria-expanded="false" aria-controls="collapseThree2">
                                    <div class="panel-title">
                                        <span class="accordion-indicator pull-right">
                                            <i class="plus fa fa-plus"></i>
                                            <i class="minus fa fa-minus"></i>
                                        </span>
                                        <a>
                                            Collapsible Group Item #3
                                        </a>
                                    </div>
                                </div>
                                <div id="collapseThree2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree2">
                                    <div class="panel-body">
                                        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6">
                    <h4>Collapse Control</h4>
                    <p>Modifier: see documentation</p>
                    <br />
                    <div class="margin-bottom-50">
                        <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
                            Button with data-target
                        </button>
                        <br />
                        <br />
                        <div class="collapse" id="collapseExample">
                            <div class="card card-block">
                                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus <NAME> ad squid
                            </div>
                        </div>
                        <br />
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- End Collapse -->

</div>

<|start_filename|>resources/vendor/cleanui/gulpfile.js<|end_filename|>
'use strict';



/////////////////////////////////////////////////////////////////////////////
// GULP PLUGINS
var gulp = require('gulp'),
    watch = require('gulp-watch'),
    autoprefix = require('gulp-autoprefixer'),
    sass = require('gulp-sass'),
    minifyCss = require('gulp-clean-css'),
    rename = require('gulp-rename'),
    concat = require('gulp-concat'),
    uglify = require('gulp-uglify'),
    rigger = require('gulp-rigger'),
    ignore = require('gulp-ignore'),
    imageop = require('gulp-image-optimization'),
    rimraf = require('rimraf'),
    browserSync = require("browser-sync"),
    reload = browserSync.reload;



/////////////////////////////////////////////////////////////////////////////
// GULP PATHS
var path = {
    src: {
        version_html: 'src/version_html/**/*.*',
        version_angular: 'src/version_angular/**/*.*',
        img: 'src/assets/common/img/**/*.*',
        fonts: 'src/assets/common/fonts/**/*.*',
        css: 'src/assets/common/css/**/*.scss',
        js: 'src/assets/common/js/**/*.*',
        vendors_bower: 'src/assets/vendors/bower/**/*.*',
        vendors_manual: 'src/assets/vendors/manual/**/*.*'
    },
    build: {
        version_html: 'build/version_html/',
        version_angular: 'build/version_angular/',
        img: 'build/assets/common/img/',
        fonts: 'build/assets/common/fonts/',
        css: 'build/assets/common/css',
        cssSource: 'build/assets/common/css/source',
        js: 'build/assets/common/js',
        vendors: 'build/assets/vendors'
    },
    watch: {
        templates: 'src/templates/**/*.html',
        version_html: 'src/version_html/**/*.*',
        version_angular: 'src/version_angular/**/*.*',
        img: 'src/assets/common/img/**/*.*',
        fonts: 'src/assets/common/fonts/**/*.*',
        css: 'src/assets/common/css/**/*.scss',
        js: 'src/assets/common/js/**/*.*',
        vendors: 'src/assets/vendors/**/*.*'
    },
    clean: 'build/'
};



/////////////////////////////////////////////////////////////////////////////
// PRINT ERRORS
function printError(error) {
    console.log(error.toString());
    this.emit('end');
}



/////////////////////////////////////////////////////////////////////////////
// BROWSERSYNC SERVE
var config = {
    server: {
        baseDir: "./build"
    },
    files: ['./build/**/*'],
    tunnel: false,
    host: 'localhost',
    port: 9000,
    logPrefix: "frontend",
    watchTask: true
};

gulp.task('serve', function () {
    setTimeout(function () {
        browserSync(config);
    }, 5000)
});



/////////////////////////////////////////////////////////////////////////////
// VERSION_HTML BUILD
gulp.task('version_html:build', function () {
    return gulp.src(path.src.version_html)
        .pipe(ignore.exclude(['_header.html', '_footer.html', '_top-menu.html', '_left-menu.html']))
        .pipe(rigger())
        .on('error', printError)
        .pipe(gulp.dest(path.build.version_html))
        .pipe(reload({stream: true}));
});



/////////////////////////////////////////////////////////////////////////////
// VERSION_ANGULAR BUILD
gulp.task('version_angular:build', function () {
    return gulp.src(path.src.version_angular)
        .pipe(ignore.exclude(['_header.html', '_footer.html', '_top-menu.html', '_left-menu.html']))
        .pipe(rigger())
        .on('error', printError)
        .pipe(gulp.dest(path.build.version_angular))
        .pipe(reload({stream: true}));
});



/////////////////////////////////////////////////////////////////////////////
// VENDORS BUILD
gulp.task('vendors:bower:build', function() {
    return gulp.src(path.src.vendors_bower)
        .pipe(gulp.dest(path.build.vendors))
});
gulp.task('vendors:manual:build', function() {
    return gulp.src(path.src.vendors_manual)
        .pipe(gulp.dest(path.build.vendors))
});



/////////////////////////////////////////////////////////////////////////////
// JAVASCRIPT BUILD
gulp.task('js:build', function () {
    return gulp.src(path.src.js)
        .pipe(gulp.dest(path.build.js))
        .pipe(reload({stream: true}));
});



/////////////////////////////////////////////////////////////////////////////
// STYLES BUILD
gulp.task('css:build', function () {
    return gulp.src(path.src.css)
        .pipe(sass({outputStyle: 'expanded', indentWidth: 4}))
        .on('error', printError)
        .pipe(autoprefix({
            browsers: ['last 30 versions', '> 1%', 'ie 9'],
            cascade: true
        }))
        .pipe(ignore.exclude('mixins.css'))
        .pipe(gulp.dest(path.build.cssSource))
        .pipe(ignore.exclude('main.css'))
        .pipe(minifyCss())
        .pipe(concat('main.css'))
        .pipe(rename({ extname: '.min.css' }))
        .pipe(gulp.dest(path.build.css))
        .pipe(reload({stream: true}))
});



/////////////////////////////////////////////////////////////////////////////
// IMAGES BUILD
gulp.task('img:build', function (cb) {
    gulp.src(path.src.img)
        .pipe(imageop({
            optimizationLevel: 5,
            progressive: true,
            interlaced: true
        }))
        .on('error', printError)
        .pipe(gulp.dest(path.build.img))
        .on('end', cb)
});



/////////////////////////////////////////////////////////////////////////////
// FONTS BUILD
gulp.task('fonts:build', function() {
    return gulp.src(path.src.fonts)
		.pipe(gulp.dest(path.build.fonts))
});



/////////////////////////////////////////////////////////////////////////////
// BUILD ALL
gulp.task('build', [
    'version_html:build',
    'version_angular:build',
    'fonts:build',
    'img:build',
    'css:build',
    'js:build',
    'vendors:bower:build',
    'vendors:manual:build'
]);


/////////////////////////////////////////////////////////////////////////////
// WATCH ALL
gulp.task('watch', function(){
    watch([path.watch.templates], function(event, cb) {
        gulp.start('version_html:build');
        gulp.start('version_angular:build');
    });
    watch([path.watch.version_html], function(event, cb) {
        gulp.start('version_html:build');
    });
    watch([path.watch.version_angular], function(event, cb) {
        gulp.start('version_angular:build');
    });
    watch([path.watch.img], function(event, cb) {
        gulp.start('img:build');
    });
    watch([path.watch.fonts], function(event, cb) {
        gulp.start('fonts:build');
    });
    watch([path.watch.css], function(event, cb) {
        gulp.start('css:build');
    });
    watch([path.watch.js], function(event, cb) {
        gulp.start('js:build');
    });
    watch([path.watch.vendors], function(event, cb) {
        gulp.start('vendors:bower:build');
        gulp.start('vendors:manual:build');
    });
});



/////////////////////////////////////////////////////////////////////////////
// CLEAN PRODUCTION
gulp.task('clean', function (cb) {
    rimraf(path.clean, cb);
});



/////////////////////////////////////////////////////////////////////////////
// DEFAULT TASK
gulp.task('default', ['build', 'serve', 'watch']);



<|start_filename|>resources/vendor/cleanui/src/templates/components/modal.html<|end_filename|>
<div class="page-content-inner">

    <!-- Modal -->
    <section class="panel">
        <div class="panel-heading">
            <h3>
                Modal
                <sup>
                    <small><a href="http://v4-alpha.getbootstrap.com/components/modal/" target="_blank" class="link-underlined">Official Documentation</a></small>
                </sup>
            </h3>
        </div>
        <div class="panel-body">
            <h4>Default Modal</h4>
            <p>You can add any widgets, components and elements to <code>.modal-body</code> inside this modal</p>
            <p>Modifier: see documentation, <code>.modal-size-small</code>, <code>.modal-size-large</code></p>
            <br />
            <div class="margin-bottom-50">
                <button type="button" class="btn btn-default margin-inline" data-toggle="modal" data-target="#example1">
                    Launch Demo Modal
                </button>
                <div class="modal fade" id="example1" tabindex="-1" role="dialog" aria-labelledby="" aria-hidden="true">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                                <h4 class="modal-title" id="myModalLabel">Modal title</h4>
                            </div>
                            <div class="modal-body">
                                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn" data-dismiss="modal">Close</button>
                                <button type="button" class="btn btn-primary">Save changes</button>
                            </div>
                        </div>
                    </div>
                </div>

                <button type="button" class="btn btn-default margin-inline" data-toggle="modal" data-target="#example2">
                    Large Modal
                </button>
                <div class="modal fade modal-size-large" id="example2" tabindex="-1" role="dialog" aria-labelledby="" aria-hidden="true">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                                <h4 class="modal-title" id="myModalLabel">Modal title</h4>
                            </div>
                            <div class="modal-body">
                                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn" data-dismiss="modal">Close</button>
                                <button type="button" class="btn btn-primary">Save changes</button>
                            </div>
                        </div>
                    </div>
                </div>

                <button type="button" class="btn btn-default margin-inline" data-toggle="modal" data-target="#example3">
                    Small Modal
                </button>
                <div class="modal fade modal-size-small" id="example3" tabindex="-1" role="dialog" aria-labelledby="" aria-hidden="true">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                                <h4 class="modal-title" id="myModalLabel">Modal title</h4>
                            </div>
                            <div class="modal-body">
                                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn" data-dismiss="modal">Close</button>
                                <button type="button" class="btn btn-primary">Save changes</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- End Modal -->



</div>