UNPKG

causeway-standard-theme

Version:

2,073 lines 65.6 kB
<!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>
  &lt;!--Favicon block--&gt;
  &lt;link rel=&quot;apple-touch-icon&quot; sizes=&quot;57x57&quot; href=&quot;/apple-icon-57x57.png&quot;&gt;
  &lt;link rel=&quot;apple-touch-icon&quot; sizes=&quot;60x60&quot; href=&quot;/apple-icon-60x60.png&quot;&gt;
  &lt;link rel=&quot;apple-touch-icon&quot; sizes=&quot;72x72&quot; href=&quot;/apple-icon-72x72.png&quot;&gt;
  &lt;link rel=&quot;apple-touch-icon&quot; sizes=&quot;76x76&quot; href=&quot;/apple-icon-76x76.png&quot;&gt;
  &lt;link rel=&quot;apple-touch-icon&quot; sizes=&quot;114x114&quot; href=&quot;/apple-icon-114x114.png&quot;&gt;
  &lt;link rel=&quot;apple-touch-icon&quot; sizes=&quot;120x120&quot; href=&quot;/apple-icon-120x120.png&quot;&gt;
  &lt;link rel=&quot;apple-touch-icon&quot; sizes=&quot;144x144&quot; href=&quot;/apple-icon-144x144.png&quot;&gt;
  &lt;link rel=&quot;apple-touch-icon&quot; sizes=&quot;152x152&quot; href=&quot;/apple-icon-152x152.png&quot;&gt;
  &lt;link rel=&quot;apple-touch-icon&quot; sizes=&quot;180x180&quot; href=&quot;/apple-icon-180x180.png&quot;&gt;
  &lt;link rel=&quot;icon&quot; type=&quot;image/png&quot; sizes=&quot;192x192&quot;  href=&quot;/android-icon-192x192.png&quot;&gt;
  &lt;link rel=&quot;icon&quot; type=&quot;image/png&quot; sizes=&quot;32x32&quot; href=&quot;/favicon-32x32.png&quot;&gt;
  &lt;link rel=&quot;icon&quot; type=&quot;image/png&quot; sizes=&quot;96x96&quot; href=&quot;/favicon-96x96.png&quot;&gt;
  &lt;link rel=&quot;icon&quot; type=&quot;image/png&quot; sizes=&quot;16x16&quot; href=&quot;/favicon-16x16.png&quot;&gt;
  &lt;link rel=&quot;manifest&quot; href=&quot;/manifest.json&quot;&gt;
  &lt;!--Favicon block end--&gt;
      </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">
  &lt;span class="glyphicon glyphicon-search"&gt;&lt;/span&gt;
      </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">
            .glyphicon .glyphicon-save
          </span>
        </li>
        <li>
          <span class="glyphicon glyphicon-saved">
          </span>
          <span class="glyphicon-class">
            .glyphicon .glyphicon-saved
          </span>
        </li>
        <li>
          <span class="glyphicon glyphicon-screenshot">
          </span>
          <span class="glyphicon-class">
            .glyphicon .glyphicon-screenshot
          </span>
        </li>
        <li>
          <span class="glyphicon glyphicon-sd-video">
          </span>
          <span class="glyphicon-class">
            .glyphicon .glyphicon-sd-video
          </span>
        </li>
        <li>
          <span class="glyphicon glyphicon-search">
          </span>
          <span class="glyphicon-class">
            .glyphicon .glyphicon-search
          </span>
        </li>
        <li>
          <span class="glyphicon glyphicon-send">
          </span>
          <span class="glyphicon-class">
            .glyphicon .glyphicon-send
          </span>
        </li>
        <li>
          <span class="glyphicon glyphicon-share">
          </span>
          <span class="glyphicon-class">
            .glyphicon .glyphicon-share
          </span>
        </li>
        <li>
          <span class="glyphicon glyphicon-share-alt">
          </span>
          <span class="glyphicon-class">
            .glyphicon .glyphicon-share-alt
          </span>
        </li>
        <li>
          <span class="glyphicon glyphicon-shopping-cart">
          </span>
          <span class="glyphicon-class">
            .glyphicon .glyphicon-shopping-cart
          </span>
        </li>
        <li>
          <span class="glyphicon glyphicon-signal">
          </span>
          <span class="glyphicon-class">
            .glyphicon .glyphicon-signal
          </span>
        </li>
        <li>
          <span class="glyphicon glyphicon-sort">
          </span>
          <span class="glyphicon-class">
            .glyphicon .glyphicon-sort
          </span>
        </li>
        <li>
          <span class="glyphicon glyphicon-sort-by-alphabet">
          </span>
          <span class="glyphicon-class">
            .glyphicon .glyphicon-sort-by-alphabet
          </span>
        </li>
        <li>
          <span class="glyphicon glyphicon-sort-by-alphabet-alt">
          </span>
          <span class="glyphicon-class">
            .glyphicon .glyphicon-sort-by-alphabet-alt
          </span>
        </li>
        <li>
          <span class="glyphicon glyphicon-sort-by-attributes">
          </span>
          <span class="glyphicon-class">
            .glyphicon .glyphicon-sort-by-attributes
          </span>
        </li>
        <li>
          <span class="glyphicon glyphicon-sort-by-attributes-alt">
          </span>
          <span class="glyphicon-class">
            .glyphicon .glyphicon-sort-by-attributes-alt
          </span>
        </li>
        <li>
          <span class="glyphicon glyphicon-sort-by-order">
          </span>
          <span class="glyphicon-class">
            .glyphicon .glyphicon-sort-by-order
          </span>
        </li>
        <li>
          <span class="glyphicon glyphicon-sort-by-order-alt">
          </span>
          <span class="glyphicon-class">
            .glyphicon .glyphicon-sort-by-order-alt
          </span>
        </li>
        <li>
          <span class="glyphicon glyphicon-sound-5-1">
          </span>
          <span class="glyphicon-class">
            .glyphicon .glyphicon-sound-5-1
          </span>
        </li>
        <li>
          <span class="glyphicon glyphicon-sound-6-1">
          </span>
          <span class="glyphicon-class">
            .glyphicon .glyphicon-sound-6-1
          </span>
        </li>
        <li>
          <span class="glyphicon glyphicon-sound-7-1">
          </span>
          <span class="glyphicon-class">
            .glyphicon .glyphicon-sound-7-1
          </span>
        </li>
        <li>
          <span class="glyphicon glyphicon-sound-dolby">
          </span>
          <span class="glyphicon-class">
            .glyphicon .glyphicon-sound-dolby
          </span>
        </li>
        <li>
          <span class="glyphicon glyphicon-sound-stereo">
          </span>
          <span class="glyphicon-class">
            .glyphicon .glyphicon-sound-stereo
          </span>
        </li>
        <li>
          <span class="glyphicon glyphicon-star">
          </span>
          <span class="glyphicon-class">
            .glyphicon .glyphicon-star
          </span>
        </li>
        <li>
          <span class="glyphicon glyphicon-star-empty">
          </span>
          <span class="glyphicon-class">
            .glyphicon .glyphicon-star-empty
          </span>
        </li>
        <li>
          <span class="glyphicon glyphicon-stats">
          </span>
          <span class="glyphicon-class">
            .glyphicon .glyphicon-stats
          </span>
        </li>
        <li>
          <span class="glyphicon glyphicon-step-backward">
          </span>
          <span class="glyphicon-class">
            .glyphicon .glyphicon-step-backward
          </span>
        </li>
        <li>
          <span class="glyphicon glyphicon-step-forward">
          </span>
          <span class="glyphicon-class">
            .glyphicon .glyphicon-step-forward
          </span>
        </li>
        <li>
          <span class="glyphicon glyphicon-stop">
          </span>
          <span class="glyphicon-class">
            .glyphicon .glyphicon-stop
          </span>
        </li>
        <li>
          <span class="glyphicon glyphicon-subtitles">
          </span>
          <span class="glyphicon-class">
            .glyphicon .glyphicon-subtitles
          </span>
        </li>
        <li>
          <span class="glyphicon glyphicon-tag">
          </span>
          <span class="glyphicon-class">
            .glyphicon .glyphicon-tag
          </span>
        </li>
        <li>
          <span class="glyphicon glyphicon-tags">
          </span>
          <span class="glyphicon-class">
            .glyphicon .glyphicon-tags
          </span>
        </li>
        <li>
          <span class="glyphicon glyphicon-tasks">
          </span>
          <span class="glyphicon-class">
            .glyphicon .glyphicon-tasks
          </span>
        </li>
        <li>
          <span class="glyphicon glyphicon-text-height">
          </span>
          <span class="glyphicon-class">
            .glyphicon .glyphicon-text-height
          </span>
        </li>
        <li>
          <span class="glyphicon glyphicon-text-width">
          </span>
          <span class="glyphicon-class">
            .glyphicon .glyphicon-text-width
          </span>
        </li>
        <li>
          <span class="glyphicon glyphicon-th">
          </span>
          <span class="glyphicon-class">
            .glyphicon .glyphicon-th
          </span>
        </li>
        <li>
          <span class="glyphicon glyphicon-th-large">
          </span>
          <span class="glyphicon-class">
            .glyphicon .glyphicon-th-large
          </span>
        </li>
        <li>
          <span class="glyphicon glyphicon-th-list">
          </span>
          <span class="glyphicon-class">
            .glyphicon .glyphicon-th-list
          </span>
        </li>
        <li>
          <span class="glyphicon glyphicon-thumbs-down">
          </span>
          <span class="glyphicon-class">
            .glyphicon .glyphicon-thumbs-down
          </span>
        </li>
        <li>
          <span class="glyphicon glyphicon-thumbs-up">
          </span>
          <span class="glyphicon-class">
            .glyphicon .glyphicon-thumbs-up
          </span>
        </li>
        <li>
          <span class="glyphicon glyphicon-time">
          </span>
          <span class="glyphicon-class">
            .glyphicon .glyphicon-time
          </span>
        </li>
        <li>
          <span class="glyphicon glyphicon-tint">
          </span>
          <span class="glyphicon-class">
            .glyphicon .glyphicon-tint
          </span>
        </li>
        <li>
          <span class="glyphicon glyphicon-tower">
          </span>
          <span class="glyphicon-class">
            .glyphicon .glyphicon-tower
          </span>
        </li>
        <li>
          <span class="glyphicon glyphicon-transfer">
          </span>
          <span class="glyphicon-class">
            .glyphicon .glyphicon-transfer
          </span>
        </li>
        <li>
          <span class="glyphicon glyphicon-trash">
          </span>
          <span class="glyphicon-class">
            .glyphicon .glyphicon-trash
          </span>
        </li>
        <li>
          <span class="glyphicon glyphicon-tree-conifer">
          </span>
          <span class="glyphicon-class">
            .glyphicon .glyphicon-tree-conifer
          </span>
        </li>
        <li>
          <span class="glyphicon glyphicon-tree-deciduous">
          </span>
          <span class="glyphicon-class">
            .glyphicon .glyphicon-tree-deciduous
          </span>
        </li>
        <li>
          <span class="glyphicon glyphicon-unchecked">
          </span>
          <span class="glyphicon-class">
            .glyphicon .glyphicon-unchecked
          </span>
        </li>
        <li>
          <span class="glyphicon glyphicon-upload">
          </span>
          <span class="glyphicon-class">
            .glyphicon .glyphicon-upload
          </span>
        </li>
        <li>
          <span class="glyphicon glyphicon-usd">
          </span>
          <span class="glyphicon-class">
            .glyphicon .glyphicon-usd
          </span>
        </li>
        <li>
          <span class="glyphicon glyphicon-user">
          </span>
          <span class="glyphicon-class">
            .glyphicon .glyphicon-user
          </span>
        </li>
        <li>
          <span class="glyphicon glyphicon-volume-down">
          </span>
          <span class="glyphicon-class">
            .glyphicon .glyphicon-volume-down
          </span>
        </li>
        <li>
          <span class="glyphicon glyphicon-volume-off">
          </span>
          <span class="glyphicon-class">
            .glyphicon .glyphicon-volume-off
          </span>
        </li>
        <li>
          <span class="glyphicon glyphicon-volume-up">
          </span>
          <span class="glyphicon-class">
            .glyphicon .glyphicon-volume-up
          </span>
        </li>
        <li>
          <span class="glyphicon glyphicon-warning-sign">
          </span>
          <span class="glyphicon-class">
            .glyphicon .glyphicon-warning-sign
          </span>
        </li>
        <li>
          <span class="glyphicon glyphicon-wrench">
          </span>
          <span class="glyphicon-class">
            .glyphicon .glyphicon-wrench
          </span>
        </li>
        <li>
          <span class="glyphicon glyphicon-zoom-in">
          </span>
          <span class="glyphicon-class">
            .glyphicon .glyphicon-zoom-in
          </span>
        </li>
        <li>
          <span class="glyphicon glyphicon-zoom-out">
          </span>
          <span class="glyphicon-class">
            .glyphicon .glyphicon-zoom-out
          </span>
        </li>
      </ul>

      <header class="content-header">
        <h2 class="title">
          Available Causeway Custom Built Icons
        </h2>
      </header>
      <ul class="icon-list">
        <li>
          <span class="glyphicon glyphicon-pagination-first">
          </span>
          <span class="glyphicon-class">
            .glyphicon .glyphicon-pagination-first
          </span>
        </li>
        <li>
          <span class="glyphicon glyphicon-pagination-prev">
          </span>
          <span class="glyphicon-class">
            .glyphicon .glyphicon-pagination-prev
          </span>
        </li>
        <li>
          <span class="glyphicon glyphicon-pagination-next">
          </span>
          <span class="glyphicon-class">
            .glyphicon .glyphicon-pagination-next
          </span>
        </li>
        <li>
          <span class="glyphicon glyphicon-pagination-last">
          </span>
          <span class="glyphicon-class">
            .glyphicon .glyphicon-pagination-last
          </span>
        </li>
        <li>
          <span class="glyphicon glyphicon-threeLine-menu">
          </span>
          <span class="glyphicon-class">
            .glyphicon .glyphicon-threeLine-menu
          </span>
        </li>
        <li>
          <span class="glyphicon glyphicon-tree-plus">
          </span>
          <span class="glyphicon-class">
            .glyphicon .glyphicon-tree-plus
          </span>
        </li>
        <li>
          <span class="glyphicon glyphicon-tree-minus">
          </span>
          <span class="glyphicon-class">
            .glyphicon .glyphicon-tree-minus
          </span>
        </li>
        <li>
          <span class="glyphicon glyphicon-notification">
          </span>
          <span class="glyphicon-class">
            .glyphicon .glyphicon-notification
          </span>
        </li>
        <li>
          <span class="glyphicon glyphicon-close">
          </span>
          <span class="glyphicon-class">
            .glyphicon .glyphicon-close
          </span>
        </li>
        <li>
          <span class="glyphicon glyphicon-thick-tick">
          </span>
          <span class="glyphicon-class">
            .glyphicon .glyphicon-thick-tick
          </span>
        </li>
        <li>
          <span class="glyphicon glyphicon-caret-up">
          </span>
          <span class="glyphicon-class">
            .glyphicon .glyphicon-caret-up
          </span>
        </li>
        <li>
          <span class="glyphicon glyphicon-caret-down">
          </span>
          <span class="glyphicon-class">
            .glyphicon .glyphicon-caret-down
          </span>
        </li>
        <li>
          <span class="glyphicon glyphicon-caret-left">
          </span>
          <span class="glyphicon-class">
            .glyphicon .glyphicon-caret-left
          </span>
        </li>
        <li>
          <span class="glyphicon glyphicon-caret-right">
          </span>
          <span class="glyphicon-class">
            .glyphicon .glyphicon-caret-right
          </span>
        </li>
        <li>
          <span class="glyphicon glyphicon-circle">
          </span>
          <span class="glyphicon-class">
            .glyphicon .glyphicon-circle
          </span>
        </li>
      </ul>
    </section>
  </div>
</div>

    <div class="container site-footer">
      <div class="status-holder">
        <div class="status-message"></div>
      </div>
      <!--<a href="#" class="site-footer-toggle">-->
        <!--<span class="fa fa-chevron-down"></span>-->
      <!--</a>-->
    </div>
    <script src="/js/jquery.js"></script>
    <script src="/js/bootstrap.min.js"></script>
    <script src="/js/causeway-utils.min.js"></script>
    <script src="/js/causeway.js"></script>
    <script src="/js/responsive.js"></script>
    <script src="/docs/js/docs.js"></script>
    <script>
      (function(window, $){
        var statusHolder = $('.status-message'),
          date = new Date();
          var message = "Copyright © 1998-" + date.getFullYear() + " Causeway Software Solutions Limited.";
          statusHolder.html(message);
      }(window, jQuery));
    </script>

  </body>
</html>