<?php include 'inc/config.php'; ?>
<?php include 'inc/template_start.php'; ?>
<?php include 'inc/page_head.php'; ?>

<!-- Intro -->
<section class="site-section site-section-top site-section-light themed-background-dark">
    <div class="container">
        <h1 class="text-center animation-fadeInQuickInv"><strong>UI Elements for your frontend.</strong></h1>
    </div>
</section>
<!-- END Intro -->

<!-- Alerts Title -->
<section class="site-content site-section-mini themed-background-muted border-bottom">
    <div class="container">
        <h2 class="site-heading h3 site-block">
            <i class="fa fa-fw fa-chevron-right"></i> <strong>Alerts</strong>
        </h2>
    </div>
</section>
<!-- END Alerts Title -->

<!-- Alerts Content -->
<section class="site-content site-section">
    <div class="container">
        <!-- Alerts Row -->
        <div class="row">
            <div class="col-md-6">
                <!-- Success Alert -->
                <div class="alert alert-success alert-dismissable site-block">
                    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
                    <h4><strong>Success</strong></h4>
                    <p>The <a href="javascript:void(0)" class="alert-link">App</a> was updated successfully!</p>
                </div>
                <!-- END Success Alert -->

                <!-- Info Alert -->
                <div class="alert alert-info alert-dismissable site-block">
                    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
                    <h4><strong>Information</strong></h4>
                    <p>Just an information <a href="javascript:void(0)" class="alert-link">message</a>!</p>
                </div>
                <!-- END Info Alert -->
            </div>
            <div class="col-md-6 site-block">
                <!-- Warning Alert -->
                <div class="alert alert-warning alert-dismissable site-block">
                    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
                    <h4><strong>Warning</strong></h4>
                    <p>Please pay <a href="javascript:void(0)" class="alert-link">attention</a>!</p>
                </div>
                <!-- END Warning Alert -->

                <!-- Danger Alert -->
                <div class="alert alert-danger alert-dismissable site-block">
                    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
                    <h4><strong>Error</strong></h4>
                    <p>Opps, an error <a href="javascript:void(0)" class="alert-link">occured</a>!</p>
                </div>
                <!-- END Danger Alert -->
            </div>
        </div>
        <!-- END Alerts Row -->
    </div>
</section>
<!-- END Alerts Content -->

<!-- Buttons Title -->
<section class="site-content site-section-mini themed-background-muted border-top border-bottom">
    <div class="container">
        <h2 class="site-heading h3 site-block">
            <i class="fa fa-fw fa-chevron-right"></i> <strong>Buttons</strong>
        </h2>
    </div>
</section>
<!-- END Buttons Title -->

