Subversion Repositories Integrator Subversion

Rev

Details | Last modification | View Log | RSS feed

Rev Author Line No. Line
1 espaco 1
<!DOCTYPE html>
2
<!-- 
3
Template Name: Metronic - Responsive Admin Dashboard Template build with Twitter Bootstrap 3.3.2
4
Version: 3.6.2
5
Author: KeenThemes
6
Website: http://www.keenthemes.com/
7
Contact: support@keenthemes.com
8
Follow: www.twitter.com/keenthemes
9
Like: www.facebook.com/keenthemes
10
Purchase: http://themeforest.net/item/metronic-responsive-admin-dashboard-template/4021469?ref=keenthemes
11
License: You must have a valid license purchased only from themeforest(the above link) in order to legally use the theme for your project.
12
-->
13
<!--[if IE 8]> <html lang="en" class="ie8 no-js"> <![endif]-->
14
<!--[if IE 9]> <html lang="en" class="ie9 no-js"> <![endif]-->
15
<!--[if !IE]><!-->
16
<html lang="en">
17
<!--<![endif]-->
18
<!-- BEGIN HEAD -->
19
<head>
20
<meta charset="utf-8"/>
21
<title>Metronic | UI Features - General Components</title>
22
<meta http-equiv="X-UA-Compatible" content="IE=edge">
23
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
24
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
25
<meta content="" name="description"/>
26
<meta content="" name="author"/>
27
<!-- BEGIN GLOBAL MANDATORY STYLES -->
28
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700&subset=all" rel="stylesheet" type="text/css">
29
<link href="../../assets/global/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
30
<link href="../../assets/global/plugins/simple-line-icons/simple-line-icons.min.css" rel="stylesheet" type="text/css">
31
<link href="../../assets/global/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css">
32
<link href="../../assets/global/plugins/uniform/css/uniform.default.css" rel="stylesheet" type="text/css">
33
<link href="../../assets/global/plugins/bootstrap-switch/css/bootstrap-switch.min.css" rel="stylesheet" type="text/css"/>
34
<!-- END GLOBAL MANDATORY STYLES -->
35
<!-- BEGIN THEME STYLES -->
36
<link href="../../assets/global/css/components.css" id="style_components" rel="stylesheet" type="text/css"/>
37
<link href="../../assets/global/css/plugins.css" rel="stylesheet" type="text/css"/>
38
<link href="../../assets/admin/layout2/css/layout.css" rel="stylesheet" type="text/css"/>
39
<link id="style_color" href="../../assets/admin/layout2/css/themes/grey.css" rel="stylesheet" type="text/css"/>
40
<link href="../../assets/admin/layout2/css/custom.css" rel="stylesheet" type="text/css"/>
41
<!-- END THEME STYLES -->
42
<link rel="shortcut icon" href="favicon.ico"/>
43
</head>
44
<!-- END HEAD -->
45
<!-- BEGIN BODY -->
46
<!-- DOC: Apply "page-header-fixed-mobile" and "page-footer-fixed-mobile" class to body element to force fixed header or footer in mobile devices -->
47
<!-- DOC: Apply "page-sidebar-closed" class to the body and "page-sidebar-menu-closed" class to the sidebar menu element to hide the sidebar by default -->
48
<!-- DOC: Apply "page-sidebar-hide" class to the body to make the sidebar completely hidden on toggle -->
49
<!-- DOC: Apply "page-sidebar-closed-hide-logo" class to the body element to make the logo hidden on sidebar toggle -->
50
<!-- DOC: Apply "page-sidebar-hide" class to body element to completely hide the sidebar on sidebar toggle -->
51
<!-- DOC: Apply "page-sidebar-fixed" class to have fixed sidebar -->
52
<!-- DOC: Apply "page-footer-fixed" class to the body element to have fixed footer -->
53
<!-- DOC: Apply "page-sidebar-reversed" class to put the sidebar on the right side -->
54
<!-- DOC: Apply "page-full-width" class to the body element to have full width page without the sidebar menu -->
55
<body class="page-boxed page-header-fixed page-container-bg-solid page-sidebar-closed-hide-logo ">
56
<!-- BEGIN HEADER -->
57
<div class="page-header navbar navbar-fixed-top">
58
        <!-- BEGIN HEADER INNER -->
59
        <div class="page-header-inner container">
60
                <!-- BEGIN LOGO -->
61
                <div class="page-logo">
62
                        <a href="index.html">
63
                        <img src="../../assets/admin/layout2/img/logo-default.png" alt="logo" class="logo-default"/>
64
                        </a>
65
                        <div class="menu-toggler sidebar-toggler">
66
                                <!-- DOC: Remove the above "hide" to enable the sidebar toggler button on header -->
67
                        </div>
68
                </div>
69
                <!-- END LOGO -->
70
                <!-- BEGIN RESPONSIVE MENU TOGGLER -->
71
                <a href="javascript:;" class="menu-toggler responsive-toggler" data-toggle="collapse" data-target=".navbar-collapse">
72
                </a>
73
                <!-- END RESPONSIVE MENU TOGGLER -->
74
                <!-- BEGIN PAGE ACTIONS -->
75
                <!-- DOC: Remove "hide" class to enable the page header actions -->
76
                <div class="page-actions">
77
                        <div class="btn-group hide">
78
                                <button type="button" class="btn btn-circle red-pink dropdown-toggle" data-toggle="dropdown">
79
                                <i class="icon-bar-chart"></i>&nbsp;<span class="hidden-sm hidden-xs">New&nbsp;</span>&nbsp;<i class="fa fa-angle-down"></i>
80
                                </button>
81
                                <ul class="dropdown-menu" role="menu">
82
                                        <li>
83
                                                <a href="#">
84
                                                <i class="icon-user"></i> New User </a>
85
                                        </li>
86
                                        <li>
87
                                                <a href="#">
88
                                                <i class="icon-present"></i> New Event <span class="badge badge-success">4</span>
89
                                                </a>
90
                                        </li>
91
                                        <li>
92
                                                <a href="#">
93
                                                <i class="icon-basket"></i> New order </a>
94
                                        </li>
95
                                        <li class="divider">
96
                                        </li>
97
                                        <li>
98
                                                <a href="#">
99
                                                <i class="icon-flag"></i> Pending Orders <span class="badge badge-danger">4</span>
100
                                                </a>
101
                                        </li>
102
                                        <li>
103
                                                <a href="#">
104
                                                <i class="icon-users"></i> Pending Users <span class="badge badge-warning">12</span>
105
                                                </a>
106
                                        </li>
107
                                </ul>
108
                        </div>
109
                        <div class="btn-group">
110
                                <button type="button" class="btn btn-circle green-haze dropdown-toggle" data-toggle="dropdown">
111
                                <i class="icon-bell"></i>&nbsp;<span class="hidden-sm hidden-xs">Post&nbsp;</span>&nbsp;<i class="fa fa-angle-down"></i>
112
                                </button>
113
                                <ul class="dropdown-menu" role="menu">
114
                                        <li>
115
                                                <a href="#">
116
                                                <i class="icon-docs"></i> New Post </a>
117
                                        </li>
118
                                        <li>
119
                                                <a href="#">
120
                                                <i class="icon-tag"></i> New Comment </a>
121
                                        </li>
122
                                        <li>
123
                                                <a href="#">
124
                                                <i class="icon-share"></i> Share </a>
125
                                        </li>
126
                                        <li class="divider">
127
                                        </li>
128
                                        <li>
129
                                                <a href="#">
130
                                                <i class="icon-flag"></i> Comments <span class="badge badge-success">4</span>
131
                                                </a>
132
                                        </li>
133
                                        <li>
134
                                                <a href="#">
135
                                                <i class="icon-users"></i> Feedbacks <span class="badge badge-danger">2</span>
136
                                                </a>
137
                                        </li>
138
                                </ul>
139
                        </div>
140
                </div>
141
                <!-- END PAGE ACTIONS -->
142
                <!-- BEGIN PAGE TOP -->
143
                <div class="page-top">
144
                        <!-- BEGIN HEADER SEARCH BOX -->
145
                        <!-- DOC: Apply "search-form-expanded" right after the "search-form" class to have half expanded search box -->
146
                        <form class="search-form search-form-expanded" action="extra_search.html" method="GET">
147
                                <div class="input-group">
148
                                        <input type="text" class="form-control" placeholder="Search..." name="query">
149
                                        <span class="input-group-btn">
150
                                        <a href="javascript:;" class="btn submit"><i class="icon-magnifier"></i></a>
151
                                        </span>
152
                                </div>
153
                        </form>
154
                        <!-- END HEADER SEARCH BOX -->
155
                        <!-- BEGIN TOP NAVIGATION MENU -->
156
                        <div class="top-menu">
157
                                <ul class="nav navbar-nav pull-right">
158
                                        <!-- BEGIN NOTIFICATION DROPDOWN -->
159
                                        <!-- DOC: Apply "dropdown-dark" class after below "dropdown-extended" to change the dropdown styte -->
160
                                        <li class="dropdown dropdown-extended dropdown-notification" id="header_notification_bar">
161
                                                <a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-close-others="true">
162
                                                <i class="icon-bell"></i>
163
                                                <span class="badge badge-default">
164
                                                7 </span>
165
                                                </a>
166
                                                <ul class="dropdown-menu">
167
                                                        <li class="external">
168
                                                                <h3><span class="bold">12 pending</span> notifications</h3>
169
                                                                <a href="extra_profile.html">view all</a>
170
                                                        </li>
171
                                                        <li>
172
                                                                <ul class="dropdown-menu-list scroller" style="height: 250px;" data-handle-color="#637283">
173
                                                                        <li>
174
                                                                                <a href="javascript:;">
175
                                                                                <span class="time">just now</span>
176
                                                                                <span class="details">
177
                                                                                <span class="label label-sm label-icon label-success">
178
                                                                                <i class="fa fa-plus"></i>
179
                                                                                </span>
180
                                                                                New user registered. </span>
181
                                                                                </a>
182
                                                                        </li>
183
                                                                        <li>
184
                                                                                <a href="javascript:;">
185
                                                                                <span class="time">3 mins</span>
186
                                                                                <span class="details">
187
                                                                                <span class="label label-sm label-icon label-danger">
188
                                                                                <i class="fa fa-bolt"></i>
189
                                                                                </span>
190
                                                                                Server #12 overloaded. </span>
191
                                                                                </a>
192
                                                                        </li>
193
                                                                        <li>
194
                                                                                <a href="javascript:;">
195
                                                                                <span class="time">10 mins</span>
196
                                                                                <span class="details">
197
                                                                                <span class="label label-sm label-icon label-warning">
198
                                                                                <i class="fa fa-bell-o"></i>
199
                                                                                </span>
200
                                                                                Server #2 not responding. </span>
201
                                                                                </a>
202
                                                                        </li>
203
                                                                        <li>
204
                                                                                <a href="javascript:;">
205
                                                                                <span class="time">14 hrs</span>
206
                                                                                <span class="details">
207
                                                                                <span class="label label-sm label-icon label-info">
208
                                                                                <i class="fa fa-bullhorn"></i>
209
                                                                                </span>
210
                                                                                Application error. </span>
211
                                                                                </a>
212
                                                                        </li>
213
                                                                        <li>
214
                                                                                <a href="javascript:;">
215
                                                                                <span class="time">2 days</span>
216
                                                                                <span class="details">
217
                                                                                <span class="label label-sm label-icon label-danger">
218
                                                                                <i class="fa fa-bolt"></i>
219
                                                                                </span>
220
                                                                                Database overloaded 68%. </span>
221
                                                                                </a>
222
                                                                        </li>
223
                                                                        <li>
224
                                                                                <a href="javascript:;">
225
                                                                                <span class="time">3 days</span>
226
                                                                                <span class="details">
227
                                                                                <span class="label label-sm label-icon label-danger">
228
                                                                                <i class="fa fa-bolt"></i>
229
                                                                                </span>
230
                                                                                A user IP blocked. </span>
231
                                                                                </a>
232
                                                                        </li>
233
                                                                        <li>
234
                                                                                <a href="javascript:;">
235
                                                                                <span class="time">4 days</span>
236
                                                                                <span class="details">
237
                                                                                <span class="label label-sm label-icon label-warning">
238
                                                                                <i class="fa fa-bell-o"></i>
239
                                                                                </span>
240
                                                                                Storage Server #4 not responding dfdfdfd. </span>
241
                                                                                </a>
242
                                                                        </li>
243
                                                                        <li>
244
                                                                                <a href="javascript:;">
245
                                                                                <span class="time">5 days</span>
246
                                                                                <span class="details">
247
                                                                                <span class="label label-sm label-icon label-info">
248
                                                                                <i class="fa fa-bullhorn"></i>
249
                                                                                </span>
250
                                                                                System Error. </span>
251
                                                                                </a>
252
                                                                        </li>
253
                                                                        <li>
254
                                                                                <a href="javascript:;">
255
                                                                                <span class="time">9 days</span>
256
                                                                                <span class="details">
257
                                                                                <span class="label label-sm label-icon label-danger">
258
                                                                                <i class="fa fa-bolt"></i>
259
                                                                                </span>
260
                                                                                Storage server failed. </span>
261
                                                                                </a>
262
                                                                        </li>
263
                                                                </ul>
264
                                                        </li>
265
                                                </ul>
266
                                        </li>
267
                                        <!-- END NOTIFICATION DROPDOWN -->
268
                                        <!-- BEGIN INBOX DROPDOWN -->
269
                                        <!-- DOC: Apply "dropdown-dark" class after below "dropdown-extended" to change the dropdown styte -->
270
                                        <li class="dropdown dropdown-extended dropdown-inbox" id="header_inbox_bar">
271
                                                <a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-close-others="true">
272
                                                <i class="icon-envelope-open"></i>
273
                                                <span class="badge badge-default">
274
                                                4 </span>
275
                                                </a>
276
                                                <ul class="dropdown-menu">
277
                                                        <li class="external">
278
                                                                <h3>You have <span class="bold">7 New</span> Messages</h3>
279
                                                                <a href="page_inbox.html">view all</a>
280
                                                        </li>
281
                                                        <li>
282
                                                                <ul class="dropdown-menu-list scroller" style="height: 275px;" data-handle-color="#637283">
283
                                                                        <li>
284
                                                                                <a href="inbox.html?a=view">
285
                                                                                <span class="photo">
286
                                                                                <img src="../../assets/admin/layout3/img/avatar2.jpg" class="img-circle" alt="">
287
                                                                                </span>
288
                                                                                <span class="subject">
289
                                                                                <span class="from">
290
                                                                                Lisa Wong </span>
291
                                                                                <span class="time">Just Now </span>
292
                                                                                </span>
293
                                                                                <span class="message">
294
                                                                                Vivamus sed auctor nibh congue nibh. auctor nibh auctor nibh... </span>
295
                                                                                </a>
296
                                                                        </li>
297
                                                                        <li>
298
                                                                                <a href="inbox.html?a=view">
299
                                                                                <span class="photo">
300
                                                                                <img src="../../assets/admin/layout3/img/avatar3.jpg" class="img-circle" alt="">
301
                                                                                </span>
302
                                                                                <span class="subject">
303
                                                                                <span class="from">
304
                                                                                Richard Doe </span>
305
                                                                                <span class="time">16 mins </span>
306
                                                                                </span>
307
                                                                                <span class="message">
308
                                                                                Vivamus sed congue nibh auctor nibh congue nibh. auctor nibh auctor nibh... </span>
309
                                                                                </a>
310
                                                                        </li>
311
                                                                        <li>
312
                                                                                <a href="inbox.html?a=view">
313
                                                                                <span class="photo">
314
                                                                                <img src="../../assets/admin/layout3/img/avatar1.jpg" class="img-circle" alt="">
315
                                                                                </span>
316
                                                                                <span class="subject">
317
                                                                                <span class="from">
318
                                                                                Bob Nilson </span>
319
                                                                                <span class="time">2 hrs </span>
320
                                                                                </span>
321
                                                                                <span class="message">
322
                                                                                Vivamus sed nibh auctor nibh congue nibh. auctor nibh auctor nibh... </span>
323
                                                                                </a>
324
                                                                        </li>
325
                                                                        <li>
326
                                                                                <a href="inbox.html?a=view">
327
                                                                                <span class="photo">
328
                                                                                <img src="../../assets/admin/layout3/img/avatar2.jpg" class="img-circle" alt="">
329
                                                                                </span>
330
                                                                                <span class="subject">
331
                                                                                <span class="from">
332
                                                                                Lisa Wong </span>
333
                                                                                <span class="time">40 mins </span>
334
                                                                                </span>
335
                                                                                <span class="message">
336
                                                                                Vivamus sed auctor 40% nibh congue nibh... </span>
337
                                                                                </a>
338
                                                                        </li>
339
                                                                        <li>
340
                                                                                <a href="inbox.html?a=view">
341
                                                                                <span class="photo">
342
                                                                                <img src="../../assets/admin/layout3/img/avatar3.jpg" class="img-circle" alt="">
343
                                                                                </span>
344
                                                                                <span class="subject">
345
                                                                                <span class="from">
346
                                                                                Richard Doe </span>
347
                                                                                <span class="time">46 mins </span>
348
                                                                                </span>
349
                                                                                <span class="message">
