reimagine2 2.0.28

data/spec/dummy/app/views/application/tabs.html.erb

@@ -0,0 +1,22 @@
+<div class="row">
+  <ul class="tab-nav">
+
+    <li class="active">
+      <%= link_to "Home", "#" %>
+    </li>
+    <li>
+      <%= link_to "Rules", "#" %>
+    </li>
+    <li>
+      <%= link_to "Discussions", "#" %>
+    </li>
+  </ul>
+</div>
+
+<div id="container" class="row">
+  <div class="small-12 columns">
+    <h1>Yo</h1>
+    <p>haha</p>
+  </div>
+</div>
+

data/spec/dummy/app/views/application/type.html.erb

@@ -0,0 +1,119 @@
+<div class="row">
+  <div class="large-12 columns">
+    <h1>h1. This is header level 1.</h1>
+
+    <p>
+      This is a paragraph. Paragraphs are preset with a font size, line height and spacing to match the overall vertical rhythm. To show what a paragraph looks like this needs a little more content so, did you know that there are storms occurring on Jupiter that are larger than the Earth? Pretty cool.
+    </p>
+
+    <h2>h2. This is header level 2.</h2>
+
+    <p>
+      This is a paragraph. Paragraphs are preset with a font size, line height and spacing to match the overall vertical rhythm. To show what a paragraph looks like this needs a little more content so, did you know that there are storms occurring on Jupiter that are larger than the Earth? Pretty cool.
+    </p>
+
+    <h3>h3. This is header level 3.</h3>
+
+    <p>
+      This is a paragraph. Paragraphs are preset with a font size, line height and spacing to match the overall vertical rhythm. To show what a paragraph looks like this needs a little more content so, did you know that there are storms occurring on Jupiter that are larger than the Earth? Pretty cool.
+    </p>
+
+    <h4>h4. This is header level 4.</h4>
+
+    <p>
+      This is a paragraph. Paragraphs are preset with a font size, line height and spacing to match the overall vertical rhythm. To show what a paragraph looks like this needs a little more content so, did you know that there are storms occurring on Jupiter that are larger than the Earth? Pretty cool.
+    </p>
+
+    <p>
+      This is a paragraph with some <code>&lt;small&gt;</code><small>small text</small><code>&lt;/small&gt;</code>. The <code>&lt;small&gt;</code> tag keeps the line height because it's meant to be use within content that is now <code>&lt;small&gt;</code>.
+    </p>
+
+    <p class="small">
+      However, if your entire paragraph is small, then maybe you should use the <code>.small</code> class on it instead. Small text with huge line-height looks quite strange. And <code>&lt;small&gt;</code> had a <code>line-height: inherit;</code> CSS rule so it will have the same line height as it's parent. One would think that if the parent <code>line-height</code> is relative (uses <code>em's</code> or <code>%'s</code>) then <code>inherit</code> means that <code>&lt;small&gt;</code> will have a relative <code>line-height</code>, too. But the <code>inherit</code> property uses the computed values.<br>
+
+      For example, a <code>&lt;p&gt;</code> with <code>font-size: 16px; line-height: 1.5;</code> will have a computed <code>line-height: 24px;</code>, and so will the text within <code>&lt;small&gt;</code>.
+    </p>
+
+    <h5>h5. This is header level 5.</h5>
+
+    <p>
+      This is a paragraph. Paragraphs are preset with a font size, line height and spacing to match the overall vertical rhythm. To show what a paragraph looks like this needs a little more content so, did you know that there are storms occurring on Jupiter that are larger than the Earth? Pretty cool.
+    </p>
+
+
+    <h6>h6. This is header level 6.</h6>
+
+    <p>
+      This is a paragraph. Paragraphs are preset with a font size, line height and spacing to match the overall vertical rhythm. To show what a paragraph looks like this needs a little more content so, did you know that there are storms occurring on Jupiter that are larger than the Earth? Pretty cool.
+    </p>
+
+
+    <h2>lists</h2>
+
+    <div class="row">
+      <div class="large-3 columns ">
+        <div class="panel">
+          <ul class="">
+            <li><code>ul</code></li>
+            <li><code>ul</code></li>
+            <li><code>ul</code></li>
+            <li><code>ul</code></li>
+          </ul>
+        </div>
+      </div>
+
+      <div class="large-3 columns">
+        <div class="panel">
+          <ul class="inline-list">
+            <li><code>ul.inline-list</code></li>
+            <li><code>ul.inline-list</code></li>
+            <li><code>ul.inline-list</code></li>
+            <li><code>ul.inline-list</code></li>
+          </ul>
+        </div>
+      </div>
+
+      <div class="large-3 columns ">
+        <div class="panel">
+          <ul class="no-bullet">
+            <li><code>ul.no-bullet</code></li>
+            <li><code>ul.no-bullet</code></li>
+            <li><code>ul.no-bullet</code></li>
+            <li><code>ul.no-bullet</code></li>
+          </ul>
+        </div>
+      </div>
+      <div class="large-3 columns">
+        <div class="panel">
+          <ul class="no-bullet inline-list">
+            <li><code>ul.no-bullet.inline-list</code></li>
+            <li><code>ul.no-bullet.inline-list</code></li>
+            <li><code>ul.no-bullet.inline-list</code></li>
+            <li><code>ul.no-bullet.inline-list</code></li>
+          </ul>
+        </div>
+      </div>
+    </div>
+    <div class="row">
+      <div class="large-9 columns">
+        <div class="panel">
+          <ul class="no-bullet inline-list">
+            <li><code>ul.no-bullet.inline-list</code></li>
+            <li><code>ul.no-bullet.inline-list</code></li>
+            <li><code>ul.no-bullet.inline-list</code></li>
+            <li><code>ul.no-bullet.inline-list</code></li>
+            <li><code>ul</code></li>
+            <li><code>.no-bullet</code></li>
+            <li><code>.inline-list</code></li>
+            <li><code>ul</code></li>
+            <li><code>.no-bullet</code></li>
+            <li><code>.inline-list</code></li>
+            <li><code>ul</code></li>
+            <li><code>.no-bullet</code></li>
+            <li><code>.inline-list</code></li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

data/spec/dummy/app/views/layouts/application.html.erb

@@ -0,0 +1,34 @@
+<!--[if IE 8]>         <html class="no-js lt-ie9" lang="en" > <![endif]-->
+  <!DOCTYPE html>
+<!--[if gt IE 8]><!--> <html class="no-js" lang="en" > <!--<![endif]-->
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width">
+    <title>Reimagine2</title>
+
+    <%= stylesheet_link_tag 'reimagine2' %>
+    <%= stylesheet_link_tag 'application' %>
+  </head>
+<body class="foundation-grid">
+  <section class="row">
+    <ul class="no-bullet inline-list">
+      <li class="button secondary"><a href="/buttons">Buttons</a></li>
+      <li class="button secondary"><a href="/forms">Forms</a></li>
+      <li class="button secondary"><a href="/type">Typography</a></li>
+      <li class="button secondary"><a href="/tabs">Tabs</a></li>
+      <li class="button secondary"><a href="/doc1" target="_blank">SS Standard</a></li>
+      <li class="button secondary"><a href="/doc2" target="_blank">SS Social</a></li>
+    </ul>
+  </section>
+
+  <div class="main">
+    <%= yield %>
+  </div>
+
+  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
+  <script src="javascripts/main.js"></script>
+  <script>
+    $(document).foundation();
+  </script>
+</body>
+</html>

data/spec/dummy/app/views/shared_views/large_12.html.erb

@@ -0,0 +1,3 @@
+<%= render layout: 'reimagine2/twelve_columns' do %>
+  twelve columns
+<% end %>

data/spec/dummy/config.ru

@@ -0,0 +1,4 @@
+# This file is used by Rack-based servers to start the application.
+
+require ::File.expand_path('../config/environment',  __FILE__)
+run Dummy::Application

data/spec/dummy/config/application.rb

@@ -0,0 +1,48 @@
+require File.expand_path('../boot', __FILE__)
+
+require "action_controller/railtie"
+require "action_mailer/railtie"
+require "sprockets/railtie"
+require "rails/test_unit/railtie"
+
+Bundler.require(*Rails.groups)
+require "reimagine2"
+
+module Dummy
+  class Application < Rails::Application
+    # Settings in config/environments/* take precedence over those specified here.
+    # Application configuration should go into files in config/initializers
+    # -- all .rb files in that directory are automatically loaded.
+
+    # Custom directories with classes and modules you want to be autoloadable.
+    # config.autoload_paths += %W(#{config.root}/extras)
+
+    # Only load the plugins named here, in the order given (default is alphabetical).
+    # :all can be used as a placeholder for all plugins not explicitly named.
+    # config.plugins = [ :exception_notification, :ssl_requirement, :all ]
+
+    # Set Time.zone default to the specified zone and make Active Record auto-convert to this zone.
+    # Run "rake -D time" for a list of tasks for finding time zone names. Default is UTC.
+    # config.time_zone = 'Central Time (US & Canada)'
+
+    # The default locale is :en and all translations from config/locales/*.rb,yml are auto loaded.
+    # config.i18n.load_path += Dir[Rails.root.join('my', 'locales', '*.{rb,yml}').to_s]
+    # config.i18n.default_locale = :de
+
+    # Configure the default encoding used in templates for Ruby 1.9.
+    config.encoding = "utf-8"
+
+    # Configure sensitive parameters which will be filtered from the log file.
+    config.filter_parameters += [:password]
+
+    # Enable escaping HTML in JSON.
+    config.active_support.escape_html_entities_in_json = true
+
+    # Enable the asset pipeline
+    config.assets.enabled = true
+
+    # Version of your assets, change this if you want to expire all your assets
+    config.assets.version = '1.0'
+  end
+end
+

data/spec/dummy/config/boot.rb

@@ -0,0 +1,10 @@
+require 'rubygems'
+gemfile = File.expand_path('../../../../Gemfile', __FILE__)
+
+if File.exist?(gemfile)
+  ENV['BUNDLE_GEMFILE'] = gemfile
+  require 'bundler'
+  Bundler.setup
+end
+
+$:.unshift File.expand_path('../../../../lib', __FILE__)

data/spec/dummy/config/environment.rb

@@ -0,0 +1,5 @@
+# Load the rails application
+require File.expand_path('../application', __FILE__)
+
+# Initialize the rails application
+Dummy::Application.initialize!

data/spec/dummy/config/environments/development.rb