<!-- Buttons Content -->
<section class="site-content site-section">
    <div class="container">
        <!-- Buttons Row -->
        <div class="row">
            <div class="col-md-6">
                <div class="site-block">
                    <h3 class="push-bit"><strong>Default</strong></h3>
                    <button type="button" class="btn btn-default">Default</button>
                    <button type="button" class="btn btn-primary">Primary</button>
                    <button type="button" class="btn btn-success">Success</button>
                    <button type="button" class="btn btn-info">Info</button>
                    <button type="button" class="btn btn-warning">Warning</button>
                    <button type="button" class="btn btn-danger">Danger</button>
                </div>
                <div class="site-block">
                    <h3 class="push-bit"><strong>Ripple Effect</strong></h3>
                    <button type="button" class="btn btn-effect-ripple btn-default">Default</button>
                    <button type="button" class="btn btn-effect-ripple btn-primary">Primary</button>
                    <button type="button" class="btn btn-effect-ripple btn-success">Success</button>
                    <button type="button" class="btn btn-effect-ripple btn-info">Info</button>
                    <button type="button" class="btn btn-effect-ripple btn-warning">Warning</button>
                    <button type="button" class="btn btn-effect-ripple btn-danger">Danger</button>
                </div>
                <div class="site-block">
                    <h3 class="push-bit"><strong>Square</strong></h3>
                    <button type="button" class="btn btn-square btn-default">Default</button>
                    <button type="button" class="btn btn-square btn-primary">Primary</button>
                    <button type="button" class="btn btn-square btn-success">Success</button>
                    <button type="button" class="btn btn-square btn-info">Info</button>
                    <button type="button" class="btn btn-square btn-warning">Warning</button>
                    <button type="button" class="btn btn-square btn-danger">Danger</button>
                </div>
            </div>
            <div class="col-md-6">
                <div class="site-block">
                    <h3 class="push-bit"><strong>Rounded</strong></h3>
                    <button type="button" class="btn btn-rounded btn-default">Default</button>
                    <button type="button" class="btn btn-rounded btn-primary">Primary</button>
                    <button type="button" class="btn btn-rounded btn-success">Success</button>
                    <button type="button" class="btn btn-rounded btn-info">Info</button>
                    <button type="button" class="btn btn-rounded btn-warning">Warning</button>
                    <button type="button" class="btn btn-rounded btn-danger">Danger</button>
                </div>
                <div class="site-block">
                    <h3 class="push-bit"><strong>Sizes</strong></h3>
                    <button type="button" class="btn btn-xs btn-danger">Extra Small</button>
                    <button type="button" class="btn btn-sm btn-danger">Small</button>
                    <button type="button" class="btn btn-danger">Normal</button>
                    <button type="button" class="btn btn-lg btn-danger">Large</button>
                </div>
                <div class="site-block">
                    <h3 class="push-bit"><strong>Block</strong></h3>
                    <button type="button" class="btn btn-block btn-primary">Block Button</button>
                </div>
            </div>
        </div>
        <!-- END Buttons Row -->
    </div>
</section>
<!-- END Buttons Content -->

<!-- Forms Title -->
<section class="site-content site-section-mini themed-background-muted border-top border-bottom">
    <div class="container">
        <h2 class="site-heading h3 site-block">
            <i class="fa fa-fw fa-chevron-right"></i> <strong>Forms</strong>
        </h2>
    </div>
</section>
<!-- END Forms Title -->