350
                                                                                Vivamus sed congue nibh auctor nibh congue nibh. auctor nibh auctor nibh... </span>
351
                                                                                </a>
352
                                                                        </li>
353
                                                                </ul>
354
                                                        </li>
355
                                                </ul>
356
                                        </li>
357
                                        <!-- END INBOX DROPDOWN -->
358
                                        <!-- BEGIN TODO DROPDOWN -->
359
                                        <!-- DOC: Apply "dropdown-dark" class after below "dropdown-extended" to change the dropdown styte -->
360
                                        <li class="dropdown dropdown-extended dropdown-tasks" id="header_task_bar">
361
                                                <a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-close-others="true">
362
                                                <i class="icon-calendar"></i>
363
                                                <span class="badge badge-default">
364
                                                3 </span>
365
                                                </a>
366
                                                <ul class="dropdown-menu extended tasks">
367
                                                        <li class="external">
368
                                                                <h3>You have <span class="bold">12 pending</span> tasks</h3>
369
                                                                <a href="page_todo.html">view all</a>
370
                                                        </li>
371
                                                        <li>
372
                                                                <ul class="dropdown-menu-list scroller" style="height: 275px;" data-handle-color="#637283">
373
                                                                        <li>
374
                                                                                <a href="javascript:;">
375
                                                                                <span class="task">
376
                                                                                <span class="desc">New release v1.2 </span>
377
                                                                                <span class="percent">30%</span>
378
                                                                                </span>
379
                                                                                <span class="progress">
380
                                                                                <span style="width: 40%;" class="progress-bar progress-bar-success" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"><span class="sr-only">40% Complete</span></span>
381
                                                                                </span>
382
                                                                                </a>
383
                                                                        </li>
384
                                                                        <li>
385
                                                                                <a href="javascript:;">
386
                                                                                <span class="task">
387
                                                                                <span class="desc">Application deployment</span>
388
                                                                                <span class="percent">65%</span>
389
                                                                                </span>
390
                                                                                <span class="progress">
391
                                                                                <span style="width: 65%;" class="progress-bar progress-bar-danger" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100"><span class="sr-only">65% Complete</span></span>
392
                                                                                </span>
393
                                                                                </a>
394
                                                                        </li>
395
                                                                        <li>
396
                                                                                <a href="javascript:;">
397
                                                                                <span class="task">
398
                                                                                <span class="desc">Mobile app release</span>
399
                                                                                <span class="percent">98%</span>
400
                                                                                </span>
401
                                                                                <span class="progress">
402
                                                                                <span style="width: 98%;" class="progress-bar progress-bar-success" aria-valuenow="98" aria-valuemin="0" aria-valuemax="100"><span class="sr-only">98% Complete</span></span>
403
                                                                                </span>
404
                                                                                </a>
405
                                                                        </li>
406
                                                                        <li>
407
                                                                                <a href="javascript:;">
408
                                                                                <span class="task">
409
                                                                                <span class="desc">Database migration</span>
410
                                                                                <span class="percent">10%</span>
411
                                                                                </span>
412
                                                                                <span class="progress">
413
                                                                                <span style="width: 10%;" class="progress-bar progress-bar-warning" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"><span class="sr-only">10% Complete</span></span>
414
                                                                                </span>
415
                                                                                </a>
416
                                                                        </li>
417
                                                                        <li>
418
                                                                                <a href="javascript:;">
419
                                                                                <span class="task">
420
                                                                                <span class="desc">Web server upgrade</span>
421
                                                                                <span class="percent">58%</span>
422
                                                                                </span>
423
                                                                                <span class="progress">
424
                                                                                <span style="width: 58%;" class="progress-bar progress-bar-info" aria-valuenow="58" aria-valuemin="0" aria-valuemax="100"><span class="sr-only">58% Complete</span></span>
425
                                                                                </span>
426
                                                                                </a>
427
                                                                        </li>
428
                                                                        <li>
429
                                                                                <a href="javascript:;">
430
                                                                                <span class="task">
431
                                                                                <span class="desc">Mobile development</span>
432
                                                                                <span class="percent">85%</span>
433
                                                                                </span>
434
                                                                                <span class="progress">
435
                                                                                <span style="width: 85%;" class="progress-bar progress-bar-success" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100"><span class="sr-only">85% Complete</span></span>
436
                                                                                </span>
437
                                                                                </a>
438
                                                                        </li>
439
                                                                        <li>
440
                                                                                <a href="javascript:;">
441
                                                                                <span class="task">
442
                                                                                <span class="desc">New UI release</span>
443
                                                                                <span class="percent">38%</span>
444
                                                                                </span>
445
                                                                                <span class="progress progress-striped">
446
                                                                                <span style="width: 38%;" class="progress-bar progress-bar-important" aria-valuenow="18" aria-valuemin="0" aria-valuemax="100"><span class="sr-only">38% Complete</span></span>
447
                                                                                </span>
448
                                                                                </a>
449
                                                                        </li>
450
                                                                </ul>
451
                                                        </li>
452
                                                </ul>
453
                                        </li>
454
                                        <!-- END TODO DROPDOWN -->
455
                                        <!-- BEGIN USER LOGIN DROPDOWN -->
456
                                        <!-- DOC: Apply "dropdown-dark" class after below "dropdown-extended" to change the dropdown styte -->
457
                                        <li class="dropdown dropdown-user">
458
                                                <a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-close-others="true">
459
                                                <img alt="" class="img-circle" src="../../assets/admin/layout2/img/avatar3_small.jpg"/>
460
                                                <span class="username username-hide-on-mobile">
461
                                                Nick </span>
462
                                                <i class="fa fa-angle-down"></i>
463
                                                </a>
464
                                                <ul class="dropdown-menu dropdown-menu-default">
465
                                                        <li>
466
                                                                <a href="extra_profile.html">
467
                                                                <i class="icon-user"></i> My Profile </a>
468
                                                        </li>
469
                                                        <li>
470
                                                                <a href="page_calendar.html">
471
                                                                <i class="icon-calendar"></i> My Calendar </a>
472
                                                        </li>
473
                                                        <li>
474
                                                                <a href="inbox.html">
475
                                                                <i class="icon-envelope-open"></i> My Inbox <span class="badge badge-danger">
476
                                                                3 </span>
477
                                                                </a>
478
                                                        </li>
479
                                                        <li>
480
                                                                <a href="page_todo.html">
481
                                                                <i class="icon-rocket"></i> My Tasks <span class="badge badge-success">
482
                                                                7 </span>
483
                                                                </a>
484
                                                        </li>
485
                                                        <li class="divider">
486
                                                        </li>
487
                                                        <li>
488
                                                                <a href="extra_lock.html">
489
                                                                <i class="icon-lock"></i> Lock Screen </a>
490
                                                        </li>
491
                                                        <li>
492
                                                                <a href="login.html">
493
                                                                <i class="icon-key"></i> Log Out </a>
494
                                                        </li>
495
                                                </ul>
496
                                        </li>
497
                                        <!-- END USER LOGIN DROPDOWN -->
498
                                </ul>
499
                        </div>
500
                        <!-- END TOP NAVIGATION MENU -->
501
                </div>
502
                <!-- END PAGE TOP -->
503
        </div>
504
        <!-- END HEADER INNER -->
505
</div>
506
<!-- END HEADER -->
507
<div class="clearfix">
508
</div>
509
<div class="container">
510
        <!-- BEGIN CONTAINER -->
511
        <div class="page-container">
512
                <!-- BEGIN SIDEBAR -->
513
                <div class="page-sidebar-wrapper">
514
                        <!-- DOC: Set data-auto-scroll="false" to disable the sidebar from auto scrolling/focusing -->
515
                        <!-- DOC: Change data-auto-speed="200" to adjust the sub menu slide up/down speed -->
516
                        <div class="page-sidebar navbar-collapse collapse">
517
                                <!-- BEGIN SIDEBAR MENU -->
518
                                <!-- DOC: Apply "page-sidebar-menu-light" class right after "page-sidebar-menu" to enable light sidebar menu style(without borders) -->
519
                                <!-- DOC: Apply "page-sidebar-menu-hover-submenu" class right after "page-sidebar-menu" to enable hoverable(hover vs accordion) sub menu mode -->
520
                                <!-- DOC: Apply "page-sidebar-menu-closed" class right after "page-sidebar-menu" to collapse("page-sidebar-closed" class must be applied to the body element) the sidebar sub menu mode -->
521
                                <!-- DOC: Set data-auto-scroll="false" to disable the sidebar from auto scrolling/focusing -->
522
                                <!-- DOC: Set data-keep-expand="true" to keep the submenues expanded -->
523
                                <!-- DOC: Set data-auto-speed="200" to adjust the sub menu slide up/down speed -->
524
                                <ul class="page-sidebar-menu page-sidebar-menu-hover-submenu " data-keep-expanded="false" data-auto-scroll="true" data-slide-speed="200">
525
                                        <li class="start ">
526
                                                <a href="index.html">
527
                                                <i class="icon-home"></i>
528
                                                <span class="title">Dashboard</span>
529
                                                </a>
530
                                        </li>
531
                                        <li>
532
                                                <a href="javascript:;">
533
                                                <i class="icon-basket"></i>
534
                                                <span class="title">eCommerce</span>
535
                                                <span class="arrow "></span>
536
                                                </a>
537
                                                <ul class="sub-menu">
538
                                                        <li>
539
                                                                <a href="ecommerce_index.html">
540
                                                                <i class="icon-home"></i>
541
                                                                Dashboard</a>
542
                                                        </li>
543
                                                        <li>
544
                                                                <a href="ecommerce_orders.html">
545
                                                                <i class="icon-basket"></i>
546
                                                                Orders</a>
547
                                                        </li>
548
                                                        <li>
549
                                                                <a href="ecommerce_orders_view.html">
550
                                                                <i class="icon-tag"></i>
551
                                                                Order View</a>
552
                                                        </li>
553
                                                        <li>
554
                                                                <a href="ecommerce_products.html">
555
                                                                <i class="icon-handbag"></i>
556
                                                                Products</a>
557
                                                        </li>
558
                                                        <li>
559
                                                                <a href="ecommerce_products_edit.html">
560
                                                                <i class="icon-pencil"></i>
561
                                                                Product Edit</a>
562
                                                        </li>
563
                                                </ul>
564
                                        </li>
565
                                        <li>
566
                                                <a href="javascript:;">
567
                                                <i class="icon-rocket"></i>
568
                                                <span class="title">Page Layouts</span>
569
                                                <span class="arrow "></span>
570
                                                </a>
571
                                                <ul class="sub-menu">
572
                                                        <li>
573
                                                                <a href="layout_fontawesome_icons.html">
574
                                                                <span class="badge badge-roundless badge-danger">new</span>Layout with Fontawesome Icons</a>
575
                                                        </li>
576
                                                        <li>
577
                                                                <a href="layout_glyphicons.html">
578
                                                                Layout with Glyphicon</a>
579
                                                        </li>
580
                                                        <li>
581
                                                                <a href="layout_full_height_content.html">
582
                                                                <span class="badge badge-roundless badge-warning">new</span>Full Height Content</a>
583
                                                        </li>
584
                                                        <li>
585
                                                                <a href="layout_sidebar_reversed.html">
586
                                                                <span class="badge badge-roundless badge-warning">new</span>Right Sidebar Page</a>
587
                                                        </li>
588
                                                        <li>
589
                                                                <a href="layout_sidebar_fixed.html">
590
                                                                Sidebar Fixed Page</a>
591
                                                        </li>
592
                                                        <li>
593
                                                                <a href="layout_sidebar_closed.html">
594
                                                                Sidebar Closed Page</a>
595
                                                        </li>
596
                                                        <li>
597
                                                                <a href="layout_ajax.html">
598
                                                                Content Loading via Ajax</a>
599
                                                        </li>
600
                                                        <li>
601
                                                                <a href="layout_disabled_menu.html">
602
                                                                Disabled Menu Links</a>
603
                                                        </li>
604
                                                        <li>
605
                                                                <a href="layout_blank_page.html">
606
                                                                Blank Page</a>
607
                                                        </li>
608
                                                        <li>
609
                                                                <a href="layout_fluid_page.html">
610
                                                                Fluid Page</a>
611
                                                        </li>
612
                                                        <li>
613
                                                                <a href="layout_language_bar.html">
614
                                                                Language Switch Bar</a>
615
                                                        </li>
616
                                                </ul>
617
                                        </li>
618
                                        <li class="active open">
619
                                                <a href="javascript:;">
620
                                                <i class="icon-diamond"></i>
621
                                                <span class="title">UI Features</span>
622
                                                <span class="selected"></span>
623
                                                <span class="arrow open"></span>
624
                                                </a>
625
                                                <ul class="sub-menu">
626
                                                        <li class="active">
627
                                                                <a href="ui_general.html">
628
                                                                General Components</a>
629
                                                        </li>
630
                                                        <li>
631
                                                                <a href="ui_buttons.html">
632
                                                                Buttons</a>
633
                                                        </li>
634
                                                        <li>
635
                                                                <a href="ui_icons.html">
636
                                                                <span class="badge badge-roundless badge-danger">new</span>Font Icons</a>
637
                                                        </li>
638
                                                        <li>
639
                                                                <a href="ui_colors.html">
640
                                                                Flat UI Colors</a>
641
                                                        </li>
642
                                                        <li>
643
                                                                <a href="ui_typography.html">
644
                                                                Typography</a>
645
                                                        </li>
646
                                                        <li>
647
                                                                <a href="ui_tabs_accordions_navs.html">
648
                                                                Tabs, Accordions & Navs</a>
649
                                                        </li>
650
                                                        <li>
651
                                                                <a href="ui_tree.html">
652
                                                                <span class="badge badge-roundless badge-danger">new</span>Tree View</a>
653
                                                        </li>
654
                                                        <li>
655
                                                                <a href="ui_page_progress_style_1.html">
656
                                                                <span class="badge badge-roundless badge-warning">new</span>Page Progress Bar</a>
657
                                                        </li>
658
                                                        <li>
659
                                                                <a href="ui_blockui.html">
660
                                                                Block UI</a>
661
                                                        </li>
662
                                                        <li>
663
                                                                <a href="ui_notific8.html">
664
                                                                Notific8 Notifications</a>
665
                                                        </li>
666
                                                        <li>
667
                                                                <a href="ui_toastr.html">
668
                                                                Toastr Notifications</a>
669
                                                        </li>
670
                                                        <li>
671
                                                                <a href="ui_alert_dialog_api.html">
672
                                                                <span class="badge badge-roundless badge-danger">new</span>Alerts & Dialogs API</a>
673
                                                        </li>
674
                                                        <li>
675
                                                                <a href="ui_session_timeout.html">
676
                                                                Session Timeout</a>
677
                                                        </li>
678
                                                        <li>
679
                                                                <a href="ui_idle_timeout.html">
680
                                                                User Idle Timeout</a>
681
                                                        </li>
682
                                                        <li>
683
                                                                <a href="ui_modals.html">
684
                                                                Modals</a>
685
                                                        </li>
686
                                                        <li>
687
                                                                <a href="ui_extended_modals.html">
688
                                                                Extended Modals</a>
689
                                                        </li>
690
                                                        <li>
691
                                                                <a href="ui_tiles.html">
692
                                                                Tiles</a>
693
                                                        </li>
694
                                                        <li>
695
                                                                <a href="ui_datepaginator.html">
696
                                                                <span class="badge badge-roundless badge-success">new</span>Date Paginator</a>
697
                                                        </li>
698
                                                        <li>
699
                                                                <a href="ui_nestable.html">
700
                                                                Nestable List</a>
701
                                                        </li>
702
                                                </ul>
703
                                        </li>
704
                                        <li>
705
                                                <a href="javascript:;">
706
                                                <i class="icon-puzzle"></i>
707
                                                <span class="title">UI Components</span>
708
                                                <span class="arrow "></span>
709
                                                </a>
710
                                                <ul class="sub-menu">
711
                                                        <li>
712
                                                                <a href="components_pickers.html">
713
                                                                Date & Time Pickers</a>
714
                                                        </li>
715
                                                        <li>
716
                                                                <a href="components_context_menu.html">
717
                                                                Context Menu</a>
718
                                                        </li>
719
                                                        <li>
720
                                                                <a href="components_dropdowns.html">
721
                                                                Custom Dropdowns</a>
722
                                                        </li>
723
                                                        <li>
724
                                                                <a href="components_form_tools.html">
725
                                                                Form Tools</a>
726
                                                        </li>
727
                                                        <li>
728
                                                                <a href="components_editors.html">
729
                                                                Markdown & WYSIWYG Editors</a>
730
                                                        </li>
731
                                                        <li>
732
                                                                <a href="components_ion_sliders.html">
733
                                                                Ion Range Sliders</a>
734
                                                        </li>
735
                                                        <li>
736
                                                                <a href="components_noui_sliders.html">
737
                                                                NoUI Range Sliders</a>
738
                                                        </li>
739
                                                        <li>
740
                                                                <a href="components_jqueryui_sliders.html">
741
                                                                jQuery UI Sliders</a>
742
                                                        </li>
743
                                                        <li>
744
                                                                <a href="components_knob_dials.html">
745
                                                                Knob Circle Dials</a>
746
                                                        </li>
