Started to build out the app. Its got a basic set of features and it should really be in VC

.gitignore

@@ -0,0 +1,9 @@
+node_modules/
+.npm
+*.tgz
+*.log
+pids
+*.pid
+*.seed
+*.pid.lock
+

client/.babelrc

@@ -0,0 +1,12 @@
+{
+  "presets": [
+    ["env", {
+      "modules": false,
+      "targets": {
+        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
+      }
+    }],
+    "stage-2"
+  ],
+  "plugins": ["transform-vue-jsx", "transform-runtime"]
+}

client/.editorconfig

@@ -0,0 +1,9 @@
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true

client/.gitignore

@@ -0,0 +1,14 @@
+.DS_Store
+node_modules/
+/dist/
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln

client/.postcssrc.js

@@ -0,0 +1,10 @@
+// https://github.com/michael-ciniawsky/postcss-load-config
+
+module.exports = {
+  "plugins": {
+    "postcss-import": {},
+    "postcss-url": {},
+    // to edit target browsers: use "browserslist" field in package.json
+    "autoprefixer": {}
+  }
+}

client/README.md

@@ -0,0 +1,21 @@
+# client
+
+> A Vue.js project
+
+## Build Setup
+
+``` bash
+# install dependencies
+npm install
+
+# serve with hot reload at localhost:8080
+npm run dev
+
+# build for production with minification
+npm run build
+
+# build for production and view the bundle analyzer report
+npm run build --report
+```
+
+For a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).

client/build/build.js

@@ -0,0 +1,41 @@
+'use strict'
+require('./check-versions')()
+
+process.env.NODE_ENV = 'production'
+
+const ora = require('ora')
+const rm = require('rimraf')
+const path = require('path')
+const chalk = require('chalk')
+const webpack = require('webpack')
+const config = require('../config')
+const webpackConfig = require('./webpack.prod.conf')
+
+const spinner = ora('building for production...')
+spinner.start()
+
+rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
+  if (err) throw err
+  webpack(webpackConfig, (err, stats) => {
+    spinner.stop()
+    if (err) throw err
+    process.stdout.write(stats.toString({
+      colors: true,
+      modules: false,
+      children: false, // If you are using ts-loader, setting this to true will make TypeScript errors show up during build.
+      chunks: false,
+      chunkModules: false
+    }) + '\n\n')
+
+    if (stats.hasErrors()) {
+      console.log(chalk.red('  Build failed with errors.\n'))
+      process.exit(1)
+    }
+
+    console.log(chalk.cyan('  Build complete.\n'))
+    console.log(chalk.yellow(
+      '  Tip: built files are meant to be served over an HTTP server.\n' +
+      '  Opening index.html over file:// won\'t work.\n'
+    ))
+  })
+})

client/build/check-versions.js

@@ -0,0 +1,54 @@
+'use strict'
+const chalk = require('chalk')
+const semver = require('semver')
+const packageConfig = require('../package.json')
+const shell = require('shelljs')
+
+function exec (cmd) {
+  return require('child_process').execSync(cmd).toString().trim()
+}
+
+const versionRequirements = [
+  {
+    name: 'node',
+    currentVersion: semver.clean(process.version),
+    versionRequirement: packageConfig.engines.node
+  }
+]
+
+if (shell.which('npm')) {
+  versionRequirements.push({
+    name: 'npm',
+    currentVersion: exec('npm --version'),
+    versionRequirement: packageConfig.engines.npm
+  })
+}
+
+module.exports = function () {
+  const warnings = []
+
+  for (let i = 0; i < versionRequirements.length; i++) {
+    const mod = versionRequirements[i]
+
+    if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {
+      warnings.push(mod.name + ': ' +
+        chalk.red(mod.currentVersion) + ' should be ' +
+        chalk.green(mod.versionRequirement)
+      )
+    }
+  }
+
+  if (warnings.length) {
+    console.log('')
+    console.log(chalk.yellow('To use this template, you must update following to modules:'))
+    console.log()
+
+    for (let i = 0; i < warnings.length; i++) {
+      const warning = warnings[i]
+      console.log('  ' + warning)
+    }
+
+    console.log()
+    process.exit(1)
+  }
+}

client/build/utils.js

@@ -0,0 +1,101 @@
+'use strict'
+const path = require('path')
+const config = require('../config')
+const ExtractTextPlugin = require('extract-text-webpack-plugin')
+const packageConfig = require('../package.json')
+
+exports.assetsPath = function (_path) {
+  const assetsSubDirectory = process.env.NODE_ENV === 'production'
+    ? config.build.assetsSubDirectory
+    : config.dev.assetsSubDirectory
+
+  return path.posix.join(assetsSubDirectory, _path)
+}
+
+exports.cssLoaders = function (options) {
+  options = options || {}
+
+  const cssLoader = {
+    loader: 'css-loader',
+    options: {
+      sourceMap: options.sourceMap
+    }
+  }
+
+  const postcssLoader = {
+    loader: 'postcss-loader',
+    options: {
+      sourceMap: options.sourceMap
+    }
+  }
+
+  // generate loader string to be used with extract text plugin
+  function generateLoaders (loader, loaderOptions) {
+    const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
+
+    if (loader) {
+      loaders.push({
+        loader: loader + '-loader',
+        options: Object.assign({}, loaderOptions, {
+          sourceMap: options.sourceMap
+        })
+      })
+    }
+
+    // Extract CSS when that option is specified
+    // (which is the case during production build)
+    if (options.extract) {
+      return ExtractTextPlugin.extract({
+        use: loaders,
+        fallback: 'vue-style-loader'
+      })
+    } else {
+      return ['vue-style-loader'].concat(loaders)
+    }
+  }
+
+  // https://vue-loader.vuejs.org/en/configurations/extract-css.html
+  return {
+    css: generateLoaders(),
+    postcss: generateLoaders(),
+    less: generateLoaders('less'),
+    sass: generateLoaders('sass', { indentedSyntax: true }),
+    scss: generateLoaders('sass'),
+    stylus: generateLoaders('stylus'),
+    styl: generateLoaders('stylus')
+  }
+}
+
+// Generate loaders for standalone style files (outside of .vue)
+exports.styleLoaders = function (options) {
+  const output = []
+  const loaders = exports.cssLoaders(options)
+
+  for (const extension in loaders) {
+    const loader = loaders[extension]
+    output.push({
+      test: new RegExp('\\.' + extension + '$'),
+      use: loader
+    })
+  }
+
+  return output
+}
+
+exports.createNotifierCallback = () => {
+  const notifier = require('node-notifier')
+
+  return (severity, errors) => {
+    if (severity !== 'error') return
+
+    const error = errors[0]
+    const filename = error.file && error.file.split('!').pop()
+
+    notifier.notify({
+      title: packageConfig.name,
+      message: severity + ': ' + error.name,
+      subtitle: filename || '',
+      icon: path.join(__dirname, 'logo.png')
+    })
+  }
+}

client/build/vue-loader.conf.js

@@ -0,0 +1,22 @@
+'use strict'
+const utils = require('./utils')
+const config = require('../config')
+const isProduction = process.env.NODE_ENV === 'production'
+const sourceMapEnabled = isProduction
+  ? config.build.productionSourceMap
+  : config.dev.cssSourceMap
+
+module.exports = {
+  loaders: utils.cssLoaders({
+    sourceMap: sourceMapEnabled,
+    extract: isProduction
+  }),
+  cssSourceMap: sourceMapEnabled,
+  cacheBusting: config.dev.cacheBusting,
+  transformToRequire: {
+    video: ['src', 'poster'],
+    source: 'src',
+    img: 'src',
+    image: 'xlink:href'
+  }
+}

client/build/webpack.base.conf.js

@@ -0,0 +1,82 @@
+'use strict'
+const path = require('path')
+const utils = require('./utils')
+const config = require('../config')
+const vueLoaderConfig = require('./vue-loader.conf')
+
+function resolve (dir) {
+  return path.join(__dirname, '..', dir)
+}
+
+
+
+module.exports = {
+  context: path.resolve(__dirname, '../'),
+  entry: {
+    app: './src/main.js'
+  },
+  output: {
+    path: config.build.assetsRoot,
+    filename: '[name].js',
+    publicPath: process.env.NODE_ENV === 'production'
+      ? config.build.assetsPublicPath
+      : config.dev.assetsPublicPath
+  },
+  resolve: {
+    extensions: ['.js', '.vue', '.json'],
+    alias: {
+      'vue$': 'vue/dist/vue.esm.js',
+      '@': resolve('src'),
+    }
+  },
+  module: {
+    rules: [
+      {
+        test: /\.vue$/,
+        loader: 'vue-loader',
+        options: vueLoaderConfig
+      },
+      {
+        test: /\.js$/,
+        loader: 'babel-loader',
+        include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
+      },
+      {
+        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
+        loader: 'url-loader',
+        options: {
+          limit: 10000,
+          name: utils.assetsPath('img/[name].[hash:7].[ext]')
+        }
+      },
+      {
+        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
+        loader: 'url-loader',
+        options: {
+          limit: 10000,
+          name: utils.assetsPath('media/[name].[hash:7].[ext]')
+        }
+      },
+      {
+        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
+        loader: 'url-loader',
+        options: {
+          limit: 10000,
+          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
+        }
+      }
+    ]
+  },
+  node: {
+    // prevent webpack from injecting useless setImmediate polyfill because Vue
+    // source contains it (although only uses it if it's native).
+    setImmediate: false,
+    // prevent webpack from injecting mocks to Node native modules
+    // that does not make sense for the client
+    dgram: 'empty',
+    fs: 'empty',
+    net: 'empty',
+    tls: 'empty',
+    child_process: 'empty'
+  }
+}

client/build/webpack.dev.conf.js