@@ -0,0 +1,29 @@
+Dummy::Application.configure do
+  # Settings specified here will take precedence over those in config/application.rb
+
+  # In the development environment your application's code is reloaded on
+  # every request. This slows down response time but is perfect for development
+  # since you don't have to restart the web server when you make code changes.
+  config.cache_classes = false
+
+  # Show full error reports and disable caching
+  config.consider_all_requests_local       = true
+  config.action_controller.perform_caching = false
+
+  # Don't care if the mailer can't send
+  config.action_mailer.raise_delivery_errors = false
+
+  # Print deprecation notices to the Rails logger
+  config.active_support.deprecation = :log
+
+  # Only use best-standards-support built into browsers
+  config.action_dispatch.best_standards_support = :builtin
+
+  # Do not compress assets
+  config.assets.compress = false
+
+  # Expands the lines which load the assets
+  config.assets.debug = true
+
+  config.eager_load = false
+end

data/spec/dummy/config/environments/test.rb

@@ -0,0 +1,33 @@
+Dummy::Application.configure do
+  # Settings specified here will take precedence over those in config/application.rb
+
+  # The test environment is used exclusively to run your application's
+  # test suite. You never need to work with it otherwise. Remember that
+  # your test database is "scratch space" for the test suite and is wiped
+  # and recreated between test runs. Don't rely on the data there!
+  config.cache_classes = true
+
+  # Configure static asset server for tests with Cache-Control for performance
+  config.serve_static_assets = true
+  config.static_cache_control = "public, max-age=3600"
+
+  # Show full error reports and disable caching
+  config.consider_all_requests_local       = true
+  config.action_controller.perform_caching = false
+
+  # Raise exceptions instead of rendering exception templates
+  config.action_dispatch.show_exceptions = false
+
+  # Disable request forgery protection in test environment
+  config.action_controller.allow_forgery_protection    = false
+
+  # Tell Action Mailer not to deliver emails to the real world.
+  # The :test delivery method accumulates sent emails in the
+  # ActionMailer::Base.deliveries array.
+  config.action_mailer.delivery_method = :test
+
+  # Print deprecation notices to the stderr
+  config.active_support.deprecation = :stderr
+
+  config.eager_load = false
+end

data/spec/dummy/config/initializers/secret_token.rb

@@ -0,0 +1,7 @@
+# Be sure to restart your server when you modify this file.
+
+# Your secret key for verifying the integrity of signed cookies.
+# If you change this key, all old signed cookies will become invalid!
+# Make sure the secret is at least 30 characters and all random,
+# no regular words or you'll be exposed to dictionary attacks.
+Dummy::Application.config.secret_token = '3d031dfc09ba9f7afed268283c176c2bc1dc46002590974db35843787dc3a52b0105dc36ddd704d3827a4951b15c697d613f9028a0fe0cb5316cd570a89eb1ca'

data/spec/dummy/config/initializers/session_store.rb

@@ -0,0 +1,8 @@
+# Be sure to restart your server when you modify this file.
+
+Dummy::Application.config.session_store :cookie_store, key: '_dummy_session'
+
+# Use the database for sessions instead of the cookie-based default,
+# which shouldn't be used to store highly confidential information
+# (create the session table with "rails generate session_migration")
+# Dummy::Application.config.session_store :active_record_store

data/spec/dummy/config/routes.rb

@@ -0,0 +1,9 @@
+Dummy::Application.routes.draw do
+  match '/large_12', to: 'shared_views#large_12'
+  match '/buttons', to: 'application#buttons'
+  match '/type', to: 'application#type'
+  match '/forms', to: 'application#forms'
+  match '/tabs', to: 'application#tabs'
+
+  root to: 'application#show'
+end

data/spec/dummy/public/doc1.html