747
                                                </ul>
748
                                        </li>
749
                                        <!-- BEGIN ANGULARJS LINK -->
750
                                        <li class="tooltips" data-container="body" data-placement="right" data-html="true" data-original-title="AngularJS version demo">
751
                                                <a href="angularjs" target="_blank">
752
                                                <i class="icon-paper-plane"></i>
753
                                                <span class="title">
754
                                                AngularJS Version </span>
755
                                                </a>
756
                                        </li>
757
                                        <!-- END ANGULARJS LINK -->
758
                                        <li>
759
                                                <a href="javascript:;">
760
                                                <i class="icon-settings"></i>
761
                                                <span class="title">Form Stuff</span>
762
                                                <span class="arrow "></span>
763
                                                </a>
764
                                                <ul class="sub-menu">
765
                                                        <li>
766
                                                                <a href="form_controls.html">
767
                                                                Form Controls</a>
768
                                                        </li>
769
                                                        <li>
770
                                                                <a href="form_icheck.html">
771
                                                                iCheck Controls</a>
772
                                                        </li>
773
                                                        <li>
774
                                                                <a href="form_layouts.html">
775
                                                                Form Layouts</a>
776
                                                        </li>
777
                                                        <li>
778
                                                                <a href="form_editable.html">
779
                                                                <span class="badge badge-roundless badge-warning">new</span>Form X-editable</a>
780
                                                        </li>
781
                                                        <li>
782
                                                                <a href="form_wizard.html">
783
                                                                Form Wizard</a>
784
                                                        </li>
785
                                                        <li>
786
                                                                <a href="form_validation.html">
787
                                                                Form Validation</a>
788
                                                        </li>
789
                                                        <li>
790
                                                                <a href="form_image_crop.html">
791
                                                                <span class="badge badge-roundless badge-danger">new</span>Image Cropping</a>
792
                                                        </li>
793
                                                        <li>
794
                                                                <a href="form_fileupload.html">
795
                                                                Multiple File Upload</a>
796
                                                        </li>
797
                                                        <li>
798
                                                                <a href="form_dropzone.html">
799
                                                                Dropzone File Upload</a>
800
                                                        </li>
801
                                                </ul>
802
                                        </li>
803
                                        <li>
804
                                                <a href="javascript:;">
805
                                                <i class="icon-briefcase"></i>
806
                                                <span class="title">Data Tables</span>
807
                                                <span class="arrow "></span>
808
                                                </a>
809
                                                <ul class="sub-menu">
810
                                                        <li>
811
                                                                <a href="table_basic.html">
812
                                                                Basic Datatables</a>
813
                                                        </li>
814
                                                        <li>
815
                                                                <a href="table_tree.html">
816
                                                                Tree Datatables</a>
817
                                                        </li>
818
                                                        <li>
819
                                                                <a href="table_responsive.html">
820
                                                                Responsive Datatables</a>
821
                                                        </li>
822
                                                        <li>
823
                                                                <a href="table_managed.html">
824
                                                                Managed Datatables</a>
825
                                                        </li>
826
                                                        <li>
827
                                                                <a href="table_editable.html">
828
                                                                Editable Datatables</a>
829
                                                        </li>
830
                                                        <li>
831
                                                                <a href="table_advanced.html">
832
                                                                Advanced Datatables</a>
833
                                                        </li>
834
                                                        <li>
835
                                                                <a href="table_ajax.html">
836
                                                                Ajax Datatables</a>
837
                                                        </li>
838
                                                </ul>
839
                                        </li>
840
                                        <li>
841
                                                <a href="javascript:;">
842
                                                <i class="icon-wallet"></i>
843
                                                <span class="title">Portlets</span>
844
                                                <span class="arrow "></span>
845
                                                </a>
846
                                                <ul class="sub-menu">
847
                                                        <li>
848
                                                                <a href="portlet_general.html">
849
                                                                General Portlets</a>
850
                                                        </li>
851
                                                        <li>
852
                                                                <a href="portlet_general2.html">
853
                                                                <span class="badge badge-roundless badge-danger">new</span>New Portlets #1</a>
854
                                                        </li>
855
                                                        <li>
856
                                                                <a href="portlet_general3.html">
857
                                                                <span class="badge badge-roundless badge-danger">new</span>New Portlets #2</a>
858
                                                        </li>
859
                                                        <li>
860
                                                                <a href="portlet_ajax.html">
861
                                                                Ajax Portlets</a>
862
                                                        </li>
863
                                                        <li>
864
                                                                <a href="portlet_draggable.html">
865
                                                                Draggable Portlets</a>
866
                                                        </li>
867
                                                </ul>
868
                                        </li>
869
                                        <li>
870
                                                <a href="javascript:;">
871
                                                <i class="icon-bar-chart"></i>
872
                                                <span class="title">Charts</span>
873
                                                <span class="arrow "></span>
874
                                                </a>
875
                                                <ul class="sub-menu">
876
                                                        <li>
877
                                                                <a href="charts_amcharts.html">
878
                                                                amChart</a>
879
                                                        </li>
880
                                                        <li>
881
                                                                <a href="charts_flotcharts.html">
882
                                                                Flotchart</a>
883
                                                        </li>
884
                                                </ul>
885
                                        </li>
886
                                        <li>
887
                                                <a href="javascript:;">
888
                                                <i class="icon-docs"></i>
889
                                                <span class="title">Pages</span>
890
                                                <span class="arrow "></span>
891
                                                </a>
892
                                                <ul class="sub-menu">
893
                                                        <li>
894
                                                                <a href="page_timeline.html">
895
                                                                <i class="icon-paper-plane"></i>
896
                                                                <span class="badge badge-warning">2</span>New Timeline</a>
897
                                                        </li>
898
                                                        <li>
899
                                                                <a href="extra_profile.html">
900
                                                                <i class="icon-user-following"></i>
901
                                                                <span class="badge badge-success badge-roundless">new</span>New User Profile</a>
902
                                                        </li>
903
                                                        <li>
904
                                                                <a href="page_todo.html">
905
                                                                <i class="icon-hourglass"></i>
906
                                                                <span class="badge badge-danger">4</span>Todo</a>
907
                                                        </li>
908
                                                        <li>
909
                                                                <a href="inbox.html">
910
                                                                <i class="icon-envelope"></i>
911
                                                                <span class="badge badge-danger">4</span>Inbox</a>
912
                                                        </li>
913
                                                        <li>
914
                                                                <a href="extra_faq.html">
915
                                                                <i class="icon-info"></i>
916
                                                                FAQ</a>
917
                                                        </li>
918
                                                        <li>
919
                                                                <a href="page_portfolio.html">
920
                                                                <i class="icon-feed"></i>
921
                                                                Portfolio</a>
922
                                                        </li>
923
                                                        <li>
924
                                                                <a href="page_coming_soon.html">
925
                                                                <i class="icon-flag"></i>
926
                                                                Coming Soon</a>
927
                                                        </li>
928
                                                        <li>
929
                                                                <a href="page_calendar.html">
930
                                                                <i class="icon-calendar"></i>
931
                                                                <span class="badge badge-danger">14</span>Calendar</a>
932
                                                        </li>
933
                                                        <li>
934
                                                                <a href="extra_invoice.html">
935
                                                                <i class="icon-flag"></i>
936
                                                                Invoice</a>
937
                                                        </li>
938
                                                        <li>
939
                                                                <a href="page_blog.html">
940
                                                                <i class="icon-speech"></i>
941
                                                                Blog</a>
942
                                                        </li>
943
                                                        <li>
944
                                                                <a href="page_blog_item.html">
945
                                                                <i class="icon-link"></i>
946
                                                                Blog Post</a>
947
                                                        </li>
948
                                                        <li>
949
                                                                <a href="page_news.html">
950
                                                                <i class="icon-eye"></i>
951
                                                                <span class="badge badge-success">9</span>News</a>
952
                                                        </li>
953
                                                        <li>
954
                                                                <a href="page_news_item.html">
955
                                                                <i class="icon-bell"></i>
956
                                                                News View</a>
957
                                                        </li>
958
                                                        <li>
959
                                                                <a href="page_timeline_old.html">
960
                                                                <i class="icon-paper-plane"></i>
961
                                                                <span class="badge badge-warning">2</span>Old Timeline</a>
962
                                                        </li>
963
                                                        <li>
964
                                                                <a href="extra_profile_old.html">
965
                                                                <i class="icon-user"></i>
966
                                                                Old User Profile</a>
967
                                                        </li>
968
                                                </ul>
969
                                        </li>
970
                                        <li>
971
                                                <a href="javascript:;">
972
                                                <i class="icon-present"></i>
973
                                                <span class="title">Extra</span>
974
                                                <span class="arrow "></span>
975
                                                </a>
976
                                                <ul class="sub-menu">
977
                                                        <li>
978
                                                                <a href="page_about.html">
979
                                                                About Us</a>
980
                                                        </li>
981
                                                        <li>
982
                                                                <a href="page_contact.html">
983
                                                                Contact Us</a>
984
                                                        </li>
985
                                                        <li>
986
                                                                <a href="extra_search.html">
987
                                                                Search Results</a>
988
                                                        </li>
989
                                                        <li>
990
                                                                <a href="extra_pricing_table.html">
991
                                                                Pricing Tables</a>
992
                                                        </li>
993
                                                        <li>
994
                                                                <a href="extra_404_option1.html">
995
                                                                404 Page Option 1</a>
996
                                                        </li>
997
                                                        <li>
998
                                                                <a href="extra_404_option2.html">
999
                                                                404 Page Option 2</a>
1000
                                                        </li>
1001
                                                        <li>
1002
                                                                <a href="extra_404_option3.html">
1003
                                                                404 Page Option 3</a>
1004
                                                        </li>
1005
                                                        <li>
1006
                                                                <a href="extra_500_option1.html">
1007
                                                                500 Page Option 1</a>
1008
                                                        </li>
1009
                                                        <li>
1010
                                                                <a href="extra_500_option2.html">
1011
                                                                500 Page Option 2</a>
1012
                                                        </li>
1013
                                                </ul>
1014
                                        </li>
1015
                                        <li>
1016
                                                <a href="javascript:;">
1017
                                                <i class="icon-folder"></i>
1018
                                                <span class="title">Multi Level Menu</span>
1019
                                                <span class="arrow "></span>
1020
                                                </a>
1021
                                                <ul class="sub-menu">
1022
                                                        <li>
1023
                                                                <a href="javascript:;">
1024
                                                                <i class="icon-settings"></i> Item 1 <span class="arrow"></span>
1025
                                                                </a>
1026
                                                                <ul class="sub-menu">
1027
                                                                        <li>
1028
                                                                                <a href="javascript:;">
1029
                                                                                <i class="icon-user"></i>
1030
                                                                                Sample Link 1 <span class="arrow"></span>
1031
                                                                                </a>
1032
                                                                                <ul class="sub-menu">
1033
                                                                                        <li>
1034
                                                                                                <a href="#"><i class="icon-power"></i> Sample Link 1</a>
1035
                                                                                        </li>
1036
                                                                                        <li>
1037
                                                                                                <a href="#"><i class="icon-paper-plane"></i> Sample Link 1</a>
1038
                                                                                        </li>
1039
                                                                                        <li>
1040
                                                                                                <a href="#"><i class="icon-star"></i> Sample Link 1</a>
1041
                                                                                        </li>
1042
                                                                                </ul>
1043
                                                                        </li>
1044
                                                                        <li>
1045
                                                                                <a href="#"><i class="icon-camera"></i> Sample Link 1</a>
1046
                                                                        </li>
1047
                                                                        <li>
1048
                                                                                <a href="#"><i class="icon-link"></i> Sample Link 2</a>
1049
                                                                        </li>
1050
                                                                        <li>
1051
                                                                                <a href="#"><i class="icon-pointer"></i> Sample Link 3</a>
1052
                                                                        </li>
1053
                                                                </ul>
1054
                                                        </li>
1055
                                                        <li>
1056
                                                                <a href="javascript:;">
1057
                                                                <i class="icon-globe"></i> Item 2 <span class="arrow"></span>
1058
                                                                </a>
1059
                                                                <ul class="sub-menu">
1060
                                                                        <li>
1061
                                                                                <a href="#"><i class="icon-tag"></i> Sample Link 1</a>
1062
                                                                        </li>
1063
                                                                        <li>
1064
                                                                                <a href="#"><i class="icon-pencil"></i> Sample Link 1</a>
1065
                                                                        </li>
1066
                                                                        <li>
1067
                                                                                <a href="#"><i class="icon-graph"></i> Sample Link 1</a>
1068
                                                                        </li>
1069
                                                                </ul>
1070
                                                        </li>
1071
                                                        <li>
1072
                                                                <a href="#">
1073
                                                                <i class="icon-bar-chart"></i>
1074
                                                                Item 3 </a>
1075
                                                        </li>
1076
                                                </ul>
1077
                                        </li>
1078
                                        <li>
1079
                                                <a href="javascript:;">
1080
                                                <i class="icon-user"></i>
1081
                                                <span class="title">Login Options</span>
1082
                                                <span class="arrow "></span>
1083
                                                </a>
1084
                                                <ul class="sub-menu">
1085
                                                        <li>
1086
                                                                <a href="login.html">
1087
                                                                Login Form 1</a>
1088
                                                        </li>
1089
                                                        <li>
1090
                                                                <a href="login_2.html">
1091
                                                                Login Form 2</a>
1092
                                                        </li>
1093
                                                        <li>
1094
                                                                <a href="login_3.html">
1095
                                                                Login Form 3</a>
1096
                                                        </li>
1097
                                                        <li>
1098
                                                                <a href="login_soft.html">
1099
                                                                Login Form 4</a>
1100
                                                        </li>
1101
                                                        <li>
1102
                                                                <a href="extra_lock.html">
1103
                                                                Lock Screen 1</a>
1104
                                                        </li>
1105
                                                        <li>
1106
                                                                <a href="extra_lock2.html">
1107
                                                                Lock Screen 2</a>
1108
                                                        </li>
1109
                                                </ul>
1110
                                        </li>
1111
                                        <li>
1112
                                                <a href="javascript:;">
1113
                                                <i class="icon-envelope-open"></i>
1114
                                                <span class="title">Email Templates</span>
1115
                                                <span class="arrow "></span>
1116
                                                </a>
1117
                                                <ul class="sub-menu">
1118
                                                        <li>
1119
                                                                <a href="email_newsletter.html">
1120
                                                                Responsive Newsletter<br>
1121
                                                                 Email Template</a>
1122
                                                        </li>
1123
                                                        <li>
1124
                                                                <a href="email_system.html">
1125
                                                                Responsive System<br>
1126
                                                                 Email Template</a>
1127
                                                        </li>
1128
                                                </ul>
1129
                                        </li>
1130
                                        <li class="last ">
1131
                                                <a href="javascript:;">
1132
                                                <i class="icon-pointer"></i>
1133
                                                <span class="title">Maps</span>
1134
                                                <span class="arrow "></span>
1135
                                                </a>
1136
                                                <ul class="sub-menu">
1137
                                                        <li>
1138
                                                                <a href="maps_google.html">
1139
                                                                Google Maps</a>
1140
                                                        </li>
1141
                                                        <li>
1142
                                                                <a href="maps_vector.html">
1143
                                                                Vector Maps</a>
1144
                                                        </li>
1145
                                                </ul>
1146
                                        </li>
1147
                                </ul>
1148
                                <!-- END SIDEBAR MENU -->
1149
                        </div>
1150
                </div>
1151
                <!-- END SIDEBAR -->
1152
                <!-- BEGIN CONTENT -->
1153
                <div class="page-content-wrapper">
1154
                        <div class="page-content">
1155
                                <!-- BEGIN SAMPLE PORTLET CONFIGURATION MODAL FORM-->
1156
                                <div class="modal fade" id="portlet-config" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
1157
                                        <div class="modal-dialog">
1158
                                                <div class="modal-content">
1159
                                                        <div class="modal-header">
1160
                                                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
1161
                                                                <h4 class="modal-title">Modal title</h4>
1162
                                                        </div>
1163
                                                        <div class="modal-body">
1164
                                                                 Widget settings form goes here
1165
                                                        </div>
1166
                                                        <div class="modal-footer">
1167
                                                                <button type="button" class="btn blue">Save changes</button>
1168
                                                                <button type="button" class="btn default" data-dismiss="modal">Close</button>
1169
                                                        </div>
1170
                                                </div>
1171
                                                <!-- /.modal-content -->
1172
                                        </div>
1173
                                        <!-- /.modal-dialog -->
1174
                                </div>
1175
                                <!-- /.modal -->
1176
                                <!-- END SAMPLE PORTLET CONFIGURATION MODAL FORM-->
1177
                                <!-- BEGIN STYLE CUSTOMIZER -->
1178
                                <div class="theme-panel">
1179
                                        <div class="toggler tooltips" data-container="body" data-placement="left" data-html="true" data-original-title="Click to open advance theme customizer panel">
1180
                                                <i class="icon-settings"></i>
1181
                                        </div>
1182
                                        <div class="toggler-close">
1183
                                                <i class="icon-close"></i>
1184
                                        </div>
1185
                                        <div class="theme-options">
1186
                                                <div class="theme-option theme-colors clearfix">
1187
                                                        <span>
