commit e7e3d2f209e7ff7039e84972e65b1b4b7756cc5c Author: zhongjin Date: Mon Jul 23 23:06:37 2018 +0800 Initial commit diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..a0f2b01 --- /dev/null +++ b/.gitignore @@ -0,0 +1,2 @@ +/node_modules +/.idea diff --git a/.npmignore b/.npmignore new file mode 100644 index 0000000..7e1b51c --- /dev/null +++ b/.npmignore @@ -0,0 +1,6 @@ +Gruntfile.js +tasks +node_modules +test +.travis.yml +appveyor.yml diff --git a/.travis.yml b/.travis.yml new file mode 100644 index 0000000..c05adf9 --- /dev/null +++ b/.travis.yml @@ -0,0 +1,7 @@ +os: + - linux +language: node_js +node_js: + - '4' + - '8' + - '10' diff --git a/Gruntfile.js b/Gruntfile.js new file mode 100644 index 0000000..aafbd43 --- /dev/null +++ b/Gruntfile.js @@ -0,0 +1,157 @@ +// To use this file in WebStorm, right click on the file name in the Project Panel (normally left) and select "Open Grunt Console" + +/** @namespace __dirname */ +/* jshint -W097 */// jshint strict:false +/*jslint node: true */ +"use strict"; + +module.exports = function (grunt) { + + var srcDir = __dirname + '/'; + var dstDir = srcDir + '.build/'; + var pkg = grunt.file.readJSON('package.json'); + var iopackage = grunt.file.readJSON('io-package.json'); + var version = (pkg && pkg.version) ? pkg.version : iopackage.common.version; + + // Project configuration. + grunt.initConfig({ + pkg: pkg, + replace: { + core: { + options: { + patterns: [ + { + match: /version: *"[\.0-9]*"/, + replacement: 'version: "' + version + '"' + }, + { + match: /"version": *"[\.0-9]*",/g, + replacement: '"version": "' + version + '",' + }, + { + match: /version: *"[\.0-9]*",/g, + replacement: 'version: "' + version + '",' + } + ] + }, + files: [ + { + expand: true, + flatten: true, + src: [ + srcDir + 'package.json', + srcDir + 'io-package.json' + ], + dest: srcDir + }, + { + expand: true, + flatten: true, + src: [ + srcDir + 'widgets/' + pkg.name.substring('yunkong2.vis-'.length) + '.html' + ], + dest: srcDir + 'widgets' + }, + { + expand: true, + flatten: true, + src: [ + srcDir + 'widgets/' + pkg.name.substring('yunkong2.vis-'.length) + '/js/' + pkg.name.substring('yunkong2.vis-'.length) + '.js' + ], + dest: srcDir + 'widgets/' + pkg.name.substring('yunkong2.vis-'.length) + '/js' + } + ] + } + }, + // Javascript code styler + jscs: require(__dirname + '/tasks/jscs.js'), + // Lint + jshint: require(__dirname + '/tasks/jshint.js'), + http: { + get_hjscs: { + options: { + url: 'https://git.spacen.net/yunkong2/yunkong2.js-controller/master/tasks/jscs.js' + }, + dest: 'tasks/jscs.js' + }, + get_jshint: { + options: { + url: 'https://git.spacen.net/yunkong2/yunkong2.js-controller/master/tasks/jshint.js' + }, + dest: 'tasks/jshint.js' + },/* + get_gruntfile: { + options: { + url: 'https://git.spacen.net/yunkong2/yunkong2.build/master/adapters/Gruntfile.js' + }, + dest: 'Gruntfile.js' + }, + get_utilsfile: { + options: { + url: 'https://git.spacen.net/yunkong2/yunkong2.build/master/adapters/utils.js' + }, + dest: 'lib/utils.js' + },*/ + get_jscsRules: { + options: { + url: 'https://git.spacen.net/yunkong2/yunkong2.js-controller/master/tasks/jscsRules.js' + }, + dest: 'tasks/jscsRules.js' + } + } + }); + + grunt.registerTask('updateReadme', function () { + var readme = grunt.file.read('README.md'); + var pos = readme.indexOf('## Changelog'); + if (pos !== -1) { + var readmeStart = readme.substring(0, pos + '## Changelog\n'.length); + var readmeEnd = readme.substring(pos + '## Changelog\n'.length); + + if (readme.indexOf(version) === -1) { + var timestamp = new Date(); + var date = timestamp.getFullYear() + '-' + + ("0" + (timestamp.getMonth() + 1).toString(10)).slice(-2) + '-' + + ("0" + (timestamp.getDate()).toString(10)).slice(-2); + + var news = ""; + if (iopackage.common.whatsNew) { + for (var i = 0; i < iopackage.common.whatsNew.length; i++) { + if (typeof iopackage.common.whatsNew[i] === 'string') { + news += '* ' + iopackage.common.whatsNew[i] + '\n'; + } else { + news += '* ' + iopackage.common.whatsNew[i].en + '\n'; + } + } + } + + grunt.file.write('README.md', readmeStart + '### ' + version + ' (' + date + ')\n' + (news ? news + '\n\n' : '\n') + readmeEnd); + } + } + }); + + grunt.loadNpmTasks('grunt-replace'); + grunt.loadNpmTasks('grunt-contrib-jshint'); + grunt.loadNpmTasks('grunt-jscs'); + grunt.loadNpmTasks('grunt-http'); + + grunt.registerTask('default', [ + 'exec', + 'http', + 'clean', + 'replace', + 'updateReadme', + 'compress', + 'copy', + 'jshint', + 'jscs' + ]); + grunt.registerTask('prepublish', [ + 'http', + 'replace', + 'updateReadme' + ]); + grunt.registerTask('p', [ + 'prepublish' + ]); +}; \ No newline at end of file diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..20efd1b --- /dev/null +++ b/LICENSE @@ -0,0 +1,22 @@ +The MIT License (MIT) + +Copyright (c) 2015 + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. + diff --git a/README.md b/README.md new file mode 100644 index 0000000..fb25c69 --- /dev/null +++ b/README.md @@ -0,0 +1,82 @@ +![Logo](admin/metro.png) +yunkong2.vis-metro +============ +[![NPM version](http://img.shields.io/npm/v/yunkong2.vis-metro.svg)](https://www.npmjs.com/package/yunkong2.vis-metro) +[![Downloads](https://img.shields.io/npm/dm/yunkong2.vis-metro.svg)](https://www.npmjs.com/package/yunkong2.vis-metro) + +[![NPM](https://nodei.co/npm/yunkong2.vis-metro.png?downloads=true)](https://nodei.co/npm/yunkong2.vis-metro/) + + +Metro widget sets for yunkong2.vis. Widgets are styled as Windows Metro interface. +![Screenshot](img/Demo2.png) + +Build with http://metroui.org.ua/. + +## Changelog +### 1.1.2 (2017-12-17) +- (bluefox) Fixed metro-string widget + +### 1.1.1 (2017-05-27) +- (mctom) 2 Widgets added +- (buanet) fix tplMetroTileStateNumber + +### 1.1.0 (2016-11-12) +- (bluefox) Support of new concept by vis + +### 1.0.4 (2016-10-11) +- (bluefox) fix Metro Widget Heating + +### 1.0.3 (2016-09-21) +- (bluefox) fix Metro Widget Tile State / val Badge Number + +### 1.0.1 (2016-09-13) +- (bluefox) fix Metro Widget "Tile Dialog" + +### 1.0.0 (2016-03-15) +- (bluefox) remove configuration dialog + +### 0.2.1 (2016-01-31) +- (vore) add tplMetroTileBoolDialog + +### 0.2.0 (2015-12-14) +- (bluefox) add custom icon for badges + +### 0.1.11 (2015-12-03) +- (bluefox) fix Tile ValueList 8: badge icon. + +### 0.1.10 (2015-12-01) +- (bluefox) fix bool/number widget: badge icon. + +### 0.1.9 (2015-09-19) +- (bluefox) fix Navigation widget: Brand Background wird nicht angezeigt, sobald Brand Background inactive und Brand Background active den selben Wert haben. +- (instalator) support of old browsers + +### 0.1.8 (2015-09-06) +- (bluefox) remove prepublish script because installation is not possible + +### 0.1.6 (2015-08-14) +- (bluefox) prepublish script +- (bluefox) update toggle widget + +### 0.1.5 (2015-08-12) +- (bluefox) protect against double event: click and touchstart + +### 0.1.3 (2015-08-05) +- (bluefox) fix metro-tile-heating window icon + +### 0.1.2 (2015-07-25) +- (bluefox) add mfd icons +- (bluefox) fix widgets with sliders if "min" != 0 + +### 0.1.1 (2015-07-10) +- (bluefox) make content_oid of "Tile Dialog / Badge Number" as object ID + +### 0.1.0 (2015-06-29) +- (siedi) Add: Service status and humidity to heating tile + +### 0.0.1 (2015-06-28) +- (bluefox) initial checkin + +## License + Copyright (c) 2013-2015 hobbyquaker https://git.spacen.net/hobbyquaker, bluefox https://git.spacen.net/GermanBluefox + MIT diff --git a/admin/index.html b/admin/index.html new file mode 100644 index 0000000..ad5b77f --- /dev/null +++ b/admin/index.html @@ -0,0 +1,61 @@ + + + + + + + + + + + + + + + + + + + +
+ + + + +

Metro Widgets settings

+ +
There is nothing to setup +
+ diff --git a/admin/metro.png b/admin/metro.png new file mode 100644 index 0000000..c6cdd94 Binary files /dev/null and b/admin/metro.png differ diff --git a/img/Demo2.png b/img/Demo2.png new file mode 100644 index 0000000..96a09df Binary files /dev/null and b/img/Demo2.png differ diff --git a/io-package.json b/io-package.json new file mode 100644 index 0000000..56de78e --- /dev/null +++ b/io-package.json @@ -0,0 +1,85 @@ +{ + "common": { + "name": "vis-metro", + "version": "1.1.2", + "news": { + "1.1.2": { + "en": "Fixed metro-string widget", + "de": "Korrigiert metro-string widget", + "ru": "Исправлен metro-string widget", + "nl": "Vaste metro-string widget", + "pt": "Atualizado o widget Metro-string", + "fr": "Widget de metro-string fixe" + }, + "1.1.1": { + "en": "2 Widgets added\nfix tplMetroTileStateNumber", + "de": "2 Widgets hinzugefügt\nfix tplMetroTileStateNumber", + "ru": "Добавлено 2 виджета\nИсправлен MetroTileStateNumber" + }, + "1.1.0": { + "en": "Support of new concept by vis", + "de": "Unterstützung vom neuen vis-Konzept", + "ru": "Поддержка нового концепта vis" + }, + "1.0.4": { + "en": "fix Metro Widget Heating", + "de": "Korrigiert Metro Widget Heating", + "ru": "Исправлен виджет Metro Widget Heating" + }, + "1.0.3": { + "en": "fix Metro Widget Tile State / val Badge Number", + "de": "Korrigiert Widget Tile State / val Badge Number", + "ru": "Исправлен виджет Tile State / val Badge Number" + }, + "1.0.1": { + "en": "fix Metro Widget Tile Dialog", + "de": "Korrigiert Widget Tile Dialog", + "ru": "Исправлен виджет навигации" + } + }, + "title": "yunkong2 Visualisation - metro style Widgets", + "desc": { + "en": "metro Widgets for yunkong2.vis", + "de": "metro Widgets für yunkong2.vis", + "ru": "metro Widgets для yunkong2.vis" + }, + "platform": "Javascript/Node.js", + "loglevel": "info", + "icon": "metro.png", + "enabled": true, + "mode": "once", + "extIcon": "https://git.spacen.net/yunkong2/yunkong2.vis-metro/master/admin/metro.png", + "keywords": [ + "metro", + "vis", + "GUI", + "graphical", + "scada" + ], + "readme": "https://git.spacen.net/yunkong2/yunkong2.vis-metro/blob/master/README.md", + "authors": [ + "hobbyquaker " + ], + "localLink": "%web_protocol%://%ip%:%web_port%/vis/edit.html", + "license": "MIT", + "dependencies": [ + { + "vis": ">=0.11.1" + } + ], + "onlyWWW": true, + "singleton": true, + "type": "visualization-widgets", + "restartAdapters": [ + "vis" + ], + "noConfig": true + }, + "native": { + "dependencies": [ + "jqui-mfd", + "basic" + ] + }, + "instanceObjects": [] +} \ No newline at end of file diff --git a/package.json b/package.json new file mode 100644 index 0000000..be69c07 --- /dev/null +++ b/package.json @@ -0,0 +1,50 @@ +{ + "name": "yunkong2.vis-metro", + "description": "Metro Widgets for yunkong2.vis", + "version": "1.1.2", + "author": { + "name": "hobbyquaker", + "email": "hq@ccu.io" + }, + "contributors": [ + "bluefox ", + "hobbyquaker " + ], + "homepage": "https://git.spacen.net/yunkong2/yunkong2.vis-metro", + "repository": { + "type": "git", + "url": "https://git.spacen.net/yunkong2/yunkong2.vis-metro" + }, + "licenses": [ + { + "type": "MIT", + "url": "https://git.spacen.net/yunkong2/yunkong2.vis-metro/blob/master/LICENSE" + } + ], + "keywords": [ + "yunkong2", + "GUI", + "DashUI", + "web interface", + "home automation", + "SCADA", + "metro GUI" + ], + "devDependencies": { + "grunt": "^1.0.1", + "grunt-replace": "^1.0.1", + "grunt-contrib-jshint": "^1.1.0", + "grunt-jscs": "^3.0.1", + "grunt-http": "^2.2.0", + "mocha": "^4.1.0", + "chai": "^4.1.2" + }, + "bugs": { + "url": "https://git.spacen.net/yunkong2/yunkong2.vis-metro/issues" + }, + "main": "widgets/metro.html", + "scripts": { + "test": "node node_modules/mocha/bin/mocha --exit" + }, + "license": "MIT" +} \ No newline at end of file diff --git a/tasks/jscs.js b/tasks/jscs.js new file mode 100644 index 0000000..588b6f2 --- /dev/null +++ b/tasks/jscs.js @@ -0,0 +1,17 @@ +var srcDir = __dirname + "/../"; + +module.exports = { + all: { + src: [ + srcDir + "*.js", + srcDir + "lib/*.js", + srcDir + "adapter/example/*.js", + srcDir + "tasks/**/*.js", + srcDir + "www/**/*.js", + '!' + srcDir + "www/lib/**/*.js", + '!' + srcDir + 'node_modules/**/*.js', + '!' + srcDir + 'adapter/*/node_modules/**/*.js' + ], + options: require('./jscsRules.js') + } +}; \ No newline at end of file diff --git a/tasks/jscsRules.js b/tasks/jscsRules.js new file mode 100644 index 0000000..ded301d --- /dev/null +++ b/tasks/jscsRules.js @@ -0,0 +1,36 @@ +module.exports = { + force: true, + "requireCurlyBraces": ["else", "for", "while", "do", "try", "catch"], /*"if",*/ + "requireSpaceAfterKeywords": ["if", "else", "for", "while", "do", "switch", "return", "try", "catch"], + "requireSpaceBeforeBlockStatements": true, + "requireParenthesesAroundIIFE": true, + "disallowSpacesInFunctionDeclaration": {"beforeOpeningRoundBrace": true}, + "disallowSpacesInNamedFunctionExpression": {"beforeOpeningRoundBrace": true}, + "requireSpacesInFunctionExpression": {"beforeOpeningCurlyBrace": true}, + "requireSpacesInAnonymousFunctionExpression": {"beforeOpeningRoundBrace": true, "beforeOpeningCurlyBrace": true}, + "requireSpacesInNamedFunctionExpression": {"beforeOpeningCurlyBrace": true}, + "requireSpacesInFunctionDeclaration": {"beforeOpeningCurlyBrace": true}, + "disallowMultipleVarDecl": true, + "requireBlocksOnNewline": true, + "disallowEmptyBlocks": true, + "disallowSpacesInsideObjectBrackets": true, + "disallowSpacesInsideArrayBrackets": true, + "disallowSpaceAfterObjectKeys": true, + "disallowSpacesInsideParentheses": true, + "requireCommaBeforeLineBreak": true, + //"requireAlignedObjectValues": "all", + "requireOperatorBeforeLineBreak": ["?", "+", "-", "/", "*", "=", "==", "===", "!=", "!==", ">", ">=", "<", "<="], +// "disallowLeftStickedOperators": ["?", "+", "/", "*", "=", "==", "===", "!=", "!==", ">", ">=", "<", "<="], +// "requireRightStickedOperators": ["!"], +// "requireSpaceAfterBinaryOperators": ["?", "+", "/", "*", ":", "=", "==", "===", "!=", "!==", ">", ">=", "<", "<="], + //"disallowSpaceAfterBinaryOperators": [","], + "disallowSpaceAfterPrefixUnaryOperators": ["++", "--", "+", "-", "~", "!"], + "disallowSpaceBeforePostfixUnaryOperators": ["++", "--"], + "requireSpaceBeforeBinaryOperators": ["+", "-", "/", "*", "=", "==", "===", "!=", "!=="], + "requireSpaceAfterBinaryOperators": ["?", ">", ",", ">=", "<=", "<", "+", "-", "/", "*", "=", "==", "===", "!=", "!=="], + //"validateIndentation": 4, + //"validateQuoteMarks": { "mark": "\"", "escape": true }, + "disallowMixedSpacesAndTabs": true, + "disallowKeywordsOnNewLine": ["else", "catch"] + +}; diff --git a/tasks/jshint.js b/tasks/jshint.js new file mode 100644 index 0000000..f823ebc --- /dev/null +++ b/tasks/jshint.js @@ -0,0 +1,17 @@ +var srcDir = __dirname + "/../"; + +module.exports = { + options: { + force: true + }, + all: [ + srcDir + "*.js", + srcDir + "lib/*.js", + srcDir + "adapter/example/*.js", + srcDir + "tasks/**/*.js", + srcDir + "www/**/*.js", + '!' + srcDir + "www/lib/**/*.js", + '!' + srcDir + 'node_modules/**/*.js', + '!' + srcDir + 'adapter/*/node_modules/**/*.js' + ] +}; \ No newline at end of file diff --git a/test/testPackageFiles.js b/test/testPackageFiles.js new file mode 100644 index 0000000..d0759c0 --- /dev/null +++ b/test/testPackageFiles.js @@ -0,0 +1,91 @@ +/* jshint -W097 */ +/* jshint strict:false */ +/* jslint node: true */ +/* jshint expr: true */ +var expect = require('chai').expect; +var fs = require('fs'); + +describe('Test package.json and io-package.json', function() { + it('Test package files', function (done) { + console.log(); + + var fileContentIOPackage = fs.readFileSync(__dirname + '/../io-package.json', 'utf8'); + var ioPackage = JSON.parse(fileContentIOPackage); + + var fileContentNPMPackage = fs.readFileSync(__dirname + '/../package.json', 'utf8'); + var npmPackage = JSON.parse(fileContentNPMPackage); + + expect(ioPackage).to.be.an('object'); + expect(npmPackage).to.be.an('object'); + + expect(ioPackage.common.version, 'ERROR: Version number in io-package.json needs to exist').to.exist; + expect(npmPackage.version, 'ERROR: Version number in package.json needs to exist').to.exist; + + expect(ioPackage.common.version, 'ERROR: Version numbers in package.json and io-package.json needs to match').to.be.equal(npmPackage.version); + + if (!ioPackage.common.news || !ioPackage.common.news[ioPackage.common.version]) { + console.log('WARNING: No news entry for current version exists in io-package.json, no rollback in Admin possible!'); + console.log(); + } + + expect(npmPackage.author, 'ERROR: Author in package.json needs to exist').to.exist; + expect(ioPackage.common.authors, 'ERROR: Authors in io-package.json needs to exist').to.exist; + + if (ioPackage.common.name.indexOf('template') !== 0) { + if (Array.isArray(ioPackage.common.authors)) { + expect(ioPackage.common.authors.length, 'ERROR: Author in io-package.json needs to be set').to.not.be.equal(0); + if (ioPackage.common.authors.length === 1) { + expect(ioPackage.common.authors[0], 'ERROR: Author in io-package.json needs to be a real name').to.not.be.equal('my Name '); + } + } + else { + expect(ioPackage.common.authors, 'ERROR: Author in io-package.json needs to be a real name').to.not.be.equal('my Name '); + } + } + else { + console.log('WARNING: Testing for set authors field in io-package skipped because template adapter'); + console.log(); + } + expect(fs.existsSync(__dirname + '/../README.md'), 'ERROR: README.md needs to exist! Please create one with description, detail information and changelog. English is mandatory.').to.be.true; + if (!ioPackage.common.titleLang || typeof ioPackage.common.titleLang !== 'object') { + console.log('WARNING: titleLang is not existing in io-package.json. Please add'); + console.log(); + } + if ( + ioPackage.common.title.indexOf('yunkong2') !== -1 || + ioPackage.common.title.indexOf('yunkong2') !== -1 || + ioPackage.common.title.indexOf('adapter') !== -1 || + ioPackage.common.title.indexOf('Adapter') !== -1 + ) { + console.log('WARNING: title contains Adapter or yunkong2. It is clear anyway, that it is adapter for yunkong2.'); + console.log(); + } + + if (ioPackage.common.name.indexOf('vis-') !== 0) { + if (!ioPackage.common.materialize || !fs.existsSync(__dirname + '/../admin/index_m.html') || !fs.existsSync(__dirname + '/../gulpfile.js')) { + console.log('WARNING: Admin3 support is missing! Please add it'); + console.log(); + } + if (ioPackage.common.materialize) { + expect(fs.existsSync(__dirname + '/../admin/index_m.html'), 'Admin3 support is enabled in io-package.json, but index_m.html is missing!').to.be.true; + } + } + + var licenseFileExists = fs.existsSync(__dirname + '/../LICENSE'); + var fileContentReadme = fs.readFileSync(__dirname + '/../README.md', 'utf8'); + if (fileContentReadme.indexOf('## Changelog') === -1) { + console.log('Warning: The README.md should have a section ## Changelog'); + console.log(); + } + expect((licenseFileExists || fileContentReadme.indexOf('## License') !== -1), 'A LICENSE must exist as LICENSE file or as part of the README.md').to.be.true; + if (!licenseFileExists) { + console.log('Warning: The License should also exist as LICENSE file'); + console.log(); + } + if (fileContentReadme.indexOf('## License') === -1) { + console.log('Warning: The README.md should also have a section ## License to be shown in Admin3'); + console.log(); + } + done(); + }); +}); diff --git a/widgets/metro.html b/widgets/metro.html new file mode 100644 index 0000000..84a1d18 --- /dev/null +++ b/widgets/metro.html @@ -0,0 +1,1890 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/widgets/metro/css/iconFont.min.css b/widgets/metro/css/iconFont.min.css new file mode 100644 index 0000000..0170ab5 --- /dev/null +++ b/widgets/metro/css/iconFont.min.css @@ -0,0 +1,1851 @@ +@font-face { + font-family: 'iconFont'; + src: url('../fonts/iconFont.eot'); + src: url('../fonts/iconFont.eot?#iefix') format('embedded-opentype'), url('../fonts/iconFont.woff') format('woff'), url('../fonts/iconFont.ttf') format('truetype'), url('../fonts/iconFont.svg#iconFont') format('svg'); + font-weight: normal; + font-style: normal +} + +.metro [data-icon]:before { + font-family: 'iconFont'; + content: attr(data-icon); + speak: none; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; + -webkit-font-smoothing: antialiased +} + +.metro [class*="icon-"] { + font-family: 'iconFont' !important; + speak: none; + font-style: normal; + font-weight: normal !important; + font-variant: normal; + text-transform: none; + text-decoration: inherit; + line-height: 1; + display: inline-block; + vertical-align: -8%; + -webkit-font-smoothing: antialiased; + font-size: inherit +} + +.metro [class*="icon-"].smaller { + font-size: .7em; + vertical-align: 6% +} + +.metro [class*="icon-"].large { + font-size: 1.2em; + vertical-align: -10% +} + +.metro .icon-custom:before { + content: "" +} + +.metro .icon-newspaper:before { + content: "\e001" +} + +.metro .icon-pencil:before { + content: "\e002" +} + +.metro .icon-droplet:before { + content: "\e003" +} + +.metro .icon-pictures:before { + content: "\e004" +} + +.metro .icon-camera:before { + content: "\e005" +} + +.metro .icon-music:before { + content: "\e006" +} + +.metro .icon-film:before { + content: "\e007" +} + +.metro .icon-camera-2:before { + content: "\e008" +} + +.metro .icon-spades:before { + content: "\e009" +} + +.metro .icon-clubs:before { + content: "\e00a" +} + +.metro .icon-diamonds:before { + content: "\e00b" +} + +.metro .icon-broadcast:before { + content: "\e00c" +} + +.metro .icon-mic:before { + content: "\e00d" +} + +.metro .icon-book:before { + content: "\e00e" +} + +.metro .icon-file:before { + content: "\e00f" +} + +.metro .icon-new:before { + content: "\e010" +} + +.metro .icon-copy:before { + content: "\e011" +} + +.metro .icon-folder:before { + content: "\e012" +} + +.metro .icon-folder-2:before { + content: "\e013" +} + +.metro .icon-tag:before { + content: "\e014" +} + +.metro .icon-cart:before { + content: "\e015" +} + +.metro .icon-basket:before { + content: "\e016" +} + +.metro .icon-calculate:before { + content: "\e017" +} + +.metro .icon-support:before { + content: "\e018" +} + +.metro .icon-phone:before { + content: "\e019" +} + +.metro .icon-mail:before { + content: "\e01a" +} + +.metro .icon-location:before { + content: "\e01b" +} + +.metro .icon-compass:before { + content: "\e01c" +} + +.metro .icon-history:before { + content: "\e01d" +} + +.metro .icon-clock:before { + content: "\e01e" +} + +.metro .icon-bell:before { + content: "\e01f" +} + +.metro .icon-calendar:before { + content: "\e020" +} + +.metro .icon-printer:before { + content: "\e021" +} + +.metro .icon-mouse:before { + content: "\e022" +} + +.metro .icon-screen:before { + content: "\e023" +} + +.metro .icon-laptop:before { + content: "\e024" +} + +.metro .icon-mobile:before { + content: "\e025" +} + +.metro .icon-cabinet:before { + content: "\e026" +} + +.metro .icon-drawer:before { + content: "\e027" +} + +.metro .icon-drawer-2:before { + content: "\e028" +} + +.metro .icon-box:before { + content: "\e029" +} + +.metro .icon-box-add:before { + content: "\e02a" +} + +.metro .icon-box-remove:before { + content: "\e02b" +} + +.metro .icon-download:before { + content: "\e02c" +} + +.metro .icon-upload:before { + content: "\e02d" +} + +.metro .icon-database:before { + content: "\e02e" +} + +.metro .icon-flip:before { + content: "\e02f" +} + +.metro .icon-flip-2:before { + content: "\e030" +} + +.metro .icon-undo:before { + content: "\e031" +} + +.metro .icon-redo:before { + content: "\e032" +} + +.metro .icon-forward:before { + content: "\e033" +} + +.metro .icon-reply:before { + content: "\e034" +} + +.metro .icon-reply-2:before { + content: "\e035" +} + +.metro .icon-comments:before { + content: "\e036" +} + +.metro .icon-comments-2:before { + content: "\e037" +} + +.metro .icon-comments-3:before { + content: "\e038" +} + +.metro .icon-comments-4:before { + content: "\e039" +} + +.metro .icon-comments-5:before { + content: "\e03a" +} + +.metro .icon-user:before { + content: "\e03b" +} + +.metro .icon-user-2:before { + content: "\e03c" +} + +.metro .icon-user-3:before { + content: "\e03d" +} + +.metro .icon-busy:before { + content: "\e03e" +} + +.metro .icon-loading:before { + content: "\e03f" +} + +.metro .icon-loading-2:before { + content: "\e040" +} + +.metro .icon-search:before { + content: "\e041" +} + +.metro .icon-zoom-in:before { + content: "\e042" +} + +.metro .icon-zoom-out:before { + content: "\e043" +} + +.metro .icon-key:before { + content: "\e044" +} + +.metro .icon-key-2:before { + content: "\e045" +} + +.metro .icon-locked:before { + content: "\e046" +} + +.metro .icon-unlocked:before { + content: "\e047" +} + +.metro .icon-wrench:before { + content: "\e048" +} + +.metro .icon-equalizer:before { + content: "\e049" +} + +.metro .icon-cog:before { + content: "\e04a" +} + +.metro .icon-pie:before { + content: "\e04b" +} + +.metro .icon-bars:before { + content: "\e04c" +} + +.metro .icon-stats-up:before { + content: "\e04d" +} + +.metro .icon-gift:before { + content: "\e04e" +} + +.metro .icon-trophy:before { + content: "\e04f" +} + +.metro .icon-diamond:before { + content: "\e050" +} + +.metro .icon-coffee:before { + content: "\e051" +} + +.metro .icon-rocket:before { + content: "\e052" +} + +.metro .icon-meter-slow:before { + content: "\e053" +} + +.metro .icon-meter-medium:before { + content: "\e054" +} + +.metro .icon-meter-fast:before { + content: "\e055" +} + +.metro .icon-dashboard:before { + content: "\e056" +} + +.metro .icon-fire:before { + content: "\e057" +} + +.metro .icon-lab:before { + content: "\e058" +} + +.metro .icon-remove:before { + content: "\e059" +} + +.metro .icon-briefcase:before { + content: "\e05a" +} + +.metro .icon-briefcase-2:before { + content: "\e05b" +} + +.metro .icon-cars:before { + content: "\e05c" +} + +.metro .icon-bus:before { + content: "\e05d" +} + +.metro .icon-cube:before { + content: "\e05e" +} + +.metro .icon-cube-2:before { + content: "\e05f" +} + +.metro .icon-puzzle:before { + content: "\e060" +} + +.metro .icon-glasses:before { + content: "\e061" +} + +.metro .icon-glasses-2:before { + content: "\e062" +} + +.metro .icon-accessibility:before { + content: "\e063" +} + +.metro .icon-accessibility-2:before { + content: "\e064" +} + +.metro .icon-target:before { + content: "\e065" +} + +.metro .icon-target-2:before { + content: "\e066" +} + +.metro .icon-lightning:before { + content: "\e067" +} + +.metro .icon-power:before { + content: "\e068" +} + +.metro .icon-power-2:before { + content: "\e069" +} + +.metro .icon-clipboard:before { + content: "\e06a" +} + +.metro .icon-clipboard-2:before { + content: "\e06b" +} + +.metro .icon-playlist:before { + content: "\e06c" +} + +.metro .icon-grid-view:before { + content: "\e06d" +} + +.metro .icon-tree-view:before { + content: "\e06e" +} + +.metro .icon-cloud:before { + content: "\e06f" +} + +.metro .icon-cloud-2:before { + content: "\e070" +} + +.metro .icon-download-2:before { + content: "\e071" +} + +.metro .icon-upload-2:before { + content: "\e072" +} + +.metro .icon-upload-3:before { + content: "\e073" +} + +.metro .icon-link:before { + content: "\e074" +} + +.metro .icon-link-2:before { + content: "\e075" +} + +.metro .icon-flag:before { + content: "\e076" +} + +.metro .icon-flag-2:before { + content: "\e077" +} + +.metro .icon-attachment:before { + content: "\e078" +} + +.metro .icon-eye:before { + content: "\e079" +} + +.metro .icon-bookmark:before { + content: "\e07a" +} + +.metro .icon-bookmark-2:before { + content: "\e07b" +} + +.metro .icon-star:before { + content: "\e07c" +} + +.metro .icon-star-2:before { + content: "\e07d" +} + +.metro .icon-star-3:before { + content: "\e07e" +} + +.metro .icon-heart:before { + content: "\e07f" +} + +.metro .icon-heart-2:before { + content: "\e080" +} + +.metro .icon-thumbs-up:before { + content: "\e081" +} + +.metro .icon-thumbs-down:before { + content: "\e082" +} + +.metro .icon-plus:before { + content: "\e083" +} + +.metro .icon-minus:before { + content: "\e084" +} + +.metro .icon-help:before { + content: "\e085" +} + +.metro .icon-help-2:before { + content: "\e086" +} + +.metro .icon-blocked:before { + content: "\e087" +} + +.metro .icon-cancel:before { + content: "\e088" +} + +.metro .icon-cancel-2:before { + content: "\e089" +} + +.metro .icon-checkmark:before { + content: "\e08a" +} + +.metro .icon-minus-2:before { + content: "\e08b" +} + +.metro .icon-plus-2:before { + content: "\e08c" +} + +.metro .icon-enter:before { + content: "\e08d" +} + +.metro .icon-exit:before { + content: "\e08e" +} + +.metro .icon-loop:before { + content: "\e08f" +} + +.metro .icon-arrow-up-left:before { + content: "\e090" +} + +.metro .icon-arrow-up:before { + content: "\e091" +} + +.metro .icon-arrow-up-right:before { + content: "\e092" +} + +.metro .icon-arrow-right:before { + content: "\e093" +} + +.metro .icon-arrow-down-right:before { + content: "\e094" +} + +.metro .icon-arrow-down:before { + content: "\e095" +} + +.metro .icon-arrow-down-left:before { + content: "\e096" +} + +.metro .icon-arrow-left:before { + content: "\e097" +} + +.metro .icon-arrow-up-2:before { + content: "\e098" +} + +.metro .icon-arrow-right-2:before { + content: "\e099" +} + +.metro .icon-arrow-down-2:before { + content: "\e09a" +} + +.metro .icon-arrow-left-2:before { + content: "\e09b" +} + +.metro .icon-arrow-up-3:before { + content: "\e09c" +} + +.metro .icon-arrow-right-3:before { + content: "\e09d" +} + +.metro .icon-arrow-down-3:before { + content: "\e09e" +} + +.metro .icon-arrow-left-3:before { + content: "\e09f" +} + +.metro .icon-menu:before { + content: "\e0a0" +} + +.metro .icon-enter-2:before { + content: "\e0a1" +} + +.metro .icon-backspace:before { + content: "\e0a2" +} + +.metro .icon-backspace-2:before { + content: "\e0a3" +} + +.metro .icon-tab:before { + content: "\e0a4" +} + +.metro .icon-tab-2:before { + content: "\e0a5" +} + +.metro .icon-checkbox:before { + content: "\e0a6" +} + +.metro .icon-checkbox-unchecked:before { + content: "\e0a7" +} + +.metro .icon-checkbox-partial:before { + content: "\e0a8" +} + +.metro .icon-radio-checked:before { + content: "\e0a9" +} + +.metro .icon-radio-unchecked:before { + content: "\e0aa" +} + +.metro .icon-font:before { + content: "\e0ab" +} + +.metro .icon-paragraph-left:before { + content: "\e0ac" +} + +.metro .icon-paragraph-center:before { + content: "\e0ad" +} + +.metro .icon-paragraph-right:before { + content: "\e0ae" +} + +.metro .icon-paragraph-justify:before { + content: "\e0af" +} + +.metro .icon-left-to-right:before { + content: "\e0b0" +} + +.metro .icon-right-to-left:before { + content: "\e0b1" +} + +.metro .icon-share:before { + content: "\e0b2" +} + +.metro .icon-new-tab:before { + content: "\e0b3" +} + +.metro .icon-new-tab-2:before { + content: "\e0b4" +} + +.metro .icon-embed:before { + content: "\e0b5" +} + +.metro .icon-code:before { + content: "\e0b6" +} + +.metro .icon-bluetooth:before { + content: "\e0b7" +} + +.metro .icon-share-2:before { + content: "\e0b8" +} + +.metro .icon-share-3:before { + content: "\e0b9" +} + +.metro .icon-mail-2:before { + content: "\e0ba" +} + +.metro .icon-google:before { + content: "\e0bb" +} + +.metro .icon-google-plus:before { + content: "\e0bc" +} + +.metro .icon-google-drive:before { + content: "\e0bd" +} + +.metro .icon-facebook:before { + content: "\e0be" +} + +.metro .icon-instagram:before { + content: "\e0bf" +} + +.metro .icon-twitter:before { + content: "\e0c0" +} + +.metro .icon-feed:before { + content: "\e0c1" +} + +.metro .icon-youtube:before { + content: "\e0c2" +} + +.metro .icon-vimeo:before { + content: "\e0c3" +} + +.metro .icon-flickr:before { + content: "\e0c4" +} + +.metro .icon-picassa:before { + content: "\e0c5" +} + +.metro .icon-dribbble:before { + content: "\e0c6" +} + +.metro .icon-deviantart:before { + content: "\e0c7" +} + +.metro .icon-github:before { + content: "\e0c8" +} + +.metro .icon-github-2:before { + content: "\e0c9" +} + +.metro .icon-github-3:before { + content: "\e0ca" +} + +.metro .icon-github-4:before { + content: "\e0cb" +} + +.metro .icon-github-5:before { + content: "\e0cc" +} + +.metro .icon-git:before { + content: "\e0cd" +} + +.metro .icon-github-6:before { + content: "\e0ce" +} + +.metro .icon-wordpress:before { + content: "\e0cf" +} + +.metro .icon-joomla:before { + content: "\e0d0" +} + +.metro .icon-blogger:before { + content: "\e0d1" +} + +.metro .icon-tumblr:before { + content: "\e0d2" +} + +.metro .icon-yahoo:before { + content: "\e0d3" +} + +.metro .icon-amazon:before { + content: "\e0d4" +} + +.metro .icon-tux:before { + content: "\e0d5" +} + +.metro .icon-apple:before { + content: "\e0d6" +} + +.metro .icon-finder:before { + content: "\e0d7" +} + +.metro .icon-android:before { + content: "\e0d8" +} + +.metro .icon-windows:before { + content: "\e0d9" +} + +.metro .icon-soundcloud:before { + content: "\e0da" +} + +.metro .icon-skype:before { + content: "\e0db" +} + +.metro .icon-reddit:before { + content: "\e0dc" +} + +.metro .icon-linkedin:before { + content: "\e0dd" +} + +.metro .icon-lastfm:before { + content: "\e0de" +} + +.metro .icon-delicious:before { + content: "\e0df" +} + +.metro .icon-stumbleupon:before { + content: "\e0e0" +} + +.metro .icon-pinterest:before { + content: "\e0e1" +} + +.metro .icon-xing:before { + content: "\e0e2" +} + +.metro .icon-flattr:before { + content: "\e0e3" +} + +.metro .icon-foursquare:before { + content: "\e0e4" +} + +.metro .icon-paypal:before { + content: "\e0e5" +} + +.metro .icon-yelp:before { + content: "\e0e6" +} + +.metro .icon-libreoffice:before { + content: "\e0e7" +} + +.metro .icon-file-pdf:before { + content: "\e0e8" +} + +.metro .icon-file-openoffice:before { + content: "\e0e9" +} + +.metro .icon-file-word:before { + content: "\e0ea" +} + +.metro .icon-file-excel:before { + content: "\e0eb" +} + +.metro .icon-file-powerpoint:before { + content: "\e0ec" +} + +.metro .icon-file-zip:before { + content: "\e0ed" +} + +.metro .icon-file-xml:before { + content: "\e0ee" +} + +.metro .icon-file-css:before { + content: "\e0ef" +} + +.metro .icon-html5:before { + content: "\e0f0" +} + +.metro .icon-html5-2:before { + content: "\e0f1" +} + +.metro .icon-css3:before { + content: "\e0f2" +} + +.metro .icon-chrome:before { + content: "\e0f3" +} + +.metro .icon-firefox:before { + content: "\e0f4" +} + +.metro .icon-IE:before { + content: "\e0f5" +} + +.metro .icon-opera:before { + content: "\e0f6" +} + +.metro .icon-safari:before { + content: "\e0f7" +} + +.metro .icon-IcoMoon:before { + content: "\e0f8" +} + +.metro .icon-sunrise:before { + content: "\e0f9" +} + +.metro .icon-sun:before { + content: "\e0fa" +} + +.metro .icon-moon:before { + content: "\e0fb" +} + +.metro .icon-sun-2:before { + content: "\e0fc" +} + +.metro .icon-windy:before { + content: "\e0fd" +} + +.metro .icon-wind:before { + content: "\e0fe" +} + +.metro .icon-snowflake:before { + content: "\e0ff" +} + +.metro .icon-cloudy:before { + content: "\e100" +} + +.metro .icon-cloud-3:before { + content: "\e101" +} + +.metro .icon-weather:before { + content: "\e102" +} + +.metro .icon-weather-2:before { + content: "\e103" +} + +.metro .icon-weather-3:before { + content: "\e104" +} + +.metro .icon-lines:before { + content: "\e105" +} + +.metro .icon-cloud-4:before { + content: "\e106" +} + +.metro .icon-lightning-2:before { + content: "\e107" +} + +.metro .icon-lightning-3:before { + content: "\e108" +} + +.metro .icon-rainy:before { + content: "\e109" +} + +.metro .icon-rainy-2:before { + content: "\e10a" +} + +.metro .icon-windy-2:before { + content: "\e10b" +} + +.metro .icon-windy-3:before { + content: "\e10c" +} + +.metro .icon-snowy:before { + content: "\e10d" +} + +.metro .icon-snowy-2:before { + content: "\e10e" +} + +.metro .icon-snowy-3:before { + content: "\e10f" +} + +.metro .icon-weather-4:before { + content: "\e110" +} + +.metro .icon-cloudy-2:before { + content: "\e111" +} + +.metro .icon-cloud-5:before { + content: "\e112" +} + +.metro .icon-lightning-4:before { + content: "\e113" +} + +.metro .icon-sun-3:before { + content: "\e114" +} + +.metro .icon-moon-2:before { + content: "\e115" +} + +.metro .icon-cloudy-3:before { + content: "\e116" +} + +.metro .icon-cloud-6:before { + content: "\e117" +} + +.metro .icon-cloud-7:before { + content: "\e118" +} + +.metro .icon-lightning-5:before { + content: "\e119" +} + +.metro .icon-rainy-3:before { + content: "\e11a" +} + +.metro .icon-rainy-4:before { + content: "\e11b" +} + +.metro .icon-windy-4:before { + content: "\e11c" +} + +.metro .icon-windy-5:before { + content: "\e11d" +} + +.metro .icon-snowy-4:before { + content: "\e11e" +} + +.metro .icon-snowy-5:before { + content: "\e11f" +} + +.metro .icon-weather-5:before { + content: "\e120" +} + +.metro .icon-cloudy-4:before { + content: "\e121" +} + +.metro .icon-lightning-6:before { + content: "\e122" +} + +.metro .icon-thermometer:before { + content: "\e123" +} + +.metro .icon-compass-2:before { + content: "\e124" +} + +.metro .icon-none:before { + content: "\e125" +} + +.metro .icon-Celsius:before { + content: "\e126" +} + +.metro .icon-Fahrenheit:before { + content: "\e127" +} + +.metro .icon-forrst:before { + content: "\e128" +} + +.metro .icon-headphones:before { + content: "\e129" +} + +.metro .icon-bug:before { + content: "\e12a" +} + +.metro .icon-cart-2:before { + content: "\e12b" +} + +.metro .icon-earth:before { + content: "\e12c" +} + +.metro .icon-battery:before { + content: "\e12d" +} + +.metro .icon-list:before { + content: "\e12e" +} + +.metro .icon-grid:before { + content: "\e12f" +} + +.metro .icon-alarm:before { + content: "\e130" +} + +.metro .icon-location-2:before { + content: "\e131" +} + +.metro .icon-pointer:before { + content: "\e132" +} + +.metro .icon-diary:before { + content: "\e133" +} + +.metro .icon-eye-2:before { + content: "\e134" +} + +.metro .icon-console:before { + content: "\e135" +} + +.metro .icon-location-3:before { + content: "\e136" +} + +.metro .icon-move:before { + content: "\e137" +} + +.metro .icon-gift-2:before { + content: "\e138" +} + +.metro .icon-monitor:before { + content: "\e139" +} + +.metro .icon-mobile-2:before { + content: "\e13a" +} + +.metro .icon-switch:before { + content: "\e13b" +} + +.metro .icon-star-4:before { + content: "\e13c" +} + +.metro .icon-address-book:before { + content: "\e13d" +} + +.metro .icon-shit:before { + content: "\e13e" +} + +.metro .icon-cone:before { + content: "\e13f" +} + +.metro .icon-credit-card:before { + content: "\e140" +} + +.metro .icon-type:before { + content: "\e141" +} + +.metro .icon-volume:before { + content: "\e142" +} + +.metro .icon-volume-2:before { + content: "\e143" +} + +.metro .icon-locked-2:before { + content: "\e144" +} + +.metro .icon-warning:before { + content: "\e145" +} + +.metro .icon-info:before { + content: "\e146" +} + +.metro .icon-filter:before { + content: "\e147" +} + +.metro .icon-bookmark-3:before { + content: "\e148" +} + +.metro .icon-bookmark-4:before { + content: "\e149" +} + +.metro .icon-stats:before { + content: "\e14a" +} + +.metro .icon-compass-3:before { + content: "\e14b" +} + +.metro .icon-keyboard:before { + content: "\e14c" +} + +.metro .icon-award-fill:before { + content: "\e14d" +} + +.metro .icon-award-stroke:before { + content: "\e14e" +} + +.metro .icon-beaker-alt:before { + content: "\e14f" +} + +.metro .icon-beaker:before { + content: "\e150" +} + +.metro .icon-move-vertical:before { + content: "\e151" +} + +.metro .icon-move-horizontal:before { + content: "\e152" +} + +.metro .icon-steering-wheel:before { + content: "\e153" +} + +.metro .icon-volume-3:before { + content: "\e154" +} + +.metro .icon-volume-mute:before { + content: "\e155" +} + +.metro .icon-play:before { + content: "\e156" +} + +.metro .icon-pause:before { + content: "\e157" +} + +.metro .icon-stop:before { + content: "\e158" +} + +.metro .icon-eject:before { + content: "\e159" +} + +.metro .icon-first:before { + content: "\e15a" +} + +.metro .icon-last:before { + content: "\e15b" +} + +.metro .icon-play-alt:before { + content: "\e15c" +} + +.metro .icon-battery-charging:before { + content: "\e160" +} + +.metro .icon-left-quote:before { + content: "\e161" +} + +.metro .icon-right-quote:before { + content: "\e162" +} + +.metro .icon-left-quote-alt:before { + content: "\e163" +} + +.metro .icon-right-quote-alt:before { + content: "\e164" +} + +.metro .icon-smiley:before { + content: "\e165" +} + +.metro .icon-umbrella:before { + content: "\e166" +} + +.metro .icon-info-2:before { + content: "\e167" +} + +.metro .icon-chart-alt:before { + content: "\e168" +} + +.metro .icon-at:before { + content: "\e169" +} + +.metro .icon-hash:before { + content: "\e16a" +} + +.metro .icon-pilcrow:before { + content: "\e16b" +} + +.metro .icon-fullscreen-alt:before { + content: "\e16c" +} + +.metro .icon-fullscreen-exit-alt:before { + content: "\e16d" +} + +.metro .icon-layers-alt:before { + content: "\e16e" +} + +.metro .icon-layers:before { + content: "\e16f" +} + +.metro .icon-floppy:before { + content: "\e170" +} + +.metro .icon-rainbow:before { + content: "\e000" +} + +.metro .icon-air:before { + content: "\e171" +} + +.metro .icon-home:before { + content: "\e172" +} + +.metro .icon-spin:before { + content: "\e173" +} + +.metro .icon-auction:before { + content: "\e174" +} + +.metro .icon-dollar:before { + content: "\e175" +} + +.metro .icon-dollar-2:before { + content: "\e176" +} + +.metro .icon-coins:before { + content: "\e177" +} + +.metro .icon-file-2:before { + content: "\e186" +} + +.metro .icon-file-3:before { + content: "\e187" +} + +.metro .icon-file-4:before { + content: "\e188" +} + +.metro .icon-files:before { + content: "\e189" +} + +.metro .icon-phone-2:before { + content: "\e18a" +} + +.metro .icon-tablet:before { + content: "\e18b" +} + +.metro .icon-monitor-2:before { + content: "\e18c" +} + +.metro .icon-window:before { + content: "\e18d" +} + +.metro .icon-tv:before { + content: "\e18e" +} + +.metro .icon-camera-3:before { + content: "\e18f" +} + +.metro .icon-image:before { + content: "\e190" +} + +.metro .icon-open:before { + content: "\e191" +} + +.metro .icon-sale:before { + content: "\e192" +} + +.metro .icon-direction:before { + content: "\e193" +} + +.metro .icon-medal:before { + content: "\e194" +} + +.metro .icon-medal-2:before { + content: "\e195" +} + +.metro .icon-satellite:before { + content: "\e196" +} + +.metro .icon-discout:before { + content: "\e197" +} + +.metro .icon-barcode:before { + content: "\e198" +} + +.metro .icon-ticket:before { + content: "\e199" +} + +.metro .icon-shipping:before { + content: "\e19a" +} + +.metro .icon-globe:before { + content: "\e19b" +} + +.metro .icon-anchor:before { + content: "\e19c" +} + +.metro .icon-pop-out:before { + content: "\e19d" +} + +.metro .icon-pop-in:before { + content: "\e19e" +} + +.metro .icon-resize:before { + content: "\e178" +} + +.metro .icon-battery-2:before { + content: "\e179" +} + +.metro .icon-battery-3:before { + content: "\e17a" +} + +.metro .icon-battery-4:before { + content: "\e17b" +} + +.metro .icon-battery-5:before { + content: "\e17c" +} + +.metro .icon-tools:before { + content: "\e17d" +} + +.metro .icon-alarm-2:before { + content: "\e17e" +} + +.metro .icon-alarm-cancel:before { + content: "\e17f" +} + +.metro .icon-alarm-clock:before { + content: "\e180" +} + +.metro .icon-chronometer:before { + content: "\e181" +} + +.metro .icon-ruler:before { + content: "\e182" +} + +.metro .icon-lamp:before { + content: "\e183" +} + +.metro .icon-lamp-2:before { + content: "\e184" +} + +.metro .icon-scissors:before { + content: "\e185" +} + +.metro .icon-volume-4:before { + content: "\e19f" +} + +.metro .icon-volume-5:before { + content: "\e1a0" +} + +.metro .icon-volume-6:before { + content: "\e1a1" +} + +.metro .icon-battery-full:before { + content: "\e15f" +} + +.metro .icon-battery-empty:before { + content: "\e15d" +} + +.metro .icon-battery-half:before { + content: "\e15e" +} + +.metro .icon-zip:before { + content: "\e1a2" +} + +.metro .icon-zip-2:before { + content: "\e1a3" +} + +.metro .icon-play-2:before { + content: "\e1a4" +} + +.metro .icon-pause-2:before { + content: "\e1a5" +} + +.metro .icon-record:before { + content: "\e1a6" +} + +.metro .icon-stop-2:before { + content: "\e1a7" +} + +.metro .icon-next:before { + content: "\e1a8" +} + +.metro .icon-previous:before { + content: "\e1a9" +} + +.metro .icon-first-2:before { + content: "\e1aa" +} + +.metro .icon-last-2:before { + content: "\e1ab" +} + +.metro .icon-arrow-left-4:before { + content: "\e1ac" +} + +.metro .icon-arrow-down-4:before { + content: "\e1ad" +} + +.metro .icon-arrow-up-4:before { + content: "\e1ae" +} + +.metro .icon-arrow-right-4:before { + content: "\e1af" +} + +.metro .icon-arrow-left-5:before { + content: "\e1b0" +} + +.metro .icon-arrow-down-5:before { + content: "\e1b1" +} + +.metro .icon-arrow-up-5:before { + content: "\e1b2" +} + +.metro .icon-arrow-right-5:before { + content: "\e1b3" +} + +.metro .icon-cc:before { + content: "\e1b4" +} + +.metro .icon-cc-by:before { + content: "\e1b5" +} + +.metro .icon-cc-nc:before { + content: "\e1b6" +} + +.metro .icon-cc-nc-eu:before { + content: "\e1b7" +} + +.metro .icon-cc-nc-jp:before { + content: "\e1b8" +} + +.metro .icon-cc-sa:before { + content: "\e1b9" +} + +.metro .icon-cc-nd:before { + content: "\e1ba" +} + +.metro .icon-cc-pd:before { + content: "\e1bb" +} + +.metro .icon-cc-zero:before { + content: "\e1bc" +} + +.metro .icon-cc-share:before { + content: "\e1bd" +} + +.metro .icon-cc-share-2:before { + content: "\e1be" +} + +.metro .icon-cycle:before { + content: "\e1bf" +} + +.metro .icon-stop-3:before { + content: "\e1c0" +} + +.metro .icon-stats-2:before { + content: "\e1c1" +} + +.metro .icon-stats-3:before { + content: "\e1c2" +} \ No newline at end of file diff --git a/widgets/metro/css/metro-bootstrap.css b/widgets/metro/css/metro-bootstrap.css new file mode 100644 index 0000000..1904d64 --- /dev/null +++ b/widgets/metro/css/metro-bootstrap.css @@ -0,0 +1,10483 @@ +.metro { + font-size: 62.5%; + font-size: 1.4rem; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -ms-box-sizing: border-box; + -o-box-sizing: border-box; + box-sizing: border-box; +} +.metro .metro-invisible { + display: none; +} +.metro article, +.metro aside, +.metro details, +.metro figcaption, +.metro figure, +.metro footer, +.metro header, +.metro hgroup, +.metro nav, +.metro section { + display: block; +} +.metro audio, +.metro canvas, +.metro video { + display: inline-block; +} +.metro audio:not([controls]) { + display: none; +} +.metro a:hover, +.metro a:active, +.metro .tile:active { + outline: 0; +} +.metro sub, +.metro sup { + position: relative; + font-size: 75%; + line-height: 0; + vertical-align: baseline; +} +.metro sup { + top: -0.5em; +} +.metro sub { + bottom: -0.25em; +} +.metro img { + max-width: 100%; + height: auto; + vertical-align: middle; + border: 0; + -ms-interpolation-mode: bicubic; +} +.metro #map_canvas img, +.metro .google-maps img { + max-width: none; +} +.metro button, +.metro input, +.metro select, +.metro textarea { + margin: 0; + font-size: 100%; + vertical-align: middle; +} +.metro button, +.metro input { + line-height: normal; +} +.metro button::-moz-focus-inner, +.metro input::-moz-focus-inner { + padding: 0; + border: 0; +} +.metro button, +.metro input[type="button"], +.metro input[type="reset"], +.metro input[type="submit"] { + -webkit-appearance: button; + cursor: pointer; +} +.metro label, +.metro select, +.metro button, +.metro input[type="button"], +.metro input[type="reset"], +.metro input[type="submit"], +.metro input[type="radio"], +.metro input[type="checkbox"] { + cursor: pointer; +} +.metro input[type="search"] { + -webkit-appearance: textfield; + -webkit-box-sizing: content-box; + -moz-box-sizing: content-box; + -ms-box-sizing: content-box; + -o-box-sizing: content-box; + box-sizing: content-box; +} +.metro input[type="search"]::-webkit-search-decoration, +.metro input[type="search"]::-webkit-search-cancel-button { + -webkit-appearance: none; +} +.metro textarea { + overflow: auto; + vertical-align: top; +} +.metro input[type=text]::-ms-clear, +.metro input[type=email]::-ms-clear, +.metro input[type=url]::-ms-clear, +.metro input[type=tel]::-ms-clear, +.metro input[type=number]::-ms-clear, +.metro input[type=time]::-ms-clear { + display: none; +} +.metro input[type=password]::-ms-reveal { + display: none; +} +.metro * { + border-collapse: collapse; +} +.metro a { + text-decoration: none; +} + +.metro .box-sizing-border { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -ms-box-sizing: border-box; + -o-box-sizing: border-box; + box-sizing: border-box; +} +.metro .box-sizing-content { + -webkit-box-sizing: content-box; + -moz-box-sizing: content-box; + -ms-box-sizing: content-box; + -o-box-sizing: content-box; + box-sizing: content-box; +} +.metro .text-left { + text-align: left; +} +.metro .text-right { + text-align: right; +} +.metro .text-center { + text-align: center; +} +.metro .text-justify { + text-align: justify; +} +.metro .text-ellipsis { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} +.metro .text-bold { + font-weight: bold; +} +.metro .text-normal { + font-weight: normal; +} +.metro .text-italic { + font-style: italic; +} +.metro .no-border { + border: 0 !important; +} +.metro .border { + border: 1px #eaeaea solid; +} +.metro .border-left { + border-left: 1px #eaeaea solid; +} +.metro .border-right { + border-right: 1px #eaeaea solid; +} +.metro .border-top { + border-top: 1px #eaeaea solid; +} +.metro .border-bottom { + border-bottom: 1px #eaeaea solid; +} +.metro .collapse-separate { + border-collapse: separate; +} +.metro .collapse-collapse { + border-collapse: collapse; +} +.metro .pos-abs { + position: absolute; +} +.metro .pos-rel { + position: relative; +} +.metro .pos-fix { + position: fixed; +} +.metro .place-left { + float: left; +} +.metro .place-right { + float: right; +} +.metro .place-top-left { + position: absolute; + top: 0; + left: 0; +} +.metro .place-top-right { + position: absolute; + top: 0; + right: 0; +} +.metro .place-bottom-left { + position: absolute; + bottom: 0; + left: 0; +} +.metro .place-bottom-right { + position: absolute; + bottom: 0; + right: 0; +} +.metro .on-left { + margin-right: 5px; +} +.metro .on-right { + margin-left: 5px; +} +.metro .on-left-more { + margin-right: 10px; +} +.metro .on-right-more { + margin-left: 10px; +} +.metro .padding5 { + padding: 5px; +} +.metro .padding10 { + padding: 10px; +} +.metro .padding15 { + padding: 15px; +} +.metro .padding20 { + padding: 20px; +} +.metro .margin5 { + margin: 5px; +} +.metro .margin10 { + margin: 10px; +} +.metro .margin15 { + margin: 15px; +} +.metro .margin20 { + margin: 20px; +} +.metro .nlm { + margin-left: 0 !important; +} +.metro .nrm { + margin-right: 0 !important; +} +.metro .ntm { + margin-top: 0 !important; +} +.metro .nbm { + margin-bottom: 0 !important; +} +.metro .nlp { + padding-left: 0 !important; +} +.metro .nrp { + padding-right: 0 !important; +} +.metro .ntp { + padding-top: 0 !important; +} +.metro .nbp { + padding-bottom: 0 !important; +} +.metro .no-margin { + margin: 0 !important; +} +.metro .no-padding { + padding: 0 !important; +} +.metro .no-float { + float: none !important; +} +.metro .block { + display: block !important; + float: none !important; +} +.metro .inline-block { + display: inline-block !important; +} +.metro .hide, +.metro .no-display { + display: none !important; +} +.metro .no-visible { + visibility: hidden !important; +} +.metro .visible { + visibility: visible !important; +} +.metro .scroll-y, +.metro .scroll-vertical { + overflow-y: scroll; +} +.metro .scroll-x, +.metro .scroll-horizontal { + overflow-x: scroll; +} +.metro .no-overflow { + overflow: hidden; +} +.metro .overflow { + overflow: scroll; +} +.metro .one-column { + -moz-columns: 1; + -webkit-columns: 1; + -o-columns: 1; + -ms-columns: 1; + columns: 1; + -moz-column-gap: 20px; + -webkit-column-gap: 20px; + -o-column-gap: 20px; + -ms-column-gap: 20px; + column-gap: 20px; +} +.metro .two-columns { + -moz-columns: 2; + -webkit-columns: 2; + -o-columns: 2; + -ms-columns: 2; + columns: 2; + -moz-column-gap: 20px; + -webkit-column-gap: 20px; + -o-column-gap: 20px; + -ms-column-gap: 20px; + column-gap: 20px; +} +.metro .three-columns { + -moz-columns: 3; + -webkit-columns: 3; + -o-columns: 3; + -ms-columns: 3; + columns: 3; + -moz-column-gap: 20px; + -webkit-column-gap: 20px; + -o-column-gap: 20px; + -ms-column-gap: 20px; + column-gap: 20px; +} +.metro .four-columns { + -moz-columns: 4; + -webkit-columns: 4; + -o-columns: 4; + -ms-columns: 4; + columns: 4; + -moz-column-gap: 20px; + -webkit-column-gap: 20px; + -o-column-gap: 20px; + -ms-column-gap: 20px; + column-gap: 20px; +} +.metro .five-columns { + -moz-columns: 5; + -webkit-columns: 5; + -o-columns: 5; + -ms-columns: 5; + columns: 5; + -moz-column-gap: 20px; + -webkit-column-gap: 20px; + -o-column-gap: 20px; + -ms-column-gap: 20px; + column-gap: 20px; +} +.metro .square5 { + width: 5px; + height: 5px; +} +.metro .square10 { + width: 10px; + height: 10px; +} +.metro .square15 { + width: 15px; + height: 15px; +} +.metro .square20 { + width: 20px; + height: 20px; +} +.metro .shadow { + box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3), 0 3px 8px rgba(0, 0, 0, 0.2); +} +.metro .text-shadow { + text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4); +} +.metro .opacity { + opacity: .9; +} +.metro .half-opacity { + opacity: .5; +} +.metro .hi-opacity { + opacity: .2; +} +.metro .clearfix:before, +.metro .clearfix:after { + display: table; + content: ""; +} +.metro .clearfix:after { + clear: both; +} +.metro #element .selected { + border: 4px #4390df solid; +} +.metro #element .selected:after { + position: absolute; + display: block; + border-top: 28px solid #4390df; + border-left: 28px solid transparent; + right: 0; + content: ""; + top: 0; + z-index: 101; +} +.metro #element .selected:before { + position: absolute; + display: block; + content: "\e003"; + color: #fff; + right: 0; + font-family: 'metroSysIcons'; + font-size: 9pt; + font-weight: normal; + z-index: 102; + top: 0; +} +.metro .rotate45 { + -webkit-transform: rotate(45deg); + -moz-transform: rotate(45deg); + -ms-transform: rotate(45deg); + -o-transform: rotate(45deg); + transform: rotate(45deg); +} +.metro .rotate90 { + -webkit-transform: rotate(90deg); + -moz-transform: rotate(90deg); + -ms-transform: rotate(90deg); + -o-transform: rotate(90deg); + transform: rotate(90deg); +} +.metro .rotate135 { + -webkit-transform: rotate(135deg); + -moz-transform: rotate(135deg); + -ms-transform: rotate(135deg); + -o-transform: rotate(135deg); + transform: rotate(135deg); +} +.metro .rotate180 { + -webkit-transform: rotate(180deg); + -moz-transform: rotate(180deg); + -ms-transform: rotate(180deg); + -o-transform: rotate(180deg); + transform: rotate(180deg); +} +.metro .rotate225 { + -webkit-transform: rotate(225deg); + -moz-transform: rotate(225deg); + -ms-transform: rotate(225deg); + -o-transform: rotate(225deg); + transform: rotate(225deg); +} +.metro .rotate270 { + -webkit-transform: rotate(270deg); + -moz-transform: rotate(270deg); + -ms-transform: rotate(270deg); + -o-transform: rotate(270deg); + transform: rotate(270deg); +} +.metro .rotate360 { + -webkit-transform: rotate(360deg); + -moz-transform: rotate(360deg); + -ms-transform: rotate(360deg); + -o-transform: rotate(360deg); + transform: rotate(360deg); +} +.metro .rotateX45 { + -webkit-transform: rotateX(45deg); + -moz-transform: rotateX(45deg); + -ms-transform: rotateX(45deg); + -o-transform: rotateX(45deg); + transform: rotateX(45deg); +} +.metro .rotateX90 { + -webkit-transform: rotateX(90deg); + -moz-transform: rotateX(90deg); + -ms-transform: rotateX(90deg); + -o-transform: rotateX(90deg); + transform: rotateX(90deg); +} +.metro .rotateX135 { + -webkit-transform: rotateX(135deg); + -moz-transform: rotateX(135deg); + -ms-transform: rotateX(135deg); + -o-transform: rotateX(135deg); + transform: rotateX(135deg); +} +.metro .rotateX180 { + -webkit-transform: rotateX(180deg); + -moz-transform: rotateX(180deg); + -ms-transform: rotateX(180deg); + -o-transform: rotateX(180deg); + transform: rotateX(180deg); +} +.metro .rotateX225 { + -webkit-transform: rotateX(225deg); + -moz-transform: rotateX(225deg); + -ms-transform: rotateX(225deg); + -o-transform: rotateX(225deg); + transform: rotateX(225deg); +} +.metro .rotateX270 { + -webkit-transform: rotateX(270deg); + -moz-transform: rotateX(270deg); + -ms-transform: rotateX(270deg); + -o-transform: rotateX(270deg); + transform: rotateX(270deg); +} +.metro .rotateX360 { + -webkit-transform: rotateX(360deg); + -moz-transform: rotateX(360deg); + -ms-transform: rotateX(360deg); + -o-transform: rotateX(360deg); + transform: rotateX(360deg); +} +.metro .rotateY45 { + -webkit-transform: rotateY(45deg); + -moz-transform: rotateY(45deg); + -ms-transform: rotateY(45deg); + -o-transform: rotateY(45deg); + transform: rotateY(45deg); +} +.metro .rotateY90 { + -webkit-transform: rotateY(90deg); + -moz-transform: rotateY(90deg); + -ms-transform: rotateY(90deg); + -o-transform: rotateY(90deg); + transform: rotateY(90deg); +} +.metro .rotateY135 { + -webkit-transform: rotateY(135deg); + -moz-transform: rotateY(135deg); + -ms-transform: rotateY(135deg); + -o-transform: rotateY(135deg); + transform: rotateY(135deg); +} +.metro .rotateY180 { + -webkit-transform: rotateY(180deg); + -moz-transform: rotateY(180deg); + -ms-transform: rotateY(180deg); + -o-transform: rotateY(180deg); + transform: rotateY(180deg); +} +.metro .rotateY225 { + -webkit-transform: rotateY(225deg); + -moz-transform: rotateY(225deg); + -ms-transform: rotateY(225deg); + -o-transform: rotateY(225deg); + transform: rotateY(225deg); +} +.metro .rotateY270 { + -webkit-transform: rotateY(270deg); + -moz-transform: rotateY(270deg); + -ms-transform: rotateY(270deg); + -o-transform: rotateY(270deg); + transform: rotateY(270deg); +} +.metro .rotateY360 { + -webkit-transform: rotateY(360deg); + -moz-transform: rotateY(360deg); + -ms-transform: rotateY(360deg); + -o-transform: rotateY(360deg); + transform: rotateY(360deg); +} +@font-face { + font-family: "PT Serif Caption"; + font-style: normal; + font-weight: 400; + src: local("Cambria"), local("PT Serif Caption"), local("PTSerif-Caption"), url(https://themes.googleusercontent.com/static/fonts/ptserifcaption/v4/7xkFOeTxxO1GMC1suOUYWWhBabBbEjGd1iRmpyoZukE.woff) format('woff'); +} +@font-face { + font-family: "Open Sans Light"; + font-style: normal; + font-weight: 300; + src: local("Segoe UI Light"), local("Open Sans Light"), local("OpenSans-Light"), url(https://themes.googleusercontent.com/static/fonts/opensans/v6/DXI1ORHCpsQm3Vp6mXoaTZ1r3JsPcQLi8jytr04NNhU.woff) format('woff'); +} +@font-face { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + src: local("Segoe UI"), local("Open Sans"), local("OpenSans"), url(https://themes.googleusercontent.com/static/fonts/opensans/v6/K88pR3goAWT7BTt32Z01mz8E0i7KZn-EPnyo3HZu7kw.woff) format('woff'); +} +@font-face { + font-family: "Open Sans Bold"; + font-style: normal; + font-weight: 700; + src: local("Segoe UI Bold"), local("Open Sans Bold"), local("OpenSans-Bold"), url(https://themes.googleusercontent.com/static/fonts/opensans/v6/k3k702ZOKiLJc3WVjuplzJ1r3JsPcQLi8jytr04NNhU.woff) format('woff'); +} +.metro .text-rest-state { + color: #000000; +} +.metro .text-rest2-state { + color: rgba(0, 0, 0, 0.6); +} +.metro .text-hover-state { + color: rgba(0, 0, 0, 0.8); +} +.metro .text-pressed-state { + color: rgba(0, 0, 0, 0.4); +} +.metro #font .light { + font-weight: 300; +} +.metro #font .normal { + font-weight: normal; + font-style: normal; +} +.metro #font .bold { + font-weight: bold; +} +.metro #font .italic { + font-style: italic; +} +.metro #font .segoe { + font-family: 'Segoe UI_', 'Open Sans', Verdana, Arial, Helvetica, sans-serif; +} +.metro #font .segoe-bold { + font-family: 'Segoe UI Semibold_', 'Open Sans Bold', Verdana, Arial, Helvetica, sans-serif; +} +.metro #font .segoe-light { + font-family: 'Segoe UI Light_', 'Open Sans Light', Verdana, Arial, Helvetica, sans-serif; +} +.metro #font .cambria { + font-family: 'Cambria_', 'PT Serif Caption', Verdana, Arial, Helvetica, sans-serif; +} +.metro #font .mono { + font-family: 'Courier New', monospace; +} +.metro #font .serif { + font-family: Georgia, "Times New Roman", Times, serif; +} +.metro #font .sans { + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; +} +.metro .header, +.metro .subheader { + font-family: 'Segoe UI Light_', 'Open Sans Light', Verdana, Arial, Helvetica, sans-serif; + font-weight: 300; + color: #000000; + letter-spacing: 0.00em; +} +.metro .header { + font-size: 4.8rem; + line-height: 4.8rem; +} +.metro .subheader { + font-size: 2.5rem; + line-height: 2.5rem; + letter-spacing: 0.01em; +} +.metro .subheader-secondary { + font-family: 'Segoe UI Light_', 'Open Sans Light', Verdana, Arial, Helvetica, sans-serif; + font-weight: 300; + color: #000000; + letter-spacing: 0.00em; + font-size: 2.5rem; + line-height: 2.5rem; + letter-spacing: 0.01em; + color: rgba(0, 0, 0, 0.6); + font-size: 2.2rem; + line-height: 2.2rem; +} +.metro .item-title { + font-family: 'Segoe UI Semibold_', 'Open Sans Bold', Verdana, Arial, Helvetica, sans-serif; + font-weight: bold; + color: #000000; + font-size: 1.6rem; + line-height: 1.6rem; + letter-spacing: 0.02em; +} +.metro .item-title-secondary { + font-family: 'Segoe UI Semibold_', 'Open Sans Bold', Verdana, Arial, Helvetica, sans-serif; + font-weight: bold; + color: #000000; + font-size: 1.6rem; + line-height: 1.6rem; + letter-spacing: 0.02em; + color: rgba(0, 0, 0, 0.6); + font-size: 1.4rem; + line-height: 1.4rem; +} +.metro .navigation { + font-family: 'Segoe UI_', 'Open Sans', Verdana, Arial, Helvetica, sans-serif; + font-weight: normal; + font-style: normal; + color: rgba(0, 0, 0, 0.6); + font-size: 1.2rem; + line-height: 1.2rem; + letter-spacing: 0.02em; +} +.metro .body-text { + font-family: 'Segoe UI_', 'Open Sans', Verdana, Arial, Helvetica, sans-serif; + font-weight: normal; + font-style: normal; + color: #000000; + font-size: 11pt; + line-height: 15pt; + letter-spacing: 0.02em; +} +.metro .code-text { + font-family: 'Segoe UI_', 'Open Sans', Verdana, Arial, Helvetica, sans-serif; + font-weight: normal; + font-style: normal; + color: #000000; + font-size: 11pt; + line-height: 15pt; + letter-spacing: 0.02em; + font-family: 'Courier New', monospace; +} +.metro .tertiary-text { + font-family: 'Segoe UI_', 'Open Sans', Verdana, Arial, Helvetica, sans-serif; + color: #000000; + font-size: 1.3rem; + line-height: 1.5rem; + font-weight: normal !important; +} +.metro .tertiary-text-secondary { + font-family: 'Segoe UI_', 'Open Sans', Verdana, Arial, Helvetica, sans-serif; + color: #000000; + font-size: 1.3rem; + line-height: 1.5rem; + font-weight: normal !important; + color: rgba(0, 0, 0, 0.6); +} +.metro .readable-text { + font-family: 'Cambria_', 'PT Serif Caption', Verdana, Arial, Helvetica, sans-serif; + font-weight: normal; + font-style: normal; + font-size: 1.8rem; + line-height: 2rem; +} +.metro .menu-title { + font-family: 'Segoe UI Light_', 'Open Sans Light', Verdana, Arial, Helvetica, sans-serif; + font-weight: 300; + color: #000000; + letter-spacing: 0.00em; + font-size: 2.5rem; + line-height: 2.5rem; + letter-spacing: 0.01em; + font-size: 4rem; +} +.metro .menu-item { + font-family: 'Segoe UI Light_', 'Open Sans Light', Verdana, Arial, Helvetica, sans-serif; + font-weight: 300; + color: #000000; + letter-spacing: 0.00em; + font-size: 2.5rem; + line-height: 2.5rem; + letter-spacing: 0.01em; + color: rgba(0, 0, 0, 0.6); + line-height: 2.2rem; + font-size: 2.2rem; +} +.metro .menu-item-secondary { + font-family: 'Segoe UI Semibold_', 'Open Sans Bold', Verdana, Arial, Helvetica, sans-serif; + font-weight: bold; + color: #000000; + font-size: 1.6rem; + line-height: 1.6rem; + letter-spacing: 0.02em; + font-weight: normal; + font-style: normal; + line-height: 1.4rem; +} +.metro h1, +.metro h2, +.metro h3, +.metro h4, +.metro h5, +.metro h6 { + padding: 0; + margin: 10px 0; +} +.metro h1 { + font-family: 'Segoe UI Light_', 'Open Sans Light', Verdana, Arial, Helvetica, sans-serif; + font-weight: 300; + color: #000000; + letter-spacing: 0.00em; + font-size: 4.8rem; + line-height: 4.8rem; +} +.metro h2 { + font-family: 'Segoe UI Light_', 'Open Sans Light', Verdana, Arial, Helvetica, sans-serif; + font-weight: 300; + color: #000000; + letter-spacing: 0.00em; + font-size: 2.5rem; + line-height: 2.5rem; + letter-spacing: 0.01em; +} +.metro h3 { + font-family: 'Segoe UI Light_', 'Open Sans Light', Verdana, Arial, Helvetica, sans-serif; + font-weight: 300; + color: #000000; + letter-spacing: 0.00em; + font-size: 2.5rem; + line-height: 2.5rem; + letter-spacing: 0.01em; + color: rgba(0, 0, 0, 0.6); + font-size: 2.2rem; + line-height: 2.2rem; + font-weight: bold; +} +.metro h4 { + font-family: 'Segoe UI Semibold_', 'Open Sans Bold', Verdana, Arial, Helvetica, sans-serif; + font-weight: bold; + color: #000000; + font-size: 1.6rem; + line-height: 1.6rem; + letter-spacing: 0.02em; +} +.metro h5 { + font-family: 'Segoe UI Semibold_', 'Open Sans Bold', Verdana, Arial, Helvetica, sans-serif; + font-weight: bold; + color: #000000; + font-size: 1.6rem; + line-height: 1.6rem; + letter-spacing: 0.02em; + color: rgba(0, 0, 0, 0.6); + font-size: 1.4rem; + line-height: 1.4rem; +} +.metro h6 { + font-family: 'Segoe UI_', 'Open Sans', Verdana, Arial, Helvetica, sans-serif; + font-weight: normal; + font-style: normal; + color: #000000; + font-size: 11pt; + line-height: 15pt; + letter-spacing: 0.02em; + font-weight: bold; + font-size: 9pt; +} +.metro h1 small { + font-size: 19.25pt; +} +.metro h2 small { + font-size: 13.75pt; +} +.metro h3 small { + font-size: 11pt; +} +.metro h4 small { + font-size: 11pt; +} +.metro a, +.metro .link { + color: #2e92cf; +} +.metro a:hover, +.metro .link:hover { + color: rgba(45, 173, 237, 0.8); +} +.metro a:focus, +.metro .link:focus, +.metro a:active, +.metro .link:active { + color: rgba(45, 173, 237, 0.6); +} +.metro div, +.metro span, +.metro p { + font-family: 'Segoe UI_', 'Open Sans', Verdana, Arial, Helvetica, sans-serif; + font-weight: normal; + font-style: normal; +} +.metro p { + margin: 0 0 7pt; + font-family: 'Segoe UI_', 'Open Sans', Verdana, Arial, Helvetica, sans-serif; + font-weight: normal; + font-style: normal; + color: #000000; + font-size: 11pt; + line-height: 15pt; + letter-spacing: 0.02em; +} +.metro strong { + font-family: 'Segoe UI Semibold_', 'Open Sans Bold', Verdana, Arial, Helvetica, sans-serif; + font-weight: bold; +} +.metro .text-muted { + color: #999999 !important; +} +.metro .text-info { + color: #1ba1e2 !important; +} +.metro .text-alert { + color: #e51400 !important; +} +.metro .text-warning { + color: #fa6800 !important; +} +.metro .text-success { + color: #60a917 !important; +} +.metro abbr { + text-decoration: none; + border-bottom: 1px #999999 dotted; + cursor: help; +} +.metro address { + font-family: 'Segoe UI_', 'Open Sans', Verdana, Arial, Helvetica, sans-serif; + font-weight: normal; + font-style: normal; + margin-bottom: 7pt; +} +.metro blockquote { + margin: 0; + padding: 0; + border-left: 4px #999999 solid; + padding-left: 10px; +} +.metro blockquote small { + color: #999999; +} +.metro blockquote small:before { + content: "\2014 \00A0"; +} +.metro blockquote.place-right { + border: 0; + border-right: 4px #999999 solid; + padding-right: 10px; + text-align: right; +} +.metro blockquote.place-right small:before { + content: ""; +} +.metro blockquote.place-right small:after { + content: " \00A0 \2014"; +} +.metro .unstyled { + padding-left: 0; + list-style: none; +} +.metro .unstyled li ul, +.metro .unstyled li ol { + list-style: none; + padding-left: 25px; +} +.metro .inline { + list-style: none; +} +.metro .inline li { + display: inline-block; + padding-left: 5px; + padding-right: 5px; +} +.metro ul, +.metro ol { + margin-left: 5px; + padding-left: 15px; + font-family: 'Segoe UI_', 'Open Sans', Verdana, Arial, Helvetica, sans-serif; + font-weight: normal; + font-style: normal; + color: #000000; + font-size: 11pt; + line-height: 15pt; + letter-spacing: 0.02em; +} +.metro ul li, +.metro ol li { + line-height: 20px; +} +.metro ul li ul, +.metro ol li ul, +.metro ul li ol, +.metro ol li ol { + padding-left: 25px; +} +.metro ol.styled { + counter-reset: li; + margin-left: 0; + padding-left: 0; + font-family: 'Cambria_', 'PT Serif Caption', Verdana, Arial, Helvetica, sans-serif; + font-weight: normal; + font-style: normal; + font-size: 1.8rem; + line-height: 2rem; +} +.metro ol.styled > li { + position: relative; + margin: 0 0 6px 2em; + padding: 4px 12px; + list-style: none; +} +.metro ol.styled > li:before { + content: counter(li); + counter-increment: li; + position: absolute; + top: -2px; + left: -2em; + box-sizing: border-box; + width: 2em; + margin-right: 8px; + padding: 4px; + color: #fff; + background: #666; + font-weight: bold; + font-family: "Helvetica Neue", Arial, sans-serif; + text-align: center; +} +.metro ol.styled.rounded > li:before { + border-radius: 100%; +} +.metro dl dt, +.metro dl dd { + line-height: 20px; +} +.metro dl dt { + font-family: 'Segoe UI Semibold_', 'Open Sans Bold', Verdana, Arial, Helvetica, sans-serif; +} +.metro dl dd { + margin-left: 15px; +} +.metro dl.horizontal dt { + float: left; + width: 160px; + overflow: hidden; + clear: left; + text-align: right; + text-overflow: ellipsis; + white-space: nowrap; +} +.metro dl.horizontal dd { + margin-left: 180px; +} +.metro .prettyprint * { + font-family: 'Segoe UI_', 'Open Sans', Verdana, Arial, Helvetica, sans-serif; + font-weight: normal; + font-style: normal; + color: #000000; + font-size: 11pt; + line-height: 15pt; + letter-spacing: 0.02em; + font-family: 'Courier New', monospace; + font-size: .9em !important; + line-height: 10pt; +} +.metro .container { + margin: 0 auto; +} +.metro .page { + width: 100%; + min-height: 100%; + margin: 0; + padding: 0; +} +.metro .page:before, +.metro .page:after { + display: table; + content: ""; +} +.metro .page:after { + clear: both; +} +.metro .page .page-header .page-header-content { + min-height: auto; +} +.metro .page .page-header .page-header-content:before, +.metro .page .page-header .page-header-content:after { + display: table; + content: ""; +} +.metro .page .page-header .page-header-content:after { + clear: both; +} +.metro .page .page-header .page-header-content .branding { + display: inline-block; + width: auto; + padding: 10px 0; + margin-right: 20px; +} +.metro .page .page-header .page-header-content .branding .brand-title { + font-family: 'Segoe UI Light_', 'Open Sans Light', Verdana, Arial, Helvetica, sans-serif; + font-weight: 300; + color: #000000; + letter-spacing: 0.00em; + font-size: 2.5rem; + line-height: 2.5rem; + letter-spacing: 0.01em; + display: block; +} +.metro .page .page-header .page-header-content .branding .brand-slogan { + font-family: 'Segoe UI Semibold_', 'Open Sans Bold', Verdana, Arial, Helvetica, sans-serif; + font-weight: bold; + color: #000000; + font-size: 1.6rem; + line-height: 1.6rem; + letter-spacing: 0.02em; + color: rgba(0, 0, 0, 0.6); + font-size: 1.4rem; + line-height: 1.4rem; + font-weight: normal; + font-style: normal; + font-family: 'Segoe UI Light_', 'Open Sans Light', Verdana, Arial, Helvetica, sans-serif; + display: block; +} +.metro .page .page-header .page-header-content .branding .brand-title, +.metro .page .page-header .page-header-content .branding .brand-slogan { + margin: 0; +} +.metro .page .page-header .page-header-content .branding a + .brand-title, +.metro .page .page-header .page-header-content .branding a + .brand-slogan { + text-decoration: none !important; +} +.metro .page .page-region .page-region-content { + min-height: 500px; +} +.metro .page .page-region .page-region-content:before, +.metro .page .page-region .page-region-content:after { + display: table; + content: ""; +} +.metro .page .page-region .page-region-content:after { + clear: both; +} +.metro .page .page-footer .page-footer-content { + height: 100px; +} +.metro .page .page-footer .page-footer-content:before, +.metro .page .page-footer .page-footer-content:after { + display: table; + content: ""; +} +.metro .page .page-footer .page-footer-content:after { + clear: both; +} +.metro .page.secondary .page-region-content, +.metro .page.secondary .page-header-content { + padding-left: 80px; +} +.metro .app-bar { + position: fixed; + bottom: 0; + left: 0; + right: 0; + min-height: 100px; + background-color: #1d1d1d; + z-index: 1060; +} +.metro .charms { + position: fixed; + right: 0; + top: 0; + bottom: 0; + height: 100%; + min-width: 200px; + width: auto; + z-index: 1060; +} +.metro .charms.place-left { + left: 0; + right: auto; +} +.metro .message-dialog { + position: fixed; + left: 0; + right: 0; + height: auto; + min-height: 100px; + top: 30%; + padding: 10px 10px 0; + z-index: 1050; +} +.metro .error-bar, +.metro .warning-bar, +.metro .info-bar { + position: fixed; + top: 0; + left: 0; + right: 0; + padding: 10px 20px; + color: #fff; + min-height: 100px; + z-index: 1050; +} +.metro .error-bar { + background-color: #9a1616 !important; +} +.metro .warning-bar { + background-color: #bf5a15 !important; +} +.metro .info-bar { + background-color: #4390df !important; +} +.metro .span1, +.metro .size1 { + width: 60px !important; +} +.metro .span2, +.metro .size2 { + width: 140px !important; +} +.metro .span3, +.metro .size3 { + width: 220px !important; +} +.metro .span4, +.metro .size4 { + width: 300px !important; +} +.metro .span5, +.metro .size5 { + width: 380px !important; +} +.metro .span6, +.metro .size6 { + width: 460px !important; +} +.metro .span7, +.metro .size7 { + width: 540px !important; +} +.metro .span8, +.metro .size8 { + width: 620px !important; +} +.metro .span9, +.metro .size9 { + width: 700px !important; +} +.metro .span10, +.metro .size10 { + width: 780px !important; +} +.metro .span11, +.metro .size11 { + width: 860px !important; +} +.metro .span12, +.metro .size12 { + width: 940px !important; +} +.metro .offset1 { + margin-left: 80px !important; +} +.metro .offset1:not(:first-child) { + margin-left: 100px !important; +} +.metro .offset2 { + margin-left: 160px !important; +} +.metro .offset2:not(:first-child) { + margin-left: 180px !important; +} +.metro .offset3 { + margin-left: 240px !important; +} +.metro .offset3:not(:first-child) { + margin-left: 260px !important; +} +.metro .offset4 { + margin-left: 320px !important; +} +.metro .offset4:not(:first-child) { + margin-left: 340px !important; +} +.metro .offset5 { + margin-left: 400px !important; +} +.metro .offset5:not(:first-child) { + margin-left: 420px !important; +} +.metro .offset6 { + margin-left: 480px !important; +} +.metro .offset6:not(:first-child) { + margin-left: 500px !important; +} +.metro .offset7 { + margin-left: 560px !important; +} +.metro .offset7:not(:first-child) { + margin-left: 580px !important; +} +.metro .offset8 { + margin-left: 640px !important; +} +.metro .offset8:not(:first-child) { + margin-left: 660px !important; +} +.metro .offset9 { + margin-left: 720px !important; +} +.metro .offset9:not(:first-child) { + margin-left: 740px !important; +} +.metro .offset10 { + margin-left: 800px !important; +} +.metro .offset10:not(:first-child) { + margin-left: 820px !important; +} +.metro .offset11 { + margin-left: 880px !important; +} +.metro .offset11:not(:first-child) { + margin-left: 900px !important; +} +.metro .offset12 { + margin-left: 960px !important; +} +.metro .offset12:not(:first-child) { + margin-left: 980px !important; +} +.metro .grid { + margin-bottom: 20px; +} +.metro .grid .row { + display: block; + margin-top: 20px; +} +.metro .grid .row:before, +.metro .grid .row:after { + display: table; + content: ""; +} +.metro .grid .row:after { + clear: both; +} +.metro .grid .row [class*="span"] { + float: left; + min-height: 1px; + margin-left: 20px; +} +.metro .grid .row [class*="span"]:first-child { + margin-left: 0; +} +.metro .grid.fluid { + width: 100%; +} +.metro .grid.fluid .row .span1 { + width: 6.382978% !important; +} +.metro .grid.fluid .row .span2 { + width: 14.893615% !important; +} +.metro .grid.fluid .row .span3 { + width: 23.404252% !important; +} +.metro .grid.fluid .row .span4 { + width: 31.914889% !important; +} +.metro .grid.fluid .row .span5 { + width: 40.425526% !important; +} +.metro .grid.fluid .row .span6 { + width: 48.936163% !important; +} +.metro .grid.fluid .row .span7 { + width: 57.4468% !important; +} +.metro .grid.fluid .row .span8 { + width: 65.957437% !important; +} +.metro .grid.fluid .row .span9 { + width: 74.468074% !important; +} +.metro .grid.fluid .row .span10 { + width: 82.978711% !important; +} +.metro .grid.fluid .row .span11 { + width: 91.489348% !important; +} +.metro .grid.fluid .row .span12 { + width: 99.999985% !important; +} +.metro .grid.fluid .row [class*="span"] { + margin-left: 2.127659%; +} +.metro .grid.fluid .row [class*="span"]:first-child { + margin-left: 0; +} +.metro .grid.fluid .row .offset1 { + margin-left: 8.510637% !important; +} +.metro .grid.fluid .row .offset1:not(:first-child) { + margin-left: 10.638296% !important; +} +.metro .grid.fluid .row .offset2 { + margin-left: 17.021274% !important; +} +.metro .grid.fluid .row .offset2:not(:first-child) { + margin-left: 19.148933% !important; +} +.metro .grid.fluid .row .offset3 { + margin-left: 25.531911% !important; +} +.metro .grid.fluid .row .offset3:not(:first-child) { + margin-left: 27.65957% !important; +} +.metro .grid.fluid .row .offset4 { + margin-left: 34.042548% !important; +} +.metro .grid.fluid .row .offset4:not(:first-child) { + margin-left: 36.170207% !important; +} +.metro .grid.fluid .row .offset5 { + margin-left: 42.553185% !important; +} +.metro .grid.fluid .row .offset5:not(:first-child) { + margin-left: 44.680844% !important; +} +.metro .grid.fluid .row .offset6 { + margin-left: 51.063822% !important; +} +.metro .grid.fluid .row .offset6:not(:first-child) { + margin-left: 53.191481% !important; +} +.metro .grid.fluid .row .offset7 { + margin-left: 59.574459% !important; +} +.metro .grid.fluid .row .offset7:not(:first-child) { + margin-left: 61.702118% !important; +} +.metro .grid.fluid .row .offset8 { + margin-left: 68.085096% !important; +} +.metro .grid.fluid .row .offset8:not(:first-child) { + margin-left: 70.212755% !important; +} +.metro .grid.fluid .row .offset9 { + margin-left: 76.595733% !important; +} +.metro .grid.fluid .row .offset9:not(:first-child) { + margin-left: 78.723392% !important; +} +.metro .grid.fluid .row .offset10 { + margin-left: 85.10637% !important; +} +.metro .grid.fluid .row .offset10:not(:first-child) { + margin-left: 87.234029% !important; +} +.metro .grid.fluid .row .offset11 { + margin-left: 93.617007% !important; +} +.metro .grid.fluid .row .offset11:not(:first-child) { + margin-left: 95.744666% !important; +} +.metro .grid.fluid .row .offset12 { + margin-left: 102.127644% !important; +} +.metro .grid.fluid .row .offset12:not(:first-child) { + margin-left: 104.255303% !important; +} +.metro table { + max-width: 100%; + border-collapse: collapse; + border-spacing: 0; +} +.metro .table { + width: 100%; + margin-bottom: 14pt; +} +.metro .table th, +.metro .table td { + padding: 8px; + font-size: 14px; + line-height: 14pt; + vertical-align: top; + border-bottom: 1px #eaeaea solid; +} +.metro .table th[class*="span"], +.metro .table td[class*="span"] { + display: table-cell !important; + float: none !important; + margin: 0; +} +.metro .table thead th { + vertical-align: bottom; +} +.metro .table thead th, +.metro .table thead td { + border-bottom: 1px solid #111111; +} +.metro .table tbody tr:last-child td { + border-bottom: 0; +} +.metro .table tbody + tbody { + border-top: 2px solid #eaeaea; +} +.metro .table tfoot th, +.metro .table tfoot td { + border-top: 1px solid #111111; +} +.metro .table .table { + background-color: #bfbfbf; +} +.metro .table.condensed th, +.metro .table.condensed td { + padding: 4px 5px; +} +.metro .table.condensed th .input-control, +.metro .table.condensed td .input-control { + margin: 0; +} +.metro .table.super-condensed th, +.metro .table.super-condensed td { + padding: 2px; +} +.metro .table.super-condensed th .input-control, +.metro .table.super-condensed td .input-control { + margin: 0; +} +.metro .table.striped tbody tr:nth-child(odd) { + background: #eeeeee; +} +.metro .table.bordered { + border: 1px #eaeaea solid; + border-left: 0; +} +.metro .table.bordered td, +.metro .table.bordered th { + border-left: 1px #eaeaea solid; + border-bottom: 1px #eaeaea solid; +} +.metro .table.no-border td, +.metro .table.no-border th { + border: 0; +} +.metro .table.border { + border: 1px #eaeaea solid !important; +} +.metro .table.hovered tbody tr:hover { + background-color: rgba(28, 183, 236, 0.1); +} +.metro .table tr.success { + background-color: #60a917 !important; +} +.metro .table tr.error { + background-color: #e51400 !important; +} +.metro .table tr.warning { + background-color: #fa6800 !important; +} +.metro .table tr.info { + background-color: #4390df !important; +} +.metro .table tr.info td, +.metro .table tr.warning td, +.metro .table tr.error td, +.metro .table tr.success td, +.metro .table tr.info td *, +.metro .table tr.warning td *, +.metro .table tr.error td *, +.metro .table tr.success td * { + color: #ffffff !important; +} +.metro .table tr.selected { + background-color: rgba(28, 183, 236, 0.1); +} +.metro .button { + padding: 4px 12px; + text-align: center; + vertical-align: middle !important; + background-color: #d9d9d9; + border: 1px transparent solid; + color: #222222; + border-radius: 0; + cursor: pointer; + display: inline-block; + outline: none; + font-family: 'Segoe UI Light_', 'Open Sans Light', Verdana, Arial, Helvetica, sans-serif; + font-size: 14px; + line-height: 16px; + margin: auto; +} +.metro .button.default { + background-color: #008287; + color: #fff; +} +.metro .button:focus { + outline: 0; + border: 1px #353535 dotted; +} +.metro .button:disabled, +.metro .button.disabled { + background-color: #eaeaea !important; + color: #bebebe !important; + cursor: not-allowed !important; +} +.metro .button * { + color: inherit; +} +.metro .button *:hover { + color: inherit; +} +.metro a.button:hover { + color: inherit; +} +.metro a.button * { + color: inherit; +} +.metro a.button *:hover { + color: inherit; +} +.metro .button.primary { + background-color: #16499a !important; + color: #ffffff !important; +} +.metro .button.info { + background-color: #4390df !important; + color: #ffffff !important; +} +.metro .button.success { + background-color: #60a917 !important; + color: #ffffff !important; +} +.metro .button.warning { + background-color: #fa6800 !important; + color: #ffffff !important; +} +.metro .button.danger { + background-color: #9a1616 !important; + color: #ffffff !important; +} +.metro .button.inverse { + background-color: #1d1d1d !important; + color: #ffffff !important; +} +.metro .button.link { + background-color: transparent !important; + color: #2e92cf !important; +} +.metro .button.link:hover { + text-decoration: underline; +} +.metro .button.link:disabled, +.metro .button.link.disabled { + background-color: transparent !important; + color: #bebebe !important; + cursor: not-allowed !important; +} +.metro .button.link [class*="icon-"] { + text-decoration: none !important; +} +.metro button { + padding: 4px 12px; + text-align: center; + vertical-align: middle !important; + background-color: #d9d9d9; + border: 1px transparent solid; + color: #222222; + border-radius: 0; + cursor: pointer; + display: inline-block; + outline: none; + font-family: 'Segoe UI Light_', 'Open Sans Light', Verdana, Arial, Helvetica, sans-serif; + font-size: 14px; + line-height: 16px; + margin: auto; +} +.metro button.default { + background-color: #008287; + color: #fff; +} +.metro button:focus { + outline: 0; + border: 1px #353535 dotted; +} +.metro button:disabled, +.metro button.disabled { + background-color: #eaeaea !important; + color: #bebebe !important; + cursor: not-allowed !important; +} +.metro button * { + color: inherit; +} +.metro button *:hover { + color: inherit; +} +.metro button.primary { + background-color: #16499a !important; + color: #ffffff !important; +} +.metro button.info { + background-color: #4390df !important; + color: #ffffff !important; +} +.metro button.success { + background-color: #60a917 !important; + color: #ffffff !important; +} +.metro button.warning { + background-color: #fa6800 !important; + color: #ffffff !important; +} +.metro button.danger { + background-color: #9a1616 !important; + color: #ffffff !important; +} +.metro button.inverse { + background-color: #1d1d1d !important; + color: #ffffff !important; +} +.metro button.link { + background-color: transparent !important; + color: #2e92cf !important; +} +.metro button.link:hover { + text-decoration: underline; +} +.metro button.link:disabled, +.metro button.link.disabled { + background-color: transparent !important; + color: #bebebe !important; + cursor: not-allowed !important; +} +.metro button.link [class*="icon-"] { + text-decoration: none !important; +} +.metro button:active { + background-color: #1d1d1d !important; + color: #ffffff !important; + border-color: transparent; +} +.metro button.large { + padding: 11px 19px; + font-size: 17.5px; +} +.metro button.small { + padding: 2px 10px; + font-size: 11.9px; +} +.metro button.mini { + padding: 0px 6px; + font-size: 10.5px; +} +.metro .command-button { + padding: 4px 12px; + text-align: center; + vertical-align: middle !important; + background-color: #d9d9d9; + border: 1px transparent solid; + color: #222222; + border-radius: 0; + cursor: pointer; + display: inline-block; + outline: none; + font-family: 'Segoe UI Light_', 'Open Sans Light', Verdana, Arial, Helvetica, sans-serif; + font-size: 14px; + line-height: 16px; + margin: auto; + text-align: left; + font-size: 14pt; + width: auto; +} +.metro .command-button.default { + background-color: #008287; + color: #fff; +} +.metro .command-button:focus { + outline: 0; + border: 1px #353535 dotted; +} +.metro .command-button:disabled, +.metro .command-button.disabled { + background-color: #eaeaea !important; + color: #bebebe !important; + cursor: not-allowed !important; +} +.metro .command-button * { + color: inherit; +} +.metro .command-button *:hover { + color: inherit; +} +.metro .command-button.primary { + background-color: #16499a !important; + color: #ffffff !important; +} +.metro .command-button.info { + background-color: #4390df !important; + color: #ffffff !important; +} +.metro .command-button.success { + background-color: #60a917 !important; + color: #ffffff !important; +} +.metro .command-button.warning { + background-color: #fa6800 !important; + color: #ffffff !important; +} +.metro .command-button.danger { + background-color: #9a1616 !important; + color: #ffffff !important; +} +.metro .command-button.inverse { + background-color: #1d1d1d !important; + color: #ffffff !important; +} +.metro .command-button.link { + background-color: transparent !important; + color: #2e92cf !important; +} +.metro .command-button.link:hover { + text-decoration: underline; +} +.metro .command-button.link:disabled, +.metro .command-button.link.disabled { + background-color: transparent !important; + color: #bebebe !important; + cursor: not-allowed !important; +} +.metro .command-button.link [class*="icon-"] { + text-decoration: none !important; +} +.metro .command-button:active { + background-color: #1d1d1d !important; + color: #ffffff !important; + border-color: transparent; +} +.metro .command-button.large { + padding: 11px 19px; + font-size: 17.5px; +} +.metro .command-button.small { + padding: 2px 10px; + font-size: 11.9px; +} +.metro .command-button.mini { + padding: 0px 6px; + font-size: 10.5px; +} +.metro .command-button small { + display: block; + font-family: 'Segoe UI_', 'Open Sans', Verdana, Arial, Helvetica, sans-serif; + color: #000000; + font-size: 1.3rem; + line-height: 1.5rem; + font-weight: normal !important; + color: rgba(0, 0, 0, 0.6); + color: inherit; +} +.metro .command-button [class*="icon-"] { + font-size: 1.7em; + margin-top: 0; +} +.metro .command-button [class*="icon-"].on-left { + float: left; +} +.metro .command-button [class*="icon-"].on-right { + float: right; +} +.metro .command-button [class*="icon-"].on-left + small { + margin-left: 40px; +} +.metro .command-button [class*="icon-"].on-right + small { + margin-right: 40px; +} +.metro .toolbar { + width: auto; + margin-bottom: 10px; +} +.metro .toolbar:before, +.metro .toolbar:after { + display: table; + content: ""; +} +.metro .toolbar:after { + clear: both; +} +.metro .toolbar.transparent button, +.metro .toolbar .transparent button, +.metro .toolbar.transparent .button, +.metro .toolbar .transparent .button { + background-color: transparent; +} +.metro .toolbar.transparent button:hover, +.metro .toolbar .transparent button:hover, +.metro .toolbar.transparent .button:hover, +.metro .toolbar .transparent .button:hover { + background-color: #eeeeee; + border: 1px #ffffff solid; +} +.metro .toolbar button, +.metro .toolbar .button { + color: inherit; + padding: 4px 8px; + display: block; + float: left; + font-size: 12pt; + line-height: 12pt; + margin-right: 2px; +} +.metro .toolbar button:last-child, +.metro .toolbar .button:last-child { + margin-right: 0; +} +.metro .toolbar.no-spaces button, +.metro .toolbar .toolbar-group.no-spaces button, +.metro .toolbar.no-spaces .button, +.metro .toolbar .toolbar-group.no-spaces .button { + margin-right: 0; +} +.metro .toolbar.no-spaces button:active, +.metro .toolbar .toolbar-group.no-spaces button:active, +.metro .toolbar.no-spaces .button:active, +.metro .toolbar .toolbar-group.no-spaces .button:active { + background-color: #1d1d1d; + color: #ffffff; + top: auto; + left: auto; +} +.metro .toolbar .divider { + display: block; + float: left; + height: 12px; + width: 1px; + margin: 8px 8px; + background-color: #999999; + vertical-align: middle !important; +} +.metro .toolbar .toolbar-group { + padding: 0; + margin: 0; + display: inline-block; + margin-right: 10px; + color: inherit; +} +.metro .toolbar .toolbar-group:before, +.metro .toolbar .toolbar-group:after { + display: table; + content: ""; +} +.metro .toolbar .toolbar-group:after { + clear: both; +} +.metro .button-dropdown { + position: relative; + display: inline-block; +} +.metro .button-dropdown .dropdown-menu.place-right { + right: 0; + left: auto; +} +.metro button.dropdown-toggle, +.metro .button.dropdown-toggle { + padding-right: 16px; + border: 0; +} +.metro button.dropdown-toggle:before, +.metro .button.dropdown-toggle:before { + position: absolute; + font-family: metroSysIcons; + font-size: 12px; + right: 1px; + z-index: 2; +} +.metro .image-button { + padding: 4px 12px; + text-align: center; + vertical-align: middle !important; + background-color: #d9d9d9; + border: 1px transparent solid; + color: #222222; + border-radius: 0; + cursor: pointer; + display: inline-block; + outline: none; + font-family: 'Segoe UI Light_', 'Open Sans Light', Verdana, Arial, Helvetica, sans-serif; + font-size: 14px; + line-height: 16px; + margin: auto; + position: relative; + border: 0; + padding-right: 45px; +} +.metro .image-button.default { + background-color: #008287; + color: #fff; +} +.metro .image-button:focus { + outline: 0; + border: 1px #353535 dotted; +} +.metro .image-button:disabled, +.metro .image-button.disabled { + background-color: #eaeaea !important; + color: #bebebe !important; + cursor: not-allowed !important; +} +.metro .image-button * { + color: inherit; +} +.metro .image-button *:hover { + color: inherit; +} +.metro .image-button.primary { + background-color: #16499a !important; + color: #ffffff !important; +} +.metro .image-button.info { + background-color: #4390df !important; + color: #ffffff !important; +} +.metro .image-button.success { + background-color: #60a917 !important; + color: #ffffff !important; +} +.metro .image-button.warning { + background-color: #fa6800 !important; + color: #ffffff !important; +} +.metro .image-button.danger { + background-color: #9a1616 !important; + color: #ffffff !important; +} +.metro .image-button.inverse { + background-color: #1d1d1d !important; + color: #ffffff !important; +} +.metro .image-button.link { + background-color: transparent !important; + color: #2e92cf !important; +} +.metro .image-button.link:hover { + text-decoration: underline; +} +.metro .image-button.link:disabled, +.metro .image-button.link.disabled { + background-color: transparent !important; + color: #bebebe !important; + cursor: not-allowed !important; +} +.metro .image-button.link [class*="icon-"] { + text-decoration: none !important; +} +.metro .image-button:active { + background-color: #1d1d1d !important; + color: #ffffff !important; + border-color: transparent; +} +.metro .image-button.large { + padding: 11px 19px; + font-size: 17.5px; +} +.metro .image-button.small { + padding: 2px 10px; + font-size: 11.9px; +} +.metro .image-button.mini { + padding: 0px 6px; + font-size: 10.5px; +} +.metro .image-button img, +.metro .image-button:active img, +.metro .image-button [class*="icon-"] { + display: block; + position: absolute; + float: right; + right: 0; + top: 0; + padding: 5px; + height: 100%; + margin-left: 0px; + box-sizing: border-box; + border: 1px transparent solid; + z-index: 2; + text-align: center; +} +.metro .image-button [class*="icon-"] { + vertical-align: middle !important; + font-size: 12pt; + line-height: 12pt; + top: 0; + right: 0; +} +.metro .image-button.image-left { + padding-right: 12px; + padding-left: 45px; +} +.metro .image-button.image-left img, +.metro .image-button.image-left:active img, +.metro .image-button.image-left [class*="icon-"] { + right: auto; + left: 0; +} +.metro .image-button:focus { + border: 0; +} +.metro .shortcut { + padding: 4px 12px; + vertical-align: middle !important; + background-color: #d9d9d9; + border: 1px transparent solid; + color: #222222; + border-radius: 0; + cursor: pointer; + outline: none; + font-family: 'Segoe UI Light_', 'Open Sans Light', Verdana, Arial, Helvetica, sans-serif; + font-size: 14px; + line-height: 16px; + margin: auto; + height: 92px; + width: 92px; + text-align: center; + font-size: 12pt; + border: 0; + border-bottom: 2px solid transparent; + display: inline-block; + position: relative; +} +.metro .shortcut.default { + background-color: #008287; + color: #fff; +} +.metro .shortcut:focus { + outline: 0; + border: 1px #353535 dotted; +} +.metro .shortcut:disabled, +.metro .shortcut.disabled { + background-color: #eaeaea !important; + color: #bebebe !important; + cursor: not-allowed !important; +} +.metro .shortcut * { + color: inherit; +} +.metro .shortcut *:hover { + color: inherit; +} +.metro .shortcut.primary { + background-color: #16499a !important; + color: #ffffff !important; +} +.metro .shortcut.info { + background-color: #4390df !important; + color: #ffffff !important; +} +.metro .shortcut.success { + background-color: #60a917 !important; + color: #ffffff !important; +} +.metro .shortcut.warning { + background-color: #fa6800 !important; + color: #ffffff !important; +} +.metro .shortcut.danger { + background-color: #9a1616 !important; + color: #ffffff !important; +} +.metro .shortcut.inverse { + background-color: #1d1d1d !important; + color: #ffffff !important; +} +.metro .shortcut.link { + background-color: transparent !important; + color: #2e92cf !important; +} +.metro .shortcut.link:hover { + text-decoration: underline; +} +.metro .shortcut.link:disabled, +.metro .shortcut.link.disabled { + background-color: transparent !important; + color: #bebebe !important; + cursor: not-allowed !important; +} +.metro .shortcut.link [class*="icon-"] { + text-decoration: none !important; +} +.metro .shortcut:active { + background-color: #1d1d1d !important; + color: #ffffff !important; + border-color: transparent; +} +.metro .shortcut.large { + padding: 11px 19px; + font-size: 17.5px; +} +.metro .shortcut.small { + padding: 2px 10px; + font-size: 11.9px; +} +.metro .shortcut.mini { + padding: 0px 6px; + font-size: 10.5px; +} +.metro .shortcut [class*="icon-"] { + display: block; + margin: 10px; + font-size: 1.5em; +} +.metro .shortcut small { + display: block; + position: absolute; + top: 0; + right: 0; + padding: 2px 4px; + min-height: 10px; + min-width: 10px; + text-align: center; + vertical-align: middle; + font-family: 'Segoe UI Semibold_', 'Open Sans Bold', Verdana, Arial, Helvetica, sans-serif; +} +.metro .shortcut:hover { + border-color: #e51400; +} +.metro .shortcut.link { + border: 1px #2e92cf solid; + text-decoration: none !important; +} +.metro .shortcut.link:hover { + border-bottom-width: 2px; +} +.metro a.shortcut { + padding: 12px 0; +} +.metro a.shortcut:hover { + color: inherit; +} +.metro .button-set:before, +.metro .button-set:after { + display: table; + content: ""; +} +.metro .button-set:after { + clear: both; +} +.metro .button-set .button, +.metro .button-set button { + display: block; + float: left; + margin: 0; + margin-right: 2px; +} +.metro .button-set .button.active, +.metro .button-set button.active { + background-color: #555555; + color: #ffffff; +} +.metro .button-set.no-spaces button, +.metro .button-set.no-spaces .button { + margin-right: 0 !important; +} +.metro .button-set.no-spaces button:active, +.metro .button-set.no-spaces .button:active { + background-color: #1d1d1d; + color: #ffffff; + top: auto; + left: auto; +} +.metro .button-set.transparent .button, +.metro .button-set.transparent button { + background-color: transparent; +} +.metro .button-set.transparent .button.active, +.metro .button-set.transparent button.active { + background-color: #555555; + color: #ffffff; +} +.metro .button:active { + background-color: #1d1d1d !important; + color: #ffffff !important; + border-color: transparent; +} +.metro .button.large, +.metro button.large { + padding: 11px 19px; + font-size: 17.5px; +} +.metro .button.small, +.metro button.small { + padding: 2px 10px; + font-size: 11.9px; +} +.metro .button.mini, +.metro button.mini { + padding: 0px 6px; + font-size: 10.5px; +} +.metro .breadcrumbs { + margin: 0.2em; +} +.metro .breadcrumbs ul { + margin: 0; + padding: 0; + list-style: none; + overflow: hidden; + width: 100%; +} +.metro .breadcrumbs ul li { + float: left; + margin: 0 .2em 0 1em; +} +.metro .breadcrumbs ul li:first-child { + margin-left: 0 !important; +} +.metro .breadcrumbs ul li:first-child a:before { + content: normal; +} +.metro .breadcrumbs ul li:last-child { + background: none; +} +.metro .breadcrumbs ul li:last-child a { + color: #1d1d1d; +} +.metro .breadcrumbs ul li:last-child:after, +.metro .breadcrumbs ul li:last-child:before { + content: normal; +} +.metro .breadcrumbs ul a { + background: #d9d9d9; + padding: .3em 1em; + float: left; + text-decoration: none; + color: #2e92cf; + position: relative; +} +.metro .breadcrumbs ul a:hover { + background: #1ba1e2; + color: #ffffff; +} +.metro .breadcrumbs ul a:hover:before { + border-color: #1ba1e2 #1ba1e2 #1ba1e2 transparent; +} +.metro .breadcrumbs ul a:hover:after { + border-left-color: #1ba1e2; +} +.metro .breadcrumbs ul a:before { + content: ""; + position: absolute; + top: 50%; + margin-top: -1.5em; + border-width: 1.5em 0 1.5em 1em; + border-style: solid; + border-color: #ddd #ddd #ddd transparent; + left: -1em; + margin-left: 1px; +} +.metro .breadcrumbs ul a:after { + content: ""; + position: absolute; + top: 50%; + margin-top: -1.5em; + border-top: 1.5em solid transparent; + border-bottom: 1.5em solid transparent; + border-left: 1em solid #ddd; + right: -1em; + margin-right: 1px; +} +.metro .breadcrumbs ul .active, +.metro .breadcrumbs ul .active:hover { + background: none; +} +.metro .breadcrumbs ul .active a, +.metro .breadcrumbs ul .active:hover a { + color: #1d1d1d; +} +.metro .breadcrumbs ul .active:hover a { + color: #ffffff; +} +.metro .breadcrumbs ul .active:after, +.metro .breadcrumbs ul .active:before { + content: normal; +} +.metro .breadcrumbs.small li { + margin: 0 .2em 0 .8em; +} +.metro .breadcrumbs.small a { + padding: .2em 1em; + font-size: 11.9px; +} +.metro .breadcrumbs.mini li { + margin: 0 .2em 0 .6em; +} +.metro .breadcrumbs.mini a { + padding: .1em 1em; + font-size: 10.5px; +} +.metro form { + margin: 0 0 14pt; +} +.metro fieldset { + margin: 0; + padding: 0; + border: 0; +} +.metro legend { + display: block; + width: 100%; + padding: 0; + margin-bottom: 14pt; + font-size: 16.5pt; + line-height: 28pt; + color: #333333; + border: 0; + border-bottom: 1px solid #e5e5e5; +} +.metro legend small { + font-size: 10.5pt; + color: #999999; +} +.metro label { + display: block; + margin: 5px 0; +} +.metro .input-control.checkbox, +.metro .input-control.radio, +.metro .input-control.switch, +.metro .input-control.text, +.metro .input-control.password, +.metro .input-control.select, +.metro .input-control.textarea { + display: inline-block; + cursor: pointer; + position: relative; + margin-bottom: 7pt; +} +.metro .input-control.checkbox input[type="checkbox"], +.metro .input-control.radio input[type="checkbox"], +.metro .input-control.checkbox input[type="radio"], +.metro .input-control.radio input[type="radio"] { + position: absolute; + opacity: 0; + width: 1px; + height: 1px; +} +.metro .input-control.checkbox input[type="checkbox"]:focus ~ .check, +.metro .input-control.radio input[type="checkbox"]:focus ~ .check, +.metro .input-control.checkbox input[type="radio"]:focus ~ .check, +.metro .input-control.radio input[type="radio"]:focus ~ .check { + outline: 1px #999999 dotted !important; +} +.metro .input-control.checkbox .caption, +.metro .input-control.radio .caption { + margin: 0 5px; +} +.metro .input-control.checkbox .check, +.metro .input-control.radio .check { + width: 16px; + height: 16px; + background-color: #ffffff; + border: 2px #d9d9d9 solid; + padding: 0; + margin: 0 5px 0 0; + position: relative; + display: inline-block; + vertical-align: middle; +} +.metro .input-control.checkbox.text-left .check, +.metro .input-control.radio.text-left .check { + margin: 0 0 0 5px; +} +.metro .input-control.checkbox:hover .check, +.metro .input-control.radio:hover .check { + border-color: #919191; +} +.metro .input-control.checkbox .check:active, +.metro .input-control.radio .check:active { + border-color: #1e1e1e; +} +.metro .input-control.checkbox .check:focus, +.metro .input-control.radio .check:focus { + border-color: #919191; +} +.metro .input-control.checkbox .check:after, +.metro .input-control.radio .check:after { + position: absolute; + font-family: metroSysIcons; + font-size: 9pt; + line-height: 9pt; +} +.metro .input-control.checkbox input[type="checkbox"]:checked ~ .check:after, +.metro .input-control.radio input[type="checkbox"]:checked ~ .check:after, +.metro .input-control.checkbox input[type="radio"]:checked ~ .check:after, +.metro .input-control.radio input[type="radio"]:checked ~ .check:after { + content: "\e003"; + margin: 2px; + top: 0; + color: #1d1d1d; +} +.metro .input-control.checkbox input[type="checkbox"]:disabled ~ .check, +.metro .input-control.radio input[type="checkbox"]:disabled ~ .check, +.metro .input-control.checkbox input[type="radio"]:disabled ~ .check, +.metro .input-control.radio input[type="radio"]:disabled ~ .check { + border-color: #d9d9d9; + background-color: #e6e6e6; +} +.metro .input-control.checkbox input[type="checkbox"]:disabled ~ .check:after, +.metro .input-control.radio input[type="checkbox"]:disabled ~ .check:after, +.metro .input-control.checkbox input[type="radio"]:disabled ~ .check:after, +.metro .input-control.radio input[type="radio"]:disabled ~ .check:after { + color: #8a8a8a; +} +.metro .input-control.checkbox input[data-show="intermediate"] ~ .check:after, +.metro .input-control.radio input[data-show="intermediate"] ~ .check:after, +.metro .input-control.checkbox input[data-show="intermediate"]:checked ~ .check:after, +.metro .input-control.radio input[data-show="intermediate"]:checked ~ .check:after { + display: block; + content: "" !important; + width: 10px; + height: 10px; + background-color: #1d1d1d; + margin: 3px; +} +.metro .input-control.checkbox input[data-show="intermediate"]:disabled ~ .check:after, +.metro .input-control.radio input[data-show="intermediate"]:disabled ~ .check:after { + background-color: #8a8a8a; +} +.metro .input-control.radio .check { + border-radius: 50%; +} +.metro .input-control.radio.default-style input[type="radio"]:checked ~ .check:after { + display: block; + content: "" !important; + width: 10px; + height: 10px; + border-radius: 50%; + background-color: #1d1d1d; + margin: 3px; +} +.metro .input-control.radio.default-style input[type="radio"]:checked:disabled ~ .check:after { + background-color: #8a8a8a; +} +.metro .input-control.switch input[type="checkbox"] { + position: absolute; + opacity: 0; + width: 1px; + height: 1px; +} +.metro .input-control.switch .caption { + margin: 0 5px; +} +.metro .input-control.switch .check { + position: relative; + width: 45px; + height: 16px; + outline: 2px #a6a6a6 solid; + border: 1px #fff solid; + cursor: pointer; + background: #A6A6A6; + z-index: 1; + display: inline-block; + vertical-align: middle; +} +.metro .input-control.switch .check:after { + position: absolute; + left: -1px; + top: -1px; + display: block; + content: ""; + width: 9px; + height: 16px; + outline: 2px #333 solid; + border: 1px #333 solid; + cursor: pointer; + background: #333; + z-index: 2; +} +.metro .input-control.switch input[type="checkbox"]:focus ~ .check, +.metro .input-control.switch input[type="radio"]:focus ~ .check { + outline: 1px #999999 dotted !important; +} +.metro .input-control.switch input[type="checkbox"]:checked ~ .check { + background: #008287; +} +.metro .input-control.switch input[type="checkbox"]:checked ~ .check:after { + left: auto; + right: -1px; +} +.metro .input-control.switch input[type="checkbox"]:disabled ~ .check { + background-color: #e6e6e6; + border-color: #ffffff; +} +.metro .input-control.switch input[type="checkbox"]:disabled ~ .check:after { + background-color: #8a8a8a; + outline-color: #8a8a8a; + border-color: #8a8a8a; +} +.metro .input-control.text, +.metro .input-control.password, +.metro .input-control.file, +.metro .input-control.email, +.metro .input-control.tel, +.metro .input-control.number { + display: inline-block; + cursor: pointer; + position: relative; + background-color: #fff; + outline: 0; + height: 34px; + width: 100%; +} +.metro .input-control.text .btn-clear, +.metro .input-control.password .btn-clear, +.metro .input-control.file .btn-clear, +.metro .input-control.email .btn-clear, +.metro .input-control.tel .btn-clear, +.metro .input-control.number .btn-clear, +.metro .input-control.text .btn-reveal, +.metro .input-control.password .btn-reveal, +.metro .input-control.file .btn-reveal, +.metro .input-control.email .btn-reveal, +.metro .input-control.tel .btn-reveal, +.metro .input-control.number .btn-reveal, +.metro .input-control.text .btn-date, +.metro .input-control.password .btn-date, +.metro .input-control.file .btn-date, +.metro .input-control.email .btn-date, +.metro .input-control.tel .btn-date, +.metro .input-control.number .btn-date, +.metro .input-control.text .btn-file, +.metro .input-control.password .btn-file, +.metro .input-control.file .btn-file, +.metro .input-control.email .btn-file, +.metro .input-control.tel .btn-file, +.metro .input-control.number .btn-file, +.metro .input-control.text .btn-search, +.metro .input-control.password .btn-search, +.metro .input-control.file .btn-search, +.metro .input-control.email .btn-search, +.metro .input-control.tel .btn-search, +.metro .input-control.number .btn-search { + background-color: #F0F0F0; + position: absolute; + top: 5px; + z-index: 2; + border: 0; + right: 4px; + width: 24px; + height: 24px; + min-height: 1px; + min-width: 1px; + padding: 0; + margin: 0; + display: none; +} +.metro .input-control.text .btn-clear:after, +.metro .input-control.password .btn-clear:after, +.metro .input-control.file .btn-clear:after, +.metro .input-control.email .btn-clear:after, +.metro .input-control.tel .btn-clear:after, +.metro .input-control.number .btn-clear:after, +.metro .input-control.text .btn-reveal:after, +.metro .input-control.password .btn-reveal:after, +.metro .input-control.file .btn-reveal:after, +.metro .input-control.email .btn-reveal:after, +.metro .input-control.tel .btn-reveal:after, +.metro .input-control.number .btn-reveal:after, +.metro .input-control.text .btn-date:after, +.metro .input-control.password .btn-date:after, +.metro .input-control.file .btn-date:after, +.metro .input-control.email .btn-date:after, +.metro .input-control.tel .btn-date:after, +.metro .input-control.number .btn-date:after, +.metro .input-control.text .btn-file:after, +.metro .input-control.password .btn-file:after, +.metro .input-control.file .btn-file:after, +.metro .input-control.email .btn-file:after, +.metro .input-control.tel .btn-file:after, +.metro .input-control.number .btn-file:after, +.metro .input-control.text .btn-search:after, +.metro .input-control.password .btn-search:after, +.metro .input-control.file .btn-search:after, +.metro .input-control.email .btn-search:after, +.metro .input-control.tel .btn-search:after, +.metro .input-control.number .btn-search:after { + font-family: metroSysIcons; + font-size: 1em; +} +.metro .input-control.text .btn-clear:not(:disabled):active, +.metro .input-control.password .btn-clear:not(:disabled):active, +.metro .input-control.file .btn-clear:not(:disabled):active, +.metro .input-control.email .btn-clear:not(:disabled):active, +.metro .input-control.tel .btn-clear:not(:disabled):active, +.metro .input-control.number .btn-clear:not(:disabled):active, +.metro .input-control.text .btn-reveal:not(:disabled):active, +.metro .input-control.password .btn-reveal:not(:disabled):active, +.metro .input-control.file .btn-reveal:not(:disabled):active, +.metro .input-control.email .btn-reveal:not(:disabled):active, +.metro .input-control.tel .btn-reveal:not(:disabled):active, +.metro .input-control.number .btn-reveal:not(:disabled):active, +.metro .input-control.text .btn-date:not(:disabled):active, +.metro .input-control.password .btn-date:not(:disabled):active, +.metro .input-control.file .btn-date:not(:disabled):active, +.metro .input-control.email .btn-date:not(:disabled):active, +.metro .input-control.tel .btn-date:not(:disabled):active, +.metro .input-control.number .btn-date:not(:disabled):active, +.metro .input-control.text .btn-file:not(:disabled):active, +.metro .input-control.password .btn-file:not(:disabled):active, +.metro .input-control.file .btn-file:not(:disabled):active, +.metro .input-control.email .btn-file:not(:disabled):active, +.metro .input-control.tel .btn-file:not(:disabled):active, +.metro .input-control.number .btn-file:not(:disabled):active, +.metro .input-control.text .btn-search:not(:disabled):active, +.metro .input-control.password .btn-search:not(:disabled):active, +.metro .input-control.file .btn-search:not(:disabled):active, +.metro .input-control.email .btn-search:not(:disabled):active, +.metro .input-control.tel .btn-search:not(:disabled):active, +.metro .input-control.number .btn-search:not(:disabled):active { + background-color: #1d1d1d; + color: #ffffff; +} +.metro .input-control.text .btn-clear:active, +.metro .input-control.password .btn-clear:active, +.metro .input-control.file .btn-clear:active, +.metro .input-control.email .btn-clear:active, +.metro .input-control.tel .btn-clear:active, +.metro .input-control.number .btn-clear:active, +.metro .input-control.text .btn-reveal:active, +.metro .input-control.password .btn-reveal:active, +.metro .input-control.file .btn-reveal:active, +.metro .input-control.email .btn-reveal:active, +.metro .input-control.tel .btn-reveal:active, +.metro .input-control.number .btn-reveal:active, +.metro .input-control.text .btn-date:active, +.metro .input-control.password .btn-date:active, +.metro .input-control.file .btn-date:active, +.metro .input-control.email .btn-date:active, +.metro .input-control.tel .btn-date:active, +.metro .input-control.number .btn-date:active, +.metro .input-control.text .btn-file:active, +.metro .input-control.password .btn-file:active, +.metro .input-control.file .btn-file:active, +.metro .input-control.email .btn-file:active, +.metro .input-control.tel .btn-file:active, +.metro .input-control.number .btn-file:active, +.metro .input-control.text .btn-search:active, +.metro .input-control.password .btn-search:active, +.metro .input-control.file .btn-search:active, +.metro .input-control.email .btn-search:active, +.metro .input-control.tel .btn-search:active, +.metro .input-control.number .btn-search:active { + left: auto; +} +.metro .input-control.text .btn-clear:focus, +.metro .input-control.password .btn-clear:focus, +.metro .input-control.file .btn-clear:focus, +.metro .input-control.email .btn-clear:focus, +.metro .input-control.tel .btn-clear:focus, +.metro .input-control.number .btn-clear:focus, +.metro .input-control.text .btn-reveal:focus, +.metro .input-control.password .btn-reveal:focus, +.metro .input-control.file .btn-reveal:focus, +.metro .input-control.email .btn-reveal:focus, +.metro .input-control.tel .btn-reveal:focus, +.metro .input-control.number .btn-reveal:focus, +.metro .input-control.text .btn-date:focus, +.metro .input-control.password .btn-date:focus, +.metro .input-control.file .btn-date:focus, +.metro .input-control.email .btn-date:focus, +.metro .input-control.tel .btn-date:focus, +.metro .input-control.number .btn-date:focus, +.metro .input-control.text .btn-file:focus, +.metro .input-control.password .btn-file:focus, +.metro .input-control.file .btn-file:focus, +.metro .input-control.email .btn-file:focus, +.metro .input-control.tel .btn-file:focus, +.metro .input-control.number .btn-file:focus, +.metro .input-control.text .btn-search:focus, +.metro .input-control.password .btn-search:focus, +.metro .input-control.file .btn-search:focus, +.metro .input-control.email .btn-search:focus, +.metro .input-control.tel .btn-search:focus, +.metro .input-control.number .btn-search:focus { + outline: 1px #ccc dotted ; +} +.metro .input-control.text input:focus ~ .btn-clear, +.metro .input-control.password input:focus ~ .btn-clear, +.metro .input-control.file input:focus ~ .btn-clear, +.metro .input-control.email input:focus ~ .btn-clear, +.metro .input-control.tel input:focus ~ .btn-clear, +.metro .input-control.number input:focus ~ .btn-clear, +.metro .input-control.text input:focus ~ .btn-reveal, +.metro .input-control.password input:focus ~ .btn-reveal, +.metro .input-control.file input:focus ~ .btn-reveal, +.metro .input-control.email input:focus ~ .btn-reveal, +.metro .input-control.tel input:focus ~ .btn-reveal, +.metro .input-control.number input:focus ~ .btn-reveal { + display: block; +} +.metro .input-control.text input:not(:focus) ~ .btn-clear:active, +.metro .input-control.password input:not(:focus) ~ .btn-clear:active, +.metro .input-control.file input:not(:focus) ~ .btn-clear:active, +.metro .input-control.email input:not(:focus) ~ .btn-clear:active, +.metro .input-control.tel input:not(:focus) ~ .btn-clear:active, +.metro .input-control.number input:not(:focus) ~ .btn-clear:active, +.metro .input-control.text input:not(:focus) ~ .btn-reveal:active, +.metro .input-control.password input:not(:focus) ~ .btn-reveal:active, +.metro .input-control.file input:not(:focus) ~ .btn-reveal:active, +.metro .input-control.email input:not(:focus) ~ .btn-reveal:active, +.metro .input-control.tel input:not(:focus) ~ .btn-reveal:active, +.metro .input-control.number input:not(:focus) ~ .btn-reveal:active { + display: block; +} +.metro .input-control.text .btn-clear:after, +.metro .input-control.password .btn-clear:after, +.metro .input-control.file .btn-clear:after, +.metro .input-control.email .btn-clear:after, +.metro .input-control.tel .btn-clear:after, +.metro .input-control.number .btn-clear:after { + content: "\e00d"; +} +.metro .input-control.text .btn-reveal:after, +.metro .input-control.password .btn-reveal:after, +.metro .input-control.file .btn-reveal:after, +.metro .input-control.email .btn-reveal:after, +.metro .input-control.tel .btn-reveal:after, +.metro .input-control.number .btn-reveal:after { + content: "\e007"; +} +.metro .input-control.text .btn-search:after, +.metro .input-control.password .btn-search:after, +.metro .input-control.file .btn-search:after, +.metro .input-control.email .btn-search:after, +.metro .input-control.tel .btn-search:after, +.metro .input-control.number .btn-search:after { + content: "\e00e"; +} +.metro .input-control.text .btn-date:after, +.metro .input-control.password .btn-date:after, +.metro .input-control.file .btn-date:after, +.metro .input-control.email .btn-date:after, +.metro .input-control.tel .btn-date:after, +.metro .input-control.number .btn-date:after { + content: "\e013"; +} +.metro .input-control.text .btn-file:after, +.metro .input-control.password .btn-file:after, +.metro .input-control.file .btn-file:after, +.metro .input-control.email .btn-file:after, +.metro .input-control.tel .btn-file:after, +.metro .input-control.number .btn-file:after { + content: "\e008"; +} +.metro .input-control.text .btn-search, +.metro .input-control.password .btn-search, +.metro .input-control.file .btn-search, +.metro .input-control.email .btn-search, +.metro .input-control.tel .btn-search, +.metro .input-control.number .btn-search { + display: block; +} +.metro .input-control.text .btn-date, +.metro .input-control.password .btn-date, +.metro .input-control.file .btn-date, +.metro .input-control.email .btn-date, +.metro .input-control.tel .btn-date, +.metro .input-control.number .btn-date { + display: block; +} +.metro .input-control.text .btn-file, +.metro .input-control.password .btn-file, +.metro .input-control.file .btn-file, +.metro .input-control.email .btn-file, +.metro .input-control.tel .btn-file, +.metro .input-control.number .btn-file { + display: block; +} +.metro .input-control.text [class*="btn-"], +.metro .input-control.password [class*="btn-"], +.metro .input-control.file [class*="btn-"], +.metro .input-control.email [class*="btn-"], +.metro .input-control.tel [class*="btn-"], +.metro .input-control.number [class*="btn-"] { + background-color: transparent; +} +.metro .input-control.text input::-ms-reveal, +.metro .input-control.password input::-ms-reveal, +.metro .input-control.file input::-ms-reveal, +.metro .input-control.email input::-ms-reveal, +.metro .input-control.tel input::-ms-reveal, +.metro .input-control.number input::-ms-reveal, +.metro .input-control.text input::-ms-clear, +.metro .input-control.password input::-ms-clear, +.metro .input-control.file input::-ms-clear, +.metro .input-control.email input::-ms-clear, +.metro .input-control.tel input::-ms-clear, +.metro .input-control.number input::-ms-clear { + display: none; +} +.metro .input-control.text input, +.metro .input-control.password input, +.metro .input-control.file input, +.metro .input-control.email input, +.metro .input-control.tel input, +.metro .input-control.number input { + border: 1px #d9d9d9 solid; + width: 100%; + height: 100%; + padding: 5px; + z-index: 1; + -webkit-appearance: none; +} +.metro .input-control.text input:focus, +.metro .input-control.password input:focus, +.metro .input-control.file input:focus, +.metro .input-control.email input:focus, +.metro .input-control.tel input:focus, +.metro .input-control.number input:focus { + outline: 0; + border-color: #919191; +} +.metro .input-control.text input:disabled, +.metro .input-control.password input:disabled, +.metro .input-control.file input:disabled, +.metro .input-control.email input:disabled, +.metro .input-control.tel input:disabled, +.metro .input-control.number input:disabled { + padding-right: 5px; +} +.metro .input-control.text input:disabled ~ .btn-clear, +.metro .input-control.password input:disabled ~ .btn-clear, +.metro .input-control.file input:disabled ~ .btn-clear, +.metro .input-control.email input:disabled ~ .btn-clear, +.metro .input-control.tel input:disabled ~ .btn-clear, +.metro .input-control.number input:disabled ~ .btn-clear, +.metro .input-control.text input:disabled ~ .btn-reveal, +.metro .input-control.password input:disabled ~ .btn-reveal, +.metro .input-control.file input:disabled ~ .btn-reveal, +.metro .input-control.email input:disabled ~ .btn-reveal, +.metro .input-control.tel input:disabled ~ .btn-reveal, +.metro .input-control.number input:disabled ~ .btn-reveal { + display: none; +} +.metro .input-control.text input::-moz-placeholder, +.metro .input-control.password input::-moz-placeholder, +.metro .input-control.file input::-moz-placeholder, +.metro .input-control.email input::-moz-placeholder, +.metro .input-control.tel input::-moz-placeholder, +.metro .input-control.number input::-moz-placeholder { + color: #999999; +} +.metro .input-control.text input::-webkit-input-placeholder, +.metro .input-control.password input::-webkit-input-placeholder, +.metro .input-control.file input::-webkit-input-placeholder, +.metro .input-control.email input::-webkit-input-placeholder, +.metro .input-control.tel input::-webkit-input-placeholder, +.metro .input-control.number input::-webkit-input-placeholder { + color: #999999; +} +.metro .input-control.select, +.metro .input-control.textarea { + display: inline-block; + cursor: pointer; + position: relative; + width: 100%; +} +.metro .input-control.select select, +.metro .input-control.textarea select, +.metro .input-control.select textarea, +.metro .input-control.textarea textarea { + border: 1px #d9d9d9 solid; + width: 100%; + padding: 5px; +} +.metro .input-control.select select:focus, +.metro .input-control.textarea select:focus, +.metro .input-control.select textarea:focus, +.metro .input-control.textarea textarea:focus { + outline: 0; + border-color: #919191; +} +.metro .input-control.select select:disabled, +.metro .input-control.textarea select:disabled, +.metro .input-control.select textarea:disabled, +.metro .input-control.textarea textarea:disabled { + padding-right: 5px; +} +.metro .input-control.select textarea, +.metro .input-control.textarea textarea { + min-height: 100px; +} +.metro .input-control.text.warning-state input, +.metro .input-control.password.warning-state input, +.metro .input-control.select.warning-state input, +.metro .input-control.textarea.warning-state input, +.metro .input-control.file.warning-state input, +.metro .input-control.email.warning-state input, +.metro .input-control.tel.warning-state input, +.metro .input-control.number.warning-state input, +.metro .input-control.text.warning-state select, +.metro .input-control.password.warning-state select, +.metro .input-control.select.warning-state select, +.metro .input-control.textarea.warning-state select, +.metro .input-control.file.warning-state select, +.metro .input-control.email.warning-state select, +.metro .input-control.tel.warning-state select, +.metro .input-control.number.warning-state select, +.metro .input-control.text.warning-state textarea, +.metro .input-control.password.warning-state textarea, +.metro .input-control.select.warning-state textarea, +.metro .input-control.textarea.warning-state textarea, +.metro .input-control.file.warning-state textarea, +.metro .input-control.email.warning-state textarea, +.metro .input-control.tel.warning-state textarea, +.metro .input-control.number.warning-state textarea { + border-color: #fa6800; +} +.metro .input-control.text.error-state input, +.metro .input-control.password.error-state input, +.metro .input-control.select.error-state input, +.metro .input-control.textarea.error-state input, +.metro .input-control.file.error-state input, +.metro .input-control.email.error-state input, +.metro .input-control.tel.error-state input, +.metro .input-control.number.error-state input, +.metro .input-control.text.error-state select, +.metro .input-control.password.error-state select, +.metro .input-control.select.error-state select, +.metro .input-control.textarea.error-state select, +.metro .input-control.file.error-state select, +.metro .input-control.email.error-state select, +.metro .input-control.tel.error-state select, +.metro .input-control.number.error-state select, +.metro .input-control.text.error-state textarea, +.metro .input-control.password.error-state textarea, +.metro .input-control.select.error-state textarea, +.metro .input-control.textarea.error-state textarea, +.metro .input-control.file.error-state textarea, +.metro .input-control.email.error-state textarea, +.metro .input-control.tel.error-state textarea, +.metro .input-control.number.error-state textarea { + border-color: #e51400; +} +.metro .input-control.text.info-state input, +.metro .input-control.password.info-state input, +.metro .input-control.select.info-state input, +.metro .input-control.textarea.info-state input, +.metro .input-control.file.info-state input, +.metro .input-control.email.info-state input, +.metro .input-control.tel.info-state input, +.metro .input-control.number.info-state input, +.metro .input-control.text.info-state select, +.metro .input-control.password.info-state select, +.metro .input-control.select.info-state select, +.metro .input-control.textarea.info-state select, +.metro .input-control.file.info-state select, +.metro .input-control.email.info-state select, +.metro .input-control.tel.info-state select, +.metro .input-control.number.info-state select, +.metro .input-control.text.info-state textarea, +.metro .input-control.password.info-state textarea, +.metro .input-control.select.info-state textarea, +.metro .input-control.textarea.info-state textarea, +.metro .input-control.file.info-state textarea, +.metro .input-control.email.info-state textarea, +.metro .input-control.tel.info-state textarea, +.metro .input-control.number.info-state textarea { + border-color: #4390df; +} +.metro .input-control.text.success-state input, +.metro .input-control.password.success-state input, +.metro .input-control.select.success-state input, +.metro .input-control.textarea.success-state input, +.metro .input-control.file.success-state input, +.metro .input-control.email.success-state input, +.metro .input-control.tel.success-state input, +.metro .input-control.number.success-state input, +.metro .input-control.text.success-state select, +.metro .input-control.password.success-state select, +.metro .input-control.select.success-state select, +.metro .input-control.textarea.success-state select, +.metro .input-control.file.success-state select, +.metro .input-control.email.success-state select, +.metro .input-control.tel.success-state select, +.metro .input-control.number.success-state select, +.metro .input-control.text.success-state textarea, +.metro .input-control.password.success-state textarea, +.metro .input-control.select.success-state textarea, +.metro .input-control.textarea.success-state textarea, +.metro .input-control.file.success-state textarea, +.metro .input-control.email.success-state textarea, +.metro .input-control.tel.success-state textarea, +.metro .input-control.number.success-state textarea { + border-color: #60a917; +} +.metro .input-control.text input[data-state="warning"], +.metro .input-control.password input[data-state="warning"], +.metro .input-control.select input[data-state="warning"], +.metro .input-control.textarea input[data-state="warning"], +.metro .input-control.file input[data-state="warning"], +.metro .input-control.email input[data-state="warning"], +.metro .input-control.tel input[data-state="warning"], +.metro .input-control.number input[data-state="warning"] { + border-color: #fa6800; +} +.metro .input-control.text input[data-state="error"], +.metro .input-control.password input[data-state="error"], +.metro .input-control.select input[data-state="error"], +.metro .input-control.textarea input[data-state="error"], +.metro .input-control.file input[data-state="error"], +.metro .input-control.email input[data-state="error"], +.metro .input-control.tel input[data-state="error"], +.metro .input-control.number input[data-state="error"] { + border-color: #e51400; +} +.metro .input-control.text input[data-state="info"], +.metro .input-control.password input[data-state="info"], +.metro .input-control.select input[data-state="info"], +.metro .input-control.textarea input[data-state="info"], +.metro .input-control.file input[data-state="info"], +.metro .input-control.email input[data-state="info"], +.metro .input-control.tel input[data-state="info"], +.metro .input-control.number input[data-state="info"] { + border-color: #4390df; +} +.metro .input-control.text input[data-state="success"], +.metro .input-control.password input[data-state="success"], +.metro .input-control.select input[data-state="success"], +.metro .input-control.textarea input[data-state="success"], +.metro .input-control.file input[data-state="success"], +.metro .input-control.email input[data-state="success"], +.metro .input-control.tel input[data-state="success"], +.metro .input-control.number input[data-state="success"] { + border-color: #60a917; +} +.metro .input-control.text[class*="span"], +.metro .input-control.password[class*="span"], +.metro .input-control.select[class*="span"], +.metro .input-control.textarea[class*="span"], +.metro .input-control.file[class*="span"], +.metro .input-control.email[class*="span"], +.metro .input-control.tel[class*="span"], +.metro .input-control.number[class*="span"] { + margin-left: 0; +} +.metro .input-control.file { + overflow: hidden; +} +.metro .input-control.file input[type="file"] { + position: absolute; + opacity: 0; + width: 1px; + height: 1px; + bottom: 0; + right: 0; +} +.metro input[type="button"], +.metro input[type="submit"], +.metro input[type="reset"] { + padding: 4px 12px; + text-align: center; + vertical-align: middle !important; + background-color: #d9d9d9; + border: 1px transparent solid; + color: #222222; + border-radius: 0; + cursor: pointer; + display: inline-block; + outline: none; + font-family: 'Segoe UI Light_', 'Open Sans Light', Verdana, Arial, Helvetica, sans-serif; + font-size: 14px; + line-height: 16px; + margin: auto; +} +.metro input[type="button"].default, +.metro input[type="submit"].default, +.metro input[type="reset"].default { + background-color: #008287; + color: #fff; +} +.metro input[type="button"]:focus, +.metro input[type="submit"]:focus, +.metro input[type="reset"]:focus { + outline: 0; + border: 1px #353535 dotted; +} +.metro input[type="button"]:disabled, +.metro input[type="submit"]:disabled, +.metro input[type="reset"]:disabled, +.metro input[type="button"].disabled, +.metro input[type="submit"].disabled, +.metro input[type="reset"].disabled { + background-color: #eaeaea !important; + color: #bebebe !important; + cursor: not-allowed !important; +} +.metro input[type="button"] *, +.metro input[type="submit"] *, +.metro input[type="reset"] * { + color: inherit; +} +.metro input[type="button"] *:hover, +.metro input[type="submit"] *:hover, +.metro input[type="reset"] *:hover { + color: inherit; +} +.metro input[type="button"].primary, +.metro input[type="submit"].primary, +.metro input[type="reset"].primary { + background-color: #16499a !important; + color: #ffffff !important; +} +.metro input[type="button"].info, +.metro input[type="submit"].info, +.metro input[type="reset"].info { + background-color: #4390df !important; + color: #ffffff !important; +} +.metro input[type="button"].success, +.metro input[type="submit"].success, +.metro input[type="reset"].success { + background-color: #60a917 !important; + color: #ffffff !important; +} +.metro input[type="button"].warning, +.metro input[type="submit"].warning, +.metro input[type="reset"].warning { + background-color: #fa6800 !important; + color: #ffffff !important; +} +.metro input[type="button"].danger, +.metro input[type="submit"].danger, +.metro input[type="reset"].danger { + background-color: #9a1616 !important; + color: #ffffff !important; +} +.metro input[type="button"].inverse, +.metro input[type="submit"].inverse, +.metro input[type="reset"].inverse { + background-color: #1d1d1d !important; + color: #ffffff !important; +} +.metro input[type="button"].link, +.metro input[type="submit"].link, +.metro input[type="reset"].link { + background-color: transparent !important; + color: #2e92cf !important; +} +.metro input[type="button"].link:hover, +.metro input[type="submit"].link:hover, +.metro input[type="reset"].link:hover { + text-decoration: underline; +} +.metro input[type="button"].link:disabled, +.metro input[type="submit"].link:disabled, +.metro input[type="reset"].link:disabled, +.metro input[type="button"].link.disabled, +.metro input[type="submit"].link.disabled, +.metro input[type="reset"].link.disabled { + background-color: transparent !important; + color: #bebebe !important; + cursor: not-allowed !important; +} +.metro input[type="button"].link [class*="icon-"], +.metro input[type="submit"].link [class*="icon-"], +.metro input[type="reset"].link [class*="icon-"] { + text-decoration: none !important; +} +.metro input[type="button"]:active, +.metro input[type="submit"]:active, +.metro input[type="reset"]:active { + background-color: #1d1d1d !important; + color: #ffffff !important; + border-color: transparent; +} +.metro input[type="button"].large, +.metro input[type="submit"].large, +.metro input[type="reset"].large { + padding: 11px 19px; + font-size: 17.5px; +} +.metro input[type="button"].small, +.metro input[type="submit"].small, +.metro input[type="reset"].small { + padding: 2px 10px; + font-size: 11.9px; +} +.metro input[type="button"].mini, +.metro input[type="submit"].mini, +.metro input[type="reset"].mini { + padding: 0px 6px; + font-size: 10.5px; +} +.metro input[type=number]::-webkit-inner-spin-button, +.metro input[type=number]::-webkit-outer-spin-button { + -webkit-appearance: none; + margin: 0; +} +.metro img { + max-width: 100%; +} +.metro img.rounded, +.metro img.cycle, +.metro img.polaroid { + background-color: #ffffff; + border: 1px #eaeaea solid; +} +.metro img.rounded { + border-radius: 10px; +} +.metro img.cycle { + border-radius: 50%; +} +.metro img.polaroid { + padding: 10px; +} +.metro .image-container { + position: relative; + padding: 0; + background-color: #333333; + width: 240px; + overflow: hidden; +} +.metro .image-container.full-size { + width: 100%; +} +.metro .image-container img { + margin: 0; + width: 100%; + height: auto; +} +.metro .image-container > .overlay, +.metro .image-container > .overlay-fluid { + position: absolute; + width: 100%; + height: 55px; + overflow: hidden; + background-color: #1e1e1e; + padding: 5px 10px; + opacity: .8; + bottom: 0; + font-size: 8pt; + color: #fff; +} +.metro .image-container > .overlay-fluid { + bottom: -55px; + font-size: 8pt; + color: #fff; +} +.metro .image-container:hover .overlay-fluid { + -webkit-transform: translate(0, -55px); + -ms-transform: translate(0, -55px); + -o-transform: translate(0, -55px); + -moz-transform: translate(0, -55px); + transform: translate(0, -55px); + -webkit-transition: all 0.3s ease; + -moz-transition: all 0.3s ease; + -o-transition: all 0.3s ease; + -ms-transition: all 0.3s ease; + transition: all 0.3s ease; +} +.metro .image-container.selected { + border: 4px #4390df solid; +} +.metro .image-container.selected:after { + position: absolute; + display: block; + border-top: 28px solid #4390df; + border-left: 28px solid transparent; + right: 0; + content: ""; + top: 0; + z-index: 101; +} +.metro .image-container.selected:before { + position: absolute; + display: block; + content: "\e003"; + color: #fff; + right: 0; + font-family: 'metroSysIcons'; + font-size: 9pt; + font-weight: normal; + z-index: 102; + top: 0; +} +.metro #menu .init { + margin: 0; + padding: 0; + list-style: none; +} +.metro #menu .item-vertical { + display: block; + margin: 10px 0; + padding: 0; + vertical-align: baseline; + position: relative; + font-family: 'Segoe UI_', 'Open Sans', Verdana, Arial, Helvetica, sans-serif; +} +.metro #menu .item-horizontal { + display: inline-block; + margin: 0 15px; + padding: 0; + vertical-align: baseline; + position: relative; + font-family: 'Segoe UI_', 'Open Sans', Verdana, Arial, Helvetica, sans-serif; +} +.metro .vertical-menu { + margin: 0; + padding: 0; + list-style: none; +} +.metro .vertical-menu li { + display: block; + margin: 10px 0; + padding: 0; + vertical-align: baseline; + position: relative; + font-family: 'Segoe UI_', 'Open Sans', Verdana, Arial, Helvetica, sans-serif; +} +.metro .vertical-menu li a { + display: block; + text-decoration: none; + font-family: 'Segoe UI Light_', 'Open Sans Light', Verdana, Arial, Helvetica, sans-serif; + font-weight: 300; + color: #000000; + letter-spacing: 0.00em; + font-size: 2.5rem; + line-height: 2.5rem; + letter-spacing: 0.01em; + color: rgba(0, 0, 0, 0.6); + line-height: 2.2rem; + font-size: 2.2rem; + color: inherit; +} +.metro .vertical-menu li.title { + font-family: 'Segoe UI Light_', 'Open Sans Light', Verdana, Arial, Helvetica, sans-serif; + font-weight: 300; + color: #000000; + letter-spacing: 0.00em; + font-size: 2.5rem; + line-height: 2.5rem; + letter-spacing: 0.01em; + font-size: 4rem; + margin-bottom: 20px; +} +.metro .vertical-menu.compact a { + font-weight: normal; + font-size: 10.5pt; + line-height: 12pt; + color: inherit; +} +.metro .vertical-menu.compact li.title { + margin-bottom: 10px; + font-family: 'Segoe UI Semibold_', 'Open Sans Bold', Verdana, Arial, Helvetica, sans-serif; + font-weight: bold; + color: #000000; + font-size: 1.6rem; + line-height: 1.6rem; + letter-spacing: 0.02em; +} +.metro .vertical-menu ul.secondary { + margin: 0; + padding: 0; + list-style: none; + margin-left: 15px; +} +.metro .vertical-menu ul.secondary li a { + font-family: 'Segoe UI Semibold_', 'Open Sans Bold', Verdana, Arial, Helvetica, sans-serif; + font-weight: bold; + color: #000000; + font-size: 1.6rem; + line-height: 1.6rem; + letter-spacing: 0.02em; + font-weight: normal; + font-style: normal; + line-height: 1.4rem; + color: inherit; +} +.metro .horizontal-menu { + margin: 0; + padding: 0; + list-style: none; + padding: 0px; +} +.metro .horizontal-menu li { + display: inline-block; + margin: 0 15px; + padding: 0; + vertical-align: baseline; + position: relative; + font-family: 'Segoe UI_', 'Open Sans', Verdana, Arial, Helvetica, sans-serif; +} +.metro .horizontal-menu li a { + display: inline-block; + text-decoration: none; + font-family: 'Segoe UI Light_', 'Open Sans Light', Verdana, Arial, Helvetica, sans-serif; + font-weight: 300; + color: #000000; + letter-spacing: 0.00em; + font-size: 2.5rem; + line-height: 2.5rem; + letter-spacing: 0.01em; + color: rgba(0, 0, 0, 0.6); + line-height: 2.2rem; + font-size: 2.2rem; + color: inherit; + padding: 5px; +} +.metro .horizontal-menu li a:hover { + background: inherit; +} +.metro .horizontal-menu.compact li { + margin-left: 5px; +} +.metro .horizontal-menu.compact a { + font-weight: normal; + font-size: 10.5pt; + color: inherit; +} +.metro .horizontal-menu.compact .dropdown-toggle:after { + bottom: 2px; +} +.metro .horizontal-menu li:first-child { + margin-left: 0px; +} +.metro .horizontal-menu li:hover > .dropdown-menu[data-show="hover"] { + display: block; +} +.metro .side-menu { + margin: 0; + padding: 0; + list-style: none; + position: relative; + background: #ffffff; + min-width: 200px; + width: auto; + border: 1px solid rgba(0, 0, 0, 0.2); +} +.metro .side-menu li { + display: block; + margin: 10px 0; + padding: 0; + vertical-align: baseline; + position: relative; + font-family: 'Segoe UI_', 'Open Sans', Verdana, Arial, Helvetica, sans-serif; +} +.metro .side-menu li a { + display: block; + text-decoration: none; + font-family: 'Segoe UI Light_', 'Open Sans Light', Verdana, Arial, Helvetica, sans-serif; + font-weight: 300; + color: #000000; + letter-spacing: 0.00em; + font-size: 2.5rem; + line-height: 2.5rem; + letter-spacing: 0.01em; + color: rgba(0, 0, 0, 0.6); + line-height: 2.2rem; + font-size: 2.2rem; + color: inherit; +} +.metro .side-menu li.title { + font-family: 'Segoe UI Light_', 'Open Sans Light', Verdana, Arial, Helvetica, sans-serif; + font-weight: 300; + color: #000000; + letter-spacing: 0.00em; + font-size: 2.5rem; + line-height: 2.5rem; + letter-spacing: 0.01em; + font-size: 4rem; + margin-bottom: 20px; +} +.metro .side-menu.compact a { + font-weight: normal; + font-size: 10.5pt; + line-height: 12pt; + color: inherit; +} +.metro .side-menu.compact li.title { + margin-bottom: 10px; + font-family: 'Segoe UI Semibold_', 'Open Sans Bold', Verdana, Arial, Helvetica, sans-serif; + font-weight: bold; + color: #000000; + font-size: 1.6rem; + line-height: 1.6rem; + letter-spacing: 0.02em; +} +.metro .side-menu ul.secondary { + margin: 0; + padding: 0; + list-style: none; + margin-left: 15px; +} +.metro .side-menu ul.secondary li a { + font-family: 'Segoe UI Semibold_', 'Open Sans Bold', Verdana, Arial, Helvetica, sans-serif; + font-weight: bold; + color: #000000; + font-size: 1.6rem; + line-height: 1.6rem; + letter-spacing: 0.02em; + font-weight: normal; + font-style: normal; + line-height: 1.4rem; + color: inherit; +} +.metro .side-menu li { + margin: 5px 0 0; + width: 100%; +} +.metro .side-menu li:last-child { + margin-bottom: 5px; +} +.metro .side-menu a { + padding: 8px 20px !important; + color: inherit; + font-size: 15px !important; + line-height: 14px !important; +} +.metro .side-menu li:hover { + background: #1ba1e2; + color: #ffffff; +} +.metro .side-menu .divider { + padding: 0; + height: 1px; + margin: 9px 1px; + overflow: hidden; + background-color: #e5e5e5; +} +.metro .side-menu .divider:hover { + background: #e5e5e5; +} +.metro .side-menu .dropdown-menu { + left: 100%; + top: -10%; +} +.metro .side-menu.left .dropdown-menu { + left: -100%; +} +.metro .side-menu > li:hover > .dropdown-menu[data-show="hover"] { + display: block; +} +.metro .side-menu > li > a.dropdown-toggle:after { + font-family: metroSysIcons; + font-size: .8em; + content: "\e156"; + left: 85%; + top: .75em; + -webkit-transform: rotate(0deg); + -moz-transform: rotate(0deg); + -ms-transform: rotate(0deg); + -o-transform: rotate(0deg); + transform: rotate(0deg); +} +.metro .side-menu.text-right li { + text-align: right; +} +.metro .dropdown-menu { + margin: 0; + padding: 0; + list-style: none; + position: absolute; + display: none; + z-index: 1000; + background: #ffffff; + min-width: 220px; + width: auto; + border: 1px solid #dcddde; +} +.metro .dropdown-menu li { + display: block; + margin: 10px 0; + padding: 0; + vertical-align: baseline; + position: relative; + font-family: 'Segoe UI_', 'Open Sans', Verdana, Arial, Helvetica, sans-serif; +} +.metro .dropdown-menu li a { + display: block; + text-decoration: none; + font-family: 'Segoe UI Light_', 'Open Sans Light', Verdana, Arial, Helvetica, sans-serif; + font-weight: 300; + color: #000000; + letter-spacing: 0.00em; + font-size: 2.5rem; + line-height: 2.5rem; + letter-spacing: 0.01em; + color: rgba(0, 0, 0, 0.6); + line-height: 2.2rem; + font-size: 2.2rem; + color: inherit; +} +.metro .dropdown-menu li.title { + font-family: 'Segoe UI Light_', 'Open Sans Light', Verdana, Arial, Helvetica, sans-serif; + font-weight: 300; + color: #000000; + letter-spacing: 0.00em; + font-size: 2.5rem; + line-height: 2.5rem; + letter-spacing: 0.01em; + font-size: 4rem; + margin-bottom: 20px; +} +.metro .dropdown-menu.compact a { + font-weight: normal; + font-size: 10.5pt; + line-height: 12pt; + color: inherit; +} +.metro .dropdown-menu.compact li.title { + margin-bottom: 10px; + font-family: 'Segoe UI Semibold_', 'Open Sans Bold', Verdana, Arial, Helvetica, sans-serif; + font-weight: bold; + color: #000000; + font-size: 1.6rem; + line-height: 1.6rem; + letter-spacing: 0.02em; +} +.metro .dropdown-menu ul.secondary { + margin: 0; + padding: 0; + list-style: none; + margin-left: 15px; +} +.metro .dropdown-menu ul.secondary li a { + font-family: 'Segoe UI Semibold_', 'Open Sans Bold', Verdana, Arial, Helvetica, sans-serif; + font-weight: bold; + color: #000000; + font-size: 1.6rem; + line-height: 1.6rem; + letter-spacing: 0.02em; + font-weight: normal; + font-style: normal; + line-height: 1.4rem; + color: inherit; +} +.metro .dropdown-menu.shadow { + box-shadow: 3px 3px 0 rgba(236, 236, 236, 0.7); +} +.metro .dropdown-menu li { + margin: 5px 0 0; + width: 100%; + border: 1px transparent solid; +} +.metro .dropdown-menu li:last-child { + margin-bottom: 5px; +} +.metro .dropdown-menu li.disabled, +.metro .dropdown-menu li.disabled:hover { + cursor: default !important; + background: transparent !important; + color: #eeeeee; +} +.metro .dropdown-menu li.disabled a, +.metro .dropdown-menu li.disabled:hover a { + color: inherit; + cursor: inherit; + background: inherit; +} +.metro .dropdown-menu a { + padding: 8px 32px !important; + color: inherit; + font-size: 15px !important; + line-height: 14px !important; + cursor: pointer; +} +.metro .dropdown-menu li:hover { + background: #edf4fc; + border-color: #a8d2fd; +} +.metro .dropdown-menu li.checked a:before, +.metro .dropdown-menu li.checked-partial a:before, +.metro .dropdown-menu li.unchecked a:before { + font-family: metroSysIcons; + position: absolute; + left: 10px; + content: "\e004"; +} +.metro .dropdown-menu li.checked-partial a:before { + content: "\e005"; +} +.metro .dropdown-menu li.unchecked a:before { + content: "\e005"; +} +.metro .dropdown-menu.place-right { + right: -15px; + left: auto; +} +.metro .dropdown-menu .divider { + padding: 0; + height: 1px; + margin: 9px 1px; + overflow: hidden; + background-color: #e5e5e5; + border-width: 0; +} +.metro .dropdown-menu .divider:hover { + background: #e5e5e5; +} +.metro .dropdown-menu.open { + display: block !important; +} +.metro .dropdown-menu .dropdown-menu { + left: 100%; + top: -10%; +} +.metro .dropdown-menu > li:hover > .dropdown-menu[data-show="hover"] { + display: block; +} +.metro .dropdown-menu > li > a.dropdown-toggle:after { + font-family: metroSysIcons; + font-size: .7em; + content: "\e001"; + left: 90%; + top: 50%; + margin-top: -1.4em; + -webkit-transform: rotate(-90deg); + -moz-transform: rotate(-90deg); + -ms-transform: rotate(-90deg); + -o-transform: rotate(-90deg); + transform: rotate(-90deg); +} +.metro .dropdown-menu.drop-left { + left: -100%; +} +.metro .dropdown-menu.drop-up { + top: auto; + bottom: 0; +} +.metro .dropdown-menu .menu-title { + background-color: #f6f7f8; + font-size: 12px; + line-height: 14px; + padding: 4px 8px; + border: 0; + border-bottom: 1px #dcddde solid; + border-top: 1px #dcddde solid; + color: #646464; +} +.metro .dropdown-menu .menu-title:first-child { + margin: 0; + border-top-width: 0; +} +.metro .dropdown-menu .menu-title:first-child:hover { + border-top-width: 0; +} +.metro .dropdown-menu .menu-title:hover { + background-color: #f6f7f8; + cursor: default; + border: 0; + border-bottom: 1px #dcddde solid; + border-top: 1px #dcddde solid; +} +.metro .dropdown-menu.inverse { + border: 2px #3b3b3b solid; +} +.metro .dropdown-menu.inverse li { + border: 0; +} +.metro .dropdown-menu.inverse li a { + padding: 9px 32px !important; +} +.metro .dropdown-menu.inverse li:hover { + border: 0; + background-color: #e5e5e5; +} +.metro .dropdown-menu.inverse .menu-title:hover { + background-color: #f6f7f8; +} +.metro .dropdown-menu.inverse .divider { + margin-left: 0; + margin-right: 0; +} +.metro .dropdown-menu.dark { + background-color: #333333; + border: 2px #333333 solid; + color: #ffffff; +} +.metro .dropdown-menu.dark.opacity { + background-color: rgba(61, 61, 61, 0.9); +} +.metro .dropdown-menu.dark li { + border: 0; + color: inherit; +} +.metro .dropdown-menu.dark li a { + padding: 9px 32px !important; + color: inherit; +} +.metro .dropdown-menu.dark li.disabled, +.metro .dropdown-menu.dark li.disabled:hover { + cursor: default !important; + background: transparent !important; + color: #555555; +} +.metro .dropdown-menu.dark li.disabled a, +.metro .dropdown-menu.dark li.disabled:hover a { + color: inherit; + cursor: inherit; + background: inherit; +} +.metro .dropdown-menu.dark li:hover { + border: 0; + background-color: #201a1a; + color: #ffffff; +} +.metro .dropdown-menu.dark .menu-title { + background-color: #3b3b3b; +} +.metro .dropdown-menu.dark .menu-title:hover { + background-color: #3b3b3b; +} +.metro .dropdown-menu.dark .divider { + margin-left: 0; + margin-right: 0; + background-color: #555555; +} +.metro .dropdown-menu.dark .divider:hover { + background: #555555; +} +.metro .dropdown-toggle:after { + position: absolute; + margin-left: .45em; + bottom: 0; + font-family: metroSysIcons; + font-size: .7em; + content: '\e001'; +} +.metro .dropdown-toggle.no-marker:after { + content: ""; +} +.metro .contextmenu { + z-index: 1000; + position: absolute; + background-color: #FFFFFF; + border: 2.5px solid #2a2a2a; + padding: 2px; +} +.metro .contextmenu .item:active { + background-color: #000000; + color: #ffffff; +} +.metro .contextmenu .item:hover { + background-color: #dedede; +} +.metro .contextmenu .item { + background-color: #FFFFFF; + width: auto; + padding: 12px; + margin: -2px; +} +.metro .navigation-bar, +.metro .navbar { + width: 100%; + display: block; + background-color: #1ba1e2; + color: #ffffff; +} +.metro .navigation-bar .navigation-bar-content, +.metro .navbar .navigation-bar-content, +.metro .navigation-bar .navbar-content, +.metro .navbar .navbar-content { + background-color: inherit; + color: inherit; + display: block; +} +.metro .navigation-bar .navigation-bar-content .element, +.metro .navbar .navigation-bar-content .element, +.metro .navigation-bar .navbar-content .element, +.metro .navbar .navbar-content .element, +.metro .navigation-bar .navigation-bar-content .element-divider, +.metro .navbar .navigation-bar-content .element-divider, +.metro .navigation-bar .navbar-content .element-divider, +.metro .navbar .navbar-content .element-divider { + display: block; + float: left; + background-color: inherit; + position: relative; + height: 45px; +} +.metro .navigation-bar .navigation-bar-content .element.place-right, +.metro .navbar .navigation-bar-content .element.place-right, +.metro .navigation-bar .navbar-content .element.place-right, +.metro .navbar .navbar-content .element.place-right, +.metro .navigation-bar .navigation-bar-content .element-divider.place-right, +.metro .navbar .navigation-bar-content .element-divider.place-right, +.metro .navigation-bar .navbar-content .element-divider.place-right, +.metro .navbar .navbar-content .element-divider.place-right { + float: right; +} +.metro .navigation-bar .navigation-bar-content .element, +.metro .navbar .navigation-bar-content .element, +.metro .navigation-bar .navbar-content .element, +.metro .navbar .navbar-content .element { + padding: 15px; + line-height: 15px; + color: inherit; + font-family: 'Segoe UI Light_', 'Open Sans Light', Verdana, Arial, Helvetica, sans-serif; + font-size: 14px; +} +.metro .navigation-bar .navigation-bar-content .element:hover, +.metro .navbar .navigation-bar-content .element:hover, +.metro .navigation-bar .navbar-content .element:hover, +.metro .navbar .navbar-content .element:hover { + background-color: #00aafd; +} +.metro .navigation-bar .navigation-bar-content .element > a.dropdown-toggle, +.metro .navbar .navigation-bar-content .element > a.dropdown-toggle, +.metro .navigation-bar .navbar-content .element > a.dropdown-toggle, +.metro .navbar .navbar-content .element > a.dropdown-toggle { + color: inherit; + position: relative; +} +.metro .navigation-bar .navigation-bar-content .element > a.dropdown-toggle:after, +.metro .navbar .navigation-bar-content .element > a.dropdown-toggle:after, +.metro .navigation-bar .navbar-content .element > a.dropdown-toggle:after, +.metro .navbar .navbar-content .element > a.dropdown-toggle:after { + position: absolute; + left: 100%; +} +.metro .navigation-bar .navigation-bar-content .element > .dropdown-menu, +.metro .navbar .navigation-bar-content .element > .dropdown-menu, +.metro .navigation-bar .navbar-content .element > .dropdown-menu, +.metro .navbar .navbar-content .element > .dropdown-menu { + top: 100%; + left: 0; +} +.metro .navigation-bar .navigation-bar-content .element > .dropdown-menu.place-right, +.metro .navbar .navigation-bar-content .element > .dropdown-menu.place-right, +.metro .navigation-bar .navbar-content .element > .dropdown-menu.place-right, +.metro .navbar .navbar-content .element > .dropdown-menu.place-right { + right: 0; + left: auto; +} +.metro .navigation-bar .navigation-bar-content .element-divider, +.metro .navbar .navigation-bar-content .element-divider, +.metro .navigation-bar .navbar-content .element-divider, +.metro .navbar .navbar-content .element-divider { + padding: 15px 0; + line-height: 15px; + width: 1px !important; + border-left: 1px #ccc solid; + opacity: .3; + position: relative; +} +.metro .navigation-bar .navigation-bar-content .element-divider:before, +.metro .navbar .navigation-bar-content .element-divider:before, +.metro .navigation-bar .navbar-content .element-divider:before, +.metro .navbar .navbar-content .element-divider:before { + content: "|"; + visibility: hidden; +} +.metro .navigation-bar-content .brand, +.metro .navbar-content .brand { + font-size: 18px; +} +.metro .navigation-bar-content form, +.metro .navbar-content form { + margin: 0; + padding-bottom: 0 !important; + position: relative; +} +.metro .navigation-bar-content .element .input-control.text, +.metro .navbar-content .element .input-control.text, +.metro .navigation-bar-content .element .input-control.password, +.metro .navbar-content .element .input-control.password { + width: auto; + height: auto; + position: relative; + margin: 0; + top: -6px; +} +.metro .navigation-bar-content .element .input-control.text [class*='btn-'], +.metro .navbar-content .element .input-control.text [class*='btn-'], +.metro .navigation-bar-content .element .input-control.password [class*='btn-'], +.metro .navbar-content .element .input-control.password [class*='btn-'] { + top: 2px; + right: 2px; +} +.metro .navigation-bar-content .element .input-control.text input[type='text'], +.metro .navbar-content .element .input-control.text input[type='text'], +.metro .navigation-bar-content .element .input-control.password input[type='text'], +.metro .navbar-content .element .input-control.password input[type='text'] { + font-size: 12px; +} +.metro .navigation-bar-content .input-control.checkbox, +.metro .navbar-content .input-control.checkbox, +.metro .navigation-bar-content .input-control.radio, +.metro .navbar-content .input-control.radio { + position: relative; + margin: 0; + top: -6px; +} +.metro .navigation-bar-content .button, +.metro .navbar-content .button, +.metro .navigation-bar-content .image-button, +.metro .navbar-content .image-button { + background-color: transparent; +} +.metro .navigation-bar-content .button, +.metro .navbar-content .button { + margin-top: -14px; + background-color: inherit; +} +.metro .navigation-bar-content .image-button, +.metro .navbar-content .image-button { + padding-right: 40px; + padding-left: 5px; + background-color: inherit; +} +.metro .navigation-bar-content .image-button:active, +.metro .navbar-content .image-button:active { + left: auto; + right: auto; + top: auto; +} +.metro .navigation-bar-content .image-button img, +.metro .navbar-content .image-button img { + width: 40px; + height: 40px; + margin-top: 2.5px; +} +.metro .navigation-bar-content .image-button.image-left, +.metro .navbar-content .image-button.image-left { + padding-right: 5px; + padding-left: 40px; +} +.metro .navigation-bar-content [class*="icon-"], +.metro .navbar-content [class*="icon-"] { + font-size: 16px !important; +} +.metro .input-element, +.metro .element-input { + padding-bottom: 0 !important; +} +.metro .input-element:hover, +.metro .element-input:hover { + background-color: inherit !important; +} +.metro .navigation-bar .element-menu, +.metro .navbar .element-menu { + margin: 0; + padding: 0; + list-style: none; + color: inherit; +} +.metro .navigation-bar .element-menu > li, +.metro .navbar .element-menu > li { + display: block; + float: left; + position: relative; + color: inherit; +} +.metro .navigation-bar .element-menu > li > a, +.metro .navbar .element-menu > li > a { + display: block; + float: left; + width: 100%; + padding: 15px; + line-height: 15px; + color: inherit; + font-family: 'Segoe UI Light_', 'Open Sans Light', Verdana, Arial, Helvetica, sans-serif; + font-size: 14px; +} +.metro .navigation-bar .element-menu > li > a.dropdown-toggle, +.metro .navbar .element-menu > li > a.dropdown-toggle { + color: inherit; + position: relative; +} +.metro .navigation-bar .element-menu > li > a.dropdown-toggle:after, +.metro .navbar .element-menu > li > a.dropdown-toggle:after { + position: absolute; + left: 95%; + top: 50%; + margin-left: -7px; + margin-top: -5px; +} +.metro .navigation-bar .element-menu > li > .dropdown-menu, +.metro .navbar .element-menu > li > .dropdown-menu { + top: 100%; + left: 0; +} +.metro .navigation-bar .element-menu > li > .dropdown-menu.place-right, +.metro .navbar .element-menu > li > .dropdown-menu.place-right { + right: 0; + left: auto; +} +.metro .navigation-bar .element-menu.drop-up li > .dropdown-menu, +.metro .navbar .element-menu.drop-up li > .dropdown-menu { + top: auto; + bottom: 45px; +} +.metro .navigation-bar .element-menu.drop-up li > .dropdown-menu .dropdown-menu, +.metro .navbar .element-menu.drop-up li > .dropdown-menu .dropdown-menu { + bottom: 0; +} +.metro .navigation-bar .pull-menu, +.metro .navbar .pull-menu { + display: none; + float: right !important; + color: #fff; + cursor: pointer; + font: 1.8em sans-serif; + position: absolute; + top: 0; + right: 0; + height: 45px; + width: 40px; + line-height: 20px; + margin: 0; +} +.metro .navigation-bar .pull-menu:before, +.metro .navbar .pull-menu:before { + content: "\2261"; + position: absolute; + font-size: 20pt; + top: 10px; + left: 10px; +} +.metro .navigation-bar .pull-menu input[type="checkbox"], +.metro .navbar .pull-menu input[type="checkbox"] { + width: 0; + height: 0; + opacity: 0; +} +.metro .navigation-bar-content:before, +.metro .navbar-content:before, +.metro .navigation-bar-content:after, +.metro .navbar-content:after { + display: table; + content: ""; +} +.metro .navigation-bar-content:after, +.metro .navbar-content:after { + clear: both; +} +.metro .navigation-bar.fixed-top, +.metro .navbar.fixed-top, +.metro .navigation-bar.fixed-bottom, +.metro .navbar.fixed-bottom { + position: fixed; + z-index: 1030; + left: 0; +} +.metro .navigation-bar.fixed-top, +.metro .navbar.fixed-top { + top: 0; + bottom: auto; +} +.metro .navigation-bar.fixed-bottom, +.metro .navbar.fixed-bottom { + bottom: 0; + top: auto; +} +.metro .navigation-bar.dark { + background-color: #333333; +} +.metro .navigation-bar.dark .element-menu > li > a { + color: #ffffff; +} +.metro .navigation-bar.dark .element:hover, +.metro .navigation-bar.dark .element-menu > li:hover { + background-color: #201a1a; +} +.metro .navigation-bar.light { + background-color: #eeeeee; + color: #555555; +} +.metro .navigation-bar.light .element:hover, +.metro .navigation-bar.light .element-menu > li:hover { + background-color: #999999; + color: #ffffff; +} +.metro .navigation-bar.light .pull-menu { + color: #1d1d1d; +} +.metro .navigation-bar.white { + background-color: #ffffff; + color: #555555; +} +.metro .navigation-bar.white .element:hover, +.metro .navigation-bar.white .element-menu > li:hover { + background-color: #00aff0; + color: #ffffff; +} +.metro .navigation-bar.white .pull-menu { + color: #1d1d1d; +} +.metro #tile .small-size { + width: 80px; + height: 80px; + margin: 0 5px 5px 0; +} +.metro #tile .meduim-size { + width: 120px; + height: 120px; + margin: 0 10px 10px 0; +} +.metro #tile .large-size { + width: 150px; + height: 150px; + margin: 0 15px 15px 0; +} +.metro .tile-area { + position: relative; + padding: 120px 80px 0 80px; + overflow: hidden; +} +.metro .tile-area .tile-area-title { + position: fixed; + top: 20px; + left: 80px; +} +.metro .tile-area .user-id { + position: fixed; + right: 40px; + top: 40px; + display: inline-block; + padding: 8px; + background-color: transparent; + width: auto; + color: #ffffff; + cursor: default; +} +.metro .tile-area .user-id .user-id-image { + width: 40px; + height: 40px; + float: right; + margin-left: 10px; + color: inherit; + background-color: #464646; + text-align: center; + vertical-align: middle; +} +.metro .tile-area .user-id .user-id-image img, +.metro .tile-area .user-id .user-id-image [class*="icon-"] { + color: inherit; + font-size: 16pt; + line-height: 16pt; + width: 100%; + height: 100%; + text-align: center; + vertical-align: middle; +} +.metro .tile-area .user-id .user-id-image [class*="icon-"] { + padding: 10px; +} +.metro .tile-area .user-id .user-id-name { + float: right; + text-align: right; + margin: 0; + padding: 0; +} +.metro .tile-area .user-id .user-id-name .first-name, +.metro .tile-area .user-id .user-id-name .last-name { + display: block; + color: inherit; + font-family: 'Segoe UI Light_', 'Open Sans Light', Verdana, Arial, Helvetica, sans-serif; + line-height: 12pt; +} +.metro .tile-area .user-id .user-id-name .first-name { + font-size: 20pt; + line-height: 20pt; +} +.metro .tile-area .user-id .user-id-name .last-name { + font-size: 12pt; +} +.metro .tile-area .user-id:hover { + background-color: #404040; +} +.metro .tile-area-dark { + min-width: 100%; + height: 100%; + background-color: #1d1d1d !important; +} +.metro .tile-area-dark .tile { + outline-color: #373737 !important; +} +.metro .tile-area-dark:before, +.metro .tile-area-dark:after { + display: table; + content: ""; +} +.metro .tile-area-dark:after { + clear: both; +} +.metro .tile-area-darkBrown { + min-width: 100%; + height: 100%; + background-color: #63362f !important; +} +.metro .tile-area-darkBrown .tile { + outline-color: #86493f !important; +} +.metro .tile-area-darkBrown:before, +.metro .tile-area-darkBrown:after { + display: table; + content: ""; +} +.metro .tile-area-darkBrown:after { + clear: both; +} +.metro .tile-area-darkCrimson { + min-width: 100%; + height: 100%; + background-color: #640024 !important; +} +.metro .tile-area-darkCrimson .tile { + outline-color: #970036 !important; +} +.metro .tile-area-darkCrimson:before, +.metro .tile-area-darkCrimson:after { + display: table; + content: ""; +} +.metro .tile-area-darkCrimson:after { + clear: both; +} +.metro .tile-area-darkViolet { + min-width: 100%; + height: 100%; + background-color: #57169a !important; +} +.metro .tile-area-darkViolet .tile { + outline-color: #701cc7 !important; +} +.metro .tile-area-darkViolet:before, +.metro .tile-area-darkViolet:after { + display: table; + content: ""; +} +.metro .tile-area-darkViolet:after { + clear: both; +} +.metro .tile-area-darkMagenta { + min-width: 100%; + height: 100%; + background-color: #81003c !important; +} +.metro .tile-area-darkMagenta .tile { + outline-color: #b40054 !important; +} +.metro .tile-area-darkMagenta:before, +.metro .tile-area-darkMagenta:after { + display: table; + content: ""; +} +.metro .tile-area-darkMagenta:after { + clear: both; +} +.metro .tile-area-darkCyan { + min-width: 100%; + height: 100%; + background-color: #1b6eae !important; +} +.metro .tile-area-darkCyan .tile { + outline-color: #228ada !important; +} +.metro .tile-area-darkCyan:before, +.metro .tile-area-darkCyan:after { + display: table; + content: ""; +} +.metro .tile-area-darkCyan:after { + clear: both; +} +.metro .tile-area-darkCobalt { + min-width: 100%; + height: 100%; + background-color: #00356a !important; +} +.metro .tile-area-darkCobalt .tile { + outline-color: #004e9d !important; +} +.metro .tile-area-darkCobalt:before, +.metro .tile-area-darkCobalt:after { + display: table; + content: ""; +} +.metro .tile-area-darkCobalt:after { + clear: both; +} +.metro .tile-area-darkTeal { + min-width: 100%; + height: 100%; + background-color: #004050 !important; +} +.metro .tile-area-darkTeal .tile { + outline-color: #006983 !important; +} +.metro .tile-area-darkTeal:before, +.metro .tile-area-darkTeal:after { + display: table; + content: ""; +} +.metro .tile-area-darkTeal:after { + clear: both; +} +.metro .tile-area-darkEmerald { + min-width: 100%; + height: 100%; + background-color: #003e00 !important; +} +.metro .tile-area-darkEmerald .tile { + outline-color: #007100 !important; +} +.metro .tile-area-darkEmerald:before, +.metro .tile-area-darkEmerald:after { + display: table; + content: ""; +} +.metro .tile-area-darkEmerald:after { + clear: both; +} +.metro .tile-area-darkGreen { + min-width: 100%; + height: 100%; + background-color: #128023 !important; +} +.metro .tile-area-darkGreen .tile { + outline-color: #18ad2f !important; +} +.metro .tile-area-darkGreen:before, +.metro .tile-area-darkGreen:after { + display: table; + content: ""; +} +.metro .tile-area-darkGreen:after { + clear: both; +} +.metro .tile-area-darkOrange { + min-width: 100%; + height: 100%; + background-color: #bf5a15 !important; +} +.metro .tile-area-darkOrange .tile { + outline-color: #e77120 !important; +} +.metro .tile-area-darkOrange:before, +.metro .tile-area-darkOrange:after { + display: table; + content: ""; +} +.metro .tile-area-darkOrange:after { + clear: both; +} +.metro .tile-area-darkRed { + min-width: 100%; + height: 100%; + background-color: #9a1616 !important; +} +.metro .tile-area-darkRed .tile { + outline-color: #c71c1c !important; +} +.metro .tile-area-darkRed:before, +.metro .tile-area-darkRed:after { + display: table; + content: ""; +} +.metro .tile-area-darkRed:after { + clear: both; +} +.metro .tile-area-darkPink { + min-width: 100%; + height: 100%; + background-color: #9a165a !important; +} +.metro .tile-area-darkPink .tile { + outline-color: #c71c74 !important; +} +.metro .tile-area-darkPink:before, +.metro .tile-area-darkPink:after { + display: table; + content: ""; +} +.metro .tile-area-darkPink:after { + clear: both; +} +.metro .tile-area-darkIndigo { + min-width: 100%; + height: 100%; + background-color: #4b0096 !important; +} +.metro .tile-area-darkIndigo .tile { + outline-color: #6400c9 !important; +} +.metro .tile-area-darkIndigo:before, +.metro .tile-area-darkIndigo:after { + display: table; + content: ""; +} +.metro .tile-area-darkIndigo:after { + clear: both; +} +.metro .tile-area-darkBlue { + min-width: 100%; + height: 100%; + background-color: #16499a !important; +} +.metro .tile-area-darkBlue .tile { + outline-color: #1c5ec7 !important; +} +.metro .tile-area-darkBlue:before, +.metro .tile-area-darkBlue:after { + display: table; + content: ""; +} +.metro .tile-area-darkBlue:after { + clear: both; +} +.metro .tile-area-lightBlue { + min-width: 100%; + height: 100%; + background-color: #4390df !important; +} +.metro .tile-area-lightBlue .tile { + outline-color: #6faae6 !important; +} +.metro .tile-area-lightBlue:before, +.metro .tile-area-lightBlue:after { + display: table; + content: ""; +} +.metro .tile-area-lightBlue:after { + clear: both; +} +.metro .tile-area-lightTeal { + min-width: 100%; + height: 100%; + background-color: #45fffd !important; +} +.metro .tile-area-lightTeal .tile { + outline-color: #78fffd !important; +} +.metro .tile-area-lightTeal:before, +.metro .tile-area-lightTeal:after { + display: table; + content: ""; +} +.metro .tile-area-lightTeal:after { + clear: both; +} +.metro .tile-area-lightOlive { + min-width: 100%; + height: 100%; + background-color: #78aa1c !important; +} +.metro .tile-area-lightOlive .tile { + outline-color: #97d623 !important; +} +.metro .tile-area-lightOlive:before, +.metro .tile-area-lightOlive:after { + display: table; + content: ""; +} +.metro .tile-area-lightOlive:after { + clear: both; +} +.metro .tile-area-lightOrange { + min-width: 100%; + height: 100%; + background-color: #c29008 !important; +} +.metro .tile-area-lightOrange .tile { + outline-color: #f3b40a !important; +} +.metro .tile-area-lightOrange:before, +.metro .tile-area-lightOrange:after { + display: table; + content: ""; +} +.metro .tile-area-lightOrange:after { + clear: both; +} +.metro .tile-area-lightPink { + min-width: 100%; + height: 100%; + background-color: #f472d0 !important; +} +.metro .tile-area-lightPink .tile { + outline-color: #f8a1e0 !important; +} +.metro .tile-area-lightPink:before, +.metro .tile-area-lightPink:after { + display: table; + content: ""; +} +.metro .tile-area-lightPink:after { + clear: both; +} +.metro .tile-area-grayed { + min-width: 100%; + height: 100%; + background-color: #585858 !important; +} +.metro .tile-area-grayed .tile { + outline-color: #727272 !important; +} +.metro .tile-area-grayed:before, +.metro .tile-area-grayed:after { + display: table; + content: ""; +} +.metro .tile-area-grayed:after { + clear: both; +} +.metro .tile-group { + margin-right: 46px; + min-width: 130px; + width: auto; + float: left; + display: block; + padding-top: 40px; + position: relative; +} +.metro .tile-group.one { + width: 130px; +} +.metro .tile-group.two, +.metro .tile-group.double { + width: 260px; +} +.metro .tile-group.three, +.metro .tile-group.triple { + width: 390px; +} +.metro .tile-group.four, +.metro .tile-group.quadro { + width: 520px; +} +.metro .tile-group.five { + width: 650px; +} +.metro .tile-group.six { + width: 780px; +} +.metro .tile-group.seven { + width: 910px; +} +.metro .tile-group:first-child { + margin-left: 80px; +} +.metro .tile-group { + color: #ffffff; +} +.metro .tile-group .tile-group-title { + font-family: 'Segoe UI Light_', 'Open Sans Light', Verdana, Arial, Helvetica, sans-serif; + font-size: 18px; + line-height: 20px; + position: absolute; + top: 10px; + left: 0; + color: inherit; +} +.metro .tile { + position: relative; + overflow: hidden; + display: block; + float: left; + margin: 0 10px 10px 0; + padding: 0; + + background-color: #eeeeee; + box-shadow: inset 0px 0px 1px #FFFFCC; +} +.metro .tile.hover:hover { + outline: #999999 solid 3px; + cursor: pointer; +} +.metro .tile:active { + outline: 0; +} +.metro .tile.no-outline { + outline-color: transparent; +} +.metro .tile { + width: 120px; + height: 120px; + margin: 0 10px 10px 0; +} +.metro .tile.half { + width: 55px; + height: 55px; +} +.metro .tile.double { + width: 250px; +} +.metro .tile.double-vertical { + height: 250px; +} +.metro .tile.triple { + width: 380px; +} +.metro .tile.triple-vertical { + height: 380px; +} +.metro .tile.quadro { + width: 510px; +} +.metro .tile.quadro-vertical { + height: 510px; +} +.metro .tile.selected { + border: 4px #4390df solid; + margin-left: -4px; + margin-top: -4px; +} +.metro .tile.selected:after { + position: absolute; + display: block; + border-top: 28px solid #4390df; + border-left: 28px solid transparent; + right: 0; + content: ""; + top: 0; + z-index: 101; +} +.metro .tile.selected:before { + position: absolute; + display: block; + content: "\e003"; + color: #fff; + right: 0; + font-family: 'metroSysIcons'; + font-size: 9pt; + font-weight: normal; + z-index: 102; + top: 0; +} +.metro .tile .tile-content { + width: 100%; + height: 100%; + padding: 0; + margin: 0; + display: block; + position: absolute; + left: 0; + top: 0; + overflow: hidden; +} +.metro .tile .tile-content.padded { + padding: 10px; +} +.metro .tile .tile-content.image { + width: 100%; + min-height: 100%; + max-height: 100%; +} +.metro .tile .tile-content.icon [class*="icon-"], +.metro .tile .tile-content.icon img { + line-height: 56px; + height: 56px; + width: 56px; + font-size: 48px; + color: #ffffff; + text-align: center; + position: absolute; + left: 50%; + top: 50%; + margin-top: -28px; + margin-left: -28px; +} +.metro .tile .tile-content.image-set img { + margin: 0; + padding: 0; + width: 25% !important; + height: 50%; + float: left; + border: 1px #1e1e1e solid; +} +.metro .tile .tile-content.image-set img:first-child { + width: 50% !important; + float: left; + height: 100%; +} +.metro .tile .tile-content { + display: none; +} +.metro .tile .tile-content:first-child { + display: block; +} +.metro .tile .brand, +.metro .tile .tile-status { + position: absolute; + bottom: 0; + left: 0; + right: 0; + min-height: 29px; + margin: 0; +} +.metro .tile .brand:before, +.metro .tile .tile-status:before, +.metro .tile .brand:after, +.metro .tile .tile-status:after { + display: table; + content: ""; +} +.metro .tile .brand:after, +.metro .tile .tile-status:after { + clear: both; +} +.metro .tile .brand.opacity, +.metro .tile .tile-status.opacity { + opacity: .7; +} +.metro .tile .brand .name, +.metro .tile .tile-status .name, +.metro .tile .brand .label, +.metro .tile .tile-status .label, +.metro .tile .brand .text, +.metro .tile .tile-status .text { + display: block; + font-size: 10pt; + margin: 5px 20px 2px 5px; + background: transparent; + color: #ffffff; +} +.metro .tile .brand .text, +.metro .tile .tile-status .text { + margin: 4px 5px; + font-size: 8pt; + line-height: 10pt; +} +.metro .tile .brand .badge, +.metro .tile .tile-status .badge { + position: absolute; + bottom: 0px; + right: 10px; + width: 19px; + height: 19px; + text-align: center; + color: #ffffff; + padding: 5px; + margin: 0; + vertical-align: middle !important; + display: block; + font-size: 10pt; +} +.metro .tile .brand .badge.activity, +.metro .tile .tile-status .badge.activity { + background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGMSURBVDhPvZMtTwNBEIbv2mtScaICcQJRgSgJCQIEhqSiAlEHAlFRwU/ov0AgUEgUsrIkiJIgMOAQJFSQQAIJJBWIu95Hj2eGvXIpB3W8yWTn452Z3dld25pDmqZuFEWdcrm8jr6JK7Bt+wb9Ft85+vsXswBxHHdIfmFNi4TYG7InXAp6ss52kCTJIc6e6KzSVbrdYzrYDaSFXZU4uEQ8x3FW1ZpMJge5Tn3IdQ3kID5iw4zHTqIsUEP3TWCA7WhgDjRZg/eUFRCR3Fl3KYJjyfALIUU46jHcsSlQl8FdmQJnhrcQJFbJ6QZB0LDDMNyS4XBFo1Kp9Gw4/wi247GLHmvNuBaC47Y5gtzIQB1mBmMGdDSdTpfV+QdM8vfcsqkap6ClgQIQa+a4bXViPGRO5ILjuBqYAwk7yIfhXcNz9CljDFkkST6P4JGjnHA7d+gBxAY3tIve1Khljbi1beKvakHQp0uhfTrMjvOL9H3fX9FE8OM7yxAhdem4QWHZkSufSoTYaaVSkY9kYFmfXgyTciI3uacAAAAASUVORK5CYII%3D') 50% no-repeat; +} +.metro .tile .brand .badge.alert, +.metro .tile .tile-status .badge.alert { + background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAFeSURBVDhPpZMtT8RAEIbb7YoTJ04gkQgQuBNIEpB4LD8AwQ9AkCCQhGAvQSAuKHCIE0gEP+DEISAhQYK4pE0/eWa65a7lSvh4k8nsvDv77sxs67UhSZLNNE0LZ3uO/gLj/J+hAkVRWI1+geqMCuR5fkKZoyiKViX+DuQu094wy7KhEmEYrkAk0qt4Nk5R77GszQCuE8fxIXxY8ZJjgiBY8n3/UcTwlsQDNifGmF29AcBtITyGOyan47gXXFfW2g/q+yi+VeptJhVgR1KRHp4HZI+bzknQlhYcvpQZuHRF8xmnCDyLL8MZEI9o4YkW3h1VB+o73DJp3to08l7xsw9Lng5i1EiSSV/Pcbdwzfk8MLcNqjIyye1STnHD5joln7lYcGWtXaP8gYsFfeJyHvR9waExt3wKsV74L3Brn/geu3OUDqiL1T7nNoEK8mLi9RUoZYqlsv4pqtf459/oeR8seozS7mDHCwAAAABJRU5ErkJggg%3D%3D') 50% no-repeat; +} +.metro .tile .brand .badge.available, +.metro .tile .tile-status .badge.available { + background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAAIGNIUk0AAHolAACAgwAA+f8AAIDoAABSCAABFVgAADqXAAAXb9daH5AAAAKvSURBVHjahJA/bJR1HMY/31977x33r2LuClc1LYM9TSAUr5gqtkVJjAkSFxYHE3VgaWRw0cUwOagxMZLApoXFBIwuHVSoQYkVMBXUpqSkMW9jaS25plh7/3rv+3scTIwixs/8PHn+2Bk/SVtN2mqxacYOKw13KfNiXtlneihmDONXqs0VVs/VXP1UqJvnc8qBeZoWYWf9JHXVqWkj2EX55G76X86R4W40aDHNzMdzLBwJLLEWm6fTI+o0knvZ+dkgO/cDfGczTNpl5gjxePrpY0SPMKwKT1A5nCe7Y4ofDgQEv/Ghn2AqunZabUmR9Fb8gQoaUVIVFTSiokaV0qDu0T694Y+rGbWktnQ5+nHiuP+IjrFjR4cqevj9wBK8beO87t6jiyzbKJAiIEWSreQxjAm7QGyeAwzRzb39i/7WFbdV2bGs0nxvs7zjxtlOgRwZPP6v7R5PmhQPUOKEneFLd4UECfqs51WXU/opDL6wb/mdDfJkEfrXgUKk2UKbiM/5BoD76d7reujOANwgJH9H8p14PDnSzBGySZsSReecDIAIDxj/jxH/LcQtW7UJ0E8f69RwuP+0Ohwb1CnTS0CCW6zK3Wb9a4AnNcgWktRoYHdpYhgtWvypfRSARVv5yVXd2smGWuzTHo7qeRZZpk7zH00cRos2ITd5yT/HQY0gPKGW3u0YPvZ06HB77tO2hx5jN5HFTNk11lgHRIs2VW5Tp8kRf5g3eYUUSa5y/eKsfn7NTvlPaCjqelwDF3bx4ADAeXeJc1xijpCYmDJ9jKrCIe0H4IaF81/56VGDJTvtPwV1IFmhTO/4AOWDSQIAWmwiRIokADEx08xeXGD5hUjxQp0GnQCdOAKS1RnNP7tO7VDOMmO9bB8qUQRghVVCW7raUOPEvH45W7IidRoA/DEAmmk0pL+n6f4AAAAASUVORK5CYII%3D') 50% no-repeat; +} +.metro .tile .brand .badge.unavailable, +.metro .tile .tile-status .badge.unavailable { + background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAAIGNIUk0AAHolAACAgwAA+f8AAIDoAABSCAABFVgAADqXAAAXb9daH5AAAAKASURBVHjalJK9axxXFMV/772ZzOysVqvRDgtaSSwpJYFwY3ATEpIm5KNLawgp3Ljz/5E2bu20CYQUBoMNNnaRMkUKqYiQtIgdCQ0TaVc7M29n3nspzC7GMYYcuMWFe7jnHI4YjUY453DOYYyh0+l8opT63vO8L8MwbAshqKqq0lo/c849rqrquXMOIcSbGY1GWGsxxny0urr6MI7jH5RSAFhrAZBSLvc8z3+dTqf3lFL/SCnxAIwxwdra2tP19fXPAC4vL8myjKIoAIiiiF6vR7/fJ0mS75RSH19dXX0hpbwWx8fHrKys/JwkyV1rLYeHh5yenuKc420lzjm2trbY3d3F8zzyPH8ynU6/ERcXF3fiOP7D930ODg44OjoiDMOl7AWstZRlyXA4ZH9/H2MM4/H4K+l53n3f98myjJOTE4Ig+A95kUMURZydnXF+fo5SiiiKHkjf9z9f+AaWst+HRfKL2yiKbssgCNrOOWaz2Xs/vwulFLPZjLquCcPwDcM5x//B2/dyPp9XC3/WWoQQHyQbY2i32/i+T1VVTtZ1/QogSZJlGz/02VpLkiQAlGX5l2ya5mHTNPT7fba3tynLctnAd8llWTIYDNjY2MBaS1EUP0qt9YvJZPI7wM7ODsPhEK01WmuapqFpGrTWVFXFYDBgb28PIQTX19ev67r+TYzHY7TW3W63+zKO41sAaZqSZRk3NzcAtNtter0em5ubAEwmk7/zPP9USjkWaZoyn89xziWdTudRt9v9etGFuq4B8H1/aSXP89dFUdx1zp065xBpmlLXNUIIjDG0Wq1vPc+7H4bhnVarhRCCsiwpiuJPY8xPRVH8EgQBxhistfw7ABpxTL93U9x/AAAAAElFTkSuQmCC') 50% no-repeat; +} +.metro .tile .brand .badge.away, +.metro .tile .tile-status .badge.away { + background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAAIGNIUk0AAHolAACAgwAA+f8AAIDoAABSCAABFVgAADqXAAAXb9daH5AAAAJ2SURBVHjajJI7iFVnFIW//d9zz52ZO2fG14gzJBgbp5JYKPh+NqKxsxWMRZoBCxu1sAuBKFaClj5KDUQhRXybCIqICjqNYjFDhtExN45e7/uc8y+L/yJGp3A1+2fDWv/ea23zlQvIp0gpRgfrWbZRNrhP0cAOopEyGGSvWmQz15zq59SeuC5LsAis0MJ85SLKG8jXY3pXnKb8/X6iBAB8KLhuzZtQf/gbrWc/WTGetSgnAg9qlCiv/pNk1RYAqz3A6jeg/SyoxMtReRNKNsLAhj24gWW0726H+B3+9Rmyd3fPp5KyXMpf/SqNL5KelEIdH5Ke9Ejj8+SnjyrLWkolZbX7f/jZk5h/e3WN7197j0I/NnMMN3MYoiXgBv6/g+rQmUJDR/Ajv4BP0eylnU5u/pgK/Vj9Ee6/411y8gm5a4b1Qfwt9uYUrnoTXBGLvzvoFCXbDLDaVcjfd38WX0JBRCnUroRW/M1qRzRSxgPt55+NPRc8FJJgbtaB4rBz+phRxtcj//hylr5s4YDScvDVT0KfCw7yGpRGIYohfS2H3v4NoL6tYL3BbWwOsoHawY3y1tDJpp46p8pp5U2UrEcLD0BnCtT4bBIXyJ0J/Pwf0eAu8ELtiROO5uQtazy9LMAvPoKGDoU00n/CSr4K2RTkFfyCMRj+OWg2Ht9RNv27+X/PId8cVN+62/SvWAngqtehdq17yjmURlHfZjRvdxi98fyFr/21GWfT5ivnkQehRfSOnqV35S4KpW4w7ZB/1NNNMYf6wzukk3ulbBI1iIJkBBZX1Bn/gby621wyRrx0DcXhQGzPYOnEY/nmKbVeXLTicNcn+DAArZ4503S5ZjkAAAAASUVORK5CYII%3D') 50% no-repeat; +} +.metro .tile .brand .badge.busy, +.metro .tile .tile-status .badge.busy { + background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAAIGNIUk0AAHolAACAgwAA+f8AAIDoAABSCAABFVgAADqXAAAXb9daH5AAAAKNSURBVHjajJI9a1RBGIWfGeLdmPXuKkR0Q0RTmFsFUxgQNcaPRonpbAW1sAlY2IhFfoCIVSDaaVImFhYWmkTxAwJBVgttNqTYQFAjAWPi7t3svXeOxeC3hQdeZpiZ887DmTFuchIlCUoSTLOJ6erqV7F4QYXCaTo68hgDHz82WFmZsbXauKrVWYUhBjCNBsZNTaF6HdVqAT09tzlw4BJhyD8Vx1Au36dSuWyC4LPJMlpwDur1HH19jzh48DiAefUK8+QJVCrgHHR3o2PHUH8/HD16jkKhi7m5UwTBF9zdu6RzcxOJpFRSduOG1N4u5XJ+3LlTam2Vtm+XGxlR2mgokZTOzz90o6PgpqcPpRsbP83GSKWSFEXS/v2+okjq7JRA7vp1pZLSZlPJ5OQZqx07hrVtG+b1a+zNm7B7N4ShR/8u56CtDfbswYyNYZ8+hS1bMPv2XbUKw5MGMNPTsLEBhQJIfwco+SZJAo8f+7XOzj5LR0cegIUFb/715j/lnKerVKDZhFLJWlnrN9OU/1aW/Zha8+FDA4Dublhfh+8N/yVr4etXiCIIAvj0SZa1tRcAOnECtm6FWg2M+dtsDGxu8uMsYJaX31q7unpbcYyOHEFXrsDyMtTrv5NY683VKu7iRTQ4CBKqVm/h7twhnZ9/kEhK41ju2jWpWJTa2qRdu3zl81I+r2x4WNnamv8H5fKLZHQU48bHURwXdfjwM3p6egHs7CzMzPi0swyiCA0MoKEhj76wsOiePx/AmPfGTUwgQFI7UXSP3t5BcjmPvrnp37+19Wf65fJLlpbOK02XqNdpAaClBYJgVe/enWV9fciE4TB79x6iVPLGlRVMtfpGcTymxcUpUyr5nIBvAwDWIWcndiwtQAAAAABJRU5ErkJggg%3D%3D') 50% no-repeat; +} +.metro .tile .brand .badge.newMessage, +.metro .tile .tile-status .badge.newMessage { + background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAC/SURBVDhP1ZE9DgIhFIQhobDYg1haWniMbSw9j0exsfMAeg9L7Sy2kPATnCFI2LgYtjJOMjx4vPkoED+X5OK934cQ+thpFOYvSqmdMMascVDOuQMcGn1GptNaL4W1dgBkMwOSw8jeBJszIKMwexFAN0A+wnQG0Lh4wv0EJIb5AO4fRX8MoDFAlZAyPJSztOSSfiYLAYeyxTcdURcIrqSUJ7iLA4UmAdQbgnqvhakqgEoQXQtTXwEtIuCa9n8pIV67VJf6AmhGmgAAAABJRU5ErkJggg%3D%3D') 50% no-repeat; +} +.metro .tile .brand .badge.paused, +.metro .tile .tile-status .badge.paused { + background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAArSURBVDhPY/j9+7fDnz9//mPBCQxQgE8NE1QN2WDUgFEDQGDUgIE3gIEBAArtNKc4HT7sAAAAAElFTkSuQmCC') 50% no-repeat; +} +.metro .tile .brand .badge.playing, +.metro .tile .tile-status .badge.playing { + background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAEXSURBVDhPY4CBnz9/pvz+/dsFyiUaMEFpBiYmJhkgtf3v37/t////Z4GIEgZwA0CAkZGRBai5AmjIYSCtABXGC1AMQAIWf/78OQ/EEVA+ToDLAJBrBIDUcqBrZgNdwwMRxQQ4DYABoOYUoCGngYFsABVCAQQNgAINYCAf//XrVwGUDwfEGgDyEgfQkH5guGwGukoEKky8AUhA5sePH6DwAQOSDAC6YgIzM7MpJyfnHagQcQYAnfwGiD2BmguBhvyBCoMBMQbsYWFh0WVlZd0B5aMAnAYAbfzz79+/SqBmV6CtL6DCGACXAQ+ABliysbF1QPk4AYYBQI0rgH7VBWo+AxXCC+AGADV+AVKJQL9GAp0MYhMBGBgA8v5j1f90TA8AAAAASUVORK5CYII%3D') 50% no-repeat; +} +.metro .tile .brand .badge.error, +.metro .tile .tile-status .badge.error { + background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAFiSURBVDhPjVM7TsNQELRjy8ISBQeIREtBEYnQUXCINFTkCCBxgNwAJI5AaejSpaCAEqRINBTcIQ1SbD9/mHmfZP3iSIw0ytt9O7O7thMGHpqmGVZVNQnD8AwcMde27RL8rOt6nqbpjy7sA4RTpdQKv20fcbcuy/IOZrGVbIHLpz7RHr52TJCYukuMeU+6WDBjdxej4UyLubMbm0KdBDyTzHWEyY01UEVRnA4Q8IEdaZVAFEW3yD/g+IzzFc6VuTFAHAPXO7vLKQi5q+suuOD+X15yx4ToEXON1QB3B6ZkC3Qd+q8Kaxzbo0TMCTLPefPAfPS8nTeOtnk1YEfMsf11pIm+y/P8BLusmaCZrevsLE1QO3F51FzopJyCQil2pAnFoLLxI7X6z8SxkVjgeMn4H/jGQz3Ht/BrY2MC85nrsI/sjNpDKzMTSODzHPELQ9EY1H9ndFqCHxC/JEnyrgs1guAPTvwreuY0IiIAAAAASUVORK5CYII%3D') 50% no-repeat; +} +.metro .tile .brand .badge.attention, +.metro .tile .tile-status .badge.attention { + background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAEbSURBVDhPtZI9bsJAEIVZ7ANQ5gApEomChjoNBUUOkSJFivSUQE3JEThCCo4BkotcIVKKNEi2vP7hveVZrMFgKPJJo915szOzf51/Jc/zhbV2Jfc+kiR5QrLNsqzEMJJ8O0hcM1kWlWUZKtQOOo69ZGdpmn4ofB12QsI3k1BoRtP8F7Gell0GnT6rrpJ4HOfzUiU1ww7o9HepAGI2juNHyeegw7Ja3FRA9iW5jv9slSl0WqD2rEYjF7Hy68E7gCPNORpjpk44sg2CYAg969JTxVoywYIXmlyfAS77jRPDZ8PZN5j3KfiEYeh2yG07wQN5P4g/d9H9Hf5ZMkHM/QO5NbCzh6IoJgbVI/iNBdrALnY8An9X+w9rpLPbA/sADga+JgSiAAAAAElFTkSuQmCC') 50% no-repeat; +} +.metro .tile.parts > ul { + margin: 0; + padding: 0; + list-style: none; +} +.metro .tile.parts > ul > li { + display: block; + float: left; + height: 60px; + width: 60px; + margin: 0; +} +.metro .tile.parts > .part { + display: block; + float: left; + height: 60px; + width: 60px; + margin: 0; +} +.metro .tile.half .tile-content.icon [class*="icon-"], +.metro .tile.half .tile-content.icon img { + line-height: 37.33333333px; + height: 37.33333333px; + width: 37.33333333px; + font-size: 32px; + color: #ffffff; + text-align: center; + position: absolute; + left: 50%; + top: 50%; + margin-top: -18.66666667px; + margin-left: -18.66666667px; +} +.metro .tile { + font-family: 'Segoe UI_', 'Open Sans', Verdana, Arial, Helvetica, sans-serif; +} +.metro .tile * { + font-family: 'Segoe UI_', 'Open Sans', Verdana, Arial, Helvetica, sans-serif; +} +.metro .tile.scale { + -webkit-transform: scale(0.98); + -moz-transform: scale(0.98); + -ms-transform: scale(0.98); + -o-transform: scale(0.98); + transform: scale(0.98); +} +.metro [draggable] { + cursor: default; +} +.metro .tile .tile-content.email { + color: #ffffff; + padding: 10px; +} +.metro .tile .tile-content.email .email-image { + width: 64px; + height: 64px; + float: left; +} +.metro .tile .tile-content.email .email-image img { + width: 100%; + height: 100%; +} +.metro .tile .tile-content.email .email-data { + display: block; + color: inherit; + margin-left: 70px; + width: auto; + overflow: hidden; +} +.metro .tile .tile-content.email .email-data .email-data-title, +.metro .tile .tile-content.email .email-data .email-data-subtitle, +.metro .tile .tile-content.email .email-data .email-data-text { + color: inherit; + display: block; +} +.metro .tile .tile-content.email .email-data .email-data-title { + font-size: 14pt; +} +.metro .tile .tile-content.email .email-data .email-data-subtitle { + font-size: 11pt; +} +.metro .tile .tile-content.email .email-data .email-data-text { + font-size: 10pt; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} +.metro [class*=tile-transform-] { + -webkit-transition: all 0.22s; + transition: all 0.22s; +} +.metro .tile-transform-right { + -webkit-transform-origin: left 50%; + -moz-transform-origin: left 50%; + -ms-transform-origin: left 50%; + -o-transform-origin: left 50%; + transform-origin: left 50%; + -webkit-transform: perspective(500px) rotateY(0.138372rad); + -moz-transform: perspective(500px) rotateY(0.138372rad); + -ms-transform: perspective(500px) rotateY(0.138372rad); + -o-transform: perspective(500px) rotateY(0.138372rad); + transform: perspective(500px) rotateY(0.138372rad); +} +.metro .tile.double.tile-transform-right { + -webkit-transform: perspective(500px) rotateY(0.069186rad); + -moz-transform: perspective(500px) rotateY(0.069186rad); + -ms-transform: perspective(500px) rotateY(0.069186rad); + -o-transform: perspective(500px) rotateY(0.069186rad); + transform: perspective(500px) rotateY(0.069186rad); +} +.metro .tile.triple.tile-transform-right { + -webkit-transform: perspective(500px) rotateY(0.046124rad); + -moz-transform: perspective(500px) rotateY(0.046124rad); + -ms-transform: perspective(500px) rotateY(0.046124rad); + -o-transform: perspective(500px) rotateY(0.046124rad); + transform: perspective(500px) rotateY(0.046124rad); +} +.metro .tile.quadro.tile-transform-right { + -webkit-transform: perspective(500px) rotateY(0.034593rad); + -moz-transform: perspective(500px) rotateY(0.034593rad); + -ms-transform: perspective(500px) rotateY(0.034593rad); + -o-transform: perspective(500px) rotateY(0.034593rad); + transform: perspective(500px) rotateY(0.034593rad); +} +.metro .tile.half.tile-transform-right { + -webkit-transform: perspective(500px) rotateY(0.276744rad); + -moz-transform: perspective(500px) rotateY(0.276744rad); + -ms-transform: perspective(500px) rotateY(0.276744rad); + -o-transform: perspective(500px) rotateY(0.276744rad); + transform: perspective(500px) rotateY(0.276744rad); +} +.metro .tile-transform-left { + -webkit-transform-origin: right 50%; + -moz-transform-origin: right 50%; + -ms-transform-origin: right 50%; + -o-transform-origin: right 50%; + transform-origin: right 50%; + -webkit-transform: perspective(500px) rotateY(-0.138372rad); + -moz-transform: perspective(500px) rotateY(-0.138372rad); + -ms-transform: perspective(500px) rotateY(-0.138372rad); + -o-transform: perspective(500px) rotateY(-0.138372rad); + transform: perspective(500px) rotateY(-0.138372rad); + +} +.metro .tile.double.tile-transform-left { + -webkit-transform: perspective(500px) rotateY(-0.069186rad); + -moz-transform: perspective(500px) rotateY(-0.069186rad); + -ms-transform: perspective(500px) rotateY(-0.069186rad); + -o-transform: perspective(500px) rotateY(-0.069186rad); + transform: perspective(500px) rotateY(-0.069186rad); +} +.metro .tile.triple.tile-transform-left { + -webkit-transform: perspective(500px) rotateY(-0.046124rad); + -moz-transform: perspective(500px) rotateY(-0.046124rad); + -ms-transform: perspective(500px) rotateY(-0.046124rad); + -o-transform: perspective(500px) rotateY(-0.046124rad); + transform: perspective(500px) rotateY(-0.046124rad); +} +.metro .tile.quadro.tile-transform-left { + -webkit-transform: perspective(500px) rotateY(-0.034593rad); + -moz-transform: perspective(500px) rotateY(-0.034593rad); + -ms-transform: perspective(500px) rotateY(-0.034593rad); + -o-transform: perspective(500px) rotateY(-0.034593rad); + transform: perspective(500px) rotateY(-0.034593rad); +} +.metro .tile.half.tile-transform-left { + -webkit-transform: perspective(500px) rotateY(-0.276744rad); + -moz-transform: perspective(500px) rotateY(-0.276744rad); + -ms-transform: perspective(500px) rotateY(-0.276744rad); + -o-transform: perspective(500px) rotateY(-0.276744rad); + transform: perspective(500px) rotateY(-0.276744rad); +} +.metro .tile-transform-top { + -webkit-transform-origin: 50% bottom; + -moz-transform-origin: 50% bottom; + -ms-transform-origin: 50% bottom; + -o-transform-origin: 50% bottom; + transform-origin: 50% bottom; + -webkit-transform: perspective(500px) rotateX(0.138372rad); + -moz-transform: perspective(500px) rotateX(0.138372rad); + -ms-transform: perspective(500px) rotateX(0.138372rad); + -o-transform: perspective(500px) rotateX(0.138372rad); + transform: perspective(500px) rotateX(0.138372rad); +} +.metro .tile.double.tile-transform-top { + -webkit-transform: perspective(500px) rotateX(0.069186rad); + -moz-transform: perspective(500px) rotateX(0.069186rad); + -ms-transform: perspective(500px) rotateX(0.069186rad); + -o-transform: perspective(500px) rotateX(0.069186rad); + transform: perspective(500px) rotateX(0.069186rad); +} +.metro .tile.triple.tile-transform-top { + -webkit-transform: perspective(500px) rotateX(0.046124rad); + -moz-transform: perspective(500px) rotateX(0.046124rad); + -ms-transform: perspective(500px) rotateX(0.046124rad); + -o-transform: perspective(500px) rotateX(0.046124rad); + transform: perspective(500px) rotateX(0.046124rad); +} +.metro .tile.quadro.tile-transform-top { + -webkit-transform: perspective(500px) rotateX(0.034593rad); + -moz-transform: perspective(500px) rotateX(0.034593rad); + -ms-transform: perspective(500px) rotateX(0.034593rad); + -o-transform: perspective(500px) rotateX(0.034593rad); + transform: perspective(500px) rotateX(0.034593rad); +} +.metro .tile.half.tile-transform-top { + -webkit-transform: perspective(500px) rotateX(0.276744rad); + -moz-transform: perspective(500px) rotateX(0.276744rad); + -ms-transform: perspective(500px) rotateX(0.276744rad); + -o-transform: perspective(500px) rotateX(0.276744rad); + transform: perspective(500px) rotateX(0.276744rad); +} +.metro .tile-transform-bottom { + -webkit-transform-origin: 50% top; + -moz-transform-origin: 50% top; + -ms-transform-origin: 50% top; + -o-transform-origin: 50% top; + transform-origin: 50% top; + -webkit-transform: perspective(500px) rotateX(-0.138372rad); + -moz-transform: perspective(500px) rotateX(-0.138372rad); + -ms-transform: perspective(500px) rotateX(-0.138372rad); + -o-transform: perspective(500px) rotateX(-0.138372rad); + transform: perspective(500px) rotateX(-0.138372rad); +} +.metro .tile.double.tile-transform-bottom { + -webkit-transform: perspective(500px) rotateX(-0.069186rad); + -moz-transform: perspective(500px) rotateX(-0.069186rad); + -ms-transform: perspective(500px) rotateX(-0.069186rad); + -o-transform: perspective(500px) rotateX(-0.069186rad); + transform: perspective(500px) rotateX(-0.069186rad); +} +.metro .tile.triple.tile-transform-bottom { + -webkit-transform: perspective(500px) rotateX(-0.046124rad); + -moz-transform: perspective(500px) rotateX(-0.046124rad); + -ms-transform: perspective(500px) rotateX(-0.046124rad); + -o-transform: perspective(500px) rotateX(-0.046124rad); + transform: perspective(500px) rotateX(-0.046124rad); +} +.metro .tile.quadro.tile-transform-bottom { + -webkit-transform: perspective(500px) rotateX(-0.034593rad); + -moz-transform: perspective(500px) rotateX(-0.034593rad); + -ms-transform: perspective(500px) rotateX(-0.034593rad); + -o-transform: perspective(500px) rotateX(-0.034593rad); + transform: perspective(500px) rotateX(-0.034593rad); +} +.metro .tile.half.tile-transform-bottom { + -webkit-transform: perspective(500px) rotateX(-0.276744rad); + -moz-transform: perspective(500px) rotateX(-0.276744rad); + -ms-transform: perspective(500px) rotateX(-0.276744rad); + -o-transform: perspective(500px) rotateX(-0.276744rad); + transform: perspective(500px) rotateX(-0.276744rad); +} +.metro .carousel { + display: block; + position: relative; + overflow: hidden; + background-color: #eeeeee; +} +.metro .carousel .slide { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + display: none; + padding: 0; +} +.metro .carousel .slide div.subslide { + z-index: 2; + position: absolute; + top: 10px; + left: 10px; +} +.metro .carousel .slide img.cover { + width: 100%; + min-height: 100%; + z-index: 1; + position: absolute; + top: 0 !important; + left: 0 !important; +} +.metro .carousel .slide:first-child { + display: block; +} +.metro .carousel .controls { + display: block; + position: absolute; + top: 50%; + left: 15px; + min-width: 40px; + min-height: 40px; + width: auto; + height: auto; + margin-top: -20px; + font-size: 48pt; + font-weight: 100; + line-height: 30px; + color: #fff; + text-align: center; + cursor: pointer; + opacity: .75; + z-index: 100; +} +.metro .carousel .controls.right { + left: auto; + right: 15px; +} +.metro .carousel .controls:hover { + opacity: 1; +} +.metro .carousel .markers { + z-index: 100; + margin: 0; + padding: 0; + display: block; + position: absolute; + bottom: 10px; + left: 10px; +} +.metro .carousel .markers > ul { + padding-left: 0; + list-style: none; +} +.metro .carousel .markers > ul li ul, +.metro .carousel .markers > ul li ol { + list-style: none; + padding-left: 25px; +} +.metro .carousel .markers li { + display: block; + float: left; + margin-right: 5px; +} +.metro .carousel .markers li a { + background-color: #ffffff; + display: block; + float: left; + border: 1px #ffffff solid; +} +.metro .carousel .markers li.active a { + background-color: #f0a30a; +} +.metro .carousel .markers.default > ul > li > a { + width: 32px; + height: 6px; +} +.metro .carousel .markers.cycle > ul > li > a { + width: 24px; + height: 24px; + border-radius: 50%; +} +.metro .carousel .markers.square > ul > li > a { + width: 24px; + height: 24px; +} +.metro .rating { + color: #2784a7; + cursor: pointer; + display: block; + width: auto; + margin: 0 10px 10px 0; + height: 28px; +} +.metro .rating:before, +.metro .rating:after { + display: table; + content: ""; +} +.metro .rating:after { + clear: both; +} +.metro .rating ul { + list-style: none; + color: inherit; + display: block; + margin: 0; + padding: 0; + margin-bottom: 5px; +} +.metro .rating ul:before, +.metro .rating ul:after { + display: table; + content: ""; +} +.metro .rating ul:after { + clear: both; +} +.metro .rating ul li { + display: block; + float: left; + position: relative; + font-family: metroSysIcons; + font-size: 28px; + line-height: 28px; + color: inherit; +} +.metro .rating ul li:before { + content: '\e014'; +} +.metro .rating ul li.rated:before { + content: '\e016'; +} +.metro .rating ul li.rated.half:before { + content: '\e015'; +} +.metro .rating ul li.half:before { + content: '\e015'; +} +.metro .rating .score-hint { + display: block; + font-size: 12px; + color: #1d1d1d; +} +.metro .rating.active ul:hover > li:before { + content: '\e016'; +} +.metro .rating.active ul li:hover ~ li:before { + content: '\e014' !important; +} +.metro .rating.active ul li:hover:before { + content: '\e016' !important; +} +.metro .rating.small li { + font-size: 18.66666667px; + line-height: 18.66666667px; +} +.metro .rating.small .score-hint { + margin-top: -5px; + font-size: 12px; +} +.metro .rating.large li { + font-size: 42px; +} +.metro .rating.large .score-hint { + margin-top: 10px; + font-size: 16px; +} +.metro .pagination { + width: auto; + margin-bottom: 10px; +} +.metro .pagination > ul { + padding-left: 0; + list-style: none; + margin: 0; +} +.metro .pagination > ul li ul, +.metro .pagination > ul li ol { + list-style: none; + padding-left: 25px; +} +.metro .pagination > ul:before, +.metro .pagination > ul:after { + display: table; + content: ""; +} +.metro .pagination > ul:after { + clear: both; +} +.metro .pagination > ul li { + display: block; + float: left; + margin-right: 1px; + position: relative; +} +.metro .pagination > ul li a { + padding: 4px 12px; + text-align: center; + vertical-align: middle !important; + background-color: #d9d9d9; + border: 1px transparent solid; + color: #222222; + border-radius: 0; + cursor: pointer; + display: inline-block; + outline: none; + font-family: 'Segoe UI Light_', 'Open Sans Light', Verdana, Arial, Helvetica, sans-serif; + font-size: 14px; + line-height: 16px; + margin: auto; + color: inherit; + display: block; + float: left; + margin-right: 1px; +} +.metro .pagination > ul li a.default { + background-color: #008287; + color: #fff; +} +.metro .pagination > ul li a:focus { + outline: 0; + border: 1px #353535 dotted; +} +.metro .pagination > ul li a:disabled, +.metro .pagination > ul li a.disabled { + background-color: #eaeaea !important; + color: #bebebe !important; + cursor: not-allowed !important; +} +.metro .pagination > ul li a * { + color: inherit; +} +.metro .pagination > ul li a *:hover { + color: inherit; +} +.metro .pagination > ul li a.primary { + background-color: #16499a !important; + color: #ffffff !important; +} +.metro .pagination > ul li a.info { + background-color: #4390df !important; + color: #ffffff !important; +} +.metro .pagination > ul li a.success { + background-color: #60a917 !important; + color: #ffffff !important; +} +.metro .pagination > ul li a.warning { + background-color: #fa6800 !important; + color: #ffffff !important; +} +.metro .pagination > ul li a.danger { + background-color: #9a1616 !important; + color: #ffffff !important; +} +.metro .pagination > ul li a.inverse { + background-color: #1d1d1d !important; + color: #ffffff !important; +} +.metro .pagination > ul li a.link { + background-color: transparent !important; + color: #2e92cf !important; +} +.metro .pagination > ul li a.link:hover { + text-decoration: underline; +} +.metro .pagination > ul li a.link:disabled, +.metro .pagination > ul li a.link.disabled { + background-color: transparent !important; + color: #bebebe !important; + cursor: not-allowed !important; +} +.metro .pagination > ul li a.link [class*="icon-"] { + text-decoration: none !important; +} +.metro .pagination > ul li a:active { + background-color: #1d1d1d !important; + color: #ffffff !important; + border-color: transparent; +} +.metro .pagination > ul li a.large { + padding: 11px 19px; + font-size: 17.5px; +} +.metro .pagination > ul li a.small { + padding: 2px 10px; + font-size: 11.9px; +} +.metro .pagination > ul li a.mini { + padding: 0px 6px; + font-size: 10.5px; +} +.metro .pagination > ul li.active a { + background-color: #4390df; + color: #ffffff; +} +.metro .pagination > ul li.disabled a, +.metro .pagination > ul li.spaces a { + background-color: #f2f2f2; + color: #1e1e1e; + cursor: not-allowed; +} +.metro .pagination > ul li.disabled a:active, +.metro .pagination > ul li.spaces a:active { + top: 0; + left: 0; +} +.metro .pagination > ul li.disabled a { + color: #1e1e1e; +} +.metro .pagination > ul li.spaces a { + background-color: #ffffff; + cursor: default; +} +.metro .pagination.small ul li a { + padding: 2px 10px; + font-size: 11.9px; +} +.metro .pagination.mini ul li a { + padding: 0px 6px; + font-size: 10.5px; +} +.metro .countdown, +.metro .times { + width: auto; + margin: 0 auto; + font: 20px/1.5 'Open Sans Condensed', sans-serif; + text-align: center; + letter-spacing: -3px; +} +.metro .countdown .digit-wrapper, +.metro .times .digit-wrapper { + display: inline-block; + height: 1.6em; + overflow: hidden; + position: relative; + width: 1.05em; +} +.metro .countdown .digit-wrapper .digit, +.metro .times .digit-wrapper .digit { + position: absolute; + display: block; + width: 1em; + text-align: center; + vertical-align: middle; + letter-spacing: -1px; +} +.metro .countdown .digit-wrapper .digit.stop, +.metro .times .digit-wrapper .digit.stop { + background-color: #e51400; +} +.metro .countdown .divider, +.metro .times .divider { + display: inline-block; + width: 16px; + height: 1.5em; + position: relative; + font-weight: bold; +} +.metro .countdown .divider:before, +.metro .times .divider:before { + width: 100%; + height: 1.5em; + position: absolute; + content: ":"; + color: inherit; + font-size: inherit; + vertical-align: middle; + text-align: center; + left: -20%; + top: -15%; +} +.metro .countdown.inverse .digit, +.metro .times.inverse .digit { + color: #333333 !important; + background-color: #eeeeee !important; +} +.metro .tab-control .tabs { + padding-left: 0; + list-style: none; + margin: 0 !important; + z-index: 2; +} +.metro .tab-control .tabs li ul, +.metro .tab-control .tabs li ol { + list-style: none; + padding-left: 25px; +} +.metro .tab-control .tabs:before, +.metro .tab-control .tabs:after { + display: table; + content: ""; +} +.metro .tab-control .tabs:after { + clear: both; +} +.metro .tab-control .tabs > li { + background-color: #ffffff; + display: block; + float: left; + margin-left: 5px; + position: relative; +} +.metro .tab-control .tabs > li > a { + border: 1px #eeeeee solid; + display: block; + float: left; + padding: 5px 10px; + z-index: 10; + top: 0; + left: 0; + color: inherit; + background-color: #eeeeee; +} +.metro .tab-control .tabs > li.active a { + border-bottom-color: #ffffff; + background-color: #ffffff; + border-top: 2px #e51400 solid; +} +.metro .tab-control .tabs > li.active:hover a { + background-color: #ffffff; + color: #1d1d1d; +} +.metro .tab-control .tabs > li:hover a { + background-color: #d5d5d5; + color: #ffffff; +} +.metro .tab-control .tabs > li.place-right { + float: right; + margin-right: 5px; + margin-left: auto; +} +.metro .tab-control .tabs.no-spaces > li { + margin-left: 0; +} +.metro .tab-control .frames { + z-index: 1; + border: 1px #eeeeee solid; + margin-top: -1px; +} +.metro .tab-control .frames .frame { + display: none; +} +.metro .tab-control .frames .frame:first-child { + display: block; +} +.metro .tab-control .frame { + padding: 20px; +} +.metro .progress-bar { + display: block; + position: relative; + height: 10px; + width: 100%; + margin-bottom: 10px; + background-color: #eeeeee; +} +.metro .progress-bar:before, +.metro .progress-bar:after { + display: table; + content: ""; +} +.metro .progress-bar:after { + clear: both; +} +.metro .progress-bar .bar { + position: relative; + display: block; + float: left; + width: 0; + background-color: #1ba1e2; + height: 100%; +} +.metro .progress-bar.small { + height: 5px; +} +.metro .progress-bar.large { + height: 15px; +} +.metro .sidebar { + margin: 0; + padding: 0; + background-color: #3D3D3D; + width: 100%; + height: 100%; +} +.metro .sidebar > ul { + margin: 0; + padding: 0; + list-style: none; +} +.metro .sidebar > ul li { + display: block; + border: 0; + border-bottom: 1px #5c5c5c solid; + position: relative; +} +.metro .sidebar > ul li.title { + padding: 20px 20px 10px 20px; + font-family: 'Segoe UI Light_', 'Open Sans Light', Verdana, Arial, Helvetica, sans-serif; + font-weight: 300; + color: #000000; + letter-spacing: 0.00em; + font-size: 2.5rem; + line-height: 2.5rem; + letter-spacing: 0.01em; + color: rgba(0, 0, 0, 0.6); + font-size: 2.2rem; + line-height: 2.2rem; + color: #ffffff; +} +.metro .sidebar > ul li a { + display: block; + position: relative; + padding: 10px 20px; + text-decoration: none; + color: #eeeeee; + background-color: #3D3D3D; +} +.metro .sidebar > ul li a:hover { + background-color: #262626; + color: #ffffff; +} +.metro .sidebar > ul li a.dropdown-toggle:after { + right: 10px; + bottom: 5px; +} +.metro .sidebar > ul li a [class*="icon-"] { + margin-right: 15px; +} +.metro .sidebar > ul li.stick { + position: relative; +} +.metro .sidebar > ul li.stick:before { + content: ""; + position: absolute; + width: 7px; + height: 40px; + left: -7px; + text-indent: -9999px; + border-top-left-radius: 5px; + border-bottom-left-radius: 5px; + background-color: inherit; +} +.metro .sidebar > ul li.disabled a { + background-color: #8a8a8a; + cursor: default; + color: #555555; +} +.metro .sidebar > ul li.active a { + background-color: #9a1616; + color: #ffffff; +} +.metro .sidebar > ul ul { + margin: 0; + padding: 0; + list-style: none; + position: absolute; + display: none; + z-index: 1000; + background: #ffffff; + min-width: 220px; + width: auto; + border: 1px solid #dcddde; + box-shadow: none; + position: relative !important; + background-color: #e5e5e5; + min-width: 100%; +} +.metro .sidebar > ul ul li { + display: block; + margin: 10px 0; + padding: 0; + vertical-align: baseline; + position: relative; + font-family: 'Segoe UI_', 'Open Sans', Verdana, Arial, Helvetica, sans-serif; +} +.metro .sidebar > ul ul li a { + display: block; + text-decoration: none; + font-family: 'Segoe UI Light_', 'Open Sans Light', Verdana, Arial, Helvetica, sans-serif; + font-weight: 300; + color: #000000; + letter-spacing: 0.00em; + font-size: 2.5rem; + line-height: 2.5rem; + letter-spacing: 0.01em; + color: rgba(0, 0, 0, 0.6); + line-height: 2.2rem; + font-size: 2.2rem; + color: inherit; +} +.metro .sidebar > ul ul li.title { + font-family: 'Segoe UI Light_', 'Open Sans Light', Verdana, Arial, Helvetica, sans-serif; + font-weight: 300; + color: #000000; + letter-spacing: 0.00em; + font-size: 2.5rem; + line-height: 2.5rem; + letter-spacing: 0.01em; + font-size: 4rem; + margin-bottom: 20px; +} +.metro .sidebar > ul ul.compact a { + font-weight: normal; + font-size: 10.5pt; + line-height: 12pt; + color: inherit; +} +.metro .sidebar > ul ul.compact li.title { + margin-bottom: 10px; + font-family: 'Segoe UI Semibold_', 'Open Sans Bold', Verdana, Arial, Helvetica, sans-serif; + font-weight: bold; + color: #000000; + font-size: 1.6rem; + line-height: 1.6rem; + letter-spacing: 0.02em; +} +.metro .sidebar > ul ul ul.secondary { + margin: 0; + padding: 0; + list-style: none; + margin-left: 15px; +} +.metro .sidebar > ul ul ul.secondary li a { + font-family: 'Segoe UI Semibold_', 'Open Sans Bold', Verdana, Arial, Helvetica, sans-serif; + font-weight: bold; + color: #000000; + font-size: 1.6rem; + line-height: 1.6rem; + letter-spacing: 0.02em; + font-weight: normal; + font-style: normal; + line-height: 1.4rem; + color: inherit; +} +.metro .sidebar > ul ul.shadow { + box-shadow: 3px 3px 0 rgba(236, 236, 236, 0.7); +} +.metro .sidebar > ul ul li { + margin: 5px 0 0; + width: 100%; + border: 1px transparent solid; +} +.metro .sidebar > ul ul li:last-child { + margin-bottom: 5px; +} +.metro .sidebar > ul ul li.disabled, +.metro .sidebar > ul ul li.disabled:hover { + cursor: default !important; + background: transparent !important; + color: #eeeeee; +} +.metro .sidebar > ul ul li.disabled a, +.metro .sidebar > ul ul li.disabled:hover a { + color: inherit; + cursor: inherit; + background: inherit; +} +.metro .sidebar > ul ul a { + padding: 8px 32px !important; + color: inherit; + font-size: 15px !important; + line-height: 14px !important; + cursor: pointer; +} +.metro .sidebar > ul ul li:hover { + background: #edf4fc; + border-color: #a8d2fd; +} +.metro .sidebar > ul ul li.checked a:before, +.metro .sidebar > ul ul li.checked-partial a:before, +.metro .sidebar > ul ul li.unchecked a:before { + font-family: metroSysIcons; + position: absolute; + left: 10px; + content: "\e004"; +} +.metro .sidebar > ul ul li.checked-partial a:before { + content: "\e005"; +} +.metro .sidebar > ul ul li.unchecked a:before { + content: "\e005"; +} +.metro .sidebar > ul ul.place-right { + right: -15px; + left: auto; +} +.metro .sidebar > ul ul .divider { + padding: 0; + height: 1px; + margin: 9px 1px; + overflow: hidden; + background-color: #e5e5e5; + border-width: 0; +} +.metro .sidebar > ul ul .divider:hover { + background: #e5e5e5; +} +.metro .sidebar > ul ul.open { + display: block !important; +} +.metro .sidebar > ul ul .dropdown-menu { + left: 100%; + top: -10%; +} +.metro .sidebar > ul ul > li:hover > .dropdown-menu[data-show="hover"] { + display: block; +} +.metro .sidebar > ul ul > li > a.dropdown-toggle:after { + font-family: metroSysIcons; + font-size: .7em; + content: "\e001"; + left: 90%; + top: 50%; + margin-top: -1.4em; + -webkit-transform: rotate(-90deg); + -moz-transform: rotate(-90deg); + -ms-transform: rotate(-90deg); + -o-transform: rotate(-90deg); + transform: rotate(-90deg); +} +.metro .sidebar > ul ul.drop-left { + left: -100%; +} +.metro .sidebar > ul ul.drop-up { + top: auto; + bottom: 0; +} +.metro .sidebar > ul ul .menu-title { + background-color: #f6f7f8; + font-size: 12px; + line-height: 14px; + padding: 4px 8px; + border: 0; + border-bottom: 1px #dcddde solid; + border-top: 1px #dcddde solid; + color: #646464; +} +.metro .sidebar > ul ul .menu-title:first-child { + margin: 0; + border-top-width: 0; +} +.metro .sidebar > ul ul .menu-title:first-child:hover { + border-top-width: 0; +} +.metro .sidebar > ul ul .menu-title:hover { + background-color: #f6f7f8; + cursor: default; + border: 0; + border-bottom: 1px #dcddde solid; + border-top: 1px #dcddde solid; +} +.metro .sidebar > ul ul.inverse { + border: 2px #3b3b3b solid; +} +.metro .sidebar > ul ul.inverse li { + border: 0; +} +.metro .sidebar > ul ul.inverse li a { + padding: 9px 32px !important; +} +.metro .sidebar > ul ul.inverse li:hover { + border: 0; + background-color: #e5e5e5; +} +.metro .sidebar > ul ul.inverse .menu-title:hover { + background-color: #f6f7f8; +} +.metro .sidebar > ul ul.inverse .divider { + margin-left: 0; + margin-right: 0; +} +.metro .sidebar > ul ul.dark { + background-color: #333333; + border: 2px #333333 solid; + color: #ffffff; +} +.metro .sidebar > ul ul.dark.opacity { + background-color: rgba(61, 61, 61, 0.9); +} +.metro .sidebar > ul ul.dark li { + border: 0; + color: inherit; +} +.metro .sidebar > ul ul.dark li a { + padding: 9px 32px !important; + color: inherit; +} +.metro .sidebar > ul ul.dark li.disabled, +.metro .sidebar > ul ul.dark li.disabled:hover { + cursor: default !important; + background: transparent !important; + color: #555555; +} +.metro .sidebar > ul ul.dark li.disabled a, +.metro .sidebar > ul ul.dark li.disabled:hover a { + color: inherit; + cursor: inherit; + background: inherit; +} +.metro .sidebar > ul ul.dark li:hover { + border: 0; + background-color: #201a1a; + color: #ffffff; +} +.metro .sidebar > ul ul.dark .menu-title { + background-color: #3b3b3b; +} +.metro .sidebar > ul ul.dark .menu-title:hover { + background-color: #3b3b3b; +} +.metro .sidebar > ul ul.dark .divider { + margin-left: 0; + margin-right: 0; + background-color: #555555; +} +.metro .sidebar > ul ul.dark .divider:hover { + background: #555555; +} +.metro .sidebar > ul ul li { + border: 0; +} +.metro .sidebar > ul ul li a { + background-color: #e5e5e5; +} +.metro .sidebar > ul ul li.divider { + background-color: #c2c2c2; +} +.metro .sidebar > ul ul li.divider:hover { + background-color: #c2c2c2; +} +.metro .sidebar > ul ul li.disabled a { + color: #999999; +} +.metro .sidebar > ul ul li.disabled a:hover { + color: #999999; +} +.metro .sidebar > ul ul.open { + display: block; +} +.metro .sidebar.light { + background-color: #ffffff; + border: 1px #eaeaea solid; +} +.metro .sidebar.light li { + border-bottom-color: #eeeeee; +} +.metro .sidebar.light li.title { + color: #1d1d1d; +} +.metro .sidebar.light li a { + color: #1d1d1d; + background-color: #ffffff; +} +.metro .sidebar.light li a:hover { + background-color: #00aff0; +} +.metro .sidebar.light li ul { + background-color: #ffffff; + border: 1px transparent solid; +} +.metro .sidebar.light li .divider { + background-color: #eeeeee; +} +.metro .sidebar.light li .divider:hover { + background-color: #eeeeee; +} +.metro .sidebar.light li.disabled a { + background-color: #ffffff; + cursor: default; + color: #999999; +} +.metro .sidebar.light li.active a { + background-color: #1ba1e2; + color: #ffffff; +} +.metro .accordion > .accordion-frame { + border: 1px #eaeaea solid; + margin-bottom: 2px; +} +.metro .accordion > .accordion-frame > .heading { + display: block; + text-decoration: none; + background-color: #eeeeee; + padding: 10px 20px; + width: 100%; + position: relative; + color: #1d1d1d; +} +.metro .accordion > .accordion-frame > .heading [class*="icon-"] { + margin-right: 10px; +} +.metro .accordion > .accordion-frame > .content { + padding: 10px; +} +.metro .accordion > .accordion-frame > .content { + display: none; +} +.metro .accordion.with-marker .heading:before { + position: absolute; + display: block; + left: 5px; + top: 12px; + content: ''; + width: 0; + height: 0; + border-left: 7px solid transparent; + border-top: 7px solid transparent; + border-bottom: 7px solid black; +} +.metro .accordion.with-marker .heading.collapsed:before { + -webkit-transform: rotate(-45deg); + -moz-transform: rotate(-45deg); + -ms-transform: rotate(-45deg); + -o-transform: rotate(-45deg); + transform: rotate(-45deg); + margin-left: -4px; +} +.metro .calendar { + width: 250px; + border: 1px #eeeeee solid; + font-size: 10pt; +} +.metro .calendar table { + width: 100%; + border-collapse: collapse; +} +.metro .calendar td, +.metro .calendar th { + padding: 0; + width: 14.28%; +} +.metro .calendar td { + border: 1px solid; + border-color: #e6f5fc; +} +.metro .calendar td:first-child { + border-left: 0; +} +.metro .calendar td:last-child { + border-right: 0; +} +.metro .calendar tr:last-child td { + border-bottom: 0; +} +.metro .calendar .day-of-week { + padding: 5px; + cursor: default; +} +.metro .calendar a { + display: block; + padding: 5px; +} +.metro .calendar a:hover { + background-color: #eeeeee; + color: #1d1d1d; +} +.metro .calendar .calendar-header { + background-color: #1ba1e2; + color: #ffffff; +} +.metro .calendar .calendar-header td, +.metro .calendar .calendar-header th { + border: 0 !important; +} +.metro .calendar .calendar-header td a, +.metro .calendar .calendar-header th a { + color: #ffffff; +} +.metro .calendar .calendar-header td a:hover, +.metro .calendar .calendar-header th a:hover { + background-color: #1ba1e2; + color: #ffffff; +} +.metro .calendar .calendar-actions td, +.metro .calendar .calendar-actions th { + padding: 10px; +} +.metro .calendar .today a { + background-color: #a0e857; + color: #1d1d1d; +} +.metro .calendar .today a:hover { + background-color: #128023; + color: #ffffff; +} +.metro .calendar .day a { + display: block; + position: relative; + border: 2px transparent solid; +} +.metro .calendar .day a.selected { + border: 4px #4390df solid; + border-width: 1px; +} +.metro .calendar .day a.selected:after { + position: absolute; + display: block; + border-top: 28px solid #4390df; + border-left: 28px solid transparent; + right: 0; + content: ""; + top: 0; + z-index: 101; +} +.metro .calendar .day a.selected:before { + position: absolute; + display: block; + content: "\e003"; + color: #fff; + right: 0; + font-family: 'metroSysIcons'; + font-size: 9pt; + font-weight: normal; + z-index: 102; + top: 0; +} +.metro .calendar .day a.selected:after { + border-top-width: 12px; + border-left-width: 12px; +} +.metro .calendar .day a.selected:before { + font-size: 4pt; +} +.metro .calendar .month a, +.metro .calendar .year a { + padding-top: 20px; + padding-bottom: 20px; +} +.metro .calendar .other-day { + display: block; + text-align: center; + color: #999999; +} +.metro .calendar-dropdown { + border: 0; + box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3), 0 3px 8px rgba(0, 0, 0, 0.2); +} +.metro .slider { + height: 12px; + width: auto; + position: relative; + background-color: #c6c6c6; + margin-bottom: 10px; +} +.metro .slider .marker { + height: 12px; + width: 12px; + cursor: pointer; + position: absolute; + top: 0; + left: 0; + background-color: #000000; + z-index: 2; +} +.metro .slider .marker:focus, +.metro .slider .marker:active, +.metro .slider .markerhover { + outline: 2px #e51400 solid; +} +.metro .slider .complete { + height: 100%; + width: auto; + background-color: #00828b; + z-index: 1; + transition: background .3s ease; +} +.metro .slider > .hint { + background-color: #ffffff; + position: absolute; + z-index: 3; + border: 1px #ccc solid; + padding: 2px 4px; + top: -40px; + min-width: 30px; + text-align: center; + font-family: 'Segoe UI Light_', 'Open Sans Light', Verdana, Arial, Helvetica, sans-serif; + font-size: 14px; + box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3), 0 3px 8px rgba(0, 0, 0, 0.2); + display: none; +} +.metro .slider.permanent-hint > .hint { + display: block; +} +.metro .slider.hint-bottom .hint { + top: 100%; + margin-top: 5px; +} +.metro .slider.vertical { + height: 100px; + width: 12px; +} +.metro .slider.vertical .marker { + left: 0 !important; +} +.metro .slider.vertical .complete { + position: absolute; + height: auto; + width: 100% !important; + bottom: 0; + left: 0; +} +.metro .slider.vertical .hint { + left: 100%; + margin-left: 5px; + margin-top: 0; +} +.metro .slider.vertical.hint-left .hint { + left: -40px; +} +.metro .slider:hover .complete { + background-color: #219297; +} +.metro .slider:active .complete, +.metro .slider:active + .marker:active .complete { + background-color: #219297; +} +.metro .slider.place-left { + margin-right: 20px; +} +.metro .slider.place-right { + margin-left: 20px; +} +.metro.window-overlay { + position: fixed; + left: 0; + top: 0; + right: 0; + bottom: 0; + background-color: rgba(255, 255, 255, 0); + z-index: 1049; +} +.metro .window { + border: 8px #6badf6 solid; + position: relative; + background-color: #ffffff; + min-height: 200px; + min-width: 200px; + border-top: 0; +} +.metro .window .caption { + position: absolute; + top: 0; + height: 32px; + width: 100%; + background-color: #6badf6; + cursor: default; + z-index: 2; + border-top: 8px #6badf6 solid; +} +.metro .window .caption .icon { + width: 16px; + height: 16px; + font-size: 16px; + margin-top: 0; + margin-left: 0px; + margin-right: 5px; + position: relative; + float: left; +} +.metro .window .caption .title { + font-size: 14px; + margin-top: -2px; + margin-left: 4px; + position: relative; + float: left; +} +.metro .window .caption .super-title { + position: absolute; + top: 6px; + left: 0; + display: block; + width: 100%; + text-align: center; + z-index: 0; +} +.metro .window .content { + position: relative; + margin-top: 40px; + width: 100%; + height: 88%; + height: -webkit-calc(100% - 40px); + height: -moz-calc(100% - 40px); + height: -o-calc(100% - 40px); + height: -ms-calc(100% - 40px); + height: calc(100% - 40px); + overflow-y: auto; + overflow-x: hidden; + + -webkit-box-sizing: content-box; + -moz-box-sizing: content-box; + -ms-box-sizing: content-box; + -o-box-sizing: content-box; + box-sizing: content-box; +} +.metro .window .caption .btn-close, +.metro .window .caption .btn-min, +.metro .window .caption .btn-max { + background-color: #c75050; + color: #ffffff; + position: absolute; + top: -8px; + right: 0; + width: 48px; + height: 24px; + min-height: 24px; + text-align: center; + vertical-align: middle; + font-family: 'Cambria_', 'PT Serif Caption', Verdana, Arial, Helvetica, sans-serif; + font-size: 16pt; + font-weight: normal; + padding: 0 0 10px 0; + z-index: 3; + outline: none; +} +.metro .window .caption .btn-close:hover, +.metro .window .caption .btn-min:hover, +.metro .window .caption .btn-max:hover { + background-color: #e04343; +} +.metro .window .caption .btn-close:active, +.metro .window .caption .btn-min:active, +.metro .window .caption .btn-max:active { + background-color: #b01919 !important; + top: -8px; + right: 0; + left: auto; +} +.metro .window .caption .btn-close:after, +.metro .window .caption .btn-min:after, +.metro .window .caption .btn-max:after { + content: '\D7'; + position: absolute; + left: 50%; + top: 0; + margin-left: -0.3em; +} +.metro .window .caption .btn-min, +.metro .window .caption .btn-max { + background-color: transparent; + color: #000; + right: 75px; + width: 24px; + padding-bottom: 10px; + font-weight: bold; +} +.metro .window .caption .btn-min:hover, +.metro .window .caption .btn-max:hover { + background-color: #1b6eae; + color: #ffffff; +} +.metro .window .caption .btn-min:hover:after, +.metro .window .caption .btn-max:hover:after { + border-color: #fff; +} +.metro .window .caption .btn-min:active, +.metro .window .caption .btn-max:active { + background-color: #1e7cc4 !important; + color: #ffffff; + top: -8px; + right: 75px; + left: auto; +} +.metro .window .caption .btn-min:after, +.metro .window .caption .btn-max:after { + display: block; + position: absolute; + width: 10px; + height: 10px; + border: 0px #000 solid; + border-bottom-width: 2px; + content: ' '; + bottom: 6px; + left: 50%; + margin-left: -6px; + top: auto; +} +.metro .window .caption .btn-max { + right: 50px; +} +.metro .window .caption .btn-max:active { + right: 50px; +} +.metro .window .caption .btn-max:after { + height: 6px; + border: 1px #000 solid; + border-top-width: 2px; +} +.metro .window.inactive { + border-color: #ebebeb; +} +.metro .window.inactive .caption { + background-color: #ebebeb; + border-top: 8px #ebebeb solid; +} +.metro .window.inactive .content { + border-color: #ebebeb; +} +.metro .window.inactive .btn-close { + background-color: #bcbcbc; +} +.metro .window.flat { + background-color: #ffffff; + border: 1px #e9e9e9 solid; +} +.metro .window.flat .caption { + height: 20px; + width: calc(100% - 10px); + background-color: #ffffff; + padding: 7px 5px; + border-bottom: 1px #e9e9e9 solid; + border-top: 0; +} +.metro .window.flat .caption .btn-close, +.metro .window.flat .caption .btn-min, +.metro .window.flat .caption .btn-max { + background-color: #ffffff; + color: #777777; + width: 24px; + top: 4px; + right: 4px; +} +.metro .window.flat .caption .btn-close:hover, +.metro .window.flat .caption .btn-min:hover, +.metro .window.flat .caption .btn-max:hover { + background-color: #cde6f7; + color: #2a8dd4; +} +.metro .window.flat .caption .btn-close:hover:after, +.metro .window.flat .caption .btn-min:hover:after, +.metro .window.flat .caption .btn-max:hover:after { + border-color: #2a8dd4; +} +.metro .window.flat .caption .btn-close:active, +.metro .window.flat .caption .btn-min:active, +.metro .window.flat .caption .btn-max:active { + background-color: #92c0e0 !important; + color: #ffffff !important; +} +.metro .window.flat .caption .btn-close:after, +.metro .window.flat .caption .btn-min:after, +.metro .window.flat .caption .btn-max:after { + border-color: #777777; + width: 10px !important; + height: 6px !important; +} +.metro .window.flat .caption .btn-max { + right: 29px; +} +.metro .window.flat .caption .btn-min { + right: 54px; +} +.metro .window.flat .caption .btn-close:after { + margin-top: 2px; +} +.metro .window.flat .content { + margin-top: 35px; +} +.metro .listview .list { + border: 4px transparent solid; + width: 300px; + height: auto; + position: relative; + display: block; + cursor: pointer; + color: inherit; + margin: 0 0 10px 0; +} +.metro .listview .list .list-content { + padding: 10px; + position: relative; + display: block; + color: inherit; +} +.metro .listview .list .list-content:before, +.metro .listview .list .list-content:after { + display: table; + content: ""; +} +.metro .listview .list .list-content:after { + clear: both; +} +.metro .listview .list:hover { + outline: 3px #ccc solid; +} +.metro .listview .list:active { + outline: 3px #3e3e3e solid; +} +.metro .listview .list { + border: 1px #eaeaea solid; +} +.metro .listview .list .list-content .icon { + display: block; + width: 56px; + height: 56px; + font-size: 40px; + float: left; + margin-right: 10px; +} +.metro .listview .list .list-content [class*="icon-"].icon { + padding: 8px; +} +.metro .listview .list .list-content .data { + display: block; + padding: 0; + margin: 0; + margin-left: 66px; + min-width: 200px; + position: relative; +} +.metro .listview .list .list-content .list-title, +.metro .listview .list .list-content .list-remark { + margin: 0; + padding: 0; + display: block; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} +.metro .listview .list .list-content .list-title { + font-size: 14px; + line-height: 16px; +} +.metro .listview .list .list-content .list-remark { + font-size: 11px; + line-height: 12px; +} +.metro .listview .list .list-content [class*="span"] { + float: none; +} +.metro .listview .list .list-content .rating { + color: inherit; +} +.metro .listview .list .list-content .progress-bar { + margin: 5px 0; +} +.metro .listview.small .list-content .icon { + display: block; + width: 32px; + height: 32px; + line-height: 14px; + font-size: 28px; + float: left; + margin-right: 10px; +} +.metro .listview.small .list-content [class*="icon-"].icon { + padding: 8px 0; +} +.metro .listview.small .list-content [class*="icon-"].border { + font-size: 22px; + padding: 8px 4px; +} +.metro .listview.small .list-content .data { + margin-left: 40px; +} +.metro .listview .list.selected { + border: 4px #4390df solid; +} +.metro .listview .list.selected:after { + position: absolute; + display: block; + border-top: 28px solid #4390df; + border-left: 28px solid transparent; + right: 0; + content: ""; + top: 0; + z-index: 101; +} +.metro .listview .list.selected:before { + position: absolute; + display: block; + content: "\e003"; + color: #fff; + right: 0; + font-family: 'metroSysIcons'; + font-size: 9pt; + font-weight: normal; + z-index: 102; + top: 0; +} +.metro .listview-outlook { + position: relative; + display: block; +} +.metro .listview-outlook .list { + border: 4px transparent solid; + width: 300px; + height: auto; + position: relative; + display: block; + cursor: pointer; + color: inherit; + margin: 0 0 10px 0; +} +.metro .listview-outlook .list .list-content { + padding: 10px; + position: relative; + display: block; + color: inherit; +} +.metro .listview-outlook .list .list-content:before, +.metro .listview-outlook .list .list-content:after { + display: table; + content: ""; +} +.metro .listview-outlook .list .list-content:after { + clear: both; +} +.metro .listview-outlook .list:hover { + outline: 3px #ccc solid; +} +.metro .listview-outlook .list:active { + outline: 3px #3e3e3e solid; +} +.metro .listview-outlook .list { + border: 1px #eaeaea solid; +} +.metro .listview-outlook .list .list-content .icon { + display: block; + width: 56px; + height: 56px; + font-size: 40px; + float: left; + margin-right: 10px; +} +.metro .listview-outlook .list .list-content [class*="icon-"].icon { + padding: 8px; +} +.metro .listview-outlook .list .list-content .data { + display: block; + padding: 0; + margin: 0; + margin-left: 66px; + min-width: 200px; + position: relative; +} +.metro .listview-outlook .list .list-content .list-title, +.metro .listview-outlook .list .list-content .list-remark { + margin: 0; + padding: 0; + display: block; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} +.metro .listview-outlook .list .list-content .list-title { + font-size: 14px; + line-height: 16px; +} +.metro .listview-outlook .list .list-content .list-remark { + font-size: 11px; + line-height: 12px; +} +.metro .listview-outlook .list .list-content [class*="span"] { + float: none; +} +.metro .listview-outlook .list .list-content .rating { + color: inherit; +} +.metro .listview-outlook .list .list-content .progress-bar { + margin: 5px 0; +} +.metro .listview-outlook.small .list-content .icon { + display: block; + width: 32px; + height: 32px; + line-height: 14px; + font-size: 28px; + float: left; + margin-right: 10px; +} +.metro .listview-outlook.small .list-content [class*="icon-"].icon { + padding: 8px 0; +} +.metro .listview-outlook.small .list-content [class*="icon-"].border { + font-size: 22px; + padding: 8px 4px; +} +.metro .listview-outlook.small .list-content .data { + margin-left: 40px; +} +.metro .listview-outlook .list.selected { + border: 4px #4390df solid; +} +.metro .listview-outlook .list.selected:after { + position: absolute; + display: block; + border-top: 28px solid #4390df; + border-left: 28px solid transparent; + right: 0; + content: ""; + top: 0; + z-index: 101; +} +.metro .listview-outlook .list.selected:before { + position: absolute; + display: block; + content: "\e003"; + color: #fff; + right: 0; + font-family: 'metroSysIcons'; + font-size: 9pt; + font-weight: normal; + z-index: 102; + top: 0; +} +.metro .listview-outlook .list { + display: block; + width: 100%; + border: 0; + border-bottom: 1px #e1e1e1 solid; + padding: 2px 0; + color: #555555; + margin-bottom: 0; +} +.metro .listview-outlook .list .list-content { + margin: 2px 0; + padding: 2px 20px; + font-family: 'Segoe UI_', 'Open Sans', Verdana, Arial, Helvetica, sans-serif; + font-size: 16px; + color: inherit; + border-left: 3px transparent solid; +} +.metro .listview-outlook .list .list-content .list-title, +.metro .listview-outlook .list .list-content .list-subtitle, +.metro .listview-outlook .list .list-content .list-remark { + width: 100%; + display: block; + color: inherit; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} +.metro .listview-outlook .list .list-content .list-title { + font-size: 16px; + line-height: 20px; +} +.metro .listview-outlook .list .list-content .list-subtitle, +.metro .listview-outlook .list .list-content .list-remark { + font-size: 11px; + font-weight: normal; + line-height: 15px; + color: #1d1d1d; +} +.metro .listview-outlook .list .list-content .list-subtitle { + font-weight: bold; + color: #0067cb; +} +.metro .listview-outlook .list.marked .list-content { + border-left: 3px #0067b0 solid !important; +} +.metro .listview-outlook .list:active, +.metro .listview-outlook .list:focus, +.metro .listview-outlook .list.active { + background-color: #cde6f7 !important; + outline: 1px #999999 dotted; + color: #555555 !important; +} +.metro .listview-outlook .list:hover { + background-color: #e6f2fa; + outline: none; +} +.metro .listview-outlook .list:hover .list-content { + border-left: 3px #b1d6f0 solid; +} +.metro .listview-outlook .list-group { + display: block; + position: relative; +} +.metro .listview-outlook .list-group .group-title { + display: block; + margin-bottom: 2px; + background-color: #f0f0f0; + padding: 4px 20px; + font-family: 'Segoe UI_', 'Open Sans', Verdana, Arial, Helvetica, sans-serif; + font-size: 11px; + font-weight: bold; + color: #333333; + padding-left: 24px; +} +.metro .listview-outlook .list-group .group-title:before { + position: absolute; + display: block; + left: 10px; + top: 1px; + content: ''; + width: 0; + height: 0; + border-left: 7px solid transparent; + border-top: 7px solid transparent; + border-bottom: 7px solid black; +} +.metro .listview-outlook .list-group .group-content { + display: block; +} +.metro .listview-outlook .list-group.collapsed .group-title:before { + -webkit-transform: rotate(-45deg); + -moz-transform: rotate(-45deg); + -ms-transform: rotate(-45deg); + -o-transform: rotate(-45deg); + transform: rotate(-45deg); + margin-left: -4px; +} +.metro .listview-outlook .list-group .group-title:hover:before { + border-bottom-color: #0067cb; +} +.metro .listview-outlook .list-content .list-icon { + float: left; + width: 48px; + max-height: 48px; + margin-right: 10px; + margin-top: 5px; +} +.metro .treeview { + background-color: #fdfdfd; + color: #555555; + display: block; + list-style: none; + margin: 0; + padding: 0; +} +.metro .treeview ul { + color: #555555; + display: block; + list-style: none; + margin: 0; + padding: 0; +} +.metro .treeview ul li a { + padding: 0 0 0 15px; +} +.metro .treeview a { + font-size: 12px; + color: inherit; + display: block; +} +.metro .treeview .node > a { + margin-bottom: 5px; + padding: 0 0 0 15px; + font-size: 12px; + position: relative; + color: #000; + white-space: nowrap; + text-overflow: ellipsis; +} +.metro .treeview .node:not(:first-child) { + margin-top: 0; +} +.metro .treeview .node-toggle { + display: inline-block; + position: relative; + float: left; + margin-right: 3px; + width: 10px; + height: 10px; +} +.metro .treeview .node-toggle:before { + position: absolute; + display: block; + left: 2px; + top: 0; + content: ''; + width: 0; + height: 0; + border-left: 7px solid transparent; + border-top: 7px solid transparent; + border-bottom: 7px #1d1d1d solid; +} +.metro .treeview .node-toggle:hover:before { + border-bottom-color: #0050ef; +} +.metro .treeview li.collapsed .node-toggle:before { + -webkit-transform: rotate(-45deg); + -moz-transform: rotate(-45deg); + -ms-transform: rotate(-45deg); + -o-transform: rotate(-45deg); + transform: rotate(-45deg); + margin-left: -4px; +} +.metro .treeview li a:hover { + background-color: #e6f2fa; +} +.metro .treeview .active { + background-color: #e1e1e1; + font-weight: bold; + color: #1d1d1d; +} +.metro .treeview a .value { + color: #0067cb; +} +.metro .fluent-menu { + font-size: 14px; +} +.metro .fluent-menu .tabs-holder { + list-style: none; + position: relative; + margin: 0; + padding: 0; + display: block; + z-index: 2; +} +.metro .fluent-menu .tabs-holder:before, +.metro .fluent-menu .tabs-holder:after { + display: table; + content: ""; +} +.metro .fluent-menu .tabs-holder:after { + clear: both; +} +.metro .fluent-menu .tabs-holder li { + display: block; + float: left; + margin-right: 5px; + background-color: #ffffff; +} +.metro .fluent-menu .tabs-holder li a { + display: block; + float: left; + padding: 4px 15px; + text-transform: uppercase; + font-size: .8em; + color: #444444; +} +.metro .fluent-menu .tabs-holder li a:hover { + color: #0072c6; +} +.metro .fluent-menu .tabs-holder li:first-child { + margin-left: 0px; +} +.metro .fluent-menu .tabs-holder li.active { + border: 1px #d4d4d4 solid; + border-bottom-color: #ffffff; +} +.metro .fluent-menu .tabs-holder li.active a { + color: #0072c6; +} +.metro .fluent-menu .tabs-holder li.special { + border: 1px #0072c6 solid; + background-color: #0072c6; +} +.metro .fluent-menu .tabs-holder li.special a { + color: #ffffff; +} +.metro .fluent-menu .tabs-holder li.special a:hover { + color: #ffffff; +} +.metro .fluent-menu .tabs-content { + z-index: 1; + position: relative; + margin-top: -1px; + border: 1px #d4d4d4 solid; + background-color: #ffffff; + height: 120px; +} +.metro .fluent-menu .tabs-content .tab-panel { + display: block; + height: 100%; + padding: 5px 0 2px; +} +.metro .fluent-menu .tabs-content .tab-panel .tab-panel-group { + height: 100%; + position: relative; + display: block; + float: left; + padding: 0 5px; + border-right: 1px #d4d4d4 solid; +} +.metro .fluent-menu .tabs-content .tab-panel .tab-panel-group:last-child { + margin-right: 0; +} +.metro .fluent-menu .tabs-content .tab-panel .tab-group-caption { + font-size: 10px; + margin: 2px 0; + text-align: center; + display: block; + position: absolute; + bottom: 0px; + right: 0; + left: 0; + white-space: nowrap; +} +.metro .fluent-menu .tabs-content .tab-panel .tab-content-segment { + display: block; + float: left; + position: relative; +} +.metro .fluent-menu .fluent-button { + background-color: #ffffff; + padding: 5px 5px; + font-size: 14px; + line-height: 14px; + display: block; + cursor: default; +} +.metro .fluent-menu .fluent-button:hover { + background-color: #cde6f7; +} +.metro .fluent-menu .fluent-button img { + display: block; + float: left; + margin-right: 5px; + width: 16px; + height: 16px; +} +.metro .fluent-menu .fluent-button [class*="icon-"] { + color: #444444; +} +.metro .fluent-menu .fluent-button .button-label { + display: inline-block; + color: inherit; + font: inherit; +} +.metro .fluent-menu .fluent-button:active { + top: 0; + left: 0; + background-color: #75bae9 !important; +} +.metro .fluent-menu .fluent-big-button { + background-color: #ffffff; + padding: 5px 5px; + font-size: 14px; + line-height: 14px; + display: block; + cursor: default; + padding: 7px 5px; + text-align: center; + white-space: normal; + line-height: 12px; + float: left; + position: relative; +} +.metro .fluent-menu .fluent-big-button:hover { + background-color: #cde6f7; +} +.metro .fluent-menu .fluent-big-button img { + display: block; + float: left; + margin-right: 5px; + width: 16px; + height: 16px; +} +.metro .fluent-menu .fluent-big-button [class*="icon-"] { + color: #444444; +} +.metro .fluent-menu .fluent-big-button .button-label { + display: inline-block; + color: inherit; + font: inherit; +} +.metro .fluent-menu .fluent-big-button:active { + top: 0; + left: 0; + background-color: #75bae9 !important; +} +.metro .fluent-menu .fluent-big-button img, +.metro .fluent-menu .fluent-big-button [class*="icon-"] { + display: block; + width: 40px; + height: 40px; + font-size: 40px; + float: none; + text-align: center; + margin: 5px auto 5px; +} +.metro .fluent-menu .fluent-big-button br { + line-height: 4px; + height: 4px; + font-size: 4px; +} +.metro .fluent-menu .fluent-tool-button { + background-color: #ffffff; + padding: 5px 5px; + font-size: 14px; + line-height: 14px; + display: block; + cursor: default; + padding: 4px; +} +.metro .fluent-menu .fluent-tool-button:hover { + background-color: #cde6f7; +} +.metro .fluent-menu .fluent-tool-button img { + display: block; + float: left; + margin-right: 5px; + width: 16px; + height: 16px; +} +.metro .fluent-menu .fluent-tool-button [class*="icon-"] { + color: #444444; +} +.metro .fluent-menu .fluent-tool-button .button-label { + display: inline-block; + color: inherit; + font: inherit; +} +.metro .fluent-menu .fluent-tool-button:active { + top: 0; + left: 0; + background-color: #75bae9 !important; +} +.metro .fluent-menu .fluent-tool-button img, +.metro .fluent-menu .fluent-tool-button [class*="icon-"] { + display: block; + width: 16px; + height: 16px; + font-size: 16px; + float: none; + text-align: center; +} +.metro .fluent-menu .fluent-tool-button img { + margin-right: 0; +} +.metro .fluent-menu .dropdown-toggle:before, +.metro .fluent-menu .dropdown-toggle:after { + content: ""; +} +.metro .fluent-menu .dropdown-toggle .button-label { + padding-right: 5px; +} +.metro .fluent-menu .dropdown-toggle .button-label:before, +.metro .fluent-menu .dropdown-toggle .button-label:after { + content: ""; +} +.metro .fluent-menu .dropdown-toggle .button-label:after { + content: "\e012"; + font-family: metroSysIcons; + position: absolute; + right: 0px; + bottom: 3px; + font-size: .8em; +} +.metro .fluent-menu .dropdown-menu { + position: absolute; + top: 100%; + z-index: 100; +} +.metro .fluent-menu .dropdown-menu a { + font-size: 10pt !important; +} +.metro .fluent-menu .dropdown-menu a:hover { + background-color: #cde6f7; + color: #444444; +} +.metro p [data-hint] { + border-bottom: 1px #373737 dotted; + white-space: nowrap; +} +.metro .hint { + position: fixed; + color: #1d1d1d; + padding: 10px; + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + font-size: 12px; + width: auto; + max-width: 220px; + margin-top: 10px; + z-index: 1030; + display: none; + border: 1px solid; + border-color: #6a6a6a; +} +.metro .hint .hint-title, +.metro .hint .hint-text { + color: inherit; + text-align: left; +} +.metro .hint .hint-title { + font-size: 1.2em; + font-weight: bold; +} +.metro .hint:before, +.metro .hint:after { + content: ''; + position: absolute; + width: 0; + height: 0; +} +.metro .hint:before { + z-index: 2; +} +.metro .hint:after { + z-index: 1; + border-color: inherit; +} +.metro .hint.bottom:before, +.metro .hint.bottom:after { + top: 1px; + left: 5px; + margin: -10px 0; + border-left: 5px solid transparent; + border-right: 5px solid transparent; + border-bottom: 10px solid #fffcc0; +} +.metro .hint.bottom:after { + top: 0; + border-bottom: 10px solid; +} +.metro .hint.top:before, +.metro .hint.top:after { + top: 100%; + margin-top: -1px; + left: 5px; + border-left: 5px solid transparent; + border-right: 5px solid transparent; + border-top: 10px solid #fffcc0; +} +.metro .hint.top:after { + margin-top: 1px; + border-top: 10px solid; +} +.metro .hint.left:before, +.metro .hint.left:after { + top: 5px; + left: 100%; + margin-left: -1px; + border-top: 5px solid transparent; + border-bottom: 5px solid transparent; + border-left: 10px solid #fffcc0; +} +.metro .hint.left:after { + margin-left: 0; + border-left: 10px solid; +} +.metro .hint.right:before, +.metro .hint.right:after { + top: 5px; + left: -9px; + margin: 0; + border-top: 5px solid transparent; + border-bottom: 5px solid transparent; + border-right: 10px solid #fffcc0; +} +.metro .hint.right:after { + left: -10px; + border-right: 10px solid; +} +.metro .balloon { + display: block; + width: auto; + height: auto; + margin: 0; + padding: 0; + border: 1px #555555 solid; + background-color: #ffffff; + position: relative; + margin-bottom: 30px; +} +.metro .balloon:before, +.metro .balloon:after { + content: ''; + position: absolute; + width: 0; + height: 0; +} +.metro .balloon:before { + z-index: 2; +} +.metro .balloon:after { + z-index: 1; +} +.metro .balloon.bottom:before, +.metro .balloon.bottom:after { + top: 1px; + left: 20px; + margin: -20px 0; + border-left: 10px solid transparent; + border-right: 10px solid transparent; + border-bottom: 20px solid #ffffff; +} +.metro .balloon.bottom:after { + top: 0; + border-bottom: 20px solid #555555; +} +.metro .balloon.top:before, +.metro .balloon.top:after { + top: 100%; + margin-top: -1px; + left: 20px; + border-left: 10px solid transparent; + border-right: 10px solid transparent; + border-top: 20px solid #ffffff; +} +.metro .balloon.top:after { + margin-top: 1px; + border-top: 20px solid #555555; +} +.metro .balloon.left:before, +.metro .balloon.left:after { + top: 10px; + left: 100%; + margin-left: -1px; + border-top: 10px solid transparent; + border-bottom: 10px solid transparent; + border-left: 20px solid #ffffff; +} +.metro .balloon.left:after { + margin-left: 0; + border-left: 21px solid #555555; +} +.metro .balloon.right:before, +.metro .balloon.right:after { + top: 10px; + left: -19px; + margin: 0; + border-top: 10px solid transparent; + border-bottom: 10px solid transparent; + border-right: 20px solid #ffffff; +} +.metro .balloon.right:after { + left: -20px; + border-right: 20px solid #555555; +} +.metro .stepper { + margin: 10px 0; +} +.metro .stepper:before, +.metro .stepper:after { + display: table; + content: ""; +} +.metro .stepper:after { + clear: both; +} +.metro .stepper > ul { + counter-reset: li; + border-top: 1px #1d1d1d dotted; + position: relative; + padding: 0; + margin: 30px 0; + width: 100%; +} +.metro .stepper > ul li { + list-style: none; + float: left; + width: 2em; + height: 2em; + margin-top: -1em; + position: absolute; + left: 0; + background: #666; + cursor: pointer; +} +.metro .stepper > ul li:before { + content: counter(li); + counter-increment: li; + position: absolute; + box-sizing: border-box; + padding: .3em 10px; + color: #fff; + font-weight: bold; + font-family: "Helvetica Neue", Arial, sans-serif; + font-size: 1.5rem; + text-align: center; +} +.metro .stepper > ul li:hover { + background-color: #999999; +} +.metro .stepper > ul li.current, +.metro .stepper > ul li.complete { + transition: all 0.2s ease; +} +.metro .stepper > ul li.current { + background-color: #1ba1e2; +} +.metro .stepper > ul li.current:hover { + background-color: #00ccff; +} +.metro .stepper > ul li.complete { + background-color: #60a917; +} +.metro .stepper > ul li.complete:hover { + background-color: #7ad61d; +} +.metro .stepper.rounded li { + border-radius: 100%; +} +.metro .stepper.diamond li { + -webkit-transform: rotate(45deg); + -moz-transform: rotate(45deg); + -ms-transform: rotate(45deg); + -o-transform: rotate(45deg); + transform: rotate(45deg); +} +.metro .stepper.diamond li:before { + -webkit-transform: rotate(-45deg); + -moz-transform: rotate(-45deg); + -ms-transform: rotate(-45deg); + -o-transform: rotate(-45deg); + transform: rotate(-45deg); +} +.metro .streamer { + position: relative; + display: block; + width: 100%; + overflow: hidden; +} +.metro .streamer .meter { + height: 25px; + width: auto; + list-style: none; + margin: 0; + padding: 0; + display: block; + overflow: hidden; +} +.metro .streamer .meter li { + display: block; + float: left; + width: 213px; + padding: 2px 3px; + background: url("/images/meter-210.png") top left repeat-x; +} +.metro .streamer .meter li em { + font-size: 10px; + font-style: normal; +} +.metro .streamer .streams { + width: 142px; + padding-top: 25px; + position: absolute; + left: 0; + top: 0; + z-index: 2; + background-color: #ffffff; +} +.metro .streamer .streams .streams-title { + position: absolute; + top: 0; +} +.metro .streamer .streams .stream { + position: relative; + display: block; + width: 100%; + height: 75px; + margin: 0 2px 2px 0; + padding: 5px; + color: #ffffff; + cursor: pointer; +} +.metro .streamer .streams .stream .stream-title { + font-family: 'Segoe UI Light_', 'Open Sans Light', Verdana, Arial, Helvetica, sans-serif; + font-size: 12px; + line-height: 12px; +} +.metro .streamer .streams .stream .stream-number { + position: absolute; + left: 5px; + bottom: 5px; + font-family: 'Segoe UI Light_', 'Open Sans Light', Verdana, Arial, Helvetica, sans-serif; + font-size: 11px; + line-height: 11px; +} +.metro .streamer .events { + padding-left: 143px; + overflow: hidden; + height: 100%; + min-height: 100%; + overflow-x: scroll; +} +.metro .streamer .events .double { + width: 424px; +} +.metro .streamer .events .triple { + width: 637px; +} +.metro .streamer .events .quadro { + width: 850px; +} +.metro .streamer .events .events-area { + height: 100%; + min-height: 100%; + overflow: hidden; +} +.metro .streamer .events .events-area:before, +.metro .streamer .events .events-area:after { + display: table; + content: ""; +} +.metro .streamer .events .events-area:after { + clear: both; +} +.metro .streamer .events .events-grid { + height: 100%; + min-height: 100%; +} +.metro .streamer .events .events-grid:before, +.metro .streamer .events .events-grid:after { + display: table; + content: ""; +} +.metro .streamer .events .events-grid:after { + clear: both; +} +.metro .streamer .events .event-group { + height: 460px; + min-width: 211px; + margin: 0 2px 2px 0; + float: left; +} +.metro .streamer .events .event-super { + height: 100%; + min-height: 100%; + border: 1px #eaeaea solid; +} +.metro .streamer .events .event-stream { + height: 75px; +} +.metro .streamer .events .event-stream .event { + min-width: 211px; + height: 75px; + float: left; + display: block; + margin: 0 2px 2px 0; + cursor: pointer; + position: relative; + overflow: hidden; + border: 1px #eaeaea solid; +} +.metro .streamer .events .event-stream .event:last-child { + margin-right: 0; +} +.metro .streamer .events .event-stream .event.event-disable { + opacity: .2; +} +.metro .streamer .events .event-stream .event .event-content { + width: 100%; + height: 100%; + padding: 0; + margin: 0; + position: absolute; + left: 0; + top: 0; + overflow: hidden; + display: none; +} +.metro .streamer .events .event-stream .event .event-content:first-child { + display: block; +} +.metro .streamer .events .event-stream .event .event-content-logo { + display: block; + float: left; + margin-right: 5px; + padding: 3px; +} +.metro .streamer .events .event-stream .event .event-content-logo .icon { + position: relative; + width: 39px; + height: 39px; + margin-bottom: 1px; +} +.metro .streamer .events .event-stream .event .event-content-logo .icon img { + width: 100%; + height: 100%; +} +.metro .streamer .events .event-stream .event .event-content-logo .time { + position: relative; + width: 39px; + padding: 8px 4px; + font-family: 'Segoe UI_', 'Open Sans', Verdana, Arial, Helvetica, sans-serif; + font-size: 12px; + color: #ffffff; + line-height: 12px; +} +.metro .streamer .events .event-stream .event .event-content-data { + display: block; + padding: 0; + margin: 0; + position: relative; + margin-left: 50px; +} +.metro .streamer .events .event-stream .event .event-content-data .title { + position: relative; + font-family: 'Segoe UI Semibold_', 'Open Sans Bold', Verdana, Arial, Helvetica, sans-serif; + font-size: 14px; + line-height: 14px; + margin: 3px 0 0; + padding: 0; +} +.metro .streamer .events .event-stream .event .event-content-data .subtitle { + position: relative; + font-family: 'Segoe UI_', 'Open Sans', Verdana, Arial, Helvetica, sans-serif; + font-size: 10px; + line-height: 10px; + margin: 0; + padding: 0; + margin-bottom: 10px; +} +.metro .streamer .events .event-stream .event .event-content-data .remark { + position: absolute; + display: block; + top: 36px; + margin-right: 4px; + font-family: 'Segoe UI_', 'Open Sans', Verdana, Arial, Helvetica, sans-serif; + font-size: 11px; + line-height: 11px; + color: #999999; +} +.metro .streamer .events .event-stream .event:hover { + border-color: #999999; +} +.metro .streamer .events .event-stream .event.selected { + border: 4px #4390df solid; + border-width: 1px; +} +.metro .streamer .events .event-stream .event.selected:after { + position: absolute; + display: block; + border-top: 28px solid #4390df; + border-left: 28px solid transparent; + right: 0; + content: ""; + top: 0; + z-index: 101; +} +.metro .streamer .events .event-stream .event.selected:before { + position: absolute; + display: block; + content: "\e003"; + color: #fff; + right: 0; + font-family: 'metroSysIcons'; + font-size: 9pt; + font-weight: normal; + z-index: 102; + top: 0; +} +.metro .streamer .events .event-stream .event.selected:before { + right: 3px; +} +.metro .scrollbar-button { + background-color: #ffffff; + border: 1px #ababab solid; +} +.metro .scrollbar { + position: relative; + overflow: hidden; +} +.metro .scrollbar-container { + position: relative; + overflow: hidden; +} +.metro .scrollbar-v, +.metro .scrollbar-h { + position: absolute; + background: #f3f3f3; +} +.metro .scrollbar-v { + width: 15px; + height: 100%; + right: 0; + top: 0; +} +.metro .scrollbar-h { + height: 15px; + width: 100%; + left: 0; + bottom: 0; +} +.metro .scrollbar-v-up, +.metro .scrollbar-v-down, +.metro .scrollbar-h-up, +.metro .scrollbar-h-down, +.metro .scrollbar-line-v-btn, +.metro .scrollbar-line-h-btn { + cursor: pointer; + position: absolute; + background-color: #ffffff; + border: 1px #ababab solid; +} +.metro .scrollbar-line-v-btn:hover, +.metro .scrollbar-line-h-btn:hover { + background-color: #f0f0f0; +} +.metro .scrollbar-v-up, +.metro .scrollbar-h-up { + width: 15px; + height: 15px; + left: 0; + top: 0; +} +.metro .scrollbar-v-down, +.metro .scrollbar-h-down { + width: 15px; + height: 15px; + left: 0; + bottom: 0; +} +.metro .scrollbar-h-down { + left: auto; + right: 0; +} +.metro .scrollbar-line-v, +.metro .scrollbar-line-h { + position: absolute; + z-index: 3; +} +.metro .scrollbar-line-v { + width: 100%; + left: 0; + top: 15px; +} +.metro .scrollbar-line-h { + height: 15px; + left: 15px; + top: 0; +} +.metro .scrollbar-line-v-btn { + width: 100%; + left: 0 !important; + top: 0; +} +.metro .scrollbar-line-h-btn { + height: 100%; + left: 0; + top: 0 !important; +} +.metro .scrollbar-both { + position: absolute; + width: 15px; + height: 15px; + right: 0; + bottom: 0; +} +.metro .scrollbar-line-h, +.metro .scrollbar-line-v, +.metro .scrollbar-both { + background-color: #f3f3f3; +} +.metro .scrollbar-v-up:before, +.metro .scrollbar-v-down:before, +.metro .scrollbar-h-up:before, +.metro .scrollbar-h-down:before { + position: absolute; + content: ""; + font-family: metroSysIcons; + font-size: 14px; +} +.metro .scrollbar-v-up:before { + content: "\e010"; +} +.metro .scrollbar-v-down:before { + content: "\e012"; +} +.metro .scrollbar-h-up:before { + content: "\e010"; + margin-top: -1px; + -webkit-transform: rotate(-90deg); + -moz-transform: rotate(-90deg); + -ms-transform: rotate(-90deg); + -o-transform: rotate(-90deg); + transform: rotate(-90deg); +} +.metro .scrollbar-h-down:before { + content: "\e010"; + margin-top: -1px; + -webkit-transform: rotate(90deg); + -moz-transform: rotate(90deg); + -ms-transform: rotate(90deg); + -o-transform: rotate(90deg); + transform: rotate(90deg); +} +.metro.notify-container { + position: fixed; + right: 0; + top: 0; + z-index: 1060; +} +.metro.notify-container .notify { + background-color: #ffffff; + display: block; + position: relative; + min-width: 220px; + font-family: 'Segoe UI_', 'Open Sans', Verdana, Arial, Helvetica, sans-serif; + color: #1d1d1d; + padding: 10px; + margin: 2px 2px 2px 0; +} +.metro.notify-container .notify .caption { + font-size: 18px; + line-height: 20px; + margin-bottom: 5px; +} +.metro.notify-container .notify .content { + font-size: 14px; + line-height: 16px; +} +.metro .notify-wrapper { + position: relative; + background-color: #1d1d1d; + width: auto; + height: auto; + min-width: 250px; + color: #ffffff; +} +.metro .notice { + display: block; + min-width: 200px; + height: auto; + position: relative; + background-color: #4390df; + padding: 20px; +} +.metro .notice * { + color: inherit; +} +.metro .notice:before { + content: ""; + width: 10px; + height: 10px; + display: block; + position: absolute; + background-color: inherit; + left: -5px; + top: 50%; + margin-top: -5px; + -webkit-transform: rotate(45deg); + -moz-transform: rotate(45deg); + -ms-transform: rotate(45deg); + -o-transform: rotate(45deg); + transform: rotate(45deg); +} +.metro .notice.marker-on-top:before { + top: 0; + left: 50%; + margin-left: -5px; +} +.metro .notice.marker-on-right:before { + top: 50%; + margin-top: -5px; + left: 100%; + margin-left: -5px; +} +.metro .notice.marker-on-bottom:before { + top: 100%; + margin-left: -5px; + left: 50%; + margin-top: -5px; +} +.metro .dataTable { + clear: both; +} +.metro .dataTable thead .sorting_asc, +.metro .dataTable thead .sorting_desc, +.metro .dataTable thead .sorting { + cursor: pointer; +} +.metro .dataTable thead .sorting_asc:after, +.metro .dataTable thead .sorting_desc:after, +.metro .dataTable thead .sorting:after { + font-family: metroSysIcons; + position: relative; + float: right; + right: 0; + color: #999999; +} +.metro .dataTable thead .sorting:after { + content: "\e011"; +} +.metro .dataTable thead .sorting_asc:after { + content: "\e010"; +} +.metro .dataTable thead .sorting_desc:after { + content: "\e012"; +} +.metro .dataTable thead .sorting_asc:after, +.metro .dataTable thead .sorting_desc:after { + color: #1d1d1d; +} +.metro .dataTables_wrapper .dataTables_filter label, +.metro .dataTables_wrapper .dataTables_length label { + vertical-align: middle; +} +.metro .dataTables_wrapper .dataTables_filter input, +.metro .dataTables_wrapper .dataTables_length input, +.metro .dataTables_wrapper .dataTables_filter select, +.metro .dataTables_wrapper .dataTables_length select { + border: 1px #d9d9d9 solid; + width: auto; + height: 100%; + padding: 5px; + z-index: 1; + position: relative; +} +.metro .dataTables_wrapper .dataTables_filter input:focus, +.metro .dataTables_wrapper .dataTables_length input:focus, +.metro .dataTables_wrapper .dataTables_filter select:focus, +.metro .dataTables_wrapper .dataTables_length select:focus { + outline: 0; + border-color: #919191; +} +.metro .dataTables_wrapper .dataTables_length { + float: left; +} +.metro .dataTables_wrapper .dataTables_length select { + margin: 0 5px; +} +.metro .dataTables_wrapper .dataTables_filter { + float: right; +} +.metro .dataTables_wrapper .dataTables_filter input { + margin-left: 5px; +} +.metro .dataTables_wrapper .dataTables_paginate { + float: right; + text-align: right; +} +.metro .dataTables_wrapper .dataTables_paginate .paginate_button { + padding: 4px 12px; + text-align: center; + vertical-align: middle !important; + background-color: #d9d9d9; + border: 1px transparent solid; + color: #222222; + border-radius: 0; + cursor: pointer; + display: inline-block; + outline: none; + font-family: 'Segoe UI Light_', 'Open Sans Light', Verdana, Arial, Helvetica, sans-serif; + font-size: 14px; + line-height: 16px; + margin: auto; + color: inherit; + display: block; + float: left; + margin-right: 1px; +} +.metro .dataTables_wrapper .dataTables_paginate .paginate_button.default { + background-color: #008287; + color: #fff; +} +.metro .dataTables_wrapper .dataTables_paginate .paginate_button:focus { + outline: 0; + border: 1px #353535 dotted; +} +.metro .dataTables_wrapper .dataTables_paginate .paginate_button:disabled, +.metro .dataTables_wrapper .dataTables_paginate .paginate_button.disabled { + background-color: #eaeaea !important; + color: #bebebe !important; + cursor: not-allowed !important; +} +.metro .dataTables_wrapper .dataTables_paginate .paginate_button * { + color: inherit; +} +.metro .dataTables_wrapper .dataTables_paginate .paginate_button *:hover { + color: inherit; +} +.metro .dataTables_wrapper .dataTables_paginate .paginate_button.primary { + background-color: #16499a !important; + color: #ffffff !important; +} +.metro .dataTables_wrapper .dataTables_paginate .paginate_button.info { + background-color: #4390df !important; + color: #ffffff !important; +} +.metro .dataTables_wrapper .dataTables_paginate .paginate_button.success { + background-color: #60a917 !important; + color: #ffffff !important; +} +.metro .dataTables_wrapper .dataTables_paginate .paginate_button.warning { + background-color: #fa6800 !important; + color: #ffffff !important; +} +.metro .dataTables_wrapper .dataTables_paginate .paginate_button.danger { + background-color: #9a1616 !important; + color: #ffffff !important; +} +.metro .dataTables_wrapper .dataTables_paginate .paginate_button.inverse { + background-color: #1d1d1d !important; + color: #ffffff !important; +} +.metro .dataTables_wrapper .dataTables_paginate .paginate_button.link { + background-color: transparent !important; + color: #2e92cf !important; +} +.metro .dataTables_wrapper .dataTables_paginate .paginate_button.link:hover { + text-decoration: underline; +} +.metro .dataTables_wrapper .dataTables_paginate .paginate_button.link:disabled, +.metro .dataTables_wrapper .dataTables_paginate .paginate_button.link.disabled { + background-color: transparent !important; + color: #bebebe !important; + cursor: not-allowed !important; +} +.metro .dataTables_wrapper .dataTables_paginate .paginate_button.link [class*="icon-"] { + text-decoration: none !important; +} +.metro .dataTables_wrapper .dataTables_paginate .paginate_button:active { + background-color: #1d1d1d !important; + color: #ffffff !important; + border-color: transparent; +} +.metro .dataTables_wrapper .dataTables_paginate .paginate_button.large { + padding: 11px 19px; + font-size: 17.5px; +} +.metro .dataTables_wrapper .dataTables_paginate .paginate_button.small { + padding: 2px 10px; + font-size: 11.9px; +} +.metro .dataTables_wrapper .dataTables_paginate .paginate_button.mini { + padding: 0px 6px; + font-size: 10.5px; +} +.metro .dataTables_wrapper .dataTables_paginate .paginate_button.current { + background-color: #4390df; + color: #ffffff; +} +.metro .dataTables_wrapper .dataTables_info { + float: left; +} +.metro .dataTables_wrapper .dataTables_scrollHeadInner table { + margin: 0 !important; +} +.metro .dataTables_wrapper .dataTables_processing { + position: absolute; + top: 50%; + left: 50%; + margin-left: -100px; + margin-top: -2em; + width: 200px; + padding: 20px; + text-align: center; + font-size: 1.2rem; + background-color: #ffffff; + box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3), 0 3px 8px rgba(0, 0, 0, 0.2); +} +.metro .dataTables_wrapper .dataTables_scroll { + clear: both; +} +.metro .dataTables_wrapper:after { + visibility: hidden; + display: block; + content: ""; + clear: both; + height: 0; +} +.metro .wizard .steps { + margin: 10px 0; + padding: 20px; + border: 1px #eeeeee solid; + position: relative; +} +.metro .wizard .steps .step { + position: relative; + width: 100%; + height: 100%; + display: none; +} +.metro .wizard .steps .step:first-child { + display: block; +} +.metro .wizard .actions .group-right { + float: right; +} +.metro .wizard .actions .group-left { + float: left; +} +.metro .wizard .actions button { + padding: 4px 12px; + text-align: center; + vertical-align: middle !important; + background-color: #d9d9d9; + border: 1px transparent solid; + color: #222222; + border-radius: 0; + cursor: pointer; + display: inline-block; + outline: none; + font-family: 'Segoe UI Light_', 'Open Sans Light', Verdana, Arial, Helvetica, sans-serif; + font-size: 14px; + line-height: 16px; + margin: auto; + margin-right: 2px; +} +.metro .wizard .actions button.default { + background-color: #008287; + color: #fff; +} +.metro .wizard .actions button:focus { + outline: 0; + border: 1px #353535 dotted; +} +.metro .wizard .actions button:disabled, +.metro .wizard .actions button.disabled { + background-color: #eaeaea !important; + color: #bebebe !important; + cursor: not-allowed !important; +} +.metro .wizard .actions button * { + color: inherit; +} +.metro .wizard .actions button *:hover { + color: inherit; +} +.metro .wizard .actions button.primary { + background-color: #16499a !important; + color: #ffffff !important; +} +.metro .wizard .actions button.info { + background-color: #4390df !important; + color: #ffffff !important; +} +.metro .wizard .actions button.success { + background-color: #60a917 !important; + color: #ffffff !important; +} +.metro .wizard .actions button.warning { + background-color: #fa6800 !important; + color: #ffffff !important; +} +.metro .wizard .actions button.danger { + background-color: #9a1616 !important; + color: #ffffff !important; +} +.metro .wizard .actions button.inverse { + background-color: #1d1d1d !important; + color: #ffffff !important; +} +.metro .wizard .actions button.link { + background-color: transparent !important; + color: #2e92cf !important; +} +.metro .wizard .actions button.link:hover { + text-decoration: underline; +} +.metro .wizard .actions button.link:disabled, +.metro .wizard .actions button.link.disabled { + background-color: transparent !important; + color: #bebebe !important; + cursor: not-allowed !important; +} +.metro .wizard .actions button.link [class*="icon-"] { + text-decoration: none !important; +} +.metro .wizard .actions button:active { + background-color: #1d1d1d !important; + color: #ffffff !important; + border-color: transparent; +} +.metro .wizard .actions button.large { + padding: 11px 19px; + font-size: 17.5px; +} +.metro .wizard .actions button.small { + padding: 2px 10px; + font-size: 11.9px; +} +.metro .wizard .actions button.mini { + padding: 0px 6px; + font-size: 10.5px; +} +.metro .wizard .actions button:last-child { + margin-right: 0; +} +.metro .wizard .actions button.btn-finish { + background-color: #60a917; + color: #ffffff; +} +.metro .wizard .actions button:disabled { + background-color: #6f6f6f !important; +} +.metro .panel { + border: 1px #eaeaea solid; +} +.metro .panel .panel-header { + padding: 10px; + background-color: #eeeeee; + width: 100%; + font-family: 'Segoe UI Light_', 'Open Sans Light', Verdana, Arial, Helvetica, sans-serif; + font-weight: 300; + color: #000000; + letter-spacing: 0.00em; + font-size: 2.5rem; + line-height: 2.5rem; + letter-spacing: 0.01em; + color: rgba(0, 0, 0, 0.6); + font-size: 2.2rem; + line-height: 2.2rem; + color: #1d1d1d; + cursor: default; +} +.metro .panel .panel-content { + width: 100%; + height: auto; + padding: 10px; +} +.metro [data-role=panel] .panel-header { + cursor: pointer; +} +.metro [data-role=panel] .panel-header:after { + font-family: metroSysIcons; + content: "\e000"; + float: right; + color: inherit; + -webkit-transform: rotate(180deg); + -moz-transform: rotate(180deg); + -ms-transform: rotate(180deg); + -o-transform: rotate(180deg); + transform: rotate(180deg); +} +.metro [data-role=panel].collapsed .panel-header:after { + content: "\e000"; + -webkit-transform: rotate(90deg); + -moz-transform: rotate(90deg); + -ms-transform: rotate(90deg); + -o-transform: rotate(90deg); + transform: rotate(90deg); +} +@font-face { + font-family: 'metroSysIcons'; + src: url('../fonts/metroSysIcons.woff') format('woff'), url('../fonts/metroSysIcons.ttf') format('truetype'), url('../fonts/metroSysIcons.svg#metroSysIcons') format('svg'); + font-weight: normal; + font-style: normal; +} +.metro .example { + padding: 20px 40px 20px 60px; + border: 1px #ccc solid; + position: relative; + margin: 0 0 10px 0; + background-color: #fdfdfd !important; + min-height: 100px; +} +.metro .example:before, +.metro .example:after { + display: table; + content: ""; +} +.metro .example:after { + clear: both; +} +.metro .example:before { + position: absolute; + content: "example"; + left: -21px; + top: 30px; + color: #999999 !important; + margin: 5px 10px; + font-family: 'Segoe UI Semibold_', 'Open Sans Bold', Verdana, Arial, Helvetica, sans-serif; + font-weight: bold; + color: #000000; + font-size: 1.6rem; + line-height: 1.6rem; + letter-spacing: 0.02em; + color: rgba(0, 0, 0, 0.6); + font-size: 1.4rem; + line-height: 1.4rem; + -webkit-transform: rotate(-90deg); + -moz-transform: rotate(-90deg); + -ms-transform: rotate(-90deg); + -o-transform: rotate(-90deg); + transform: rotate(-90deg); +} +.metro code, +.metro .code { + font-family: 'Segoe UI_', 'Open Sans', Verdana, Arial, Helvetica, sans-serif; + font-weight: normal; + font-style: normal; + color: #000000; + font-size: 11pt; + line-height: 15pt; + letter-spacing: 0.02em; + font-family: 'Courier New', monospace; + display: inline-block; + padding: 3px 5px; + margin: 0; + background-color: #eeeeee; + color: #e51400; + border: 1px #d4d4d4 solid; + font-size: 90%; + line-height: 90%; +} +.metro .label { + display: inline-block; + padding: 3px 5px; + margin: 0; + font-size: 90%; + font-weight: normal !important; + line-height: 90%; + background: #eeeeee; + color: #555555; + font-weight: bold; +} +.metro .label.alert, +.metro .label.error { + background-color: #e51400; + color: #ffffff; +} +.metro .label.important, +.metro .label.warning { + background-color: #fa6800; + color: #ffffff; +} +.metro .label.success { + background-color: #128023; + color: #ffffff; +} +.metro .label.info { + background-color: #1ba1e2; + color: #ffffff; +} +.metro hr { + height: 1px; + margin: 20px 0; + border: 0; + color: #eeeeee; + background-color: #eeeeee; +} +.metro .bg-black { + background-color: #000000 !important; +} +.metro .bg-white { + background-color: #ffffff !important; +} +.metro .bg-lime { + background-color: #a4c400 !important; +} +.metro .bg-green { + background-color: #60a917 !important; +} +.metro .bg-emerald { + background-color: #008a00 !important; +} +.metro .bg-teal { + background-color: #00aba9 !important; +} +.metro .bg-cyan { + background-color: #1ba1e2 !important; +} +.metro .bg-cobalt { + background-color: #0050ef !important; +} +.metro .bg-indigo { + background-color: #6a00ff !important; +} +.metro .bg-violet { + background-color: #aa00ff !important; +} +.metro .bg-pink { + background-color: #dc4fad !important; +} +.metro .bg-magenta { + background-color: #d80073 !important; +} +.metro .bg-crimson { + background-color: #a20025 !important; +} +.metro .bg-red { + background-color: #e51400 !important; +} +.metro .bg-orange { + background-color: #fa6800 !important; +} +.metro .bg-amber { + background-color: #f0a30a !important; +} +.metro .bg-yellow { + background-color: #e3c800 !important; +} +.metro .bg-brown { + background-color: #825a2c !important; +} +.metro .bg-olive { + background-color: #6d8764 !important; +} +.metro .bg-steel { + background-color: #647687 !important; +} +.metro .bg-mauve { + background-color: #76608a !important; +} +.metro .bg-taupe { + background-color: #87794e !important; +} +.metro .bg-gray { + background-color: #555555 !important; +} +.metro .bg-dark { + background-color: #333333 !important; +} +.metro .bg-darker { + background-color: #222222 !important; +} +.metro .bg-transparent { + background-color: transparent !important; +} +.metro .bg-darkBrown { + background-color: #63362f !important; +} +.metro .bg-darkCrimson { + background-color: #640024 !important; +} +.metro .bg-darkMagenta { + background-color: #81003c !important; +} +.metro .bg-darkIndigo { + background-color: #4b0096 !important; +} +.metro .bg-darkCyan { + background-color: #1b6eae !important; +} +.metro .bg-darkCobalt { + background-color: #00356a !important; +} +.metro .bg-darkTeal { + background-color: #004050 !important; +} +.metro .bg-darkEmerald { + background-color: #003e00 !important; +} +.metro .bg-darkGreen { + background-color: #128023 !important; +} +.metro .bg-darkOrange { + background-color: #bf5a15 !important; +} +.metro .bg-darkRed { + background-color: #9a1616 !important; +} +.metro .bg-darkPink { + background-color: #9a165a !important; +} +.metro .bg-darkViolet { + background-color: #57169a !important; +} +.metro .bg-darkBlue { + background-color: #16499a !important; +} +.metro .bg-lightBlue { + background-color: #4390df !important; +} +.metro .bg-lightRed { + background-color: #ff2d19 !important; +} +.metro .bg-lightGreen { + background-color: #7ad61d !important; +} +.metro .bg-lighterBlue { + background-color: #00ccff !important; +} +.metro .bg-lightTeal { + background-color: #45fffd !important; +} +.metro .bg-lightOlive { + background-color: #78aa1c !important; +} +.metro .bg-lightOrange { + background-color: #c29008 !important; +} +.metro .bg-lightPink { + background-color: #f472d0 !important; +} +.metro .bg-grayDark { + background-color: #333333 !important; +} +.metro .bg-grayDarker { + background-color: #222222 !important; +} +.metro .bg-grayLight { + background-color: #999999 !important; +} +.metro .bg-grayLighter { + background-color: #eeeeee !important; +} +.metro .bg-blue { + background-color: #00aff0 !important; +} +.metro .fg-black { + color: #000000 !important; +} +.metro .fg-white { + color: #ffffff !important; +} +.metro .fg-lime { + color: #a4c400 !important; +} +.metro .fg-green { + color: #60a917 !important; +} +.metro .fg-emerald { + color: #008a00 !important; +} +.metro .fg-teal { + color: #00aba9 !important; +} +.metro .fg-cyan { + color: #1ba1e2 !important; +} +.metro .fg-cobalt { + color: #0050ef !important; +} +.metro .fg-indigo { + color: #6a00ff !important; +} +.metro .fg-violet { + color: #aa00ff !important; +} +.metro .fg-pink { + color: #dc4fad !important; +} +.metro .fg-magenta { + color: #d80073 !important; +} +.metro .fg-crimson { + color: #a20025 !important; +} +.metro .fg-red { + color: #e51400 !important; +} +.metro .fg-orange { + color: #fa6800 !important; +} +.metro .fg-amber { + color: #f0a30a !important; +} +.metro .fg-yellow { + color: #e3c800 !important; +} +.metro .fg-brown { + color: #825a2c !important; +} +.metro .fg-olive { + color: #6d8764 !important; +} +.metro .fg-steel { + color: #647687 !important; +} +.metro .fg-mauve { + color: #76608a !important; +} +.metro .fg-taupe { + color: #87794e !important; +} +.metro .fg-gray { + color: #555555 !important; +} +.metro .fg-dark { + color: #333333 !important; +} +.metro .fg-darker { + color: #222222 !important; +} +.metro .fg-transparent { + color: transparent !important; +} +.metro .fg-darkBrown { + color: #63362f !important; +} +.metro .fg-darkCrimson { + color: #640024 !important; +} +.metro .fg-darkMagenta { + color: #81003c !important; +} +.metro .fg-darkIndigo { + color: #4b0096 !important; +} +.metro .fg-darkCyan { + color: #1b6eae !important; +} +.metro .fg-darkCobalt { + color: #00356a !important; +} +.metro .fg-darkTeal { + color: #004050 !important; +} +.metro .fg-darkEmerald { + color: #003e00 !important; +} +.metro .fg-darkGreen { + color: #128023 !important; +} +.metro .fg-darkOrange { + color: #bf5a15 !important; +} +.metro .fg-darkRed { + color: #9a1616 !important; +} +.metro .fg-darkPink { + color: #9a165a !important; +} +.metro .fg-darkViolet { + color: #57169a !important; +} +.metro .fg-darkBlue { + color: #16499a !important; +} +.metro .fg-lightBlue { + color: #4390df !important; +} +.metro .fg-lighterBlue { + color: #00ccff !important; +} +.metro .fg-lightTeal { + color: #45fffd !important; +} +.metro .fg-lightOlive { + color: #78aa1c !important; +} +.metro .fg-lightOrange { + color: #c29008 !important; +} +.metro .fg-lightPink { + color: #f472d0 !important; +} +.metro .fg-lightRed { + color: #ff2d19 !important; +} +.metro .fg-lightGreen { + color: #7ad61d !important; +} +.metro .fg-grayDark { + color: #333333 !important; +} +.metro .fg-grayDarker { + color: #222222 !important; +} +.metro .fg-grayLight { + color: #999999 !important; +} +.metro .fg-grayLighter { + color: #eeeeee !important; +} +.metro .fg-blue { + color: #00aff0 !important; +} +.metro .ol-black { + outline-color: #000000 !important; +} +.metro .ol-white { + outline-color: #ffffff !important; +} +.metro .ol-lime { + outline-color: #a4c400 !important; +} +.metro .ol-green { + outline-color: #60a917 !important; +} +.metro .ol-emerald { + outline-color: #008a00 !important; +} +.metro .ol-teal { + outline-color: #00aba9 !important; +} +.metro .ol-cyan { + outline-color: #1ba1e2 !important; +} +.metro .ol-cobalt { + outline-color: #0050ef !important; +} +.metro .ol-indigo { + outline-color: #6a00ff !important; +} +.metro .ol-violet { + outline-color: #aa00ff !important; +} +.metro .ol-pink { + outline-color: #dc4fad !important; +} +.metro .ol-magenta { + outline-color: #d80073 !important; +} +.metro .ol-crimson { + outline-color: #a20025 !important; +} +.metro .ol-red { + outline-color: #e51400 !important; +} +.metro .ol-orange { + outline-color: #fa6800 !important; +} +.metro .ol-amber { + outline-color: #f0a30a !important; +} +.metro .ol-yellow { + outline-color: #e3c800 !important; +} +.metro .ol-brown { + outline-color: #825a2c !important; +} +.metro .ol-olive { + outline-color: #6d8764 !important; +} +.metro .ol-steel { + outline-color: #647687 !important; +} +.metro .ol-mauve { + outline-color: #76608a !important; +} +.metro .ol-taupe { + outline-color: #87794e !important; +} +.metro .ol-gray { + outline-color: #555555 !important; +} +.metro .ol-dark { + outline-color: #333333 !important; +} +.metro .ol-darker { + outline-color: #222222 !important; +} +.metro .ol-transparent { + outline-color: transparent !important; +} +.metro .ol-darkBrown { + outline-color: #63362f !important; +} +.metro .ol-darkCrimson { + outline-color: #640024 !important; +} +.metro .ol-darkMagenta { + outline-color: #81003c !important; +} +.metro .ol-darkIndigo { + outline-color: #4b0096 !important; +} +.metro .ol-darkCyan { + outline-color: #1b6eae !important; +} +.metro .ol-darkCobalt { + outline-color: #00356a !important; +} +.metro .ol-darkTeal { + outline-color: #004050 !important; +} +.metro .ol-darkEmerald { + outline-color: #003e00 !important; +} +.metro .ol-darkGreen { + outline-color: #128023 !important; +} +.metro .ol-darkOrange { + outline-color: #bf5a15 !important; +} +.metro .ol-darkRed { + outline-color: #9a1616 !important; +} +.metro .ol-darkPink { + outline-color: #9a165a !important; +} +.metro .ol-darkViolet { + outline-color: #57169a !important; +} +.metro .ol-darkBlue { + outline-color: #16499a !important; +} +.metro .ol-lightBlue { + outline-color: #4390df !important; +} +.metro .ol-lighterBlue { + outline-color: #00ccff !important; +} +.metro .ol-lightTeal { + outline-color: #45fffd !important; +} +.metro .ol-lightOlive { + outline-color: #78aa1c !important; +} +.metro .ol-lightOrange { + outline-color: #c29008 !important; +} +.metro .ol-lightPink { + outline-color: #f472d0 !important; +} +.metro .ol-lightRed { + outline-color: #ff2d19 !important; +} +.metro .ol-lightGreen { + outline-color: #7ad61d !important; +} +.metro .ol-grayDark { + outline-color: #333333 !important; +} +.metro .ol-grayDarker { + outline-color: #222222 !important; +} +.metro .ol-grayLight { + outline-color: #999999 !important; +} +.metro .ol-grayLighter { + outline-color: #eeeeee !important; +} +.metro .ol-blue { + outline-color: #00aff0 !important; +} +.metro .bd-black { + border-color: #000000 !important; +} +.metro .bd-white { + border-color: #ffffff !important; +} +.metro .bd-lime { + border-color: #a4c400 !important; +} +.metro .bd-green { + border-color: #60a917 !important; +} +.metro .bd-emerald { + border-color: #008a00 !important; +} +.metro .bd-teal { + border-color: #00aba9 !important; +} +.metro .bd-cyan { + border-color: #1ba1e2 !important; +} +.metro .bd-cobalt { + border-color: #0050ef !important; +} +.metro .bd-indigo { + border-color: #6a00ff !important; +} +.metro .bd-violet { + border-color: #aa00ff !important; +} +.metro .bd-pink { + border-color: #dc4fad !important; +} +.metro .bd-magenta { + border-color: #d80073 !important; +} +.metro .bd-crimson { + border-color: #a20025 !important; +} +.metro .bd-red { + border-color: #e51400 !important; +} +.metro .bd-orange { + border-color: #fa6800 !important; +} +.metro .bd-amber { + border-color: #f0a30a !important; +} +.metro .bd-yellow { + border-color: #e3c800 !important; +} +.metro .bd-brown { + border-color: #825a2c !important; +} +.metro .bd-olive { + border-color: #6d8764 !important; +} +.metro .bd-steel { + border-color: #647687 !important; +} +.metro .bd-mauve { + border-color: #76608a !important; +} +.metro .bd-taupe { + border-color: #87794e !important; +} +.metro .bd-gray { + border-color: #555555 !important; +} +.metro .bd-dark { + border-color: #333333 !important; +} +.metro .bd-darker { + border-color: #222222 !important; +} +.metro .bd-transparent { + border-color: transparent !important; +} +.metro .bd-darkBrown { + border-color: #63362f !important; +} +.metro .bd-darkCrimson { + border-color: #640024 !important; +} +.metro .bd-darkMagenta { + border-color: #81003c !important; +} +.metro .bd-darkIndigo { + border-color: #4b0096 !important; +} +.metro .bd-darkCyan { + border-color: #1b6eae !important; +} +.metro .bd-darkCobalt { + border-color: #00356a !important; +} +.metro .bd-darkTeal { + border-color: #004050 !important; +} +.metro .bd-darkEmerald { + border-color: #003e00 !important; +} +.metro .bd-darkGreen { + border-color: #128023 !important; +} +.metro .bd-darkOrange { + border-color: #bf5a15 !important; +} +.metro .bd-darkRed { + border-color: #9a1616 !important; +} +.metro .bd-darkPink { + border-color: #9a165a !important; +} +.metro .bd-darkViolet { + border-color: #57169a !important; +} +.metro .bd-darkBlue { + border-color: #16499a !important; +} +.metro .bd-lightBlue { + border-color: #4390df !important; +} +.metro .bd-lightTeal { + border-color: #45fffd !important; +} +.metro .bd-lightOlive { + border-color: #78aa1c !important; +} +.metro .bd-lightOrange { + border-color: #c29008 !important; +} +.metro .bd-lightPink { + border-color: #f472d0 !important; +} +.metro .bd-lightRed { + border-color: #ff2d19 !important; +} +.metro .bd-lightGreen { + border-color: #7ad61d !important; +} +.metro .bd-grayDark { + border-color: #333333 !important; +} +.metro .bd-grayDarker { + border-color: #222222 !important; +} +.metro .bd-grayLight { + border-color: #999999 !important; +} +.metro .bd-grayLighter { + border-color: #eeeeee !important; +} +.metro .bd-blue { + border-color: #00aff0 !important; +} +.metro .bg-hover-black:hover { + background-color: #000000 !important; +} +.metro .bg-hover-white:hover { + background-color: #ffffff !important; +} +.metro .bg-hover-lime:hover { + background-color: #a4c400 !important; +} +.metro .bg-hover-green:hover { + background-color: #60a917 !important; +} +.metro .bg-hover-emerald:hover { + background-color: #008a00 !important; +} +.metro .bg-hover-teal:hover { + background-color: #00aba9 !important; +} +.metro .bg-hover-cyan:hover { + background-color: #1ba1e2 !important; +} +.metro .bg-hover-cobalt:hover { + background-color: #0050ef !important; +} +.metro .bg-hover-indigo:hover { + background-color: #6a00ff !important; +} +.metro .bg-hover-violet:hover { + background-color: #aa00ff !important; +} +.metro .bg-hover-pink:hover { + background-color: #dc4fad !important; +} +.metro .bg-hover-magenta:hover { + background-color: #d80073 !important; +} +.metro .bg-hover-crimson:hover { + background-color: #a20025 !important; +} +.metro .bg-hover-red:hover { + background-color: #e51400 !important; +} +.metro .bg-hover-orange:hover { + background-color: #fa6800 !important; +} +.metro .bg-hover-amber:hover { + background-color: #f0a30a !important; +} +.metro .bg-hover-yellow:hover { + background-color: #e3c800 !important; +} +.metro .bg-hover-brown:hover { + background-color: #825a2c !important; +} +.metro .bg-hover-olive:hover { + background-color: #6d8764 !important; +} +.metro .bg-hover-steel:hover { + background-color: #647687 !important; +} +.metro .bg-hover-mauve:hover { + background-color: #76608a !important; +} +.metro .bg-hover-taupe:hover { + background-color: #87794e !important; +} +.metro .bg-hover-gray:hover { + background-color: #555555 !important; +} +.metro .bg-hover-dark:hover { + background-color: #333333 !important; +} +.metro .bg-hover-darker:hover { + background-color: #222222 !important; +} +.metro .bg-hover-transparent:hover { + background-color: transparent !important; +} +.metro .bg-hover-darkBrown:hover { + background-color: #63362f !important; +} +.metro .bg-hover-darkCrimson:hover { + background-color: #640024 !important; +} +.metro .bg-hover-darkMagenta:hover { + background-color: #81003c !important; +} +.metro .bg-hover-darkIndigo:hover { + background-color: #4b0096 !important; +} +.metro .bg-hover-darkCyan:hover { + background-color: #1b6eae !important; +} +.metro .bg-hover-darkCobalt:hover { + background-color: #00356a !important; +} +.metro .bg-hover-darkTeal:hover { + background-color: #004050 !important; +} +.metro .bg-hover-darkEmerald:hover { + background-color: #003e00 !important; +} +.metro .bg-hover-darkGreen:hover { + background-color: #128023 !important; +} +.metro .bg-hover-darkOrange:hover { + background-color: #bf5a15 !important; +} +.metro .bg-hover-darkRed:hover { + background-color: #9a1616 !important; +} +.metro .bg-hover-darkPink:hover { + background-color: #9a165a !important; +} +.metro .bg-hover-darkViolet:hover { + background-color: #57169a !important; +} +.metro .bg-hover-darkBlue:hover { + background-color: #16499a !important; +} +.metro .bg-hover-lightBlue:hover { + background-color: #4390df !important; +} +.metro .bg-hover-lightTeal:hover { + background-color: #45fffd !important; +} +.metro .bg-hover-lightOlive:hover { + background-color: #78aa1c !important; +} +.metro .bg-hover-lightOrange:hover { + background-color: #c29008 !important; +} +.metro .bg-hover-lightPink:hover { + background-color: #f472d0 !important; +} +.metro .bg-hover-lightRed:hover { + background-color: #ff2d19 !important; +} +.metro .bg-hover-lightGreen:hover { + background-color: #7ad61d !important; +} +.metro .bg-hover-grayDark:hover { + background-color: #333333 !important; +} +.metro .bg-hover-grayDarker:hover { + background-color: #222222 !important; +} +.metro .bg-hover-grayLight:hover { + background-color: #999999 !important; +} +.metro .bg-hover-grayLighter:hover { + background-color: #eeeeee !important; +} +.metro .bg-hover-blue:hover { + background-color: #00aff0 !important; +} +.metro .fg-hover-black:hover { + color: #000000 !important; +} +.metro .fg-hover-white:hover { + color: #ffffff !important; +} +.metro .fg-hover-lime:hover { + color: #a4c400 !important; +} +.metro .fg-hover-green:hover { + color: #60a917 !important; +} +.metro .fg-hover-emerald:hover { + color: #008a00 !important; +} +.metro .fg-hover-teal:hover { + color: #00aba9 !important; +} +.metro .fg-hover-cyan:hover { + color: #1ba1e2 !important; +} +.metro .fg-hover-cobalt:hover { + color: #0050ef !important; +} +.metro .fg-hover-indigo:hover { + color: #6a00ff !important; +} +.metro .fg-hover-violet:hover { + color: #aa00ff !important; +} +.metro .fg-hover-pink:hover { + color: #dc4fad !important; +} +.metro .fg-hover-magenta:hover { + color: #d80073 !important; +} +.metro .fg-hover-crimson:hover { + color: #a20025 !important; +} +.metro .fg-hover-red:hover { + color: #e51400 !important; +} +.metro .fg-hover-orange:hover { + color: #fa6800 !important; +} +.metro .fg-hover-amber:hover { + color: #f0a30a !important; +} +.metro .fg-hover-yellow:hover { + color: #e3c800 !important; +} +.metro .fg-hover-brown:hover { + color: #825a2c !important; +} +.metro .fg-hover-olive:hover { + color: #6d8764 !important; +} +.metro .fg-hover-steel:hover { + color: #647687 !important; +} +.metro .fg-hover-mauve:hover { + color: #76608a !important; +} +.metro .fg-hover-taupe:hover { + color: #87794e !important; +} +.metro .fg-hover-gray:hover { + color: #555555 !important; +} +.metro .fg-hover-dark:hover { + color: #333333 !important; +} +.metro .fg-hover-darker:hover { + color: #222222 !important; +} +.metro .fg-hover-transparent:hover { + color: transparent !important; +} +.metro .fg-hover-darkBrown:hover { + color: #63362f !important; +} +.metro .fg-hover-darkCrimson:hover { + color: #640024 !important; +} +.metro .fg-hover-darkMagenta:hover { + color: #81003c !important; +} +.metro .fg-hover-darkIndigo:hover { + color: #4b0096 !important; +} +.metro .fg-hover-darkCyan:hover { + color: #1b6eae !important; +} +.metro .fg-hover-darkCobalt:hover { + color: #00356a !important; +} +.metro .fg-hover-darkTeal:hover { + color: #004050 !important; +} +.metro .fg-hover-darkEmerald:hover { + color: #003e00 !important; +} +.metro .fg-hover-darkGreen:hover { + color: #128023 !important; +} +.metro .fg-hover-darkOrange:hover { + color: #bf5a15 !important; +} +.metro .fg-hover-darkRed:hover { + color: #9a1616 !important; +} +.metro .fg-hover-darkPink:hover { + color: #9a165a !important; +} +.metro .fg-hover-darkViolet:hover { + color: #57169a !important; +} +.metro .fg-hover-darkBlue:hover { + color: #16499a !important; +} +.metro .fg-hover-lightBlue:hover { + color: #4390df !important; +} +.metro .fg-hover-lightTeal:hover { + color: #45fffd !important; +} +.metro .fg-hover-lightOlive:hover { + color: #78aa1c !important; +} +.metro .fg-hover-lightOrange:hover { + color: #c29008 !important; +} +.metro .fg-hover-lightPink:hover { + color: #f472d0 !important; +} +.metro .fg-hover-lightRed:hover { + color: #ff2d19 !important; +} +.metro .fg-hover-lightGreen:hover { + color: #7ad61d !important; +} +.metro .fg-hover-grayDark:hover { + color: #333333 !important; +} +.metro .fg-hover-grayDarker:hover { + color: #222222 !important; +} +.metro .fg-hover-grayLight:hover { + color: #999999 !important; +} +.metro .fg-hover-grayLighter:hover { + color: #eeeeee !important; +} +.metro .fg-hover-blue:hover { + color: #00aff0 !important; +} +.metro .bg-active-black:active { + background-color: #000000 !important; +} +.metro .bg-active-white:active { + background-color: #ffffff !important; +} +.metro .bg-active-lime:active { + background-color: #a4c400 !important; +} +.metro .bg-active-green:active { + background-color: #60a917 !important; +} +.metro .bg-active-emerald:active { + background-color: #008a00 !important; +} +.metro .bg-active-teal:active { + background-color: #00aba9 !important; +} +.metro .bg-active-cyan:active { + background-color: #1ba1e2 !important; +} +.metro .bg-active-cobalt:active { + background-color: #0050ef !important; +} +.metro .bg-active-indigo:active { + background-color: #6a00ff !important; +} +.metro .bg-active-violet:active { + background-color: #aa00ff !important; +} +.metro .bg-active-pink:active { + background-color: #dc4fad !important; +} +.metro .bg-active-magenta:active { + background-color: #d80073 !important; +} +.metro .bg-active-crimson:active { + background-color: #a20025 !important; +} +.metro .bg-active-red:active { + background-color: #e51400 !important; +} +.metro .bg-active-orange:active { + background-color: #fa6800 !important; +} +.metro .bg-active-amber:active { + background-color: #f0a30a !important; +} +.metro .bg-active-yellow:active { + background-color: #e3c800 !important; +} +.metro .bg-active-brown:active { + background-color: #825a2c !important; +} +.metro .bg-active-olive:active { + background-color: #6d8764 !important; +} +.metro .bg-active-steel:active { + background-color: #647687 !important; +} +.metro .bg-active-mauve:active { + background-color: #76608a !important; +} +.metro .bg-active-taupe:active { + background-color: #87794e !important; +} +.metro .bg-active-gray:active { + background-color: #555555 !important; +} +.metro .bg-active-dark:active { + background-color: #333333 !important; +} +.metro .bg-active-darker:active { + background-color: #222222 !important; +} +.metro .bg-active-transparent:active { + background-color: transparent !important; +} +.metro .bg-active-darkBrown:active { + background-color: #63362f !important; +} +.metro .bg-active-darkCrimson:active { + background-color: #640024 !important; +} +.metro .bg-active-darkMagenta:active { + background-color: #81003c !important; +} +.metro .bg-active-darkIndigo:active { + background-color: #4b0096 !important; +} +.metro .bg-active-darkCyan:active { + background-color: #1b6eae !important; +} +.metro .bg-active-darkCobalt:active { + background-color: #00356a !important; +} +.metro .bg-active-darkTeal:active { + background-color: #004050 !important; +} +.metro .bg-active-darkEmerald:active { + background-color: #003e00 !important; +} +.metro .bg-active-darkGreen:active { + background-color: #128023 !important; +} +.metro .bg-active-darkOrange:active { + background-color: #bf5a15 !important; +} +.metro .bg-active-darkRed:active { + background-color: #9a1616 !important; +} +.metro .bg-active-darkPink:active { + background-color: #9a165a !important; +} +.metro .bg-active-darkViolet:active { + background-color: #57169a !important; +} +.metro .bg-active-darkBlue:active { + background-color: #16499a !important; +} +.metro .bg-active-lightBlue:active { + background-color: #4390df !important; +} +.metro .bg-active-lightTeal:active { + background-color: #45fffd !important; +} +.metro .bg-active-lightOlive:active { + background-color: #78aa1c !important; +} +.metro .bg-active-lightOrange:active { + background-color: #c29008 !important; +} +.metro .bg-active-lightPink:active { + background-color: #f472d0 !important; +} +.metro .bg-active-lightRed:active { + background-color: #ff2d19 !important; +} +.metro .bg-active-lightGreen:active { + background-color: #7ad61d !important; +} +.metro .bg-active-grayDark:active { + background-color: #333333 !important; +} +.metro .bg-active-grayDarker:active { + background-color: #222222 !important; +} +.metro .bg-active-grayLight:active { + background-color: #999999 !important; +} +.metro .bg-active-grayLighter:active { + background-color: #eeeeee !important; +} +.metro .bg-active-blue:active { + background-color: #00aff0 !important; +} +.metro .fg-active-black:active { + color: #000000 !important; +} +.metro .fg-active-white:active { + color: #ffffff !important; +} +.metro .fg-active-lime:active { + color: #a4c400 !important; +} +.metro .fg-active-green:active { + color: #60a917 !important; +} +.metro .fg-active-emerald:active { + color: #008a00 !important; +} +.metro .fg-active-teal:active { + color: #00aba9 !important; +} +.metro .fg-active-cyan:active { + color: #1ba1e2 !important; +} +.metro .fg-active-cobalt:active { + color: #0050ef !important; +} +.metro .fg-active-indigo:active { + color: #6a00ff !important; +} +.metro .fg-active-violet:active { + color: #aa00ff !important; +} +.metro .fg-active-pink:active { + color: #dc4fad !important; +} +.metro .fg-active-magenta:active { + color: #d80073 !important; +} +.metro .fg-active-crimson:active { + color: #a20025 !important; +} +.metro .fg-active-red:active { + color: #e51400 !important; +} +.metro .fg-active-orange:active { + color: #fa6800 !important; +} +.metro .fg-active-amber:active { + color: #f0a30a !important; +} +.metro .fg-active-yellow:active { + color: #e3c800 !important; +} +.metro .fg-active-brown:active { + color: #825a2c !important; +} +.metro .fg-active-olive:active { + color: #6d8764 !important; +} +.metro .fg-active-steel:active { + color: #647687 !important; +} +.metro .fg-active-mauve:active { + color: #76608a !important; +} +.metro .fg-active-taupe:active { + color: #87794e !important; +} +.metro .fg-active-gray:active { + color: #555555 !important; +} +.metro .fg-active-dark:active { + color: #333333 !important; +} +.metro .fg-active-darker:active { + color: #222222 !important; +} +.metro .fg-active-transparent:active { + color: transparent !important; +} +.metro .fg-active-darkBrown:active { + color: #63362f !important; +} +.metro .fg-active-darkCrimson:active { + color: #640024 !important; +} +.metro .fg-active-darkMagenta:active { + color: #81003c !important; +} +.metro .fg-active-darkIndigo:active { + color: #4b0096 !important; +} +.metro .fg-active-darkCyan:active { + color: #1b6eae !important; +} +.metro .fg-active-darkCobalt:active { + color: #00356a !important; +} +.metro .fg-active-darkTeal:active { + color: #004050 !important; +} +.metro .fg-active-darkEmerald:active { + color: #003e00 !important; +} +.metro .fg-active-darkGreen:active { + color: #128023 !important; +} +.metro .fg-active-darkOrange:active { + color: #bf5a15 !important; +} +.metro .fg-active-darkRed:active { + color: #9a1616 !important; +} +.metro .fg-active-darkPink:active { + color: #9a165a !important; +} +.metro .fg-active-darkViolet:active { + color: #57169a !important; +} +.metro .fg-active-darkBlue:active { + color: #16499a !important; +} +.metro .fg-active-lightBlue:active { + color: #4390df !important; +} +.metro .fg-active-lightTeal:active { + color: #45fffd !important; +} +.metro .fg-active-lightOlive:active { + color: #78aa1c !important; +} +.metro .fg-active-lightOrange:active { + color: #c29008 !important; +} +.metro .fg-active-lightPink:active { + color: #f472d0 !important; +} +.metro .fg-active-lightRed:active { + color: #ff2d19 !important; +} +.metro .fg-active-lightGreen:active { + color: #7ad61d !important; +} +.metro .fg-active-grayDark:active { + color: #333333 !important; +} +.metro .fg-active-grayDarker:active { + color: #222222 !important; +} +.metro .fg-active-grayLight:active { + color: #999999 !important; +} +.metro .fg-active-grayLighter:active { + color: #eeeeee !important; +} +.metro .fg-active-blue:active { + color: #00aff0 !important; +} +.metro .bg-focus-black:focus { + background-color: #000000 !important; +} +.metro .bg-focus-white:focus { + background-color: #ffffff !important; +} +.metro .bg-focus-lime:focus { + background-color: #a4c400 !important; +} +.metro .bg-focus-green:focus { + background-color: #60a917 !important; +} +.metro .bg-focus-emerald:focus { + background-color: #008a00 !important; +} +.metro .bg-focus-teal:focus { + background-color: #00aba9 !important; +} +.metro .bg-focus-cyan:focus { + background-color: #1ba1e2 !important; +} +.metro .bg-focus-cobalt:focus { + background-color: #0050ef !important; +} +.metro .bg-focus-indigo:focus { + background-color: #6a00ff !important; +} +.metro .bg-focus-violet:focus { + background-color: #aa00ff !important; +} +.metro .bg-focus-pink:focus { + background-color: #dc4fad !important; +} +.metro .bg-focus-magenta:focus { + background-color: #d80073 !important; +} +.metro .bg-focus-crimson:focus { + background-color: #a20025 !important; +} +.metro .bg-focus-red:focus { + background-color: #e51400 !important; +} +.metro .bg-focus-orange:focus { + background-color: #fa6800 !important; +} +.metro .bg-focus-amber:focus { + background-color: #f0a30a !important; +} +.metro .bg-focus-yellow:focus { + background-color: #e3c800 !important; +} +.metro .bg-focus-brown:focus { + background-color: #825a2c !important; +} +.metro .bg-focus-olive:focus { + background-color: #6d8764 !important; +} +.metro .bg-focus-steel:focus { + background-color: #647687 !important; +} +.metro .bg-focus-mauve:focus { + background-color: #76608a !important; +} +.metro .bg-focus-taupe:focus { + background-color: #87794e !important; +} +.metro .bg-focus-gray:focus { + background-color: #555555 !important; +} +.metro .bg-focus-dark:focus { + background-color: #333333 !important; +} +.metro .bg-focus-darker:focus { + background-color: #222222 !important; +} +.metro .bg-focus-transparent:focus { + background-color: transparent !important; +} +.metro .bg-focus-darkBrown:focus { + background-color: #63362f !important; +} +.metro .bg-focus-darkCrimson:focus { + background-color: #640024 !important; +} +.metro .bg-focus-darkMagenta:focus { + background-color: #81003c !important; +} +.metro .bg-focus-darkIndigo:focus { + background-color: #4b0096 !important; +} +.metro .bg-focus-darkCyan:focus { + background-color: #1b6eae !important; +} +.metro .bg-focus-darkCobalt:focus { + background-color: #00356a !important; +} +.metro .bg-focus-darkTeal:focus { + background-color: #004050 !important; +} +.metro .bg-focus-darkEmerald:focus { + background-color: #003e00 !important; +} +.metro .bg-focus-darkGreen:focus { + background-color: #128023 !important; +} +.metro .bg-focus-darkOrange:focus { + background-color: #bf5a15 !important; +} +.metro .bg-focus-darkRed:focus { + background-color: #9a1616 !important; +} +.metro .bg-focus-darkPink:focus { + background-color: #9a165a !important; +} +.metro .bg-focus-darkViolet:focus { + background-color: #57169a !important; +} +.metro .bg-focus-darkBlue:focus { + background-color: #16499a !important; +} +.metro .bg-focus-lightBlue:focus { + background-color: #4390df !important; +} +.metro .bg-focus-lightTeal:focus { + background-color: #45fffd !important; +} +.metro .bg-focus-lightOlive:focus { + background-color: #78aa1c !important; +} +.metro .bg-focus-lightOrange:focus { + background-color: #c29008 !important; +} +.metro .bg-focus-lightPink:focus { + background-color: #f472d0 !important; +} +.metro .bg-focus-lightRed:focus { + background-color: #ff2d19 !important; +} +.metro .bg-focus-lightGreen:focus { + background-color: #7ad61d !important; +} +.metro .bg-focus-grayDark:focus { + background-color: #333333 !important; +} +.metro .bg-focus-grayDarker:focus { + background-color: #222222 !important; +} +.metro .bg-focus-grayLight:focus { + background-color: #999999 !important; +} +.metro .bg-focus-grayLighter:focus { + background-color: #eeeeee !important; +} +.metro .bg-focus-blue:focus { + background-color: #00aff0 !important; +} +.metro .fg-focus-black:focus { + color: #000000 !important; +} +.metro .fg-focus-white:focus { + color: #ffffff !important; +} +.metro .fg-focus-lime:focus { + color: #a4c400 !important; +} +.metro .fg-focus-green:focus { + color: #60a917 !important; +} +.metro .fg-focus-emerald:focus { + color: #008a00 !important; +} +.metro .fg-focus-teal:focus { + color: #00aba9 !important; +} +.metro .fg-focus-cyan:focus { + color: #1ba1e2 !important; +} +.metro .fg-focus-cobalt:focus { + color: #0050ef !important; +} +.metro .fg-focus-indigo:focus { + color: #6a00ff !important; +} +.metro .fg-focus-violet:focus { + color: #aa00ff !important; +} +.metro .fg-focus-pink:focus { + color: #dc4fad !important; +} +.metro .fg-focus-magenta:focus { + color: #d80073 !important; +} +.metro .fg-focus-crimson:focus { + color: #a20025 !important; +} +.metro .fg-focus-red:focus { + color: #e51400 !important; +} +.metro .fg-focus-orange:focus { + color: #fa6800 !important; +} +.metro .fg-focus-amber:focus { + color: #f0a30a !important; +} +.metro .fg-focus-yellow:focus { + color: #e3c800 !important; +} +.metro .fg-focus-brown:focus { + color: #825a2c !important; +} +.metro .fg-focus-olive:focus { + color: #6d8764 !important; +} +.metro .fg-focus-steel:focus { + color: #647687 !important; +} +.metro .fg-focus-mauve:focus { + color: #76608a !important; +} +.metro .fg-focus-taupe:focus { + color: #87794e !important; +} +.metro .fg-focus-gray:focus { + color: #555555 !important; +} +.metro .fg-focus-dark:focus { + color: #333333 !important; +} +.metro .fg-focus-darker:focus { + color: #222222 !important; +} +.metro .fg-focus-transparent:focus { + color: transparent !important; +} +.metro .fg-focus-darkBrown:focus { + color: #63362f !important; +} +.metro .fg-focus-darkCrimson:focus { + color: #640024 !important; +} +.metro .fg-focus-darkMagenta:focus { + color: #81003c !important; +} +.metro .fg-focus-darkIndigo:focus { + color: #4b0096 !important; +} +.metro .fg-focus-darkCyan:focus { + color: #1b6eae !important; +} +.metro .fg-focus-darkCobalt:focus { + color: #00356a !important; +} +.metro .fg-focus-darkTeal:focus { + color: #004050 !important; +} +.metro .fg-focus-darkEmerald:focus { + color: #003e00 !important; +} +.metro .fg-focus-darkGreen:focus { + color: #128023 !important; +} +.metro .fg-focus-darkOrange:focus { + color: #bf5a15 !important; +} +.metro .fg-focus-darkRed:focus { + color: #9a1616 !important; +} +.metro .fg-focus-darkPink:focus { + color: #9a165a !important; +} +.metro .fg-focus-darkViolet:focus { + color: #57169a !important; +} +.metro .fg-focus-darkBlue:focus { + color: #16499a !important; +} +.metro .fg-focus-lightBlue:focus { + color: #4390df !important; +} +.metro .fg-focus-lightTeal:focus { + color: #45fffd !important; +} +.metro .fg-focus-lightOlive:focus { + color: #78aa1c !important; +} +.metro .fg-focus-lightOrange:focus { + color: #c29008 !important; +} +.metro .fg-focus-lightPink:focus { + color: #f472d0 !important; +} +.metro .fg-focus-lightRed:focus { + color: #ff2d19 !important; +} +.metro .fg-focus-lightGreen:focus { + color: #7ad61d !important; +} +.metro .fg-focus-grayDark:focus { + color: #333333 !important; +} +.metro .fg-focus-grayDarker:focus { + color: #222222 !important; +} +.metro .fg-focus-grayLight:focus { + color: #999999 !important; +} +.metro .fg-focus-grayLighter:focus { + color: #eeeeee !important; +} +.metro .fg-focus-blue:focus { + color: #00aff0 !important; +} +.metro .ribbed-black { + background-color: #000000 !important; + background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-size: 40px 40px; +} +.metro .ribbed-white { + background-color: #ffffff !important; + background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-size: 40px 40px; +} +.metro .ribbed-lime { + background-color: #a4c400 !important; + background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-size: 40px 40px; +} +.metro .ribbed-green { + background-color: #60a917 !important; + background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-size: 40px 40px; +} +.metro .ribbed-emerald { + background-color: #008a00 !important; + background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-size: 40px 40px; +} +.metro .ribbed-teal { + background-color: #00aba9 !important; + background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-size: 40px 40px; +} +.metro .ribbed-cyan { + background-color: #1ba1e2 !important; + background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-size: 40px 40px; +} +.metro .ribbed-cobalt { + background-color: #0050ef !important; + background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-size: 40px 40px; +} +.metro .ribbed-indigo { + background-color: #6a00ff !important; + background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-size: 40px 40px; +} +.metro .ribbed-violet { + background-color: #aa00ff !important; + background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-size: 40px 40px; +} +.metro .ribbed-pink { + background-color: #dc4fad !important; + background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-size: 40px 40px; +} +.metro .ribbed-magenta { + background-color: #d80073 !important; + background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-size: 40px 40px; +} +.metro .ribbed-crimson { + background-color: #a20025 !important; + background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-size: 40px 40px; +} +.metro .ribbed-red { + background-color: #e51400 !important; + background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-size: 40px 40px; +} +.metro .ribbed-orange { + background-color: #fa6800 !important; + background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-size: 40px 40px; +} +.metro .ribbed-amber { + background-color: #f0a30a !important; + background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-size: 40px 40px; +} +.metro .ribbed-yellow { + background-color: #e3c800 !important; + background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-size: 40px 40px; +} +.metro .ribbed-brown { + background-color: #825a2c !important; + background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-size: 40px 40px; +} +.metro .ribbed-olive { + background-color: #6d8764 !important; + background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-size: 40px 40px; +} +.metro .ribbed-steel { + background-color: #647687 !important; + background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-size: 40px 40px; +} +.metro .ribbed-mauve { + background-color: #76608a !important; + background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-size: 40px 40px; +} +.metro .ribbed-taupe { + background-color: #87794e !important; + background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-size: 40px 40px; +} +.metro .ribbed-dark { + background-color: #1d1d1d !important; + background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-size: 40px 40px; +} +.metro .ribbed-darkBrown { + background-color: #63362f !important; + background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-size: 40px 40px; +} +.metro .ribbed-darkCrimson { + background-color: #640024 !important; + background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-size: 40px 40px; +} +.metro .ribbed-darkMagenta { + background-color: #81003c !important; + background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-size: 40px 40px; +} +.metro .ribbed-darkIndigo { + background-color: #4b0096 !important; + background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-size: 40px 40px; +} +.metro .ribbed-darkCyan { + background-color: #1b6eae !important; + background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-size: 40px 40px; +} +.metro .ribbed-darkCobalt { + background-color: #00356a !important; + background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-size: 40px 40px; +} +.metro .ribbed-darkTeal { + background-color: #004050 !important; + background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-size: 40px 40px; +} +.metro .ribbed-darkEmerald { + background-color: #003e00 !important; + background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-size: 40px 40px; +} +.metro .ribbed-darkGreen { + background-color: #128023 !important; + background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-size: 40px 40px; +} +.metro .ribbed-darkOrange { + background-color: #bf5a15 !important; + background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-size: 40px 40px; +} +.metro .ribbed-darkRed { + background-color: #9a1616 !important; + background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-size: 40px 40px; +} +.metro .ribbed-darkPink { + background-color: #9a165a !important; + background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-size: 40px 40px; +} +.metro .ribbed-darkViolet { + background-color: #57169a !important; + background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-size: 40px 40px; +} +.metro .ribbed-darkBlue { + background-color: #16499a !important; + background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-size: 40px 40px; +} +.metro .ribbed-lightTeal { + background-color: #45fffd !important; + background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-size: 40px 40px; +} +.metro .ribbed-lightOlive { + background-color: #78aa1c !important; + background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-size: 40px 40px; +} +.metro .ribbed-lightOrange { + background-color: #c29008 !important; + background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-size: 40px 40px; +} +.metro .ribbed-lightPink { + background-color: #f472d0 !important; + background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-size: 40px 40px; +} +.metro .ribbed-lightRed { + background-color: #ff2d19 !important; + background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-size: 40px 40px; +} +.metro .ribbed-lightGreen { + background-color: #7ad61d !important; + background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-size: 40px 40px; +} +.metro .ribbed-grayed { + background-color: #585858 !important; + background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-size: 40px 40px; +} +.metro .ribbed-grayDarker { + background-color: #222222 !important; + background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-size: 40px 40px; +} +.metro .ribbed-gray { + background-color: #555555 !important; + background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-size: 40px 40px; +} +.metro .ribbed-grayLight { + background-color: #999999 !important; + background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-size: 40px 40px; +} +.metro .ribbed-grayLighter { + background-color: #eeeeee !important; + background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-size: 40px 40px; +} +.metro .ribbed-blue { + background-color: #00aff0 !important; + background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-size: 40px 40px; +} diff --git a/widgets/metro/doc.html b/widgets/metro/doc.html new file mode 100644 index 0000000..c233b7c --- /dev/null +++ b/widgets/metro/doc.html @@ -0,0 +1,40 @@ + + + + Dokumentation Widget-Set Metro + + + +basiert auf http://metroui.org.ua/ + +

Attribute

+
+ +
bg_class[_false,_true,_active,...]
+
Tile Hintergrundfarbe
+ +
brand_bg_class[_false,_true,_active,...]
+
Tile Beschriftungsfeld Hintergrundfarbe
+ +
badge_bg_class[_false,_true,_active,...]
+
Tile Beschriftungsfeld Icon/Zahl Hintergrundfarbe
+ +
[badge,dialog]icon_class[_false,_true,_active,...]
+
vordefinierte Icons
+ +
[badge,dialog]icon[_false,_true,_active,...]
+
eigene Icons
+ +
transform
+
Tile bei Click animieren
+ +
hover
+
Tile bei Hover umrahmen
+ + + +
+ + + + \ No newline at end of file diff --git a/widgets/metro/fonts/iconFont.dev.svg b/widgets/metro/fonts/iconFont.dev.svg new file mode 100644 index 0000000..5891a18 --- /dev/null +++ b/widgets/metro/fonts/iconFont.dev.svg @@ -0,0 +1,2569 @@ + + + + +This is a custom SVG font generated by IcoMoon. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/widgets/metro/fonts/iconFont.eot b/widgets/metro/fonts/iconFont.eot new file mode 100644 index 0000000..da34e87 Binary files /dev/null and b/widgets/metro/fonts/iconFont.eot differ diff --git a/widgets/metro/fonts/iconFont.json b/widgets/metro/fonts/iconFont.json new file mode 100644 index 0000000..ece845d --- /dev/null +++ b/widgets/metro/fonts/iconFont.json @@ -0,0 +1 @@ +{"share":"6", "iconsVersion":"1.5", "icomoon":{"selected":[{"idx":"640","unicode":"e001"},{"idx":"639","unicode":"e002"},{"idx":"637","unicode":"e003"},{"idx":"636","unicode":"e004"},{"idx":"634","unicode":"e005"},{"idx":"633","unicode":"e006"},{"idx":"631","unicode":"e007"},{"idx":"630","unicode":"e008"},{"idx":"629","unicode":"e009"},{"idx":"628","unicode":"e00a"},{"idx":"627","unicode":"e00b"},{"idx":"626","unicode":"e00c"},{"idx":"625","unicode":"e00d"},{"idx":"624","unicode":"e00e"},{"idx":"622","unicode":"e00f"},{"idx":"621","unicode":"e010"},{"idx":"620","unicode":"e011"},{"idx":"619","unicode":"e012"},{"idx":"618","unicode":"e013"},{"idx":"617","unicode":"e014"},{"idx":"616","unicode":"e015"},{"idx":"615","unicode":"e016"},{"idx":"614","unicode":"e017"},{"idx":"613","unicode":"e018"},{"idx":"612","unicode":"e019"},{"idx":"611","unicode":"e01a"},{"idx":"610","unicode":"e01b"},{"idx":"609","unicode":"e01c"},{"idx":"608","unicode":"e01d"},{"idx":"607","unicode":"e01e"},{"idx":"606","unicode":"e01f"},{"idx":"605","unicode":"e020"},{"idx":"604","unicode":"e021"},{"idx":"603","unicode":"e022"},{"idx":"602","unicode":"e023"},{"idx":"601","unicode":"e024"},{"idx":"600","unicode":"e025"},{"idx":"599","unicode":"e026"},{"idx":"598","unicode":"e027"},{"idx":"597","unicode":"e028"},{"idx":"596","unicode":"e029"},{"idx":"595","unicode":"e02a"},{"idx":"594","unicode":"e02b"},{"idx":"593","unicode":"e02c"},{"idx":"592","unicode":"e02d"},{"idx":"591","unicode":"e02e"},{"idx":"590","unicode":"e02f"},{"idx":"589","unicode":"e030"},{"idx":"588","unicode":"e031"},{"idx":"587","unicode":"e032"},{"idx":"586","unicode":"e033"},{"idx":"585","unicode":"e034"},{"idx":"584","unicode":"e035"},{"idx":"583","unicode":"e036"},{"idx":"582","unicode":"e037"},{"idx":"581","unicode":"e038"},{"idx":"580","unicode":"e039"},{"idx":"579","unicode":"e03a"},{"idx":"578","unicode":"e03b"},{"idx":"577","unicode":"e03c"},{"idx":"576","unicode":"e03d"},{"idx":"575","unicode":"e03e"},{"idx":"574","unicode":"e03f"},{"idx":"573","unicode":"e040"},{"idx":"572","unicode":"e041"},{"idx":"571","unicode":"e042"},{"idx":"570","unicode":"e043"},{"idx":"569","unicode":"e044"},{"idx":"568","unicode":"e045"},{"idx":"567","unicode":"e046"},{"idx":"566","unicode":"e047"},{"idx":"565","unicode":"e048"},{"idx":"564","unicode":"e049"},{"idx":"563","unicode":"e04a"},{"idx":"562","unicode":"e04b"},{"idx":"561","unicode":"e04c"},{"idx":"560","unicode":"e04d"},{"idx":"559","unicode":"e04e"},{"idx":"558","unicode":"e04f"},{"idx":"557","unicode":"e050"},{"idx":"556","unicode":"e051"},{"idx":"555","unicode":"e052"},{"idx":"554","unicode":"e053"},{"idx":"553","unicode":"e054"},{"idx":"552","unicode":"e055"},{"idx":"551","unicode":"e056"},{"idx":"550","unicode":"e057"},{"idx":"549","unicode":"e058"},{"idx":"546","unicode":"e059"},{"idx":"545","unicode":"e05a"},{"idx":"544","unicode":"e05b"},{"idx":"543","unicode":"e05c"},{"idx":"542","unicode":"e05d"},{"idx":"541","unicode":"e05e"},{"idx":"540","unicode":"e05f"},{"idx":"539","unicode":"e060"},{"idx":"538","unicode":"e061"},{"idx":"537","unicode":"e062"},{"idx":"536","unicode":"e063"},{"idx":"535","unicode":"e064"},{"idx":"534","unicode":"e065"},{"idx":"533","unicode":"e066"},{"idx":"532","unicode":"e067"},{"idx":"531","unicode":"e068"},{"idx":"530","unicode":"e069"},{"idx":"529","unicode":"e06a"},{"idx":"528","unicode":"e06b"},{"idx":"527","unicode":"e06c"},{"idx":"526","unicode":"e06d"},{"idx":"525","unicode":"e06e"},{"idx":"524","unicode":"e06f"},{"idx":"523","unicode":"e070"},{"idx":"522","unicode":"e071"},{"idx":"521","unicode":"e072"},{"idx":"520","unicode":"e073"},{"idx":"519","unicode":"e074"},{"idx":"518","unicode":"e075"},{"idx":"517","unicode":"e076"},{"idx":"516","unicode":"e077"},{"idx":"515","unicode":"e078"},{"idx":"513","unicode":"e079"},{"idx":"512","unicode":"e07a"},{"idx":"511","unicode":"e07b"},{"idx":"510","unicode":"e07c"},{"idx":"509","unicode":"e07d"},{"idx":"508","unicode":"e07e"},{"idx":"507","unicode":"e07f"},{"idx":"506","unicode":"e080"},{"idx":"505","unicode":"e081"},{"idx":"504","unicode":"e082"},{"idx":"500","unicode":"e083"},{"idx":"499","unicode":"e084"},{"idx":"498","unicode":"e085"},{"idx":"497","unicode":"e086"},{"idx":"496","unicode":"e087"},{"idx":"495","unicode":"e088"},{"idx":"494","unicode":"e089"},{"idx":"493","unicode":"e08a"},{"idx":"492","unicode":"e08b"},{"idx":"491","unicode":"e08c"},{"idx":"490","unicode":"e08d"},{"idx":"489","unicode":"e08e"},{"idx":"488","unicode":"e08f"},{"idx":"471","unicode":"e090"},{"idx":"470","unicode":"e091"},{"idx":"469","unicode":"e092"},{"idx":"468","unicode":"e093"},{"idx":"467","unicode":"e094"},{"idx":"466","unicode":"e095"},{"idx":"465","unicode":"e096"},{"idx":"464","unicode":"e097"},{"idx":"459","unicode":"e098"},{"idx":"458","unicode":"e099"},{"idx":"457","unicode":"e09a"},{"idx":"456","unicode":"e09b"},{"idx":"455","unicode":"e09c"},{"idx":"454","unicode":"e09d"},{"idx":"453","unicode":"e09e"},{"idx":"452","unicode":"e09f"},{"idx":"451","unicode":"e0a0"},{"idx":"450","unicode":"e0a1"},{"idx":"449","unicode":"e0a2"},{"idx":"448","unicode":"e0a3"},{"idx":"447","unicode":"e0a4"},{"idx":"446","unicode":"e0a5"},{"idx":"445","unicode":"e0a6"},{"idx":"444","unicode":"e0a7"},{"idx":"443","unicode":"e0a8"},{"idx":"442","unicode":"e0a9"},{"idx":"441","unicode":"e0aa"},{"idx":"440","unicode":"e0ab"},{"idx":"439","unicode":"e0ac"},{"idx":"438","unicode":"e0ad"},{"idx":"437","unicode":"e0ae"},{"idx":"436","unicode":"e0af"},{"idx":"435","unicode":"e0b0"},{"idx":"434","unicode":"e0b1"},{"idx":"433","unicode":"e0b2"},{"idx":"432","unicode":"e0b3"},{"idx":"431","unicode":"e0b4"},{"idx":"430","unicode":"e0b5"},{"idx":"429","unicode":"e0b6"},{"idx":"428","unicode":"e0b7"},{"idx":"427","unicode":"e0b8"},{"idx":"426","unicode":"e0b9"},{"idx":"424","unicode":"e0ba"},{"idx":"422","unicode":"e0bb"},{"idx":"421","unicode":"e0bc"},{"idx":"417","unicode":"e0bd"},{"idx":"416","unicode":"e0be"},{"idx":"413","unicode":"e0bf"},{"idx":"412","unicode":"e0c0"},{"idx":"409","unicode":"e0c1"},{"idx":"405","unicode":"e0c2"},{"idx":"404","unicode":"e0c3"},{"idx":"402","unicode":"e0c4"},{"idx":"399","unicode":"e0c5"},{"idx":"397","unicode":"e0c6"},{"idx":"392","unicode":"e0c7"},{"idx":"390","unicode":"e0c8"},{"idx":"389","unicode":"e0c9"},{"idx":"388","unicode":"e0ca"},{"idx":"387","unicode":"e0cb"},{"idx":"386","unicode":"e0cc"},{"idx":"384","unicode":"e0cd"},{"idx":"383","unicode":"e0ce"},{"idx":"382","unicode":"e0cf"},{"idx":"380","unicode":"e0d0"},{"idx":"379","unicode":"e0d1"},{"idx":"377","unicode":"e0d2"},{"idx":"375","unicode":"e0d3"},{"idx":"373","unicode":"e0d4"},{"idx":"371","unicode":"e0d5"},{"idx":"370","unicode":"e0d6"},{"idx":"369","unicode":"e0d7"},{"idx":"368","unicode":"e0d8"},{"idx":"367","unicode":"e0d9"},{"idx":"366","unicode":"e0da"},{"idx":"364","unicode":"e0db"},{"idx":"363","unicode":"e0dc"},{"idx":"362","unicode":"e0dd"},{"idx":"360","unicode":"e0de"},{"idx":"358","unicode":"e0df"},{"idx":"357","unicode":"e0e0"},{"idx":"355","unicode":"e0e1"},{"idx":"352","unicode":"e0e2"},{"idx":"351","unicode":"e0e3"},{"idx":"349","unicode":"e0e4"},{"idx":"348","unicode":"e0e5"},{"idx":"345","unicode":"e0e6"},{"idx":"344","unicode":"e0e7"},{"idx":"343","unicode":"e0e8"},{"idx":"342","unicode":"e0e9"},{"idx":"341","unicode":"e0ea"},{"idx":"340","unicode":"e0eb"},{"idx":"339","unicode":"e0ec"},{"idx":"338","unicode":"e0ed"},{"idx":"337","unicode":"e0ee"},{"idx":"336","unicode":"e0ef"},{"idx":"335","unicode":"e0f0"},{"idx":"334","unicode":"e0f1"},{"idx":"333","unicode":"e0f2"},{"idx":"332","unicode":"e0f3"},{"idx":"331","unicode":"e0f4"},{"idx":"330","unicode":"e0f5"},{"idx":"329","unicode":"e0f6"},{"idx":"328","unicode":"e0f7"},{"idx":"327","unicode":"e0f8"},{"idx":"46","unicode":"e0f9"},{"idx":"45","unicode":"e0fa"},{"idx":"44","unicode":"e0fb"},{"idx":"43","unicode":"e0fc"},{"idx":"42","unicode":"e0fd"},{"idx":"41","unicode":"e0fe"},{"idx":"40","unicode":"e0ff"},{"idx":"39","unicode":"e100"},{"idx":"38","unicode":"e101"},{"idx":"37","unicode":"e102"},{"idx":"36","unicode":"e103"},{"idx":"35","unicode":"e104"},{"idx":"34","unicode":"e105"},{"idx":"33","unicode":"e106"},{"idx":"32","unicode":"e107"},{"idx":"31","unicode":"e108"},{"idx":"30","unicode":"e109"},{"idx":"29","unicode":"e10a"},{"idx":"28","unicode":"e10b"},{"idx":"27","unicode":"e10c"},{"idx":"26","unicode":"e10d"},{"idx":"25","unicode":"e10e"},{"idx":"24","unicode":"e10f"},{"idx":"23","unicode":"e110"},{"idx":"22","unicode":"e111"},{"idx":"21","unicode":"e112"},{"idx":"20","unicode":"e113"},{"idx":"19","unicode":"e114"},{"idx":"18","unicode":"e115"},{"idx":"17","unicode":"e116"},{"idx":"16","unicode":"e117"},{"idx":"15","unicode":"e118"},{"idx":"14","unicode":"e119"},{"idx":"13","unicode":"e11a"},{"idx":"12","unicode":"e11b"},{"idx":"11","unicode":"e11c"},{"idx":"10","unicode":"e11d"},{"idx":"9","unicode":"e11e"},{"idx":"8","unicode":"e11f"},{"idx":"7","unicode":"e120"},{"idx":"6","unicode":"e121"},{"idx":"5","unicode":"e122"},{"idx":"4","unicode":"e123"},{"idx":"3","unicode":"e124"},{"idx":"2","unicode":"e125"},{"idx":"1","unicode":"e126"},{"idx":"0","unicode":"e127"},{"idx":"394","unicode":"e128"},{"idx":"92","unicode":"e129"},{"idx":"118","unicode":"e12a"},{"idx":"146","unicode":"e12b"},{"idx":"113","unicode":"e12c"},{"idx":"48","unicode":"e12d"},{"idx":"76","unicode":"e12e"},{"idx":"75","unicode":"e12f"},{"idx":"85","unicode":"e130"},{"idx":"99","unicode":"e131"},{"idx":"95","unicode":"e132"},{"idx":"63","unicode":"e133"},{"idx":"110","unicode":"e134"},{"idx":"117","unicode":"e135"},{"idx":"112","unicode":"e136"},{"idx":"91","unicode":"e137"},{"idx":"87","unicode":"e138"},{"idx":"104","unicode":"e139"},{"idx":"103","unicode":"e13a"},{"idx":"137","unicode":"e13b"},{"idx":"136","unicode":"e13c"},{"idx":"62","unicode":"e13d"},{"idx":"59","unicode":"e13e"},{"idx":"86","unicode":"e13f"},{"idx":"52","unicode":"e140"},{"idx":"115","unicode":"e141"},{"idx":"74","unicode":"e142"},{"idx":"73","unicode":"e143"},{"idx":"152","unicode":"e144"},{"idx":"154","unicode":"e145"},{"idx":"111","unicode":"e146"},{"idx":"65","unicode":"e147"},{"idx":"58","unicode":"e148"},{"idx":"108","unicode":"e149"},{"idx":"72","unicode":"e14a"},{"idx":"77","unicode":"e14b"},{"idx":"68","unicode":"e14c"},{"idx":"283","unicode":"e14d"},{"idx":"282","unicode":"e14e"},{"idx":"278","unicode":"e14f"},{"idx":"277","unicode":"e150"},{"idx":"260","unicode":"e151"},{"idx":"257","unicode":"e152"},{"idx":"241","unicode":"e153"},{"idx":"238","unicode":"e154"},{"idx":"237","unicode":"e155"},{"idx":"236","unicode":"e156"},{"idx":"235","unicode":"e157"},{"idx":"234","unicode":"e158"},{"idx":"233","unicode":"e159"},{"idx":"232","unicode":"e15a"},{"idx":"231","unicode":"e15b"},{"idx":"230","unicode":"e15c"},{"idx":"221","unicode":"e160"},{"idx":"210","unicode":"e161"},{"idx":"209","unicode":"e162"},{"idx":"208","unicode":"e163"},{"idx":"207","unicode":"e164"},{"idx":"60","unicode":"e165"},{"idx":"166","unicode":"e166"},{"idx":"214","unicode":"e167"},{"idx":"185","unicode":"e168"},{"idx":"216","unicode":"e169"},{"idx":"211","unicode":"e16a"},{"idx":"212","unicode":"e16b"},{"idx":"226","unicode":"e16c"},{"idx":"228","unicode":"e16d"},{"idx":"192","unicode":"e16e"},{"idx":"191","unicode":"e16f"},{"idx":"66","unicode":"e170"},{"idx":"668","unicode":"e000"},{"idx":"973","unicode":"e171"},{"idx":"642","unicode":"e172"},{"idx":"271","unicode":"e173"},{"idx":"1156","unicode":"e174"},{"idx":"1128","unicode":"e175"},{"idx":"1127","unicode":"e176"},{"idx":"1126","unicode":"e177"},{"idx":"1360","unicode":"e186"},{"idx":"1361","unicode":"e187"},{"idx":"1359","unicode":"e188"},{"idx":"1358","unicode":"e189"},{"idx":"1357","unicode":"e18a"},{"idx":"1356","unicode":"e18b"},{"idx":"1354","unicode":"e18c"},{"idx":"1355","unicode":"e18d"},{"idx":"1352","unicode":"e18e"},{"idx":"1349","unicode":"e18f"},{"idx":"1274","unicode":"e190"},{"idx":"1273","unicode":"e191"},{"idx":"1272","unicode":"e192"},{"idx":"1271","unicode":"e193"},{"idx":"1245","unicode":"e194"},{"idx":"1246","unicode":"e195"},{"idx":"1247","unicode":"e196"},{"idx":"1145","unicode":"e197"},{"idx":"1089","unicode":"e198"},{"idx":"1081","unicode":"e199"},{"idx":"1060","unicode":"e19a"},{"idx":"1062","unicode":"e19b"},{"idx":"1055","unicode":"e19c"},{"idx":"1086","unicode":"e19d"},{"idx":"1085","unicode":"e19e"},{"idx":"1160","unicode":"e178"},{"idx":"1218","unicode":"e179"},{"idx":"1217","unicode":"e17a"},{"idx":"1216","unicode":"e17b"},{"idx":"1215","unicode":"e17c"},{"idx":"1178","unicode":"e17d"},{"idx":"1278","unicode":"e17e"},{"idx":"1277","unicode":"e17f"},{"idx":"1302","unicode":"e180"},{"idx":"1304","unicode":"e181"},{"idx":"1193","unicode":"e182"},{"idx":"1207","unicode":"e183"},{"idx":"1205","unicode":"e184"},{"idx":"1143","unicode":"e185"},{"idx":"1168","unicode":"e19f"},{"idx":"1167","unicode":"e1a0"},{"idx":"1166","unicode":"e1a1"},{"idx":"222","unicode":"e15f"},{"idx":"224","unicode":"e15d"},{"idx":"223","unicode":"e15e"},{"idx":"1057","unicode":"e1a2"},{"idx":"1056","unicode":"e1a3"},{"idx":"871","unicode":"e1a4"},{"idx":"870","unicode":"e1a5"},{"idx":"869","unicode":"e1a6"},{"idx":"868","unicode":"e1a7"},{"idx":"867","unicode":"e1a8"},{"idx":"866","unicode":"e1a9"},{"idx":"865","unicode":"e1aa"},{"idx":"864","unicode":"e1ab"},{"idx":"841","unicode":"e1ac"},{"idx":"840","unicode":"e1ad"},{"idx":"839","unicode":"e1ae"},{"idx":"838","unicode":"e1af"},{"idx":"837","unicode":"e1b0"},{"idx":"836","unicode":"e1b1"},{"idx":"835","unicode":"e1b2"},{"idx":"834","unicode":"e1b3"},{"idx":"817","unicode":"e1b4"},{"idx":"816","unicode":"e1b5"},{"idx":"815","unicode":"e1b6"},{"idx":"814","unicode":"e1b7"},{"idx":"813","unicode":"e1b8"},{"idx":"812","unicode":"e1b9"},{"idx":"811","unicode":"e1ba"},{"idx":"810","unicode":"e1bb"},{"idx":"809","unicode":"e1bc"},{"idx":"808","unicode":"e1bd"},{"idx":"807","unicode":"e1be"},{"idx":"906","unicode":"e1bf"},{"idx":"1075","unicode":"e1c0"},{"idx":"1154","unicode":"e1c1"},{"idx":"1153","unicode":"e1c2"}],"customIcons":[{"metadata":{"id":"icomoon","name":"IcoMoon - Free","link":"http://keyamoon.com/icomoon/","author":"Keyamoon","authorLink":"http://keyamoon.com/","license":"CC BY-SA 3.0","licenseLink":"http://creativecommons.org/licenses/by-sa/3.0/","defaultunicode":false},"svgs":["","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","",""]},{"metadata":{"id":"meteocons","name":"Meteocons","link":"http://www.alessioatzeni.com/meteocons/","author":"Alessio Atzeni","authorLink":"http://www.alessioatzeni.com/","license":"Arbitrary","licenseLink":"http://www.alessioatzeni.com/meteocons/#about","defaultunicode":false},"svgs":["","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","",""]},{"metadata":{"id":"broccolidry","name":"Broccolidry","link":"http://dribbble.com/shots/587469-Free-16px-Broccolidryiconsaniconsetitisfullof-icons","author":"Visual Idiot","authorLink":"http://idiot.vc/","license":"Aribitrary","licenseLink":"http://licence.visualidiot.com/","defaultunicode":false},"svgs":["","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","",""]},{"metadata":{"id":"iconic","name":"Iconic","link":"http://somerandomdude.com/work/iconic/","author":"P.J. Onori","authorLink":"http://somerandomdude.com","license":"CC BY-SA 3.0","licenseLink":"http://creativecommons.org/licenses/by-sa/3.0/us/","defaultunicode":false},"svgs":["","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","",""]},{"metadata":{"id":"silkcons","name":"Silkcons","link":"http://dribbble.com/shots/632219-Silkcons-You-can-t-do-with-just-one-icon-set","grid":"16","author":"Vaibhav Bhat","authorLink":"https://twitter.com/vabhat","license":"CC0","licenseLink":"http://creativecommons.org/publicdomain/zero/1.0/","defaultunicode":false},"svgs":["","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","",""]},{"metadata":{"id":"entypo","name":"Entypo","link":"http://www.entypo.com/","grid":"20","author":"Daniel Bruce","authorLink":"http://danielbruce.se/","license":"CC BY-SA 3.0","licenseLink":"http://creativecommons.org/licenses/by-sa/3.0/","defaultunicode":false},"svgs":["","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","",""]},{"metadata":{"id":"brankic1979","name":"Brankic1979","link":"http://brankic1979.com/icons/","grid":"32","author":"Brankic1979","authorLink":"http://brankic1979.com","license":"Custom","licenseLink":"http://brankic1979.com/icons/","defaultunicode":false},"svgs":["","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","",""]}],"IDs":[327,328,329,330,331,332,333,334,335,336,337,338,339,340,341,342,343,344,345,346,347,348,349,350,351,352,353,354,355,356,357,358,359,360,361,362,363,364,365,366,367,368,369,370,371,372,373,374,375,376,377,378,379,380,381,382,383,384,385,386,387,388,389,390,391,392,393,394,395,396,397,398,399,400,401,402,403,404,405,406,407,408,409,410,411,412,413,414,415,416,417,418,419,420,421,422,423,424,425,426,427,428,429,430,431,432,433,434,435,436,437,438,439,440,441,442,443,444,445,446,447,448,449,450,451,452,453,454,455,456,457,458,459,460,461,462,463,464,465,466,467,468,469,470,471,472,473,474,475,476,477,478,479,480,481,482,483,484,485,486,487,488,489,490,491,492,493,494,495,496,497,498,499,500,501,502,503,504,505,506,507,508,509,510,511,512,513,514,515,516,517,518,519,520,521,522,523,524,525,526,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,542,543,544,545,546,547,548,549,550,551,552,553,554,555,556,557,558,559,560,561,562,563,564,565,566,567,568,569,570,571,572,573,574,575,576,577,578,579,580,581,582,583,584,585,586,587,588,589,590,591,592,593,594,595,596,597,598,599,600,601,602,603,604,605,606,607,608,609,610,611,612,613,614,615,616,617,618,619,620,621,622,623,624,625,626,627,628,629,630,631,632,633,634,635,636,637,638,639,640,641,642,0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,65,66,67,68,69,70,71,72,73,74,75,76,77,78,79,80,81,82,83,84,85,86,87,88,89,90,91,92,93,94,95,96,97,98,99,100,101,102,103,104,105,106,107,108,109,110,111,112,113,114,115,116,117,118,119,120,121,122,123,124,125,126,127,128,129,130,131,132,133,134,135,136,137,138,139,140,141,142,143,144,145,146,147,148,149,150,151,152,153,154,155,156,157,158,159,160,161,162,163,164,165,166,167,168,169,170,171,172,173,174,175,176,177,178,179,180,181,182,183,184,185,186,187,188,189,190,191,192,193,194,195,196,197,198,199,200,201,202,203,204,205,206,207,208,209,210,211,212,213,214,215,216,217,218,219,220,221,222,223,224,225,226,227,228,229,230,231,232,233,234,235,236,237,238,239,240,241,242,243,244,245,246,247,248,249,250,251,252,253,254,255,256,257,258,259,260,261,262,263,264,265,266,267,268,269,270,271,272,273,274,275,276,277,278,279,280,281,282,283,284,285,286,287,288,289,290,291,292,293,294,295,296,297,298,299,300,301,302,303,304,305,306,307,308,309,310,311,312,313,314,315,316,317,318,319,320,321,322,323,324,325,326,643,644,645,646,647,648,649,650,651,652,653,654,655,656,657,658,659,660,661,662,663,664,665,666,667,668,669,670,671,672,673,674,675,676,677,678,679,680,681,682,683,684,685,686,687,688,689,690,691,692,693,694,695,696,697,698,699,700,701,702,703,704,705,706,707,708,709,710,711,712,713,714,715,716,717,718,719,720,721,722,723,724,725,726,727,728,729,730,731,732,733,734,735,736,737,738,739,740,741,742,743,744,745,746,747,748,749,750,751,752,753,754,755,756,757,758,759,760,761,762,763,764,765,766,767,768,769,770,771,772,773,774,775,776,777,778,779,780,781,782,783,784,785,786,787,788,789,790,791,792,793,794,795,796,797,798,799,800,801,802,803,804,805,806,807,808,809,810,811,812,813,814,815,816,817,818,819,820,821,822,823,824,825,826,827,828,829,830,831,832,833,834,835,836,837,838,839,840,841,842,843,844,845,846,847,848,849,850,851,852,853,854,855,856,857,858,859,860,861,862,863,864,865,866,867,868,869,870,871,872,873,874,875,876,877,878,879,880,881,882,883,884,885,886,887,888,889,890,891,892,893,894,895,896,897,898,899,900,901,902,903,904,905,906,907,908,909,910,911,912,913,914,915,916,917,918,919,920,921,922,923,924,925,926,927,928,929,930,931,932,933,934,935,936,937,938,939,940,941,942,943,944,945,946,947,948,949,950,951,952,953,954,955,956,957,958,959,960,961,962,963,964,965,966,967,968,969,970,971,972,973,974,975,976,977,978,979,980,981,982,983,984,985,986,987,988,989,990,991,992,993,994,995,996,997,998,999,1000,1001,1002,1003,1004,1005,1006,1007,1008,1009,1010,1011,1012,1013,1014,1015,1016,1017,1018,1019,1020,1021,1022,1023,1024,1025,1026,1027,1028,1029,1030,1031,1032,1033,1034,1035,1036,1037,1038,1039,1040,1041,1042,1043,1044,1045,1046,1047,1048,1049,1050,1051,1052,1053,1054,1055,1056,1057,1058,1059,1060,1061,1062,1063,1064,1065,1066,1067,1068,1069,1070,1071,1072,1073,1074,1075,1076,1077,1078,1079,1080,1081,1082,1083,1084,1085,1086,1087,1088,1089,1090,1091,1092,1093,1094,1095,1096,1097,1098,1099,1100,1101,1102,1103,1104,1105,1106,1107,1108,1109,1110,1111,1112,1113,1114,1115,1116,1117,1118,1119,1120,1121,1122,1123,1124,1125,1126,1127,1128,1129,1130,1131,1132,1133,1134,1135,1136,1137,1138,1139,1140,1141,1142,1143,1144,1145,1146,1147,1148,1149,1150,1151,1152,1153,1154,1155,1156,1157,1158,1159,1160,1161,1162,1163,1164,1165,1166,1167,1168,1169,1170,1171,1172,1173,1174,1175,1176,1177,1178,1179,1180,1181,1182,1183,1184,1185,1186,1187,1188,1189,1190,1191,1192,1193,1194,1195,1196,1197,1198,1199,1200,1201,1202,1203,1204,1205,1206,1207,1208,1209,1210,1211,1212,1213,1214,1215,1216,1217,1218,1219,1220,1221,1222,1223,1224,1225,1226,1227,1228,1229,1230,1231,1232,1233,1234,1235,1236,1237,1238,1239,1240,1241,1242,1243,1244,1245,1246,1247,1248,1249,1250,1251,1252,1253,1254,1255,1256,1257,1258,1259,1260,1261,1262,1263,1264,1265,1266,1267,1268,1269,1270,1271,1272,1273,1274,1275,1276,1277,1278,1279,1280,1281,1282,1283,1284,1285,1286,1287,1288,1289,1290,1291,1292,1293,1294,1295,1296,1297,1298,1299,1300,1301,1302,1303,1304,1305,1306,1307,1308,1309,1310,1311,1312,1313,1314,1315,1316,1317,1318,1319,1320,1321,1322,1323,1324,1325,1326,1327,1328,1329,1330,1331,1332,1333,1334,1335,1336,1337,1338,1339,1340,1341,1342,1343,1344,1345,1346,1347,1348,1349,1350,1351,1352,1353,1354,1355,1356,1357,1358,1359,1360,1361,1362,1363,1364,1365,1366,1367,1368,1369,1370,1371,1372,1373,1374,1375,1376,1377,1378,1379,1380,1381,1382,1383,1384,1385,1386,1387,1388,1389,1390,1391,1392],"user":{"email":"keyamoon@gmail.com","newsletter":true,"secret":"29769e48fe4bab8807b024a41d770900e18015c1af12cf4ad63d2d19009e6a90aead0d2885d7a32787d7336b442a44662cdfddfa2a2b0c74445becb1f50a8998","uid":4}},"inputCache":"{\"baseline\":\"6.25\",\"emSize\":\"1024\",\"prev_size\":\"32\",\"hdr-imported\":\"checked\",\"iconAlignment\":\"0\",\"showGrid\":\"checked\",\"fi_name\":\"iconFont\",\"fi_id\":\"\",\"fi_link\":\"\",\"fi_author\":\"\",\"fi_authorLink\":\"\",\"fi_license\":\"\",\"fi_licenseLink\":\"\",\"include_metadata\":false,\"base64\":false,\"img-height\":\"32\",\"img-color\":\"000000\",\"include_png\":\"checked\",\"fi_class\":\"icon-\",\"showCloudLinks\":false,\"hdr-iconic\":\"checked\",\"hdr-meteocons\":\"checked\",\"hdr-broccolidry\":\"checked\",\"hdr-icomoon\":\"checked\",\"sprites-cols\":\"16\",\"include_sprites\":false,\"ligatures\":false,\"designGrid\":\"\",\"whitespace\":\"50\",\"glyph_widths\":\"100\",\"manualMetrics\":false,\"hdr-silkcons\":true,\"hdr-loops105\":true,\"hdr-entypo\":true,\"hdr-brankic1979\":true}"} \ No newline at end of file diff --git a/widgets/metro/fonts/iconFont.svg b/widgets/metro/fonts/iconFont.svg new file mode 100644 index 0000000..51b5e95 --- /dev/null +++ b/widgets/metro/fonts/iconFont.svg @@ -0,0 +1,2569 @@ + + + + +This is a custom SVG font generated by IcoMoon. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/widgets/metro/fonts/iconFont.ttf b/widgets/metro/fonts/iconFont.ttf new file mode 100644 index 0000000..c8e479f Binary files /dev/null and b/widgets/metro/fonts/iconFont.ttf differ diff --git a/widgets/metro/fonts/iconFont.woff b/widgets/metro/fonts/iconFont.woff new file mode 100644 index 0000000..f492b8e Binary files /dev/null and b/widgets/metro/fonts/iconFont.woff differ diff --git a/widgets/metro/fonts/metroSysIcons.svg b/widgets/metro/fonts/metroSysIcons.svg new file mode 100644 index 0000000..26d720b --- /dev/null +++ b/widgets/metro/fonts/metroSysIcons.svg @@ -0,0 +1,3 @@ + + + diff --git a/widgets/metro/fonts/metroSysIcons.ttf b/widgets/metro/fonts/metroSysIcons.ttf new file mode 100644 index 0000000..5f015e9 Binary files /dev/null and b/widgets/metro/fonts/metroSysIcons.ttf differ diff --git a/widgets/metro/fonts/metroSysIcons.woff b/widgets/metro/fonts/metroSysIcons.woff new file mode 100644 index 0000000..51e8b8b Binary files /dev/null and b/widgets/metro/fonts/metroSysIcons.woff differ diff --git a/widgets/metro/img/Prev_Shutter.png b/widgets/metro/img/Prev_Shutter.png new file mode 100644 index 0000000..28261a2 Binary files /dev/null and b/widgets/metro/img/Prev_Shutter.png differ diff --git a/widgets/metro/img/authors.txt b/widgets/metro/img/authors.txt new file mode 100644 index 0000000..4b502b6 --- /dev/null +++ b/widgets/metro/img/authors.txt @@ -0,0 +1,7 @@ +KNX-User-Forum +http://knx-user-forum.de + +mfd.gfx@gmail.com + +User: +mfd diff --git a/widgets/metro/img/fts_shutter_10.png b/widgets/metro/img/fts_shutter_10.png new file mode 100644 index 0000000..64c2886 Binary files /dev/null and b/widgets/metro/img/fts_shutter_10.png differ diff --git a/widgets/metro/img/fts_shutter_100.png b/widgets/metro/img/fts_shutter_100.png new file mode 100644 index 0000000..a3e1cac Binary files /dev/null and b/widgets/metro/img/fts_shutter_100.png differ diff --git a/widgets/metro/img/fts_shutter_20.png b/widgets/metro/img/fts_shutter_20.png new file mode 100644 index 0000000..a7c391c Binary files /dev/null and b/widgets/metro/img/fts_shutter_20.png differ diff --git a/widgets/metro/img/fts_shutter_30.png b/widgets/metro/img/fts_shutter_30.png new file mode 100644 index 0000000..64dda84 Binary files /dev/null and b/widgets/metro/img/fts_shutter_30.png differ diff --git a/widgets/metro/img/fts_shutter_40.png b/widgets/metro/img/fts_shutter_40.png new file mode 100644 index 0000000..0804333 Binary files /dev/null and b/widgets/metro/img/fts_shutter_40.png differ diff --git a/widgets/metro/img/fts_shutter_50.png b/widgets/metro/img/fts_shutter_50.png new file mode 100644 index 0000000..c1c1286 Binary files /dev/null and b/widgets/metro/img/fts_shutter_50.png differ diff --git a/widgets/metro/img/fts_shutter_60.png b/widgets/metro/img/fts_shutter_60.png new file mode 100644 index 0000000..9939fe1 Binary files /dev/null and b/widgets/metro/img/fts_shutter_60.png differ diff --git a/widgets/metro/img/fts_shutter_70.png b/widgets/metro/img/fts_shutter_70.png new file mode 100644 index 0000000..f1b8a78 Binary files /dev/null and b/widgets/metro/img/fts_shutter_70.png differ diff --git a/widgets/metro/img/fts_shutter_80.png b/widgets/metro/img/fts_shutter_80.png new file mode 100644 index 0000000..2a1a37c Binary files /dev/null and b/widgets/metro/img/fts_shutter_80.png differ diff --git a/widgets/metro/img/fts_shutter_90.png b/widgets/metro/img/fts_shutter_90.png new file mode 100644 index 0000000..78c5ae3 Binary files /dev/null and b/widgets/metro/img/fts_shutter_90.png differ diff --git a/widgets/metro/img/fts_window_2w.png b/widgets/metro/img/fts_window_2w.png new file mode 100644 index 0000000..aa48435 Binary files /dev/null and b/widgets/metro/img/fts_window_2w.png differ diff --git a/widgets/metro/img/license.txt b/widgets/metro/img/license.txt new file mode 100644 index 0000000..c03441e --- /dev/null +++ b/widgets/metro/img/license.txt @@ -0,0 +1,2 @@ +http://creativecommons.org/licenses/by-sa/3.0/de/ +Creative Commons Namensnennung-Weitergabe unter gleichen Bedingungen 3.0 Deutschland Lizenz \ No newline at end of file diff --git a/widgets/metro/img/light_light_dim.png b/widgets/metro/img/light_light_dim.png new file mode 100644 index 0000000..8ec940c Binary files /dev/null and b/widgets/metro/img/light_light_dim.png differ diff --git a/widgets/metro/img/light_light_dim_00.png b/widgets/metro/img/light_light_dim_00.png new file mode 100644 index 0000000..5df5538 Binary files /dev/null and b/widgets/metro/img/light_light_dim_00.png differ diff --git a/widgets/metro/img/light_light_dim_10.png b/widgets/metro/img/light_light_dim_10.png new file mode 100644 index 0000000..6f64274 Binary files /dev/null and b/widgets/metro/img/light_light_dim_10.png differ diff --git a/widgets/metro/img/light_light_dim_100.png b/widgets/metro/img/light_light_dim_100.png new file mode 100644 index 0000000..76b33c7 Binary files /dev/null and b/widgets/metro/img/light_light_dim_100.png differ diff --git a/widgets/metro/img/light_light_dim_20.png b/widgets/metro/img/light_light_dim_20.png new file mode 100644 index 0000000..c846f67 Binary files /dev/null and b/widgets/metro/img/light_light_dim_20.png differ diff --git a/widgets/metro/img/light_light_dim_30.png b/widgets/metro/img/light_light_dim_30.png new file mode 100644 index 0000000..a40b202 Binary files /dev/null and b/widgets/metro/img/light_light_dim_30.png differ diff --git a/widgets/metro/img/light_light_dim_40.png b/widgets/metro/img/light_light_dim_40.png new file mode 100644 index 0000000..e09969d Binary files /dev/null and b/widgets/metro/img/light_light_dim_40.png differ diff --git a/widgets/metro/img/light_light_dim_50.png b/widgets/metro/img/light_light_dim_50.png new file mode 100644 index 0000000..184ee64 Binary files /dev/null and b/widgets/metro/img/light_light_dim_50.png differ diff --git a/widgets/metro/img/light_light_dim_60.png b/widgets/metro/img/light_light_dim_60.png new file mode 100644 index 0000000..a3b10ce Binary files /dev/null and b/widgets/metro/img/light_light_dim_60.png differ diff --git a/widgets/metro/img/light_light_dim_70.png b/widgets/metro/img/light_light_dim_70.png new file mode 100644 index 0000000..7a4fbc0 Binary files /dev/null and b/widgets/metro/img/light_light_dim_70.png differ diff --git a/widgets/metro/img/light_light_dim_80.png b/widgets/metro/img/light_light_dim_80.png new file mode 100644 index 0000000..30877f4 Binary files /dev/null and b/widgets/metro/img/light_light_dim_80.png differ diff --git a/widgets/metro/img/light_light_dim_90.png b/widgets/metro/img/light_light_dim_90.png new file mode 100644 index 0000000..ad7c0b5 Binary files /dev/null and b/widgets/metro/img/light_light_dim_90.png differ diff --git a/widgets/metro/img/sani_heating_temp.png b/widgets/metro/img/sani_heating_temp.png new file mode 100644 index 0000000..883c891 Binary files /dev/null and b/widgets/metro/img/sani_heating_temp.png differ diff --git a/widgets/metro/js/metro.js b/widgets/metro/js/metro.js new file mode 100644 index 0000000..c7c6ef5 --- /dev/null +++ b/widgets/metro/js/metro.js @@ -0,0 +1,988 @@ +var hasTouch = 'ontouchend' in window, eventTimer; +var moveDirection = 'undefined', startX, startY, deltaX, deltaY, mouseDown = false; + +function addTouchEvents(element){ + if (hasTouch) { + element.addEventListener("touchstart", touch2Mouse, true); + element.addEventListener("touchmove", touch2Mouse, true); + element.addEventListener("touchend", touch2Mouse, true); + } +} + +function touch2Mouse(e) +{ + var theTouch = e.changedTouches[0]; + var mouseEv; + + switch(e.type) + { + case "touchstart": mouseEv="mousedown"; break; + case "touchend": mouseEv="mouseup"; break; + case "touchmove": mouseEv="mousemove"; break; + default: return; + } + + + if (mouseEv == "mousedown") { + eventTimer = (new Date()).getTime(); + startX = theTouch.clientX; + startY = theTouch.clientY; + mouseDown = true; + } + + if (mouseEv == "mouseup") { + if ((new Date()).getTime() - eventTimer <= 500) { + mouseEv = "click"; + } else if ((new Date()).getTime() - eventTimer > 1000) { + mouseEv = "longclick"; + } + eventTimer = 0; + mouseDown = false; + } + + if (mouseEv == "mousemove") { + if (mouseDown) { + deltaX = theTouch.clientX - startX; + deltaY = theTouch.clientY - startY; + moveDirection = deltaX > deltaY ? 'horizontal' : 'vertical'; + } + } + + var mouseEvent = document.createEvent("MouseEvent"); + mouseEvent.initMouseEvent(mouseEv, true, true, window, 1, theTouch.screenX, theTouch.screenY, theTouch.clientX, theTouch.clientY, false, false, false, false, 0, null); + theTouch.target.dispatchEvent(mouseEvent); + + e.preventDefault(); +} + + +(function( $ ) { + $.widget("metro.tileTransform", { + + version: "1.1.1", + + options: { + }, + + _create: function(){ + var element = this.element; + var dim = {w: element.width(), h: element.height()}; + + element.on('mousedown.metroTransform', function(e){ + var X = e.pageX - $(this).offset().left, Y = e.pageY - $(this).offset().top; + var transform = 'top'; + + if (X < dim.w * 1/3 && (Y < dim.h * 1/2 || Y > dim.h * 1/2 )) { + transform = 'left'; + } else if (X > dim.w * 2/3 && (Y < dim.h * 1/2 || Y > dim.h * 1/2 )) { + transform = 'right' + } else if (X > dim.w*1/3 && X dim.h/2) { + transform = 'bottom'; + } + + + + setTimeout(function ($this) { + $this.addClass("tile-transform-"+transform); + }, 10, $(this)); + + }); + + element.on('mouseup.metroTransform', function(){ + + + setTimeout(function ($this) { + $this.removeClass("tile-transform-left") + .removeClass("tile-transform-right") + .removeClass("tile-transform-top") + .removeClass("tile-transform-bottom"); + }, 10, $(this)); + + + + }); + element.on('mouseleave.metroTransform', function(){ + $(this) + .removeClass("tile-transform-left") + .removeClass("tile-transform-right") + .removeClass("tile-transform-top") + .removeClass("tile-transform-bottom"); + }); + }, + + _destroy: function(){ + + }, + + _setOption: function(key, value){ + this._super('_setOption', key, value); + } + }) + + $.widget("metro.inputControl", { + + version: "1.0.0", + + options: { + }, + + _create: function(){ + var that = this, + control = this.element; + + if (control.hasClass('text')) { + this.initTextInput(control, that); + } else if (control.hasClass('password')) { + this.initPasswordInput(control, that); + } else if (control.hasClass('checkbox') || control.hasClass('radio') || control.hasClass('switch')) { + this.initCheckboxInput(control, that); + } else if (control.hasClass('file')) { + this.initFileInput(control, that); + } + }, + + initCheckboxInput: function(el, that) { + }, + + initFileInput: function(el, that){ + var button, input, wrapper; + wrapper = $(""); + button = el.children('.btn-file'); + input = el.children('input[type="file"]'); + input.css('z-index', 0); + wrapper.insertAfter(input); + input.attr('tabindex', '-1'); + //button.attr('tabindex', '-1'); + button.attr('type', 'button'); + + input.on('change', function(){ + var val = $(this).val(); + if (val != '') { + wrapper.val(val); + } + }); + + button.on('click', function(){ + input.trigger('click'); + }); + }, + + initTextInput: function(el, that){ + var button = el.children('.btn-clear'), + input = el.children('input[type=text]'); + + //console.log(button.length); + //button = el.children('.btn-clear'); + + if (button.length == 0) return; + + button.attr('tabindex', '-1'); + button.attr('type', 'button'); + + button.on('click', function(){ + input = el.children('input'); + if (input.prop('readonly')) return; + input.val(''); + input.focus(); + that._trigger("onClear", null, el); + }); + + if (!input.attr("disabled")) input.on('click', function(){$(this).focus();}); + }, + + initPasswordInput: function(el, that){ + var button = el.children('.btn-reveal'), + input = el.children('input[type=password]'); + var wrapper; + + if (button.length == 0) return; + + button.attr('tabindex', '-1'); + button.attr('type', 'button'); + + button.on('mousedown', function(e){ + input.attr('type', 'text'); + //e.preventDefault(); + +// wrapper = el.find(".__wrapper__").length == 0 ? $('') : el.find(".__wrapper__"); +// +// input.hide(); +// wrapper.appendTo(that.element); +// wrapper.val(input.val()); +// +// that._trigger("onPasswordShow", null, that.element); + }); + + button.on('mouseup, mouseleave, blur', function(e){ + input.attr('type', 'password').focus(); + //e.preventDefault(); + + +// input.show().focus(); +// wrapper.remove(); +// +// that._trigger("onPasswordHide", null, that.element); + }); + + if (!input.attr("disabled")) input.on('click', function(){$(this).focus();}); + }, + + _destroy: function(){ + + }, + + _setOption: function(key, value){ + this._super('_setOption', key, value); + } + }); + + $.widget("metro.inputTransform", { + + version: "1.0.0", + + options: { + transformType: "text" + }, + + _create: function(){ + var that = this, + element = this.element, + inputType; + + + var checkTransform = element.parent().hasClass("input-control"); + if (checkTransform) return; + + inputType = element.get(0).tagName.toLowerCase(); + + if (inputType == "textarea") { + this.options.transformType = "textarea"; + } else if (inputType == "select") { + this.options.transformType = "select"; + } else { + if (element.data('transformType') != undefined) { + this.options.transformType = element.data('transformType'); + } else { + this.options.transformType = element.attr("type"); + } + } + + var control = undefined; + + switch (this.options.transformType) { + case "password": control = this._createInputPassword(); break; + case "file": control = this._createInputFile(); break; + case "checkbox": control = this._createInputCheckbox(); break; + case "radio": control = this._createInputRadio(); break; + case "switch": control = this._createInputSwitch(); break; + case "select": control = this._createInputSelect(); break; + case "textarea": control = this._createInputTextarea(); break; + case "search": control = this._createInputSearch(); break; + case "email": control = this._createInputEmail(); break; + case "tel": control = this._createInputTel(); break; + case "number": control = this._createInputNum(); break; + default: control = this._createInputText(); + } + + control.inputControl(); + }, + + _createInputTextarea: function(){ + var element = this.element; + + var wrapper = $("
").addClass("input-control").addClass("textarea"); + var clone = element.clone(true); + var parent = element.parent(); + + clone.appendTo(wrapper); + wrapper.insertBefore(element); + + element.remove(); + + return wrapper; + }, + + _createInputSelect: function(){ + var element = this.element; + + var wrapper = $("
").addClass("input-control").addClass("select"); + var clone = element.clone(true); + var parent = element.parent(); + + clone.val(element.val()).appendTo(wrapper); + wrapper.insertBefore(element); + + element.remove(); + + return wrapper; + }, + + _createInputSwitch: function(){ + var element = this.element; + + var wrapper = $("
").addClass("input-control").addClass("switch"); + var label = $("