<!-- Forms Content -->
<section class="site-content site-section">
    <div class="container">
        <!-- Forms Row -->
        <div class="row">
            <div class="col-md-6 col-md-offset-3">
                <!-- Horizontal Form -->
                <div class="site-block">
                    <h3 class="push-bit"><strong>Horizontal Form</strong></h3>
                    <form action="ui.php" method="post" enctype="multipart/form-data" class="form-horizontal remove-margin" onsubmit="return false;">
                        <div class="form-group">
                            <label class="col-md-3 control-label">Static</label>
                            <div class="col-md-9">
                                <p class="form-control-static">This is static text</p>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-3 control-label" for="example-hf-email">Email</label>
                            <div class="col-md-9">
                                <input type="email" id="example-hf-email" name="example-hf-email" class="form-control">
                                <span class="help-block">Please enter your email</span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-3 control-label" for="example-hf-password">Password</label>
                            <div class="col-md-9">
                                <input type="password" id="example-hf-password" name="example-hf-password" class="form-control">
                                <span class="help-block">Please enter your password</span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-3 control-label" for="example-disabled">Disabled</label>
                            <div class="col-md-6">
                                <input type="text" id="example-disabled" name="example-disabled" class="form-control" placeholder="Disabled" disabled>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-3 control-label" for="example-textarea-input">Textarea</label>
                            <div class="col-md-9">
                                <textarea id="example-textarea-input" name="example-textarea-input" rows="7" class="form-control" placeholder="Description.."></textarea>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-3 control-label" for="example-select">Select</label>
                            <div class="col-md-6">
                                <select id="example-select" name="example-select" class="form-control" size="1">
                                    <option value="0">Please select</option>
                                    <option value="1">HTML</option>
                                    <option value="2">CSS</option>
                                    <option value="3">Javascript</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-3 control-label" for="example-multiple-select">Multiple</label>
                            <div class="col-md-6">
                                <select id="example-multiple-select" name="example-multiple-select" class="form-control" size="5" multiple>
                                    <option value="1">Option #1</option>
                                    <option value="2">Option #2</option>
                                    <option value="3">Option #3</option>
                                    <option value="4">Option #4</option>
                                    <option value="5">Option #5</option>
                                    <option value="6">Option #6</option>
                                    <option value="7">Option #7</option>
                                    <option value="8">Option #8</option>
                                    <option value="9">Option #9</option>
                                    <option value="10">Option #10</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-3 control-label">Radios</label>
                            <div class="col-md-9">
                                <div class="radio">
                                    <label for="example-radio1">
                                        <input type="radio" id="example-radio1" name="example-radios" value="option1"> HTML
                                    </label>
                                </div>
                                <div class="radio">
                                    <label for="example-radio2">
                                        <input type="radio" id="example-radio2" name="example-radios" value="option2"> CSS
                                    </label>
                                </div>
                                <div class="radio">
                                    <label for="example-radio3">
                                        <input type="radio" id="example-radio3" name="example-radios" value="option3"> Javascript
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-3 control-label">Inline Radios</label>
                            <div class="col-md-9">
                                <label class="radio-inline" for="example-inline-radio1">
                                    <input type="radio" id="example-inline-radio1" name="example-inline-radios" value="option1"> HTML
                                </label>
                                <label class="radio-inline" for="example-inline-radio2">
                                    <input type="radio" id="example-inline-radio2" name="example-inline-radios" value="option2"> CSS
                                </label>
                                <label class="radio-inline" for="example-inline-radio3">
                                    <input type="radio" id="example-inline-radio3" name="example-inline-radios" value="option3"> Javascript
                                </label>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-3 control-label">Checkboxes</label>
                            <div class="col-md-9">
                                <div class="checkbox">
                                    <label for="example-checkbox1">
                                        <input type="checkbox" id="example-checkbox1" name="example-checkbox1" value="option1"> HTML
                                    </label>
                                </div>
                                <div class="checkbox">
                                    <label for="example-checkbox2">
                                        <input type="checkbox" id="example-checkbox2" name="example-checkbox2" value="option2"> CSS
                                    </label>
                                </div>
                                <div class="checkbox">
                                    <label for="example-checkbox3">
                                        <input type="checkbox" id="example-checkbox3" name="example-checkbox3" value="option3"> Javascript
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-3 control-label">Inline Checkboxes</label>
                            <div class="col-md-9">
                                <label class="checkbox-inline" for="example-inline-checkbox1">
                                    <input type="checkbox" id="example-inline-checkbox1" name="example-inline-checkbox1" value="option1"> HTML
                                </label>
                                <label class="checkbox-inline" for="example-inline-checkbox2">
                                    <input type="checkbox" id="example-inline-checkbox2" name="example-inline-checkbox2" value="option2"> CSS
                                </label>
                                <label class="checkbox-inline" for="example-inline-checkbox3">
                                    <input type="checkbox" id="example-inline-checkbox3" name="example-inline-checkbox3" value="option3"> Javascript
                                </label>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-3 control-label" for="example-file-input">File</label>
                            <div class="col-md-9">
                                <input type="file" id="example-file-input" name="example-file-input">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-3 control-label" for="example-file-multiple-input">Multiple File</label>
                            <div class="col-md-9">
                                <input type="file" id="example-file-multiple-input" name="example-file-multiple-input" multiple>
                            </div>
                        </div>
                        <div class="form-group form-actions remove-margin">
                            <div class="col-md-9 col-md-offset-3">
                                <button type="submit" class="btn btn-effect-ripple btn-primary">Submit</button>
                                <button type="reset" class="btn btn-effect-ripple btn-danger">Reset</button>
                            </div>
                        </div>
                    </form>
                </div>
                <!-- END Horizontal Form -->

                <!-- Labels on top Form -->
                <div class="site-block">
                    <h3 class="push-bit"><strong>Labels on top Form</strong></h3>
                    <form action="ui.php" method="post" onsubmit="return false;">
                        <div class="form-group">
                            <label for="example-nf-email">Email</label>
                            <input type="email" id="example-nf-email" name="example-nf-email" class="form-control">
                            <span class="help-block">Please enter your email</span>
                        </div>
                        <div class="form-group">
                            <label for="example-nf-password">Password</label>
                            <input type="password" id="example-nf-password" name="example-nf-password" class="form-control">
                            <span class="help-block">Please enter your password</span>
                        </div>
                        <div class="form-group form-actions">
                            <button type="submit" class="btn btn-effect-ripple btn-primary">Submit</button>
                            <button type="reset" class="btn btn-effect-ripple btn-danger">Reset</button>
                        </div>
                    </form>
                </div>
                <!-- END Labels on top Form -->

                <!-- Input States -->
                <div class="site-block">
                    <h3 class="push-bit"><strong>Input States</strong></h3>
                    <form action="ui.php" method="post" onsubmit="return false;">
                        <div class="form-group">
                            <label for="state-normal">Normal</label>
                            <input type="text" id="state-normal" name="state-normal" class="form-control" placeholder="...">
                        </div>
                        <div class="form-group has-success">
                            <label for="state-success">Success</label>
                            <input type="text" id="state-success" name="state-success" class="form-control" placeholder="...">
                        </div>
                        <div class="form-group has-warning">
                            <label for="state-warning">Warning</label>
                            <input type="text" id="state-warning" name="state-warning" class="form-control" placeholder="...">
                        </div>
                        <div class="form-group has-error">
                            <label for="state-danger">Danger</label>
                            <input type="text" id="state-danger" name="state-danger" class="form-control" placeholder="...">
                        </div>
                    </form>
                </div>
                <!-- END Input States -->

                <!-- Input Sizes -->
                <div class="site-block">
                    <h3 class="push-bit"><strong>Input Sizes</strong></h3>
                    <form action="ui.php" method="post" onsubmit="return false;">
                        <div class="form-group">
                            <label for="example-input-small">Small</label>
                            <input type="text" id="example-input-small" name="example-input-small" class="form-control input-sm" placeholder=".input-sm">
                        </div>
                        <div class="form-group">
                            <label for="example-input-normal">Normal</label>
                            <input type="text" id="example-input-normal" name="example-input-normal" class="form-control" placeholder="Normal">
                        </div>
                        <div class="form-group">
                            <label for="example-input-large">Large</label>
                            <input type="text" id="example-input-large" name="example-input-large" class="form-control input-lg" placeholder=".input-lg">
                        </div>
                    </form>
                </div>
                <!-- END Input Sizes -->

                <!-- CSS Switches -->
                <div class="site-block">
                    <h3 class="push-bit"><strong>CSS Switches &amp; CSS Checkboxes</strong></h3>
                    <form action="ui.php" method="post" onsubmit="return false;">
                        <div class="form-group">
                            <label class="switch switch-default"><input type="checkbox"><span></span></label>
                            <label class="switch switch-warning"><input type="checkbox"><span></span></label>
                            <label class="switch switch-danger"><input type="checkbox"><span></span></label>
                            <label class="switch switch-info"><input type="checkbox"><span></span></label>
                            <label class="switch switch-success"><input type="checkbox"><span></span></label>
                            <label class="switch switch-primary"><input type="checkbox"><span></span></label>
                        </div>
                        <div class="form-group">
                            <label class="switch switch-default"><input type="checkbox" checked><span></span></label>
                            <label class="switch switch-warning"><input type="checkbox" checked><span></span></label>
                            <label class="switch switch-danger"><input type="checkbox" checked><span></span></label>
                            <label class="switch switch-info"><input type="checkbox" checked><span></span></label>
                            <label class="switch switch-success"><input type="checkbox" checked><span></span></label>
                            <label class="switch switch-primary"><input type="checkbox" checked><span></span></label>
                        </div>
                        <div class="form-group">
                            <label class="csscheckbox csscheckbox-default"><input type="checkbox"><span></span></label>
                            <label class="csscheckbox csscheckbox-warning"><input type="checkbox"><span></span></label>
                            <label class="csscheckbox csscheckbox-danger"><input type="checkbox"><span></span></label>
                            <label class="csscheckbox csscheckbox-info"><input type="checkbox"><span></span></label>
                            <label class="csscheckbox csscheckbox-success"><input type="checkbox"><span></span></label>
                            <label class="csscheckbox csscheckbox-primary"><input type="checkbox"><span></span></label>
                        </div>
                        <div class="form-group">
                            <label class="csscheckbox csscheckbox-default"><input type="checkbox" checked><span></span></label>
                            <label class="csscheckbox csscheckbox-warning"><input type="checkbox" checked><span></span></label>
                            <label class="csscheckbox csscheckbox-danger"><input type="checkbox" checked><span></span></label>
                            <label class="csscheckbox csscheckbox-info"><input type="checkbox" checked><span></span></label>
                            <label class="csscheckbox csscheckbox-success"><input type="checkbox" checked><span></span></label>
                            <label class="csscheckbox csscheckbox-primary"><input type="checkbox" checked><span></span></label>
                        </div>
                    </form>
                </div>
                <!-- END CSS Switches -->
            </div>
        </div>
        <!-- END Forms Row -->
    </div>