1188
                                                        THEME COLOR </span>
1189
                                                        <ul>
1190
                                                                <li class="color-default current tooltips" data-style="default" data-container="body" data-original-title="Default">
1191
                                                                </li>
1192
                                                                <li class="color-grey tooltips" data-style="grey" data-container="body" data-original-title="Grey">
1193
                                                                </li>
1194
                                                                <li class="color-blue tooltips" data-style="blue" data-container="body" data-original-title="Blue">
1195
                                                                </li>
1196
                                                                <li class="color-dark tooltips" data-style="dark" data-container="body" data-original-title="Dark">
1197
                                                                </li>
1198
                                                                <li class="color-light tooltips" data-style="light" data-container="body" data-original-title="Light">
1199
                                                                </li>
1200
                                                        </ul>
1201
                                                </div>
1202
                                                <div class="theme-option">
1203
                                                        <span>
1204
                                                        Theme Style </span>
1205
                                                        <select class="layout-style-option form-control input-small">
1206
                                                                <option value="square" selected="selected">Square corners</option>
1207
                                                                <option value="rounded">Rounded corners</option>
1208
                                                        </select>
1209
                                                </div>
1210
                                                <div class="theme-option">
1211
                                                        <span>
1212
                                                        Layout </span>
1213
                                                        <select class="layout-option form-control input-small">
1214
                                                                <option value="fluid" selected="selected">Fluid</option>
1215
                                                                <option value="boxed">Boxed</option>
1216
                                                        </select>
1217
                                                </div>
1218
                                                <div class="theme-option">
1219
                                                        <span>
1220
                                                        Header </span>
1221
                                                        <select class="page-header-option form-control input-small">
1222
                                                                <option value="fixed" selected="selected">Fixed</option>
1223
                                                                <option value="default">Default</option>
1224
                                                        </select>
1225
                                                </div>
1226
                                                <div class="theme-option">
1227
                                                        <span>
1228
                                                        Top Dropdown</span>
1229
                                                        <select class="page-header-top-dropdown-style-option form-control input-small">
1230
                                                                <option value="light" selected="selected">Light</option>
1231
                                                                <option value="dark">Dark</option>
1232
                                                        </select>
1233
                                                </div>
1234
                                                <div class="theme-option">
1235
                                                        <span>
1236
                                                        Sidebar Mode</span>
1237
                                                        <select class="sidebar-option form-control input-small">
1238
                                                                <option value="fixed">Fixed</option>
1239
                                                                <option value="default" selected="selected">Default</option>
1240
                                                        </select>
1241
                                                </div>
1242
                                                <div class="theme-option">
1243
                                                        <span>
1244
                                                        Sidebar Style</span>
1245
                                                        <select class="sidebar-style-option form-control input-small">
1246
                                                                <option value="default" selected="selected">Default</option>
1247
                                                                <option value="compact">Compact</option>
1248
                                                        </select>
1249
                                                </div>
1250
                                                <div class="theme-option">
1251
                                                        <span>
1252
                                                        Sidebar Menu </span>
1253
                                                        <select class="sidebar-menu-option form-control input-small">
1254
                                                                <option value="accordion" selected="selected">Accordion</option>
1255
                                                                <option value="hover">Hover</option>
1256
                                                        </select>
1257
                                                </div>
1258
                                                <div class="theme-option">
1259
                                                        <span>
1260
                                                        Sidebar Position </span>
1261
                                                        <select class="sidebar-pos-option form-control input-small">
1262
                                                                <option value="left" selected="selected">Left</option>
1263
                                                                <option value="right">Right</option>
1264
                                                        </select>
1265
                                                </div>
1266
                                                <div class="theme-option">
1267
                                                        <span>
1268
                                                        Footer </span>
1269
                                                        <select class="page-footer-option form-control input-small">
1270
                                                                <option value="fixed">Fixed</option>
1271
                                                                <option value="default" selected="selected">Default</option>
1272
                                                        </select>
1273
                                                </div>
1274
                                        </div>
1275
                                </div>
1276
                                <!-- END STYLE CUSTOMIZER -->
1277
                                <!-- BEGIN PAGE HEADER-->
1278
                                <h3 class="page-title">
1279
                                General Components <small>general ui components</small>
1280
                                </h3>
1281
                                <div class="page-bar">
1282
                                        <ul class="page-breadcrumb">
1283
                                                <li>
1284
                                                        <i class="fa fa-home"></i>
1285
                                                        <a href="index.html">Home</a>
1286
                                                        <i class="fa fa-angle-right"></i>
1287
                                                </li>
1288
                                                <li>
1289
                                                        <a href="#">UI Features</a>
1290
                                                        <i class="fa fa-angle-right"></i>
1291
                                                </li>
1292
                                                <li>
1293
                                                        <a href="#">General Components</a>
1294
                                                </li>
1295
                                        </ul>
1296
                                        <div class="page-toolbar">
1297
                                                <div class="btn-group pull-right">
1298
                                                        <button type="button" class="btn btn-fit-height grey-salt dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="1000" data-close-others="true">
1299
                                                        Actions <i class="fa fa-angle-down"></i>
1300
                                                        </button>
1301
                                                        <ul class="dropdown-menu pull-right" role="menu">
1302
                                                                <li>
1303
                                                                        <a href="#">Action</a>
1304
                                                                </li>
1305
                                                                <li>
1306
                                                                        <a href="#">Another action</a>
1307
                                                                </li>
1308
                                                                <li>
1309
                                                                        <a href="#">Something else here</a>
1310
                                                                </li>
1311
                                                                <li class="divider">
1312
                                                                </li>
1313
                                                                <li>
1314
                                                                        <a href="#">Separated link</a>
1315
                                                                </li>
1316
                                                        </ul>
1317
                                                </div>
1318
                                        </div>
1319
                                </div>
1320
                                <!-- END PAGE HEADER-->
1321
                                <!-- BEGIN PAGE CONTENT-->
1322
                                <div class="row">
1323
                                        <div class="col-md-6">
1324
                                                <!-- BEGIN ALERTS PORTLET-->
1325
                                                <div class="portlet light">
1326
                                                        <div class="portlet-title">
1327
                                                                <div class="caption">
1328
                                                                        <i class="fa fa-cogs font-green-sharp"></i>
1329
                                                                        <span class="caption-subject font-green-sharp bold uppercase">Alerts</span>
1330
                                                                        <span class="caption-helper">alert samples...</span>
1331
                                                                </div>
1332
                                                                <div class="tools">
1333
                                                                        <a href="javascript:;" class="collapse">
1334
                                                                        </a>
1335
                                                                        <a href="#portlet-config" data-toggle="modal" class="config">
1336
                                                                        </a>
1337
                                                                        <a href="javascript:;" class="reload">
1338
                                                                        </a>
1339
                                                                        <a href="javascript:;" class="remove">
1340
                                                                        </a>
1341
                                                                </div>
1342
                                                        </div>
1343
                                                        <div class="portlet-body">
1344
                                                                <h4 class="block">Default Alerts</h4>
1345
                                                                <div class="alert alert-success">
1346
                                                                        <strong>Success!</strong> The page has been added.
1347
                                                                </div>
1348
                                                                <div class="alert alert-info">
1349
                                                                        <strong>Info!</strong> You have 198 unread messages.
1350
                                                                </div>
1351
                                                                <div class="alert alert-warning">
1352
                                                                        <strong>Warning!</strong> Your monthly traffic is reaching limit.
1353
                                                                </div>
1354
                                                                <div class="alert alert-danger">
1355
                                                                        <strong>Error!</strong> The daily cronjob has failed.
1356
                                                                </div>
1357
                                                                <h4 class="block">Dismissable Alerts</h4>
1358
                                                                <div class="alert alert-warning alert-dismissable">
1359
                                                                        <button type="button" class="close" data-dismiss="alert" aria-hidden="true"></button>
1360
                                                                        <strong>Warning!</strong> Something went wrong. Please check.
1361
                                                                </div>
1362
                                                                <h4 class="block">Links in alerts</h4>
1363
                                                                <div class="alert alert-success alert-dismissable">
1364
                                                                        <button type="button" class="close" data-dismiss="alert" aria-hidden="true"></button>
1365
                                                                        <strong>WOW!</strong> Well done and everything looks OK. <a href="" class="alert-link">
1366
                                                                        Please check this one as well </a>
1367
                                                                </div>
1368
                                                        </div>
1369
                                                </div>
1370
                                                <!-- END ALERTS PORTLET-->
1371
                                        </div>
1372
                                        <div class="col-md-6">
1373
                                                <!-- BEGIN ALERTS PORTLET-->
1374
                                                <div class="portlet light">
1375
                                                        <div class="portlet-title">
1376
                                                                <div class="caption">
1377
                                                                        <i class="fa fa-cogs font-red-sunglo"></i>
1378
                                                                        <span class="caption-subject font-red-sunglo bold uppercase">Notes</span>
1379
                                                                        <span class="caption-helper">notes samples...</span>
1380
                                                                </div>
1381
                                                                <div class="tools">
1382
                                                                        <a href="javascript:;" class="collapse">
1383
                                                                        </a>
1384
                                                                        <a href="#portlet-config" data-toggle="modal" class="config">
1385
                                                                        </a>
1386
                                                                        <a href="javascript:;" class="reload">
1387
                                                                        </a>
1388
                                                                        <a href="javascript:;" class="remove">
1389
                                                                        </a>
1390
                                                                </div>
1391
                                                        </div>
1392
                                                        <div class="portlet-body">
1393
                                                                <div class="note note-success">
1394
                                                                        <h4 class="block">Success! Some Header Goes Here</h4>
1395
                                                                        <p>
1396
                                                                                 Duis mollis, est non commodo luctus, nisi erat mattis consectetur purus sit amet porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.
1397
                                                                        </p>
1398
                                                                </div>
1399
                                                                <div class="note note-info">
1400
                                                                        <h4 class="block">Info! Some Header Goes Here</h4>
1401
                                                                        <p>
1402
                                                                                 Duis mollis, est non commodo luctus, nisi erat porttitor ligula, mattis consectetur purus sit amet eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.
1403
                                                                        </p>
1404
                                                                </div>
1405
                                                                <div class="note note-danger">
1406
                                                                        <h4 class="block">Danger! Some Header Goes Here</h4>
1407
                                                                        <p>
1408
                                                                                 Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit mattis consectetur purus sit amet.\ Cras mattis consectetur purus sit amet fermentum.
1409
                                                                        </p>
1410
                                                                </div>
1411
                                                                <div class="note note-warning">
1412
                                                                        <h4 class="block">Warning! Some Header Goes Here</h4>
1413
                                                                        <p>
1414
                                                                                 Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit mattis consectetur purus sit amet. Cras mattis consectetur purus sit amet fermentum.
1415
                                                                        </p>
1416
                                                                </div>
1417
                                                        </div>
1418
                                                </div>
1419
                                                <!-- END ALERTS PORTLET-->
1420
                                        </div>
1421
                                </div>
1422
                                <div class="row">
1423
                                        <div class="col-md-6">
1424
                                                <!-- BEGIN INLINE NOTIFICATIONS PORTLET-->
1425
                                                <div class="portlet box blue">
1426
                                                        <div class="portlet-title">
1427
                                                                <div class="caption">
1428
                                                                        <i class="fa fa-cogs"></i>Inline Notifications
1429
                                                                </div>
1430
                                                                <div class="tools">
1431
                                                                        <a href="javascript:;" class="collapse">
1432
                                                                        </a>
1433
                                                                        <a href="#portlet-config" data-toggle="modal" class="config">
1434
                                                                        </a>
1435
                                                                        <a href="javascript:;" class="reload">
1436
                                                                        </a>
1437
                                                                        <a href="javascript:;" class="remove">
1438
                                                                        </a>
1439
                                                                </div>
1440
                                                        </div>
1441
                                                        <div class="portlet-body">
1442
                                                                <div class="alert alert-block alert-danger fade in">
1443
                                                                        <button type="button" class="close" data-dismiss="alert"></button>
1444
                                                                        <h4 class="alert-heading">Error!</h4>
1445
                                                                        <p>
1446
                                                                                 Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.
1447
                                                                        </p>
1448
                                                                        <p>
1449
                                                                                <a class="btn red" href="#">
1450
                                                                                Do this </a>
1451
                                                                                <a class="btn blue" href="#">
1452
                                                                                Cancel </a>
1453
                                                                        </p>
1454
                                                                </div>
1455
                                                                <div class="alert alert-block alert-success fade in">
1456
                                                                        <button type="button" class="close" data-dismiss="alert"></button>
1457
                                                                        <h4 class="alert-heading">Success!</h4>
1458
                                                                        <p>
1459
                                                                                 Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.
1460
                                                                        </p>
1461
                                                                        <p>
1462
                                                                                <a class="btn green" href="#">
1463
                                                                                Do this </a>
1464
                                                                                <a class="btn btn-link" href="#">
1465
                                                                                Cancel </a>
1466
                                                                        </p>
1467
                                                                </div>
1468
                                                                <div class="alert alert-block alert-info fade in">
1469
                                                                        <button type="button" class="close" data-dismiss="alert"></button>
1470
                                                                        <h4 class="alert-heading">Info!</h4>
1471
                                                                        <p>
1472
                                                                                 Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.
1473
                                                                        </p>
1474
                                                                        <p>
1475
                                                                                <a class="btn purple" href="#">
1476
                                                                                Do this </a>
1477
                                                                                <a class="btn dark" href="#">
1478
                                                                                Cancel </a>
1479
                                                                        </p>
1480
                                                                </div>
1481
                                                                <div class="alert alert-block alert-warning fade in">
1482
                                                                        <button type="button" class="close" data-dismiss="alert"></button>
1483
                                                                        <h4 class="alert-heading">Warning!</h4>
1484
                                                                        <p>
1485
                                                                                 Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.
1486
                                                                        </p>
1487
                                                                        <p>
1488
                                                                                <a class="btn red" href="#">
1489
                                                                                Do this </a>
1490
                                                                                <a class="btn blue" href="#">
1491
                                                                                Cancel </a>
1492
                                                                        </p>
1493
                                                                </div>
1494
                                                        </div>
1495
                                                </div>
1496
                                                <div class="portlet box grey-cascade">
1497
                                                        <div class="portlet-title">
1498
                                                                <div class="caption">
1499
                                                                        <i class="fa fa-cogs"></i>Pulsate
1500
                                                                </div>
1501
                                                                <div class="tools">
1502
                                                                        <a href="javascript:;" class="collapse">
1503
                                                                        </a>
1504
                                                                        <a href="#portlet-config" data-toggle="modal" class="config">
1505
                                                                        </a>
1506
                                                                        <a href="javascript:;" class="reload">
1507
                                                                        </a>
1508
                                                                        <a href="javascript:;" class="remove">
1509
                                                                        </a>
1510
                                                                </div>
1511
                                                        </div>
1512
                                                        <div class="portlet-body">
1513
                                                                <h4>Pulsate any page elements.</h4>
1514
                                                                <div class="margin-top-10 margin-bottom-10 clearfix">
1515
                                                                        <table class="table table-bordered table-striped">
1516
                                                                        <tr>
1517
                                                                                <td>
1518
                                                                                         Repeating Pulsate
1519
                                                                                </td>
1520
                                                                                <td>
1521
                                                                                        <div id="pulsate-regular" style="padding:5px;">
1522
                                                                                                 Repeating Pulsate
1523
                                                                                        </div>
1524
                                                                                </td>
1525
                                                                        </tr>
1526
                                                                        <tr>
1527
                                                                                <td>
1528
                                                                                        <button class="btn green" id="pulsate-once">Pulsate Once</button>
1529
                                                                                </td>
1530
                                                                                <td>
1531
                                                                                        <div id="pulsate-once-target" style="padding:5px;">
1532
                                                                                                 Pulsate me
1533
                                                                                        </div>
1534
                                                                                </td>
1535
                                                                        </tr>
1536
                                                                        <tr>
1537
                                                                                <td>
1538
                                                                                        <button class="btn red" id="pulsate-crazy">Crazy Pulsate :)</button>
1539
                                                                                </td>
1540
                                                                                <td>
1541
                                                                                        <div id="pulsate-crazy-target" style="padding:5px;">
1542
                                                                                                 Pulsate me
1543
                                                                                        </div>
1544
                                                                                </td>
1545
                                                                        </tr>
1546
                                                                        </table>
1547
                                                                </div>
1548
                                                                <span class="label label-danger">
1549
                                                                NOTE! </span>
1550
                                                                <span>
1551
                                                                Pulsate is supported in Latest Firefox, Chrome, Opera, Safari and Internet Explorer 9 and Internet Explorer 10 only. </span>
1552
                                                        </div>
1553
                                                </div>
1554
                                                <!-- END PULSATE PORTLET-->
1555
                                                <!-- BEGIN MODAL DIALOG PORTLET-->
1556
                                                <div class="portlet box purple">
1557
                                                        <div class="portlet-title">
1558
                                                                <div class="caption">
1559
                                                                        <i class="fa fa-cogs"></i>Modal Dialogs
1560
                                                                </div>
1561
                                                                <div class="tools">
1562
                                                                        <a href="javascript:;" class="collapse">
1563
                                                                        </a>
1564
                                                                        <a href="#portlet-config" data-toggle="modal" class="config">
