causeway-standard-theme
Version:
1,534 lines (1,517 loc) • 65.6 kB
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2, minimum-scale=0.25">
<title>Causeway Theme</title>
<!--Favicon-->
<link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<!-- Bootstrap -->
<link href="../css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="../css/causeway-utils.css" rel="stylesheet" media="screen">
<link href="../css/causeway-standard.css" rel="stylesheet" media="screen">
<link href="../docs/css/docs.css" rel="stylesheet" media="screen">
<link href="../css/causeway-print.css" rel="stylesheet" media="print">
</head>
<body>
<div class="container site-header">
<div class="site-header-holder">
<div class="site-heading">
<div class="site-logo"></div>
<h1 class="page-title">Causeway Style</h1>
<div class="account-management dropdown">
<div class="user-avatar">
<img src="../images/image_placeholder.png">
</div>
<div class="user-info">
<a data-toggle="dropdown" href="#">Hello Guest <span class="fa fa-chevron-down"></span> </a>
<ul class="dropdown-menu">
<li>
<a>Logout</a>
</li>
</ul>
</div>
</div>
</div>
<nav class="navbar site-menu" role="navigation">
<div class="resp-back hidden-lg hidden-md">
<a href="#"><span class="fa fa-chevron-left"></span></a>
<span class="title">MENU</span>
</div>
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="../docs/index.html#style" data-hover="dropdown"> Style <span class="fa fa-chevron-down"></span> </a>
<ul class="dropdown-menu">
<li>
<a href="../docs/index.html#build"> Build Instructions </a>
</li>
<li>
<a href="../docs/index.html#javascript"> Javascript </a>
</li>
<li>
<a href="../docs/index.html#stylesheets"> Stylesheets </a>
</li>
</ul>
</li>
<li class="dropdown">
<a href="../docs/shells.html#shells" data-hover="dropdown"> Shells <span class="fa fa-chevron-down"></span> </a>
<ul class="dropdown-menu">
<li class="dropdown-submenu">
<a href="../docs/content.html#content"> Content </a>
<ul class="dropdown-menu">
<li>
<a href="../docs/content.html#content-email"> Emails </a>
</li>
<li>
<a href="../docs/content.html#content-link"> Links </a>
</li>
<li>
<a href="../docs/content.html#content-page-header"> Page Header </a>
</li>
</ul>
</li>
<li>
<a href="../docs/shells.html#footer"> Footer </a>
</li>
<li>
<a href="../docs/shells.html#header"> Header </a>
</li>
<li>
<a href="../docs/left-navigation.html#left-navigation"> Left Navigation </a>
</li>
<li>
<a href="../docs/login.html"> Login page </a>
</li>
<li>
<a href="../docs/shells.html#single-pane"> Single Pane </a>
</li>
<li>
<a href="/docs/twopane-horizontal.html#twopane-horizontal"> Two Pane - Horizontal </a>
</li>
<li>
<a href="../docs/left-navigation-rightpane.html#leftnav-twopane"> Two Pane - Horizontal (Left Navigation Shell) </a>
</li>
<li>
<a href="../docs/twopane-vertical.html#twopane-vertical"> Two Pane - Vertical </a>
</li>
</ul>
</li>
<li class="dropdown">
<a href="../docs/components.html#components" data-hover="dropdown"> Components <span class="fa fa-chevron-down"></span> </a>
<ul class="dropdown-menu">
<li>
<a href="../docs/accordion.html#accordion"> Accordion </a>
</li>
<li>
<a href="../docs/breadcrumb.html#breadcrumb"> Breadcrumb </a>
</li>
<li class="dropdown-submenu">
<a href="../docs/buttons.html#buttons"> Buttons </a>
<ul class="dropdown-menu">
<li>
<a href="../docs/buttons.html#buttons-arrow"> Arrow Button </a>
</li>
<li>
<a href="../docs/buttons.html#buttons-icon"> Icon Buttons </a>
</li>
<li>
<a href="../docs/buttons.html#buttons-multi-action"> Multi-action Buttons </a>
</li>
<li>
<a href="../docs/buttons.html#buttons-standard"> Standard Buttons </a>
</li>
<li>
<a href="../docs/buttons.html#buttons-standard-icons"> Standard Buttons with Icons </a>
</li>
<li>
<a href="../docs/buttons.html#buttons-text"> Text Button </a>
</li>
</ul>
</li>
<li>
<a href="../docs/components.html#dialog-box"> Dialog Box </a>
</li>
<li class="dropdown-submenu">
<a href="../docs/forms.html#forms"> Forms </a>
<ul class="dropdown-menu">
<li>
<a href="../docs/forms.html#forms-advanced-listbox"> Advanced Listbox </a>
</li>
<li>
<a href="../docs/forms.html#forms-checkbox"> Checkbox </a>
</li>
<li>
<a href="../docs/forms.html#forms-color"> Color </a>
</li>
<li>
<a href="../docs/forms.html#forms-currency"> Currency </a>
</li>
<li class="dropdown-submenu">
<a href="../docs/date.html#forms-date"> Date </a>
<ul class="dropdown-menu">
<li>
<a href="../docs/date.html#forms-date-range"> Date Range </a>
</li>
<li>
<a href="../docs/date.html#forms-date-single"> Single Date </a>
</li>
</ul>
</li>
<li>
<a href="../docs/forms.html#forms-email"> Email </a>
</li>
<li>
<a href="../docs/forms.html#forms-file"> File </a>
</li>
<li>
<a href="../docs/forms.html#forms-hyperlink"> Hyperlink </a>
</li>
<li>
<a href="../docs/forms.html#forms-image"> Image </a>
</li>
<li>
<a href="../docs/forms.html#forms-password"> Password </a>
</li>
<li>
<a href="../docs/forms.html#forms-radio"> Radiobutton </a>
</li>
<li class="dropdown-submenu">
<a href="../docs/select.html#forms-select"> Select </a>
<ul class="dropdown-menu">
<li>
<a href="../docs/select.html#forms-select-multiple"> Multiple Choice </a>
</li>
<li>
<a href="../docs/select.html#forms-select-single"> Single Choice </a>
</li>
</ul>
</li>
<li>
<a href="../docs/forms.html#forms-select-shuttle"> Select Shuttle </a>
</li>
<li>
<a href="../docs/forms.html#spinbox"> Spinbox </a>
</li>
<li>
<a href="../docs/forms.html#forms-telephone"> Telephone </a>
</li>
<li>
<a href="../docs/forms.html#forms-text"> Text </a>
</li>
<li>
<a href="../docs/forms.html#forms-textarea"> Textarea </a>
</li>
<li>
<a href="../docs/forms.html#forms-time"> Time </a>
</li>
<li>
<a href="../docs/forms.html#forms-tristate"> Tristate </a>
</li>
</ul>
</li>
<li>
<a href="../docs/components.html#lightbox"> LightBox </a>
</li>
<li class="dropdown-submenu">
<a href="../docs/menus.html#menus"> Menus </a>
<ul class="dropdown-menu">
<li>
<a href="../docs/menus.html#menus-dropdown"> Dropdown Menu </a>
</li>
<li>
<a href="../docs/menus.html#menus-dropdown-site"> Site Menu </a>
</li>
<li>
<a href="../docs/menus.html#menus-dropdown-page"> Page Menu </a>
</li>
<li>
<a href="../docs/menus.html#menus-three-line"> Three Line Menu </a>
</li>
</ul>
</li>
<li>
<a href="../docs/pagination.html#pagination"> Pagination </a>
</li>
<li>
<a href="../docs/site-notification.html#site-notification"> Site Notification </a>
</li>
<li>
<a href="../docs/status-indicator.html#status-indicator"> Status Indicator </a>
</li>
<li>
<a href="../docs/table.html#table"> Table </a>
</li>
<li>
<a href="../docs/components.html#tabstrip"> Tabstrip </a>
</li>
<li>
<a href="../docs/misc.html#tooltip"> Tooltip </a>
</li>
<li>
<a href="../docs/treegrid.html#treegrid"> Tree Grid </a>
</li>
<li>
<a href="../docs/treelist.html#treelist"> Tree List </a>
</li>
<li>
<a href="../docs/treesearchlist.html#treesearchlist"> Tree Search List </a>
</li>
<li>
<a href="../docs/treeview.html#treeview"> Tree View </a>
</li>
<li>
<a href="../docs/wizard.html#wizard"> Wizard </a>
</li>
</ul>
</li>
<li class="dropdown">
<a href="../docs/icons.html#content-icons" data-hover="dropdown"> Icons <span class="fa fa-chevron-down"></span> </a>
<ul class="dropdown-menu">
<li>
<a href="../docs/icons.html#favicon"> Favicon and App Icons </a>
</li>
<li>
<a href="../docs/icons.html#content-icons-available"> Available Icons </a>
</li>
<li>
<a href="../docs/icons.html#content-icons-use"> How to use </a>
</li>
</ul>
</li>
<li>
<a href="../docs/color-palette.html#color-palette"> Color Palette </a>
</li>
<li>
<a href="../index.html"> Download </a>
</li>
</ul>
<div class="additional-nav-info">
<ol class="breadcrumb">
<li><a href="#">Causeway LTD</a></li>
<li class="dropdown">
<a href="#" data-toggle="dropdown">Company Name <span class="fa fa-chevron-down"></span> </a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Sub Company A</a></li>
<li><a href="#">Sub Company B</a></li>
<li><a href="#">Sub Company C</a></li>
<li class="link"><a href="#">More</a></li>
</ul>
</li>
</ol>
<span class="cs-badge has-count">
<a href="#">
<span class="fa fa-shopping-cart"></span>
<span class="cs-badge-count">5</span>
</a>
</span>
<span class="site-notification has-notification">
<a href="#">
<span class="fa fa-bell"></span>
<span class="notification-count">5</span>
</a>
</span>
<span class="cs-badge has-count">
<a href="#">
<span class="fa fa-envelope"></span>
<span class="cs-badge-count">5</span>
</a>
</span>
<span class="additional-menu">
<a href="#" data-toggle="dropdown"> <span class="glyphicon glyphicon-threeLine-menu"></span> </a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Site Map</a></li>
<li><a href="#">Application Sample</a></li>
</ul>
</span>
</div>
</nav>
</div>
</div>
<!--Notification block starts here-->
<section class="notification-content-right">
<div class="notification-content-wrapper">
<div class="notification-header">
<h2>Notifications</h2>
</div>
<div class="notification-content">
<ul>
<li>
<strong>Far far away,</strong> behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia.
</li>
<li>
<strong>It is a paradisematic country,</strong>in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.
<a href="#">Find out more.</a>
</li>
<li>
<strong>It is a paradisematic country,</strong>in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.
<a href="#">Find out more.</a>
</li>
<li>
You have <strong>One New</strong> Pending Invitation:
<a href="#">Carillion AMBS Limited</a>.
<a href="#" class="close glyphicon glyphicon-close"></a>
</li>
<li>
You have <strong>One New</strong> Pending Invitation:
<a href="#">Amey Group Services Ltd</a>.
<a href="#" class="close glyphicon glyphicon-close"></a>
</li>
<li>
You have <strong>One New</strong> Pending Invitation:
<a href="#">Amey Group Services Ltd</a>.
<a href="#" class="close glyphicon glyphicon-close"></a>
</li>
</ul>
</div>
</div>
</section>
<!--Notification block ends here-->
<div class="container page">
<div class="content pane single-pane">
<section>
<a id="content-icons"></a>
<header class="content-header">
<h1 class="title">
Icons
</h1>
<ul class="nav nav-pills">
<li>
<a href="#favicon">
Favicon & App icon
</a>
</li>
<li>
<a href="#content-icons-use">
How to use
</a>
</li>
<li>
<a href="#content-icons-available">
Available Icons
</a>
</li>
</ul>
</header>
<a id="favicon"></a>
<header class="content-header">
<h2 class="title">
Favicon and app icon
</h2>
</header>
<p>
Download <a href="/downloads/favicon.zip" title="download favicon images">favicon</a> images and save to the root directory. Include the following code in head section.
</p>
<pre><code>
<!--Favicon block-->
<link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<!--Favicon block end-->
</code></pre>
<p>Sample manifest.json. Replace <code>"short_name": "Causeway UI Standards"</code> with Causeway product name.</p>
<pre><code>
{
"short_name": "Causeway UI Standards",
"display": "standalone",
"name": "Causeway Software Solutions Limited.",
"icons": [
{
"src": "\/android-icon-36x36.png",
"sizes": "36x36",
"type": "image\/png",
"density": "0.75"
},
{
"src": "\/android-icon-48x48.png",
"sizes": "48x48",
"type": "image\/png",
"density": "1.0"
},
{
"src": "\/android-icon-72x72.png",
"sizes": "72x72",
"type": "image\/png",
"density": "1.5"
},
{
"src": "\/android-icon-96x96.png",
"sizes": "96x96",
"type": "image\/png",
"density": "2.0"
},
{
"src": "\/android-icon-144x144.png",
"sizes": "144x144",
"type": "image\/png",
"density": "3.0"
},
{
"src": "\/android-icon-192x192.png",
"sizes": "192x192",
"type": "image\/png",
"density": "4.0"
}
]
}
</code></pre>
<a id="content-icons-use"></a>
<header class="content-header">
<h2 class="title">
How to use
</h2>
</header>
<p>
For performance reasons, all icons require a base class and individual icon class. To use, place the following code just about anywhere. Be sure to leave a space between the icon and text for proper padding.
</p>
<pre><code class="html">
<span class="glyphicon glyphicon-search"></span>
</code></pre>
<a id="content-icons-available"></a>
<header class="content-header">
<h2 class="title">
Available Bootstrap Icons
</h2>
</header>
<p>
There are 200 glyphs in font format from the Glyphicon Halflings set.
<a href="http://glyphicons.com/">
Glyphicons
</a>
Halflings are normally not available for free, but their creator has made them available for Bootstrap free of cost. As a thank you, we only ask that you to include a link back to
<a href="http://glyphicons.com/">
Glyphicons
</a>
whenever possible.
</p>
<ul class="icon-list">
<li>
<span class="glyphicon glyphicon-adjust">
</span>
<span class="glyphicon-class">
.glyphicon .glyphicon-adjust
</span>
</li>
<li>
<span class="glyphicon glyphicon-align-center">
</span>
<span class="glyphicon-class">
.glyphicon .glyphicon-align-center
</span>
</li>
<li>
<span class="glyphicon glyphicon-align-justify">
</span>
<span class="glyphicon-class">
.glyphicon .glyphicon-align-justify
</span>
</li>
<li>
<span class="glyphicon glyphicon-align-left">
</span>
<span class="glyphicon-class">
.glyphicon .glyphicon-align-left
</span>
</li>
<li>
<span class="glyphicon glyphicon-align-right">
</span>
<span class="glyphicon-class">
.glyphicon .glyphicon-align-right
</span>
</li>
<li>
<span class="glyphicon glyphicon-arrow-down">
</span>
<span class="glyphicon-class">
.glyphicon .glyphicon-arrow-down
</span>
</li>
<li>
<span class="glyphicon glyphicon-arrow-left">
</span>
<span class="glyphicon-class">
.glyphicon .glyphicon-arrow-left
</span>
</li>
<li>
<span class="glyphicon glyphicon-arrow-right">
</span>
<span class="glyphicon-class">
.glyphicon .glyphicon-arrow-right
</span>
</li>
<li>
<span class="glyphicon glyphicon-arrow-up">
</span>
<span class="glyphicon-class">
.glyphicon .glyphicon-arrow-up
</span>
</li>
<li>
<span class="glyphicon glyphicon-asterisk">
</span>
<span class="glyphicon-class">
.glyphicon .glyphicon-asterisk
</span>
</li>
<li>
<span class="glyphicon glyphicon-backward">
</span>
<span class="glyphicon-class">
.glyphicon .glyphicon-backward
</span>
</li>
<li>
<span class="glyphicon glyphicon-ban-circle">
</span>
<span class="glyphicon-class">
.glyphicon .glyphicon-ban-circle
</span>
</li>
<li>
<span class="glyphicon glyphicon-barcode">
</span>
<span class="glyphicon-class">
.glyphicon .glyphicon-barcode
</span>
</li>
<li>
<span class="glyphicon glyphicon-bell">
</span>
<span class="glyphicon-class">
.glyphicon .glyphicon-bell
</span>
</li>
<li>
<span class="glyphicon glyphicon-bold">
</span>
<span class="glyphicon-class">
.glyphicon .glyphicon-bold
</span>
</li>
<li>
<span class="glyphicon glyphicon-book">
</span>
<span class="glyphicon-class">
.glyphicon .glyphicon-book
</span>
</li>
<li>
<span class="glyphicon glyphicon-bookmark">
</span>
<span class="glyphicon-class">
.glyphicon .glyphicon-bookmark
</span>
</li>
<li>
<span class="glyphicon glyphicon-briefcase">
</span>
<span class="glyphicon-class">
.glyphicon .glyphicon-briefcase
</span>
</li>
<li>
<span class="glyphicon glyphicon-bullhorn">
</span>
<span class="glyphicon-class">
.glyphicon .glyphicon-bullhorn
</span>
</li>
<li>
<span class="glyphicon glyphicon-calendar">
</span>
<span class="glyphicon-class">
.glyphicon .glyphicon-calendar
</span>
</li>
<li>
<span class="glyphicon glyphicon-camera">
</span>
<span class="glyphicon-class">
.glyphicon .glyphicon-camera
</span>
</li>
<li>
<span class="glyphicon glyphicon-certificate">
</span>
<span class="glyphicon-class">
.glyphicon .glyphicon-certificate
</span>
</li>
<li>
<span class="glyphicon glyphicon-check">
</span>
<span class="glyphicon-class">
.glyphicon .glyphicon-check
</span>
</li>
<li>
<span class="glyphicon glyphicon-chevron-down">
</span>
<span class="glyphicon-class">
.glyphicon .glyphicon-chevron-down
</span>
</li>
<li>
<span class="glyphicon glyphicon-chevron-left">
</span>
<span class="glyphicon-class">
.glyphicon .glyphicon-chevron-left
</span>
</li>
<li>
<span class="glyphicon glyphicon-chevron-right">
</span>
<span class="glyphicon-class">
.glyphicon .glyphicon-chevron-right
</span>
</li>
<li>
<span class="glyphicon glyphicon-chevron-up">
</span>
<span class="glyphicon-class">
.glyphicon .glyphicon-chevron-up
</span>
</li>
<li>
<span class="glyphicon glyphicon-circle-arrow-down">
</span>
<span class="glyphicon-class">
.glyphicon .glyphicon-circle-arrow-down
</span>
</li>
<li>
<span class="glyphicon glyphicon-circle-arrow-left">
</span>
<span class="glyphicon-class">
.glyphicon .glyphicon-circle-arrow-left
</span>
</li>
<li>
<span class="glyphicon glyphicon-circle-arrow-right">
</span>
<span class="glyphicon-class">
.glyphicon .glyphicon-circle-arrow-right
</span>
</li>
<li>
<span class="glyphicon glyphicon-circle-arrow-up">
</span>
<span class="glyphicon-class">
.glyphicon .glyphicon-circle-arrow-up
</span>
</li>
<li>
<span class="glyphicon glyphicon-cloud">
</span>
<span class="glyphicon-class">
.glyphicon .glyphicon-cloud
</span>
</li>
<li>
<span class="glyphicon glyphicon-cloud-download">
</span>
<span class="glyphicon-class">
.glyphicon .glyphicon-cloud-download
</span>
</li>
<li>
<span class="glyphicon glyphicon-cloud-upload">
</span>
<span class="glyphicon-class">
.glyphicon .glyphicon-cloud-upload
</span>
</li>
<li>
<span class="glyphicon glyphicon-cog">
</span>
<span class="glyphicon-class">
.glyphicon .glyphicon-cog
</span>
</li>
<li>
<span class="glyphicon glyphicon-collapse-down">
</span>
<span class="glyphicon-class">
.glyphicon .glyphicon-collapse-down
</span>
</li>
<li>
<span class="glyphicon glyphicon-collapse-up">
</span>
<span class="glyphicon-class">
.glyphicon .glyphicon-collapse-up
</span>
</li>
<li>
<span class="glyphicon glyphicon-comment">
</span>
<span class="glyphicon-class">
.glyphicon .glyphicon-comment
</span>
</li>
<li>
<span class="glyphicon glyphicon-compressed">
</span>
<span class="glyphicon-class">
.glyphicon .glyphicon-compressed
</span>
</li>
<li>
<span class="glyphicon glyphicon-copyright-mark">
</span>
<span class="glyphicon-class">
.glyphicon .glyphicon-copyright-mark
</span>
</li>
<li>
<span class="glyphicon glyphicon-credit-card">
</span>
<span class="glyphicon-class">
.glyphicon .glyphicon-credit-card
</span>
</li>
<li>
<span class="glyphicon glyphicon-cutlery">
</span>
<span class="glyphicon-class">
.glyphicon .glyphicon-cutlery
</span>
</li>
<li>
<span class="glyphicon glyphicon-dashboard">
</span>
<span class="glyphicon-class">
.glyphicon .glyphicon-dashboard
</span>
</li>
<li>
<span class="glyphicon glyphicon-download">
</span>
<span class="glyphicon-class">
.glyphicon .glyphicon-download
</span>
</li>
<li>
<span class="glyphicon glyphicon-download-alt">
</span>
<span class="glyphicon-class">
.glyphicon .glyphicon-download-alt
</span>
</li>
<li>
<span class="glyphicon glyphicon-earphone">
</span>
<span class="glyphicon-class">
.glyphicon .glyphicon-earphone
</span>
</li>
<li>
<span class="glyphicon glyphicon-edit">
</span>
<span class="glyphicon-class">
.glyphicon .glyphicon-edit
</span>
</li>
<li>
<span class="glyphicon glyphicon-eject">
</span>
<span class="glyphicon-class">
.glyphicon .glyphicon-eject
</span>
</li>
<li>
<span class="glyphicon glyphicon-envelope">
</span>
<span class="glyphicon-class">
.glyphicon .glyphicon-envelope
</span>
</li>
<li>
<span class="glyphicon glyphicon-euro">
</span>
<span class="glyphicon-class">
.glyphicon .glyphicon-euro
</span>
</li>
<li>
<span class="glyphicon glyphicon-exclamation-sign">
</span>
<span class="glyphicon-class">
.glyphicon .glyphicon-exclamation-sign
</span>
</li>
<li>
<span class="glyphicon glyphicon-expand">
</span>
<span class="glyphicon-class">
.glyphicon .glyphicon-expand
</span>
</li>
<li>
<span class="glyphicon glyphicon-export">
</span>
<span class="glyphicon-class">
.glyphicon .glyphicon-export
</span>
</li>
<li>
<span class="glyphicon glyphicon-eye-close">
</span>
<span class="glyphicon-class">
.glyphicon .glyphicon-eye-close
</span>
</li>
<li>
<span class="glyphicon glyphicon-eye-open">
</span>
<span class="glyphicon-class">
.glyphicon .glyphicon-eye-open
</span>
</li>
<li>
<span class="glyphicon glyphicon-facetime-video">
</span>
<span class="glyphicon-class">
.glyphicon .glyphicon-facetime-video
</span>
</li>
<li>
<span class="glyphicon glyphicon-fast-backward">
</span>
<span class="glyphicon-class">
.glyphicon .glyphicon-fast-backward
</span>
</li>
<li>
<span class="glyphicon glyphicon-fast-forward">
</span>
<span class="glyphicon-class">
.glyphicon .glyphicon-fast-forward
</span>
</li>
<li>
<span class="glyphicon glyphicon-file">
</span>
<span class="glyphicon-class">
.glyphicon .glyphicon-file
</span>
</li>
<li>
<span class="glyphicon glyphicon-film">
</span>
<span class="glyphicon-class">
.glyphicon .glyphicon-film
</span>
</li>
<li>
<span class="glyphicon glyphicon-filter">
</span>
<span class="glyphicon-class">
.glyphicon .glyphicon-filter
</span>
</li>
<li>
<span class="glyphicon glyphicon-fire">
</span>
<span class="glyphicon-class">
.glyphicon .glyphicon-fire
</span>
</li>
<li>
<span class="glyphicon glyphicon-flag">
</span>
<span class="glyphicon-class">
.glyphicon .glyphicon-flag
</span>
</li>
<li>
<span class="glyphicon glyphicon-flash">
</span>
<span class="glyphicon-class">
.glyphicon .glyphicon-flash
</span>
</li>
<li>
<span class="glyphicon glyphicon-floppy-disk">
</span>
<span class="glyphicon-class">
.glyphicon .glyphicon-floppy-disk
</span>
</li>
<li>
<span class="glyphicon glyphicon-floppy-open">
</span>
<span class="glyphicon-class">
.glyphicon .glyphicon-floppy-open
</span>
</li>
<li>
<span class="glyphicon glyphicon-floppy-remove">
</span>
<span class="glyphicon-class">
.glyphicon .glyphicon-floppy-remove
</span>
</li>
<li>
<span class="glyphicon glyphicon-floppy-save">
</span>
<span class="glyphicon-class">
.glyphicon .glyphicon-floppy-save
</span>
</li>
<li>
<span class="glyphicon glyphicon-floppy-saved">
</span>
<span class="glyphicon-class">
.glyphicon .glyphicon-floppy-saved
</span>
</li>
<li>
<span class="glyphicon glyphicon-folder-close">
</span>
<span class="glyphicon-class">
.glyphicon .glyphicon-folder-close
</span>
</li>
<li>
<span class="glyphicon glyphicon-folder-open">
</span>
<span class="glyphicon-class">
.glyphicon .glyphicon-folder-open
</span>
</li>
<li>
<span class="glyphicon glyphicon-font">
</span>
<span class="glyphicon-class">
.glyphicon .glyphicon-font
</span>
</li>
<li>
<span class="glyphicon glyphicon-forward">
</span>
<span class="glyphicon-class">
.glyphicon .glyphicon-forward
</span>
</li>
<li>
<span class="glyphicon glyphicon-fullscreen">
</span>
<span class="glyphicon-class">
.glyphicon .glyphicon-fullscreen
</span>
</li>
<li>
<span class="glyphicon glyphicon-gbp">
</span>
<span class="glyphicon-class">
.glyphicon .glyphicon-gbp
</span>
</li>
<li>
<span class="glyphicon glyphicon-gift">
</span>
<span class="glyphicon-class">
.glyphicon .glyphicon-gift
</span>
</li>
<li>
<span class="glyphicon glyphicon-glass">
</span>
<span class="glyphicon-class">
.glyphicon .glyphicon-glass
</span>
</li>
<li>
<span class="glyphicon glyphicon-globe">
</span>
<span class="glyphicon-class">
.glyphicon .glyphicon-globe
</span>
</li>
<li>
<span class="glyphicon glyphicon-hand-down">
</span>
<span class="glyphicon-class">
.glyphicon .glyphicon-hand-down
</span>
</li>
<li>
<span class="glyphicon glyphicon-hand-left">
</span>
<span class="glyphicon-class">
.glyphicon .glyphicon-hand-left
</span>
</li>
<li>
<span class="glyphicon glyphicon-hand-right">
</span>
<span class="glyphicon-class">
.glyphicon .glyphicon-hand-right
</span>
</li>
<li>
<span class="glyphicon glyphicon-hand-up">
</span>
<span class="glyphicon-class">
.glyphicon .glyphicon-hand-up
</span>
</li>
<li>
<span class="glyphicon glyphicon-hd-video">
</span>
<span class="glyphicon-class">
.glyphicon .glyphicon-hd-video
</span>
</li>
<li>
<span class="glyphicon glyphicon-hdd">
</span>
<span class="glyphicon-class">
.glyphicon .glyphicon-hdd
</span>
</li>
<li>
<span class="glyphicon glyphicon-header">
</span>
<span class="glyphicon-class">
.glyphicon .glyphicon-header
</span>
</li>
<li>
<span class="glyphicon glyphicon-headphones">
</span>
<span class="glyphicon-class">
.glyphicon .glyphicon-headphones
</span>
</li>
<li>
<span class="glyphicon glyphicon-heart">
</span>
<span class="glyphicon-class">
.glyphicon .glyphicon-heart
</span>
</li>
<li>
<span class="glyphicon glyphicon-heart-empty">
</span>
<span class="glyphicon-class">
.glyphicon .glyphicon-heart-empty
</span>
</li>
<li>
<span class="glyphicon glyphicon-home">
</span>
<span class="glyphicon-class">
.glyphicon .glyphicon-home
</span>
</li>
<li>
<span class="glyphicon glyphicon-import">
</span>
<span class="glyphicon-class">
.glyphicon .glyphicon-import
</span>
</li>
<li>
<span class="glyphicon glyphicon-inbox">
</span>
<span class="glyphicon-class">
.glyphicon .glyphicon-inbox
</span>
</li>
<li>
<span class="glyphicon glyphicon-indent-left">
</span>
<span class="glyphicon-class">
.glyphicon .glyphicon-indent-left
</span>
</li>
<li>
<span class="glyphicon glyphicon-indent-right">
</span>
<span class="glyphicon-class">
.glyphicon .glyphicon-indent-right
</span>
</li>
<li>
<span class="glyphicon glyphicon-info-sign">
</span>
<span class="glyphicon-class">
.glyphicon .glyphicon-info-sign
</span>
</li>
<li>
<span class="glyphicon glyphicon-italic">
</span>
<span class="glyphicon-class">
.glyphicon .glyphicon-italic
</span>
</li>
<li>
<span class="glyphicon glyphicon-leaf">
</span>
<span class="glyphicon-class">
.glyphicon .glyphicon-leaf
</span>
</li>
<li>
<span class="glyphicon glyphicon-link">
</span>
<span class="glyphicon-class">
.glyphicon .glyphicon-link
</span>
</li>
<li>
<span class="glyphicon glyphicon-list">
</span>
<span class="glyphicon-class">
.glyphicon .glyphicon-list
</span>
</li>
<li>
<span class="glyphicon glyphicon-list-alt">
</span>
<span class="glyphicon-class">
.glyphicon .glyphicon-list-alt
</span>
</li>
<li>
<span class="glyphicon glyphicon-lock">
</span>
<span class="glyphicon-class">
.glyphicon .glyphicon-lock
</span>
</li>
<li>
<span class="glyphicon glyphicon-log-in">
</span>
<span class="glyphicon-class">
.glyphicon .glyphicon-log-in
</span>
</li>
<li>
<span class="glyphicon glyphicon-log-out">
</span>
<span class="glyphicon-class">
.glyphicon .glyphicon-log-out
</span>
</li>
<li>
<span class="glyphicon glyphicon-magnet">
</span>
<span class="glyphicon-class">
.glyphicon .glyphicon-magnet
</span>
</li>
<li>
<span class="glyphicon glyphicon-map-marker">
</span>
<span class="glyphicon-class">
.glyphicon .glyphicon-map-marker
</span>
</li>
<li>
<span class="glyphicon glyphicon-minus">
</span>
<span class="glyphicon-class">
.glyphicon .glyphicon-minus
</span>
</li>
<li>
<span class="glyphicon glyphicon-minus-sign">
</span>
<span class="glyphicon-class">
.glyphicon .glyphicon-minus-sign
</span>
</li>
<li>
<span class="glyphicon glyphicon-move">
</span>
<span class="glyphicon-class">
.glyphicon .glyphicon-move
</span>
</li>
<li>
<span class="glyphicon glyphicon-music">
</span>
<span class="glyphicon-class">
.glyphicon .glyphicon-music
</span>
</li>
<li>
<span class="glyphicon glyphicon-new-window">
</span>
<span class="glyphicon-class">
.glyphicon .glyphicon-new-window
</span>
</li>
<li>
<span class="glyphicon glyphicon-off">
</span>
<span class="glyphicon-class">
.glyphicon .glyphicon-off
</span>
</li>
<li>
<span class="glyphicon glyphicon-ok">
</span>
<span class="glyphicon-class">
.glyphicon .glyphicon-ok
</span>
</li>
<li>
<span class="glyphicon glyphicon-ok-circle">
</span>
<span class="glyphicon-class">
.glyphicon .glyphicon-ok-circle
</span>
</li>
<li>
<span class="glyphicon glyphicon-ok-sign">
</span>
<span class="glyphicon-class">
.glyphicon .glyphicon-ok-sign
</span>
</li>
<li>
<span class="glyphicon glyphicon-open">
</span>
<span class="glyphicon-class">
.glyphicon .glyphicon-open
</span>
</li>
<li>
<span class="glyphicon glyphicon-paperclip">
</span>
<span class="glyphicon-class">
.glyphicon .glyphicon-paperclip
</span>
</li>
<li>
<span class="glyphicon glyphicon-pause">
</span>
<span class="glyphicon-class">
.glyphicon .glyphicon-pause
</span>
</li>
<li>
<span class="glyphicon glyphicon-pencil">
</span>
<span class="glyphicon-class">
.glyphicon .glyphicon-pencil
</span>
</li>
<li>
<span class="glyphicon glyphicon-phone">
</span>
<span class="glyphicon-class">
.glyphicon .glyphicon-phone
</span>
</li>
<li>
<span class="glyphicon glyphicon-phone-alt">
</span>
<span class="glyphicon-class">
.glyphicon .glyphicon-phone-alt
</span>
</li>
<li>
<span class="glyphicon glyphicon-picture">
</span>
<span class="glyphicon-class">
.glyphicon .glyphicon-picture
</span>
</li>
<li>
<span class="glyphicon glyphicon-plane">
</span>
<span class="glyphicon-class">
.glyphicon .glyphicon-plane
</span>
</li>
<li>
<span class="glyphicon glyphicon-play">
</span>
<span class="glyphicon-class">
.glyphicon .glyphicon-play
</span>
</li>
<li>
<span class="glyphicon glyphicon-play-circle">
</span>
<span class="glyphicon-class">
.glyphicon .glyphicon-play-circle
</span>
</li>
<li>
<span class="glyphicon glyphicon-plus">
</span>
<span class="glyphicon-class">
.glyphicon .glyphicon-plus
</span>
</li>
<li>
<span class="glyphicon glyphicon-plus-sign">
</span>
<span class="glyphicon-class">
.glyphicon .glyphicon-plus-sign
</span>
</li>
<li>
<span class="glyphicon glyphicon-print">
</span>
<span class="glyphicon-class">
.glyphicon .glyphicon-print
</span>
</li>
<li>
<span class="glyphicon glyphicon-pushpin">
</span>
<span class="glyphicon-class">
.glyphicon .glyphicon-pushpin
</span>
</li>
<li>
<span class="glyphicon glyphicon-qrcode">
</span>
<span class="glyphicon-class">
.glyphicon .glyphicon-qrcode
</span>
</li>
<li>
<span class="glyphicon glyphicon-question-sign">
</span>
<span class="glyphicon-class">
.glyphicon .glyphicon-question-sign
</span>
</li>
<li>
<span class="glyphicon glyphicon-random">
</span>
<span class="glyphicon-class">
.glyphicon .glyphicon-random
</span>
</li>
<li>
<span class="glyphicon glyphicon-record">
</span>
<span class="glyphicon-class">
.glyphicon .glyphicon-record
</span>
</li>
<li>
<span class="glyphicon glyphicon-refresh">
</span>
<span class="glyphicon-class">
.glyphicon .glyphicon-refresh
</span>
</li>
<li>
<span class="glyphicon glyphicon-registration-mark">
</span>
<span class="glyphicon-class">
.glyphicon .glyphicon-registration-mark
</span>
</li>
<li>
<span class="glyphicon glyphicon-remove">
</span>
<span class="glyphicon-class">
.glyphicon .glyphicon-remove
</span>
</li>
<li>
<span class="glyphicon glyphicon-remove-circle">
</span>
<span class="glyphicon-class">
.glyphicon .glyphicon-remove-circle
</span>
</li>
<li>
<span class="glyphicon glyphicon-remove-sign">
</span>
<span class="glyphicon-class">
.glyphicon .glyphicon-remove-sign
</span>
</li>
<li>
<span class="glyphicon glyphicon-repeat">
</span>
<span class="glyphicon-class">
.glyphicon .glyphicon-repeat
</span>
</li>
<li>
<span class="glyphicon glyphicon-resize-full">
</span>
<span class="glyphicon-class">
.glyphicon .glyphicon-resize-full
</span>
</li>
<li>
<span class="glyphicon glyphicon-resize-horizontal">
</span>
<span class="glyphicon-class">
.glyphicon .glyphicon-resize-horizontal
</span>
</li>
<li>
<span class="glyphicon glyphicon-resize-small">
</span>
<span class="glyphicon-class">
.glyphicon .glyphicon-resize-small
</span>
</li>
<li>
<span class="glyphicon glyphicon-resize-vertical">
</span>
<span class="glyphicon-class">
.glyphicon .glyphicon-resize-vertical
</span>
</li>
<li>
<span class="glyphicon glyphicon-retweet">
</span>
<span class="glyphicon-class">
.glyphicon .glyphicon-retweet
</span>
</li>
<li>
<span class="glyphicon glyphicon-road">
</span>
<span class="glyphicon-class">
.glyphicon .glyphicon-road
</span>
</li>
<li>
<span class="glyphicon glyphicon-save">
</span>
<span class="glyphicon-class">
.glyphi