</section>
<!-- END Forms Content -->

<!-- Navigation Title -->
<section class="site-content site-section-mini themed-background-muted border-top border-bottom">
    <div class="container">
        <h2 class="site-heading h3 site-block">
            <i class="fa fa-fw fa-chevron-right"></i> <strong>Navigation</strong>
        </h2>
    </div>
</section>
<!-- END Navigation Title -->

<!-- Navigation Content -->
<section class="site-content site-section">
    <div class="container">
        <!-- Navigation Row -->
        <div class="row">
            <div class="col-md-6 col-md-offset-3">
                <!-- Tabs -->
                <div class="site-block">
                    <h3 class="push-bit"><strong>Tabs</strong></h3>
                    <ul class="nav nav-tabs push-bit" data-toggle="tabs">
                        <li class="active"><a href="#tabs-home">Home</a></li>
                        <li><a href="#tabs-profile">Profile</a></li>
                        <li><a href="#tabs-settings" data-toggle="tooltip" title="Settings"><i class="gi gi-settings"></i></a></li>
                    </ul>
                    <div class="tab-content">
                        <div class="tab-pane active" id="tabs-home">Home..</div>
                        <div class="tab-pane" id="tabs-profile">Profile..</div>
                        <div class="tab-pane" id="tabs-settings">Settings..</div>
                    </div>
                </div>
                <!-- END Tabs -->

                <!-- Pagination -->
                <div class="site-block">
                    <h3 class="push-bit"><strong>Pagination</strong></h3>
                    <div>
                        <ul class="pagination pagination-sm">
                            <li><a href="javascript:void(0)"><i class="fa fa-chevron-left"></i></a></li>
                            <li><a href="javascript:void(0)">1</a></li>
                            <li class="active"><a href="javascript:void(0)">2</a></li>
                            <li><a href="javascript:void(0)">3</a></li>
                            <li><a href="javascript:void(0)"><i class="fa fa-chevron-right"></i></a></li>
                        </ul>
                    </div>
                    <div>
                        <ul class="pagination">
                            <li><a href="javascript:void(0)"><i class="fa fa-chevron-left"></i></a></li>
                            <li><a href="javascript:void(0)">1</a></li>
                            <li class="active"><a href="javascript:void(0)">2</a></li>
                            <li><a href="javascript:void(0)">3</a></li>
                            <li><a href="javascript:void(0)"><i class="fa fa-chevron-right"></i></a></li>
                        </ul>
                    </div>
                    <div>
                        <ul class="pagination pagination-lg">
                            <li><a href="javascript:void(0)"><i class="fa fa-chevron-left"></i></a></li>
                            <li><a href="javascript:void(0)">1</a></li>
                            <li class="active"><a href="javascript:void(0)">2</a></li>
                            <li><a href="javascript:void(0)">3</a></li>
                            <li><a href="javascript:void(0)"><i class="fa fa-chevron-right"></i></a></li>
                        </ul>
                    </div>
                </div>
                <!-- END Pagination -->

                <!-- List Group -->
                <div class="site-block">
                    <h3 class="push-bit"><strong>List Group</strong></h3>
                    <div class="list-group remove-margin">
                        <a href="javascript:void(0)" class="list-group-item active">
                            <span class="badge"><i class="fa fa-fw fa-inbox"></i></span>
                            <h4 class="list-group-item-heading"><strong>Inbox</strong></h4>
                            <p class="list-group-item-text">Your new messages</p>
                        </a>
                        <a href="javascript:void(0)" class="list-group-item">
                            <span class="badge"><i class="fa fa-fw fa-send"></i></span>
                            <h4 class="list-group-item-heading"><strong>Sent</strong></h4>
                            <p class="list-group-item-text">Everything you've sent it's here</p>
                        </a>
                        <a href="javascript:void(0)" class="list-group-item">
                            <span class="badge"><i class="fa fa-fw fa-archive"></i></span>
                            <h4 class="list-group-item-heading"><strong>Archive</strong></h4>
                            <p class="list-group-item-text">All your archived messages</p>
                        </a>
                        <a href="javascript:void(0)" class="list-group-item">
                            <span class="badge"><i class="fa fa-fw fa-trash-o"></i></span>
                            <h4 class="list-group-item-heading"><strong>Trash</strong></h4>
                            <p class="list-group-item-text">All your deleted messages</p>
                        </a>
                    </div>
                </div>
                <!-- END List Group -->
            </div>
        </div>
        <!-- END Navigation Row -->
    </div>