1565
                                                                        </a>
1566
                                                                        <a href="javascript:;" class="reload">
1567
                                                                        </a>
1568
                                                                        <a href="javascript:;" class="remove">
1569
                                                                        </a>
1570
                                                                </div>
1571
                                                        </div>
1572
                                                        <div class="portlet-body">
1573
                                                                <h4>Click on below buttons to check it out.</h4>
1574
                                                                <!-- Button to trigger modal -->
1575
                                                                <a href="#myModal1" role="button" class="btn blue" data-toggle="modal">
1576
                                                                Modal Dialog </a>
1577
                                                                <a href="#myModal2" role="button" class="btn red" data-toggle="modal">
1578
                                                                Alert </a>
1579
                                                                <a href="#myModal3" role="button" class="btn yellow" data-toggle="modal">
1580
                                                                Confirm </a>
1581
                                                                <!-- Modal -->
1582
                                                                <div id="myModal1" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel1" aria-hidden="true">
1583
                                                                        <div class="modal-dialog">
1584
                                                                                <div class="modal-content">
1585
                                                                                        <div class="modal-header">
1586
                                                                                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
1587
                                                                                                <h4 class="modal-title">Modal title</h4>
1588
                                                                                        </div>
1589
                                                                                        <div class="modal-body">
1590
                                                                                                <p>
1591
                                                                                                         Body goes here...
1592
                                                                                                </p>
1593
                                                                                        </div>
1594
                                                                                        <div class="modal-footer">
1595
                                                                                                <button class="btn default" data-dismiss="modal" aria-hidden="true">Close</button>
1596
                                                                                                <button class="btn yellow">Save</button>
1597
                                                                                        </div>
1598
                                                                                </div>
1599
                                                                        </div>
1600
                                                                </div>
1601
                                                                <div id="myModal2" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2" aria-hidden="true">
1602
                                                                        <div class="modal-dialog">
1603
                                                                                <div class="modal-content">
1604
                                                                                        <div class="modal-header">
1605
                                                                                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
1606
                                                                                                <h4 class="modal-title">Alert Header</h4>
1607
                                                                                        </div>
1608
                                                                                        <div class="modal-body">
1609
                                                                                                <p>
1610
                                                                                                         Body goes here...
1611
                                                                                                </p>
1612
                                                                                        </div>
1613
                                                                                        <div class="modal-footer">
1614
                                                                                                <button data-dismiss="modal" class="btn green">OK</button>
1615
                                                                                        </div>
1616
                                                                                </div>
1617
                                                                        </div>
1618
                                                                </div>
1619
                                                                <div id="myModal3" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel3" aria-hidden="true">
1620
                                                                        <div class="modal-dialog">
1621
                                                                                <div class="modal-content">
1622
                                                                                        <div class="modal-header">
1623
                                                                                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
1624
                                                                                                <h4 class="modal-title">Confirm Header</h4>
1625
                                                                                        </div>
1626
                                                                                        <div class="modal-body">
1627
                                                                                                <p>
1628
                                                                                                         Body goes here...
1629
                                                                                                </p>
1630
                                                                                        </div>
1631
                                                                                        <div class="modal-footer">
1632
                                                                                                <button class="btn default" data-dismiss="modal" aria-hidden="true">Close</button>
1633
                                                                                                <button data-dismiss="modal" class="btn blue">Confirm</button>
1634
                                                                                        </div>
1635
                                                                                </div>
1636
                                                                        </div>
1637
                                                                </div>
1638
                                                        </div>
1639
                                                </div>
1640
                                                <!-- END MODAL DIALOG PORTLET-->
1641
                                                <!-- BEGIN TOOLTIPS PORTLET-->
1642
                                                <div class="portlet box red">
1643
                                                        <div class="portlet-title">
1644
                                                                <div class="caption">
1645
                                                                        <i class="fa fa-cogs"></i>Tooltips
1646
                                                                </div>
1647
                                                                <div class="tools">
1648
                                                                        <a href="javascript:;" class="collapse">
1649
                                                                        </a>
1650
                                                                        <a href="#portlet-config" data-toggle="modal" class="config">
1651
                                                                        </a>
1652
                                                                        <a href="javascript:;" class="reload">
1653
                                                                        </a>
1654
                                                                        <a href="javascript:;" class="remove">
1655
                                                                        </a>
1656
                                                                </div>
1657
                                                        </div>
1658
                                                        <div class="portlet-body">
1659
                                                                <p>
1660
                                                                         Tight pants next level keffiyeh <a href="#" class="tooltips" data-original-title="Very long toolips Very long toolips Very long toolips Very long toolips">
1661
                                                                        you probably </a>
1662
                                                                        haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel <a href="#" class="tooltips" data-original-title="Another tooltip">
1663
                                                                        have a </a>
1664
                                                                        terry richardson vinyl chambray. <a href="#" class="tooltips" title="12" data-original-title="The last tip!">
1665
                                                                        twitter handle </a>
1666
                                                                        freegan cred raw denim single-origin coffee viral.
1667
                                                                </p>
1668
                                                                <button class="btn tooltips" data-container="body" data-placement="top" data-original-title="Tooltip in top">Top</button>
1669
                                                                <button class="btn tooltips" data-container="body" data-placement="left" data-original-title="Tooltip in left">Left</button>
1670
                                                                <button class="btn tooltips" data-container="body" data-placement="right" data-original-title="Tooltip in right">Right</button>
1671
                                                                <button class="btn tooltips" data-container="body" data-placement="bottom" data-original-title="Tooltip in bottom">Bottom</button>
1672
                                                                <div class="inline-block tooltips" data-container="body" data-original-title="Tooltip goes here">
1673
                                                                        <button type="button" class="btn btn-default disabled">Disabled1</button>
1674
                                                                </div>
1675
                                                        </div>
1676
                                                </div>
1677
                                                <!-- END TOOLTIPS PORTLET-->
1678
                                                <!-- BEGIN TOOLTIPS PORTLET-->
1679
                                                <div class="portlet box blue">
1680
                                                        <div class="portlet-title">
1681
                                                                <div class="caption">
1682
                                                                        <i class="fa fa-cogs"></i>Tooltips In Slim Scroll
1683
                                                                </div>
1684
                                                                <div class="tools">
1685
                                                                        <a href="javascript:;" class="collapse">
1686
                                                                        </a>
1687
                                                                        <a href="#portlet-config" data-toggle="modal" class="config">
1688
                                                                        </a>
1689
                                                                        <a href="javascript:;" class="reload">
1690
                                                                        </a>
1691
                                                                        <a href="javascript:;" class="remove">
1692
                                                                        </a>
1693
                                                                </div>
1694
                                                        </div>
1695
                                                        <div class="portlet-body">
1696
                                                                <div class="scroller" style="height:150px" data-always-visible="1" data-rail-visible="0">
1697
                                                                        <button class="btn tooltips" data-container="body" data-placement="top" data-original-title="Tooltip in top">Top</button>
1698
                                                                        <button class="btn tooltips" data-container="body" data-placement="left" data-original-title="Tooltip in left">Left</button>
1699
                                                                        <button class="btn tooltips" data-container="body" data-placement="right" data-original-title="Tooltip in right">Right</button>
1700
                                                                        <button class="btn tooltips" data-container="body" data-placement="bottom" data-original-title="Tooltip in bottom">Bottom</button>
1701
                                                                        <div class="inline-block tooltips" data-container="body" data-original-title="Tooltip goes here">
1702
                                                                                <button type="button" class="btn btn-default disabled">Disabled</button>
1703
                                                                        </div>
1704
                                                                        <p>
1705
                                                                                 Tight pants next level keffiyeh <a href="#" class="tooltips" data-container="body" data-original-title="Default tooltip">
1706
                                                                                you probably </a>
1707
                                                                                haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel <a href="#" class="tooltips" data-container="body" data-original-title="Another tooltip">
1708
                                                                                have a </a>
1709
                                                                                terry richardson vinyl chambray. <a href="#" class="tooltips" title="12" data-container="body" data-original-title="The last tip!">
1710
                                                                                twitter handle </a>
1711
                                                                                freegan cred raw denim single-origin coffee viral.
1712
                                                                        </p>
1713
                                                                        <button class="btn tooltips" data-container="body" data-placement="top" data-original-title="Tooltip in top">Top</button>
1714
                                                                        <button class="btn tooltips" data-container="body" data-placement="left" data-original-title="Tooltip in left">Left</button>
1715
                                                                        <button class="btn tooltips" data-container="body" data-placement="right" data-original-title="Tooltip in right">Right</button>
1716
                                                                        <button class="btn tooltips" data-container="body" data-placement="bottom" data-original-title="Tooltip in bottom">Bottom</button>
1717
                                                                        <div class="inline-block tooltips" data-container="body" data-original-title="Tooltip goes here">
1718
                                                                                <button type="button" class="btn btn-default disabled">Disabled</button>
1719
                                                                        </div>
1720
                                                                        <p>
1721
                                                                                 Tight pants next level keffiyeh <a href="#" class="tooltips" data-container="body" data-original-title="Default tooltip">
1722
                                                                                you probably </a>
1723
                                                                                haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel <a href="#" class="tooltips" data-container="body" data-original-title="Another tooltip">
1724
                                                                                have a </a>
1725
                                                                                terry richardson vinyl chambray. <a href="#" class="tooltips" title="12" data-container="body" data-original-title="The last tip!">
1726
                                                                                twitter handle </a>
1727
                                                                                freegan cred raw denim single-origin coffee viral.
1728
                                                                        </p>
1729
                                                                </div>
1730
                                                        </div>
1731
                                                </div>
1732
                                                <!-- END TOOLTIPS PORTLET-->
1733
                                                <!-- BEGIN POPOVERS PORTLET-->
1734
                                                <div class="portlet box yellow">
1735
                                                        <div class="portlet-title">
1736
                                                                <div class="caption">
1737
                                                                        <i class="fa fa-cogs"></i>Popovers
1738
                                                                </div>
1739
                                                                <div class="tools">
1740
                                                                        <a href="javascript:;" class="collapse">
1741
                                                                        </a>
1742
                                                                        <a href="#portlet-config" data-toggle="modal" class="config">
1743
                                                                        </a>
1744
                                                                        <a href="javascript:;" class="reload">
1745
                                                                        </a>
1746
                                                                        <a href="javascript:;" class="remove">
1747
                                                                        </a>
1748
                                                                </div>
1749
                                                        </div>
1750
                                                        <div class="portlet-body">
1751
                                                                <p>
1752
                                                                         Tight pants next level keffiyeh <a href="javascript:;" class="popovers" data-container="body" data-content="Popover body goes here! Popover body goes here!" data-original-title="Default Popover">
1753
                                                                        trigger me on click </a>
1754
                                                                        haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel <a href="javascript:;" class="popovers" data-container="body" data-trigger="hover" data-content="Popover body goes here! Popover body goes here!" data-original-title="Another Popover">
1755
                                                                        trigger me on hover </a>
1756
                                                                        terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa.
1757
                                                                </p>
1758
                                                                <button class="btn popovers" data-container="body" data-trigger="hover" data-placement="top" data-content="Popover body goes here! Popover body goes here!" data-original-title="Popover in top">Top</button>
1759
                                                                <button class="btn popovers" data-container="body" onclick=" " data-trigger="hover" data-placement="left" data-content="Popover body goes here! Popover body goes here!" data-original-title="Popover in left">Left</button>
1760
                                                                <button class="btn popovers" data-container="body" data-trigger="hover" data-placement="right" data-content="Popover body goes here! Popover body goes here!" data-original-title="Popover in right">Right</button>
1761
                                                                <button class="btn popovers" data-container="body" data-trigger="hover" data-placement="bottom" data-content="Popover body goes here! Popover body goes here!" data-original-title="Popover in bottom">Bottom</button>
1762
                                                                <div class="inline-block popovers" data-container="body" data-trigger="hover" data-placement="bottom" data-content="Popover body goes here! Popover body goes here!" data-original-title="Popover in bottom">
1763
                                                                        <button type="button" class="btn btn-default disabled">Disabled</button>
1764
                                                                </div>
1765
                                                        </div>
1766
                                                </div>
1767
                                                <!-- END POPOVERS PORTLET-->
1768
                                                <!-- BEGIN POPOVERS PORTLET-->
1769
                                                <div class="portlet box green">
1770
                                                        <div class="portlet-title">
1771
                                                                <div class="caption">
1772
                                                                        <i class="fa fa-cogs"></i>Popovers In Slim Scroll
1773
                                                                </div>
1774
                                                                <div class="tools">
1775
                                                                        <a href="javascript:;" class="collapse">
1776
                                                                        </a>
1777
                                                                        <a href="#portlet-config" data-toggle="modal" class="config">
1778
                                                                        </a>
1779
                                                                        <a href="javascript:;" class="reload">
1780
                                                                        </a>
1781
                                                                        <a href="javascript:;" class="remove">
1782
                                                                        </a>
1783
                                                                </div>
1784
                                                        </div>
1785
                                                        <div class="portlet-body">
1786
                                                                <div class="scroller" style="height:150px" data-always-visible="1" data-rail-visible="0">
1787
                                                                        <button class="btn popovers" data-trigger="hover" data-container="body" data-placement="top" data-content="Popover body goes here! Popover body goes here!" data-original-title="Popover in top">Top</button>
1788
                                                                        <button class="btn popovers" data-trigger="hover" data-container="body" data-placement="left" data-content="Popover body goes here! Popover body goes here!" data-original-title="Popover in left">Left</button>
1789
                                                                        <button class="btn popovers" data-trigger="hover" data-container="body" data-placement="right" data-content="Popover body goes here! Popover body goes here!" data-original-title="Popover in right">Right</button>
1790
                                                                        <button class="btn popovers" data-trigger="hover" data-container="body" data-placement="bottom" data-content="Popover body goes here! Popover body goes here!" data-original-title="Popover in bottom">Bottom</button>
1791
                                                                        <div class="inline-block popovers" data-trigger="hover" data-container="body" data-placement="bottom" data-content="Popover body goes here! Popover body goes here!" data-original-title="Popover in bottom">
1792
                                                                                <button type="button" class="btn btn-default disabled">Disabled</button>
1793
                                                                        </div>
1794
                                                                        <p>
1795
                                                                                 Tight pants next level keffiyeh <a href="javascript:;" class="popovers" data-container="body" data-content="Popover body goes here! Popover body goes here!" data-original-title="Default Popover">
1796
                                                                                trigger me on click </a>
1797
                                                                                haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel <a href="javascript:;" class="popovers" data-container="body" data-trigger="hover" data-content="Popover body goes here! Popover body goes here!" data-original-title="Another Popover">
1798
                                                                                trigger me on hover </a>
1799
                                                                                terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa.
1800
                                                                        </p>
1801
                                                                        <button class="btn popovers" data-trigger="hover" data-container="body" data-placement="top" data-content="Popover body goes here! Popover body goes here!" data-original-title="Popover in top">Top</button>
1802
                                                                        <button class="btn popovers" data-trigger="hover" data-container="body" data-placement="left" data-content="Popover body goes here! Popover body goes here!" data-original-title="Popover in left">Left</button>
1803
                                                                        <button class="btn popovers" data-trigger="hover" data-container="body" data-placement="right" data-content="Popover body goes here! Popover body goes here!" data-original-title="Popover in right">Right</button>
1804
                                                                        <button class="btn popovers" data-trigger="hover" data-container="body" data-placement="bottom" data-content="Popover body goes here! Popover body goes here!" data-original-title="Popover in bottom">Bottom</button>
1805
                                                                        <div class="inline-block popovers" data-trigger="hover" data-container="body" data-placement="bottom" data-content="Popover body goes here! Popover body goes here!" data-original-title="Popover in bottom">
1806
                                                                                <button type="button" class="btn btn-default disabled">Disabled</button>
1807
                                                                        </div>
1808
                                                                        <p>
1809
                                                                                 Tight pants next level keffiyeh <a href="javascript:;" class="popovers" data-container="body" data-content="Popover body goes here! Popover body goes here!" data-original-title="Default Popover">
1810
                                                                                trigger me on click </a>
1811
                                                                                haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel <a href="javascript:;" class="popovers" data-container="body" data-trigger="hover" data-content="Popover body goes here! Popover body goes here!" data-original-title="Another Popover">
1812
                                                                                trigger me on hover </a>
1813
                                                                                terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa.
1814
                                                                        </p>
1815
                                                                </div>
1816
                                                        </div>
1817
                                                </div>
1818
                                                <!-- END POPOVERS PORTLET-->
1819
                                                <!-- BEGIN POPOVERS PORTLET-->
1820
                                                <div class="portlet box blue">
1821
                                                        <div class="portlet-title">
1822
                                                                <div class="caption">
1823
                                                                        <i class="fa fa-cogs"></i>List Groups
1824
                                                                </div>
1825
                                                                <div class="tools">
1826
                                                                        <a href="javascript:;" class="collapse">
1827
                                                                        </a>
1828
                                                                        <a href="#portlet-config" data-toggle="modal" class="config">
1829
                                                                        </a>
1830
                                                                        <a href="javascript:;" class="reload">
1831
                                                                        </a>
1832
                                                                        <a href="javascript:;" class="remove">
1833
                                                                        </a>