@@ -0,0 +1,96 @@
+'use strict'
+const utils = require('./utils')
+const webpack = require('webpack')
+const config = require('../config')
+const merge = require('webpack-merge')
+const path = require('path')
+const baseWebpackConfig = require('./webpack.base.conf')
+const CopyWebpackPlugin = require('copy-webpack-plugin')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
+const portfinder = require('portfinder')
+
+const HOST = process.env.HOST
+const PORT = process.env.PORT && Number(process.env.PORT)
+
+const devWebpackConfig = merge(baseWebpackConfig, {
+  module: {
+    rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
+  },
+  // cheap-module-eval-source-map is faster for development
+  devtool: config.dev.devtool,
+
+  // these devServer options should be customized in /config/index.js
+  devServer: {
+    clientLogLevel: 'warning',
+    historyApiFallback: {
+      rewrites: [
+        { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
+      ],
+    },
+    hot: true,
+    contentBase: false, // since we use CopyWebpackPlugin.
+    compress: true,
+    host: HOST || config.dev.host,
+    port: PORT || config.dev.port,
+    open: config.dev.autoOpenBrowser,
+    overlay: config.dev.errorOverlay
+      ? { warnings: false, errors: true }
+      : false,
+    publicPath: config.dev.assetsPublicPath,
+    proxy: config.dev.proxyTable,
+    quiet: true, // necessary for FriendlyErrorsPlugin
+    disableHostCheck: true,
+    watchOptions: {
+      poll: config.dev.poll,
+    }
+  },
+  plugins: [
+    new webpack.DefinePlugin({
+      'process.env': require('../config/dev.env')
+    }),
+    new webpack.HotModuleReplacementPlugin(),
+    new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
+    new webpack.NoEmitOnErrorsPlugin(),
+    // https://github.com/ampedandwired/html-webpack-plugin
+    new HtmlWebpackPlugin({
+      filename: 'index.html',
+      template: 'index.html',
+      inject: true
+    }),
+    // copy custom static assets
+    new CopyWebpackPlugin([
+      {
+        from: path.resolve(__dirname, '../static'),
+        to: config.dev.assetsSubDirectory,
+        ignore: ['.*']
+      }
+    ])
+  ]
+})
+
+module.exports = new Promise((resolve, reject) => {
+  portfinder.basePort = process.env.PORT || config.dev.port
+  portfinder.getPort((err, port) => {
+    if (err) {
+      reject(err)
+    } else {
+      // publish the new Port, necessary for e2e tests
+      process.env.PORT = port
+      // add port to devServer config
+      devWebpackConfig.devServer.port = port
+
+      // Add FriendlyErrorsPlugin
+      devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({
+        compilationSuccessInfo: {
+          messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`],
+        },
+        onErrors: config.dev.notifyOnErrors
+        ? utils.createNotifierCallback()
+        : undefined
+      }))
+
+      resolve(devWebpackConfig)
+    }
+  })
+})

client/build/webpack.prod.conf.js

@@ -0,0 +1,145 @@
+'use strict'
+const path = require('path')
+const utils = require('./utils')
+const webpack = require('webpack')
+const config = require('../config')
+const merge = require('webpack-merge')
+const baseWebpackConfig = require('./webpack.base.conf')
+const CopyWebpackPlugin = require('copy-webpack-plugin')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+const ExtractTextPlugin = require('extract-text-webpack-plugin')
+const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
+const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
+
+const env = require('../config/prod.env')
+
+const webpackConfig = merge(baseWebpackConfig, {
+  module: {
+    rules: utils.styleLoaders({
+      sourceMap: config.build.productionSourceMap,
+      extract: true,
+      usePostCSS: true
+    })
+  },
+  devtool: config.build.productionSourceMap ? config.build.devtool : false,
+  output: {
+    path: config.build.assetsRoot,
+    filename: utils.assetsPath('js/[name].[chunkhash].js'),
+    chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
+  },
+  plugins: [
+    // http://vuejs.github.io/vue-loader/en/workflow/production.html
+    new webpack.DefinePlugin({
+      'process.env': env
+    }),
+    new UglifyJsPlugin({
+      uglifyOptions: {
+        compress: {
+          warnings: false
+        }
+      },
+      sourceMap: config.build.productionSourceMap,
+      parallel: true
+    }),
+    // extract css into its own file
+    new ExtractTextPlugin({
+      filename: utils.assetsPath('css/[name].[contenthash].css'),
+      // Setting the following option to `false` will not extract CSS from codesplit chunks.
+      // Their CSS will instead be inserted dynamically with style-loader when the codesplit chunk has been loaded by webpack.
+      // It's currently set to `true` because we are seeing that sourcemaps are included in the codesplit bundle as well when it's `false`, 
+      // increasing file size: https://github.com/vuejs-templates/webpack/issues/1110
+      allChunks: true,
+    }),
+    // Compress extracted CSS. We are using this plugin so that possible
+    // duplicated CSS from different components can be deduped.
+    new OptimizeCSSPlugin({
+      cssProcessorOptions: config.build.productionSourceMap
+        ? { safe: true, map: { inline: false } }
+        : { safe: true }
+    }),
+    // generate dist index.html with correct asset hash for caching.
+    // you can customize output by editing /index.html
+    // see https://github.com/ampedandwired/html-webpack-plugin
+    new HtmlWebpackPlugin({
+      filename: config.build.index,
+      template: 'index.html',
+      inject: true,
+      minify: {
+        removeComments: true,
+        collapseWhitespace: true,
+        removeAttributeQuotes: true
+        // more options:
+        // https://github.com/kangax/html-minifier#options-quick-reference
+      },
+      // necessary to consistently work with multiple chunks via CommonsChunkPlugin
+      chunksSortMode: 'dependency'
+    }),
+    // keep module.id stable when vendor modules does not change
+    new webpack.HashedModuleIdsPlugin(),
+    // enable scope hoisting
+    new webpack.optimize.ModuleConcatenationPlugin(),
+    // split vendor js into its own file
+    new webpack.optimize.CommonsChunkPlugin({
+      name: 'vendor',
+      minChunks (module) {
+        // any required modules inside node_modules are extracted to vendor
+        return (
+          module.resource &&
+          /\.js$/.test(module.resource) &&
+          module.resource.indexOf(
+            path.join(__dirname, '../node_modules')
+          ) === 0
+        )
+      }
+    }),
+    // extract webpack runtime and module manifest to its own file in order to
+    // prevent vendor hash from being updated whenever app bundle is updated
+    new webpack.optimize.CommonsChunkPlugin({
+      name: 'manifest',
+      minChunks: Infinity
+    }),
+    // This instance extracts shared chunks from code splitted chunks and bundles them
+    // in a separate chunk, similar to the vendor chunk
+    // see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk
+    new webpack.optimize.CommonsChunkPlugin({
+      name: 'app',
+      async: 'vendor-async',
+      children: true,
+      minChunks: 3
+    }),
+
+    // copy custom static assets
+    new CopyWebpackPlugin([
+      {
+        from: path.resolve(__dirname, '../static'),
+        to: config.build.assetsSubDirectory,
+        ignore: ['.*']
+      }
+    ])
+  ]
+})
+
+if (config.build.productionGzip) {
+  const CompressionWebpackPlugin = require('compression-webpack-plugin')
+
+  webpackConfig.plugins.push(
+    new CompressionWebpackPlugin({
+      asset: '[path].gz[query]',
+      algorithm: 'gzip',
+      test: new RegExp(
+        '\\.(' +
+        config.build.productionGzipExtensions.join('|') +
+        ')$'
+      ),
+      threshold: 10240,
+      minRatio: 0.8
+    })
+  )
+}
+
+if (config.build.bundleAnalyzerReport) {
+  const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
+  webpackConfig.plugins.push(new BundleAnalyzerPlugin())
+}
+
+module.exports = webpackConfig

client/config/dev.env.js

@@ -0,0 +1,7 @@
+'use strict'
+const merge = require('webpack-merge')
+const prodEnv = require('./prod.env')
+
+module.exports = merge(prodEnv, {
+  NODE_ENV: '"development"'
+})

client/config/index.js

@@ -0,0 +1,69 @@
+'use strict'
+// Template version: 1.3.1
+// see http://vuejs-templates.github.io/webpack for documentation.
+
+const path = require('path')
+
+module.exports = {
+  dev: {
+
+    // Paths
+    assetsSubDirectory: 'static',
+    assetsPublicPath: '/',
+    proxyTable: {},
+
+    // Various Dev Server settings
+    host: 'localhost', // can be overwritten by process.env.HOST
+    port: 8444, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
+    autoOpenBrowser: false,
+    errorOverlay: true,
+    notifyOnErrors: true,
+    poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
+
+    
+    /**
+     * Source Maps
+     */
+
+    // https://webpack.js.org/configuration/devtool/#development
+    devtool: 'cheap-module-eval-source-map',
+
+    // If you have problems debugging vue-files in devtools,
+    // set this to false - it *may* help
+    // https://vue-loader.vuejs.org/en/options.html#cachebusting
+    cacheBusting: true,
+
+    cssSourceMap: true
+  },
+
+  build: {
+    // Template for index.html
+    index: path.resolve(__dirname, '../dist/index.html'),
+
+    // Paths
+    assetsRoot: path.resolve(__dirname, '../dist'),
+    assetsSubDirectory: 'static',
+    assetsPublicPath: '/',
+
+    /**
+     * Source Maps
+     */
+
+    productionSourceMap: true,
+    // https://webpack.js.org/configuration/devtool/#production
+    devtool: '#source-map',
+
+    // Gzip off by default as many popular static hosts such as
+    // Surge or Netlify already gzip all static assets for you.
+    // Before setting to `true`, make sure to:
+    // npm install --save-dev compression-webpack-plugin
+    productionGzip: false,
+    productionGzipExtensions: ['js', 'css'],
+
+    // Run the build command with an extra argument to
+    // View the bundle analyzer report after build finishes:
+    // `npm run build --report`
+    // Set to `true` or `false` to always turn it on or off
+    bundleAnalyzerReport: process.env.npm_config_report
+  }
+}

client/config/prod.env.js

@@ -0,0 +1,4 @@
+'use strict'
+module.exports = {
+  NODE_ENV: '"production"'
+}

client/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <title>client</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>

client/package.json

@@ -0,0 +1,78 @@
+{
+  "name": "client",
+  "version": "1.0.0",
+  "description": "A Vue.js project",
+  "author": "Max G <admin@internet.com>",
+  "private": true,
+  "scripts": {
+    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
+    "watch": "webpack-dev-server --watch --inline --progress --config build/webpack.dev.conf.js",
+    "start": "npm run dev",
+    "build": "node build/build.js"
+  },
+  "dependencies": {
+    "@ckeditor/ckeditor5-build-classic": "^12.3.1",
+    "@ckeditor/ckeditor5-build-decoupled-document": "^12.3.1",
+    "@ckeditor/ckeditor5-dev-utils": "^12.0.2",
+    "@ckeditor/ckeditor5-dev-webpack-plugin": "^8.0.2",
+    "@ckeditor/ckeditor5-indent": "^10.0.1",
+    "@ckeditor/ckeditor5-paragraph": "^11.0.4",
+    "@ckeditor/ckeditor5-theme-lark": "^14.1.1",
+    "@ckeditor/ckeditor5-vue": "^1.0.0-beta.2",
+    "axios": "^0.18.0",
+    "ckeditor5-indent-text": "^1.0.8",
+    "es6-promise": "^4.2.6",
+    "postcss-loader": "^2.1.6",
+    "raw-loader": "^0.5.1",
+    "semantic-ui": "^2.4.2",
+    "vue": "^2.5.2",
+    "vue-router": "^3.0.1",
+    "vuex": "^3.1.0"
+  },
+  "devDependencies": {
+    "autoprefixer": "^7.1.2",
+    "babel-core": "^6.22.1",
+    "babel-helper-vue-jsx-merge-props": "^2.0.3",
+    "babel-loader": "^7.1.1",
+    "babel-plugin-syntax-jsx": "^6.18.0",
+    "babel-plugin-transform-runtime": "^6.22.0",
+    "babel-plugin-transform-vue-jsx": "^3.5.0",
+    "babel-preset-env": "^1.3.2",
+    "babel-preset-stage-2": "^6.22.0",
+    "chalk": "^2.0.1",
+    "copy-webpack-plugin": "^4.0.1",
+    "css-loader": "^0.28.0",
+    "extract-text-webpack-plugin": "^3.0.0",
+    "file-loader": "^1.1.4",
+    "friendly-errors-webpack-plugin": "^1.6.1",
+    "html-webpack-plugin": "^2.30.1",
+    "node-notifier": "^5.1.2",
+    "optimize-css-assets-webpack-plugin": "^3.2.0",
+    "ora": "^1.2.0",
+    "portfinder": "^1.0.13",
+    "postcss-import": "^11.0.0",
+    "postcss-loader": "^2.0.8",
+    "postcss-url": "^7.2.1",
+    "rimraf": "^2.6.0",
+    "semver": "^5.3.0",
+    "shelljs": "^0.7.6",
+    "uglifyjs-webpack-plugin": "^1.1.1",
+    "url-loader": "^0.5.8",
+    "vue-loader": "^13.3.0",
+    "vue-style-loader": "^3.0.1",
+    "vue-template-compiler": "^2.5.2",
+    "webpack": "^3.6.0",
+    "webpack-bundle-analyzer": "^2.9.0",
+    "webpack-dev-server": "^2.9.1",
+    "webpack-merge": "^4.1.0"
+  },
+  "engines": {
+    "node": ">= 6.0.0",
+    "npm": ">= 3.0.0"
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not ie <= 8"
+  ]
+}

client/semantic.json

@@ -0,0 +1,22 @@
+{
+  "base": "semantic/",
+  "paths": {
+    "source": {
+      "config": "src/theme.config",
+      "definitions": "src/definitions/",
+      "site": "src/site/",
+      "themes": "src/themes/"
+    },
+    "output": {
+      "packaged": "dist/",
+      "uncompressed": "dist/components/",
+      "compressed": "dist/components/",
+      "themes": "dist/themes/"
+    },
+    "clean": "dist/"
+  },
+  "permission": false,
+  "autoInstall": false,
+  "rtl": false,
+  "version": "2.4.2"
+}

client/semantic/gulpfile.js

@@ -0,0 +1,72 @@
+/*******************************
+            Set-up
+*******************************/
+
+var
+  gulp         = require('gulp-help')(require('gulp')),
+
+  // read user config to know what task to load
+  config       = require('./tasks/config/user'),
+
+  // watch changes
+  watch        = require('./tasks/watch'),
+
+  // build all files
+  build        = require('./tasks/build'),
+  buildJS      = require('./tasks/build/javascript'),
+  buildCSS     = require('./tasks/build/css'),
+  buildAssets  = require('./tasks/build/assets'),
+
+  // utility
+  clean        = require('./tasks/clean'),
+  version      = require('./tasks/version'),
+
+  // docs tasks
+  serveDocs    = require('./tasks/docs/serve'),
+  buildDocs    = require('./tasks/docs/build'),
+
+  // rtl
+  buildRTL     = require('./tasks/rtl/build'),
+  watchRTL     = require('./tasks/rtl/watch')
+;
+
+
+/*******************************
+             Tasks
+*******************************/
+
+gulp.task('default', false, [
+  'watch'
+]);
+
+gulp.task('watch', 'Watch for site/theme changes', watch);
+
+gulp.task('build', 'Builds all files from source', build);
+gulp.task('build-javascript', 'Builds all javascript from source', buildJS);
+gulp.task('build-css', 'Builds all css from source', buildCSS);
+gulp.task('build-assets', 'Copies all assets from source', buildAssets);
+
+gulp.task('clean', 'Clean dist folder', clean);
+gulp.task('version', 'Displays current version of Semantic', version);
+
+/*--------------
+      Docs
+---------------*/
+
+/*
+  Lets you serve files to a local documentation instance
+  https://github.com/Semantic-Org/Semantic-UI-Docs/
+*/
+
+gulp.task('serve-docs', 'Serve file changes to SUI Docs', serveDocs);
+gulp.task('build-docs', 'Build all files and add to SUI Docs', buildDocs);
+
+
+/*--------------
+      RTL
+---------------*/
+
+if(config.rtl) {
+  gulp.task('watch-rtl', 'Watch files as RTL', watchRTL);
+  gulp.task('build-rtl', 'Build all files as RTL', buildRTL);
+}

client/semantic/src/definitions/collections/breadcrumb.less

@@ -0,0 +1,122 @@
+/*!
+ * # Semantic UI - Breadcrumb
+ * http://github.com/semantic-org/semantic-ui/
+ *
+ *
+ * Released under the MIT license
+ * http://opensource.org/licenses/MIT
+ *
+ */
+
+/*******************************
+            Theme
+*******************************/
+
+@type    : 'collection';
+@element : 'breadcrumb';
+
+@import (multiple) '../../theme.config';
+
+
+/*******************************
+           Breadcrumb
+*******************************/
+
+.ui.breadcrumb {
+  line-height: 1;
+  display: @display;
+  margin: @verticalMargin 0em;
+  vertical-align: @verticalAlign;
+}
+.ui.breadcrumb:first-child {
+  margin-top: 0em;
+}
+.ui.breadcrumb:last-child {
+  margin-bottom: 0em;
+}
+
+/*******************************
+          Content
+*******************************/
+
+/* Divider */
+.ui.breadcrumb .divider {
+  display: inline-block;
+  opacity: @dividerOpacity;
+  margin: 0em @dividerSpacing 0em;
+
+  font-size: @dividerSize;
+  color: @dividerColor;
+  vertical-align: @dividerVerticalAlign;
+}
+
+/* Link */
+.ui.breadcrumb a {
+  color: @linkColor;
+}
+.ui.breadcrumb a:hover {
+  color: @linkHoverColor;
+}
+
+
+/* Icon Divider */
+.ui.breadcrumb .icon.divider {
+  font-size: @iconDividerSize;
+  vertical-align: @iconDividerVerticalAlign;
+}
+
+/* Section */
+.ui.breadcrumb a.section {
+  cursor: pointer;
+}
+.ui.breadcrumb .section {
+  display: inline-block;
+  margin: @sectionMargin;
+  padding: @sectionPadding;
+}
+
+/* Loose Coupling */
+.ui.breadcrumb.segment {
+  display: inline-block;
+  padding: @segmentPadding;
+}
+
+/*******************************
+            States
+*******************************/
+
+.ui.breadcrumb .active.section {
+  font-weight: @activeFontWeight;
+}
+
+
+/*******************************
+           Variations
+*******************************/
+
+.ui.mini.breadcrumb {
+  font-size: @mini;
+}
+.ui.tiny.breadcrumb {
+  font-size: @tiny;
+}
+.ui.small.breadcrumb {
+  font-size: @small;
+}
+.ui.breadcrumb {
+  font-size: @medium;
+}
+.ui.large.breadcrumb {
+  font-size: @large;
+}
+.ui.big.breadcrumb {
+  font-size: @big;
+}
+.ui.huge.breadcrumb {
+  font-size: @huge;
+}
+.ui.massive.breadcrumb {
+  font-size: @massive;
+}
+
+.loadUIOverrides();

client/semantic/src/definitions/collections/message.less

@@ -0,0 +1,481 @@
+/*!
+ * # Semantic UI - Message
+ * http://github.com/semantic-org/semantic-ui/
+ *
+ *
+ * Released under the MIT license
+ * http://opensource.org/licenses/MIT
+ *
+ */
+
+/*******************************
+            Theme
+*******************************/
+
+@type    : 'collection';
+@element : 'message';
+
+@import (multiple) '../../theme.config';
+
+/*******************************
+            Message
+*******************************/
+
+.ui.message {
+  position: relative;
+  min-height: 1em;
+  margin: @verticalMargin 0em;
+  background: @background;
+  padding: @padding;
+  line-height: @lineHeight;
+  color: @textColor;
+  transition: @transition;
+  border-radius: @borderRadius;
+  box-shadow: @boxShadow;
+}
+
+.ui.message:first-child {
+  margin-top: 0em;
+}
+.ui.message:last-child {
+  margin-bottom: 0em;
+}
+
+
+/*--------------
+     Content
+---------------*/
+
+/* Header */
+.ui.message .header {
+  display: @headerDisplay;
+  font-family: @headerFont;
+  font-weight: @headerFontWeight;
+  margin: @headerMargin;
+}
+
+/* Default font size */
+.ui.message .header:not(.ui) {
+  font-size: @headerFontSize;
+}
+
+/* Paragraph */
+.ui.message p {
+  opacity: @messageTextOpacity;
+  margin: @messageParagraphMargin 0em;
+}
+.ui.message p:first-child {
+  margin-top: 0em;
+}
+.ui.message p:last-child {
+  margin-bottom: 0em;
+}
+.ui.message .header + p {
+  margin-top: @headerParagraphDistance;
+}
+
+/* List */
+.ui.message .list:not(.ui) {
+  text-align: left;
+  padding: 0em;
+  opacity: @listOpacity;
+  list-style-position: @listStylePosition;
+  margin: @listMargin 0em 0em;
+}
+.ui.message .list:not(.ui):first-child {
+  margin-top: 0em;
+}
+.ui.message .list:not(.ui):last-child {
+  margin-bottom: 0em;
+}
+.ui.message .list:not(.ui) li {
+  position: relative;
+  list-style-type: none;
+  margin: 0em 0em @listItemMargin @listItemIndent;
+  padding: 0em;
+}
+.ui.message .list:not(.ui) li:before {
+  position: absolute;
+  content: '•';
+  left: -1em;
+  height: 100%;
+  vertical-align: baseline;
+}
+.ui.message .list:not(.ui) li:last-child {
+  margin-bottom: 0em;
+}
+
+
+/* Icon */
+.ui.message > .icon {
+  margin-right: @iconDistance;
+}
+
+/* Close Icon */
+.ui.message > .close.icon {
+  cursor: pointer;
+  position: absolute;
+  margin: 0em;
+  top: @closeTopDistance;
+  right: @closeRightDistance;
+  opacity: @closeOpacity;
+  transition: @closeTransition;
+}
+.ui.message > .close.icon:hover {
+  opacity: 1;
+}
+
+/* First / Last Element */
+.ui.message > :first-child {
+  margin-top: 0em;
+}
+.ui.message > :last-child {
+  margin-bottom: 0em;
+}
+
+/*******************************
+            Coupling
+*******************************/
+
+.ui.dropdown .menu > .message {
+  margin: 0px -@borderWidth;
+}
+
+/*******************************
+            States
+*******************************/
+
+/*--------------
+    Visible
+---------------*/
+
+.ui.visible.visible.visible.visible.message {
+  display: block;
+}
+
+.ui.icon.visible.visible.visible.visible.message {
+  display: flex;
+}
+
+/*--------------
+     Hidden
+---------------*/
+
+.ui.hidden.hidden.hidden.hidden.message {
+  display: none;
+}
+
+
+/*******************************
+            Variations
+*******************************/
+
+/*--------------
+    Compact
+---------------*/
+
+.ui.compact.message {
+  display: inline-block;
+}
+.ui.compact.icon.message {
+  display: inline-flex;
+}
+
+
+/*--------------
+    Attached
+---------------*/
+
+.ui.attached.message {
+  margin-bottom: @attachedYOffset;
+  border-radius: @borderRadius @borderRadius 0em 0em;
+  box-shadow: @attachedBoxShadow;
+  margin-left: @attachedXOffset;
+  margin-right: @attachedXOffset;
+}
+.ui.attached + .ui.attached.message:not(.top):not(.bottom) {
+  margin-top: @attachedYOffset;
+  border-radius: 0em;
+}
+.ui.bottom.attached.message {
+  margin-top: @attachedYOffset;
+  border-radius: 0em 0em @borderRadius @borderRadius;
+  box-shadow: @attachedBottomBoxShadow;
+}
+.ui.bottom.attached.message:not(:last-child) {
+  margin-bottom: @verticalMargin;
+}
+.ui.attached.icon.message {
+  width: auto;
+}
+
+
+/*--------------
+      Icon
+---------------*/
+
+.ui.icon.message {
+  display: flex;
+  width: 100%;
+  align-items: center;
+}
+.ui.icon.message > .icon:not(.close) {
+  display: block;
+  flex: 0 0 auto;
+  width: auto;
+  line-height: 1;
+  vertical-align: @iconVerticalAlign;
+  font-size: @iconSize;
+  opacity: @iconOpacity;
+}
+.ui.icon.message > .content {
+  display: block;
+  flex: 1 1 auto;
+  vertical-align: @iconVerticalAlign;
+}
+
+
+.ui.icon.message .icon:not(.close) + .content {
+  padding-left: @iconContentDistance;
+}
+.ui.icon.message .circular.icon {
+  width: 1em;
+}
+
+/*--------------
+    Floating
+---------------*/
+
+.ui.floating.message {
+  box-shadow: @floatingBoxShadow;
+}
+
+
+/*--------------
+     Colors
+---------------*/
+
+.ui.black.message {
+  background-color: @black;
+  color: @invertedTextColor;
+}
+
+/*--------------
+     Types
+---------------*/
+
+/* Positive */
+.ui.positive.message {
+  background-color: @positiveBackgroundColor;
+  color: @positiveTextColor;
+}
+.ui.positive.message,
+.ui.attached.positive.message {
+  box-shadow: @positiveBoxShadow;
+}
+.ui.positive.message .header {
+  color: @positiveHeaderColor;
+}
+
+/* Negative */
+.ui.negative.message {
+  background-color: @negativeBackgroundColor;
+  color: @negativeTextColor;
+}
+.ui.negative.message,
+.ui.attached.negative.message {
+  box-shadow: @negativeBoxShadow;
+}
+.ui.negative.message .header {
+  color: @negativeHeaderColor;
+}
+
+/* Info */
+.ui.info.message {
+  background-color: @infoBackgroundColor;
+  color: @infoTextColor;
+}
+.ui.info.message,
+.ui.attached.info.message {
+  box-shadow: @infoBoxShadow;
+}
+.ui.info.message .header {
+  color: @infoHeaderColor;
+}
+
+/* Warning */
+.ui.warning.message {
+  background-color: @warningBackgroundColor;
+  color: @warningTextColor;
+}
+.ui.warning.message,
+.ui.attached.warning.message {
+  box-shadow: @warningBoxShadow;
+}
+.ui.warning.message .header {
+  color: @warningHeaderColor;
+}
+
+/* Error */
+.ui.error.message {
+  background-color: @errorBackgroundColor;
+  color: @errorTextColor;
+}
+.ui.error.message,
+.ui.attached.error.message {
+  box-shadow: @errorBoxShadow;
+}
+.ui.error.message .header {
+  color: @errorHeaderColor;
+}
+
+/* Success */
+.ui.success.message {
+  background-color: @successBackgroundColor;
+  color: @successTextColor;
+}
+.ui.success.message,
+.ui.attached.success.message {
+  box-shadow: @successBoxShadow;
+}
+.ui.success.message .header {
+  color: @successHeaderColor;
+}
+
+
+/* Colors */
+.ui.inverted.message,
+.ui.black.message {
+  background-color: @black;
+  color: @invertedTextColor;
+}
+
+.ui.red.message {
+  background-color: @redBackground;
+  color: @redTextColor;
+  box-shadow: @redBoxShadow;
+}
+.ui.red.message .header {
+  color: @redHeaderColor;
+}
+
+.ui.orange.message {
+  background-color: @orangeBackground;
+  color: @orangeTextColor;
+  box-shadow: @orangeBoxShadow;
+}
+.ui.orange.message .header {
+  color: @orangeHeaderColor;
+}
+
+.ui.yellow.message {
+  background-color: @yellowBackground;
+  color: @yellowTextColor;
+  box-shadow: @yellowBoxShadow;
+}
+.ui.yellow.message .header {
+  color: @yellowHeaderColor;
+}
+
+.ui.olive.message {
+  background-color: @oliveBackground;
+  color: @oliveTextColor;
+  box-shadow: @oliveBoxShadow;
+}
+.ui.olive.message .header {
+  color: @oliveHeaderColor;
+}
+
+.ui.green.message {
+  background-color: @greenBackground;
+  color: @greenTextColor;
+  box-shadow: @greenBoxShadow;
+}
+.ui.green.message .header {
+  color: @greenHeaderColor;
+}
+
+.ui.teal.message {
+  background-color: @tealBackground;
+  color: @tealTextColor;
+  box-shadow: @tealBoxShadow;
+}
+.ui.teal.message .header {
+  color: @tealHeaderColor;
+}
+
+.ui.blue.message {
+  background-color: @blueBackground;
+  color: @blueTextColor;
+  box-shadow: @blueBoxShadow;
+}
+.ui.blue.message .header {
+  color: @blueHeaderColor;
+}
+
+.ui.violet.message {
+  background-color: @violetBackground;
+  color: @violetTextColor;
+  box-shadow: @violetBoxShadow;
+}
+.ui.violet.message .header {
+  color: @violetHeaderColor;
+}
+
+.ui.purple.message {
+  background-color: @purpleBackground;
+  color: @purpleTextColor;
+  box-shadow: @purpleBoxShadow;
+}
+.ui.purple.message .header {
+  color: @purpleHeaderColor;
+}
+
+.ui.pink.message {
+  background-color: @pinkBackground;
+  color: @pinkTextColor;
+  box-shadow: @pinkBoxShadow;
+}
+.ui.pink.message .header {
+  color: @pinkHeaderColor;
+}
+
+.ui.brown.message {
+  background-color: @brownBackground;
+  color: @brownTextColor;
+  box-shadow: @brownBoxShadow;
+}
+.ui.brown.message .header {
+  color: @brownHeaderColor;
+}
+
+/*--------------
+     Sizes
+---------------*/
+
+.ui.mini.message {
+  font-size: @relativeMini;
+}
+.ui.tiny.message {
+  font-size: @relativeTiny;
+}
+.ui.small.message {
+  font-size: @relativeSmall;
+}
+.ui.message {
+  font-size: @relativeMedium;
+}
+.ui.large.message {
+  font-size: @relativeLarge;
+}
+.ui.big.message {
+  font-size: @relativeBig;
+}
+.ui.huge.message {
+  font-size: @relativeHuge;
+}
+.ui.massive.message {
+  font-size: @relativeMassive;
+}
+
+.loadUIOverrides();

client/semantic/src/definitions/elements/container.less

@@ -0,0 +1,143 @@
+/*!
+ * # Semantic UI - Container
+ * http://github.com/semantic-org/semantic-ui/
+ *
+ *
+ * Released under the MIT license
+ * http://opensource.org/licenses/MIT
+ *
+ */
+
+/*******************************
+            Theme
+*******************************/
+
+@type    : 'element';
+@element : 'container';
+
+@import (multiple) '../../theme.config';
+
+/*******************************
+            Container
+*******************************/
+
+/* All Sizes */
+.ui.container {
+  display: block;
+  max-width: @maxWidth !important;
+}
+
+/* Mobile */
+@media only screen and (max-width: @largestMobileScreen) {
+  .ui.container {
+    width: @mobileWidth !important;
+    margin-left: @mobileGutter !important;
+    margin-right: @mobileGutter !important;
+  }
+  .ui.grid.container {
+    width: @mobileGridWidth !important;
+  }
+  .ui.relaxed.grid.container {
+    width: @mobileRelaxedGridWidth !important;
+  }
+  .ui.very.relaxed.grid.container {
+    width: @mobileVeryRelaxedGridWidth !important;
+  }
+}
+
+/* Tablet */
+@media only screen and (min-width: @tabletBreakpoint) and (max-width: @largestTabletScreen) {
+  .ui.container {
+    width: @tabletWidth;
+    margin-left: @tabletGutter !important;
+    margin-right: @tabletGutter !important;
+  }
+  .ui.grid.container {
+    width: @tabletGridWidth !important;
+  }
+  .ui.relaxed.grid.container {
+    width: @tabletRelaxedGridWidth !important;
+  }
+  .ui.very.relaxed.grid.container {
+    width: @tabletVeryRelaxedGridWidth !important;
+  }
+}
+
+/* Small Monitor */
+@media only screen and (min-width: @computerBreakpoint) and (max-width: @largestSmallMonitor) {
+  .ui.container {
+    width: @computerWidth;
+    margin-left: @computerGutter !important;
+    margin-right: @computerGutter !important;
+  }
+  .ui.grid.container {
+    width: @computerGridWidth !important;
+  }
+  .ui.relaxed.grid.container {
+    width: @computerRelaxedGridWidth !important;
+  }
+  .ui.very.relaxed.grid.container {
+    width: @computerVeryRelaxedGridWidth !important;
+  }
+}
+
+/* Large Monitor */
+@media only screen and (min-width: @largeMonitorBreakpoint) {
+  .ui.container {
+    width: @largeMonitorWidth;
+    margin-left: @largeMonitorGutter !important;
+    margin-right: @largeMonitorGutter !important;
+  }
+  .ui.grid.container {
+    width: @largeMonitorGridWidth !important;
+  }
+  .ui.relaxed.grid.container {
+    width: @largeMonitorRelaxedGridWidth !important;
+  }
+  .ui.very.relaxed.grid.container {
+    width: @largeMonitorVeryRelaxedGridWidth !important;
+  }
+}
+
+/*******************************
+             Types
+*******************************/
+
+
+/* Text Container */
+.ui.text.container {
+  font-family: @textFontFamily;
+  max-width: @textWidth !important;
+  line-height: @textLineHeight;
+}
+
+.ui.text.container {
+  font-size: @textSize;
+}
+
+/* Fluid */
+.ui.fluid.container {
+  width: 100%;
+}
+
+
+/*******************************
+           Variations
+*******************************/
+
+.ui[class*="left aligned"].container {
+  text-align: left;
+}
+.ui[class*="center aligned"].container {
+  text-align: center;
+}
+.ui[class*="right aligned"].container {
+  text-align: right;
+}
+.ui.justified.container {
+  text-align: justify;
+  hyphens: auto;
+}
+
+
+.loadUIOverrides();

client/semantic/src/definitions/elements/divider.less

@@ -0,0 +1,255 @@
+/*!
+ * # Semantic UI - Divider
+ * http://github.com/semantic-org/semantic-ui/
+ *
+ *
+ * Released under the MIT license
+ * http://opensource.org/licenses/MIT
+ *
+ */
+
+/*******************************
+            Theme
+*******************************/
+
+@type    : 'element';
+@element : 'divider';
+
+@import (multiple) '../../theme.config';
+
+
+/*******************************
+            Divider
+*******************************/
+
+.ui.divider {
+  margin: @margin;
+
+  line-height: 1;
+  height: 0em;
+
+  font-weight: @fontWeight;
+  text-transform: @textTransform;
+  letter-spacing: @letterSpacing;
+  color: @color;
+
+  user-select: none;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+/*--------------
+      Basic
+---------------*/
+
+.ui.divider:not(.vertical):not(.horizontal) {
+  border-top: @shadowWidth solid @shadowColor;
+  border-bottom: @highlightWidth solid @highlightColor;
+}
+
+/*--------------
+    Coupling
+---------------*/
+
+/* Allow divider between each column row */
+.ui.grid > .column + .divider,
+.ui.grid > .row > .column + .divider {
+  left: auto;
+}
+
+/*--------------
+   Horizontal
+---------------*/
+
+.ui.horizontal.divider {
+  display: table;
+  white-space: nowrap;
+
+  height: auto;
+  margin: @horizontalMargin;
+  line-height: 1;
+  text-align: center;
+}
+
+.ui.horizontal.divider:before,
+.ui.horizontal.divider:after {
+  content: '';
+  display: table-cell;
+  position: relative;
+  top: 50%;
+  width: 50%;
+  background-repeat: no-repeat;
+}
+
+.ui.horizontal.divider:before {
+  background-position: right @horizontalDividerMargin top 50%;
+}
+.ui.horizontal.divider:after {
+  background-position: left @horizontalDividerMargin top 50%;
+}
+
+/*--------------
+    Vertical
+---------------*/
+
+.ui.vertical.divider {
+  position: absolute;
+  z-index: 2;
+  top: 50%;
+  left: 50%;
+
+  margin: 0rem;
+  padding: 0em;
+  width: auto;
+  height: 50%;
+
+  line-height: 0em;
+  text-align: center;
+  transform: translateX(-50%);
+}
+
+.ui.vertical.divider:before,
+.ui.vertical.divider:after {
+  position: absolute;
+  left: 50%;
+  content: '';
+  z-index: 3;
+
+  border-left: @shadowWidth solid @shadowColor;
+  border-right: @highlightWidth solid @highlightColor;
+
+  width: 0%;
+  height: @verticalDividerHeight;
+}
+
+.ui.vertical.divider:before {
+  top: -100%;
+}
+.ui.vertical.divider:after {
+  top: auto;
+  bottom: 0px;
+}
+
+/* Inside grid */
+@media only screen and (max-width : @largestMobileScreen) {
+
+  .ui.stackable.grid .ui.vertical.divider,
+  .ui.grid .stackable.row .ui.vertical.divider {
+    display: table;
+    white-space: nowrap;
+    height: auto;
+    margin: @horizontalMargin;
+    overflow: hidden;
+    line-height: 1;
+    text-align: center;
+    position: static;
+    top: 0;
+    left: 0;
+    transform: none;
+  }
+
+  .ui.stackable.grid .ui.vertical.divider:before,
+  .ui.grid .stackable.row .ui.vertical.divider:before,
+  .ui.stackable.grid .ui.vertical.divider:after,
+  .ui.grid .stackable.row .ui.vertical.divider:after {
+    position: static;
+    left: 0;
+    border-left: none;
+    border-right: none;
+    content: '';
+    display: table-cell;
+    position: relative;
+    top: 50%;
+    width: 50%;
+    background-repeat: no-repeat;
+  }
+
+  .ui.stackable.grid .ui.vertical.divider:before,
+  .ui.grid .stackable.row .ui.vertical.divider:before {
+    background-position: right @horizontalDividerMargin top 50%;
+  }
+  .ui.stackable.grid .ui.vertical.divider:after,
+  .ui.grid .stackable.row .ui.vertical.divider:after {
+    background-position: left @horizontalDividerMargin top 50%;
+  }
+}
+
+/*--------------
+      Icon
+---------------*/
+
+.ui.divider > .icon {
+  margin: @dividerIconMargin;
+  font-size: @dividerIconSize;
+  height: 1em;
+  vertical-align: middle;
+}
+
+/*******************************
+          Variations
+*******************************/
+
+/*--------------
+    Hidden
+---------------*/
+
+.ui.hidden.divider {
+  border-color: transparent !important;
+}
+.ui.hidden.divider:before,
+.ui.hidden.divider:after {
+  display: none;
+}
+
+/*--------------
+    Inverted
+---------------*/
+
+.ui.divider.inverted,
+.ui.vertical.inverted.divider,
+.ui.horizontal.inverted.divider {
+  color: @invertedTextColor;
+}
+.ui.divider.inverted,
+.ui.divider.inverted:after,
+.ui.divider.inverted:before {
+  border-top-color: @invertedShadowColor !important;
+  border-left-color: @invertedShadowColor !important;
+  border-bottom-color: @invertedHighlightColor !important;
+  border-right-color: @invertedHighlightColor !important;
+}
+
+/*--------------
+    Fitted
+---------------*/
+
+.ui.fitted.divider {
+  margin: 0em;
+}
+
+/*--------------
+    Clearing
+---------------*/
+
+.ui.clearing.divider {
+  clear: both;
+}
+
+/*--------------
+    Section
+---------------*/
+
+.ui.section.divider {
+  margin-top: @sectionMargin;
+  margin-bottom: @sectionMargin;
+}
+
+/*--------------
+     Sizes
+---------------*/
+
+.ui.divider {
+  font-size: @medium;
+}
+
+
+.loadUIOverrides();

client/semantic/src/definitions/elements/flag.less

@@ -0,0 +1,52 @@
+/*!
+ * # Semantic UI - Flag
+ * http://github.com/semantic-org/semantic-ui/
+ *
+ *
+ * Released under the MIT license
+ * http://opensource.org/licenses/MIT
+ *
+ */
+
+
+/*******************************
+            Theme
+*******************************/
+
+@type    : 'element';
+@element : 'flag';
+
+@import (multiple) '../../theme.config';
+
+
+/*******************************
+             Flag
+*******************************/
+
+i.flag:not(.icon) {
+  display: inline-block;
+
+  width: @width;
+  height: @height;
+
+  line-height: @height;
+  vertical-align: @verticalAlign;
+  margin: 0em @margin 0em 0em;
+
+  text-decoration: inherit;
+
+  speak: none;
+  font-smoothing: antialiased;
+  backface-visibility: hidden;
+}
+
+/* Sprite */
+i.flag:not(.icon):before {
+  display: inline-block;
+  content: '';
+  background: url(@spritePath) no-repeat -108px -1976px;
+  width: @width;
+  height: @height;
+}
+
+.loadUIOverrides();

client/semantic/src/definitions/elements/header.less

@@ -0,0 +1,708 @@
+/*!
+ * # Semantic UI - Header
+ * http://github.com/semantic-org/semantic-ui/
+ *
+ *
+ * Released under the MIT license
+ * http://opensource.org/licenses/MIT
+ *
+ */
+
+
+/*******************************
+            Theme
+*******************************/
+
+@type    : 'element';
+@element : 'header';
+
+@import (multiple) '../../theme.config';
+
+
+/*******************************
+            Header
+*******************************/
+
+/* Standard */
+.ui.header {
+  border: none;
+  margin: @margin;
+  padding: @verticalPadding @horizontalPadding;
+  font-family: @fontFamily;
+  font-weight: @fontWeight;
+  line-height: @lineHeight;
+  text-transform: @textTransform;
+  color: @textColor;
+}
+
+.ui.header:first-child {
+  margin-top: @firstMargin;
+}
+.ui.header:last-child {
+  margin-bottom: @lastMargin;
+}
+
+/*--------------
+   Sub Header
+---------------*/
+
+.ui.header .sub.header {
+  display: block;
+  font-weight: @normal;
+  padding: 0em;
+  margin: @subHeaderMargin;
+  font-size: @subHeaderFontSize;
+  line-height: @subHeaderLineHeight;
+  color: @subHeaderColor;
+}
+
+/*--------------
+      Icon
+---------------*/
+
+.ui.header > .icon {
+  display: table-cell;
+  opacity: @iconOpacity;
+  font-size: @iconSize;
+  padding-top: @iconOffset;
+  vertical-align: @iconAlignment;
+}
+
+/* With Text Node */
+.ui.header .icon:only-child {
+  display: inline-block;
+  padding: 0em;
+  margin-right: @iconMargin;
+}
+
+/*-------------------
+        Image
+--------------------*/
+
+.ui.header > .image:not(.icon),
+.ui.header > img {
+  display: inline-block;
+  margin-top: @imageOffset;
+  width: @imageWidth;
+  height: @imageHeight;
+  vertical-align: @imageAlignment;
+}
+.ui.header > .image:not(.icon):only-child,
+.ui.header > img:only-child {
+  margin-right: @imageMargin;
+}
+
+/*--------------
+     Content
+---------------*/
+
+.ui.header .content {
+  display: inline-block;
+  vertical-align: @contentAlignment;
+}
+
+/* After Image */
+.ui.header > img + .content,
+.ui.header > .image + .content {
+  padding-left: @imageMargin;
+  vertical-align: @contentImageAlignment;
+}
+
+/* After Icon */
+.ui.header > .icon + .content {
+  padding-left: @iconMargin;
+  display: table-cell;
+  vertical-align: @contentIconAlignment;
+}
+
+
+/*--------------
+ Loose Coupling
+---------------*/
+
+.ui.header .ui.label {
+  font-size: @labelSize;
+  margin-left: @labelDistance;
+  vertical-align: @labelVerticalAlign;
+}
+
+/* Positioning */
+.ui.header + p {
+  margin-top: @nextParagraphDistance;
+}
+
+
+
+/*******************************
+            Types
+*******************************/
+
+
+/*--------------
+     Page
+---------------*/
+
+h1.ui.header {
+  font-size: @h1;
+}
+h2.ui.header {
+  font-size: @h2;
+}
+h3.ui.header {
+  font-size: @h3;
+}
+h4.ui.header {
+  font-size: @h4;
+}
+h5.ui.header {
+  font-size: @h5;
+}
+
+
+/* Sub Header */
+h1.ui.header .sub.header {
+  font-size: @h1SubHeaderFontSize;
+}
+h2.ui.header .sub.header {
+  font-size: @h2SubHeaderFontSize;
+}
+h3.ui.header .sub.header {
+  font-size: @h3SubHeaderFontSize;
+}
+h4.ui.header .sub.header {
+  font-size: @h4SubHeaderFontSize;
+}
+h5.ui.header .sub.header {
+  font-size: @h5SubHeaderFontSize;
+}
+
+
+/*--------------
+ Content Heading
+---------------*/
+
+.ui.huge.header {
+  min-height: 1em;
+  font-size: @hugeFontSize;
+}
+.ui.large.header {
+  font-size: @largeFontSize;
+}
+.ui.medium.header {
+  font-size: @mediumFontSize;
+}
+.ui.small.header {
+  font-size: @smallFontSize;
+}
+.ui.tiny.header {
+  font-size: @tinyFontSize;
+}
+
+/* Sub Header */
+.ui.huge.header .sub.header {
+  font-size: @hugeSubHeaderFontSize;
+}
+.ui.large.header .sub.header {
+  font-size: @hugeSubHeaderFontSize;
+}
+.ui.header .sub.header {
+  font-size: @subHeaderFontSize;
+}
+.ui.small.header .sub.header {
+  font-size: @smallSubHeaderFontSize;
+}
+.ui.tiny.header .sub.header {
+  font-size: @tinySubHeaderFontSize;
+}
+
+/*--------------
+   Sub Heading
+---------------*/
+
+.ui.sub.header {
+  padding: 0em;
+  margin-bottom: @subHeadingDistance;
+  font-weight: @subHeadingFontWeight;
+  font-size: @subHeadingFontSize;
+  text-transform: @subHeadingTextTransform;
+  color: @subHeadingColor;
+}
+
+.ui.small.sub.header {
+  font-size: @smallSubHeadingSize;
+}
+.ui.sub.header {
+  font-size: @subHeadingFontSize;
+}
+.ui.large.sub.header {
+  font-size: @largeSubHeadingSize;
+}
+.ui.huge.sub.header {
+  font-size: @hugeSubHeadingSize;
+}
+
+
+
+/*-------------------
+        Icon
+--------------------*/
+
+.ui.icon.header {
+  display: inline-block;
+  text-align: center;
+  margin: @iconHeaderTopMargin 0em @iconHeaderBottomMargin;
+}
+.ui.icon.header:after {
+  content: '';
+  display: block;
+  height: 0px;
+  clear: both;
+  visibility: hidden;
+}
+
+.ui.icon.header:first-child {
+  margin-top: @iconHeaderFirstMargin;
+}
+.ui.icon.header .icon {
+  float: none;
+  display: block;
+  width: auto;
+  height: auto;
+  line-height: 1;
+  padding: 0em;
+  font-size: @iconHeaderSize;
+  margin: 0em auto @iconHeaderMargin;
+  opacity: @iconHeaderOpacity;
+}
+.ui.icon.header .content {
+  display: block;
+  padding: 0em;
+}
+.ui.icon.header .circular.icon {
+  font-size: @circularHeaderIconSize;
+}
+.ui.icon.header .square.icon {
+  font-size: @squareHeaderIconSize;
+}
+.ui.block.icon.header .icon {
+  margin-bottom: 0em;
+}
+.ui.icon.header.aligned {
+  margin-left: auto;
+  margin-right: auto;
+  display: block;
+}
+
+/*******************************
+            States
+*******************************/
+
+.ui.disabled.header {
+  opacity: @disabledOpacity;
+}
+
+
+/*******************************
+           Variations
+*******************************/
+
+/*-------------------
+      Inverted
+--------------------*/
+
+.ui.inverted.header {
+  color: @invertedColor;
+}
+.ui.inverted.header .sub.header {
+  color: @invertedSubHeaderColor;
+}
+.ui.inverted.attached.header {
+  background: @invertedAttachedBackground;
+  box-shadow: none;
+  border-color: transparent;
+}
+.ui.inverted.block.header {
+  background: @invertedBlockBackground;
+  box-shadow: none;
+}
+.ui.inverted.block.header {
+  border-bottom: none;
+}
+
+
+/*-------------------
+       Colors
+--------------------*/
+
+/*--- Red ---*/
+.ui.red.header {
+  color: @red !important;
+}
+a.ui.red.header:hover {
+  color: @redHover !important;
+}
+.ui.red.dividing.header {
+  border-bottom: @dividedColoredBorderWidth solid @red;
+}
+
+/* Inverted */
+.ui.inverted.red.header {
+  color: @lightRed !important;
+}
+a.ui.inverted.red.header:hover {
+  color: @lightRedHover !important;
+}
+
+/*--- Orange ---*/
+.ui.orange.header {
+  color: @orange !important;
+}
+a.ui.orange.header:hover {
+  color: @orangeHover !important;
+}
+.ui.orange.dividing.header {
+  border-bottom: @dividedColoredBorderWidth solid @orange;
+}
+/* Inverted */
+.ui.inverted.orange.header {
+  color: @lightOrange !important;
+}
+a.ui.inverted.orange.header:hover {
+  color: @lightOrangeHover !important;
+}
+
+/*--- Olive ---*/
+.ui.olive.header {
+  color: @olive !important;
+}
+a.ui.olive.header:hover {
+  color: @oliveHover !important;
+}
+.ui.olive.dividing.header {
+  border-bottom: @dividedColoredBorderWidth solid @olive;
+}
+/* Inverted */
+.ui.inverted.olive.header {
+  color: @lightOlive !important;
+}
+a.ui.inverted.olive.header:hover {
+  color: @lightOliveHover !important;
+}
+
+/*--- Yellow ---*/
+.ui.yellow.header {
+  color: @yellow !important;
+}
+a.ui.yellow.header:hover {
+  color: @yellowHover !important;
+}
+.ui.yellow.dividing.header {
+  border-bottom: @dividedColoredBorderWidth solid @yellow;
+}
+/* Inverted */
+.ui.inverted.yellow.header {
+  color: @lightYellow !important;
+}
+a.ui.inverted.yellow.header:hover {
+  color: @lightYellowHover !important;
+}
+
+/*--- Green ---*/
+.ui.green.header {
+  color: @green !important;
+}
+a.ui.green.header:hover {
+  color: @greenHover !important;
+}
+.ui.green.dividing.header {
+  border-bottom: @dividedColoredBorderWidth solid @green;
+}
+/* Inverted */
+.ui.inverted.green.header {
+  color: @lightGreen !important;
+}
+a.ui.inverted.green.header:hover {
+  color: @lightGreenHover !important;
+}
+
+/*--- Teal ---*/
+.ui.teal.header {
+  color: @teal !important;
+}
+a.ui.teal.header:hover {
+  color: @tealHover !important;
+}
+.ui.teal.dividing.header {
+  border-bottom: @dividedColoredBorderWidth solid @teal;
+}
+/* Inverted */
+.ui.inverted.teal.header {
+  color: @lightTeal !important;
+}
+a.ui.inverted.teal.header:hover {
+  color: @lightTealHover !important;
+}
+
+/*--- Blue ---*/
+.ui.blue.header {
+  color: @blue !important;
+}
+a.ui.blue.header:hover {
+  color: @blueHover !important;
+}
+.ui.blue.dividing.header {
+  border-bottom: @dividedColoredBorderWidth solid @blue;
+}
+/* Inverted */
+.ui.inverted.blue.header {
+  color: @lightBlue !important;
+}
+a.ui.inverted.blue.header:hover {
+  color: @lightBlueHover !important;
+}
+
+/*--- Violet ---*/
+.ui.violet.header {
+  color: @violet !important;
+}
+a.ui.violet.header:hover {
+  color: @violetHover !important;
+}
+.ui.violet.dividing.header {
+  border-bottom: @dividedColoredBorderWidth solid @violet;
+}
+/* Inverted */
+.ui.inverted.violet.header {
+  color: @lightViolet !important;
+}
+a.ui.inverted.violet.header:hover {
+  color: @lightVioletHover !important;
+}
+
+/*--- Purple ---*/
+.ui.purple.header {
+  color: @purple !important;
+}
+a.ui.purple.header:hover {
+  color: @purpleHover !important;
+}
+.ui.purple.dividing.header {
+  border-bottom: @dividedColoredBorderWidth solid @purple;
+}
+/* Inverted */
+.ui.inverted.purple.header {
+  color: @lightPurple !important;
+}
+a.ui.inverted.purple.header:hover {
+  color: @lightPurpleHover !important;
+}
+
+/*--- Pink ---*/
+.ui.pink.header {
+  color: @pink !important;
+}
+a.ui.pink.header:hover {
+  color: @pinkHover !important;
+}
+.ui.pink.dividing.header {
+  border-bottom: @dividedColoredBorderWidth solid @pink;
+}
+/* Inverted */
+.ui.inverted.pink.header {
+  color: @lightPink !important;
+}
+a.ui.inverted.pink.header:hover {
+  color: @lightPinkHover !important;
+}
+
+/*--- Brown ---*/
+.ui.brown.header {
+  color: @brown !important;
+}
+a.ui.brown.header:hover {
+  color: @brownHover !important;
+}
+.ui.brown.dividing.header {
+  border-bottom: @dividedColoredBorderWidth solid @brown;
+}
+/* Inverted */
+.ui.inverted.brown.header {
+  color: @lightBrown !important;
+}
+a.ui.inverted.brown.header:hover {
+  color: @lightBrownHover !important;
+}
+
+/*--- Grey ---*/
+.ui.grey.header {
+  color: @grey !important;
+}
+a.ui.grey.header:hover {
+  color: @greyHover !important;
+}
+.ui.grey.dividing.header {
+  border-bottom: @dividedColoredBorderWidth solid @grey;
+}
+/* Inverted */
+.ui.inverted.grey.header {
+  color: @lightGrey !important;
+}
+a.ui.inverted.grey.header:hover {
+  color: @lightGreyHover !important;
+}
+
+
+/*-------------------
+       Aligned
+--------------------*/
+
+.ui.left.aligned.header {
+  text-align: left;
+}
+.ui.right.aligned.header {
+  text-align: right;
+}
+.ui.centered.header,
+.ui.center.aligned.header {
+  text-align: center;
+}
+.ui.justified.header {
+  text-align: justify;
+}
+.ui.justified.header:after {
+  display: inline-block;
+  content: '';
+  width: 100%;
+}
+
+/*-------------------
+       Floated
+--------------------*/
+
+.ui.floated.header,
+.ui[class*="left floated"].header {
+  float: left;
+  margin-top: 0em;
+  margin-right: @floatedMargin;
+}
+.ui[class*="right floated"].header {
+  float: right;
+  margin-top: 0em;
+  margin-left: @floatedMargin;
+}
+
+/*-------------------
+       Fitted
+--------------------*/
+
+.ui.fitted.header {
+  padding: 0em;
+}
+
+
+/*-------------------
+      Dividing
+--------------------*/
+
+.ui.dividing.header {
+  padding-bottom: @dividedBorderPadding;
+  border-bottom: @dividedBorder;
+}
+.ui.dividing.header .sub.header {
+  padding-bottom: @dividedSubHeaderPadding;
+}
+.ui.dividing.header .icon {
+  margin-bottom: @dividedIconPadding;
+}
+
+.ui.inverted.dividing.header {
+  border-bottom-color: @invertedDividedBorderColor;
+}
+
+
+/*-------------------
+        Block
+--------------------*/
+
+.ui.block.header {
+  background: @blockBackground;
+  padding: @blockVerticalPadding @blockHorizontalPadding;
+  box-shadow: @blockBoxShadow;
+  border: @blockBorder;
+  border-radius: @blockBorderRadius;
+}
+
+.ui.tiny.block.header {
+  font-size: @tinyBlock;
+}
+.ui.small.block.header {
+  font-size: @smallBlock;
+}
+.ui.block.header:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {
+  font-size: @mediumBlock;
+}
+.ui.large.block.header {
+  font-size: @largeBlock;
+}
+.ui.huge.block.header {
+  font-size: @hugeBlock;
+}
+
+/*-------------------
+       Attached
+--------------------*/
+
+.ui.attached.header {
+  background: @attachedBackground;
+  padding: @attachedVerticalPadding @attachedHorizontalPadding;
+  margin-left: @attachedOffset;
+  margin-right: @attachedOffset;
+  box-shadow: @attachedBoxShadow;
+  border: @attachedBorder;
+}
+.ui.attached.block.header {
+  background: @blockBackground;
+}
+
+.ui.attached:not(.top):not(.bottom).header {
+  margin-top: 0em;
+  margin-bottom: 0em;
+  border-top: none;
+  border-radius: 0em;
+}
+.ui.top.attached.header {
+  margin-bottom: 0em;
+  border-radius: @attachedBorderRadius @attachedBorderRadius 0em 0em;
+}
+.ui.bottom.attached.header {
+  margin-top: 0em;
+  border-top: none;
+  border-radius: 0em 0em @attachedBorderRadius @attachedBorderRadius;
+}
+
+/* Attached Sizes */
+.ui.tiny.attached.header {
+  font-size: @tinyAttachedSize;
+}
+.ui.small.attached.header {
+  font-size: @smallAttachedSize;
+}
+.ui.attached.header:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {
+  font-size: @mediumAttachedSize;
+}
+.ui.large.attached.header {
+  font-size: @largeAttachedSize;
+}
+.ui.huge.attached.header {
+  font-size: @hugeAttachedSize;
+}
+
+/*-------------------
+        Sizing
+--------------------*/
+
+.ui.header:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {
+  font-size: @mediumFontSize;
+}
+
+.loadUIOverrides();

client/semantic/src/definitions/elements/icon.less

@@ -0,0 +1,501 @@
+/*!
+ * # Semantic UI - Icon
+ * http://github.com/semantic-org/semantic-ui/
+ *
+ *
+ * Released under the MIT license
+ * http://opensource.org/licenses/MIT
+ *
+ */
+
+
+/*******************************
+            Theme
+*******************************/
+
+@type    : 'element';
+@element : 'icon';
+
+@import (multiple) '../../theme.config';
+
+
+/*******************************
+             Icon
+*******************************/
+
+@font-face {
+  font-family: 'Icons';
+  src: @fallbackSRC;
+  src: @src;
+  font-style: normal;
+  font-weight: @normal;
+  font-variant: normal;
+  text-decoration: inherit;
+  text-transform: none;
+}
+
+i.icon {
+  display: inline-block;
+  opacity: @opacity;
+
+  margin: 0em @distanceFromText 0em 0em;
+
+  width: @width;
+  height: @height;
+
+  font-family: 'Icons';
+  font-style: normal;
+  font-weight: @normal;
+  text-decoration: inherit;
+  text-align: center;
+
+  speak: none;
+  font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  backface-visibility: hidden;
+}
+
+i.icon:before {
+  background: none !important;
+}
+
+/*******************************
+             Types
+*******************************/
+
+/*--------------
+    Loading
+---------------*/
+
+i.icon.loading {
+  height: 1em;
+  line-height: 1;
+  animation: icon-loading @loadingDuration linear infinite;
+}
+@keyframes icon-loading {
+ from {
+    transform: rotate(0deg);
+ }
+ to {
+    transform: rotate(360deg);
+ }
+}
+
+/*******************************
+             States
+*******************************/
+
+i.icon.hover {
+  opacity: 1 !important;
+}
+
+i.icon.active {
+  opacity: 1 !important;
+}
+
+i.emphasized.icon {
+  opacity: 1 !important;
+}
+
+i.disabled.icon {
+  opacity: @disabledOpacity !important;
+}
+
+
+/*******************************
+           Variations
+*******************************/
+
+
+/*-------------------
+        Fitted
+--------------------*/
+
+i.fitted.icon {
+  width: auto;
+  margin: 0em !important;
+}
+
+/*-------------------
+         Link
+--------------------*/
+
+i.link.icon, i.link.icons {
+  cursor: pointer;
+  opacity: @linkOpacity;
+  transition: opacity @defaultDuration @defaultEasing;
+}
+i.link.icon:hover, i.link.icons:hover {
+  opacity: 1 !important;
+}
+
+/*-------------------
+      Circular
+--------------------*/
+
+i.circular.icon {
+  border-radius: 500em !important;
+  line-height: 1 !important;
+
+  padding: @circularPadding !important;
+  box-shadow: @circularShadow;
+
+  width: @circularSize !important;
+  height: @circularSize !important;
+}
+i.circular.inverted.icon {
+  border: none;
+  box-shadow: none;
+}
+
+/*-------------------
+      Flipped
+--------------------*/
+
+i.flipped.icon,
+i.horizontally.flipped.icon {
+  transform: scale(-1, 1);
+}
+i.vertically.flipped.icon {
+  transform: scale(1, -1);
+}
+
+/*-------------------
+      Rotated
+--------------------*/
+
+i.rotated.icon,
+i.right.rotated.icon,
+i.clockwise.rotated.icon {
+  transform: rotate(90deg);
+}
+
+i.left.rotated.icon,
+i.counterclockwise.rotated.icon {
+  transform: rotate(-90deg);
+}
+
+/*-------------------
+      Bordered
+--------------------*/
+
+i.bordered.icon {
+  line-height: 1;
+  vertical-align: baseline;
+
+  width: @borderedSize;
+  height: @borderedSize;
+  padding: @borderedVerticalPadding @borderedHorizontalPadding !important;
+  box-shadow: @borderedShadow;
+}
+i.bordered.inverted.icon {
+  border: none;
+  box-shadow: none;
+}
+
+/*-------------------
+      Inverted
+--------------------*/
+
+/* Inverted Shapes */
+i.inverted.bordered.icon,
+i.inverted.circular.icon {
+  background-color: @black !important;
+  color: @white !important;
+}
+
+i.inverted.icon {
+  color: @white;
+}
+
+
+/*-------------------
+       Colors
+--------------------*/
+
+/* Red */
+i.red.icon {
+  color: @red !important;
+}
+i.inverted.red.icon {
+  color: @lightRed !important;
+}
+i.inverted.bordered.red.icon,
+i.inverted.circular.red.icon {
+  background-color: @red !important;
+  color: @white !important;
+}
+
+/* Orange */
+i.orange.icon {
+  color: @orange !important;
+}
+i.inverted.orange.icon {
+  color: @lightOrange !important;
+}
+i.inverted.bordered.orange.icon,
+i.inverted.circular.orange.icon {
+  background-color: @orange !important;
+  color: @white !important;
+}
+
+/* Yellow */
+i.yellow.icon {
+  color: @yellow !important;
+}
+i.inverted.yellow.icon {
+  color: @lightYellow !important;
+}
+i.inverted.bordered.yellow.icon,
+i.inverted.circular.yellow.icon {
+  background-color: @yellow !important;
+  color: @white !important;
+}
+
+/* Olive */
+i.olive.icon {
+  color: @olive !important;
+}
+i.inverted.olive.icon {
+  color: @lightOlive !important;
+}
+i.inverted.bordered.olive.icon,
+i.inverted.circular.olive.icon {
+  background-color: @olive !important;
+  color: @white !important;
+}
+
+/* Green */
+i.green.icon {
+  color: @green !important;
+}
+i.inverted.green.icon {
+  color: @lightGreen !important;
+}
+i.inverted.bordered.green.icon,
+i.inverted.circular.green.icon {
+  background-color: @green !important;
+  color: @white !important;
+}
+
+/* Teal */
+i.teal.icon {
+  color: @teal !important;
+}
+i.inverted.teal.icon {
+  color: @lightTeal !important;
+}
+i.inverted.bordered.teal.icon,
+i.inverted.circular.teal.icon {
+  background-color: @teal !important;
+  color: @white !important;
+}
+
+/* Blue */
+i.blue.icon {
+  color: @blue !important;
+}
+i.inverted.blue.icon {
+  color: @lightBlue !important;
+}
+i.inverted.bordered.blue.icon,
+i.inverted.circular.blue.icon {
+  background-color: @blue !important;
+  color: @white !important;
+}
+
+/* Violet */
+i.violet.icon {
+  color: @violet !important;
+}
+i.inverted.violet.icon {
+  color: @lightViolet !important;
+}
+i.inverted.bordered.violet.icon,
+i.inverted.circular.violet.icon {
+  background-color: @violet !important;
+  color: @white !important;
+}
+
+/* Purple */
+i.purple.icon {
+  color: @purple !important;
+}
+i.inverted.purple.icon {
+  color: @lightPurple !important;
+}
+i.inverted.bordered.purple.icon,
+i.inverted.circular.purple.icon {
+  background-color: @purple !important;
+  color: @white !important;
+}
+
+/* Pink */
+i.pink.icon {
+  color: @pink !important;
+}
+i.inverted.pink.icon {
+  color: @lightPink !important;
+}
+i.inverted.bordered.pink.icon,
+i.inverted.circular.pink.icon {
+  background-color: @pink !important;
+  color: @white !important;
+}
+
+/* Brown */
+i.brown.icon {
+  color: @brown !important;
+}
+i.inverted.brown.icon {
+  color: @lightBrown !important;
+}
+i.inverted.bordered.brown.icon,
+i.inverted.circular.brown.icon {
+  background-color: @brown !important;
+  color: @white !important;
+}
+
+/* Grey */
+i.grey.icon {
+  color: @grey !important;
+}
+i.inverted.grey.icon {
+  color: @lightGrey !important;
+}
+i.inverted.bordered.grey.icon,
+i.inverted.circular.grey.icon {
+  background-color: @grey !important;
+  color: @white !important;
+}
+
+/* Black */
+i.black.icon {
+  color: @black !important;
+}
+i.inverted.black.icon {
+  color: @lightBlack !important;
+}
+i.inverted.bordered.black.icon,
+i.inverted.circular.black.icon {
+  background-color: @black !important;
+  color: @white !important;
+}
+
+/*-------------------
+        Sizes
+--------------------*/
+
+i.mini.icon,
+i.mini.icons {
+  line-height: 1;
+  font-size: @mini;
+}
+i.tiny.icon,
+i.tiny.icons {
+  line-height: 1;
+  font-size: @tiny;
+}
+i.small.icon,
+i.small.icons {
+  line-height: 1;
+  font-size: @small;
+}
+i.icon,
+i.icons {
+  font-size: @medium;
+}
+i.large.icon,
+i.large.icons {
+  line-height: 1;
+  vertical-align: middle;
+  font-size: @large;
+}
+i.big.icon,
+i.big.icons {
+  line-height: 1;
+  vertical-align: middle;
+  font-size: @big;
+}
+i.huge.icon,
+i.huge.icons {
+  line-height: 1;
+  vertical-align: middle;
+  font-size: @huge;
+}
+i.massive.icon,
+i.massive.icons {
+  line-height: 1;
+  vertical-align: middle;
+  font-size: @massive;
+}
+
+/*******************************
+            Groups
+*******************************/
+
+i.icons {
+  display: inline-block;
+  position: relative;
+  line-height: 1;
+}
+
+i.icons .icon {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translateX(-50%) translateY(-50%);
+  margin: 0em;
+  margin: 0;
+}
+
+i.icons .icon:first-child {
+  position: static;
+  width: auto;
+  height: auto;
+  vertical-align: top;
+  transform: none;
+  margin-right: @distanceFromText;
+}
+
+/* Corner Icon */
+i.icons .corner.icon {
+  top: auto;
+  left: auto;
+  right: 0;
+  bottom: 0;
+  transform: none;
+  font-size: @cornerIconSize;
+  text-shadow: @cornerIconShadow;
+}
+i.icons .top.right.corner.icon {
+  top: 0;
+  left: auto;
+  right: 0;
+  bottom: auto;
+}
+i.icons .top.left.corner.icon {
+  top: 0;
+  left: 0;
+  right: auto;
+  bottom: auto;
+}
+i.icons .bottom.left.corner.icon {
+  top: auto;
+  left: 0;
+  right: auto;
+  bottom: 0;
+}
+i.icons .bottom.right.corner.icon {
+  top: auto;
+  left: auto;
+  right: 0;
+  bottom: 0;
+}
+
+i.icons .inverted.corner.icon {
+  text-shadow: @cornerIconInvertedShadow;
+}
+
+.loadUIOverrides();

client/semantic/src/definitions/elements/image.less

@@ -0,0 +1,328 @@
+/*!
+ * # Semantic UI - Image
+ * http://github.com/semantic-org/semantic-ui/
+ *
+ *
+ * Released under the MIT license
+ * http://opensource.org/licenses/MIT
+ *
+ */
+
+
+/*******************************
+            Theme
+*******************************/
+
+@type    : 'element';
+@element : 'image';
+
+@import (multiple) '../../theme.config';
+
+
+/*******************************
+             Image
+*******************************/
+
+.ui.image {
+  position: relative;
+  display: inline-block;
+  vertical-align: middle;
+  max-width: 100%;
+  background-color: @placeholderColor;
+}
+
+img.ui.image {
+  display: block;
+}
+
+.ui.image svg,
+.ui.image img {
+  display: block;
+  max-width: 100%;
+  height: auto;
+}
+
+
+/*******************************
+            States
+*******************************/
+
+.ui.hidden.images,
+.ui.hidden.image {
+  display: none;
+}
+.ui.hidden.transition.images,
+.ui.hidden.transition.image {
+  display: block;
+  visibility: hidden;
+}
+.ui.images > .hidden.transition {
+  display: inline-block;
+  visibility: hidden;
+}
+
+
+.ui.disabled.images,
+.ui.disabled.image {
+  cursor: default;
+  opacity: @disabledOpacity;
+}
+
+
+/*******************************
+          Variations
+*******************************/
+
+
+/*--------------
+     Inline
+---------------*/
+
+.ui.inline.image,
+.ui.inline.image svg,
+.ui.inline.image img {
+  display: inline-block;
+}
+
+/*------------------
+  Vertical Aligned
+-------------------*/
+
+.ui.top.aligned.images .image,
+.ui.top.aligned.image,
+.ui.top.aligned.image svg,
+.ui.top.aligned.image img {
+  display: inline-block;
+  vertical-align: top;
+}
+.ui.middle.aligned.images .image,
+.ui.middle.aligned.image,
+.ui.middle.aligned.image svg,
+.ui.middle.aligned.image img {
+  display: inline-block;
+  vertical-align: middle;
+}
+.ui.bottom.aligned.images .image,
+.ui.bottom.aligned.image,
+.ui.bottom.aligned.image svg,
+.ui.bottom.aligned.image img {
+  display: inline-block;
+  vertical-align: bottom;
+}
+
+/*--------------
+     Rounded
+---------------*/
+
+.ui.rounded.images .image,
+.ui.rounded.image,
+.ui.rounded.images .image > *,
+.ui.rounded.image > * {
+  border-radius: @roundedBorderRadius;
+}
+
+/*--------------
+    Bordered
+---------------*/
+
+.ui.bordered.images .image,
+.ui.bordered.images img,
+.ui.bordered.images svg,
+.ui.bordered.image img,
+.ui.bordered.image svg,
+img.ui.bordered.image {
+  border: @imageBorder;
+}
+
+/*--------------
+    Circular
+---------------*/
+
+.ui.circular.images,
+.ui.circular.image {
+  overflow: hidden;
+}
+
+.ui.circular.images .image,
+.ui.circular.image,
+.ui.circular.images .image > *,
+.ui.circular.image > * {
+  -webkit-border-radius: @circularRadius;
+  -moz-border-radius: @circularRadius;
+  border-radius: @circularRadius;
+}
+
+/*--------------
+     Fluid
+---------------*/
+
+.ui.fluid.images,
+.ui.fluid.image,
+.ui.fluid.images img,
+.ui.fluid.images svg,
+.ui.fluid.image svg,
+.ui.fluid.image img {
+  display: block;
+  width: 100%;
+  height: auto;
+}
+
+
+/*--------------
+     Avatar
+---------------*/
+
+.ui.avatar.images .image,
+.ui.avatar.images img,
+.ui.avatar.images svg,
+.ui.avatar.image img,
+.ui.avatar.image svg,
+.ui.avatar.image {
+  margin-right: @avatarMargin;
+
+  display: inline-block;
+  width: @avatarSize;
+  height: @avatarSize;
+
+  -webkit-border-radius: @circularRadius;
+  -moz-border-radius: @circularRadius;
+  border-radius: @circularRadius;
+}
+
+/*-------------------
+       Spaced
+--------------------*/
+
+.ui.spaced.image {
+  display: inline-block !important;
+  margin-left: @spacedDistance;
+  margin-right: @spacedDistance;
+}
+
+.ui[class*="left spaced"].image {
+  margin-left: @spacedDistance;
+  margin-right: 0em;
+}
+
+.ui[class*="right spaced"].image {
+  margin-left: 0em;
+  margin-right: @spacedDistance;
+}
+
+/*-------------------
+       Floated
+--------------------*/
+
+.ui.floated.image,
+.ui.floated.images {
+  float: left;
+  margin-right: @floatedHorizontalMargin;
+  margin-bottom: @floatedVerticalMargin;
+}
+.ui.right.floated.images,
+.ui.right.floated.image {
+  float: right;
+  margin-right: 0em;
+  margin-bottom: @floatedVerticalMargin;
+  margin-left: @floatedHorizontalMargin;
+}
+
+.ui.floated.images:last-child,
+.ui.floated.image:last-child {
+  margin-bottom: 0em;
+}
+
+
+.ui.centered.images,
+.ui.centered.image {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+/*--------------
+     Sizes
+---------------*/
+
+.ui.mini.images .image,
+.ui.mini.images img,
+.ui.mini.images svg,
+.ui.mini.image {
+  width: @miniWidth;
+  height: auto;
+  font-size: @mini;
+}
+.ui.tiny.images .image,
+.ui.tiny.images img,
+.ui.tiny.images svg,
+.ui.tiny.image {
+  width: @tinyWidth;
+  height: auto;
+  font-size: @tiny;
+}
+.ui.small.images .image,
+.ui.small.images img,
+.ui.small.images svg,
+.ui.small.image {
+  width: @smallWidth;
+  height: auto;
+  font-size: @small;
+}
+.ui.medium.images .image,
+.ui.medium.images img,
+.ui.medium.images svg,
+.ui.medium.image {
+  width: @mediumWidth;
+  height: auto;
+  font-size: @medium;
+}
+.ui.large.images .image,
+.ui.large.images img,
+.ui.large.images svg,
+.ui.large.image {
+  width: @largeWidth;
+  height: auto;
+  font-size: @large;
+}
+.ui.big.images .image,
+.ui.big.images img,
+.ui.big.images svg,
+.ui.big.image {
+  width: @bigWidth;
+  height: auto;
+  font-size: @big;
+}
+.ui.huge.images .image,
+.ui.huge.images img,
+.ui.huge.images svg,
+.ui.huge.image {
+  width: @hugeWidth;
+  height: auto;
+  font-size: @huge;
+}
+.ui.massive.images .image,
+.ui.massive.images img,
+.ui.massive.images svg,
+.ui.massive.image {
+  width: @massiveWidth;
+  height: auto;
+  font-size: @massive;
+}
+
+
+/*******************************
+              Groups
+*******************************/
+
+.ui.images {
+  font-size: 0em;
+  margin: 0em -@imageHorizontalMargin 0rem;
+}
+
+.ui.images .image,
+.ui.images > img,
+.ui.images > svg {
+  display: inline-block;
+  margin: 0em @imageHorizontalMargin @imageVerticalMargin;
+}
+
+.loadUIOverrides();

client/semantic/src/definitions/elements/input.less

@@ -0,0 +1,508 @@
+/*!
+ * # Semantic UI - Input
+ * http://github.com/semantic-org/semantic-ui/
+ *
+ *
+ * Released under the MIT license
+ * http://opensource.org/licenses/MIT
+ *
+ */
+
+/*******************************
+            Theme
+*******************************/
+
+@type    : 'element';
+@element : 'input';
+
+@import (multiple) '../../theme.config';
+
+
+/*******************************
+           Standard
+*******************************/
+
+
+/*--------------------
+        Inputs
+---------------------*/
+
+.ui.input {
+  position: relative;
+  font-weight: @normal;
+  font-style: normal;
+  display: inline-flex;
+  color: @inputColor;
+}
+.ui.input > input {
+  margin: 0em;
+  max-width: 100%;
+  flex: 1 0 auto;
+  outline: none;
+  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
+  text-align: @textAlign;
+  line-height: @lineHeight;
+
+  font-family: @inputFont;
+  padding: @padding;
+
+  background: @background;
+  border: @border;
+  color: @inputColor;
+  border-radius: @borderRadius;
+  transition: @transition;
+
+  box-shadow: @boxShadow;
+}
+
+
+/*--------------------
+      Placeholder
+---------------------*/
+
+/* browsers require these rules separate */
+
+.ui.input > input::-webkit-input-placeholder {
+  color: @placeholderColor;
+}
+.ui.input > input::-moz-placeholder {
+  color: @placeholderColor;
+}
+.ui.input > input:-ms-input-placeholder {
+  color: @placeholderColor;
+}
+
+
+/*******************************
+            States
+*******************************/
+
+/*--------------------
+        Disabled
+---------------------*/
+
+.ui.disabled.input,
+.ui.input:not(.disabled) input[disabled] {
+  opacity: @disabledOpacity;
+}
+
+.ui.disabled.input > input,
+.ui.input:not(.disabled) input[disabled] {
+  pointer-events: none;
+}
+
+/*--------------------
+        Active
+---------------------*/
+
+.ui.input > input:active,
+.ui.input.down input {
+  border-color: @downBorderColor;
+  background: @downBackground;
+  color: @downColor;
+  box-shadow: @downBoxShadow;
+}
+
+/*--------------------
+       Loading
+---------------------*/
+
+.ui.loading.loading.input > i.icon:before {
+  position: absolute;
+  content: '';
+  top: 50%;
+  left: 50%;
+
+  margin: @loaderMargin;
+  width: @loaderSize;
+  height: @loaderSize;
+
+  border-radius: @circularRadius;
+  border: @loaderLineWidth solid @loaderFillColor;
+}
+.ui.loading.loading.input > i.icon:after {
+  position: absolute;
+  content: '';
+  top: 50%;
+  left: 50%;
+
+  margin: @loaderMargin;
+  width: @loaderSize;
+  height: @loaderSize;
+
+  animation: button-spin @loaderSpeed linear;
+  animation-iteration-count: infinite;
+
+  border-radius: @circularRadius;
+
+  border-color: @loaderLineColor transparent transparent;
+  border-style: solid;
+  border-width: @loaderLineWidth;
+
+  box-shadow: 0px 0px 0px 1px transparent;
+}
+
+
+/*--------------------
+        Focus
+---------------------*/
+
+.ui.input.focus > input,
+.ui.input > input:focus  {
+  border-color: @focusBorderColor;
+  background: @focusBackground;
+  color: @focusColor;
+  box-shadow: @focusBoxShadow;
+}
+.ui.input.focus > input::-webkit-input-placeholder,
+.ui.input > input:focus::-webkit-input-placeholder {
+  color: @placeholderFocusColor;
+}
+.ui.input.focus > input::-moz-placeholder,
+.ui.input > input:focus::-moz-placeholder {
+  color: @placeholderFocusColor;
+}
+.ui.input.focus > input:-ms-input-placeholder,
+.ui.input > input:focus:-ms-input-placeholder {
+  color: @placeholderFocusColor;
+}
+
+
+
+/*--------------------
+        Error
+---------------------*/
+
+.ui.input.error > input {
+  background-color: @errorBackground;
+  border-color: @errorBorder;
+  color: @errorColor;
+  box-shadow: @errorBoxShadow;
+}
+
+/* Error Placeholder */
+.ui.input.error > input::-webkit-input-placeholder {
+  color: @placeholderErrorColor;
+}
+.ui.input.error > input::-moz-placeholder {
+  color: @placeholderErrorColor;
+}
+.ui.input.error > input:-ms-input-placeholder {
+  color: @placeholderErrorColor !important;
+}
+
+/* Focused Error Placeholder */
+.ui.input.error > input:focus::-webkit-input-placeholder {
+  color: @placeholderErrorFocusColor;
+}
+.ui.input.error > input:focus::-moz-placeholder {
+  color: @placeholderErrorFocusColor;
+}
+.ui.input.error > input:focus:-ms-input-placeholder {
+  color: @placeholderErrorFocusColor !important;
+}
+
+/*******************************
+           Variations
+*******************************/
+
+/*--------------------
+      Transparent
+---------------------*/
+
+
+.ui.transparent.input > input {
+  border-color: transparent !important;
+  background-color: transparent !important;
+  padding: 0em !important;
+  box-shadow: none !important;
+  border-radius: 0px !important;
+}
+
+/* Transparent Icon */
+.ui.transparent.icon.input > i.icon {
+  width: @transparentIconWidth;
+}
+.ui.transparent.icon.input > input {
+  padding-left: 0em !important;
+  padding-right: @transparentIconMargin !important;
+}
+.ui.transparent[class*="left icon"].input > input {
+  padding-left: @transparentIconMargin !important;
+  padding-right: 0em !important;
+}
+
+/* Transparent Inverted */
+.ui.transparent.inverted.input {
+  color: @transparentInvertedColor;
+}
+.ui.transparent.inverted.input > input {
+  color: inherit;
+}
+
+.ui.transparent.inverted.input > input::-webkit-input-placeholder {
+  color: @transparentInvertedPlaceholderColor;
+}
+.ui.transparent.inverted.input > input::-moz-placeholder {
+  color: @transparentInvertedPlaceholderColor;
+}
+.ui.transparent.inverted.input > input:-ms-input-placeholder {
+  color: @transparentInvertedPlaceholderColor;
+}
+
+
+/*--------------------
+         Icon
+---------------------*/
+
+.ui.icon.input > i.icon {
+  cursor: default;
+  position: absolute;
+  line-height: 1;
+  text-align: center;
+  top: 0px;
+  right: 0px;
+  margin: 0em;
+  height: 100%;
+
+  width: @iconWidth;
+  opacity: @iconOpacity;
+  border-radius: 0em @borderRadius @borderRadius 0em;
+  transition: @iconTransition;
+}
+.ui.icon.input > i.icon:not(.link) {
+  pointer-events: none;
+}
+.ui.icon.input > input {
+  padding-right: @iconMargin !important;
+}
+
+.ui.icon.input > i.icon:before,
+.ui.icon.input > i.icon:after {
+  left: 0;
+  position: absolute;
+  text-align: center;
+  top: 50%;
+  width: 100%;
+  margin-top: @iconOffset;
+}
+.ui.icon.input > i.link.icon {
+  cursor: pointer;
+}
+.ui.icon.input > i.circular.icon {
+  top: @circularIconVerticalOffset;
+  right: @circularIconHorizontalOffset;
+}
+
+/* Left Icon Input */
+.ui[class*="left icon"].input > i.icon {
+  right: auto;
+  left: @borderWidth;
+  border-radius: @borderRadius 0em 0em @borderRadius;
+}
+.ui[class*="left icon"].input > i.circular.icon {
+  right: auto;
+  left: @circularIconHorizontalOffset;
+}
+.ui[class*="left icon"].input > input {
+  padding-left: @iconMargin !important;
+  padding-right: @horizontalPadding !important;
+}
+
+/* Focus */
+.ui.icon.input > input:focus ~ i.icon {
+  opacity: 1;
+}
+
+/*--------------------
+        Labeled
+---------------------*/
+
+/* Adjacent Label */
+.ui.labeled.input > .label {
+  flex: 0 0 auto;
+  margin: 0;
+  font-size: @relativeMedium;
+}
+.ui.labeled.input > .label:not(.corner) {
+  padding-top: @verticalPadding;
+  padding-bottom: @verticalPadding;
+}
+
+/* Regular Label on Left */
+.ui.labeled.input:not([class*="corner labeled"]) .label:first-child {
+  border-top-right-radius: 0px;
+  border-bottom-right-radius: 0px;
+}
+.ui.labeled.input:not([class*="corner labeled"]) .label:first-child + input {
+  border-top-left-radius: 0px;
+  border-bottom-left-radius: 0px;
+  border-left-color: transparent;
+}
+.ui.labeled.input:not([class*="corner labeled"]) .label:first-child + input:focus {
+  border-left-color: @focusBorderColor;
+}
+
+/* Regular Label on Right */
+.ui[class*="right labeled"].input > input {
+  border-top-right-radius: 0px !important;
+  border-bottom-right-radius: 0px !important;
+  border-right-color: transparent !important;
+}
+.ui[class*="right labeled"].input > input + .label {
+  border-top-left-radius: 0px;
+  border-bottom-left-radius: 0px;
+}
+
+.ui[class*="right labeled"].input > input:focus {
+  border-right-color: @focusBorderColor !important;
+}
+
+/* Corner Label */
+.ui.labeled.input .corner.label {
+  top: @labelCornerTop;
+  right: @labelCornerRight;
+  font-size: @labelCornerSize;
+  border-radius: 0em @borderRadius 0em 0em;
+}
+
+/* Spacing with corner label */
+.ui[class*="corner labeled"]:not([class*="left corner labeled"]).labeled.input > input {
+  padding-right: @labeledMargin !important;
+}
+.ui[class*="corner labeled"].icon.input:not([class*="left corner labeled"]) > input {
+  padding-right: @labeledIconInputMargin !important;
+}
+.ui[class*="corner labeled"].icon.input:not([class*="left corner labeled"]) > .icon {
+  margin-right: @labeledIconMargin;
+}
+
+/* Left Labeled */
+.ui[class*="left corner labeled"].labeled.input > input {
+  padding-left: @labeledMargin !important;
+}
+.ui[class*="left corner labeled"].icon.input > input {
+  padding-left: @labeledIconInputMargin !important;
+}
+.ui[class*="left corner labeled"].icon.input > .icon {
+  margin-left: @labeledIconMargin;
+}
+
+/* Corner Label Position  */
+.ui.input > .ui.corner.label {
+  top: @borderWidth;
+  right: @borderWidth;
+}
+.ui.input > .ui.left.corner.label {
+  right: auto;
+  left: @borderWidth;
+}
+
+
+/*--------------------
+        Action
+---------------------*/
+
+.ui.action.input > .button,
+.ui.action.input > .buttons {
+  display: flex;
+  align-items: center;
+  flex: 0 0 auto;
+}
+.ui.action.input > .button,
+.ui.action.input > .buttons > .button {
+  padding-top: @verticalPadding;
+  padding-bottom: @verticalPadding;
+  margin: 0;
+}
+
+/* Button on Right */
+.ui.action.input:not([class*="left action"]) > input {
+  border-top-right-radius: 0px !important;
+  border-bottom-right-radius: 0px !important;
+  border-right-color: transparent !important;
+}
+.ui.action.input:not([class*="left action"]) > .dropdown:not(:first-child),
+.ui.action.input:not([class*="left action"]) > .button:not(:first-child),
+.ui.action.input:not([class*="left action"]) > .buttons:not(:first-child) > .button {
+  border-radius: 0px;
+}
+.ui.action.input:not([class*="left action"]) > .dropdown:last-child,
+.ui.action.input:not([class*="left action"]) > .button:last-child,
+.ui.action.input:not([class*="left action"]) > .buttons:last-child > .button {
+  border-radius: 0px @borderRadius @borderRadius 0px;
+}
+
+/* Input Focus */
+.ui.action.input:not([class*="left action"]) > input:focus {
+  border-right-color: @focusBorderColor !important;
+}
+
+/* Button on Left */
+.ui[class*="left action"].input > input {
+  border-top-left-radius: 0px !important;
+  border-bottom-left-radius: 0px !important;
+  border-left-color: transparent !important;
+}
+.ui[class*="left action"].input > .dropdown,
+.ui[class*="left action"].input > .button,
+.ui[class*="left action"].input > .buttons > .button {
+  border-radius: 0px;
+}
+.ui[class*="left action"].input > .dropdown:first-child,
+.ui[class*="left action"].input > .button:first-child,
+.ui[class*="left action"].input > .buttons:first-child > .button {
+  border-radius: @borderRadius 0px 0px @borderRadius;
+}
+/* Input Focus */
+.ui[class*="left action"].input > input:focus {
+  border-left-color: @focusBorderColor !important;
+}
+
+/*--------------------
+       Inverted
+---------------------*/
+
+/* Standard */
+.ui.inverted.input > input {
+  border: none;
+}
+
+/*--------------------
+        Fluid
+---------------------*/
+
+.ui.fluid.input {
+  display: flex;
+}
+.ui.fluid.input > input {
+  width: 0px !important;
+}
+
+/*--------------------
+        Size
+---------------------*/
+
+.ui.mini.input {
+  font-size: @relativeMini;
+}
+.ui.small.input {
+  font-size: @relativeSmall;
+}
+.ui.input {
+  font-size: @relativeMedium;
+}
+.ui.large.input {
+  font-size: @relativeLarge;
+}
+.ui.big.input {
+  font-size: @relativeBig;
+}
+.ui.huge.input {
+  font-size: @relativeHuge;
+}
+.ui.massive.input {
+  font-size: @relativeMassive;
+}
+
+.loadUIOverrides();

client/semantic/src/definitions/elements/list.less

@@ -0,0 +1,953 @@
+/*!
+ * # Semantic UI - List
+ * http://github.com/semantic-org/semantic-ui/
+ *
+ *
+ * Released under the MIT license
+ * http://opensource.org/licenses/MIT
+ *
+ */
+
+/*******************************
+            Theme
+*******************************/
+
+@type    : 'element';
+@element : 'list';
+
+@import (multiple) '../../theme.config';
+
+/*******************************
+            List
+*******************************/
+
+ul.ui.list,
+ol.ui.list,
+.ui.list {
+  list-style-type: @listStyleType;
+  margin: @margin;
+  padding: @verticalPadding @horizontalPadding;
+}
+
+ul.ui.list:first-child,
+ol.ui.list:first-child,
+.ui.list:first-child {
+  margin-top: 0em;
+  padding-top: 0em;
+}
+
+ul.ui.list:last-child,
+ol.ui.list:last-child,
+.ui.list:last-child {
+  margin-bottom: 0em;
+  padding-bottom: 0em;
+}
+
+/*******************************
+            Content
+*******************************/
+
+/* List Item */
+ul.ui.list li,
+ol.ui.list li,
+.ui.list > .item,
+.ui.list .list > .item {
+  display: list-item;
+  table-layout: fixed;
+  list-style-type: @listStyleType;
+  list-style-position: @listStylePosition;
+
+  padding: @itemPadding;
+  line-height: @itemLineHeight;
+}
+
+ul.ui.list > li:first-child:after,
+ol.ui.list > li:first-child:after,
+.ui.list > .list > .item,
+.ui.list > .item:after {
+  content: '';
+  display: block;
+  height: 0;
+  clear: both;
+  visibility: hidden;
+}
+
+ul.ui.list li:first-child,
+ol.ui.list li:first-child,
+.ui.list .list > .item:first-child,
+.ui.list > .item:first-child {
+  padding-top: 0em;
+}
+ul.ui.list li:last-child,
+ol.ui.list li:last-child,
+.ui.list .list > .item:last-child,
+.ui.list > .item:last-child {
+  padding-bottom: 0em;
+}
+
+/* Child List */
+ul.ui.list ul,
+ol.ui.list ol,
+.ui.list .list {
+  clear: both;
+  margin: 0em;
+  padding: @childListPadding;
+}
+
+/* Child Item */
+ul.ui.list ul li,
+ol.ui.list ol li,
+.ui.list .list > .item {
+  padding: @childItemPadding;
+  line-height: @childItemLineHeight;
+}
+
+
+/* Icon */
+.ui.list .list > .item > i.icon,
+.ui.list > .item > i.icon {
+  display: table-cell;
+  margin: 0em;
+  padding-top: @iconOffset;
+  padding-right: @iconDistance;
+  vertical-align: @iconContentVerticalAlign;
+  transition: @iconTransition;
+}
+.ui.list .list > .item > i.icon:only-child,
+.ui.list > .item > i.icon:only-child {
+  display: inline-block;
+  vertical-align: @iconVerticalAlign;
+}
+
+
+/* Image */
+.ui.list .list > .item > .image,
+.ui.list > .item > .image {
+  display: table-cell;
+  background-color: transparent;
+  margin: 0em;
+  vertical-align: @imageAlign;
+}
+.ui.list .list > .item > .image:not(:only-child):not(img),
+.ui.list > .item > .image:not(:only-child):not(img) {
+  padding-right: @imageDistance;
+}
+.ui.list .list > .item > .image img,
+.ui.list > .item > .image img {
+  vertical-align: @imageAlign;
+}
+
+.ui.list .list > .item > img.image,
+.ui.list .list > .item > .image:only-child,
+.ui.list > .item > img.image,
+.ui.list > .item > .image:only-child {
+  display: inline-block;
+}
+
+/* Content */
+.ui.list .list > .item > .content,
+.ui.list > .item > .content {
+  line-height: @contentLineHeight;
+}
+.ui.list .list > .item > .image + .content,
+.ui.list .list > .item > .icon + .content,
+.ui.list > .item > .image + .content,
+.ui.list > .item > .icon + .content {
+  display: table-cell;
+  width: 100%;
+  padding: 0em 0em 0em @contentDistance;
+  vertical-align: @contentVerticalAlign;
+}
+.ui.list .list > .item > img.image + .content,
+.ui.list > .item > img.image + .content {
+  display: inline-block;
+  width: auto;
+}
+.ui.list .list > .item > .content > .list,
+.ui.list > .item > .content > .list {
+  margin-left: 0em;
+  padding-left: 0em;
+}
+
+/* Header */
+.ui.list .list > .item .header,
+.ui.list > .item .header {
+  display: block;
+  margin: 0em;
+  font-family: @itemHeaderFontFamily;
+  font-weight: @itemHeaderFontWeight;
+  color: @itemHeaderColor;
+}
+
+/* Description */
+.ui.list .list > .item .description,
+.ui.list > .item .description {
+  display: block;
+  color: @itemDescriptionColor;
+}
+
+/* Child Link */
+.ui.list > .item a,
+.ui.list .list > .item a {
+  cursor: pointer;
+}
+
+/* Linking Item */
+.ui.list .list > a.item,
+.ui.list > a.item {
+  cursor: pointer;
+  color: @itemLinkColor;
+}
+.ui.list .list > a.item:hover,
+.ui.list > a.item:hover {
+  color: @itemLinkHoverColor;
+}
+
+/* Linked Item Icons */
+.ui.list .list > a.item i.icon,
+.ui.list > a.item i.icon {
+  color: @itemLinkIconColor;
+}
+
+/* Header Link */
+.ui.list .list > .item a.header,
+.ui.list > .item a.header {
+  cursor: pointer;
+  color: @itemHeaderLinkColor !important;
+}
+.ui.list .list > .item a.header:hover,
+.ui.list > .item a.header:hover {
+  color: @itemHeaderLinkHoverColor !important;
+}
+
+/* Floated Content */
+.ui[class*="left floated"].list {
+  float: left;
+}
+.ui[class*="right floated"].list {
+  float: right;
+}
+
+.ui.list .list > .item [class*="left floated"],
+.ui.list > .item [class*="left floated"] {
+  float: left;
+  margin: @leftFloatMargin;
+}
+.ui.list .list > .item [class*="right floated"],
+.ui.list > .item [class*="right floated"] {
+  float: right;
+  margin: @rightFloatMargin;
+}
+
+/*******************************
+            Coupling
+*******************************/
+
+.ui.menu .ui.list > .item,
+.ui.menu .ui.list .list > .item {
+  display: list-item;
+  table-layout: fixed;
+  background-color: transparent;
+
+  list-style-type: @listStyleType;
+  list-style-position: @listStylePosition;
+
+  padding: @itemVerticalPadding @itemHorizontalPadding;
+  line-height: @itemLineHeight;
+}
+.ui.menu .ui.list .list > .item:before,
+.ui.menu .ui.list > .item:before {
+  border: none;
+  background: none;
+}
+.ui.menu .ui.list .list > .item:first-child,
+.ui.menu .ui.list > .item:first-child {
+  padding-top: 0em;
+}
+.ui.menu .ui.list .list > .item:last-child,
+.ui.menu .ui.list > .item:last-child {
+  padding-bottom: 0em;
+}
+
+
+/*******************************
+            Types
+*******************************/
+
+/*-------------------
+      Horizontal
+--------------------*/
+
+.ui.horizontal.list {
+  display: inline-block;
+  font-size: 0em;
+}
+.ui.horizontal.list > .item {
+  display: inline-block;
+  margin-left: @horizontalSpacing;
+  font-size: 1rem;
+}
+.ui.horizontal.list:not(.celled) > .item:first-child {
+  margin-left: 0em !important;
+  padding-left: 0em !important;
+}
+.ui.horizontal.list .list {
+  padding-left: 0em;
+  padding-bottom: 0em;
+}
+
+.ui.horizontal.list > .item > .image,
+.ui.horizontal.list .list > .item > .image,
+.ui.horizontal.list > .item > .icon,
+.ui.horizontal.list .list > .item > .icon,
+.ui.horizontal.list > .item > .content,
+.ui.horizontal.list .list > .item > .content {
+  vertical-align: @horizontalVerticalAlign;
+}
+
+/* Padding on all elements */
+.ui.horizontal.list > .item:first-child,
+.ui.horizontal.list > .item:last-child {
+  padding-top: @itemVerticalPadding;
+  padding-bottom: @itemVerticalPadding;
+}
+
+/* Horizontal List */
+.ui.horizontal.list > .item > i.icon {
+  margin: 0em;
+  padding: 0em @horizontalIconDistance 0em 0em;
+}
+.ui.horizontal.list > .item > .icon,
+.ui.horizontal.list > .item > .icon + .content {
+  float: none;
+  display: inline-block;
+}
+
+
+/*******************************
+             States
+*******************************/
+
+/*-------------------
+       Disabled
+--------------------*/
+
+.ui.list .list > .disabled.item,
+.ui.list > .disabled.item {
+  pointer-events: none;
+  color: @disabledColor !important;
+}
+.ui.inverted.list .list > .disabled.item,
+.ui.inverted.list > .disabled.item {
+  color: @invertedDisabledColor !important;
+}
+
+/*-------------------
+        Hover
+--------------------*/
+
+.ui.list .list > a.item:hover .icon,
+.ui.list > a.item:hover .icon {
+  color: @itemLinkIconHoverColor;
+}
+
+
+/*******************************
+           Variations
+*******************************/
+
+/*-------------------
+       Inverted
+--------------------*/
+
+.ui.inverted.list .list > a.item > .icon,
+.ui.inverted.list > a.item > .icon {
+  color: @invertedIconLinkColor;
+}
+.ui.inverted.list .list > .item .header,
+.ui.inverted.list > .item .header {
+  color: @invertedHeaderColor;
+}
+.ui.inverted.list .list > .item .description,
+.ui.inverted.list > .item .description {
+  color: @invertedDescriptionColor;
+}
+
+/* Item Link */
+.ui.inverted.list .list > a.item,
+.ui.inverted.list > a.item {
+  cursor: pointer;
+  color: @invertedItemLinkColor;
+}
+.ui.inverted.list .list > a.item:hover,
+.ui.inverted.list > a.item:hover {
+  color: @invertedItemLinkHoverColor;
+}
+
+
+/* Linking Content */
+.ui.inverted.list .item a:not(.ui) {
+  color: @invertedItemLinkColor !important;
+}
+.ui.inverted.list .item a:not(.ui):hover {
+  color: @invertedItemLinkHoverColor !important;
+}
+
+/*-------------------
+       Aligned
+--------------------*/
+
+.ui.list[class*="top aligned"] .image,
+.ui.list[class*="top aligned"] .content,
+.ui.list [class*="top aligned"] {
+  vertical-align: top !important;
+}
+.ui.list[class*="middle aligned"] .image,
+.ui.list[class*="middle aligned"] .content,
+.ui.list [class*="middle aligned"] {
+  vertical-align: middle !important;
+}
+.ui.list[class*="bottom aligned"] .image,
+.ui.list[class*="bottom aligned"] .content,
+.ui.list [class*="bottom aligned"] {
+  vertical-align: bottom !important;
+}
+
+/*-------------------
+       Link
+--------------------*/
+
+.ui.link.list .item,
+.ui.link.list a.item,
+.ui.link.list .item a:not(.ui) {
+  color: @linkListItemColor;
+  transition: @linkListTransition;
+}
+.ui.link.list.list a.item:hover,
+.ui.link.list.list .item a:not(.ui):hover {
+  color: @linkListItemHoverColor;
+}
+.ui.link.list.list a.item:active,
+.ui.link.list.list .item a:not(.ui):active {
+  color: @linkListItemDownColor;
+}
+.ui.link.list.list .active.item,
+.ui.link.list.list .active.item a:not(.ui) {
+  color: @linkListItemActiveColor;
+}
+
+/* Inverted */
+.ui.inverted.link.list .item,
+.ui.inverted.link.list a.item,
+.ui.inverted.link.list .item a:not(.ui) {
+  color: @invertedLinkListItemColor;
+}
+.ui.inverted.link.list.list a.item:hover,
+.ui.inverted.link.list.list .item a:not(.ui):hover {
+  color: @invertedLinkListItemHoverColor;
+}
+.ui.inverted.link.list.list a.item:active,
+.ui.inverted.link.list.list .item a:not(.ui):active {
+  color: @invertedLinkListItemDownColor;
+}
+.ui.inverted.link.list.list a.active.item,
+.ui.inverted.link.list.list .active.item a:not(.ui) {
+  color: @invertedLinkListItemActiveColor;
+}
+
+/*-------------------
+      Selection
+--------------------*/
+
+.ui.selection.list .list > .item,
+.ui.selection.list > .item {
+  cursor: pointer;
+  background: @selectionListBackground;
+  padding: @selectionListItemVerticalPadding @selectionListItemHorizontalPadding;
+  margin: @selectionListItemMargin;
+  color: @selectionListColor;
+  border-radius: @selectionListItemBorderRadius;
+  transition: @selectionListTransition;
+}
+.ui.selection.list .list > .item:last-child,
+.ui.selection.list > .item:last-child {
+  margin-bottom: 0em;
+}
+.ui.selection.list.list > .item:hover,
+.ui.selection.list > .item:hover {
+  background: @selectionListHoverBackground;
+  color: @selectionListHoverColor;
+}
+.ui.selection.list .list > .item:active,
+.ui.selection.list > .item:active {
+  background: @selectionListDownBackground;
+  color: @selectionListDownColor;
+}
+.ui.selection.list .list > .item.active,
+.ui.selection.list > .item.active {
+  background: @selectionListActiveBackground;
+  color: @selectionListActiveColor;
+}
+
+/* Inverted */
+.ui.inverted.selection.list > .item,
+.ui.inverted.selection.list > .item {
+  background: @invertedSelectionListBackground;
+  color: @invertedSelectionListColor;
+}
+.ui.inverted.selection.list > .item:hover,
+.ui.inverted.selection.list > .item:hover {
+  background: @invertedSelectionListHoverBackground;
+  color: @invertedSelectionListHoverColor;
+}
+.ui.inverted.selection.list > .item:active,
+.ui.inverted.selection.list > .item:active {
+  background: @invertedSelectionListDownBackground;
+  color: @invertedSelectionListDownColor;
+}
+.ui.inverted.selection.list > .item.active,
+.ui.inverted.selection.list > .item.active {
+  background: @invertedSelectionListActiveBackground;
+  color: @invertedSelectionListActiveColor;
+}
+
+/* Celled / Divided Selection List */
+.ui.celled.selection.list .list > .item,
+.ui.divided.selection.list .list > .item,
+.ui.celled.selection.list > .item,
+.ui.divided.selection.list > .item {
+  border-radius: 0em;
+}
+
+/*-------------------
+       Animated
+--------------------*/
+
+.ui.animated.list > .item {
+  transition: @animatedListTransition;
+}
+.ui.animated.list:not(.horizontal) > .item:hover {
+  padding-left: @animatedListIndent;
+}
+
+/*-------------------
+       Fitted
+--------------------*/
+.ui.fitted.list:not(.selection) .list > .item,
+.ui.fitted.list:not(.selection) > .item {
+  padding-left: 0em;
+  padding-right: 0em;
+}
+.ui.fitted.selection.list .list > .item,
+.ui.fitted.selection.list > .item {
+  margin-left: -@selectionListItemHorizontalPadding;
+  margin-right: -@selectionListItemHorizontalPadding;
+}
+
+/*-------------------
+      Bulleted
+--------------------*/
+
+ul.ui.list,
+.ui.bulleted.list {
+  margin-left: @bulletDistance;
+}
+ul.ui.list li,
+.ui.bulleted.list .list > .item,
+.ui.bulleted.list > .item {
+  position: relative;
+}
+ul.ui.list li:before,
+.ui.bulleted.list .list > .item:before,
+.ui.bulleted.list > .item:before {
+  user-select: none;
+  pointer-events: none;
+  position: absolute;
+  top: auto;
+  left: auto;
+  font-weight: @normal;
+  margin-left: @bulletOffset;
+  content: @bulletCharacter;
+  opacity: @bulletOpacity;
+  color: @bulletColor;
+  vertical-align: @bulletVerticalAlign;
+}
+
+ul.ui.list li:before,
+.ui.bulleted.list .list > a.item:before,
+.ui.bulleted.list > a.item:before {
+  color: @bulletLinkColor;
+}
+
+ul.ui.list ul,
+.ui.bulleted.list .list {
+  padding-left: @bulletChildDistance;
+}
+
+/* Horizontal Bulleted */
+ul.ui.horizontal.bulleted.list,
+.ui.horizontal.bulleted.list {
+  margin-left: 0em;
+}
+ul.ui.horizontal.bulleted.list li,
+.ui.horizontal.bulleted.list > .item {
+  margin-left: @horizontalBulletSpacing;
+}
+ul.ui.horizontal.bulleted.list li:first-child,
+.ui.horizontal.bulleted.list > .item:first-child {
+  margin-left: 0em;
+}
+ul.ui.horizontal.bulleted.list li::before,
+.ui.horizontal.bulleted.list > .item::before {
+  color: @horizontalBulletColor;
+}
+ul.ui.horizontal.bulleted.list li:first-child::before,
+.ui.horizontal.bulleted.list > .item:first-child::before {
+  display: none;
+}
+
+/*-------------------
+       Ordered
+--------------------*/
+
+ol.ui.list,
+.ui.ordered.list,
+.ui.ordered.list .list,
+ol.ui.list ol {
+  counter-reset: ordered;
+  margin-left: @orderedCountDistance;
+  list-style-type: none;
+}
+ol.ui.list li,
+.ui.ordered.list .list > .item,
+.ui.ordered.list > .item {
+  list-style-type: none;
+  position: relative;
+}
+ol.ui.list li:before,
+.ui.ordered.list .list > .item:before,
+.ui.ordered.list > .item:before {
+  position: absolute;
+  top: auto;
+  left: auto;
+  user-select: none;
+  pointer-events: none;
+  margin-left: -(@orderedCountDistance);
+  counter-increment: @orderedCountName;
+  content: @orderedCountContent;
+  text-align: @orderedCountTextAlign;
+  color: @orderedCountColor;
+  vertical-align: @orderedCountVerticalAlign;
+  opacity: @orderedCountOpacity;
+}
+
+ol.ui.inverted.list li:before,
+.ui.ordered.inverted.list .list > .item:before,
+.ui.ordered.inverted.list > .item:before {
+  color: @orderedInvertedCountColor;
+}
+
+/* Value */
+.ui.ordered.list > .list > .item[data-value],
+.ui.ordered.list > .item[data-value] {
+  content: attr(data-value);
+}
+ol.ui.list li[value]:before {
+  content: attr(value);
+}
+
+/* Child Lists */
+ol.ui.list ol,
+.ui.ordered.list .list {
+  margin-left: @orderedChildCountDistance;
+}
+ol.ui.list ol li:before,
+.ui.ordered.list .list > .item:before {
+  margin-left: @orderedChildCountOffset;
+}
+
+/* Horizontal Ordered */
+ol.ui.horizontal.list,
+.ui.ordered.horizontal.list {
+  margin-left: 0em;
+}
+ol.ui.horizontal.list li:before,
+.ui.ordered.horizontal.list .list > .item:before,
+.ui.ordered.horizontal.list > .item:before {
+  position: static;
+  margin: 0em @horizontalOrderedCountDistance 0em 0em;
+}
+
+/*-------------------
+       Divided
+--------------------*/
+
+.ui.divided.list > .item {
+  border-top: @dividedBorder;
+}
+.ui.divided.list .list > .item {
+  border-top: @dividedChildListBorder;
+}
+.ui.divided.list .item .list > .item {
+  border-top: @dividedChildItemBorder;
+}
+.ui.divided.list .list > .item:first-child,
+.ui.divided.list > .item:first-child {
+  border-top: none;
+}
+
+/* Sub Menu */
+.ui.divided.list:not(.horizontal) .list > .item:first-child {
+  border-top-width: @dividedBorderWidth;
+}
+
+/* Divided bulleted */
+.ui.divided.bulleted.list:not(.horizontal),
+.ui.divided.bulleted.list .list {
+  margin-left: 0em;
+  padding-left: 0em;
+}
+.ui.divided.bulleted.list > .item:not(.horizontal) {
+  padding-left: @bulletDistance;
+}
+
+/* Divided Ordered */
+.ui.divided.ordered.list {
+  margin-left: 0em;
+}
+.ui.divided.ordered.list .list > .item,
+.ui.divided.ordered.list > .item {
+  padding-left: @orderedCountDistance;
+}
+.ui.divided.ordered.list .item .list {
+  margin-left: 0em;
+  margin-right: 0em;
+  padding-bottom: @itemVerticalPadding;
+}
+.ui.divided.ordered.list .item .list > .item {
+  padding-left: @orderedChildCountDistance;
+}
+
+/* Divided Selection */
+.ui.divided.selection.list .list > .item,
+.ui.divided.selection.list > .item {
+  margin: 0em;
+  border-radius: 0em;
+}
+
+/* Divided horizontal */
+.ui.divided.horizontal.list {
+  margin-left: 0em;
+}
+.ui.divided.horizontal.list > .item:not(:first-child) {
+  padding-left: @horizontalDividedSpacing;
+}
+.ui.divided.horizontal.list > .item:not(:last-child) {
+  padding-right: @horizontalDividedSpacing;
+}
+.ui.divided.horizontal.list > .item {
+  border-top: none;
+  border-left: @dividedBorder;
+  margin: 0em;
+  line-height: @horizontalDividedLineHeight;
+}
+.ui.horizontal.divided.list > .item:first-child {
+  border-left: none;
+}
+/* Inverted */
+.ui.divided.inverted.list > .item,
+.ui.divided.inverted.list > .list,
+.ui.divided.inverted.horizontal.list > .item {
+  border-color: @dividedInvertedBorderColor;
+}
+
+
+/*-------------------
+        Celled
+--------------------*/
+
+.ui.celled.list > .item,
+.ui.celled.list > .list {
+  border-top: @celledBorder;
+  padding-left: @celledHorizontalPadding;
+  padding-right: @celledHorizontalPadding;
+}
+.ui.celled.list > .item:last-child {
+  border-bottom: @celledBorder;
+}
+
+/* Padding on all elements */
+.ui.celled.list > .item:first-child,
+.ui.celled.list > .item:last-child {
+  padding-top: @itemVerticalPadding;
+  padding-bottom: @itemVerticalPadding;
+}
+
+/* Sub Menu */
+.ui.celled.list .item .list > .item {
+  border-width: 0px;
+}
+.ui.celled.list .list > .item:first-child {
+  border-top-width: 0px;
+}
+
+/* Celled Bulleted */
+.ui.celled.bulleted.list {
+  margin-left: 0em;
+}
+.ui.celled.bulleted.list .list > .item,
+.ui.celled.bulleted.list > .item {
+  padding-left: (@bulletDistance);
+}
+.ui.celled.bulleted.list .item .list {
+  margin-left: -(@bulletDistance);
+  margin-right: -(@bulletDistance);
+  padding-bottom: @itemVerticalPadding;
+}
+
+/* Celled Ordered */
+.ui.celled.ordered.list {
+  margin-left: 0em;
+}
+.ui.celled.ordered.list .list > .item,
+.ui.celled.ordered.list > .item {
+  padding-left: @orderedCountDistance;
+}
+.ui.celled.ordered.list .item .list {
+  margin-left: 0em;
+  margin-right: 0em;
+  padding-bottom: @itemVerticalPadding;
+}
+.ui.celled.ordered.list .list > .item {
+  padding-left: @orderedChildCountDistance;
+}
+
+/* Celled Horizontal */
+.ui.horizontal.celled.list {
+  margin-left: 0em;
+}
+.ui.horizontal.celled.list .list > .item,
+.ui.horizontal.celled.list > .item {
+  border-top: none;
+  border-left: @celledBorder;
+  margin: 0em;
+  padding-left: @horizontalCelledSpacing;
+  padding-right: @horizontalCelledSpacing;
+
+  line-height: @horizontalCelledLineHeight;
+}
+.ui.horizontal.celled.list .list > .item:last-child,
+.ui.horizontal.celled.list > .item:last-child {
+  border-bottom: none;
+  border-right: @celledBorder;
+}
+
+/* Inverted */
+.ui.celled.inverted.list > .item,
+.ui.celled.inverted.list > .list {
+  border-color: @celledInvertedBorder;
+}
+.ui.celled.inverted.horizontal.list .list > .item,
+.ui.celled.inverted.horizontal.list > .item {
+  border-color: @celledInvertedBorder;
+}
+
+/*-------------------
+       Relaxed
+--------------------*/
+
+.ui.relaxed.list:not(.horizontal) > .item:not(:first-child) {
+  padding-top: @relaxedItemVerticalPadding;
+}
+.ui.relaxed.list:not(.horizontal) > .item:not(:last-child) {
+  padding-bottom: @relaxedItemVerticalPadding;
+}
+.ui.horizontal.relaxed.list .list > .item:not(:first-child),
+.ui.horizontal.relaxed.list > .item:not(:first-child) {
+  padding-left: @relaxedHorizontalPadding;
+}
+.ui.horizontal.relaxed.list .list > .item:not(:last-child),
+.ui.horizontal.relaxed.list > .item:not(:last-child) {
+  padding-right: @relaxedHorizontalPadding;
+}
+
+/* Very Relaxed */
+.ui[class*="very relaxed"].list:not(.horizontal) > .item:not(:first-child) {
+  padding-top: @veryRelaxedItemVerticalPadding;
+}
+.ui[class*="very relaxed"].list:not(.horizontal) > .item:not(:last-child) {
+  padding-bottom: @veryRelaxedItemVerticalPadding;
+}
+.ui.horizontal[class*="very relaxed"].list .list > .item:not(:first-child),
+.ui.horizontal[class*="very relaxed"].list > .item:not(:first-child) {
+  padding-left: @veryRelaxedHorizontalPadding;
+}
+.ui.horizontal[class*="very relaxed"].list .list > .item:not(:last-child),
+.ui.horizontal[class*="very relaxed"].list > .item:not(:last-child) {
+  padding-right: @veryRelaxedHorizontalPadding;
+}
+
+/*-------------------
+      Sizes
+--------------------*/
+
+.ui.mini.list {
+  font-size: @relativeMini;
+}
+.ui.tiny.list {
+  font-size: @relativeTiny;
+}
+.ui.small.list {
+  font-size: @relativeSmall;
+}
+.ui.list {
+  font-size: @relativeMedium;
+}
+.ui.large.list {
+  font-size: @relativeLarge;
+}
+.ui.big.list {
+  font-size: @relativeBig;
+}
+.ui.huge.list {
+  font-size: @relativeHuge;
+}
+.ui.massive.list {
+  font-size: @relativeMassive;
+}
+
+.ui.mini.horizontal.list .list > .item,
+.ui.mini.horizontal.list > .item {
+  font-size: @mini;
+}
+.ui.tiny.horizontal.list .list > .item,
+.ui.tiny.horizontal.list > .item {
+  font-size: @tiny;
+}
+.ui.small.horizontal.list .list > .item,
+.ui.small.horizontal.list > .item {
+  font-size: @small;
+}
+.ui.horizontal.list .list > .item,
+.ui.horizontal.list > .item {
+  font-size: @medium;
+}
+.ui.large.horizontal.list .list > .item,
+.ui.large.horizontal.list > .item {
+  font-size: @large;
+}
+.ui.big.horizontal.list .list > .item,
+.ui.big.horizontal.list > .item {
+  font-size: @big;
+}
+.ui.huge.horizontal.list .list > .item,
+.ui.huge.horizontal.list > .item {
+  font-size: @huge;
+}
+.ui.massive.horizontal.list .list > .item,
+.ui.massive.horizontal.list > .item {
+  font-size: @massive;
+}
+
+.loadUIOverrides();
+

client/semantic/src/definitions/elements/loader.less

@@ -0,0 +1,331 @@
+/*!
+ * # Semantic UI - Loader
+ * http://github.com/semantic-org/semantic-ui/
+ *
+ *
+ * Released under the MIT license
+ * http://opensource.org/licenses/MIT
+ *
+ */
+/*******************************
+            Theme
+*******************************/
+
+@type    : 'element';
+@element : 'loader';
+
+@import (multiple) '../../theme.config';
+
+/*******************************
+            Loader
+*******************************/
+
+
+/* Standard Size */
+.ui.loader {
+  display: none;
+  position: absolute;
+  top: @loaderTopOffset;
+  left: @loaderLeftOffset;
+  margin: 0px;
+  text-align: center;
+  z-index: 1000;
+  transform: translateX(-50%) translateY(-50%);
+}
+
+/* Static Shape */
+.ui.loader:before {
+  position: absolute;
+  content: '';
+  top: 0%;
+  left: 50%;
+  width: 100%;
+  height: 100%;
+
+  border-radius: @circularRadius;
+  border: @loaderLineWidth solid @loaderFillColor;
+}
+
+/* Active Shape */
+.ui.loader:after {
+  position: absolute;
+  content: '';
+  top: 0%;
+  left: 50%;
+  width: 100%;
+  height: 100%;
+
+  animation: loader @loaderSpeed linear;
+  animation-iteration-count: infinite;
+
+  border-radius: @circularRadius;
+
+  border-color: @shapeBorderColor;
+  border-style: solid;
+  border-width: @loaderLineWidth;
+
+  box-shadow: 0px 0px 0px 1px transparent;
+}
+
+/* Active Animation */
+@keyframes loader {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* Sizes */
+.ui.mini.loader:before,
+.ui.mini.loader:after {
+  width: @mini;
+  height: @mini;
+  margin: @miniOffset;
+}
+.ui.tiny.loader:before,
+.ui.tiny.loader:after {
+  width: @tiny;
+  height: @tiny;
+  margin: @tinyOffset;
+}
+.ui.small.loader:before,
+.ui.small.loader:after {
+  width: @small;
+  height: @small;
+  margin: @smallOffset;
+}
+.ui.loader:before,
+.ui.loader:after {
+  width: @medium;
+  height: @medium;
+  margin: @mediumOffset;
+}
+.ui.large.loader:before,
+.ui.large.loader:after {
+  width: @large;
+  height: @large;
+  margin: @largeOffset;
+}
+.ui.big.loader:before,
+.ui.big.loader:after {
+  width: @big;
+  height: @big;
+  margin: @bigOffset;
+}
+.ui.huge.loader:before,
+.ui.huge.loader:after {
+  width: @huge;
+  height: @huge;
+  margin: @hugeOffset;
+}
+.ui.massive.loader:before,
+.ui.massive.loader:after {
+  width: @massive;
+  height: @massive;
+  margin: @massiveOffset;
+}
+
+/*-------------------
+      Coupling
+--------------------*/
+
+/* Show inside active dimmer */
+.ui.dimmer .loader {
+  display: block;
+}
+
+/* Black Dimmer */
+.ui.dimmer .ui.loader {
+  color: @invertedLoaderTextColor;
+}
+.ui.dimmer .ui.loader:before {
+  border-color: @invertedLoaderFillColor;
+}
+.ui.dimmer .ui.loader:after {
+  border-color: @invertedShapeBorderColor;
+}
+
+/* White Dimmer (Inverted) */
+.ui.inverted.dimmer .ui.loader {
+  color: @loaderTextColor;
+}
+.ui.inverted.dimmer .ui.loader:before {
+  border-color: @loaderFillColor;
+}
+.ui.inverted.dimmer .ui.loader:after {
+  border-color: @shapeBorderColor;
+}
+
+/*******************************
+             Types
+*******************************/
+
+/*-------------------
+        Text
+--------------------*/
+
+.ui.text.loader {
+  width: auto !important;
+  height: auto !important;
+  text-align: center;
+  font-style: normal;
+}
+
+
+/*******************************
+            States
+*******************************/
+
+.ui.indeterminate.loader:after {
+  animation-direction: @indeterminateDirection;
+  animation-duration: @indeterminateSpeed;
+}
+
+.ui.loader.active,
+.ui.loader.visible {
+  display: block;
+}
+.ui.loader.disabled,
+.ui.loader.hidden {
+  display: none;
+}
+
+/*******************************
+            Variations
+*******************************/
+
+
+/*-------------------
+        Sizes
+--------------------*/
+
+
+/* Loader */
+.ui.inverted.dimmer .ui.mini.loader,
+.ui.mini.loader {
+  width: @mini;
+  height: @mini;
+  font-size: @miniFontSize;
+}
+.ui.inverted.dimmer .ui.tiny.loader,
+.ui.tiny.loader {
+  width: @tiny;
+  height: @tiny;
+  font-size: @tinyFontSize;
+}
+.ui.inverted.dimmer .ui.small.loader,
+.ui.small.loader {
+  width: @small;
+  height: @small;
+  font-size: @smallFontSize;
+}
+.ui.inverted.dimmer .ui.loader,
+.ui.loader {
+  width: @medium;
+  height: @medium;
+  font-size: @mediumFontSize;
+}
+.ui.inverted.dimmer .ui.large.loader,
+.ui.large.loader {
+  width: @large;
+  height: @large;
+  font-size: @largeFontSize;
+}
+.ui.inverted.dimmer .ui.big.loader,
+.ui.big.loader {
+  width: @big;
+  height: @big;
+  font-size: @bigFontSize;
+}
+.ui.inverted.dimmer .ui.huge.loader,
+.ui.huge.loader {
+  width: @huge;
+  height: @huge;
+  font-size: @hugeFontSize;
+}
+.ui.inverted.dimmer .ui.massive.loader,
+.ui.massive.loader {
+  width: @massive;
+  height: @massive;
+  font-size: @massiveFontSize;
+}
+
+/* Text Loader */
+.ui.mini.text.loader {
+  min-width: @mini;
+  padding-top: (@mini + @textDistance);
+}
+.ui.tiny.text.loader {
+  min-width: @tiny;
+  padding-top: (@tiny + @textDistance);
+}
+.ui.small.text.loader {
+  min-width: @small;
+  padding-top: (@small + @textDistance);
+}
+.ui.text.loader {
+  min-width: @medium;
+  padding-top: (@medium + @textDistance);
+}
+.ui.large.text.loader {
+  min-width: @large;
+  padding-top: (@large + @textDistance);
+}
+.ui.big.text.loader {
+  min-width: @big;
+  padding-top: (@big + @textDistance);
+}
+.ui.huge.text.loader {
+  min-width: @huge;
+  padding-top: (@huge + @textDistance);
+}
+.ui.massive.text.loader {
+  min-width: @massive;
+  padding-top: (@massive + @textDistance);
+}
+
+
+/*-------------------
+       Inverted
+--------------------*/
+
+.ui.inverted.loader {
+  color: @invertedLoaderTextColor
+}
+.ui.inverted.loader:before {
+  border-color: @invertedLoaderFillColor;
+}
+.ui.inverted.loader:after {
+  border-top-color: @invertedLoaderLineColor;
+}
+
+/*-------------------
+       Inline
+--------------------*/
+
+.ui.inline.loader {
+  position: relative;
+  vertical-align: @inlineVerticalAlign;
+  margin: @inlineMargin;
+  left: 0em;
+  top: 0em;
+  transform: none;
+}
+
+.ui.inline.loader.active,
+.ui.inline.loader.visible {
+  display: inline-block;
+}
+
+/* Centered Inline */
+.ui.centered.inline.loader.active,
+.ui.centered.inline.loader.visible {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+
+.loadUIOverrides();

client/semantic/src/definitions/elements/placeholder.less

@@ -0,0 +1,232 @@
+/*!
+ * # Semantic UI - Loader
+ * http://github.com/semantic-org/semantic-ui/
+ *
+ *
+ * Released under the MIT license
+ * http://opensource.org/licenses/MIT
+ *
+ */
+/*******************************
+            Theme
+*******************************/
+
+@type    : 'element';
+@element : 'placeholder';
+
+@import (multiple) '../../theme.config';
+
+/*-------------------
+      Content
+--------------------*/
+
+.ui.placeholder {
+  position: static;
+  overflow: hidden;
+  animation: placeholderShimmer @placeholderLoadingAnimationDuration linear;
+  animation-iteration-count: infinite;
+  background-color: @white;
+  background-image: @placeholderLoadingGradient;
+  background-size: @placeholderLoadingGradientWidth 100%;
+  max-width: @placeholderMaxWidth;
+}
+
+@keyframes placeholderShimmer{
+  0% {
+    background-position: -@placeholderLoadingGradientWidth 0
+  }
+  100% {
+    background-position: @placeholderLoadingGradientWidth 0
+  }
+}
+
+.ui.placeholder + .ui.placeholder {
+  margin-top: @consecutivePlaceholderSpacing;
+}
+.ui.placeholder + .ui.placeholder {
+  animation-delay: @placeholderAnimationInterval;
+}
+.ui.placeholder + .ui.placeholder + .ui.placeholder {
+  animation-delay: (@placeholderAnimationInterval * 2);
+}
+.ui.placeholder + .ui.placeholder + .ui.placeholder + .ui.placeholder {
+  animation-delay: (@placeholderAnimationInterval * 3);
+}
+.ui.placeholder + .ui.placeholder + .ui.placeholder + .ui.placeholder + .ui.placeholder {
+  animation-delay: (@placeholderAnimationInterval * 4);
+}
+
+.ui.placeholder,
+.ui.placeholder > :before,
+.ui.placeholder .image.header:after,
+.ui.placeholder .line,
+.ui.placeholder .line:after {
+  background-color: @white;
+}
+
+/* Image */
+.ui.placeholder .image:not(.header):not(.ui) {
+  height: @placeholderImageHeight;
+}
+.ui.placeholder .square.image:not(.header) {
+  height: 0px;
+  overflow: hidden;
+  /* 1/1 aspect ratio */
+  padding-top: 100%;
+}
+.ui.placeholder .rectangular.image:not(.header) {
+  height: 0px;
+  overflow: hidden;
+  /* 4/3 aspect ratio */
+  padding-top: 75%;
+}
+
+
+/* Lines */
+.ui.placeholder .line {
+  position: relative;
+  height: @placeholderLineMargin;
+}
+.ui.placeholder .line:before,
+.ui.placeholder .line:after {
+  top: 100%;
+  position: absolute;
+  content: '';
+  background-color: inherit;
+}
+.ui.placeholder .line:before {
+  left: 0px;
+}
+.ui.placeholder .line:after {
+  right: 0px;
+}
+
+/* Any Lines */
+.ui.placeholder .line {
+  margin-bottom: @placeholderLineHeight;
+}
+.ui.placeholder .line:before,
+.ui.placeholder .line:after {
+  height: @placeholderLineHeight;
+}
+.ui.placeholder .line:not(:first-child) {
+  margin-top: @placeholderLineHeight;
+}
+
+/* Header Image + 2 Lines */
+.ui.placeholder .header {
+  position: relative;
+  overflow: hidden;
+}
+
+/* Line Outdent */
+.ui.placeholder .line:nth-child(1):after {
+  width: @placeholderLineOneOutdent;
+}
+.ui.placeholder .line:nth-child(2):after {
+  width: @placeholderLineTwoOutdent;
+}
+.ui.placeholder .line:nth-child(3):after {
+  width: @placeholderLineThreeOutdent;
+}
+.ui.placeholder .line:nth-child(4):after {
+  width: @placeholderLineFourOutdent;
+}
+.ui.placeholder .line:nth-child(5):after {
+  width: @placeholderLineFiveOutdent;
+}
+
+/* Header Line 1 & 2*/
+.ui.placeholder .header .line {
+  margin-bottom: @placeholderHeaderLineHeight;
+}
+.ui.placeholder .header .line:before,
+.ui.placeholder .header .line:after {
+  height: @placeholderHeaderLineHeight;
+}
+.ui.placeholder .header .line:not(:first-child) {
+  margin-top: @placeholderHeaderLineHeight;
+}
+.ui.placeholder .header .line:after {
+  width: @placeholderHeaderLineOneOutdent;
+}
+.ui.placeholder .header .line:nth-child(2):after {
+  width: @placeholderHeaderLineTwoOutdent;
+}
+
+/* Image Header */
+.ui.placeholder .image.header .line {
+  margin-left: @placeholderImageWidth;
+}
+.ui.placeholder .image.header .line:before {
+  width: @placeholderImageTextIndent;
+}
+.ui.placeholder .image.header:after {
+  display: block;
+  height: @placeholderLineMargin;
+  content: '';
+  margin-left: @placeholderImageWidth;
+}
+
+/* Spacing */
+.ui.placeholder .image .line:first-child,
+.ui.placeholder .paragraph .line:first-child,
+.ui.placeholder .header .line:first-child {
+  height: 0.01px;
+}
+.ui.placeholder .image:not(:first-child):before,
+.ui.placeholder .paragraph:not(:first-child):before,
+.ui.placeholder .header:not(:first-child):before {
+  height: @placeholderSpacing;
+  content: '';
+  display: block;
+}
+
+/* Inverted Content Loader */
+.ui.inverted.placeholder {
+  background-image: @placeholderInvertedLoadingGradient;
+}
+.ui.inverted.placeholder,
+.ui.inverted.placeholder > :before,
+.ui.inverted.placeholder .image.header:after,
+.ui.inverted.placeholder .line,
+.ui.inverted.placeholder .line:after {
+  background-color: @black;
+}
+
+/*******************************
+            Variations
+*******************************/
+
+
+/*-------------------
+        Sizes
+--------------------*/
+
+.ui.placeholder .full.line.line.line:after {
+  width: @placeholderFullLineOutdent;
+}
+.ui.placeholder .very.long.line.line.line:after {
+  width: @placeholderVeryLongLineOutdent;
+}
+.ui.placeholder .long.line.line.line:after {
+  width: @placeholderLongLineOutdent;
+}
+.ui.placeholder .medium.line.line.line:after {
+  width: @placeholderMediumLineOutdent;
+}
+.ui.placeholder .short.line.line.line:after {
+  width: @placeholderShortLineOutdent;
+}
+.ui.placeholder .very.short.line.line.line:after {
+  width: @placeholderVeryShortLineOutdent;
+}
+
+
+/*-------------------
+        Fluid
+--------------------*/
+
+.ui.fluid.placeholder {
+  max-width: none;
+}

client/semantic/src/definitions/elements/rail.less

@@ -0,0 +1,154 @@
+/*!
+ * # Semantic UI - Rail
+ * http://github.com/semantic-org/semantic-ui/
+ *
+ *
+ * Released under the MIT license
+ * http://opensource.org/licenses/MIT
+ *
+ */
+
+/*******************************
+            Theme
+*******************************/
+
+@type    : 'element';
+@element : 'rail';
+
+@import (multiple) '../../theme.config';
+
+/*******************************
+             Rails
+*******************************/
+
+.ui.rail {
+  position: absolute;
+  top: 0%;
+  width: @width;
+  height: @height;
+}
+
+.ui.left.rail {
+  left: auto;
+  right: 100%;
+  padding: 0em @splitDistance 0em 0em;
+  margin: 0em @splitDistance 0em 0em;
+}
+
+.ui.right.rail {
+  left: 100%;
+  right: auto;
+  padding: 0em 0em 0em @splitDistance;
+  margin: 0em 0em 0em @splitDistance;
+}
+
+/*******************************
+           Variations
+*******************************/
+
+/*--------------
+     Internal
+---------------*/
+
+.ui.left.internal.rail {
+  left: 0%;
+  right: auto;
+  padding: 0em 0em 0em @splitDistance;
+  margin: 0em 0em 0em @splitDistance;
+}
+
+.ui.right.internal.rail {
+  left: auto;
+  right: 0%;
+  padding: 0em @splitDistance 0em 0em;
+  margin: 0em @splitDistance 0em 0em;
+}
+
+
+/*--------------
+    Dividing
+---------------*/
+
+.ui.dividing.rail {
+  width: @dividingWidth;
+}
+.ui.left.dividing.rail {
+  padding: 0em @splitDividingDistance 0em 0em;
+  margin: 0em @splitDividingDistance 0em 0em;
+  border-right: @dividingBorder;
+}
+.ui.right.dividing.rail {
+  border-left: @dividingBorder;
+  padding: 0em 0em 0em @splitDividingDistance;
+  margin: 0em 0em 0em @splitDividingDistance;
+}
+
+/*--------------
+    Distance
+---------------*/
+
+.ui.close.rail {
+  width: @closeWidth;
+}
+.ui.close.left.rail {
+  padding: 0em @splitCloseDistance 0em 0em;
+  margin: 0em @splitCloseDistance 0em 0em;
+}
+.ui.close.right.rail {
+  padding: 0em 0em 0em @splitCloseDistance;
+  margin: 0em 0em 0em @splitCloseDistance;
+}
+
+.ui.very.close.rail {
+  width: @veryCloseWidth;
+}
+.ui.very.close.left.rail {
+  padding: 0em @splitVeryCloseDistance 0em 0em;
+  margin: 0em @splitVeryCloseDistance 0em 0em;
+}
+.ui.very.close.right.rail {
+  padding: 0em 0em 0em @splitVeryCloseDistance;
+  margin: 0em 0em 0em @splitVeryCloseDistance;
+}
+
+/*--------------
+    Attached
+---------------*/
+
+.ui.attached.left.rail,
+.ui.attached.right.rail {
+  padding: 0em;
+  margin: 0em;
+}
+
+/*--------------
+     Sizing
+---------------*/
+
+.ui.mini.rail {
+  font-size: @mini;
+}
+.ui.tiny.rail {
+  font-size: @tiny;
+}
+.ui.small.rail {
+  font-size: @small;
+}
+.ui.rail {
+  font-size: @medium;
+}
+.ui.large.rail {
+  font-size: @large;
+}
+.ui.big.rail {
+  font-size: @big;
+}
+.ui.huge.rail {
+  font-size: @huge;
+}
+.ui.massive.rail {
+  font-size: @massive;
+}
+
+
+.loadUIOverrides();

client/semantic/src/definitions/elements/reveal.less

@@ -0,0 +1,275 @@
+/*!
+ * # Semantic UI - Reveal
+ * http://github.com/semantic-org/semantic-ui/
+ *
+ *
+ * Released under the MIT license
+ * http://opensource.org/licenses/MIT
+ *
+ */
+
+/*******************************
+            Theme
+*******************************/
+
+@type    : 'element';
+@element : 'reveal';
+
+@import (multiple) '../../theme.config';
+
+/*******************************
+            Reveal
+*******************************/
+
+.ui.reveal  {
+  display: inherit;
+  position: relative !important;
+  font-size: 0em !important;
+}
+
+.ui.reveal > .visible.content {
+  position: absolute !important;
+  top: 0em !important;
+  left: 0em !important;
+  z-index: @topZIndex !important;
+  transition: @transition;
+}
+.ui.reveal > .hidden.content {
+  position: relative !important;
+  z-index: @bottomZIndex !important;
+}
+
+/* Make sure hovered element is on top of other reveal */
+.ui.active.reveal .visible.content,
+.ui.reveal:hover .visible.content {
+  z-index: @activeZIndex !important;
+}
+
+
+/*******************************
+              Types
+*******************************/
+
+
+/*--------------
+      Slide
+---------------*/
+
+.ui.slide.reveal {
+  position: relative !important;
+  overflow: hidden !important;
+  white-space: nowrap;
+}
+
+.ui.slide.reveal > .content {
+  display: block;
+  width: 100%;
+  white-space: normal;
+  float: left;
+
+  margin: 0em;
+  transition: @slideTransition;
+}
+
+.ui.slide.reveal > .visible.content {
+  position: relative !important;
+}
+.ui.slide.reveal > .hidden.content {
+  position: absolute !important;
+  left: 0% !important;
+  width: 100% !important;
+  transform: translateX(100%) !important;
+}
+.ui.slide.active.reveal > .visible.content,
+.ui.slide.reveal:hover > .visible.content {
+  transform: translateX(-100%) !important;
+}
+.ui.slide.active.reveal > .hidden.content,
+.ui.slide.reveal:hover > .hidden.content {
+  transform: translateX(0%) !important;
+}
+
+.ui.slide.right.reveal > .visible.content {
+  transform: translateX(0%) !important;
+}
+.ui.slide.right.reveal > .hidden.content {
+  transform: translateX(-100%) !important;
+}
+.ui.slide.right.active.reveal > .visible.content,
+.ui.slide.right.reveal:hover > .visible.content {
+  transform: translateX(100%) !important;
+}
+.ui.slide.right.active.reveal > .hidden.content,
+.ui.slide.right.reveal:hover > .hidden.content {
+  transform: translateX(0%) !important;
+}
+
+.ui.slide.up.reveal > .hidden.content {
+  transform: translateY(100%) !important;
+}
+.ui.slide.up.active.reveal > .visible.content,
+.ui.slide.up.reveal:hover > .visible.content {
+  transform: translateY(-100%) !important;
+}
+.ui.slide.up.active.reveal > .hidden.content,
+.ui.slide.up.reveal:hover > .hidden.content {
+  transform: translateY(0%) !important;
+}
+
+.ui.slide.down.reveal > .hidden.content {
+  transform: translateY(-100%) !important;
+}
+.ui.slide.down.active.reveal > .visible.content,
+.ui.slide.down.reveal:hover > .visible.content {
+  transform: translateY(100%) !important;
+}
+.ui.slide.down.active.reveal > .hidden.content,
+.ui.slide.down.reveal:hover > .hidden.content {
+  transform: translateY(0%) !important;
+}
+
+
+/*--------------
+      Fade
+---------------*/
+
+.ui.fade.reveal > .visible.content {
+  opacity: 1;
+}
+.ui.fade.active.reveal > .visible.content,
+.ui.fade.reveal:hover > .visible.content {
+  opacity: 0;
+}
+
+
+/*--------------
+      Move
+---------------*/
+
+.ui.move.reveal {
+  position: relative !important;
+  overflow: hidden !important;
+  white-space: nowrap;
+}
+
+.ui.move.reveal > .content {
+  display: block;
+  float: left;
+  white-space: normal;
+
+  margin: 0em;
+  transition: @moveTransition;
+}
+
+.ui.move.reveal > .visible.content {
+  position: relative !important;
+}
+.ui.move.reveal > .hidden.content {
+  position: absolute !important;
+  left: 0% !important;
+  width: 100% !important;
+}
+.ui.move.active.reveal > .visible.content,
+.ui.move.reveal:hover > .visible.content {
+  transform: translateX(-100%) !important;
+}
+.ui.move.right.active.reveal > .visible.content,
+.ui.move.right.reveal:hover > .visible.content {
+  transform: translateX(100%) !important;
+}
+.ui.move.up.active.reveal > .visible.content,
+.ui.move.up.reveal:hover > .visible.content {
+  transform: translateY(-100%) !important;
+}
+.ui.move.down.active.reveal > .visible.content,
+.ui.move.down.reveal:hover > .visible.content {
+  transform: translateY(100%) !important;
+}
+
+
+
+/*--------------
+     Rotate
+---------------*/
+
+.ui.rotate.reveal > .visible.content {
+  transition-duration: @transitionDuration;
+  transform: rotate(0deg);
+}
+
+.ui.rotate.reveal > .visible.content,
+.ui.rotate.right.reveal > .visible.content {
+  transform-origin: bottom right;
+}
+.ui.rotate.active.reveal > .visible.content,
+.ui.rotate.reveal:hover > .visible.content,
+.ui.rotate.right.active.reveal > .visible.content,
+.ui.rotate.right.reveal:hover > .visible.content {
+  transform: rotate(@rotateDegrees);
+}
+
+.ui.rotate.left.reveal > .visible.content {
+  transform-origin: bottom left;
+}
+.ui.rotate.left.active.reveal > .visible.content,
+.ui.rotate.left.reveal:hover > .visible.content {
+  transform: rotate(-@rotateDegrees);
+}
+
+/*******************************
+              States
+*******************************/
+
+.ui.disabled.reveal:hover > .visible.visible.content {
+  position: static !important;
+  display: block !important;
+  opacity: 1 !important;
+  top: 0 !important;
+  left: 0 !important;
+  right: auto !important;
+  bottom: auto !important;
+  transform: none !important;
+}
+.ui.disabled.reveal:hover > .hidden.hidden.content {
+  display: none !important;
+}
+
+
+/*******************************
+           Coupling
+*******************************/
+
+.ui.reveal > .ui.ribbon.label {
+  z-index: @overlayZIndex;
+}
+
+/*******************************
+           Variations
+*******************************/
+
+/*--------------
+     Visible
+---------------*/
+
+.ui.visible.reveal {
+  overflow: visible;
+}
+
+/*--------------
+     Instant
+---------------*/
+
+.ui.instant.reveal > .content {
+  transition-delay: 0s !important;
+}
+
+
+/*--------------
+     Sizing
+---------------*/
+
+.ui.reveal > .content {
+  font-size: @medium !important;
+}
+
+.loadUIOverrides();

client/semantic/src/definitions/elements/segment.less

@@ -0,0 +1,829 @@
+/*!
+ * # Semantic UI - Segment
+ * http://github.com/semantic-org/semantic-ui/
+ *
+ *
+ * Released under the MIT license
+ * http://opensource.org/licenses/MIT
+ *
+ */
+
+/*******************************
+            Theme
+*******************************/
+
+@type    : 'element';
+@element : 'segment';
+
+@import (multiple) '../../theme.config';
+
+/*******************************
+            Segment
+*******************************/
+
+.ui.segment {
+  position: relative;
+  background: @background;
+  box-shadow: @boxShadow;
+  margin: @margin;
+  padding: @padding;
+  border-radius: @borderRadius;
+  border: @border;
+}
+
+.ui.segment:first-child {
+  margin-top: 0em;
+}
+.ui.segment:last-child {
+  margin-bottom: 0em;
+}
+
+
+/* Vertical */
+.ui.vertical.segment {
+  margin: 0em;
+  padding-left: 0em;
+  padding-right: 0em;
+
+  background: none transparent;
+  border-radius: 0px;
+  box-shadow: none;
+  border: none;
+  border-bottom: @borderWidth solid @borderColor;
+}
+.ui.vertical.segment:last-child {
+  border-bottom: none;
+}
+
+
+/*-------------------
+    Loose Coupling
+--------------------*/
+
+/* Header */
+.ui.inverted.segment > .ui.header {
+  color: @white;
+}
+
+/* Label */
+.ui[class*="bottom attached"].segment > [class*="top attached"].label {
+  border-top-left-radius: 0em;
+  border-top-right-radius: 0em;
+}
+.ui[class*="top attached"].segment > [class*="bottom attached"].label {
+  border-bottom-left-radius: 0em;
+  border-bottom-right-radius: 0em;
+}
+.ui.attached.segment:not(.top):not(.bottom) > [class*="top attached"].label {
+  border-top-left-radius: 0em;
+  border-top-right-radius: 0em;
+}
+.ui.attached.segment:not(.top):not(.bottom) > [class*="bottom attached"].label {
+  border-bottom-left-radius: 0em;
+  border-bottom-right-radius: 0em;
+}
+
+/* Grid */
+.ui.page.grid.segment,
+.ui.grid > .row > .ui.segment.column,
+.ui.grid > .ui.segment.column {
+  padding-top: @pageGridMargin;
+  padding-bottom: @pageGridMargin;
+}
+.ui.grid.segment {
+  margin: @margin;
+  border-radius: @borderRadius;
+}
+
+/* Table */
+.ui.basic.table.segment {
+  background: @background;
+  border: @border;
+  box-shadow: @boxShadow;
+}
+.ui[class*="very basic"].table.segment {
+  padding: @padding;
+}
+
+
+/*******************************
+             Types
+*******************************/
+
+
+/*-------------------
+     Placeholder
+--------------------*/
+
+.ui.placeholder.segment {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: stretch;
+  max-width: initial;
+  animation: none;
+  overflow: visible;
+  padding: @placeholderPadding;
+  min-height: @placeholderMinHeight;
+  background: @placeholderBackground;
+  border-color: @placeholderBorderColor;
+  box-shadow: @placeholderBoxShadow;
+}
+
+.ui.placeholder.segment .button,
+.ui.placeholder.segment textarea {
+  display: block;
+}
+.ui.placeholder.segment .field,
+.ui.placeholder.segment textarea,
+.ui.placeholder.segment > .ui.input,
+.ui.placeholder.segment .button {
+  max-width: @placeholderContentMaxWidth;
+  margin-left: auto;
+  margin-right: auto;
+}
+.ui.placeholder.segment .column .button,
+.ui.placeholder.segment .column .field,
+.ui.placeholder.segment .column textarea,
+.ui.placeholder.segment .column > .ui.input {
+  max-width: @placeholderContentMaxWidth;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.ui.placeholder.segment > .inline  {
+  align-self: center;
+}
+.ui.placeholder.segment > .inline > .button {
+  display: inline-block;
+  width: auto;
+  margin: @placeholderContentInlineButtonMargin;
+}
+.ui.placeholder.segment > .inline > .button:last-child {
+  margin-right: 0px;
+}
+
+
+/*-------------------
+        Piled
+--------------------*/
+
+.ui.piled.segments,
+.ui.piled.segment {
+  margin: @piledMargin 0em;
+  box-shadow: @piledBoxShadow;
+  z-index: @piledZIndex;
+}
+.ui.piled.segment:first-child {
+  margin-top: 0em;
+}
+.ui.piled.segment:last-child {
+  margin-bottom: 0em;
+}
+.ui.piled.segments:after,
+.ui.piled.segments:before,
+.ui.piled.segment:after,
+.ui.piled.segment:before {
+  background-color: @white;
+  visibility: visible;
+  content: '';
+  display: block;
+  height: 100%;
+  left: 0px;
+  position: absolute;
+  width: 100%;
+  border: @piledBorder;
+  box-shadow: @piledBoxShadow;
+}
+.ui.piled.segments:before,
+.ui.piled.segment:before {
+  transform: rotate(-@piledDegrees);
+  top: 0;
+  z-index: -2;
+}
+.ui.piled.segments:after,
+.ui.piled.segment:after {
+  transform: rotate(@piledDegrees);
+  top: 0;
+  z-index: -1;
+}
+
+/* Piled Attached */
+.ui[class*="top attached"].piled.segment {
+  margin-top: @piledMargin;
+  margin-bottom: 0em;
+}
+.ui.piled.segment[class*="top attached"]:first-child {
+  margin-top: 0em;
+}
+.ui.piled.segment[class*="bottom attached"] {
+  margin-top: 0em;
+  margin-bottom: @piledMargin;
+}
+.ui.piled.segment[class*="bottom attached"]:last-child {
+  margin-bottom: 0em;
+}
+
+/*-------------------
+       Stacked
+--------------------*/
+
+.ui.stacked.segment {
+  padding-bottom: @stackedPadding;
+}
+.ui.stacked.segments:before,
+.ui.stacked.segments:after,
+.ui.stacked.segment:before,
+.ui.stacked.segment:after {
+  content: '';
+  position: absolute;
+  bottom: -(@stackedHeight / 2);
+  left: 0%;
+
+  border-top: 1px solid @borderColor;
+  background: @stackedPageBackground;
+
+  width: 100%;
+  height: @stackedHeight;
+  visibility: visible;
+}
+.ui.stacked.segments:before,
+.ui.stacked.segment:before {
+  display: none;
+}
+
+/* Add additional page */
+.ui.tall.stacked.segments:before,
+.ui.tall.stacked.segment:before {
+  display: block;
+  bottom: 0px;
+}
+
+/* Inverted */
+.ui.stacked.inverted.segments:before,
+.ui.stacked.inverted.segments:after,
+.ui.stacked.inverted.segment:before,
+.ui.stacked.inverted.segment:after {
+  background-color: @subtleTransparentBlack;
+  border-top: 1px solid @selectedBorderColor;
+}
+
+/*-------------------
+       Padded
+--------------------*/
+
+.ui.padded.segment {
+  padding: @paddedSegmentPadding;
+}
+
+.ui[class*="very padded"].segment {
+  padding: @veryPaddedSegmentPadding;
+}
+
+/* Padded vertical */
+.ui.padded.segment.vertical.segment,
+.ui[class*="very padded"].vertical.segment {
+  padding-left: 0px;
+  padding-right: 0px;
+}
+
+/*-------------------
+       Compact
+--------------------*/
+
+.ui.compact.segment {
+  display: table;
+}
+
+/* Compact Group */
+.ui.compact.segments {
+  display: inline-flex;
+}
+.ui.compact.segments .segment,
+.ui.segments .compact.segment {
+  display: block;
+  flex: 0 1 auto;
+}
+
+/*-------------------
+       Circular
+--------------------*/
+
+.ui.circular.segment {
+  display: table-cell;
+  padding: @circularPadding;
+  text-align: center;
+  vertical-align: middle;
+  border-radius: 500em;
+}
+
+/*-------------------
+       Raised
+--------------------*/
+
+.ui.raised.segments,
+.ui.raised.segment {
+  box-shadow: @raisedBoxShadow;
+}
+
+
+/*******************************
+            Groups
+*******************************/
+
+/* Group */
+.ui.segments {
+  flex-direction: column;
+  position: relative;
+  margin: @groupedMargin;
+  border: @groupedBorder;
+  box-shadow: @groupedBoxShadow;
+  border-radius: @groupedBorderRadius;
+}
+.ui.segments:first-child {
+  margin-top: 0em;
+}
+.ui.segments:last-child {
+  margin-bottom: 0em;
+}
+
+
+/* Nested Segment */
+.ui.segments > .segment {
+  top: 0px;
+  bottom: 0px;
+  border-radius: 0px;
+  margin: @groupedSegmentMargin;
+  width: @groupedSegmentWidth;
+  box-shadow: @groupedSegmentBoxShadow;
+  border: @groupedSegmentBorder;
+  border-top: @groupedSegmentDivider;
+}
+
+.ui.segments:not(.horizontal) > .segment:first-child {
+  top: @attachedTopOffset;
+  bottom: 0px;
+  border-top: none;
+  margin-top: 0em;
+  bottom: 0px;
+  margin-bottom: 0em;
+  top: @attachedTopOffset;
+  border-radius: @borderRadius @borderRadius 0em 0em;
+}
+
+/* Bottom */
+.ui.segments:not(.horizontal) > .segment:last-child {
+  top: @attachedBottomOffset;
+  bottom: 0px;
+  margin-top: 0em;
+  margin-bottom: 0em;
+  box-shadow: @attachedBottomBoxShadow;
+  border-radius: 0em 0em @borderRadius @borderRadius;
+}
+
+/* Only */
+.ui.segments:not(.horizontal) > .segment:only-child {
+  border-radius: @borderRadius;
+}
+
+
+/* Nested Group */
+.ui.segments > .ui.segments {
+  border-top: @groupedSegmentDivider;
+  margin: @nestedGroupMargin;
+}
+.ui.segments > .segments:first-child {
+  border-top: none;
+}
+.ui.segments > .segment + .segments:not(.horizontal) {
+  margin-top: 0em;
+}
+
+/* Horizontal Group */
+.ui.horizontal.segments {
+  display: flex;
+  flex-direction: row;
+  background-color: transparent;
+  border-radius: 0px;
+  padding: 0em;
+  background-color: @background;
+  box-shadow: @boxShadow;
+  margin: @margin;
+  border-radius: @borderRadius;
+  border: @border;
+}
+
+/* Nested Horizontal Group */
+.ui.segments > .horizontal.segments {
+  margin: 0em;
+  background-color: transparent;
+  border-radius: 0px;
+  border: none;
+  box-shadow: none;
+  border-top: @groupedSegmentDivider;
+}
+
+/* Horizontal Segment */
+.ui.horizontal.segments > .segment {
+  flex: 1 1 auto;
+  -ms-flex: 1 1 0px; /* Solves #2550 MS Flex */
+  margin: 0em;
+  min-width: 0px;
+  background-color: transparent;
+  border-radius: 0px;
+  border: none;
+  box-shadow: none;
+  border-left: @borderWidth solid @borderColor;
+}
+
+/* Border Fixes */
+.ui.segments > .horizontal.segments:first-child {
+  border-top: none;
+}
+.ui.horizontal.segments > .segment:first-child {
+  border-left: none;
+}
+
+
+/*******************************
+            States
+*******************************/
+
+/*--------------
+    Disabled
+---------------*/
+
+.ui.disabled.segment {
+  opacity: @disabledOpacity;
+  color: @disabledTextColor;
+}
+
+/*--------------
+    Loading
+---------------*/
+
+.ui.loading.segment {
+  position: relative;
+  cursor: default;
+  pointer-events: none;
+  text-shadow: none !important;
+  color: transparent !important;
+  transition: all 0s linear;
+}
+.ui.loading.segment:before {
+  position: absolute;
+  content: '';
+  top: 0%;
+  left: 0%;
+  background: @loaderDimmerColor;
+  width: 100%;
+  height: 100%;
+  border-radius: @borderRadius;
+  z-index: @loaderDimmerZIndex;
+}
+.ui.loading.segment:after {
+  position: absolute;
+  content: '';
+  top: 50%;
+  left: 50%;
+
+  margin: @loaderMargin;
+  width: @loaderSize;
+  height: @loaderSize;
+
+  animation: segment-spin @loaderSpeed linear;
+  animation-iteration-count: infinite;
+
+  border-radius: @circularRadius;
+
+  border-color: @loaderLineColor @loaderFillColor @loaderFillColor @loaderFillColor;
+  border-style: solid;
+  border-width: @loaderLineWidth;
+
+  box-shadow: 0px 0px 0px 1px transparent;
+  visibility: visible;
+  z-index: @loaderLineZIndex;
+}
+
+@keyframes segment-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+
+/*******************************
+           Variations
+*******************************/
+
+
+/*-------------------
+       Basic
+--------------------*/
+
+.ui.basic.segment {
+  background: @basicBackground;
+  box-shadow: @basicBoxShadow;
+  border: @basicBorder;
+  border-radius: @basicBorderRadius;
+}
+
+/*-------------------
+       Clearing
+--------------------*/
+
+.ui.clearing.segment:after {
+  content: ".";
+  display: block;
+  height: 0;
+  clear: both;
+  visibility: hidden;
+}
+
+/*-------------------
+       Colors
+--------------------*/
+
+/* Red */
+.ui.red.segment:not(.inverted) {
+  border-top: @coloredBorderSize solid @red !important;
+}
+.ui.inverted.red.segment {
+  background-color: @red !important;
+  color: @white !important;
+}
+
+/* Orange */
+.ui.orange.segment:not(.inverted) {
+  border-top: @coloredBorderSize solid @orange !important;
+}
+.ui.inverted.orange.segment {
+  background-color: @orange !important;
+  color: @white !important;
+}
+
+/* Yellow */
+.ui.yellow.segment:not(.inverted) {
+  border-top: @coloredBorderSize solid @yellow !important;
+}
+.ui.inverted.yellow.segment {
+  background-color: @yellow !important;
+  color: @white !important;
+}
+
+/* Olive */
+.ui.olive.segment:not(.inverted) {
+  border-top: @coloredBorderSize solid @olive !important;
+}
+.ui.inverted.olive.segment {
+  background-color: @olive !important;
+  color: @white !important;
+}
+
+/* Green */
+.ui.green.segment:not(.inverted) {
+  border-top: @coloredBorderSize solid @green !important;
+}
+.ui.inverted.green.segment {
+  background-color: @green !important;
+  color: @white !important;
+}
+
+/* Teal */
+.ui.teal.segment:not(.inverted) {
+  border-top: @coloredBorderSize solid @teal !important;
+}
+.ui.inverted.teal.segment {
+  background-color: @teal !important;
+  color: @white !important;
+}
+
+/* Blue */
+.ui.blue.segment:not(.inverted) {
+  border-top: @coloredBorderSize solid @blue !important;
+}
+.ui.inverted.blue.segment {
+  background-color: @blue !important;
+  color: @white !important;
+}
+
+/* Violet */
+.ui.violet.segment:not(.inverted) {
+  border-top: @coloredBorderSize solid @violet !important;
+}
+.ui.inverted.violet.segment {
+  background-color: @violet !important;
+  color: @white !important;
+}
+
+/* Purple */
+.ui.purple.segment:not(.inverted) {
+  border-top: @coloredBorderSize solid @purple !important;
+}
+.ui.inverted.purple.segment {
+  background-color: @purple !important;
+  color: @white !important;
+}
+
+/* Pink */
+.ui.pink.segment:not(.inverted) {
+  border-top: @coloredBorderSize solid @pink !important;
+}
+.ui.inverted.pink.segment {
+  background-color: @pink !important;
+  color: @white !important;
+}
+
+/* Brown */
+.ui.brown.segment:not(.inverted) {
+  border-top: @coloredBorderSize solid @brown !important;
+}
+.ui.inverted.brown.segment {
+  background-color: @brown !important;
+  color: @white !important;
+}
+
+/* Grey */
+.ui.grey.segment:not(.inverted) {
+  border-top: @coloredBorderSize solid @grey !important;
+}
+.ui.inverted.grey.segment {
+  background-color: @grey !important;
+  color: @white !important;
+}
+
+/* Black */
+.ui.black.segment:not(.inverted) {
+  border-top: @coloredBorderSize solid @black !important;
+}
+.ui.inverted.black.segment {
+  background-color: @black !important;
+  color: @white !important;
+}
+
+/*-------------------
+       Aligned
+--------------------*/
+
+.ui[class*="left aligned"].segment {
+  text-align: left;
+}
+.ui[class*="right aligned"].segment {
+  text-align: right;
+}
+.ui[class*="center aligned"].segment {
+  text-align: center;
+}
+
+/*-------------------
+       Floated
+--------------------*/
+
+.ui.floated.segment,
+.ui[class*="left floated"].segment {
+  float: left;
+  margin-right: @floatedDistance;
+}
+.ui[class*="right floated"].segment {
+  float: right;
+  margin-left: @floatedDistance;
+}
+
+
+/*-------------------
+      Inverted
+--------------------*/
+
+.ui.inverted.segment {
+  border: none;
+  box-shadow: none;
+}
+.ui.inverted.segment,
+.ui.primary.inverted.segment {
+  background: @invertedBackground;
+  color: @invertedTextColor;
+}
+
+/* Nested */
+.ui.inverted.segment .segment {
+  color: @textColor;
+}
+.ui.inverted.segment .inverted.segment {
+  color: @invertedTextColor;
+}
+
+/* Attached */
+.ui.inverted.attached.segment {
+  border-color: @solidWhiteBorderColor;
+}
+
+/*-------------------
+     Emphasis
+--------------------*/
+
+/* Secondary */
+.ui.secondary.segment {
+  background: @secondaryBackground;
+  color: @secondaryColor;
+}
+.ui.secondary.inverted.segment {
+  background: @secondaryInvertedBackground;
+  color: @secondaryInvertedColor;
+}
+
+/* Tertiary */
+.ui.tertiary.segment {
+  background: @tertiaryBackground;
+  color: @tertiaryColor;
+}
+.ui.tertiary.inverted.segment {
+  background: @tertiaryInvertedBackground;
+  color: @tertiaryInvertedColor;
+}
+
+
+/*-------------------
+      Attached
+--------------------*/
+
+/* Middle */
+.ui.attached.segment {
+  top: 0px;
+  bottom: 0px;
+  border-radius: 0px;
+  margin: 0em @attachedHorizontalOffset;
+  width: @attachedWidth;
+  max-width: @attachedWidth;
+  box-shadow: @attachedBoxShadow;
+  border: @attachedBorder;
+}
+.ui.attached:not(.message) + .ui.attached.segment:not(.top) {
+  border-top: none;
+}
+
+/* Top */
+.ui[class*="top attached"].segment {
+  bottom: 0px;
+  margin-bottom: 0em;
+  top: @attachedTopOffset;
+  margin-top: @verticalMargin;
+  border-radius: @borderRadius @borderRadius 0em 0em;
+}
+.ui.segment[class*="top attached"]:first-child {
+  margin-top: 0em;
+}
+
+/* Bottom */
+.ui.segment[class*="bottom attached"] {
+  bottom: 0px;
+  margin-top: 0em;
+  top: @attachedBottomOffset;
+  margin-bottom: @verticalMargin;
+  box-shadow: @attachedBottomBoxShadow;
+  border-radius: 0em 0em @borderRadius @borderRadius;
+}
+.ui.segment[class*="bottom attached"]:last-child {
+  margin-bottom: 0em;
+}
+
+/*-------------------
+        Size
+--------------------*/
+
+.ui.mini.segments .segment,
+.ui.mini.segment {
+  font-size: @mini;
+}
+.ui.tiny.segments .segment,
+.ui.tiny.segment {
+  font-size: @tiny;
+}
+.ui.small.segments .segment,
+.ui.small.segment {
+  font-size: @small;
+}
+.ui.segments .segment,
+.ui.segment {
+  font-size: @medium;
+}
+.ui.large.segments .segment,
+.ui.large.segment {
+  font-size: @large;
+}
+.ui.big.segments .segment,
+.ui.big.segment {
+  font-size: @big;
+}
+.ui.huge.segments .segment,
+.ui.huge.segment {
+  font-size: @huge;
+}
+.ui.massive.segments .segment,
+.ui.massive.segment {
+  font-size: @massive;
+}
+
+.loadUIOverrides();

client/semantic/src/definitions/elements/step.less

@@ -0,0 +1,562 @@
+/*!
+ * # Semantic UI - Step
+ * http://github.com/semantic-org/semantic-ui/
+ *
+ *
+ * Released under the MIT license
+ * http://opensource.org/licenses/MIT
+ *
+ */
+
+
+/*******************************
+             Step
+*******************************/
+
+/*--------------
+   Load Theme
+---------------*/
+
+@type    : 'element';
+@element : 'step';
+
+@import (multiple) '../../theme.config';
+
+/*******************************
+            Plural
+*******************************/
+
+.ui.steps {
+  display: inline-flex;
+  flex-direction: row;
+  align-items: stretch;
+  margin: @stepMargin;
+  background: @stepsBackground;
+  box-shadow: @stepsBoxShadow;
+  line-height: @lineHeight;
+  border-radius: @stepsBorderRadius;
+  border: @stepsBorder;
+}
+
+/* First Steps */
+.ui.steps:first-child {
+  margin-top: 0em;
+}
+
+/* Last Steps */
+.ui.steps:last-child {
+  margin-bottom: 0em;
+}
+
+
+/*******************************
+           Singular
+*******************************/
+
+.ui.steps .step {
+  position: relative;
+  display: flex;
+  flex: 1 0 auto;
+  flex-wrap: wrap;
+  flex-direction: row;
+  vertical-align: middle;
+  align-items: center;
+  justify-content: @justifyContent;
+
+  margin: @verticalMargin @horizontalMargin;
+  padding: @verticalPadding @horizontalPadding;
+  background: @background;
+  color: @textColor;
+  box-shadow: @boxShadow;
+  border-radius: @borderRadius;
+  border: @border;
+  border-right: @divider;
+  transition: @transition;
+}
+
+/* Arrow */
+.ui.steps .step:after {
+  display: none;
+  position: absolute;
+  z-index: 2;
+  content: '';
+  top: @arrowTopOffset;
+  right: @arrowRightOffset;
+  border: medium none;
+  background-color: @arrowBackgroundColor;
+  width: @arrowSize;
+  height: @arrowSize;
+
+  border-style: solid;
+  border-color: @borderColor;
+  border-width: @arrowBorderWidth;
+
+  transition: @transition;
+  transform: translateY(-50%) translateX(50%) rotate(-45deg);
+}
+
+/* First Step */
+.ui.steps .step:first-child {
+  padding-left: @horizontalPadding;
+  border-radius: @stepsBorderRadius 0em 0em @stepsBorderRadius;
+}
+
+/* Last Step */
+.ui.steps .step:last-child {
+  border-radius: 0em @stepsBorderRadius @stepsBorderRadius 0em;
+}
+.ui.steps .step:last-child {
+  border-right: none;
+  margin-right: 0em;
+}
+
+/* Only Step */
+.ui.steps .step:only-child {
+  border-radius: @stepsBorderRadius;
+}
+
+
+/*******************************
+            Content
+*******************************/
+
+/* Title */
+.ui.steps .step .title {
+  font-family: @titleFontFamily;
+  font-size: @titleFontSize;
+  font-weight: @titleFontWeight;
+}
+.ui.steps .step > .title {
+  width: 100%;
+}
+
+/* Description */
+.ui.steps .step .description {
+  font-weight: @descriptionFontWeight;
+  font-size: @descriptionFontSize;
+  color: @descriptionColor;
+}
+.ui.steps .step > .description {
+  width: 100%;
+}
+.ui.steps .step .title ~ .description {
+  margin-top: @descriptionDistance;
+}
+
+/* Icon */
+.ui.steps .step > .icon {
+  line-height: 1;
+  font-size: @iconSize;
+  margin: 0em @iconDistance 0em 0em;
+}
+.ui.steps .step > .icon,
+.ui.steps .step > .icon ~ .content {
+  display: block;
+  flex: 0 1 auto;
+  align-self: @iconAlign;
+}
+.ui.steps .step > .icon ~ .content {
+  flex-grow: 1 0 auto;
+}
+
+/* Horizontal Icon */
+.ui.steps:not(.vertical) .step > .icon {
+  width: auto;
+}
+
+/* Link */
+.ui.steps .link.step,
+.ui.steps a.step {
+  cursor: pointer;
+}
+
+/*******************************
+            Types
+*******************************/
+
+/*--------------
+     Ordered
+---------------*/
+
+.ui.ordered.steps {
+  counter-reset: ordered;
+}
+.ui.ordered.steps .step:before {
+  display: block;
+  position: static;
+  text-align: center;
+  content: counters(ordered, ".");
+  align-self: @iconAlign;
+  margin-right: @iconDistance;
+  font-size: @iconSize;
+  counter-increment: ordered;
+  font-family: @orderedFontFamily;
+  font-weight: @orderedFontWeight;
+}
+
+.ui.ordered.steps .step > * {
+  display: block;
+  align-self: @iconAlign;
+}
+
+
+/*--------------
+    Vertical
+---------------*/
+
+.ui.vertical.steps {
+  display: inline-flex;
+  flex-direction: column;
+  overflow: visible;
+}
+.ui.vertical.steps .step {
+  justify-content: flex-start;
+  border-radius: @borderRadius;
+  padding: @verticalPadding @horizontalPadding;
+  border-right: none;
+  border-bottom: @verticalDivider;
+}
+.ui.vertical.steps .step:first-child {
+  padding: @verticalPadding @horizontalPadding;
+  border-radius: @stepsBorderRadius @stepsBorderRadius 0em 0em;
+}
+.ui.vertical.steps .step:last-child {
+  border-bottom: none;
+  border-radius: 0em 0em @stepsBorderRadius @stepsBorderRadius;
+}
+.ui.vertical.steps .step:only-child {
+  border-radius: @stepsBorderRadius;
+}
+
+
+/* Arrow */
+.ui.vertical.steps .step:after {
+  display: none;
+}
+.ui.vertical.steps .step:after {
+  top: @verticalArrowTopOffset;
+  right: @verticalArrowRightOffset;
+  border-width: @verticalArrowBorderWidth;
+}
+
+.ui.vertical.steps .step:after {
+  display: @verticalArrowDisplay;
+}
+.ui.vertical.steps .active.step:after {
+  display: @verticalActiveArrowDisplay;
+}
+.ui.vertical.steps .step:last-child:after {
+  display: @verticalLastArrowDisplay;
+}
+.ui.vertical.steps .active.step:last-child:after {
+  display: @verticalActiveLastArrowDisplay;
+}
+
+
+/*---------------
+    Responsive
+----------------*/
+
+/* Mobile (Default) */
+@media only screen and (max-width: (@largestMobileScreen)) {
+
+  .ui.steps:not(.unstackable) {
+    display: inline-flex;
+    overflow: visible;
+    flex-direction: column;
+  }
+  .ui.steps:not(.unstackable) .step {
+    width: 100% !important;
+    flex-direction: column;
+    border-radius: @borderRadius;
+    padding: @verticalPadding @horizontalPadding;
+  }
+  .ui.steps:not(.unstackable) .step:first-child {
+    padding: @verticalPadding @horizontalPadding;
+    border-radius: @stepsBorderRadius @stepsBorderRadius 0em 0em;
+  }
+  .ui.steps:not(.unstackable) .step:last-child {
+    border-radius: 0em 0em @stepsBorderRadius @stepsBorderRadius;
+  }
+
+  /* Arrow */
+  .ui.steps:not(.unstackable) .step:after {
+    display: none !important;
+  }
+
+  /* Content */
+  .ui.steps:not(.unstackable) .step .content {
+    text-align: center;
+  }
+
+  /* Icon */
+  .ui.steps:not(.unstackable) .step > .icon,
+  .ui.ordered.steps:not(.unstackable) .step:before {
+    margin: 0em 0em @mobileIconDistance 0em;
+  }
+
+}
+
+/*******************************
+             States
+*******************************/
+
+/* Link Hover */
+.ui.steps .link.step:hover::after,
+.ui.steps .link.step:hover,
+.ui.steps a.step:hover::after,
+.ui.steps a.step:hover {
+  background: @hoverBackground;
+  color: @hoverColor;
+}
+
+/* Link Down */
+.ui.steps .link.step:active::after,
+.ui.steps .link.step:active,
+.ui.steps a.step:active::after,
+.ui.steps a.step:active {
+  background: @downBackground;
+  color: @downColor;
+}
+
+/* Active */
+.ui.steps .step.active {
+  cursor: auto;
+  background: @activeBackground;
+}
+.ui.steps .step.active:after {
+  background: @activeBackground;
+}
+.ui.steps .step.active .title {
+  color: @activeColor;
+}
+.ui.ordered.steps .step.active:before,
+.ui.steps .active.step .icon {
+  color: @activeIconColor;
+}
+
+/* Active Arrow */
+.ui.steps .step:after {
+  display: @arrowDisplay;
+}
+.ui.steps .active.step:after {
+  display: @activeArrowDisplay;
+}
+.ui.steps .step:last-child:after {
+  display: @lastArrowDisplay;
+}
+.ui.steps .active.step:last-child:after {
+  display: @activeLastArrowDisplay;
+}
+
+/* Active Hover */
+.ui.steps .link.active.step:hover::after,
+.ui.steps .link.active.step:hover,
+.ui.steps a.active.step:hover::after,
+.ui.steps a.active.step:hover {
+  cursor: pointer;
+  background: @activeHoverBackground;
+  color: @activeHoverColor;
+}
+
+/* Completed */
+.ui.steps .step.completed > .icon:before,
+.ui.ordered.steps .step.completed:before {
+  color: @completedColor;
+}
+
+/* Disabled */
+.ui.steps .disabled.step {
+  cursor: auto;
+  background: @disabledBackground;
+  pointer-events: none;
+}
+.ui.steps .disabled.step,
+.ui.steps .disabled.step .title,
+.ui.steps .disabled.step .description {
+  color: @disabledColor;
+}
+.ui.steps .disabled.step:after {
+  background: @disabledBackground;
+}
+
+
+/*******************************
+           Variations
+*******************************/
+
+
+/*--------------
+   Stackable
+---------------*/
+
+/* Tablet Or Below */
+@media only screen and (max-width: @largestTabletScreen) {
+
+.ui[class*="tablet stackable"].steps {
+  display: inline-flex;
+  overflow: visible;
+  flex-direction: column;
+}
+
+/* Steps */
+.ui[class*="tablet stackable"].steps .step {
+  flex-direction: column;
+  border-radius: @borderRadius;
+  padding: @verticalPadding @horizontalPadding;
+}
+.ui[class*="tablet stackable"].steps .step:first-child {
+  padding: @verticalPadding @horizontalPadding;
+  border-radius: @stepsBorderRadius @stepsBorderRadius 0em 0em;
+}
+.ui[class*="tablet stackable"].steps .step:last-child {
+  border-radius: 0em 0em @stepsBorderRadius @stepsBorderRadius;
+}
+
+/* Arrow */
+.ui[class*="tablet stackable"].steps .step:after {
+  display: none !important;
+}
+
+/* Content */
+.ui[class*="tablet stackable"].steps .step .content {
+  text-align: center;
+}
+
+/* Icon */
+.ui[class*="tablet stackable"].steps .step > .icon,
+.ui[class*="tablet stackable"].ordered.steps .step:before {
+  margin: 0em 0em @mobileIconDistance 0em;
+}
+
+}
+
+/*--------------
+      Fluid
+---------------*/
+
+/* Fluid */
+.ui.fluid.steps {
+  display: flex;
+  width: 100%;
+}
+
+/*--------------
+    Attached
+---------------*/
+
+/* Top */
+.ui.attached.steps {
+  width: @attachedWidth !important;
+  margin: 0em @attachedHorizontalOffset @attachedVerticalOffset;
+  max-width: @attachedWidth;
+  border-radius: @stepsBorderRadius @stepsBorderRadius 0em 0em;
+}
+.ui.attached.steps .step:first-child {
+  border-radius: @stepsBorderRadius 0em 0em 0em;
+}
+.ui.attached.steps .step:last-child {
+  border-radius: 0em @stepsBorderRadius 0em 0em;
+}
+
+/* Bottom */
+.ui.bottom.attached.steps {
+  margin: @attachedVerticalOffset @attachedHorizontalOffset 0em;
+  border-radius: 0em 0em @stepsBorderRadius @stepsBorderRadius;
+}
+.ui.bottom.attached.steps .step:first-child {
+  border-radius: 0em 0em 0em @stepsBorderRadius;
+}
+.ui.bottom.attached.steps .step:last-child {
+  border-radius: 0em 0em @stepsBorderRadius 0em;
+}
+
+/*-------------------
+    Evenly Divided
+--------------------*/
+
+.ui.one.steps,
+.ui.two.steps,
+.ui.three.steps,
+.ui.four.steps,
+.ui.five.steps,
+.ui.six.steps,
+.ui.seven.steps,
+.ui.eight.steps {
+  width: 100%;
+}
+.ui.one.steps > .step,
+.ui.two.steps > .step,
+.ui.three.steps > .step,
+.ui.four.steps > .step,
+.ui.five.steps > .step,
+.ui.six.steps > .step,
+.ui.seven.steps > .step,
+.ui.eight.steps > .step {
+  flex-wrap: nowrap;
+}
+.ui.one.steps > .step {
+  width: 100%;
+}
+.ui.two.steps > .step {
+  width: 50%;
+}
+.ui.three.steps > .step {
+  width: 33.333%;
+}
+.ui.four.steps > .step {
+  width: 25%;
+}
+.ui.five.steps > .step {
+  width: 20%;
+}
+.ui.six.steps > .step {
+  width: 16.666%;
+}
+.ui.seven.steps > .step {
+  width: 14.285%;
+}
+.ui.eight.steps > .step {
+  width: 12.500%;
+}
+
+/*-------------------
+       Sizes
+--------------------*/
+
+
+.ui.mini.steps .step,
+.ui.mini.step {
+  font-size: @mini;
+}
+.ui.tiny.steps .step,
+.ui.tiny.step {
+  font-size: @tiny;
+}
+.ui.small.steps .step,
+.ui.small.step {
+  font-size: @small;
+}
+.ui.steps .step,
+.ui.step {
+  font-size: @medium;
+}
+.ui.large.steps .step,
+.ui.large.step {
+  font-size: @large;
+}
+.ui.big.steps .step,
+.ui.big.step {
+  font-size: @big;
+}
+.ui.huge.steps .step,
+.ui.huge.step {
+  font-size: @huge;
+}
+.ui.massive.steps .step,
+.ui.massive.step {
+  font-size: @massive;
+}
+
+
+.loadUIOverrides();

client/semantic/src/definitions/globals/reset.less

@@ -0,0 +1,40 @@
+/*!
+ * # Semantic UI - Reset
+ * http://github.com/semantic-org/semantic-ui/
+ *
+ *
+ * Released under the MIT license
+ * http://opensource.org/licenses/MIT
+ *
+ */
+
+/*******************************
+            Theme
+*******************************/
+
+@type    : 'global';
+@element : 'reset';
+
+@import (multiple) '../../theme.config';
+
+/*******************************
+             Reset
+*******************************/
+
+/* Border-Box */
+*,
+*:before,
+*:after {
+  box-sizing: inherit;
+}
+html {
+  box-sizing: border-box;
+}
+
+/* iPad Input Shadows */
+input[type="text"], input[type="email"], input[type="search"], input[type="password"] {
+  -webkit-appearance: none;
+  -moz-appearance: none; /* mobile firefox too! */
+}
+
+.loadUIOverrides();

client/semantic/src/definitions/globals/site.js

@@ -0,0 +1,487 @@
+/*!
+ * # Semantic UI - Site
+ * http://github.com/semantic-org/semantic-ui/
+ *
+ *
+ * Released under the MIT license
+ * http://opensource.org/licenses/MIT
+ *
+ */
+
+;(function ($, window, document, undefined) {
+
+$.site = $.fn.site = function(parameters) {
+  var
+    time           = new Date().getTime(),
+    performance    = [],
+
+    query          = arguments[0],
+    methodInvoked  = (typeof query == 'string'),
+    queryArguments = [].slice.call(arguments, 1),
+
+    settings        = ( $.isPlainObject(parameters) )
+      ? $.extend(true, {}, $.site.settings, parameters)
+      : $.extend({}, $.site.settings),
+
+    namespace       = settings.namespace,
+    error           = settings.error,
+
+    eventNamespace  = '.' + namespace,
+    moduleNamespace = 'module-' + namespace,
+
+    $document       = $(document),
+    $module         = $document,
+    element         = this,
+    instance        = $module.data(moduleNamespace),
+
+    module,
+    returnedValue
+  ;
+  module = {
+
+    initialize: function() {
+      module.instantiate();
+    },
+
+    instantiate: function() {
+      module.verbose('Storing instance of site', module);
+      instance = module;
+      $module
+        .data(moduleNamespace, module)
+      ;
+    },
+
+    normalize: function() {
+      module.fix.console();
+      module.fix.requestAnimationFrame();
+    },
+
+    fix: {
+      console: function() {
+        module.debug('Normalizing window.console');
+        if (console === undefined || console.log === undefined) {
+          module.verbose('Console not available, normalizing events');
+          module.disable.console();
+        }
+        if (typeof console.group == 'undefined' || typeof console.groupEnd == 'undefined' || typeof console.groupCollapsed == 'undefined') {
+          module.verbose('Console group not available, normalizing events');
+          window.console.group = function() {};
+          window.console.groupEnd = function() {};
+          window.console.groupCollapsed = function() {};
+        }
+        if (typeof console.markTimeline == 'undefined') {
+          module.verbose('Mark timeline not available, normalizing events');
+          window.console.markTimeline = function() {};
+        }
+      },
+      consoleClear: function() {
+        module.debug('Disabling programmatic console clearing');
+        window.console.clear = function() {};
+      },
+      requestAnimationFrame: function() {
+        module.debug('Normalizing requestAnimationFrame');
+        if(window.requestAnimationFrame === undefined) {
+          module.debug('RequestAnimationFrame not available, normalizing event');
+          window.requestAnimationFrame = window.requestAnimationFrame
+            || window.mozRequestAnimationFrame
+            || window.webkitRequestAnimationFrame
+            || window.msRequestAnimationFrame
+            || function(callback) { setTimeout(callback, 0); }
+          ;
+        }
+      }
+    },
+
+    moduleExists: function(name) {
+      return ($.fn[name] !== undefined && $.fn[name].settings !== undefined);
+    },
+
+    enabled: {
+      modules: function(modules) {
+        var
+          enabledModules = []
+        ;
+        modules = modules || settings.modules;
+        $.each(modules, function(index, name) {
+          if(module.moduleExists(name)) {
+            enabledModules.push(name);
+          }
+        });
+        return enabledModules;
+      }
+    },
+
+    disabled: {
+      modules: function(modules) {
+        var
+          disabledModules = []
+        ;
+        modules = modules || settings.modules;
+        $.each(modules, function(index, name) {
+          if(!module.moduleExists(name)) {
+            disabledModules.push(name);
+          }
+        });
+        return disabledModules;
+      }
+    },
+
+    change: {
+      setting: function(setting, value, modules, modifyExisting) {
+        modules = (typeof modules === 'string')
+          ? (modules === 'all')
+            ? settings.modules
+            : [modules]
+          : modules || settings.modules
+        ;
+        modifyExisting = (modifyExisting !== undefined)
+          ? modifyExisting
+          : true
+        ;
+        $.each(modules, function(index, name) {
+          var
+            namespace = (module.moduleExists(name))
+              ? $.fn[name].settings.namespace || false
+              : true,
+            $existingModules
+          ;
+          if(module.moduleExists(name)) {
+            module.verbose('Changing default setting', setting, value, name);
+            $.fn[name].settings[setting] = value;
+            if(modifyExisting && namespace) {
+              $existingModules = $(':data(module-' + namespace + ')');
+              if($existingModules.length > 0) {
+                module.verbose('Modifying existing settings', $existingModules);
+                $existingModules[name]('setting', setting, value);
+              }
+            }
+          }
+        });
+      },
+      settings: function(newSettings, modules, modifyExisting) {
+        modules = (typeof modules === 'string')
+          ? [modules]
+          : modules || settings.modules
+        ;
+        modifyExisting = (modifyExisting !== undefined)
+          ? modifyExisting
+          : true
+        ;
+        $.each(modules, function(index, name) {
+          var
+            $existingModules
+          ;
+          if(module.moduleExists(name)) {
+            module.verbose('Changing default setting', newSettings, name);
+            $.extend(true, $.fn[name].settings, newSettings);
+            if(modifyExisting && namespace) {
+              $existingModules = $(':data(module-' + namespace + ')');
+              if($existingModules.length > 0) {
+                module.verbose('Modifying existing settings', $existingModules);
+                $existingModules[name]('setting', newSettings);
+              }
+            }
+          }
+        });
+      }
+    },
+
+    enable: {
+      console: function() {
+        module.console(true);
+      },
+      debug: function(modules, modifyExisting) {
+        modules = modules || settings.modules;
+        module.debug('Enabling debug for modules', modules);
+        module.change.setting('debug', true, modules, modifyExisting);
+      },
+      verbose: function(modules, modifyExisting) {
+        modules = modules || settings.modules;
+        module.debug('Enabling verbose debug for modules', modules);
+        module.change.setting('verbose', true, modules, modifyExisting);
+      }
+    },
+    disable: {
+      console: function() {
+        module.console(false);
+      },
+      debug: function(modules, modifyExisting) {
+        modules = modules || settings.modules;
+        module.debug('Disabling debug for modules', modules);
+        module.change.setting('debug', false, modules, modifyExisting);
+      },
+      verbose: function(modules, modifyExisting) {
+        modules = modules || settings.modules;
+        module.debug('Disabling verbose debug for modules', modules);
+        module.change.setting('verbose', false, modules, modifyExisting);
+      }
+    },
+
+    console: function(enable) {
+      if(enable) {
+        if(instance.cache.console === undefined) {
+          module.error(error.console);
+          return;
+        }
+        module.debug('Restoring console function');
+        window.console = instance.cache.console;
+      }
+      else {
+        module.debug('Disabling console function');
+        instance.cache.console = window.console;
+        window.console = {
+          clear          : function(){},
+          error          : function(){},
+          group          : function(){},
+          groupCollapsed : function(){},
+          groupEnd       : function(){},
+          info           : function(){},
+          log            : function(){},
+          markTimeline   : function(){},
+          warn           : function(){}
+        };
+      }
+    },
+
+    destroy: function() {
+      module.verbose('Destroying previous site for', $module);
+      $module
+        .removeData(moduleNamespace)
+      ;
+    },
+
+    cache: {},
+
+    setting: function(name, value) {
+      if( $.isPlainObject(name) ) {
+        $.extend(true, settings, name);
+      }
+      else if(value !== undefined) {
+        settings[name] = value;
+      }
+      else {
+        return settings[name];
+      }
+    },
+    internal: function(name, value) {
+      if( $.isPlainObject(name) ) {
+        $.extend(true, module, name);
+      }
+      else if(value !== undefined) {
+        module[name] = value;
+      }
+      else {
+        return module[name];
+      }
+    },
+    debug: function() {
+      if(settings.debug) {
+        if(settings.performance) {
+          module.performance.log(arguments);
+        }
+        else {
+          module.debug = Function.prototype.bind.call(console.info, console, settings.name + ':');
+          module.debug.apply(console, arguments);
+        }
+      }
+    },
+    verbose: function() {
+      if(settings.verbose && settings.debug) {
+        if(settings.performance) {
+          module.performance.log(arguments);
+        }
+        else {
+          module.verbose = Function.prototype.bind.call(console.info, console, settings.name + ':');
+          module.verbose.apply(console, arguments);
+        }
+      }
+    },
+    error: function() {
+      module.error = Function.prototype.bind.call(console.error, console, settings.name + ':');
+      module.error.apply(console, arguments);
+    },
+    performance: {
+      log: function(message) {
+        var
+          currentTime,
+          executionTime,
+          previousTime
+        ;
+        if(settings.performance) {
+          currentTime   = new Date().getTime();
+          previousTime  = time || currentTime;
+          executionTime = currentTime - previousTime;
+          time          = currentTime;
+          performance.push({
+            'Element'        : element,
+            'Name'           : message[0],
+            'Arguments'      : [].slice.call(message, 1) || '',
+            'Execution Time' : executionTime
+          });
+        }
+        clearTimeout(module.performance.timer);
+        module.performance.timer = setTimeout(module.performance.display, 500);
+      },
+      display: function() {
+        var
+          title = settings.name + ':',
+          totalTime = 0
+        ;
+        time = false;
+        clearTimeout(module.performance.timer);
+        $.each(performance, function(index, data) {
+          totalTime += data['Execution Time'];
+        });
+        title += ' ' + totalTime + 'ms';
+        if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) {
+          console.groupCollapsed(title);
+          if(console.table) {
+            console.table(performance);
+          }
+          else {
+            $.each(performance, function(index, data) {
+              console.log(data['Name'] + ': ' + data['Execution Time']+'ms');
+            });
+          }
+          console.groupEnd();
+        }
+        performance = [];
+      }
+    },
+    invoke: function(query, passedArguments, context) {
+      var
+        object = instance,
+        maxDepth,
+        found,
+        response
+      ;
+      passedArguments = passedArguments || queryArguments;
+      context         = element         || context;
+      if(typeof query == 'string' && object !== undefined) {
+        query    = query.split(/[\. ]/);
+        maxDepth = query.length - 1;
+        $.each(query, function(depth, value) {
+          var camelCaseValue = (depth != maxDepth)
+            ? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1)
+            : query
+          ;
+          if( $.isPlainObject( object[camelCaseValue] ) && (depth != maxDepth) ) {
+            object = object[camelCaseValue];
+          }
+          else if( object[camelCaseValue] !== undefined ) {
+            found = object[camelCaseValue];
+            return false;
+          }
+          else if( $.isPlainObject( object[value] ) && (depth != maxDepth) ) {
+            object = object[value];
+          }
+          else if( object[value] !== undefined ) {
+            found = object[value];
+            return false;
+          }
+          else {
+            module.error(error.method, query);
+            return false;
+          }
+        });
+      }
+      if ( $.isFunction( found ) ) {
+        response = found.apply(context, passedArguments);
+      }
+      else if(found !== undefined) {
+        response = found;
+      }
+      if($.isArray(returnedValue)) {
+        returnedValue.push(response);
+      }
+      else if(returnedValue !== undefined) {
+        returnedValue = [returnedValue, response];
+      }
+      else if(response !== undefined) {
+        returnedValue = response;
+      }
+      return found;
+    }
+  };
+
+  if(methodInvoked) {
+    if(instance === undefined) {
+      module.initialize();
+    }
+    module.invoke(query);
+  }
+  else {
+    if(instance !== undefined) {
+      module.destroy();
+    }
+    module.initialize();
+  }
+  return (returnedValue !== undefined)
+    ? returnedValue
+    : this
+  ;
+};
+
+$.site.settings = {
+
+  name        : 'Site',
+  namespace   : 'site',
+
+  error : {
+    console : 'Console cannot be restored, most likely it was overwritten outside of module',
+    method : 'The method you called is not defined.'
+  },
+
+  debug       : false,
+  verbose     : false,
+  performance : true,
+
+  modules: [
+    'accordion',
+    'api',
+    'checkbox',
+    'dimmer',
+    'dropdown',
+    'embed',
+    'form',
+    'modal',
+    'nag',
+    'popup',
+    'rating',
+    'shape',
+    'sidebar',
+    'state',
+    'sticky',
+    'tab',
+    'transition',
+    'visit',
+    'visibility'
+  ],
+
+  siteNamespace   : 'site',
+  namespaceStub   : {
+    cache     : {},
+    config    : {},
+    sections  : {},
+    section   : {},
+    utilities : {}
+  }
+
+};
+
+// allows for selection of elements with data attributes
+$.extend($.expr[ ":" ], {
+  data: ($.expr.createPseudo)
+    ? $.expr.createPseudo(function(dataName) {
+        return function(elem) {
+          return !!$.data(elem, dataName);
+        };
+      })
+    : function(elem, i, match) {
+      // support: jQuery < 1.8
+      return !!$.data(elem, match[ 3 ]);
+    }
+});
+
+
+})( jQuery, window, document );

client/semantic/src/definitions/globals/site.less

@@ -0,0 +1,208 @@
+/*!
+ * # Semantic UI - Site
+ * http://github.com/semantic-org/semantic-ui/
+ *
+ *
+ * Released under the MIT license
+ * http://opensource.org/licenses/MIT
+ *
+ */
+
+
+/*******************************
+            Theme
+*******************************/
+
+@type    : 'global';
+@element : 'site';
+
+@import (multiple) '../../theme.config';
+
+/*******************************
+             Page
+*******************************/
+
+.loadFonts();
+
+html,
+body {
+  height: 100%;
+}
+
+html {
+  font-size: @emSize;
+}
+
+body {
+  margin: 0px;
+  padding: 0px;
+  overflow-x: @pageOverflowX;
+  min-width: @pageMinWidth;
+  background: @pageBackground;
+  font-family: @pageFont;
+  font-size: @fontSize;
+  line-height: @lineHeight;
+  color: @textColor;
+  font-smoothing: @fontSmoothing;
+}
+
+/*******************************
+             Headers
+*******************************/
+
+h1,
+h2,
+h3,
+h4,
+h5 {
+  font-family: @headerFont;
+  line-height: @headerLineHeight;
+  margin: @headerMargin;
+  font-weight: @headerFontWeight;
+  padding: 0em;
+}
+
+h1 {
+  min-height: 1rem;
+  font-size: @h1;
+}
+h2 {
+  font-size: @h2;
+}
+h3 {
+  font-size: @h3;
+}
+h4 {
+  font-size: @h4;
+}
+h5 {
+  font-size: @h5;
+}
+
+h1:first-child,
+h2:first-child,
+h3:first-child,
+h4:first-child,
+h5:first-child {
+  margin-top: 0em;
+}
+
+h1:last-child,
+h2:last-child,
+h3:last-child,
+h4:last-child,
+h5:last-child {
+  margin-bottom: 0em;
+}
+
+
+/*******************************
+             Text
+*******************************/
+
+p {
+  margin: @paragraphMargin;
+  line-height: @paragraphLineHeight;
+}
+p:first-child {
+  margin-top: 0em;
+}
+p:last-child {
+  margin-bottom: 0em;
+}
+
+/*-------------------
+        Links
+--------------------*/
+
+a {
+  color: @linkColor;
+  text-decoration: @linkUnderline;
+}
+a:hover {
+  color: @linkHoverColor;
+  text-decoration: @linkHoverUnderline;
+}
+
+
+/*******************************
+         Scrollbars
+*******************************/
+
+.addScrollbars() when (@useCustomScrollbars) {
+
+  /* Force Simple Scrollbars */
+  body ::-webkit-scrollbar {
+    -webkit-appearance: none;
+    width: @customScrollbarWidth;
+    height: @customScrollbarHeight;
+  }
+  body ::-webkit-scrollbar-track {
+    background: @trackBackground;
+    border-radius: @trackBorderRadius;
+  }
+  body ::-webkit-scrollbar-thumb {
+    cursor: pointer;
+    border-radius: @thumbBorderRadius;
+    background: @thumbBackground;
+    transition: @thumbTransition;
+  }
+  body ::-webkit-scrollbar-thumb:window-inactive {
+    background: @thumbInactiveBackground;
+  }
+  body ::-webkit-scrollbar-thumb:hover {
+    background: @thumbHoverBackground;
+  }
+
+  /* Inverted UI */
+  body .ui.inverted::-webkit-scrollbar-track {
+    background: @trackInvertedBackground;
+  }
+  body .ui.inverted::-webkit-scrollbar-thumb {
+    background: @thumbInvertedBackground;
+  }
+  body .ui.inverted::-webkit-scrollbar-thumb:window-inactive {
+    background: @thumbInvertedInactiveBackground;
+  }
+  body .ui.inverted::-webkit-scrollbar-thumb:hover {
+    background: @thumbInvertedHoverBackground;
+  }
+}
+
+/*******************************
+          Highlighting
+*******************************/
+
+/* Site */
+::-webkit-selection {
+  background-color: @highlightBackground;
+  color: @highlightColor;
+}
+::-moz-selection {
+  background-color: @highlightBackground;
+  color: @highlightColor;
+}
+::selection {
+  background-color: @highlightBackground;
+  color: @highlightColor;
+}
+
+/* Form */
+textarea::-webkit-selection,
+input::-webkit-selection {
+  background-color: @inputHighlightBackground;
+  color: @inputHighlightColor;
+}
+textarea::-moz-selection,
+input::-moz-selection {
+  background-color: @inputHighlightBackground;
+  color: @inputHighlightColor;
+}
+textarea::selection,
+input::selection {
+  background-color: @inputHighlightBackground;
+  color: @inputHighlightColor;
+}
+
+.addScrollbars();
+.loadUIOverrides();

client/semantic/src/definitions/modules/accordion.js

@@ -0,0 +1,613 @@
+/*!
+ * # Semantic UI - Accordion
+ * http://github.com/semantic-org/semantic-ui/
+ *
+ *
+ * Released under the MIT license
+ * http://opensource.org/licenses/MIT
+ *
+ */
+
+;(function ($, window, document, undefined) {
+
+'use strict';
+
+window = (typeof window != 'undefined' && window.Math == Math)
+  ? window
+  : (typeof self != 'undefined' && self.Math == Math)
+    ? self
+    : Function('return this')()
+;
+
+$.fn.accordion = function(parameters) {
+  var
+    $allModules     = $(this),
+
+    time            = new Date().getTime(),
+    performance     = [],
+
+    query           = arguments[0],
+    methodInvoked   = (typeof query == 'string'),
+    queryArguments  = [].slice.call(arguments, 1),
+
+    requestAnimationFrame = window.requestAnimationFrame
+      || window.mozRequestAnimationFrame
+      || window.webkitRequestAnimationFrame
+      || window.msRequestAnimationFrame
+      || function(callback) { setTimeout(callback, 0); },
+
+    returnedValue
+  ;
+  $allModules
+    .each(function() {
+      var
+        settings        = ( $.isPlainObject(parameters) )
+          ? $.extend(true, {}, $.fn.accordion.settings, parameters)
+          : $.extend({}, $.fn.accordion.settings),
+
+        className       = settings.className,
+        namespace       = settings.namespace,
+        selector        = settings.selector,
+        error           = settings.error,
+
+        eventNamespace  = '.' + namespace,
+        moduleNamespace = 'module-' + namespace,
+        moduleSelector  = $allModules.selector || '',
+
+        $module  = $(this),
+        $title   = $module.find(selector.title),
+        $content = $module.find(selector.content),
+
+        element  = this,
+        instance = $module.data(moduleNamespace),
+        observer,
+        module
+      ;
+
+      module = {
+
+        initialize: function() {
+          module.debug('Initializing', $module);
+          module.bind.events();
+          if(settings.observeChanges) {
+            module.observeChanges();
+          }
+          module.instantiate();
+        },
+
+        instantiate: function() {
+          instance = module;
+          $module
+            .data(moduleNamespace, module)
+          ;
+        },
+
+        destroy: function() {
+          module.debug('Destroying previous instance', $module);
+          $module
+            .off(eventNamespace)
+            .removeData(moduleNamespace)
+          ;
+        },
+
+        refresh: function() {
+          $title   = $module.find(selector.title);
+          $content = $module.find(selector.content);
+        },
+
+        observeChanges: function() {
+          if('MutationObserver' in window) {
+            observer = new MutationObserver(function(mutations) {
+              module.debug('DOM tree modified, updating selector cache');
+              module.refresh();
+            });
+            observer.observe(element, {
+              childList : true,
+              subtree   : true
+            });
+            module.debug('Setting up mutation observer', observer);
+          }
+        },
+
+        bind: {
+          events: function() {
+            module.debug('Binding delegated events');
+            $module
+              .on(settings.on + eventNamespace, selector.trigger, module.event.click)
+            ;
+          }
+        },
+
+        event: {
+          click: function() {
+            module.toggle.call(this);
+          }
+        },
+
+        toggle: function(query) {
+          var
+            $activeTitle = (query !== undefined)
+              ? (typeof query === 'number')
+                ? $title.eq(query)
+                : $(query).closest(selector.title)
+              : $(this).closest(selector.title),
+            $activeContent = $activeTitle.next($content),
+            isAnimating = $activeContent.hasClass(className.animating),
+            isActive    = $activeContent.hasClass(className.active),
+            isOpen      = (isActive && !isAnimating),
+            isOpening   = (!isActive && isAnimating)
+          ;
+          module.debug('Toggling visibility of content', $activeTitle);
+          if(isOpen || isOpening) {
+            if(settings.collapsible) {
+              module.close.call($activeTitle);
+            }
+            else {
+              module.debug('Cannot close accordion content collapsing is disabled');
+            }
+          }
+          else {
+            module.open.call($activeTitle);
+          }
+        },
+
+        open: function(query) {
+          var
+            $activeTitle = (query !== undefined)
+              ? (typeof query === 'number')
+                ? $title.eq(query)
+                : $(query).closest(selector.title)
+              : $(this).closest(selector.title),
+            $activeContent = $activeTitle.next($content),
+            isAnimating = $activeContent.hasClass(className.animating),
+            isActive    = $activeContent.hasClass(className.active),
+            isOpen      = (isActive || isAnimating)
+          ;
+          if(isOpen) {
+            module.debug('Accordion already open, skipping', $activeContent);
+            return;
+          }
+          module.debug('Opening accordion content', $activeTitle);
+          settings.onOpening.call($activeContent);
+          settings.onChanging.call($activeContent);
+          if(settings.exclusive) {
+            module.closeOthers.call($activeTitle);
+          }
+          $activeTitle
+            .addClass(className.active)
+          ;
+          $activeContent
+            .stop(true, true)
+            .addClass(className.animating)
+          ;
+          if(settings.animateChildren) {
+            if($.fn.transition !== undefined && $module.transition('is supported')) {
+              $activeContent
+                .children()
+                  .transition({
+                    animation   : 'fade in',
+                    queue       : false,
+                    useFailSafe : true,
+                    debug       : settings.debug,
+                    verbose     : settings.verbose,
+                    duration    : settings.duration
+                  })
+              ;
+            }
+            else {
+              $activeContent
+                .children()
+                  .stop(true, true)
+                  .animate({
+                    opacity: 1
+                  }, settings.duration, module.resetOpacity)
+              ;
+            }
+          }
+          $activeContent
+            .slideDown(settings.duration, settings.easing, function() {
+              $activeContent
+                .removeClass(className.animating)
+                .addClass(className.active)
+              ;
+              module.reset.display.call(this);
+              settings.onOpen.call(this);
+              settings.onChange.call(this);
+            })
+          ;
+        },
+
+        close: function(query) {
+          var
+            $activeTitle = (query !== undefined)
+              ? (typeof query === 'number')
+                ? $title.eq(query)
+                : $(query).closest(selector.title)
+              : $(this).closest(selector.title),
+            $activeContent = $activeTitle.next($content),
+            isAnimating    = $activeContent.hasClass(className.animating),
+            isActive       = $activeContent.hasClass(className.active),
+            isOpening      = (!isActive && isAnimating),
+            isClosing      = (isActive && isAnimating)
+          ;
+          if((isActive || isOpening) && !isClosing) {
+            module.debug('Closing accordion content', $activeContent);
+            settings.onClosing.call($activeContent);
+            settings.onChanging.call($activeContent);
+            $activeTitle
+              .removeClass(className.active)
+            ;
+            $activeContent
+              .stop(true, true)
+              .addClass(className.animating)
+            ;
+            if(settings.animateChildren) {
+              if($.fn.transition !== undefined && $module.transition('is supported')) {
+                $activeContent
+                  .children()
+                    .transition({
+                      animation   : 'fade out',
+                      queue       : false,
+                      useFailSafe : true,
+                      debug       : settings.debug,
+                      verbose     : settings.verbose,
+                      duration    : settings.duration
+                    })
+                ;
+              }
+              else {
+                $activeContent
+                  .children()
+                    .stop(true, true)
+                    .animate({
+                      opacity: 0
+                    }, settings.duration, module.resetOpacity)
+                ;
+              }
+            }
+            $activeContent
+              .slideUp(settings.duration, settings.easing, function() {
+                $activeContent
+                  .removeClass(className.animating)
+                  .removeClass(className.active)
+                ;
+                module.reset.display.call(this);
+                settings.onClose.call(this);
+                settings.onChange.call(this);
+              })
+            ;
+          }
+        },
+
+        closeOthers: function(index) {
+          var
+            $activeTitle = (index !== undefined)
+              ? $title.eq(index)
+              : $(this).closest(selector.title),
+            $parentTitles    = $activeTitle.parents(selector.content).prev(selector.title),
+            $activeAccordion = $activeTitle.closest(selector.accordion),
+            activeSelector   = selector.title + '.' + className.active + ':visible',
+            activeContent    = selector.content + '.' + className.active + ':visible',
+            $openTitles,
+            $nestedTitles,
+            $openContents
+          ;
+          if(settings.closeNested) {
+            $openTitles   = $activeAccordion.find(activeSelector).not($parentTitles);
+            $openContents = $openTitles.next($content);
+          }
+          else {
+            $openTitles   = $activeAccordion.find(activeSelector).not($parentTitles);
+            $nestedTitles = $activeAccordion.find(activeContent).find(activeSelector).not($parentTitles);
+            $openTitles   = $openTitles.not($nestedTitles);
+            $openContents = $openTitles.next($content);
+          }
+          if( ($openTitles.length > 0) ) {
+            module.debug('Exclusive enabled, closing other content', $openTitles);
+            $openTitles
+              .removeClass(className.active)
+            ;
+            $openContents
+              .removeClass(className.animating)
+              .stop(true, true)
+            ;
+            if(settings.animateChildren) {
+              if($.fn.transition !== undefined && $module.transition('is supported')) {
+                $openContents
+                  .children()
+                    .transition({
+                      animation   : 'fade out',
+                      useFailSafe : true,
+                      debug       : settings.debug,
+                      verbose     : settings.verbose,
+                      duration    : settings.duration
+                    })
+                ;
+              }
+              else {
+                $openContents
+                  .children()
+                    .stop(true, true)
+                    .animate({
+                      opacity: 0
+                    }, settings.duration, module.resetOpacity)
+                ;
+              }
+            }
+            $openContents
+              .slideUp(settings.duration , settings.easing, function() {
+                $(this).removeClass(className.active);
+                module.reset.display.call(this);
+              })
+            ;
+          }
+        },
+
+        reset: {
+
+          display: function() {
+            module.verbose('Removing inline display from element', this);
+            $(this).css('display', '');
+            if( $(this).attr('style') === '') {
+              $(this)
+                .attr('style', '')
+                .removeAttr('style')
+              ;
+            }
+          },
+
+          opacity: function() {
+            module.verbose('Removing inline opacity from element', this);
+            $(this).css('opacity', '');
+            if( $(this).attr('style') === '') {
+              $(this)
+                .attr('style', '')
+                .removeAttr('style')
+              ;
+            }
+          },
+
+        },
+
+        setting: function(name, value) {
+          module.debug('Changing setting', name, value);
+          if( $.isPlainObject(name) ) {
+            $.extend(true, settings, name);
+          }
+          else if(value !== undefined) {
+            if($.isPlainObject(settings[name])) {
+              $.extend(true, settings[name], value);
+            }
+            else {
+              settings[name] = value;
+            }
+          }
+          else {
+            return settings[name];
+          }
+        },
+        internal: function(name, value) {
+          module.debug('Changing internal', name, value);
+          if(value !== undefined) {
+            if( $.isPlainObject(name) ) {
+              $.extend(true, module, name);
+            }
+            else {
+              module[name] = value;
+            }
+          }
+          else {
+            return module[name];
+          }
+        },
+        debug: function() {
+          if(!settings.silent && settings.debug) {
+            if(settings.performance) {
+              module.performance.log(arguments);
+            }
+            else {
+              module.debug = Function.prototype.bind.call(console.info, console, settings.name + ':');
+              module.debug.apply(console, arguments);
+            }
+          }
+        },
+        verbose: function() {
+          if(!settings.silent && settings.verbose && settings.debug) {
+            if(settings.performance) {
+              module.performance.log(arguments);
+            }
+            else {
+              module.verbose = Function.prototype.bind.call(console.info, console, settings.name + ':');
+              module.verbose.apply(console, arguments);
+            }
+          }
+        },
+        error: function() {
+          if(!settings.silent) {
+            module.error = Function.prototype.bind.call(console.error, console, settings.name + ':');
+            module.error.apply(console, arguments);
+          }
+        },
+        performance: {
+          log: function(message) {
+            var
+              currentTime,
+              executionTime,
+              previousTime
+            ;
+            if(settings.performance) {
+              currentTime   = new Date().getTime();
+              previousTime  = time || currentTime;
+              executionTime = currentTime - previousTime;
+              time          = currentTime;
+              performance.push({
+                'Name'           : message[0],
+                'Arguments'      : [].slice.call(message, 1) || '',
+                'Element'        : element,
+                'Execution Time' : executionTime
+              });
+            }
+            clearTimeout(module.performance.timer);
+            module.performance.timer = setTimeout(module.performance.display, 500);
+          },
+          display: function() {
+            var
+              title = settings.name + ':',
+              totalTime = 0
+            ;
+            time = false;
+            clearTimeout(module.performance.timer);
+            $.each(performance, function(index, data) {
+              totalTime += data['Execution Time'];
+            });
+            title += ' ' + totalTime + 'ms';
+            if(moduleSelector) {
+              title += ' \'' + moduleSelector + '\'';
+            }
+            if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) {
+              console.groupCollapsed(title);
+              if(console.table) {
+                console.table(performance);
+              }
+              else {
+                $.each(performance, function(index, data) {
+                  console.log(data['Name'] + ': ' + data['Execution Time']+'ms');
+                });
+              }
+              console.groupEnd();
+            }
+            performance = [];
+          }
+        },
+        invoke: function(query, passedArguments, context) {
+          var
+            object = instance,
+            maxDepth,
+            found,