@@ -0,0 +1,2870 @@
+<!DOCTYPE html>
+<html class='no-js'>
+  <head>
+    <meta charset='UTF-8' />
+    <title>SS Standard v1.002b</title>
+<link rel="stylesheet" href="/assets/reimagine2.css">    <style>
+      body{background:#fff;border-top:5px solid #455860;color:#455860;font-family:"Helvetica Neue", helvetica, sans-serif;font-size:17px;line-height:1.5;margin:0;}
+      h2{font-size:48px;line-height:1;margin:.333em 0 0;}
+      h3{font-size:30px;font-weight:300;line-height:1.2;margin:4px 0 36px;}
+      a{color:#59C54A;font-weight:600;}
+      table{border-collapse:collapse;border-spacing:0;width:100%;}
+      table tr{border-top:1px solid #e6eae8;}
+      table td{padding-bottom:15px;padding-top:18px;vertical-align:top;}
+      .set{margin-bottom:84px;}
+      .encode,.keyword{width:41.667%;}
+      .keyword a.note {text-decoration:none;}
+      .css,.keyword li{white-space: nowrap;}
+      .ss-icon{padding-left:0;width:16.667%;font-size:32px;}
+      .encode{font-size:14px;text-align:center;padding-right:20px;line-height:1.8;}
+      .unicode{color:#949FA2;}
+      p.note{font-size:14px;}
+      td ul{list-style:none;margin:0;padding:0;}
+      .wrapper{max-width:432px;margin:120px auto 132px;padding:0 6.25%;}
+      footer{background-color:#455860;color:#fff;overflow:hidden;position:relative;font-size:14px;padding:48px 0 60px;}
+      footer ul{margin:0;padding:0;list-style:none;}
+      footer li{float:left;margin-right:1em;}
+      footer .copyright{float:right;margin:0;position:relative;}
+      footer span, footer span a{vertical-align:top;}
+      footer .wrapper{margin:auto;}
+      footer a{color:#fff;text-decoration:none;font-weight:600;}
+      footer a:hover,footer a:active{color:#fff;text-decoration:underline;}
+      @media screen and (max-width: 760px){.wrapper{margin-top:84px;}footer .wrapper{margin:auto;}}
+      @media screen and (max-width: 540px){h2{font-size:32px;}h3{font-size:22px;}}
+    </style>
+  </head>
+  <body>
+
+    <div class="wrapper centered">
+
+      <section class="set">
+
+        <h2>SS Standard</h2>
+        <h3>Regular</h3>
+
+        <table cellpadding="10px">
+        <tr>
+            <td class='ss-icon'>
+                &#xE001;
+            </td>
+            <td class='encode'>
+                <ul>
+                    <li class='css'><span class="ss-icon ss-cursor"></span></li>
+                    <li class='unicode'>&amp;#xE001;</li>
+                </ul>
+            </td>
+            <td class='keyword'>
+                <ul>
+                    <li>cursor</li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td class='ss-icon'>
+                &#x2316;
+            </td>
+            <td class='encode'>
+                <ul>
+                    <li class='css'><span class="ss-icon ss-crosshair"></span></li>
+                    <li class='unicode'>&amp;#x2316;</li>
+                </ul>
+            </td>
+            <td class='keyword'>
+                <ul>
+                    <li>crosshair</li>
+                    <li>screenshot</li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td class='ss-icon'>
+                &#x1F50E;
+            </td>
+            <td class='encode'>
+                <ul>
+                    <li class='css'><span class="ss-icon ss-search"></span></li>
+                    <li class='unicode'>&amp;#x1F50E;</li>
+                </ul>
+            </td>
+            <td class='keyword'>
+                <ul>
+                    <li>search</li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td class='ss-icon'>
+                &#xE002;
+            </td>
+            <td class='encode'>
+                <ul>
+                    <li class='css'><span class="ss-icon ss-zoomin"></span></li>
+                    <li class='unicode'>&amp;#xE002;</li>
+                </ul>
+            </td>
+            <td class='keyword'>
+                <ul>
+                    <li>zoom</li>
+                    <li>zoomin</li>
+                    <li>zoom in <a href='#spaces' class='note'>*</a></li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td class='ss-icon'>
+                &#xE003;
+            </td>
+            <td class='encode'>
+                <ul>
+                    <li class='css'><span class="ss-icon ss-zoomout"></span></li>
+                    <li class='unicode'>&amp;#xE003;</li>
+                </ul>
+            </td>
+            <td class='keyword'>
+                <ul>
+                    <li>zoomout</li>
+                    <li>zoom out <a href='#spaces' class='note'>*</a></li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td class='ss-icon'>
+                &#x1F440;
+            </td>
+            <td class='encode'>
+                <ul>
+                    <li class='css'><span class="ss-icon ss-view"></span></li>
+                    <li class='unicode'>&amp;#x1F440;</li>
+                </ul>
+            </td>
+            <td class='keyword'>
+                <ul>
+                    <li>view</li>
+                    <li>eye</li>
+                    <li>look</li>
+                    <li>visible</li>
+                    <li>visibility</li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td class='ss-icon'>
+                &#x1F4CE;
+            </td>
+            <td class='encode'>
+                <ul>
+                    <li class='css'><span class="ss-icon ss-attach"></span></li>
+                    <li class='unicode'>&amp;#x1F4CE;</li>
+                </ul>
+            </td>
+            <td class='keyword'>
+                <ul>
+                    <li>attach</li>
+                    <li>attachment</li>
+                    <li>paperclip</li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td class='ss-icon'>
+                &#x1F517;
+            </td>
+            <td class='encode'>
+                <ul>
+                    <li class='css'><span class="ss-icon ss-link"></span></li>
+                    <li class='unicode'>&amp;#x1F517;</li>
+                </ul>
+            </td>
+            <td class='keyword'>
+                <ul>
+                    <li>link</li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td class='ss-icon'>
+                &#xE070;
+            </td>
+            <td class='encode'>
+                <ul>
+                    <li class='css'><span class="ss-icon ss-move"></span></li>
+                    <li class='unicode'>&amp;#xE070;</li>
+                </ul>
+            </td>
+            <td class='keyword'>
+                <ul>
+                    <li>move</li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td class='ss-icon'>
+                &#x270E;
+            </td>
+            <td class='encode'>
+                <ul>
+                    <li class='css'><span class="ss-icon ss-write"></span></li>
+                    <li class='unicode'>&amp;#x270E;</li>
+                </ul>
+            </td>
+            <td class='keyword'>
+                <ul>
+                    <li>edit</li>
+                    <li>write</li>
+                    <li>pencil</li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td class='ss-icon'>
+                &#xE071;
+            </td>
+            <td class='encode'>
+                <ul>
+                    <li class='css'><span class="ss-icon ss-writingdisabled"></span></li>
+                    <li class='unicode'>&amp;#xE071;</li>
+                </ul>
+            </td>
+            <td class='keyword'>
+                <ul>
+                    <li>writingdisabled</li>
+                    <li>writing disabled <a href='#spaces' class='note'>*</a></li>
+                    <li>pencildisabled</li>
+                    <li>pencil disabled <a href='#spaces' class='note'>*</a></li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td class='ss-icon'>
+                &#x2710;
+            </td>
+            <td class='encode'>
+                <ul>
+                    <li class='css'><span class="ss-icon ss-erase"></span></li>
+                    <li class='unicode'>&amp;#x2710;</li>
+                </ul>
+            </td>
+            <td class='keyword'>
+                <ul>
+                    <li>erase</li>
+                    <li>eraser</li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td class='ss-icon'>
+                &#x1F4DD;
+            </td>
+            <td class='encode'>
+                <ul>
+                    <li class='css'><span class="ss-icon ss-compose"></span></li>
+                    <li class='unicode'>&amp;#x1F4DD;</li>
+                </ul>
+            </td>
+            <td class='keyword'>
+                <ul>
+                    <li>compose</li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td class='ss-icon'>
+                &#x1F512;
+            </td>
+            <td class='encode'>
+                <ul>
+                    <li class='css'><span class="ss-icon ss-lock"></span></li>
+                    <li class='unicode'>&amp;#x1F512;</li>
+                </ul>
+            </td>
+            <td class='keyword'>
+                <ul>
+                    <li>lock</li>
+                    <li>locked</li>
+                    <li>private</li>
+                    <li>secure</li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td class='ss-icon'>
+                &#x1F513;
+            </td>
+            <td class='encode'>
+                <ul>
+                    <li class='css'><span class="ss-icon ss-unlock"></span></li>
+                    <li class='unicode'>&amp;#x1F513;</li>
+                </ul>
+            </td>
+            <td class='keyword'>
+                <ul>
+                    <li>unlock</li>
+                    <li>unlocked</li>
+                    <li>public</li>
+                    <li>insecure</li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td class='ss-icon'>
+                &#x1F511;
+            </td>
+            <td class='encode'>
+                <ul>
+                    <li class='css'><span class="ss-icon ss-key"></span></li>
+                    <li class='unicode'>&amp;#x1F511;</li>
+                </ul>
+            </td>
+            <td class='keyword'>
+                <ul>
+                    <li>key</li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td class='ss-icon'>
+                &#x232B;
+            </td>
+            <td class='encode'>
+                <ul>
+                    <li class='css'><span class="ss-icon ss-backspace"></span></li>
+                    <li class='unicode'>&amp;#x232B;</li>
+                </ul>
+            </td>
+            <td class='keyword'>
+                <ul>
+                    <li>backspace</li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td class='ss-icon'>
+                &#x1F6AB;
+            </td>
+            <td class='encode'>
+                <ul>
+                    <li class='css'><span class="ss-icon ss-ban"></span></li>
+                    <li class='unicode'>&amp;#x1F6AB;</li>
+                </ul>
+            </td>
+            <td class='keyword'>
+                <ul>
+                    <li>ban</li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td class='ss-icon'>
+                &#xE0D0;
+            </td>
+            <td class='encode'>
+                <ul>
+                    <li class='css'><span class="ss-icon ss-trash"></span></li>
+                    <li class='unicode'>&amp;#xE0D0;</li>
+                </ul>
+            </td>
+            <td class='keyword'>
+                <ul>
+                    <li>trash</li>
+                    <li>trashcan</li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td class='ss-icon'>
+                &#x25CE;
+            </td>
+            <td class='encode'>
+                <ul>
+                    <li class='css'><span class="ss-icon ss-target"></span></li>
+                    <li class='unicode'>&amp;#x25CE;</li>
+                </ul>
+            </td>
+            <td class='keyword'>
+                <ul>
+                    <li>target</li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td class='ss-icon'>
+                &#xE100;
+            </td>
+            <td class='encode'>
+                <ul>
+                    <li class='css'><span class="ss-icon ss-tag"></span></li>
+                    <li class='unicode'>&amp;#xE100;</li>
+                </ul>
+            </td>
+            <td class='keyword'>
+                <ul>
+                    <li>tag</li>
+                    <li>tags</li>
+                    <li>tagged</li>
+                    <li>keyword</li>
+                    <li>keywords</li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td class='ss-icon'>
+                &#x1F516;
+            </td>
+            <td class='encode'>
+                <ul>
+                    <li class='css'><span class="ss-icon ss-bookmark"></span></li>
+                    <li class='unicode'>&amp;#x1F516;</li>
+                </ul>
+            </td>
+            <td class='keyword'>
+                <ul>
+                    <li>bookmark</li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td class='ss-icon'>
+                &#x2691;
+            </td>
+            <td class='encode'>
+                <ul>
+                    <li class='css'><span class="ss-icon ss-flag"></span></li>
+                    <li class='unicode'>&amp;#x2691;</li>
+                </ul>
+            </td>
+            <td class='keyword'>
+                <ul>
+                    <li>flag</li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td class='ss-icon'>
+                &#x1F44D;
+            </td>
+            <td class='encode'>
+                <ul>
+                    <li class='css'><span class="ss-icon ss-like"></span></li>
+                    <li class='unicode'>&amp;#x1F44D;</li>
+                </ul>
+            </td>
+            <td class='keyword'>
+                <ul>
+                    <li>like</li>
+                    <li>approve</li>
+                    <li>thumbsup</li>
+                    <li>thumbs up <a href='#spaces' class='note'>*</a></li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td class='ss-icon'>
+                &#x1F44E;
+            </td>
+            <td class='encode'>
+                <ul>
+                    <li class='css'><span class="ss-icon ss-dislike"></span></li>
+                    <li class='unicode'>&amp;#x1F44E;</li>
+                </ul>
+            </td>
+            <td class='keyword'>
+                <ul>
+                    <li>dislike</li>
+                    <li>disapprove</li>
+                    <li>thumbsdown</li>
+                    <li>thumbs down <a href='#spaces' class='note'>*</a></li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td class='ss-icon'>
+                &#x2665;
+            </td>
+            <td class='encode'>
+                <ul>
+                    <li class='css'><span class="ss-icon ss-heart"></span></li>
+                    <li class='unicode'>&amp;#x2665;</li>
+                </ul>
+            </td>
+            <td class='keyword'>
+                <ul>
+                    <li>heart</li>
+                    <li>love</li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td class='ss-icon'>
+                &#xE1A0;
+            </td>
+            <td class='encode'>
+                <ul>
+                    <li class='css'><span class="ss-icon ss-halfheart"></span></li>
+                    <li class='unicode'>&amp;#xE1A0;</li>
+                </ul>
+            </td>
+            <td class='keyword'>
+                <ul>
+                    <li>halfheart</li>
+                    <li>half heart <a href='#spaces' class='note'>*</a></li>
+                    <li>zelda</li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td class='ss-icon'>
+                &#x22C6;
+            </td>
+            <td class='encode'>
+                <ul>
+                    <li class='css'><span class="ss-icon ss-star"></span></li>
+                    <li class='unicode'>&amp;#x22C6;</li>
+                </ul>
+            </td>
+            <td class='keyword'>
+                <ul>
+                    <li>star</li>
+                    <li>favorite</li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td class='ss-icon'>
+                &#xE1A1;
+            </td>
+            <td class='encode'>
+                <ul>
+                    <li class='css'><span class="ss-icon ss-halfstar"></span></li>
+                    <li class='unicode'>&amp;#xE1A1;</li>
+                </ul>
+            </td>
+            <td class='keyword'>
+                <ul>
+                    <li>halfstar</li>
+                    <li>half star <a href='#spaces' class='note'>*</a></li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td class='ss-icon'>
+                &#xE200;
+            </td>
+            <td class='encode'>
+                <ul>
+                    <li class='css'><span class="ss-icon ss-sample"></span></li>
+                    <li class='unicode'>&amp;#xE200;</li>
+                </ul>
+            </td>
+            <td class='keyword'>
+                <ul>
+                    <li>sample</li>
+                    <li>eyedropper</li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td class='ss-icon'>
+                &#xE201;
+            </td>
+            <td class='encode'>
+                <ul>
+                    <li class='css'><span class="ss-icon ss-crop"></span></li>
+                    <li class='unicode'>&amp;#xE201;</li>
+                </ul>
+            </td>
+            <td class='keyword'>
+                <ul>
+                    <li>crop</li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td class='ss-icon'>
+                &#xE202;
+            </td>
+            <td class='encode'>
+                <ul>
+                    <li class='css'><span class="ss-icon ss-layers"></span></li>
+                    <li class='unicode'>&amp;#xE202;</li>
+                </ul>
+            </td>
+            <td class='keyword'>
+                <ul>
+                    <li>layers</li>
+                    <li>windows</li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td class='ss-icon'>
+                &#x1F4DE;
+            </td>
+            <td class='encode'>
+                <ul>
+                    <li class='css'><span class="ss-icon ss-phone"></span></li>
+                    <li class='unicode'>&amp;#x1F4DE;</li>
+                </ul>
+            </td>
+            <td class='keyword'>
+                <ul>
+                    <li>phone</li>
+                    <li>call</li>
+                    <li>telephone</li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td class='ss-icon'>
+                &#xE300;
+            </td>
+            <td class='encode'>
+                <ul>
+                    <li class='css'><span class="ss-icon ss-phonedisabled"></span></li>
+                    <li class='unicode'>&amp;#xE300;</li>
+                </ul>
+            </td>
+            <td class='keyword'>
+                <ul>
+                    <li>phonedisabled</li>
+                    <li>phone disabled <a href='#spaces' class='note'>*</a></li>
+                    <li>calldisabled</li>
+                    <li>call disabled <a href='#spaces' class='note'>*</a></li>
+                    <li>endcall</li>
+                    <li>end call <a href='#spaces' class='note'>*</a></li>
+                    <li>telephonedisabled</li>
+                    <li>telephone disabled <a href='#spaces' class='note'>*</a></li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td class='ss-icon'>
+                &#xE310;
+            </td>
+            <td class='encode'>
+                <ul>
+                    <li class='css'><span class="ss-icon ss-rss"></span></li>
+                    <li class='unicode'>&amp;#xE310;</li>
+                </ul>
+            </td>
+            <td class='keyword'>
+                <ul>
+                    <li>rss</li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td class='ss-icon'>
+                &#xE320;
+            </td>
+            <td class='encode'>
+                <ul>
+                    <li class='css'><span class="ss-icon ss-facetime"></span></li>
+                    <li class='unicode'>&amp;#xE320;</li>
+                </ul>
+            </td>
+            <td class='keyword'>
+                <ul>
+                    <li>facetime</li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td class='ss-icon'>
+                &#x21A9;
+            </td>
+            <td class='encode'>
+                <ul>
+                    <li class='css'><span class="ss-icon ss-reply"></span></li>
+                    <li class='unicode'>&amp;#x21A9;</li>
+                </ul>
+            </td>
+            <td class='keyword'>
+                <ul>
+                    <li>reply</li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td class='ss-icon'>
+                &#xE350;
+            </td>
+            <td class='encode'>
+                <ul>
+                    <li class='css'><span class="ss-icon ss-send"></span></li>
+                    <li class='unicode'>&amp;#xE350;</li>
+                </ul>
+            </td>
+            <td class='keyword'>
+                <ul>
+                    <li>send</li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td class='ss-icon'>
+                &#x2709;
+            </td>
+            <td class='encode'>
+                <ul>
+                    <li class='css'><span class="ss-icon ss-mail"></span></li>
+                    <li class='unicode'>&amp;#x2709;</li>
+                </ul>
+            </td>
+            <td class='keyword'>
+                <ul>
+                    <li>mail</li>
+                    <li>email</li>
+                    <li>envelope</li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td class='ss-icon'>
+                &#x1F4E5;
+            </td>
+            <td class='encode'>
+                <ul>
+                    <li class='css'><span class="ss-icon ss-inbox"></span></li>
+                    <li class='unicode'>&amp;#x1F4E5;</li>
+                </ul>
+            </td>
+            <td class='keyword'>
+                <ul>
+                    <li>inbox</li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td class='ss-icon'>
+                &#x1F4AC;
+            </td>
+            <td class='encode'>
+                <ul>
+                    <li class='css'><span class="ss-icon ss-chat"></span></li>
+                    <li class='unicode'>&amp;#x1F4AC;</li>
+                </ul>
+            </td>
+            <td class='keyword'>
+                <ul>
+                    <li>chat</li>
+                    <li>comment</li>
+                    <li>talk</li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td class='ss-icon'>
+                &#x1F464;
+            </td>
+            <td class='encode'>
+                <ul>
+                    <li class='css'><span class="ss-icon ss-user"></span></li>
+                    <li class='unicode'>&amp;#x1F464;</li>
+                </ul>
+            </td>
+            <td class='keyword'>
+                <ul>
+                    <li>user</li>
+                    <li>avatar</li>
+                    <li>maleavatar</li>
+                    <li>male avatar <a href='#spaces' class='note'>*</a></li>
+                    <li>maleuser</li>
+                    <li>male user <a href='#spaces' class='note'>*</a></li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td class='ss-icon'>
+                &#x1F467;
+            </td>
+            <td class='encode'>
+                <ul>
+                    <li class='css'><span class="ss-icon ss-femaleuser"></span></li>
+                    <li class='unicode'>&amp;#x1F467;</li>
+                </ul>
+            </td>
+            <td class='keyword'>
+                <ul>
+                    <li>femaleuser</li>
+                    <li>female user <a href='#spaces' class='note'>*</a></li>
+                    <li>femaleavatar</li>
+                    <li>female avatar <a href='#spaces' class='note'>*</a></li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td class='ss-icon'>
+                &#x1F465;
+            </td>
+            <td class='encode'>
+                <ul>
+                    <li class='css'><span class="ss-icon ss-users"></span></li>
+                    <li class='unicode'>&amp;#x1F465;</li>
+                </ul>
+            </td>
+            <td class='keyword'>
+                <ul>
+                    <li>users</li>
+                    <li>avatars</li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td class='ss-icon'>
+                &#xE500;
+            </td>
+            <td class='encode'>
+                <ul>
+                    <li class='css'><span class="ss-icon ss-cart"></span></li>
+                    <li class='unicode'>&amp;#xE500;</li>
+                </ul>
+            </td>
+            <td class='keyword'>
+                <ul>
+                    <li>cart</li>
+                    <li>shoppingcart</li>
+                    <li>shopping cart <a href='#spaces' class='note'>*</a></li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td class='ss-icon'>
+                &#x1F4B3;
+            </td>
+            <td class='encode'>
+                <ul>
+                    <li class='css'><span class="ss-icon ss-creditcard"></span></li>
+                    <li class='unicode'>&amp;#x1F4B3;</li>
+                </ul>
+            </td>
+            <td class='keyword'>
+                <ul>
+                    <li>creditcard</li>
+                    <li>credit card <a href='#spaces' class='note'>*</a></li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td class='ss-icon'>
+                &#x1F4B2;
+            </td>
+            <td class='encode'>
+                <ul>
+                    <li class='css'><span class="ss-icon ss-dollarsign"></span></li>
+                    <li class='unicode'>&amp;#x1F4B2;</li>
+                </ul>
+            </td>
+            <td class='keyword'>
+                <ul>
+                    <li>cost</li>
+                    <li>dollarsign</li>
+                    <li>dollar sign <a href='#spaces' class='note'>*</a></li>
+                    <li>price</li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td class='ss-icon'>
+                &#x1F4CA;
+            </td>
+            <td class='encode'>
+                <ul>
+                    <li class='css'><span class="ss-icon ss-barchart"></span></li>
+                    <li class='unicode'>&amp;#x1F4CA;</li>
+                </ul>
+            </td>
+            <td class='keyword'>
+                <ul>
+                    <li>barchart</li>
+                    <li>bar chart <a href='#spaces' class='note'>*</a></li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td class='ss-icon'>
+                &#xE570;
+            </td>
+            <td class='encode'>
+                <ul>
+                    <li class='css'><span class="ss-icon ss-piechart"></span></li>
+                    <li class='unicode'>&amp;#xE570;</li>
+                </ul>
+            </td>
+            <td class='keyword'>
+                <ul>
+                    <li>piechart</li>
+                    <li>pie chart <a href='#spaces' class='note'>*</a></li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td class='ss-icon'>
+                &#x1F4E6;
+            </td>
+            <td class='encode'>
+                <ul>
+                    <li class='css'><span class="ss-icon ss-box"></span></li>
+                    <li class='unicode'>&amp;#x1F4E6;</li>
+                </ul>
+            </td>
+            <td class='keyword'>
+                <ul>
+                    <li>box</li>
+                    <li>package</li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td class='ss-icon'>
+                &#x2302;
+            </td>
+            <td class='encode'>
+                <ul>
+                    <li class='css'><span class="ss-icon ss-home"></span></li>
+                    <li class='unicode'>&amp;#x2302;</li>
+                </ul>
+            </td>
+            <td class='keyword'>
+                <ul>
+                    <li>home</li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td class='ss-icon'>
+                &#x1F30E;
+            </td>
+            <td class='encode'>
+                <ul>
+                    <li class='css'><span class="ss-icon ss-globe"></span></li>
+                    <li class='unicode'>&amp;#x1F30E;</li>
+                </ul>
+            </td>
+            <td class='keyword'>
+                <ul>
+                    <li>globe</li>
+                    <li>earth</li>
+                    <li>world</li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td class='ss-icon'>
+                &#xE670;
+            </td>
+            <td class='encode'>
+                <ul>
+                    <li class='css'><span class="ss-icon ss-navigate"></span></li>
+                    <li class='unicode'>&amp;#xE670;</li>
+                </ul>
+            </td>
+            <td class='keyword'>
+                <ul>
+                    <li>navigate</li>
+                    <li>navigation</li>
+                    <li>locate</li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td class='ss-icon'>
+                &#xE671;
+            </td>
+            <td class='encode'>
+                <ul>
+                    <li class='css'><span class="ss-icon ss-compass"></span></li>
+                    <li class='unicode'>&amp;#xE671;</li>
+                </ul>
+            </td>
+            <td class='keyword'>
+                <ul>
+                    <li>compass</li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td class='ss-icon'>
+                &#xE672;
+            </td>
+            <td class='encode'>
+                <ul>
+                    <li class='css'><span class="ss-icon ss-signpost"></span></li>
+                    <li class='unicode'>&amp;#xE672;</li>
+                </ul>
+            </td>
+            <td class='keyword'>
+                <ul>
+                    <li>signpost</li>
+                    <li>directions</li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td class='ss-icon'>
+                &#xE6D0;
+            </td>
+            <td class='encode'>
+                <ul>
+                    <li class='css'><span class="ss-icon ss-location"></span></li>
+                    <li class='unicode'>&amp;#xE6D0;</li>
+                </ul>
+            </td>
+            <td class='keyword'>
+                <ul>
+                    <li>location</li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td class='ss-icon'>
+                &#xE673;
+            </td>
+            <td class='encode'>
+                <ul>
+                    <li class='css'><span class="ss-icon ss-map"></span></li>
+                    <li class='unicode'>&amp;#xE673;</li>
+                </ul>
+            </td>
+            <td class='keyword'>
+                <ul>
+                    <li>map</li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td class='ss-icon'>
+                &#x1F4CD;
+            </td>
+            <td class='encode'>
+                <ul>
+                    <li class='css'><span class="ss-icon ss-pin"></span></li>
+                    <li class='unicode'>&amp;#x1F4CD;</li>
+                </ul>
+            </td>
+            <td class='keyword'>
+                <ul>
+                    <li>pin</li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td class='ss-icon'>
+                &#xE7A0;
+            </td>
+            <td class='encode'>
+                <ul>
+                    <li class='css'><span class="ss-icon ss-database"></span></li>
+                    <li class='unicode'>&amp;#xE7A0;</li>
+                </ul>
+            </td>
+            <td class='keyword'>
+                <ul>
+                    <li>database</li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td class='ss-icon'>
+                &#xE7B0;
+            </td>
+            <td class='encode'>
+                <ul>
+                    <li class='css'><span class="ss-icon ss-hdd"></span></li>
+                    <li class='unicode'>&amp;#xE7B0;</li>
+                </ul>
+            </td>
+            <td class='keyword'>
+                <ul>
+                    <li>harddrive</li>
+                    <li>hard drive <a href='#spaces' class='note'>*</a></li>
+                    <li>hdd</li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td class='ss-icon'>
+                &#x266B;
+            </td>
+            <td class='encode'>
+                <ul>
+                    <li class='css'><span class="ss-icon ss-music"></span></li>
+                    <li class='unicode'>&amp;#x266B;</li>
+                </ul>
+            </td>
+            <td class='keyword'>
+                <ul>
+                    <li>music</li>
+                    <li>musicnote</li>
+                    <li>audio</li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td class='ss-icon'>
+                &#x1F3A4;
+            </td>
+            <td class='encode'>
+                <ul>
+                    <li class='css'><span class="ss-icon ss-mic"></span></li>
+                    <li class='unicode'>&amp;#x1F3A4;</li>
+                </ul>
+            </td>
+            <td class='keyword'>
+                <ul>
+                    <li>mic</li>
+                    <li>microphone</li>
+                    <li>dictate</li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td class='ss-icon'>
+                &#x1F508;
+            </td>
+            <td class='encode'>
+                <ul>
+                    <li class='css'><span class="ss-icon ss-volume"></span></li>
+                    <li class='unicode'>&amp;#x1F508;</li>
+                </ul>
+            </td>
+            <td class='keyword'>
+                <ul>
+                    <li>volume</li>
+                    <li>sound</li>
+                    <li>speaker</li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td class='ss-icon'>
+                &#x1F509;
+            </td>
+            <td class='encode'>
+                <ul>
+                    <li class='css'><span class="ss-icon ss-volumelow"></span></li>
+                    <li class='unicode'>&amp;#x1F509;</li>
+                </ul>
+            </td>
+            <td class='keyword'>
+                <ul>
+                    <li>volumelow</li>
+                    <li>volume low <a href='#spaces' class='note'>*</a></li>
+                    <li>lowvolume</li>
+                    <li>low volume <a href='#spaces' class='note'>*</a></li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td class='ss-icon'>
+                &#x1F50A;
+            </td>
+            <td class='encode'>
+                <ul>
+                    <li class='css'><span class="ss-icon ss-volumehigh"></span></li>
+                    <li class='unicode'>&amp;#x1F50A;</li>
+                </ul>
+            </td>
+            <td class='keyword'>
+                <ul>
+                    <li>volumehigh</li>
+                    <li>volume high <a href='#spaces' class='note'>*</a></li>
+                    <li>highvolume</li>
+                    <li>high volume <a href='#spaces' class='note'>*</a></li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td class='ss-icon'>
+                &#xE800;
+            </td>
+            <td class='encode'>
+                <ul>
+                    <li class='css'><span class="ss-icon ss-airplay"></span></li>
+                    <li class='unicode'>&amp;#xE800;</li>
+                </ul>
+            </td>
+            <td class='keyword'>
+                <ul>
+                    <li>airplay</li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td class='ss-icon'>
+                &#x1F4F7;
+            </td>
+            <td class='encode'>
+                <ul>
+                    <li class='css'><span class="ss-icon ss-camera"></span></li>
+                    <li class='unicode'>&amp;#x1F4F7;</li>
+                </ul>
+            </td>
+            <td class='keyword'>
+                <ul>
+                    <li>camera</li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td class='ss-icon'>
+                &#x1F304;
+            </td>
+            <td class='encode'>
+                <ul>
+                    <li class='css'><span class="ss-icon ss-picture"></span></li>
+                    <li class='unicode'>&amp;#x1F304;</li>
+                </ul>
+            </td>
+            <td class='keyword'>
+                <ul>
+                    <li>picture</li>
+                    <li>pictures</li>
+                    <li>image</li>
+                    <li>images</li>
+                    <li>photo</li>
+                    <li>photos</li>
+                    <li>photograph</li>
+                    <li>photographs</li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td class='ss-icon'>
+                &#x1F4F9;
+            </td>
+            <td class='encode'>
+                <ul>
+                    <li class='css'><span class="ss-icon ss-video"></span></li>
+                    <li class='unicode'>&amp;#x1F4F9;</li>
+                </ul>
+            </td>
+            <td class='keyword'>
+                <ul>
+                    <li>video</li>
+                    <li>videos</li>
+                    <li>videocamera</li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td class='ss-icon'>
+                &#x25B6;
+            </td>
+            <td class='encode'>
+                <ul>
+                    <li class='css'><span class="ss-icon ss-play"></span></li>
+                    <li class='unicode'>&amp;#x25B6;</li>
+                </ul>
+            </td>
+            <td class='keyword'>
+                <ul>
+                    <li>play</li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td class='ss-icon'>
+                &#xE8A0;
+            </td>
+            <td class='encode'>
+                <ul>
+                    <li class='css'><span class="ss-icon ss-pause"></span></li>
+                    <li class='unicode'>&amp;#xE8A0;</li>
+                </ul>
+            </td>
+            <td class='keyword'>
+                <ul>
+                    <li>pause</li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td class='ss-icon'>
+                &#x25A0;
+            </td>
+            <td class='encode'>
+                <ul>
+                    <li class='css'><span class="ss-icon ss-stop"></span></li>
+                    <li class='unicode'>&amp;#x25A0;</li>
+                </ul>
+            </td>
+            <td class='keyword'>
+                <ul>
+                    <li>stop</li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td class='ss-icon'>
+                &#x25CF;
+            </td>
+            <td class='encode'>
+                <ul>
+                    <li class='css'><span class="ss-icon ss-record"></span></li>
+                    <li class='unicode'>&amp;#x25CF;</li>
+                </ul>
+            </td>
+            <td class='keyword'>
+                <ul>
+                    <li>record</li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td class='ss-icon'>
+                &#x23EA;
+            </td>
+            <td class='encode'>
+                <ul>
+                    <li class='css'><span class="ss-icon ss-rewind"></span></li>
+                    <li class='unicode'>&amp;#x23EA;</li>
+                </ul>
+            </td>
+            <td class='keyword'>
+                <ul>
+                    <li>rewind</li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td class='ss-icon'>
+                &#x23E9;
+            </td>
+            <td class='encode'>
+                <ul>
+                    <li class='css'><span class="ss-icon ss-fastforward"></span></li>
+                    <li class='unicode'>&amp;#x23E9;</li>
+                </ul>
+            </td>
+            <td class='keyword'>
+                <ul>
+                    <li>fastforward</li>
+                    <li>fast forward <a href='#spaces' class='note'>*</a></li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td class='ss-icon'>
+                &#x23EE;
+            </td>
+            <td class='encode'>
+                <ul>
+                    <li class='css'><span class="ss-icon ss-skipback"></span></li>
+                    <li class='unicode'>&amp;#x23EE;</li>
+                </ul>
+            </td>
+            <td class='keyword'>
+                <ul>
+                    <li>skipback</li>
+                    <li>skip back <a href='#spaces' class='note'>*</a></li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td class='ss-icon'>
+                &#x23ED;
+            </td>
+            <td class='encode'>
+                <ul>
+                    <li class='css'><span class="ss-icon ss-skipforward"></span></li>
+                    <li class='unicode'>&amp;#x23ED;</li>
+                </ul>
+            </td>
+            <td class='keyword'>
+                <ul>
+                    <li>skip</li>
+                    <li>skipforward</li>
+                    <li>skip forward <a href='#spaces' class='note'>*</a></li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td class='ss-icon'>
+                &#x23CF;
+            </td>
+            <td class='encode'>
+                <ul>
+                    <li class='css'><span class="ss-icon ss-eject"></span></li>
+                    <li class='unicode'>&amp;#x23CF;</li>
+                </ul>
+            </td>
+            <td class='keyword'>
+                <ul>
+                    <li>eject</li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td class='ss-icon'>
+                &#x1F501;
+            </td>
+            <td class='encode'>
+                <ul>
+                    <li class='css'><span class="ss-icon ss-repeat"></span></li>
+                    <li class='unicode'>&amp;#x1F501;</li>
+                </ul>
+            </td>
+            <td class='keyword'>
+                <ul>
+                    <li>repeat</li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td class='ss-icon'>
+                &#x21BA;
+            </td>
+            <td class='encode'>
+                <ul>
+                    <li class='css'><span class="ss-icon ss-replay"></span></li>
+                    <li class='unicode'>&amp;#x21BA;</li>
+                </ul>
+            </td>
+            <td class='keyword'>
+                <ul>
+                    <li>replay</li>
+                    <li>rotateleft</li>
+                    <li>rotate left <a href='#spaces' class='note'>*</a></li>
+                    <li>undo</li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td class='ss-icon'>
+                &#x1F500;
+            </td>
+            <td class='encode'>
+                <ul>
+                    <li class='css'><span class="ss-icon ss-shuffle"></span></li>
+                    <li class='unicode'>&amp;#x1F500;</li>
+                </ul>
+            </td>
+            <td class='keyword'>
+                <ul>
+                    <li>shuffle</li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td class='ss-icon'>
+                &#x1F4D5;
+            </td>
+            <td class='encode'>
+                <ul>
+                    <li class='css'><span class="ss-icon ss-book"></span></li>
+                    <li class='unicode'>&amp;#x1F4D5;</li>
+                </ul>
+            </td>
+            <td class='keyword'>
+                <ul>
+                    <li>book</li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td class='ss-icon'>
+                &#x1F4D6;
+            </td>
+            <td class='encode'>
+                <ul>
+                    <li class='css'><span class="ss-icon ss-openbook"></span></li>
+                    <li class='unicode'>&amp;#x1F4D6;</li>
+                </ul>
+            </td>
+            <td class='keyword'>
+                <ul>
+                    <li>openbook</li>
+                    <li>open book <a href='#spaces' class='note'>*</a></li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td class='ss-icon'>
+                &#x1F4D3;
+            </td>
+            <td class='encode'>
+                <ul>
+                    <li class='css'><span class="ss-icon ss-notebook"></span></li>
+                    <li class='unicode'>&amp;#x1F4D3;</li>
+                </ul>
+            </td>
+            <td class='keyword'>
+                <ul>
+                    <li>notebook</li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td class='ss-icon'>
+                &#xE9A0;
+            </td>
+            <td class='encode'>
+                <ul>
+                    <li class='css'><span class="ss-icon ss-grid"></span></li>
+                    <li class='unicode'>&amp;#xE9A0;</li>
+                </ul>
+            </td>
+            <td class='keyword'>
+                <ul>
+                    <li>grid</li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td class='ss-icon'>
+                &#xE9A1;
+            </td>
+            <td class='encode'>
+                <ul>
+                    <li class='css'><span class="ss-icon ss-rows"></span></li>
+                    <li class='unicode'>&amp;#xE9A1;</li>
+                </ul>
+            </td>
+            <td class='keyword'>
+                <ul>
+                    <li>rows</li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td class='ss-icon'>
+                &#xE9A2;
+            </td>
+            <td class='encode'>
+                <ul>
+                    <li class='css'><span class="ss-icon ss-columns"></span></li>
+                    <li class='unicode'>&amp;#xE9A2;</li>
+                </ul>
+            </td>
+            <td class='keyword'>
+                <ul>
+                    <li>columns</li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td class='ss-icon'>
+                &#xE9A3;
+            </td>
+            <td class='encode'>
+                <ul>
+                    <li class='css'><span class="ss-icon ss-thumbnails"></span></li>
+                    <li class='unicode'>&amp;#xE9A3;</li>
+                </ul>
+            </td>
+            <td class='keyword'>
+                <ul>
+                    <li>thumbnails</li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td class='ss-icon'>
+                &#x1F4BB;
+            </td>
+            <td class='encode'>
+                <ul>
+                    <li class='css'><span class="ss-icon ss-desktop"></span></li>
+                    <li class='unicode'>&amp;#x1F4BB;</li>
+                </ul>
+            </td>
+            <td class='keyword'>
+                <ul>
+                    <li>desktop</li>
+                    <li>computer</li>
+                    <li>display</li>
+                    <li>monitor</li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td class='ss-icon'>
+                &#xEA00;
+            </td>
+            <td class='encode'>
+                <ul>
+                    <li class='css'><span class="ss-icon ss-laptop"></span></li>
+                    <li class='unicode'>&amp;#xEA00;</li>
+                </ul>
+            </td>
+            <td class='keyword'>
+                <ul>
+                    <li>laptop</li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td class='ss-icon'>
+                &#xEA01;
+            </td>
+            <td class='encode'>
+                <ul>
+                    <li class='css'><span class="ss-icon ss-tablet"></span></li>
+                    <li class='unicode'>&amp;#xEA01;</li>
+                </ul>
+            </td>
+            <td class='keyword'>
+                <ul>
+                    <li>tablet</li>
+                    <li>ipad</li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td class='ss-icon'>
+                &#x1F4F1;
+            </td>
+            <td class='encode'>
+                <ul>
+                    <li class='css'><span class="ss-icon ss-cell"></span></li>
+                    <li class='unicode'>&amp;#x1F4F1;</li>
+                </ul>
+            </td>
+            <td class='keyword'>
+                <ul>
+                    <li>cell</li>
+                    <li>cellphone</li>
+                    <li>cell phone <a href='#spaces' class='note'>*</a></li>
+                    <li>iphone</li>
+                    <li>mobile</li>
+                    <li>mobilephone</li>
+                    <li>mobile phone <a href='#spaces' class='note'>*</a></li>
+                    <li>smartphone</li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td class='ss-icon'>
+                &#x1F50B;
+            </td>
+            <td class='encode'>
+                <ul>
+                    <li class='css'><span class="ss-icon ss-battery"></span></li>
+                    <li class='unicode'>&amp;#x1F50B;</li>
+                </ul>
+            </td>
+            <td class='keyword'>
+                <ul>
+                    <li>battery</li>
+                    <li>batteryfull</li>
+                    <li>battery full <a href='#spaces' class='note'>*</a></li>
+                    <li>fullbattery</li>
+                    <li>full battery <a href='#spaces' class='note'>*</a></li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td class='ss-icon'>
+                &#xEA10;
+            </td>
+            <td class='encode'>
+                <ul>
+                    <li class='css'><span class="ss-icon ss-batteryhigh"></span></li>
+                    <li class='unicode'>&amp;#xEA10;</li>
+                </ul>
+            </td>
+            <td class='keyword'>
+                <ul>
+                    <li>batteryhigh</li>
+                    <li>battery high <a href='#spaces' class='note'>*</a></li>
+                    <li>highbattery</li>
+                    <li>high battery <a href='#spaces' class='note'>*</a></li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td class='ss-icon'>
+                &#xEA11;
+            </td>
+            <td class='encode'>
+                <ul>
+                    <li class='css'><span class="ss-icon ss-batterymedium"></span></li>
+                    <li class='unicode'>&amp;#xEA11;</li>
+                </ul>
+            </td>
+            <td class='keyword'>
+                <ul>
+                    <li>batterymedium</li>
+                    <li>battery medium <a href='#spaces' class='note'>*</a></li>
+                    <li>mediumbattery</li>
+                    <li>medium battery <a href='#spaces' class='note'>*</a></li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td class='ss-icon'>
+                &#xEA12;
+            </td>
+            <td class='encode'>
+                <ul>
+                    <li class='css'><span class="ss-icon ss-batterylow"></span></li>
+                    <li class='unicode'>&amp;#xEA12;</li>
+                </ul>
+            </td>
+            <td class='keyword'>
+                <ul>
+                    <li>batterylow</li>
+                    <li>battery low <a href='#spaces' class='note'>*</a></li>
+                    <li>lowbattery</li>
+                    <li>low battery <a href='#spaces' class='note'>*</a></li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td class='ss-icon'>
+                &#xEA13;
+            </td>
+            <td class='encode'>
+                <ul>
+                    <li class='css'><span class="ss-icon ss-batteryempty"></span></li>
+                    <li class='unicode'>&amp;#xEA13;</li>
+                </ul>
+            </td>
+            <td class='keyword'>
+                <ul>
+                    <li>batteryempty</li>
+                    <li>battery empty <a href='#spaces' class='note'>*</a></li>
+                    <li>emptybattery</li>
+                    <li>empty battery <a href='#spaces' class='note'>*</a></li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td class='ss-icon'>
+                &#xEB00;
+            </td>
+            <td class='encode'>
+                <ul>
+                    <li class='css'><span class="ss-icon ss-clouddownload"></span></li>
+                    <li class='unicode'>&amp;#xEB00;</li>
+                </ul>
+            </td>
+            <td class='keyword'>
+                <ul>
+                    <li>clouddownload</li>
+                    <li>cloud download <a href='#spaces' class='note'>*</a></li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td class='ss-icon'>
+                &#xEB01;
+            </td>
+            <td class='encode'>
+                <ul>
+                    <li class='css'><span class="ss-icon ss-download"></span></li>
+                    <li class='unicode'>&amp;#xEB01;</li>
+                </ul>
+            </td>
+            <td class='keyword'>
+                <ul>
+                    <li>download</li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td class='ss-icon'>
+                &#xEB40;
+            </td>
+            <td class='encode'>
+                <ul>
+                    <li class='css'><span class="ss-icon ss-cloudupload"></span></li>
+                    <li class='unicode'>&amp;#xEB40;</li>
+                </ul>
+            </td>
+            <td class='keyword'>
+                <ul>
+                    <li>cloudupload</li>
+                    <li>cloud upload <a href='#spaces' class='note'>*</a></li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td class='ss-icon'>
+                &#xEB41;
+            </td>
+            <td class='encode'>
+                <ul>
+                    <li class='css'><span class="ss-icon ss-upload"></span></li>
+                    <li class='unicode'>&amp;#xEB41;</li>
+                </ul>
+            </td>
+            <td class='keyword'>
+                <ul>
+                    <li>upload</li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td class='ss-icon'>
+                &#xEB80;
+            </td>
+            <td class='encode'>
+                <ul>
+                    <li class='css'><span class="ss-icon ss-fork"></span></li>
+                    <li class='unicode'>&amp;#xEB80;</li>
+                </ul>
+            </td>
+            <td class='keyword'>
+                <ul>
+                    <li>fork</li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td class='ss-icon'>
+                &#xEB81;
+            </td>
+            <td class='encode'>
+                <ul>
+                    <li class='css'><span class="ss-icon ss-merge"></span></li>
+                    <li class='unicode'>&amp;#xEB81;</li>
+                </ul>
+            </td>
+            <td class='keyword'>
+                <ul>
+                    <li>merge</li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td class='ss-icon'>
+                &#x21BB;
+            </td>
+            <td class='encode'>
+                <ul>
+                    <li class='css'><span class="ss-icon ss-refresh"></span></li>
+                    <li class='unicode'>&amp;#x21BB;</li>
+                </ul>
+            </td>
+            <td class='keyword'>
+                <ul>
+                    <li>refresh</li>
+                    <li>redo</li>
+                    <li>rotateright</li>
+                    <li>rotate right <a href='#spaces' class='note'>*</a></li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td class='ss-icon'>
+                &#xEB82;
+            </td>
+            <td class='encode'>
+                <ul>
+                    <li class='css'><span class="ss-icon ss-sync"></span></li>
+                    <li class='unicode'>&amp;#xEB82;</li>
+                </ul>
+            </td>
+            <td class='keyword'>
+                <ul>
+                    <li>sync</li>
+                    <li>syncing</li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td class='ss-icon'>
+                &#xEB83;
+            </td>
+            <td class='encode'>
+                <ul>
+                    <li class='css'><span class="ss-icon ss-loading"></span></li>
+                    <li class='unicode'>&amp;#xEB83;</li>
+                </ul>
+            </td>
+            <td class='keyword'>
+                <ul>
+                    <li>loading</li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td class='ss-icon'>
+                &#xEB84;
+            </td>
+            <td class='encode'>
+                <ul>
+                    <li class='css'><span class="ss-icon ss-wifi"></span></li>
+                    <li class='unicode'>&amp;#xEB84;</li>
+                </ul>
+            </td>
+            <td class='keyword'>
+                <ul>
+                    <li>wifi</li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td class='ss-icon'>
+                &#xEB85;
+            </td>
+            <td class='encode'>
+                <ul>
+                    <li class='css'><span class="ss-icon ss-connection"></span></li>
+                    <li class='unicode'>&amp;#xEB85;</li>
+                </ul>
+            </td>
+            <td class='keyword'>
+                <ul>
+                    <li>connection</li>
+                    <li>nodes</li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td class='ss-icon'>
+                &#x1F4C4;
+            </td>
+            <td class='encode'>
+                <ul>
+                    <li class='css'><span class="ss-icon ss-file"></span></li>
+                    <li class='unicode'>&amp;#x1F4C4;</li>
+                </ul>
+            </td>
+            <td class='keyword'>
+                <ul>
+                    <li>file</li>
+                    <li>document</li>
+                    <li>page</li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td class='ss-icon'>
+                &#x1F4C1;
+            </td>
+            <td class='encode'>
+                <ul>
+                    <li class='css'><span class="ss-icon ss-folder"></span></li>
+                    <li class='unicode'>&amp;#x1F4C1;</li>
+                </ul>
+            </td>
+            <td class='keyword'>
+                <ul>
+                    <li>folder</li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td class='ss-icon'>
+                &#x201C;
+            </td>
+            <td class='encode'>
+                <ul>
+                    <li class='css'><span class="ss-icon ss-quote"></span></li>
+                    <li class='unicode'>&amp;#x201C;</li>
+                </ul>
+            </td>
+            <td class='keyword'>
+                <ul>
+                    <li>quote</li>
+                    <li>pullquote</li>
+                    <li>pull quote <a href='#spaces' class='note'>*</a></li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td class='ss-icon'>
+                &#xED00;
+            </td>
+            <td class='encode'>
+                <ul>
+                    <li class='css'><span class="ss-icon ss-text"></span></li>
+                    <li class='unicode'>&amp;#xED00;</li>
+                </ul>
+            </td>
+            <td class='keyword'>
+                <ul>
+                    <li>text</li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td class='ss-icon'>
+                &#xED01;
+            </td>
+            <td class='encode'>
+                <ul>
+                    <li class='css'><span class="ss-icon ss-font"></span></li>
+                    <li class='unicode'>&amp;#xED01;</li>
+                </ul>
+            </td>
+            <td class='keyword'>
+                <ul>
+                    <li>font</li>
+                    <li>typeface</li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td class='ss-icon'>
+                &#x2399;
+            </td>
+            <td class='encode'>
+                <ul>
+                    <li class='css'><span class="ss-icon ss-print"></span></li>
+                    <li class='unicode'>&amp;#x2399;</li>
+                </ul>
+            </td>
+            <td class='keyword'>
+                <ul>
+                    <li>print</li>
+                    <li>printer</li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td class='ss-icon'>
+                &#x1F4E0;
+            </td>
+            <td class='encode'>
+                <ul>
+                    <li class='css'><span class="ss-icon ss-fax"></span></li>
+                    <li class='unicode'>&amp;#x1F4E0;</li>
+                </ul>
+            </td>
+            <td class='keyword'>
+                <ul>
+                    <li>fax</li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td class='ss-icon'>
+                &#xED50;
+            </td>
+            <td class='encode'>
+                <ul>
+                    <li class='css'><span class="ss-icon ss-list"></span></li>
+                    <li class='unicode'>&amp;#xED50;</li>
+                </ul>
+            </td>
+            <td class='keyword'>
+                <ul>
+                    <li>list</li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td class='ss-icon'>
+                &#xEDA0;
+            </td>
+            <td class='encode'>
+                <ul>
+                    <li class='css'><span class="ss-icon ss-layout"></span></li>
+                    <li class='unicode'>&amp;#xEDA0;</li>
+                </ul>
+            </td>
+            <td class='keyword'>
+                <ul>
+                    <li>layout</li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td class='ss-icon'>
+                &#xEE00;
+            </td>
+            <td class='encode'>
+                <ul>
+                    <li class='css'><span class="ss-icon ss-action"></span></li>
+                    <li class='unicode'>&amp;#xEE00;</li>
+                </ul>
+            </td>
+            <td class='keyword'>
+                <ul>
+                    <li>action</li>
+                    <li>out</li>
+                    <li>share</li>
+                    <li>visit</li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td class='ss-icon'>
+                &#x21AA;
+            </td>
+            <td class='encode'>
+                <ul>
+                    <li class='css'><span class="ss-icon ss-redirect"></span></li>
+                    <li class='unicode'>&amp;#x21AA;</li>
+                </ul>
+            </td>
+            <td class='keyword'>
+                <ul>
+                    <li>redirect</li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td class='ss-icon'>
+                &#x2922;
+            </td>
+            <td class='encode'>
+                <ul>
+                    <li class='css'><span class="ss-icon ss-expand"></span></li>
+                    <li class='unicode'>&amp;#x2922;</li>
+                </ul>
+            </td>
+            <td class='keyword'>
+                <ul>
+                    <li>expand</li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td class='ss-icon'>
+                &#xEE01;
+            </td>
+            <td class='encode'>
+                <ul>
+                    <li class='css'><span class="ss-icon ss-contract"></span></li>
+                    <li class='unicode'>&amp;#xEE01;</li>
+                </ul>
+            </td>
+            <td class='keyword'>
+                <ul>
+                    <li>contract</li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td class='ss-icon'>
+                &#x2753;
+            </td>
+            <td class='encode'>
+                <ul>
+                    <li class='css'><span class="ss-icon ss-help"></span></li>
+                    <li class='unicode'>&amp;#x2753;</li>
+                </ul>
+            </td>
+            <td class='keyword'>
+                <ul>
+                    <li>help</li>
+                    <li>question</li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td class='ss-icon'>
+                &#x2139;
+            </td>
+            <td class='encode'>
+                <ul>
+                    <li class='css'><span class="ss-icon ss-info"></span></li>
+                    <li class='unicode'>&amp;#x2139;</li>
+                </ul>
+            </td>
+            <td class='keyword'>
+                <ul>
+                    <li>info</li>
+                    <li>information</li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td class='ss-icon'>
+                &#x26A0;
+            </td>
+            <td class='encode'>
+                <ul>
+                    <li class='css'><span class="ss-icon ss-alert"></span></li>
+                    <li class='unicode'>&amp;#x26A0;</li>
+                </ul>
+            </td>
+            <td class='keyword'>
+                <ul>
+                    <li>alert</li>
+                    <li>warning</li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td class='ss-icon'>
+                &#x26D4;
+            </td>
+            <td class='encode'>
+                <ul>
+                    <li class='css'><span class="ss-icon ss-caution"></span></li>
+                    <li class='unicode'>&amp;#x26D4;</li>
+                </ul>
+            </td>
+            <td class='keyword'>
+                <ul>
+                    <li>caution</li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td class='ss-icon'>
+                &#xEE02;
+            </td>
+            <td class='encode'>
+                <ul>
+                    <li class='css'><span class="ss-icon ss-logout"></span></li>
+                    <li class='unicode'>&amp;#xEE02;</li>
+                </ul>
+            </td>
+            <td class='keyword'>
+                <ul>
+                    <li>exit</li>
+                    <li>logout</li>
+                    <li>log out <a href='#spaces' class='note'>*</a></li>
+                    <li>signout</li>
+                    <li>sign out <a href='#spaces' class='note'>*</a></li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td class='ss-icon'>
+                &#x002B;
+            </td>
+            <td class='encode'>
+                <ul>
+                    <li class='css'><span class="ss-icon ss-plus"></span></li>
+                    <li class='unicode'>&amp;#x002B;</li>
+                </ul>
+            </td>
+            <td class='keyword'>
+                <ul>
+                    <li>plus</li>
+                    <li>add</li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td class='ss-icon'>
+                &#x002D;
+            </td>
+            <td class='encode'>
+                <ul>
+                    <li class='css'><span class="ss-icon ss-hyphen"></span></li>
+                    <li class='unicode'>&amp;#x002D;</li>
+                </ul>
+            </td>
+            <td class='keyword'>
+                <ul>
+                    <li>hyphen</li>
+                    <li>minus</li>
+                    <li>remove</li>
+                    <li>subtract</li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td class='ss-icon'>
+                &#x2713;
+            </td>
+            <td class='encode'>
+                <ul>
+                    <li class='css'><span class="ss-icon ss-check"></span></li>
+                    <li class='unicode'>&amp;#x2713;</li>
+                </ul>
+            </td>
+            <td class='keyword'>
+                <ul>
+                    <li>check</li>
+                    <li>checked</li>
+                    <li>checkmark</li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td class='ss-icon'>
+                &#x2421;
+            </td>
+            <td class='encode'>
+                <ul>
+                    <li class='css'><span class="ss-icon ss-delete"></span></li>
+                    <li class='unicode'>&amp;#x2421;</li>
+                </ul>
+            </td>
+            <td class='keyword'>
+                <ul>
+                    <li>delete</li>
+                    <li>close</li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td class='ss-icon'>
+                &#x2699;
+            </td>
+            <td class='encode'>
+                <ul>
+                    <li class='css'><span class="ss-icon ss-settings"></span></li>
+                    <li class='unicode'>&amp;#x2699;</li>
+                </ul>
+            </td>
+            <td class='keyword'>
+                <ul>
+                    <li>settings</li>
+                    <li>cog</li>
+                    <li>gear</li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td class='ss-icon'>
+                &#xF000;
+            </td>
+            <td class='encode'>
+                <ul>
+                    <li class='css'><span class="ss-icon ss-dashboard"></span></li>
+                    <li class='unicode'>&amp;#xF000;</li>
+                </ul>
+            </td>
+            <td class='keyword'>
+                <ul>
+                    <li>dashboard</li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td class='ss-icon'>
+                &#x1F514;
+            </td>
+            <td class='encode'>
+                <ul>
+                    <li class='css'><span class="ss-icon ss-notifications"></span></li>
+                    <li class='unicode'>&amp;#x1F514;</li>
+                </ul>
+            </td>
+            <td class='keyword'>
+                <ul>
+                    <li>notification</li>
+                    <li>notifications</li>
+                    <li>bell</li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td class='ss-icon'>
+                &#x1F515;
+            </td>
+            <td class='encode'>
+                <ul>
+                    <li class='css'><span class="ss-icon ss-notificationsdisabled"></span></li>
+                    <li class='unicode'>&amp;#x1F515;</li>
+                </ul>
+            </td>
+            <td class='keyword'>
+                <ul>
+                    <li>notificationsdisabled</li>
+                    <li>notifications disabled <a href='#spaces' class='note'>*</a></li>
+                    <li>notificationdisabled</li>
+                    <li>notification disabled <a href='#spaces' class='note'>*</a></li>
+                    <li>belldisabled</li>
+                    <li>bell disabled <a href='#spaces' class='note'>*</a></li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td class='ss-icon'>
+                &#x23F2;
+            </td>
+            <td class='encode'>
+                <ul>
+                    <li class='css'><span class="ss-icon ss-clock"></span></li>
+                    <li class='unicode'>&amp;#x23F2;</li>
+                </ul>
+            </td>
+            <td class='keyword'>
+                <ul>
+                    <li>clock</li>
+                    <li>time</li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td class='ss-icon'>
+                &#x23F1;
+            </td>
+            <td class='encode'>
+                <ul>
+                    <li class='css'><span class="ss-icon ss-stopwatch"></span></li>
+                    <li class='unicode'>&amp;#x23F1;</li>
+                </ul>
+            </td>
+            <td class='keyword'>
+                <ul>
+                    <li>stopwatch</li>
+                    <li>timer</li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td class='ss-icon'>
+                &#x1F4C5;
+            </td>
+            <td class='encode'>
+                <ul>
+                    <li class='css'><span class="ss-icon ss-calendar"></span></li>
+                    <li class='unicode'>&amp;#x1F4C5;</li>
+                </ul>
+            </td>
+            <td class='keyword'>
+                <ul>
+                    <li>calendar</li>
+                    <li>date</li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td class='ss-icon'>
+                &#xF070;
+            </td>
+            <td class='encode'>
+                <ul>
+                    <li class='css'><span class="ss-icon ss-calendaradd"></span></li>
+                    <li class='unicode'>&amp;#xF070;</li>
+                </ul>
+            </td>
+            <td class='keyword'>
+                <ul>
+                    <li>calendaradd</li>
+                    <li>calendar add <a href='#spaces' class='note'>*</a></li>
+                    <li>addcalendar</li>
+                    <li>add calendar <a href='#spaces' class='note'>*</a></li>
+                    <li>adddate</li>
+                    <li>add date <a href='#spaces' class='note'>*</a></li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td class='ss-icon'>
+                &#xF071;
+            </td>
+            <td class='encode'>
+                <ul>
+                    <li class='css'><span class="ss-icon ss-calendarremove"></span></li>
+                    <li class='unicode'>&amp;#xF071;</li>
+                </ul>
+            </td>
+            <td class='keyword'>
+                <ul>
+                    <li>calendarremove</li>
+                    <li>calendar remove <a href='#spaces' class='note'>*</a></li>
+                    <li>removecalendar</li>
+                    <li>remove calendar <a href='#spaces' class='note'>*</a></li>
+                    <li>removedate</li>
+                    <li>remove date <a href='#spaces' class='note'>*</a></li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td class='ss-icon'>
+                &#xF072;
+            </td>
+            <td class='encode'>
+                <ul>
+                    <li class='css'><span class="ss-icon ss-calendarcheck"></span></li>
+                    <li class='unicode'>&amp;#xF072;</li>
+                </ul>
+            </td>
+            <td class='keyword'>
+                <ul>
+                    <li>calendarcheck</li>
+                    <li>calendar check <a href='#spaces' class='note'>*</a></li>
+                    <li>checkcalendar</li>
+                    <li>check calendar <a href='#spaces' class='note'>*</a></li>
+                    <li>checkdate</li>
+                    <li>check date <a href='#spaces' class='note'>*</a></li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td class='ss-icon'>
+                &#xF073;
+            </td>
+            <td class='encode'>
+                <ul>
+                    <li class='css'><span class="ss-icon ss-calendardelete"></span></li>
+                    <li class='unicode'>&amp;#xF073;</li>
+                </ul>
+            </td>
+            <td class='keyword'>
+                <ul>
+                    <li>calendardelete</li>
+                    <li>calendar delete <a href='#spaces' class='note'>*</a></li>
+                    <li>deletecalendar</li>
+                    <li>delete calendar <a href='#spaces' class='note'>*</a></li>
+                    <li>deletedate</li>
+                    <li>delete date <a href='#spaces' class='note'>*</a></li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td class='ss-icon'>
+                &#x1F4BC;
+            </td>
+            <td class='encode'>
+                <ul>
+                    <li class='css'><span class="ss-icon ss-briefcase"></span></li>
+                    <li class='unicode'>&amp;#x1F4BC;</li>
+                </ul>
+            </td>
+            <td class='keyword'>
+                <ul>
+                    <li>briefcase</li>
+                    <li>work</li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td class='ss-icon'>
+                &#x2601;
+            </td>
+            <td class='encode'>
+                <ul>
+                    <li class='css'><span class="ss-icon ss-cloud"></span></li>
+                    <li class='unicode'>&amp;#x2601;</li>
+                </ul>
+            </td>
+            <td class='keyword'>
+                <ul>
+                    <li>cloud</li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td class='ss-icon'>
+                &#x1F4A7;
+            </td>
+            <td class='encode'>
+                <ul>
+                    <li class='css'><span class="ss-icon ss-droplet"></span></li>
+                    <li class='unicode'>&amp;#x1F4A7;</li>
+                </ul>
+            </td>
+            <td class='keyword'>
+                <ul>
+                    <li>drop</li>
+                    <li>droplet</li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td class='ss-icon'>
+                &#xF500;
+            </td>
+            <td class='encode'>
+                <ul>
+                    <li class='css'><span class="ss-icon ss-navigateup"></span></li>
+                    <li class='unicode'>&amp;#xF500;</li>
+                </ul>
+            </td>
+            <td class='keyword'>
+                <ul>
+                    <li>navigateup</li>
+                    <li>navigate up <a href='#spaces' class='note'>*</a></li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td class='ss-icon'>
+                &#x25BB;
+            </td>
+            <td class='encode'>
+                <ul>
+                    <li class='css'><span class="ss-icon ss-navigateright"></span></li>
+                    <li class='unicode'>&amp;#x25BB;</li>
+                </ul>
+            </td>
+            <td class='keyword'>
+                <ul>
+                    <li>navigateright</li>
+                    <li>navigate right <a href='#spaces' class='note'>*</a></li>
+                    <li>next</li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td class='ss-icon'>
+                &#xF501;
+            </td>
+            <td class='encode'>
+                <ul>
+                    <li class='css'><span class="ss-icon ss-navigatedown"></span></li>
+                    <li class='unicode'>&amp;#xF501;</li>
+                </ul>
+            </td>
+            <td class='keyword'>
+                <ul>
+                    <li>navigatedown</li>
+                    <li>navigate down <a href='#spaces' class='note'>*</a></li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td class='ss-icon'>
+                &#x25C5;
+            </td>
+            <td class='encode'>
+                <ul>
+                    <li class='css'><span class="ss-icon ss-navigateleft"></span></li>
+                    <li class='unicode'>&amp;#x25C5;</li>
+                </ul>
+            </td>
+            <td class='keyword'>
+                <ul>
+                    <li>navigateleft</li>
+                    <li>navigate left <a href='#spaces' class='note'>*</a></li>
+                    <li>previous</li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td class='ss-icon'>
+                &#x2B06;
+            </td>
+            <td class='encode'>
+                <ul>
+                    <li class='css'><span class="ss-icon ss-up"></span></li>
+                    <li class='unicode'>&amp;#x2B06;</li>
+                </ul>
+            </td>
+            <td class='keyword'>
+                <ul>
+                    <li>up</li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td class='ss-icon'>
+                &#x2B08;
+            </td>
+            <td class='encode'>
+                <ul>
+                    <li class='css'><span class="ss-icon ss-upright"></span></li>
+                    <li class='unicode'>&amp;#x2B08;</li>
+                </ul>
+            </td>
+            <td class='keyword'>
+                <ul>
+                    <li>upright</li>
+                    <li>up right <a href='#spaces' class='note'>*</a></li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td class='ss-icon'>
+                &#x27A1;
+            </td>
+            <td class='encode'>
+                <ul>
+                    <li class='css'><span class="ss-icon ss-right"></span></li>
+                    <li class='unicode'>&amp;#x27A1;</li>
+                </ul>
+            </td>
+            <td class='keyword'>
+                <ul>
+                    <li>right</li>
+                    <li>forward</li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td class='ss-icon'>
+                &#x2B0A;
+            </td>
+            <td class='encode'>
+                <ul>
+                    <li class='css'><span class="ss-icon ss-downright"></span></li>
+                    <li class='unicode'>&amp;#x2B0A;</li>
+                </ul>
+            </td>
+            <td class='keyword'>
+                <ul>
+                    <li>downright</li>
+                    <li>down right <a href='#spaces' class='note'>*</a></li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td class='ss-icon'>
+                &#x2B07;
+            </td>
+            <td class='encode'>
+                <ul>
+                    <li class='css'><span class="ss-icon ss-down"></span></li>
+                    <li class='unicode'>&amp;#x2B07;</li>
+                </ul>
+            </td>
+            <td class='keyword'>
+                <ul>
+                    <li>down</li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td class='ss-icon'>
+                &#x2B0B;
+            </td>
+            <td class='encode'>
+                <ul>
+                    <li class='css'><span class="ss-icon ss-downleft"></span></li>
+                    <li class='unicode'>&amp;#x2B0B;</li>
+                </ul>
+            </td>
+            <td class='keyword'>
+                <ul>
+                    <li>downleft</li>
+                    <li>down left <a href='#spaces' class='note'>*</a></li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td class='ss-icon'>
+                &#x2B05;
+            </td>
+            <td class='encode'>
+                <ul>
+                    <li class='css'><span class="ss-icon ss-left"></span></li>
+                    <li class='unicode'>&amp;#x2B05;</li>
+                </ul>
+            </td>
+            <td class='keyword'>
+                <ul>
+                    <li>left</li>
+                    <li>back</li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td class='ss-icon'>
+                &#x2B09;
+            </td>
+            <td class='encode'>
+                <ul>
+                    <li class='css'><span class="ss-icon ss-upleft"></span></li>
+                    <li class='unicode'>&amp;#x2B09;</li>
+                </ul>
+            </td>
+            <td class='keyword'>
+                <ul>
+                    <li>upleft</li>
+                    <li>up left <a href='#spaces' class='note'>*</a></li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td class='ss-icon'>
+                &#x25B4;
+            </td>
+            <td class='encode'>
+                <ul>
+                    <li class='css'><span class="ss-icon ss-directup"></span></li>
+                    <li class='unicode'>&amp;#x25B4;</li>
+                </ul>
+            </td>
+            <td class='keyword'>
+                <ul>
+                    <li>ascend</li>
+                    <li>ascending</li>
+                    <li>directup</li>
+                    <li>direct up <a href='#spaces' class='note'>*</a></li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td class='ss-icon'>
+                &#x25B9;
+            </td>
+            <td class='encode'>
+                <ul>
+                    <li class='css'><span class="ss-icon ss-directright"></span></li>
+                    <li class='unicode'>&amp;#x25B9;</li>
+                </ul>
+            </td>
+            <td class='keyword'>
+                <ul>
+                    <li>directright</li>
+                    <li>direct right <a href='#spaces' class='note'>*</a></li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td class='ss-icon'>
+                &#x25BE;
+            </td>
+            <td class='encode'>
+                <ul>
+                    <li class='css'><span class="ss-icon ss-dropdown"></span></li>
+                    <li class='unicode'>&amp;#x25BE;</li>
+                </ul>
+            </td>
+            <td class='keyword'>
+                <ul>
+                    <li>descend</li>
+                    <li>descending</li>
+                    <li>directdown</li>
+                    <li>direct down <a href='#spaces' class='note'>*</a></li>
+                    <li>dropdown</li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td class='ss-icon'>
+                &#x25C3;
+            </td>
+            <td class='encode'>
+                <ul>
+                    <li class='css'><span class="ss-icon ss-directleft"></span></li>
+                    <li class='unicode'>&amp;#x25C3;</li>
+                </ul>
+            </td>
+            <td class='keyword'>
+                <ul>
+                    <li>directleft</li>
+                    <li>direct left <a href='#spaces' class='note'>*</a></li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td class='ss-icon'>
+                &#xF600;
+            </td>
+            <td class='encode'>
+                <ul>
+                    <li class='css'><span class="ss-icon ss-retweet"></span></li>
+                    <li class='unicode'>&amp;#xF600;</li>
+                </ul>
+            </td>
+            <td class='keyword'>
+                <ul>
+                    <li>retweet</li>
+                </ul>
+            </td>
+        </tr>
+        </table>
+
+      </section>
+
+      <p class='note'><a name='spaces'>*</a>Note: Keywords with spaces are not currently supported in Firefox.</p>
+
+    </div>
+    <footer>
+      <div class="wrapper">
+        <nav>
+          <ul>
+            <li>
+              <a href="http://symbolset.com">Symbolset</a>
+            </li>
+            <li>
+              <a href="http://symbolset.com/license">License</a>
+            </li>
+          </ul>
+        </nav>
+        <div class="copyright">
+          <span>
+            Copyright © 2012
+            <a href="http://oak.is" target="_blank">Oak Studios LLC</a>
+          </span>
+        </div>
+      </div>
+    </footer>
+
+  </body>
+</html>