1834
                                                                </div>
1835
                                                        </div>
1836
                                                        <div class="portlet-body">
1837
                                                                <h4 class="block">Basic</h4>
1838
                                                                <ul class="list-group">
1839
                                                                        <li class="list-group-item">
1840
                                                                                 Cras justo odio
1841
                                                                        </li>
1842
                                                                        <li class="list-group-item">
1843
                                                                                 Dapibus ac facilisis in
1844
                                                                        </li>
1845
                                                                        <li class="list-group-item">
1846
                                                                                 Morbi leo risus
1847
                                                                        </li>
1848
                                                                        <li class="list-group-item">
1849
                                                                                 Porta ac consectetur ac
1850
                                                                        </li>
1851
                                                                        <li class="list-group-item">
1852
                                                                                 Vestibulum at eros
1853
                                                                        </li>
1854
                                                                </ul>
1855
                                                                <h4 class="block">Custom Colors(refer to ui_colors.html for more colors)</h4>
1856
                                                                <ul class="list-group">
1857
                                                                        <li class="list-group-item bg-blue">
1858
                                                                                 Cras justo odio
1859
                                                                        </li>
1860
                                                                        <li class="list-group-item bg-red">
1861
                                                                                 Dapibus ac facilisis in
1862
                                                                        </li>
1863
                                                                        <li class="list-group-item bg-green">
1864
                                                                                 Morbi leo risus
1865
                                                                        </li>
1866
                                                                        <li class="list-group-item bg-purple">
1867
                                                                                 Porta ac consectetur ac
1868
                                                                        </li>
1869
                                                                        <li class="list-group-item bg-yellow">
1870
                                                                                 Vestibulum at eros
1871
                                                                        </li>
1872
                                                                </ul>
1873
                                                                <h4 class="block">Badges</h4>
1874
                                                                <ul class="list-group">
1875
                                                                        <li class="list-group-item">
1876
                                                                                 Cras justo odio <span class="badge badge-default">
1877
                                                                                3 </span>
1878
                                                                        </li>
1879
                                                                        <li class="list-group-item">
1880
                                                                                 Dapibus ac facilisis in <span class="badge badge-success">
1881
                                                                                11 </span>
1882
                                                                        </li>
1883
                                                                        <li class="list-group-item">
1884
                                                                                 Morbi leo risus <span class="badge badge-danger">
1885
                                                                                new </span>
1886
                                                                        </li>
1887
                                                                        <li class="list-group-item">
1888
                                                                                 Porta ac consectetur ac <span class="badge badge-warning">
1889
                                                                                4 </span>
1890
                                                                        </li>
1891
                                                                        <li class="list-group-item">
1892
                                                                                 Vestibulum at eros <span class="badge badge-info">
1893
                                                                                3 </span>
1894
                                                                        </li>
1895
                                                                </ul>
1896
                                                                <h4 class="block">Contextual States</h4>
1897
                                                                <ul class="list-group">
1898
                                                                        <li class="list-group-item">
1899
                                                                                 Default
1900
                                                                        </li>
1901
                                                                        <li class="list-group-item list-group-item-success">
1902
                                                                                 Success
1903
                                                                        </li>
1904
                                                                        <li class="list-group-item list-group-item-info">
1905
                                                                                 Info <span class="badge badge-warning">
1906
                                                                                3 </span>
1907
                                                                        </li>
1908
                                                                        <li class="list-group-item list-group-item-warning">
1909
                                                                                 Warning <span class="badge badge-default">
1910
                                                                                3 </span>
1911
                                                                        </li>
1912
                                                                        <li class="list-group-item list-group-item-danger">
1913
                                                                                 Danger
1914
                                                                        </li>
1915
                                                                </ul>
1916
                                                                <h4 class="block">Linked Contextual Items</h4>
1917
                                                                <div class="list-group">
1918
                                                                        <a href="#" class="list-group-item">
1919
                                                                        Default </a>
1920
                                                                        <a href="#" class="list-group-item list-group-item-success">
1921
                                                                        Success </a>
1922
                                                                        <a href="#" class="list-group-item list-group-item-info">
1923
                                                                        Info <span class="badge badge-warning">
1924
                                                                        3 </span>
1925
                                                                        </a>
1926
                                                                        <a href="#" class="list-group-item list-group-item-warning">
1927
                                                                        Warning <span class="badge badge-default">
1928
                                                                        3 </span>
1929
                                                                        </a>
1930
                                                                        <a href="#" class="list-group-item list-group-item-danger">
1931
                                                                        Danger </a>
1932
                                                                </div>
1933
                                                                <h4 class="block">Custom Content</h4>
1934
                                                                <div class="list-group">
1935
                                                                        <a href="#" class="list-group-item active">
1936
                                                                        <h4 class="list-group-item-heading">List group item heading</h4>
1937
                                                                        <p class="list-group-item-text">
1938
                                                                                 Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
1939
                                                                        </p>
1940
                                                                        </a>
1941
                                                                        <a href="#" class="list-group-item">
1942
                                                                        <h4 class="list-group-item-heading">List group item heading</h4>
1943
                                                                        <p class="list-group-item-text">
1944
                                                                                 Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
1945
                                                                        </p>
1946
                                                                        </a>
1947
                                                                        <a href="#" class="list-group-item">
1948
                                                                        <h4 class="list-group-item-heading">List group item heading</h4>
1949
                                                                        <p class="list-group-item-text">
1950
                                                                                 Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
1951
                                                                        </p>
1952
                                                                        </a>
1953
                                                                </div>
1954
                                                        </div>
1955
                                                </div>
1956
                                                <!-- END POPOVERS PORTLET-->
1957
                                                <!-- BEGIN POPOVERS PORTLET-->
1958
                                                <div class="portlet box green">
1959
                                                        <div class="portlet-title">
1960
                                                                <div class="caption">
1961
                                                                        <i class="fa fa-cogs"></i>Panels
1962
                                                                </div>
1963
                                                                <div class="tools">
1964
                                                                        <a href="javascript:;" class="collapse">
1965
                                                                        </a>
1966
                                                                        <a href="#portlet-config" data-toggle="modal" class="config">
1967
                                                                        </a>
1968
                                                                        <a href="javascript:;" class="reload">
1969
                                                                        </a>
1970
                                                                        <a href="javascript:;" class="remove">
1971
                                                                        </a>
1972
                                                                </div>
1973
                                                        </div>
1974
                                                        <div class="portlet-body">
1975
                                                                <h4 class="block">Basic Panels</h4>
1976
                                                                <div class="panel panel-default">
1977
                                                                        <div class="panel-heading">
1978
                                                                                 Panel heading without title
1979
                                                                        </div>
1980
                                                                        <div class="panel-body">
1981
                                                                                 Panel content
1982
                                                                        </div>
1983
                                                                </div>
1984
                                                                <div class="panel panel-default">
1985
                                                                        <div class="panel-heading">
1986
                                                                                <h3 class="panel-title">Panel title</h3>
1987
                                                                        </div>
1988
                                                                        <div class="panel-body">
1989
                                                                                 Panel content
1990
                                                                        </div>
1991
                                                                </div>
1992
                                                                <div class="panel panel-default">
1993
                                                                        <div class="panel-body">
1994
                                                                                 Panel content
1995
                                                                        </div>
1996
                                                                        <div class="panel-footer">
1997
                                                                                 Panel footer
1998
                                                                        </div>
1999
                                                                </div>
2000
                                                                <div class="clearfix">
2001
                                                                        <h4 class="block">Contextual Panels</h4>
2002
                                                                        <div class="panel panel-default">
2003
                                                                                <div class="panel-heading">
2004
                                                                                        <h3 class="panel-title">Primary Panel</h3>
2005
                                                                                </div>
2006
                                                                                <div class="panel-body">
2007
                                                                                         Panel content
2008
                                                                                </div>
2009
                                                                        </div>
2010
                                                                        <div class="panel panel-primary">
2011
                                                                                <div class="panel-heading">
2012
                                                                                        <h3 class="panel-title">Primary Panel</h3>
2013
                                                                                </div>
2014
                                                                                <div class="panel-body">
2015
                                                                                         Panel content
2016
                                                                                </div>
2017
                                                                        </div>
2018
                                                                        <div class="panel panel-success">
2019
                                                                                <div class="panel-heading">
2020
                                                                                        <h3 class="panel-title">Success Panel</h3>
2021
                                                                                </div>
2022
                                                                                <div class="panel-body">
2023
                                                                                         Panel content
2024
                                                                                </div>
2025
                                                                        </div>
2026
                                                                        <div class="panel panel-info">
2027
                                                                                <div class="panel-heading">
2028
                                                                                        <h3 class="panel-title">Info Panel</h3>
2029
                                                                                </div>
2030
                                                                                <div class="panel-body">
2031
                                                                                         Panel content
2032
                                                                                </div>
2033
                                                                        </div>
2034
                                                                        <div class="panel panel-warning">
2035
                                                                                <div class="panel-heading">
2036
                                                                                        <h3 class="panel-title">Warning Panel</h3>
2037
                                                                                </div>
2038
                                                                                <div class="panel-body">
2039
                                                                                         Panel content
2040
                                                                                </div>
2041
                                                                        </div>
2042
                                                                        <div class="panel panel-danger">
2043
                                                                                <div class="panel-heading">
2044
                                                                                        <h3 class="panel-title">Danger Panel</h3>
2045
                                                                                </div>
2046
                                                                                <div class="panel-body">
2047
                                                                                         Panel content
2048
                                                                                </div>
2049
                                                                        </div>
2050
                                                                </div>
2051
                                                                <div class="clearfix">
2052
                                                                        <h4 class="block">With Tables</h4>
2053
                                                                        <div class="panel panel-success">
2054
                                                                                <!-- Default panel contents -->
2055
                                                                                <div class="panel-heading">
2056
                                                                                        <h3 class="panel-title">Panel Title</h3>
2057
                                                                                </div>
2058
                                                                                <div class="panel-body">
2059
                                                                                        <p>
2060
                                                                                                 Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.
2061
                                                                                        </p>
2062
                                                                                </div>
2063
                                                                                <!-- Table -->
2064
                                                                                <table class="table">
2065
                                                                                <thead>
2066
                                                                                <tr>
2067
                                                                                        <th>
2068
                                                                                                 #
2069
                                                                                        </th>
2070
                                                                                        <th>
2071
                                                                                                 First Name
2072
                                                                                        </th>
2073
                                                                                        <th>
2074
                                                                                                 Last Name
2075
                                                                                        </th>
2076
                                                                                        <th>
2077
                                                                                                 Username
2078
                                                                                        </th>
2079
                                                                                </tr>
2080
                                                                                </thead>
2081
                                                                                <tbody>
2082
                                                                                <tr>
2083
                                                                                        <td>
2084
                                                                                                 1
2085
                                                                                        </td>
2086
                                                                                        <td>
2087
                                                                                                 Mark
2088
                                                                                        </td>
2089
                                                                                        <td>
2090
                                                                                                 Otto
2091
                                                                                        </td>
2092
                                                                                        <td>
2093
                                                                                                 @mdo
2094
                                                                                        </td>
2095
                                                                                </tr>
2096
                                                                                <tr>
2097
                                                                                        <td>
2098
                                                                                                 2
2099
                                                                                        </td>
2100
                                                                                        <td>
2101
                                                                                                 Jacob
2102
                                                                                        </td>
2103
                                                                                        <td>
2104
                                                                                                 Thornton
2105
                                                                                        </td>
2106
                                                                                        <td>
2107
                                                                                                 @fat
2108
                                                                                        </td>
2109
                                                                                </tr>
2110
                                                                                <tr>
2111
                                                                                        <td>
2112
                                                                                                 3
2113
                                                                                        </td>
2114
                                                                                        <td>
2115
                                                                                                 Larry
2116
                                                                                        </td>
2117
                                                                                        <td>
2118
                                                                                                 the Bird
2119
                                                                                        </td>
2120
                                                                                        <td>
2121
                                                                                                 @twitter
2122
                                                                                        </td>
2123
                                                                                </tr>
2124
                                                                                </tbody>
2125
                                                                                </table>
2126
                                                                        </div>
2127
                                                                </div>
2128
                                                                <div class="clearfix">
2129
                                                                        <h4 class="block">With List Groups</h4>
2130
                                                                        <div class="panel panel-warning">
2131
                                                                                <!-- Default panel contents -->
2132
                                                                                <div class="panel-heading">
2133
                                                                                        <h3 class="panel-title">Panel Title</h3>
2134
                                                                                </div>
2135
                                                                                <div class="panel-body">
2136
                                                                                        <p>
2137
                                                                                                 Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.
2138
                                                                                        </p>
2139
                                                                                </div>
2140
                                                                                <!-- List group -->
2141
                                                                                <ul class="list-group">
2142
                                                                                        <li class="list-group-item">
2143
                                                                                                 Cras justo odio <span class="badge badge-default">
2144
                                                                                                3 </span>
2145
                                                                                        </li>
2146
                                                                                        <li class="list-group-item">
2147
                                                                                                 Dapibus ac facilisis in <span class="badge badge-success">
2148
                                                                                                11 </span>
2149
                                                                                        </li>
2150
                                                                                        <li class="list-group-item">
2151
                                                                                                 Morbi leo risus <span class="badge badge-danger">
2152
                                                                                                new </span>
2153
                                                                                        </li>
2154
                                                                                        <li class="list-group-item">
2155
                                                                                                 Porta ac consectetur ac <span class="badge badge-warning">
2156
                                                                                                4 </span>
2157
                                                                                        </li>
2158
                                                                                        <li class="list-group-item">
2159
                                                                                                 Vestibulum at eros <span class="badge badge-info">
2160
                                                                                                3 </span>
2161
                                                                                        </li>
2162
                                                                                        <li class="list-group-item">
2163
                                                                                                 Vestibulum at eros
2164
                                                                                        </li>
2165
                                                                                </ul>
2166
                                                                        </div>
2167
                                                                </div>
2168
                                                        </div>
2169
                                                </div>
2170
                                        </div>
2171
                                        <div class="col-md-6">
2172
                                                <!-- BEGIN PROGRESS BARS PORTLET-->
2173
                                                <div class="portlet box green">
2174
                                                        <div class="portlet-title">
2175
                                                                <div class="caption">
2176
                                                                        <i class="fa fa-cogs"></i>Progress Bars
2177
                                                                </div>
2178
                                                                <div class="tools">
2179
                                                                        <a href="javascript:;" class="collapse">
2180
                                                                        </a>
2181
                                                                        <a href="#portlet-config" data-toggle="modal" class="config">
2182
                                                                        </a>
2183
                                                                        <a href="javascript:;" class="reload">
2184
                                                                        </a>
2185
                                                                        <a href="javascript:;" class="remove">
2186
                                                                        </a>
2187
                                                                </div>
2188
                                                        </div>
2189
                                                        <div class="portlet-body">
2190
                                                                <div class="note note-warning">
2191
                                                                        <h4 class="block">Cross-browser compatibility</h4>
2192
                                                                        <p>
2193
                                                                                 Progress bars use CSS3 transitions and animations to achieve some of their effects. These features are not supported in Internet Explorer 9 and below or older versions of Firefox. Opera 12 does not support animations.
2194
                                                                        </p>
2195
                                                                </div>
2196
                                                                <h3>Basic</h3>
2197
                                                                <div class="progress">
2198
                                                                        <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
2199
                                                                                <span class="sr-only">
2200
                                                                                40% Complete (success) </span>
2201
                                                                        </div>
2202
                                                                </div>
2203
                                                                <div class="progress">
2204
                                                                        <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
2205
                                                                                <span class="sr-only">
2206
                                                                                20% Complete </span>
2207
                                                                        </div>
2208
                                                                </div>
2209
                                                                <div class="progress">
2210
                                                                        <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
2211
                                                                                <span class="sr-only">
2212
                                                                                60% Complete (warning) </span>
2213
                                                                        </div>
2214
                                                                </div>
2215
                                                                <div class="progress">
2216
                                                                        <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
2217
                                                                                <span class="sr-only">
2218
                                                                                80% Complete </span>
2219
                                                                        </div>
2220
                                                                </div>
2221
                                                                <h3>Striped</h3>
2222
                                                                <div class="progress progress-striped">
2223
                                                                        <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
2224
                                                                                <span class="sr-only">
2225
                                                                                40% Complete (success) </span>
2226
                                                                        </div>
2227
                                                                </div>
2228
                                                                <div class="progress progress-striped">
2229
                                                                        <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
2230
                                                                                <span class="sr-only">
2231
                                                                                20% Complete </span>
2232
                                                                        </div>
2233
                                                                </div>
2234
                                                                <div class="progress progress-striped">
2235
                                                                        <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
2236
                                                                                <span class="sr-only">
2237
                                                                                60% Complete (warning) </span>
2238
                                                                        </div>
2239
                                                                </div>
2240
                                                                <div class="progress progress-striped">
2241
                                                                        <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
2242
                                                                                <span class="sr-only">
2243
                                                                                80% Complete (danger) </span>
2244
                                                                        </div>
2245
                                                                </div>
2246
                                                                <h3>Animated</h3>
2247
                                                                <div class="progress progress-striped active">
2248
                                                                        <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
2249
                                                                                <span class="sr-only">
2250
                                                                                40% Complete (success) </span>