</section>
<!-- END Navigation Content -->

<!-- Popovers, Tooltips and Modals Title -->
<section class="site-content site-section-mini themed-background-muted border-top border-bottom">
    <div class="container">
        <h2 class="site-heading h3 site-block">
            <i class="fa fa-fw fa-chevron-right"></i> <strong>Popovers, Tooltips and Modals</strong>
        </h2>
    </div>
</section>
<!-- END Popovers, Tooltips and Modals Title -->

<!-- Popovers, Tooltips and Modals Content -->
<section class="site-content site-section">
    <div class="container">
        <!-- Popovers, Tooltips and Modals Row -->
        <div class="row">
            <div class="col-md-4 site-block">
                <!-- Popovers, you can also use the class 'enable-popover' instead of data-toggle attribute -->
                <h3 class="push-bit"><strong>Popovers</strong></h3>
                <button class="btn btn-effect-ripple btn-default" data-toggle="popover" data-content="Content.." title="Title">Popover</button>
                <button class="btn btn-effect-ripple btn-primary" data-toggle="popover" data-content="Content.." data-placement="top" title="Title"><i class="fa fa-chevron-up fa-fw"></i></button>
                <button class="btn btn-effect-ripple btn-primary" data-toggle="popover" data-content="Content.." data-placement="right" title="Title"><i class="fa fa-chevron-right fa-fw"></i></button>
                <button class="btn btn-effect-ripple btn-primary" data-toggle="popover" data-content="Content.." data-placement="bottom" title="Title"><i class="fa fa-chevron-down fa-fw"></i></button>
                <button class="btn btn-effect-ripple btn-primary" data-toggle="popover" data-content="Content.." data-placement="left" title="Title"><i class="fa fa-chevron-left fa-fw"></i></button>
            </div>
            <div class="col-md-4 site-block">
                <!-- Tooltips, you can also use the class 'enable-tooltip' instead of data-toggle attribute -->
                <h3 class="push-bit"><strong>Tooltips</strong></h3>
                <a href="javascript:void(0)" class="btn btn-effect-ripple btn-default" data-toggle="tooltip" title="Tooltip">Tooltip</a>
                <a href="javascript:void(0)" class="btn btn-effect-ripple btn-primary" data-toggle="tooltip" data-placement="top" title="Top Tooltip"><i class="fa fa-chevron-up fa-fw"></i></a>
                <a href="javascript:void(0)" class="btn btn-effect-ripple btn-primary" data-toggle="tooltip" data-placement="right" title="Right Tooltip"><i class="fa fa-chevron-right fa-fw"></i></a>
                <a href="javascript:void(0)" class="btn btn-effect-ripple btn-primary" data-toggle="tooltip" data-placement="bottom" title="Bottom Tooltip"><i class="fa fa-chevron-down fa-fw"></i></a>
                <a href="javascript:void(0)" class="btn btn-effect-ripple btn-primary" data-toggle="tooltip" data-placement="left" title="Left Tooltip"><i class="fa fa-chevron-left fa-fw"></i></a>
            </div>
            <div class="col-md-4 site-block">
                <!-- For advanced modal usage you can check out http://getbootstrap.com/javascript/#modals -->
                <h3 class="push-bit"><strong>Modals</strong></h3>
                <a href="#modal-regular" class="btn btn-effect-ripple btn-default" data-toggle="modal">Modal</a>
                <a href="#modal-small" class="btn btn-effect-ripple btn-primary" data-toggle="modal">Small</a>
                <a href="#modal-large" class="btn btn-effect-ripple btn-primary" data-toggle="modal">Large</a>
                <a href="#modal-fade" class="btn btn-effect-ripple btn-danger" data-toggle="modal">Fade In</a>
                <a href="#modal-tabs" class="btn btn-effect-ripple btn-warning" data-toggle="modal">Tabs</a>

                <!-- Regular Modal -->
                <div id="modal-regular" class="modal" tabindex="-1" role="dialog" aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                <h3 class="modal-title"><strong>Modal</strong></h3>
                            </div>
                            <div class="modal-body">
                                Content..
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-effect-ripple btn-primary">Save</button>
                                <button type="button" class="btn btn-effect-ripple btn-danger" data-dismiss="modal">Close</button>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- END Regular Modal -->

                <!-- Small Modal -->
                <div id="modal-small" class="modal" tabindex="-1" role="dialog" aria-hidden="true">
                    <div class="modal-dialog modal-sm">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                <h3 class="modal-title"><strong>Small Modal</strong></h3>
                            </div>
                            <div class="modal-body">
                                Content..
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-effect-ripple btn-primary">Save</button>
                                <button type="button" class="btn btn-effect-ripple btn-danger" data-dismiss="modal">Close</button>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- END Small Modal -->

                <!-- Large Modal -->
                <div id="modal-large" class="modal" tabindex="-1" role="dialog" aria-hidden="true">
                    <div class="modal-dialog modal-lg">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                <h3 class="modal-title"><strong>Large Modal</strong></h3>
                            </div>
                            <div class="modal-body">
                                Content..
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-effect-ripple btn-primary">Save</button>
                                <button type="button" class="btn btn-effect-ripple btn-danger" data-dismiss="modal">Close</button>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- END Large Modal -->

                <!-- Regular Fade -->
                <div id="modal-fade" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                <h3 class="modal-title"><strong>Modal</strong></h3>
                            </div>
                            <div class="modal-body">
                                Content..
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-effect-ripple btn-primary">Save</button>
                                <button type="button" class="btn btn-effect-ripple btn-danger" data-dismiss="modal">Close</button>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- END Regular Fade -->

                <!-- Regular Tabs -->
                <div id="modal-tabs" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header-tabs">
                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                <ul class="nav nav-tabs" data-toggle="tabs">
                                    <li class="active"><a href="#modal-tabs-home"><i class="fa fa-home"></i> Home</a></li>
                                    <li><a href="#modal-tabs-settings" data-toggle="tooltip" title="Settings"><i class="gi gi-settings"></i> Settings</a></li>
                                </ul>
                            </div>
                            <div class="modal-body">
                                <div class="tab-content">
                                    <div class="tab-pane active" id="modal-tabs-home">Home..</div>
                                    <div class="tab-pane" id="modal-tabs-settings">Settings..</div>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-effect-ripple btn-primary">Save</button>
                                <button type="button" class="btn btn-effect-ripple btn-danger" data-dismiss="modal">Close</button>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- END Regular Tabs -->
            </div>
        </div>
        <!-- END Popovers, Tooltips and Modals Row -->
    </div>
</section>
<!-- END Popovers, Tooltips and Modals Content -->

<?php include 'inc/page_footer.php'; ?>
<?php include 'inc/template_scripts.php'; ?>
<?php include 'inc/template_end.php'; ?>