2251
                                                                        </div>
2252
                                                                </div>
2253
                                                                <div class="progress progress-striped active">
2254
                                                                        <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
2255
                                                                                <span class="sr-only">
2256
                                                                                20% Complete </span>
2257
                                                                        </div>
2258
                                                                </div>
2259
                                                                <div class="progress progress-striped active">
2260
                                                                        <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
2261
                                                                                <span class="sr-only">
2262
                                                                                60% Complete (warning) </span>
2263
                                                                        </div>
2264
                                                                </div>
2265
                                                                <div class="progress progress-striped active">
2266
                                                                        <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
2267
                                                                                <span class="sr-only">
2268
                                                                                80% Complete (danger) </span>
2269
                                                                        </div>
2270
                                                                </div>
2271
                                                                <h3>Stacked</h3>
2272
                                                                <div class="progress">
2273
                                                                        <div class="progress-bar progress-bar-success" style="width: 35%">
2274
                                                                                <span class="sr-only">
2275
                                                                                35% Complete (success) </span>
2276
                                                                        </div>
2277
                                                                        <div class="progress-bar progress-bar-warning" style="width: 20%">
2278
                                                                                <span class="sr-only">
2279
                                                                                20% Complete (warning) </span>
2280
                                                                        </div>
2281
                                                                        <div class="progress-bar progress-bar-danger" style="width: 10%">
2282
                                                                                <span class="sr-only">
2283
                                                                                10% Complete (danger) </span>
2284
                                                                        </div>
2285
                                                                </div>
2286
                                                        </div>
2287
                                                </div>
2288
                                                <!-- END PROGRESS BARS PORTLET-->
2289
                                                <!-- BEGIN LABELS AND BADGES PORTLET-->
2290
                                                <div class="portlet box blue">
2291
                                                        <div class="portlet-title">
2292
                                                                <div class="caption">
2293
                                                                        <i class="fa fa-cogs"></i>Labels & Badges
2294
                                                                </div>
2295
                                                                <div class="tools">
2296
                                                                        <a href="javascript:;" class="collapse">
2297
                                                                        </a>
2298
                                                                        <a href="#portlet-config" data-toggle="modal" class="config">
2299
                                                                        </a>
2300
                                                                        <a href="javascript:;" class="reload">
2301
                                                                        </a>
2302
                                                                        <a href="javascript:;" class="remove">
2303
                                                                        </a>
2304
                                                                </div>
2305
                                                        </div>
2306
                                                        <div class="portlet-body">
2307
                                                                <h4 class="block">Labels & Badges Styles</h4>
2308
                                                                <table class="table table-bordered table-striped">
2309
                                                                <thead>
2310
                                                                <tr>
2311
                                                                        <th>
2312
                                                                                 Class
2313
                                                                        </th>
2314
                                                                        <th>
2315
                                                                                 Labels
2316
                                                                        </th>
2317
                                                                        <th>
2318
                                                                                 Badges
2319
                                                                        </th>
2320
                                                                        <th>
2321
                                                                                 Roundless Badges
2322
                                                                        </th>
2323
                                                                </tr>
2324
                                                                </thead>
2325
                                                                <tbody>
2326
                                                                <tr>
2327
                                                                        <td>
2328
                                                                                 Default
2329
                                                                        </td>
2330
                                                                        <td>
2331
                                                                                <span class="label label-default">
2332
                                                                                Default </span>
2333
                                                                        </td>
2334
                                                                        <td>
2335
                                                                                <span class="badge badge-default">
2336
                                                                                5 </span>
2337
                                                                        </td>
2338
                                                                        <td>
2339
                                                                                <span class="badge badge-default badge-roundless">
2340
                                                                                3 </span>
2341
                                                                        </td>
2342
                                                                </tr>
2343
                                                                <tr>
2344
                                                                        <td>
2345
                                                                                 Primary
2346
                                                                        </td>
2347
                                                                        <td>
2348
                                                                                <span class="label label-primary">
2349
                                                                                Primary </span>
2350
                                                                        </td>
2351
                                                                        <td>
2352
                                                                                <span class="badge badge-primary">
2353
                                                                                4 </span>
2354
                                                                        </td>
2355
                                                                        <td>
2356
                                                                                <span class="badge badge-primary badge-roundless">
2357
                                                                                Hot </span>
2358
                                                                        </td>
2359
                                                                </tr>
2360
                                                                <tr>
2361
                                                                        <td>
2362
                                                                                 Info
2363
                                                                        </td>
2364
                                                                        <td>
2365
                                                                                <span class="label label-info">
2366
                                                                                Info </span>
2367
                                                                        </td>
2368
                                                                        <td>
2369
                                                                                <span class="badge badge-info">
2370
                                                                                6 </span>
2371
                                                                        </td>
2372
                                                                        <td>
2373
                                                                                <span class="badge badge-info badge-roundless">
2374
                                                                                New </span>
2375
                                                                        </td>
2376
                                                                </tr>
2377
                                                                <tr>
2378
                                                                        <td>
2379
                                                                                 Success
2380
                                                                        </td>
2381
                                                                        <td>
2382
                                                                                <span class="label label-success">
2383
                                                                                Success </span>
2384
                                                                        </td>
2385
                                                                        <td>
2386
                                                                                <span class="badge badge-success">
2387
                                                                                1 </span>
2388
                                                                        </td>
2389
                                                                        <td>
2390
                                                                                <span class="badge badge-success badge-roundless">
2391
                                                                                2 </span>
2392
                                                                        </td>
2393
                                                                </tr>
2394
                                                                <tr>
2395
                                                                        <td>
2396
                                                                                 Danger
2397
                                                                        </td>
2398
                                                                        <td>
2399
                                                                                <span class="label label-danger">
2400
                                                                                Danger </span>
2401
                                                                        </td>
2402
                                                                        <td>
2403
                                                                                <span class="badge badge-danger">
2404
                                                                                3 </span>
2405
                                                                        </td>
2406
                                                                        <td>
2407
                                                                                <span class="badge badge-danger badge-roundless">
2408
                                                                                5 </span>
2409
                                                                        </td>
2410
                                                                </tr>
2411
                                                                <tr>
2412
                                                                        <td>
2413
                                                                                 Warning
2414
                                                                        </td>
2415
                                                                        <td>
2416
                                                                                <span class="label label-warning">
2417
                                                                                Warning </span>
2418
                                                                        </td>
2419
                                                                        <td>
2420
                                                                                <span class="badge badge-warning">
2421
                                                                                12 </span>
2422
                                                                        </td>
2423
                                                                        <td>
2424
                                                                                <span class="badge badge-warning badge-roundless">
2425
                                                                                3 </span>
2426
                                                                        </td>
2427
                                                                </tr>
2428
                                                                </tbody>
2429
                                                                </table>
2430
                                                                <h4 class="block">Labels In Headings</h4>
2431
                                                                <div class="well">
2432
                                                                        <h1>Example heading <span class="label label-default">
2433
                                                                        default </span>
2434
                                                                        </h1>
2435
                                                                        <h2>Example heading <span class="label label-success">
2436
                                                                        success </span>
2437
                                                                        </h2>
2438
                                                                        <h3>Example heading <span class="label label-danger">
2439
                                                                        danger </span>
2440
                                                                        </h3>
2441
                                                                        <h4 class="block">Example heading <span class="label label-info">
2442
                                                                        info </span>
2443
                                                                        </h4>
2444
                                                                        <h4>Example heading <span class="label label-warning">
2445
                                                                        warning </span>
2446
                                                                        </h4>
2447
                                                                        <h6>Example heading <span class="label label-primary">
2448
                                                                        primary </span>
2449
                                                                        </h6>
2450
                                                                </div>
2451
                                                                <div class="clearfix">
2452
                                                                        <h4 class="block">Badges in Navs</h4>
2453
                                                                        <ul class="nav nav-pills">
2454
                                                                                <li class="active">
2455
                                                                                        <a href="#">
2456
                                                                                        Home <span class="badge1">
2457
                                                                                        42 </span>
2458
                                                                                        </a>
2459
                                                                                </li>
2460
                                                                                <li>
2461
                                                                                        <a href="#">
2462
                                                                                        Profile </a>
2463
                                                                                </li>
2464
                                                                                <li>
2465
                                                                                        <a href="#">
2466
                                                                                        Messages <span class="badge badge-danger">
2467
                                                                                        3 </span>
2468
                                                                                        </a>
2469
                                                                                </li>
2470
                                                                        </ul>
2471
                                                                        <div class="clearfix margin-bottom-10">
2472
                                                                        </div>
2473
                                                                        <ul class="nav nav-pills nav-stacked" style="max-width: 260px;">
2474
                                                                                <li class="active">
2475
                                                                                        <a href="#">
2476
                                                                                        <span class="badge badge-warning pull-right">
2477
                                                                                        42 </span>
2478
                                                                                        Home </a>
2479
                                                                                </li>
2480
                                                                                <li>
2481
                                                                                        <a href="#">
2482
                                                                                        Profile </a>
2483
                                                                                </li>
2484
                                                                                <li>
2485
                                                                                        <a href="#">
2486
                                                                                        <span class="badge badge-success pull-right">
2487
                                                                                        3 </span>
2488
                                                                                        Messages </a>
2489
                                                                                </li>
2490
                                                                        </ul>
2491
                                                                </div>
2492
                                                                <div class="clearfix">
2493
                                                                        <h4 class="block">Badges in Inline Dropdowns</h4>
2494
                                                                        <div class="dropdown inline clearfix">
2495
                                                                                <!-- Link or button to toggle dropdown -->
2496
                                                                                <ul class="dropdown-menu" role="menu">
2497
                                                                                        <li role="presentation">
2498
                                                                                                <a role="menuitem" tabindex="-1" href="#">
2499
                                                                                                Action <span class="badge badge-success">
2500
                                                                                                2 </span>
2501
                                                                                                </a>
2502
                                                                                        </li>
2503
                                                                                        <li role="presentation">
2504
                                                                                                <a role="menuitem" tabindex="-1" href="#">
2505
                                                                                                Another action <span class="badge badge-warning">
2506
                                                                                                5 </span>
2507
                                                                                                </a>
2508
                                                                                        </li>
2509
                                                                                        <li role="presentation">
2510
                                                                                                <a role="menuitem" tabindex="-1" href="#">
2511
                                                                                                Something here <span class="badge badge-danger">
2512
                                                                                                7 </span>
2513
                                                                                                </a>
2514
                                                                                        </li>
2515
                                                                                        <li role="presentation" class="divider">
2516
                                                                                        </li>
2517
                                                                                        <li role="presentation">
2518
                                                                                                <a role="menuitem" tabindex="-1" href="#">
2519
                                                                                                Separated link <span class="badge badge-info">
2520
                                                                                                12 </span>
2521
                                                                                                </a>
2522
                                                                                        </li>
2523
                                                                                </ul>
2524
                                                                        </div>
2525
                                                                        <div class="clearfix">
2526
                                                                        </div>
2527
                                                                        <h4 class="block">Badges in Button Dropdowns</h4>
2528
                                                                        <div class="btn-group ">
2529
                                                                                <button class="btn blue dropdown-toggle" data-toggle="dropdown">Open Me!<i class="fa fa-angle-down"></i>
2530
                                                                                </button>
2531
                                                                                <ul class="dropdown-menu" role="menu">
2532
                                                                                        <li role="presentation">
2533
                                                                                                <a role="menuitem" tabindex="-1" href="#">
2534
                                                                                                Action <span class="badge badge-success">
2535
                                                                                                2 </span>
2536
                                                                                                </a>
2537
                                                                                        </li>
2538
                                                                                        <li role="presentation">
2539
                                                                                                <a role="menuitem" tabindex="-1" href="#">
2540
                                                                                                Another action <span class="badge badge-warning">
2541
                                                                                                5 </span>
2542
                                                                                                </a>
2543
                                                                                        </li>
2544
                                                                                        <li role="presentation">
2545
                                                                                                <a role="menuitem" tabindex="-1" href="#">
2546
                                                                                                Something here <span class="badge badge-danger">
2547
                                                                                                7 </span>
2548
                                                                                                </a>
2549
                                                                                        </li>
2550
                                                                                        <li role="presentation" class="divider">
2551
                                                                                        </li>
2552
                                                                                        <li role="presentation">
2553
                                                                                                <a role="menuitem" tabindex="-1" href="#">
2554
                                                                                                Separated link <span class="badge badge-info">
2555
                                                                                                12 </span>
2556
                                                                                                </a>
2557
                                                                                        </li>
2558
                                                                                </ul>
2559
                                                                        </div>
2560
                                                                </div>
2561
                                                        </div>
2562
                                                </div>
2563
                                                <!-- END LABELS AND BADGES PORTLET-->
2564
                                                <!-- BEGIN PAGINATION PORTLET-->
2565
                                                <div class="portlet box purple">
2566
                                                        <div class="portlet-title">
2567
                                                                <div class="caption">
2568
                                                                        <i class="fa fa-cogs"></i>Pagination
2569
                                                                </div>
2570
                                                                <div class="tools">
2571
                                                                        <a href="javascript:;" class="collapse">
2572
                                                                        </a>
2573
                                                                        <a href="#portlet-config" data-toggle="modal" class="config">
2574
                                                                        </a>
2575
                                                                        <a href="javascript:;" class="reload">
2576
                                                                        </a>
2577
                                                                        <a href="javascript:;" class="remove">
2578
                                                                        </a>
2579
                                                                </div>
2580
                                                        </div>
2581
                                                        <div class="portlet-body">
2582
                                                                <div>
2583
                                                                        <ul class="pagination pagination-lg">
2584
                                                                                <li>
2585
                                                                                        <a href="#">
2586
                                                                                        <i class="fa fa-angle-left"></i>
2587
                                                                                        </a>
2588
                                                                                </li>
2589
                                                                                <li>
2590
                                                                                        <a href="#">
2591
                                                                                        1 </a>
2592
                                                                                </li>
2593
                                                                                <li>
2594
                                                                                        <a href="#">
2595
                                                                                        2 </a>
2596
                                                                                </li>
2597
                                                                                <li>
2598
                                                                                        <a href="#">
2599
                                                                                        3 </a>
2600
                                                                                </li>
2601
                                                                                <li>
2602
                                                                                        <a href="#">
2603
                                                                                        4 </a>
2604
                                                                                </li>
2605
                                                                                <li>
2606
                                                                                        <a href="#">
2607
                                                                                        5 </a>
2608
                                                                                </li>
2609
                                                                                <li>
2610
                                                                                        <a href="#">
2611
                                                                                        6 </a>
2612
                                                                                </li>
2613
                                                                                <li>
2614
                                                                                        <a href="#">
2615
                                                                                        <i class="fa fa-angle-right"></i>
2616
                                                                                        </a>
2617
                                                                                </li>
2618
                                                                        </ul>
2619
                                                                </div>
2620
                                                                <div>
2621
                                                                        <ul class="pagination">
2622
                                                                                <li>
2623
                                                                                        <a href="#">
2624
                                                                                        <i class="fa fa-angle-left"></i>
2625
                                                                                        </a>
2626
                                                                                </li>
2627
                                                                                <li>
2628
                                                                                        <a href="#">
2629
                                                                                        1 </a>
2630
                                                                                </li>
2631
                                                                                <li>
2632
                                                                                        <a href="#">
2633
                                                                                        2 </a>
2634
                                                                                </li>
2635
                                                                                <li>
2636
                                                                                        <a href="#">
2637
                                                                                        3 </a>
2638
                                                                                </li>
2639
                                                                                <li>
2640
                                                                                        <a href="#">
2641
                                                                                        4 </a>
2642
                                                                                </li>
2643
                                                                                <li>
2644
                                                                                        <a href="#">
2645
                                                                                        5 </a>
2646
                                                                                </li>
2647
                                                                                <li>
2648
                                                                                        <a href="#">
2649
                                                                                        6 </a>
2650
                                                                                </li>
2651
                                                                                <li>
2652
                                                                                        <a href="#">
2653
                                                                                        <i class="fa fa-angle-right"></i>
2654
                                                                                        </a>
2655
                                                                                </li>
2656
                                                                        </ul>
2657
                                                                </div>
2658
                                                                <div>
2659
                                                                        <ul class="pagination pagination-sm">
2660
                                                                                <li>
2661
                                                                                        <a href="#">
2662
                                                                                        <i class="fa fa-angle-left"></i>
2663
                                                                                        </a>
2664
                                                                                </li>
2665
                                                                                <li>
2666
                                                                                        <a href="#">
2667
                                                                                        1 </a>
2668
                                                                                </li>
2669
                                                                                <li>
2670
                                                                                        <a href="#">
2671
                                                                                        2 </a>
2672
                                                                                </li>
2673
                                                                                <li>
2674
                                                                                        <a href="#">
2675
                                                                                        3 </a>
2676
                                                                                </li>
2677
                                                                                <li>
2678
                                                                                        <a href="#">
2679
                                                                                        4 </a>
2680
                                                                                </li>
2681
                                                                                <li>
2682
                                                                                        <a href="#">
2683
                                                                                        5 </a>
2684
                                                                                </li>
2685
                                                                                <li>
2686
                                                                                        <a href="#">
2687
                                                                                        6 </a>
2688
                                                                                </li>
2689
                                                                                <li>
2690
                                                                                        <a href="#">
2691
                                                                                        <i class="fa fa-angle-right"></i>
2692
                                                                                        </a>
2693
                                                                                </li>
2694
                                                                        </ul>
2695
                                                                </div>
2696
                                                        </div>
2697
                                                </div>
2698
                                                <!-- END PAGINATION PORTLET-->
2699
                                                <!-- BEGIN PAGINATION PORTLET-->
2700
                                                <div class="portlet box yellow">
2701
                                                        <div class="portlet-title">
2702
                                                                <div class="caption">
2703
                                                                        <i class="fa fa-cogs"></i>Pager With Aligned Links
2704
                                                                </div>
2705
                                                                <div class="tools">
2706
                                                                        <a href="javascript:;" class="collapse">
2707
                                                                        </a>
2708
                                                                        <a href="#portlet-config" data-toggle="modal" class="config">
2709
                                                                        </a>
2710
                                                                        <a href="javascript:;" class="reload">
2711
                                                                        </a>
2712
                                                                        <a href="javascript:;" class="remove">
2713
                                                                        </a>
2714
                                                                </div>
2715
                                                        </div>
2716
                                                        <div class="portlet-body">
2717
                                                                <h4 class="block">Default</h4>
2718
                                                                <div class="well">
2719
                                                                         Tight pants next level keffiyeh trigger me on click haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown.
2720
                                                                </div>
2721
                                                                <ul class="pager">
2722
                                                                        <li class="previous">
2723
                                                                                <a href="#">
2724
                                                                                &larr; Older </a>
2725
                                                                        </li>
2726
                                                                        <li class="next">
2727
                                                                                <a href="#">
2728
                                                                                Newer &rarr; </a>
2729
                                                                        </li>
2730
                                                                </ul>
2731
                                                                <h4 class="block">Optional Disabled State</h4>
2732
                                                                <div class="well">
2733
                                                                         Tight pants next level keffiyeh trigger me on click haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown.
2734
                                                                </div>
2735
                                                                <ul class="pager">
2736
                                                                        <li class="previous disabled">
2737
                                                                                <a href="#">
2738
                                                                                &larr; Older </a>
2739
                                                                        </li>
2740
                                                                        <li class="next">
2741
                                                                                <a href="#">
2742
                                                                                Newer &rarr; </a>
2743
                                                                        </li>
2744
                                                                </ul>
2745
                                                                <h4 class="block">With Styled Buttons & Icons</h4>
2746
                                                                <div class="well">
2747
                                                                         Tight pants next level keffiyeh trigger me on click haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown.
2748
                                                                </div>
2749
                                                                <ul class="pager">
2750
                                                                        <li class="previous">
2751
                                                                                <a href="#" class="btn blue">
2752
                                                                                <i class="fa fa-angle-left"></i> Older </a>
2753
                                                                        </li>
2754
                                                                        <li class="next">
2755
                                                                                <a href="#" class="btn blue">
2756
                                                                                Newer <i class="fa fa-angle-right"></i>
2757
                                                                                </a>
2758
                                                                        </li>
2759
                                                                </ul>
2760
                                                        </div>
2761
                                                </div>
2762
                                                <!-- END PAGINATION PORTLET-->
2763
                                                <!-- BEGIN PAGINATION PORTLET-->
2764
                                                <div class="portlet box purple">
2765
                                                        <div class="portlet-title">
2766
                                                                <div class="caption">
2767
                                                                        <i class="fa fa-cogs"></i>Dynamic Pagination(jQuery Bootpag)
2768
                                                                </div>
2769
                                                                <div class="tools">
2770
                                                                        <a href="javascript:;" class="collapse">
2771
                                                                        </a>
2772
                                                                        <a href="#portlet-config" data-toggle="modal" class="config">
2773
                                                                        </a>
2774
                                                                </div>
2775
                                                        </div>
2776
                                                        <div class="portlet-body">
2777
                                                                <div>
2778
                                                                        <h4 class="block">Basic Pagination</h4>
2779
                                                                        <p id="dynamic_pager_content1" class="well">
2780
                                                                                 Page 1 content here
2781
                                                                        </p>
2782
                                                                        <p id="dynamic_pager_demo1">
2783
                                                                        </p>
2784
                                                                </div>
2785
                                                                <hr>
2786
                                                                <div>
2787
                                                                        <h4 class="block">Advance Pagination</h4>
2788
                                                                        <p id="dynamic_pager_content2" class="well">
2789
                                                                                 Page 1 content here
2790
                                                                        </p>
2791
                                                                        <p id="dynamic_pager_demo2">
2792
                                                                        </p>
2793
                                                                </div>
2794
                                                        </div>
2795
                                                </div>
2796
                                                <!-- END PAGINATION PORTLET-->
2797
                                                <div class="portlet box grey-cascade">
2798
                                                        <div class="portlet-title">
2799
                                                                <div class="caption">
2800
                                                                        <i class="fa fa-cogs"></i>Wells
2801
                                                                </div>
2802
                                                                <div class="tools">
2803
                                                                        <a href="javascript:;" class="collapse">
2804
                                                                        </a>
2805
                                                                        <a href="#portlet-config" data-toggle="modal" class="config">
2806
                                                                        </a>
2807
                                                                </div>
2808
                                                        </div>
2809
                                                        <div class="portlet-body">
2810
                                                                <div class="well well-lg">
2811
                                                                        <h4 class="block">I am a large well</h4>
2812
                                                                        <p>
2813
                                                                                 Tight pants next level keffiyeh trigger me on click haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown.
2814
                                                                        </p>
2815
                                                                </div>
2816
                                                                <div class="well">
2817
                                                                        <h4 class="block">I am a default well</h4>
2818
                                                                        <p>
2819
                                                                                 Tight pants next level keffiyeh trigger me on click haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown.
2820
                                                                        </p>
2821
                                                                </div>
2822
                                                                <div class="well well-sm">
2823
                                                                        <h4 class="block">I am a small well</h4>
2824
                                                                        <p>
2825
                                                                                 Tight pants next level keffiyeh trigger me on click haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown.
2826
                                                                        </p>
2827
                                                                </div>
2828
                                                        </div>
2829
                                                </div>
2830
                                                <div class="portlet box purple">
2831
                                                        <div class="portlet-title">
2832
                                                                <div class="caption">
2833
                                                                        <i class="fa fa-cogs"></i>Media Objects
2834
                                                                </div>
2835
                                                                <div class="tools">
2836
                                                                        <a href="javascript:;" class="collapse">
2837
                                                                        </a>
2838
                                                                        <a href="#portlet-config" data-toggle="modal" class="config">
2839
                                                                        </a>
2840
                                                                </div>
2841
                                                        </div>
2842
                                                        <div class="portlet-body">
2843
                                                                <div class="note note-success">
2844
                                                                        <p>
2845
                                                                                 Abstract object styles for building various types of components (like blog comments, Tweets, etc) that feature a left or right aligned image alongside textual content.
2846
                                                                        </p>
2847
                                                                </div>
2848
                                                                <div class="clearfix">
2849
                                                                        <ul class="media-list">
2850
                                                                                <li class="media">
2851
                                                                                        <a class="pull-left" href="#">
2852
                                                                                        <img class="media-object" src="holder.js/64x64" alt="">
2853
                                                                                        </a>
2854
                                                                                        <div class="media-body">
2855
                                                                                                <h4 class="media-heading">Media heading</h4>
2856
                                                                                                <p>
2857
                                                                                                         Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
2858
                                                                                                </p>
2859
                                                                                                <!-- Nested media object -->
2860
                                                                                                <div class="media">
2861
                                                                                                        <a class="pull-left" href="#">
2862
                                                                                                        <img class="media-object" src="holder.js/64x64" alt="">
2863
                                                                                                        </a>
2864
                                                                                                        <div class="media-body">
2865
                                                                                                                <h4 class="media-heading">Nested media heading</h4>
2866
                                                                                                                 Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
2867
                                                                                                                <!-- Nested media object -->
2868
                                                                                                                <div class="media">
2869
                                                                                                                        <a class="pull-left" href="#">
2870
                                                                                                                        <img class="media-object" src="holder.js/64x64" alt="">
2871
                                                                                                                        </a>
2872
                                                                                                                        <div class="media-body">
2873
                                                                                                                                <h4 class="media-heading">Nested media heading</h4>
2874
                                                                                                                                 Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
2875
                                                                                                                        </div>
2876
                                                                                                                </div>
2877
                                                                                                        </div>
2878
                                                                                                </div>
2879
                                                                                                <!-- Nested media object -->
2880
                                                                                                <div class="media">
2881
                                                                                                        <a class="pull-left" href="#">
2882
                                                                                                        <img class="media-object" src="holder.js/64x64" alt="">
2883
                                                                                                        </a>
2884
                                                                                                        <div class="media-body">
2885
                                                                                                                <h4 class="media-heading">Nested media heading</h4>
2886
                                                                                                                 Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
2887
                                                                                                        </div>
2888
                                                                                                </div>
2889
                                                                                        </div>
2890
                                                                                </li>
2891
                                                                                <li class="media">
2892
                                                                                        <a class="pull-right" href="#">
2893
                                                                                        <img class="media-object" src="holder.js/64x64" alt="">
2894
                                                                                        </a>
2895
                                                                                        <div class="media-body">
2896
                                                                                                <h4 class="media-heading">Media heading</h4>
2897
                                                                                                 Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
2898
                                                                                        </div>
2899
                                                                                </li>
2900
                                                                        </ul>
2901
                                                                </div>
2902
                                                        </div>
2903
                                                </div>
2904
                                                <div class="portlet box green">
2905
                                                        <div class="portlet-title">
2906
                                                                <div class="caption">
2907
                                                                        <i class="fa fa-cogs"></i>Thumbnails
2908
                                                                </div>
2909
                                                                <div class="tools">
2910
                                                                        <a href="javascript:;" class="collapse">
2911
                                                                        </a>
2912
                                                                        <a href="#portlet-config" data-toggle="modal" class="config">
2913
                                                                        </a>
2914
                                                                </div>
2915
                                                        </div>
2916
                                                        <div class="portlet-body">
2917
                                                                <div class="note note-info">
2918
                                                                        <p>
2919
                                                                                 Extend Bootstrap's grid system with the thumbnail component to easily display grids of images, videos, text, and more.
2920
                                                                        </p>
2921
                                                                </div>
2922
                                                                <h4 class="block">Default</h4>
2923
                                                                <div class="row">
2924
                                                                        <div class="col-sm-6 col-md-3">
2925
                                                                                <a href="#" class="thumbnail">
2926
                                                                                <img src="holder.js/100%x180" alt="100%x180" style="height: 180px; width: 100%; display: block;">
2927
                                                                                </a>
2928
                                                                        </div>
2929
                                                                        <div class="col-sm-6 col-md-3">
2930
                                                                                <a href="#" class="thumbnail">
2931
                                                                                <img src="holder.js/100%x180" alt="100%x180" style="height: 180px; width: 100%; display: block;">
2932
                                                                                </a>
2933
                                                                        </div>
2934
                                                                        <div class="col-sm-6 col-md-3">
2935
                                                                                <a href="#" class="thumbnail">
2936
                                                                                <img src="holder.js/100%x180" alt="100%x180" style="height: 180px; width: 100%; display: block;">
2937
                                                                                </a>
2938
                                                                        </div>
2939
                                                                        <div class="col-sm-6 col-md-3">
2940
                                                                                <a href="#" class="thumbnail">
2941
                                                                                <img src="holder.js/100%x180" alt="100%x180" style="height: 180px; width: 100%; display: block;">
2942
                                                                                </a>
2943
                                                                        </div>
2944
                                                                </div>
2945
                                                                <h4 class="block">Custom Content</h4>
2946
                                                                <div class="row">
2947
                                                                        <div class="col-sm-12 col-md-6">
2948
                                                                                <div class="thumbnail">
2949
                                                                                        <img src="holder.js/100%x200" alt="" style="width: 100%; height: 200px;">
2950
                                                                                        <div class="caption">
2951
                                                                                                <h3>Thumbnail label</h3>
2952
                                                                                                <p>
2953
                                                                                                         Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
2954
                                                                                                </p>
2955
                                                                                                <p>
2956
                                                                                                        <a href="#" class="btn blue">
2957
                                                                                                        Button </a>
2958
                                                                                                        <a href="#" class="btn default">
2959
                                                                                                        Button </a>
2960
                                                                                                </p>
2961
                                                                                        </div>
2962
                                                                                </div>
2963
                                                                        </div>
2964
                                                                        <div class="col-sm-12 col-md-6">
2965
                                                                                <div class="thumbnail">
2966
                                                                                        <img src="holder.js/100%x200" alt="" style="width: 100%; height: 200px;">
2967
                                                                                        <div class="caption">
2968
                                                                                                <h3>Thumbnail label</h3>
2969
                                                                                                <p>
2970
                                                                                                         Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
2971
                                                                                                </p>
2972
                                                                                                <p>
2973
                                                                                                        <a href="#" class="btn red">
2974
                                                                                                        Button </a>
2975
                                                                                                        <a href="#" class="btn default">
2976
                                                                                                        Button </a>
2977
                                                                                                </p>
2978
                                                                                        </div>
2979
                                                                                </div>
2980
                                                                        </div>
2981
                                                                </div>
2982
                                                        </div>
2983
                                                </div>
2984
                                        </div>
2985
                                        <!-- END PAGINATION PORTLET-->
2986
                                </div>
2987
                        </div>
2988
                        <!-- END PAGE CONTENT-->
2989
                </div>
2990
                <!-- END CONTENT -->
2991
                <!-- BEGIN QUICK SIDEBAR -->
2992
                <!--Cooming Soon...-->
2993
                <!-- END QUICK SIDEBAR -->
2994
        </div>
2995
        <!-- END CONTAINER -->
2996
        <!-- BEGIN FOOTER -->
2997
        <div class="page-footer">
2998
                <div class="page-footer-inner">
2999
                         2014 &copy; Metronic by keenthemes.
3000
                </div>
3001
                <div class="scroll-to-top">
3002
                        <i class="icon-arrow-up"></i>
3003
                </div>
3004
        </div>
3005
        <!-- END FOOTER -->
3006
</div>
3007
<!-- BEGIN JAVASCRIPTS(Load javascripts at bottom, this will reduce page load time) -->
3008
<!-- BEGIN CORE PLUGINS -->
3009
<!--[if lt IE 9]>
3010
<script src="../../assets/global/plugins/respond.min.js"></script>
3011
<script src="../../assets/global/plugins/excanvas.min.js"></script> 
3012
<![endif]-->
3013
<script src="../../assets/global/plugins/jquery.min.js" type="text/javascript"></script>
3014
<script src="../../assets/global/plugins/jquery-migrate.min.js" type="text/javascript"></script>
3015
<!-- IMPORTANT! Load jquery-ui.min.js before bootstrap.min.js to fix bootstrap tooltip conflict with jquery ui tooltip -->
3016
<script src="../../assets/global/plugins/jquery-ui/jquery-ui.min.js" type="text/javascript"></script>
3017
<script src="../../assets/global/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
3018
<script src="../../assets/global/plugins/bootstrap-hover-dropdown/bootstrap-hover-dropdown.min.js" type="text/javascript"></script>
3019
<script src="../../assets/global/plugins/jquery-slimscroll/jquery.slimscroll.min.js" type="text/javascript"></script>
3020
<script src="../../assets/global/plugins/jquery.blockui.min.js" type="text/javascript"></script>
3021
<script src="../../assets/global/plugins/jquery.cokie.min.js" type="text/javascript"></script>
3022
<script src="../../assets/global/plugins/uniform/jquery.uniform.min.js" type="text/javascript"></script>
3023
<script src="../../assets/global/plugins/bootstrap-switch/js/bootstrap-switch.min.js" type="text/javascript"></script>
3024
<!-- END CORE PLUGINS -->
3025
<!-- BEGIN PAGE LEVEL PLUGINS -->
3026
<script src="../../assets/global/plugins/jquery.pulsate.min.js" type="text/javascript"></script>
3027
<script src="../../assets/global/plugins/jquery-bootpag/jquery.bootpag.min.js" type="text/javascript"></script>
3028
<script src="../../assets/global/plugins/holder.js" type="text/javascript"></script>
3029
<!-- END PAGE LEVEL PLUGINS -->
3030
<!-- BEGIN PAGE LEVEL SCRIPTS -->
3031
<script src="../../assets/global/scripts/metronic.js" type="text/javascript"></script>
3032
<script src="../../assets/admin/layout2/scripts/layout.js" type="text/javascript"></script>
3033
<script src="../../assets/admin/layout2/scripts/demo.js" type="text/javascript"></script>
3034
<script src="../../assets/admin/pages/scripts/ui-general.js" type="text/javascript"></script>
3035
<!-- END PAGE LEVEL SCRIPTS -->
3036
<script>
3037
jQuery(document).ready(function() {      
3038
   // initiate layout and plugins
3039
   Metronic.init(); // init metronic core components
3040
Layout.init(); // init current layout
3041
Demo.init(); // init demo features
3042
   UIGeneral.init();
3043
});
3044
</script>
3045
<!-- END JAVASCRIPTS -->
3046
</body>
3047
<!-- END BODY -->
3048
</html>