diff --git a/Gruntfile.js b/Gruntfile.js index 6a8a4002f..4d289a828 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -150,6 +150,7 @@ module.exports = function(grunt) { "packages/node_modules/@node-red/editor-client/src/js/ui/diff.js", "packages/node_modules/@node-red/editor-client/src/js/ui/keyboard.js", "packages/node_modules/@node-red/editor-client/src/js/ui/workspaces.js", + "packages/node_modules/@node-red/editor-client/src/js/ui/statusBar.js", "packages/node_modules/@node-red/editor-client/src/js/ui/view.js", "packages/node_modules/@node-red/editor-client/src/js/ui/view-navigator.js", "packages/node_modules/@node-red/editor-client/src/js/ui/view-tools.js", @@ -183,21 +184,20 @@ module.exports = function(grunt) { "packages/node_modules/@node-red/editor-client/public/vendor/vendor.js": [ "packages/node_modules/@node-red/editor-client/src/vendor/jquery/js/jquery-3.3.1.min.js", "packages/node_modules/@node-red/editor-client/src/vendor/jquery/js/jquery-migrate-3.0.1.min.js", - "packages/node_modules/@node-red/editor-client/src/vendor/bootstrap/js/bootstrap.min.js", "packages/node_modules/@node-red/editor-client/src/vendor/jquery/js/jquery-ui.min.js", "packages/node_modules/@node-red/editor-client/src/vendor/jquery/js/jquery.ui.touch-punch.min.js", "packages/node_modules/@node-red/editor-client/src/vendor/marked/marked.min.js", "packages/node_modules/@node-red/editor-client/src/vendor/d3/d3.v3.min.js", - "packages/node_modules/@node-red/editor-client/src/vendor/i18next/i18next.min.js" - ], - "packages/node_modules/@node-red/editor-client/public/vendor/vendor.css": [ - // TODO: resolve relative resource paths in - // bootstrap/FA/jquery - ], - "packages/node_modules/@node-red/editor-client/public/vendor/jsonata/jsonata.min.js": [ + "packages/node_modules/@node-red/editor-client/src/vendor/i18next/i18next.min.js", "node_modules/jsonata/jsonata-es5.min.js", - "packages/node_modules/@node-red/editor-client/src/vendor/jsonata/formatter.js" + "packages/node_modules/@node-red/editor-client/src/vendor/jsonata/formatter.js", + "packages/node_modules/@node-red/editor-client/src/vendor/ace/ace.js", + "packages/node_modules/@node-red/editor-client/src/vendor/ace/ext-language_tools.js", ], + // "packages/node_modules/@node-red/editor-client/public/vendor/vendor.css": [ + // // TODO: resolve relative resource paths in + // // bootstrap/FA/jquery + // ], "packages/node_modules/@node-red/editor-client/public/vendor/ace/worker-jsonata.js": [ "node_modules/jsonata/jsonata-es5.min.js", "packages/node_modules/@node-red/editor-client/src/vendor/jsonata/worker-jsonata.js" @@ -223,10 +223,6 @@ module.exports = function(grunt) { files: [{ dest: 'packages/node_modules/@node-red/editor-client/public/red/style.min.css', src: 'packages/node_modules/@node-red/editor-client/src/sass/style.scss' - }, - { - dest: 'packages/node_modules/@node-red/editor-client/public/vendor/bootstrap/css/bootstrap.min.css', - src: 'packages/node_modules/@node-red/editor-client/src/vendor/bootstrap/css/bootstrap.css' }] } }, @@ -353,8 +349,6 @@ module.exports = function(grunt) { cwd: 'packages/node_modules/@node-red/editor-client/src/vendor', src: [ 'ace/**', - //'bootstrap/css/**', - 'bootstrap/img/**', 'jquery/css/base/**', 'font-awesome/**' ], diff --git a/packages/node_modules/@node-red/editor-api/lib/editor/theme.js b/packages/node_modules/@node-red/editor-api/lib/editor/theme.js index ea088b3eb..234671f2e 100644 --- a/packages/node_modules/@node-red/editor-api/lib/editor/theme.js +++ b/packages/node_modules/@node-red/editor-api/lib/editor/theme.js @@ -169,6 +169,9 @@ module.exports = { } } } + themeApp.get("/", function(req,res) { + res.json(themeContext); + }) if (theme.hasOwnProperty("menu")) { themeSettings.menu = theme.menu; diff --git a/packages/node_modules/@node-red/editor-client/locales/en-US/editor.json b/packages/node_modules/@node-red/editor-client/locales/en-US/editor.json index a48af013d..0b979f5d5 100755 --- a/packages/node_modules/@node-red/editor-client/locales/en-US/editor.json +++ b/packages/node_modules/@node-red/editor-client/locales/en-US/editor.json @@ -321,7 +321,8 @@ "show": "Show", "hide": "Hide", "errors": { - "scopeChange": "Changing the scope will make it unavailable to nodes in other flows that use it" + "scopeChange": "Changing the scope will make it unavailable to nodes in other flows that use it", + "invalidProperties": "Invalid properties:" } }, "keyboard": { diff --git a/packages/node_modules/@node-red/editor-client/src/js/keymap.json b/packages/node_modules/@node-red/editor-client/src/js/keymap.json index ea32e66f3..3f232647d 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/keymap.json +++ b/packages/node_modules/@node-red/editor-client/src/js/keymap.json @@ -23,13 +23,13 @@ "ctrl-g v": "core:show-version-control-tab", "ctrl-shift-l": "core:show-event-log" }, - "sidebar-node-config": { + "red-ui-sidebar-node-config": { "backspace": "core:delete-config-selection", "delete": "core:delete-config-selection", "ctrl-a": "core:select-all-config-nodes", "ctrl-z": "core:undo" }, - "workspace": { + "red-ui-workspace": { "backspace": "core:delete-selection", "delete": "core:delete-selection", "enter": "core:edit-selected-node", diff --git a/packages/node_modules/@node-red/editor-client/src/js/nodes.js b/packages/node_modules/@node-red/editor-client/src/js/nodes.js index 2bfdd74fa..4a1c6e9a0 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/nodes.js +++ b/packages/node_modules/@node-red/editor-client/src/js/nodes.js @@ -368,7 +368,7 @@ RED.nodes = (function() { outputs: sf.out.length, color: "#da9", label: function() { return this.name||RED.nodes.subflow(sf.id).name }, - labelStyle: function() { return this.name?"node_label_italic":""; }, + labelStyle: function() { return this.name?"red-ui-flow-node-label-italic":""; }, paletteLabel: function() { return RED.nodes.subflow(sf.id).name }, inputLabels: function(i) { return sf.inputLabels?sf.inputLabels[i]:null }, outputLabels: function(i) { return sf.outputLabels?sf.outputLabels[i]:null }, @@ -1072,7 +1072,7 @@ RED.nodes = (function() { color:"#fee", defaults: {}, label: "unknown: "+n.type, - labelStyle: "node_label_italic", + labelStyle: "red-ui-flow-node-label-italic", outputs: n.outputs||n.wires.length, set: registry.getNodeSet("node-red/unknown") } diff --git a/packages/node_modules/@node-red/editor-client/src/js/red.js b/packages/node_modules/@node-red/editor-client/src/js/red.js index 787166c00..13a451ddf 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/red.js +++ b/packages/node_modules/@node-red/editor-client/src/js/red.js @@ -38,11 +38,11 @@ var RED = (function() { newScript.onload = function() { scriptCount--; if (scriptCount === 0) { - $("body").append(nodeConfigEls); + $("#red-ui-editor-node-configs").append(nodeConfigEls); done() } } - $('body').append(newScript); + $("#red-ui-editor-node-configs").append(newScript); newScript.src = RED.settings.apiRootUrl+srcUrl; hasDeferred = true; } else { @@ -58,7 +58,7 @@ var RED = (function() { } }) if (!hasDeferred) { - $("body").append(nodeConfigEls); + $("#red-ui-editor-node-configs").append(nodeConfigEls); done(); } } catch(err) { @@ -114,10 +114,10 @@ var RED = (function() { var configs = data.trim().split(/(?=)/); var stepConfig = function() { if (configs.length === 0) { - $("body").i18n(); - $("#palette > .palette-spinner").hide(); - $(".palette-scroll").removeClass("hide"); - $("#palette-search").removeClass("hide"); + $("#red-ui-editor").i18n(); + $("#red-ui-palette > .red-ui-palette-spinner").hide(); + $(".red-ui-palette-scroll").removeClass("hide"); + $("#red-ui-palette-search").removeClass("hide"); loadFlows(function() { if (RED.settings.theme("projects.enabled",false)) { RED.projects.refresh(function(activeProject) { @@ -353,6 +353,7 @@ var RED = (function() { } } node.status = msg; + node.dirtyStatus = true; node.dirty = true; RED.view.redraw(); } @@ -433,7 +434,7 @@ var RED = (function() { }); } - function loadEditor() { + function buildMainMenu() { var menuOptions = []; if (RED.settings.theme("projects.enabled",false)) { menuOptions.push({id:"menu-item-projects-menu",label:RED._("menu.label.projects"),options:[ @@ -442,20 +443,7 @@ var RED = (function() { {id:"menu-item-projects-settings",label:RED._("menu.label.projects-settings"),disabled:false,onselect:"core:show-project-settings"} ]}); } - - menuOptions.push({id:"menu-item-view-menu",label:RED._("menu.label.view.view"),options:[ - // {id:"menu-item-view-show-grid",setting:"view-show-grid",label:RED._("menu.label.view.showGrid"),toggle:true,onselect:"core:toggle-show-grid"}, - // {id:"menu-item-view-snap-grid",setting:"view-snap-grid",label:RED._("menu.label.view.snapGrid"),toggle:true,onselect:"core:toggle-snap-grid"}, - // {id:"menu-item-status",setting:"node-show-status",label:RED._("menu.label.displayStatus"),toggle:true,onselect:"core:toggle-status", selected: true}, - //null, - // {id:"menu-item-bidi",label:RED._("menu.label.view.textDir"),options:[ - // {id:"menu-item-bidi-default",toggle:"text-direction",label:RED._("menu.label.view.defaultDir"),selected: true, onselect:function(s) { if(s){RED.text.bidi.setTextDirection("")}}}, - // {id:"menu-item-bidi-ltr",toggle:"text-direction",label:RED._("menu.label.view.ltr"), onselect:function(s) { if(s){RED.text.bidi.setTextDirection("ltr")}}}, - // {id:"menu-item-bidi-rtl",toggle:"text-direction",label:RED._("menu.label.view.rtl"), onselect:function(s) { if(s){RED.text.bidi.setTextDirection("rtl")}}}, - // {id:"menu-item-bidi-auto",toggle:"text-direction",label:RED._("menu.label.view.auto"), onselect:function(s) { if(s){RED.text.bidi.setTextDirection("auto")}}} - // ]}, - // null, {id:"menu-item-palette",label:RED._("menu.label.palette.show"),toggle:true,onselect:"core:toggle-palette", selected: true}, {id:"menu-item-sidebar",label:RED._("menu.label.sidebar.show"),toggle:true,onselect:"core:toggle-sidebar", selected: true}, {id:"menu-item-event-log",label:RED._("eventLog.title"),onselect:"core:show-event-log"}, @@ -494,13 +482,24 @@ var RED = (function() { menuOptions.push({id:"menu-item-node-red-version", label:"v"+RED.settings.version, onselect: "core:show-about" }); + $('
    • ').appendTo(".red-ui-header-toolbar") + RED.menu.init({id:"red-ui-header-button-sidemenu",options: menuOptions}); + + } + + function loadEditor() { + + RED.workspaces.init(); + RED.statusBar.init(); RED.view.init(); RED.userSettings.init(); RED.user.init(); + RED.notifications.init(); RED.library.init(); RED.keyboard.init(); RED.palette.init(); RED.eventLog.init(); + if (RED.settings.theme('palette.editable') !== false) { RED.palette.editor.init(); } else { @@ -516,27 +515,56 @@ var RED = (function() { } RED.subflow.init(); - RED.workspaces.init(); RED.clipboard.init(); RED.search.init(); RED.editor.init(); RED.diff.init(); - RED.menu.init({id:"btn-sidemenu",options: menuOptions}); RED.deploy.init(RED.settings.theme("deployButton",null)); - RED.notifications.init(); - RED.actions.add("core:show-about", showAbout); + buildMainMenu(); + RED.nodes.init(); RED.comms.connect(); - $("#main-container").show(); - $(".header-toolbar").show(); + $("#red-ui-main-container").show(); + $(".red-ui-header-toolbar").show(); + + RED.actions.add("core:show-about", showAbout); loadNodeList(); } + function buildEditor(options) { + var header = $('
    ').appendTo(options.target); + var logo = $('').appendTo(header); + $('').appendTo(header); + $('
    ').appendTo(header); + $('
    '+ + '
    '+ + '
    '+ + '
    '+ + '
    '+ + '
    '+ + '
    ').appendTo(options.target); + $('
    ').appendTo(options.target); + $('
    ').appendTo(options.target); + $.getJSON(options.apiRootUrl+"theme", function(theme) { + if (theme.header) { + if (theme.header.url) { + logo = $("",{href:theme.header.url}).appendTo(logo); + } + if (theme.header.image) { + $('',{src:theme.header.image}).appendTo(logo); + } + if (theme.header.title) { + $('').html(theme.header.title).appendTo(logo); + } + } + }); + } + var initialised = false; function init(options) { @@ -550,6 +578,10 @@ var RED = (function() { if (options.apiRootUrl && !/\/$/.test(options.apiRootUrl)) { options.apiRootUrl = options.apiRootUrl+"/"; } + options.target = $("#red-ui-editor"); + options.target.addClass("red-ui-editor"); + + buildEditor(options); RED.i18n.init(options, function() { RED.settings.init(options, loadEditor); }) diff --git a/packages/node_modules/@node-red/editor-client/src/js/settings.js b/packages/node_modules/@node-red/editor-client/src/js/settings.js index 1be00f851..c4a164fbe 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/settings.js +++ b/packages/node_modules/@node-red/editor-client/src/js/settings.js @@ -131,7 +131,7 @@ RED.settings = (function () { RED.settings.remove("auth-tokens"); } console.log("Node-RED: " + data.version); - console.group("Versions"); + console.groupCollapsed("Versions"); console.log("jQuery",$().jquery) console.log("jQuery UI",$.ui.version); console.log("ACE",ace.version); diff --git a/packages/node_modules/@node-red/editor-client/src/js/text/bidi.js b/packages/node_modules/@node-red/editor-client/src/js/text/bidi.js index 1835f5111..8fc4a0d86 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/text/bidi.js +++ b/packages/node_modules/@node-red/editor-client/src/js/text/bidi.js @@ -97,14 +97,14 @@ RED.text.bidi = (function() { } /** - * Enforces the text direction for all the spans with style bidiAware under + * Enforces the text direction for all the spans with style red-ui-text-bidi-aware under * workspace or sidebar div */ function enforceTextDirectionOnPage() { - $("#workspace").find('span.bidiAware').each(function() { + $("#red-ui-workspace").find('span.red-ui-text-bidi-aware').each(function() { $(this).attr("dir", resolveBaseTextDir($(this).html())); }); - $("#sidebar").find('span.bidiAware').each(function() { + $("#red-ui-sidebar").find('span.red-ui-text-bidi-aware').each(function() { $(this).attr("dir", resolveBaseTextDir($(this).text())); }); } diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/clipboard.js b/packages/node_modules/@node-red/editor-client/src/js/ui/clipboard.js index 07eb2c414..0d16a7c42 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/clipboard.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/clipboard.js @@ -28,28 +28,33 @@ RED.clipboard = (function() { var libraryBrowser; function setupDialogs() { - dialog = $('
    ') - .appendTo("body") + dialog = $('
    ') + .appendTo("#red-ui-editor") .dialog({ modal: true, autoOpen: false, width: 700, resizable: false, + classes: { + "ui-dialog": "red-ui-editor-dialog", + "ui-dialog-titlebar-close": "hide", + "ui-widget-overlay": "red-ui-editor-dialog" + }, buttons: [ { - id: "clipboard-dialog-cancel", + id: "red-ui-clipboard-dialog-cancel", text: RED._("common.label.cancel"), click: function() { $( this ).dialog( "close" ); } }, { - id: "clipboard-dialog-download", + id: "red-ui-clipboard-dialog-download", class: "primary", text: RED._("clipboard.download"), click: function() { var element = document.createElement('a'); - element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent($("#clipboard-export").val())); + element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent($("#red-ui-clipboard-dialog-export-text").val())); element.setAttribute('download', "flows.json"); element.style.display = 'none'; document.body.appendChild(element); @@ -59,23 +64,23 @@ RED.clipboard = (function() { } }, { - id: "clipboard-dialog-export", + id: "red-ui-clipboard-dialog-export", class: "primary", text: RED._("clipboard.export.copy"), click: function() { - if (activeTab === "clipboard-dialog-export-tab-clipboard") { - $("#clipboard-export").select(); + if (activeTab === "red-ui-clipboard-dialog-export-tab-clipboard") { + $("#red-ui-clipboard-dialog-export-text").select(); document.execCommand("copy"); document.getSelection().removeAllRanges(); RED.notify(RED._("clipboard.nodesExported"),{id:"clipboard"}); $( this ).dialog( "close" ); } else { - var flowToExport = $("#clipboard-export").val(); + var flowToExport = $("#red-ui-clipboard-dialog-export-text").val(); var selectedPath = libraryBrowser.getSelected(); if (!selectedPath.children) { selectedPath = selectedPath.parent; } - var filename = $("#clipboard-dialog-tab-library-name").val().trim(); + var filename = $("#red-ui-clipboard-dialog-tab-library-name").val().trim(); var saveFlow = function() { $.ajax({ url:'library/'+selectedPath.library+'/'+selectedPath.type+'/'+selectedPath.path + filename, @@ -129,13 +134,13 @@ RED.clipboard = (function() { } }, { - id: "clipboard-dialog-ok", + id: "red-ui-clipboard-dialog-ok", class: "primary", text: RED._("common.label.import"), click: function() { - var addNewFlow = ($("#import-tab > a.selected").attr('id') === 'import-tab-new'); - if (activeTab === "clipboard-dialog-import-tab-clipboard") { - RED.view.importNodes($("#clipboard-import").val(),addNewFlow); + var addNewFlow = ($("#red-ui-clipboard-dialog-import-opt > a.selected").attr('id') === 'red-ui-clipboard-dialog-import-opt-new'); + if (activeTab === "red-ui-clipboard-dialog-red-ui-clipboard-dialog-import-opt-clipboard") { + RED.view.importNodes($("#red-ui-clipboard-dialog-import-text").val(),addNewFlow); } else { var selectedPath = libraryBrowser.getSelected(); if (selectedPath.path) { @@ -148,9 +153,6 @@ RED.clipboard = (function() { } } ], - open: function(e) { - $(this).parent().find(".ui-dialog-titlebar-close").hide(); - }, close: function(e) { if (popover) { popover.close(true); @@ -164,32 +166,32 @@ RED.clipboard = (function() { exportNodesDialog = '
    '+ ''+ - ''+ - ''+ - ''+ - ''+ + ''+ + ''+ + ''+ + ''+ ''+ '
    '+ - '
    '+ - '
    '+ - ''+ + '
    '+ + '
    '+ + '
      '+ '
      '+ - '
      '+ - '
      '+ + '
      '+ + '
      '+ '
      '+ - ''+ + ''+ '
      '+ '
      '+ - ''+ - ''+ - ''+ + ''+ + ''+ + ''+ ''+ '
      '+ '
      '+ - '
      '+ - '
      '+ + '
      '+ + '
      '+ '
      '+ - ''+ + ''+ '
      '+ '
      '+ '
      '+ @@ -198,30 +200,30 @@ RED.clipboard = (function() { importNodesDialog = - '
      '+ - '
      '+ - '
        '+ + '
        '+ + '
        '+ + '
          '+ '
          '+ - '
          '+ - '
          '+ + '
          '+ + '
          '+ '
          '+ - ' '+ - ''+ + ' '+ + ''+ '
          '+ '
          '+ - ''+ + ''+ '
          '+ '
          '+ - '
          '+ - '
          '+ + '
          '+ + '
          '+ '
          '+ '
          '+ '
          '+ '
          '+ ''+ - ''+ - ''+ - ''+ + ''+ + ''+ + ''+ ''+ '
          '; @@ -233,33 +235,33 @@ RED.clipboard = (function() { clearTimeout(validateExportFilenameTimeout); } validateExportFilenameTimeout = setTimeout(function() { - var filenameInput = $("#clipboard-dialog-tab-library-name"); + var filenameInput = $("#red-ui-clipboard-dialog-tab-library-name"); var filename = filenameInput.val().trim(); var valid = filename.length > 0 && !/[\/\\]/.test(filename); if (valid) { filenameInput.removeClass("input-error"); - $("#clipboard-dialog-export").button("enable"); + $("#red-ui-clipboard-dialog-export").button("enable"); } else { filenameInput.addClass("input-error"); - $("#clipboard-dialog-export").button("disable"); + $("#red-ui-clipboard-dialog-export").button("disable"); } },100); } var validateImportTimeout; function validateImport() { - if (activeTab === "clipboard-dialog-import-tab-clipboard") { + if (activeTab === "red-ui-clipboard-dialog-import-tab-clipboard") { if (validateImportTimeout) { clearTimeout(validateImportTimeout); } validateImportTimeout = setTimeout(function() { - var importInput = $("#clipboard-import"); + var importInput = $("#red-ui-clipboard-dialog-import-text"); var v = importInput.val().trim(); if (v === "") { popover.close(true); currentPopoverError = null; importInput.removeClass("input-error"); - $("#clipboard-dialog-ok").button("disable"); + $("#red-ui-clipboard-dialog-ok").button("disable"); return; } try { @@ -282,7 +284,7 @@ RED.clipboard = (function() { popover.close(true); importInput.removeClass("input-error"); importInput.val(v); - $("#clipboard-dialog-ok").button("enable"); + $("#red-ui-clipboard-dialog-ok").button("enable"); } catch(err) { if (v !== "") { importInput.addClass("input-error"); @@ -296,7 +298,7 @@ RED.clipboard = (function() { // which is the least useful, but most consistent message // - use a custom/library parser that gives consistent messages // which can be translated. - var message = $('
          ').text(errString); + var message = $('
          ').text(errString); var errorPos; // Chrome error messages var m = /at position (\d+)/i.exec(errString); @@ -335,15 +337,15 @@ RED.clipboard = (function() { } else { currentPopoverError = null; } - $("#clipboard-dialog-ok").button("disable"); + $("#red-ui-clipboard-dialog-ok").button("disable"); } },100); } else { var file = libraryBrowser.getSelected(); if (file && file.label && !file.children) { - $("#clipboard-dialog-ok").button("enable"); + $("#red-ui-clipboard-dialog-ok").button("enable"); } else { - $("#clipboard-dialog-ok").button("disable"); + $("#red-ui-clipboard-dialog-ok").button("disable"); } } } @@ -358,18 +360,18 @@ RED.clipboard = (function() { dialogContainer.append($(importNodesDialog)); var tabs = RED.tabs.create({ - id: "clipboard-dialog-import-tabs", + id: "red-ui-clipboard-dialog-import-tabs", vertical: true, onchange: function(tab) { - $("#clipboard-dialog-import-tabs-content").children().hide(); + $("#red-ui-clipboard-dialog-import-tabs-content").children().hide(); $("#" + tab.id).show(); activeTab = tab.id; if (popover) { popover.close(true); currentPopoverError = null; } - if (tab.id === "clipboard-dialog-import-tab-clipboard") { - $("#clipboard-import").trigger("focus"); + if (tab.id === "red-ui-clipboard-dialog-import-tab-clipboard") { + $("#red-ui-clipboard-dialog-import-text").trigger("focus"); } else { libraryBrowser.focus(); } @@ -377,33 +379,33 @@ RED.clipboard = (function() { } }); tabs.addTab({ - id: "clipboard-dialog-import-tab-clipboard", + id: "red-ui-clipboard-dialog-import-tab-clipboard", label: RED._("clipboard.clipboard") }); tabs.addTab({ - id: "clipboard-dialog-import-tab-library", + id: "red-ui-clipboard-dialog-import-tab-library", label: RED._("library.library") }); - tabs.activateTab("clipboard-dialog-import-tab-"+mode); + tabs.activateTab("red-ui-clipboard-dialog-import-tab-"+mode); if (mode === 'clipboard') { setTimeout(function() { - $("#clipboard-import").trigger("focus"); + $("#red-ui-clipboard-dialog-import-text").trigger("focus"); },100) } - $("#clipboard-dialog-tab-library-name").on("keyup", validateExportFilename); - $("#clipboard-dialog-tab-library-name").on('paste',function() { setTimeout(validateExportFilename,10)}); - $("#clipboard-dialog-export").button("enable"); + $("#red-ui-clipboard-dialog-tab-library-name").on("keyup", validateExportFilename); + $("#red-ui-clipboard-dialog-tab-library-name").on('paste',function() { setTimeout(validateExportFilename,10)}); + $("#red-ui-clipboard-dialog-export").button("enable"); libraryBrowser = RED.library.createBrowser({ - container: $("#clipboard-dialog-import-tab-library-browser"), + container: $("#red-ui-clipboard-dialog-import-tab-library-browser"), onselect: function(file) { if (file && file.label && !file.children) { - $("#clipboard-dialog-ok").button("enable"); + $("#red-ui-clipboard-dialog-ok").button("enable"); } else { - $("#clipboard-dialog-ok").button("disable"); + $("#red-ui-clipboard-dialog-ok").button("disable"); } } }) @@ -411,15 +413,15 @@ RED.clipboard = (function() { dialogContainer.i18n(); - $("#clipboard-dialog-ok").show(); - $("#clipboard-dialog-cancel").show(); - $("#clipboard-dialog-export").hide(); - $("#clipboard-dialog-download").hide(); - $("#clipboard-dialog-ok").button("disable"); - $("#clipboard-import").on("keyup", validateImport); - $("#clipboard-import").on('paste',function() { setTimeout(validateImport,10)}); + $("#red-ui-clipboard-dialog-ok").show(); + $("#red-ui-clipboard-dialog-cancel").show(); + $("#red-ui-clipboard-dialog-export").hide(); + $("#red-ui-clipboard-dialog-download").hide(); + $("#red-ui-clipboard-dialog-ok").button("disable"); + $("#red-ui-clipboard-dialog-import-text").on("keyup", validateImport); + $("#red-ui-clipboard-dialog-import-text").on('paste',function() { setTimeout(validateImport,10)}); - $("#import-tab > a").on("click", function(evt) { + $("#red-ui-clipboard-dialog-import-opt > a").on("click", function(evt) { evt.preventDefault(); if ($(this).hasClass('disabled') || $(this).hasClass('selected')) { return; @@ -428,22 +430,22 @@ RED.clipboard = (function() { $(this).addClass('selected'); }); - $("#import-file-upload").on("change", function() { + $("#red-ui-clipboard-dialog-import-file-upload").on("change", function() { var fileReader = new FileReader(); fileReader.onload = function () { - $("#clipboard-import").val(fileReader.result); + $("#red-ui-clipboard-dialog-import-text").val(fileReader.result); validateImport(); }; fileReader.readAsText($(this).prop('files')[0]); }) - $("#import-file-upload-btn").on("click", function(evt) { + $("#red-ui-clipboard-dialog-import-file-upload-btn").on("click", function(evt) { evt.preventDefault(); - $("#import-file-upload").trigger("click"); + $("#red-ui-clipboard-dialog-import-file-upload").trigger("click"); }) dialog.dialog("option","title",RED._("clipboard.importNodes")).dialog("open"); popover = RED.popover.create({ - target: $("#clipboard-import"), + target: $("#red-ui-clipboard-dialog-import-text"), trigger: "manual", direction: "bottom", content: "" @@ -461,81 +463,81 @@ RED.clipboard = (function() { dialogContainer.append($(exportNodesDialog)); var tabs = RED.tabs.create({ - id: "clipboard-dialog-export-tabs", + id: "red-ui-clipboard-dialog-export-tabs", vertical: true, onchange: function(tab) { - $("#clipboard-dialog-export-tabs-content").children().hide(); + $("#red-ui-clipboard-dialog-export-tabs-content").children().hide(); $("#" + tab.id).show(); activeTab = tab.id; - if (tab.id === "clipboard-dialog-export-tab-clipboard") { - $("#clipboard-dialog-export").button("option","label", RED._("clipboard.export.copy")) - $("#clipboard-dialog-download").show(); + if (tab.id === "red-ui-clipboard-dialog-export-tab-clipboard") { + $("#red-ui-clipboard-dialog-export").button("option","label", RED._("clipboard.export.copy")) + $("#red-ui-clipboard-dialog-download").show(); } else { - $("#clipboard-dialog-export").button("option","label", RED._("clipboard.export.export")) - $("#clipboard-dialog-download").hide(); + $("#red-ui-clipboard-dialog-export").button("option","label", RED._("clipboard.export.export")) + $("#red-ui-clipboard-dialog-download").hide(); libraryBrowser.focus(); } } }); tabs.addTab({ - id: "clipboard-dialog-export-tab-clipboard", + id: "red-ui-clipboard-dialog-export-tab-clipboard", label: RED._("clipboard.clipboard") }); tabs.addTab({ - id: "clipboard-dialog-export-tab-library", + id: "red-ui-clipboard-dialog-export-tab-library", label: RED._("library.library") }); - tabs.activateTab("clipboard-dialog-export-tab-"+mode); + tabs.activateTab("red-ui-clipboard-dialog-export-tab-"+mode); - $("#clipboard-dialog-tab-library-name").on("keyup", validateExportFilename); - $("#clipboard-dialog-tab-library-name").on('paste',function() { setTimeout(validateExportFilename,10)}); - $("#clipboard-dialog-export").button("enable"); + $("#red-ui-clipboard-dialog-tab-library-name").on("keyup", validateExportFilename); + $("#red-ui-clipboard-dialog-tab-library-name").on('paste',function() { setTimeout(validateExportFilename,10)}); + $("#red-ui-clipboard-dialog-export").button("enable"); libraryBrowser = RED.library.createBrowser({ - container: $("#clipboard-dialog-export-tab-library-browser"), + container: $("#red-ui-clipboard-dialog-export-tab-library-browser"), folderTools: true, onselect: function(file) { if (file && file.label && !file.children) { - $("#clipboard-dialog-tab-library-name").val(file.label); + $("#red-ui-clipboard-dialog-tab-library-name").val(file.label); } } }) loadFlowLibrary(libraryBrowser,false); - $("#clipboard-dialog-tab-library-name").val("flows.json").select(); + $("#red-ui-clipboard-dialog-tab-library-name").val("flows.json").select(); dialogContainer.i18n(); - var format = RED.settings.flowFilePretty ? "export-format-full" : "export-format-mini"; + var format = RED.settings.flowFilePretty ? "red-ui-clipboard-dialog-export-fmt-full" : "red-ui-clipboard-dialog-export-fmt-mini"; - $("#export-format-group > a").on("click", function(evt) { + $("#red-ui-clipboard-dialog-export-fmt-group > a").on("click", function(evt) { evt.preventDefault(); if ($(this).hasClass('disabled') || $(this).hasClass('selected')) { - $("#clipboard-export").trigger("focus"); + $("#red-ui-clipboard-dialog-export-text").trigger("focus"); return; } $(this).parent().children().removeClass('selected'); $(this).addClass('selected'); - var flow = $("#clipboard-export").val(); + var flow = $("#red-ui-clipboard-dialog-export-text").val(); if (flow.length > 0) { var nodes = JSON.parse(flow); format = $(this).attr('id'); - if (format === 'export-format-full') { + if (format === 'red-ui-clipboard-dialog-export-fmt-full') { flow = JSON.stringify(nodes,null,4); } else { flow = JSON.stringify(nodes); } - $("#clipboard-export").val(flow); - setTimeout(function() { $("#clipboard-export").scrollTop(0); },50); + $("#red-ui-clipboard-dialog-export-text").val(flow); + setTimeout(function() { $("#red-ui-clipboard-dialog-export-text").scrollTop(0); },50); - $("#clipboard-export").trigger("focus"); + $("#red-ui-clipboard-dialog-export-text").trigger("focus"); } }); - $("#export-range-group > a").on("click", function(evt) { + $("#red-ui-clipboard-dialog-export-rng-group > a").on("click", function(evt) { evt.preventDefault(); if ($(this).hasClass('disabled') || $(this).hasClass('selected')) { return; @@ -545,7 +547,7 @@ RED.clipboard = (function() { var type = $(this).attr('id'); var flow = ""; var nodes = null; - if (type === 'export-range-selected') { + if (type === 'red-ui-clipboard-dialog-export-rng-selected') { var selection = RED.workspaces.selection(); if (selection.length > 0) { nodes = []; @@ -558,58 +560,58 @@ RED.clipboard = (function() { } // Don't include the subflow meta-port nodes in the exported selection nodes = RED.nodes.createExportableNodeSet(nodes.filter(function(n) { return n.type !== 'subflow'})); - } else if (type === 'export-range-flow') { + } else if (type === 'red-ui-clipboard-dialog-export-rng-flow') { var activeWorkspace = RED.workspaces.active(); nodes = RED.nodes.filterNodes({z:activeWorkspace}); var parentNode = RED.nodes.workspace(activeWorkspace)||RED.nodes.subflow(activeWorkspace); nodes.unshift(parentNode); nodes = RED.nodes.createExportableNodeSet(nodes); - } else if (type === 'export-range-full') { + } else if (type === 'red-ui-clipboard-dialog-export-rng-full') { nodes = RED.nodes.createCompleteNodeSet(false); } if (nodes !== null) { - if (format === "export-format-full") { + if (format === "red-ui-clipboard-dialog-export-fmt-full") { flow = JSON.stringify(nodes,null,4); } else { flow = JSON.stringify(nodes); } } if (flow.length > 0) { - $("#export-copy").removeClass('disabled'); + $("#red-ui-clipboard-dialog-export").removeClass('disabled'); } else { - $("#export-copy").addClass('disabled'); + $("#red-ui-clipboard-dialog-export").addClass('disabled'); } - $("#clipboard-export").val(flow); - setTimeout(function() { $("#clipboard-export").scrollTop(0); },50); - $("#clipboard-export").trigger("focus"); + $("#red-ui-clipboard-dialog-export-text").val(flow); + setTimeout(function() { $("#red-ui-clipboard-dialog-export-text").scrollTop(0); },50); + $("#red-ui-clipboard-dialog-export-text").trigger("focus"); }) - $("#clipboard-dialog-ok").hide(); - $("#clipboard-dialog-cancel").hide(); - $("#clipboard-dialog-export").hide(); + $("#red-ui-clipboard-dialog-ok").hide(); + $("#red-ui-clipboard-dialog-cancel").hide(); + $("#red-ui-clipboard-dialog-export").hide(); var selection = RED.workspaces.selection(); if (selection.length > 0) { - $("#export-range-selected").trigger("click"); + $("#red-ui-clipboard-dialog-export-rng-selected").trigger("click"); } else { selection = RED.view.selection(); if (selection.nodes) { - $("#export-range-selected").trigger("click"); + $("#red-ui-clipboard-dialog-export-rng-selected").trigger("click"); } else { - $("#export-range-selected").addClass('disabled').removeClass('selected'); - $("#export-range-flow").trigger("click"); + $("#red-ui-clipboard-dialog-export-rng-selected").addClass('disabled').removeClass('selected'); + $("#red-ui-clipboard-dialog-export-rng-flow").trigger("click"); } } - if (format === "export-format-full") { - $("#export-format-full").trigger("click"); + if (format === "red-ui-clipboard-dialog-export-fmt-full") { + $("#red-ui-clipboard-dialog-export-fmt-full").trigger("click"); } else { - $("#export-format-mini").trigger("click"); + $("#red-ui-clipboard-dialog-export-fmt-mini").trigger("click"); } dialog.dialog("option","title",RED._("clipboard.exportNodes")).dialog( "open" ); - $("#clipboard-export").trigger("focus"); - $("#clipboard-dialog-cancel").show(); - $("#clipboard-dialog-export").show(); - $("#clipboard-dialog-download").show(); + $("#red-ui-clipboard-dialog-export-text").trigger("focus"); + $("#red-ui-clipboard-dialog-cancel").show(); + $("#red-ui-clipboard-dialog-export").show(); + $("#red-ui-clipboard-dialog-download").show(); } @@ -648,7 +650,7 @@ RED.clipboard = (function() { } function hideDropTarget() { - $("#dropTarget").hide(); + $("#red-ui-drop-target").hide(); RED.keyboard.remove("escape"); } function copyText(value,element,msg) { @@ -678,7 +680,7 @@ RED.clipboard = (function() { if (truncated) { msg += "_truncated"; } - $("#clipboard-hidden").val(value).select(); + $("#red-ui-clipboard-hidden").val(value).select(); var result = document.execCommand("copy"); if (result && element) { var popover = RED.popover.create({ @@ -698,7 +700,7 @@ RED.clipboard = (function() { init: function() { setupDialogs(); - $('').appendTo("body"); + $('').appendTo("#red-ui-editor"); RED.actions.add("core:show-export-dialog",exportNodes); RED.actions.add("core:show-import-dialog",importNodes); @@ -712,15 +714,17 @@ RED.clipboard = (function() { RED.events.on("type-search:open",function() { disabled = true; }); RED.events.on("type-search:close",function() { disabled = false; }); - $('#chart').on("dragenter",function(event) { + $('

          ').appendTo('#red-ui-editor'); + + $('#red-ui-workspace-chart').on("dragenter",function(event) { if ($.inArray("text/plain",event.originalEvent.dataTransfer.types) != -1 || $.inArray("Files",event.originalEvent.dataTransfer.types) != -1) { - $("#dropTarget").css({display:'table'}); + $("#red-ui-drop-target").css({display:'table'}); RED.keyboard.add("*", "escape" ,hideDropTarget); } }); - $('#dropTarget').on("dragover",function(event) { + $('#red-ui-drop-target').on("dragover",function(event) { if ($.inArray("text/plain",event.originalEvent.dataTransfer.types) != -1 || $.inArray("Files",event.originalEvent.dataTransfer.types) != -1) { event.preventDefault(); diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/common/editableList.js b/packages/node_modules/@node-red/editor-client/src/js/ui/common/editableList.js index ddede026b..0464866f7 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/common/editableList.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/common/editableList.js @@ -75,7 +75,7 @@ addLabel = 'add'; } } - $(' '+addLabel+'') + $(' '+addLabel+'') .appendTo(this.topContainer) .on("click", function(evt) { evt.preventDefault(); @@ -257,7 +257,7 @@ li.addClass("red-ui-editableList-item-sortable"); } if (this.options.removable) { - var deleteButton = $('',{href:"#",class:"red-ui-editableList-item-remove editor-button editor-button-small"}).appendTo(li); + var deleteButton = $('',{href:"#",class:"red-ui-editableList-item-remove red-ui-button red-ui-button-small"}).appendTo(li); $('',{class:"fa fa-remove"}).appendTo(deleteButton); li.addClass("red-ui-editableList-item-removable"); deleteButton.on("click", function(evt) { diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/common/menu.js b/packages/node_modules/@node-red/editor-client/src/js/ui/common/menu.js index 6e88aeade..039357c11 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/common/menu.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/common/menu.js @@ -56,12 +56,12 @@ RED.menu = (function() { } if (opt === null) { - item = $('
        • '); + item = $('
        • '); } else { item = $('
        • '); if (opt.group) { - item.addClass("menu-group-"+opt.group); + item.addClass("red-ui-menu-group-"+opt.group); } var linkContent = '          '; @@ -79,10 +79,10 @@ RED.menu = (function() { } if (opt.sublabel) { - linkContent += ''+opt.label+''+ - ''+opt.sublabel+'' + linkContent += ''+opt.label+''+ + ''+opt.sublabel+'' } else { - linkContent += ''+opt.label+'' + linkContent += ''+opt.label+'' } linkContent += ''; @@ -130,8 +130,8 @@ RED.menu = (function() { }); } if (opt.options) { - item.addClass("dropdown-submenu pull-left"); - var submenu = $('').appendTo(item); + item.addClass("red-ui-menu-dropdown-submenu pull-left"); + var submenu = $('
            ').appendTo(item); for (var i=0;i",{class:"dropdown-menu pull-right"}); + var topMenu = $("
              ",{class:"red-ui-menu red-ui-menu-dropdown pull-right"}); if (options.id) { topMenu.attr({id:options.id+"-submenu"}); var menuParent = $("#"+options.id); if (menuParent.length === 1) { topMenu.insertAfter(menuParent); + menuParent.on("click", function(evt) { + evt.stopPropagation(); + evt.preventDefault(); + if (topMenu.is(":visible")) { + $(document).off("click.red-ui-menu"); + topMenu.hide(); + } else { + $(document).on("click.red-ui-menu", function(evt) { + $(document).off("click.red-ui-menu"); + activeMenu = null; + topMenu.hide(); + }); + $(".red-ui-menu").hide(); + topMenu.show(); + } + }) } } @@ -223,13 +239,13 @@ RED.menu = (function() { function addItem(id,opt) { var item = createMenuItem(opt); if (opt.group) { - var groupItems = $("#"+id+"-submenu").children(".menu-group-"+opt.group); + var groupItems = $("#"+id+"-submenu").children(".red-ui-menu-group-"+opt.group); if (groupItems.length === 0) { item.appendTo("#"+id+"-submenu"); } else { for (var i=0;i").parent(); this.uiContainer.addClass("red-ui-searchBox-container"); @@ -60,7 +61,7 @@ }); this.element.on("focus",function() { - $("body").one("mousedown",function() { + $(document).one("mousedown",function() { that.element.blur(); }); }); diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/common/stack.js b/packages/node_modules/@node-red/editor-client/src/js/ui/common/stack.js index 0cb410b29..610f388de 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/common/stack.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/common/stack.js @@ -45,11 +45,11 @@ RED.stack = (function() { return { add: function(entry) { entries.push(entry); - entry.container = $('
              ').appendTo(container); + entry.container = $('
              ').appendTo(container); if (!visible) { entry.container.hide(); } - var header = $('
              ').appendTo(entry.container); + var header = $('
              ').appendTo(entry.container); entry.header = header; entry.contentWrap = $('
              ',{style:"position:relative"}).appendTo(entry.container); if (options.fill) { @@ -82,7 +82,7 @@ RED.stack = (function() { var icon = $('').appendTo(header); if (entry.expanded) { - entry.container.addClass("palette-category-expanded"); + entry.container.addClass("expanded"); icon.addClass("expanded"); } else { entry.contentWrap.hide(); @@ -118,7 +118,7 @@ RED.stack = (function() { } icon.addClass("expanded"); - entry.container.addClass("palette-category-expanded"); + entry.container.addClass("expanded"); entry.contentWrap.slideDown(200); return true; } @@ -126,13 +126,13 @@ RED.stack = (function() { entry.collapse = function() { if (entry.isExpanded()) { icon.removeClass("expanded"); - entry.container.removeClass("palette-category-expanded"); + entry.container.removeClass("expanded"); entry.contentWrap.slideUp(200); return true; } }; entry.isExpanded = function() { - return entry.container.hasClass("palette-category-expanded"); + return entry.container.hasClass("expanded"); }; if (options.fill && options.singleExpanded) { resizeStack(); diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/common/tabs.js b/packages/node_modules/@node-red/editor-client/src/js/ui/common/tabs.js index 7205fa182..288334c06 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/common/tabs.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/common/tabs.js @@ -136,7 +136,7 @@ RED.tabs = (function() { } }); options = pinnedOptions.concat(options); - collapsibleMenu = RED.menu.init({id:"debug-message-option-menu",options: options}); + collapsibleMenu = RED.menu.init({options: options}); collapsibleMenu.css({ position: "absolute" }) @@ -148,10 +148,11 @@ RED.tabs = (function() { left: (elementPos.left - collapsibleMenu.width() + selectButton.width())+"px" }) if (collapsibleMenu.is(":visible")) { - $(document).off("click.tabmenu"); + $(document).off("click.red-ui-tabmenu"); } else { - $(document).on("click.tabmenu", function(evt) { - $(document).off("click.tabmenu"); + $(".red-ui-menu").hide(); + $(document).on("click.red-ui-tabmenu", function(evt) { + $(document).off("click.red-ui-tabmenu"); collapsibleMenu.hide(); }); } @@ -448,7 +449,10 @@ RED.tabs = (function() { } delete tabs[id]; updateTabWidths(); - collapsibleMenu = null; + if (collapsibleMenu) { + collapsibleMenu.remove(); + collapsibleMenu = null; + } } return { @@ -484,7 +488,7 @@ RED.tabs = (function() { } else if (tab.iconClass) { $('',{class:"red-ui-tab-icon "+tab.iconClass}).appendTo(link); } - var span = $('',{class:"bidiAware"}).text(tab.label).appendTo(link); + var span = $('',{class:"red-ui-text-bidi-aware"}).text(tab.label).appendTo(link); span.attr('dir', RED.text.bidi.resolveBaseTextDir(tab.label)); if (options.collapsible) { li.addClass("red-ui-tab-pinned"); @@ -626,7 +630,10 @@ RED.tabs = (function() { setTimeout(function() { updateTabWidths(); },10); - collapsibleMenu = null; + if (collapsibleMenu) { + collapsibleMenu.remove(); + collapsibleMenu = null; + } }, removeTab: removeTab, activateTab: activateTab, @@ -643,7 +650,7 @@ RED.tabs = (function() { tabs[id].label = label; var tab = ul.find("a[href='#"+id+"']"); tab.attr("title",label); - tab.find("span.bidiAware").text(label).attr('dir', RED.text.bidi.resolveBaseTextDir(label)); + tab.find("span.red-ui-text-bidi-aware").text(label).attr('dir', RED.text.bidi.resolveBaseTextDir(label)); updateTabWidths(); }, selection: getSelection, diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/common/treeList.js b/packages/node_modules/@node-red/editor-client/src/js/ui/common/treeList.js index 30137b3e7..ef7b4dd54 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/common/treeList.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/common/treeList.js @@ -276,7 +276,7 @@ } if (item.hasOwnProperty('selected')) { var selectWrapper = $('').appendTo(label); - var cb = $('').prop('checked',item.selected).appendTo(selectWrapper); + var cb = $('').prop('checked',item.selected).appendTo(selectWrapper); cb.on('click', function(e) { e.stopPropagation(); }); diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/common/typedInput.js b/packages/node_modules/@node-red/editor-client/src/js/ui/common/typedInput.js index 2de2c4f47..5ea7a867e 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/common/typedInput.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/common/typedInput.js @@ -124,7 +124,7 @@ } var contextStores = RED.settings.context.stores; var contextOptions = contextStores.map(function(store) { - return {value:store,label: store, icon:''} + return {value:store,label: store, icon:''} }) if (contextOptions.length < 2) { allOptions.flow.options = []; @@ -138,12 +138,12 @@ var that = this; this.disarmClick = false; - this.input = $(''); + this.input = $(''); this.input.insertAfter(this.element); this.input.val(this.element.val()); this.element.addClass('red-ui-typedInput'); this.uiWidth = this.element.outerWidth(); - this.elementDiv = this.input.wrap("
              ").parent().addClass('red-ui-typedInput-input'); + this.elementDiv = this.input.wrap("
              ").parent().addClass('red-ui-typedInput-input-wrap'); this.uiSelect = this.elementDiv.wrap( "
              " ).parent(); var attrStyle = this.element.attr('style'); var m; @@ -171,8 +171,8 @@ this.options.types = this.options.types||Object.keys(allOptions); - this.selectTrigger = $('').prependTo(this.uiSelect); - $('').toggle(this.options.types.length > 1).appendTo(this.selectTrigger); + this.selectTrigger = $('').prependTo(this.uiSelect); + $('').toggle(this.options.types.length > 1).appendTo(this.selectTrigger); this.selectLabel = $('').appendTo(this.selectTrigger); @@ -213,7 +213,7 @@ }) // explicitly set optionSelectTrigger display to inline-block otherwise jQ sets it to 'inline' - this.optionSelectTrigger = $('').appendTo(this.uiSelect); + this.optionSelectTrigger = $('').appendTo(this.uiSelect); this.optionSelectLabel = $('').prependTo(this.optionSelectTrigger); RED.popover.tooltip(this.optionSelectLabel,function() { return that.optionValue; @@ -241,7 +241,10 @@ _showTypeMenu: function() { if (this.typeList.length > 1) { this._showMenu(this.menu,this.selectTrigger); - this.menu.find("[value='"+this.propertyType+"']").trigger("focus"); + var selected = this.menu.find("[value='"+this.propertyType+"']"); + setTimeout(function() { + selected.trigger("focus"); + },120); } else { this.input.trigger("focus"); } @@ -262,8 +265,11 @@ } }, _hideMenu: function(menu) { - $(document).off("mousedown.close-property-select"); + $(document).off("mousedown.red-ui-typedInput-close-property-select"); menu.hide(); + menu.css({ + height: "auto" + }); if (this.elementDiv.is(":visible")) { this.input.trigger("focus"); } else if (this.optionSelectTrigger.is(":visible")){ @@ -305,18 +311,21 @@ }); }); menu.css({ - display: "none", + display: "none" }); menu.appendTo(document.body); menu.on('keydown', function(evt) { if (evt.keyCode === 40) { + evt.preventDefault(); // DOWN $(this).children(":focus").next().trigger("focus"); } else if (evt.keyCode === 38) { + evt.preventDefault(); // UP $(this).children(":focus").prev().trigger("focus"); } else if (evt.keyCode === 27) { + evt.preventDefault(); that._hideMenu(menu); } }) @@ -339,6 +348,10 @@ if (top+menuHeight > $(window).height()) { top -= (top+menuHeight)-$(window).height()+5; } + if (top < 0) { + menu.height(menuHeight+top) + top = 0; + } menu.css({ top: top+"px", left: (2+pos.left)+"px", @@ -346,7 +359,7 @@ menu.slideDown(100); this._delay(function() { that.uiSelect.addClass('red-ui-typedInput-focus'); - $(document).on("mousedown.close-property-select", function(event) { + $(document).on("mousedown.red-ui-typedInput-close-property-select", function(event) { if(!$(event.target).closest(menu).length) { that._hideMenu(menu); } @@ -362,8 +375,7 @@ if (labelWidth === 0) { var container = $('
              ').css({ position:"absolute", - top:0, - left:-1000 + top:0 }).appendTo(document.body); var newTrigger = label.clone().appendTo(container); labelWidth = newTrigger.outerWidth(); @@ -465,7 +477,7 @@ return result; }); this.selectTrigger.toggleClass("disabled", this.typeList.length === 1); - this.selectTrigger.find(".fa-sort-desc").toggle(this.typeList.length > 1) + this.selectTrigger.find(".fa-caret-down").toggle(this.typeList.length > 1) if (this.menu) { this.menu.remove(); } diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/deploy.js b/packages/node_modules/@node-red/editor-client/src/js/ui/deploy.js index 5fe8be1e3..833e8f293 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/deploy.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/deploy.js @@ -36,7 +36,7 @@ RED.deploy = (function() { function changeDeploymentType(type) { deploymentType = type; - $("#btn-deploy-icon").attr("src",deploymentTypes[type].img); + $("#red-ui-header-button-deploy-icon").attr("src",deploymentTypes[type].img); } /** @@ -51,19 +51,19 @@ RED.deploy = (function() { var type = options.type || "default"; if (type == "default") { - $('
            • '+ - ''+ - ''+ - ' '+ + $('
            • '+ + ''+ + ''+ + ' '+ ''+RED._("deploy.deploy")+''+ ''+ - ''+ - ''+ - '
              • ').prependTo(".header-toolbar"); - RED.menu.init({id:"btn-deploy-options", + ''+ + '').prependTo(".red-ui-header-toolbar"); + RED.menu.init({id:"red-ui-header-button-deploy-options", options: [ {id:"deploymenu-item-full",toggle:"deploy-type",icon:"red/images/deploy-full.png",label:RED._("deploy.full"),sublabel:RED._("deploy.fullDesc"),selected: true, onselect:function(s) { if(s){changeDeploymentType("full")}}}, {id:"deploymenu-item-flow",toggle:"deploy-type",icon:"red/images/deploy-flows.png",label:RED._("deploy.modifiedFlows"),sublabel:RED._("deploy.modifiedFlowsDesc"), onselect:function(s) {if(s){changeDeploymentType("flows")}}}, @@ -80,20 +80,20 @@ RED.deploy = (function() { icon = options.icon; } - $('
            • '+ - ''+ - ''+ - (icon?' ':'')+ + $('
            • '+ + ''+ + ''+ + (icon?' ':'')+ ''+label+''+ ''+ - ''+ - '
              • ').prependTo(".header-toolbar"); + '').prependTo(".red-ui-header-toolbar"); } - $('#btn-deploy').on("click", function(event) { + $('#red-ui-header-button-deploy').on("click", function(event) { event.preventDefault(); save(); }); @@ -107,10 +107,10 @@ RED.deploy = (function() { window.onbeforeunload = function() { return RED._("deploy.confirm.undeployedChanges"); } - $("#btn-deploy").removeClass("disabled"); + $("#red-ui-header-button-deploy").removeClass("disabled"); } else { window.onbeforeunload = null; - $("#btn-deploy").addClass("disabled"); + $("#red-ui-header-button-deploy").addClass("disabled"); } }); @@ -176,14 +176,14 @@ RED.deploy = (function() { function resolveConflict(currentNodes, activeDeploy) { var message = $('
              '); $('

              ').appendTo(message); - var conflictCheck = $('
              '+ + var conflictCheck = $('
              '+ '
              '+ '
              ').appendTo(message); - var conflictAutoMerge = $('
              '+ - '
              '+ + var conflictAutoMerge = $('
              '+ + '
              '+ '
              ').hide().appendTo(message); - var conflictManualMerge = $('
              '+ - '
              '+ + var conflictManualMerge = $('
              '+ + '
              '+ '
              ').hide().appendTo(message); message.i18n(); @@ -196,22 +196,22 @@ RED.deploy = (function() { } }, { - id: "node-dialog-confirm-deploy-review", + id: "red-ui-deploy-dialog-confirm-deploy-review", text: RED._("deploy.confirm.button.review"), class: "primary disabled", click: function() { - if (!$("#node-dialog-confirm-deploy-review").hasClass('disabled')) { + if (!$("#red-ui-deploy-dialog-confirm-deploy-review").hasClass('disabled')) { RED.diff.showRemoteDiff(); conflictNotification.close(); } } }, { - id: "node-dialog-confirm-deploy-merge", + id: "red-ui-deploy-dialog-confirm-deploy-merge", text: RED._("deploy.confirm.button.merge"), class: "primary disabled", click: function() { - if (!$("#node-dialog-confirm-deploy-merge").hasClass('disabled')) { + if (!$("#red-ui-deploy-dialog-confirm-deploy-merge").hasClass('disabled')) { RED.diff.mergeDiff(currentDiff); conflictNotification.close(); } @@ -220,7 +220,7 @@ RED.deploy = (function() { ]; if (activeDeploy) { buttons.push({ - id: "node-dialog-confirm-deploy-overwrite", + id: "red-ui-deploy-dialog-confirm-deploy-overwrite", text: RED._("deploy.confirm.button.overwrite"), class: "primary", click: function() { @@ -245,11 +245,11 @@ RED.deploy = (function() { var d = Object.keys(diff.conflicts); if (d.length === 0) { conflictAutoMerge.show(); - $("#node-dialog-confirm-deploy-merge").removeClass('disabled') + $("#red-ui-deploy-dialog-confirm-deploy-merge").removeClass('disabled') } else { conflictManualMerge.show(); } - $("#node-dialog-confirm-deploy-review").removeClass('disabled') + $("#red-ui-deploy-dialog-confirm-deploy-review").removeClass('disabled') },ellapsed); }) } @@ -266,15 +266,15 @@ RED.deploy = (function() { } function restart() { var startTime = Date.now(); - $(".deploy-button-content").css('opacity',0); - $(".deploy-button-spinner").show(); - var deployWasEnabled = !$("#btn-deploy").hasClass("disabled"); - $("#btn-deploy").addClass("disabled"); + $(".red-ui-deploy-button-content").css('opacity',0); + $(".red-ui-deploy-button-spinner").show(); + var deployWasEnabled = !$("#red-ui-header-button-deploy").hasClass("disabled"); + $("#red-ui-header-button-deploy").addClass("disabled"); deployInflight = true; - $("#header-shade").show(); - $("#editor-shade").show(); - $("#palette-shade").show(); - $("#sidebar-shade").show(); + $("#red-ui-header-shade").show(); + $("#red-ui-editor-shade").show(); + $("#red-ui-palette-shade").show(); + $("#red-ui-sidebar-shade").show(); $.ajax({ url:"flows", @@ -284,12 +284,12 @@ RED.deploy = (function() { } }).done(function(data,textStatus,xhr) { if (deployWasEnabled) { - $("#btn-deploy").removeClass("disabled"); + $("#red-ui-header-button-deploy").removeClass("disabled"); } RED.notify('

              '+RED._("deploy.successfulRestart")+'

              ',"success"); }).fail(function(xhr,textStatus,err) { if (deployWasEnabled) { - $("#btn-deploy").removeClass("disabled"); + $("#red-ui-header-button-deploy").removeClass("disabled"); } if (xhr.status === 401) { RED.notify(RED._("deploy.deployFailed",{message:RED._("user.notAuthorized")}),"error"); @@ -304,17 +304,17 @@ RED.deploy = (function() { deployInflight = false; var delta = Math.max(0,300-(Date.now()-startTime)); setTimeout(function() { - $(".deploy-button-content").css('opacity',1); - $(".deploy-button-spinner").hide(); - $("#header-shade").hide(); - $("#editor-shade").hide(); - $("#palette-shade").hide(); - $("#sidebar-shade").hide(); + $(".red-ui-deploy-button-content").css('opacity',1); + $(".red-ui-deploy-button-spinner").hide(); + $("#red-ui-header-shade").hide(); + $("#red-ui-editor-shade").hide(); + $("#red-ui-palette-shade").hide(); + $("#red-ui-sidebar-shade").hide(); },delta); }); } function save(skipValidation,force) { - if (!$("#btn-deploy").hasClass("disabled")) { + if (!$("#red-ui-header-button-deploy").hasClass("disabled")) { if (!RED.user.hasPermission("flows.write")) { RED.notify(RED._("user.errors.deploy"),"error"); return; @@ -355,13 +355,13 @@ RED.deploy = (function() { if (hasUnknown && !ignoreDeployWarnings.unknown) { showWarning = true; notificationMessage = "

              "+RED._('deploy.confirm.unknown')+"

              "+ - '
              • '+cropList(unknownNodes).map(function(n) { return sanitize(n) }).join("
              • ")+"

              "+ + '

              • '+cropList(unknownNodes).map(function(n) { return sanitize(n) }).join("
              • ")+"

              "+ RED._('deploy.confirm.confirm')+ "

              "; notificationButtons= [ { - id: "node-dialog-confirm-deploy-deploy", + id: "red-ui-deploy-dialog-confirm-deploy-deploy", text: RED._("deploy.confirm.button.confirm"), class: "primary", click: function() { @@ -375,12 +375,12 @@ RED.deploy = (function() { invalidNodes.sort(sortNodeInfo); notificationMessage = "

              "+RED._('deploy.confirm.improperlyConfigured')+"

              "+ - '
              • '+cropList(invalidNodes.map(function(A) { return sanitize( (A.tab?"["+A.tab+"] ":"")+A.label+" ("+A.type+")")})).join("
              • ")+"

              "+ + '

              • '+cropList(invalidNodes.map(function(A) { return sanitize( (A.tab?"["+A.tab+"] ":"")+A.label+" ("+A.type+")")})).join("
              • ")+"

              "+ RED._('deploy.confirm.confirm')+ "

              "; notificationButtons= [ { - id: "node-dialog-confirm-deploy-deploy", + id: "red-ui-deploy-dialog-confirm-deploy-deploy", text: RED._("deploy.confirm.button.confirm"), class: "primary", click: function() { @@ -411,9 +411,9 @@ RED.deploy = (function() { var nns = RED.nodes.createCompleteNodeSet(); var startTime = Date.now(); - $(".deploy-button-content").css('opacity',0); - $(".deploy-button-spinner").show(); - $("#btn-deploy").addClass("disabled"); + $(".red-ui-deploy-button-content").css('opacity',0); + $(".red-ui-deploy-button-spinner").show(); + $("#red-ui-header-button-deploy").addClass("disabled"); var data = {flows:nns}; @@ -422,10 +422,10 @@ RED.deploy = (function() { } deployInflight = true; - $("#header-shade").show(); - $("#editor-shade").show(); - $("#palette-shade").show(); - $("#sidebar-shade").show(); + $("#red-ui-header-shade").show(); + $("#red-ui-editor-shade").show(); + $("#red-ui-palette-shade").show(); + $("#red-ui-sidebar-shade").show(); $.ajax({ url:"flows", type: "POST", @@ -476,7 +476,7 @@ RED.deploy = (function() { RED.events.emit("deploy"); }).fail(function(xhr,textStatus,err) { RED.nodes.dirty(true); - $("#btn-deploy").removeClass("disabled"); + $("#red-ui-header-button-deploy").removeClass("disabled"); if (xhr.status === 401) { RED.notify(RED._("deploy.deployFailed",{message:RED._("user.notAuthorized")}),"error"); } else if (xhr.status === 409) { @@ -490,12 +490,12 @@ RED.deploy = (function() { deployInflight = false; var delta = Math.max(0,300-(Date.now()-startTime)); setTimeout(function() { - $(".deploy-button-content").css('opacity',1); - $(".deploy-button-spinner").hide(); - $("#header-shade").hide(); - $("#editor-shade").hide(); - $("#palette-shade").hide(); - $("#sidebar-shade").hide(); + $(".red-ui-deploy-button-content").css('opacity',1); + $(".red-ui-deploy-button-spinner").hide(); + $("#red-ui-header-shade").hide(); + $("#red-ui-editor-shade").hide(); + $("#red-ui-palette-shade").hide(); + $("#red-ui-sidebar-shade").hide(); },delta); }); } diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/diff.js b/packages/node_modules/@node-red/editor-client/src/js/ui/diff.js index e73dc7ec1..9ea599e3d 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/diff.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/diff.js @@ -22,7 +22,7 @@ RED.diff = (function() { } function createDiffTable(container,CurrentDiff) { - var diffList = $('
                ').appendTo(container); + var diffList = $('
                  ').appendTo(container); diffList.editableList({ addButton: false, height: "auto", @@ -34,22 +34,22 @@ RED.diff = (function() { var def = object.def; var conflicts = CurrentDiff.conflicts; - var tabDiv = $('
                  ',{class:"node-diff-tab"}).appendTo(container); + var tabDiv = $('
                  ',{class:"red-ui-diff-list-flow"}).appendTo(container); tabDiv.addClass('collapsed'); - var titleRow = $('
                  ',{class:"node-diff-tab-title"}).appendTo(tabDiv); + var titleRow = $('
                  ',{class:"red-ui-diff-list-flow-title"}).appendTo(tabDiv); var nodesDiv = $('
                  ').appendTo(tabDiv); - var originalCell = $('
                  ',{class:"node-diff-node-entry-cell"}).appendTo(titleRow); - var localCell = $('
                  ',{class:"node-diff-node-entry-cell node-diff-node-local"}).appendTo(titleRow); + var originalCell = $('
                  ',{class:"red-ui-diff-list-node-cell"}).appendTo(titleRow); + var localCell = $('
                  ',{class:"red-ui-diff-list-node-cell red-ui-diff-list-node-local"}).appendTo(titleRow); var remoteCell; var selectState; if (remoteDiff) { - remoteCell = $('
                  ',{class:"node-diff-node-entry-cell node-diff-node-remote"}).appendTo(titleRow); + remoteCell = $('
                  ',{class:"red-ui-diff-list-node-cell red-ui-diff-list-node-remote"}).appendTo(titleRow); } - $('').appendTo(originalCell); + $('').appendTo(originalCell); createNodeIcon(tab,def).appendTo(originalCell); var tabForLabel = (object.newTab || object.tab).n; - var titleSpan = $('',{class:"node-diff-tab-title-meta"}).appendTo(originalCell); + var titleSpan = $('',{class:"red-ui-diff-list-flow-title-meta"}).appendTo(originalCell); if (tabForLabel.type === 'tab') { titleSpan.text(tabForLabel.label||tabForLabel.id); } else if (tab.type === 'subflow') { @@ -87,50 +87,50 @@ RED.diff = (function() { } } if (tab.type !== undefined) { - var div = $("
                  ",{class:"node-diff-node-entry node-diff-node-props collapsed"}).appendTo(nodesDiv); - var row = $("
                  ",{class:"node-diff-node-entry-header"}).appendTo(div); - var originalNodeDiv = $("
                  ",{class:"node-diff-node-entry-cell"}).appendTo(row); - var localNodeDiv = $("
                  ",{class:"node-diff-node-entry-cell node-diff-node-local"}).appendTo(row); + var div = $("
                  ",{class:"red-ui-diff-list-node red-ui-diff-list-node-props collapsed"}).appendTo(nodesDiv); + var row = $("
                  ",{class:"red-ui-diff-list-node-header"}).appendTo(div); + var originalNodeDiv = $("
                  ",{class:"red-ui-diff-list-node-cell"}).appendTo(row); + var localNodeDiv = $("
                  ",{class:"red-ui-diff-list-node-cell red-ui-diff-list-node-local"}).appendTo(row); var localChanged = false; var remoteChanged = false; if (!localDiff.newConfig.all[tab.id]) { - localNodeDiv.addClass("node-diff-empty"); + localNodeDiv.addClass("red-ui-diff-empty"); } else if (localDiff.added[tab.id]) { - localNodeDiv.addClass("node-diff-node-added"); + localNodeDiv.addClass("red-ui-diff-status-added"); localChanged = true; - $(' ').appendTo(localNodeDiv); + $(' ').appendTo(localNodeDiv); } else if (localDiff.changed[tab.id]) { - localNodeDiv.addClass("node-diff-node-changed"); + localNodeDiv.addClass("red-ui-diff-status-changed"); localChanged = true; - $(' ').appendTo(localNodeDiv); + $(' ').appendTo(localNodeDiv); } else { - localNodeDiv.addClass("node-diff-node-unchanged"); - $(' ').appendTo(localNodeDiv); + localNodeDiv.addClass("red-ui-diff-status-unchanged"); + $(' ').appendTo(localNodeDiv); } var remoteNodeDiv; if (remoteDiff) { - remoteNodeDiv = $("
                  ",{class:"node-diff-node-entry-cell node-diff-node-remote"}).appendTo(row); + remoteNodeDiv = $("
                  ",{class:"red-ui-diff-list-node-cell red-ui-diff-list-node-remote"}).appendTo(row); if (!remoteDiff.newConfig.all[tab.id]) { - remoteNodeDiv.addClass("node-diff-empty"); + remoteNodeDiv.addClass("red-ui-diff-empty"); if (remoteDiff.deleted[tab.id]) { remoteChanged = true; } } else if (remoteDiff.added[tab.id]) { - remoteNodeDiv.addClass("node-diff-node-added"); + remoteNodeDiv.addClass("red-ui-diff-status-added"); remoteChanged = true; - $(' ').appendTo(remoteNodeDiv); + $(' ').appendTo(remoteNodeDiv); } else if (remoteDiff.changed[tab.id]) { - remoteNodeDiv.addClass("node-diff-node-changed"); + remoteNodeDiv.addClass("red-ui-diff-status-changed"); remoteChanged = true; - $(' ').appendTo(remoteNodeDiv); + $(' ').appendTo(remoteNodeDiv); } else { - remoteNodeDiv.addClass("node-diff-node-unchanged"); - $(' ').appendTo(remoteNodeDiv); + remoteNodeDiv.addClass("red-ui-diff-status-unchanged"); + $(' ').appendTo(remoteNodeDiv); } } - $('').appendTo(originalNodeDiv); + $('').appendTo(originalNodeDiv); $('').text(RED._("diff.flowProperties")).appendTo(originalNodeDiv); row.on("click", function(evt) { @@ -143,13 +143,13 @@ RED.diff = (function() { if (conflicts[tab.id]) { flowStats.conflicts++; - if (!localNodeDiv.hasClass("node-diff-empty")) { - $('').prependTo(localNodeDiv); + if (!localNodeDiv.hasClass("red-ui-diff-empty")) { + $('').prependTo(localNodeDiv); } - if (!remoteNodeDiv.hasClass("node-diff-empty")) { - $('').prependTo(remoteNodeDiv); + if (!remoteNodeDiv.hasClass("red-ui-diff-empty")) { + $('').prependTo(remoteNodeDiv); } - div.addClass("node-diff-node-entry-conflict"); + div.addClass("red-ui-diff-list-node-conflict"); } else { selectState = CurrentDiff.resolutions[tab.id]; } @@ -157,7 +157,7 @@ RED.diff = (function() { createNodeConflictRadioBoxes(tab,div,localNodeDiv,remoteNodeDiv,true,!conflicts[tab.id],selectState,CurrentDiff); } } - // var stats = $('',{class:"node-diff-tab-stats"}).appendTo(titleRow); + // var stats = $('',{class:"red-ui-diff-list-flow-stats"}).appendTo(titleRow); var localNodeCount = 0; var remoteNodeCount = 0; var seen = {}; @@ -183,20 +183,20 @@ RED.diff = (function() { }); } titleRow.on("click", function(evt) { - // if (titleRow.parent().find(".node-diff-node-entry:not(.hide)").length > 0) { + // if (titleRow.parent().find(".red-ui-diff-list-node:not(.hide)").length > 0) { titleRow.parent().toggleClass('collapsed'); if ($(this).parent().hasClass('collapsed')) { - $(this).parent().find('.node-diff-node-entry').addClass('collapsed'); - $(this).parent().find('.debug-message-element').addClass('collapsed'); + $(this).parent().find('.red-ui-diff-list-node').addClass('collapsed'); + $(this).parent().find('.red-ui-debug-msg-element').addClass('collapsed'); } // } }) if (localDiff.deleted[tab.id]) { - $(' ').appendTo(localCell); + $(' ').appendTo(localCell); } else if (object.newTab) { if (localDiff.added[tab.id]) { - $(' ').appendTo(localCell); + $(' ').appendTo(localCell); } else { if (tab.id) { if (localDiff.changed[tab.id]) { @@ -205,37 +205,37 @@ RED.diff = (function() { flowStats.local.unchangedCount++; } } - var localStats = $('',{class:"node-diff-tab-stats"}).appendTo(localCell); - $('').text(RED._('diff.nodeCount',{count:localNodeCount})).appendTo(localStats); + var localStats = $('',{class:"red-ui-diff-list-flow-stats"}).appendTo(localCell); + $('').text(RED._('diff.nodeCount',{count:localNodeCount})).appendTo(localStats); if (flowStats.conflicts + flowStats.local.addedCount + flowStats.local.changedCount + flowStats.local.deletedCount > 0) { - $(' [ ').appendTo(localStats); + $(' [ ').appendTo(localStats); if (flowStats.conflicts > 0) { - $(' '+flowStats.conflicts+'').appendTo(localStats); + $(' '+flowStats.conflicts+'').appendTo(localStats); } if (flowStats.local.addedCount > 0) { - $(' '+flowStats.local.addedCount+'').appendTo(localStats); + $(' '+flowStats.local.addedCount+'').appendTo(localStats); } if (flowStats.local.changedCount > 0) { - $(' '+flowStats.local.changedCount+'').appendTo(localStats); + $(' '+flowStats.local.changedCount+'').appendTo(localStats); } if (flowStats.local.deletedCount > 0) { - $(' '+flowStats.local.deletedCount+'').appendTo(localStats); + $(' '+flowStats.local.deletedCount+'').appendTo(localStats); } - $(' ] ').appendTo(localStats); + $(' ] ').appendTo(localStats); } } } else { - localCell.addClass("node-diff-empty"); + localCell.addClass("red-ui-diff-empty"); } if (remoteDiff) { if (remoteDiff.deleted[tab.id]) { - $(' ').appendTo(remoteCell); + $(' ').appendTo(remoteCell); } else if (object.remoteTab) { if (remoteDiff.added[tab.id]) { - $(' ').appendTo(remoteCell); + $(' ').appendTo(remoteCell); } else { if (tab.id) { if (remoteDiff.changed[tab.id]) { @@ -244,31 +244,31 @@ RED.diff = (function() { flowStats.remote.unchangedCount++; } } - var remoteStats = $('',{class:"node-diff-tab-stats"}).appendTo(remoteCell); - $('').text(RED._('diff.nodeCount',{count:remoteNodeCount})).appendTo(remoteStats); + var remoteStats = $('',{class:"red-ui-diff-list-flow-stats"}).appendTo(remoteCell); + $('').text(RED._('diff.nodeCount',{count:remoteNodeCount})).appendTo(remoteStats); if (flowStats.conflicts + flowStats.remote.addedCount + flowStats.remote.changedCount + flowStats.remote.deletedCount > 0) { - $(' [ ').appendTo(remoteStats); + $(' [ ').appendTo(remoteStats); if (flowStats.conflicts > 0) { - $(' '+flowStats.conflicts+'').appendTo(remoteStats); + $(' '+flowStats.conflicts+'').appendTo(remoteStats); } if (flowStats.remote.addedCount > 0) { - $(' '+flowStats.remote.addedCount+'').appendTo(remoteStats); + $(' '+flowStats.remote.addedCount+'').appendTo(remoteStats); } if (flowStats.remote.changedCount > 0) { - $(' '+flowStats.remote.changedCount+'').appendTo(remoteStats); + $(' '+flowStats.remote.changedCount+'').appendTo(remoteStats); } if (flowStats.remote.deletedCount > 0) { - $(' '+flowStats.remote.deletedCount+'').appendTo(remoteStats); + $(' '+flowStats.remote.deletedCount+'').appendTo(remoteStats); } - $(' ] ').appendTo(remoteStats); + $(' ] ').appendTo(remoteStats); } } } else { - remoteCell.addClass("node-diff-empty"); + remoteCell.addClass("red-ui-diff-empty"); } selectState = ""; if (flowStats.conflicts > 0) { - titleRow.addClass("node-diff-node-entry-conflict"); + titleRow.addClass("red-ui-diff-list-node-conflict"); } else { selectState = CurrentDiff.resolutions[tab.id]; } @@ -279,8 +279,8 @@ RED.diff = (function() { } } - if (tabDiv.find(".node-diff-node-entry").length === 0) { - tabDiv.addClass("node-diff-tab-empty"); + if (tabDiv.find(".red-ui-diff-list-node").length === 0) { + tabDiv.addClass("red-ui-diff-list-flow-empty"); } container.i18n(); } @@ -288,10 +288,10 @@ RED.diff = (function() { return diffList; } function buildDiffPanel(container,diff,options) { - var diffPanel = $('
                  ').appendTo(container); - var diffHeaders = $('
                  ').appendTo(diffPanel); + var diffPanel = $('
                  ').appendTo(container); + var diffHeaders = $('
                  ').appendTo(diffPanel); if (options.mode === "merge") { - diffPanel.addClass("node-dialog-view-diff-panel-merge"); + diffPanel.addClass("red-ui-diff-panel-merge"); } var diffList = createDiffTable(diffPanel, diff); @@ -304,13 +304,13 @@ RED.diff = (function() { if (remoteDiff !== undefined) { - diffPanel.addClass('node-diff-three-way'); + diffPanel.addClass('red-ui-diff-three-way'); var localTitle = options.oldRevTitle || RED._('diff.local'); var remoteTitle = options.newRevTitle || RED._('diff.remote'); $('
                  ').text(localTitle).appendTo(diffHeaders); $('
                  ').text(remoteTitle).appendTo(diffHeaders); } else { - diffPanel.removeClass('node-diff-three-way'); + diffPanel.removeClass('red-ui-diff-three-way'); } return { @@ -458,7 +458,7 @@ RED.diff = (function() { }; } function formatWireProperty(wires,allNodes) { - var result = $("
                  ",{class:"node-diff-property-wires"}) + var result = $("
                  ",{class:"red-ui-diff-list-wires"}) var list = $("
                    "); var c = 0; wires.forEach(function(p,i) { @@ -489,7 +489,7 @@ RED.diff = (function() { return result; } function createNodeIcon(node,def) { - var nodeDiv = $("
                    ",{class:"node-diff-node-entry-node"}); + var nodeDiv = $("
                    ",{class:"red-ui-diff-list-node-icon"}); var colour = RED.utils.getNodeColor(node.type,def); var icon_url = RED.utils.getNodeIcon(def,node); if (node.type === 'tab') { @@ -497,17 +497,16 @@ RED.diff = (function() { } nodeDiv.css('backgroundColor',colour); - var iconContainer = $('
                    ',{class:"palette_icon_container"}).appendTo(nodeDiv); + var iconContainer = $('
                    ',{class:"red-ui-palette-icon-container"}).appendTo(nodeDiv); RED.utils.createIconElement(icon_url, iconContainer, false); return nodeDiv; } function createNode(node,def) { - var nodeTitleDiv = $("
                    ",{class:"node-diff-node-entry-title"}) + var nodeTitleDiv = $("
                    ",{class:"red-ui-diff-list-node-title"}) createNodeIcon(node,def).appendTo(nodeTitleDiv); - var contentDiv = $('
                    ',{class:"node-diff-node-description"}).appendTo(nodeTitleDiv); var nodeLabel = node.label || node.name || node.id; - $('',{class:"node-diff-node-label"}).text(nodeLabel).appendTo(contentDiv); + $('
                    ',{class:"red-ui-diff-list-node-description"}).text(nodeLabel).appendTo(nodeTitleDiv); return nodeTitleDiv; } function createNodeDiffRow(node,stats,CurrentDiff) { @@ -559,80 +558,80 @@ RED.diff = (function() { def = {}; } } - var div = $("
                    ",{class:"node-diff-node-entry collapsed"}); - var row = $("
                    ",{class:"node-diff-node-entry-header"}).appendTo(div); + var div = $("
                    ",{class:"red-ui-diff-list-node collapsed"}); + var row = $("
                    ",{class:"red-ui-diff-list-node-header"}).appendTo(div); - var originalNodeDiv = $("
                    ",{class:"node-diff-node-entry-cell"}).appendTo(row); - var localNodeDiv = $("
                    ",{class:"node-diff-node-entry-cell node-diff-node-local"}).appendTo(row); + var originalNodeDiv = $("
                    ",{class:"red-ui-diff-list-node-cell"}).appendTo(row); + var localNodeDiv = $("
                    ",{class:"red-ui-diff-list-node-cell red-ui-diff-list-node-local"}).appendTo(row); var remoteNodeDiv; var chevron; if (remoteDiff) { - remoteNodeDiv = $("
                    ",{class:"node-diff-node-entry-cell node-diff-node-remote"}).appendTo(row); + remoteNodeDiv = $("
                    ",{class:"red-ui-diff-list-node-cell red-ui-diff-list-node-remote"}).appendTo(row); } - $('').appendTo(originalNodeDiv); + $('').appendTo(originalNodeDiv); if (unChanged) { stats.local.unchangedCount++; createNode(node,def).appendTo(originalNodeDiv); - localNodeDiv.addClass("node-diff-node-unchanged"); - $(' ').appendTo(localNodeDiv); + localNodeDiv.addClass("red-ui-diff-status-unchanged"); + $(' ').appendTo(localNodeDiv); if (remoteDiff) { stats.remote.unchangedCount++; - remoteNodeDiv.addClass("node-diff-node-unchanged"); - $(' ').appendTo(remoteNodeDiv); + remoteNodeDiv.addClass("red-ui-diff-status-unchanged"); + $(' ').appendTo(remoteNodeDiv); } - div.addClass("node-diff-node-unchanged"); + div.addClass("red-ui-diff-status-unchanged"); } else if (localDiff.added[node.id]) { - localNodeDiv.addClass("node-diff-node-added"); + localNodeDiv.addClass("red-ui-diff-status-added"); if (remoteNodeDiv) { - remoteNodeDiv.addClass("node-diff-empty"); + remoteNodeDiv.addClass("red-ui-diff-empty"); } - $(' ').appendTo(localNodeDiv); + $(' ').appendTo(localNodeDiv); createNode(node,def).appendTo(originalNodeDiv); } else if (remoteDiff && remoteDiff.added[node.id]) { - localNodeDiv.addClass("node-diff-empty"); - remoteNodeDiv.addClass("node-diff-node-added"); - $(' ').appendTo(remoteNodeDiv); + localNodeDiv.addClass("red-ui-diff-empty"); + remoteNodeDiv.addClass("red-ui-diff-status-added"); + $(' ').appendTo(remoteNodeDiv); createNode(node,def).appendTo(originalNodeDiv); } else { createNode(node,def).appendTo(originalNodeDiv); if (localDiff.moved[node.id]) { var localN = localDiff.newConfig.all[node.id]; if (!localDiff.deleted[node.z] && node.z !== localN.z && node.z !== "" && !localDiff.newConfig.all[node.z]) { - localNodeDiv.addClass("node-diff-empty"); + localNodeDiv.addClass("red-ui-diff-empty"); } else { - localNodeDiv.addClass("node-diff-node-moved"); + localNodeDiv.addClass("red-ui-diff-status-moved"); var localMovedMessage = ""; if (node.z === localN.z) { localMovedMessage = RED._("diff.type.movedFrom",{id:(localDiff.currentConfig.all[node.id].z||'global')}); } else { localMovedMessage = RED._("diff.type.movedTo",{id:(localN.z||'global')}); } - $(' '+localMovedMessage+'').appendTo(localNodeDiv); + $(' '+localMovedMessage+'').appendTo(localNodeDiv); } localChanged = true; } else if (localDiff.deleted[node.z]) { - localNodeDiv.addClass("node-diff-empty"); + localNodeDiv.addClass("red-ui-diff-empty"); localChanged = true; } else if (localDiff.deleted[node.id]) { - localNodeDiv.addClass("node-diff-node-deleted"); - $(' ').appendTo(localNodeDiv); + localNodeDiv.addClass("red-ui-diff-status-deleted"); + $(' ').appendTo(localNodeDiv); localChanged = true; } else if (localDiff.changed[node.id]) { if (localDiff.newConfig.all[node.id].z !== node.z) { - localNodeDiv.addClass("node-diff-empty"); + localNodeDiv.addClass("red-ui-diff-empty"); } else { - localNodeDiv.addClass("node-diff-node-changed"); - $(' ').appendTo(localNodeDiv); + localNodeDiv.addClass("red-ui-diff-status-changed"); + $(' ').appendTo(localNodeDiv); localChanged = true; } } else { if (localDiff.newConfig.all[node.id].z !== node.z) { - localNodeDiv.addClass("node-diff-empty"); + localNodeDiv.addClass("red-ui-diff-empty"); } else { stats.local.unchangedCount++; - localNodeDiv.addClass("node-diff-node-unchanged"); - $(' ').appendTo(localNodeDiv); + localNodeDiv.addClass("red-ui-diff-status-unchanged"); + $(' ').appendTo(localNodeDiv); } } @@ -640,36 +639,36 @@ RED.diff = (function() { if (remoteDiff.moved[node.id]) { var remoteN = remoteDiff.newConfig.all[node.id]; if (!remoteDiff.deleted[node.z] && node.z !== remoteN.z && node.z !== "" && !remoteDiff.newConfig.all[node.z]) { - remoteNodeDiv.addClass("node-diff-empty"); + remoteNodeDiv.addClass("red-ui-diff-empty"); } else { - remoteNodeDiv.addClass("node-diff-node-moved"); + remoteNodeDiv.addClass("red-ui-diff-status-moved"); var remoteMovedMessage = ""; if (node.z === remoteN.z) { remoteMovedMessage = RED._("diff.type.movedFrom",{id:(remoteDiff.currentConfig.all[node.id].z||'global')}); } else { remoteMovedMessage = RED._("diff.type.movedTo",{id:(remoteN.z||'global')}); } - $(' '+remoteMovedMessage+'').appendTo(remoteNodeDiv); + $(' '+remoteMovedMessage+'').appendTo(remoteNodeDiv); } } else if (remoteDiff.deleted[node.z]) { - remoteNodeDiv.addClass("node-diff-empty"); + remoteNodeDiv.addClass("red-ui-diff-empty"); } else if (remoteDiff.deleted[node.id]) { - remoteNodeDiv.addClass("node-diff-node-deleted"); - $(' ').appendTo(remoteNodeDiv); + remoteNodeDiv.addClass("red-ui-diff-status-deleted"); + $(' ').appendTo(remoteNodeDiv); } else if (remoteDiff.changed[node.id]) { if (remoteDiff.newConfig.all[node.id].z !== node.z) { - remoteNodeDiv.addClass("node-diff-empty"); + remoteNodeDiv.addClass("red-ui-diff-empty"); } else { - remoteNodeDiv.addClass("node-diff-node-changed"); - $(' ').appendTo(remoteNodeDiv); + remoteNodeDiv.addClass("red-ui-diff-status-changed"); + $(' ').appendTo(remoteNodeDiv); } } else { if (remoteDiff.newConfig.all[node.id].z !== node.z) { - remoteNodeDiv.addClass("node-diff-empty"); + remoteNodeDiv.addClass("red-ui-diff-empty"); } else { stats.remote.unchangedCount++; - remoteNodeDiv.addClass("node-diff-node-unchanged"); - $(' ').appendTo(remoteNodeDiv); + remoteNodeDiv.addClass("red-ui-diff-status-unchanged"); + $(' ').appendTo(remoteNodeDiv); } } } @@ -692,13 +691,13 @@ RED.diff = (function() { if (conflicted) { stats.conflicts++; - if (!localNodeDiv.hasClass("node-diff-empty")) { - $('').prependTo(localNodeDiv); + if (!localNodeDiv.hasClass("red-ui-diff-empty")) { + $('').prependTo(localNodeDiv); } - if (!remoteNodeDiv.hasClass("node-diff-empty")) { - $('').prependTo(remoteNodeDiv); + if (!remoteNodeDiv.hasClass("red-ui-diff-empty")) { + $('').prependTo(remoteNodeDiv); } - div.addClass("node-diff-node-entry-conflict"); + div.addClass("red-ui-diff-list-node-conflict"); } else { selectState = CurrentDiff.resolutions[node.id]; } @@ -707,7 +706,7 @@ RED.diff = (function() { row.on("click", function(evt) { $(this).parent().toggleClass('collapsed'); - if($(this).siblings('.node-diff-node-entry-properties').length === 0) { + if($(this).siblings('.red-ui-diff-list-node-properties').length === 0) { createNodePropertiesTable(def,node,localNode,remoteNode).appendTo(div); } }); @@ -722,7 +721,7 @@ RED.diff = (function() { remoteNode = remoteNodeObj.node; } - var nodePropertiesDiv = $("
                    ",{class:"node-diff-node-entry-properties"}); + var nodePropertiesDiv = $("
                    ",{class:"red-ui-diff-list-node-properties"}); var nodePropertiesTable = $("").appendTo(nodePropertiesDiv); var nodePropertiesTableCols = $('').appendTo(nodePropertiesTable); if (remoteNode !== undefined) { @@ -742,25 +741,25 @@ RED.diff = (function() { var status; row = $("").appendTo(nodePropertiesTableBody); - $("").appendTo(nodePropertiesTableBody); - $("").appendTo(nodePropertiesTableBody); - $("").appendTo(nodePropertiesTableBody); - var propertyNameCell = $("').appendTo(table); + var propRow = $('').appendTo(table); $(propRow.children()[1]).text(activeLibrary.type); if (file.props.hasOwnProperty('name')) { - propRow = $('').appendTo(table); + propRow = $('').appendTo(table); $(propRow.children()[1]).text(file.props.name); } for (var p in file.props) { if (file.props.hasOwnProperty(p) && p !== 'name' && p !== 'fn') { - propRow = $('').appendTo(table); + propRow = $('').appendTo(table); $(propRow.children()[0]).text(p); RED.utils.createObjectElement(file.props[p]).appendTo(propRow.children()[1]); } @@ -539,11 +544,11 @@ RED.library = (function() { } }); RED.panels.create({ - container:$("#node-dialog-library-load-panes"), + container:$("#red-ui-library-dialog-load-panes"), dir: "horizontal" }); RED.panels.create({ - container:$("#node-dialog-library-load-preview"), + container:$("#red-ui-library-dialog-load-preview"), dir: "vertical" }); }, diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/notifications.js b/packages/node_modules/@node-red/editor-client/src/js/ui/notifications.js index 533ef513f..54795f568 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/notifications.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/notifications.js @@ -62,7 +62,7 @@ RED.notifications = (function() { } if (options.modal) { - $("#full-shade").show(); + $("#red-ui-full-shade").show(); } if (currentNotifications.length > 4) { @@ -77,14 +77,14 @@ RED.notifications = (function() { } } var n = document.createElement("div"); - n.id="red-notification-"+c; - n.className = "notification"; + n.id="red-ui-notification-"+c; + n.className = "red-ui-notification"; n.fixed = fixed; if (type) { - n.className = "notification notification-"+type; + n.className = "red-ui-notification red-ui-notification-"+type; } if (options.width) { - var parentWidth = $("#notifications").width(); + var parentWidth = $("#red-ui-notifications").width(); if (options.width > parentWidth) { var margin = -(options.width-parentWidth)/2; $(n).css({ @@ -116,7 +116,7 @@ RED.notifications = (function() { } - $("#notifications").append(n); + $("#red-ui-notifications").append(n); if (!RED.notifications.hide) { $(n).slideDown(300); } @@ -142,7 +142,7 @@ RED.notifications = (function() { nn.parentNode.removeChild(nn); } if (options.modal) { - $("#full-shade").hide(); + $("#red-ui-full-shade").hide(); } }; })(); @@ -211,9 +211,9 @@ RED.notifications = (function() { if (nn.hidden) { nn.showNotification(); } else if (!options || !options.silent){ - $(nn).addClass("notification-shake-horizontal"); + $(nn).addClass("red-ui-notification-shake-horizontal"); setTimeout(function() { - $(nn).removeClass("notification-shake-horizontal"); + $(nn).removeClass("red-ui-notification-shake-horizontal"); },300); } @@ -263,14 +263,14 @@ RED.notifications = (function() { return { init: function() { - notificationButtonWrapper = $('
                  1. '+ - ''+ - ''+ - ''+ - '
                    2. ').prependTo(".header-toolbar").hide(); - $('#btn-notifications').on("click", function() { - showPersistent(); - }) + $('
                    ').appendTo("#red-ui-editor"); + + notificationButtonWrapper = $('
                  2. ').prependTo(".red-ui-header-toolbar").hide(); + $('') + .appendTo(notificationButtonWrapper) + .on("click", function() { + showPersistent(); + }) }, notify: notify } diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/palette-editor.js b/packages/node_modules/@node-red/editor-client/src/js/ui/palette-editor.js index 7e224b524..074a54469 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/palette-editor.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/palette-editor.js @@ -235,12 +235,7 @@ RED.palette.editor = (function() { if (def && def.color) { swatch.css({background:RED.utils.getNodeColor(t,def)}); swatch.css({border: "1px solid "+getContrastingBorder(swatch.css('backgroundColor'))}) - - } else { - swatch.css({background:"#eee",border:"1px dashed #999"}) } - } else { - swatch.css({background:"#eee",border:"1px dashed #999"}) } } nodeEntries[module].setUseCount[setName] = inUseCount; @@ -257,7 +252,7 @@ RED.palette.editor = (function() { setElements.enableButton.text(RED._('palette.editor.enable')); } } - setElements.setRow.toggleClass("palette-module-set-disabled",!set.enabled); + setElements.setRow.toggleClass("red-ui-palette-module-set-disabled",!set.enabled); } } @@ -350,7 +345,7 @@ RED.palette.editor = (function() { catalogueLoadErrors = true; } if (catalogueCount > 1) { - $(".palette-module-shade-status").html(RED._('palette.editor.loading')+"
                    "+catalogueLoadStatus.length+"/"+catalogueCount); + $(".red-ui-palette-module-shade-status").html(RED._('palette.editor.loading')+"
                    "+catalogueLoadStatus.length+"/"+catalogueCount); } if (catalogueLoadStatus.length === catalogueCount) { if (catalogueLoadErrors) { @@ -358,7 +353,7 @@ RED.palette.editor = (function() { } var delta = 250-(Date.now() - catalogueLoadStart); setTimeout(function() { - $("#palette-module-install-shade").hide(); + $("#red-ui-palette-module-install-shade").hide(); },Math.max(delta,0)); } @@ -370,15 +365,15 @@ RED.palette.editor = (function() { loadedIndex = {}; packageList.editableList('empty'); - $(".palette-module-shade-status").text(RED._('palette.editor.loading')); + $(".red-ui-palette-module-shade-status").text(RED._('palette.editor.loading')); var catalogues = RED.settings.theme('palette.catalogues')||['https://catalogue.nodered.org/catalogue.json']; catalogueLoadStatus = []; catalogueLoadErrors = false; catalogueCount = catalogues.length; if (catalogues.length > 1) { - $(".palette-module-shade-status").html(RED._('palette.editor.loading')+"
                    0/"+catalogues.length); + $(".red-ui-palette-module-shade-status").html(RED._('palette.editor.loading')+"
                    0/"+catalogues.length); } - $("#palette-module-install-shade").show(); + $("#red-ui-palette-module-install-shade").show(); catalogueLoadStart = Date.now(); var handled = 0; catalogues.forEach(function(catalog,index) { @@ -542,15 +537,15 @@ RED.palette.editor = (function() { function createSettingsPane() { - settingsPane = $('
                    '); - var content = $('
                    '+ - '
                      '+ + settingsPane = $('
                      '); + var content = $('
                      '+ + '
                        '+ '
                        ').appendTo(settingsPane); editorTabs = RED.tabs.create({ - element: settingsPane.find('#palette-editor-tabs'), + element: settingsPane.find('#red-ui-palette-editor-tabs'), onchange:function(tab) { - content.find(".palette-editor-tab").hide(); + content.find(".red-ui-palette-editor-tab").hide(); tab.content.show(); if (filterInput) { filterInput.searchBox('value',""); @@ -572,7 +567,7 @@ RED.palette.editor = (function() { }); - var modulesTab = $('
                        ',{class:"palette-editor-tab"}).appendTo(content); + var modulesTab = $('
                        ',{class:"red-ui-palette-editor-tab"}).appendTo(content); editorTabs.addTab({ id: 'nodes', @@ -580,7 +575,7 @@ RED.palette.editor = (function() { content: modulesTab }) - var filterDiv = $('
                        ',{class:"palette-search"}).appendTo(modulesTab); + var filterDiv = $('
                        ',{class:"red-ui-palette-search"}).appendTo(modulesTab); filterInput = $('') .appendTo(filterDiv) .searchBox({ @@ -591,7 +586,7 @@ RED.palette.editor = (function() { }); - nodeList = $('
                          ',{id:"palette-module-list", style:"position: absolute;top: 35px;bottom: 0;left: 0;right: 0px;"}).appendTo(modulesTab).editableList({ + nodeList = $('
                            ',{id:"red-ui-palette-module-list", style:"position: absolute;top: 35px;bottom: 0;left: 0;right: 0px;"}).appendTo(modulesTab).editableList({ addButton: false, scrollOnAdd: false, sort: function(A,B) { @@ -607,20 +602,20 @@ RED.palette.editor = (function() { addItem: function(container,i,object) { var entry = object.info; if (entry) { - var headerRow = $('
                            ',{class:"palette-module-header"}).appendTo(container); - var titleRow = $('
                            ').appendTo(headerRow); + var headerRow = $('
                            ',{class:"red-ui-palette-module-header"}).appendTo(container); + var titleRow = $('
                            ').appendTo(headerRow); $('').text(entry.name).appendTo(titleRow); - var metaRow = $('
                            ').appendTo(headerRow); + var metaRow = $('
                            ').appendTo(headerRow); var versionSpan = $('').text(entry.version).appendTo(metaRow); - var errorRow = $('
                            ').hide().appendTo(headerRow); - var errorList = $('
                              ').appendTo(errorRow); - var buttonRow = $('
                              ',{class:"palette-module-meta"}).appendTo(headerRow); - var setButton = $(' ').appendTo(buttonRow); + var errorRow = $('
                              ').hide().appendTo(headerRow); + var errorList = $('
                                ').appendTo(errorRow); + var buttonRow = $('
                                ',{class:"red-ui-palette-module-meta"}).appendTo(headerRow); + var setButton = $(' ').appendTo(buttonRow); var setCount = $('').appendTo(setButton); - var buttonGroup = $('
                                ',{class:"palette-module-button-group"}).appendTo(buttonRow); + var buttonGroup = $('
                                ',{class:"red-ui-palette-module-button-group"}).appendTo(buttonRow); - var updateButton = $('').text(RED._('palette.editor.update')).appendTo(buttonGroup); + var updateButton = $('').text(RED._('palette.editor.update')).appendTo(buttonGroup); updateButton.attr('id','up_'+Math.floor(Math.random()*1000000000)); updateButton.on("click", function(evt) { evt.preventDefault(); @@ -631,7 +626,7 @@ RED.palette.editor = (function() { }) - var removeButton = $('').text(RED._('palette.editor.remove')).appendTo(buttonGroup); + var removeButton = $('').text(RED._('palette.editor.remove')).appendTo(buttonGroup); removeButton.attr('id','up_'+Math.floor(Math.random()*1000000000)); removeButton.on("click", function(evt) { evt.preventDefault(); @@ -640,10 +635,10 @@ RED.palette.editor = (function() { if (!entry.local) { removeButton.hide(); } - var enableButton = $('').text(RED._('palette.editor.disableall')).appendTo(buttonGroup); + var enableButton = $('').text(RED._('palette.editor.disableall')).appendTo(buttonGroup); - var contentRow = $('
                                ',{class:"palette-module-content"}).appendTo(container); - var shade = $('
                                ').appendTo(container); + var contentRow = $('
                                ',{class:"red-ui-palette-module-content"}).appendTo(container); + var shade = $('
                                ').appendTo(container); object.elements = { updateButton: updateButton, @@ -674,15 +669,15 @@ RED.palette.editor = (function() { }); setList.forEach(function(setName) { var set = entry.sets[setName]; - var setRow = $('
                                ',{class:"palette-module-set"}).appendTo(contentRow); - var buttonGroup = $('
                                ',{class:"palette-module-set-button-group"}).appendTo(setRow); + var setRow = $('
                                ',{class:"red-ui-palette-module-set"}).appendTo(contentRow); + var buttonGroup = $('
                                ',{class:"red-ui-palette-module-set-button-group"}).appendTo(setRow); var typeSwatches = {}; set.types.forEach(function(t) { - var typeDiv = $('
                                ',{class:"palette-module-type"}).appendTo(setRow); - typeSwatches[t] = $('',{class:"palette-module-type-swatch"}).appendTo(typeDiv); - $('',{class:"palette-module-type-node"}).text(t).appendTo(typeDiv); + var typeDiv = $('
                                ',{class:"red-ui-palette-module-type"}).appendTo(setRow); + typeSwatches[t] = $('',{class:"red-ui-palette-module-type-swatch"}).appendTo(typeDiv); + $('',{class:"red-ui-palette-module-type-node"}).text(t).appendTo(typeDiv); }) - var enableButton = $('').appendTo(buttonGroup); + var enableButton = $('').appendTo(buttonGroup); enableButton.on("click", function(evt) { evt.preventDefault(); if (object.setUseCount[setName] === 0) { @@ -726,7 +721,7 @@ RED.palette.editor = (function() { - var installTab = $('
                                ',{class:"palette-editor-tab hide"}).appendTo(content); + var installTab = $('
                                ',{class:"red-ui-palette-editor-tab hide"}).appendTo(content); editorTabs.addTab({ id: 'install', @@ -734,9 +729,9 @@ RED.palette.editor = (function() { content: installTab }) - var toolBar = $('
                                ',{class:"palette-editor-toolbar"}).appendTo(installTab); + var toolBar = $('
                                ',{class:"red-ui-palette-editor-toolbar"}).appendTo(installTab); - var searchDiv = $('
                                ',{class:"palette-search"}).appendTo(installTab); + var searchDiv = $('
                                ',{class:"red-ui-palette-search"}).appendTo(installTab); searchInput = $('') .appendTo(searchDiv) .searchBox({ @@ -761,9 +756,9 @@ RED.palette.editor = (function() { $('').text(RED._("palette.editor.sort")+' ').appendTo(toolBar); var sortGroup = $('').appendTo(toolBar); - var sortRelevance = $('').appendTo(sortGroup); - var sortAZ = $('').appendTo(sortGroup); - var sortRecent = $('').appendTo(sortGroup); + var sortRelevance = $('').appendTo(sortGroup); + var sortAZ = $('').appendTo(sortGroup); + var sortRecent = $('').appendTo(sortGroup); var sortOpts = [ @@ -777,7 +772,7 @@ RED.palette.editor = (function() { if ($(this).hasClass("selected")) { return; } - $(".palette-editor-install-sort-option").removeClass("selected"); + $(".red-ui-palette-editor-install-sort-option").removeClass("selected"); $(this).addClass("selected"); activeSort = opt.func; refreshFilteredItems(); @@ -785,7 +780,7 @@ RED.palette.editor = (function() { }); var refreshSpan = $('').appendTo(toolBar); - var refreshButton = $('').appendTo(refreshSpan); + var refreshButton = $('').appendTo(refreshSpan); refreshButton.on("click", function(e) { e.preventDefault(); loadedList = []; @@ -802,8 +797,8 @@ RED.palette.editor = (function() { return } if (object.more) { - container.addClass('palette-module-more'); - var moreRow = $('
                                ',{class:"palette-module-header palette-module"}).appendTo(container); + container.addClass('red-ui-palette-module-more'); + var moreRow = $('
                                ',{class:"red-ui-palette-module-header palette-module"}).appendTo(container); var moreLink = $('').text(RED._('palette.editor.more',{count:object.more})).appendTo(moreRow); moreLink.on("click", function(e) { e.preventDefault(); @@ -819,15 +814,15 @@ RED.palette.editor = (function() { } if (object.info) { var entry = object.info; - var headerRow = $('
                                ',{class:"palette-module-header"}).appendTo(container); - var titleRow = $('
                                ').appendTo(headerRow); - $('',{class:"palette-module-name"}).text(entry.name||entry.id).appendTo(titleRow); - $('').attr('href',entry.url).appendTo(titleRow); - var descRow = $('
                                ').appendTo(headerRow); - $('
                                ',{class:"palette-module-description"}).text(entry.description).appendTo(descRow); - var metaRow = $('
                                ').appendTo(headerRow); - $(' '+entry.version+'').appendTo(metaRow); - $(' '+formatUpdatedAt(entry.updated_at)+'').appendTo(metaRow); + var headerRow = $('
                                ',{class:"red-ui-palette-module-header"}).appendTo(container); + var titleRow = $('
                                ').appendTo(headerRow); + $('').text(entry.name||entry.id).appendTo(titleRow); + $('').attr('href',entry.url).appendTo(titleRow); + var descRow = $('
                                ').appendTo(headerRow); + $('
                                ',{class:"red-ui-palette-module-description"}).text(entry.description).appendTo(descRow); + var metaRow = $('
                                ').appendTo(headerRow); + $(' '+entry.version+'').appendTo(metaRow); + $(' '+formatUpdatedAt(entry.updated_at)+'').appendTo(metaRow); var duplicateType = false; if (entry.types && entry.types.length > 0) { @@ -839,12 +834,12 @@ RED.palette.editor = (function() { break; } } - // $('
                                ',{class:"palette-module-meta"}).text(entry.types.join(",")).appendTo(headerRow); + // $('
                                ',{class:"red-ui-palette-module-meta"}).text(entry.types.join(",")).appendTo(headerRow); } - var buttonRow = $('
                                ',{class:"palette-module-meta"}).appendTo(headerRow); - var buttonGroup = $('
                                ',{class:"palette-module-button-group"}).appendTo(buttonRow); - var installButton = $('').text(RED._('palette.editor.install')).appendTo(buttonGroup); + var buttonRow = $('
                                ',{class:"red-ui-palette-module-meta"}).appendTo(headerRow); + var buttonGroup = $('
                                ',{class:"red-ui-palette-module-button-group"}).appendTo(buttonRow); + var installButton = $('').text(RED._('palette.editor.install')).appendTo(buttonGroup); installButton.on("click", function(e) { e.preventDefault(); if (!$(this).hasClass('disabled')) { @@ -875,7 +870,7 @@ RED.palette.editor = (function() { } }); - $('
                                ').appendTo(installTab); + $('
                                ').appendTo(installTab); } function update(entry,version,container,done) { if (RED.settings.theme('palette.editable') === false) { @@ -894,11 +889,11 @@ RED.palette.editor = (function() { }, { text: RED._("palette.editor.confirm.button.update"), - class: "primary palette-module-install-confirm-button-update", + class: "primary red-ui-palette-module-install-confirm-button-update", click: function() { var spinner = RED.utils.addSpinnerOverlay(container, true); var buttonRow = $('
                                ').appendTo(spinner); - $('').text(RED._("eventLog.view")).appendTo(buttonRow).on("click", function(evt) { + $('').text(RED._("eventLog.view")).appendTo(buttonRow).on("click", function(evt) { evt.preventDefault(); RED.actions.invoke("core:show-event-log"); }); @@ -953,11 +948,11 @@ RED.palette.editor = (function() { }, { text: RED._("palette.editor.confirm.button.remove"), - class: "primary palette-module-install-confirm-button-remove", + class: "primary red-ui-palette-module-install-confirm-button-remove", click: function() { var spinner = RED.utils.addSpinnerOverlay(container, true); var buttonRow = $('
                                ').appendTo(spinner); - $('').text(RED._("eventLog.view")).appendTo(buttonRow).on("click", function(evt) { + $('').text(RED._("eventLog.view")).appendTo(buttonRow).on("click", function(evt) { evt.preventDefault(); RED.actions.invoke("core:show-event-log"); }); @@ -1009,7 +1004,7 @@ RED.palette.editor = (function() { if (entry.url) { buttons.push({ text: RED._("palette.editor.confirm.button.review"), - class: "primary palette-module-install-confirm-button-install", + class: "primary red-ui-palette-module-install-confirm-button-install", click: function() { var url = entry.url||""; window.open(url); @@ -1018,12 +1013,12 @@ RED.palette.editor = (function() { } buttons.push({ text: RED._("palette.editor.confirm.button.install"), - class: "primary palette-module-install-confirm-button-install", + class: "primary red-ui-palette-module-install-confirm-button-install", click: function() { var spinner = RED.utils.addSpinnerOverlay(container, true); var buttonRow = $('
                                ').appendTo(spinner); - $('').text(RED._("eventLog.view")).appendTo(buttonRow).on("click", function(evt) { + $('').text(RED._("eventLog.view")).appendTo(buttonRow).on("click", function(evt) { evt.preventDefault(); RED.actions.invoke("core:show-event-log"); }); diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/palette.js b/packages/node_modules/@node-red/editor-client/src/js/ui/palette.js index 8a22eecbb..e8fbb0460 100755 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/palette.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/palette.js @@ -23,43 +23,43 @@ RED.palette = (function() { var sidebarControls; function createCategory(originalCategory,rootCategory,category,ns) { - if ($("#palette-base-category-"+rootCategory).length === 0) { + if ($("#red-ui-palette-base-category-"+rootCategory).length === 0) { createCategoryContainer(originalCategory,rootCategory, ns+":palette.label."+rootCategory); } - $("#palette-container-"+rootCategory).show(); - if ($("#palette-"+category).length === 0) { - $("#palette-base-category-"+rootCategory).append('
                                '); + $("#red-ui-palette-container-"+rootCategory).show(); + if ($("#red-ui-palette-"+category).length === 0) { + $("#red-ui-palette-base-category-"+rootCategory).append('
                                '); } } function createCategoryContainer(originalCategory,category, labelId) { var label = RED._(labelId, {defaultValue:category}); label = (label || category).replace(/_/g, " "); - var catDiv = $('
                                '+ - '
                                '+label+'
                                '+ - '
                                '+ - '
                                '+ - '
                                '+ - '
                                '+ + var catDiv = $('
                                '+ + '
                                '+label+'
                                '+ + '
                                '+ + '
                                '+ + '
                                '+ + '
                                '+ '
                                '+ - '
                                ').appendTo("#palette-container"); + '
                                ').appendTo("#red-ui-palette-container"); catDiv.data('category',originalCategory); catDiv.data('label',label); categoryContainers[category] = { container: catDiv, close: function() { - catDiv.removeClass("palette-open"); - catDiv.addClass("palette-closed"); - $("#palette-base-category-"+category).slideUp(); - $("#palette-header-"+category+" i").removeClass("expanded"); + catDiv.removeClass("red-ui-palette-open"); + catDiv.addClass("red-ui-palette-closed"); + $("#red-ui-palette-base-category-"+category).slideUp(); + $("#red-ui-palette-header-"+category+" i").removeClass("expanded"); }, open: function() { - catDiv.addClass("palette-open"); - catDiv.removeClass("palette-closed"); - $("#palette-base-category-"+category).slideDown(); - $("#palette-header-"+category+" i").addClass("expanded"); + catDiv.addClass("red-ui-palette-open"); + catDiv.removeClass("red-ui-palette-closed"); + $("#red-ui-palette-base-category-"+category).slideDown(); + $("#red-ui-palette-header-"+category+" i").addClass("expanded"); }, toggle: function() { - if (catDiv.hasClass("palette-open")) { + if (catDiv.hasClass("red-ui-palette-open")) { categoryContainers[category].close(); } else { categoryContainers[category].open(); @@ -67,7 +67,7 @@ RED.palette = (function() { } }; - $("#palette-header-"+category).on('click', function(e) { + $("#red-ui-palette-header-"+category).on('click', function(e) { categoryContainers[category].toggle(); }); } @@ -85,17 +85,17 @@ RED.palette = (function() { var displayLines = []; var currentLine = words[0]; - var currentLineWidth = RED.view.calculateTextWidth(currentLine, "palette_label", 0); + var currentLineWidth = RED.view.calculateTextWidth(currentLine, "red-ui-palette-label", 0); for (var i=1;i', { - class: "palette_label" - + (((!def.align && def.inputs !== 0 && def.outputs === 0) || "right" === def.align) ? " palette_label_right" : "") + class: "red-ui-palette-label" + + (((!def.align && def.inputs !== 0 && def.outputs === 0) || "right" === def.align) ? " red-ui-palette-label-right" : "") }).appendTo(d); - d.className="palette_node"; + d.className="red-ui-palette-node"; if (def.icon) { var icon_url = RED.utils.getNodeIcon(def); var iconContainer = $('
                                ', { - class: "palette_icon_container" - + (((!def.align && def.inputs !== 0 && def.outputs === 0) || "right" === def.align) ? " palette_icon_container_right" : "") + class: "red-ui-palette-icon-container" + + (((!def.align && def.inputs !== 0 && def.outputs === 0) || "right" === def.align) ? " red-ui-palette-icon-container-right" : "") }).appendTo(d); RED.utils.createIconElement(icon_url, iconContainer, true); } @@ -197,19 +197,19 @@ RED.palette = (function() { if (def.outputs > 0) { var portOut = document.createElement("div"); - portOut.className = "palette_port palette_port_output"; + portOut.className = "red-ui-palette-port red-ui-palette-port-output"; d.appendChild(portOut); } if (def.inputs > 0) { var portIn = document.createElement("div"); - portIn.className = "palette_port palette_port_input"; + portIn.className = "red-ui-palette-port red-ui-palette-port-input"; d.appendChild(portIn); } createCategory(def.category,rootCategory,category,(coreCategories.indexOf(rootCategory) !== -1)?"node-red":def.set.id); - $("#palette-"+category).append(d); + $("#red-ui-palette-"+category).append(d); $(d).data('category',rootCategory); @@ -236,15 +236,15 @@ RED.palette = (function() { RED.view.focus(); var helpText; if (nt.indexOf("subflow:") === 0) { - helpText = marked(RED.nodes.subflow(nt.substring(8)).info||"")||(''+RED._("sidebar.info.none")+''); + helpText = marked(RED.nodes.subflow(nt.substring(8)).info||"")||(''+RED._("sidebar.info.none")+''); } else { - helpText = $("script[data-help-name='"+d.type+"']").html()||(''+RED._("sidebar.info.none")+''); + helpText = $("script[data-help-name='"+d.type+"']").html()||(''+RED._("sidebar.info.none")+''); } RED.sidebar.info.set(helpText,RED._("sidebar.info.nodeHelp")); }); - var chart = $("#chart"); + var chart = $("#red-ui-workspace-chart"); var chartOffset = chart.offset(); - var chartSVG = $("#chart>svg").get(0); + var chartSVG = $("#red-ui-workspace-chart>svg").get(0); var activeSpliceLink; var mouseX; var mouseY; @@ -253,16 +253,16 @@ RED.palette = (function() { var paletteTop; $(d).draggable({ helper: 'clone', - appendTo: 'body', + appendTo: '#red-ui-editor', revert: 'invalid', - revertDuration: 300, - containment:'#main-container', + revertDuration: 200, + containment:'#red-ui-main-container', start: function() { - paletteWidth = $("#palette").width(); - paletteTop = $("#palette").parent().position().top + $("#palette-container").position().top; + paletteWidth = $("#red-ui-palette").width(); + paletteTop = $("#red-ui-palette").parent().position().top + $("#red-ui-palette-container").position().top; RED.view.focus(); }, - stop: function() { d3.select('.link_splice').classed('link_splice',false); if (spliceTimer) { clearTimeout(spliceTimer); spliceTimer = null;}}, + stop: function() { d3.select('.red-ui-flow-link-splice').classed('red-ui-flow-link-splice',false); if (spliceTimer) { clearTimeout(spliceTimer); spliceTimer = null;}}, drag: function(e,ui) { ui.originalPosition.left = $('#' + e.target.id).offset().left; @@ -293,7 +293,7 @@ RED.palette = (function() { for (var i=0;i 0) { var portIn = document.createElement("div"); - portIn.className = "palette_port palette_port_input"; + portIn.className = "red-ui-palette-port red-ui-palette-port-input"; paletteNode.append(portIn); } else if (portInput.length !== 0 && sf.in.length === 0) { portInput.remove(); @@ -407,7 +407,7 @@ RED.palette = (function() { if (portOutput.length === 0 && sf.out.length > 0) { var portOut = document.createElement("div"); - portOut.className = "palette_port palette_port_output"; + portOut.className = "red-ui-palette-port red-ui-palette-port-output"; paletteNode.append(portOut); } else if (portOutput.length !== 0 && sf.out.length === 0) { portOutput.remove(); @@ -421,17 +421,17 @@ RED.palette = (function() { var category = newCategory.replace(/ /g,"_"); createCategory(newCategory,category,category,"node-red"); - var currentCategoryNode = paletteNode.closest(".palette-category"); + var currentCategoryNode = paletteNode.closest(".red-ui-palette-category"); var newCategoryNode = $("#palette-"+category); newCategoryNode.append(paletteNode); - if (newCategoryNode.find(".palette_node").length === 1) { + if (newCategoryNode.find(".red-ui-palette-node").length === 1) { categoryContainers[category].open(); } paletteNode.data('category',newCategory); - if (currentCategoryNode.find(".palette_node").length === 0) { + if (currentCategoryNode.find(".red-ui-palette-node").length === 0) { if (currentCategoryNode.find("i").hasClass("expanded")) { - currentCategoryNode.find(".palette-content").slideToggle(); + currentCategoryNode.find(".red-ui-palette-content").slideToggle(); currentCategoryNode.find("i").toggleClass("expanded"); } } @@ -444,8 +444,8 @@ RED.palette = (function() { function filterChange(val) { var re = new RegExp(val.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&'),'i'); - $("#palette-container .palette_node").each(function(i,el) { - var currentLabel = $(el).find(".palette_label").text(); + $("#red-ui-palette-container .red-ui-palette-node").each(function(i,el) { + var currentLabel = $(el).find(".red-ui-palette-label").text(); if (val === "" || re.test(el.id) || re.test(currentLabel)) { $(this).show(); } else { @@ -456,7 +456,7 @@ RED.palette = (function() { for (var category in categoryContainers) { if (categoryContainers.hasOwnProperty(category)) { if (categoryContainers[category].container - .find(".palette_node") + .find(".red-ui-palette-node") .filter(function() { return $(this).css('display') !== 'none'}).length === 0) { categoryContainers[category].close(); } else { @@ -468,6 +468,13 @@ RED.palette = (function() { function init() { + $('').appendTo("#red-ui-palette"); + $('').appendTo("#red-ui-palette"); + $('
                                ').appendTo("#red-ui-palette"); + $('
                                ').appendTo("#red-ui-palette"); + $('
                                ').appendTo("#red-ui-palette"); + + RED.events.on('registry:node-type-added', function(nodeType) { var def = RED.nodes.getType(nodeType); addNodeType(nodeType,def); @@ -508,25 +515,27 @@ RED.palette = (function() { } }); - $("#palette > .palette-spinner").show(); + $("#red-ui-palette > .red-ui-palette-spinner").show(); - $("#palette-search input").searchBox({ + + $("#red-ui-palette-search input").searchBox({ delay: 100, change: function() { filterChange($(this).val()); } }) - sidebarControls = $('
                                ').appendTo($("#palette")); + sidebarControls = $('
                                ').appendTo($("#red-ui-palette")); RED.popover.tooltip(sidebarControls,RED._("keyboard.togglePalette"),"core:toggle-palette"); sidebarControls.on("click", function() { RED.menu.toggleSelected("menu-item-palette"); }) - $("#palette").on("mouseenter", function() { + $("#red-ui-palette").on("mouseenter", function() { sidebarControls.toggle("slide", { direction: "left" }, 200); }) - $("#palette").on("mouseleave", function() { + $("#red-ui-palette").on("mouseleave", function() { + sidebarControls.stop(false,true); sidebarControls.hide(); }) @@ -546,7 +555,10 @@ RED.palette = (function() { createCategoryContainer(category, category, "palette.label."+category); }); - $("#palette-collapse-all").on("click", function(e) { + + var paletteFooterButtons = $('').appendTo("#red-ui-palette .red-ui-component-footer"); + var paletteCollapseAll = $('').appendTo(paletteFooterButtons); + paletteCollapseAll.on("click", function(e) { e.preventDefault(); for (var cat in categoryContainers) { if (categoryContainers.hasOwnProperty(cat)) { @@ -554,9 +566,10 @@ RED.palette = (function() { } } }); - RED.popover.tooltip($("#palette-collapse-all"),RED._('palette.actions.collapse-all')); + RED.popover.tooltip(paletteCollapseAll,RED._('palette.actions.collapse-all')); - $("#palette-expand-all").on("click", function(e) { + var paletteExpandAll = $('').appendTo(paletteFooterButtons); + paletteExpandAll.on("click", function(e) { e.preventDefault(); for (var cat in categoryContainers) { if (categoryContainers.hasOwnProperty(cat)) { @@ -564,7 +577,7 @@ RED.palette = (function() { } } }); - RED.popover.tooltip($("#palette-expand-all"),RED._('palette.actions.expand-all')); + RED.popover.tooltip(paletteExpandAll,RED._('palette.actions.expand-all')); RED.actions.add("core:toggle-palette", function(state) { if (state === undefined) { @@ -576,11 +589,11 @@ RED.palette = (function() { } function togglePalette(state) { if (!state) { - $("#main-container").addClass("palette-closed"); + $("#red-ui-main-container").addClass("red-ui-palette-closed"); sidebarControls.hide(); sidebarControls.find("i").addClass("fa-chevron-right").removeClass("fa-chevron-left"); } else { - $("#main-container").removeClass("palette-closed"); + $("#red-ui-main-container").removeClass("red-ui-palette-closed"); sidebarControls.find("i").removeClass("fa-chevron-right").addClass("fa-chevron-left"); } setTimeout(function() { $(window).trigger("resize"); } ,200); @@ -589,7 +602,7 @@ RED.palette = (function() { function getCategories() { var categories = []; - $("#palette-container .palette-category").each(function(i,d) { + $("#red-ui-palette-container .red-ui-palette-category").each(function(i,d) { categories.push({id:$(d).data('category'),label:$(d).data('label')}); }) return categories; diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/projects/projectSettings.js b/packages/node_modules/@node-red/editor-client/src/js/ui/projects/projectSettings.js index d6c2d63a5..9c3784410 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/projects/projectSettings.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/projects/projectSettings.js @@ -46,7 +46,6 @@ RED.projects.settings = (function() { } settingsVisible = true; - var tabContainer; var trayOptions = { title: RED._("sidebar.project.projectSettings.title"), @@ -66,9 +65,9 @@ RED.projects.settings = (function() { open: function(tray) { var project = RED.projects.getActiveProject(); - var trayBody = tray.find('.editor-tray-body'); + var trayBody = tray.find('.red-ui-tray-body'); var settingsContent = $('
                                ').appendTo(trayBody); - var tabContainer = $('
                                ',{id:"user-settings-tabs-container"}).appendTo(settingsContent); + var tabContainer = $('
                                ',{class:"red-ui-settings-tabs-container"}).appendTo(settingsContent); $('
                                  ',{id:"user-settings-tabs"}).appendTo(tabContainer); var settingsTabs = RED.tabs.create({ @@ -76,7 +75,7 @@ RED.projects.settings = (function() { vertical: true, onchange: function(tab) { setTimeout(function() { - $("#user-settings-tabs-content").children().hide(); + tabContents.children().hide(); $("#" + tab.id).show(); if (tab.pane.focus) { tab.pane.focus(); @@ -84,19 +83,19 @@ RED.projects.settings = (function() { },50); } }); - var tabContents = $('
                                  ',{id:"user-settings-tabs-content"}).appendTo(settingsContent); + var tabContents = $('
                                  ',{class:"red-ui-settings-tabs-content"}).appendTo(settingsContent); panes.forEach(function(pane) { settingsTabs.addTab({ - id: "project-settings-tab-"+pane.id, + id: "red-ui-project-settings-tab-"+pane.id, label: pane.title, pane: pane }); pane.get(project).hide().appendTo(tabContents); }); settingsContent.i18n(); - settingsTabs.activateTab("project-settings-tab-"+(initialTab||'main')) - $("#sidebar-shade").show(); + settingsTabs.activateTab("red-ui-project-settings-tab-"+(initialTab||'main')) + $("#red-ui-sidebar-shade").show(); }, close: function() { settingsVisible = false; @@ -105,7 +104,7 @@ RED.projects.settings = (function() { pane.close(); } }); - $("#sidebar-shade").hide(); + $("#red-ui-sidebar-shade").hide(); }, show: function() {} @@ -161,10 +160,10 @@ RED.projects.settings = (function() { if (activeProject.description) { desc = marked(activeProject.description); } else { - desc = ''+'No description available'+''; + desc = ''+'No description available'+''; } - var description = addTargetToExternalLinks($(''+desc+'')).appendTo(container); - description.find(".bidiAware").contents().filter(function() { return this.nodeType === 3 && this.textContent.trim() !== "" }).wrap( "" ); + var description = addTargetToExternalLinks($(''+desc+'')).appendTo(container); + description.find(".red-ui-text-bidi-aware").contents().filter(function() { return this.nodeType === 3 && this.textContent.trim() !== "" }).wrap( "" ); } function editSummary(activeProject, summary, container) { @@ -173,14 +172,14 @@ RED.projects.settings = (function() { container.empty(); var bg = $('').appendTo(container); var input = $('').val(summary||"").appendTo(container); - $('') + $('') .appendTo(bg) .on("click", function(evt) { evt.preventDefault(); updateProjectSummary(activeProject.summary, container); editButton.show(); }); - $('') + $('') .appendTo(bg) .on("click", function(evt) { evt.preventDefault(); @@ -223,19 +222,19 @@ RED.projects.settings = (function() { if (summary) { container.text(summary).removeClass('node-info-node'); } else { - container.text(RED._("sidebar.project.projectSettings.noSummaryAvailable")).addClass('node-info-none'); + container.text(RED._("sidebar.project.projectSettings.noSummaryAvailable")).addClass('red-ui-help-info-none'); } } function createMainPane(activeProject) { - var pane = $('
                                  '); + var pane = $('
                                  '); $('

                                  ').text(activeProject.name).appendTo(pane); var summary = $('
                                  ').appendTo(pane); - var summaryContent = $('
                                  ',{style:"color: #999"}).appendTo(summary); + var summaryContent = $('
                                  ').appendTo(summary); updateProjectSummary(activeProject.summary, summaryContent); if (RED.user.hasPermission("projects.write")) { - $('') + $('') .prependTo(summary) .on("click", function(evt) { evt.preventDefault(); @@ -244,13 +243,13 @@ RED.projects.settings = (function() { } $('
                                  ').appendTo(pane); - var description = $('
                                  ').appendTo(pane); + var description = $('
                                  ').appendTo(pane); var descriptionContent = $('
                                  ',{style:"min-height: 200px"}).appendTo(description); updateProjectDescription(activeProject, descriptionContent); if (RED.user.hasPermission("projects.write")) { - $('') + $('') .prependTo(description) .on("click", function(evt) { evt.preventDefault(); @@ -323,7 +322,7 @@ RED.projects.settings = (function() { function saveDependencies(depsList,container,dependencies,complete) { var activeProject = RED.projects.getActiveProject(); - var spinner = utils.addSpinnerOverlay(container).addClass('projects-dialog-spinner-contain'); + var spinner = utils.addSpinnerOverlay(container).addClass('red-ui-component-spinner-contain'); var done = function(err,res) { spinner.remove(); if (err) { @@ -379,9 +378,9 @@ RED.projects.settings = (function() { } function createDependenciesPane(activeProject) { - var pane = $('
                                  '); + var pane = $('
                                  '); if (RED.user.hasPermission("projects.write")) { - $('') + $('') .appendTo(pane) .on("click", function(evt) { evt.preventDefault(); @@ -393,17 +392,17 @@ RED.projects.settings = (function() { addButton: false, addItem: function(row,index,entry) { // console.log(entry); - var headerRow = $('
                                  ',{class:"palette-module-header"}).appendTo(row); + var headerRow = $('
                                  ',{class:"red-ui-palette-module-header"}).appendTo(row); if (entry.label) { if (entry.index === 0) { headerRow.addClass("red-ui-search-empty") } else { - row.parent().addClass("palette-module-section"); + row.parent().addClass("red-ui-palette-module-section"); } headerRow.text(entry.label); // if (RED.user.hasPermission("projects.write")) { // if (entry.index === 1) { - // var addButton = $('').appendTo(headerRow).on("click", function(evt) { + // var addButton = $('').appendTo(headerRow).on("click", function(evt) { // evt.preventDefault(); // var deps = $.extend(true, {}, activeProject.dependencies); // for (var m in modulesInUse) { @@ -414,7 +413,7 @@ RED.projects.settings = (function() { // editDependencies(activeProject,JSON.stringify(deps,"",4),pane,depsList); // }); // } else if (entry.index === 3) { - // var removeButton = $('').appendTo(headerRow).on("click", function(evt) { + // var removeButton = $('').appendTo(headerRow).on("click", function(evt) { // evt.preventDefault(); // var deps = $.extend(true, {}, activeProject.dependencies); // for (var m in activeProject.dependencies) { @@ -427,17 +426,17 @@ RED.projects.settings = (function() { // } // } } else { - headerRow.addClass("palette-module-header"); + headerRow.addClass("red-ui-palette-module-header"); if (!entry.installed) { - headerRow.addClass("palette-module-not-installed"); + headerRow.addClass("red-ui-palette-module-not-installed"); } else if (entry.count === 0) { - headerRow.addClass("palette-module-unused"); + headerRow.addClass("red-ui-palette-module-unused"); } else if (!entry.known) { - headerRow.addClass("palette-module-unknown"); + headerRow.addClass("red-ui-palette-module-unknown"); } entry.element = headerRow; - var titleRow = $('
                                  ').appendTo(headerRow); + var titleRow = $('
                                  ').appendTo(headerRow); var iconClass = "fa-cube"; if (!entry.installed) { iconClass = "fa-warning"; @@ -445,13 +444,13 @@ RED.projects.settings = (function() { var icon = $('').appendTo(titleRow); entry.icon = icon; $('').text(entry.id).appendTo(titleRow); - var metaRow = $('
                                  ').appendTo(headerRow); + var metaRow = $('
                                  ').appendTo(headerRow); var versionSpan = $('').text(entry.version).appendTo(metaRow); - metaRow = $('
                                  ').appendTo(headerRow); - var buttons = $('
                                  ').appendTo(metaRow); + metaRow = $('
                                  ').appendTo(headerRow); + var buttons = $('
                                  ').appendTo(metaRow); if (RED.user.hasPermission("projects.write")) { if (!entry.installed && RED.settings.theme('palette.editable') !== false) { - $('' + RED._("sidebar.project.projectSettings.install") + '').appendTo(buttons) + $('' + RED._("sidebar.project.projectSettings.install") + '').appendTo(buttons) .on("click", function(evt) { evt.preventDefault(); RED.palette.editor.install(entry,row,function(err) { @@ -472,7 +471,7 @@ RED.projects.settings = (function() { }); }) } else if (entry.known && entry.count === 0) { - $('' + RED._("sidebar.project.projectSettings.removeFromProject") + '').appendTo(buttons) + $('' + RED._("sidebar.project.projectSettings.removeFromProject") + '').appendTo(buttons) .on("click", function(evt) { evt.preventDefault(); var deps = $.extend(true, {}, activeProject.dependencies); @@ -488,7 +487,7 @@ RED.projects.settings = (function() { }); }); } else if (!entry.known) { - $('' + RED._("sidebar.project.projectSettings.addToProject") + '').appendTo(buttons) + $('' + RED._("sidebar.project.projectSettings.addToProject") + '').appendTo(buttons) .on("click", function(evt) { evt.preventDefault(); var deps = $.extend(true, {}, activeProject.dependencies); @@ -496,7 +495,7 @@ RED.projects.settings = (function() { saveDependencies(depsList,row,deps,function(err) { if (!err) { buttons.remove(); - headerRow.removeClass("palette-module-unknown"); + headerRow.removeClass("red-ui-palette-module-unknown"); } else { console.log(err); } @@ -531,7 +530,7 @@ RED.projects.settings = (function() { var dialogBody; var filesList; var selected; - var container = $('
                                  ',{style:"position: relative; min-height: 175px; height: 175px;"}).hide().appendTo(row); + var container = $('
                                  ',{style:"position: relative; min-height: 175px; height: 175px;"}).hide().appendTo(row); var spinner = utils.addSpinnerOverlay(container); $.getJSON("projects/"+activeProject.name+"/files",function(result) { var fileNames = Object.keys(result); @@ -579,13 +578,13 @@ RED.projects.settings = (function() { function createFileSubList(container, files, current, selectFilter, onselect, style) { style = style || ""; - var list = $('
                                    ',{class:"projects-dialog-file-list", style:style}).appendTo(container).editableList({ + var list = $('
                                      ',{class:"red-ui-projects-dialog-file-list", style:style}).appendTo(container).editableList({ addButton: false, scrollOnAdd: false, addItem: function(row,index,entry) { - var header = $('
                                      ',{class:"projects-dialog-file-list-entry"}).appendTo(row); + var header = $('
                                      ',{class:"red-ui-projects-dialog-file-list-entry"}).appendTo(row); if (entry.children) { - $(' ').appendTo(header); + $(' ').appendTo(header); if (entry.children.length > 0) { var children = $('
                                      ',{style:"padding-left: 20px;"}).appendTo(row); if (current.indexOf(entry.path+"/") === 0) { @@ -616,16 +615,16 @@ RED.projects.settings = (function() { fileIcon = "fa-book"; } else if (/^\.git/i.test(entry.name)) { fileIcon = "fa-code-fork"; - header.addClass("projects-dialog-file-list-entry-file-type-git"); + header.addClass("red-ui-projects-dialog-file-list-entry-file-type-git"); } - $(' ').appendTo(header); + $(' ').appendTo(header); if (selectFilter(entry)) { header.addClass("selectable"); if (entry.path === current) { header.addClass("selected"); } header.on("click", function(e) { - $(".projects-dialog-file-list-entry.selected").removeClass("selected"); + $(".red-ui-projects-dialog-file-list-entry.selected").removeClass("selected"); $(this).addClass("selected"); onselect(entry.path,true); }) @@ -637,7 +636,7 @@ RED.projects.settings = (function() { header.addClass("unselectable"); } } - $('').text(entry.name).appendTo(header); + $('').text(entry.name).appendTo(header); } }); if (!style) { @@ -654,7 +653,7 @@ RED.projects.settings = (function() { // // var flowFileInput = $('').val(flowFile).insertAfter(flowFileLabel); // - // var flowFileInputSearch = $('') + // var flowFileInputSearch = $('') // .insertAfter(flowFileInput) // .on("click", function(e) { // showProjectFileListing(activeProject,'Select flow file',flowFileInput.val(),function(result) { @@ -671,7 +670,7 @@ RED.projects.settings = (function() { // flowFileLabel.hide(); // // var bg = $('').prependTo(container); - // $('') + // $('') // .appendTo(bg) // .on("click", function(evt) { // evt.preventDefault(); @@ -682,7 +681,7 @@ RED.projects.settings = (function() { // bg.remove(); // editButton.show(); // }); - // var saveButton = $('') + // var saveButton = $('') // .appendTo(bg) // .on("click", function(evt) { // evt.preventDefault(); @@ -729,9 +728,9 @@ RED.projects.settings = (function() { function createFilesSection(activeProject,pane) { var title = $('

                                      ').text(RED._("sidebar.project.projectSettings.files")).appendTo(pane); - var filesContainer = $('').appendTo(pane); + var filesContainer = $('
                                      ').appendTo(pane); if (RED.user.hasPermission("projects.write")) { - var editFilesButton = $('') + var editFilesButton = $('') .appendTo(title) .on("click", function(evt) { evt.preventDefault(); @@ -740,7 +739,7 @@ RED.projects.settings = (function() { // packageFileLabelText.hide(); if (!activeProject.files.package) { - packageFileSubLabel.find(".projects-edit-form-sublabel-text").text(RED._("sidebar.project.projectSettings.packageCreate")); + packageFileSubLabel.find(".red-ui-projects-edit-form-sublabel-text").text(RED._("sidebar.project.projectSettings.packageCreate")); packageFileSubLabel.show(); } @@ -754,7 +753,7 @@ RED.projects.settings = (function() { // credentialStateLabel.parent().hide(); credentialStateLabel.addClass("uneditable-input"); - $(".user-settings-row-credentials").show(); + $(".red-ui-settings-row-credentials").show(); credentialStateLabel.css('height','auto'); credentialFormRows.hide(); credentialSecretButtons.show(); @@ -763,19 +762,19 @@ RED.projects.settings = (function() { var row; // Flow files - row = $('').appendTo(filesContainer); + row = $('
                                      ').appendTo(filesContainer); $('').text(RED._("sidebar.project.projectSettings.package")).appendTo(row); var packageFileLabel = $('
                                      ').appendTo(row); var packageFileLabelText = $('').text(activeProject.files.package||"package.json").appendTo(packageFileLabel); var packageFileInput = $('').val(activeProject.files.package||"package.json").appendTo(packageFileLabel); - var packageFileInputSearch = $('') + var packageFileInputSearch = $('') .hide() .appendTo(packageFileLabel) .on("click", function(e) { if ($(this).hasClass('selected')) { $(this).removeClass('selected'); - packageFileLabel.find('.project-file-listing-container').slideUp(200,function() { + packageFileLabel.find('.red-ui-projects-file-listing-container').slideUp(200,function() { $(this).remove(); packageFileLabel.css('height',''); }); @@ -808,9 +807,9 @@ RED.projects.settings = (function() { } }) RED.popover.tooltip(packageFileInputSearch,RED._("sidebar.project.projectSettings.selectFile")); - var packageFileSubLabel = $('').appendTo(row).hide(); + var packageFileSubLabel = $('').appendTo(row).hide(); if (!activeProject.files.package) { - packageFileSubLabel.find(".projects-edit-form-sublabel-text").text(RED._("sidebar.project.projectSettings.fileNotExist")); + packageFileSubLabel.find(".red-ui-projects-edit-form-sublabel-text").text(RED._("sidebar.project.projectSettings.fileNotExist")); packageFileSubLabel.show(); } @@ -819,7 +818,7 @@ RED.projects.settings = (function() { var projectRoot = projectPackage.substring(0,projectPackage.length - 12); // Flow files - row = $('').appendTo(filesContainer); + row = $('
                                      ').appendTo(filesContainer); $('').text(RED._("sidebar.project.projectSettings.flow")).appendTo(row); var flowFileLabel = $('
                                      ').appendTo(row); var flowFileLabelPrefixText = $('').text(projectRoot).appendTo(flowFileLabel); @@ -838,13 +837,13 @@ RED.projects.settings = (function() { }); } var flowFileInput = $('').val(flowFileName).hide().appendTo(flowFileLabel); - var flowFileInputSearch = $('') + var flowFileInputSearch = $('') .hide() .appendTo(flowFileLabel) .on("click", function(e) { if ($(this).hasClass('selected')) { $(this).removeClass('selected'); - flowFileLabel.find('.project-file-listing-container').slideUp(200,function() { + flowFileLabel.find('.red-ui-projects-file-listing-container').slideUp(200,function() { $(this).remove(); flowFileLabel.css('height',''); }); @@ -879,7 +878,7 @@ RED.projects.settings = (function() { }) RED.popover.tooltip(flowFileInputSearch,RED._("sidebar.project.projectSettings.selectFile")); - row = $('').appendTo(filesContainer); + row = $('
                                      ').appendTo(filesContainer); $('').text(RED._("sidebar.project.projectSettings.credentials")).appendTo(row); var credFileName = "flows_cred.json"; @@ -942,7 +941,7 @@ RED.projects.settings = (function() { // } - row = $('').appendTo(filesContainer); + row = $('
                                      ').appendTo(filesContainer); $('').appendTo(row); var credentialStateLabel = $(' ').appendTo(row); @@ -950,7 +949,7 @@ RED.projects.settings = (function() { credentialStateLabel.css('color','#666'); credentialSecretButtons.css('vertical-align','top'); - var credentialSecretResetButton = $('') + var credentialSecretResetButton = $('') .appendTo(credentialSecretButtons) .on("click", function(e) { e.preventDefault(); @@ -974,7 +973,7 @@ RED.projects.settings = (function() { }); RED.popover.tooltip(credentialSecretResetButton,RED._("sidebar.project.projectSettings.resetTheEncryptionKey")); - var credentialSecretEditButton = $('') + var credentialSecretEditButton = $('') .appendTo(credentialSecretButtons) .on("click", function(e) { e.preventDefault(); @@ -1006,7 +1005,7 @@ RED.projects.settings = (function() { RED.popover.tooltip(credentialSecretEditButton,RED._("sidebar.project.projectSettings.changeTheEncryptionKey")); - row = $('').hide().appendTo(filesContainer); + row = $('
                                      ').hide().appendTo(filesContainer); @@ -1016,7 +1015,7 @@ RED.projects.settings = (function() { var credentialChangeLabel = $('
                                      ' + RED._("sidebar.project.projectSettings.changeTheEncryptionKey") + '
                                      ').hide().appendTo(credentialFormRows); var credentialResetLabel = $('
                                      ' + RED._("sidebar.project.projectSettings.resetTheEncryptionKey") + '
                                      ').hide().appendTo(credentialFormRows); - var credentialSecretExistingRow = $('').appendTo(credentialFormRows); + var credentialSecretExistingRow = $('
                                      ').appendTo(credentialFormRows); $('').text(RED._("sidebar.project.projectSettings.currentKey")).appendTo(credentialSecretExistingRow); var credentialSecretExistingInput = $('').appendTo(credentialSecretExistingRow) .on("change keyup paste",function() { @@ -1027,7 +1026,7 @@ RED.projects.settings = (function() { checkFiles(); }); - var credentialSecretNewRow = $('').appendTo(credentialFormRows); + var credentialSecretNewRow = $('
                                      ').appendTo(credentialFormRows); $('').text(RED._("sidebar.project.projectSettings.newKey")).appendTo(credentialSecretNewRow); @@ -1051,11 +1050,11 @@ RED.projects.settings = (function() { credentialStateLabel.css('height',''); flowFileInputSearch.removeClass('selected'); - flowFileLabel.find('.project-file-listing-container').remove(); + flowFileLabel.find('.red-ui-projects-file-listing-container').remove(); flowFileLabel.css('height',''); flowFileLabel.css('color',''); - $(".user-settings-row-credentials").hide(); + $(".red-ui-settings-row-credentials").hide(); credentialFormRows.hide(); credentialSecretButtons.hide(); credentialSecretResetButton.removeClass("selected"); @@ -1065,7 +1064,7 @@ RED.projects.settings = (function() { } var formButtons = $('').hide().appendTo(filesContainer); - $('') + $('') .appendTo(formButtons) .on("click", function(evt) { evt.preventDefault(); @@ -1075,7 +1074,7 @@ RED.projects.settings = (function() { credFileLabelPrefixText.text(projectRoot); packageFileLabelText.text(activeProject.files.package||"package.json"); if (!activeProject.files.package) { - packageFileSubLabel.find(".projects-edit-form-sublabel-text").text(RED._("sidebar.project.projectSettings.fileNotExist")); + packageFileSubLabel.find(".red-ui-projects-edit-form-sublabel-text").text(RED._("sidebar.project.projectSettings.fileNotExist")); packageFileSubLabel.show(); } else { packageFileSubLabel.hide(); @@ -1084,7 +1083,7 @@ RED.projects.settings = (function() { credFileLabelText.text(credFileName); hideEditForm(); }); - var saveButton = $('') + var saveButton = $('') .appendTo(formButtons) .on("click", function(evt) { evt.preventDefault(); @@ -1179,10 +1178,10 @@ RED.projects.settings = (function() { } function createLocalBranchListSection(activeProject,pane) { - var localBranchContainer = $('').appendTo(pane); + var localBranchContainer = $('
                                      ').appendTo(pane); $('

                                      ').text(RED._("sidebar.project.projectSettings.branches")).appendTo(localBranchContainer); - var row = $('').appendTo(localBranchContainer); + var row = $('
                                      ').appendTo(localBranchContainer); var branchList = $('
                                        ').appendTo(row).editableList({ @@ -1190,7 +1189,7 @@ RED.projects.settings = (function() { addButton: false, scrollOnAdd: false, addItem: function(row,index,entry) { - var container = $('
                                        ').appendTo(row); + var container = $('
                                        ').appendTo(row); if (entry.empty) { container.addClass('red-ui-search-empty'); container.text(RED._("sidebar.project.projectSettings.noBranches")); @@ -1220,11 +1219,11 @@ RED.projects.settings = (function() { if (!entry.current) { var tools = $('').appendTo(container); - $('') + $('') .appendTo(tools) .on("click", function(e) { e.preventDefault(); - var spinner = utils.addSpinnerOverlay(row).addClass('projects-dialog-spinner-contain'); + var spinner = utils.addSpinnerOverlay(row).addClass('red-ui-component-spinner-contain'); var notification = RED.notify(RED._("sidebar.project.projectSettings.deleteConfirm", { name: entry.name }), { type: "warning", modal: true, @@ -1317,10 +1316,10 @@ RED.projects.settings = (function() { createLocalBranchListSection(activeProject,pane); - var repoContainer = $('').appendTo(pane); + var repoContainer = $('
                                        ').appendTo(pane); var title = $('

                                        ').text(RED._("sidebar.project.projectSettings.gitRemotes")).appendTo(repoContainer); - var editRepoButton = $('') + var editRepoButton = $('') .appendTo(title) .on("click", function(evt) { editRepoButton.attr('disabled',true); @@ -1339,16 +1338,16 @@ RED.projects.settings = (function() { var emptyItem = { empty: true }; var isEmpty = true; - var row = $('').appendTo(repoContainer); - var addRemoteDialog = $('
                                        ').hide().appendTo(row); - row = $('').appendTo(repoContainer); + var row = $('
                                        ').appendTo(repoContainer); + var addRemoteDialog = $('
                                        ').hide().appendTo(row); + row = $('
                                        ').appendTo(repoContainer); var remotesList = $('
                                          ').appendTo(row); remotesList.editableList({ addButton: false, height: 'auto', addItem: function(row,index,entry) { - var container = $('
                                          ').appendTo(row); + var container = $('
                                          ').appendTo(row); if (entry.empty) { container.addClass('red-ui-search-empty'); container.text(RED._("sidebar.project.projectSettings.noRemotes")); @@ -1365,11 +1364,11 @@ RED.projects.settings = (function() { } var tools = $('').appendTo(container); - $('') + $('') .appendTo(tools) .on("click", function(e) { e.preventDefault(); - var spinner = utils.addSpinnerOverlay(row).addClass('projects-dialog-spinner-contain'); + var spinner = utils.addSpinnerOverlay(row).addClass('red-ui-component-spinner-contain'); var notification = RED.notify(RED._("sidebar.project.projectSettings.deleteRemoteConfrim", { name: entry.name }), { type: "warning", modal: true, @@ -1462,22 +1461,22 @@ RED.projects.settings = (function() { var remoteNameInputChanged = false; var remoteURLInputChanged = false; - $('
                                          ').text(RED._('sidebar.project.projectSettings.addRemote2')).appendTo(addRemoteDialog); + $('
                                          ').text(RED._('sidebar.project.projectSettings.addRemote2')).appendTo(addRemoteDialog); - row = $('').appendTo(addRemoteDialog); + row = $('
                                          ').appendTo(addRemoteDialog); $('').text(RED._("sidebar.project.projectSettings.remoteName")).appendTo(row); var remoteNameInput = $('').appendTo(row).on("change keyup paste",function() { remoteNameInputChanged = true; validateForm(); }); - $('').appendTo(row).find("small"); - row = $('').appendTo(addRemoteDialog); + $('').appendTo(row).find("small"); + row = $('
                                          ').appendTo(addRemoteDialog); $('').text(RED._("sidebar.project.projectSettings.url")).appendTo(row); var remoteURLInput = $('').appendTo(row).on("change keyup paste",function() { remoteURLInputChanged = true; validateForm() }); - var remoteURLLabel = $('').appendTo(row).find("small"); + var remoteURLLabel = $('').appendTo(row).find("small"); var hideEditForm = function() { editRepoButton.attr('disabled',false); @@ -1491,17 +1490,17 @@ RED.projects.settings = (function() { } var formButtons = $('') .appendTo(addRemoteDialog); - $('') + $('') .appendTo(formButtons) .on("click", function(evt) { evt.preventDefault(); hideEditForm(); }); - var saveButton = $('') + var saveButton = $('') .appendTo(formButtons) .on("click", function(evt) { evt.preventDefault(); - var spinner = utils.addSpinnerOverlay(addRemoteDialog).addClass('projects-dialog-spinner-contain'); + var spinner = utils.addSpinnerOverlay(addRemoteDialog).addClass('red-ui-component-spinner-contain'); var payload = { name: remoteNameInput.val(), @@ -1577,7 +1576,7 @@ RED.projects.settings = (function() { function createSettingsPane(activeProject) { - var pane = $('
                                          '); + var pane = $('
                                          '); createFilesSection(activeProject,pane); // createLocalRepositorySection(activeProject,pane); createRemoteRepositorySection(activeProject,pane); diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/projects/projectUserSettings.js b/packages/node_modules/@node-red/editor-client/src/js/ui/projects/projectUserSettings.js index d9078d97d..4219b189f 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/projects/projectUserSettings.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/projects/projectUserSettings.js @@ -26,15 +26,15 @@ RED.projects.userSettings = (function() { var title = $('

                                          ').text(RED._("editor:sidebar.project.userSettings.committerDetail")).appendTo(pane); - var gitconfigContainer = $('').appendTo(pane); - $('
                                          ').appendTo(gitconfigContainer).text(RED._("editor:sidebar.project.userSettings.committerTip")); + var gitconfigContainer = $('
                                          ').appendTo(pane); + $('
                                          ').appendTo(gitconfigContainer).text(RED._("editor:sidebar.project.userSettings.committerTip")); - var row = $('').appendTo(gitconfigContainer); + var row = $('
                                          ').appendTo(gitconfigContainer); $('').text(RED._("editor:sidebar.project.userSettings.userName")).appendTo(row); gitUsernameInput = $('').appendTo(row); gitUsernameInput.val(currentGitSettings.user.name||""); - row = $('').appendTo(gitconfigContainer); + row = $('
                                          ').appendTo(gitconfigContainer); $('').text(RED._("editor:sidebar.project.userSettings.email")).appendTo(row); gitEmailInput = $('').appendTo(row); gitEmailInput.val(currentGitSettings.user.email||""); @@ -42,12 +42,12 @@ RED.projects.userSettings = (function() { function createSSHKeySection(pane) { - var container = $('').appendTo(pane); + var container = $('
                                          ').appendTo(pane); var popover; var title = $('

                                          ').text(RED._("editor:sidebar.project.userSettings.sshKeys")).appendTo(container); - var subtitle = $('
                                          ').appendTo(container).text(RED._("editor:sidebar.project.userSettings.sshKeysTip")); + var subtitle = $('
                                          ').appendTo(container).text(RED._("editor:sidebar.project.userSettings.sshKeysTip")); - var addKeyButton = $('') + var addKeyButton = $('') .appendTo(subtitle) .on("click", function(evt) { addKeyButton.attr('disabled',true); @@ -89,17 +89,17 @@ RED.projects.userSettings = (function() { } }; - var row = $('').appendTo(container); - var addKeyDialog = $('
                                          ').hide().appendTo(row); - $('
                                          ').text(RED._("editor:sidebar.project.userSettings.addSshKey")).appendTo(addKeyDialog); + var row = $('
                                          ').appendTo(container); + var addKeyDialog = $('
                                          ').hide().appendTo(row); + $('
                                          ').text(RED._("editor:sidebar.project.userSettings.addSshKey")).appendTo(addKeyDialog); var addKeyDialogBody = $('
                                          ').appendTo(addKeyDialog); - row = $('').appendTo(addKeyDialogBody); - $('
                                          ').appendTo(row).text(RED._("editor:sidebar.project.userSettings.addSshKeyTip")); + row = $('
                                          ').appendTo(addKeyDialogBody); + $('
                                          ').appendTo(row).text(RED._("editor:sidebar.project.userSettings.addSshKeyTip")); // var bg = $('
                                          ',{class:"button-group", style:"text-align: center"}).appendTo(row); - // var addLocalButton = $('').appendTo(bg); - // var uploadButton = $('').appendTo(bg); - // var generateButton = $('').appendTo(bg); + // var addLocalButton = $('').appendTo(bg); + // var uploadButton = $('').appendTo(bg); + // var generateButton = $('').appendTo(bg); // bg.children().on("click", function(e) { // e.preventDefault(); // if ($(this).hasClass("selected")) { @@ -124,40 +124,40 @@ RED.projects.userSettings = (function() { // }) - row = $('').appendTo(addKeyDialogBody); + row = $('
                                          ').appendTo(addKeyDialogBody); $('').text(RED._("editor:sidebar.project.userSettings.name")).appendTo(row); var keyNameInputChanged = false; var keyNameInput = $('').appendTo(row).on("change keyup paste",function() { keyNameInputChanged = true; validateForm(); }); - $('').appendTo(row).find("small"); + $('').appendTo(row).find("small"); var generateKeyPane = $('
                                          ').appendTo(addKeyDialogBody); - row = $('').appendTo(generateKeyPane); + row = $('
                                          ').appendTo(generateKeyPane); $('').text(RED._("editor:sidebar.project.userSettings.passphrase")).appendTo(row); var passphraseInput = $('').appendTo(row).on("change keyup paste",validateForm); - var passphraseInputSubLabel = $('').appendTo(row).find("small"); + var passphraseInputSubLabel = $('').appendTo(row).find("small"); // var addLocalKeyPane = $('
                                          ').hide().appendTo(addKeyDialogBody); - // row = $('').appendTo(addLocalKeyPane); + // row = $('
                                          ').appendTo(addLocalKeyPane); // $('').text('Public key').appendTo(row); // var localPublicKeyPathInput = $('').appendTo(row).on("change keyup paste",validateForm); - // $('').appendTo(row).find("small"); - // row = $('').appendTo(addLocalKeyPane); + // $('').appendTo(row).find("small"); + // row = $('
                                          ').appendTo(addLocalKeyPane); // $('').text('Private key').appendTo(row); // var localPrivateKeyPathInput = $('').appendTo(row).on("change keyup paste",validateForm); - // $('').appendTo(row).find("small"); + // $('').appendTo(row).find("small"); // // var uploadKeyPane = $('
                                          ').hide().appendTo(addKeyDialogBody); - // row = $('').appendTo(uploadKeyPane); + // row = $('
                                          ').appendTo(uploadKeyPane); // $('').text('Public key').appendTo(row); // var publicKeyInput = $('') + var commitMessage = $('').attr("placeholder",RED._("sidebar.project.versionControl.commitPlaceholder")) .appendTo(commitBox) .on("change keyup paste",function() { submitCommitButton.prop('disabled',$(this).val().trim()===""); }); - var commitToolbar = $('
                                          ').appendTo(commitBox); + var commitToolbar = $('
                                          ').appendTo(commitBox); - var cancelCommitButton = $('') + var cancelCommitButton = $('') .appendTo(commitToolbar) .on("click", function(evt) { evt.preventDefault(); @@ -515,11 +515,11 @@ RED.sidebar.versionControl = (function() { abortMergeButton.prop("disabled",false); }) - var submitCommitButton = $('') + var submitCommitButton = $('') .appendTo(commitToolbar) .on("click", function(evt) { evt.preventDefault(); - var spinner = utils.addSpinnerOverlay(submitCommitButton).addClass('projects-dialog-spinner-sidebar'); + var spinner = utils.addSpinnerOverlay(submitCommitButton).addClass('red-ui-component-spinner-sidebar'); var activeProject = RED.projects.getActiveProject(); RED.deploy.setDeployInflight(true); utils.sendRequest({ @@ -556,7 +556,7 @@ RED.sidebar.versionControl = (function() { }); bg = $('
                                          ').appendTo(localHistory.header); - refreshButton = $('') + refreshButton = $('') .appendTo(bg) .on("click", function(evt) { evt.preventDefault(); @@ -565,9 +565,9 @@ RED.sidebar.versionControl = (function() { }) RED.popover.tooltip(refreshButton,RED._("sidebar.project.versionControl.refreshCommitHistory")) - var localBranchToolbar = $('
                                          ').appendTo(localHistory.content); + var localBranchToolbar = $('
                                          ').appendTo(localHistory.content); - var localBranchButton = $('') + var localBranchButton = $('') .appendTo(localBranchToolbar) .on("click", function(evt) { evt.preventDefault(); @@ -587,12 +587,12 @@ RED.sidebar.versionControl = (function() { } }) RED.popover.tooltip(localBranchButton,RED._("sidebar.project.versionControl.changeLocalBranch")) - var repoStatusButton = $('') @@ -606,7 +606,7 @@ RED.sidebar.versionControl = (function() { localCommitListShade.show(); $(this).addClass('selected'); var activeProject = RED.projects.getActiveProject(); - $("#sidebar-version-control-repo-toolbar-set-upstream-row").toggle(!!activeProject.git.branches.remoteAlt); + $("#red-ui-sidebar-vc-repo-toolbar-set-upstream-row").toggle(!!activeProject.git.branches.remoteAlt); remoteBox.show(); setTimeout(function() { @@ -618,14 +618,14 @@ RED.sidebar.versionControl = (function() { RED.popover.tooltip(repoStatusButton,RED._("sidebar.project.versionControl.manageRemoteBranch")) localCommitList = $("
                                            ",{style:"position: absolute; top: 30px; bottom: 0px; right:0; left:0;"}).appendTo(localHistory.content); - localCommitListShade = $('
                                            ').css('top',"30px").hide().appendTo(localHistory.content); + localCommitListShade = $('
                                            ').css('top',"30px").hide().appendTo(localHistory.content); localCommitList.editableList({ addButton: false, scrollOnAdd: false, addItem: function(row,index,entry) { - row.addClass('sidebar-version-control-commit-entry'); + row.addClass('red-ui-sidebar-vc-commit-entry'); if (entry.url) { - row.addClass('sidebar-version-control-commit-more'); + row.addClass('red-ui-sidebar-vc-commit-more'); row.text("+ "+(entry.total-entry.totalKnown)+RED._("sidebar.project.versionControl.moreCommits")); row.on("click", function(e) { e.preventDefault(); @@ -648,21 +648,21 @@ RED.sidebar.versionControl = (function() { } }); var container = $('
                                            ').appendTo(row); - $('
                                            ').text(entry.subject).appendTo(container); + $('
                                            ').text(entry.subject).appendTo(container); if (entry.refs) { - var refDiv = $('
                                            ').appendTo(container); + var refDiv = $('
                                            ').appendTo(container); entry.refs.forEach(function(ref) { var label = ref; if (/HEAD -> /.test(ref)) { label = ref.substring(8); } - $('').text(label).appendTo(refDiv); + $('').text(label).appendTo(refDiv); }); - row.addClass('sidebar-version-control-commit-head'); + row.addClass('red-ui-sidebar-vc-commit-head'); } - $('
                                            ').text(entry.sha.substring(0,7)).appendTo(container); - // $('
                                            ').text(entry.author).appendTo(container); - $('
                                            ').text(humanizeSinceDate(parseInt(entry.date))).appendTo(container); + $('
                                            ').text(entry.sha.substring(0,7)).appendTo(container); + // $('
                                            ').text(entry.author).appendTo(container); + $('
                                            ').text(humanizeSinceDate(parseInt(entry.date))).appendTo(container); } } }); @@ -678,9 +678,9 @@ RED.sidebar.versionControl = (function() { if (done) { done() } },200); } - var localBranchBox = $('
                                            ').hide().appendTo(localHistory.content); + var localBranchBox = $('
                                            ').hide().appendTo(localHistory.content); - $('
                                            ').text(RED._("sidebar.project.versionControl.changeLocalBranch")).appendTo(localBranchBox); + $('
                                            ').text(RED._("sidebar.project.versionControl.changeLocalBranch")).appendTo(localBranchBox); var localBranchList = utils.createBranchList({ placeholder: RED._("sidebar.project.versionControl.createBranchPlaceholder"), @@ -735,9 +735,9 @@ RED.sidebar.versionControl = (function() { } }); - var remoteBox = $('
                                            ').hide().appendTo(localHistory.content); + var remoteBox = $('
                                            ').hide().appendTo(localHistory.content); var closeRemoteBox = function() { - $("#sidebar-version-control-repo-toolbar-set-upstream").prop('checked',false); + $("#red-ui-sidebar-vc-repo-toolbar-set-upstream").prop('checked',false); repoStatusButton.removeClass('selected') remoteBox.css("height","0"); localCommitListShade.hide(); @@ -758,10 +758,10 @@ RED.sidebar.versionControl = (function() { },200); } } - $('
                                            ').text(RED._("sidebar.project.versionControl.manageRemoteBranch")).appendTo(remoteBox); + $('
                                            ').text(RED._("sidebar.project.versionControl.manageRemoteBranch")).appendTo(remoteBox); var remoteBranchRow = $('
                                            ').appendTo(remoteBox); - var remoteBranchButton = $('') + var remoteBranchButton = $('') .appendTo(remoteBranchRow) .on("click", function(evt) { evt.preventDefault(); @@ -780,18 +780,18 @@ RED.sidebar.versionControl = (function() { } }); - $('').appendTo(remoteBox); + $('
                                            ').appendTo(remoteBox); - var errorMessage = $('').hide().appendTo(remoteBox); + var errorMessage = $('
                                            ').hide().appendTo(remoteBox); $('
                                            '+RED._("sidebar.project.versionControl.unableToAccess")+'
                                            ').appendTo(errorMessage) var buttonRow = $('
                                            ').appendTo(errorMessage); - $('') + $('') .appendTo(buttonRow) .on("click", function(e) { e.preventDefault(); var activeProject = RED.projects.getActiveProject(); - var spinner = utils.addSpinnerOverlay(remoteBox).addClass("projects-dialog-spinner-contain"); + var spinner = utils.addSpinnerOverlay(remoteBox).addClass("red-ui-component-spinner-contain"); utils.sendRequest({ url: "projects/"+activeProject.name+"/branches/remote", type: "GET", @@ -824,7 +824,7 @@ RED.sidebar.versionControl = (function() { }); }) - $('
                                            ').appendTo(remoteBox); + $('
                                            ').appendTo(remoteBox); var remoteBranchSubRow = $('
                                            ').hide().appendTo(remoteBranchRow); var remoteBranchList = utils.createBranchList({ @@ -837,20 +837,20 @@ RED.sidebar.versionControl = (function() { }, container: remoteBranchSubRow, onselect: function(body) { - $("#sidebar-version-control-repo-toolbar-set-upstream").prop('checked',false); - $("#sidebar-version-control-repo-toolbar-set-upstream").prop('disabled',false); - $("#sidebar-version-control-remote-branch").text(body.name+(body.create?" *":"")); + $("#red-ui-sidebar-vc-repo-toolbar-set-upstream").prop('checked',false); + $("#red-ui-sidebar-vc-repo-toolbar-set-upstream").prop('disabled',false); + $("#red-ui-sidebar-vc-remote-branch").text(body.name+(body.create?" *":"")); var activeProject = RED.projects.getActiveProject(); if (activeProject.git.branches.remote === body.name) { delete activeProject.git.branches.remoteAlt; } else { activeProject.git.branches.remoteAlt = body.name; } - $("#sidebar-version-control-repo-toolbar-set-upstream-row").toggle(!!activeProject.git.branches.remoteAlt); + $("#red-ui-sidebar-vc-repo-toolbar-set-upstream-row").toggle(!!activeProject.git.branches.remoteAlt); closeRemoteBranchBox(function() { if (!body.create) { var start = Date.now(); - var spinner = utils.addSpinnerOverlay($('#sidebar-version-control-repo-toolbar-message')).addClass("projects-dialog-spinner-contain"); + var spinner = utils.addSpinnerOverlay($('#red-ui-sidebar-vc-repo-toolbar-message')).addClass("red-ui-component-spinner-contain"); $.getJSON("projects/"+activeProject.name+"/branches/remote/"+body.name+"/status", function(result) { setTimeout(function() { updateRemoteStatus(result.commits.ahead, result.commits.behind); @@ -859,14 +859,14 @@ RED.sidebar.versionControl = (function() { }) } else { if (!activeProject.git.branches.remote) { - $('#sidebar-version-control-repo-toolbar-message').text(RED._("sidebar.project.versionControl.trackedUpstreamBranch")); - $("#sidebar-version-control-repo-toolbar-set-upstream").prop('checked',true); - $("#sidebar-version-control-repo-toolbar-set-upstream").prop('disabled',true); + $('#red-ui-sidebar-vc-repo-toolbar-message').text(RED._("sidebar.project.versionControl.trackedUpstreamBranch")); + $("#red-ui-sidebar-vc-repo-toolbar-set-upstream").prop('checked',true); + $("#red-ui-sidebar-vc-repo-toolbar-set-upstream").prop('disabled',true); } else { - $('#sidebar-version-control-repo-toolbar-message').text(RED._("sidebar.project.versionControl.selectUpstreamBranch")); + $('#red-ui-sidebar-vc-repo-toolbar-message').text(RED._("sidebar.project.versionControl.selectUpstreamBranch")); } - $("#sidebar-version-control-repo-pull").prop('disabled',true); - $("#sidebar-version-control-repo-push").prop('disabled',false); + $("#red-ui-sidebar-vc-repo-pull").prop('disabled',true); + $("#red-ui-sidebar-vc-repo-push").prop('disabled',false); } }); } @@ -875,13 +875,13 @@ RED.sidebar.versionControl = (function() { var row = $('
                                            ').appendTo(remoteBox); - $('') + $('') .appendTo(row) .on("click", function(e) { e.preventDefault(); - var spinner = utils.addSpinnerOverlay(remoteBox).addClass("projects-dialog-spinner-contain"); + var spinner = utils.addSpinnerOverlay(remoteBox).addClass("red-ui-component-spinner-contain"); var buttonRow = $('
                                            ').appendTo(spinner); - $('').text(RED._("eventLog.view")).appendTo(buttonRow).on("click", function(evt) { + $('').text(RED._("eventLog.view")).appendTo(buttonRow).on("click", function(evt) { evt.preventDefault(); RED.actions.invoke("core:show-event-log"); }); @@ -891,7 +891,7 @@ RED.sidebar.versionControl = (function() { if (activeProject.git.branches.remoteAlt) { url+="/"+activeProject.git.branches.remoteAlt; } - var setUpstream = $("#sidebar-version-control-repo-toolbar-set-upstream").prop('checked'); + var setUpstream = $("#red-ui-sidebar-vc-repo-toolbar-set-upstream").prop('checked'); if (setUpstream) { url+="?u=true" } @@ -929,9 +929,9 @@ RED.sidebar.versionControl = (function() { var pullRemote = function(options) { options = options || {}; - var spinner = utils.addSpinnerOverlay(remoteBox).addClass("projects-dialog-spinner-contain"); + var spinner = utils.addSpinnerOverlay(remoteBox).addClass("red-ui-component-spinner-contain"); var buttonRow = $('
                                            ').appendTo(spinner); - $('').text(RED._("eventLog.view")).appendTo(buttonRow).on("click", function(evt) { + $('').text(RED._("eventLog.view")).appendTo(buttonRow).on("click", function(evt) { evt.preventDefault(); RED.actions.invoke("core:show-event-log"); }); @@ -1012,16 +1012,16 @@ RED.sidebar.versionControl = (function() { spinner.remove(); }); } - $('') + $('') .appendTo(row) .on("click", function(e) { e.preventDefault(); pullRemote({ - setUpstream: $("#sidebar-version-control-repo-toolbar-set-upstream").prop('checked') + setUpstream: $("#red-ui-sidebar-vc-repo-toolbar-set-upstream").prop('checked') }); }); - $('
                                            ').appendTo(sidebarContent); + $('
                                            ').appendTo(sidebarContent); RED.sidebar.addTab({ id: "version-control", @@ -1068,7 +1068,7 @@ RED.sidebar.versionControl = (function() { } else { bulkChangeSpinner = utils.addSpinnerOverlay(stagedChangesList.parent()); } - bulkChangeSpinner.addClass('projects-dialog-spinner-sidebar'); + bulkChangeSpinner.addClass('red-ui-component-spinner-sidebar'); var body = unstaged?{files:files}:undefined; utils.sendRequest({ url: "projects/"+activeProject.name+"/stage", @@ -1163,10 +1163,10 @@ RED.sidebar.versionControl = (function() { } isMerging = !!result.merging; if (isMerging) { - sidebarContent.addClass("sidebar-version-control-merging"); + sidebarContent.addClass("red-ui-sidebar-vc-merging"); unmergedContent.show(); } else { - sidebarContent.removeClass("sidebar-version-control-merging"); + sidebarContent.removeClass("red-ui-sidebar-vc-merging"); unmergedContent.hide(); } unstagedChangesList.editableList('removeItem',emptyStagedItem); @@ -1299,52 +1299,52 @@ RED.sidebar.versionControl = (function() { $.getJSON(url,function(result) { refreshFiles(result); - $('#sidebar-version-control-local-branch').text(result.branches.local); - $('#sidebar-version-control-remote-branch').text(result.branches.remote||RED._("sidebar.project.versionControl.none")); + $('#red-ui-sidebar-vc-local-branch').text(result.branches.local); + $('#red-ui-sidebar-vc-remote-branch').text(result.branches.remote||RED._("sidebar.project.versionControl.none")); var commitsAhead = result.commits.ahead || 0; var commitsBehind = result.commits.behind || 0; if (activeProject.git.hasOwnProperty('remotes')) { if (result.branches.hasOwnProperty("remoteError") && result.branches.remoteError.code !== 'git_remote_gone') { - $("#sidebar-version-control-repo-status-auth-issue").show(); - $("#sidebar-version-control-repo-status-stats").hide(); - $('#sidebar-version-control-repo-branch').prop('disabled',true); - $("#sidebar-version-control-repo-pull").prop('disabled',true); - $("#sidebar-version-control-repo-push").prop('disabled',true); - $('#sidebar-version-control-repo-toolbar-message').hide(); - $('#sidebar-version-control-repo-toolbar-error-message').show(); + $("#red-ui-sidebar-vc-repo-status-auth-issue").show(); + $("#red-ui-sidebar-vc-repo-status-stats").hide(); + $('#red-ui-sidebar-vc-repo-branch').prop('disabled',true); + $("#red-ui-sidebar-vc-repo-pull").prop('disabled',true); + $("#red-ui-sidebar-vc-repo-push").prop('disabled',true); + $('#red-ui-sidebar-vc-repo-toolbar-message').hide(); + $('#red-ui-sidebar-vc-repo-toolbar-error-message').show(); } else { - $('#sidebar-version-control-repo-toolbar-message').show(); - $('#sidebar-version-control-repo-toolbar-error-message').hide(); + $('#red-ui-sidebar-vc-repo-toolbar-message').show(); + $('#red-ui-sidebar-vc-repo-toolbar-error-message').hide(); - $("#sidebar-version-control-repo-status-auth-issue").hide(); - $("#sidebar-version-control-repo-status-stats").show(); + $("#red-ui-sidebar-vc-repo-status-auth-issue").hide(); + $("#red-ui-sidebar-vc-repo-status-stats").show(); - $('#sidebar-version-control-repo-branch').prop('disabled',false); + $('#red-ui-sidebar-vc-repo-branch').prop('disabled',false); - $("#sidebar-version-control-repo-status-button").show(); + $("#red-ui-sidebar-vc-repo-status-button").show(); if (result.branches.hasOwnProperty('remote')) { updateRemoteStatus(commitsAhead, commitsBehind); } else { - $('#sidebar-version-control-commits-ahead').text(""); - $('#sidebar-version-control-commits-behind').text(""); + $('#red-ui-sidebar-vc-commits-ahead').text(""); + $('#red-ui-sidebar-vc-commits-behind').text(""); - $('#sidebar-version-control-repo-toolbar-message').text(RED._("sidebar.project.versionControl.notTracking")); - $("#sidebar-version-control-repo-pull").prop('disabled',true); - $("#sidebar-version-control-repo-push").prop('disabled',true); + $('#red-ui-sidebar-vc-repo-toolbar-message').text(RED._("sidebar.project.versionControl.notTracking")); + $("#red-ui-sidebar-vc-repo-pull").prop('disabled',true); + $("#red-ui-sidebar-vc-repo-push").prop('disabled',true); } } } else { - $("#sidebar-version-control-repo-status-button").hide(); + $("#red-ui-sidebar-vc-repo-status-button").hide(); } refreshInProgress = false; - $('.sidebar-version-control-shade').hide(); + $('.red-ui-sidebar-vc-shade').hide(); }).fail(function() { refreshInProgress = false; }); } else { - $('.sidebar-version-control-shade').show(); + $('.red-ui-sidebar-vc-shade').show(); unstagedChangesList.editableList('empty'); stagedChangesList.editableList('empty'); unmergedChangesList.editableList('empty'); @@ -1353,31 +1353,31 @@ RED.sidebar.versionControl = (function() { function updateRemoteStatus(commitsAhead, commitsBehind) { - $('#sidebar-version-control-commits-ahead').text(commitsAhead); - $('#sidebar-version-control-commits-behind').text(commitsBehind); + $('#red-ui-sidebar-vc-commits-ahead').text(commitsAhead); + $('#red-ui-sidebar-vc-commits-behind').text(commitsBehind); if (isMerging) { - $('#sidebar-version-control-repo-toolbar-message').text(RED._("sidebar.project.versionControl.statusUnmergedChanged")); - $("#sidebar-version-control-repo-pull").prop('disabled',true); - $("#sidebar-version-control-repo-push").prop('disabled',true); + $('#red-ui-sidebar-vc-repo-toolbar-message').text(RED._("sidebar.project.versionControl.statusUnmergedChanged")); + $("#red-ui-sidebar-vc-repo-pull").prop('disabled',true); + $("#red-ui-sidebar-vc-repo-push").prop('disabled',true); } else if (commitsAhead > 0 && commitsBehind === 0) { - $('#sidebar-version-control-repo-toolbar-message').text(RED._("sidebar.project.versionControl.commitsAhead", {count:commitsAhead})); - $("#sidebar-version-control-repo-pull").prop('disabled',true); - $("#sidebar-version-control-repo-push").prop('disabled',false); + $('#red-ui-sidebar-vc-repo-toolbar-message').text(RED._("sidebar.project.versionControl.commitsAhead", {count:commitsAhead})); + $("#red-ui-sidebar-vc-repo-pull").prop('disabled',true); + $("#red-ui-sidebar-vc-repo-push").prop('disabled',false); } else if (commitsAhead === 0 && commitsBehind > 0) { - $('#sidebar-version-control-repo-toolbar-message').text(RED._("sidebar.project.versionControl.commitsBehind",{ count: commitsBehind })); - $("#sidebar-version-control-repo-pull").prop('disabled',false); - $("#sidebar-version-control-repo-push").prop('disabled',true); + $('#red-ui-sidebar-vc-repo-toolbar-message').text(RED._("sidebar.project.versionControl.commitsBehind",{ count: commitsBehind })); + $("#red-ui-sidebar-vc-repo-pull").prop('disabled',false); + $("#red-ui-sidebar-vc-repo-push").prop('disabled',true); } else if (commitsAhead > 0 && commitsBehind > 0) { - $('#sidebar-version-control-repo-toolbar-message').text( + $('#red-ui-sidebar-vc-repo-toolbar-message').text( RED._("sidebar.project.versionControl.commitsAheadAndBehind1",{ count:commitsBehind })+ RED._("sidebar.project.versionControl.commitsAheadAndBehind2",{ count:commitsAhead })+ RED._("sidebar.project.versionControl.commitsAheadAndBehind3",{ count:commitsBehind })); - $("#sidebar-version-control-repo-pull").prop('disabled',false); - $("#sidebar-version-control-repo-push").prop('disabled',true); + $("#red-ui-sidebar-vc-repo-pull").prop('disabled',false); + $("#red-ui-sidebar-vc-repo-push").prop('disabled',true); } else if (commitsAhead === 0 && commitsBehind === 0) { - $('#sidebar-version-control-repo-toolbar-message').text(RED._("sidebar.project.versionControl.repositoryUpToDate")); - $("#sidebar-version-control-repo-pull").prop('disabled',true); - $("#sidebar-version-control-repo-push").prop('disabled',true); + $('#red-ui-sidebar-vc-repo-toolbar-message').text(RED._("sidebar.project.versionControl.repositoryUpToDate")); + $("#red-ui-sidebar-vc-repo-pull").prop('disabled',true); + $("#red-ui-sidebar-vc-repo-push").prop('disabled',true); } } function show() { diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/search.js b/packages/node_modules/@node-red/editor-client/src/js/ui/search.js index 85bfbb31b..d814ab738 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/search.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/search.js @@ -147,7 +147,7 @@ RED.search = (function() { } function createDialog() { - dialog = $("
                                            ",{id:"red-ui-search",class:"red-ui-search"}).appendTo("#main-container"); + dialog = $("
                                            ",{id:"red-ui-search",class:"red-ui-search"}).appendTo("#red-ui-main-container"); var searchDiv = $("
                                            ",{class:"red-ui-search-container"}).appendTo(dialog); searchInput = $('').appendTo(searchDiv).searchBox({ delay: 200, @@ -194,7 +194,7 @@ RED.search = (function() { searchInput.i18n(); var searchResultsDiv = $("
                                            ",{class:"red-ui-search-results-container"}).appendTo(dialog); - searchResults = $('
                                              ',{id:"search-result-list", style:"position: absolute;top: 5px;bottom: 5px;left: 5px;right: 5px;"}).appendTo(searchResultsDiv).editableList({ + searchResults = $('
                                                ',{style:"position: absolute;top: 5px;bottom: 5px;left: 5px;right: 5px;"}).appendTo(searchResultsDiv).editableList({ addButton: false, addItem: function(container,i,object) { var node = object.node; @@ -213,7 +213,7 @@ RED.search = (function() { } nodeDiv.css('backgroundColor',colour); - var iconContainer = $('
                                                ',{class:"palette_icon_container"}).appendTo(nodeDiv); + var iconContainer = $('
                                                ',{class:"red-ui-palette-icon-container"}).appendTo(nodeDiv); RED.utils.createIconElement(icon_url, iconContainer, true); var contentDiv = $('
                                                ',{class:"red-ui-search-result-description"}).appendTo(div); @@ -254,11 +254,11 @@ RED.search = (function() { } if (!visible) { RED.keyboard.add("*","escape",function(){hide()}); - $("#header-shade").show(); - $("#editor-shade").show(); - $("#palette-shade").show(); - $("#sidebar-shade").show(); - $("#sidebar-separator").hide(); + $("#red-ui-header-shade").show(); + $("#red-ui-editor-shade").show(); + $("#red-ui-palette-shade").show(); + $("#red-ui-sidebar-shade").show(); + $("#red-ui-sidebar-separator").hide(); indexWorkspace(); if (dialog === null) { createDialog(); @@ -275,11 +275,11 @@ RED.search = (function() { if (visible) { RED.keyboard.remove("escape"); visible = false; - $("#header-shade").hide(); - $("#editor-shade").hide(); - $("#palette-shade").hide(); - $("#sidebar-shade").hide(); - $("#sidebar-separator").show(); + $("#red-ui-header-shade").hide(); + $("#red-ui-editor-shade").hide(); + $("#red-ui-palette-shade").hide(); + $("#red-ui-sidebar-shade").hide(); + $("#red-ui-sidebar-separator").show(); if (dialog !== null) { dialog.slideUp(200,function() { searchInput.searchBox('value',''); @@ -299,10 +299,10 @@ RED.search = (function() { - $("#header-shade").on('mousedown',hide); - $("#editor-shade").on('mousedown',hide); - $("#palette-shade").on('mousedown',hide); - $("#sidebar-shade").on('mousedown',hide); + $("#red-ui-header-shade").on('mousedown',hide); + $("#red-ui-editor-shade").on('mousedown',hide); + $("#red-ui-palette-shade").on('mousedown',hide); + $("#red-ui-sidebar-shade").on('mousedown',hide); } return { diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/sidebar.js b/packages/node_modules/@node-red/editor-client/src/js/ui/sidebar.js index dd7940f02..9e89add0c 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/sidebar.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/sidebar.js @@ -16,33 +16,8 @@ RED.sidebar = (function() { //$('#sidebar').tabs(); - var sidebar_tabs = RED.tabs.create({ - id:"sidebar-tabs", - onchange:function(tab) { - $("#sidebar-content").children().hide(); - $("#sidebar-footer").children().hide(); - if (tab.onchange) { - tab.onchange.call(tab); - } - $(tab.wrapper).show(); - if (tab.toolbar) { - $(tab.toolbar).show(); - } - }, - onremove: function(tab) { - $(tab.wrapper).hide(); - if (tab.onremove) { - tab.onremove.call(tab); - } - }, - // minimumActiveTabWidth: 70, - collapsible: true - // scrollable: true - }); - - var knownTabs = { - - }; + var sidebar_tabs; + var knownTabs = {}; function addTab(title,content,closeable,visible) { var options; @@ -62,16 +37,16 @@ RED.sidebar = (function() { delete options.closeable; - options.wrapper = $('
                                                ',{style:"height:100%"}).appendTo("#sidebar-content") + options.wrapper = $('
                                                ',{style:"height:100%"}).appendTo("#red-ui-sidebar-content") options.wrapper.append(options.content); options.wrapper.hide(); if (!options.enableOnEdit) { - options.shade = $('
                                                ',{class:"sidebar-shade hide"}).appendTo(options.wrapper); + options.shade = $('
                                                ',{class:"red-ui-sidebar-shade hide"}).appendTo(options.wrapper); } if (options.toolbar) { - $("#sidebar-footer").append(options.toolbar); + $("#red-ui-sidebar-footer").append(options.toolbar); $(options.toolbar).hide(); } var id = options.id; @@ -107,110 +82,113 @@ RED.sidebar = (function() { var sidebarSeparator = {}; sidebarSeparator.dragging = false; - $("#sidebar-separator").draggable({ - axis: "x", - start:function(event,ui) { - sidebarSeparator.closing = false; - sidebarSeparator.opening = false; - var winWidth = $(window).width(); - sidebarSeparator.start = ui.position.left; - sidebarSeparator.chartWidth = $("#workspace").width(); - sidebarSeparator.chartRight = winWidth-$("#workspace").width()-$("#workspace").offset().left-2; - sidebarSeparator.dragging = true; + function setupSidebarSeparator() { + $("#red-ui-sidebar-separator").draggable({ + axis: "x", + start:function(event,ui) { + sidebarSeparator.closing = false; + sidebarSeparator.opening = false; + var winWidth = $("#red-ui-editor").width(); + sidebarSeparator.start = ui.position.left; + sidebarSeparator.chartWidth = $("#red-ui-workspace").width(); + sidebarSeparator.chartRight = winWidth-$("#red-ui-workspace").width()-$("#red-ui-workspace").offset().left-2; + sidebarSeparator.dragging = true; - if (!RED.menu.isSelected("menu-item-sidebar")) { - sidebarSeparator.opening = true; - var newChartRight = 7; - $("#sidebar").addClass("closing"); - $("#workspace").css("right",newChartRight); - $("#editor-stack").css("right",newChartRight+1); - $("#sidebar").width(0); - RED.menu.setSelected("menu-item-sidebar",true); + if (!RED.menu.isSelected("menu-item-sidebar")) { + sidebarSeparator.opening = true; + var newChartRight = 7; + $("#red-ui-sidebar").addClass("closing"); + $("#red-ui-workspace").css("right",newChartRight); + $("#red-ui-editor-stack").css("right",newChartRight+1); + $("#red-ui-sidebar").width(0); + RED.menu.setSelected("menu-item-sidebar",true); + RED.events.emit("sidebar:resize"); + } + sidebarSeparator.width = $("#red-ui-sidebar").width(); + }, + drag: function(event,ui) { + var d = ui.position.left-sidebarSeparator.start; + var newSidebarWidth = sidebarSeparator.width-d; + if (sidebarSeparator.opening) { + newSidebarWidth -= 3; + } + + if (newSidebarWidth > 150) { + if (sidebarSeparator.chartWidth+d < 200) { + ui.position.left = 200+sidebarSeparator.start-sidebarSeparator.chartWidth; + d = ui.position.left-sidebarSeparator.start; + newSidebarWidth = sidebarSeparator.width-d; + } + } + + if (newSidebarWidth < 150) { + if (!sidebarSeparator.closing) { + $("#red-ui-sidebar").addClass("closing"); + sidebarSeparator.closing = true; + } + if (!sidebarSeparator.opening) { + newSidebarWidth = 150; + ui.position.left = sidebarSeparator.width-(150 - sidebarSeparator.start); + d = ui.position.left-sidebarSeparator.start; + } + } else if (newSidebarWidth > 150 && (sidebarSeparator.closing || sidebarSeparator.opening)) { + sidebarSeparator.closing = false; + $("#red-ui-sidebar").removeClass("closing"); + } + + var newChartRight = sidebarSeparator.chartRight-d; + $("#red-ui-workspace").css("right",newChartRight); + $("#red-ui-editor-stack").css("right",newChartRight+1); + $("#red-ui-sidebar").width(newSidebarWidth); + + sidebar_tabs.resize(); + RED.events.emit("sidebar:resize"); + }, + stop:function(event,ui) { + sidebarSeparator.dragging = false; + if (sidebarSeparator.closing) { + $("#red-ui-sidebar").removeClass("closing"); + RED.menu.setSelected("menu-item-sidebar",false); + if ($("#red-ui-sidebar").width() < 180) { + $("#red-ui-sidebar").width(180); + $("#red-ui-workspace").css("right",187); + $("#red-ui-editor-stack").css("right",188); + } + } + $("#red-ui-sidebar-separator").css("left","auto"); + $("#red-ui-sidebar-separator").css("right",($("#red-ui-sidebar").width()+2)+"px"); RED.events.emit("sidebar:resize"); } - sidebarSeparator.width = $("#sidebar").width(); - }, - drag: function(event,ui) { - var d = ui.position.left-sidebarSeparator.start; - var newSidebarWidth = sidebarSeparator.width-d; - if (sidebarSeparator.opening) { - newSidebarWidth -= 3; - } + }); - if (newSidebarWidth > 150) { - if (sidebarSeparator.chartWidth+d < 200) { - ui.position.left = 200+sidebarSeparator.start-sidebarSeparator.chartWidth; - d = ui.position.left-sidebarSeparator.start; - newSidebarWidth = sidebarSeparator.width-d; - } - } - - if (newSidebarWidth < 150) { - if (!sidebarSeparator.closing) { - $("#sidebar").addClass("closing"); - sidebarSeparator.closing = true; - } - if (!sidebarSeparator.opening) { - newSidebarWidth = 150; - ui.position.left = sidebarSeparator.width-(150 - sidebarSeparator.start); - d = ui.position.left-sidebarSeparator.start; - } - } else if (newSidebarWidth > 150 && (sidebarSeparator.closing || sidebarSeparator.opening)) { - sidebarSeparator.closing = false; - $("#sidebar").removeClass("closing"); - } - - var newChartRight = sidebarSeparator.chartRight-d; - $("#workspace").css("right",newChartRight); - $("#editor-stack").css("right",newChartRight+1); - $("#sidebar").width(newSidebarWidth); - - sidebar_tabs.resize(); - RED.events.emit("sidebar:resize"); - }, - stop:function(event,ui) { - sidebarSeparator.dragging = false; - if (sidebarSeparator.closing) { - $("#sidebar").removeClass("closing"); - RED.menu.setSelected("menu-item-sidebar",false); - if ($("#sidebar").width() < 180) { - $("#sidebar").width(180); - $("#workspace").css("right",187); - $("#editor-stack").css("right",188); - } - } - $("#sidebar-separator").css("left","auto"); - $("#sidebar-separator").css("right",($("#sidebar").width()+2)+"px"); - RED.events.emit("sidebar:resize"); - } - }); - - var sidebarControls = $('
                                                ').appendTo($("#sidebar-separator")); - sidebarControls.on("click", function() { - sidebarControls.hide(); - RED.menu.toggleSelected("menu-item-sidebar"); - }) - $("#sidebar-separator").on("mouseenter", function() { - if (!sidebarSeparator.dragging) { - if (RED.menu.isSelected("menu-item-sidebar")) { - sidebarControls.find("i").addClass("fa-chevron-right").removeClass("fa-chevron-left"); - } else { - sidebarControls.find("i").removeClass("fa-chevron-right").addClass("fa-chevron-left"); - } - sidebarControls.toggle("slide", { direction: "right" }, 200); - } - }) - $("#sidebar-separator").on("mouseleave", function() { - if (!sidebarSeparator.dragging) { + var sidebarControls = $('
                                                ').appendTo($("#red-ui-sidebar-separator")); + sidebarControls.on("click", function() { sidebarControls.hide(); - } - }); + RED.menu.toggleSelected("menu-item-sidebar"); + }) + $("#red-ui-sidebar-separator").on("mouseenter", function() { + if (!sidebarSeparator.dragging) { + if (RED.menu.isSelected("menu-item-sidebar")) { + sidebarControls.find("i").addClass("fa-chevron-right").removeClass("fa-chevron-left"); + } else { + sidebarControls.find("i").removeClass("fa-chevron-right").addClass("fa-chevron-left"); + } + sidebarControls.toggle("slide", { direction: "right" }, 200); + } + }) + $("#red-ui-sidebar-separator").on("mouseleave", function() { + if (!sidebarSeparator.dragging) { + sidebarControls.stop(false,true); + sidebarControls.hide(); + } + }); + } function toggleSidebar(state) { if (!state) { - $("#main-container").addClass("sidebar-closed"); + $("#red-ui-main-container").addClass("red-ui-sidebar-closed"); } else { - $("#main-container").removeClass("sidebar-closed"); + $("#red-ui-main-container").removeClass("red-ui-sidebar-closed"); sidebar_tabs.resize(); } RED.events.emit("sidebar:resize"); @@ -233,6 +211,35 @@ RED.sidebar = (function() { } function init () { + setupSidebarSeparator(); + sidebar_tabs = RED.tabs.create({ + element: $('
                                                  ').appendTo("#red-ui-sidebar"), + onchange:function(tab) { + $("#red-ui-sidebar-content").children().hide(); + $("#red-ui-sidebar-footer").children().hide(); + if (tab.onchange) { + tab.onchange.call(tab); + } + $(tab.wrapper).show(); + if (tab.toolbar) { + $(tab.toolbar).show(); + } + }, + onremove: function(tab) { + $(tab.wrapper).hide(); + if (tab.onremove) { + tab.onremove.call(tab); + } + }, + // minimumActiveTabWidth: 70, + collapsible: true + // scrollable: true + }); + + $('
                                                  ').appendTo("#red-ui-sidebar"); + $('').appendTo("#red-ui-sidebar"); + $('
                                                  ').appendTo("#red-ui-sidebar"); + RED.actions.add("core:toggle-sidebar",function(state){ if (state === undefined) { RED.menu.toggleSelected("menu-item-sidebar"); @@ -240,13 +247,13 @@ RED.sidebar = (function() { toggleSidebar(state); } }); - RED.popover.tooltip($("#sidebar-separator").find(".sidebar-control-right"),RED._("keyboard.toggleSidebar"),"core:toggle-sidebar"); + RED.popover.tooltip($("#red-ui-sidebar-separator").find(".red-ui-sidebar-control-right"),RED._("keyboard.toggleSidebar"),"core:toggle-sidebar"); showSidebar(); RED.sidebar.info.init(); RED.sidebar.config.init(); RED.sidebar.context.init(); // hide info bar at start if screen rather narrow... - if ($(window).width() < 600) { RED.menu.setSelected("menu-item-sidebar",false); } + if ($("#red-ui-editor").width() < 600) { RED.menu.setSelected("menu-item-sidebar",false); } } return { diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/statusBar.js b/packages/node_modules/@node-red/editor-client/src/js/ui/statusBar.js new file mode 100644 index 000000000..4c9156207 --- /dev/null +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/statusBar.js @@ -0,0 +1,50 @@ +/** + * Copyright JS Foundation and other contributors, http://js.foundation + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + **/ + + /*! + RED.statusBar.add({ + id: "widget-identifier", + align: "left|right", + element: widgetElement + }) +*/ + +RED.statusBar = (function() { + + var widgets = {}; + var leftBucket; + var rightBucket; + + function addWidget(options) { + widgets[options.id] = options; + var el = $(''); + options.element.appendTo(el); + if (options.align === 'left') { + leftBucket.append(el); + } else if (options.align === 'right') { + rightBucket.prepend(el); + } + } + + return { + init: function() { + leftBucket = $('').appendTo("#red-ui-workspace-footer"); + rightBucket = $('').appendTo("#red-ui-workspace-footer"); + }, + add: addWidget + } + +})(); diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/subflow.js b/packages/node_modules/@node-red/editor-client/src/js/ui/subflow.js index dfe61efce..342109200 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/subflow.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/subflow.js @@ -87,8 +87,8 @@ RED.subflow = (function() { RED.view.select(); RED.nodes.dirty(true); RED.view.redraw(); - $("#workspace-subflow-input-add").addClass("active"); - $("#workspace-subflow-input-remove").removeClass("active"); + $("#red-ui-subflow-input-add").addClass("active"); + $("#red-ui-subflow-input-remove").removeClass("active"); RED.palette.refresh(); } @@ -108,8 +108,8 @@ RED.subflow = (function() { }); removedInputLinks.forEach(function(l) { RED.nodes.removeLink(l)}); activeSubflow.in = []; - $("#workspace-subflow-input-add").removeClass("active"); - $("#workspace-subflow-input-remove").addClass("active"); + $("#red-ui-subflow-input-add").removeClass("active"); + $("#red-ui-subflow-input-remove").addClass("active"); activeSubflow.changed = true; RED.palette.refresh(); return {subflowInputs: [ removedInput ], links:removedInputLinks}; @@ -151,7 +151,7 @@ RED.subflow = (function() { RED.view.select(); RED.nodes.dirty(true); RED.view.redraw(); - $("#workspace-subflow-output .spinner-value").text(subflow.out.length); + $("#red-ui-subflow-output .spinner-value").text(subflow.out.length); RED.palette.refresh(); } @@ -227,8 +227,8 @@ RED.subflow = (function() { RED.view.select(); RED.nodes.dirty(true); RED.view.redraw(); - $("#workspace-subflow-status").prop("checked",!!subflow.status); - $("#workspace-subflow-status").parent().parent().toggleClass("active",!!subflow.status); + $("#red-ui-subflow-status").prop("checked",!!subflow.status); + $("#red-ui-subflow-status").parent().parent().toggleClass("active",!!subflow.status); } function removeSubflowStatus() { @@ -245,8 +245,8 @@ RED.subflow = (function() { subflowRemovedLinks.forEach(function(l) { RED.nodes.removeLink(l)}); delete subflow.status; - $("#workspace-subflow-status").prop("checked",!!subflow.status); - $("#workspace-subflow-status").parent().parent().toggleClass("active",!!subflow.status); + $("#red-ui-subflow-status").prop("checked",!!subflow.status); + $("#red-ui-subflow-status").parent().parent().toggleClass("active",!!subflow.status); return { links: subflowRemovedLinks } } @@ -282,51 +282,51 @@ RED.subflow = (function() { function refreshToolbar(activeSubflow) { if (activeSubflow) { - $("#workspace-subflow-input-add").toggleClass("active", activeSubflow.in.length !== 0); - $("#workspace-subflow-input-remove").toggleClass("active",activeSubflow.in.length === 0); + $("#red-ui-subflow-input-add").toggleClass("active", activeSubflow.in.length !== 0); + $("#red-ui-subflow-input-remove").toggleClass("active",activeSubflow.in.length === 0); - $("#workspace-subflow-output .spinner-value").text(activeSubflow.out.length); + $("#red-ui-subflow-output .spinner-value").text(activeSubflow.out.length); - $("#workspace-subflow-status").prop("checked",!!activeSubflow.status); - $("#workspace-subflow-status").parent().parent().toggleClass("active",!!activeSubflow.status); + $("#red-ui-subflow-status").prop("checked",!!activeSubflow.status); + $("#red-ui-subflow-status").parent().parent().toggleClass("active",!!activeSubflow.status); } } function showWorkspaceToolbar(activeSubflow) { - var toolbar = $("#workspace-toolbar"); + var toolbar = $("#red-ui-workspace-toolbar"); toolbar.empty(); // Edit properties - $(' ').appendTo(toolbar); + $(' ').appendTo(toolbar); // Inputs $(' '+ '
                                                  '+ - '0'+ - '1'+ + '0'+ + '1'+ '
                                                  ').appendTo(toolbar); // Outputs - $('

                                ",{class:"node-diff-property-cell-label"}).text("id").appendTo(row); - localCell = $("",{class:"node-diff-property-cell node-diff-node-local"}).appendTo(row); + $("",{class:"red-ui-diff-list-cell-label"}).text("id").appendTo(row); + localCell = $("",{class:"red-ui-diff-list-cell red-ui-diff-list-node-local"}).appendTo(row); if (localNode) { - localCell.addClass("node-diff-node-unchanged"); - $('').appendTo(localCell); - element = $('').appendTo(localCell); + localCell.addClass("red-ui-diff-status-unchanged"); + $('').appendTo(localCell); + element = $('').appendTo(localCell); propertyElements['local.id'] = RED.utils.createObjectElement(localNode.id).appendTo(element); } else { - localCell.addClass("node-diff-empty"); + localCell.addClass("red-ui-diff-empty"); } if (remoteNode !== undefined) { - remoteCell = $("",{class:"node-diff-property-cell node-diff-node-remote"}).appendTo(row); - remoteCell.addClass("node-diff-node-unchanged"); + remoteCell = $("",{class:"red-ui-diff-list-cell red-ui-diff-list-node-remote"}).appendTo(row); + remoteCell.addClass("red-ui-diff-status-unchanged"); if (remoteNode) { - $('').appendTo(remoteCell); - element = $('').appendTo(remoteCell); + $('').appendTo(remoteCell); + element = $('').appendTo(remoteCell); propertyElements['remote.id'] = RED.utils.createObjectElement(remoteNode.id).appendTo(element); } else { - remoteCell.addClass("node-diff-empty"); + remoteCell.addClass("red-ui-diff-empty"); } } @@ -785,12 +784,12 @@ RED.diff = (function() { conflict = true; } row = $("
                                ",{class:"node-diff-property-cell-label"}).text("position").appendTo(row); - localCell = $("",{class:"node-diff-property-cell node-diff-node-local"}).appendTo(row); + $("",{class:"red-ui-diff-list-cell-label"}).text("position").appendTo(row); + localCell = $("",{class:"red-ui-diff-list-cell red-ui-diff-list-node-local"}).appendTo(row); if (localNode) { - localCell.addClass("node-diff-node-"+(localChanged?"changed":"unchanged")); - $(''+(localChanged?'':'')+'').appendTo(localCell); - element = $('').appendTo(localCell); + localCell.addClass("red-ui-diff-status-"+(localChanged?"changed":"unchanged")); + $(''+(localChanged?'':'')+'').appendTo(localCell); + element = $('').appendTo(localCell); propertyElements['local.position'] = RED.utils.createObjectElement({x:localNode.x,y:localNode.y}, { path: "position", @@ -803,15 +802,15 @@ RED.diff = (function() { } ).appendTo(element); } else { - localCell.addClass("node-diff-empty"); + localCell.addClass("red-ui-diff-empty"); } if (remoteNode !== undefined) { - remoteCell = $("",{class:"node-diff-property-cell node-diff-node-remote"}).appendTo(row); - remoteCell.addClass("node-diff-node-"+(remoteChanged?"changed":"unchanged")); + remoteCell = $("",{class:"red-ui-diff-list-cell red-ui-diff-list-node-remote"}).appendTo(row); + remoteCell.addClass("red-ui-diff-status-"+(remoteChanged?"changed":"unchanged")); if (remoteNode) { - $(''+(remoteChanged?'':'')+'').appendTo(remoteCell); - element = $('').appendTo(remoteCell); + $(''+(remoteChanged?'':'')+'').appendTo(remoteCell); + element = $('').appendTo(remoteCell); propertyElements['remote.position'] = RED.utils.createObjectElement({x:remoteNode.x,y:remoteNode.y}, { path: "position", @@ -824,7 +823,7 @@ RED.diff = (function() { } ).appendTo(element); } else { - remoteCell.addClass("node-diff-empty"); + remoteCell.addClass("red-ui-diff-empty"); } } } @@ -853,34 +852,34 @@ RED.diff = (function() { conflict = true; } row = $("
                                ",{class:"node-diff-property-cell-label"}).text("wires").appendTo(row); - localCell = $("",{class:"node-diff-property-cell node-diff-node-local"}).appendTo(row); + $("",{class:"red-ui-diff-list-cell-label"}).text("wires").appendTo(row); + localCell = $("",{class:"red-ui-diff-list-cell red-ui-diff-list-node-local"}).appendTo(row); if (localNode) { if (!conflict) { - localCell.addClass("node-diff-node-"+(localChanged?"changed":"unchanged")); - $(''+(localChanged?'':'')+'').appendTo(localCell); + localCell.addClass("red-ui-diff-status-"+(localChanged?"changed":"unchanged")); + $(''+(localChanged?'':'')+'').appendTo(localCell); } else { - localCell.addClass("node-diff-node-conflict"); - $('').appendTo(localCell); + localCell.addClass("red-ui-diff-status-conflict"); + $('').appendTo(localCell); } formatWireProperty(localNode.wires,localNodeObj.all).appendTo(localCell); } else { - localCell.addClass("node-diff-empty"); + localCell.addClass("red-ui-diff-empty"); } if (remoteNode !== undefined) { - remoteCell = $("",{class:"node-diff-property-cell node-diff-node-remote"}).appendTo(row); + remoteCell = $("",{class:"red-ui-diff-list-cell red-ui-diff-list-node-remote"}).appendTo(row); if (remoteNode) { if (!conflict) { - remoteCell.addClass("node-diff-node-"+(remoteChanged?"changed":"unchanged")); - $(''+(remoteChanged?'':'')+'').appendTo(remoteCell); + remoteCell.addClass("red-ui-diff-status-"+(remoteChanged?"changed":"unchanged")); + $(''+(remoteChanged?'':'')+'').appendTo(remoteCell); } else { - remoteCell.addClass("node-diff-node-conflict"); - $('').appendTo(remoteCell); + remoteCell.addClass("red-ui-diff-status-conflict"); + $('').appendTo(remoteCell); } formatWireProperty(remoteNode.wires,remoteNodeObj.all).appendTo(remoteCell); } else { - remoteCell.addClass("node-diff-empty"); + remoteCell.addClass("red-ui-diff-empty"); } } } @@ -926,17 +925,17 @@ RED.diff = (function() { } row = $("
                                ",{class:"node-diff-property-cell-label"}).text(d).appendTo(row); - localCell = $("",{class:"node-diff-property-cell node-diff-node-local"}).appendTo(row); + var propertyNameCell = $("",{class:"red-ui-diff-list-cell-label"}).text(d).appendTo(row); + localCell = $("",{class:"red-ui-diff-list-cell red-ui-diff-list-node-local"}).appendTo(row); if (localNode) { if (!conflict) { - localCell.addClass("node-diff-node-"+(localChanged?"changed":"unchanged")); - $(''+(localChanged?'':'')+'').appendTo(localCell); + localCell.addClass("red-ui-diff-status-"+(localChanged?"changed":"unchanged")); + $(''+(localChanged?'':'')+'').appendTo(localCell); } else { - localCell.addClass("node-diff-node-conflict"); - $('').appendTo(localCell); + localCell.addClass("red-ui-diff-status-conflict"); + $('').appendTo(localCell); } - element = $('').appendTo(localCell); + element = $('').appendTo(localCell); propertyElements['local.'+d] = RED.utils.createObjectElement(localNode[d], { path: d, @@ -949,19 +948,19 @@ RED.diff = (function() { } ).appendTo(element); } else { - localCell.addClass("node-diff-empty"); + localCell.addClass("red-ui-diff-empty"); } if (remoteNode !== undefined) { - remoteCell = $("",{class:"node-diff-property-cell node-diff-node-remote"}).appendTo(row); + remoteCell = $("",{class:"red-ui-diff-list-cell red-ui-diff-list-node-remote"}).appendTo(row); if (remoteNode) { if (!conflict) { - remoteCell.addClass("node-diff-node-"+(remoteChanged?"changed":"unchanged")); - $(''+(remoteChanged?'':'')+'').appendTo(remoteCell); + remoteCell.addClass("red-ui-diff-status-"+(remoteChanged?"changed":"unchanged")); + $(''+(remoteChanged?'':'')+'').appendTo(remoteCell); } else { - remoteCell.addClass("node-diff-node-conflict"); - $('').appendTo(remoteCell); + remoteCell.addClass("red-ui-diff-status-conflict"); + $('').appendTo(remoteCell); } - element = $('').appendTo(remoteCell); + element = $('').appendTo(remoteCell); propertyElements['remote.'+d] = RED.utils.createObjectElement(remoteNode[d], { path: d, @@ -974,12 +973,12 @@ RED.diff = (function() { } ).appendTo(element); } else { - remoteCell.addClass("node-diff-empty"); + remoteCell.addClass("red-ui-diff-empty"); } } if (localNode && remoteNode && typeof localNode[d] === "string") { if (/\n/.test(localNode[d]) || /\n/.test(remoteNode[d])) { - $('').on("click", function() { + $('').on("click", function() { showTextDiff(localNode[d],remoteNode[d]); }).appendTo(propertyNameCell); } @@ -990,10 +989,10 @@ RED.diff = (function() { return nodePropertiesDiv; } function createNodeConflictRadioBoxes(node,row,localDiv,remoteDiv,propertiesTable,hide,state,diff) { - var safeNodeId = "node-diff-selectbox-"+node.id.replace(/\./g,'-')+(propertiesTable?"-props":""); + var safeNodeId = "red-ui-diff-selectbox-"+node.id.replace(/\./g,'-')+(propertiesTable?"-props":""); var className = ""; if (node.z||propertiesTable) { - className = "node-diff-selectbox-tab-"+(propertiesTable?node.id:node.z).replace(/\./g,'-'); + className = "red-ui-diff-selectbox-tab-"+(propertiesTable?node.id:node.z).replace(/\./g,'-'); } var titleRow = !propertiesTable && (node.type === 'tab' || node.type === 'subflow'); var changeHandler = function(evt) { @@ -1001,44 +1000,44 @@ RED.diff = (function() { if (node.type === undefined) { // TODO: handle globals } else if (titleRow) { - className = "node-diff-selectbox-tab-"+node.id.replace(/\./g,'-'); + className = "red-ui-diff-selectbox-tab-"+node.id.replace(/\./g,'-'); $("."+className+"-"+this.value).prop('checked',true); if (this.value === 'local') { - $("."+className+"-"+this.value).closest(".node-diff-node-entry").addClass("node-diff-select-local"); - $("."+className+"-"+this.value).closest(".node-diff-node-entry").removeClass("node-diff-select-remote"); + $("."+className+"-"+this.value).closest(".red-ui-diff-list-node").addClass("red-ui-diff-select-local"); + $("."+className+"-"+this.value).closest(".red-ui-diff-list-node").removeClass("red-ui-diff-select-remote"); } else { - $("."+className+"-"+this.value).closest(".node-diff-node-entry").removeClass("node-diff-select-local"); - $("."+className+"-"+this.value).closest(".node-diff-node-entry").addClass("node-diff-select-remote"); + $("."+className+"-"+this.value).closest(".red-ui-diff-list-node").removeClass("red-ui-diff-select-local"); + $("."+className+"-"+this.value).closest(".red-ui-diff-list-node").addClass("red-ui-diff-select-remote"); } } else { // Individual node or properties table - var parentId = "node-diff-selectbox-"+(propertiesTable?node.id:node.z).replace(/\./g,'-'); + var parentId = "red-ui-diff-selectbox-"+(propertiesTable?node.id:node.z).replace(/\./g,'-'); $('#'+parentId+"-local").prop('checked',false); $('#'+parentId+"-remote").prop('checked',false); - var titleRowDiv = $('#'+parentId+"-local").closest(".node-diff-tab").find(".node-diff-tab-title"); - titleRowDiv.removeClass("node-diff-select-local"); - titleRowDiv.removeClass("node-diff-select-remote"); + var titleRowDiv = $('#'+parentId+"-local").closest(".red-ui-diff-list-flow").find(".red-ui-diff-list-flow-title"); + titleRowDiv.removeClass("red-ui-diff-select-local"); + titleRowDiv.removeClass("red-ui-diff-select-remote"); } if (this.value === 'local') { - row.removeClass("node-diff-select-remote"); - row.addClass("node-diff-select-local"); + row.removeClass("red-ui-diff-select-remote"); + row.addClass("red-ui-diff-select-local"); } else if (this.value === 'remote') { - row.addClass("node-diff-select-remote"); - row.removeClass("node-diff-select-local"); + row.addClass("red-ui-diff-select-remote"); + row.removeClass("red-ui-diff-select-local"); } refreshConflictHeader(diff); } - var localSelectDiv = $('
                                Type
                                Type
                                Name'+file.props.name+'
                                Name'+file.props.name+'
                                ').appendTo(nodeSection.content); + nodeSection.timestamp = $('
                                 
                                ').appendTo(nodeSection.content); + var table = $('
                                ').appendTo(nodeSection.content); nodeSection.table = $('').appendTo(table); var bg = $('
                                ').appendTo(nodeSection.header); - $('') + $('') .appendTo(bg) .on("click", function(evt) { evt.stopPropagation(); @@ -75,7 +71,7 @@ RED.sidebar.context = (function() { // subflowSection.expand(); // subflowSection.content.css({height:"100%"}); // bg = $('
                                ').appendTo(subflowSection.header); - // $('') + // $('') // .appendTo(bg) // .on("click", function(evt) { // evt.stopPropagation(); @@ -90,11 +86,11 @@ RED.sidebar.context = (function() { }); flowSection.expand(); flowSection.content.css({height:"100%"}); - flowSection.timestamp = $('
                                 
                                ').appendTo(flowSection.content); - var table = $('
                                ').appendTo(flowSection.content); + flowSection.timestamp = $('
                                 
                                ').appendTo(flowSection.content); + var table = $('
                                ').appendTo(flowSection.content); flowSection.table = $('').appendTo(table); bg = $('
                                ').appendTo(flowSection.header); - $('') + $('') .appendTo(bg) .on("click", function(evt) { evt.stopPropagation(); @@ -108,12 +104,12 @@ RED.sidebar.context = (function() { }); globalSection.expand(); globalSection.content.css({height:"100%"}); - globalSection.timestamp = $('
                                 
                                ').appendTo(globalSection.content); - var table = $('
                                ').appendTo(globalSection.content); + globalSection.timestamp = $('
                                 
                                ').appendTo(globalSection.content); + var table = $('
                                ').appendTo(globalSection.content); globalSection.table = $('').appendTo(table); bg = $('
                                ').appendTo(globalSection.header); - $('') + $('') .appendTo(bg) .on("click", function(evt) { evt.stopPropagation(); @@ -189,9 +185,9 @@ RED.sidebar.context = (function() { } else { $(nodeSection.table).empty(); if (node) { - $('').appendTo(nodeSection.table).i18n(); + $('').appendTo(nodeSection.table).i18n(); } else { - $('').appendTo(nodeSection.table).i18n(); + $('').appendTo(nodeSection.table).i18n(); } nodeSection.timestamp.html(" "); @@ -234,12 +230,12 @@ RED.sidebar.context = (function() { sortedData[keys[i]].forEach(function(v) { var k = keys[i]; var l2 = sortedData[k].length; - var propRow = $('').appendTo(container); + var propRow = $('').appendTo(container); var obj = $(propRow.children()[0]); obj.text(k); var tools = $(''); - var refreshItem = $('').appendTo(tools).on("click", function(e) { + var refreshItem = $('').appendTo(tools).on("click", function(e) { e.preventDefault(); e.stopPropagation(); $.getJSON(baseUrl+"/"+k+"?store="+v.store, function(data) { @@ -256,7 +252,7 @@ RED.sidebar.context = (function() { } }) }); - var deleteItem = $('').appendTo(tools).on("click", function(e) { + var deleteItem = $('').appendTo(tools).on("click", function(e) { e.preventDefault(); e.stopPropagation(); var popover = RED.popover.create({ @@ -268,12 +264,12 @@ RED.sidebar.context = (function() { $('

                                ').appendTo(content); var row = $('

                                ').appendTo(content); var bg = $('').appendTo(row); - $('').appendTo(bg).on("click", function(e) { + $('').appendTo(bg).on("click", function(e) { e.preventDefault(); popover.close(); }); bg = $('').appendTo(row); - $('').appendTo(bg).on("click", function(e) { + $('').appendTo(bg).on("click", function(e) { e.preventDefault(); popover.close(); $.ajax({ @@ -284,7 +280,7 @@ RED.sidebar.context = (function() { if (data.format === 'undefined') { propRow.remove(); if (container.children().length === 0) { - $('').appendTo(container).i18n(); + $('').appendTo(container).i18n(); } } else { payload = data.msg; @@ -316,12 +312,12 @@ RED.sidebar.context = (function() { tools: tools }).appendTo(propRow.children()[1]); if (contextStores.length > 1) { - $("",{class:"sidebar-context-property-storename"}).text(v.store).appendTo($(propRow.children()[0])) + $("",{class:"red-ui-sidebar-context-property-storename"}).text(v.store).appendTo($(propRow.children()[0])) } }); } if (l === 0) { - $('').appendTo(container).i18n(); + $('').appendTo(container).i18n(); } $(section.timestamp).text(new Date().toLocaleString()); }); @@ -332,7 +328,7 @@ RED.sidebar.context = (function() { refreshEntry(section,baseUrl,id); } else { $(container).empty(); - $('').appendTo(container).i18n(); + $('').appendTo(container).i18n(); } } diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/tab-info.js b/packages/node_modules/@node-red/editor-client/src/js/ui/tab-info.js index 1101454ac..209e527db 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/tab-info.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/tab-info.js @@ -40,11 +40,11 @@ RED.sidebar.info = (function() { function init() { content = document.createElement("div"); - content.className = "sidebar-node-info" + content.className = "red-ui-sidebar-info" RED.actions.add("core:show-info-tab",show); - var stackContainer = $("

                                ",{class:"sidebar-node-info-stack"}).appendTo(content); + var stackContainer = $("
                                ",{class:"red-ui-sidebar-info-stack"}).appendTo(content); sections = RED.stack.create({ container: stackContainer @@ -70,17 +70,17 @@ RED.sidebar.info = (function() { helpSection.expand(); helpSection.content.css("padding","6px"); - var tipContainer = $('
                                ').appendTo(content); - tipBox = $('
                                ').appendTo(tipContainer); - var tipButtons = $('
                                ').appendTo(tipContainer); + var tipContainer = $('
                                ').appendTo(content); + tipBox = $('
                                ').appendTo(tipContainer); + var tipButtons = $('
                                ').appendTo(tipContainer); - var tipRefresh = $('').appendTo(tipButtons); + var tipRefresh = $('').appendTo(tipButtons); tipRefresh.on("click", function(e) { e.preventDefault(); tips.next(); }) - var tipClose = $('').appendTo(tipButtons); + var tipClose = $('').appendTo(tipButtons); tipClose.on("click", function(e) { e.preventDefault(); RED.actions.invoke("core:toggle-show-tips"); @@ -131,7 +131,7 @@ RED.sidebar.info = (function() { var propRow; - var table = $('
                                ').appendTo(propertiesSection.content); + var table = $('
                                ').appendTo(propertiesSection.content); var tableBody = $('').appendTo(table); var subflowNode; @@ -139,10 +139,10 @@ RED.sidebar.info = (function() { var activeProject = RED.projects.getActiveProject(); if (activeProject) { - propRow = $('Project').appendTo(tableBody); + propRow = $('Project').appendTo(tableBody); $(propRow.children()[1]).text(activeProject.name||""); - $('').appendTo(tableBody); - var editProjectButton = $('') + $('').appendTo(tableBody); + var editProjectButton = $('') .appendTo(propRow.children()[1]) .on("click", function(evt) { evt.preventDefault(); @@ -177,7 +177,7 @@ RED.sidebar.info = (function() { helpSection.container.hide(); infoSection.container.hide(); // - show the count of selected nodes - propRow = $(''+RED._("sidebar.info.selection")+"").appendTo(tableBody); + propRow = $(''+RED._("sidebar.info.selection")+"").appendTo(tableBody); var counts = $('
                                ').appendTo($(propRow.children()[1])); if (types.flows > 0) { @@ -211,24 +211,24 @@ RED.sidebar.info = (function() { } if (node.type === "tab" || node.type === "subflow") { // If nothing is selected, but we're on a flow or subflow tab. - propRow = $(''+RED._("sidebar.info."+(node.type==='tab'?'flow':'subflow'))+'').appendTo(tableBody); + propRow = $(''+RED._("sidebar.info."+(node.type==='tab'?'flow':'subflow'))+'').appendTo(tableBody); RED.utils.createObjectElement(node.id).appendTo(propRow.children()[1]); - propRow = $(''+RED._("sidebar.info.tabName")+"").appendTo(tableBody); + propRow = $(''+RED._("sidebar.info.tabName")+"").appendTo(tableBody); $(propRow.children()[1]).text(node.label||node.name||""); if (node.type === "tab") { - propRow = $(''+RED._("sidebar.info.status")+'').appendTo(tableBody); + propRow = $(''+RED._("sidebar.info.status")+'').appendTo(tableBody); $(propRow.children()[1]).text((!!!node.disabled)?RED._("sidebar.info.enabled"):RED._("sidebar.info.disabled")) } } else { // An actual node is selected in the editor - build up its properties table - propRow = $(''+RED._("sidebar.info.node")+"").appendTo(tableBody); + propRow = $(''+RED._("sidebar.info.node")+"").appendTo(tableBody); RED.utils.createObjectElement(node.id).appendTo(propRow.children()[1]); if (node.type !== "subflow" && node.type !== "unknown" && node.name) { - propRow = $(''+RED._("common.label.name")+'').appendTo(tableBody); - $('').text(node.name).appendTo(propRow.children()[1]); + propRow = $(''+RED._("common.label.name")+'').appendTo(tableBody); + $('').text(node.name).appendTo(propRow.children()[1]); } if (!m) { - propRow = $(''+RED._("sidebar.info.type")+"").appendTo(tableBody); + propRow = $(''+RED._("sidebar.info.type")+"").appendTo(tableBody); $(propRow.children()[1]).text((node.type === "unknown")?node._orig.type:node.type); if (node.type === "unknown") { $('').prependTo($(propRow.children()[1])) @@ -246,11 +246,11 @@ RED.sidebar.info = (function() { }) } else if (node._def) { defaults = node._def.defaults; - propRow = $(''+RED._("sidebar.info.module")+"").appendTo(tableBody); + propRow = $(''+RED._("sidebar.info.module")+"").appendTo(tableBody); $(propRow.children()[1]).text(RED.nodes.getType(node.type).set.module); count++; } - $('').appendTo(tableBody); + $('').appendTo(tableBody); if (defaults) { for (var n in defaults) { @@ -258,7 +258,7 @@ RED.sidebar.info = (function() { var val = node[n]; var type = typeof val; count++; - propRow = $(''+n+"").appendTo(tableBody); + propRow = $(''+n+"").appendTo(tableBody); if (defaults[n].type) { var configNode = RED.nodes.node(val); if (!configNode) { @@ -268,12 +268,12 @@ RED.sidebar.info = (function() { var container = propRow.children()[1]; var div = $('',{class:""}).appendTo(container); - var nodeDiv = $('
                                ',{class:"palette_node palette_node_small"}).appendTo(div); + var nodeDiv = $('
                                ',{class:"red-ui-palette-node red-ui-palette-node-small"}).appendTo(div); var colour = RED.utils.getNodeColor(configNode.type,configNode._def); var icon_url = RED.utils.getNodeIcon(configNode._def); nodeDiv.css({'backgroundColor':colour, "cursor":"pointer"}); - var iconContainer = $('
                                ',{class:"palette_icon_container"}).appendTo(nodeDiv); - $('
                                ',{class:"palette_icon",style:"background-image: url("+icon_url+")"}).appendTo(iconContainer); + var iconContainer = $('
                                ',{class:"red-ui-palette-icon-container"}).appendTo(nodeDiv); + $('
                                ',{class:"red-ui-palette-icon",style:"background-image: url("+icon_url+")"}).appendTo(iconContainer); var nodeContainer = $('').css({"verticalAlign":"top","marginLeft":"6px"}).text(configLabel).appendTo(container); nodeDiv.on('dblclick',function() { @@ -288,18 +288,18 @@ RED.sidebar.info = (function() { } } if (count > 0) { - $(''+RED._("sidebar.info.showMore")+''+RED._("sidebar.info.showLess")+' ').appendTo(tableBody); + $(''+RED._("sidebar.info.showMore")+''+RED._("sidebar.info.showLess")+' ').appendTo(tableBody); } } if (node.type !== 'tab') { if (m) { $(''+RED._("sidebar.info.subflow")+'').appendTo(tableBody); - $(''+RED._("common.label.name")+''+RED.utils.sanitize(subflowNode.name)+'').appendTo(tableBody); + $(''+RED._("common.label.name")+''+RED.utils.sanitize(subflowNode.name)+'').appendTo(tableBody); } } } if (m) { - propRow = $(''+RED._("subflow.category")+'').appendTo(tableBody); + propRow = $(''+RED._("subflow.category")+'').appendTo(tableBody); var category = subflowNode.category||"subflows"; $(propRow.children()[1]).text(RED._("palette.label."+category,{defaultValue:category})) $(''+RED._("sidebar.info.instances")+""+subflowUserCount+'').appendTo(tableBody); @@ -313,9 +313,9 @@ RED.sidebar.info = (function() { if (subflowNode && node.type !== "subflow") { // Selected a subflow instance node. // - The subflow template info goes into help - helpText = (marked(subflowNode.info||"")||(''+RED._("sidebar.info.none")+'')); + helpText = (marked(subflowNode.info||"")||(''+RED._("sidebar.info.none")+'')); } else { - helpText = $("script[data-help-name='"+node.type+"']").html()||(''+RED._("sidebar.info.none")+''); + helpText = $("script[data-help-name='"+node.type+"']").html()||(''+RED._("sidebar.info.none")+''); } setInfoText(helpText, helpSection.content); } @@ -332,34 +332,34 @@ RED.sidebar.info = (function() { } setInfoText(infoText, infoSection.content); - $(".sidebar-node-info-stack").scrollTop(0); + $(".red-ui-sidebar-info-stack").scrollTop(0); $(".node-info-property-header").on("click", function(e) { e.preventDefault(); expandedSections["property"] = !expandedSections["property"]; $(this).toggleClass("expanded",expandedSections["property"]); - $(".node-info-property-row").toggle(expandedSections["property"]); + $(".red-ui-help-info-property-row").toggle(expandedSections["property"]); }); } // $('').appendTo(tableBody); - // propRow = $('Actions').appendTo(tableBody); + // propRow = $('Actions').appendTo(tableBody); // var actionBar = $(propRow.children()[1]); // // // var actionBar = $('
                                ',{style:"background: #fefefe; padding: 3px;"}).appendTo(propertiesSection.content); - // $('').appendTo(actionBar); - // $('').appendTo(actionBar); - // $('').appendTo(actionBar); - // $('').appendTo(actionBar); + // $('').appendTo(actionBar); + // $('').appendTo(actionBar); + // $('').appendTo(actionBar); + // $('').appendTo(actionBar); } function setInfoText(infoText,target) { - var info = addTargetToExternalLinks($('
                                '+infoText+'
                                ')).appendTo(target); - info.find(".bidiAware").contents().filter(function() { return this.nodeType === 3 && this.textContent.trim() !== "" }).wrap( "" ); + var info = addTargetToExternalLinks($('
                                '+infoText+'
                                ')).appendTo(target); + info.find(".red-ui-text-bidi-aware").contents().filter(function() { return this.nodeType === 3 && this.textContent.trim() !== "" }).wrap( "" ); var foldingHeader = "H3"; - info.find(foldingHeader).wrapInner('') + info.find(foldingHeader).wrapInner('') .find("a").prepend('').on("click", function(e) { e.preventDefault(); var isExpanded = $(this).hasClass('expanded'); @@ -420,7 +420,7 @@ RED.sidebar.info = (function() { }) } function startTips() { - $(".sidebar-node-info").addClass('show-tips'); + $(".red-ui-sidebar-info").addClass('show-tips'); if (enabled) { if (!startTimeout && !refreshTimeout) { if (tipCount === -1) { @@ -433,7 +433,7 @@ RED.sidebar.info = (function() { } } function stopTips() { - $(".sidebar-node-info").removeClass('show-tips'); + $(".red-ui-sidebar-info").removeClass('show-tips'); clearInterval(refreshTimeout); clearTimeout(startTimeout); refreshTimeout = null; @@ -466,7 +466,7 @@ RED.sidebar.info = (function() { infoSection.container.show(); //helpSection.title.text(title||RED._("sidebar.info.info")); setInfoText(html,infoSection.content); - $(".sidebar-node-info-stack").scrollTop(0); + $(".red-ui-sidebar-info-stack").scrollTop(0); } function refreshSelection(selection) { diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/touch/radialMenu.js b/packages/node_modules/@node-red/editor-client/src/js/ui/touch/radialMenu.js index 9e39506e8..29daa6510 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/touch/radialMenu.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/touch/radialMenu.js @@ -16,20 +16,17 @@ RED.touch = RED.touch||{}; RED.touch.radialMenu = (function() { - - + + var touchMenu = null; var isActive = false; var isOutside = false; var activeOption = null; - + function createRadial(obj,pos,options) { isActive = true; try { - var w = $("body").width(); - var h = $("body").height(); - touchMenu = d3.select("body").append("div") .style({ position:"absolute", @@ -43,10 +40,7 @@ RED.touch.radialMenu = (function() { hide(); d3.event.preventDefault(); }); - - - var menu = touchMenu.append("div") .style({ position: "absolute", @@ -58,7 +52,7 @@ RED.touch.radialMenu = (function() { background: "rgba(255,255,255,0.6)", border: "1px solid #666" }); - + var menuOpts = []; var createMenuOpt = function(x,y,opt) { opt.el = menu.append("div") @@ -74,16 +68,16 @@ RED.touch.radialMenu = (function() { "text-align": "center", "line-height":"50px" }); - + opt.el.html(opt.name); - + if (opt.disabled) { opt.el.style({"border-color":"#ccc",color:"#ccc"}); } opt.x = x; opt.y = y; menuOpts.push(opt); - + opt.el.on('touchstart',function() { opt.el.style("background","#999"); d3.event.preventDefault(); @@ -96,7 +90,7 @@ RED.touch.radialMenu = (function() { d3.event.stopPropagation(); }); } - + var n = options.length; var dang = Math.max(Math.PI/(n-1),Math.PI/4); var ang = Math.PI; @@ -108,7 +102,7 @@ RED.touch.radialMenu = (function() { } ang += dang; } - + var hide = function() { isActive = false; @@ -116,11 +110,11 @@ RED.touch.radialMenu = (function() { touchMenu.remove(); touchMenu = null; } - + obj.on('touchend.radial',function() { obj.on('touchend.radial',null); obj.on('touchmenu.radial',null); - + if (activeOption) { try { activeOption.onselect(); @@ -133,8 +127,6 @@ RED.touch.radialMenu = (function() { } }); - - obj.on('touchmove.radial',function() { try { var touch0 = d3.event.touches.item(0); @@ -159,20 +151,20 @@ RED.touch.radialMenu = (function() { var d = Math.abs((p[0]*p[0])+(p[1]*p[1])); isOutside = (d > 80*80); } - + } catch(err) { RED._debug(err); } - + }); - + } catch(err) { RED._debug(err); } - } + } + - return { show: createRadial, active: function() { @@ -181,4 +173,3 @@ RED.touch.radialMenu = (function() { } })(); - diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/tray.js b/packages/node_modules/@node-red/editor-client/src/js/ui/tray.js index af579fde2..743fb3bb7 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/tray.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/tray.js @@ -16,33 +16,33 @@ RED.tray = (function() { var stack = []; - var editorStack = $("#editor-stack"); + var editorStack; var openingTray = false; function resize() { } function showTray(options) { - var el = $('
                                '); - var header = $('
                                ').appendTo(el); - var bodyWrapper = $('
                                ').appendTo(el); - var body = $('
                                ').appendTo(bodyWrapper); - var footer = $('
                                ').appendTo(el); - var resizer = $('
                                ').appendTo(el); - // var growButton = $('').appendTo(resizer); - // var shrinkButton = $('').appendTo(resizer); + var el = $('
                                '); + var header = $('
                                ').appendTo(el); + var bodyWrapper = $('
                                ').appendTo(el); + var body = $('
                                ').appendTo(bodyWrapper); + var footer = $('
                                ').appendTo(el); + var resizer = $('
                                ').appendTo(el); + // var growButton = $('').appendTo(resizer); + // var shrinkButton = $('').appendTo(resizer); if (options.title) { var titles = stack.map(function(e) { return e.options.title }); titles.push(options.title); - var title = '
                                • '+titles.join("
                                • ")+'
                                '; + var title = '
                                • '+titles.join("
                                • ")+'
                                '; - $('
                                '+title+'
                                ').appendTo(header); + $('
                                '+title+'
                                ').appendTo(header); } if (options.width === Infinity) { options.maximized = true; - resizer.addClass('editor-tray-resize-maximised'); + resizer.addClass('red-ui-tray-resize-maximised'); } - var buttonBar = $('
                                ').appendTo(header); + var buttonBar = $('
                                ').appendTo(header); var primaryButton; if (options.buttons) { for (var i=0;i $("#editor-stack").position().left-8) { - options.width = $("#editor-stack").position().left-8; + if (options.width > $("#red-ui-editor-stack").position().left-8) { + options.width = $("#red-ui-editor-stack").position().left-8; } el.width(options.width); } else { @@ -133,15 +133,15 @@ RED.tray = (function() { } tray.width = el.width(); - if (tray.width > $("#editor-stack").position().left-8) { - tray.width = Math.max(0/*tray.preferredWidth*/,$("#editor-stack").position().left-8); + if (tray.width > $("#red-ui-editor-stack").position().left-8) { + tray.width = Math.max(0/*tray.preferredWidth*/,$("#red-ui-editor-stack").position().left-8); el.width(tray.width); } - // tray.body.parent().width(Math.min($("#editor-stack").position().left-8,tray.width)); + // tray.body.parent().width(Math.min($("#red-ui-editor-stack").position().left-8,tray.width)); - $("#main-container").scrollLeft(0); + $("#red-ui-main-container").scrollLeft(0); el.css({ right: -(el.width()+10)+"px", transition: "right 0.25s ease" @@ -151,7 +151,7 @@ RED.tray = (function() { setTimeout(function() { setTimeout(function() { if (!options.width) { - el.width(Math.min(tray.preferredWidth,$("#editor-stack").position().left-8)); + el.width(Math.min(tray.preferredWidth,$("#red-ui-editor-stack").position().left-8)); } if (options.resize) { options.resize({width:el.width()}); @@ -184,32 +184,34 @@ RED.tray = (function() { function handleWindowResize() { if (stack.length > 0) { var tray = stack[stack.length-1]; - var trayHeight = tray.tray.height()-tray.header.outerHeight()-tray.footer.outerHeight(); - tray.body.height(trayHeight); - if (tray.options.maximized || tray.width > $("#editor-stack").position().left-8) { - tray.width = $("#editor-stack").position().left-8; + if (tray.options.maximized || tray.width > $("#red-ui-editor-stack").position().left-8) { + tray.width = $("#red-ui-editor-stack").position().left-8; tray.tray.width(tray.width); // tray.body.parent().width(tray.width); } else if (tray.width < tray.preferredWidth) { - tray.width = Math.min($("#editor-stack").position().left-8,tray.preferredWidth); + tray.width = Math.min($("#red-ui-editor-stack").position().left-8,tray.preferredWidth); tray.tray.width(tray.width); // tray.body.parent().width(tray.width); } + var trayHeight = tray.tray.height()-tray.header.outerHeight()-tray.footer.outerHeight(); + tray.body.height(trayHeight); if (tray.options.resize) { tray.options.resize({width:tray.width, height:trayHeight}); } + } } return { init: function init() { + editorStack = $("#red-ui-editor-stack"); $(window).on("resize", handleWindowResize); RED.events.on("sidebar:resize",handleWindowResize); - $("#editor-shade").on("click", function() { + $("#red-ui-editor-shade").on("click", function() { if (!openingTray) { var tray = stack[stack.length-1]; if (tray && tray.primaryButton) { - tray.primaryButton.trigger("click"); + tray.primaryButton.click(); } } }); @@ -248,7 +250,7 @@ RED.tray = (function() { if (stack.length > 0) { var oldTray = stack[stack.length-1]; if (!oldTray.options.overlay) { - oldTray.tray.appendTo("#editor-stack"); + oldTray.tray.appendTo("#red-ui-editor-stack"); setTimeout(function() { handleWindowResize(); oldTray.tray.css({right:0}); @@ -267,10 +269,10 @@ RED.tray = (function() { done(); } if (stack.length === 0) { - $("#header-shade").hide(); - $("#editor-shade").hide(); - $("#palette-shade").hide(); - $(".sidebar-shade").hide(); + $("#red-ui-header-shade").hide(); + $("#red-ui-editor-shade").hide(); + $("#red-ui-palette-shade").hide(); + $(".red-ui-sidebar-shade").hide(); RED.events.emit("editor:close"); RED.view.focus(); } diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/typeSearch.js b/packages/node_modules/@node-red/editor-client/src/js/ui/typeSearch.js index 544f66782..7c07f5a18 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/typeSearch.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/typeSearch.js @@ -45,8 +45,7 @@ RED.typeSearch = (function() { } function createDialog() { - //shade = $('
                                ',{class:"red-ui-type-search-shade"}).appendTo("#main-container"); - dialog = $("
                                ",{id:"red-ui-type-search",class:"red-ui-search red-ui-type-search"}).appendTo("#main-container"); + dialog = $("
                                ",{id:"red-ui-type-search",class:"red-ui-search red-ui-type-search"}).appendTo("#red-ui-main-container"); var searchDiv = $("
                                ",{class:"red-ui-search-container"}).appendTo(dialog); searchInput = $('').attr("placeholder",RED._("search.addNode")).appendTo(searchDiv).searchBox({ delay: 50, @@ -104,7 +103,7 @@ RED.typeSearch = (function() { }); searchResultsDiv = $("
                                ",{class:"red-ui-search-results-container"}).appendTo(dialog); - searchResults = $('
                                  ',{id:"search-result-list", style:"position: absolute;top: 0;bottom: 0;left: 0;right: 0;"}).appendTo(searchResultsDiv).editableList({ + searchResults = $('
                                    ',{style:"position: absolute;top: 0;bottom: 0;left: 0;right: 0;"}).appendTo(searchResultsDiv).editableList({ addButton: false, filter: function(data) { if (activeFilter === "" ) { @@ -145,7 +144,7 @@ RED.typeSearch = (function() { var icon_url = RED.utils.getNodeIcon(def); nodeDiv.css('backgroundColor',colour); - var iconContainer = $('
                                    ',{class:"palette_icon_container"}).appendTo(nodeDiv); + var iconContainer = $('
                                    ',{class:"red-ui-palette-icon-container"}).appendTo(nodeDiv); RED.utils.createIconElement(icon_url, iconContainer, false); if (def.inputs > 0) { @@ -208,13 +207,13 @@ RED.typeSearch = (function() { dialog.hide(); searchResultsDiv.hide(); } - $(document).off('mousedown.type-search'); - $(document).off('mouseup.type-search'); - $(document).off('click.type-search'); + $(document).off('mousedown.red-ui-type-search'); + $(document).off('mouseup.red-ui-type-search'); + $(document).off('click.red-ui-type-search'); setTimeout(function() { - $(document).on('mousedown.type-search',handleMouseActivity); - $(document).on('mouseup.type-search',handleMouseActivity); - $(document).on('click.type-search',handleMouseActivity); + $(document).on('mousedown.red-ui-type-search',handleMouseActivity); + $(document).on('mouseup.red-ui-type-search',handleMouseActivity); + $(document).on('click.red-ui-type-search',handleMouseActivity); },200); refreshTypeList(opts); @@ -222,7 +221,7 @@ RED.typeSearch = (function() { cancelCallback = opts.cancel; RED.events.emit("type-search:open"); //shade.show(); - if ($("#main-container").height() - opts.y - 150 < 0) { + if ($("#red-ui-main-container").height() - opts.y - 150 < 0) { opts.y = opts.y - 235; } dialog.css({left:opts.x+"px",top:opts.y+"px"}).show(); @@ -245,9 +244,9 @@ RED.typeSearch = (function() { } RED.events.emit("type-search:close"); RED.view.focus(); - $(document).off('mousedown.type-search'); - $(document).off('mouseup.type-search'); - $(document).off('click.type-search'); + $(document).off('mousedown.red-ui-type-search'); + $(document).off('mouseup.red-ui-type-search'); + $(document).off('click.red-ui-type-search'); } } function getTypeLabel(type, def) { diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/userSettings.js b/packages/node_modules/@node-red/editor-client/src/js/ui/userSettings.js index d50cd86f8..e5c1500af 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/userSettings.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/userSettings.js @@ -34,7 +34,6 @@ RED.userSettings = (function() { return; } settingsVisible = true; - var tabContainer; var trayOptions = { title: RED._("menu.label.userSettings"), @@ -52,9 +51,9 @@ RED.userSettings = (function() { trayWidth = dimensions.width; }, open: function(tray) { - var trayBody = tray.find('.editor-tray-body'); + var trayBody = tray.find('.red-ui-tray-body'); var settingsContent = $('
                                    ').appendTo(trayBody); - var tabContainer = $('
                                    ',{id:"user-settings-tabs-container"}).appendTo(settingsContent); + var tabContainer = $('
                                    ',{class:"red-ui-settings-tabs-container"}).appendTo(settingsContent); $('
                                      ',{id:"user-settings-tabs"}).appendTo(tabContainer); var settingsTabs = RED.tabs.create({ @@ -62,7 +61,7 @@ RED.userSettings = (function() { vertical: true, onchange: function(tab) { setTimeout(function() { - $("#user-settings-tabs-content").children().hide(); + tabContents.children().hide(); $("#" + tab.id).show(); if (tab.pane.focus) { tab.pane.focus(); @@ -70,19 +69,19 @@ RED.userSettings = (function() { },50); } }); - var tabContents = $('
                                      ',{id:"user-settings-tabs-content"}).appendTo(settingsContent); + var tabContents = $('
                                      ',{class:"red-ui-settings-tabs-content"}).appendTo(settingsContent); panes.forEach(function(pane) { settingsTabs.addTab({ - id: "user-settings-tab-"+pane.id, + id: "red-ui-settings-tab-"+pane.id, label: pane.title, pane: pane }); pane.get().hide().appendTo(tabContents); }); settingsContent.i18n(); - settingsTabs.activateTab("user-settings-tab-"+(initialTab||'view')) - $("#sidebar-shade").show(); + settingsTabs.activateTab("red-ui-settings-tab-"+(initialTab||'view')) + $("#red-ui-sidebar-shade").show(); }, close: function() { settingsVisible = false; @@ -91,7 +90,7 @@ RED.userSettings = (function() { pane.close(); } }); - $("#sidebar-shade").hide(); + $("#red-ui-sidebar-shade").hide(); }, show: function() {} @@ -134,7 +133,7 @@ RED.userSettings = (function() { function createViewPane() { - var pane = $('
                                      '); + var pane = $('
                                      '); var currentEditorSettings = RED.settings.get('editor') || {}; currentEditorSettings.view = currentEditorSettings.view || {}; @@ -150,7 +149,7 @@ RED.userSettings = (function() { } else { initialState = currentEditorSettings.view[opt.setting]; } - var row = $('').appendTo(pane); + var row = $('
                                      ').appendTo(pane); var input; if (opt.toggle) { input = $('').appendTo(row).find("input"); diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/utils.js b/packages/node_modules/@node-red/editor-client/src/js/ui/utils.js index 2d65c2fff..038caac4a 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/utils.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/utils.js @@ -26,20 +26,20 @@ RED.utils = (function() { function buildMessageSummaryValue(value) { var result; if (Array.isArray(value)) { - result = $('').text('array['+value.length+']'); + result = $('').text('array['+value.length+']'); } else if (value === null) { - result = $('null'); + result = $('null'); } else if (typeof value === 'object') { if (value.hasOwnProperty('type') && value.type === 'Buffer' && value.hasOwnProperty('data')) { - result = $('').text('buffer['+value.length+']'); + result = $('').text('buffer['+value.length+']'); } else if (value.hasOwnProperty('type') && value.type === 'array' && value.hasOwnProperty('data')) { - result = $('').text('array['+value.length+']'); + result = $('').text('array['+value.length+']'); } else if (value.hasOwnProperty('type') && value.type === 'function') { - result = $('').text('function'); + result = $('').text('function'); } else if (value.hasOwnProperty('type') && value.type === 'number') { - result = $('').text(value.data); + result = $('').text(value.data); } else { - result = $('object'); + result = $('object'); } } else if (typeof value === 'string') { var subvalue; @@ -48,16 +48,16 @@ RED.utils = (function() { } else { subvalue = sanitize(value); } - result = $('').html('"'+formatString(subvalue)+'"'); + result = $('').html('"'+formatString(subvalue)+'"'); } else if (typeof value === 'number') { - result = $('').text(""+value); + result = $('').text(""+value); } else { - result = $('').text(""+value); + result = $('').text(""+value); } return result; } function makeExpandable(el,onbuild,ontoggle,expand) { - el.addClass("debug-message-expandable"); + el.addClass("red-ui-debug-msg-expandable"); el.prop('toggle',function() { return function(state) { var parent = el.parent(); @@ -117,16 +117,16 @@ RED.utils = (function() { if (!pinnedPaths.hasOwnProperty(sourceId)) { pinnedPaths[sourceId] = {} } - var tools = $('').appendTo(obj); - var copyTools = $('').appendTo(tools); + var tools = $('').appendTo(obj); + var copyTools = $('').appendTo(tools); if (!!key) { - var copyPath = $('').appendTo(copyTools).on("click", function(e) { + var copyPath = $('').appendTo(copyTools).on("click", function(e) { e.preventDefault(); e.stopPropagation(); RED.clipboard.copyText(key,copyPath,"clipboard.copyMessagePath"); }) } - var copyPayload = $('').appendTo(copyTools).on("click", function(e) { + var copyPayload = $('').appendTo(copyTools).on("click", function(e) { e.preventDefault(); e.stopPropagation(); RED.clipboard.copyText(msg,copyPayload,"clipboard.copyMessageValue"); @@ -134,24 +134,24 @@ RED.utils = (function() { if (strippedKey !== undefined && strippedKey !== '') { var isPinned = pinnedPaths[sourceId].hasOwnProperty(strippedKey); - var pinPath = $('').appendTo(tools).on("click", function(e) { + var pinPath = $('').appendTo(tools).on("click", function(e) { e.preventDefault(); e.stopPropagation(); if (pinnedPaths[sourceId].hasOwnProperty(strippedKey)) { delete pinnedPaths[sourceId][strippedKey]; $(this).removeClass("selected"); - obj.removeClass("debug-message-row-pinned"); + obj.removeClass("red-ui-debug-msg-row-pinned"); } else { var rootedPath = "$"+(strippedKey[0] === '['?"":".")+strippedKey; pinnedPaths[sourceId][strippedKey] = normalisePropertyExpression(rootedPath); $(this).addClass("selected"); - obj.addClass("debug-message-row-pinned"); + obj.addClass("red-ui-debug-msg-row-pinned"); } }).toggleClass("selected",isPinned); - obj.toggleClass("debug-message-row-pinned",isPinned); + obj.toggleClass("red-ui-debug-msg-row-pinned",isPinned); } if (extraTools) { - extraTools.addClass("debug-message-tools-other"); + extraTools.addClass("red-ui-debug-msg-tools-other"); extraTools.appendTo(tools); } } @@ -243,10 +243,10 @@ RED.utils = (function() { } if (format === 'raw') { button.text('raw'); - element.removeClass('debug-message-buffer-string').addClass('debug-message-buffer-raw'); + element.removeClass('red-ui-debug-msg-buffer-string').addClass('red-ui-debug-msg-buffer-raw'); } else if (format === 'string') { button.text('string'); - element.addClass('debug-message-buffer-string').removeClass('debug-message-buffer-raw'); + element.addClass('red-ui-debug-msg-buffer-string').removeClass('red-ui-debug-msg-buffer-raw'); } } @@ -275,16 +275,16 @@ RED.utils = (function() { if (path !== undefined && rootPath !== undefined) { strippedKey = path.substring(rootPath.length+(path[rootPath.length]==="."?1:0)); } - var element = $(''); + var element = $(''); element.collapse = function() { - element.find(".debug-message-expandable").parent().addClass("collapsed"); + element.find(".red-ui-debug-msg-expandable").parent().addClass("collapsed"); } - header = $('').appendTo(element); + header = $('').appendTo(element); if (sourceId) { addMessageControls(header,sourceId,path,obj,rootPath,strippedKey,tools); } if (!key) { - element.addClass("debug-message-top-level"); + element.addClass("red-ui-debug-msg-top-level"); if (sourceId) { var pinned = pinnedPaths[sourceId]; expandPaths = []; @@ -303,17 +303,17 @@ RED.utils = (function() { expandPaths.sort(); } element.clearPinned = function() { - element.find(".debug-message-row-pinned").removeClass("debug-message-row-pinned"); + element.find(".red-ui-debug-msg-row-pinned").removeClass("red-ui-debug-msg-row-pinned"); pinnedPaths[sourceId] = {}; } } } else { if (!hideKey) { - $('').text(key).appendTo(header); + $('').text(key).appendTo(header); $(': ').appendTo(header); } } - entryObj = $('').appendTo(header); + entryObj = $('').appendTo(header); var isArray = Array.isArray(obj); var isArrayObject = false; @@ -322,33 +322,33 @@ RED.utils = (function() { isArrayObject = true; } if (obj === null || obj === undefined) { - $(''+obj+'').appendTo(entryObj); + $(''+obj+'').appendTo(entryObj); } else if (obj.__enc__ && obj.type === 'number') { - e = $('').text(obj.data).appendTo(entryObj); + e = $('').text(obj.data).appendTo(entryObj); } else if (typeHint === "function" || (obj.__enc__ && obj.type === 'function')) { - e = $('').text("function").appendTo(entryObj); + e = $('').text("function").appendTo(entryObj); } else if (typeHint === "internal" || (obj.__enc__ && obj.type === 'internal')) { - e = $('').text("[internal]").appendTo(entryObj); + e = $('').text("[internal]").appendTo(entryObj); } else if (typeof obj === 'string') { if (/[\t\n\r]/.test(obj)) { element.addClass('collapsed'); - $(' ').prependTo(header); + $(' ').prependTo(header); makeExpandable(header, function() { - $('').text(typeHint||'string').appendTo(header); - var row = $('').appendTo(element); - $('
                                      ').text(obj).appendTo(row);
+                    $('').text(typeHint||'string').appendTo(header);
+                    var row = $('').appendTo(element);
+                    $('
                                      ').text(obj).appendTo(row);
                 },function(state) {if (ontoggle) { ontoggle(path,state);}}, checkExpanded(strippedKey,expandPaths));
             }
-            e = $('').html('"'+formatString(sanitize(obj))+'"').appendTo(entryObj);
+            e = $('').html('"'+formatString(sanitize(obj))+'"').appendTo(entryObj);
             if (/^#[0-9a-f]{6}$/i.test(obj)) {
-                $('').css('backgroundColor',obj).appendTo(e);
+                $('').css('backgroundColor',obj).appendTo(e);
             }
 
         } else if (typeof obj === 'number') {
-            e = $('').appendTo(entryObj);
+            e = $('').appendTo(entryObj);
 
             if (Number.isInteger(obj) && (obj >= 0)) { // if it's a +ve integer
-                e.addClass("debug-message-type-number-toggle");
+                e.addClass("red-ui-debug-msg-type-number-toggle");
                 e.on("click", function(evt) {
                     evt.preventDefault();
                     formatNumber($(this), obj, sourceId, path, true);
@@ -383,14 +383,14 @@ RED.utils = (function() {
             var fullLength = data.length;
 
                 if (originalLength > 0) {
-                $(' ').prependTo(header);
-                var arrayRows = $('
                                      ').appendTo(element);
-                element.addClass('debug-message-buffer-raw');
+                $(' ').prependTo(header);
+                var arrayRows = $('
                                      ').appendTo(element);
+                element.addClass('red-ui-debug-msg-buffer-raw');
             }
             if (key) {
-                headerHead = $('').text(typeHint||(type+'['+originalLength+']')).appendTo(entryObj);
+                headerHead = $('').text(typeHint||(type+'['+originalLength+']')).appendTo(entryObj);
             } else {
-                headerHead = $('').appendTo(entryObj);
+                headerHead = $('').appendTo(entryObj);
                 $('[ ').appendTo(headerHead);
                 var arrayLength = Math.min(originalLength,10);
                 for (i=0;i …').appendTo(headerHead);
                 }
                 if (arrayLength === 0) {
-                    $('empty').appendTo(headerHead);
+                    $('empty').appendTo(headerHead);
                 }
                 $(' ]').appendTo(headerHead);
             }
@@ -411,20 +411,20 @@ RED.utils = (function() {
 
                 makeExpandable(header,function() {
                     if (!key) {
-                        headerHead = $('').text(typeHint||(type+'['+originalLength+']')).appendTo(header);
+                        headerHead = $('').text(typeHint||(type+'['+originalLength+']')).appendTo(header);
                     }
                     if (type === 'buffer') {
-                        var stringRow = $('
                                      ').appendTo(element);
-                        var sr = $('').appendTo(stringRow);
+                        var stringRow = $('
                                      ').appendTo(element);
+                        var sr = $('').appendTo(stringRow);
                         var stringEncoding = "";
                         try {
                             stringEncoding = String.fromCharCode.apply(null, new Uint16Array(data))
                         } catch(err) {
                             console.log(err);
                         }
-                        $('
                                      ').text(stringEncoding).appendTo(sr);
-                        var bufferOpts = $('').appendTo(headerHead);
-                        var switchFormat = $('').addClass('selected').text('raw').appendTo(bufferOpts).on("click", function(e) {
+                        $('
                                      ').text(stringEncoding).appendTo(sr);
+                        var bufferOpts = $('').appendTo(headerHead);
+                        var switchFormat = $('').text('raw').appendTo(bufferOpts).on("click", function(e) {
                             e.preventDefault();
                             e.stopPropagation();
                             formatBuffer(element,$(this),sourceId,path,true);
@@ -435,7 +435,7 @@ RED.utils = (function() {
                     var row;
                     if (fullLength <= 10) {
                         for (i=0;i
                                      ').appendTo(arrayRows);
+                            row = $('').appendTo(arrayRows);
                             subElements[path+"["+i+"]"] = buildMessageElement(
                                 data[i],
                                 {
@@ -454,16 +454,16 @@ RED.utils = (function() {
                     } else {
                         for (i=0;i
                                      ').appendTo(arrayRows);
+                            row = $('').appendTo(arrayRows);
                             header = $('').appendTo(row);
-                            $(' ').appendTo(header);
+                            $(' ').appendTo(header);
                             makeExpandable(header, (function() {
                                 var min = minRange;
                                 var max = Math.min(fullLength-1,(minRange+9));
                                 var parent = row;
                                 return function() {
                                     for (var i=min;i<=max;i++) {
-                                        var row = $('').appendTo(parent);
+                                        var row = $('').appendTo(parent);
                                         subElements[path+"["+i+"]"] = buildMessageElement(
                                             data[i],
                                             {
@@ -484,10 +484,10 @@ RED.utils = (function() {
                             })(),
                             (function() { var path = path+"["+i+"]"; return function(state) {if (ontoggle) { ontoggle(path,state);}}})(),
                             checkExpanded(strippedKey,expandPaths,minRange,Math.min(fullLength-1,(minRange+9))));
-                            $('').html("["+minRange+" … "+Math.min(fullLength-1,(minRange+9))+"]").appendTo(header);
+                            $('').html("["+minRange+" … "+Math.min(fullLength-1,(minRange+9))+"]").appendTo(header);
                         }
                         if (fullLength < originalLength) {
-                             $('').appendTo(arrayRows);
+                             $('').appendTo(arrayRows);
                         }
                     }
                 },
@@ -498,13 +498,13 @@ RED.utils = (function() {
             element.addClass('collapsed');
             var keys = Object.keys(obj);
             if (key || keys.length > 0) {
-                $(' ').prependTo(header);
+                $(' ').prependTo(header);
                 makeExpandable(header, function() {
                     if (!key) {
-                        $('').text('object').appendTo(header);
+                        $('').text('object').appendTo(header);
                     }
                     for (i=0;i
                                  ').appendTo(element);
+                        var row = $('').appendTo(element);
                         var newPath = path;
                         if (newPath !== undefined) {
                             if (/^[a-zA-Z_$][0-9a-zA-Z_$]*$/.test(keys[i])) {
@@ -530,20 +530,20 @@ RED.utils = (function() {
                         ).appendTo(row);
                     }
                     if (keys.length === 0) {
-                        $('').text("empty").appendTo(element);
+                        $('').text("empty").appendTo(element);
                     }
                 },
                 function(state) {if (ontoggle) { ontoggle(path,state);}},
                 checkExpanded(strippedKey,expandPaths));
             }
             if (key) {
-                $('').text('object').appendTo(entryObj);
+                $('').text('object').appendTo(entryObj);
             } else {
-                headerHead = $('').appendTo(entryObj);
+                headerHead = $('').appendTo(entryObj);
                 $('{ ').appendTo(headerHead);
                 var keysLength = Math.min(keys.length,5);
                 for (i=0;i').text(keys[i]).appendTo(headerHead);
+                    $('').text(keys[i]).appendTo(headerHead);
                     $(': ').appendTo(headerHead);
                     buildMessageSummaryValue(obj[keys[i]]).appendTo(headerHead);
                     if (i < keysLength-1) {
@@ -554,12 +554,12 @@ RED.utils = (function() {
                     $(' …').appendTo(headerHead);
                 }
                 if (keysLength === 0) {
-                    $('empty').appendTo(headerHead);
+                    $('empty').appendTo(headerHead);
                 }
                 $(' }').appendTo(headerHead);
             }
         } else {
-            $('').text(""+obj).appendTo(entryObj);
+            $('').text(""+obj).appendTo(entryObj);
         }
         if (exposeApi) {
             element.prop('expand', function() { return function(targetPath, state) {
@@ -872,9 +872,9 @@ RED.utils = (function() {
     }
 
     function addSpinnerOverlay(container,contain) {
-        var spinner = $('').appendTo(container);
+        var spinner = $('').appendTo(container);
         if (contain) {
-            spinner.addClass('projects-dialog-spinner-contain');
+            spinner.addClass('red-ui-component-spinner-contain');
         }
         return spinner;
     }
@@ -923,12 +923,12 @@ RED.utils = (function() {
      /**
       * Create or update an icon element and append it to iconContainer.
       * @param iconUrl - Url of icon.
-      * @param iconContainer - Icon container element with palette_icon_container class.
+      * @param iconContainer - Icon container element with red-ui-palette-icon-container class.
       * @param isLarge - Whether the icon size is large.
       */
     function createIconElement(iconUrl, iconContainer, isLarge) {
         // Removes the previous icon when icon was changed.
-        var iconElement = iconContainer.find(".palette_icon");
+        var iconElement = iconContainer.find(".red-ui-palette-icon");
         if (iconElement.length !== 0) {
             iconElement.remove();
         }
@@ -944,13 +944,13 @@ RED.utils = (function() {
             if (fontAwesomeUnicode) {
                 var faIconElement = $('').appendTo(iconContainer);
                 var faLarge = isLarge ? "fa-lg " : "";
-                faIconElement.addClass("palette_icon_fa fa fa-fw " + faLarge + iconPath.file);
+                faIconElement.addClass("red-ui-palette-icon-fa fa fa-fw " + faLarge + iconPath.file);
                 return;
             }
             // If the specified name is not defined in font-awesome, show arrow-in icon.
             iconUrl = RED.settings.apiRootUrl+"icons/node-red/arrow-in.png"
         }
-        var imageIconElement = $('
                                  ',{class:"palette_icon"}).appendTo(iconContainer);
+        var imageIconElement = $('
                                  ',{class:"red-ui-palette-icon"}).appendTo(iconContainer);
         imageIconElement.css("backgroundImage", "url("+iconUrl+")");
     }
 
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/view-navigator.js b/packages/node_modules/@node-red/editor-client/src/js/ui/view-navigator.js
index 8cab19558..a3001e474 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/view-navigator.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/view-navigator.js
@@ -36,10 +36,10 @@
          if (!isShowing) {
              return;
          }
-         var navNode = navVis.selectAll(".navnode").data(RED.view.getActiveNodes(),function(d){return d.id});
+         var navNode = navVis.selectAll(".red-ui-navigator-node").data(RED.view.getActiveNodes(),function(d){return d.id});
          navNode.exit().remove();
          navNode.enter().insert("rect")
-             .attr('class','navnode')
+             .attr('class','red-ui-navigator-node')
              .attr("pointer-events", "none");
          navNode.each(function(d) {
              d3.select(this).attr("x",function(d) { return (d.x-d.w/2)/nav_scale })
@@ -57,8 +57,8 @@
      function resizeNavBorder() {
          if (navBorder) {
              scaleFactor = RED.view.scale();
-             chartSize = [ $("#chart").width(), $("#chart").height()];
-             scrollPos = [$("#chart").scrollLeft(),$("#chart").scrollTop()];
+             chartSize = [ $("#red-ui-workspace-chart").width(), $("#red-ui-workspace-chart").height()];
+             scrollPos = [$("#red-ui-workspace-chart").scrollLeft(),$("#red-ui-workspace-chart").scrollTop()];
              navBorder.attr('x',scrollPos[0]/nav_scale)
                       .attr('y',scrollPos[1]/nav_scale)
                       .attr('width',chartSize[0]/nav_scale/scaleFactor)
@@ -68,16 +68,16 @@
      function toggle() {
          if (!isShowing) {
              isShowing = true;
-             $("#btn-navigate").addClass("selected");
+             $("#red-ui-view-navigate").addClass("selected");
              resizeNavBorder();
              refreshNodes();
-             $("#chart").on("scroll",onScroll);
+             $("#red-ui-workspace-chart").on("scroll",onScroll);
              navContainer.fadeIn(200);
          } else {
              isShowing = false;
              navContainer.fadeOut(100);
-             $("#chart").off("scroll",onScroll);
-             $("#btn-navigate").removeClass("selected");
+             $("#red-ui-workspace-chart").off("scroll",onScroll);
+             $("#red-ui-view-navigate").removeClass("selected");
          }
      }
 
@@ -91,26 +91,17 @@
 
              navContainer = $('
                                  ').css({
                  "position":"absolute",
-                 "bottom":$("#workspace-footer").height(),
+                 "bottom":$("#red-ui-workspace-footer").height(),
                  "right":0,
                  zIndex: 1
-             }).appendTo("#workspace").hide();
+             }).appendTo("#red-ui-workspace").hide();
 
              navBox = d3.select(navContainer[0])
                  .append("svg:svg")
                  .attr("width", nav_width)
                  .attr("height", nav_height)
                  .attr("pointer-events", "all")
-                 .style({
-                     position: "absolute",
-                     bottom: 0,
-                     right:0,
-                     zIndex: 101,
-                     "border-left": "1px solid #ccc",
-                     "border-top": "1px solid #ccc",
-                     background: "rgba(245,245,245,0.8)",
-                     "box-shadow": "-1px 0 3px rgba(0,0,0,0.1)"
-                 });
+                 .attr("id","red-ui-navigator-canvas")
 
              navBox.append("rect").attr("x",0).attr("y",0).attr("width",nav_width).attr("height",nav_height).style({
                  fill:"none",
@@ -119,14 +110,14 @@
              }).on("mousedown", function() {
                  // Update these in case they have changed
                  scaleFactor = RED.view.scale();
-                 chartSize = [ $("#chart").width(), $("#chart").height()];
+                 chartSize = [ $("#red-ui-workspace-chart").width(), $("#red-ui-workspace-chart").height()];
                  dimensions = [chartSize[0]/nav_scale/scaleFactor, chartSize[1]/nav_scale/scaleFactor];
                  var newX = Math.max(0,Math.min(d3.event.offsetX+dimensions[0]/2,nav_width)-dimensions[0]);
                  var newY = Math.max(0,Math.min(d3.event.offsetY+dimensions[1]/2,nav_height)-dimensions[1]);
                  navBorder.attr('x',newX).attr('y',newY);
                  isDragging = true;
-                 $("#chart").scrollLeft(newX*nav_scale*scaleFactor);
-                 $("#chart").scrollTop(newY*nav_scale*scaleFactor);
+                 $("#red-ui-workspace-chart").scrollLeft(newX*nav_scale*scaleFactor);
+                 $("#red-ui-workspace-chart").scrollTop(newY*nav_scale*scaleFactor);
              }).on("mousemove", function() {
                  if (!isDragging) { return }
                  if (d3.event.buttons === 0) {
@@ -136,29 +127,27 @@
                  var newX = Math.max(0,Math.min(d3.event.offsetX+dimensions[0]/2,nav_width)-dimensions[0]);
                  var newY = Math.max(0,Math.min(d3.event.offsetY+dimensions[1]/2,nav_height)-dimensions[1]);
                  navBorder.attr('x',newX).attr('y',newY);
-                 $("#chart").scrollLeft(newX*nav_scale*scaleFactor);
-                 $("#chart").scrollTop(newY*nav_scale*scaleFactor);
+                 $("#red-ui-workspace-chart").scrollLeft(newX*nav_scale*scaleFactor);
+                 $("#red-ui-workspace-chart").scrollTop(newY*nav_scale*scaleFactor);
              }).on("mouseup", function() {
                  isDragging = false;
              })
 
-             navBorder = navBox.append("rect")
-                 .attr("stroke-dasharray","5,5")
-                 .attr("pointer-events", "none")
-                 .style({
-                     stroke: "#999",
-                     strokeWidth: 1,
-                     fill: "white",
-                 });
+             navBorder = navBox.append("rect").attr("class","red-ui-navigator-border")
 
              navVis = navBox.append("svg:g")
 
+             RED.statusBar.add({
+                 id: "view-navigator",
+                 align: "right",
+                 element: $('')
+             })
 
-            $("#btn-navigate").on("click", function(evt) {
+            $("#red-ui-view-navigate").on("click", function(evt) {
                 evt.preventDefault();
                 toggle();
             })
-            RED.popover.tooltip($("#btn-navigate"),RED._('actions.toggle-navigator'),'core:toggle-navigator');
+            RED.popover.tooltip($("#red-ui-view-navigate"),RED._('actions.toggle-navigator'),'core:toggle-navigator');
         },
         refresh: refreshNodes,
         resize: resizeNavBorder,
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/view.js b/packages/node_modules/@node-red/editor-client/src/js/ui/view.js
index 6920c60f4..614ab532e 100755
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/view.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/view.js
@@ -15,6 +15,17 @@
  **/
 
 
+ /* 
                                  #red-ui-workspace-chart
+  *   \-   "outer"
+  *       \- 
+  *           \- .red-ui-workspace-chart-event-layer "eventLayer"
+  *                |- .red-ui-workspace-chart-background
+  *                |- .red-ui-workspace-chart-grid "gridLayer"
+  *                |-  "linkLayer"
+  *                |-  "dragGroupLayer"
+  *                \-  "nodeLayer"
+  */
+
 RED.view = (function() {
     var space_width = 5000,
         space_height = 5000,
@@ -68,6 +79,8 @@ RED.view = (function() {
 
     var clipboard = "";
 
+    // Note: these are the permitted status colour aliases. The actual RGB values
+    //       are set in the CSS - flow.scss/colors.scss
     var status_colours = {
         "red":    "#c00",
         "green":  "#5a8",
@@ -79,248 +92,169 @@ RED.view = (function() {
     var PORT_TYPE_INPUT = 1;
     var PORT_TYPE_OUTPUT = 0;
 
-    var chart = $("#chart");
+    var chart;
+    var outer;
+    var eventLayer;
+    var gridLayer;
+    var linkLayer;
+    var dragGroupLayer;
+    var nodeLayer;
+    var drag_lines;
 
-    var outer = d3.select("#chart")
-        .append("svg:svg")
-        .attr("width", space_width)
-        .attr("height", space_height)
-        .attr("pointer-events", "all")
-        .style("cursor","crosshair")
-        .on("mousedown", function() {
-            focusView();
-        })
-        .on("contextmenu", function(){
-            d3.event.preventDefault();
-        });
+    function init() {
 
-    var vis = outer
-        .append("svg:g")
-        .on("dblclick.zoom", null)
-        .append("svg:g")
-        .attr('class','innerCanvas')
-        .on("mousemove", canvasMouseMove)
-        .on("mousedown", canvasMouseDown)
-        .on("mouseup", canvasMouseUp)
-        .on("mouseenter", function() {
-            if (lasso) {
-                if (d3.event.buttons !== 1) {
-                    lasso.remove();
-                    lasso = null;
+        chart = $("#red-ui-workspace-chart");
+
+        outer = d3.select("#red-ui-workspace-chart")
+            .append("svg:svg")
+            .attr("width", space_width)
+            .attr("height", space_height)
+            .attr("pointer-events", "all")
+            .style("cursor","crosshair")
+            .on("mousedown", function() {
+                focusView();
+            })
+            .on("contextmenu", function(){
+                d3.event.preventDefault();
+            });
+
+        eventLayer = outer
+            .append("svg:g")
+            .on("dblclick.zoom", null)
+            .append("svg:g")
+            .attr('class','red-ui-workspace-chart-event-layer')
+            .on("mousemove", canvasMouseMove)
+            .on("mousedown", canvasMouseDown)
+            .on("mouseup", canvasMouseUp)
+            .on("mouseenter", function() {
+                if (lasso) {
+                    if (d3.event.buttons !== 1) {
+                        lasso.remove();
+                        lasso = null;
+                    }
+                } else if (mouse_mode === RED.state.PANNING && d3.event.buttons !== 4) {
+                    resetMouseVars();
                 }
-            } else if (mouse_mode === RED.state.PANNING && d3.event.buttons !== 4) {
-                resetMouseVars();
-            }
-        })
-        .on("touchend", function() {
-            clearTimeout(touchStartTime);
-            touchStartTime = null;
-            if  (RED.touch.radialMenu.active()) {
-                return;
-            }
-            if (lasso) {
-                outer_background.attr("fill","#fff");
-            }
-            canvasMouseUp.call(this);
-        })
-        .on("touchcancel", canvasMouseUp)
-        .on("touchstart", function() {
-            var touch0;
-            if (d3.event.touches.length>1) {
+            })
+            .on("touchend", function() {
                 clearTimeout(touchStartTime);
                 touchStartTime = null;
-                d3.event.preventDefault();
-                touch0 = d3.event.touches.item(0);
-                var touch1 = d3.event.touches.item(1);
-                var a = touch0["pageY"]-touch1["pageY"];
-                var b = touch0["pageX"]-touch1["pageX"];
-
-                var offset = $("#chart").offset();
-                var scrollPos = [$("#chart").scrollLeft(),$("#chart").scrollTop()];
-                startTouchCenter = [
-                    (touch1["pageX"]+(b/2)-offset.left+scrollPos[0])/scaleFactor,
-                    (touch1["pageY"]+(a/2)-offset.top+scrollPos[1])/scaleFactor
-                ];
-                moveTouchCenter = [
-                    touch1["pageX"]+(b/2),
-                    touch1["pageY"]+(a/2)
-                ]
-                startTouchDistance = Math.sqrt((a*a)+(b*b));
-            } else {
-                var obj = d3.select(document.body);
-                touch0 = d3.event.touches.item(0);
-                var pos = [touch0.pageX,touch0.pageY];
-                startTouchCenter = [touch0.pageX,touch0.pageY];
-                startTouchDistance = 0;
-                var point = d3.touches(this)[0];
-                touchStartTime = setTimeout(function() {
-                    touchStartTime = null;
-                    showTouchMenu(obj,pos);
-                    //lasso = vis.append("rect")
-                    //    .attr("ox",point[0])
-                    //    .attr("oy",point[1])
-                    //    .attr("rx",2)
-                    //    .attr("ry",2)
-                    //    .attr("x",point[0])
-                    //    .attr("y",point[1])
-                    //    .attr("width",0)
-                    //    .attr("height",0)
-                    //    .attr("class","lasso");
-                    //outer_background.attr("fill","#e3e3f3");
-                },touchLongPressTimeout);
-            }
-        })
-        .on("touchmove", function(){
                 if  (RED.touch.radialMenu.active()) {
-                    d3.event.preventDefault();
                     return;
                 }
+                canvasMouseUp.call(this);
+            })
+            .on("touchcancel", canvasMouseUp)
+            .on("touchstart", function() {
                 var touch0;
-                if (d3.event.touches.length<2) {
-                    if (touchStartTime) {
-                        touch0 = d3.event.touches.item(0);
-                        var dx = (touch0.pageX-startTouchCenter[0]);
-                        var dy = (touch0.pageY-startTouchCenter[1]);
-                        var d = Math.abs(dx*dx+dy*dy);
-                        if (d > 64) {
-                            clearTimeout(touchStartTime);
-                            touchStartTime = null;
-                        }
-                    } else if (lasso) {
-                        d3.event.preventDefault();
-                    }
-                    canvasMouseMove.call(this);
-                } else {
+                if (d3.event.touches.length>1) {
+                    clearTimeout(touchStartTime);
+                    touchStartTime = null;
+                    d3.event.preventDefault();
                     touch0 = d3.event.touches.item(0);
                     var touch1 = d3.event.touches.item(1);
                     var a = touch0["pageY"]-touch1["pageY"];
                     var b = touch0["pageX"]-touch1["pageX"];
-                    var offset = $("#chart").offset();
-                    var scrollPos = [$("#chart").scrollLeft(),$("#chart").scrollTop()];
-                    var moveTouchDistance = Math.sqrt((a*a)+(b*b));
-                    var touchCenter = [
+
+                    var offset = chart.offset();
+                    var scrollPos = [chart.scrollLeft(),chart.scrollTop()];
+                    startTouchCenter = [
+                        (touch1["pageX"]+(b/2)-offset.left+scrollPos[0])/scaleFactor,
+                        (touch1["pageY"]+(a/2)-offset.top+scrollPos[1])/scaleFactor
+                    ];
+                    moveTouchCenter = [
                         touch1["pageX"]+(b/2),
                         touch1["pageY"]+(a/2)
-                    ];
-
-                    if (!isNaN(moveTouchDistance)) {
-                        oldScaleFactor = scaleFactor;
-                        scaleFactor = Math.min(2,Math.max(0.3, scaleFactor + (Math.floor(((moveTouchDistance*100)-(startTouchDistance*100)))/10000)));
-
-                        var deltaTouchCenter = [                             // Try to pan whilst zooming - not 100%
-                            startTouchCenter[0]*(scaleFactor-oldScaleFactor),//-(touchCenter[0]-moveTouchCenter[0]),
-                            startTouchCenter[1]*(scaleFactor-oldScaleFactor) //-(touchCenter[1]-moveTouchCenter[1])
+                    ]
+                    startTouchDistance = Math.sqrt((a*a)+(b*b));
+                } else {
+                    var obj = d3.select(document.body);
+                    touch0 = d3.event.touches.item(0);
+                    var pos = [touch0.pageX,touch0.pageY];
+                    startTouchCenter = [touch0.pageX,touch0.pageY];
+                    startTouchDistance = 0;
+                    var point = d3.touches(this)[0];
+                    touchStartTime = setTimeout(function() {
+                        touchStartTime = null;
+                        showTouchMenu(obj,pos);
+                        //lasso = eventLayer.append("rect")
+                        //    .attr("ox",point[0])
+                        //    .attr("oy",point[1])
+                        //    .attr("rx",2)
+                        //    .attr("ry",2)
+                        //    .attr("x",point[0])
+                        //    .attr("y",point[1])
+                        //    .attr("width",0)
+                        //    .attr("height",0)
+                        //    .attr("class","nr-ui-view-lasso");
+                    },touchLongPressTimeout);
+                }
+            })
+            .on("touchmove", function(){
+                    if  (RED.touch.radialMenu.active()) {
+                        d3.event.preventDefault();
+                        return;
+                    }
+                    var touch0;
+                    if (d3.event.touches.length<2) {
+                        if (touchStartTime) {
+                            touch0 = d3.event.touches.item(0);
+                            var dx = (touch0.pageX-startTouchCenter[0]);
+                            var dy = (touch0.pageY-startTouchCenter[1]);
+                            var d = Math.abs(dx*dx+dy*dy);
+                            if (d > 64) {
+                                clearTimeout(touchStartTime);
+                                touchStartTime = null;
+                            }
+                        } else if (lasso) {
+                            d3.event.preventDefault();
+                        }
+                        canvasMouseMove.call(this);
+                    } else {
+                        touch0 = d3.event.touches.item(0);
+                        var touch1 = d3.event.touches.item(1);
+                        var a = touch0["pageY"]-touch1["pageY"];
+                        var b = touch0["pageX"]-touch1["pageX"];
+                        var offset = chart.offset();
+                        var scrollPos = [chart.scrollLeft(),chart.scrollTop()];
+                        var moveTouchDistance = Math.sqrt((a*a)+(b*b));
+                        var touchCenter = [
+                            touch1["pageX"]+(b/2),
+                            touch1["pageY"]+(a/2)
                         ];
 
-                        startTouchDistance = moveTouchDistance;
-                        moveTouchCenter = touchCenter;
+                        if (!isNaN(moveTouchDistance)) {
+                            oldScaleFactor = scaleFactor;
+                            scaleFactor = Math.min(2,Math.max(0.3, scaleFactor + (Math.floor(((moveTouchDistance*100)-(startTouchDistance*100)))/10000)));
 
-                        $("#chart").scrollLeft(scrollPos[0]+deltaTouchCenter[0]);
-                        $("#chart").scrollTop(scrollPos[1]+deltaTouchCenter[1]);
-                        redraw();
+                            var deltaTouchCenter = [                             // Try to pan whilst zooming - not 100%
+                                startTouchCenter[0]*(scaleFactor-oldScaleFactor),//-(touchCenter[0]-moveTouchCenter[0]),
+                                startTouchCenter[1]*(scaleFactor-oldScaleFactor) //-(touchCenter[1]-moveTouchCenter[1])
+                            ];
+
+                            startTouchDistance = moveTouchDistance;
+                            moveTouchCenter = touchCenter;
+
+                            chart.scrollLeft(scrollPos[0]+deltaTouchCenter[0]);
+                            chart.scrollTop(scrollPos[1]+deltaTouchCenter[1]);
+                            redraw();
+                        }
                     }
-                }
-        });
+            });
 
-    var outer_background = vis.append("svg:rect")
-        .attr("width", space_width)
-        .attr("height", space_height)
-        .attr("fill","#fff");
+        // Workspace Background
+        eventLayer.append("svg:rect")
+            .attr("class","red-ui-workspace-chart-background")
+            .attr("width", space_width)
+            .attr("height", space_height);
 
-    var grid = vis.append("g");
-    updateGrid();
+        gridLayer = eventLayer.append("g").attr("class","red-ui-workspace-chart-grid");
+        updateGrid();
 
-    function updateGrid() {
-        var gridTicks = [];
-        for (var i=0;i'+
+            ''+
+            ''+
+            ''+
+            '')
+        })
 
-        $("#btn-zoom-out").on("click", function() {zoomOut();});
-        RED.popover.tooltip($("#btn-zoom-out"),RED._('actions.zoom-out'),'core:zoom-out');
-        $("#btn-zoom-zero").on("click", function() {zoomZero();});
-        RED.popover.tooltip($("#btn-zoom-zero"),RED._('actions.zoom-reset'),'core:zoom-reset');
-        $("#btn-zoom-in").on("click", function() {zoomIn();});
-        RED.popover.tooltip($("#btn-zoom-in"),RED._('actions.zoom-in'),'core:zoom-in');
-        $("#chart").on("DOMMouseScroll mousewheel", function (evt) {
+        $("#red-ui-view-zoom-out").on("click", zoomOut);
+        RED.popover.tooltip($("#red-ui-view-zoom-out"),RED._('actions.zoom-out'),'core:zoom-out');
+        $("#red-ui-view-zoom-zero").on("click", zoomZero);
+        RED.popover.tooltip($("#red-ui-view-zoom-zero"),RED._('actions.zoom-reset'),'core:zoom-reset');
+        $("#red-ui-view-zoom-in").on("click", zoomIn);
+        RED.popover.tooltip($("#red-ui-view-zoom-in"),RED._('actions.zoom-in'),'core:zoom-in');
+        chart.on("DOMMouseScroll mousewheel", function (evt) {
             if ( evt.altKey ) {
                 evt.preventDefault();
                 evt.stopPropagation();
@@ -380,8 +322,8 @@ RED.view = (function() {
         });
 
         // Handle nodes dragged from the palette
-        $("#chart").droppable({
-            accept:".palette_node",
+        chart.droppable({
+            accept:".red-ui-palette-node",
             drop: function( event, ui ) {
                 d3.event = event;
                 var selected_tool = ui.draggable[0].type;
@@ -449,11 +391,11 @@ RED.view = (function() {
                 }
             }
         });
-        $("#chart").on("focus", function() {
-            $("#workspace-tabs").addClass("workspace-focussed");
+        chart.on("focus", function() {
+            $("#red-ui-workspace-tabs").addClass("red-ui-workspace-focussed");
         });
-        $("#chart").on("blur", function() {
-            $("#workspace-tabs").removeClass("workspace-focussed");
+        chart.on("blur", function() {
+            $("#red-ui-workspace-tabs").removeClass("red-ui-workspace-focussed");
         });
 
         RED.actions.add("core:copy-selection-to-internal-clipboard",copySelection);
@@ -489,9 +431,88 @@ RED.view = (function() {
             }
         });
 
+        RED.view.navigator.init();
         RED.view.tools.init();
     }
 
+    function updateGrid() {
+        var gridTicks = [];
+        for (var i=0;i0?7:0))/20)) );
+                        d.w = Math.max(node_width,20*(Math.ceil((calculateTextWidth(l, "red-ui-flow-node-label", 50)+(d._def.inputs>0?7:0))/20)) );
                     }
                     d.h = Math.max(node_height,(d.outputs||0) * 15);
 
-                    if (d._def.badge) {
-                        var badge = node.append("svg:g").attr("class","node_badge_group");
-                        var badgeRect = badge.append("rect").attr("class","node_badge").attr("rx",5).attr("ry",5).attr("width",40).attr("height",15);
-                        badge.append("svg:text").attr("class","node_badge_label").attr("x",35).attr("y",11).attr("text-anchor","end").text(d._def.badge());
-                        if (d._def.onbadgeclick) {
-                            badgeRect.attr("cursor","pointer")
-                                .on("click",function(d) { d._def.onbadgeclick.call(d);d3.event.preventDefault();});
-                        }
-                    }
+                    // if (d._def.badge) {
+                    //     var badge = node.append("svg:g").attr("class","node_badge_group");
+                    //     var badgeRect = badge.append("rect").attr("class","node_badge").attr("rx",5).attr("ry",5).attr("width",40).attr("height",15);
+                    //     badge.append("svg:text").attr("class","node_badge_label").attr("x",35).attr("y",11).attr("text-anchor","end").text(d._def.badge());
+                    //     if (d._def.onbadgeclick) {
+                    //         badgeRect.attr("cursor","pointer")
+                    //             .on("click",function(d) { d._def.onbadgeclick.call(d);d3.event.preventDefault();});
+                    //     }
+                    // }
 
                     if (d._def.button) {
                         var nodeButtonGroup = node.append("svg:g")
                             .attr("transform",function(d) { return "translate("+((d._def.align == "right") ? 94 : -25)+",2)"; })
-                            .attr("class",function(d) { return "node_button "+((d._def.align == "right") ? "node_right_button" : "node_left_button"); });
+                            .attr("class","red-ui-flow-node-button");
                         nodeButtonGroup.append("rect")
+                            .attr("class","red-ui-flow-node-button-background")
                             .attr("rx",5)
                             .attr("ry",5)
                             .attr("width",32)
-                            .attr("height",node_height-4)
-                            .attr("fill","#eee");//function(d) { return d._def.color;})
+                            .attr("height",node_height-4);
                         nodeButtonGroup.append("rect")
-                            .attr("class","node_button_button")
+                            .attr("class","red-ui-flow-node-button-button")
                             .attr("x",function(d) { return d._def.align == "right"? 11:5})
                             .attr("y",4)
                             .attr("rx",4)
@@ -2602,8 +2621,8 @@ RED.view = (function() {
                     }
 
                     var mainRect = node.append("rect")
-                        .attr("class", "node")
-                        .classed("node_unknown",function(d) { return d.type == "unknown"; })
+                        .attr("class", "red-ui-flow-node")
+                        .classed("red-ui-flow-node-unknown",function(d) { return d.type == "unknown"; })
                         .attr("rx", 5)
                         .attr("ry", 5)
                         .attr("fill",function(d) { return RED.utils.getNodeColor(d.type,d._def); /*d._def.color;*/})
@@ -2663,10 +2682,10 @@ RED.view = (function() {
                                     var selectClass;
                                     var portType;
                                     if ((drag_lines[0].virtualLink && drag_lines[0].portType === PORT_TYPE_INPUT) || drag_lines[0].portType === PORT_TYPE_OUTPUT) {
-                                        selectClass = ".port_input .port";
+                                        selectClass = ".red-ui-flow-port-input .red-ui-flow-port";
                                         portType = PORT_TYPE_INPUT;
                                     } else {
-                                        selectClass = ".port_output .port";
+                                        selectClass = ".red-ui-flow-port-output .red-ui-flow-port";
                                         portType = PORT_TYPE_OUTPUT;
                                     }
                                     portMouseOver(d3.select(this.parentNode).selectAll(selectClass),d,portType,0);
@@ -2686,10 +2705,10 @@ RED.view = (function() {
                                     var selectClass;
                                     var portType;
                                     if ((drag_lines[0].virtualLink && drag_lines[0].portType === PORT_TYPE_INPUT) || drag_lines[0].portType === PORT_TYPE_OUTPUT) {
-                                        selectClass = ".port_input .port";
+                                        selectClass = ".red-ui-flow-port-input .red-ui-flow-port";
                                         portType = PORT_TYPE_INPUT;
                                     } else {
-                                        selectClass = ".port_output .port";
+                                        selectClass = ".red-ui-flow-port-output .red-ui-flow-port";
                                         portType = PORT_TYPE_OUTPUT;
                                     }
                                     portMouseOut(d3.select(this.parentNode).selectAll(selectClass),d,portType,0);
@@ -2703,33 +2722,27 @@ RED.view = (function() {
                     if (d._def.icon) {
                         var icon_url = RED.utils.getNodeIcon(d._def,d);
                         var icon_group = node.append("g")
-                            .attr("class","node_icon_group")
+                            .attr("class","red-ui-flow-node-icon-group")
                             .attr("x",0).attr("y",0);
 
                         var icon_shade = icon_group.append("rect")
                             .attr("x",0).attr("y",0)
-                            .attr("class","node_icon_shade")
+                            .attr("class","red-ui-flow-node-icon-shade")
                             .attr("width","30")
-                            .attr("stroke","none")
-                            .attr("fill","#000")
-                            .attr("fill-opacity","0.05")
                             .attr("height",function(d){return Math.min(50,d.h-4);});
 
                         createIconAttributes(icon_url, icon_group, d);
 
                         var icon_shade_border = icon_group.append("path")
                             .attr("d",function(d) { return "M 30 1 l 0 "+(d.h-2)})
-                            .attr("class","node_icon_shade_border")
-                            .attr("stroke-opacity","0.1")
-                            .attr("stroke","#000")
-                            .attr("stroke-width","1");
+                            .attr("class","red-ui-flow-node-icon-shade-border");
 
                         if ("right" == d._def.align) {
-                            icon_group.attr("class","node_icon_group node_icon_group_"+d._def.align);
+                            icon_group.attr("class","red-ui-flow-node-icon-group red-ui-flow-node-icon-group-"+d._def.align);
                             icon_shade_border.attr("d",function(d) { return "M 0 1 l 0 "+(d.h-2)})
-                            //icon.attr("class","node_icon node_icon_"+d._def.align);
-                            //icon.attr("class","node_icon_shade node_icon_shade_"+d._def.align);
-                            //icon.attr("class","node_icon_shade_border node_icon_shade_border_"+d._def.align);
+                            //icon.attr("class","red-ui-flow-node-icon red-ui-flow-node-icon-"+d._def.align);
+                            //icon.attr("class","red-ui-flow-node-icon-shade red-ui-flow-node-icon-shade-"+d._def.align);
+                            //icon.attr("class","red-ui-flow-node-icon-shade-border red-ui-flow-node-icon-shade-border-"+d._def.align);
                         }
 
                         //if (d.inputs > 0 && d._def.align == null) {
@@ -2745,34 +2758,50 @@ RED.view = (function() {
                         icon_group.style("pointer-events","none");
                     }
                     var text = node.append("svg:text")
-                                  .attr("class","node_label")
+                                  .attr("class","red-ui-flow-node-label")
                                   .attr("x", 38)
                                   .attr("dy", ".35em")
                                   .attr("text-anchor","start")
-                                  .classed("hidden",hideLabel);
+                                  .classed("hide",hideLabel);
 
                     if (d._def.align) {
-                        text.attr("class","node_label node_label_"+d._def.align);
+                        text.attr("class","red-ui-flow-node-label red-ui-flow-node-label-"+d._def.align);
                         if (d._def.align === "right") {
                             text.attr("text-anchor","end");
                         }
                     }
 
-                    var status = node.append("svg:g").attr("class","node_status_group").style("display","none");
-                    var statusRect = status.append("rect").attr("class","node_status")
+                    var status = node.append("svg:g").attr("class","red-ui-flow-node-status-group").style("display","none");
+                    var statusRect = status.append("rect").attr("class","red-ui-flow-node-status")
                                         .attr("x",6).attr("y",1).attr("width",9).attr("height",9)
                                         .attr("rx",2).attr("ry",2).attr("stroke-width","3");
                     var statusLabel = status.append("svg:text")
-                        .attr("class","node_status_label")
+                        .attr("class","red-ui-flow-node-status-label")
                         .attr("x",20).attr("y",10);
 
-                    //node.append("circle").attr({"class":"centerDot","cx":0,"cy":0,"r":5});
-
-                    //node.append("path").attr("class","node_error").attr("d","M 3,-3 l 10,0 l -5,-8 z");
-
-                    //TODO: these ought to be SVG
-                    node.append("image").attr("class","node_error hidden").attr("xlink:href","red/images/icons/node-error.png").attr("x",0).attr("y",-6).attr("width",10).attr("height",9);
-                    node.append("image").attr("class","node_changed hidden").attr("xlink:href","red/images/icons/node-changed.png").attr("x",12).attr("y",-6).attr("width",10).attr("height",10);
+                    node.append("g").attr("class","red-ui-flow-node-changed hide").attr("transform","translate(20, -2)").append("circle").attr("r",5);
+                    var nodeErrorButton = node.append("g").attr("class","red-ui-flow-node-error hide").attr("transform","translate(0, -2)").append("path").attr("d","M -5,4 l 10,0 -5,-8 z");
+                    nodeErrorButton.on("mouseenter", function() {
+                        if (d.validationErrors && d.validationErrors.length > 0) {
+                            clearTimeout(portLabelHoverTimeout);
+                            portLabelHoverTimeout = setTimeout(function() {
+                                var pos = getElementPosition(nodeErrorButton.node());
+                                portLabelHoverTimeout = null;
+                                portLabelHover = showTooltip(
+                                    (pos[0]),
+                                    (pos[1]),
+                                    RED._("editor.errors.invalidProperties")+"\n  - "+d.validationErrors.join("\n    - "),
+                                    "top"
+                                );
+                            },500);
+                        }
+                    }).on("mouseleave", function() {
+                        clearTimeout(portLabelHoverTimeout);
+                        if (portLabelHover) {
+                            portLabelHover.remove();
+                            portLabelHover = null;
+                        }
+                    });
             });
 
             node.each(function(d,i) {
@@ -2787,60 +2816,54 @@ RED.view = (function() {
                             if (hideLabel) {
                                 d.w = node_height;
                             } else {
-                                d.w = Math.max(node_width,20*(Math.ceil((calculateTextWidth(l, "node_label", 50)+(d._def.inputs>0?7:0))/20)) );
+                                d.w = Math.max(node_width,20*(Math.ceil((calculateTextWidth(l, "red-ui-flow-node-label", 50)+(d._def.inputs>0?7:0))/20)) );
                             }
-                            // d.w = Math.max(node_width,20*(Math.ceil((calculateTextWidth(l, "node_label", 50)+(d._def.inputs>0?7:0))/20)) );
+                            // d.w = Math.max(node_width,20*(Math.ceil((calculateTextWidth(l, "red-ui-flow-node-label", 50)+(d._def.inputs>0?7:0))/20)) );
                             d.h = Math.max(node_height,(d.outputs||0) * 15);
                             d.x += (d.w-ow)/2;
                             d.resize = false;
                         }
                         var thisNode = d3.select(this);
-                        thisNode.classed("node_subflow",function(d) { return activeSubflow != null; })
+                        thisNode.classed("red-ui-flow-subflow",function(d) { return activeSubflow != null; })
 
                         //thisNode.selectAll(".centerDot").attr({"cx":function(d) { return d.w/2;},"cy":function(d){return d.h/2}});
                         thisNode.attr("transform", function(d) { return "translate(" + (d.x-d.w/2) + "," + (d.y-d.h/2) + ")"; });
                         if (mouse_mode != RED.state.MOVING_ACTIVE) {
-                            thisNode.selectAll(".node")
+                            thisNode.selectAll(".red-ui-flow-node")
                                 .attr("width",function(d){return d.w})
                                 .attr("height",function(d){return d.h})
-                                .classed("node_selected",function(d) { return d.selected; })
-                                .classed("node_highlighted",function(d) { return d.highlighted; })
+                                .classed("red-ui-flow-node-selected",function(d) { return d.selected; })
+                                .classed("red-ui-flow-node-highlighted",function(d) { return d.highlighted; })
                             ;
-                            //thisNode.selectAll(".node-gradient-top").attr("width",function(d){return d.w});
-                            //thisNode.selectAll(".node-gradient-bottom").attr("width",function(d){return d.w}).attr("y",function(d){return d.h-30});
-
                             if ((!d._def.align && d.inputs !== 0 && d.outputs === 0) || "right" === d._def.align) {
-                                thisNode.selectAll(".node_icon_group").classed("node_icon_group_right", true);
-                                thisNode.selectAll(".node_label").classed("node_label_right", true).attr("text-anchor", "end");
+                                thisNode.selectAll(".red-ui-flow-node-icon-group").classed("red-ui-flow-node-icon-group-right", true);
+                                thisNode.selectAll(".red-ui-flow-node-label").classed("red-ui-flow-node-label-right", true).attr("text-anchor", "end");
                             } else {
-                                thisNode.selectAll(".node_icon_group").classed("node_icon_group_right", false);
-                                thisNode.selectAll(".node_label").classed("node_label_right", false).attr("text-anchor", "start");
+                                thisNode.selectAll(".red-ui-flow-node-icon-group").classed("red-ui-flow-node-icon-group-right", false);
+                                thisNode.selectAll(".red-ui-flow-node-label").classed("red-ui-flow-node-label-right", false).attr("text-anchor", "start");
                             }
-                            thisNode.selectAll(".node_icon_group").attr("transform", function (d) { return "translate(0, 0)"; });
-                            thisNode.selectAll(".node_label").attr("x", function (d) { return 38; });
-                            thisNode.selectAll(".node_icon_group_right").attr("transform", function(d){return "translate("+(d.w-30)+",0)"});
-                            thisNode.selectAll(".node_label_right").attr("x", function(d){return d.w-38});
-                            //thisNode.selectAll(".node_icon_right").attr("x",function(d){return d.w-d3.select(this).attr("width")-1-(d.outputs>0?5:0);});
-                            //thisNode.selectAll(".node_icon_shade_right").attr("x",function(d){return d.w-30;});
-                            //thisNode.selectAll(".node_icon_shade_border_right").attr("d",function(d){return "M "+(d.w-30)+" 1 l 0 "+(d.h-2)});
+                            thisNode.selectAll(".red-ui-flow-node-icon-group").attr("transform", function (d) { return "translate(0, 0)"; });
+                            thisNode.selectAll(".red-ui-flow-node-label").attr("x", function (d) { return 38; });
+                            thisNode.selectAll(".red-ui-flow-node-icon-group-right").attr("transform", function(d){return "translate("+(d.w-30)+",0)"});
+                            thisNode.selectAll(".red-ui-flow-node-label-right").attr("x", function(d){return d.w-38});
+                            //thisNode.selectAll(".red-ui-flow-node-icon-right").attr("x",function(d){return d.w-d3.select(this).attr("width")-1-(d.outputs>0?5:0);});
+                            //thisNode.selectAll(".red-ui-flow-node-icon-shade-right").attr("x",function(d){return d.w-30;});
+                            //thisNode.selectAll(".red-ui-flow-node-icon-shade-border-right").attr("d",function(d){return "M "+(d.w-30)+" 1 l 0 "+(d.h-2)});
 
-                            var inputPorts = thisNode.selectAll(".port_input");
+                            var inputPorts = thisNode.selectAll(".red-ui-flow-port-input");
                             if (isLink && showAllLinkPorts === -1 && !activeLinkNodes[d.id] && d.inputs === 0 && !inputPorts.empty()) {
                                 inputPorts.remove();
                             } else if (((isLink && (showAllLinkPorts===PORT_TYPE_INPUT||activeLinkNodes[d.id]))|| d.inputs === 1) && inputPorts.empty()) {
-                                var inputGroup = thisNode.append("g").attr("class","port_input");
+                                var inputGroup = thisNode.append("g").attr("class","red-ui-flow-port-input");
                                 var inputGroupPorts;
 
                                 if (d.type === "link in") {
                                     inputGroupPorts = inputGroup.append("circle")
                                         .attr("cx",-1).attr("cy",5)
                                         .attr("r",5)
-                                        .attr("class","port link_port")
-                                    // inputGroupPorts = inputGroup.append("path")
-                                    //     .attr("d","M 4 -1 h -3 a 6 6 0 1 0 0 12 h 3")
-                                    //     .attr("class","port link_port")
+                                        .attr("class","red-ui-flow-port red-ui-flow-link-port")
                                 } else {
-                                    inputGroupPorts = inputGroup.append("rect").attr("class","port").attr("rx",3).attr("ry",3).attr("width",10).attr("height",10)
+                                    inputGroupPorts = inputGroup.append("rect").attr("class","red-ui-flow-port").attr("rx",3).attr("ry",3).attr("width",10).attr("height",10)
                                 }
                                 inputGroupPorts.on("mousedown",function(d){portMouseDown(d,PORT_TYPE_INPUT,0);})
                                     .on("touchstart",function(d){portMouseDown(d,PORT_TYPE_INPUT,0);})
@@ -2862,21 +2885,18 @@ RED.view = (function() {
                             }
                             var y = (d.h/2)-((numOutputs-1)/2)*13;
                             d.ports = d.ports || d3.range(numOutputs);
-                            d._ports = thisNode.selectAll(".port_output").data(d.ports);
-                            var output_group = d._ports.enter().append("g").attr("class","port_output");
+                            d._ports = thisNode.selectAll(".red-ui-flow-port-output").data(d.ports);
+                            var output_group = d._ports.enter().append("g").attr("class","red-ui-flow-port-output");
                             var output_group_ports;
 
                             if (d.type === "link out") {
                                 output_group_ports = output_group.append("circle")
                                     .attr("cx",11).attr("cy",5)
                                     .attr("r",5)
-                                    .attr("class","port link_port")
-                                // output_group_ports = output_group.append("path")
-                                //     .attr("d","M 6 -1 h 3 a 6 6 0 1 1 0 12 h -3")
-                                //     .attr("class","port link_port")
+                                    .attr("class","red-ui-flow-port red-ui-flow-link-port")
                             } else {
                                 output_group_ports = output_group.append("rect")
-                                    .attr("class","port")
+                                    .attr("class","red-ui-flow-port")
                                     .attr("rx",3).attr("ry",3)
                                     .attr("width",10)
                                     .attr("height",10)
@@ -2896,11 +2916,10 @@ RED.view = (function() {
                                 var x = d.w - 5;
                                 d._ports.each(function(d,i) {
                                         var port = d3.select(this);
-                                        //port.attr("y",(y+13*i)-5).attr("x",x);
                                         port.attr("transform", function(d) { return "translate("+x+","+((y+13*i)-5)+")";});
                                 });
                             }
-                            thisNode.selectAll("text.node_label").text(function(d,i){
+                            thisNode.selectAll("text.red-ui-flow-node-label").text(function(d,i){
                                     var l = "";
                                     if (d._def.label) {
                                         l = d._def.label;
@@ -2927,11 +2946,10 @@ RED.view = (function() {
                                         }
                                         s = " "+s;
                                     }
-                                    return "node_label"+
-                                    (d._def.align?" node_label_"+d._def.align:"")+s;
-                            }).classed("hidden",hideLabel);
+                                    return "red-ui-flow-node-label"+(d._def.align?" red-ui-flow-node-label-"+d._def.align:"")+s;
+                            }).classed("hide",hideLabel);
                             if (d._def.icon) {
-                                var icon = thisNode.select(".node_icon");
+                                var icon = thisNode.select(".red-ui-flow-node-icon");
                                 var faIcon = thisNode.select(".fa-lg");
                                 var current_url;
                                 if (!icon.empty()) {
@@ -2946,47 +2964,45 @@ RED.view = (function() {
                                     } else {
                                         faIcon.remove();
                                     }
-                                    var iconGroup = thisNode.select(".node_icon_group");
+                                    var iconGroup = thisNode.select(".red-ui-flow-node-icon-group");
                                     createIconAttributes(new_url, iconGroup, d);
                                 }
                             }
 
-                            thisNode.selectAll(".node_tools").attr("x",function(d){return d.w-35;}).attr("y",function(d){return d.h-20;});
+                            thisNode.selectAll(".red-ui-flow-node-changed")
+                                .attr("transform",function(d){return "translate("+(d.w-10)+", -2)"})
+                                .classed("hide",function(d) { return !(d.changed||d.moved); });
 
-                            thisNode.selectAll(".node_changed")
-                                .attr("x",function(d){return d.w-10})
-                                .classed("hidden",function(d) { return !(d.changed||d.moved); });
+                            thisNode.selectAll(".red-ui-flow-node-error")
+                                .attr("transform",function(d){ return "translate("+(d.w-10-((d.changed||d.moved)?14:0))+", -2)"})
+                                .classed("hide",function(d) { return d.valid; });
 
-                            thisNode.selectAll(".node_error")
-                                .attr("x",function(d){return d.w-10-((d.changed||d.moved)?13:0)})
-                                .classed("hidden",function(d) { return d.valid; });
-
-                            thisNode.selectAll(".port_input").each(function(d,i) {
+                            thisNode.selectAll(".red-ui-flow-port-input").each(function(d,i) {
                                 var port = d3.select(this);
                                 port.attr("transform",function(d){return "translate(-5,"+((d.h/2)-5)+")";})
                             });
 
-                            thisNode.selectAll(".node_icon").attr("y",function(d){return (d.h-d3.select(this).attr("height"))/2;});
-                            thisNode.selectAll(".node_icon_shade").attr("height",function(d){return d.h;});
-                            thisNode.selectAll(".node_icon_shade_border").attr("d", function (d) {
+                            thisNode.selectAll(".red-ui-flow-node-icon").attr("y",function(d){return (d.h-d3.select(this).attr("height"))/2;});
+                            thisNode.selectAll(".red-ui-flow-node-icon-shade").attr("height",function(d){return d.h;});
+                            thisNode.selectAll(".red-ui-flow-node-icon-shade-border").attr("d", function (d) {
                                 return "M " + (((!d._def.align && d.inputs !== 0 && d.outputs === 0) || "right" === d._def.align) ? 0 : 30) + " 1 l 0 " + (d.h - 2);
                             });
                             thisNode.selectAll(".fa-lg").attr("y",function(d){return (d.h+13)/2;});
 
-                            thisNode.selectAll(".node_button").attr("opacity",function(d) {
+                            thisNode.selectAll(".red-ui-flow-node-button").attr("opacity",function(d) {
                                 return (!isButtonEnabled(d))?0.4:1
                             });
-                            thisNode.selectAll(".node_button_button").attr("cursor",function(d) {
+                            thisNode.selectAll(".red-ui-flow-node-button-button").attr("cursor",function(d) {
                                 return (!isButtonEnabled(d))?"":"pointer";
                             });
-                            thisNode.selectAll(".node_button").attr("transform",function(d){
+                            thisNode.selectAll(".red-ui-flow-node-button").attr("transform",function(d){
                                 var x = d._def.align == "right"?d.w-6:-25;
                                 if (d._def.button.toggle && !d[d._def.button.toggle]) {
                                     x = x - (d._def.align == "right"?8:-8);
                                 }
                                 return "translate("+x+",2)";
                             });
-                            thisNode.selectAll(".node_button rect").attr("fill-opacity",function(d){
+                            thisNode.selectAll(".red-ui-flow-node-button rect").attr("fill-opacity",function(d){
                                 if (d._def.button.toggle) {
                                     return d[d._def.button.toggle]?1:0.2;
                                 }
@@ -2995,84 +3011,71 @@ RED.view = (function() {
 
                             if (d._def.button && (typeof d._def.button.visible === "function")) { // is defined and a function...
                                 if (d._def.button.visible.call(d) === false) {
-                                    thisNode.selectAll(".node_button").style("display","none");
+                                    thisNode.selectAll(".red-ui-flow-node-button").style("display","none");
                                 }
                                 else {
-                                    thisNode.selectAll(".node_button").style("display","inherit");
+                                    thisNode.selectAll(".red-ui-flow-node-button").style("display","inherit");
                                 }
                             }
 
-                            //thisNode.selectAll(".node_right_button").attr("transform",function(d){return "translate("+(d.w - d._def.button.width.call(d))+","+0+")";}).attr("fill",function(d) {
-                            //    return typeof d._def.button.color  === "function" ? d._def.button.color.call(d):(d._def.button.color != null ? d._def.button.color : d._def.color)
-                            //});
-
-                            thisNode.selectAll(".node_badge_group").attr("transform",function(d){return "translate("+(d.w-40)+","+(d.h+3)+")";});
-                            thisNode.selectAll("text.node_badge_label").text(function(d,i) {
-                                if (d._def.badge) {
-                                    if (typeof d._def.badge == "function") {
-                                        try {
-                                            return d._def.badge.call(d);
-                                        } catch(err) {
-                                            console.log("Definition error: "+d.type+".badge",err);
-                                            return "";
-                                        }
-                                    } else {
-                                        return d._def.badge;
-                                    }
-                                }
-                                return "";
-                            });
+                            // thisNode.selectAll(".node_badge_group").attr("transform",function(d){return "translate("+(d.w-40)+","+(d.h+3)+")";});
+                            // thisNode.selectAll("text.node_badge_label").text(function(d,i) {
+                            //     if (d._def.badge) {
+                            //         if (typeof d._def.badge == "function") {
+                            //             try {
+                            //                 return d._def.badge.call(d);
+                            //             } catch(err) {
+                            //                 console.log("Definition error: "+d.type+".badge",err);
+                            //                 return "";
+                            //             }
+                            //         } else {
+                            //             return d._def.badge;
+                            //         }
+                            //     }
+                            //     return "";
+                            // });
                         }
 
-                        if (!showStatus || !d.status) {
-                            thisNode.selectAll(".node_status_group").style("display","none");
-                        } else {
-                            var fill = status_colours[d.status.fill]; // Only allow our colours for now
-                            if (d.status.shape == null && fill == null) {
-                                thisNode.selectAll(".node_status").style("display","none");
-                                thisNode.selectAll(".node_status_group").style("display","inline").attr("transform","translate(-14,"+(d.h+3)+")");
+                        if (d.dirtyStatus) {
+                            if (!showStatus || !d.status) {
+                                thisNode.selectAll(".red-ui-flow-node-status-group").style("display","none");
                             } else {
-                                thisNode.selectAll(".node_status_group").style("display","inline").attr("transform","translate(3,"+(d.h+3)+")");
-                                var style;
-                                if (d.status.shape == null || d.status.shape == "dot") {
-                                    style = {
-                                        display: "inline",
-                                        fill: fill,
-                                        stroke: fill
-                                    };
-                                } else if (d.status.shape == "ring" ){
-                                    style = {
-                                        display: "inline",
-                                        fill: "#fff",
-                                        stroke: fill
-                                    }
+                                thisNode.selectAll(".red-ui-flow-node-status-group").style("display","inline");
+                                var fill = status_colours[d.status.fill]; // Only allow our colours for now
+                                if (d.status.shape == null && fill == null) {
+                                    thisNode.selectAll(".red-ui-flow-node-status").style("display","none");
+                                    thisNode.selectAll(".red-ui-flow-node-status-group").attr("transform","translate(-14,"+(d.h+3)+")");
+                                } else {
+                                    thisNode.selectAll(".red-ui-flow-node-status-group").attr("transform","translate(3,"+(d.h+3)+")");
+                                    var statusClass = "red-ui-flow-node-status-"+(d.status.shape||"dot")+"-"+d.status.fill;
+                                    thisNode.selectAll(".red-ui-flow-node-status").attr("class","red-ui-flow-node-status "+statusClass);
+                                }
+                                if (d.status.text) {
+                                    thisNode.selectAll(".red-ui-flow-node-status-label").text(d.status.text);
+                                } else {
+                                    thisNode.selectAll(".red-ui-flow-node-status-label").text("");
                                 }
-                                thisNode.selectAll(".node_status").style(style);
-                            }
-                            if (d.status.text) {
-                                thisNode.selectAll(".node_status_label").text(d.status.text);
-                            } else {
-                                thisNode.selectAll(".node_status_label").text("");
                             }
+                            delete d.dirtyStatus;
                         }
 
                         d.dirty = false;
                     }
             });
 
-            var link = linkLayer.selectAll(".link").data(
+            var link = linkLayer.selectAll(".red-ui-flow-link").data(
                 activeLinks,
                 function(d) {
                     return d.source.id+":"+d.sourcePort+":"+d.target.id+":"+d.target.i;
                 }
             );
-            var linkEnter = link.enter().insert("g",".node").attr("class","link");
+            var linkEnter = link.enter().insert("g",".red-ui-flow-node").attr("class","red-ui-flow-link");
 
             linkEnter.each(function(d,i) {
                 var l = d3.select(this);
                 d.added = true;
-                l.append("svg:path").attr("class","link_background link_path")
-                   .classed("link_link", function(d) { return d.link })
+                l.append("svg:path").attr("class","red-ui-flow-link-background red-ui-flow-link-path")
+                   .classed("red-ui-flow-link-link", function(d) { return d.link })
                    .on("mousedown",function(d) {
                         mousedown_link = d;
                         clearSelection();
@@ -3099,19 +3102,19 @@ RED.view = (function() {
                             showTouchMenu(obj,pos);
                         },touchLongPressTimeout);
                     })
-                l.append("svg:path").attr("class","link_outline link_path");
-                l.append("svg:path").attr("class","link_line link_path")
-                    .classed("link_link", function(d) { return d.link })
-                    .classed("link_subflow", function(d) { return !d.link && activeSubflow });
+                l.append("svg:path").attr("class","red-ui-flow-link-outline red-ui-flow-link-path");
+                l.append("svg:path").attr("class","red-ui-flow-link-line red-ui-flow-link-path")
+                    .classed("red-ui-flow-link-link", function(d) { return d.link })
+                    .classed("red-ui-flow-subflow-link", function(d) { return !d.link && activeSubflow });
             });
 
             link.exit().remove();
-            var links = linkLayer.selectAll(".link_path");
+            var links = linkLayer.selectAll(".red-ui-flow-link-path");
             links.each(function(d) {
                 var link = d3.select(this);
                 if (d.added || d===selected_link || d.selected || dirtyNodes[d.source.id] || dirtyNodes[d.target.id]) {
-                    if (/link_line/.test(link.attr('class'))) {
-                        link.classed("link_subflow", function(d) { return !d.link && activeSubflow });
+                    if (/red-ui-flow-link-line/.test(link.attr('class'))) {
+                        link.classed("red-ui-flow-subflow-link", function(d) { return !d.link && activeSubflow });
                     }
                     link.attr("d",function(d){
                         var numOutputs = d.source.outputs || 1;
@@ -3135,19 +3138,19 @@ RED.view = (function() {
                 }
             })
 
-            link.classed("link_selected", function(d) { return d === selected_link || d.selected; });
-            link.classed("link_unknown",function(d) {
+            link.classed("red-ui-flow-link-selected", function(d) { return d === selected_link || d.selected; });
+            link.classed("red-ui-flow-link-unknown",function(d) {
                 delete d.added;
                 return d.target.type == "unknown" || d.source.type == "unknown"
             });
-            var offLinks = linkLayer.selectAll(".link_flow_link_g").data(
+            var offLinks = linkLayer.selectAll(".red-ui-flow-link-off-flow").data(
                 activeFlowLinks,
                 function(d) {
                     return d.node.id+":"+d.refresh
                 }
             );
 
-            var offLinksEnter = offLinks.enter().insert("g",".node").attr("class","link_flow_link_g");
+            var offLinksEnter = offLinks.enter().insert("g",".red-ui-flow-node").attr("class","red-ui-flow-link-off-flow");
             offLinksEnter.each(function(d,i) {
                 var g = d3.select(this);
                 var s = 1;
@@ -3158,8 +3161,7 @@ RED.view = (function() {
                 }
                 var stemLength = s*30;
                 var branchLength = s*20;
-                var l = g.append("svg:path").attr("class","link_flow_link")
-                        .attr("class","link_link").attr("d","M 0 0 h "+stemLength);
+                var l = g.append("svg:path").attr("class","red-ui-flow-link-link").attr("d","M 0 0 h "+stemLength);
                 var links = d.links;
                 var flows = Object.keys(links);
                 var tabOrder = RED.nodes.getWorkspaceOrder();
@@ -3169,10 +3171,10 @@ RED.view = (function() {
                 var linkWidth = 10;
                 var h = node_height;
                 var y = -(flows.length-1)*h/2;
-                var linkGroups = g.selectAll(".link_group").data(flows);
-                var enterLinkGroups = linkGroups.enter().append("g").attr("class","link_group")
-                        .on('mouseover', function() { if (mouse_mode !== 0) { return } d3.select(this).classed('link_group_active',true)})
-                        .on('mouseout', function() {if (mouse_mode !== 0) { return } d3.select(this).classed('link_group_active',false)})
+                var linkGroups = g.selectAll(".red-ui-flow-link-group").data(flows);
+                var enterLinkGroups = linkGroups.enter().append("g").attr("class","red-ui-flow-link-group")
+                        .on('mouseover', function() { if (mouse_mode !== 0) { return } d3.select(this).classed('red-ui-flow-link-group-active',true)})
+                        .on('mouseout', function() {if (mouse_mode !== 0) { return } d3.select(this).classed('red-ui-flow-link-group-active',false)})
                         .on('mousedown', function() { d3.event.preventDefault(); d3.event.stopPropagation(); })
                         .on('mouseup', function(f) {
                             if (mouse_mode !== 0) {
@@ -3191,8 +3193,8 @@ RED.view = (function() {
                         });
                 enterLinkGroups.each(function(f) {
                     var linkG = d3.select(this);
-                    linkG.append("svg:path").attr("class","link_flow_link")
-                        .attr("class","link_link")
+                    linkG.append("svg:path")
+                        .attr("class","red-ui-flow-link-link")
                         .attr("d",
                             "M "+stemLength+" 0 "+
                             "C "+(stemLength+(1.7*branchLength))+" "+0+
@@ -3200,7 +3202,7 @@ RED.view = (function() {
                             (stemLength+branchLength*1.5)+" "+y+" "
                         );
                     linkG.append("svg:path")
-                        .attr("class","link_port")
+                        .attr("class","red-ui-flow-link-port")
                         .attr("d",
                             "M "+(stemLength+branchLength*1.5+s*(linkWidth+7))+" "+(y-12)+" "+
                             "h "+(-s*linkWidth)+" "+
@@ -3210,14 +3212,14 @@ RED.view = (function() {
                             "h "+(s*linkWidth)
                         );
                     linkG.append("svg:path")
-                        .attr("class","link_port")
+                        .attr("class","red-ui-flow-link-port")
                         .attr("d",
                             "M "+(stemLength+branchLength*1.5+s*(linkWidth+10))+" "+(y-12)+" "+
                             "h "+(s*(linkWidth*3))+" "+
                             "M "+(stemLength+branchLength*1.5+s*(linkWidth+10))+" "+(y+12)+" "+
                             "h "+(s*(linkWidth*3))
                         ).style("stroke-dasharray","12 3 8 4 3");
-                    linkG.append("rect").attr("class","port link_port")
+                    linkG.append("rect").attr("class","red-ui-flow-port red-ui-flow-link-port")
                         .attr("x",stemLength+branchLength*1.5-4+(s*4))
                         .attr("y",y-4)
                         .attr("rx",2)
@@ -3237,7 +3239,7 @@ RED.view = (function() {
                         label = tab.label || tab.id;
                     }
                     linkG.append("svg:text")
-                        .attr("class","port_label")
+                        .attr("class","red-ui-flow-port-label")
                         .attr("x",stemLength+branchLength*1.5+(s*15))
                         .attr("y",y+1)
                         .style("font-size","10px")
@@ -3249,7 +3251,7 @@ RED.view = (function() {
                 linkGroups.exit().remove();
             });
             offLinks.exit().remove();
-            offLinks = linkLayer.selectAll(".link_flow_link_g");
+            offLinks = linkLayer.selectAll(".red-ui-flow-link-off-flow");
             offLinks.each(function(d) {
                 var s = 1;
                 if (d.node.type === "link in") {
@@ -3262,12 +3264,12 @@ RED.view = (function() {
 
         } else {
             // JOINING - unselect any selected links
-            linkLayer.selectAll(".link_selected").data(
+            linkLayer.selectAll(".red-ui-flow-link-selected").data(
                 activeLinks,
                 function(d) {
                     return d.source.id+":"+d.sourcePort+":"+d.target.id+":"+d.target.i;
                 }
-            ).classed("link_selected", false);
+            ).classed("red-ui-flow-link-selected", false);
         }
         RED.view.navigator.refresh();
         if (d3.event) {
@@ -3283,12 +3285,12 @@ RED.view = (function() {
             // setting the focus
             var scrollX = window.parent.window.scrollX;
             var scrollY = window.parent.window.scrollY;
-            $("#chart").trigger("focus");
+            chart.trigger("focus");
             window.parent.window.scrollTo(scrollX,scrollY);
         } catch(err) {
             // In case we're iframed into a page of a different origin, just focus
             // the view following the inevitable DOMException
-            $("#chart").trigger("focus");
+            chart.trigger("focus");
         }
     }
 
@@ -3445,9 +3447,9 @@ RED.view = (function() {
 
     function toggleShowGrid(state) {
         if (state) {
-            grid.style("visibility","visible");
+            gridLayer.style("visibility","visible");
         } else {
-            grid.style("visibility","hidden");
+            gridLayer.style("visibility","hidden");
         }
     }
     function toggleSnapGrid(state) {
@@ -3456,7 +3458,7 @@ RED.view = (function() {
     }
     function toggleStatus(s) {
         showStatus = s;
-        RED.nodes.eachNode(function(n) { n.dirty = true;});
+        RED.nodes.eachNode(function(n) { n.dirtyStatus = true; n.dirty = true;});
         //TODO: subscribe/unsubscribe here
         redraw();
     }
@@ -3511,7 +3513,7 @@ RED.view = (function() {
         },
         getLinksAtPoint: function(x,y) {
             var result = [];
-            var links = outer.selectAll(".link_background")[0];
+            var links = outer.selectAll(".red-ui-flow-link-background")[0];
             for (var i=0;i= bb.x && y >= bb.y && x <= bb.x+bb.width && y <= bb.y+bb.height) {
@@ -3530,13 +3532,13 @@ RED.view = (function() {
                     node.dirty = true;
                     RED.workspaces.show(node.z);
 
-                    var screenSize = [$("#chart").width(),$("#chart").height()];
-                    var scrollPos = [$("#chart").scrollLeft(),$("#chart").scrollTop()];
+                    var screenSize = [chart.width(),chart.height()];
+                    var scrollPos = [chart.scrollLeft(),chart.scrollTop()];
 
                     if (node.x < scrollPos[0] || node.y < scrollPos[1] || node.x > screenSize[0]+scrollPos[0] || node.y > screenSize[1]+scrollPos[1]) {
                         var deltaX = '-='+((scrollPos[0] - node.x) + screenSize[0]/2);
                         var deltaY = '-='+((scrollPos[1] - node.y) + screenSize[1]/2);
-                        $("#chart").animate({
+                        chart.animate({
                             scrollLeft: deltaX,
                             scrollTop: deltaY
                         },200);
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/workspaces.js b/packages/node_modules/@node-red/editor-client/src/js/ui/workspaces.js
index bd6bd2331..35b62cba5 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/workspaces.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/workspaces.js
@@ -28,7 +28,7 @@ RED.workspaces = (function() {
             var tabId = RED.nodes.id();
             do {
                 workspaceIndex += 1;
-            } while ($("#workspace-tabs a[title='"+RED._('workspace.defaultName',{number:workspaceIndex})+"']").size() !== 0);
+            } while ($("#red-ui-workspace-tabs a[title='"+RED._('workspace.defaultName',{number:workspaceIndex})+"']").size() !== 0);
 
             ws = {type:"tab",id:tabId,disabled: false,info:"",label:RED._('workspace.defaultName',{number:workspaceIndex})};
             RED.nodes.addWorkspace(ws,targetIndex);
@@ -107,8 +107,8 @@ RED.workspaces = (function() {
                             changed = true;
                             workspace.info = info;
                         }
-                        $("#red-ui-tab-"+(workspace.id.replace(".","-"))).toggleClass('workspace-disabled',!!workspace.disabled);
-                        $("#workspace").toggleClass("workspace-disabled",!!workspace.disabled);
+                        $("#red-ui-tab-"+(workspace.id.replace(".","-"))).toggleClass('red-ui-workspace-disabled',!!workspace.disabled);
+                        $("#red-ui-workspace").toggleClass("red-ui-workspace-disabled",!!workspace.disabled);
 
                         if (changed) {
                             var historyEvent = {
@@ -150,7 +150,7 @@ RED.workspaces = (function() {
                 tabflowEditor.resize();
             },
             open: function(tray) {
-                var trayBody = tray.find('.editor-tray-body');
+                var trayBody = tray.find('.red-ui-tray-body');
                 var dialogForm = $('
                                  ').appendTo(trayBody);
                 $('
                                  '+
                     ''+
@@ -159,7 +159,7 @@ RED.workspaces = (function() {
 
                 $('
                                  '+
                     ''+
-                    ' '+
+                    ' '+
                     ''+
                 '
                                  ').appendTo(dialogForm);
 
@@ -241,7 +241,7 @@ RED.workspaces = (function() {
     var workspaceTabCount = 0;
     function createWorkspaceTabs() {
         workspace_tabs = RED.tabs.create({
-            id: "workspace-tabs",
+            id: "red-ui-workspace-tabs",
             onchange: function(tab) {
                 var event = {
                     old: activeWorkspace
@@ -250,7 +250,7 @@ RED.workspaces = (function() {
                 event.workspace = activeWorkspace;
                 RED.events.emit("workspace:change",event);
                 window.location.hash = 'flow/'+tab.id;
-                $("#workspace").toggleClass("workspace-disabled",!!tab.disabled);
+                $("#red-ui-workspace").toggleClass("red-ui-workspace-disabled",!!tab.disabled);
                 RED.sidebar.config.refresh();
                 RED.view.focus();
             },
@@ -268,9 +268,9 @@ RED.workspaces = (function() {
                 if (tab.type === "tab") {
                     workspaceTabCount++;
                 }
-                $(' ').prependTo("#red-ui-tab-"+(tab.id.replace(".","-"))+" .red-ui-tab-label");
+                $(' ').prependTo("#red-ui-tab-"+(tab.id.replace(".","-"))+" .red-ui-tab-label");
                 if (tab.disabled) {
-                    $("#red-ui-tab-"+(tab.id.replace(".","-"))).addClass('workspace-disabled');
+                    $("#red-ui-tab-"+(tab.id.replace(".","-"))).addClass('red-ui-workspace-disabled');
                 }
                 RED.menu.setDisabled("menu-item-workspace-delete",workspaceTabCount <= 1);
                 if (workspaceTabCount === 1) {
@@ -294,16 +294,16 @@ RED.workspaces = (function() {
             onselect: function(selectedTabs) {
                 RED.view.select(false)
                 if (selectedTabs.length === 0) {
-                    $("#chart svg").css({"pointer-events":"auto",filter:"none"})
-                    $("#workspace-toolbar").css({"pointer-events":"auto",filter:"none"})
-                    $("#palette-container").css({"pointer-events":"auto",filter:"none"})
-                    $(".sidebar-shade").hide();
+                    $("#red-ui-workspace-chart svg").css({"pointer-events":"auto",filter:"none"})
+                    $("#red-ui-workspace-toolbar").css({"pointer-events":"auto",filter:"none"})
+                    $("#red-ui-palette-container").css({"pointer-events":"auto",filter:"none"})
+                    $(".red-ui-sidebar-shade").hide();
                 } else {
                     RED.view.select(false)
-                    $("#chart svg").css({"pointer-events":"none",filter:"opacity(60%)"})
-                    $("#workspace-toolbar").css({"pointer-events":"none",filter:"opacity(60%)"})
-                    $("#palette-container").css({"pointer-events":"none",filter:"opacity(60%)"})
-                    $(".sidebar-shade").show();
+                    $("#red-ui-workspace-chart svg").css({"pointer-events":"none",filter:"opacity(60%)"})
+                    $("#red-ui-workspace-toolbar").css({"pointer-events":"none",filter:"opacity(60%)"})
+                    $("#red-ui-palette-container").css({"pointer-events":"none",filter:"opacity(60%)"})
+                    $(".red-ui-sidebar-shade").show();
                 }
             },
             minimumActiveTabWidth: 150,
@@ -316,17 +316,24 @@ RED.workspaces = (function() {
         workspaceTabCount = 0;
     }
     function showWorkspace() {
-        $("#workspace .red-ui-tabs").show()
-        $("#chart").show()
-        $("#workspace-footer").children().show()
+        $("#red-ui-workspace .red-ui-tabs").show()
+        $("#red-ui-workspace-chart").show()
+        $("#red-ui-workspace-footer").children().show()
     }
     function hideWorkspace() {
-        $("#workspace .red-ui-tabs").hide()
-        $("#chart").hide()
-        $("#workspace-footer").children().hide()
+        $("#red-ui-workspace .red-ui-tabs").hide()
+        $("#red-ui-workspace-chart").hide()
+        $("#red-ui-workspace-footer").children().hide()
     }
 
     function init() {
+        $('
                                    ').appendTo("#red-ui-workspace");
+        $('
                                    ').appendTo("#red-ui-workspace");
+        $('
                                    ').appendTo("#red-ui-workspace");
+        $('').appendTo("#red-ui-workspace");
+        $('
                                    ').appendTo("#red-ui-workspace");
+
+
         createWorkspaceTabs();
         RED.events.on("sidebar:resize",workspace_tabs.resize);
 
diff --git a/packages/node_modules/@node-red/editor-client/src/js/user.js b/packages/node_modules/@node-red/editor-client/src/js/user.js
index 2ea4f0dc0..f2b53c31a 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/user.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/user.js
@@ -30,7 +30,11 @@ RED.user = (function() {
 
         dialog.dialog({
             autoOpen: false,
-            dialogClass: "ui-dialog-no-close",
+            classes: {
+                "ui-dialog": "red-ui-editor-dialog",
+                "ui-dialog-titlebar-close": "hide",
+                "ui-widget-overlay": "red-ui-editor-dialog"
+            },
             modal: true,
             closeOnEscape: !!opts.cancelable,
             width: 600,
@@ -178,9 +182,9 @@ RED.user = (function() {
     }
 
     function updateUserMenu() {
-        $("#btn-usermenu-submenu li").remove();
+        $("#red-ui-header-button-user-submenu li").remove();
         if (RED.settings.user.anonymous) {
-            RED.menu.addItem("btn-usermenu",{
+            RED.menu.addItem("red-ui-header-button-user",{
                 id:"usermenu-item-login",
                 label:RED._("menu.label.login"),
                 onselect: function() {
@@ -194,11 +198,11 @@ RED.user = (function() {
                 }
             });
         } else {
-            RED.menu.addItem("btn-usermenu",{
+            RED.menu.addItem("red-ui-header-button-user",{
                 id:"usermenu-item-username",
                 label:""+RED.settings.user.username+""
             });
-            RED.menu.addItem("btn-usermenu",{
+            RED.menu.addItem("red-ui-header-button-user",{
                 id:"usermenu-item-logout",
                 label:RED._("menu.label.logout"),
                 onselect: function() {
@@ -213,8 +217,8 @@ RED.user = (function() {
         if (RED.settings.user) {
             if (!RED.settings.editorTheme || !RED.settings.editorTheme.hasOwnProperty("userMenu")) {
 
-                var userMenu = $('
                                    • ')
-                    .prependTo(".header-toolbar");
+                var userMenu = $('
                                    • ')
+                    .prependTo(".red-ui-header-toolbar");
                 if (RED.settings.user.image) {
                     $('').css({
                         backgroundImage: "url("+RED.settings.user.image+")",
@@ -223,7 +227,7 @@ RED.user = (function() {
                     $('').appendTo(userMenu.find("a"));
                 }
 
-                RED.menu.init({id:"btn-usermenu",
+                RED.menu.init({id:"red-ui-header-button-user",
                     options: []
                 });
                 updateUserMenu();
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/ace.scss b/packages/node_modules/@node-red/editor-client/src/sass/ace.scss
index b29b3ce2e..588af07b1 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/ace.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/ace.scss
@@ -1,29 +1,68 @@
-.ace_gutter {
-    border-top-left-radius: 4px;
-    border-bottom-left-radius: 4px;
-}
-.ace_scroller {
-    border-top-right-radius: 4px;
-    border-bottom-right-radius: 4px;
-}
+.red-ui-editor, .red-ui-editor-dialog {
 
-#event-log-editor {
+    .ace_read-only {
+        .ace_scroller {
+            background: $text-editor-background-disabled;
+            color: $text-editor-color-disabled;
+        }
+        .ace_cursor {
+           color: transparent !important;
+        }
+    }
+
+
+    .ace_gutter {
+        border-top-left-radius: 4px;
+        border-bottom-left-radius: 4px;
+    }
     .ace_scroller {
-        background: #444;
-        color: #dd9;
+        border-top-right-radius: 4px;
+        border-bottom-right-radius: 4px;
     }
-    .ace_active-line {
-        background: #666 !important;
-    }
-    .ace_selection {
-        background: #999 !important;
-    }
-}
 
-.ace_tooltip {
-    background-image: none;
-    background: #fcffdc;
-    border-radius: 4px;
-    @include component-shadow;
-    border-color: $primary-border-color;
+    .ace_scroller {
+        background: $text-editor-background;
+        color: $text-editor-color;
+    }
+    .ace_marker-layer .ace_active-line {
+        background: $text-editor-active-line-background;
+    }
+    .ace_marker-layer .ace_selection {
+        background: $text-editor-selection-background;
+        border-radius: 1px;
+    }
+    .ace_gutter-cell  {
+        color: $text-editor-color;
+    }
+    .ace_gutter-active-line {
+        background: $text-editor-gutter-active-line-background;
+    }
+    .ace_gutter {
+        background: $text-editor-gutter-background;
+    }
+    .ace_tooltip {
+        font-family: $primary-font;
+        line-height: 1.4em;
+        max-width: 400px;
+        white-space: normal;
+        background-image: none;
+        background: $popover-background;
+        color: $popover-color;
+        border-radius: 4px;
+        @include component-shadow;
+        border-color: $popover-background;
+    }
+
+    #red-ui-event-log-editor {
+        .ace_scroller {
+            background: $event-log-background;
+            color: $event-log-color;
+        }
+        .ace_marker-layer .ace_active-line {
+            background: $event-log-active-line-background;
+        }
+        .ace_marker-layer .ace_selection {
+            background: $event-log-selection-background;
+        }
+    }
 }
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/base.scss b/packages/node_modules/@node-red/editor-client/src/sass/base.scss
new file mode 100644
index 000000000..67abb8247
--- /dev/null
+++ b/packages/node_modules/@node-red/editor-client/src/sass/base.scss
@@ -0,0 +1,261 @@
+/**
+* Copyright JS Foundation and other contributors, http://js.foundation
+*
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+* http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+**/
+
+
+
+.red-ui-editor {
+    font-size: $primary-font-size;
+    font-family: $primary-font;
+    padding: 0;
+    margin: 0;
+    background: $primary-background;
+    color: $primary-text-color;
+    line-height: 20px;
+}
+
+#red-ui-editor {
+    position: absolute;
+    top: 0; left: 0; bottom: 0; right: 0;
+}
+#red-ui-editor-node-configs {
+    display: none;
+}
+#red-ui-main-container {
+    position: absolute;
+    top:40px; left:0; bottom: 0; right:0;
+    overflow:hidden;
+}
+
+#red-ui-palette-shade, #red-ui-editor-shade, #red-ui-header-shade, #red-ui-sidebar-shade  {
+    @include shade;
+    z-index: 2;
+}
+#red-ui-sidebar-shade  {
+    left: -8px;
+    top: -1px;
+    bottom: -1px;
+}
+#red-ui-full-shade {
+    @include shade;
+    z-index: 15;
+}
+.red-ui-editor,
+.red-ui-editor-dialog,
+.red-ui-menu,
+.red-ui-popover,
+.red-ui-typedInput-options,
+.red-ui-icon-picker {
+    a {
+        text-decoration: none;
+    }
+    a:hover,
+    a:focus {
+        text-decoration: none;
+    }
+
+    p {
+        margin: 0 0 10px;
+    }
+
+    small {
+        font-size: 85%;
+    }
+
+    strong {
+        font-weight: bold;
+    }
+
+    em {
+        font-style: italic;
+    }
+
+    cite {
+        font-style: normal;
+    }
+
+    ul,
+    ol {
+        padding: 0;
+        margin: 0 0 10px 25px;
+    }
+
+    ul ul,
+    ul ol,
+    ol ol,
+    ol ul {
+        margin-bottom: 0;
+    }
+
+    li {
+        line-height: 20px;
+    }
+    dl {
+        margin-bottom: 20px;
+    }
+
+    dt,
+    dd {
+        line-height: 20px;
+    }
+
+    dt {
+        font-weight: bold;
+    }
+
+    dd {
+        margin-left: 10px;
+    }
+
+    hr {
+        margin: 20px 0;
+        border: 0;
+        border-top: 1px solid $tertiary-border-color;
+    }
+
+
+
+    i.spinner {
+        display: inline-block;
+        width: 14px;
+        height: 14px;
+        line-height: 14px;
+        vertical-align: text-top;
+        margin-top: 0px;
+        background: url(images/spin.svg) no-repeat 50% 50%;
+        background-size: contain
+    }
+
+    code {
+        font-family: $monospace-font;
+        font-size: $primary-font-size;
+        padding: 0px;
+        margin: 1px;
+        color: $info-text-code-color;
+        white-space: nowrap;
+    }
+
+    pre {
+        display: block;
+        padding: 9.5px;
+        margin: 0 0 10px;
+        line-height: 20px;
+        word-break: break-all;
+        word-wrap: break-word;
+        white-space: pre-wrap;
+        background-color:$tertiary-background;
+        border: 1px solid $tertiary-border-color;
+        border-radius: 2px;
+    }
+
+    pre code {
+        padding: 0;
+        color: inherit;
+        white-space: pre;
+        white-space: pre-wrap;
+        background-color: transparent;
+        border: 0;
+    }
+
+    .pull-right {
+        float: right;
+    }
+
+    .pull-left {
+        float: left;
+    }
+    .hide {
+        display: none;
+    }
+    .show {
+        display: block;
+    }
+
+    img {
+        width: auto\9;
+        height: auto;
+        max-width: 100%;
+        vertical-align: middle;
+        border: 0;
+        -ms-interpolation-mode: bicubic;
+    }
+
+    blockquote {
+        padding: 0 0 0 15px;
+        margin: 0 0 20px;
+        border-left: 4px solid $secondary-border-color;
+        color: $secondary-text-color;
+
+        p {
+            font-size: 14px;
+            font-weight: inherit;
+            line-height: 1.25;
+            margin-bottom: 0;
+        }
+    }
+
+    table {
+        max-width: 100%;
+        background-color: transparent;
+        border-collapse: collapse;
+        border-spacing: 0;
+    }
+}
+
+.red-ui-component-spinner {
+    position: absolute;
+    top: 1px;
+    bottom: 1px;
+    left: 1px;
+    right: 1px;
+    text-align: center;
+    padding: 40px;
+    background: $secondary-background;
+    &:before {
+      content: '';
+      display: inline-block;
+      height: 100%;
+      vertical-align: middle;
+      margin-right: -0.25em;
+    }
+    img {
+        display: inline-block;
+        vertical-align: middle;
+        width: 80px;
+    }
+    &.red-ui-component-spinner-sidebar {
+        background: $secondary-background;
+        padding:0;
+        img {
+            width: 40px;
+        }
+    }
+    &.projects-version-control-spinner-sidebar {
+        background: $secondary-background;
+        padding:0;
+        img {
+            width: 20px;
+        }
+    }
+
+    &.red-ui-component-spinner-contain {
+        padding: 0;
+        img {
+            width: auto;
+            height: 100%;
+            max-height: 50px;
+        }
+    }
+}
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/bootstrap.scss b/packages/node_modules/@node-red/editor-client/src/sass/bootstrap.scss
deleted file mode 100644
index 56e7497dd..000000000
--- a/packages/node_modules/@node-red/editor-client/src/sass/bootstrap.scss
+++ /dev/null
@@ -1,21 +0,0 @@
-/**
- * Copyright JS Foundation and other contributors, http://js.foundation
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- **/
-
-.popover-title { display: none; }
-
-div.btn-group, a.btn {
-   @include disable-selection;
-}
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/colors.scss b/packages/node_modules/@node-red/editor-client/src/sass/colors.scss
index 367a05a7c..99ffaacab 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/colors.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/colors.scss
@@ -14,64 +14,271 @@
  * limitations under the License.
  **/
 
-$background-color: #f3f3f3;
+$primary-font: 'Helvetica Neue', Arial, Helvetica, sans-serif;
+$primary-font-size: 14px;
+$monospace-font: Menlo, Consolas, 'DejaVu Sans Mono', Courier, monospace;
 
-$form-placeholder-color: #bbbbbb;
-$form-text-color: #444;
+$primary-background: #f3f3f3;//#0ff;
+
+$secondary-background: #fff;//#ff0;
+$secondary-background-selected: #efefef;//#e9e900;
+$secondary-background-inactive: #f0f0f0;//#f0f000;
+$secondary-background-hover: #ddd;//#dd0;
+$secondary-background-disabled: #f9f9f9;//#fafa0;
+
+$tertiary-background:  #f7f7f7;//#f0f;
+
+$shadow: rgba(0, 0, 0, 0.2);
+
+// Main body text
+$primary-text-color: #555;//#0f0;
+// UI control label text
+$secondary-text-color: #888;//#00f;
+$secondary-text-color-focus: #999;//#009;
+$secondary-text-color-hover: #666;//#006;
+$secondary-text-color-active: #666;//#006;
+$secondary-text-color-selected: #AAA;//#00A;
+$secondary-text-color-inactive: #666;//#006;
+$secondary-text-color-disabled: #bbb;//#00C;
+$secondary-text-color-disabled-active: #999;//#009;
+$secondary-text-color-disabled-inactive: #aaa;//#00A;
+
+// Sub label text
+$tertiary-text-color: #aaa;//#90f;
+// Heading text
+$header-text-color: #444;//#f00;
+
+$text-color-warning: #AD1625;
+$text-color-green: #3a3;
+
+$primary-border-color: #bbbbbb;//#f00;
+$secondary-border-color: #dddddd;//#0f0;
+$tertiary-border-color: #ccc;//#00f;
+
+$form-background: $secondary-background;
+
+$form-placeholder-color: $tertiary-text-color;
+$form-text-color: $primary-text-color;
+$form-text-color-disabled: $secondary-text-color-disabled;
 $form-input-focus-color:  rgba(85,150,230,0.8);
-$form-input-border-color:  #ccc;
-$form-input-border-selected-color:  #aaa;
+$form-input-border-color:  $tertiary-border-color;
+$form-input-border-selected-color:  #aaa;//#f0f;
+$form-input-border-error-color: rgb(214, 97, 95);
+$form-input-background: $secondary-background;
+$form-input-background-disabled: $secondary-background-disabled;
+$form-button-background: $secondary-background-selected;
+
+$form-tips-background: #ffe;
+
+
+$text-editor-color: #4D4D4C;//#00f;
+$text-editor-background: $secondary-background;
+$text-editor-color-disabled: $secondary-text-color-inactive;
+$text-editor-background-disabled: $secondary-background-disabled;
+$text-editor-gutter-background: #f6f6f6;//#ee0;
+$text-editor-gutter-color: #777;//#00e;
+$text-editor-gutter-active-line-background: #dcdcdc;//#dd0;
+$text-editor-active-line-background: #efefef;//#ee0;
+$text-editor-selection-background: #D6D6D6;//#e0e;
+
+$event-log-background: #444;
+$event-log-color: #dd9;
+$event-log-active-line-background: #333;
+$event-log-selection-background: #999;
+
+
+
+
+$list-item-color: $primary-text-color;
+$list-item-background: $secondary-background;
+$list-item-background-disabled: $secondary-background-inactive;
+$list-item-background-hover: $secondary-background-hover;
+$list-item-background-selected: $secondary-background-selected;
+$list-item-border-selected: $secondary-text-color-selected;
+
+$tab-text-color-active: $header-text-color;
+$tab-text-color-inactive: $secondary-text-color-inactive;
+$tab-text-color-disabled-active: $secondary-text-color-disabled-active;
+$tab-text-color-disabled-inactive: $secondary-text-color-disabled-inactive;
+
+$tab-badge-color: $tertiary-text-color;
+$tab-background: $secondary-background;
+$tab-background-active: $secondary-background;
+$tab-background-selected: $secondary-background-selected;
+$tab-background-inactive: $secondary-background-inactive;
+$tab-background-hover: $secondary-background-hover;
+
+$palette-header-background: $primary-background;
+$palette-header-color: $header-text-color;
+$palette-content-background: $secondary-background;
+
+
+$workspace-button-background: $secondary-background;
+$workspace-button-background-hover: $secondary-background-hover;
+$workspace-button-background-active: $secondary-background-selected;
+
+$workspace-button-color: $secondary-text-color;
+$workspace-button-color-disabled: $secondary-text-color-disabled;
+$workspace-button-color-focus: $secondary-text-color-focus;
+$workspace-button-color-hover: $secondary-text-color-hover;
+$workspace-button-color-active: $secondary-text-color-active;
+$workspace-button-color-selected: $secondary-text-color-selected;
+
+$workspace-button-color-primary: #eee;
+$workspace-button-background-primary: #AD1625;
+$workspace-button-background-primary-hover: #6E0A1E;
+
+$workspace-button-color-focus-outline: $form-input-border-color;
+
+$shade-color: rgba(160,160,160,0.5);
+
+
+$popover-background: #333;
+$popover-color: #eee;
+$popover-button-border-color: #bbb;
+$popover-button-border-color-hover: #666;
+
+
+
+$diff-text-header-color: $secondary-text-color;
+$diff-text-header-background: #ffd;
+$diff-text-header-background-hover: #ffc;
+$diff-state-added: #009900;
+$diff-state-deleted: #f80000;
+$diff-state-changed: #f89406;
+$diff-state-changed-background: #fff2e1;
+$diff-state-unchanged: #bbb;
+$diff-state-unchanged-background: #fff;
+
+$diff-state-conflicted: purple;
+$diff-state-moved: #3f81b3;
+$diff-state-conflict: #9b45ce;
+$diff-state-conflict-background: #ffdad4;
+
+$diff-state-added-background: #e7ffe3;
+$diff-state-added-border: #b8daad;
+$diff-state-added-header-background: #c0f6c0;
+$diff-state-added-header-border: #aaeeaa;
+
+$diff-state-deleted-background: #ffe1e1;
+$diff-state-deleted-border: #e4bcbc;
+$diff-state-deleted-header-background: #ffcccc;
+$diff-state-deleted-header-border: #eebbbb;
+
+$diff-merge-header-color: #800080;
+$diff-merge-header-background: #e5f9ff;
+$diff-merge-header-border-color: #b2edff;
+
+$menuBackground: $primary-background;
+$menuDivider: $secondary-border-color;
+$menuColor: $primary-text-color;
+$menuActiveColor: $secondary-text-color-active;
+$menuActiveBackground: $secondary-background-hover;
+$menuDisabledColor: $secondary-text-color-disabled;
+$menuHoverColor: $secondary-text-color-hover;
+$menuHoverBackground: $secondary-background-hover;
+$menuCaret: $tertiary-text-color;
+
+$view-navigator-background: rgba(245,245,245,0.8);
+
+$view-lasso-stroke: #ff7f0e;
+$view-lasso-fill: rgba(20,125,255,0.1);
+
+$view-background: $secondary-background;
+$view-grid-color: #eee;
+
+$node-label-color: #333;
+$node-border: #999;
+$node-border-unknown: #f33;
+$node-border-placeholder: #aaa;
+$node-background-placeholder: #eee;
+
+$node-port-background: #d9d9d9;
+$node-port-background-hover: #eee;
+$node-icon-color: #fff;
+$node-icon-background-color: rgba(0,0,0,0.05);
+$node-icon-background-color-fill: #000;
+$node-icon-background-color-opacity: 0.05;
+$node-icon-border-color: #000;
+$node-icon-border-color-opacity: 0.1;
+
+
+$node-link-port-background: #eee;
+
+$node-status-error-border: rgb(145, 16, 2);
+$node-status-error-background: rgb(255, 102, 0);
+$node-status-changed-border: rgb(28, 102, 140);
+$node-status-changed-background: rgb(0, 188, 255);
+
+$node-status-colors: (
+    red: #c00,
+    green: #5a8,
+    yellow: #F9DF31,
+    blue: #53A3F3,
+    grey: #d3d3d3
+);
 
-$list-item-color: #666;
-$list-item-background-hover: #f3f3f3;
-$list-item-background-active: #efefef;
-$list-item-background-selected: #eee;
 
 $node-selected-color: #ff7f0e;
 $port-selected-color: #ff7f0e;
+
 $link-color: #888;
 $link-link-color: #ccc;
 $link-link-active-color: #ff7f0e;
 $link-subflow-color: #bbb;
 $link-unknown-color: #f00;
 
-$primary-border-color: #bbbbbb;
-$secondary-border-color: #dddddd;
+$clipboard-textarea-background: #F3E7E7;
 
-$tab-background-active: #fff;
-$tab-background-selected: #f9f9f9;
-$tab-background-inactive: #f0f0f0;
-$tab-background-hover: #ddd;
 
-$palette-header-background: #f3f3f3;
+$deploy-button-color: #eee;
+$deploy-button-color-active: #ccc;
+$deploy-button-color-disabled: #999;
+$deploy-button-background: #8C101C;
+$deploy-button-background-hover: #6E0A1E;
+$deploy-button-background-active: #4C0A17;
+$deploy-button-background-disabled: #444;
+$deploy-button-background-disabled-hover: #555;
 
-$workspace-button-background: #fff;
-$workspace-button-background-hover: #ddd;
-$workspace-button-background-active: #efefef;
-$workspace-button-color: #888;
-$workspace-button-color-disabled: #ccc;
-$workspace-button-color-focus: #999;
-$workspace-button-color-hover: #666;
-$workspace-button-color-active: #666;
-$workspace-button-color-selected: #AAA;
 
-$workspace-button-toggle-color: #999;
-$workspace-button-toggle-color-selected: #888;
-$workspace-button-toggle-color-disabled: #ddd;
+$header-background: #000;
+$header-button-background-active: #121212;
+$header-menu-color: #C7C7C7;
+$header-menu-color-disabled: #666;
+$header-menu-heading-color: #fff;
+$header-menu-sublabel-color: #aeaeae;
+$header-menu-background: #121212;
+$header-menu-item-hover: #323232;
+$header-menu-item-border-active: #777677;
+$headerMenuItemDivider: #464646;
+$headerMenuCaret: #C7C7C7;
 
-$workspace-button-color-focus-outline: rgba(85,150,230,0.2);
+$vcCommitShaColor: #c38888;
 
-$typedInput-button-background: #efefef;
-$typedInput-button-background-hover: #ddd;
-$typedInput-button-background-active: #ddd;
+$info-text-code-color: #AD1625;
+$info-text-link-color: #0088cc;
 
-$editor-button-color-primary: #eee;
-$editor-button-background-primary: #AD1625;
-$editor-button-background-primary-hover: #6E0A1E;
-$editor-button-color: #999;
-$editor-button-background: #fff;
+$dnd-background: rgba(0,0,0,0.3);
+$dnd-color: #fff;
 
-$shade-color: rgba(160,160,160,0.5);
+$notification-border-default: #325C80;
+$notification-border-success: #4B8400;
+$notification-border-warning: #D74108;
+$notification-border-error: $text-color-warning;
 
-$popover-background: #333;
-$popover-color: #eee;
+$debug-message-background: $secondary-background;
+$debug-message-background-hover: $secondary-background-selected;
+
+$debug-message-text-color: #333;
+$debug-message-text-color-meta: #a66;
+$debug-message-text-color-object-key: #792e90;
+$debug-message-text-color-msg-type-other: #2033d6;
+$debug-message-text-color-msg-type-string: #b72828;
+$debug-message-text-color-msg-type-null: #666;
+$debug-message-text-color-msg-type-meta: #666;
+$debug-message-text-color-msg-type-number: #2033d6;
+
+$debug-message-border: #eee;
+$debug-message-border-hover: #999;
+$debug-message-border-warning: #ffdf9d;
+$debug-message-border-error: #f99;
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/debug.scss b/packages/node_modules/@node-red/editor-client/src/sass/debug.scss
index 456ef2559..45edf9eea 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/debug.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/debug.scss
@@ -14,16 +14,17 @@
  * limitations under the License.
  **/
 
-.debug-window {
+.red-ui-debug-window {
     padding:0;
     margin:0;
-    background: #fff;
+    background: $secondary-background;
     line-height: 20px;
+    .red-ui-debug-msg-payload {
+        font-size: 14px;
+    }
 }
-.debug-window .debug-message-payload {
-    font-size: 14px;
-}
-.debug-content {
+
+.red-ui-debug-content {
     position: absolute;
     top: 43px;
     bottom: 0px;
@@ -31,234 +32,216 @@
     right: 0px;
     overflow-y: scroll;
 }
-.debug-filter-box {
+.red-ui-debug-filter-box {
     position:absolute;
     top: 42px;
     left: 0px;
     right: 0px;
     z-index: 20;
-    background: #f9f9f9;
+    background: $tertiary-background;
     padding: 10px;
-    border-bottom: 1px solid #ddd;
-    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
+    border-bottom: 1px solid $secondary-border-color;
+    box-shadow: 0 2px 6px $shadow;
 }
-.debug-filter-row {
+.red-ui-debug-filter-row {
     .red-ui-nodeList {
         margin: 10px 0;
     }
 }
 
-.debug-message {
+.red-ui-debug-msg {
     position: relative;
-    border-bottom: 1px solid #eee;
-    border-left: 8px solid #eee;
-    border-right: 8px solid #eee;
+    border-bottom: 1px solid $debug-message-border;
+    border-left: 8px solid $debug-message-border;
+    border-right: 8px solid $debug-message-border;
     padding: 2px;
-    &>.debug-message-meta .debug-message-tools {
+    &>.red-ui-debug-msg-meta .red-ui-debug-msg-tools {
         display: none;
     }
 
-    &.debug-message-hover {
-        border-right-color: #999;
-        &>.debug-message-meta .debug-message-tools {
+    &.red-ui-debug-msg-hover {
+        border-right-color: $debug-message-border-hover;
+        &>.red-ui-debug-msg-meta .red-ui-debug-msg-tools {
             display: inline-block;
         }
     }
 }
-.debug-message-row {
-    .debug-message-tools-pin {
+.red-ui-debug-msg-row {
+    .red-ui-debug-msg-tools-pin {
         display: none;
     }
-    &.debug-message-row-pinned .debug-message-tools-pin {
+    &.red-ui-debug-msg-row-pinned .red-ui-debug-msg-tools-pin {
         display: inline-block;
     }
     &:hover {
-        background: #f3f3f3;
-        &>.debug-message-tools {
-            .debug-message-tools-copy {
+        background: $debug-message-background-hover;
+        &>.red-ui-debug-msg-tools {
+            .red-ui-debug-msg-tools-copy {
                 display: inline-block;
             }
-            .debug-message-tools-pin {
+            .red-ui-debug-msg-tools-pin {
                 display: inline-block;
             }
-            .debug-message-tools-other {
+            .red-ui-debug-msg-tools-other {
                 display: inline-block;
             }
         }
     }
 }
-.debug-message-meta .debug-message-tools {
-    .editor-button-small {
+.red-ui-debug-msg-meta .red-ui-debug-msg-tools {
+    .red-ui-button-small {
         font-size: 11px;
     }
 }
-.debug-message-tools {
+.red-ui-debug-msg-tools {
     .button-group:not(:last-child) {
         margin-right: 3px;
     }
-    .editor-button-small {
+    .red-ui-button-small {
         height: 16px;
         line-height: 14px;
         font-size: 8px;
         border-radius: 1px;
         padding: 0 3px;
         min-width: 18px;
-        i.fa-terminal {
-            // terminal icon is a bit thin, so darken its color for better contrast
-            color: darken($editor-button-color, 30%) !important;
-        }
-        &.selected {
-            color: darken($workspace-button-color-selected, 10%) !important;
-            background: darken($workspace-button-background-active,10%);
-        }
     }
 }
 
-.debug-message-meta {
-    background: #fff;
+.red-ui-debug-msg-meta {
+    background: $debug-message-background;
     font-size: 11px;
-    color: #707070;
+    color: $secondary-text-color-inactive;
 }
-.debug-message-date {
+.red-ui-debug-msg-date {
     padding: 1px 5px 1px 1px;
 }
-.debug-message-topic {
+.red-ui-debug-msg-topic {
     display: block;
-    color: #a66;
+    color: $debug-message-text-color-meta;
 }
-.debug-message-name {
+.red-ui-debug-msg-name {
     padding: 1px 5px;
-    color: #707070;
+    color: $secondary-text-color-inactive;
 }
-.debug-message-tools {
+.red-ui-debug-msg-tools {
     position: absolute;
     top: 3px;
     right: 1px;
-    .debug-message-tools-copy {
+    .red-ui-debug-msg-tools-copy {
         display: none;
     }
-    .debug-message-tools-other {
+    .red-ui-debug-msg-tools-other {
         display: none;
     }
 }
-.debug-message-payload {
+.red-ui-debug-msg-payload {
     display: block;
     padding: 2px;
-    background: #fff;
+    background: $debug-message-background;
+    font-family: $monospace-font;
+    font-size: 13px !important;
 }
-.debug-message-level-log {
-    border-left-color: #eee;
-    border-right-color: #eee;
+.red-ui-debug-msg-level-log {
+    border-left-color: $debug-message-border;
+    border-right-color: $debug-message-border;
 }
-.debug-message-level-30 {
-    border-left-color: #ffdf9d;
-    border-right-color: #ffdf9d;
+.red-ui-debug-msg-level-30 {
+    border-left-color: $debug-message-border-warning;
+    border-right-color: $debug-message-border-warning;
 }
-.debug-message-level-20 {
-    border-left-color: #f99;
-    border-right-color: #f99;
+.red-ui-debug-msg-level-20 {
+    border-left-color: $debug-message-border-error;
+    border-right-color: $debug-message-border-error;
 }
-.debug-message-object-entry {
+.red-ui-debug-msg-object-entry {
     position: relative;
     padding-left: 15px;
 }
-.debug-message-element {
-    color: #333;
-    font-family: Menlo, monospace;
-    font-size: 13px !important;
+.red-ui-debug-msg-element {
+    color: $debug-message-text-color;
     line-height: 1.3em;
 }
-.debug-message-object-key {
-    color: #792e90;
+.red-ui-debug-msg-object-key {
+    color: $debug-message-text-color-object-key;
 }
-.debug-message-object-value {
+.red-ui-debug-msg-object-value {
 
 }
-.debug-message-object-handle {
-    color: #666;
+.red-ui-debug-msg-object-handle {
+    color: $secondary-text-color;
     font-size: 1em;
     width: 1em;
     text-align: center;
     transition: transform 0.1s ease-in-out;
     transform: rotate(90deg);
 }
-.debug-message-element:not(.debug-message-top-level)>.debug-message-expandable>.debug-message-object-handle {
+.red-ui-debug-msg-element:not(.red-ui-debug-msg-top-level)>.red-ui-debug-msg-expandable>.red-ui-debug-msg-object-handle {
     margin-left: -1em;
 }
-.debug-message-object-entry>.debug-message-expandable>.debug-message-object-handle {
+.red-ui-debug-msg-object-entry>.red-ui-debug-msg-expandable>.red-ui-debug-msg-object-handle {
     margin-left: -1em;
 }
-.debug-message-object-entry.collapsed>span>.debug-message-object-handle {
+.red-ui-debug-msg-object-entry.collapsed>span>.red-ui-debug-msg-object-handle {
     transform: rotate(0deg);
 }
-.debug-message-element.collapsed>span>.debug-message-object-handle {
+.red-ui-debug-msg-element.collapsed>span>.red-ui-debug-msg-object-handle {
     transform: rotate(0deg);
 }
-.debug-message-object-entry.collapsed > .debug-message-object-entry {
+.red-ui-debug-msg-object-entry.collapsed > .red-ui-debug-msg-object-entry {
     display:none;
 }
-.debug-message-element.collapsed .debug-message-object-entry {
+.red-ui-debug-msg-element.collapsed .red-ui-debug-msg-object-entry {
     display:none;
 }
-.debug-message-element:not(.collapsed)>.debug-message-expandable>.debug-message-object-value>.debug-message-object-header {
+.red-ui-debug-msg-element:not(.collapsed)>.red-ui-debug-msg-expandable>.red-ui-debug-msg-object-value>.red-ui-debug-msg-object-header {
     display:none;
 }
-.debug-message-element.collapsed .debug-message-buffer-opts {
+.red-ui-debug-msg-element.collapsed .red-ui-debug-msg-buffer-opts {
     display: none;
 }
-.debug-message-element.collapsed .debug-message-object-type-header {
+.red-ui-debug-msg-element.collapsed .red-ui-debug-msg-object-type-header {
     display:none;
 }
-.debug-message-object-entry pre {
-    font-family: Menlo, monospace;
+.red-ui-debug-msg-object-entry pre {
+    font-family: $monospace-font;
     font-size: 13px;
     line-height: 1.2em;
     margin: 0 0 0 -1em;
 }
 
-.debug-message-type-other { color: #2033d6; }
-.debug-message-type-string { color: #b72828; }
-.debug-message-type-null { color: #666; font-style: italic;}
-.debug-message-type-meta { color: #666; font-style: italic;}
-.debug-message-type-number { color: #2033d6; };
-.debug-message-type-number-toggle { cursor: pointer;}
+.red-ui-debug-msg-type-other { color: $debug-message-text-color-msg-type-other; }
+.red-ui-debug-msg-type-string { color: $debug-message-text-color-msg-type-string; }
+.red-ui-debug-msg-type-null { color: $debug-message-text-color-msg-type-null; font-style: italic;}
+.red-ui-debug-msg-type-meta { color: $debug-message-text-color-msg-type-meta; font-style: italic;}
+.red-ui-debug-msg-type-number { color: $debug-message-text-color-msg-type-number; };
+.red-ui-debug-msg-type-number-toggle { cursor: pointer;}
 
-.debug-message-row {
+.red-ui-debug-msg-row {
     display: block;
     padding: 4px 2px 2px;
     position: relative;
-    &.debug-message-row-pinned {
-        background: #f6f6f6;
+    &.red-ui-debug-msg-row-pinned {
+        background: $list-item-border-selected;
     }
 }
-.debug-message-expandable {
+.red-ui-debug-msg-expandable {
     cursor: pointer;
 }
-.debug-message-expandable:hover .debug-message-object-handle {
-    color: #b72828 !important;
+.red-ui-debug-msg-expandable:hover .red-ui-debug-msg-object-handle {
+    color:$secondary-text-color-hover;
 }
 
-.debug-message-buffer-opts a {
-    font-size: 9px;
-    color: #bbb;
-    border: 1px solid #bbb;
-    border-radius: 2px;
-    padding: 2px 5px;
+.red-ui-debug-msg-buffer-opts {
     margin-left: 5px;
 }
-.debug-message-buffer-opts a:hover {
-    text-decoration: none;
-    color: #999;
-    border: 1px solid #999;
-    background: #f3f3f3;
-}
-.debug-message-buffer-raw > .debug-message-string-rows {
+
+.red-ui-debug-msg-buffer-raw > .red-ui-debug-msg-string-rows {
     display: none;
 }
-.debug-message-buffer-string > .debug-message-array-rows {
+.red-ui-debug-msg-buffer-string > .red-ui-debug-msg-array-rows {
     display: none;
 }
-.debug-message-type-string-swatch {
+.red-ui-debug-msg-type-string-swatch {
     display: inline-block;
     width: 1.1em;
     height: 0.9em;
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/diff.scss b/packages/node_modules/@node-red/editor-client/src/sass/diff.scss
index 0a46364c6..a8b16ca11 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/diff.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/diff.scss
@@ -15,7 +15,7 @@
  **/
 
 
-.node-dialog-view-diff-panel {
+.red-ui-diff-panel {
     padding: 5px;
     padding-top: 30px;
     position: relative;
@@ -23,11 +23,11 @@
     .red-ui-editableList-container {
         border-radius:1px;
         padding:0;
-        background: #f9f9f9;
+        background: $tertiary-background;
     }
-    .node-dialog-view-diff-diff {
+    .red-ui-diff-list {
         li {
-            background: #f9f9f9;
+            background: $tertiary-background;
             padding: 0px;
             border: none;
             min-height: 0;
@@ -38,7 +38,7 @@
         // padding-bottom: 5px;
     }
 }
-.node-diff-container {
+.red-ui-diff-container {
     position: absolute;
     top: 40px;
     right:0;
@@ -47,7 +47,7 @@
     overflow-y: scroll;
 }
 
-.node-dialog-view-diff-headers {
+.red-ui-diff-panel-headers {
     position: absolute;
     left:232px;
     right:12px;
@@ -62,7 +62,7 @@
         white-space: nowrap;
         text-overflow: ellipsis;
         width: 50%;
-        background: #f9f9f9;
+        background: $tertiary-background;
         text-align: center;
         border-top: 1px solid $secondary-border-color;
         border-color:$secondary-border-color;
@@ -73,35 +73,35 @@
     }
 }
 
-.node-diff-toolbar {
+.red-ui-diff-dialog-toolbar {
     box-sizing: border-box;
-    color: #666;
+    color: $secondary-text-color;
     text-align: right;
     padding: 8px 10px;
-    background: #f3f3f3;
+    background: $primary-background;
     border-bottom: 1px solid $secondary-border-color;
     white-space: nowrap;
 }
-.node-diff-tab {
-    background: #fff;
-    border: 1px solid #ddd;
+.red-ui-diff-list-flow {
+    background: $secondary-background;
+    border: 1px solid $secondary-border-color;
     border-radius: 1px;
     overflow: hidden;
 
     &.collapsed {
-        .node-diff-tab-title .node-diff-chevron {
+        .red-ui-diff-list-flow-title .red-ui-diff-list-chevron {
             transform: rotate(-90deg);
         }
-        .node-diff-node-entry {
+        .red-ui-diff-list-node {
             display: none;
         }
     }
 }
-.node-diff-tab-stats {
+.red-ui-diff-list-flow-stats {
     font-size: 0.9em;
 }
 
-.node-diff-chevron {
+.red-ui-diff-list-chevron {
     display: inline-block;
     width: 15px;
     text-align: center;
@@ -109,30 +109,30 @@
     transition: transform 0.1s ease-in-out;
 
 }
-.node-diff-node-entry {
+.red-ui-diff-list-node {
     margin-left: 20px;
     font-size: 0.9em;
 
     &:first-child {
-        border-top: 1px solid $secondary-border-color;
+        border-top: 1px solid $tertiary-border-color;
     }
     &:not(:last-child) {
-        border-bottom: 1px solid $secondary-border-color;
+        border-bottom: 1px solid $tertiary-border-color;
     }
 
     &.collapsed {
-        .node-diff-chevron {
+        .red-ui-diff-list-chevron {
             transform: rotate(-90deg);
         }
-        .node-diff-node-entry-properties {
+        .red-ui-diff-list-node-properties {
             display: none;
         }
     }
     &:not(.collapsed) {
-        .node-diff-node-entry-cell:not(:first-child) {
+        .red-ui-diff-list-node-cell:not(:first-child) {
             //display: none;
         }
-        .node-diff-node-entry-cell:first-child {
+        .red-ui-diff-list-node-cell:first-child {
             //width: 100%
         }
     }
@@ -150,7 +150,7 @@
         width: 100%;
     }
     td, th {
-        border-top: 1px solid #f3f3f3;
+        border-top: 1px solid $secondary-border-color;
         border-left: 1px solid $secondary-border-color;
         &:first-child {
             border-left: none;
@@ -166,18 +166,18 @@
             overflow:hidden;
         }
         &:hover {
-            background: #f9f9f9;
+            background: $secondary-background-selected;
         }
 
     }
 
     td  {
-        .node-diff-status {
+        .red-ui-diff-status {
             margin-left: 0;
         }
     }
-    tr:not(.node-diff-property-header) {
-        .node-diff-status {
+    tr:not(.red-ui-diff-list-header) {
+        .red-ui-diff-status {
             width: 12px;
             margin-left: 0;
             margin-top: 0;
@@ -186,8 +186,8 @@
         }
     }
 }
-.node-diff-three-way {
-    .node-diff-node-entry-cell {
+.red-ui-diff-three-way {
+    .red-ui-diff-list-node-cell {
         width: calc((100% - 220px) / 2);
         &:first-child {
             width: 220px;
@@ -197,8 +197,8 @@
         width:50%;
     }
 
-    .node-diff-node-entry {
-        .node-diff-node-entry-cell {
+    .red-ui-diff-list-node {
+        .red-ui-diff-list-node-cell {
             width: calc((100% + 20px - 220px) / 2);
             &:first-child {
                 width: 200px;
@@ -208,131 +208,113 @@
     }
 }
 
-.node-diff-column {
-    display:inline-block;
-    height:100%;
-    width:50%;
-    box-sizing: border-box;
-    white-space:nowrap;
-    overflow: hidden;
-    &:first-child {
-        border-right: 1px solid $secondary-border-color
-    }
-}
-
-.node-diff-tab-title {
+.red-ui-diff-list-flow-title {
     cursor: pointer;
     padding: 0;
-    // background: #f6f6f6;
     &:hover {
-        background: #f9f9f9;
+        background: $secondary-background-selected;
     }
 }
-.node-diff-tab-title-meta {
+.red-ui-diff-list-flow-title-meta {
     vertical-align: middle;
     display: inline-block;
     padding-top: 2px;
 }
-.node-diff-node-entry-header {
+.red-ui-diff-list-node-header {
     cursor: pointer;
     &:hover {
-        background: #f9f9f9;
+        background: $secondary-background-selected;
     }
 }
-.node-diff-node-entry-node {
+.red-ui-diff-list-node-icon {
     vertical-align: middle;
     display: inline-block;
     margin: 5px;
     width: 18px;
     height: 15px;
-    background: #ddd;
+    background: $form-input-background;
     border-radius: 2px;
-    border: 1px solid #999;
+    border: 1px solid $node-border;
     background-position: 5% 50%;
     background-repeat: no-repeat;
     background-size: contain;
     position: relative;
 
-    .palette_icon {
+    .red-ui-palette-icon {
         background-position: 49% 50%;
         width: 15px;
     }
-    .palette_icon_fa {
+    .red-ui-palette-icon-fa {
         position: relative;
         top: -2.5px;
         left: 0px;
     }
-    .palette_icon_container {
+    .red-ui-palette-icon-container {
         width: 18px;
     }
 }
-.node-diff-tab-empty {
-    .node-diff-chevron i {
+.red-ui-diff-list-flow-empty {
+    .red-ui-diff-list-chevron i {
         display: none;
     }
-    .node-diff-tab-title {
+    .red-ui-diff-list-flow-title {
         cursor: default;
         &:hover {
             background: none;
         }
     }
 }
-.node-diff-node-deleted {
-    //background: #fadddd;
+.red-ui-diff-status-deleted {
     cursor: default !important;
-    .node-diff-status {
-        color: #f80000;
+    .red-ui-diff-status {
+        color: $diff-state-deleted;
     }
-    .node-diff-node-entry-node {
+    .red-ui-diff-list-node-node {
         opacity: 0.5;
     }
-    .node-diff-node-description {
+    .red-ui-diff-list-node-description {
         opacity: 0.5;
         text-decoration: line-through;
     }
 }
-.node-diff-node-added {
-    //background: #eefaee;
+.red-ui-diff-status-added {
     cursor: default !important;
-    .node-diff-status {
-        color: #009900;
+    .red-ui-diff-status {
+        color: $diff-state-added;
     }
 }
-.node-diff-node-moved {
-    //background: #eefaee;
-    .node-diff-status {
-        color: #3f81b3;
+.red-ui-diff-status-moved {
+    .red-ui-diff-status {
+        color: $diff-state-moved;
     }
 }
 
-.node-diff-node-changed {
-    //background: #fff2ca;
-    .node-diff-status {
-        color: #f89406;
+.red-ui-diff-status-changed {
+    .red-ui-diff-status {
+        color: $diff-state-changed;
     }
 }
-.node-diff-node-unchanged {
-    //background: #fff2ca;
-    .node-diff-status {
-        color: #bbb;
+.red-ui-diff-status-unchanged {
+    .red-ui-diff-status {
+        color: $diff-state-unchanged;
     }
 }
-.node-diff-node-conflict {
-    .node-diff-status {
-        color: #9b45ce;
+.red-ui-diff-status-conflict {
+    .red-ui-diff-status {
+        color: $diff-state-conflict;
     }
 }
-.node-diff-node-entry-title {
+.red-ui-diff-list-node-title {
     display: inline-block;
-    .node-diff-status {
+    .red-ui-diff-status {
         margin-left: 15px;
     }
 }
-.node-diff-node-entry-properties {
+.red-ui-diff-list-node-properties {
     margin: 0;
-    color: #666;
+    color: $primary-text-color;
 }
-.node-diff-status {
+.red-ui-diff-status {
     display: inline-block;
     height: 20px;
     margin-left: 5px;
@@ -341,12 +323,12 @@
     margin-bottom: 6px;
     text-align: center;
 }
-.node-diff-element {
+.red-ui-diff-list-element {
     display: inline-block;
     width: calc(100% - 20px);
 }
 
-.node-diff-node-description {
+.red-ui-diff-list-node-description {
     color: $form-text-color;
     margin-right: 5px;
     padding-top: 5px;
@@ -357,23 +339,15 @@
         clear: both;
     }
 }
-.node-diff-node-meta {
-    float: right;
-    //font-size: 0.9em;
-    color: #999;
-    margin-top: 7px;
-    margin-right: 10px;
-}
 
-.node-diff-count { color: #999}
-.node-diff-added { color: #009900}
-.node-diff-deleted { color: #f80000}
-.node-diff-changed { color: #f89406}
-.node-diff-unchanged { color: #bbb}
-.node-diff-conflicted { color: purple}
+.red-ui-diff-state-added { color: $diff-state-added; }
+.red-ui-diff-state-deleted { color: $diff-state-deleted; }
+.red-ui-diff-state-changed { color: $diff-state-changed; }
+.red-ui-diff-state-unchanged { color: $diff-state-unchanged; }
+.red-ui-diff-state-conflicted { color: $diff-state-conflicted; }
 
 
-.node-diff-node-entry-cell {
+.red-ui-diff-list-node-cell {
     display: inline-block;
     vertical-align: top;
     box-sizing: border-box;
@@ -385,35 +359,35 @@
     overflow: hidden;
     position: relative;
 }
-.node-diff-empty {
-    background: #f3f3f3;
+.red-ui-diff-empty {
+    background: $secondary-background-disabled;
     background: repeating-linear-gradient(
         20deg,
-        #fff, #fff 5px,
-        #f6f6f6 5px,
-        #f6f6f6 10px
+        $secondary-background, $secondary-background 5px,
+        $secondary-background-disabled 5px,
+        $secondary-background-disabled 10px
         );
 }
-.node-diff-node-entry-cell:first-child {
+.red-ui-diff-list-node-cell:first-child {
     border-left: none;
 }
-.node-diff-property-cell-label {
+.red-ui-diff-list-cell-label {
     margin-left: 20px;
     vertical-align: top;
     box-sizing: border-box;
     padding-left: 8px;
     width: 120px;
 }
-.node-diff-property-wires {
+.red-ui-diff-list-wires {
     display: inline-block;
-    .node-diff-node-entry-node {
+    .red-ui-diff-list-node-node {
         width: 18px;
         height: 15px;
     }
-    .palette_icon_container {
+    .red-ui-palette-icon-container {
         width: 18px;
     }
-    .palette_icon {
+    .red-ui-palette-icon {
         width: 15px;
     }
     ul,li,ol {
@@ -436,91 +410,84 @@
             width: 30px;
             text-align: center;
         }
-        & > li:not(:last-child) {
-            border-bottom: 1px solid #999;
-        }
     }
 
 }
-.node-diff-node-props .node-diff-node-entry-cell:first-child {
+.red-ui-diff-list-node-props .red-ui-diff-list-node-cell:first-child {
     padding: 6px 0px;
-    span:not(.node-diff-chevron) {
+    span:not(.red-ui-diff-list-chevron) {
         margin-left: 5px;
     }
 
 }
-.node-diff-property-cell {
-    // vertical-align: top;
-    // display:inline-block;
-    //
-    // box-sizing: border-box;
-    // padding: 1px 5px;
-    //min-height: 30px;
-
-    &.node-diff-node-changed {
-        background: #fff2e1 !important;
+.red-ui-diff-list-cell {
+    .red-ui-debug-msg-row:hover {
+        background: none;
     }
-    &.node-diff-node-conflict {
-        background: #ffdad4 !important;
+    &.red-ui-diff-status-changed {
+        background: $diff-state-changed-background;
+    }
+    &.red-ui-diff-status-conflict {
+        background: $diff-state-conflict-background;
     }
 }
 
-.node-diff-selectbox {
+label.red-ui-diff-selectbox {
     position: absolute;
     top:0;
     right:0;
     bottom:0;
     width: 35px;
     text-align: center;
-    border-left: 1px solid #eee;
+    border-left: 1px solid $secondary-border-color;
     margin:0;
-    input {
+    input[type="radio"] {
         margin-top: 8px;
     }
 
     &:hover {
-        background: #f3f3f3;
+        background: $secondary-background-hover;
     }
 }
 
-.node-diff-node-entry-conflict.node-diff-select-remote {
-    .node-diff-node-remote {
-        background: #e7ffe3;
+.red-ui-diff-list-node-conflict.red-ui-diff-select-remote {
+    .red-ui-diff-list-node-remote {
+        background: $diff-state-added-background;
         label {
-            border-left-color: #b8daad;
+            border-left-color: $diff-state-added-border;
         }
     }
-    .node-diff-node-local {
-        background: #ffe1e1;
+    .red-ui-diff-list-node-local {
+        background: $diff-state-deleted-background;
         label {
-            border-left-color: #e4bcbc;
+            border-left-color: $diff-state-deleted-border;
         }
     }
 }
-.node-diff-node-entry-conflict.node-diff-select-local {
-    .node-diff-node-local {
-        background: #e7ffe3;
+.red-ui-diff-list-node-conflict.red-ui-diff-select-local {
+    .red-ui-diff-list-node-local {
+        background: $diff-state-added-background;
         label {
-            border-left-color: #b8daad;
+            border-left-color: $diff-state-added-border;
         }
     }
-    .node-diff-node-remote {
-        background: #ffe1e1;
+    .red-ui-diff-list-node-remote {
+        background: $diff-state-deleted-background;
         label {
-            border-left-color: #e4bcbc;
+            border-left-color: $diff-state-deleted-border;
         }
     }
 }
 
 
-ul.node-dialog-configm-deploy-list {
+ul.red-ui-deploy-dialog-confirm-list {
     font-size: 0.9em;
     width: 400px;
     margin: 10px auto;
     text-align: left;
 }
 
-.node-dialog-confirm-conflict-row {
+.red-ui-deploy-dialog-confirm-conflict-row {
     img {
         vertical-align:middle;
         height: 30px;
@@ -532,6 +499,12 @@ ul.node-dialog-configm-deploy-list {
         font-size: 30px;
         width: 30px;
         margin-right: 10px;
+        &.fa-check {
+            color: $text-color-green;
+        }
+        &.fa-exclamation {
+            color: $secondary-text-color;
+        }
     }
     div {
         vertical-align: middle;
@@ -540,21 +513,21 @@ ul.node-dialog-configm-deploy-list {
     }
 }
 
-#node-diff-toolbar-resolved-conflicts .node-diff-status {
+#red-ui-diff-dialog-toolbar-resolved-conflicts .red-ui-diff-status {
     margin:0;
 }
-.node-diff-text-diff-button {
+.red-ui-diff-text-diff-button {
     float: right;
     margin: 2px 3px;
     line-height: 14px;
     height: 16px;
 
 }
-.node-text-diff {
+.red-ui-diff-text {
     height: 100%;
     overflow-y:auto;
 
-    table.node-text-diff-content {
+    table.red-ui-diff-text-content {
         margin: 10px;
         border: 1px solid $secondary-border-color;
         border-radius: 3px;
@@ -565,99 +538,100 @@ ul.node-dialog-configm-deploy-list {
             word-wrap: break-word;
         }
         td.lineno {
-            font-family: monospace;
+            font-family: $monospace-font;
             text-align: right;
-            color: #999;
-            background: #f6f6f6;
+            color: $tertiary-text-color;
+            background: $tertiary-background;
             padding: 1px 5px;
             &.added {
-                background: #c0f6c0;
+                background: $diff-state-added-header-background;
             }
             &.removed {
-                background: #ffcccc;
+                background: $diff-state-deleted-header-background;
             }
         }
         td.lineno:nth-child(3) {
             border-left: 1px solid $secondary-border-color;
         }
         td.linetext {
-            font-family: monospace;
+            font-family: $monospace-font;
             white-space: pre-wrap;
             padding: 1px 5px;
-            border-left: 1px solid #ccc;
+            border-left: 1px solid $tertiary-border-color;
             span.prefix {
                 width: 30px;
                 display: inline-block;
                 text-align: center;
-                color: #999;
+                color: $secondary-text-color;
             }
 
             &.added {
-                border-left-color: #aaeeaa
+                border-left-color: $diff-state-added-header-border;
             }
             &.removed {
-                border-left-color: #eebbbb
+                border-left-color: $diff-state-deleted-header-border;
             }
         }
         td.blank {
-            background: #f6f6f6;
+            background: $tertiary-background;
         }
         td.added {
-            background: #eefaee;
+            background: $diff-state-added-background;
         }
         td.removed {
-            background: #ffecec;
+            background: $diff-state-deleted-background;
         }
         tr.mergeHeader td {
-            color: #800080;
-            background: #e5f9ff;
+            color: $diff-merge-header-color;
+            background: $diff-merge-header-background;
             height: 26px;
             vertical-align: middle;
         }
         tr.mergeHeader-separator td {
-            color: #800080;
-            background: darken(#e5f9ff, 10%);
+            color: $diff-merge-header-color;
+            background: $diff-merge-header-border-color;
             height: 0px;
         }
         tr.mergeHeader-ours td {
-            border-top: 2px solid darken(#e5f9ff, 10%);
+            border-top: 2px solid $diff-merge-header-border-color;
         }
         tr.mergeHeader-theirs td {
-            border-bottom: 2px solid darken(#e5f9ff, 10%);
+            border-bottom: 2px solid $diff-merge-header-border-color;
         }
         td.unchanged {
-            color: #999;
+            background: $diff-state-unchanged-background;
+            color: $diff-state-unchanged;
         }
         tr.unchanged {
-            background: #fefefe;
+            background: $diff-state-unchanged-background;
         }
         tr.start-block {
-            border-top: 1px solid #f0f0f0;
+            border-top: 1px solid $secondary-border-color;
         }
         tr.end-block {
-            border-bottom: 1px solid #f0f0f0;
+            border-bottom: 1px solid $secondary-border-color;
         }
-        tr.node-text-diff-file-header td {
+        tr.red-ui-diff-text-file-header td {
             .filename {
-                font-family: monospace;
+                font-family: $monospace-font;
             }
-            background: #f3f3f3;
+            background: $primary-background;
             padding: 5px 10px 5px 0;
-            color: #333;
+            color: $primary-text-color;
             cursor: pointer;
-            i.node-diff-chevron {
+            i.red-ui-diff-list-chevron {
                 width: 30px;
             }
         }
-        tr.node-text-diff-file-header.collapsed {
-            td i.node-diff-chevron {
+        tr.red-ui-diff-text-file-header.collapsed {
+            td i.red-ui-diff-list-chevron {
                 transform: rotate(-90deg);
             }
         }
-        tr.node-text-diff-commit-header td {
-            background: #f3f3f3;
+        tr.red-ui-diff-text-commit-header td {
+            background: $primary-background;
             padding: 5px 10px;
-            color: #333;
+            color: $primary-text-color;
             h3 {
                 font-size: 1.4em;
                 margin: 0;
@@ -665,7 +639,7 @@ ul.node-dialog-configm-deploy-list {
             .commit-summary {
                 border-top: 1px solid $secondary-border-color;
                 padding-top: 5px;
-                color: #999;
+                color: $secondary-text-color;
             }
             .commit-body {
                 margin-bottom:15px;
@@ -674,21 +648,21 @@ ul.node-dialog-configm-deploy-list {
             }
         }
 
-        tr.node-text-diff-header > td:not(.flow-diff) {
-            font-family: monospace;
+        tr.red-ui-diff-text-header > td:not(.red-ui-diff-flow-diff) {
+            font-family: $monospace-font;
             padding: 5px 10px;
             text-align: left;
-            color: #666;
-            background: #ffd;
+            color: $secondary-text-color;
+            background: $diff-text-header-background;
             height: 30px;
             vertical-align: middle;
-            border-top: 1px solid #f0f0f0;
-            border-bottom: 1px solid #f0f0f0;
+            border-top: 1px solid $secondary-border-color;
+            border-bottom: 1px solid $secondary-border-color;
         }
-        tr.node-text-diff-expand td {
+        tr.red-ui-diff-text-expand td {
             cursor: pointer;
             &:hover {
-                background: #ffc;
+                background: $diff-text-header-background;
             }
         }
     }
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/dragdrop.scss b/packages/node_modules/@node-red/editor-client/src/sass/dragdrop.scss
index 7f3191682..1476cf890 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/dragdrop.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/dragdrop.scss
@@ -14,24 +14,26 @@
  * limitations under the License.
  **/
 
-#dropTarget {
+#red-ui-drop-target {
     position: absolute;
     top: 0; bottom: 0;
     left: 0; right: 0;
-    background: rgba(0,0,0,0.1);
+    background: $dnd-background;
     display:table;
     width: 100%;
     height: 100%;
     display: none;
     z-index:100;
-}
-#dropTarget div {
-    display: table-cell;
-    vertical-align: middle;
-    text-align: center;
-    font-size: 40px;
-    color: #fff;
-}
-#dropTarget div i {
-    font-size: 80px;
+    div {
+        pointer-events: none;
+        display: table-cell;
+        vertical-align: middle;
+        text-align: center;
+        font-size: 40px;
+        color: $dnd-color;
+        i {
+            pointer-events: none;
+            font-size: 80px;
+        }
+    }
 }
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/dropdownMenu.scss b/packages/node_modules/@node-red/editor-client/src/sass/dropdownMenu.scss
index 06fc8e6e4..b68c70394 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/dropdownMenu.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/dropdownMenu.scss
@@ -14,80 +14,159 @@
  * limitations under the License.
  **/
 
+.red-ui-menu-dropdown {
+    font-family: $primary-font;
+    font-size: $primary-font-size;
+    position: absolute;
+    top: 100%;
+    width: 200px;
+    left: 0;
+    z-index: 1000;
+    display: none;
+    float: left;
+    margin: 2px 0 0;
+    margin-left: 0px !important;
+    padding: 5px 0;
+    list-style: none;
+    background: $menuBackground;
+    border: 1px solid $secondary-border-color;
+    box-shadow: 0 5px 10px $shadow;
+
+    &.pull-right {
+        right: 0;
+        left: auto;
+    }
+
+    .red-ui-menu-divider {
+        height: 1px;
+        margin: 9px 1px;
+        overflow: hidden;
+        background-color: $menuDivider;
+    }
+    & > li > a {
+        display: block;
+        padding: 4px 0 4px 32px;
+        clear: both;
+        font-weight: normal;
+        line-height: 20px;
+        color: $menuColor;
+        white-space: normal !important;
+    }
+
+    & > .active > a,
+    & > .active > a:hover,
+    & > .active > a:focus {
+        color: $menuActiveColor;
+        text-decoration: none;
+        background-color: $menuActiveBackground;
+        outline: 0;
+    }
+
+    & > .disabled > a,
+    & > .disabled > a:hover,
+    & > .disabled > a:focus {
+        color: $menuDisabledColor;
+    }
+
+    & > .disabled > a:hover,
+    & > .disabled > a:focus {
+        text-decoration: none;
+        cursor: default;
+        background-color: transparent;
+        background-image: none;
+    }
+
+    a {
+        .fa {
+            width: 20px;
+            margin-left: -25px;
+            margin-top: 3px;
+            text-align: center;
+        }
+        .fa-check-square {
+            display: none;
+        }
+        .fa-square {
+            display: inline-block;
+        }
+        &.active {
+            .fa-check-square {
+                display: inline-block;
+            }
+            .fa-square {
+                display: none;
+            }
+        }
+    }
 
-.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus, .dropdown-submenu:hover>a, .dropdown-submenu:focus>a {
-    background: #999;
 }
 
-.dropdown-menu {
-    background: #f3f3f3;
-    border-color: $secondary-border-color;
-    &>li>a {
-        color: #444;
+.pull-right > .red-ui-menu-dropdown {
+  right: 0;
+  left: auto;
+}
+
+
+.red-ui-menu-dropdown > li > a:hover,
+.red-ui-menu-dropdown > li > a:focus,
+.red-ui-menu-dropdown-submenu:hover > a,
+.red-ui-menu-dropdown-submenu:focus > a {
+    color: $menuHoverColor;
+    text-decoration: none;
+    background-color: $menuHoverBackground;
+}
+
+.red-ui-menu-dropdown-submenu {
+    position: relative;
+    & > .red-ui-menu-dropdown {
+        top: 0;
+        left: 100%;
+        margin-top: -6px;
+        margin-left: -1px;
+    }
+    &:hover > .red-ui-menu-dropdown {
+      display: block;
+    }
+    & > a:after {
+      display: block;
+      float: right;
+      width: 0;
+      height: 0;
+      margin-top: 5px;
+      margin-right: -10px;
+      border-color: transparent;
+      border-left-color: $menuCaret;
+      border-style: solid;
+      border-width: 5px 0 5px 5px;
+      content: " ";
+    }
+    &.pull-left {
+        float: none;
+        & > .red-ui-menu-dropdown {
+            left: -100%;
+            margin-left: 10px;
+        }
     }
 }
 
-
-.dropdown-menu * .fa-check-square {
-    display: none;
-    color: #e0e0e0;
-    margin-left: -25px;
-    margin-top: 3px;
-}
-.dropdown-menu * a.active > .fa-check-square {
-    display: inline-block;
-}
-.dropdown-menu * .fa-square {
-    display: inline-block;
-    color: #e0e0e0;
-    margin-left: -25px;
-    margin-top: 3px;
-}
-.dropdown-menu * a.active > .fa-square {
+.red-ui-menu-dropdown-submenu>a:after {
     display: none;
 }
-
-
-.dropdown-menu>li.disabled>a:hover>[class^="icon-"] {
-    background-image: url("vendor/bootstrap/img/glyphicons-halflings.png") !important;
-}
-/** Fix for unreachable dropdown menu **/
-.dropdown-menu  {
-    border-radius: 0;
-    width: 200px !important;
-    margin-left: 0px !important;
-}
-.dropdown-menu > li > a > i {
-    width: 10px;
-    text-align: center;
-    margin-left: -8px;
-}
-.dropdown-menu > li > a {
-     padding-left: 38px ;
-     text-indent: -8px ;
-     white-space: normal !important;
-}
-
-.dropdown-submenu>a:after {
-    display: none;
-}
-.dropdown-submenu>a:before {
+.red-ui-menu-dropdown-submenu>a:before {
     display: block;
     float: left;
     width: 0;
     height: 0;
     margin-top: 5px;
     margin-left: -30px;
+    /* Caret Arrow */
     border-color: transparent;
-    border-right-color: #e0e0e0;
+    border-right-color: $menuCaret;
     border-style: solid;
     border-width: 5px 5px 5px 0;
     content: " ";
 }
 
-.dropdown-submenu.disabled > a:before {
-    border-right-color: #444;
-}
-.dropdown-submenu.pull-left>.dropdown-menu {
-    border-radius: 0;
+.red-ui-menu-dropdown-submenu.disabled > a:before {
+    border-right-color: $menuCaret;
 }
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/editor.scss b/packages/node_modules/@node-red/editor-client/src/sass/editor.scss
index 2d39cc108..d3f729a96 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/editor.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/editor.scss
@@ -15,7 +15,7 @@
  **/
 
 
-#editor-stack {
+#red-ui-editor-stack {
     position: absolute;
     margin: 0;
     top: 0;
@@ -24,7 +24,7 @@
     width: 0;
     z-index: 5;
 }
-.editor-tray {
+.red-ui-tray {
     position:absolute;
     margin: 0;
     top: 0;
@@ -32,37 +32,37 @@
     width: auto;
     right: -1000px;
     bottom: 0;
-    background: #fff;
+    background: $secondary-background;
     border-left: 1px solid $secondary-border-color;
     border-bottom: 1px solid $primary-border-color;
     box-sizing: content-box;
 }
-.editor-tray.open {
+.red-ui-tray.open {
     right: 0;
 }
-.editor-tray-body-wrapper {
+.red-ui-tray-body-wrapper {
     width: 100%;
     box-sizing: border-box;
     overflow: auto;
 }
-.editor-tray-body {
+.red-ui-tray-body {
     position: relative;
     box-sizing: border-box;
     padding: 0.1px; // prevent margin collapsing
-    .dialog-form,#dialog-form, #node-config-dialog-edit-form {
-        margin: 20px;
-        height: calc(100% - 40px);
-    }
+    // .dialog-form,#dialog-form, #node-config-dialog-edit-form {
+    //     margin: 20px;
+    //     height: calc(100% - 40px);
+    // }
 }
-.editor-tray-content {
+.red-ui-tray-content {
     overflow: auto;
     position: relative;
-    .palette_icon_fa {
+    .red-ui-palette-icon-fa {
         top: 6px;
         left: 4px;
     }
 }
-.editor-tray-header {
+.red-ui-tray-header {
     @include disable-selection;
     position: relative;
     box-sizing: border-box;
@@ -76,19 +76,29 @@
     }
 }
 
-.editor-tray-footer {
+.red-ui-tray-footer {
     @include component-footer;
     height: 35px;
+    font-size: 12px !important;
+    line-height: 35px;
+    vertical-align: middle;
 
     button {
         @include editor-button;
         padding: 3px 7px;
         font-size: 11px;
     }
-
+    .red-ui-tray-footer-left {
+        display:inline-block;
+        margin-right: 20px;
+        float:left;
+    }
+    .red-ui-tray-footer-right {
+        float: right;
+    }
 }
 
-.editor-tray-toolbar {
+.red-ui-tray-toolbar {
     text-align: right;
     padding: 6px;
 
@@ -100,11 +110,12 @@
     }
 }
 
-.editor-tray-titlebar {
+.red-ui-tray-titlebar {
+    color: $header-text-color;
     border-bottom: 1px solid $secondary-border-color;
     padding: 8px;
 }
-.editor-tray-breadcrumbs {
+.red-ui-editor ul.red-ui-tray-breadcrumbs {
     list-style-type: none;
     margin: 0;
     padding:0;
@@ -115,7 +126,7 @@
         margin:0;
 
         &:not(:last-child) {
-            color: $editor-button-color;
+            color: $workspace-button-color;
             font-weight: normal;
 
             &:after {
@@ -127,23 +138,24 @@
         }
     }
 }
-.editor-tray-resize-handle {
+.red-ui-tray-resize-handle {
     position: absolute;
     top: 0px;
     bottom: 0px;
     width: 7px;
     left: -9px;
-    background: $background-color url(images/grip.png) no-repeat 50% 50%;
+    background: $primary-background url(images/grip.png) no-repeat 50% 50%;
     cursor: col-resize;
     border-left: 1px solid $primary-border-color;
-    box-shadow: -1px 0 6px rgba(0,0,0,0.1);
+    box-shadow: -1px 0 6px $shadow;
 
-    &.editor-tray-resize-maximised {
-        background: $background-color;
+    &.red-ui-tray-resize-maximised {
+        background: $primary-background;
         cursor: default;
     }
 }
-.editor-tray-resize-button {
+a.red-ui-tray-resize-button,
+button.red-ui-tray-resize-button {
     @include workspace-button;
     display: block;
     height: 37px;
@@ -151,66 +163,63 @@
     border: none;
     border-bottom: 1px solid $secondary-border-color;
     margin: 0;
-    background: $background-color;
+    background: $primary-background;
     color: $workspace-button-color;
 }
-#palette-shade, #editor-shade, #header-shade, #sidebar-shade  {
-    @include shade;
-    z-index: 2;
-}
-#sidebar-shade  {
-    left: -8px;
-    top: -1px;
-    bottom: -1px;
-}
-#full-shade {
-    @include shade;
-    z-index: 15;
+
+.red-ui-editor .red-ui-tray {
+    .dialog-form, #dialog-form, #node-config-dialog-edit-form {
+        margin: 20px;
+        height: calc(100% - 40px);
+    }
 }
 
-.dialog-form,#dialog-form, #node-config-dialog-edit-form {
-    height: 100%;
-}
+.red-ui-editor,.red-ui-editor-dialog {
 
-.input-error {
-    border-color: rgb(214, 97, 95) !important;
-}
+    .dialog-form, #dialog-form, #node-config-dialog-edit-form {
+        margin: 0;
+        height:100%;
+    }
 
-.form-row {
-    clear: both;
-    color: $form-text-color;
-    margin-bottom:12px;
-}
-.form-row label {
-    display: inline-block;
-    width: 100px;
-}
-.form-row input, .form-row div[contenteditable="true"] {
-    width:70%;
-}
+    .input-error {
+        border-color: $form-input-border-error-color !important;
+    }
 
-.form-tips {
-    background: #ffe;
-    padding: 8px;
-    border-radius: 2px;
-    border: 1px solid $secondary-border-color;
-    max-width: 450px;
-}
-.form-tips code {
-    border: none;
-    padding: auto;
-}
-.form-tips a {
-    text-decoration: underline;
-}
+    .form-row {
+        clear: both;
+        color: $form-text-color;
+        margin-bottom:12px;
+    }
+    .form-row label {
+        display: inline-block;
+        width: 100px;
+    }
+    .form-row input, .form-row div[contenteditable="true"] {
+        width:70%;
+    }
+    .form-tips {
+        background: $form-tips-background;
+        padding: 8px;
+        border-radius: 2px;
+        border: 1px solid $secondary-border-color;
+        max-width: 450px;
+    }
+    .form-tips code {
+        border: none;
+        padding: auto;
+    }
+    .form-tips a {
+        text-decoration: underline;
+    }
 
-.form-warning {
-    border-color: #d6615f;
+    .form-warning {
+        border-color: $text-color-warning;
+    }
 }
 
 .node-text-editor {
     position: relative;
-    .node-text-editor-help {
+    .red-ui-editor-text-help {
         position: absolute;
         bottom: 0px;
         right: 1px;
@@ -220,20 +229,24 @@
         border-right: none;
     }
 }
-.node-text-editor-container {
-    border:1px solid #ccc;
+.red-ui-editor-text-container {
+    border:1px solid $tertiary-border-color;
     border-radius:5px;
     overflow: hidden;
-    font-size: 14px !important;
-    font-family: Menlo, Consolas, 'DejaVu Sans Mono', Courier, monospace !important;
+    font-size: $primary-font-size !important;
+    font-family: $monospace-font !important;
     height: 100%;
 
-    &.node-text-editor-container-toolbar {
+    &.red-ui-editor-text-container-toolbar {
         height: calc(100% - 40px);
     }
 }
 
-.editor-button {
+a.editor-button, // Deprecated: use .red-ui-button
+button.editor-button, // Deprecated: use .red-ui-button
+a.red-ui-button,
+button.red-ui-button
+ {
     @include workspace-button;
     height: 34px;
     line-height: 32px;
@@ -248,7 +261,11 @@
 }
 
 
-.editor-button-small {
+a.editor-button-small, // Deprecated: use .red-ui-button-small
+button.editor-button-small, // Deprecated: use .red-ui-button-small
+a.red-ui-button-small,
+button.red-ui-button-small
+{
     height: 20px;
     min-width: 20px;
     line-height: 18px;
@@ -257,34 +274,21 @@
     padding: 0 5px;
 }
 
-#node-config-dialog-scope-container {
-    cursor: auto;
-    float: right;
-    font-size: 12px !important;
-    line-height: 35px;
-}
-#node-config-dialog-scope-warning {
+#red-ui-editor-config-scope-warning {
     display: inline-block;
     margin-right: 5px;
-    color: #AD1625;
+    color: $text-color-warning;
     vertical-align: middle;
 }
-#node-config-dialog-scope {
+#red-ui-editor-config-scope {
     margin: 1px 0 0 0;
     padding: 0;
     height: 22px;
     width: 200px;
 
 }
-#node-config-dialog-user-count {
-    vertical-align: middle;
-    display:inline-block;
-    margin-right: 20px;
-    float:left;
-    font-size: 12px;
-    line-height: 35px;
-}
-.node-input-expression-editor #dialog-form {
+
+.red-ui-editor .red-ui-tray .red-ui-editor-type-expression #dialog-form {
     margin: 0;
     height: 100%;
     .red-ui-panel {
@@ -296,12 +300,12 @@
         }
     }
 }
-.node-input-expression-tab-content {
+.red-ui-editor-type-expression-tab-content {
     position: relative;
     padding: 0 20px;
 }
 
-#node-input-expression-help {
+#red-ui-editor-type-expression-help {
     position: absolute;
     top: 35px;
     left:0;
@@ -311,7 +315,7 @@
     overflow: auto;
     box-sizing: border-box;
 }
-#node-input-expression-panel-info {
+#red-ui-editor-type-expression-panel-info {
     & > .form-row {
         margin: 0;
         & > div:first-child {
@@ -319,47 +323,38 @@
         }
     }
 }
-.node-input-expression-legacy, .node-input-buffer-type {
-    font-size: 0.8em;
+.red-ui-editor-type-expression-legacy {
     float: left;
-    cursor: pointer;
-    border: 1px solid white;
-    padding: 2px 5px;
-    border-radius: 2px;
-    &:hover {
-        border-color: $form-input-border-color;
-    }
 }
-.node-input-buffer-type {
-    float: none;
+.red-ui-editor-type-buffer-type {
     text-align: right;
 }
-.node-input-markdown-editor #dialog-form {
+.red-ui-editor .red-ui-tray .red-ui-editor-type-markdown-editor #dialog-form {
     margin: 0;
     height: 100%;
     .red-ui-panel {
         padding: 20px 20px 10px;
         &:last-child {
             padding-top: 60px;
-            background: #f9f9f9;
+            background: $primary-background;
 
         }
     }
 }
-.node-input-markdown-panel-preview {
+.red-ui-editor-type-markdown-panel-preview {
     padding: 10px;
-    border:1px solid #ccc;
+    border:1px solid $secondary-border-color;
     border-radius:5px;
     height: calc(100% - 21px);
     overflow-y: scroll;
-    background: #fff;
+    background: $secondary-background;
 }
 
-#clipboard-hidden {
+#red-ui-clipboard-hidden {
     position: absolute;
     top: -3000px;
 }
-.node-label-form-row {
+.form-row .red-ui-editor-node-label-form-row {
     margin: 5px 0 0 50px;
     label {
         margin-right: 20px;
@@ -372,30 +367,24 @@
     input {
         width: calc(100% - 100px);
     }
-    #node-settings-icon-module {
+    #red-ui-editor-node-icon-module {
         width: calc(55% - 50px);
     }
-    #node-settings-icon-file {
+    #red-ui-editor-node-icon-file {
         width: calc(45% - 55px);
         margin-left: 5px;
     }
 }
-.node-label-form-none {
+.red-ui-editor-node-label-form-none {
     span {
         padding-left: 50px;
         width: 100px;
-        color: #999;
+        color: $secondary-text-color;
     }
 }
 
-.ace_read-only {
-    background: #eee !important;
-    .ace_cursor {
-       color: transparent !important;
-    }
 
-}
-#node-settings-icon-button {
+#red-ui-editor-node-icon-button {
     position: relative;
     padding-left: 30px;
     width: calc(100% - 150px);
@@ -405,7 +394,7 @@
         left: 2px;
     }
 }
-#node-settings-icon {
+#red-ui-editor-node-icon {
     margin-left: 10px;
     width: calc(100% - 163px);
 }
@@ -413,7 +402,7 @@
     position: absolute;
     border: 1px solid $primary-border-color;
     box-shadow: 0 1px 6px -3px black;
-    background: white;
+    background: $secondary-background;
     z-Index: 21;
     display: none;
     select {
@@ -435,15 +424,15 @@
     cursor: pointer;
     border-radius: 4px;
     &:hover {
-        background: lighten($node-selected-color,20%);
+        background: $list-item-background-hover;
     }
     &.selected {
-        background: lighten($node-selected-color,20%);
+        background: $list-item-background-selected;
         .red-ui-search-result-node {
-            border-color: white;
+            // border-color: white;
         }
     }
-    .palette_icon_fa {
+    .red-ui-palette-icon-fa {
         top: 6px;
         left: 3px;
     }
@@ -452,7 +441,7 @@
     background: $palette-header-background;
     font-size: 0.9em;
     padding: 3px;
-    color: #666;
+    color: $secondary-text-color;
     clear: both;
     i {
         margin-right: 5px;
@@ -460,9 +449,11 @@
 }
 .red-ui-icon-meta {
     border-top: 1px solid $secondary-border-color;
+    background: $tertiary-background;
+    height: 24px;
     span {
         padding: 4px;
-        color: #666;
+        color: $secondary-text-color;
         font-size: 0.9em;
     }
     button {
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/flow.scss b/packages/node_modules/@node-red/editor-client/src/sass/flow.scss
index 26e7443df..367a7e10a 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/flow.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/flow.scss
@@ -14,63 +14,32 @@
  * limitations under the License.
  **/
 
-.hidden {
-    display: none;
-}
-
-.lasso {
+.nr-ui-view-lasso {
     stroke-width: 1px;
-    stroke: #ff7f0e;
-    fill: rgba(20,125,255,0.1);
+    stroke: $view-lasso-stroke;
+    fill: $view-lasso-fill;
     stroke-dasharray: 10 5;
 }
 
-.group-box {
-    stroke-width: 1px;
-    stroke: #aaaaaa;
-    fill: rgba(208, 211, 238, 0.1);
-    stroke-dasharray: 3 3;
-}
-.group-box-active {
-    fill: #fff;
-    stroke: #ff7f0e;
-}
-
-.group_label {
-    stroke-width: 0;
-    fill: #999;
-    font-size: 11px;
-    pointer-events: none;
-    -webkit-touch-callout: none;
-    @include disable-selection;
-}
-
-.pull-right {
-    margin-left: 20px;
-}
-
-.node_label_italic {
+.node_label_italic, // deprecated: use red-ui-flow-node-label-italic
+.red-ui-flow-node-label-italic {
     font-style: italic;
 }
-.node_label_unknown {
-    font-style: italic;
-    fill: #e00 !important;
+.red-ui-flow-node-label-white {
+    fill: $view-background !important;
 }
-.node_label_white {
-    fill: #eee !important;
-}
-.node_label {
+.red-ui-flow-node-label {
     stroke-width: 0;
-    fill: #333;
+    fill: $node-label-color;
     font-size: 14px;
     pointer-events: none;
     -webkit-touch-callout: none;
     @include disable-selection;
 }
 
-.port_label {
+.red-ui-flow-port-label {
     stroke-width: 0;
-    fill: #888;
+    fill: $secondary-text-color;
     font-size: 16px;
     alignment-baseline: middle;
     text-anchor: middle;
@@ -80,165 +49,142 @@
 }
 
 
-.function_label {
-    font-size: 12px;
-}
-.node {
-    stroke: #999;
+.red-ui-flow-node {
+    stroke: $node-border;
     cursor: move;
     stroke-width: 1;
 }
-.node_unknown {
+.red-ui-flow-node-unknown {
     stroke-dasharray:10,4;
-    stroke: #f33;
+    stroke: $node-border-unknown;
 }
-.node_placeholder {
+.red-ui-flow-node-placeholder {
     stroke-dasharray:10,4;
-    stroke: #aaa;
-    fill: #eee;
+    stroke: $node-border-placeholder;
+    fill: $node-background-placeholder;
     opacity: 0.5;
     stroke-width: 2;
 }
-
-.tool_arrow {
-    stroke-width: 1;
-    stroke: #999;
-    fill: #999;
-    cursor: pointer;
+.red-ui-flow-node-icon-group {
+    .fa-lg {
+        stroke: none;
+        fill: $node-icon-color;
+        text-anchor: middle;
+        font-family: FontAwesome;
+    }
 }
-.node_tools {
-    fill: #ddd;
-    stroke: #999;
-    cursor: move;
-    stroke-width: 1;
-    cursor: pointer;
+.red-ui-flow-node-icon-shade {
+    stroke: none;
+    fill: $node-icon-background-color-fill;
+    fill-opacity: $node-icon-background-color-opacity;
 }
-.node_tools_hovered {
-    stroke: #ff7f0e;
-    fill: #eee;
+.red-ui-flow-node-icon-shade-border {
+    stroke-opacity: $node-icon-border-color-opacity;
+    stroke: $node-icon-border-color;
+    stroke-width: 1;
 }
 
-.node_button {
+.red-ui-flow-node-button {
     fill: inherit;
-
 }
-.port {
-    stroke: #999;
+.red-ui-flow-node-button-background {
+    fill: $node-background-placeholder;
+}
+
+.red-ui-flow-port {
+    stroke: $node-border;
     stroke-width: 1;
-    fill: #ddd;
+    fill: $node-port-background;
     cursor: crosshair;
 }
 
-.port_highlight {
-    stroke: #6DA332;
-    stroke-width: 3;
-    fill: #fff;
-    pointer-events:none;
-    fill-opacity: 0.5;
+.red-ui-flow-node-error {
+    fill: $node-status-error-background;
+    stroke: $node-status-error-border;
+    stroke-width:1px;
+    cursor: default;
+    stroke-linejoin: round;
+    stroke-linecap: round;
+}
+.red-ui-flow-node-changed {
+    fill: $node-status-changed-background;
+    stroke: $node-status-changed-border;
+    cursor: default;
+    stroke-width:1px;
+    stroke-linejoin: round;
+    stroke-linecap: round;
 }
 
-.node_error {
-    stroke: #ff0000;
-    stroke-width: 2;
-    fill: #ff7f0e;
-}
-
-.node_badge {
-    stroke: rgb(93, 114, 145);
-    stroke-width: 1;
-    fill: rgb(190, 209, 255);
-}
-.node_badge_label {
-    stroke-width:0;
-    fill: #fff;
-    font-size: 11px;
-    pointer-events: none;
-    -webkit-touch-callout: none;
-    @include disable-selection;
-
-}
-.node_invalid {
-    stroke: #ff0000;
-}
-.node_selected {
+.red-ui-flow-node-selected {
     stroke-width: 2;
     stroke: $node-selected-color !important;
 }
-.node_highlighted {
-    border-color: #dd1616 !important;
+.red-ui-flow-node-highlighted {
+    border-color: $node-selected-color !important;
     border-style: dashed !important;
-    stroke: #dd1616;
+    stroke: $node-selected-color;
     stroke-width: 2;
     stroke-dasharray: 10, 4;
 }
-.node_hovered {
-}
 
-.node_subflow .node {
+.red-ui-flow-subflow .red-ui-flow-node {
     stroke-dasharray:8, 3;
 }
-.workspace-disabled {
-    .link_line {
+.red-ui-workspace-disabled {
+    .red-ui-flow-link-line {
         stroke-dasharray: 10,5 !important;
         stroke-width: 2 !important;
         stroke: $link-subflow-color;
     }
-    .node {
+    .red-ui-flow-node {
         stroke-dasharray: 10,4;
     }
 }
 
-.node_quickadd * {
-    stroke-dasharray: 12,3;
+@each $current-color in red green yellow blue grey {
+    .red-ui-flow-node-status-dot-#{$current-color} {
+        fill: map-get($node-status-colors,$current-color);
+        stroke: map-get($node-status-colors,$current-color);
+    }
+    .red-ui-flow-node-status-ring-#{$current-color} {
+        fill: $view-background;
+        stroke: map-get($node-status-colors,$current-color);
+    }
 }
 
-.node_status_label {
+.red-ui-flow-node-status-label {
     @include disable-selection;
     stroke-width: 0;
-    fill: #888;
+    fill: $secondary-text-color;
     font-size:9pt;
-    stroke:#000;
     text-anchor:start;
 }
 
-.port_hovered {
-    stroke: $port-selected-color !important;
-    fill:  $port-selected-color !important;
-}
-
-.port_quick_link {
+.red-ui-flow-port-hovered {
     stroke: $port-selected-color;
     fill:  $port-selected-color;
 }
 
-
-.subflowport {
+.red-ui-flow-subflow-port {
     stroke-dasharray: 5,5;
-    fill: #eee;
-    stroke: #999;
+    fill: $node-background-placeholder;
+    stroke: $node-border;
 }
 
-.drag_line {
+.red-ui-flow-drag-line {
     stroke: $node-selected-color !important;
     stroke-width: 3;
     fill: none;
     pointer-events: none;
 }
 
-.drag_line_hidden {
-    stroke: $node-selected-color;
-    stroke-width: 0;
-    pointer-events: none;
-    fill: none;
-}
-
-.link_line {
+.red-ui-flow-link-line {
     stroke: $link-color;
     stroke-width: 3;
     fill: none;
     pointer-events: none;
 }
-.link_link {
+.red-ui-flow-link-link {
     stroke-width: 2;
     stroke-dasharray: 10,5;
     stroke: $link-link-color;
@@ -246,68 +192,70 @@
     stroke-dasharray: 15,2;
     // pointer-events: none;
 }
-.link_port {
-    fill: #eee;
+.red-ui-flow-link-port {
+    fill: $node-link-port-background;
     stroke: $link-link-color;
     stroke-width: 1;
 }
-.link_group_active .link_port {
+.red-ui-flow-link-group-active .red-ui-flow-link-port {
     stroke: $link-link-active-color;
 }
-.link_group:hover {
+.red-ui-flow-link-group:hover {
     cursor: pointer;
 }
-.link_subflow {
+.red-ui-flow-subflow-link {
     stroke: $link-subflow-color;
     stroke-dasharray: 10,5;
     stroke-width: 2;
 }
 
-.link_outline {
-    stroke: #fff;
+.red-ui-flow-link-outline {
+    stroke: $view-background;
     stroke-width: 5;
     cursor: crosshair;
     fill: none;
     pointer-events: none;
 }
-.link_background {
-    stroke: #fff;
+.red-ui-flow-link-background {
+    stroke: $view-background;
     opacity: 0;
     stroke-width: 20;
     cursor: crosshair;
     fill: none;
 }
-.link_splice > .link_line {
+.red-ui-flow-link-splice > .red-ui-flow-link-line {
     stroke-dasharray: 15,8;
 }
 
-g.link_selected path.link_line {
+g.red-ui-flow-link-selected path.red-ui-flow-link-line {
     stroke: $node-selected-color;
 }
-g.link_unknown path.link_line {
+g.red-ui-flow-link-unknown path.red-ui-flow-link-line {
     stroke: $link-unknown-color;
     stroke-width: 2;
     stroke-dasharray: 10, 4;
 }
 
-@keyframes port_tooltip_fadeIn { from { opacity:0; } to { opacity:1; } }
+@keyframes red-ui-flow-port-tooltip-fadeIn { from { opacity:0; } to { opacity:1; } }
 
-.port_tooltip {
+.red-ui-flow-port-tooltip {
     opacity:0;
-    animation: 0.1s ease-in 0s 1 normal forwards port_tooltip_fadeIn;
+    animation: 0.1s ease-in 0s 1 normal forwards red-ui-flow-port-tooltip-fadeIn;
     pointer-events: none;
 
-    path {
+    path:first-child {
         fill: $popover-background;
         stroke: $popover-background;
         stroke-width: 1;
     }
 }
-.port_tooltip_label {
+.red-ui-flow-port-tooltip-label {
     stroke-width: 0;
     fill: $popover-color;
+    font-family: $primary-font;
     font-size: 12px;
     pointer-events: none;
     -webkit-touch-callout: none;
+    white-space: pre;
     @include disable-selection;
 }
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/forms.scss b/packages/node_modules/@node-red/editor-client/src/sass/forms.scss
index 092bc7f6f..97f4d4b19 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/forms.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/forms.scss
@@ -1,1094 +1,733 @@
 /**
- * Copyright JS Foundation and other contributors, http://js.foundation
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- **/
+* Copyright JS Foundation and other contributors, http://js.foundation
+*
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+* http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+**/
 /*!
- * Extracted from Bootstrap v2.3.2
- *
- * Copyright 2013 Twitter, Inc
- * Licensed under the Apache License v2.0
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Designed and built with all the love in the world by @mdo and @fat.
- */
-
-button,
-input,
-select,
-div[contenteditable="true"],
-textarea {
-  margin: 0;
-  font-size: 100%;
-  vertical-align: middle;
-}
-
-button,
-div[contenteditable="true"],
-input {
-  *overflow: visible;
-  line-height: normal;
-}
-
-button::-moz-focus-inner,
-div[contenteditable="true"]::-moz-focus-inner,
-input::-moz-focus-inner {
-  padding: 0;
-  border: 0;
-}
-
-button,
-html input[type="button"],
-input[type="reset"],
-input[type="submit"] {
-  cursor: pointer;
-  -webkit-appearance: button;
-}
-
-label,
-select,
-button,
-input[type="button"],
-input[type="reset"],
-input[type="submit"],
-input[type="radio"],
-input[type="checkbox"] {
-  cursor: pointer;
-}
-
-input[type="search"] {
-  -webkit-box-sizing: content-box;
-     -moz-box-sizing: content-box;
-          box-sizing: content-box;
-  -webkit-appearance: textfield;
-}
-
-input[type="search"]::-webkit-search-decoration,
-input[type="search"]::-webkit-search-cancel-button {
-  -webkit-appearance: none;
-}
-
-textarea {
-  overflow: auto;
-  vertical-align: top;
-}
-
-form {
-  margin: 0 0 20px;
-}
-
-fieldset {
-  padding: 0;
-  margin: 0;
-  border: 0;
-}
-
-legend {
-  display: block;
-  width: 100%;
-  padding: 0;
-  margin-bottom: 20px;
-  font-size: 21px;
-  line-height: 40px;
-  color: #333333;
-  border: 0;
-  border-bottom: 1px solid #e5e5e5;
-}
-
-legend small {
-  font-size: 15px;
-  color: #999999;
-}
-
-
-label,
-input,
-div[contenteditable="true"],
-button,
-select,
-textarea {
-  font-size: 14px;
-  font-weight: normal;
-  line-height: 20px;
-}
-
-input,
-div[contenteditable="true"],
-button,
-select,
-textarea {
-  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-}
-
-label {
-  display: block;
-  margin-bottom: 5px;
-}
-
-select,
-textarea,
-input[type="text"],
-input[type="password"],
-input[type="datetime"],
-input[type="datetime-local"],
-input[type="date"],
-input[type="month"],
-input[type="time"],
-input[type="week"],
-input[type="number"],
-input[type="email"],
-input[type="url"],
-input[type="search"],
-input[type="tel"],
-input[type="color"],
-div[contenteditable="true"],
-.uneditable-input {
-  box-sizing: border-box;
-  display: inline-block;
-  height: 34px;
-  padding: 6px 6px;
-  margin-bottom: 10px;
-  font-size: 14px;
-  line-height: 20px;
-  color: #555555;
-  vertical-align: middle;
-  border-radius: 4px;
-}
-
-input,
-textarea,
-div[contenteditable="true"],
-.uneditable-input {
-  width: 206px;
-}
-
-textarea {
-  height: auto;
-}
-
-textarea,
-input[type="text"],
-input[type="password"],
-input[type="datetime"],
-input[type="datetime-local"],
-input[type="date"],
-input[type="month"],
-input[type="time"],
-input[type="week"],
-input[type="number"],
-input[type="email"],
-input[type="url"],
-input[type="search"],
-input[type="tel"],
-input[type="color"],
-div[contenteditable="true"],
-.uneditable-input {
-  background-color: #ffffff;
-  border: 1px solid $form-input-border-color;
-  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-     -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-}
-
-textarea:focus,
-input[type="text"]:focus,
-input[type="password"]:focus,
-input[type="datetime"]:focus,
-input[type="datetime-local"]:focus,
-input[type="date"]:focus,
-input[type="month"]:focus,
-input[type="time"]:focus,
-input[type="week"]:focus,
-input[type="number"]:focus,
-input[type="email"]:focus,
-input[type="url"]:focus,
-input[type="search"]:focus,
-input[type="tel"]:focus,
-input[type="color"]:focus,
-div[contenteditable="true"]:focus,
-.uneditable-input:focus {
-  border-color: $form-input-focus-color;
-  outline: 0;
-  outline: thin dotted \9;
-  /* IE6-9 */
-
-  // -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
-  //    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
-  //         box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
-}
-
-input[type="radio"],
-input[type="checkbox"] {
-  margin: 4px 0 0;
-  margin-top: 1px \9;
-  *margin-top: 0;
-  line-height: normal;
-}
-
-input[type="file"],
-input[type="image"],
-input[type="submit"],
-input[type="reset"],
-input[type="button"],
-input[type="radio"],
-input[type="checkbox"] {
-  width: auto;
-}
-
-select,
-input[type="file"] {
-  height: 34px;
-  /* In IE7, the height of the select element cannot be changed by height, only font-size */
-
-  *margin-top: 4px;
-  /* For IE7, add top margin to align select with labels */
-
-  line-height: 34px;
-}
-
-select {
-  width: 220px;
-  background-color: #ffffff;
-  border: 1px solid $form-input-border-color;
-}
-
-select[multiple],
-select[size] {
-  height: auto;
-}
-
-select:focus,
-input[type="file"]:focus,
-input[type="radio"]:focus,
-input[type="checkbox"]:focus {
-  outline: thin dotted #333;
-  outline: 2px auto $form-input-focus-color;
-  outline-offset: -3px;
-}
-
-.uneditable-input,
-.uneditable-textarea {
-  color: #999999;
-  cursor: not-allowed;
-  background-color: #fcfcfc;
-  border-color: #cccccc;
-  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025);
-     -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025);
-          box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025);
-}
-
-.uneditable-input {
-  overflow: hidden;
-  white-space: nowrap;
-}
-
-.uneditable-textarea {
-  width: auto;
-  height: auto;
-}
-
-input:-moz-placeholder,
-textarea:-moz-placeholder {
-  color: $form-placeholder-color;
-}
-
-input:-ms-input-placeholder,
-div[contenteditable="true"]:-ms-input-placeholder,
-textarea:-ms-input-placeholder {
-  color: $form-placeholder-color;
-}
-
-input::-webkit-input-placeholder,
-div[contenteditable="true"]::-webkit-input-placeholder,
-textarea::-webkit-input-placeholder {
-  color: $form-placeholder-color;
-}
-
-.radio,
-.checkbox {
-  min-height: 20px;
-  padding-left: 20px;
-}
-
-.radio input[type="radio"],
-.checkbox input[type="checkbox"] {
-  float: left;
-  margin-left: -20px;
-}
-
-.controls > .radio:first-child,
-.controls > .checkbox:first-child {
-  padding-top: 5px;
-}
-
-.radio.inline,
-.checkbox.inline {
-  display: inline-block;
-  padding-top: 5px;
-  margin-bottom: 0;
-  vertical-align: middle;
-}
-
-.radio.inline + .radio.inline,
-.checkbox.inline + .checkbox.inline {
-  margin-left: 10px;
-}
-
-.input-mini {
-  width: 60px;
-}
-
-.input-small {
-  width: 90px;
-}
-
-.input-medium {
-  width: 150px;
-}
-
-.input-large {
-  width: 210px;
-}
-
-.input-xlarge {
-  width: 270px;
-}
-
-.input-xxlarge {
-  width: 530px;
-}
-
-input[class*="span"],
-select[class*="span"],
-textarea[class*="span"],
-.uneditable-input[class*="span"],
-.row-fluid input[class*="span"],
-.row-fluid select[class*="span"],
-.row-fluid textarea[class*="span"],
-.row-fluid .uneditable-input[class*="span"] {
-  float: none;
-  margin-left: 0;
-}
-
-.input-append input[class*="span"],
-.input-append .uneditable-input[class*="span"],
-.input-prepend input[class*="span"],
-.input-prepend .uneditable-input[class*="span"],
-.row-fluid input[class*="span"],
-.row-fluid select[class*="span"],
-.row-fluid textarea[class*="span"],
-.row-fluid .uneditable-input[class*="span"],
-.row-fluid .input-prepend [class*="span"],
-.row-fluid .input-append [class*="span"] {
-  display: inline-block;
-}
-
-input,
-textarea,
-div[contenteditable="true"],
-.uneditable-input {
-  margin-left: 0;
-}
-
-.controls-row [class*="span"] + [class*="span"] {
-  margin-left: 20px;
-}
-
-input.span12,
-textarea.span12,
-.uneditable-input.span12 {
-  width: 926px;
-}
-
-input.span11,
-textarea.span11,
-.uneditable-input.span11 {
-  width: 846px;
-}
-
-input.span10,
-textarea.span10,
-.uneditable-input.span10 {
-  width: 766px;
-}
-
-input.span9,
-textarea.span9,
-.uneditable-input.span9 {
-  width: 686px;
-}
-
-input.span8,
-textarea.span8,
-.uneditable-input.span8 {
-  width: 606px;
-}
-
-input.span7,
-textarea.span7,
-.uneditable-input.span7 {
-  width: 526px;
-}
-
-input.span6,
-textarea.span6,
-.uneditable-input.span6 {
-  width: 446px;
-}
-
-input.span5,
-textarea.span5,
-.uneditable-input.span5 {
-  width: 366px;
-}
-
-input.span4,
-textarea.span4,
-.uneditable-input.span4 {
-  width: 286px;
-}
-
-input.span3,
-textarea.span3,
-.uneditable-input.span3 {
-  width: 206px;
-}
-
-input.span2,
-textarea.span2,
-.uneditable-input.span2 {
-  width: 126px;
-}
-
-input.span1,
-textarea.span1,
-.uneditable-input.span1 {
-  width: 46px;
-}
-
-.controls-row {
-  *zoom: 1;
-}
-
-.controls-row:before,
-.controls-row:after {
-  display: table;
-  line-height: 0;
-  content: "";
-}
-
-.controls-row:after {
-  clear: both;
-}
-
-.controls-row [class*="span"],
-.row-fluid .controls-row [class*="span"] {
-  float: left;
-}
-
-.controls-row .checkbox[class*="span"],
-.controls-row .radio[class*="span"] {
-  padding-top: 5px;
-}
-
-label.disabled {
-    color: #bbb !important;
-    cursor: default;
-}
-
-input[disabled],
-select[disabled],
-textarea[disabled],
-input[readonly],
-select[readonly],
-textarea[readonly] {
-  cursor: not-allowed;
-  background-color: #eeeeee;
-}
-
-input[type="radio"][disabled],
-input[type="checkbox"][disabled],
-input[type="radio"][readonly],
-input[type="checkbox"][readonly] {
-  background-color: transparent;
-}
-
-.control-group.warning .control-label,
-.control-group.warning .help-block,
-.control-group.warning .help-inline {
-  color: #c09853;
-}
-
-.control-group.warning .checkbox,
-.control-group.warning .radio,
-.control-group.warning input,
-.control-group.warning div[contenteditable="true"],
-.control-group.warning select,
-.control-group.warning textarea {
-  color: #c09853;
-}
-
-.control-group.warning input,
-.control-group.warning div[contenteditable="true"],
-.control-group.warning select,
-.control-group.warning textarea {
-  border-color: #c09853;
-  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-     -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-}
-
-.control-group.warning input:focus,
-.control-group.warning div[contenteditable="true"]:focus,
-.control-group.warning select:focus,
-.control-group.warning textarea:focus {
-  border-color: #a47e3c;
-  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #dbc59e;
-     -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #dbc59e;
-          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #dbc59e;
-}
-
-.control-group.warning .input-prepend .add-on,
-.control-group.warning .input-append .add-on {
-  color: #c09853;
-  background-color: #fcf8e3;
-  border-color: #c09853;
-}
-
-.control-group.error .control-label,
-.control-group.error .help-block,
-.control-group.error .help-inline {
-  color: #b94a48;
-}
-
-.control-group.error .checkbox,
-.control-group.error .radio,
-.control-group.error input,
-.control-group.error div[contenteditable="true"],
-.control-group.error select,
-.control-group.error textarea {
-  color: #b94a48;
-}
-
-.control-group.error input,
-.control-group.error div[contenteditable="true"],
-.control-group.error select,
-.control-group.error textarea {
-  border-color: #b94a48;
-  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-     -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-}
-
-.control-group.error input:focus,
-.control-group.error div[contenteditable="true"]:focus,
-.control-group.error select:focus,
-.control-group.error textarea:focus {
-  border-color: #953b39;
-  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #d59392;
-     -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #d59392;
-          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #d59392;
-}
-
-.control-group.error .input-prepend .add-on,
-.control-group.error .input-append .add-on {
-  color: #b94a48;
-  background-color: #f2dede;
-  border-color: #b94a48;
-}
-
-.control-group.success .control-label,
-.control-group.success .help-block,
-.control-group.success .help-inline {
-  color: #468847;
-}
-
-.control-group.success .checkbox,
-.control-group.success .radio,
-.control-group.success input,
-.control-group.success div[contenteditable="true"],
-.control-group.success select,
-.control-group.success textarea {
-  color: #468847;
-}
-
-.control-group.success input,
-.control-group.success div[contenteditable="true"],
-.control-group.success select,
-.control-group.success textarea {
-  border-color: #468847;
-  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-     -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-}
-
-.control-group.success input:focus,
-.control-group.success div[contenteditable="true"]:focus,
-.control-group.success select:focus,
-.control-group.success textarea:focus {
-  border-color: #356635;
-  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7aba7b;
-     -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7aba7b;
-          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7aba7b;
-}
-
-.control-group.success .input-prepend .add-on,
-.control-group.success .input-append .add-on {
-  color: #468847;
-  background-color: #dff0d8;
-  border-color: #468847;
-}
-
-.control-group.info .control-label,
-.control-group.info .help-block,
-.control-group.info .help-inline {
-  color: #3a87ad;
-}
-
-.control-group.info .checkbox,
-.control-group.info .radio,
-.control-group.info input,
-.control-group.info div[contenteditable="true"],
-.control-group.info select,
-.control-group.info textarea {
-  color: #3a87ad;
-}
-
-.control-group.info input,
-.control-group.info div[contenteditable="true"],
-.control-group.info select,
-.control-group.info textarea {
-  border-color: #3a87ad;
-  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-     -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-}
-
-.control-group.info input:focus,
-.control-group.info div[contenteditable="true"]:focus,
-.control-group.info select:focus,
-.control-group.info textarea:focus {
-  border-color: #2d6987;
-  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7ab5d3;
-     -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7ab5d3;
-          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7ab5d3;
-}
-
-.control-group.info .input-prepend .add-on,
-.control-group.info .input-append .add-on {
-  color: #3a87ad;
-  background-color: #d9edf7;
-  border-color: #3a87ad;
-}
-
-input:focus:invalid,
-div[contenteditable="true"]:focus:invalid,
-textarea:focus:invalid,
-select:focus:invalid {
-  color: #b94a48;
-  border-color: #ee5f5b;
-}
-
-input:focus:invalid:focus,
-div[contenteditable="true"]:focus:invalid:focus,
-textarea:focus:invalid:focus,
-select:focus:invalid:focus {
-  border-color: #e9322d;
-  -webkit-box-shadow: 0 0 6px #f8b9b7;
-     -moz-box-shadow: 0 0 6px #f8b9b7;
-          box-shadow: 0 0 6px #f8b9b7;
-}
-
-.form-actions {
-  padding: 19px 20px 20px;
-  margin-top: 20px;
-  margin-bottom: 20px;
-  background-color: #f5f5f5;
-  border-top: 1px solid #e5e5e5;
-  *zoom: 1;
-}
-
-.form-actions:before,
-.form-actions:after {
-  display: table;
-  line-height: 0;
-  content: "";
-}
-
-.form-actions:after {
-  clear: both;
-}
-
-.help-block,
-.help-inline {
-  color: #595959;
-}
-
-.help-block {
-  display: block;
-  margin-bottom: 10px;
-}
-
-.help-inline {
-  display: inline-block;
-  *display: inline;
-  padding-left: 5px;
-  vertical-align: middle;
-  *zoom: 1;
-}
-
-.input-append,
-.input-prepend {
-  display: inline-block;
-  margin-bottom: 10px;
-  font-size: 0;
-  white-space: nowrap;
-  vertical-align: middle;
-}
-
-.input-append input,
-.input-prepend input,
-.input-append div[contenteditable="true"],
-.input-prepend div[contenteditable="true"],
-.input-append select,
-.input-prepend select,
-.input-append .uneditable-input,
-.input-prepend .uneditable-input,
-.input-append .dropdown-menu,
-.input-prepend .dropdown-menu,
-.input-append .popover,
-.input-prepend .popover {
-  font-size: 14px;
-}
-
-.input-append input,
-.input-prepend input,
-.input-append div[contenteditable="true"],
-.input-prepend div[contenteditable="true"],
-.input-append select,
-.input-prepend select,
-.input-append .uneditable-input,
-.input-prepend .uneditable-input {
-  position: relative;
-  margin-bottom: 0;
-  *margin-left: 0;
-  vertical-align: top;
-  -webkit-border-radius: 0 4px 4px 0;
-     -moz-border-radius: 0 4px 4px 0;
-          border-radius: 0 4px 4px 0;
-}
-
-.input-append input:focus,
-.input-prepend input:focus,
-.input-append div[contenteditable="true"]:focus,
-.input-prepend div[contenteditable="true"]:focus,
-.input-append select:focus,
-.input-prepend select:focus,
-.input-append .uneditable-input:focus,
-.input-prepend .uneditable-input:focus {
-  z-index: 2;
-}
-
-.input-append .add-on,
-.input-prepend .add-on {
-  display: inline-block;
-  width: auto;
-  height: 20px;
-  min-width: 16px;
-  padding: 4px 5px;
-  font-size: 14px;
-  font-weight: normal;
-  line-height: 20px;
-  text-align: center;
-  text-shadow: 0 1px 0 #ffffff;
-  background-color: #eeeeee;
-  border: 1px solid #ccc;
-}
-
-.input-append .add-on,
-.input-prepend .add-on,
-.input-append .btn,
-.input-prepend .btn,
-.input-append .btn-group > .dropdown-toggle,
-.input-prepend .btn-group > .dropdown-toggle {
-  vertical-align: top;
-  -webkit-border-radius: 0;
-     -moz-border-radius: 0;
-          border-radius: 0;
-}
-
-.input-append .active,
-.input-prepend .active {
-  background-color: #a9dba9;
-  border-color: #46a546;
-}
-
-.input-prepend .add-on,
-.input-prepend .btn {
-  margin-right: -1px;
-}
-
-.input-prepend .add-on:first-child,
-.input-prepend .btn:first-child {
-  -webkit-border-radius: 4px 0 0 4px;
-     -moz-border-radius: 4px 0 0 4px;
-          border-radius: 4px 0 0 4px;
-}
-
-.input-append input,
-.input-append div[contenteditable="true"],
-.input-append select,
-.input-append .uneditable-input {
-  -webkit-border-radius: 4px 0 0 4px;
-     -moz-border-radius: 4px 0 0 4px;
-          border-radius: 4px 0 0 4px;
-}
-
-.input-append input + .btn-group .btn:last-child,
-.input-append select + .btn-group .btn:last-child,
-.input-append .uneditable-input + .btn-group .btn:last-child {
-  -webkit-border-radius: 0 4px 4px 0;
-     -moz-border-radius: 0 4px 4px 0;
-          border-radius: 0 4px 4px 0;
-}
-
-.input-append .add-on,
-.input-append .btn,
-.input-append .btn-group {
-  margin-left: -1px;
-}
-
-.input-append .add-on:last-child,
-.input-append .btn:last-child,
-.input-append .btn-group:last-child > .dropdown-toggle {
-  -webkit-border-radius: 0 4px 4px 0;
-     -moz-border-radius: 0 4px 4px 0;
-          border-radius: 0 4px 4px 0;
-}
-
-.input-prepend.input-append input,
-.input-prepend.input-append div[contenteditable="true"],
-.input-prepend.input-append select,
-.input-prepend.input-append .uneditable-input {
-  -webkit-border-radius: 0;
-     -moz-border-radius: 0;
-          border-radius: 0;
-}
-
-.input-prepend.input-append input + .btn-group .btn,
-.input-prepend.input-append select + .btn-group .btn,
-.input-prepend.input-append .uneditable-input + .btn-group .btn {
-  -webkit-border-radius: 0 4px 4px 0;
-     -moz-border-radius: 0 4px 4px 0;
-          border-radius: 0 4px 4px 0;
-}
-
-.input-prepend.input-append .add-on:first-child,
-.input-prepend.input-append .btn:first-child {
-  margin-right: -1px;
-  -webkit-border-radius: 4px 0 0 4px;
-     -moz-border-radius: 4px 0 0 4px;
-          border-radius: 4px 0 0 4px;
-}
-
-.input-prepend.input-append .add-on:last-child,
-.input-prepend.input-append .btn:last-child {
-  margin-left: -1px;
-  -webkit-border-radius: 0 4px 4px 0;
-     -moz-border-radius: 0 4px 4px 0;
-          border-radius: 0 4px 4px 0;
-}
-
-.input-prepend.input-append .btn-group:first-child {
-  margin-left: 0;
-}
-
-input.search-query {
-  padding-right: 14px;
-  padding-right: 4px \9;
-  padding-left: 14px;
-  padding-left: 4px \9;
-  /* IE7-8 doesn't have border-radius, so don't indent the padding */
-
-  margin-bottom: 0;
-  -webkit-border-radius: 15px;
-     -moz-border-radius: 15px;
-          border-radius: 15px;
-}
-
-/* Allow for input prepend/append in search forms */
-
-.form-search .input-append .search-query,
-.form-search .input-prepend .search-query {
-  -webkit-border-radius: 0;
-     -moz-border-radius: 0;
-          border-radius: 0;
-}
-
-.form-search .input-append .search-query {
-  -webkit-border-radius: 14px 0 0 14px;
-     -moz-border-radius: 14px 0 0 14px;
-          border-radius: 14px 0 0 14px;
-}
-
-.form-search .input-append .btn {
-  -webkit-border-radius: 0 14px 14px 0;
-     -moz-border-radius: 0 14px 14px 0;
-          border-radius: 0 14px 14px 0;
-}
-
-.form-search .input-prepend .search-query {
-  -webkit-border-radius: 0 14px 14px 0;
-     -moz-border-radius: 0 14px 14px 0;
-          border-radius: 0 14px 14px 0;
-}
-
-.form-search .input-prepend .btn {
-  -webkit-border-radius: 14px 0 0 14px;
-     -moz-border-radius: 14px 0 0 14px;
-          border-radius: 14px 0 0 14px;
-}
-
-.form-search input,
-.form-inline input,
-.form-horizontal input,
-.form-search div[contenteditable="true"],
-.form-inline div[contenteditable="true"],
-.form-horizontal div[contenteditable="true"],
-.form-search textarea,
-.form-inline textarea,
-.form-horizontal textarea,
-.form-search select,
-.form-inline select,
-.form-horizontal select,
-.form-search .help-inline,
-.form-inline .help-inline,
-.form-horizontal .help-inline,
-.form-search .uneditable-input,
-.form-inline .uneditable-input,
-.form-horizontal .uneditable-input,
-.form-search .input-prepend,
-.form-inline .input-prepend,
-.form-horizontal .input-prepend,
-.form-search .input-append,
-.form-inline .input-append,
-.form-horizontal .input-append {
-  display: inline-block;
-  *display: inline;
-  margin-bottom: 0;
-  vertical-align: middle;
-  *zoom: 1;
-}
-
-.form-search .hide,
-.form-inline .hide,
-.form-horizontal .hide {
-  display: none;
-}
-
-.form-search label,
-.form-inline label,
-.form-search .btn-group,
-.form-inline .btn-group {
-  display: inline-block;
-}
-
-.form-search .input-append,
-.form-inline .input-append,
-.form-search .input-prepend,
-.form-inline .input-prepend {
-  margin-bottom: 0;
-}
-
-.form-search .radio,
-.form-search .checkbox,
-.form-inline .radio,
-.form-inline .checkbox {
-  padding-left: 0;
-  margin-bottom: 0;
-  vertical-align: middle;
-}
-
-.form-search .radio input[type="radio"],
-.form-search .checkbox input[type="checkbox"],
-.form-inline .radio input[type="radio"],
-.form-inline .checkbox input[type="checkbox"] {
-  float: left;
-  margin-right: 3px;
-  margin-left: 0;
-}
-
-.control-group {
-  margin-bottom: 10px;
-}
-
-legend + .control-group {
-  margin-top: 20px;
-  -webkit-margin-top-collapse: separate;
-}
-
-.form-horizontal .control-group {
-  margin-bottom: 20px;
-  *zoom: 1;
-}
-
-.form-horizontal .control-group:before,
-.form-horizontal .control-group:after {
-  display: table;
-  line-height: 0;
-  content: "";
-}
-
-.form-horizontal .control-group:after {
-  clear: both;
-}
-
-.form-horizontal .control-label {
-  float: left;
-  width: 160px;
-  padding-top: 5px;
-  text-align: right;
-}
-
-.form-horizontal .controls {
-  *display: inline-block;
-  *padding-left: 20px;
-  margin-left: 180px;
-  *margin-left: 0;
-}
-
-.form-horizontal .controls:first-child {
-  *padding-left: 180px;
-}
-
-.form-horizontal .help-block {
-  margin-bottom: 0;
-}
-
-.form-horizontal input + .help-block,
-.form-horizontal select + .help-block,
-.form-horizontal textarea + .help-block,
-.form-horizontal .uneditable-input + .help-block,
-.form-horizontal .input-prepend + .help-block,
-.form-horizontal .input-append + .help-block {
-  margin-top: 10px;
-}
-
-.form-horizontal .form-actions {
-  padding-left: 180px;
-}
-
-.form-row div[contenteditable="true"] {
-   white-space: nowrap;
-   overflow: hidden;
+* Extracted from Bootstrap v2.3.2
+*
+* Copyright 2013 Twitter, Inc
+* Licensed under the Apache License v2.0
+* http://www.apache.org/licenses/LICENSE-2.0
+*
+* Designed and built with all the love in the world by @mdo and @fat.
+*/
+
+.red-ui-editor, .red-ui-editor-dialog {
+
+    button,
+    input,
+    select,
+    div[contenteditable="true"],
+    textarea {
+        margin: 0;
+        font-size: 100%;
+        vertical-align: middle;
+    }
+
+    button,
+    div[contenteditable="true"],
+    input {
+        *overflow: visible;
+        line-height: normal;
+    }
+
+    button::-moz-focus-inner,
+    div[contenteditable="true"]::-moz-focus-inner,
+    input::-moz-focus-inner {
+        padding: 0;
+        border: 0;
+    }
+
+    button,
+    html input[type="button"],
+    input[type="reset"],
+    input[type="submit"] {
+        cursor: pointer;
+        -webkit-appearance: button;
+    }
+
+    label,
+    select,
+    button,
+    input[type="button"],
+    input[type="reset"],
+    input[type="submit"],
+    input[type="radio"],
+    input[type="checkbox"] {
+        cursor: pointer;
+    }
+
+    input[type="search"] {
+        box-sizing: content-box;
+    }
+
+    input[type="search"]::-webkit-search-decoration,
+    input[type="search"]::-webkit-search-cancel-button {
+        -webkit-appearance: none;
+    }
+
+    textarea {
+        overflow: auto;
+        vertical-align: top;
+    }
+
+    form {
+        margin: 0 0 20px;
+    }
+
+    fieldset {
+        padding: 0;
+        margin: 0;
+        border: 0;
+    }
+
+    legend {
+        display: block;
+        width: 100%;
+        padding: 0;
+        margin-bottom: 20px;
+        font-size: 21px;
+        line-height: 40px;
+        color: $tertiary-text-color;
+        border: 0;
+        border-bottom: 1px solid $secondary-border-color;
+    }
+
+    legend small {
+        color: $tertiary-text-color;
+    }
+
+
+    label,
+    input,
+    div[contenteditable="true"],
+    button,
+    select,
+    textarea {
+        font-size: 14px;
+        font-weight: normal;
+        line-height: 20px;
+    }
+
+    input,
+    div[contenteditable="true"],
+    button,
+    select,
+    textarea {
+        font-family: $primary-font;
+    }
+
+    label {
+        display: block;
+        margin-bottom: 5px;
+    }
+
+    select,
+    textarea,
+    input[type="text"],
+    input[type="password"],
+    input[type="datetime"],
+    input[type="datetime-local"],
+    input[type="date"],
+    input[type="month"],
+    input[type="time"],
+    input[type="week"],
+    input[type="number"],
+    input[type="email"],
+    input[type="url"],
+    input[type="search"],
+    input[type="tel"],
+    input[type="color"],
+    div[contenteditable="true"],
+    .uneditable-input {
+        box-sizing: border-box;
+        display: inline-block;
+        height: 34px;
+        padding: 6px 6px;
+        margin-bottom: 10px;
+        font-size: 14px;
+        line-height: 20px;
+        color: $form-text-color;
+        vertical-align: middle;
+        border-radius: 4px;
+    }
+
+    input,
+    textarea,
+    div[contenteditable="true"],
+    .uneditable-input {
+        width: 206px;
+    }
+
+    textarea {
+        height: auto;
+    }
+
+    textarea,
+    input[type="text"],
+    input[type="password"],
+    input[type="datetime"],
+    input[type="datetime-local"],
+    input[type="date"],
+    input[type="month"],
+    input[type="time"],
+    input[type="week"],
+    input[type="number"],
+    input[type="email"],
+    input[type="url"],
+    input[type="search"],
+    input[type="tel"],
+    input[type="color"],
+    div[contenteditable="true"],
+    .uneditable-input {
+        background-color: $form-input-background;
+        border: 1px solid $form-input-border-color;
+    }
+
+    textarea:focus,
+    input[type="text"]:focus,
+    input[type="password"]:focus,
+    input[type="datetime"]:focus,
+    input[type="datetime-local"]:focus,
+    input[type="date"]:focus,
+    input[type="month"]:focus,
+    input[type="time"]:focus,
+    input[type="week"]:focus,
+    input[type="number"]:focus,
+    input[type="email"]:focus,
+    input[type="url"]:focus,
+    input[type="search"]:focus,
+    input[type="tel"]:focus,
+    input[type="color"]:focus,
+    div[contenteditable="true"]:focus,
+    .uneditable-input:focus {
+        border-color: $form-input-focus-color;
+        outline: 0;
+        outline: thin dotted \9;
+    }
+
+    input[type="radio"],
+    input[type="checkbox"] {
+        margin: 4px 0 0;
+        margin-top: 1px \9;
+        *margin-top: 0;
+        line-height: normal;
+    }
+
+    input[type="file"],
+    input[type="image"],
+    input[type="submit"],
+    input[type="reset"],
+    input[type="button"],
+    input[type="radio"],
+    input[type="checkbox"] {
+        width: auto;
+    }
+
+    select,
+    input[type="file"] {
+        height: 34px;
+        line-height: 34px;
+    }
+
+    select {
+        width: 220px;
+        background-color: $form-input-background;
+        border: 1px solid $form-input-border-color;
+    }
+
+    select[multiple],
+    select[size] {
+        height: auto;
+    }
+
+    select:focus,
+    input[type="file"]:focus,
+    input[type="radio"]:focus,
+    input[type="checkbox"]:focus {
+        outline: 2px auto $form-input-focus-color;
+        outline-offset: -3px;
+    }
+
+    .uneditable-input,
+    .uneditable-textarea {
+        color: $form-text-color-disabled;
+        cursor: not-allowed;
+        background-color: $form-input-background-disabled;
+        border-color: $form-input-border-color;
+    }
+
+    .uneditable-input {
+        overflow: hidden;
+        white-space: nowrap;
+    }
+
+    .uneditable-textarea {
+        width: auto;
+        height: auto;
+    }
+
+    input:-moz-placeholder,
+    textarea:-moz-placeholder {
+        color: $form-placeholder-color;
+    }
+
+    input:-ms-input-placeholder,
+    div[contenteditable="true"]:-ms-input-placeholder,
+    textarea:-ms-input-placeholder {
+        color: $form-placeholder-color;
+    }
+
+    input::-webkit-input-placeholder,
+    div[contenteditable="true"]::-webkit-input-placeholder,
+    textarea::-webkit-input-placeholder {
+        color: $form-placeholder-color;
+    }
+
+    .radio,
+    .checkbox {
+        min-height: 20px;
+        padding-left: 20px;
+    }
+
+    .radio input[type="radio"],
+    .checkbox input[type="checkbox"] {
+        float: left;
+        margin-left: -20px;
+    }
+
+    .controls > .radio:first-child,
+    .controls > .checkbox:first-child {
+        padding-top: 5px;
+    }
+
+    .radio.inline,
+    .checkbox.inline {
+        display: inline-block;
+        padding-top: 5px;
+        margin-bottom: 0;
+        vertical-align: middle;
+    }
+
+    .radio.inline + .radio.inline,
+    .checkbox.inline + .checkbox.inline {
+        margin-left: 10px;
+    }
+
+    .input-mini {
+        width: 60px;
+    }
+
+    .input-small {
+        width: 90px;
+    }
+
+    .input-medium {
+        width: 150px;
+    }
+
+    .input-large {
+        width: 210px;
+    }
+
+    .input-xlarge {
+        width: 270px;
+    }
+
+    .input-xxlarge {
+        width: 530px;
+    }
+
+    input[class*="span"],
+    select[class*="span"],
+    textarea[class*="span"],
+    .uneditable-input[class*="span"],
+    .row-fluid input[class*="span"],
+    .row-fluid select[class*="span"],
+    .row-fluid textarea[class*="span"],
+    .row-fluid .uneditable-input[class*="span"] {
+        float: none;
+        margin-left: 0;
+    }
+
+    .input-append input[class*="span"],
+    .input-append .uneditable-input[class*="span"],
+    .input-prepend input[class*="span"],
+    .input-prepend .uneditable-input[class*="span"],
+    .row-fluid input[class*="span"],
+    .row-fluid select[class*="span"],
+    .row-fluid textarea[class*="span"],
+    .row-fluid .uneditable-input[class*="span"],
+    .row-fluid .input-prepend [class*="span"],
+    .row-fluid .input-append [class*="span"] {
+        display: inline-block;
+    }
+
+    input,
+    textarea,
+    div[contenteditable="true"],
+    .uneditable-input {
+        margin-left: 0;
+    }
+
+    label.disabled {
+        color: $form-text-color-disabled;
+        cursor: default;
+    }
+
+    input[disabled],
+    select[disabled],
+    textarea[disabled],
+    input[readonly],
+    select[readonly],
+    textarea[readonly] {
+        cursor: not-allowed;
+        background-color: $form-input-background-disabled;
+    }
+
+    input[type="radio"][disabled],
+    input[type="checkbox"][disabled],
+    input[type="radio"][readonly],
+    input[type="checkbox"][readonly] {
+        background-color: transparent;
+    }
+
+    input:invalid,
+    div[contenteditable="true"]:invalid,
+    textarea:invalid,
+    select:invalid {
+        border-color: $form-input-border-error-color;
+    }
+
+    input:focus:invalid,
+    div[contenteditable="true"]:focus:invalid,
+    textarea:focus:invalid,
+    select:focus:invalid {
+        border-color: $form-input-border-error-color;
+    }
+
+    input:focus:invalid:focus,
+    div[contenteditable="true"]:focus:invalid:focus,
+    textarea:focus:invalid:focus,
+    select:focus:invalid:focus {
+        border-color: $form-input-border-error-color;
+    }
+
+    .input-append,
+    .input-prepend {
+        display: inline-block;
+        margin-bottom: 10px;
+        font-size: 0;
+        white-space: nowrap;
+        vertical-align: middle;
+    }
+
+    .input-append input,
+    .input-prepend input,
+    .input-append div[contenteditable="true"],
+    .input-prepend div[contenteditable="true"],
+    .input-append select,
+    .input-prepend select,
+    .input-append .uneditable-input,
+    .input-prepend .uneditable-input,
+    .input-append .red-ui-menu-dropdown,
+    .input-prepend .red-ui-menu-dropdown,
+    .input-append .popover,
+    .input-prepend .popover {
+        font-size: 14px;
+    }
+
+    .input-append input,
+    .input-prepend input,
+    .input-append div[contenteditable="true"],
+    .input-prepend div[contenteditable="true"],
+    .input-append select,
+    .input-prepend select,
+    .input-append .uneditable-input,
+    .input-prepend .uneditable-input {
+        position: relative;
+        margin-bottom: 0;
+        *margin-left: 0;
+        vertical-align: top;
+        border-radius: 0 4px 4px 0;
+    }
+
+    .input-append input:focus,
+    .input-prepend input:focus,
+    .input-append div[contenteditable="true"]:focus,
+    .input-prepend div[contenteditable="true"]:focus,
+    .input-append select:focus,
+    .input-prepend select:focus,
+    .input-append .uneditable-input:focus,
+    .input-prepend .uneditable-input:focus {
+        z-index: 2;
+    }
+
+    .input-append .add-on,
+    .input-prepend .add-on {
+        display: inline-block;
+        width: auto;
+        height: 20px;
+        min-width: 16px;
+        padding: 4px 5px;
+        font-size: 14px;
+        font-weight: normal;
+        line-height: 20px;
+        text-align: center;
+        background-color: $form-button-background;
+        border: 1px solid $form-input-border-color;
+    }
+
+    .input-append .add-on,
+    .input-prepend .add-on,
+    .input-append .btn,
+    .input-prepend .btn,
+    .input-append .btn-group > .dropdown-toggle,
+    .input-prepend .btn-group > .dropdown-toggle {
+        vertical-align: top;
+        border-radius: 0;
+    }
+
+    .input-prepend .add-on,
+    .input-prepend .btn {
+        margin-right: -1px;
+    }
+
+    .input-prepend .add-on:first-child,
+    .input-prepend .btn:first-child {
+        border-radius: 4px 0 0 4px;
+    }
+
+    .input-append input,
+    .input-append div[contenteditable="true"],
+    .input-append select,
+    .input-append .uneditable-input {
+        border-radius: 4px 0 0 4px;
+    }
+
+    .input-append input + .btn-group .btn:last-child,
+    .input-append select + .btn-group .btn:last-child,
+    .input-append .uneditable-input + .btn-group .btn:last-child {
+        border-radius: 0 4px 4px 0;
+    }
+
+    .input-append .add-on,
+    .input-append .btn,
+    .input-append .btn-group {
+        margin-left: -1px;
+    }
+
+    .input-append .add-on:last-child,
+    .input-append .btn:last-child,
+    .input-append .btn-group:last-child > .dropdown-toggle {
+        border-radius: 0 4px 4px 0;
+    }
+
+    .input-prepend.input-append input,
+    .input-prepend.input-append div[contenteditable="true"],
+    .input-prepend.input-append select,
+    .input-prepend.input-append .uneditable-input {
+        border-radius: 0;
+    }
+
+    .input-prepend.input-append input + .btn-group .btn,
+    .input-prepend.input-append select + .btn-group .btn,
+    .input-prepend.input-append .uneditable-input + .btn-group .btn {
+        border-radius: 0 4px 4px 0;
+    }
+
+    .input-prepend.input-append .add-on:first-child,
+    .input-prepend.input-append .btn:first-child {
+        margin-right: -1px;
+        border-radius: 4px 0 0 4px;
+    }
+
+    .input-prepend.input-append .add-on:last-child,
+    .input-prepend.input-append .btn:last-child {
+        margin-left: -1px;
+        border-radius: 0 4px 4px 0;
+    }
+
+    .input-prepend.input-append .btn-group:first-child {
+        margin-left: 0;
+    }
+
+    input.search-query {
+        padding-right: 14px;
+        padding-right: 4px \9;
+        padding-left: 14px;
+        padding-left: 4px \9;
+        /* IE7-8 doesn't have border-radius, so don't indent the padding */
+
+        margin-bottom: 0;
+        border-radius: 15px;
+    }
+
+    /* Allow for input prepend/append in search forms */
+
+    .form-search .input-append .search-query,
+    .form-search .input-prepend .search-query {
+        border-radius: 0;
+    }
+
+    .form-search .input-append .search-query {
+        border-radius: 14px 0 0 14px;
+    }
+
+    .form-search .input-append .btn {
+        border-radius: 0 14px 14px 0;
+    }
+
+    .form-search .input-prepend .search-query {
+        border-radius: 0 14px 14px 0;
+    }
+
+    .form-search .input-prepend .btn {
+        border-radius: 14px 0 0 14px;
+    }
+
+    .form-search input,
+    .form-inline input,
+    .form-horizontal input,
+    .form-search div[contenteditable="true"],
+    .form-inline div[contenteditable="true"],
+    .form-horizontal div[contenteditable="true"],
+    .form-search textarea,
+    .form-inline textarea,
+    .form-horizontal textarea,
+    .form-search select,
+    .form-inline select,
+    .form-horizontal select,
+    .form-search .help-inline,
+    .form-inline .help-inline,
+    .form-horizontal .help-inline,
+    .form-search .uneditable-input,
+    .form-inline .uneditable-input,
+    .form-horizontal .uneditable-input,
+    .form-search .input-prepend,
+    .form-inline .input-prepend,
+    .form-horizontal .input-prepend,
+    .form-search .input-append,
+    .form-inline .input-append,
+    .form-horizontal .input-append {
+        display: inline-block;
+        *display: inline;
+        margin-bottom: 0;
+        vertical-align: middle;
+        *zoom: 1;
+    }
+
+    .form-search .hide,
+    .form-inline .hide,
+    .form-horizontal .hide {
+        display: none;
+    }
+
+    .form-search label,
+    .form-inline label,
+    .form-search .btn-group,
+    .form-inline .btn-group {
+        display: inline-block;
+    }
+
+    .form-search .input-append,
+    .form-inline .input-append,
+    .form-search .input-prepend,
+    .form-inline .input-prepend {
+        margin-bottom: 0;
+    }
+
+    .form-search .radio,
+    .form-search .checkbox,
+    .form-inline .radio,
+    .form-inline .checkbox {
+        padding-left: 0;
+        margin-bottom: 0;
+        vertical-align: middle;
+    }
+
+    .form-search .radio input[type="radio"],
+    .form-search .checkbox input[type="checkbox"],
+    .form-inline .radio input[type="radio"],
+    .form-inline .checkbox input[type="checkbox"] {
+        float: left;
+        margin-right: 3px;
+        margin-left: 0;
+    }
+
+    .control-group {
+        margin-bottom: 10px;
+    }
+
+    legend + .control-group {
+        margin-top: 20px;
+        -webkit-margin-top-collapse: separate;
+    }
+
+    .form-horizontal .control-group {
+        margin-bottom: 20px;
+        *zoom: 1;
+    }
+
+    .form-horizontal .control-group:before,
+    .form-horizontal .control-group:after {
+        display: table;
+        line-height: 0;
+        content: "";
+    }
+
+    .form-horizontal .control-group:after {
+        clear: both;
+    }
+
+    .form-horizontal .control-label {
+        float: left;
+        width: 160px;
+        padding-top: 5px;
+        text-align: right;
+    }
+
+    .form-horizontal .controls {
+        *display: inline-block;
+        *padding-left: 20px;
+        margin-left: 180px;
+        *margin-left: 0;
+    }
+
+    .form-horizontal .controls:first-child {
+        *padding-left: 180px;
+    }
+
+    .form-horizontal .help-block {
+        margin-bottom: 0;
+    }
+
+    .form-horizontal input + .help-block,
+    .form-horizontal select + .help-block,
+    .form-horizontal textarea + .help-block,
+    .form-horizontal .uneditable-input + .help-block,
+    .form-horizontal .input-prepend + .help-block,
+    .form-horizontal .input-append + .help-block {
+        margin-top: 10px;
+    }
+
+    .form-horizontal .form-actions {
+        padding-left: 180px;
+    }
+
+    .form-row div[contenteditable="true"] {
+        white-space: nowrap;
+        overflow: hidden;
+    }
 }
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/header.scss b/packages/node_modules/@node-red/editor-client/src/sass/header.scss
index e7d2170b0..29ccc0b5e 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/header.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/header.scss
@@ -14,279 +14,259 @@
  * limitations under the License.
  **/
 
-$activeButton: #121212;
+.button {
+    @include disable-selection;
+}
 
-$deployButton: #8C101C;
-$deployButtonHover: #6E0A1E;
-$deployButtonActive: #4C0A17;
-
-$deployDisabledButton: #444;
-$deployDisabledButtonHover: #555;
-$deployDisabledButtonActive: #444;
-
-$headerMenuBackground: #121212;
-$headerMenuItemHover: #323232;
-$headerMenuItemDivider: #464646;
-
-#header {
+#red-ui-header {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 40px;
-    background: #000;
+    background: $header-background;
     box-sizing: border-box;
     padding: 0px 0px 0px 20px;
-    color: #C7C7C7;
+    color: $header-menu-color;
     font-size: 14px;
-}
 
-span.logo {
-    float: left;
-    margin-top: 5px;
-    font-size: 30px;
-    line-height: 30px;
-    text-decoration: none;
+    span.red-ui-header-logo {
+        float: left;
+        margin-top: 5px;
+        font-size: 30px;
+        line-height: 30px;
+        text-decoration: none;
 
-    span {
-        vertical-align: middle;
-        font-size: 16px !important;
-    }
-    img {
-        height: 18px;
-    }
-
-    a {
-        color: inherit;
-        &:hover {
-            text-decoration: none;
+        span {
+            vertical-align: middle;
+            font-size: 16px !important;
+            &:not(:first-child) {
+                margin-left: 5px;
+            }
         }
+        img {
+            height: 18px;
+        }
+
+        a {
+            color: inherit;
+            &:hover {
+                text-decoration: none;
+            }
+        }
+
     }
 
-}
-
-.header-toolbar {
-    padding: 0;
-    margin: 0;
-    list-style: none;
-    float: right;
-
-    > li {
-        display: inline-block;
+    .red-ui-header-toolbar {
         padding: 0;
         margin: 0;
-        position: relative;
+        list-style: none;
+        float: right;
 
-    }
-}
+        > li {
+            display: inline-block;
+            padding: 0;
+            margin: 0;
+            position: relative;
 
-.button {
-    @include disable-selection;
-}
-
-#header .button {
-    min-width: 20px;
-    text-align: center;
-    line-height: 40px;
-    display: inline-block;
-    font-size: 20px;
-    padding: 0px 12px;
-    text-decoration: none;
-    color: #C7C7C7;
-    margin: auto 5px;
-    vertical-align: middle;
-    border-left: 2px solid #000;
-    border-right: 2px solid #000;
-
-    &:hover {
-        border-color: $headerMenuItemHover;
-    }
-}
-
-#header .button-group {
-    display: inline-block;
-    margin: auto 15px;
-    vertical-align: middle;
-    clear: both;
-}
-#header .button-group > a {
-    display: inline-block;
-    position: relative;
-    float: left;
-    line-height: 22px;
-    font-size: 14px;
-    text-decoration: none;
-    padding: 4px 8px;
-    margin: 0;
-}
-
-.deploy-button {
-    background: $deployButton;
-    color: #eee !important;
-
-    &:hover {
-        background: $deployButtonHover;
-    }
-
-    &:active {
-        background: $deployButtonActive;
-        color: #ccc !important;
-    }
-}
-
-.deploy-button-spinner {
-    position: absolute;
-    left: 0;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    text-align: center;
-
-    img {
-        opacity: 0.8;
-        height: 100%;
-    }
-}
-
-#btn-deploy {
-
-    padding: 4px 12px;
-
-    &.disabled {
-        cursor: default;
-        background: $deployDisabledButton;
-        color: #999 !important;
-
-        .deploy-button-content>img {
-            opacity: 0.3;
-        }
-
-        &+ #btn-deploy-options {
-            background: $deployDisabledButton;
-            color: #ddd;
-        }
-        &+ #btn-deploy-options:hover {
-            background: $deployDisabledButtonHover;
-        }
-        &+ #btn-deploy-options:active {
-            background: $deployDisabledButton;
         }
     }
 
-    .deploy-button-content>img {
-        margin-right: 8px;
+    .button {
+        min-width: 20px;
+        text-align: center;
+        line-height: 40px;
+        display: inline-block;
+        font-size: 20px;
+        padding: 0px 12px;
+        text-decoration: none;
+        color: $header-menu-color;
+        margin: auto 5px;
+        vertical-align: middle;
+        border-left: 2px solid $header-background;
+        border-right: 2px solid $header-background;
+
+        &:hover {
+            border-color: $header-menu-item-hover;
+        }
+        &:active, &.active {
+            background: $header-button-background-active;
+        }
+        &:focus {
+            outline: none;
+        }
+    }
+
+    .button-group {
+        display: inline-block;
+        margin: auto 15px;
+        vertical-align: middle;
+        clear: both;
+        & > a {
+            display: inline-block;
+            position: relative;
+            float: left;
+            line-height: 22px;
+            font-size: 14px;
+            text-decoration: none;
+            padding: 4px 8px;
+            margin: 0;
+        }
+    }
+
+    .red-ui-deploy-button {
+        background: $deploy-button-background;
+        color: $deploy-button-color;
+
+        &:hover {
+            background: $deploy-button-background-hover;
+        }
+        &:focus {
+            outline: none;
+        }
+        &:active {
+            background: $deploy-button-background-active;
+            color: $deploy-button-color-active;
+        }
+    }
+
+    .red-ui-deploy-button-spinner {
+        position: absolute;
+        left: 0;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        text-align: center;
+
+        img {
+            opacity: 0.8;
+            height: 100%;
+        }
+    }
+
+    #red-ui-header-button-deploy {
+        padding: 4px 12px;
+        &.disabled {
+            cursor: default;
+            background: $deploy-button-background-disabled;
+            color: $deploy-button-color-disabled;
+
+            .red-ui-deploy-button-content>img {
+                opacity: 0.3;
+            }
+            &+ #red-ui-header-button-deploy-options {
+                background: $deploy-button-background-disabled;
+                color: $deploy-button-color-active;
+            }
+            &+ #red-ui-header-button-deploy-options:hover {
+                background: $deploy-button-background-disabled-hover;
+            }
+            &+ #red-ui-header-button-deploy-options:active {
+                background: $deploy-button-background-disabled;
+            }
+        }
+
+        .red-ui-deploy-button-content>img {
+            margin-right: 8px;
+        }
+    }
+
+    .red-ui-deploy-button-group.open {
+        #red-ui-header-button-deploy-options {
+            background: $header-button-background-active !important;
+        }
+    }
+
+    li.open .button {
+        background: $header-button-background-active;
+        border-color: $header-button-background-active;
+    }
+
+
+    ul.red-ui-menu-dropdown {
+        background: $header-menu-background;
+        border: 1px solid $header-menu-background;
+        width: 250px !important;
+        margin-top: 0;
+        li a {
+            color: $header-menu-color;
+            padding: 3px 40px;
+            img {
+                margin-right: 10px;
+                padding: 4px;
+                border: 3px solid transparent;
+            }
+
+            &.active img {
+                border: 3px solid $header-menu-item-border-active;
+            }
+
+            span.red-ui-menu-label-container {
+                width: 180px;
+                vertical-align: top;
+                display: inline-block;
+                text-indent: 0px;
+            }
+            span.red-ui-menu-label {
+                font-size: 14px;
+                display: inline-block;
+                text-indent: 0px;
+            }
+            span.red-ui-menu-sublabel {
+                color: $header-menu-sublabel-color;
+                font-size: 13px;
+                display: inline-block;
+                text-indent: 0px;
+            }
+        }
+        > li:hover > a,
+        > li:focus > a {
+            background: $header-menu-item-hover !important;
+        }
+        li.divider {
+            background: $headerMenuItemDivider;
+            border-bottom-color: $header-menu-item-hover;
+        }
+        li.disabled a {
+            color:  $header-menu-color-disabled;
+        }
+        > li.disabled:hover > a,
+        > li.disabled:focus > a {
+            background: none !important;
+        }
+    }
+    .red-ui-menu-dropdown-submenu>a:before {
+        border-right-color: $headerMenuCaret;
+    }
+
+    /* Deploy menu customisations */
+    ul#red-ui-header-button-deploy-options-submenu {
+        width: 300px !important;
+        li a {
+            padding: 10px 30px;
+            color: $header-menu-heading-color;
+            span.red-ui-menu-label {
+                font-size: 16px;
+                display: inline-block;
+                text-indent: 0px;
+            }
+            > i.fa {
+                display: none;
+            }
+        }
+    }
+    /* User menu customisations */
+    #usermenu-item-username > .red-ui-menu-label {
+        color: $header-menu-heading-color;
+    }
+
+    #red-ui-header-button-user .user-profile {
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: contain;
+        display: inline-block;
+        width: 40px;
+        height: 35px;
+        vertical-align: middle;
     }
 }
-
-.deploy-button-group.open {
-    #btn-deploy-options {
-        background: $activeButton !important;
-    }
-}
-
-
-#header .button {
-    &:active, &.active {
-        background: $activeButton;
-    }
-    &:focus {
-        outline: none;
-    }
-}
-
-#header li.open .button {
-    background: $activeButton;
-    border-color: $activeButton;
-}
-
-
-#header ul.dropdown-menu {
-    background: $headerMenuBackground;
-    border: 1px solid rgba(0,0,0,0.2);
-    width: 250px !important;
-    margin-top: 0;
-}
-
-#header ul.dropdown-menu li a {
-    color: #C7C7C7;
-    padding: 3px 40px;
-}
-
-#header ul.dropdown-menu li a img {
-    margin-right: 10px;
-    padding: 4px;
-    border: 3px solid rgba(0,0,0,0);
-}
-
-#header ul.dropdown-menu li a.active img {
-    border: 3px solid #777677;
-}
-
-#header ul.dropdown-menu li a span.menu-label-container {
-    width: 180px;
-    vertical-align: top;
-    display: inline-block;
-    text-indent: 0px;
-}
-#header ul.dropdown-menu li a span.menu-label {
-    font-size: 14px;
-    display: inline-block;
-    text-indent: 0px;
-}
-#header ul.dropdown-menu li a span.menu-sublabel {
-    color: #aeaeae;
-    font-size: 13px;
-    display: inline-block;
-    text-indent: 0px;
-}
-
-#header ul.dropdown-menu > li:hover > a,
-#header ul.dropdown-menu > li:focus > a {
-    background: $headerMenuItemHover !important;
-}
-
-#header ul.dropdown-menu li.divider {
-    background: $headerMenuItemDivider;
-    border-bottom-color: $headerMenuItemHover;
-}
-#header ul.dropdown-menu li.disabled a {
-    color: #666;
-}
-
-#header ul.dropdown-menu > li.disabled:hover > a,
-#header ul.dropdown-menu > li.disabled:focus > a {
-    background: none !important;
-}
-
-/* Deploy menu customisations */
-#header ul#btn-deploy-options-submenu {
-    width: 300px !important;
-}
-#header ul#btn-deploy-options-submenu li a span.menu-label {
-    font-size: 16px;
-    display: inline-block;
-    text-indent: 0px;
-}
-#header ul#btn-deploy-options-submenu li a {
-    padding: 10px 30px;
-    color: #fff;
-}
-#header ul#btn-deploy-options-submenu li a > i.fa {
-    display: none !important;
-}
-
-/* User menu customisations */
-#header ul#btn-usermenu-submenu li a#btn-username > .menu-label {
-    font-size: 16px;
-    color: #fff;
-}
-
-#btn-usermenu .user-profile {
-    background-position: center center;
-    background-repeat: no-repeat;
-    background-size: contain;
-    display: inline-block;
-    width: 40px;
-    height: 35px;
-    vertical-align: middle;
-}
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/jquery.scss b/packages/node_modules/@node-red/editor-client/src/sass/jquery.scss
index eb2dc6a1d..724dafab1 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/jquery.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/jquery.scss
@@ -16,11 +16,11 @@
 
 .ui-widget {
     font-size: 14px !important;
-    font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif !important;
+    font-family: $primary-font;
 }
 .ui-widget input, .ui-widget div[contenteditable="true"], .ui-widget select, .ui-widget textarea, .ui-widget button {
     font-size: 14px !important;
-    font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif !important;
+    font-family: $primary-font;
 }
 .ui-widget input, .ui-widget div[contenteditable="true"] {
     box-shadow: none;
@@ -39,7 +39,7 @@
 
 .ui-dialog {
     border-radius: 1px;
-    background: #fff;
+    background: $secondary-background;
     padding: 0;
     @include component-shadow;
 }
@@ -51,16 +51,20 @@
 }
 .ui-dialog .ui-dialog-titlebar {
     padding: 10px;
-    background: #f3f3f3;
+    background: $primary-background;
     border: none;
-    border-bottom: 1px solid #999;
+    border-bottom: 1px solid $primary-border-color;
     border-radius: 0;
 }
+.ui-dialog .ui-dialog-buttonpane.ui-widget-content {
+    background: $tertiary-background;
+
+}
 .ui-corner-all {
     border-radius: 1px;
 }
 .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
-    background: #f3f3f3;
+    background: $primary-background;
 }
 .ui-dialog-no-close .ui-dialog-titlebar-close {
     display: none;
@@ -80,8 +84,8 @@
     padding: 6px 14px;
     margin-right: 8px;
     border-radius: 2px;
-    color: $editor-button-color;
-    background: $editor-button-background;
+    color: $workspace-button-color;
+    background: $workspace-button-background;
 
     &.leftButton {
         float: left;
@@ -92,18 +96,18 @@
     }
 
     &.primary {
-        border-color: $editor-button-background-primary;
-        color: $editor-button-color-primary !important;
-        background: $editor-button-background-primary;
+        border-color: $workspace-button-background-primary;
+        color: $workspace-button-color-primary !important;
+        background: $workspace-button-background-primary;
         &:not(.disabled):hover {
-            border-color: $editor-button-background-primary-hover;
-            background: $editor-button-background-primary-hover;
-            color: $editor-button-color-primary !important;
+            border-color: $workspace-button-background-primary-hover;
+            background: $workspace-button-background-primary-hover;
+            color: $workspace-button-color-primary !important;
         }
         &.disabled {
             border-color: $form-input-border-color;
             color: $workspace-button-color-disabled !important;
-            background: $editor-button-background;
+            background: $workspace-button-background;
         }
     }
     &.disabled {
@@ -130,15 +134,12 @@
     border: 1px solid $form-input-border-color;
 }
 .ui-spinner input {
+    background: $form-input-background;
     margin: 0 17px 0 0;
     padding: 6px;
     border: none;
     border-top-right-radius: 0px;
     border-bottom-right-radius: 0px;
-
-    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-       -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-            box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
     &:focus {
         outline: none;
     }
@@ -150,3 +151,41 @@
     z-index: 100;
     opacity: 1;
 }
+
+.ui-state-default,
+.ui-widget-content .ui-state-default,
+.ui-widget-header .ui-state-default,
+.ui-button,
+html .ui-button.ui-state-disabled:hover,
+html .ui-button.ui-state-disabled:active {
+    border: 1px solid $secondary-border-color;
+    background: $form-button-background;
+}
+
+.ui-state-hover,
+.ui-widget-content .ui-state-hover,
+.ui-widget-header .ui-state-hover,
+.ui-state-focus,
+.ui-widget-content .ui-state-focus,
+.ui-widget-header .ui-state-focus,
+.ui-button:hover, .ui-button:focus {
+    border: 1px solid $secondary-border-color;
+    background: $workspace-button-background-hover;
+    color: $workspace-button-color-hover;
+}
+
+.ui-state-active,
+.ui-widget-content .ui-state-active,
+.ui-widget-header .ui-state-active,
+a.ui-button:active,
+.ui-button:active,
+.ui-button.ui-state-active:hover {
+    border: 1px solid $secondary-border-color;
+    background: $workspace-button-background-active;
+    font-weight: normal;
+    color: $workspace-button-color-active;
+}
+
+.ui-state-active .ui-icon, .ui-button:active .ui-icon {
+    background-image: url(../vendor/jquery/css/base/images/ui-icons_777777_256x240.png);
+}
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/keyboard.scss b/packages/node_modules/@node-red/editor-client/src/sass/keyboard.scss
index 27eca649f..8c4e5a3a8 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/keyboard.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/keyboard.scss
@@ -14,122 +14,113 @@
  * limitations under the License.
  **/
 
-#keyboard-help-dialog {
-    font-size: 0.9em;
-    padding-top: 10px;
 
-}
-
-#user-settings-tab-keyboard .red-ui-editableList-container {
-    border-radius: 0;
-    border: none;
-    padding: 0;
-}
-
-
-.keyboard-shortcut-entry.keyboard-shortcut-list-header {
-    padding:0 5px 0 5px;
-    div {
-        color: #666 !important;
-    }
-    .red-ui-searchBox-container {
-        width: calc(100% - 20px);
-    }
-    .keyboard-shortcut-entry-scope {
-        text-align: center;
-    }
-}
-
-.keyboard-shortcut-list-header {
-    border-bottom: 1px solid $primary-border-color;
-
-}
-.keyboard-shortcut-list {
-    position: absolute;
-    top:30px;
-    left:10px;
-    right:10px;
-    bottom:10px;
-    li {
+#red-ui-settings-tab-keyboard {
+    .red-ui-editableList-container {
+        border-radius: 0;
+        border: none;
         padding: 0;
-        .red-ui-editableList-item-content {
-            padding: 8px;
-            cursor: pointer;
+    }
+    .keyboard-shortcut-list-header {
+        padding:0 5px 0 5px;
+        border-bottom: 1px solid $primary-border-color;
+        div {
+            color: $header-text-color !important;
+        }
+        .red-ui-searchBox-container {
+            width: calc(100% - 20px);
+        }
+        .keyboard-shortcut-entry-scope {
+            text-align: center;
+        }
+
+    }
+    .keyboard-shortcut-list {
+        position: absolute;
+        top:30px;
+        left:10px;
+        right:10px;
+        bottom:10px;
+        li {
+            padding: 0;
+            .red-ui-editableList-item-content {
+                padding: 8px;
+                cursor: pointer;
+            }
+        }
+        li:hover {
+            background: $list-item-background-hover;
         }
     }
-    li:hover {
-        background: #f6f6f6;
-    }
-}
-.keyboard-shortcut-entry {
-    div {
-        display: inline-block;
-    }
-    // white-space: nowrap;
+    .keyboard-shortcut-entry {
+        div {
+            display: inline-block;
+        }
+        // white-space: nowrap;
 
-    select {
-        margin: 0;
-        width: calc(100% - 30px);
-        font-size: 0.9em;
-        margin-right: 5px;
+        select {
+            margin: 0;
+            width: calc(100% - 30px);
+            font-size: 0.9em;
+            margin-right: 5px;
+        }
     }
-}
-.keyboard-shortcut-entry-key {
-    width:160px;
-    vertical-align: middle;
-    input {
-        margin:0;
-        width: calc(100% - 5px);
-    }
-}
-.keyboard-shortcut-entry-text {
-    vertical-align: middle;
-    width: calc(100% - 160px - 100px - 10px);
-    overflow: hidden;
-    i {
-        color: #ccc;
-        margin-right: 5px;
-    }
-}
-.keyboard-shortcut-entry-scope {
-    width:100px;
-    color: #999;
-    vertical-align: middle;
-    text-align: right;
-}
-.keyboard-shortcut-entry:not(.keyboard-shortcut-list-header) {
-    .keyboard-shortcut-entry-scope {
-        font-size: 0.8em;
-    }
-}
-.keyboard-shortcut-entry-unassigned {
-    color: #999;
     .keyboard-shortcut-entry-key {
-        font-style: italic;
-    }
-}
-.keyboard-shortcut-entry-expanded {
-    .keyboard-shortcut-entry-key {
-        width: 150px;
+        width:160px;
+        vertical-align: middle;
+        input {
+            margin:0;
+            width: calc(100% - 5px);
+        }
     }
     .keyboard-shortcut-entry-text {
+        vertical-align: middle;
+        width: calc(100% - 160px - 100px - 10px);
+        overflow: hidden;
+        i {
+            color: $tertiary-text-color;
+            margin-right: 5px;
+        }
     }
     .keyboard-shortcut-entry-scope {
-        width: 110px;
+        width:100px;
+        color: $tertiary-text-color;
+        vertical-align: middle;
+        text-align: right;
     }
-    span {
-        display: none;
+    .keyboard-shortcut-entry:not(.keyboard-shortcut-list-header) {
+        .keyboard-shortcut-entry-scope {
+            font-size: 0.8em;
+        }
+    }
+    .keyboard-shortcut-entry-unassigned {
+        color: $tertiary-text-color;
+        .keyboard-shortcut-entry-key {
+            font-style: italic;
+        }
+    }
+    .keyboard-shortcut-entry-expanded {
+        background: $list-item-background-selected;
+        .keyboard-shortcut-entry-key {
+            width: 150px;
+        }
+        .keyboard-shortcut-entry-text {
+        }
+        .keyboard-shortcut-entry-scope {
+            width: 110px;
+        }
+        span {
+            display: none;
+        }
     }
-}
-.keyboard-shortcut-edit  {
 }
 .help-key {
-    border: 1px solid #ddd;
+    border: 1px solid $tertiary-border-color;
     padding: 4px;
     border-radius: 3px;
-    background: #f6f6f6;
-    font-family: Courier, monospace;
-    box-shadow: #999 1px 1px 1px;
+    background: $tertiary-background;
+    font-family: $monospace-font;
+    box-shadow: $shade-color  1px 1px 1px;
 }
 .help-key-block {
     white-space: nowrap;
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/library.scss b/packages/node_modules/@node-red/editor-client/src/sass/library.scss
index 6b832f461..0cfca1952 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/library.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/library.scss
@@ -14,76 +14,69 @@
  * limitations under the License.
  **/
 
-#node-select-library {
-    overflow: hidden;
-}
-#node-select-library ul {
-    list-style: none;
-    padding: 0px;
-    margin: 2px;
-}
-#node-select-library li {
-    cursor: pointer;
-}
-#node-select-library li.list-selected {
-    background: #eee;
-}
-#node-select-library li.list-hover {
-    background: #ffffd0;
-}
-
-.clipboard-import-error {
+.red-ui-clipboard-import-error {
     pre {
         margin: 10px 0;
         border: none;
-        color: #666;
+        color: $primary-text-color;
         span {
             padding: 5px 0;
         }
         span.error {
             padding: 5px;
-            background: #e25151;
-            color: white;
+            border: 1px solid $form-input-border-error-color;
             margin: 0 1px;
         }
     }
 }
-.clipboard-dialog-tab-clipboard {
+.red-ui-clipboard-dialog-tab-clipboard {
     padding: 10px;
     textarea {
          resize: none;
          width: 100%;
          border-radius: 4px;
-         font-family: monospace !important;
+         font-family: $monospace-font !important;
          font-size: 13px !important;
          height: 300px;
          line-height: 1.3em;
          padding: 6px 10px;
-         background: #F3E7E7;
-         color: #533;
+         background: $clipboard-textarea-background;
     }
 }
 
-.clipboard-dialog-tabs-content {
+.red-ui-clipboard-dialog-tabs {
+    position: absolute;
+    top:0;
+    left:0;
+    bottom:0;
+    width:120px;
+}
+
+.red-ui-clipboard-dialog-tabs-content {
     position: absolute;
     top: 0;
     left: 120px;
     right: 0;
     bottom: 0;
     padding: 0;
-    background: white;
+    background: $form-input-background;
     &>div {
         height: calc(100% - 20px)
     }
 }
+.red-ui-clipboard-dialog-box {
+    height: 400px;
+    position:relative;
+    border:1px solid $primary-border-color;
+}
 
-.clipboard-dialog-tab-library {
+.red-ui-clipboard-dialog-tab-library {
     .form-row {
         margin-left: 10px;
     }
 }
 
-#clipboard-dialog {
+#red-ui-clipboard-dialog {
     form {
         margin-bottom: 0;
     }
@@ -91,19 +84,19 @@
         margin-bottom: 0;
     }
 }
-#clipboard-dialog-tab-library-name {
+#red-ui-clipboard-dialog-tab-library-name {
     width: calc(100% - 120px);
 }
-#clipboard-dialog-export-tab-library-browser {
+#red-ui-clipboard-dialog-export-tab-library-browser {
     height: calc(100% - 40px);
     margin-bottom: 10px;
     border-bottom: 1px solid $primary-border-color;
     box-sizing: border-box;
 }
-#clipboard-dialog-import-tab-library {
+#red-ui-clipboard-dialog-import-tab-library {
     height: 100%;
 }
-#clipboard-dialog-import-tab-library-browser {
+#red-ui-clipboard-dialog-import-tab-library-browser {
     height: 100%;
     box-sizing: border-box;
 }
@@ -113,7 +106,7 @@
     position: relative;
     height: 100%;
     .red-ui-treeList-container {
-        background: white;
+        background: $secondary-background;
         border: none;
         border-radius: 0;
         li {
@@ -136,29 +129,29 @@
     }
 }
 
-#node-dialog-library-save-browser {
+#red-ui-library-dialog-save-browser {
     height: calc(100% - 60px);
     border: 1px solid $primary-border-color;
     margin-bottom: 10px;
 }
-#node-dialog-library-load-browser {
+#red-ui-library-dialog-load-browser {
     // border: 1px solid $primary-border-color;
 }
-#node-dialog-library-load-panes {
+#red-ui-library-dialog-load-panes {
     border: 1px solid $primary-border-color;
 }
 
 
-#node-dialog-library-load-preview {
+#red-ui-library-dialog-load-preview {
     height: 100%;
 }
 
-#node-dialog-library-load-preview-text {
+#red-ui-library-dialog-load-preview-text {
     box-sizing: border-box;
 }
-#node-dialog-library-load-preview-details {
+#red-ui-library-dialog-load-preview-details {
     box-sizing: border-box;
-    .node-info-node-row:first-child {
+    .red-ui-help-info-row:first-child {
         border-top: none;
     }
 }
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/mixins.scss b/packages/node_modules/@node-red/editor-client/src/sass/mixins.scss
index aacda031c..d7d20db0b 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/mixins.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/mixins.scss
@@ -73,11 +73,10 @@
     margin:0;
     cursor:pointer;
 
-    // &.selected:not(.disabled):not(:disabled) {
-    //     color: $workspace-button-color-selected !important;
-    //     background: $workspace-button-background-active;
-    //     background: #9f9;
-    // }
+    &.selected:not(.disabled):not(:disabled) {
+        color: $workspace-button-color-selected !important;
+        background: $workspace-button-background-active;
+    }
     .button-group &:not(:first-child) {
         border-left: none;
         border-top-left-radius: 0;
@@ -110,24 +109,24 @@
     }
 
     &.primary {
-        border-color: $editor-button-background-primary;
-        color: $editor-button-color-primary !important;
-        background: $editor-button-background-primary;
+        border-color: $workspace-button-background-primary;
+        color: $workspace-button-color-primary !important;
+        background: $workspace-button-background-primary;
         &.disabled, &.ui-state-disabled {
             background: none;
-            color: $editor-button-color !important;
+            color: $workspace-button-color !important;
             border-color: $form-input-border-color;
         }
         &:not(.disabled):not(.ui-button-disabled):hover {
-            border-color: $editor-button-background-primary-hover;
-            background: $editor-button-background-primary-hover;
-            color: $editor-button-color-primary !important;
+            border-color: $workspace-button-background-primary-hover;
+            background: $workspace-button-background-primary-hover;
+            color: $workspace-button-color-primary !important;
         }
     }
     &.secondary {
         background: none;
         &:not(:hover) {
-            border-color: rgba(0,0,0,0);
+            border-color: transparent;
         }
 
     }
@@ -144,59 +143,23 @@
 
 @mixin workspace-button-toggle {
     @include workspace-button;
-
-    &.single {
-        color: $workspace-button-color !important;
-        background: $workspace-button-background;
-
-        &.selected:not(.disabled):not(:disabled) {
-            color: $workspace-button-toggle-color !important;
-            background: $workspace-button-background-active;
-        }
-    }
     &:not(.single) {
-        color: $workspace-button-toggle-color !important;
-        background:$workspace-button-background;
         margin-bottom: 1px;
-
         &.selected:not(.disabled):not(:disabled) {
-            color: $workspace-button-toggle-color-selected !important;
-            background: $workspace-button-background-active;
             border-bottom-width: 2px;
             border-bottom-color: $form-input-border-selected-color;
             margin-bottom: 0;
             cursor: default;
         }
     }
-    &.disabled,&:disabled {
-        color: $workspace-button-toggle-color-disabled !important;
-    }
 }
 @mixin editor-button {
     @include workspace-button;
     font-size: 14px;
     padding: 6px 14px;
     margin-right: 8px;
-    color: $editor-button-color !important;
-    background: $editor-button-background;
-
-    // &.primary {
-    //     border-color: $editor-button-background-primary;
-    //     color: $editor-button-color-primary !important;
-    //     background: $editor-button-background-primary;
-    //     &.disabled, &.ui-state-disabled {
-    //         background: none;
-    //         color: $editor-button-color !important;
-    //         border-color: $form-input-border-color;
-    //     }
-    //     &:not(.disabled):not(.ui-button-disabled):hover {
-    //         border-color: $editor-button-background-primary-hover;
-    //         background: $editor-button-background-primary-hover;
-    //         color: $editor-button-color-primary !important;
-    //     }
-    // }
     &:not(.disabled):hover {
-        //color: $editor-button-color;
+        //color: $workspace-button-color;
     }
     &.disabled {
         background: none;
@@ -204,8 +167,6 @@
     &.disabled:focus {
         outline: none;
     }
-
-
     &.leftButton {
         float: left;
         margin-top: 1px;
@@ -220,14 +181,14 @@
 
 @mixin component-footer {
     border-top: 1px solid $primary-border-color;
-    background: #f3f3f3;
+    background: $primary-background;
     text-align: right;
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     height: 25px;
-    line-height: 23px;
+    line-height: 25px;
     padding: 0 10px;
     user-select: none;
 
@@ -239,10 +200,11 @@
 
 @mixin component-footer-button {
     @include workspace-button;
-    font-size: 11px;
-    line-height: 17px;
-    width: 18px;
-    height: 18px;
+    font-size: 12px;
+    line-height: 18px;
+    width: 19px;
+    height: 19px;
+    padding: 0;
     &.text-button {
         width: auto;
         padding: 0 5px;
@@ -250,10 +212,11 @@
 }
 @mixin component-footer-button-toggle {
     @include workspace-button-toggle;
-    font-size: 11px;
-    line-height: 17px;
-    height: 18px;
-    width: 18px;
+    font-size: 12px;
+    line-height: 18px;
+    height: 19px;
+    width: 19px;
+    padding: 0;
     &.text-button {
         width: auto;
         padding: 0 5px;
@@ -261,8 +224,7 @@
 }
 
 @mixin component-shadow {
-    border: 1px solid $secondary-border-color;
-    box-shadow: 1px 1px 4px rgba(0,0,0,0.2);
+    box-shadow: 1px 1px 4px $shadow;
 
 }
 
@@ -275,6 +237,6 @@
     background: $shade-color;
     z-index: 5;
 }
-.component-shade {
+.red-ui-shade {
     @include shade
 }
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/notifications.scss b/packages/node_modules/@node-red/editor-client/src/sass/notifications.scss
index 31a9d62ae..0612dbc70 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/notifications.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/notifications.scss
@@ -14,7 +14,7 @@
  * limitations under the License.
  **/
 
-#notifications {
+#red-ui-notifications {
     z-index: 100;
     width: 500px;
     margin-left: -250px;
@@ -22,45 +22,45 @@
     position: absolute;
     top: 1px;
 }
-.notification {
+.red-ui-notification {
     box-sizing: border-box;
     position: relative;
     padding: 14px 18px;
     margin-bottom: 4px;
-    box-shadow: 0 1px 1px 1px rgba(0,0,0, 0.15);
-    background-color: #fff;
-    color: #666;
-    border: 1px solid #325C80;
+    box-shadow: 0 1px 1px 1px $shadow;
+    background-color: $secondary-background;
+    color: $primary-text-color;
+    border: 1px solid $notification-border-default;
     border-left-width: 16px;
     overflow: hidden;
 }
-.notification p:first-child {
+.red-ui-notification p:first-child {
     font-size: 1.1em;
     font-weight: 400;
 }
-.notification a {
+.red-ui-notification a {
     text-decoration: none;
     &:hover {
         text-decoration: underline;
     }
 }
 
-.notification-success {
-    border-color: #4B8400;
+.red-ui-notification-success {
+    border-color: $notification-border-success;
 }
-.notification-warning {
-    border-color: #D74108;
+.red-ui-notification-warning {
+    border-color: $notification-border-warning;
 }
-.notification-error {
-    border-color: #AD1625;
+.red-ui-notification-error {
+    border-color: $notification-border-error;
 }
 
-.notification-shake-horizontal {
-    -webkit-animation: notification-shake-horizontal 0.3s steps(2, end) both;
-            animation: notification-shake-horizontal 0.3s steps(2, end) both;
+.red-ui-notification-shake-horizontal {
+    -webkit-animation: red-ui-notification-shake-horizontal 0.3s steps(2, end) both;
+            animation: red-ui-notification-shake-horizontal 0.3s steps(2, end) both;
 }
 
-@-webkit-keyframes notification-shake-horizontal {
+@-webkit-keyframes red-ui-notification-shake-horizontal {
     0%,
     100% {
         -webkit-transform: translateX(0);
@@ -88,7 +88,7 @@
     //     transform: translateX(-1px);
     // }
 }
-@keyframes notification-shake-horizontal {
+@keyframes red-ui-notification-shake-horizontal {
     0%,
     100% {
         -webkit-transform: translateX(0);
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/palette-editor.scss b/packages/node_modules/@node-red/editor-client/src/sass/palette-editor.scss
index b99b732b0..7e167e4a4 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/palette-editor.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/palette-editor.scss
@@ -14,11 +14,11 @@
  * limitations under the License.
  **/
 
-#user-settings-tab-palette {
+#red-ui-settings-tab-palette {
     height: 100%;
 }
 
-#palette-editor {
+#red-ui-palette-editor {
     text-align: left;
     position: absolute;
     top: 0px;
@@ -27,7 +27,7 @@
     left:0;
     padding: 0;
     box-sizing:border-box;
-    background: #fff;
+    background: $secondary-background;
 
     .red-ui-editableList-container {
         border: none;
@@ -39,21 +39,25 @@
             // border: none;
             // border-top: 1px solid $primary-border-color;
             padding: 0px;
-            .disabled {
-                background: #f3f3f3;
+            .red-ui-button {
+                min-width: 60px;
+            }
 
-                .palette-module-name {
+            .disabled {
+                // background: $secondary-background-inactive;//f3f3f3;
+
+                .red-ui-palette-module-name {
                     font-style: italic;
-                    color: #aaa;
+                    color: $tertiary-text-color;
                 }
-                .palette-module-version {
-                    color: #aaa;
+                .red-ui-palette-module-version {
+                    color: $tertiary-text-color;
                 }
-                .palette-module-errors .fa-warning {
+                .red-ui-palette-module-errors .fa-warning {
                     opacity: 0.5;
                 }
-                ul.palette-module-error-list li {
-                    color: #aaa;
+                ul.red-ui-palette-module-error-list li {
+                    color: $tertiary-text-color;
                 }
 
 
@@ -67,65 +71,55 @@
         }
 
     }
-    .palette-editor-tab {
+    .red-ui-palette-editor-tab {
         position:absolute;
         top:35px;
         left:0;
         right:0;
         bottom:0
     }
-    .palette-editor-toolbar {
-        background: #f3f3f3;
+    .red-ui-palette-editor-toolbar {
+        background: $primary-background;
         box-sizing: border-box;
         padding: 8px 10px;
         border-bottom: 1px solid $primary-border-color;
         text-align: right;
     }
-    .palette-module-shade-status {
-        color: #666;
+    .red-ui-palette-module-shade-status {
+        color: $secondary-text-color;
     }
-    .palette-module-updated {
+    .red-ui-palette-module-updated {
         margin-left: 10px;
     }
-    .palette-module-link {
+    .red-ui-palette-module-link {
         margin-left: 5px;
     }
 
-    .palette-module-description {
+    .red-ui-palette-module-description {
         margin-left: 20px;
         font-size: 0.9em;
-        color: #999;
+        color: $secondary-text-color;
     }
-    .palette-module-link {
+    .red-ui-palette-module-link {
     }
-    .palette-module-set-button-group {
+    .red-ui-palette-module-set-button-group {
     }
-    .palette-module-count {
-        border-radius: 4px;
-        background: #eee;
-        padding: 2px 8px;
-        font-size: 12px;
-    }
-    .palette-module-content {
+    .red-ui-palette-module-content {
         display: none;
         padding: 10px 3px;
     }
-    i.fa.palette-module-node-chevron {
+    i.fa.red-ui-palette-module-node-chevron {
         width: 8px;
         margin-right: 0;
         transform: rotate(0deg);
         transition: transform 0.2s ease-in-out;
     }
     .expanded {
-        i.fa.palette-module-node-chevron {
+        i.fa.red-ui-palette-module-node-chevron {
             transform: rotate(90deg);
         }
-
-        .palette-module-set-button {
-            background:#f3f3f3 !important;
-        }
     }
-    .palette-module-set {
+    .red-ui-palette-module-set {
         border:1px solid $secondary-border-color;
         border-radius: 0;
         padding: 5px;
@@ -143,35 +137,35 @@
         }
     }
 
-    .palette-module-type {
-        color: #666;
+    .red-ui-palette-module-type {
+        color: $secondary-text-color;
         padding-left: 5px;
         font-size: 0.9em;
         @include enable-selection;
     }
-    .palette-module-type-swatch {
+    .red-ui-palette-module-type-swatch {
         display: inline-block;
         width: 12px;
         height: 12px;
         border-radius: 3px;
         vertical-align: middle;
         margin-right: 5px;
-        background: #fff;
-        border: 1px solid #fff;
+        background: $primary-background;
+        border: 1px dashed $secondary-border-color;
     }
-    .palette-module-set-button-group {
+    .red-ui-palette-module-set-button-group {
         position: absolute;
         right: 4px;
         top: 4px;
     }
 
-    .palette-module-set-disabled {
-        background: #eee;
-        .palette-module-type {
-            color: #999;
+    .red-ui-palette-module-set-disabled {
+        background: $list-item-background-disabled;
+        .red-ui-palette-module-type {
+            color: $secondary-text-color-disabled-active;
         }
     }
-    .palette-module-more {
+    .red-ui-palette-module-more {
         padding: 0 !important;
         margin-top: 10px;
         margin-bottom: 10px;
@@ -180,7 +174,7 @@
             display: block;
             text-align: center;
             padding: 12px 8px;
-            color: #AD1625;
+            color: $text-color-warning;
 
             &:hover {
                 text-decoration: none;
@@ -190,11 +184,11 @@
     }
 
 }
-.palette-module-meta {
-    color: #666;
+.red-ui-palette-module-meta {
+    color: $secondary-text-color;
     position: relative;
     &.disabled {
-        color: #ccc;
+        color: $secondary-text-color-disabled;
     }
 
     .fa {
@@ -203,23 +197,17 @@
         margin-right: 5px;
     }
 }
-.palette-module-name {
+.red-ui-palette-module-name {
+    color: $primary-text-color;
     white-space: nowrap;
     @include enable-selection;
 }
-.palette-module-version, .palette-module-updated, .palette-module-link {
+.red-ui-palette-module-version, .red-ui-palette-module-updated, .red-ui-palette-module-link {
     font-style:italic;
     font-size: 0.8em;
     @include enable-selection;
 }
-.palette-module-section {
-    padding:0 !important;
-    background: #f9f9f9 !important;
-    font-size: 0.9em;
-    color: #666;
-
-}
-.palette-module-button-group {
+.red-ui-palette-module-button-group {
     position: absolute;
     right: 0;
     bottom: 0;
@@ -227,10 +215,10 @@
         margin-left: 5px;
     }
 }
-.palette-module-meta .fa-warning {
-    color: #AD1625;
+.red-ui-palette-module-meta .fa-warning {
+    color: $text-color-warning;
 }
-ul.palette-module-error-list {
+ul.red-ui-palette-module-error-list {
     display: inline-block;
     list-style-type: none;
     margin: 0;
@@ -241,11 +229,11 @@ ul.palette-module-error-list {
     }
 }
 
-.palette-module-shade {
+.red-ui-palette-module-shade {
     @include shade;
     text-align: center;
     padding-top: 20px;
 }
-#palette-module-install-shade {
+#red-ui-palette-module-install-shade {
     padding-top: 80px;
 }
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/palette.scss b/packages/node_modules/@node-red/editor-client/src/sass/palette.scss
index 78b2a73ee..f9a234dc5 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/palette.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/palette.scss
@@ -15,12 +15,12 @@
  **/
 
 
-#palette {
+#red-ui-palette{
     position: absolute;
     top: 0px;
     bottom: 0px;
     left:0px;
-    background: #f3f3f3;
+    background: $primary-background;
     width: 180px;
     text-align: center;
     @include disable-selection;
@@ -28,30 +28,18 @@
     transition: width 0.2s ease-in-out;
 }
 
-.palette-closed {
-    #palette { width: 8px; }
-    #palette-search { display: none; }
-    #palette-container { display: none; }
-    #palette-collapse-all { display: none; }
-    #palette-expand-all { display: none; }
-}
-
-.palette-expanded {
-    & #palette {
-        width: 380px;
-        box-shadow: 1px 0 6px rgba(0,0,0,0.1);
+.red-ui-palette-closed {
+    #red-ui-palette {
+        width: 8px;
+        .red-ui-component-footer {
+            display: none;
+        }
     }
-    & #workspace { left: 379px !important; }
-    & #palette-collapse-all { display: none; }
-    & #palette-expand-all { display: none; }
-    & #palette-container { display: none !important; }
-    & #palette-search { display: none !important; }
-    & #palette-edit { background: $workspace-button-background-active }
-    & #palette-editor { display: block !important }
+    #red-ui-palette-search { display: none; }
+    #red-ui-palette-container { display: none; }
 }
 
-
-.palette-scroll {
+.red-ui-palette-scroll {
     position: absolute;
     top: 35px;
     right: 0;
@@ -61,13 +49,13 @@
     overflow-y: auto;
     box-sizing:border-box;
 }
-#palette > .palette-spinner {
+#red-ui-palette> .red-ui-palette-spinner {
     padding-top: 80px;
 }
-.palette-search {
+.red-ui-palette-search {
     position: relative;
     overflow: hidden;
-    background: #ffffff;
+    background: $secondary-background;
     text-align: center;
     height: 35px;
     padding: 3px;
@@ -75,24 +63,18 @@
     box-sizing:border-box;
 }
 
-#palette-footer {
-    @include component-footer;
+.red-ui-palette-category {
+    border-bottom: 1px solid $secondary-border-color;
 }
-.palette-button {
-    @include component-footer-button;
-}
-
-.palette-category {
-    border-bottom: 1px solid #ccc;
-}
-.palette-content {
-    background: #fff;
+.red-ui-palette-content {
+    background: $palette-content-background;
     padding: 3px;
 }
 
-.palette-header {
+.red-ui-palette-header {
     position: relative;
     background: $palette-header-background;
+    color: $palette-header-color;
     cursor: pointer;
     text-align: left;
     padding: 9px;
@@ -104,7 +86,7 @@
         background: $palette-header-background !important;
     }
 }
-.palette-header > i {
+.red-ui-palette-header > i {
     position: absolute;
     left: 11px;
     top: 12px;
@@ -115,15 +97,16 @@
     -moz-transform: rotate(-90deg);
     -o-transform: rotate(-90deg);
 }
-.palette-header i.expanded {
+.red-ui-palette-header i.expanded {
     -webkit-transform: rotate(0deg);
     -moz-transform: rotate(0deg);
     -o-transform: rotate(0deg);
 }
-.palette-header span {
+.red-ui-palette-header span {
     clear: both;
 }
-.palette_label {
+.red-ui-palette-label {
+    color: $node-label-color;
     font-size: 13px;
     margin: 4px 0 4px 32px;
     line-height: 20px;
@@ -131,66 +114,78 @@
     text-align: center;
     @include disable-selection;
 }
-.palette_label_right {
+.red-ui-palette-label-right {
     margin: 4px 32px 4px 0;
 }
 
-.palette_node {
-    display: block;
-    cursor:move;
-    background: #ddd;
-    margin: 10px auto;
+.red-ui-palette-node {
+    display: inline-block;
+    cursor: move;
+    background: $secondary-background;
+    margin: 5px auto;
     height: 25px;
     border-radius: 5px;
-    border: 1px solid #999;
+    border: 1px solid $node-border;
     background-position: 5% 50%;
     background-repeat: no-repeat;
     width: 120px;
     background-size: contain;
     position: relative;
+    &:first-child {
+        margin-top: 10px;
+    }
+    &:last-child {
+        margin-bottom: 10px;
+    }
 }
-.palette_node:hover {
+.red-ui-palette-node:hover {
+    margin: 4px auto;
     border-color: $node-selected-color;
-    background-color: #eee;
+    border-width: 2px;
+    &:first-child {
+        margin-top: 9px;
+    }
+    &:last-child {
+        margin-bottom: 9px;
+    }
 }
-.palette_port {
+.red-ui-palette-port {
     position: absolute;
     top:8px;
     left: -5px;
     box-sizing: border-box;
     -moz-box-sizing: border-box;
-    background:#d9d9d9;
+    background: $node-port-background;
     border-radius: 3px;
     width: 10px;
     height: 10px;
-    border: 1px solid #999;
+    border: 1px solid $node-border;
 }
-.palette_port_output {
+.red-ui-palette-port-output {
     left:auto;
     right: -6px;
 }
 
-.palette_node:hover .palette_port {
-    border-color: #999;
-    background-color: #eee;
+.red-ui-palette-node:hover .red-ui-palette-port {
+    background-color: $node-port-background-hover;
 }
-.palette_icon_container {
+.red-ui-palette-icon-container {
     position: absolute;
     text-align: center;
     top:0;
     bottom:0;
     left:0;
     width: 30px;
-    border-right: 1px solid rgba(0,0,0,0.1);
-    background-color: rgba(0,0,0,0.05);
+    border-right: 1px solid $node-icon-background-color;
+    background-color: $node-icon-background-color;
 }
-.palette_icon_container_right {
+.red-ui-palette-icon-container-right {
     left: auto;
     right: 0;
     border-right: none;
-    border-left: 1px solid rgba(0,0,0,0.1);
+    border-left: 1px solid $node-icon-background-color;
 }
-.palette_icon {
+.red-ui-palette-icon {
     display: inline-block;
     width: 20px;
     height: 100%;
@@ -198,13 +193,13 @@
     background-size: contain;
     background-repeat: no-repeat;
 }
-.palette_icon_fa {
+.red-ui-palette-icon-fa {
     color: white;
     position: absolute;
     top: 7px;
     left: 3px;
 }
-.palette_node_small {
+.red-ui-palette-node-small {
     display: inline-block;
     position: relative;
     width: 18px;
@@ -213,15 +208,15 @@
     vertical-align: middle;
     cursor: default;
 
-    .palette_icon_container {
+    .red-ui-palette-icon-container {
         width: 18px;
         border-right: none;
     }
-    .palette_icon {
+    .red-ui-palette-icon {
         margin-left: -1px;
         width: 15px;
     }
-    .palette_icon_fa {
+    .red-ui-palette-icon-fa {
         top: 2px;
         left: 1px;
     }
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/panels.scss b/packages/node_modules/@node-red/editor-client/src/sass/panels.scss
index b6b98e6ac..9f99db5d4 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/panels.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/panels.scss
@@ -30,7 +30,7 @@
     height: 7px;
     box-sizing: border-box;
     cursor: ns-resize;
-    background: $background-color url(images/grip.png) no-repeat 50% 50%;
+    background: $primary-background url(images/grip.png) no-repeat 50% 50%;
 }
 
 
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/popover.scss b/packages/node_modules/@node-red/editor-client/src/sass/popover.scss
index d703b29a7..e87eb7502 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/popover.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/popover.scss
@@ -25,6 +25,7 @@
     color: $popover-color;
     border-radius: 4px;
     z-index: 1000;
+    font-family: $primary-font;
     font-size: 14px;
     line-height: 1.4em;
     @include component-shadow;
@@ -59,26 +60,26 @@
 }
 
 .red-ui-popover.red-ui-popover-right:after {
-    border-color: rgba(136, 183, 213, 0);
+    border-color: transparent;
     border-right-color: $popover-background;
     border-width: 10px;
     margin-top: -10px;
 }
 .red-ui-popover.red-ui-popover-right:before {
-    border-color: rgba(194, 225, 245, 0);
+    border-color: transparent;
     border-right-color: $popover-background;
     border-width: 11px;
     margin-top: -11px;
 }
 
 .red-ui-popover.red-ui-popover-left:after {
-    border-color: rgba(136, 183, 213, 0);
+    border-color: transparent;
     border-left-color: $popover-background;
     border-width: 10px;
     margin-top: -10px;
 }
 .red-ui-popover.red-ui-popover-left:before {
-    border-color: rgba(194, 225, 245, 0);
+    border-color: transparent;
     border-left-color: $popover-background;
     border-width: 11px;
     margin-top: -11px;
@@ -86,26 +87,26 @@
 
 
 .red-ui-popover.red-ui-popover-bottom:after {
-    border-color: rgba(136, 183, 213, 0);
+    border-color: transparent;
     border-bottom-color: $popover-background;
     border-width: 10px;
     margin-left: -10px;
 }
 .red-ui-popover.red-ui-popover-bottom:before {
-    border-color: rgba(194, 225, 245, 0);
+    border-color: transparent;
     border-bottom-color: $popover-background;
     border-width: 11px;
     margin-left: -11px;
 }
 
 .red-ui-popover.red-ui-popover-top:after {
-    border-color: rgba(136, 183, 213, 0);
+    border-color: transparent;
     border-top-color: $popover-background;
     border-width: 10px;
     margin-left: -10px;
 }
 .red-ui-popover.red-ui-popover-top:before {
-    border-color: rgba(194, 225, 245, 0);
+    border-color: transparent;
     border-top-color: $popover-background;
     border-width: 11px;
     margin-left: -11px;
@@ -140,27 +141,24 @@
 
 .red-ui-popover-key {
     font-size: 11px;
-    font-family: monospace;
+    font-family: $monospace-font;
     margin-left: 3px;
-    border: 1px solid #999;
+    border: 1px solid $popover-color;
     border-radius:3px;
     padding: 1px 2px;
 }
 
-.red-ui-popover .editor-button {
-    &:not(.primary) {
-        color: #444 !important;
-        border-color: rgba(0,0,0,0);
-    }
+.red-ui-popover a.red-ui-button,
+.red-ui-popover button.red-ui-button {
     &.primary {
-        border-color: #bbb;
+        border-color: $popover-button-border-color;
     }
-    &.primary:hover {
-        border-color: #666 !important;
+    &.primary:not(.disabled):not(.ui-button-disabled):hover {
+        border-color: $popover-button-border-color-hover;
     }
 }
 .red-ui-popover code {
     border: none;
     background: none;
-    color: #ccc;
+    color: $tertiary-text-color;
 }
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/projects.scss b/packages/node_modules/@node-red/editor-client/src/sass/projects.scss
index 3ef582bc3..9b1005f22 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/projects.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/projects.scss
@@ -14,28 +14,28 @@
  * limitations under the License.
  **/
 
-#projects-dialog {
+#red-ui-projects-dialog {
     .red-ui-editableList-container {
         padding: 0px;
     }
 
 }
-#project-settings-tab-settings {
+#red-ui-project-settings-tab-settings {
     overflow-y: scroll;
 }
-.sidebar-version-control-shade {
-    background: #f3f3f3;
+.red-ui-sidebar-vc-shade {
+    background: $primary-background;
 }
 
-.projects-edit-form form {
+.red-ui-projects-edit-form form {
     margin: 0;
     .form-row {
         margin-bottom: 15px;
         label {
-            color: #555;
+            color: $primary-text-color;
             width: 100%;
             display: block;
-            &.projects-edit-form-inline-label {
+            &.red-ui-projects-edit-form-inline-label {
                 font-weight: normal;
                 color: inherit;
                 width: auto;
@@ -46,87 +46,34 @@
         }
         input[type=checkbox], input[type=radio] {
             width: auto;
-            vertical-align: top;
+            vertical-align: middle;
         }
     }
 
 }
-.projects-edit-form-sublabel {
-    color: #999;
+.red-ui-projects-edit-form-sublabel {
+    color: $tertiary-text-color;
     text-align: right;
     margin-bottom: -15px;
     font-weight: normal;
 }
-.project-settings-tab-pane {
-    & * .projects-edit-form-sublabel {
+.red-ui-project-settings-tab-pane {
+    & * .red-ui-projects-edit-form-sublabel {
         margin-right: 50px;
         margin-top: -10px !important;
         margin-bottom: 5px;
     }
 }
-.projects-dialog-spinner {
-    position: absolute;
-    top: 1px;
-    bottom: 1px;
-    left: 1px;
-    right: 1px;
-    text-align: center;
-    padding: 40px;
-    background: white;
-    &:before {
-      content: '';
-      display: inline-block;
-      height: 100%;
-      vertical-align: middle;
-      margin-right: -0.25em;
-    }
-    img {
-        display: inline-block;
-        vertical-align: middle;
-        width: 80px;
-    }
-    &.projects-dialog-spinner-sidebar {
-        background: white;
-        padding:0;
-        img {
-            width: 40px;
-        }
-    }
-    &.projects-version-control-spinner-sidebar {
-        background: white;
-        padding:0;
-        img {
-            width: 20px;
-        }
-    }
 
-    &.projects-dialog-spinner-contain {
-        padding: 0;
-        img {
-            width: auto;
-            height: 100%;
-            max-height: 50px;
-        }
-    }
-
-}
-.projects-dialog-screen-start {
-    .projects-dialog-screen-start-hero {
-        // background: url(https://nodered.org/images/title-wave.png) no-repeat 0% 100% #8f0000;
-        // background-size: contain;
+.red-ui-projects-dialog-screen-start {
+    .red-ui-projects-dialog-screen-start-hero {
         text-align: center;
         font-size: 2em;
         padding: 10px;
         min-height: 60px;
-        color: #555;
-        h1 {
-            text-align: center;
-            color: #f0f0f0;
-            font-size: 2em;
-            font-weight: normal;
-        }
+        color: $primary-text-color;
     }
-    .projects-dialog-screen-start-body {
+    .red-ui-projects-dialog-screen-start-body {
         min-height: 400px;
         line-height: 1.6em;
         p {
@@ -138,27 +85,20 @@
             font-size: 1.2em;
         }
     }
-    button.editor-button {
+    button.red-ui-button {
         width: calc(50% - 80px);
         margin: 20px;
         height: auto;
         line-height: 2em;
         padding: 10px;
-        border-color: #aaa;
-        i {
-            color: #aaa;
-        }
-        &:hover i {
-            color: #999;
-        }
     }
     .button-group {
         text-align: center;
     }
 }
-.projects-dialog-screen-create {
+.red-ui-projects-dialog-screen-create {
     min-height: 500px;
-    button.projects-dialog-screen-create-type {
+    button.red-ui-projects-dialog-screen-create-type {
         height: auto;
         padding: 10px;
     }
@@ -167,14 +107,70 @@
     }
 }
 
-.projects-dialog-screen-secret {
+.red-ui-projects-dialog-screen-secret {
     min-height: auto;
 }
-.projects-dialog-project-list-container {
+
+.red-ui-projects-dialog-credentials-box {
+    width: 550px;
+    > div {
+        vertical-align: top;
+        display: inline-block;
+    }
+}
+.red-ui-projects-dialog-credentials-box-right {
+    min-height:150px;
+    box-sizing: border-box;
+    float: right;
+    width: 331px;
+    margin-left: -1px;
+    padding: 15px;
+    margin-top: -15px;
+    border: 1px solid $secondary-border-color;
+    border-radius: 3px;
+}
+.red-ui-projects-dialog-credentials-box-left {
+    width: 220px;
+    > div {
+        padding:  7px 8px 3px 8px;
+        border: 1px solid $secondary-border-color;
+        border-radius: 4px;
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+        border-right-color: $form-background;
+        &.disabled {
+            border-color: $form-background;
+            border-right-color:$secondary-border-color;
+        }
+        i {
+            font-size: 1.4em;
+            margin-right: 8px;
+            vertical-align: middle;
+        }
+        label.red-ui-projects-edit-form-inline-label {
+            margin-left: 5px;
+            span {
+                vertical-align: middle;
+            }
+        }
+        input[type="radio"] {
+            vertical-align: middle;
+            margin-top:0;
+            margin-right: 10px;
+        }
+
+    }
+}
+.red-ui-projects-dialog-credentials-box-enabled {
+}
+.red-ui-projects-dialog-credentials-box-disabled {
+}
+
+.red-ui-projects-dialog-project-list-container {
     border: 1px solid $secondary-border-color;
     border-radius: 2px;
 }
-.projects-dialog-project-list-inner-container {
+.red-ui-projects-dialog-project-list-inner-container {
     height: 300px;
     overflow-y: scroll;
     position:relative;
@@ -182,100 +178,100 @@
         border: none;
     }
 }
-.projects-dialog-project-list {
+.red-ui-projects-dialog-project-list {
     li {
         padding: 0 !important;
     }
 }
-.projects-dialog-project-list-entry {
+.red-ui-projects-dialog-project-list-entry {
     padding: 12px 0;
-    border-left: 3px solid #fff;
-    border-right: 3px solid #fff;
+
+    color: $list-item-color;
+    background: $list-item-background;
+    border-left: 3px solid $list-item-background;
+    border-right: 3px solid $list-item-background;
+
     &.projects-list-entry-current {
         &:not(.selectable) {
-            background: #f9f9f9;
+            color: $form-text-color;
+            background: $list-item-background-selected;
+            border-left-color:$list-item-border-selected;
+            border-right-color:$list-item-border-selected;
         }
         i {
-            color: #999;
+            color: $secondary-text-color;
         }
     }
     &.selectable {
         cursor: pointer;
-        &:hover {
-            background: #f3f3f3;
-            // border-left-color: #aaa;
-            // border-right-color: #aaa;
+        &:hover:not(.selected) {
+            color: $form-text-color;
+            background: $list-item-background-hover;
+            border-left-color:$list-item-background-hover;
+            border-right-color:$list-item-background-hover;
         }
     }
-    .projects-dialog-project-list-entry-icon {
+    .red-ui-projects-dialog-project-list-entry-icon {
         i {
-            color: #ccc;
+            color: $tertiary-text-color;
             font-size: 2em;
 
         }
     }
     &.selected {
-        background: #efefef;
-        border-left-color:#999;
-        border-right-color:#999;
+        color: $form-text-color;
+        background: $list-item-background-selected;
+        border-left-color:$list-item-border-selected;
+        border-right-color:$list-item-border-selected;
     }
     span {
         display: inline-block;
         vertical-align:middle;
     }
-    .projects-dialog-project-list-entry-icon {
+    .red-ui-projects-dialog-project-list-entry-icon {
          margin: 0 10px 0 5px;
     }
-    .projects-dialog-project-list-entry-name {
+    .red-ui-projects-dialog-project-list-entry-name {
         font-size: 1.2em;
     }
-    .projects-dialog-project-list-entry-current {
+    .red-ui-projects-dialog-project-list-entry-current {
         float: right;
         margin-right: 20px;
         font-size: 0.9em;
-        color: #999;
+        color: $secondary-text-color;
         padding-top: 4px;
     }
-    .projects-dialog-project-list-entry-tools {
+    .red-ui-projects-dialog-project-list-entry-tools {
         position: absolute;
         top: 16px;
         right: 30px;
         display: none;
-        color: #999;
+        color: $secondary-text-color;
     }
     &:hover {
-        .projects-dialog-project-list-entry-tools {
+        .red-ui-projects-dialog-project-list-entry-tools {
             display: block;
         }
     }
 }
-.projects-dialog-screen-create-type.editor-button.toggle.selected:not(.disabled):not(:disabled) {
-    background: #fff !important;
-    color: #666 !important;
+.red-ui-projects-dialog-screen-create-type.red-ui-button.toggle.selected:not(.disabled):not(:disabled) {
+    color: $secondary-text-color-active !important;
 }
-.projects-dialog-screen-input-status {
+.red-ui-projects-dialog-screen-input-status {
     text-align: right;
     position: absolute;
     top: 2px;
     right: 8px;
     width: 70px;
     height: 30px;
-    color: #999;
+    color: $secondary-text-color;
 }
 
-.sidebar-version-control {
+.red-ui-sidebar-vc {
     height: 100%;
 }
-.sidebar-version-control-stack-info {
-    height: 100px;
-    box-sizing: border-box;
-    border-bottom: 1px solid $secondary-border-color;
-    color: #333;
-    i {
-        color: #999;
-    }
-}
-.sidebar-version-control-stack {
+
+.red-ui-sidebar-vc-stack {
     position: absolute;
     top: 0px;
     bottom: 0;
@@ -283,14 +279,14 @@
     right: 0;
     overflow: hidden;
 
-    .palette-category {
-        &:not(.palette-category-expanded) button {
+    .red-ui-palette-category {
+        &:not(.expanded) button {
             display: none;
         }
     }
 }
 
-#project-settings-tab-deps {
+#red-ui-project-settings-tab-deps {
     .red-ui-editableList-container {
         padding: 0;
     }
@@ -300,33 +296,31 @@
     .red-ui-editableList-item-content {
         padding: 0px 6px;
     }
-    .palette-module-header {
+    .red-ui-palette-module-header {
         padding: 6px 4px;
     }
-    .palette-module-button {
+    .red-ui-palette-module-button {
         float: right;
     }
-    .palette-module-unused {
+    .red-ui-palette-module-unused {
         & > * {
-            color: #bbb;
+            color: $secondary-text-color;
         }
-        // border: 1px dashed #bbb;
     }
-    .palette-module-unknown {
-        border: 1px dashed #aaa;
-        background: #fafafa;
+    .red-ui-palette-module-unknown {
+        border: 1px dashed $secondary-border-color;
+        background: $secondary-background-inactive;
     }
-    .palette-module-not-installed {
-        border: 1px dashed #b07575;
-        background: #fee;
+    .red-ui-palette-module-not-installed {
+        border: 1px dashed $text-color-warning;
         i.fa-warning {
-            color: #b07575; //#b72828;
+            color: $text-color-warning;
         }
     }
 }
 
 
-.project-settings-tab-pane {
+.red-ui-project-settings-tab-pane {
     position: absolute;
     top:0;
     left:0;
@@ -335,13 +329,13 @@
     overflow-y: auto;
     padding: 8px 20px 20px;
 }
-.sidebar-version-control {
+.red-ui-sidebar-vc {
     .red-ui-editableList-container {
-        background: #f9f9f9;
+        background: $tertiary-background;
         padding: 0;
         li {
             padding:0;
-            background: #fff;
+            background: $secondary-background;
         }
     }
     .red-ui-editableList-border {
@@ -350,7 +344,7 @@
     }
 }
 
-.sidebar-version-control-change-container {
+.red-ui-sidebar-vc-change-container {
     position: relative;
     height: 50%;
     box-sizing: border-box;
@@ -359,22 +353,22 @@
         // border-bottom: 1px solid $primary-border-color;
     }
 }
-.sidebar-version-control-merging {
-    .sidebar-version-control-change-container {
+.red-ui-sidebar-vc-merging {
+    .red-ui-sidebar-vc-change-container {
         height: 33%;
     }
 }
-.sidebar-version-control-slide-box {
+.red-ui-sidebar-vc-slide-box {
     position:absolute;
     bottom: 0;
     left:0;
     right:0;
     height:0;
     transition: height 0.2s ease-in-out;
-    background: #f6f6f6;
+    background: $tertiary-background;
     box-sizing: border-box;
     overflow: hidden;
-    &.sidebar-version-control-slide-box-top {
+    &.red-ui-sidebar-vc-slide-box-top {
         z-index: 4;
         top: 0px;
         left: auto;
@@ -383,15 +377,15 @@
         border-left: 1px solid $primary-border-color;
         border-right: 1px solid $primary-border-color;
         border-bottom: 1px solid $primary-border-color;
-        box-shadow: 1px 1px 4px rgba(0,0,0,0.2);
+        box-shadow: 1px 1px 4px $shadow;
 
-        color: #666;
-        background: #f6f6f6;
+        color: $primary-text-color;
+        background: $tertiary-background;
         padding: 10px;
         box-sizing: border-box;
 
     }
-    &.sidebar-version-control-slide-box-bottom {
+    &.red-ui-sidebar-vc-slide-box-bottom {
         bottom: 0px;
         border-top: 1px solid $secondary-border-color;
     }
@@ -406,7 +400,7 @@
     }
 
 }
-.projects-branch-list {
+.red-ui-projects-branch-list {
     position: relative;
     .red-ui-searchBox-container {
         border-top: 1px solid $secondary-border-color;
@@ -428,12 +422,12 @@
             padding: 0;
             li {
                 padding: 0;
-                background: #fff;
+                background: $secondary-background;
             }
         }
     }
 }
-.uneditable-input .projects-branch-list {
+.uneditable-input .red-ui-projects-branch-list {
     .red-ui-editableList {
         border-left: none;
         border-bottom: none;
@@ -444,33 +438,34 @@
         border-right: none;
     }
 }
-.sidebar-version-control-slide-box-header {
+.red-ui-sidebar-vc-slide-box-header {
     margin-bottom: 10px;
 }
 
-.sidebar-version-control-slide-box-toolbar {
+.red-ui-sidebar-vc-slide-box-toolbar {
     padding: 0 20px;
     text-align: right;
 }
-.sidebar-version-control-branch-list-entry {
+.red-ui-sidebar-vc-branch-list-entry {
     padding: 5px 8px;
-    color: #666;
+    margin: 0 1px;
+    color: $list-item-color;
+    background: $list-item-background;
+    border-left: 2px solid $list-item-background;
+    border-right: 2px solid $list-item-background;
     cursor: pointer;
     &.selected {
-        border-left-color:#999;
-        border-right-color:#999;
+        border-left-color:$list-item-border-selected;
+        border-right-color:$list-item-border-selected;
     }
-    border-left: 2px solid #fff;
-    border-right: 2px solid #fff;
-    margin: 0 1px;
     i { width: 16px; text-align: center}
     &.input-error {
         cursor: default;
     }
     &:not(.input-error):hover {
-        background: #f3f3f3;
-        border-left-color:#999;
-        border-right-color:#999;
+        background: $list-item-background-hover;
+        border-left-color:$list-item-border-selected;
+        border-right-color:$list-item-border-selected;
     }
     span {
         margin-left: 5px;
@@ -478,11 +473,11 @@
     span.current {
         float: right;
         font-size: 0.8em;
-        color: #999;
+        color: $tertiary-text-color;
     }
 }
 
-.sidebar-version-control-change-entry {
+.red-ui-sidebar-vc-change-entry {
     height: 20px;
     padding: 5px 10px;
     position: relative;
@@ -496,7 +491,7 @@
             pointer-events: none;
         }
     }
-    .sidebar-version-control-change-entry-tools {
+    .red-ui-sidebar-vc-change-entry-tools {
         position: absolute;
         top: 4px;
         right: 4px;
@@ -507,19 +502,19 @@
     }
 
     &:hover {
-        .sidebar-version-control-change-entry-tools {
+        .red-ui-sidebar-vc-change-entry-tools {
             display: block;
         }
     }
-    &.node-info-none {
+    &.red-ui-help-info-node {
         text-align: center;
-        background: #fefefe;
+        background: $list-item-background;
         white-space: normal;
         height: auto;
     }
 }
 
-.sidebar-version-control-commit-entry {
+.red-ui-sidebar-vc-commit-entry {
     min-height: 20px;
     padding: 5px 10px;
     position: relative;
@@ -527,51 +522,51 @@
     overflow: hidden;
     cursor: pointer;
     &:hover {
-        background: #eee;
+        background: $secondary-background-hover;
     }
 }
-.sidebar-version-control-commit-more {
-    color: #999;
+.red-ui-sidebar-vc-commit-more {
+    color: $secondary-text-color;
     text-align: center;
     padding: 10px;
     font-style: italic;
 }
-.sidebar-version-control-commit-sha {
+.red-ui-sidebar-vc-commit-sha {
     float: right;
-    font-family: monospace;
-    color: #c38888;
+    font-family: $monospace-font;
+    color: $vcCommitShaColor;
     display: inline-block;
     font-size: 0.85em;
     margin-left: 5px;
 }
-.sidebar-version-control-commit-subject {
-    color: #666;
+.red-ui-sidebar-vc-commit-subject {
+    color: $primary-text-color;
 }
-.sidebar-version-control-commit-refs {
+.red-ui-sidebar-vc-commit-refs {
     min-height: 22px;
 }
-.sidebar-version-control-commit-ref {
-    color: #aaa;
+.red-ui-sidebar-vc-commit-ref {
+    color: $tertiary-text-color;
     font-size: 0.7em;
-    border: 1px solid #ccc;
+    border: 1px solid $tertiary-border-color;
     border-radius: 10px;
     padding: 2px 5px;
     margin-right: 5px;
 }
-.sidebar-version-control-commit-date {
-    color: #999;
+.red-ui-sidebar-vc-commit-date {
+    color: $secondary-text-color;
     font-size: 0.85em;
 }
-.sidebar-version-control-commit-user {
+.red-ui-sidebar-vc-commit-user {
     float: right;
-    color: #999;
+    color: $secondary-text-color;
     font-size: 0.85em;
 }
-.sidebar-version-control-commit-head {
+.red-ui-sidebar-vc-commit-head {
 }
-.sidebar-version-control-change-header {
-    color: #666;
-    background: #f6f6f6;
+.red-ui-sidebar-vc-change-header {
+    color: $primary-text-color;
+    background: $tertiary-background;
     padding: 4px 10px;
     height: 30px;
     box-sizing: border-box;
@@ -581,22 +576,22 @@
         transition: all 0.2s ease-in-out;
     }
 }
-.sidebar-version-control-repo-toolbar {
-    color: #666;
-    background: #f6f6f6;
+.red-ui-sidebar-vc-repo-toolbar {
+    color: $primary-text-color;
+    background: $tertiary-background;
     padding: 10px;
     box-sizing: border-box;
 }
 
-.sidebar-version-control-repo-count {
+.red-ui-sidebar-vc-repo-count {
     margin-right: 8px;
     display: none;
 }
-.sidebar-version-control-repo-action  {
+.red-ui-sidebar-vc-repo-action  {
     text-align: left;
     width: 100%;
 }
-.sidebar-version-control-repo-sub-action  {
+.red-ui-sidebar-vc-repo-sub-action  {
     width: calc(50% - 5px);
     margin-right: 5px;
     &:not(:first-child) {
@@ -605,13 +600,13 @@
     }
 }
 
-.project-file-listing-container > .red-ui-editableList > .red-ui-editableList-border {
+.red-ui-projects-file-listing-container > .red-ui-editableList > .red-ui-editableList-border {
     border-radius: 0;
     border: none;
     border-top: 1px solid $secondary-border-color;
 
 }
-.red-ui-editableList-container .projects-dialog-file-list {
+.red-ui-editableList-container .red-ui-projects-dialog-file-list {
     .red-ui-editableList-border {
         border: none;
     }
@@ -623,66 +618,68 @@
         padding: 0;
     }
 }
-.projects-dialog-file-list-entry {
+.red-ui-projects-dialog-file-list-entry {
     padding: 3px 0;
-    border-left: 2px solid #fff;
-    border-right: 2px solid #fff;
+    border-left: 2px solid $list-item-background;
+    border-right: 2px solid $list-item-background;
+    background: $list-item-background;
+
     &.projects-list-entry-current {
         &:not(.selectable) {
-            background: #f9f9f9;
+            background: $list-item-background-selected;
         }
         i {
-            color: #999;
+            color: $secondary-text-color-selected;
         }
     }
     &.selectable {
         cursor: pointer;
         &:hover {
-            background: #f3f3f3;
-            border-left-color:#999;
-            border-right-color:#999;
+            background: $list-item-background-hover;
+            border-left-color:$list-item-border-selected;
+            border-right-color:$list-item-border-selected;
         }
     }
     &.unselectable {
-        color: #ccc;
+        color: $secondary-text-color-disabled;
     }
 
     i {
-        color: #999;
+        color: $secondary-text-color;
         width: 16px;
         text-align: center;
     }
     &.selected {
-        background: #efefef;
-        border-left-color:#999;
-        border-right-color:#999;
+        background: $list-item-background-selected;
+        border-left-color:$list-item-border-selected;
+        border-right-color:$list-item-border-selected;
     }
     span {
         display: inline-block;
         vertical-align:middle;
     }
-    .projects-dialog-file-list-entry-folder {
+    .red-ui-projects-dialog-file-list-entry-folder {
          margin: 0 10px 0 0px;
 
          .fa-angle-right {
-             color: #333;
+             color: $primary-text-color;
              transition: all 0.2s ease-in-out;
 
          }
     }
-    .projects-dialog-file-list-entry-file {
+    .red-ui-projects-dialog-file-list-entry-file {
          margin: 0 10px 0 20px;
     }
-    .projects-dialog-file-list-entry-name {
+    .red-ui-projects-dialog-file-list-entry-name {
         font-size: 1em;
     }
     &.expanded .fa-angle-right {
         transform: rotate(90deg);
     }
 }
-.projects-dialog-file-list-entry-file-type-git { color: #999 }
+.red-ui-projects-dialog-file-list-entry-file-type-git { color: $tertiary-text-color }
 
-.projects-dialog-remote-list {
+.red-ui-projects-dialog-remote-list {
     .red-ui-editableList-container {
         padding: 0;
         li {
@@ -694,87 +691,7 @@
     }
 }
 
-.projects-dialog-sshkey-list {
-    li {
-        padding: 0 !important;
-    }
-    &.projects-dialog-sshkey-list-small {
-        .projects-dialog-sshkey-list-entry {
-            padding: 6px 0;
-            i {
-                font-size: 1em;
-            }
-        }
-        .projects-dialog-sshkey-list-entry-name {
-            font-size: 1em;
-        }
-        .projects-dialog-sshkey-list-entry-current {
-            margin-right: 10px;
-            padding-top: 2px;
-        }
-    }
-}
-.red-ui-editableList-container {
-    .projects-dialog-sshkey-list {
-        li:last-child {
-            border-bottom: 0px none;
-        }
-    }
-}
-.projects-dialog-sshkey-list-entry {
-    padding: 12px 0;
-    border-left: 3px solid #fff;
-    border-right: 3px solid #fff;
-    &.sshkey-list-entry-current {
-        &:not(.selectable) {
-            background: #f9f9f9;
-        }
-        i {
-            color: #999;
-        }
-    }
-    &.selectable {
-        cursor: pointer;
-        &:hover {
-            background: #f3f3f3;
-            border-left-color: #aaa;
-            border-right-color: #aaa;
-        }
-    }
-    i {
-        color: #ccc;
-        font-size: 2em;
-
-    }
-    &.selected {
-        background: #efefef;
-        border-left-color:#999;
-        border-right-color:#999;
-    }
-    span {
-        display: inline-block;
-        vertical-align:middle;
-    }
-    .projects-dialog-sshkey-list-entry-icon {
-         margin: 0 10px 0 5px;
-    }
-    .projects-dialog-sshkey-list-entry-name {
-        font-size: 1.2em;
-    }
-    .projects-dialog-sshkey-list-entry-current {
-        float: right;
-        margin-right: 20px;
-        font-size: 0.9em;
-        color: #999;
-        padding-top: 4px;
-    }
-    .projects-dialog-sshkey-list-button-remove {
-        position: absolute;
-        right: 4px;
-    }
-}
-
-div.projects-dialog-ssh-public-key {
+div.red-ui-projects-dialog-ssh-public-key {
     position: relative;
     padding: 15px 20px 0;
     pre {
@@ -788,31 +705,31 @@ div.projects-dialog-ssh-public-key {
     }
 }
 
-.projects-dialog-ssh-key-list {
+.red-ui-projects-dialog-ssh-key-list {
     li {
         padding: 0 !important;
     }
-    .projects-dialog-ssh-key-header {
+    .red-ui-projects-dialog-ssh-key-header {
         padding: 10px 5px;
         cursor: pointer;
         &:hover {
-            background: #f3f3f3;
+            background: $list-item-background-hover;
         }
     }
 }
 
-.projects-dialog-list {
+.red-ui-projects-dialog-list {
     position: relative;
     .red-ui-editableList-container {
         padding: 1px;
-        background: #f6f6f6;
+        background: $tertiary-background;
         li:last-child {
             border-bottom: none;
         }
     }
 }
 
-.projects-dialog-list-entry {
+.red-ui-projects-dialog-list-entry {
     &.red-ui-search-empty {
         padding: 0;
     }
@@ -824,7 +741,7 @@ div.projects-dialog-ssh-public-key {
         text-align: center;
         min-width: 30px;
         vertical-align: top;
-        color: #999;
+        color: $secondary-text-color;
     }
     .entry-name {
         min-width: 250px;
@@ -833,7 +750,7 @@ div.projects-dialog-ssh-public-key {
         font-weight: bold;
     }
     .entry-detail {
-        color: #aaa;
+        color: $tertiary-text-color;
         font-size: 0.9em;
     }
 
@@ -847,14 +764,14 @@ div.projects-dialog-ssh-public-key {
         margin-right: 10px;
     }
 }
-.projects-dialog-list-dialog {
+.red-ui-projects-dialog-list-dialog {
     position: relative;
     margin-top: 10px;
     margin-bottom: 20px;
-    background: white;
+    background: $secondary-background;
     border-radius: 4px;
     border: 1px solid $secondary-border-color;
-    .projects-edit-form-sublabel {
+    .red-ui-projects-edit-form-sublabel {
         margin-top: -8px !important;
         display: block !important;
         width: auto !important;
@@ -865,11 +782,18 @@ div.projects-dialog-ssh-public-key {
         clear: both;
     }
 
-    .projects-dialog-list-dialog-header {
+    .red-ui-projects-dialog-list-dialog-header {
         font-weight: bold;
-        background: #f3f3f3;
+        background: $primary-background;
         margin-top: 0 !important;
         padding: 5px 10px;
         margin-bottom: 10px;
     }
 }
+
+#red-ui-settings-tab-gitconfig {
+    padding: 8px 20px 20px;
+}
+.red-ui-settings-section-description {
+    color: $secondary-text-color;
+}
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/search.scss b/packages/node_modules/@node-red/editor-client/src/sass/search.scss
index 3926d6f5f..a63bd4457 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/search.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/search.scss
@@ -19,22 +19,13 @@
     display: none;
     position: absolute;
     width: 500px;
-    background: white;
     left: 50%;
     margin-left: -250px;
     top: 0px;
     border: 1px solid $primary-border-color;
-    box-shadow: 0 0 10px rgba(0,0,0,0.4);
+    box-shadow: 0 0 10px $shadow;
+}
 
-    ol {
-    }
-}
-.red-ui-type-search-shade {
-    @include shade;
-    z-index: 20;
-    position: fixed;
-    background: rgba(255,255,255,0.05);
-}
 .red-ui-type-search {
     box-shadow: 0 1px 6px -3px black;
     background: none;
@@ -45,7 +36,7 @@
     .red-ui-search-container {
         border-top-left-radius: 5px;
         border-top-right-radius: 5px;
-        border: 1px dashed #aaa;
+        border: 1px dashed $primary-border-color;
         border-bottom: none;
         padding: 0;
     }
@@ -53,8 +44,8 @@
         display: none;
         height: 150px;
         .red-ui-editableList-container {
-            border: 1px dashed #aaa;
-            border-top: 1px solid #ccc;
+            border: 1px dashed $primary-border-color;
+            border-top: 1px solid $secondary-border-color;
         }
     }
     .red-ui-search-result {
@@ -62,14 +53,14 @@
         font-size: 13px;
         border-left-width: 3px;
         border-right-width: 3px;
-        .palette_icon_fa {
+        .red-ui-palette-icon-fa {
             position: relative;
             top: -2.5px;
             left: 0px;
         }
     }
     .red-ui-search-result-separator {
-        border-bottom: 3px solid #ddd;
+        border-bottom: 3px solid $secondary-border-color;
     }
     .red-ui-search-result-node {
         position: relative;
@@ -80,54 +71,49 @@
     .red-ui-search-result-node-port {
         position: absolute;
         border-radius: 2px;
-        border: 1px solid #999;
+        border: 1px solid $node-border;;
         width: 6px;
         height: 7px;
         top:4px;
         left:-4px;
-        background: #eee;
+        background: $node-port-background;
         box-sizing: border-box;
     }
     .red-ui-search-result-node-output{
         left: 16px;
     }
-    .palette_icon_container {
+    .red-ui-palette-icon-container {
         width: 18px;
     }
-    .palette_icon {
+    .red-ui-palette-icon {
         width: 15px;
     }
     .red-ui-search-result-description {
         margin-left:28px;
     }
     .red-ui-search-result-node-label {
-        color: #999;
+        color: $secondary-text-color;
     }
 }
 
 .red-ui-search-container {
     padding: 3px;
+    background: $form-input-background;
     border-bottom: 1px solid $secondary-border-color;
 }
 .red-ui-search-results-container {
     position:relative;
     height: 300px;
     padding: 5px;
-    background: #f9f9f9;
+    background: $primary-background;
+    .red-ui-search-results-list {
 
+    }
     .red-ui-editableList-container {
-        background: white;
         padding: 0;
-        background: #f9f9f9;
+        background: $primary-background;
         li {
             padding: 0;
-            &.selected {
-                background: #efefef;
-                .red-ui-search-result {
-                    border-left-color:#999;
-                    border-right-color:#999;
-                }
-            }
         }
     }
 }
@@ -135,22 +121,28 @@
     padding: 8px 2px 8px 5px;
     display: block;
     cursor: pointer;
-    color: $form-text-color;
-    border-left: 3px solid #fff;
-    border-right: 3px solid #fff;
+    color: $list-item-color;
+    background: $list-item-background;
+    border-left: 3px solid $list-item-background;
+    border-right: 3px solid $list-item-background;
+    li.selected & {
+        background: $list-item-background-selected;
+        border-left-color: $list-item-border-selected;
+        border-right-color: $list-item-border-selected;
+    }
     &:hover {
         text-decoration: none;
         color: $form-text-color;
-        background: #efefef;
-        border-left-color:#efefef;
-        border-right-color:#efefef;
+        background: $list-item-background-hover;
+        border-left-color:$list-item-background-hover;
+        border-right-color:$list-item-background-hover;
     }
     &:after {
         content: "";
         display: table;
         clear: both;
     }
-    .palette_icon_fa {
+    .red-ui-palette-icon-fa {
         top: 6px;
         left: 3px;
     }
@@ -161,15 +153,14 @@
     width: 30px;
     float:left;
     height: 25px;
-    background: #ddd;
     border-radius: 5px;
-    border: 1px solid #999;
+    border: 1px solid $node-border;
     background-position: 5% 50%;
     background-repeat: no-repeat;
     background-size: contain;
     position: relative;
 
-    .palette_icon_container {
+    .red-ui-palette-icon-container {
         border-right: none;
     }
 
@@ -179,19 +170,22 @@
     margin-right: 5px;
 }
 .red-ui-search-result-node-label {
-    color: #222;
+    color: $primary-text-color;
 }
 .red-ui-search-result-node-type {
     font-style: italic;
     font-size: 0.9em;
+    color: $tertiary-text-color;
 }
 .red-ui-search-result-node-flow {
     float:right;
     font-size: 0.8em;
+    color: $tertiary-text-color;
 }
 .red-ui-search-result-node-id {
     display:none;
     font-size: 0.8em;
+    color: $tertiary-text-color;
 }
 .red-ui-search-empty {
     padding: 10px;
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/sidebar.scss b/packages/node_modules/@node-red/editor-client/src/sass/sidebar.scss
index d06b3d3cc..46dcfddb2 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/sidebar.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/sidebar.scss
@@ -14,26 +14,25 @@
  * limitations under the License.
  **/
 
-#sidebar {
+#red-ui-sidebar {
     position: absolute;
     top: 0px;
     right: 0px;
     bottom: 0px;
     width: 315px;
-    background: #fff;
+    background: $primary-background;
     box-sizing: border-box;
     z-index: 10;
     @include component-border;
 }
 
-#sidebar.closing {
-    background: #eee;
-    border-color: #900;
+#red-ui-sidebar.closing {
     border-style: dashed;
 }
 
-#sidebar-content {
+#red-ui-sidebar-content {
     position: absolute;
+    background: $secondary-background;
     top: 35px;
     right: 0;
     bottom: 25px;
@@ -41,23 +40,23 @@
     overflow-y: auto;
 }
 
-#sidebar-separator {
+#red-ui-sidebar-separator {
     position: absolute;
     top: 5px;
     right: 315px;
     bottom:10px;
     width: 7px;
     z-index: 11;
-    background: $background-color url(images/grip.png) no-repeat 50% 50%;
+    background: $primary-background url(images/grip.png) no-repeat 50% 50%;
     cursor: col-resize;
 }
 
-.sidebar-closed > #sidebar { display: none; }
-.sidebar-closed > #sidebar-separator { right: 0px !important; }
-.sidebar-closed > #workspace { right: 7px !important; }
-.sidebar-closed > #editor-stack { right: 8px !important; }
+.red-ui-sidebar-closed > #red-ui-sidebar { display: none; }
+.red-ui-sidebar-closed > #red-ui-sidebar-separator { right: 0px !important; }
+.red-ui-sidebar-closed > #red-ui-workspace { right: 7px !important; }
+.red-ui-sidebar-closed > #red-ui-editor-stack { right: 8px !important; }
 
-#sidebar .button {
+#red-ui-sidebar .button {
     @include workspace-button;
     line-height: 18px;
     font-size: 12px;
@@ -65,67 +64,76 @@
     padding: 2px 8px;
 }
 
-.sidebar-header {
-    color: #666;
+.sidebar-header, /* Deprecated -> red-ui-sidebar-header */
+.red-ui-sidebar-header {
+    color: $primary-text-color;
     text-align: right;
     padding: 8px 10px;
-    background: #f3f3f3;
+    background: $primary-background;
     border-bottom: 1px solid $secondary-border-color;
     white-space: nowrap;
 }
 
-#sidebar-footer {
-    @include component-footer;
-}
-
+/* Deprecated -> red-ui-footer-button */
 .sidebar-footer-button {
     @include component-footer-button;
 }
+/* Deprecated -> red-ui-footer-button-toggle */
 .sidebar-footer-button-toggle {
     @include component-footer-button-toggle;
 }
-.sidebar-header-button {
+
+a.sidebar-header-button,
+button.sidebar-header-button, /* Deprecated -> red-ui-sidebar-header-button */
+a.red-ui-sidebar-header-button,
+button.red-ui-sidebar-header-button {
     @include workspace-button;
     font-size: 13px;
     line-height: 13px;
     padding: 5px 8px;
 }
-.sidebar-header-button-toggle {
+
+a.sidebar-header-button-toggle, /* Deprecated -> red-ui-sidebar-header-button-toggle */
+button.sidebar-header-button-toggle, /* Deprecated -> red-ui-sidebar-header-button-toggle */
+a.red-ui-sidebar-header-button-toggle,
+button.red-ui-sidebar-header-button-toggle {
     @include workspace-button-toggle;
     font-size: 13px;
     line-height: 13px;
     padding: 5px 8px;
 }
-.sidebar-header-button:not(:first-child) {
+
+.sidebar-header-button:not(:first-child), /* Deprecated -> red-ui-sidebar-header-button */
+.red-ui-sidebar-header-button:not(:first-child) {
     border-left: none;
 }
 
-.sidebar-shade {
+.red-ui-sidebar-shade {
     @include shade;
 }
 
 
-@mixin sidebar-control {
+@mixin red-ui-sidebar-control {
     display: none;
     position: absolute;
     top: calc(50% - 26px);
 
     padding:15px 8px;
-    border:1px solid #ccc;
-    background:#f9f9f9;
-    color: #999;
+    border:1px solid $primary-border-color;
+    background:$primary-background;
+    color: $secondary-text-color;
     text-align: center;
     cursor: pointer;
 }
 
-.sidebar-control-right {
-    @include sidebar-control;
+.red-ui-sidebar-control-right {
+    @include red-ui-sidebar-control;
     right: calc(100%);
     border-top-left-radius: 5px;
     border-bottom-left-radius: 5px;
 }
-.sidebar-control-left {
-    @include sidebar-control;
+.red-ui-sidebar-control-left {
+    @include red-ui-sidebar-control;
     left: calc(100%);
     border-top-right-radius: 5px;
     border-bottom-right-radius: 5px;
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/style.scss b/packages/node_modules/@node-red/editor-client/src/sass/style.scss
index a48291659..69504fa3b 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/style.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/style.scss
@@ -1,26 +1,26 @@
 /**
- * Copyright JS Foundation and other contributors, http://js.foundation
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- **/
+* Copyright JS Foundation and other contributors, http://js.foundation
+*
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+* http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+**/
 
 @import "colors";
 @import "mixins";
 
+@import "base";
 @import "forms";
 
 @import "jquery";
-@import "bootstrap";
 @import "ace";
 
 @import "dropdownMenu";
@@ -65,87 +65,3 @@
 @import "keyboard";
 
 @import "debug";
-
-body {
-    font-size: 14px;
-    font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;
-    padding-top: 100px;
-    background: $background-color;
-    color: #333333;
-}
-
-#main-container {
-    position: absolute;
-    top:40px; left:0; bottom: 0; right:0;
-    overflow:hidden;
-}
-
-i.spinner {
-    display: inline-block;
-    width: 14px;
-    height: 14px;
-    line-height: 14px;
-    vertical-align: text-top;
-    margin-top: 0px;
-    background: url(images/spin.svg) no-repeat 50% 50%;
-    background-size: contain
-}
-
-code, pre {
-  padding: 0 3px 2px;
-  font-family: monospace;
-  font-size: 14px;
-  color: #333333;
-  border-radius: 1px;
-}
-
-code {
-  padding: 0px 3px 2px 3px;
-  margin: 1px;
-  color: #AD1625;
-  white-space: nowrap;
-  background-color: #f7f7f9;
-  border: 1px solid #e1e1e8;
-  border-radius: 2px;
-}
-
-pre {
-  display: block;
-  padding: 9.5px;
-  margin: 0 0 10px;
-  line-height: 20px;
-  word-break: break-all;
-  word-wrap: break-word;
-  white-space: pre;
-  white-space: pre-wrap;
-  background-color: #f5f5f5;
-  border: 1px solid #ccc;
-  border: 1px solid rgba(0, 0, 0, 0.15);
-  border-radius: 2px;
-}
-
-pre code {
-  padding: 0;
-  color: inherit;
-  white-space: pre;
-  white-space: pre-wrap;
-  background-color: transparent;
-  border: 0;
-}
-
-.hide {
-    display: none;
-}
-
-blockquote {
-    padding: 0 0 0 15px;
-    margin: 0 0 20px;
-    border-left: 4px solid #ddd;
-
-    p {
-        font-size: 14px;
-        font-weight: inherit;
-        line-height: 1.25;
-        color: #777;
-    }
-}
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/tab-config.scss b/packages/node_modules/@node-red/editor-client/src/sass/tab-config.scss
index 78cd8628a..b57e7ddfd 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/tab-config.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/tab-config.scss
@@ -14,25 +14,26 @@
  * limitations under the License.
  **/
 
-.sidebar-node-config {
+.red-ui-sidebar-node-config {
     position: relative;
-    background: #f3f3f3;
+    background: $secondary-background;
     height: 100%;
     overflow-y:auto;
     @include disable-selection;
 }
 
-.config-node-list {
+.red-ui-sidebar-node-config-list {
     margin: 0;
     list-style-type: none;
-    .palette_node {
+    .red-ui-palette-node {
         overflow: hidden;
         &.selected {
+            margin: 10px auto;
             border-color: $node-selected-color;
-            background-color: #eee;
+            border-width: 2px;
         }
     }
-    .palette_label {
+    .red-ui-palette-label {
         margin-left: 8px;
         line-height: 24px;
         text-align: left;
@@ -40,10 +41,10 @@
         overflow: hidden;
         text-overflow: ellipsis;
     }
-    .palette_icon_container {
+    .red-ui-palette-icon-container {
         font-size: 12px;
         line-height: 30px;
-        background-color: #e8e8e8;
+        background-color: $secondary-background-selected;
         border-top-right-radius: 4px;
         border-bottom-right-radius: 4px;
         a {
@@ -52,41 +53,41 @@
             bottom: 0;
             left: 0;
             right: 0;
-            color: #666;
+            color: $secondary-text-color;
             &:hover {
                 text-decoration: none;
-                background: #ccc;
+                background: $secondary-background-hover;
             }
         }
     }
 }
-.config_node {
+.red-ui-palette-node-config {
     width: 160px;
     height: 30px;
-    background: #f3f3f3;
-    color: #666;
+    background: $primary-background;
+    color: $primary-text-color;
     cursor: pointer;
 }
-.config_node_type {
-    color: #999;
+.red-ui-palette-node-config-type {
+    color: $secondary-text-color;
     text-align: right;
     padding-right: 3px;
     &:not(:first-child) {
         margin-top: 20px;
     }
 }
-.config_node_none {
-    color: #ddd;
+.red-ui-palette-node-config-none {
+    color: $tertiary-text-color;
     text-align:right;
     padding-right: 3px;
 }
-.config_node_unused {
-    border-color: #aaa;
-    background: #f9f9f9;
+.red-ui-palette-node-config-unused {
+    border-color: $primary-border-color;
+    background: $secondary-background-inactive;
     border-style: dashed;
-    color: #aaa;
+    color: $tertiary-text-color;
 }
-.config-node-filter-info {
+.red-ui-sidebar-node-config-filter-info {
     position: absolute;
     top: 0;
     right:0;
@@ -95,6 +96,6 @@
     padding: 0 8px;
     background: $palette-header-background;
     font-size: 0.8em;
-    color: #999;
+    color: $secondary-text-color;
     font-weight: normal;
 }
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/tab-context.scss b/packages/node_modules/@node-red/editor-client/src/sass/tab-context.scss
index 16404c136..46b09de43 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/tab-context.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/tab-context.scss
@@ -14,7 +14,7 @@
  * limitations under the License.
  **/
 
-.sidebar-context-stack {
+.red-ui-sidebar-context-stack {
     position: absolute;
     top: 0;
     bottom: 0;
@@ -22,33 +22,33 @@
     right: 0;
     overflow-y: scroll;
 
-    .palette-category {
-        &:not(.palette-category-expanded) button {
+    .red-ui-palette-category {
+        &:not(.expanded) button {
             display: none;
         }
     }
 }
 
-.sidebar-context-property {
+.red-ui-sidebar-context-property {
     position: relative;
-    .debug-message-tools {
+    .red-ui-debug-msg-tools {
         right: 0px;
         margin-right: 5px;
         display: none;
     }
-    &:hover .debug-message-tools {
+    &:hover .red-ui-debug-msg-tools {
         display: inline-block;
     }
 }
-.sidebar-context-updated {
+.red-ui-sidebar-context-updated {
     text-align: right;
     font-size: 11px;
-    color: #bbb;
+    color: $tertiary-text-color;
     padding: 1px 3px;
 }
-.sidebar-context-property-storename {
+.red-ui-sidebar-context-property-storename {
     display: block;
     font-size: 0.8em;
     font-style: italic;
-    color: #aaa;
+    color: $tertiary-text-color;
 }
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/tab-info.scss b/packages/node_modules/@node-red/editor-client/src/sass/tab-info.scss
index a4d3eea3d..bc72f7532 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/tab-info.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/tab-info.scss
@@ -14,19 +14,19 @@
  * limitations under the License.
  **/
 
-.sidebar-node-info  hr {
+.red-ui-sidebar-info  hr {
     margin: 10px 0;
 }
-table.node-info {
+table.red-ui-info-table {
     font-size: 14px;
     margin: 0 0 10px;
     width: 100%;
 }
-table.node-info tr:not(.blank) {
-    border-top: 1px solid #ddd;
-    border-bottom: 1px solid #ddd;
+table.red-ui-info-table tr:not(.blank) {
+    border-top: 1px solid $secondary-border-color;
+    border-bottom: 1px solid $secondary-border-color;
 }
-.node-info-property-expand  {
+.red-ui-help-property-expand  {
     font-size: 0.8em;
     text-align: right;
     line-height: 0.9em;
@@ -35,12 +35,12 @@ table.node-info tr:not(.blank) {
     }
 
 }
-table.node-info tr.blank {
+table.red-ui-info-table tr.blank {
     border: none;
     th {
         text-align: left;
         font-weight: 500;
-        color: #444;
+        color: $primary-text-color;
         padding: 6px 3px 3px;
     }
     >* {
@@ -52,16 +52,16 @@ table.node-info tr.blank {
 
     a {
         display: block;
-        color: #666;
+        color: $primary-text-color;
         &:hover,&:focus {
-            color: #666;
+            color: $primary-text-color;
             text-decoration: none;
         }
         &:not(.expanded) {
-            .node-info-property-show-more {
+            .red-ui-help-property-more {
                 display: inline;
             }
-            .node-info-property-show-less {
+            .red-ui-help-property-less {
                 display: none;
             }
         }
@@ -72,10 +72,10 @@ table.node-info tr.blank {
         }
 
         &.expanded {
-            .node-info-property-show-more {
+            .red-ui-help-property-more {
                 display: none;
             }
-            .node-info-property-show-less {
+            .red-ui-help-property-less {
                 display: inline;
             }
             i {
@@ -83,33 +83,43 @@ table.node-info tr.blank {
             }
         }
     }
-    &.node-info-info-row > td {
-        padding-left: 5px;
-    }
 }
-.node-info-none {
+.red-ui-help-info-none {
     font-style: italic;
-    color: #aaa;
+    color: $tertiary-text-color;
 }
-table.node-info tr:not(.blank) td:first-child{
-    color: #444;
+table.red-ui-info-table tr:not(.blank) td:first-child{
+    color: $header-text-color;
     vertical-align: top;
     width: 90px;
     padding: 3px 3px 3px 6px;
-    background:#f9f9f9;
-    border-right: 1px solid #ddd;
+    background:$tertiary-background;
+    border-right: 1px solid $secondary-border-color;
 }
-table.node-info tr:not(.blank) td:last-child{
+table.red-ui-info-table tr:not(.blank) td:last-child{
     padding: 3px 3px 3px 6px;
-    color: #666;
+    color: $primary-text-color;
     overflow-y: hidden;
 }
-div.node-info {
+div.red-ui-info-table {
     margin: 5px;
 }
-.node-help {
-    font-size: 14px;
+.red-ui-help {
+    font-size: $primary-font-size;
     line-height: 1.5em;
+
+    a {
+        color: $info-text-link-color;
+        text-decoration: none;
+    }
+
+    a:hover,
+    a:focus {
+        color: $info-text-link-color;
+        text-decoration: underline;
+    }
+
+
     h1 {
         font-weight: 500;
         font-size: 1.296em;
@@ -138,24 +148,24 @@ div.node-info {
     & > span > p:first-child {
     }
     dl.message-properties {
-        border: 1px solid #ddd;
+        border: 1px solid $secondary-border-color;
         border-radius: 2px;
 
         margin: 5px auto 10px;
         &>dt {
             padding: 0px 3px 2px 3px;
-            font-family: monospace;
+            font-family: $monospace-font;
             font-weight: normal;
             margin: 5px 3px 1px;
-            color: #AD1625;
+            color: $text-color-warning;
             white-space: nowrap;
             &.optional {
                 font-style: italic;
 
             }
             .property-type {
-                font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;
-                color: #666;
+                font-family: $primary-font;
+                color: $primary-text-color;
                 font-style: italic;
                 font-size: 11px;
                 float: right;
@@ -174,7 +184,7 @@ div.node-info {
     ol.node-ports {
         margin: 0;
         li {
-            border: 1px solid #ddd;
+            border: 1px solid $secondary-border-color;
             border-radius: 2px;
             list-style-position: inside;
             padding: 3px;
@@ -184,14 +194,14 @@ div.node-info {
             }
         }
     }
-    .node-info-header {
+    .red-ui-help-info-header {
         i {
             width: 10px;
             text-align: center;
             transition: transform 0.2s ease-in-out;
             margin-right: 4px;
         }
-        color: #333;
+        color: $header-text-color;
         &:hover, &:focus {
             text-decoration: none;
         }
@@ -203,7 +213,7 @@ div.node-info {
     }
 
 }
-.sidebar-node-info-stack {
+.red-ui-sidebar-info-stack {
     position: absolute;
     top: 0;
     bottom: 0;
@@ -211,7 +221,7 @@ div.node-info {
     right: 0;
     overflow-y: scroll;
 }
-.node-info-tips {
+.red-ui-help-tips {
     display: none;
     position: absolute;
     left:0;
@@ -220,21 +230,21 @@ div.node-info {
     height: 150px;
     box-sizing: border-box;
     border-top: 1px solid $secondary-border-color;
-    background-color: #fff;
+    background-color: $secondary-background;
     padding: 20px;
-    box-shadow: 0 5px 20px 0px rgba(0, 0, 0, 0.3);
+    box-shadow: 0 5px 20px 0px $shadow;
     overflow-y: auto;
 }
-.sidebar-node-info.show-tips {
-    .sidebar-node-info-stack {
+.red-ui-sidebar-info.show-tips {
+    .red-ui-sidebar-info-stack {
         bottom: 150px;
     }
-    .node-info-tips {
+    .red-ui-help-tips {
         display: block;
     }
 }
 
-.node-info-tips:before {
+.red-ui-help-tips:before {
   content: '';
   display: inline-block;
   height: 100%;
@@ -242,30 +252,30 @@ div.node-info {
   margin-right: -0.25em; /* Adjusts for spacing */
 }
 
-.node-info-tip {
+.red-ui-help-tip {
     display: inline-block;
     vertical-align: middle;
     width: 100%;
     font-size: 16px;
     text-align: center;
     line-height: 1.9em;
-    color : #bbb;
+    color : $tertiary-text-color;
     @include disable-selection;
     cursor: default;
 }
-.node-info-tips-buttons {
+.red-ui-help-tips-buttons {
     position: absolute;
     top: 4px;
     right: 6px;
     a {
-        color: #ddd !important;
-        border-color: #d9d9d9 !important;
+        color: $secondary-text-color;
+        border-color: $secondary-border-color !important;
         margin-left: 4px;
     }
 }
 
 .node-info-property-config-node {
-    border: 1px solid #eee;
+    border: 1px solid $secondary-border-color;
     border-radius: 4px;
     padding: 2px 4px 2px;
 }
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/tabs.scss b/packages/node_modules/@node-red/editor-client/src/sass/tabs.scss
index 6770baf24..a73922641 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/tabs.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/tabs.scss
@@ -16,7 +16,7 @@
 
 .red-ui-tabs {
     position: relative;
-    background: #fff;
+    background: $tab-background;
     overflow: hidden;
     height: 35px;
     box-sizing: border-box;
@@ -30,7 +30,6 @@
         }
     }
     & ul {
-        //background: #9999ff;
         list-style-type: none;
         padding:0;
         margin: 0;
@@ -71,7 +70,7 @@
                 padding-left: 12px;
                 width: 100%;
                 height: 100%;
-                color: #666;
+                color: $tab-text-color-inactive;
             }
             a:hover {
                 text-decoration: none;
@@ -86,14 +85,14 @@
             &.active {
                 background: $tab-background-active;
                 font-weight: bold;
-                border-bottom: 1px solid #fff;
+                border-bottom: 1px solid $tab-background-active;
                 z-index: 2;
 
                 a {
-                    color: #333;
+                    color: $tab-text-color-active;
                 }
                 a.red-ui-tab-close {
-                    color: #aaa;
+                    color: $workspace-button-color;
                     background: $tab-background-active;
                     &:hover {
                         background: $workspace-button-background-hover !important;
@@ -111,7 +110,7 @@
                 font-weight: bold;
                 .red-ui-tabs-badge-selected {
                     display: inline;
-                    background: white;
+                    background: $tab-background;
                 }
                 .red-ui-tabs-badge-changed {
                     display: none;
@@ -159,7 +158,7 @@
         height: 100%;
         border-right: 1px solid $primary-border-color;
         margin: 0;
-        background: #f3f3f3;
+        background: $tertiary-background;
         overflow: visible;
 
         .red-ui-tabs-scroll-container {
@@ -181,10 +180,10 @@
                 border-right: 1px solid $primary-border-color;
                 height: auto;
                 &:not(:first-child) {
-                    border-top: 1px solid  $secondary-border-color;
+                    border-top: 1px solid $secondary-border-color;
                 }
                 &:last-child {
-                    border-bottom: 1px solid  $secondary-border-color;
+                    border-bottom: 1px solid $secondary-border-color;
                 }
 
                 a.red-ui-tab-label {
@@ -192,7 +191,7 @@
                 }
 
                 &.active {
-                    border-right: 1px solid #fff;
+                    border-right: 1px solid $tab-background-active;
                 }
             }
         }
@@ -213,7 +212,7 @@
     top: 0;
     right: 0;
     height: 35px;
-    background: #fff;
+    background: $tab-background;
     border-bottom: 1px solid $primary-border-color;
     z-index: 2;
 
@@ -235,7 +234,7 @@
     top: 0;
     right: 0;
     height: 35px;
-    background: #fff;
+    background: $tab-background;
     border-bottom: 1px solid $primary-border-color;
     z-index: 2;
     a {
@@ -245,13 +244,8 @@
         width: 28px;
         margin: 4px 3px 3px;
         z-index: 2;
-        &.red-ui-tab-link-button {
-            &:not(.active) {
-                // background: #eee;
-            }
-        }
         &.red-ui-tab-link-button-menu {
-            border-color: white;
+            border-color: $tab-background;
         }
     }
 }
@@ -262,7 +256,7 @@
         height: 35px;
         width: 21px;
         display: block;
-        color: $link-color;
+        color: $workspace-button-color;
         font-size: 22px;
         text-align: center;
         margin:0;
@@ -275,14 +269,12 @@
     left:0;
     a {
         border-right: 1px solid $primary-border-color;
-        // box-shadow: 8px 0px 5px -2px rgba(0,0,0,0.1);
     }
 }
 .red-ui-tab-scroll-right {
     right: 0px;
     a {
         border-left: 1px solid $primary-border-color;
-        // box-shadow: -8px 0px 5px -2px rgba(0,0,0,0.1);
     }
 
 }
@@ -324,7 +316,7 @@ i.red-ui-tab-icon {
     line-height: 28px;
     text-align: center;
     padding:0px;
-    color: #aaa;
+    color: $tab-badge-color;
 }
 
 .red-ui-tabs-badges i {
@@ -358,9 +350,10 @@ i.red-ui-tab-icon {
     line-height: 28px;
     text-align: center;
     padding: 0px;
-    color: #aaa;
+    color: $workspace-button-color;
     &:hover {
         background: $workspace-button-background-hover !important;
+        color: $workspace-button-color-hover;
         opacity: 1;
     }
 }
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/ui/common/checkboxSet.scss b/packages/node_modules/@node-red/editor-client/src/sass/ui/common/checkboxSet.scss
index 0b8b95840..8858e477d 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/ui/common/checkboxSet.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/ui/common/checkboxSet.scss
@@ -16,7 +16,7 @@
 .red-ui-checkboxSet {
     width: 15px;
     display: inline-block;
-    color: #888;
+    color: $secondary-text-color;
     cursor: pointer;
     input {
         display:none;
@@ -24,6 +24,6 @@
 
     &.disabled {
         pointer-events: none;
-        color: #ddd;
+        color: $secondary-text-color-disabled;
     }
 }
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/ui/common/editableList.scss b/packages/node_modules/@node-red/editor-client/src/sass/ui/common/editableList.scss
index 8228d9d98..a5873f684 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/ui/common/editableList.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/ui/common/editableList.scss
@@ -37,7 +37,7 @@
     li {
         box-sizing: border-box;
         position: relative;
-        background: #fff;
+        background: $secondary-background;
         margin:0;
         padding:8px 0px;
         border-bottom: 1px solid $secondary-border-color;
@@ -47,7 +47,7 @@
             top: 50%;
             left: 2px;
             margin-top: -7px;
-            color: #eee;
+            color: $tertiary-text-color;
             cursor: move;
         }
         .red-ui-editableList-item-remove {
@@ -68,7 +68,7 @@
             margin-right: 28px;
         }
         &.red-ui-editableList-item-deleting {
-            background: #fee;
+            background: $secondary-background-inactive;
         }
     }
 
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/ui/common/nodeList.scss b/packages/node_modules/@node-red/editor-client/src/sass/ui/common/nodeList.scss
index e92e64e2f..01a7a4802 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/ui/common/nodeList.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/ui/common/nodeList.scss
@@ -21,9 +21,9 @@
             margin: 0;
             white-space: nowrap;
             border: none;
-            background: #fefefe;
+            background: $secondary-background;
             &:hover {
-                background: #f0f0f0;
+                background: $secondary-background-hover;
             }
 
             i.fa-angle-right {
@@ -39,17 +39,17 @@
             }
             .meta {
                 float: right;
-                input[type="checkbox"] {
+                input[type="checkbox"].red-ui-treeList-checkbox {
                     margin: 0;
                 }
             }
             .red-ui-editableList-item-content.disabled {
-                color: #ccc;
+                color: $secondary-text-color-disabled;
             }
             &.red-ui-editableList-section-header {
-                background: #f0f0f0;
+                background: $primary-background;
                 .red-ui-editableList-item-content.disabled {
-                    color: #bbb;
+                    color: $secondary-text-color-disabled;
                 }
             }
 
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/ui/common/searchBox.scss b/packages/node_modules/@node-red/editor-client/src/sass/ui/common/searchBox.scss
index 975a80c79..2f0740d61 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/ui/common/searchBox.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/ui/common/searchBox.scss
@@ -19,7 +19,7 @@
     position: relative;
     i {
         font-size: 10px;
-        color: #666;
+        color: $secondary-text-color;
     }
     i.fa-search {
         position: absolute;
@@ -32,7 +32,7 @@
         right: 5px;
         top: 9px;
     }
-    input {
+    input.red-ui-searchBox-input {
         border-radius: 0;
         border: none;
         width: 100%;
@@ -61,8 +61,8 @@
         position: absolute;
         right: 18px;
         top: 4px;
-        background: #eee;
-        color: #666;
+        background: $primary-background;
+        color: $secondary-text-color;
         padding: 1px 8px;
         font-size: 9px;
         border-radius: 4px;
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/ui/common/stack.scss b/packages/node_modules/@node-red/editor-client/src/sass/ui/common/stack.scss
index f76dbe32f..a32bfad70 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/ui/common/stack.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/ui/common/stack.scss
@@ -15,9 +15,9 @@
  **/
 
 .red-ui-stack {
-    background: white;
-    .palette-category {
-        background: white;
+    background: $secondary-background;
+    .red-ui-palette-category {
+        background: $secondary-background;
 
         &:last-child {
             border-bottom: none;
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/ui/common/treeList.scss b/packages/node_modules/@node-red/editor-client/src/sass/ui/common/treeList.scss
index ea217cffe..6a61e9645 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/ui/common/treeList.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/ui/common/treeList.scss
@@ -24,7 +24,7 @@
     width: 100%;
     height: 100%;
     position: relative;
-    background: #f9f9f9;
+    background: $tertiary-background;
 
     border: 1px solid $form-input-border-color;
     border-radius: 4px;
@@ -94,7 +94,7 @@
         color: $list-item-color;
     }
 
-    input {
+    input.red-ui-treeList-checkbox {
         margin: 0;
     }
 }
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/ui/common/typedInput.scss b/packages/node_modules/@node-red/editor-client/src/sass/ui/common/typedInput.scss
index b73c139f4..11c910365 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/ui/common/typedInput.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/ui/common/typedInput.scss
@@ -25,7 +25,7 @@
     box-sizing: border-box;
     overflow:visible;
     position: relative;
-    .red-ui-typedInput-input {
+    .red-ui-typedInput-input-wrap {
         position: absolute;
         left:0;
         right:0;
@@ -33,7 +33,7 @@
         bottom:0;
         outline: red;
     }
-    input {
+    input.red-ui-typedInput-input {
         width: 100%;
         padding: 0 0 0 3px;
         margin:0;
@@ -43,14 +43,16 @@
         border-bottom-left-radius: 0;
         box-shadow: none;
         vertical-align: middle;
-        // backgroun/d: #f0fff0;
     }
 
     &.red-ui-typedInput-focus:not(.input-error) {
         border-color: $form-input-focus-color !important;
     }
 
-    button {
+    button.red-ui-typedInput-type-select,
+    button.red-ui-typedInput-option-expand,
+    button.red-ui-typedInput-option-trigger
+     {
         text-align: left;
         border: none;
         position: absolute;
@@ -59,26 +61,20 @@
         border-bottom-left-radius: 4px;
         padding: 0 1px 0 5px;
         display:inline-block;
-        background: $typedInput-button-background;
+        background: $form-button-background;
         height: 32px;
         line-height: 32px;
         vertical-align: middle;
-        color: #555;
+        color: $form-text-color;
         i.red-ui-typedInput-icon {
-            position: relative;
-            top: -3px;
             margin-left: 1px;
             margin-right: 2px;
-            margin-top: 1px;
             vertical-align: middle;
-            &.fa-ellipsis-h {
-                top: -1px;
-            }
         }
         &.disabled {
             cursor: default;
             i.red-ui-typedInput-icon {
-                color: #bbb;
+                color: $secondary-text-color-disabled;
             }
         }
         .red-ui-typedInput-type-label,.red-ui-typedInput-option-label {
@@ -89,7 +85,7 @@
 
         &:not(.disabled):hover {
             text-decoration: none;
-            background: $typedInput-button-background-hover;
+            background: $workspace-button-background-hover;
         }
         &:focus {
             text-decoration: none;
@@ -97,7 +93,7 @@
             box-shadow: inset 0 0 0 1px $form-input-focus-color;
         }
         &:not(.disabled):active {
-            background: $typedInput-button-background-active;
+            background: $workspace-button-background-active;
             text-decoration: none;
         }
         &.red-ui-typedInput-full-width {
@@ -105,6 +101,12 @@
             border-top-right-radius: 4px;
             border-bottom-right-radius: 4px;
         }
+        &:before {
+            content:'';
+            display: inline-block;
+            height: 100%;
+            vertical-align: middle;
+        }
     }
 
     button.red-ui-typedInput-option-expand {
@@ -124,7 +126,8 @@
         position:absolute;
         right: 0;
         .red-ui-typedInput-option-label {
-            background:$typedInput-button-background;
+            background:$form-button-background;
+            color: $form-text-color;
             position:absolute;
             left:0;
             right:23px;
@@ -132,15 +135,21 @@
             padding: 0 5px 0 8px;
             i.red-ui-typedInput-icon {
                 margin-right: 4px;
-                margin-top: 4px;
             }
         }
         .red-ui-typedInput-option-caret {
             top: 0;
             position: absolute;
             right: 0;
+            bottom: 0;
             width: 17px;
             padding-left: 6px;
+            &:before {
+                content:'';
+                display: inline-block;
+                height: 100%;
+                vertical-align: middle;
+            }
         }
         &:focus {
             box-shadow: none;
@@ -152,27 +161,32 @@
 }
 .red-ui-typedInput-options {
     @include component-shadow;
+    font-family: $primary-font;
+    font-size: $primary-font-size;
+
     position: absolute;
+    max-height: 350px;
+    overflow-y: auto;
     border: 1px solid $primary-border-color;
-    background: #fff;
+    background: $secondary-background;
     z-index: 2000;
     a {
         padding: 6px 18px 6px 6px;
         display: block;
         border-bottom: 1px solid $secondary-border-color;
-        color: #333;
+        color: $form-text-color;
         &:hover {
             text-decoration: none;
-            background: $typedInput-button-background-hover;
+            background: $workspace-button-background-hover;
         }
         &:focus {
             text-decoration: none;
-            background: $typedInput-button-background-active;
+            background: $workspace-button-background-active;
             outline: none;
         }
         &:active {
             text-decoration: none;
-            background: $typedInput-button-background-active;
+            background: $workspace-button-background-active;
         }
     }
     .red-ui-typedInput-icon {
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/userSettings.scss b/packages/node_modules/@node-red/editor-client/src/sass/userSettings.scss
index 61ccf8f2d..60afeebe4 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/userSettings.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/userSettings.scss
@@ -14,15 +14,15 @@
  * limitations under the License.
  **/
 
-#user-settings-tabs-container {
+.red-ui-settings-tabs-container {
     position: absolute;
     top: 0;
     left: 0;
     bottom: 0;
     width: 120px;
-    background: #f3f3f3;
+    background: $tertiary-background;
 }
-#user-settings-tabs-content {
+.red-ui-settings-tabs-content {
     position: absolute;
     top: 0;
     left: 120px;
@@ -60,7 +60,7 @@
     }
 }
 
-#user-settings-tab-view {
+#red-ui-settings-tab-view {
     position: absolute;
     top:0;
     right: 0;
@@ -69,10 +69,10 @@
     padding: 8px 20px 20px;
     overflow-y: scroll;
 }
-.user-settings-row {
+.red-ui-settings-row {
     padding: 5px 10px 2px;
 }
-.user-settings-section {
+.red-ui-settings-section {
     position: relative;
     &:after {
         content: "";
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/workspace.scss b/packages/node_modules/@node-red/editor-client/src/sass/workspace.scss
index 726c67dee..0e06e423d 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/workspace.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/workspace.scss
@@ -14,24 +14,7 @@
  * limitations under the License.
  **/
 
-
-#chart {
-   overflow: auto;
-   background: #e3e3e3;
-   position: absolute;
-   bottom:25px;
-   top: 35px;
-   left:0px;
-   right:0px;
-   box-sizing:border-box;
-   transition: right 0.2s ease;
-}
-
-#chart:focus {
-    outline: none;
-}
-
-#workspace {
+#red-ui-workspace {
     position: absolute;
     margin: 0;
     top:0px;
@@ -41,33 +24,55 @@
     overflow: hidden;
     @include component-border;
     transition: left 0.1s ease-in-out;
-
 }
 
-.palette-closed  #workspace {
+#red-ui-workspace-chart {
+   overflow: auto;
+   position: absolute;
+   bottom:25px;
+   top: 35px;
+   left:0px;
+   right:0px;
+   box-sizing:border-box;
+   transition: right 0.2s ease;
+   &:focus {
+       outline: none;
+   }
+}
+
+.red-ui-workspace-chart-background {
+    fill: $view-background;
+}
+.red-ui-workspace-chart-grid line {
+    fill: none;
+    shape-rendering: crispEdges;
+    stroke: $view-grid-color;
+    stroke-width: 1px;
+}
+
+.red-ui-palette-closed #red-ui-workspace {
     left: 7px;
 }
 
-.workspace-footer-button {
-    @include component-footer-button;
-}
-.workspace-footer-button-toggle {
-    @include component-footer-button-toggle;
-}
-#workspace-footer {
-    @include component-footer;
-}
+// .workspace-footer-button {
+//     @include component-footer-button;
+//     margin-left: 2px;
+//     margin-right: 2px;
+// }
+//
+// .workspace-footer-button-toggle {
+//     @include component-footer-button-toggle;
+//     margin-left: 2px;
+//     margin-right: 2px;
+// }
 
-#workspace-tabs:not(.workspace-focussed) {
+#red-ui-workspace-tabs:not(.red-ui-workspace-focussed) {
     opacity:0.8;
-    li.red-ui-tab.active a {
-        color:#666;
-    }
 }
-.workspace-disabled-icon {
+.red-ui-workspace-disabled-icon {
     display: none;
 }
-.workspace-disabled {
+.red-ui-workspace-disabled {
     &.red-ui-tab {
         border-top-style: dashed;
         border-left-style: dashed;
@@ -75,14 +80,72 @@
 
         a {
             font-style: italic;
-            color: #aaa !important;
+            color: $tab-text-color-disabled-inactive !important;
         }
         &.active a {
             font-weight: normal;
-            color: #999 !important;
+            color: $tab-text-color-disabled-active !important;
         }
-        .workspace-disabled-icon {
+        .red-ui-workspace-disabled-icon {
             display: inline;
         }
     }
 }
+
+#red-ui-navigator-canvas {
+    position: absolute;
+    bottom: 0;
+    right:0;
+    zIndex: 101;
+    border-left: 1px solid $primary-border-color;
+    border-top: 1px solid $primary-border-color;
+    background: $view-navigator-background;
+    box-shadow: -1px 0 3px $shadow;
+}
+.red-ui-navigator-border {
+    stroke-dasharray: 5,5;
+    pointer-events: none;
+    stroke: $secondary-border-color;
+    strokeWidth: 1;
+    fill: white;
+}
+
+.red-ui-component-footer {
+    @include component-footer;
+}
+
+a.red-ui-footer-button,
+button.red-ui-footer-button {
+    @include component-footer-button;
+}
+
+a.red-ui-footer-button-toggle,
+button.red-ui-footer-button-toggle {
+    @include component-footer-button-toggle;
+}
+
+.red-ui-statusbar-widget {
+    margin: 0 2px;
+    display: inline-block;
+    vertical-align: middle;
+    height: 100%;
+    line-height: 20px;
+}
+
+.red-ui-statusbar-bucket {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+}
+.red-ui-statusbar-bucket-left {
+    left: 10px;
+    .red-ui-statusbar-widget:first-child {
+        margin-left: 0;
+    }
+}
+.red-ui-statusbar-bucket-right {
+    right: 10px;
+    .red-ui-statusbar-widget:last-child {
+        margin-right: 0;
+    }
+}
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/workspaceToolbar.scss b/packages/node_modules/@node-red/editor-client/src/sass/workspaceToolbar.scss
index 3224707fe..fbc0dbdeb 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/workspaceToolbar.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/workspaceToolbar.scss
@@ -15,7 +15,7 @@
  **/
 
 
-#workspace-toolbar {
+#red-ui-workspace-toolbar {
     display: none;
     color: $workspace-button-color;
     font-size: 12px;
@@ -27,7 +27,7 @@
     padding: 7px;
     height: 40px;
     box-sizing: border-box;
-    background: #fff;
+    background: $secondary-background;
     border-bottom: 1px solid $secondary-border-color;
     white-space: nowrap;
     transition: right 0.2s ease;
@@ -77,7 +77,7 @@
         margin: 0;
         height: 24px;
         font-size: 12px;
-        background: #f9f9f9;
+        background: $form-input-background;
         line-height: 22px;
         box-sizing: border-box;
     }
diff --git a/packages/node_modules/@node-red/editor-client/src/vendor/bootstrap/css/bootstrap.css b/packages/node_modules/@node-red/editor-client/src/vendor/bootstrap/css/bootstrap.css
deleted file mode 100644
index d82cf6e7c..000000000
--- a/packages/node_modules/@node-red/editor-client/src/vendor/bootstrap/css/bootstrap.css
+++ /dev/null
@@ -1,5038 +0,0 @@
-/*!
- * Bootstrap v2.3.2
- *
- * Copyright 2013 Twitter, Inc
- * Licensed under the Apache License v2.0
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Designed and built with all the love in the world by @mdo and @fat.
- */
-
-.clearfix {
-  *zoom: 1;
-}
-
-.clearfix:before,
-.clearfix:after {
-  display: table;
-  line-height: 0;
-  content: "";
-}
-
-.clearfix:after {
-  clear: both;
-}
-
-.hide-text {
-  font: 0/0 a;
-  color: transparent;
-  text-shadow: none;
-  background-color: transparent;
-  border: 0;
-}
-
-.input-block-level {
-  display: block;
-  width: 100%;
-  min-height: 30px;
-  -webkit-box-sizing: border-box;
-     -moz-box-sizing: border-box;
-          box-sizing: border-box;
-}
-
-article,
-aside,
-details,
-figcaption,
-figure,
-footer,
-header,
-hgroup,
-nav,
-section {
-  display: block;
-}
-
-audio,
-canvas,
-video {
-  display: inline-block;
-  *display: inline;
-  *zoom: 1;
-}
-
-audio:not([controls]) {
-  display: none;
-}
-
-html {
-  font-size: 100%;
-  -webkit-text-size-adjust: 100%;
-      -ms-text-size-adjust: 100%;
-}
-
-a:focus {
-  outline: thin dotted #333;
-  outline: 5px auto -webkit-focus-ring-color;
-  outline-offset: -2px;
-}
-
-a:hover,
-a:active {
-  outline: 0;
-}
-
-sub,
-sup {
-  position: relative;
-  font-size: 75%;
-  line-height: 0;
-  vertical-align: baseline;
-}
-
-sup {
-  top: -0.5em;
-}
-
-sub {
-  bottom: -0.25em;
-}
-
-img {
-  width: auto\9;
-  height: auto;
-  max-width: 100%;
-  vertical-align: middle;
-  border: 0;
-  -ms-interpolation-mode: bicubic;
-}
-
-#map_canvas img,
-.google-maps img {
-  max-width: none;
-}
-
-body {
-  margin: 0;
-  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-  font-size: 14px;
-  line-height: 20px;
-  color: #333333;
-  background-color: #ffffff;
-}
-
-a {
-  color: #0088cc;
-  text-decoration: none;
-}
-
-a:hover,
-a:focus {
-  color: #005580;
-  text-decoration: underline;
-}
-
-.img-rounded {
-  -webkit-border-radius: 6px;
-     -moz-border-radius: 6px;
-          border-radius: 6px;
-}
-
-.img-polaroid {
-  padding: 4px;
-  background-color: #fff;
-  border: 1px solid #ccc;
-  border: 1px solid rgba(0, 0, 0, 0.2);
-  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-     -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-}
-
-.img-circle {
-  -webkit-border-radius: 500px;
-     -moz-border-radius: 500px;
-          border-radius: 500px;
-}
-
-.row {
-  margin-left: -20px;
-  *zoom: 1;
-}
-
-.row:before,
-.row:after {
-  display: table;
-  line-height: 0;
-  content: "";
-}
-
-.row:after {
-  clear: both;
-}
-
-[class*="span"] {
-  float: left;
-  min-height: 1px;
-  margin-left: 20px;
-}
-
-.container,
-.navbar-static-top .container,
-.navbar-fixed-top .container,
-.navbar-fixed-bottom .container {
-  width: 940px;
-}
-
-.span12 {
-  width: 940px;
-}
-
-.span11 {
-  width: 860px;
-}
-
-.span10 {
-  width: 780px;
-}
-
-.span9 {
-  width: 700px;
-}
-
-.span8 {
-  width: 620px;
-}
-
-.span7 {
-  width: 540px;
-}
-
-.span6 {
-  width: 460px;
-}
-
-.span5 {
-  width: 380px;
-}
-
-.span4 {
-  width: 300px;
-}
-
-.span3 {
-  width: 220px;
-}
-
-.span2 {
-  width: 140px;
-}
-
-.span1 {
-  width: 60px;
-}
-
-.offset12 {
-  margin-left: 980px;
-}
-
-.offset11 {
-  margin-left: 900px;
-}
-
-.offset10 {
-  margin-left: 820px;
-}
-
-.offset9 {
-  margin-left: 740px;
-}
-
-.offset8 {
-  margin-left: 660px;
-}
-
-.offset7 {
-  margin-left: 580px;
-}
-
-.offset6 {
-  margin-left: 500px;
-}
-
-.offset5 {
-  margin-left: 420px;
-}
-
-.offset4 {
-  margin-left: 340px;
-}
-
-.offset3 {
-  margin-left: 260px;
-}
-
-.offset2 {
-  margin-left: 180px;
-}
-
-.offset1 {
-  margin-left: 100px;
-}
-
-.row-fluid {
-  width: 100%;
-  *zoom: 1;
-}
-
-.row-fluid:before,
-.row-fluid:after {
-  display: table;
-  line-height: 0;
-  content: "";
-}
-
-.row-fluid:after {
-  clear: both;
-}
-
-.row-fluid [class*="span"] {
-  display: block;
-  float: left;
-  width: 100%;
-  min-height: 30px;
-  margin-left: 2.127659574468085%;
-  *margin-left: 2.074468085106383%;
-  -webkit-box-sizing: border-box;
-     -moz-box-sizing: border-box;
-          box-sizing: border-box;
-}
-
-.row-fluid [class*="span"]:first-child {
-  margin-left: 0;
-}
-
-.row-fluid .controls-row [class*="span"] + [class*="span"] {
-  margin-left: 2.127659574468085%;
-}
-
-.row-fluid .span12 {
-  width: 100%;
-  *width: 99.94680851063829%;
-}
-
-.row-fluid .span11 {
-  width: 91.48936170212765%;
-  *width: 91.43617021276594%;
-}
-
-.row-fluid .span10 {
-  width: 82.97872340425532%;
-  *width: 82.92553191489361%;
-}
-
-.row-fluid .span9 {
-  width: 74.46808510638297%;
-  *width: 74.41489361702126%;
-}
-
-.row-fluid .span8 {
-  width: 65.95744680851064%;
-  *width: 65.90425531914893%;
-}
-
-.row-fluid .span7 {
-  width: 57.44680851063829%;
-  *width: 57.39361702127659%;
-}
-
-.row-fluid .span6 {
-  width: 48.93617021276595%;
-  *width: 48.88297872340425%;
-}
-
-.row-fluid .span5 {
-  width: 40.42553191489362%;
-  *width: 40.37234042553192%;
-}
-
-.row-fluid .span4 {
-  width: 31.914893617021278%;
-  *width: 31.861702127659576%;
-}
-
-.row-fluid .span3 {
-  width: 23.404255319148934%;
-  *width: 23.351063829787233%;
-}
-
-.row-fluid .span2 {
-  width: 14.893617021276595%;
-  *width: 14.840425531914894%;
-}
-
-.row-fluid .span1 {
-  width: 6.382978723404255%;
-  *width: 6.329787234042553%;
-}
-
-.row-fluid .offset12 {
-  margin-left: 104.25531914893617%;
-  *margin-left: 104.14893617021275%;
-}
-
-.row-fluid .offset12:first-child {
-  margin-left: 102.12765957446808%;
-  *margin-left: 102.02127659574467%;
-}
-
-.row-fluid .offset11 {
-  margin-left: 95.74468085106382%;
-  *margin-left: 95.6382978723404%;
-}
-
-.row-fluid .offset11:first-child {
-  margin-left: 93.61702127659574%;
-  *margin-left: 93.51063829787232%;
-}
-
-.row-fluid .offset10 {
-  margin-left: 87.23404255319149%;
-  *margin-left: 87.12765957446807%;
-}
-
-.row-fluid .offset10:first-child {
-  margin-left: 85.1063829787234%;
-  *margin-left: 84.99999999999999%;
-}
-
-.row-fluid .offset9 {
-  margin-left: 78.72340425531914%;
-  *margin-left: 78.61702127659572%;
-}
-
-.row-fluid .offset9:first-child {
-  margin-left: 76.59574468085106%;
-  *margin-left: 76.48936170212764%;
-}
-
-.row-fluid .offset8 {
-  margin-left: 70.2127659574468%;
-  *margin-left: 70.10638297872339%;
-}
-
-.row-fluid .offset8:first-child {
-  margin-left: 68.08510638297872%;
-  *margin-left: 67.9787234042553%;
-}
-
-.row-fluid .offset7 {
-  margin-left: 61.70212765957446%;
-  *margin-left: 61.59574468085106%;
-}
-
-.row-fluid .offset7:first-child {
-  margin-left: 59.574468085106375%;
-  *margin-left: 59.46808510638297%;
-}
-
-.row-fluid .offset6 {
-  margin-left: 53.191489361702125%;
-  *margin-left: 53.085106382978715%;
-}
-
-.row-fluid .offset6:first-child {
-  margin-left: 51.063829787234035%;
-  *margin-left: 50.95744680851063%;
-}
-
-.row-fluid .offset5 {
-  margin-left: 44.68085106382979%;
-  *margin-left: 44.57446808510638%;
-}
-
-.row-fluid .offset5:first-child {
-  margin-left: 42.5531914893617%;
-  *margin-left: 42.4468085106383%;
-}
-
-.row-fluid .offset4 {
-  margin-left: 36.170212765957444%;
-  *margin-left: 36.06382978723405%;
-}
-
-.row-fluid .offset4:first-child {
-  margin-left: 34.04255319148936%;
-  *margin-left: 33.93617021276596%;
-}
-
-.row-fluid .offset3 {
-  margin-left: 27.659574468085104%;
-  *margin-left: 27.5531914893617%;
-}
-
-.row-fluid .offset3:first-child {
-  margin-left: 25.53191489361702%;
-  *margin-left: 25.425531914893618%;
-}
-
-.row-fluid .offset2 {
-  margin-left: 19.148936170212764%;
-  *margin-left: 19.04255319148936%;
-}
-
-.row-fluid .offset2:first-child {
-  margin-left: 17.02127659574468%;
-  *margin-left: 16.914893617021278%;
-}
-
-.row-fluid .offset1 {
-  margin-left: 10.638297872340425%;
-  *margin-left: 10.53191489361702%;
-}
-
-.row-fluid .offset1:first-child {
-  margin-left: 8.51063829787234%;
-  *margin-left: 8.404255319148938%;
-}
-
-[class*="span"].hide,
-.row-fluid [class*="span"].hide {
-  display: none;
-}
-
-[class*="span"].pull-right,
-.row-fluid [class*="span"].pull-right {
-  float: right;
-}
-
-.container {
-  margin-right: auto;
-  margin-left: auto;
-  *zoom: 1;
-}
-
-.container:before,
-.container:after {
-  display: table;
-  line-height: 0;
-  content: "";
-}
-
-.container:after {
-  clear: both;
-}
-
-.container-fluid {
-  padding-right: 20px;
-  padding-left: 20px;
-  *zoom: 1;
-}
-
-.container-fluid:before,
-.container-fluid:after {
-  display: table;
-  line-height: 0;
-  content: "";
-}
-
-.container-fluid:after {
-  clear: both;
-}
-
-p {
-  margin: 0 0 10px;
-}
-
-.lead {
-  margin-bottom: 20px;
-  font-size: 21px;
-  font-weight: 200;
-  line-height: 30px;
-}
-
-small {
-  font-size: 85%;
-}
-
-strong {
-  font-weight: bold;
-}
-
-em {
-  font-style: italic;
-}
-
-cite {
-  font-style: normal;
-}
-
-.muted {
-  color: #999999;
-}
-
-a.muted:hover,
-a.muted:focus {
-  color: #808080;
-}
-
-.text-warning {
-  color: #c09853;
-}
-
-a.text-warning:hover,
-a.text-warning:focus {
-  color: #a47e3c;
-}
-
-.text-error {
-  color: #b94a48;
-}
-
-a.text-error:hover,
-a.text-error:focus {
-  color: #953b39;
-}
-
-.text-info {
-  color: #3a87ad;
-}
-
-a.text-info:hover,
-a.text-info:focus {
-  color: #2d6987;
-}
-
-.text-success {
-  color: #468847;
-}
-
-a.text-success:hover,
-a.text-success:focus {
-  color: #356635;
-}
-
-.text-left {
-  text-align: left;
-}
-
-.text-right {
-  text-align: right;
-}
-
-.text-center {
-  text-align: center;
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  margin: 10px 0;
-  font-family: inherit;
-  font-weight: bold;
-  line-height: 20px;
-  color: inherit;
-  text-rendering: optimizelegibility;
-}
-
-h1 small,
-h2 small,
-h3 small,
-h4 small,
-h5 small,
-h6 small {
-  font-weight: normal;
-  line-height: 1;
-  color: #999999;
-}
-
-h1,
-h2,
-h3 {
-  line-height: 40px;
-}
-
-h1 {
-  font-size: 38.5px;
-}
-
-h2 {
-  font-size: 31.5px;
-}
-
-h3 {
-  font-size: 24.5px;
-}
-
-h4 {
-  font-size: 17.5px;
-}
-
-h5 {
-  font-size: 14px;
-}
-
-h6 {
-  font-size: 11.9px;
-}
-
-h1 small {
-  font-size: 24.5px;
-}
-
-h2 small {
-  font-size: 17.5px;
-}
-
-h3 small {
-  font-size: 14px;
-}
-
-h4 small {
-  font-size: 14px;
-}
-
-.page-header {
-  padding-bottom: 9px;
-  margin: 20px 0 30px;
-  border-bottom: 1px solid #eeeeee;
-}
-
-ul,
-ol {
-  padding: 0;
-  margin: 0 0 10px 25px;
-}
-
-ul ul,
-ul ol,
-ol ol,
-ol ul {
-  margin-bottom: 0;
-}
-
-li {
-  line-height: 20px;
-}
-
-ul.unstyled,
-ol.unstyled {
-  margin-left: 0;
-  list-style: none;
-}
-
-ul.inline,
-ol.inline {
-  margin-left: 0;
-  list-style: none;
-}
-
-ul.inline > li,
-ol.inline > li {
-  display: inline-block;
-  *display: inline;
-  padding-right: 5px;
-  padding-left: 5px;
-  *zoom: 1;
-}
-
-dl {
-  margin-bottom: 20px;
-}
-
-dt,
-dd {
-  line-height: 20px;
-}
-
-dt {
-  font-weight: bold;
-}
-
-dd {
-  margin-left: 10px;
-}
-
-.dl-horizontal {
-  *zoom: 1;
-}
-
-.dl-horizontal:before,
-.dl-horizontal:after {
-  display: table;
-  line-height: 0;
-  content: "";
-}
-
-.dl-horizontal:after {
-  clear: both;
-}
-
-.dl-horizontal dt {
-  float: left;
-  width: 160px;
-  overflow: hidden;
-  clear: left;
-  text-align: right;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.dl-horizontal dd {
-  margin-left: 180px;
-}
-
-hr {
-  margin: 20px 0;
-  border: 0;
-  border-top: 1px solid #eeeeee;
-  border-bottom: 1px solid #ffffff;
-}
-
-abbr[title],
-abbr[data-original-title] {
-  cursor: help;
-  border-bottom: 1px dotted #999999;
-}
-
-abbr.initialism {
-  font-size: 90%;
-  text-transform: uppercase;
-}
-
-blockquote {
-  padding: 0 0 0 15px;
-  margin: 0 0 20px;
-  border-left: 5px solid #eeeeee;
-}
-
-blockquote p {
-  margin-bottom: 0;
-  font-size: 17.5px;
-  font-weight: 300;
-  line-height: 1.25;
-}
-
-blockquote small {
-  display: block;
-  line-height: 20px;
-  color: #999999;
-}
-
-blockquote small:before {
-  content: '\2014 \00A0';
-}
-
-blockquote.pull-right {
-  float: right;
-  padding-right: 15px;
-  padding-left: 0;
-  border-right: 5px solid #eeeeee;
-  border-left: 0;
-}
-
-blockquote.pull-right p,
-blockquote.pull-right small {
-  text-align: right;
-}
-
-blockquote.pull-right small:before {
-  content: '';
-}
-
-blockquote.pull-right small:after {
-  content: '\00A0 \2014';
-}
-
-q:before,
-q:after,
-blockquote:before,
-blockquote:after {
-  content: "";
-}
-
-address {
-  display: block;
-  margin-bottom: 20px;
-  font-style: normal;
-  line-height: 20px;
-}
-
-.pre-scrollable {
-  max-height: 340px;
-  overflow-y: scroll;
-}
-
-table {
-  max-width: 100%;
-  background-color: transparent;
-  border-collapse: collapse;
-  border-spacing: 0;
-}
-
-.table {
-  width: 100%;
-  margin-bottom: 20px;
-}
-
-.table th,
-.table td {
-  padding: 8px;
-  line-height: 20px;
-  text-align: left;
-  vertical-align: top;
-  border-top: 1px solid #dddddd;
-}
-
-.table th {
-  font-weight: bold;
-}
-
-.table thead th {
-  vertical-align: bottom;
-}
-
-.table caption + thead tr:first-child th,
-.table caption + thead tr:first-child td,
-.table colgroup + thead tr:first-child th,
-.table colgroup + thead tr:first-child td,
-.table thead:first-child tr:first-child th,
-.table thead:first-child tr:first-child td {
-  border-top: 0;
-}
-
-.table tbody + tbody {
-  border-top: 2px solid #dddddd;
-}
-
-.table .table {
-  background-color: #ffffff;
-}
-
-.table-condensed th,
-.table-condensed td {
-  padding: 4px 5px;
-}
-
-.table-bordered {
-  border: 1px solid #dddddd;
-  border-collapse: separate;
-  *border-collapse: collapse;
-  border-left: 0;
-  -webkit-border-radius: 4px;
-     -moz-border-radius: 4px;
-          border-radius: 4px;
-}
-
-.table-bordered th,
-.table-bordered td {
-  border-left: 1px solid #dddddd;
-}
-
-.table-bordered caption + thead tr:first-child th,
-.table-bordered caption + tbody tr:first-child th,
-.table-bordered caption + tbody tr:first-child td,
-.table-bordered colgroup + thead tr:first-child th,
-.table-bordered colgroup + tbody tr:first-child th,
-.table-bordered colgroup + tbody tr:first-child td,
-.table-bordered thead:first-child tr:first-child th,
-.table-bordered tbody:first-child tr:first-child th,
-.table-bordered tbody:first-child tr:first-child td {
-  border-top: 0;
-}
-
-.table-bordered thead:first-child tr:first-child > th:first-child,
-.table-bordered tbody:first-child tr:first-child > td:first-child,
-.table-bordered tbody:first-child tr:first-child > th:first-child {
-  -webkit-border-top-left-radius: 4px;
-          border-top-left-radius: 4px;
-  -moz-border-radius-topleft: 4px;
-}
-
-.table-bordered thead:first-child tr:first-child > th:last-child,
-.table-bordered tbody:first-child tr:first-child > td:last-child,
-.table-bordered tbody:first-child tr:first-child > th:last-child {
-  -webkit-border-top-right-radius: 4px;
-          border-top-right-radius: 4px;
-  -moz-border-radius-topright: 4px;
-}
-
-.table-bordered thead:last-child tr:last-child > th:first-child,
-.table-bordered tbody:last-child tr:last-child > td:first-child,
-.table-bordered tbody:last-child tr:last-child > th:first-child,
-.table-bordered tfoot:last-child tr:last-child > td:first-child,
-.table-bordered tfoot:last-child tr:last-child > th:first-child {
-  -webkit-border-bottom-left-radius: 4px;
-          border-bottom-left-radius: 4px;
-  -moz-border-radius-bottomleft: 4px;
-}
-
-.table-bordered thead:last-child tr:last-child > th:last-child,
-.table-bordered tbody:last-child tr:last-child > td:last-child,
-.table-bordered tbody:last-child tr:last-child > th:last-child,
-.table-bordered tfoot:last-child tr:last-child > td:last-child,
-.table-bordered tfoot:last-child tr:last-child > th:last-child {
-  -webkit-border-bottom-right-radius: 4px;
-          border-bottom-right-radius: 4px;
-  -moz-border-radius-bottomright: 4px;
-}
-
-.table-bordered tfoot + tbody:last-child tr:last-child td:first-child {
-  -webkit-border-bottom-left-radius: 0;
-          border-bottom-left-radius: 0;
-  -moz-border-radius-bottomleft: 0;
-}
-
-.table-bordered tfoot + tbody:last-child tr:last-child td:last-child {
-  -webkit-border-bottom-right-radius: 0;
-          border-bottom-right-radius: 0;
-  -moz-border-radius-bottomright: 0;
-}
-
-.table-bordered caption + thead tr:first-child th:first-child,
-.table-bordered caption + tbody tr:first-child td:first-child,
-.table-bordered colgroup + thead tr:first-child th:first-child,
-.table-bordered colgroup + tbody tr:first-child td:first-child {
-  -webkit-border-top-left-radius: 4px;
-          border-top-left-radius: 4px;
-  -moz-border-radius-topleft: 4px;
-}
-
-.table-bordered caption + thead tr:first-child th:last-child,
-.table-bordered caption + tbody tr:first-child td:last-child,
-.table-bordered colgroup + thead tr:first-child th:last-child,
-.table-bordered colgroup + tbody tr:first-child td:last-child {
-  -webkit-border-top-right-radius: 4px;
-          border-top-right-radius: 4px;
-  -moz-border-radius-topright: 4px;
-}
-
-.table-striped tbody > tr:nth-child(odd) > td,
-.table-striped tbody > tr:nth-child(odd) > th {
-  background-color: #f9f9f9;
-}
-
-.table-hover tbody tr:hover > td,
-.table-hover tbody tr:hover > th {
-  background-color: #f5f5f5;
-}
-
-table td[class*="span"],
-table th[class*="span"],
-.row-fluid table td[class*="span"],
-.row-fluid table th[class*="span"] {
-  display: table-cell;
-  float: none;
-  margin-left: 0;
-}
-
-.table td.span1,
-.table th.span1 {
-  float: none;
-  width: 44px;
-  margin-left: 0;
-}
-
-.table td.span2,
-.table th.span2 {
-  float: none;
-  width: 124px;
-  margin-left: 0;
-}
-
-.table td.span3,
-.table th.span3 {
-  float: none;
-  width: 204px;
-  margin-left: 0;
-}
-
-.table td.span4,
-.table th.span4 {
-  float: none;
-  width: 284px;
-  margin-left: 0;
-}
-
-.table td.span5,
-.table th.span5 {
-  float: none;
-  width: 364px;
-  margin-left: 0;
-}
-
-.table td.span6,
-.table th.span6 {
-  float: none;
-  width: 444px;
-  margin-left: 0;
-}
-
-.table td.span7,
-.table th.span7 {
-  float: none;
-  width: 524px;
-  margin-left: 0;
-}
-
-.table td.span8,
-.table th.span8 {
-  float: none;
-  width: 604px;
-  margin-left: 0;
-}
-
-.table td.span9,
-.table th.span9 {
-  float: none;
-  width: 684px;
-  margin-left: 0;
-}
-
-.table td.span10,
-.table th.span10 {
-  float: none;
-  width: 764px;
-  margin-left: 0;
-}
-
-.table td.span11,
-.table th.span11 {
-  float: none;
-  width: 844px;
-  margin-left: 0;
-}
-
-.table td.span12,
-.table th.span12 {
-  float: none;
-  width: 924px;
-  margin-left: 0;
-}
-
-.table tbody tr.success > td {
-  background-color: #dff0d8;
-}
-
-.table tbody tr.error > td {
-  background-color: #f2dede;
-}
-
-.table tbody tr.warning > td {
-  background-color: #fcf8e3;
-}
-
-.table tbody tr.info > td {
-  background-color: #d9edf7;
-}
-
-.table-hover tbody tr.success:hover > td {
-  background-color: #d0e9c6;
-}
-
-.table-hover tbody tr.error:hover > td {
-  background-color: #ebcccc;
-}
-
-.table-hover tbody tr.warning:hover > td {
-  background-color: #faf2cc;
-}
-
-.table-hover tbody tr.info:hover > td {
-  background-color: #c4e3f3;
-}
-
-[class^="icon-"],
-[class*=" icon-"] {
-  display: inline-block;
-  width: 14px;
-  height: 14px;
-  margin-top: 1px;
-  *margin-right: .3em;
-  line-height: 14px;
-  vertical-align: text-top;
-  background-image: url("../img/glyphicons-halflings.png");
-  background-position: 14px 14px;
-  background-repeat: no-repeat;
-}
-
-/* White icons with optional class, or on hover/focus/active states of certain elements */
-
-.icon-white,
-.nav-pills > .active > a > [class^="icon-"],
-.nav-pills > .active > a > [class*=" icon-"],
-.nav-list > .active > a > [class^="icon-"],
-.nav-list > .active > a > [class*=" icon-"],
-.navbar-inverse .nav > .active > a > [class^="icon-"],
-.navbar-inverse .nav > .active > a > [class*=" icon-"],
-.dropdown-menu > li > a:hover > [class^="icon-"],
-.dropdown-menu > li > a:focus > [class^="icon-"],
-.dropdown-menu > li > a:hover > [class*=" icon-"],
-.dropdown-menu > li > a:focus > [class*=" icon-"],
-.dropdown-menu > .active > a > [class^="icon-"],
-.dropdown-menu > .active > a > [class*=" icon-"],
-.dropdown-submenu:hover > a > [class^="icon-"],
-.dropdown-submenu:focus > a > [class^="icon-"],
-.dropdown-submenu:hover > a > [class*=" icon-"],
-.dropdown-submenu:focus > a > [class*=" icon-"] {
-  background-image: url("../img/glyphicons-halflings-white.png");
-}
-
-.icon-glass {
-  background-position: 0      0;
-}
-
-.icon-music {
-  background-position: -24px 0;
-}
-
-.icon-search {
-  background-position: -48px 0;
-}
-
-.icon-envelope {
-  background-position: -72px 0;
-}
-
-.icon-heart {
-  background-position: -96px 0;
-}
-
-.icon-star {
-  background-position: -120px 0;
-}
-
-.icon-star-empty {
-  background-position: -144px 0;
-}
-
-.icon-user {
-  background-position: -168px 0;
-}
-
-.icon-film {
-  background-position: -192px 0;
-}
-
-.icon-th-large {
-  background-position: -216px 0;
-}
-
-.icon-th {
-  background-position: -240px 0;
-}
-
-.icon-th-list {
-  background-position: -264px 0;
-}
-
-.icon-ok {
-  background-position: -288px 0;
-}
-
-.icon-remove {
-  background-position: -312px 0;
-}
-
-.icon-zoom-in {
-  background-position: -336px 0;
-}
-
-.icon-zoom-out {
-  background-position: -360px 0;
-}
-
-.icon-off {
-  background-position: -384px 0;
-}
-
-.icon-signal {
-  background-position: -408px 0;
-}
-
-.icon-cog {
-  background-position: -432px 0;
-}
-
-.icon-trash {
-  background-position: -456px 0;
-}
-
-.icon-home {
-  background-position: 0 -24px;
-}
-
-.icon-file {
-  background-position: -24px -24px;
-}
-
-.icon-time {
-  background-position: -48px -24px;
-}
-
-.icon-road {
-  background-position: -72px -24px;
-}
-
-.icon-download-alt {
-  background-position: -96px -24px;
-}
-
-.icon-download {
-  background-position: -120px -24px;
-}
-
-.icon-upload {
-  background-position: -144px -24px;
-}
-
-.icon-inbox {
-  background-position: -168px -24px;
-}
-
-.icon-play-circle {
-  background-position: -192px -24px;
-}
-
-.icon-repeat {
-  background-position: -216px -24px;
-}
-
-.icon-refresh {
-  background-position: -240px -24px;
-}
-
-.icon-list-alt {
-  background-position: -264px -24px;
-}
-
-.icon-lock {
-  background-position: -287px -24px;
-}
-
-.icon-flag {
-  background-position: -312px -24px;
-}
-
-.icon-headphones {
-  background-position: -336px -24px;
-}
-
-.icon-volume-off {
-  background-position: -360px -24px;
-}
-
-.icon-volume-down {
-  background-position: -384px -24px;
-}
-
-.icon-volume-up {
-  background-position: -408px -24px;
-}
-
-.icon-qrcode {
-  background-position: -432px -24px;
-}
-
-.icon-barcode {
-  background-position: -456px -24px;
-}
-
-.icon-tag {
-  background-position: 0 -48px;
-}
-
-.icon-tags {
-  background-position: -25px -48px;
-}
-
-.icon-book {
-  background-position: -48px -48px;
-}
-
-.icon-bookmark {
-  background-position: -72px -48px;
-}
-
-.icon-print {
-  background-position: -96px -48px;
-}
-
-.icon-camera {
-  background-position: -120px -48px;
-}
-
-.icon-font {
-  background-position: -144px -48px;
-}
-
-.icon-bold {
-  background-position: -167px -48px;
-}
-
-.icon-italic {
-  background-position: -192px -48px;
-}
-
-.icon-text-height {
-  background-position: -216px -48px;
-}
-
-.icon-text-width {
-  background-position: -240px -48px;
-}
-
-.icon-align-left {
-  background-position: -264px -48px;
-}
-
-.icon-align-center {
-  background-position: -288px -48px;
-}
-
-.icon-align-right {
-  background-position: -312px -48px;
-}
-
-.icon-align-justify {
-  background-position: -336px -48px;
-}
-
-.icon-list {
-  background-position: -360px -48px;
-}
-
-.icon-indent-left {
-  background-position: -384px -48px;
-}
-
-.icon-indent-right {
-  background-position: -408px -48px;
-}
-
-.icon-facetime-video {
-  background-position: -432px -48px;
-}
-
-.icon-picture {
-  background-position: -456px -48px;
-}
-
-.icon-pencil {
-  background-position: 0 -72px;
-}
-
-.icon-map-marker {
-  background-position: -24px -72px;
-}
-
-.icon-adjust {
-  background-position: -48px -72px;
-}
-
-.icon-tint {
-  background-position: -72px -72px;
-}
-
-.icon-edit {
-  background-position: -96px -72px;
-}
-
-.icon-share {
-  background-position: -120px -72px;
-}
-
-.icon-check {
-  background-position: -144px -72px;
-}
-
-.icon-move {
-  background-position: -168px -72px;
-}
-
-.icon-step-backward {
-  background-position: -192px -72px;
-}
-
-.icon-fast-backward {
-  background-position: -216px -72px;
-}
-
-.icon-backward {
-  background-position: -240px -72px;
-}
-
-.icon-play {
-  background-position: -264px -72px;
-}
-
-.icon-pause {
-  background-position: -288px -72px;
-}
-
-.icon-stop {
-  background-position: -312px -72px;
-}
-
-.icon-forward {
-  background-position: -336px -72px;
-}
-
-.icon-fast-forward {
-  background-position: -360px -72px;
-}
-
-.icon-step-forward {
-  background-position: -384px -72px;
-}
-
-.icon-eject {
-  background-position: -408px -72px;
-}
-
-.icon-chevron-left {
-  background-position: -432px -72px;
-}
-
-.icon-chevron-right {
-  background-position: -456px -72px;
-}
-
-.icon-plus-sign {
-  background-position: 0 -96px;
-}
-
-.icon-minus-sign {
-  background-position: -24px -96px;
-}
-
-.icon-remove-sign {
-  background-position: -48px -96px;
-}
-
-.icon-ok-sign {
-  background-position: -72px -96px;
-}
-
-.icon-question-sign {
-  background-position: -96px -96px;
-}
-
-.icon-info-sign {
-  background-position: -120px -96px;
-}
-
-.icon-screenshot {
-  background-position: -144px -96px;
-}
-
-.icon-remove-circle {
-  background-position: -168px -96px;
-}
-
-.icon-ok-circle {
-  background-position: -192px -96px;
-}
-
-.icon-ban-circle {
-  background-position: -216px -96px;
-}
-
-.icon-arrow-left {
-  background-position: -240px -96px;
-}
-
-.icon-arrow-right {
-  background-position: -264px -96px;
-}
-
-.icon-arrow-up {
-  background-position: -289px -96px;
-}
-
-.icon-arrow-down {
-  background-position: -312px -96px;
-}
-
-.icon-share-alt {
-  background-position: -336px -96px;
-}
-
-.icon-resize-full {
-  background-position: -360px -96px;
-}
-
-.icon-resize-small {
-  background-position: -384px -96px;
-}
-
-.icon-plus {
-  background-position: -408px -96px;
-}
-
-.icon-minus {
-  background-position: -433px -96px;
-}
-
-.icon-asterisk {
-  background-position: -456px -96px;
-}
-
-.icon-exclamation-sign {
-  background-position: 0 -120px;
-}
-
-.icon-gift {
-  background-position: -24px -120px;
-}
-
-.icon-leaf {
-  background-position: -48px -120px;
-}
-
-.icon-fire {
-  background-position: -72px -120px;
-}
-
-.icon-eye-open {
-  background-position: -96px -120px;
-}
-
-.icon-eye-close {
-  background-position: -120px -120px;
-}
-
-.icon-warning-sign {
-  background-position: -144px -120px;
-}
-
-.icon-plane {
-  background-position: -168px -120px;
-}
-
-.icon-calendar {
-  background-position: -192px -120px;
-}
-
-.icon-random {
-  width: 16px;
-  background-position: -216px -120px;
-}
-
-.icon-comment {
-  background-position: -240px -120px;
-}
-
-.icon-magnet {
-  background-position: -264px -120px;
-}
-
-.icon-chevron-up {
-  background-position: -288px -120px;
-}
-
-.icon-chevron-down {
-  background-position: -313px -119px;
-}
-
-.icon-retweet {
-  background-position: -336px -120px;
-}
-
-.icon-shopping-cart {
-  background-position: -360px -120px;
-}
-
-.icon-folder-close {
-  width: 16px;
-  background-position: -384px -120px;
-}
-
-.icon-folder-open {
-  width: 16px;
-  background-position: -408px -120px;
-}
-
-.icon-resize-vertical {
-  background-position: -432px -119px;
-}
-
-.icon-resize-horizontal {
-  background-position: -456px -118px;
-}
-
-.icon-hdd {
-  background-position: 0 -144px;
-}
-
-.icon-bullhorn {
-  background-position: -24px -144px;
-}
-
-.icon-bell {
-  background-position: -48px -144px;
-}
-
-.icon-certificate {
-  background-position: -72px -144px;
-}
-
-.icon-thumbs-up {
-  background-position: -96px -144px;
-}
-
-.icon-thumbs-down {
-  background-position: -120px -144px;
-}
-
-.icon-hand-right {
-  background-position: -144px -144px;
-}
-
-.icon-hand-left {
-  background-position: -168px -144px;
-}
-
-.icon-hand-up {
-  background-position: -192px -144px;
-}
-
-.icon-hand-down {
-  background-position: -216px -144px;
-}
-
-.icon-circle-arrow-right {
-  background-position: -240px -144px;
-}
-
-.icon-circle-arrow-left {
-  background-position: -264px -144px;
-}
-
-.icon-circle-arrow-up {
-  background-position: -288px -144px;
-}
-
-.icon-circle-arrow-down {
-  background-position: -312px -144px;
-}
-
-.icon-globe {
-  background-position: -336px -144px;
-}
-
-.icon-wrench {
-  background-position: -360px -144px;
-}
-
-.icon-tasks {
-  background-position: -384px -144px;
-}
-
-.icon-filter {
-  background-position: -408px -144px;
-}
-
-.icon-briefcase {
-  background-position: -432px -144px;
-}
-
-.icon-fullscreen {
-  background-position: -456px -144px;
-}
-
-.dropup,
-.dropdown {
-  position: relative;
-}
-
-.dropdown-toggle {
-  *margin-bottom: -3px;
-}
-
-.dropdown-toggle:active,
-.open .dropdown-toggle {
-  outline: 0;
-}
-
-.caret {
-  display: inline-block;
-  width: 0;
-  height: 0;
-  vertical-align: top;
-  border-top: 4px solid #000000;
-  border-right: 4px solid transparent;
-  border-left: 4px solid transparent;
-  content: "";
-}
-
-.dropdown .caret {
-  margin-top: 8px;
-  margin-left: 2px;
-}
-
-.dropdown-menu {
-  position: absolute;
-  top: 100%;
-  left: 0;
-  z-index: 1000;
-  display: none;
-  float: left;
-  min-width: 160px;
-  padding: 5px 0;
-  margin: 2px 0 0;
-  list-style: none;
-  background-color: #ffffff;
-  border: 1px solid #ccc;
-  border: 1px solid rgba(0, 0, 0, 0.2);
-  *border-right-width: 2px;
-  *border-bottom-width: 2px;
-  -webkit-border-radius: 6px;
-     -moz-border-radius: 6px;
-          border-radius: 6px;
-  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-     -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-  -webkit-background-clip: padding-box;
-     -moz-background-clip: padding;
-          background-clip: padding-box;
-}
-
-.dropdown-menu.pull-right {
-  right: 0;
-  left: auto;
-}
-
-.dropdown-menu .divider {
-  *width: 100%;
-  height: 1px;
-  margin: 9px 1px;
-  *margin: -5px 0 5px;
-  overflow: hidden;
-  background-color: #e5e5e5;
-  border-bottom: 1px solid #ffffff;
-}
-
-.dropdown-menu > li > a {
-  display: block;
-  padding: 3px 20px;
-  clear: both;
-  font-weight: normal;
-  line-height: 20px;
-  color: #333333;
-  white-space: nowrap;
-}
-
-.dropdown-menu > li > a:hover,
-.dropdown-menu > li > a:focus,
-.dropdown-submenu:hover > a,
-.dropdown-submenu:focus > a {
-  color: #ffffff;
-  text-decoration: none;
-  background-color: #0081c2;
-  background-image: -moz-linear-gradient(top, #0088cc, #0077b3);
-  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3));
-  background-image: -webkit-linear-gradient(top, #0088cc, #0077b3);
-  background-image: -o-linear-gradient(top, #0088cc, #0077b3);
-  background-image: linear-gradient(to bottom, #0088cc, #0077b3);
-  background-repeat: repeat-x;
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0);
-}
-
-.dropdown-menu > .active > a,
-.dropdown-menu > .active > a:hover,
-.dropdown-menu > .active > a:focus {
-  color: #ffffff;
-  text-decoration: none;
-  background-color: #0081c2;
-  background-image: -moz-linear-gradient(top, #0088cc, #0077b3);
-  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3));
-  background-image: -webkit-linear-gradient(top, #0088cc, #0077b3);
-  background-image: -o-linear-gradient(top, #0088cc, #0077b3);
-  background-image: linear-gradient(to bottom, #0088cc, #0077b3);
-  background-repeat: repeat-x;
-  outline: 0;
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0);
-}
-
-.dropdown-menu > .disabled > a,
-.dropdown-menu > .disabled > a:hover,
-.dropdown-menu > .disabled > a:focus {
-  color: #999999;
-}
-
-.dropdown-menu > .disabled > a:hover,
-.dropdown-menu > .disabled > a:focus {
-  text-decoration: none;
-  cursor: default;
-  background-color: transparent;
-  background-image: none;
-  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
-}
-
-.open {
-  *z-index: 1000;
-}
-
-.open > .dropdown-menu {
-  display: block;
-}
-
-.dropdown-backdrop {
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: 990;
-}
-
-.pull-right > .dropdown-menu {
-  right: 0;
-  left: auto;
-}
-
-.dropup .caret,
-.navbar-fixed-bottom .dropdown .caret {
-  border-top: 0;
-  border-bottom: 4px solid #000000;
-  content: "";
-}
-
-.dropup .dropdown-menu,
-.navbar-fixed-bottom .dropdown .dropdown-menu {
-  top: auto;
-  bottom: 100%;
-  margin-bottom: 1px;
-}
-
-.dropdown-submenu {
-  position: relative;
-}
-
-.dropdown-submenu > .dropdown-menu {
-  top: 0;
-  left: 100%;
-  margin-top: -6px;
-  margin-left: -1px;
-  -webkit-border-radius: 0 6px 6px 6px;
-     -moz-border-radius: 0 6px 6px 6px;
-          border-radius: 0 6px 6px 6px;
-}
-
-.dropdown-submenu:hover > .dropdown-menu {
-  display: block;
-}
-
-.dropup .dropdown-submenu > .dropdown-menu {
-  top: auto;
-  bottom: 0;
-  margin-top: 0;
-  margin-bottom: -2px;
-  -webkit-border-radius: 5px 5px 5px 0;
-     -moz-border-radius: 5px 5px 5px 0;
-          border-radius: 5px 5px 5px 0;
-}
-
-.dropdown-submenu > a:after {
-  display: block;
-  float: right;
-  width: 0;
-  height: 0;
-  margin-top: 5px;
-  margin-right: -10px;
-  border-color: transparent;
-  border-left-color: #cccccc;
-  border-style: solid;
-  border-width: 5px 0 5px 5px;
-  content: " ";
-}
-
-.dropdown-submenu:hover > a:after {
-  border-left-color: #ffffff;
-}
-
-.dropdown-submenu.pull-left {
-  float: none;
-}
-
-.dropdown-submenu.pull-left > .dropdown-menu {
-  left: -100%;
-  margin-left: 10px;
-  -webkit-border-radius: 6px 0 6px 6px;
-     -moz-border-radius: 6px 0 6px 6px;
-          border-radius: 6px 0 6px 6px;
-}
-
-.dropdown .dropdown-menu .nav-header {
-  padding-right: 20px;
-  padding-left: 20px;
-}
-
-.typeahead {
-  z-index: 1051;
-  margin-top: 2px;
-  -webkit-border-radius: 4px;
-     -moz-border-radius: 4px;
-          border-radius: 4px;
-}
-
-.well {
-  min-height: 20px;
-  padding: 19px;
-  margin-bottom: 20px;
-  background-color: #f5f5f5;
-  border: 1px solid #e3e3e3;
-  -webkit-border-radius: 4px;
-     -moz-border-radius: 4px;
-          border-radius: 4px;
-  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
-     -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
-          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
-}
-
-.well blockquote {
-  border-color: #ddd;
-  border-color: rgba(0, 0, 0, 0.15);
-}
-
-.well-large {
-  padding: 24px;
-  -webkit-border-radius: 6px;
-     -moz-border-radius: 6px;
-          border-radius: 6px;
-}
-
-.well-small {
-  padding: 9px;
-  -webkit-border-radius: 3px;
-     -moz-border-radius: 3px;
-          border-radius: 3px;
-}
-
-.fade {
-  opacity: 0;
-  -webkit-transition: opacity 0.15s linear;
-     -moz-transition: opacity 0.15s linear;
-       -o-transition: opacity 0.15s linear;
-          transition: opacity 0.15s linear;
-}
-
-.fade.in {
-  opacity: 1;
-}
-
-.collapse {
-  position: relative;
-  height: 0;
-  overflow: hidden;
-  -webkit-transition: height 0.35s ease;
-     -moz-transition: height 0.35s ease;
-       -o-transition: height 0.35s ease;
-          transition: height 0.35s ease;
-}
-
-.collapse.in {
-  height: auto;
-}
-
-.close {
-  float: right;
-  font-size: 20px;
-  font-weight: bold;
-  line-height: 20px;
-  color: #000000;
-  text-shadow: 0 1px 0 #ffffff;
-  opacity: 0.2;
-  filter: alpha(opacity=20);
-}
-
-.close:hover,
-.close:focus {
-  color: #000000;
-  text-decoration: none;
-  cursor: pointer;
-  opacity: 0.4;
-  filter: alpha(opacity=40);
-}
-
-button.close {
-  padding: 0;
-  cursor: pointer;
-  background: transparent;
-  border: 0;
-  -webkit-appearance: none;
-}
-
-.btn {
-  display: inline-block;
-  *display: inline;
-  padding: 4px 12px;
-  margin-bottom: 0;
-  *margin-left: .3em;
-  font-size: 14px;
-  line-height: 20px;
-  color: #333333;
-  text-align: center;
-  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
-  vertical-align: middle;
-  cursor: pointer;
-  background-color: #f5f5f5;
-  *background-color: #e6e6e6;
-  background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
-  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
-  background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
-  background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
-  background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
-  background-repeat: repeat-x;
-  border: 1px solid #cccccc;
-  *border: 0;
-  border-color: #e6e6e6 #e6e6e6 #bfbfbf;
-  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
-  border-bottom-color: #b3b3b3;
-  -webkit-border-radius: 4px;
-     -moz-border-radius: 4px;
-          border-radius: 4px;
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0);
-  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
-  *zoom: 1;
-  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
-     -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
-          box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
-}
-
-.btn:hover,
-.btn:focus,
-.btn:active,
-.btn.active,
-.btn.disabled,
-.btn[disabled] {
-  color: #333333;
-  background-color: #e6e6e6;
-  *background-color: #d9d9d9;
-}
-
-.btn:active,
-.btn.active {
-  background-color: #cccccc \9;
-}
-
-.btn:first-child {
-  *margin-left: 0;
-}
-
-.btn:hover,
-.btn:focus {
-  color: #333333;
-  text-decoration: none;
-  background-position: 0 -15px;
-  -webkit-transition: background-position 0.1s linear;
-     -moz-transition: background-position 0.1s linear;
-       -o-transition: background-position 0.1s linear;
-          transition: background-position 0.1s linear;
-}
-
-.btn:focus {
-  outline: thin dotted #333;
-  outline: 5px auto -webkit-focus-ring-color;
-  outline-offset: -2px;
-}
-
-.btn.active,
-.btn:active {
-  background-image: none;
-  outline: 0;
-  -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
-     -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
-          box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
-}
-
-.btn.disabled,
-.btn[disabled] {
-  cursor: default;
-  background-image: none;
-  opacity: 0.65;
-  filter: alpha(opacity=65);
-  -webkit-box-shadow: none;
-     -moz-box-shadow: none;
-          box-shadow: none;
-}
-
-.btn-large {
-  padding: 11px 19px;
-  font-size: 17.5px;
-  -webkit-border-radius: 6px;
-     -moz-border-radius: 6px;
-          border-radius: 6px;
-}
-
-.btn-large [class^="icon-"],
-.btn-large [class*=" icon-"] {
-  margin-top: 4px;
-}
-
-.btn-small {
-  padding: 2px 10px;
-  font-size: 11.9px;
-  -webkit-border-radius: 3px;
-     -moz-border-radius: 3px;
-          border-radius: 3px;
-}
-
-.btn-small [class^="icon-"],
-.btn-small [class*=" icon-"] {
-  margin-top: 0;
-}
-
-.btn-mini [class^="icon-"],
-.btn-mini [class*=" icon-"] {
-  margin-top: -1px;
-}
-
-.btn-mini {
-  padding: 0 6px;
-  font-size: 10.5px;
-  -webkit-border-radius: 3px;
-     -moz-border-radius: 3px;
-          border-radius: 3px;
-}
-
-.btn-block {
-  display: block;
-  width: 100%;
-  padding-right: 0;
-  padding-left: 0;
-  -webkit-box-sizing: border-box;
-     -moz-box-sizing: border-box;
-          box-sizing: border-box;
-}
-
-.btn-block + .btn-block {
-  margin-top: 5px;
-}
-
-input[type="submit"].btn-block,
-input[type="reset"].btn-block,
-input[type="button"].btn-block {
-  width: 100%;
-}
-
-.btn-primary.active,
-.btn-warning.active,
-.btn-danger.active,
-.btn-success.active,
-.btn-info.active,
-.btn-inverse.active {
-  color: rgba(255, 255, 255, 0.75);
-}
-
-.btn-primary {
-  color: #ffffff;
-  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
-  background-color: #006dcc;
-  *background-color: #0044cc;
-  background-image: -moz-linear-gradient(top, #0088cc, #0044cc);
-  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0044cc));
-  background-image: -webkit-linear-gradient(top, #0088cc, #0044cc);
-  background-image: -o-linear-gradient(top, #0088cc, #0044cc);
-  background-image: linear-gradient(to bottom, #0088cc, #0044cc);
-  background-repeat: repeat-x;
-  border-color: #0044cc #0044cc #002a80;
-  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0044cc', GradientType=0);
-  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
-}
-
-.btn-primary:hover,
-.btn-primary:focus,
-.btn-primary:active,
-.btn-primary.active,
-.btn-primary.disabled,
-.btn-primary[disabled] {
-  color: #ffffff;
-  background-color: #0044cc;
-  *background-color: #003bb3;
-}
-
-.btn-primary:active,
-.btn-primary.active {
-  background-color: #003399 \9;
-}
-
-.btn-warning {
-  color: #ffffff;
-  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
-  background-color: #faa732;
-  *background-color: #f89406;
-  background-image: -moz-linear-gradient(top, #fbb450, #f89406);
-  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fbb450), to(#f89406));
-  background-image: -webkit-linear-gradient(top, #fbb450, #f89406);
-  background-image: -o-linear-gradient(top, #fbb450, #f89406);
-  background-image: linear-gradient(to bottom, #fbb450, #f89406);
-  background-repeat: repeat-x;
-  border-color: #f89406 #f89406 #ad6704;
-  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffbb450', endColorstr='#fff89406', GradientType=0);
-  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
-}
-
-.btn-warning:hover,
-.btn-warning:focus,
-.btn-warning:active,
-.btn-warning.active,
-.btn-warning.disabled,
-.btn-warning[disabled] {
-  color: #ffffff;
-  background-color: #f89406;
-  *background-color: #df8505;
-}
-
-.btn-warning:active,
-.btn-warning.active {
-  background-color: #c67605 \9;
-}
-
-.btn-danger {
-  color: #ffffff;
-  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
-  background-color: #da4f49;
-  *background-color: #bd362f;
-  background-image: -moz-linear-gradient(top, #ee5f5b, #bd362f);
-  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ee5f5b), to(#bd362f));
-  background-image: -webkit-linear-gradient(top, #ee5f5b, #bd362f);
-  background-image: -o-linear-gradient(top, #ee5f5b, #bd362f);
-  background-image: linear-gradient(to bottom, #ee5f5b, #bd362f);
-  background-repeat: repeat-x;
-  border-color: #bd362f #bd362f #802420;
-  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffee5f5b', endColorstr='#ffbd362f', GradientType=0);
-  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
-}
-
-.btn-danger:hover,
-.btn-danger:focus,
-.btn-danger:active,
-.btn-danger.active,
-.btn-danger.disabled,
-.btn-danger[disabled] {
-  color: #ffffff;
-  background-color: #bd362f;
-  *background-color: #a9302a;
-}
-
-.btn-danger:active,
-.btn-danger.active {
-  background-color: #942a25 \9;
-}
-
-.btn-success {
-  color: #ffffff;
-  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
-  background-color: #5bb75b;
-  *background-color: #51a351;
-  background-image: -moz-linear-gradient(top, #62c462, #51a351);
-  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#62c462), to(#51a351));
-  background-image: -webkit-linear-gradient(top, #62c462, #51a351);
-  background-image: -o-linear-gradient(top, #62c462, #51a351);
-  background-image: linear-gradient(to bottom, #62c462, #51a351);
-  background-repeat: repeat-x;
-  border-color: #51a351 #51a351 #387038;
-  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff62c462', endColorstr='#ff51a351', GradientType=0);
-  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
-}
-
-.btn-success:hover,
-.btn-success:focus,
-.btn-success:active,
-.btn-success.active,
-.btn-success.disabled,
-.btn-success[disabled] {
-  color: #ffffff;
-  background-color: #51a351;
-  *background-color: #499249;
-}
-
-.btn-success:active,
-.btn-success.active {
-  background-color: #408140 \9;
-}
-
-.btn-info {
-  color: #ffffff;
-  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
-  background-color: #49afcd;
-  *background-color: #2f96b4;
-  background-image: -moz-linear-gradient(top, #5bc0de, #2f96b4);
-  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#5bc0de), to(#2f96b4));
-  background-image: -webkit-linear-gradient(top, #5bc0de, #2f96b4);
-  background-image: -o-linear-gradient(top, #5bc0de, #2f96b4);
-  background-image: linear-gradient(to bottom, #5bc0de, #2f96b4);
-  background-repeat: repeat-x;
-  border-color: #2f96b4 #2f96b4 #1f6377;
-  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff2f96b4', GradientType=0);
-  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
-}
-
-.btn-info:hover,
-.btn-info:focus,
-.btn-info:active,
-.btn-info.active,
-.btn-info.disabled,
-.btn-info[disabled] {
-  color: #ffffff;
-  background-color: #2f96b4;
-  *background-color: #2a85a0;
-}
-
-.btn-info:active,
-.btn-info.active {
-  background-color: #24748c \9;
-}
-
-.btn-inverse {
-  color: #ffffff;
-  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
-  background-color: #363636;
-  *background-color: #222222;
-  background-image: -moz-linear-gradient(top, #444444, #222222);
-  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#444444), to(#222222));
-  background-image: -webkit-linear-gradient(top, #444444, #222222);
-  background-image: -o-linear-gradient(top, #444444, #222222);
-  background-image: linear-gradient(to bottom, #444444, #222222);
-  background-repeat: repeat-x;
-  border-color: #222222 #222222 #000000;
-  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff444444', endColorstr='#ff222222', GradientType=0);
-  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
-}
-
-.btn-inverse:hover,
-.btn-inverse:focus,
-.btn-inverse:active,
-.btn-inverse.active,
-.btn-inverse.disabled,
-.btn-inverse[disabled] {
-  color: #ffffff;
-  background-color: #222222;
-  *background-color: #151515;
-}
-
-.btn-inverse:active,
-.btn-inverse.active {
-  background-color: #080808 \9;
-}
-
-button.btn,
-input[type="submit"].btn {
-  *padding-top: 3px;
-  *padding-bottom: 3px;
-}
-
-button.btn::-moz-focus-inner,
-input[type="submit"].btn::-moz-focus-inner {
-  padding: 0;
-  border: 0;
-}
-
-button.btn.btn-large,
-input[type="submit"].btn.btn-large {
-  *padding-top: 7px;
-  *padding-bottom: 7px;
-}
-
-button.btn.btn-small,
-input[type="submit"].btn.btn-small {
-  *padding-top: 3px;
-  *padding-bottom: 3px;
-}
-
-button.btn.btn-mini,
-input[type="submit"].btn.btn-mini {
-  *padding-top: 1px;
-  *padding-bottom: 1px;
-}
-
-.btn-link,
-.btn-link:active,
-.btn-link[disabled] {
-  background-color: transparent;
-  background-image: none;
-  -webkit-box-shadow: none;
-     -moz-box-shadow: none;
-          box-shadow: none;
-}
-
-.btn-link {
-  color: #0088cc;
-  cursor: pointer;
-  border-color: transparent;
-  -webkit-border-radius: 0;
-     -moz-border-radius: 0;
-          border-radius: 0;
-}
-
-.btn-link:hover,
-.btn-link:focus {
-  color: #005580;
-  text-decoration: underline;
-  background-color: transparent;
-}
-
-.btn-link[disabled]:hover,
-.btn-link[disabled]:focus {
-  color: #333333;
-  text-decoration: none;
-}
-
-.btn-group {
-  position: relative;
-  display: inline-block;
-  *display: inline;
-  *margin-left: .3em;
-  font-size: 0;
-  white-space: nowrap;
-  vertical-align: middle;
-  *zoom: 1;
-}
-
-.btn-group:first-child {
-  *margin-left: 0;
-}
-
-.btn-group + .btn-group {
-  margin-left: 5px;
-}
-
-.btn-toolbar {
-  margin-top: 10px;
-  margin-bottom: 10px;
-  font-size: 0;
-}
-
-.btn-toolbar > .btn + .btn,
-.btn-toolbar > .btn-group + .btn,
-.btn-toolbar > .btn + .btn-group {
-  margin-left: 5px;
-}
-
-.btn-group > .btn {
-  position: relative;
-  -webkit-border-radius: 0;
-     -moz-border-radius: 0;
-          border-radius: 0;
-}
-
-.btn-group > .btn + .btn {
-  margin-left: -1px;
-}
-
-.btn-group > .btn,
-.btn-group > .dropdown-menu,
-.btn-group > .popover {
-  font-size: 14px;
-}
-
-.btn-group > .btn-mini {
-  font-size: 10.5px;
-}
-
-.btn-group > .btn-small {
-  font-size: 11.9px;
-}
-
-.btn-group > .btn-large {
-  font-size: 17.5px;
-}
-
-.btn-group > .btn:first-child {
-  margin-left: 0;
-  -webkit-border-bottom-left-radius: 4px;
-          border-bottom-left-radius: 4px;
-  -webkit-border-top-left-radius: 4px;
-          border-top-left-radius: 4px;
-  -moz-border-radius-bottomleft: 4px;
-  -moz-border-radius-topleft: 4px;
-}
-
-.btn-group > .btn:last-child,
-.btn-group > .dropdown-toggle {
-  -webkit-border-top-right-radius: 4px;
-          border-top-right-radius: 4px;
-  -webkit-border-bottom-right-radius: 4px;
-          border-bottom-right-radius: 4px;
-  -moz-border-radius-topright: 4px;
-  -moz-border-radius-bottomright: 4px;
-}
-
-.btn-group > .btn.large:first-child {
-  margin-left: 0;
-  -webkit-border-bottom-left-radius: 6px;
-          border-bottom-left-radius: 6px;
-  -webkit-border-top-left-radius: 6px;
-          border-top-left-radius: 6px;
-  -moz-border-radius-bottomleft: 6px;
-  -moz-border-radius-topleft: 6px;
-}
-
-.btn-group > .btn.large:last-child,
-.btn-group > .large.dropdown-toggle {
-  -webkit-border-top-right-radius: 6px;
-          border-top-right-radius: 6px;
-  -webkit-border-bottom-right-radius: 6px;
-          border-bottom-right-radius: 6px;
-  -moz-border-radius-topright: 6px;
-  -moz-border-radius-bottomright: 6px;
-}
-
-.btn-group > .btn:hover,
-.btn-group > .btn:focus,
-.btn-group > .btn:active,
-.btn-group > .btn.active {
-  z-index: 2;
-}
-
-.btn-group .dropdown-toggle:active,
-.btn-group.open .dropdown-toggle {
-  outline: 0;
-}
-
-.btn-group > .btn + .dropdown-toggle {
-  *padding-top: 5px;
-  padding-right: 8px;
-  *padding-bottom: 5px;
-  padding-left: 8px;
-  -webkit-box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.125), inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
-     -moz-box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.125), inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
-          box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.125), inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
-}
-
-.btn-group > .btn-mini + .dropdown-toggle {
-  *padding-top: 2px;
-  padding-right: 5px;
-  *padding-bottom: 2px;
-  padding-left: 5px;
-}
-
-.btn-group > .btn-small + .dropdown-toggle {
-  *padding-top: 5px;
-  *padding-bottom: 4px;
-}
-
-.btn-group > .btn-large + .dropdown-toggle {
-  *padding-top: 7px;
-  padding-right: 12px;
-  *padding-bottom: 7px;
-  padding-left: 12px;
-}
-
-.btn-group.open .dropdown-toggle {
-  background-image: none;
-  -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
-     -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
-          box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
-}
-
-.btn-group.open .btn.dropdown-toggle {
-  background-color: #e6e6e6;
-}
-
-.btn-group.open .btn-primary.dropdown-toggle {
-  background-color: #0044cc;
-}
-
-.btn-group.open .btn-warning.dropdown-toggle {
-  background-color: #f89406;
-}
-
-.btn-group.open .btn-danger.dropdown-toggle {
-  background-color: #bd362f;
-}
-
-.btn-group.open .btn-success.dropdown-toggle {
-  background-color: #51a351;
-}
-
-.btn-group.open .btn-info.dropdown-toggle {
-  background-color: #2f96b4;
-}
-
-.btn-group.open .btn-inverse.dropdown-toggle {
-  background-color: #222222;
-}
-
-.btn .caret {
-  margin-top: 8px;
-  margin-left: 0;
-}
-
-.btn-large .caret {
-  margin-top: 6px;
-}
-
-.btn-large .caret {
-  border-top-width: 5px;
-  border-right-width: 5px;
-  border-left-width: 5px;
-}
-
-.btn-mini .caret,
-.btn-small .caret {
-  margin-top: 8px;
-}
-
-.dropup .btn-large .caret {
-  border-bottom-width: 5px;
-}
-
-.btn-primary .caret,
-.btn-warning .caret,
-.btn-danger .caret,
-.btn-info .caret,
-.btn-success .caret,
-.btn-inverse .caret {
-  border-top-color: #ffffff;
-  border-bottom-color: #ffffff;
-}
-
-.btn-group-vertical {
-  display: inline-block;
-  *display: inline;
-  /* IE7 inline-block hack */
-
-  *zoom: 1;
-}
-
-.btn-group-vertical > .btn {
-  display: block;
-  float: none;
-  max-width: 100%;
-  -webkit-border-radius: 0;
-     -moz-border-radius: 0;
-          border-radius: 0;
-}
-
-.btn-group-vertical > .btn + .btn {
-  margin-top: -1px;
-  margin-left: 0;
-}
-
-.btn-group-vertical > .btn:first-child {
-  -webkit-border-radius: 4px 4px 0 0;
-     -moz-border-radius: 4px 4px 0 0;
-          border-radius: 4px 4px 0 0;
-}
-
-.btn-group-vertical > .btn:last-child {
-  -webkit-border-radius: 0 0 4px 4px;
-     -moz-border-radius: 0 0 4px 4px;
-          border-radius: 0 0 4px 4px;
-}
-
-.btn-group-vertical > .btn-large:first-child {
-  -webkit-border-radius: 6px 6px 0 0;
-     -moz-border-radius: 6px 6px 0 0;
-          border-radius: 6px 6px 0 0;
-}
-
-.btn-group-vertical > .btn-large:last-child {
-  -webkit-border-radius: 0 0 6px 6px;
-     -moz-border-radius: 0 0 6px 6px;
-          border-radius: 0 0 6px 6px;
-}
-
-.alert {
-  padding: 8px 35px 8px 14px;
-  margin-bottom: 20px;
-  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
-  background-color: #fcf8e3;
-  border: 1px solid #fbeed5;
-  -webkit-border-radius: 4px;
-     -moz-border-radius: 4px;
-          border-radius: 4px;
-}
-
-.alert,
-.alert h4 {
-  color: #c09853;
-}
-
-.alert h4 {
-  margin: 0;
-}
-
-.alert .close {
-  position: relative;
-  top: -2px;
-  right: -21px;
-  line-height: 20px;
-}
-
-.alert-success {
-  color: #468847;
-  background-color: #dff0d8;
-  border-color: #d6e9c6;
-}
-
-.alert-success h4 {
-  color: #468847;
-}
-
-.alert-danger,
-.alert-error {
-  color: #b94a48;
-  background-color: #f2dede;
-  border-color: #eed3d7;
-}
-
-.alert-danger h4,
-.alert-error h4 {
-  color: #b94a48;
-}
-
-.alert-info {
-  color: #3a87ad;
-  background-color: #d9edf7;
-  border-color: #bce8f1;
-}
-
-.alert-info h4 {
-  color: #3a87ad;
-}
-
-.alert-block {
-  padding-top: 14px;
-  padding-bottom: 14px;
-}
-
-.alert-block > p,
-.alert-block > ul {
-  margin-bottom: 0;
-}
-
-.alert-block p + p {
-  margin-top: 5px;
-}
-
-.nav {
-  margin-bottom: 20px;
-  margin-left: 0;
-  list-style: none;
-}
-
-.nav > li > a {
-  display: block;
-}
-
-.nav > li > a:hover,
-.nav > li > a:focus {
-  text-decoration: none;
-  background-color: #eeeeee;
-}
-
-.nav > li > a > img {
-  max-width: none;
-}
-
-.nav > .pull-right {
-  float: right;
-}
-
-.nav-header {
-  display: block;
-  padding: 3px 15px;
-  font-size: 11px;
-  font-weight: bold;
-  line-height: 20px;
-  color: #999999;
-  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
-  text-transform: uppercase;
-}
-
-.nav li + .nav-header {
-  margin-top: 9px;
-}
-
-.nav-list {
-  padding-right: 15px;
-  padding-left: 15px;
-  margin-bottom: 0;
-}
-
-.nav-list > li > a,
-.nav-list .nav-header {
-  margin-right: -15px;
-  margin-left: -15px;
-  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
-}
-
-.nav-list > li > a {
-  padding: 3px 15px;
-}
-
-.nav-list > .active > a,
-.nav-list > .active > a:hover,
-.nav-list > .active > a:focus {
-  color: #ffffff;
-  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
-  background-color: #0088cc;
-}
-
-.nav-list [class^="icon-"],
-.nav-list [class*=" icon-"] {
-  margin-right: 2px;
-}
-
-.nav-list .divider {
-  *width: 100%;
-  height: 1px;
-  margin: 9px 1px;
-  *margin: -5px 0 5px;
-  overflow: hidden;
-  background-color: #e5e5e5;
-  border-bottom: 1px solid #ffffff;
-}
-
-.nav-tabs,
-.nav-pills {
-  *zoom: 1;
-}
-
-.nav-tabs:before,
-.nav-pills:before,
-.nav-tabs:after,
-.nav-pills:after {
-  display: table;
-  line-height: 0;
-  content: "";
-}
-
-.nav-tabs:after,
-.nav-pills:after {
-  clear: both;
-}
-
-.nav-tabs > li,
-.nav-pills > li {
-  float: left;
-}
-
-.nav-tabs > li > a,
-.nav-pills > li > a {
-  padding-right: 12px;
-  padding-left: 12px;
-  margin-right: 2px;
-  line-height: 14px;
-}
-
-.nav-tabs {
-  border-bottom: 1px solid #ddd;
-}
-
-.nav-tabs > li {
-  margin-bottom: -1px;
-}
-
-.nav-tabs > li > a {
-  padding-top: 8px;
-  padding-bottom: 8px;
-  line-height: 20px;
-  border: 1px solid transparent;
-  -webkit-border-radius: 4px 4px 0 0;
-     -moz-border-radius: 4px 4px 0 0;
-          border-radius: 4px 4px 0 0;
-}
-
-.nav-tabs > li > a:hover,
-.nav-tabs > li > a:focus {
-  border-color: #eeeeee #eeeeee #dddddd;
-}
-
-.nav-tabs > .active > a,
-.nav-tabs > .active > a:hover,
-.nav-tabs > .active > a:focus {
-  color: #555555;
-  cursor: default;
-  background-color: #ffffff;
-  border: 1px solid #ddd;
-  border-bottom-color: transparent;
-}
-
-.nav-pills > li > a {
-  padding-top: 8px;
-  padding-bottom: 8px;
-  margin-top: 2px;
-  margin-bottom: 2px;
-  -webkit-border-radius: 5px;
-     -moz-border-radius: 5px;
-          border-radius: 5px;
-}
-
-.nav-pills > .active > a,
-.nav-pills > .active > a:hover,
-.nav-pills > .active > a:focus {
-  color: #ffffff;
-  background-color: #0088cc;
-}
-
-.nav-stacked > li {
-  float: none;
-}
-
-.nav-stacked > li > a {
-  margin-right: 0;
-}
-
-.nav-tabs.nav-stacked {
-  border-bottom: 0;
-}
-
-.nav-tabs.nav-stacked > li > a {
-  border: 1px solid #ddd;
-  -webkit-border-radius: 0;
-     -moz-border-radius: 0;
-          border-radius: 0;
-}
-
-.nav-tabs.nav-stacked > li:first-child > a {
-  -webkit-border-top-right-radius: 4px;
-          border-top-right-radius: 4px;
-  -webkit-border-top-left-radius: 4px;
-          border-top-left-radius: 4px;
-  -moz-border-radius-topright: 4px;
-  -moz-border-radius-topleft: 4px;
-}
-
-.nav-tabs.nav-stacked > li:last-child > a {
-  -webkit-border-bottom-right-radius: 4px;
-          border-bottom-right-radius: 4px;
-  -webkit-border-bottom-left-radius: 4px;
-          border-bottom-left-radius: 4px;
-  -moz-border-radius-bottomright: 4px;
-  -moz-border-radius-bottomleft: 4px;
-}
-
-.nav-tabs.nav-stacked > li > a:hover,
-.nav-tabs.nav-stacked > li > a:focus {
-  z-index: 2;
-  border-color: #ddd;
-}
-
-.nav-pills.nav-stacked > li > a {
-  margin-bottom: 3px;
-}
-
-.nav-pills.nav-stacked > li:last-child > a {
-  margin-bottom: 1px;
-}
-
-.nav-tabs .dropdown-menu {
-  -webkit-border-radius: 0 0 6px 6px;
-     -moz-border-radius: 0 0 6px 6px;
-          border-radius: 0 0 6px 6px;
-}
-
-.nav-pills .dropdown-menu {
-  -webkit-border-radius: 6px;
-     -moz-border-radius: 6px;
-          border-radius: 6px;
-}
-
-.nav .dropdown-toggle .caret {
-  margin-top: 6px;
-  border-top-color: #0088cc;
-  border-bottom-color: #0088cc;
-}
-
-.nav .dropdown-toggle:hover .caret,
-.nav .dropdown-toggle:focus .caret {
-  border-top-color: #005580;
-  border-bottom-color: #005580;
-}
-
-/* move down carets for tabs */
-
-.nav-tabs .dropdown-toggle .caret {
-  margin-top: 8px;
-}
-
-.nav .active .dropdown-toggle .caret {
-  border-top-color: #fff;
-  border-bottom-color: #fff;
-}
-
-.nav-tabs .active .dropdown-toggle .caret {
-  border-top-color: #555555;
-  border-bottom-color: #555555;
-}
-
-.nav > .dropdown.active > a:hover,
-.nav > .dropdown.active > a:focus {
-  cursor: pointer;
-}
-
-.nav-tabs .open .dropdown-toggle,
-.nav-pills .open .dropdown-toggle,
-.nav > li.dropdown.open.active > a:hover,
-.nav > li.dropdown.open.active > a:focus {
-  color: #ffffff;
-  background-color: #999999;
-  border-color: #999999;
-}
-
-.nav li.dropdown.open .caret,
-.nav li.dropdown.open.active .caret,
-.nav li.dropdown.open a:hover .caret,
-.nav li.dropdown.open a:focus .caret {
-  border-top-color: #ffffff;
-  border-bottom-color: #ffffff;
-  opacity: 1;
-  filter: alpha(opacity=100);
-}
-
-.tabs-stacked .open > a:hover,
-.tabs-stacked .open > a:focus {
-  border-color: #999999;
-}
-
-.tabbable {
-  *zoom: 1;
-}
-
-.tabbable:before,
-.tabbable:after {
-  display: table;
-  line-height: 0;
-  content: "";
-}
-
-.tabbable:after {
-  clear: both;
-}
-
-.tab-content {
-  overflow: auto;
-}
-
-.tabs-below > .nav-tabs,
-.tabs-right > .nav-tabs,
-.tabs-left > .nav-tabs {
-  border-bottom: 0;
-}
-
-.tab-content > .tab-pane,
-.pill-content > .pill-pane {
-  display: none;
-}
-
-.tab-content > .active,
-.pill-content > .active {
-  display: block;
-}
-
-.tabs-below > .nav-tabs {
-  border-top: 1px solid #ddd;
-}
-
-.tabs-below > .nav-tabs > li {
-  margin-top: -1px;
-  margin-bottom: 0;
-}
-
-.tabs-below > .nav-tabs > li > a {
-  -webkit-border-radius: 0 0 4px 4px;
-     -moz-border-radius: 0 0 4px 4px;
-          border-radius: 0 0 4px 4px;
-}
-
-.tabs-below > .nav-tabs > li > a:hover,
-.tabs-below > .nav-tabs > li > a:focus {
-  border-top-color: #ddd;
-  border-bottom-color: transparent;
-}
-
-.tabs-below > .nav-tabs > .active > a,
-.tabs-below > .nav-tabs > .active > a:hover,
-.tabs-below > .nav-tabs > .active > a:focus {
-  border-color: transparent #ddd #ddd #ddd;
-}
-
-.tabs-left > .nav-tabs > li,
-.tabs-right > .nav-tabs > li {
-  float: none;
-}
-
-.tabs-left > .nav-tabs > li > a,
-.tabs-right > .nav-tabs > li > a {
-  min-width: 74px;
-  margin-right: 0;
-  margin-bottom: 3px;
-}
-
-.tabs-left > .nav-tabs {
-  float: left;
-  margin-right: 19px;
-  border-right: 1px solid #ddd;
-}
-
-.tabs-left > .nav-tabs > li > a {
-  margin-right: -1px;
-  -webkit-border-radius: 4px 0 0 4px;
-     -moz-border-radius: 4px 0 0 4px;
-          border-radius: 4px 0 0 4px;
-}
-
-.tabs-left > .nav-tabs > li > a:hover,
-.tabs-left > .nav-tabs > li > a:focus {
-  border-color: #eeeeee #dddddd #eeeeee #eeeeee;
-}
-
-.tabs-left > .nav-tabs .active > a,
-.tabs-left > .nav-tabs .active > a:hover,
-.tabs-left > .nav-tabs .active > a:focus {
-  border-color: #ddd transparent #ddd #ddd;
-  *border-right-color: #ffffff;
-}
-
-.tabs-right > .nav-tabs {
-  float: right;
-  margin-left: 19px;
-  border-left: 1px solid #ddd;
-}
-
-.tabs-right > .nav-tabs > li > a {
-  margin-left: -1px;
-  -webkit-border-radius: 0 4px 4px 0;
-     -moz-border-radius: 0 4px 4px 0;
-          border-radius: 0 4px 4px 0;
-}
-
-.tabs-right > .nav-tabs > li > a:hover,
-.tabs-right > .nav-tabs > li > a:focus {
-  border-color: #eeeeee #eeeeee #eeeeee #dddddd;
-}
-
-.tabs-right > .nav-tabs .active > a,
-.tabs-right > .nav-tabs .active > a:hover,
-.tabs-right > .nav-tabs .active > a:focus {
-  border-color: #ddd #ddd #ddd transparent;
-  *border-left-color: #ffffff;
-}
-
-.nav > .disabled > a {
-  color: #999999;
-}
-
-.nav > .disabled > a:hover,
-.nav > .disabled > a:focus {
-  text-decoration: none;
-  cursor: default;
-  background-color: transparent;
-}
-
-.navbar {
-  *position: relative;
-  *z-index: 2;
-  margin-bottom: 20px;
-  overflow: visible;
-}
-
-.navbar-inner {
-  min-height: 40px;
-  padding-right: 20px;
-  padding-left: 20px;
-  background-color: #fafafa;
-  background-image: -moz-linear-gradient(top, #ffffff, #f2f2f2);
-  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#f2f2f2));
-  background-image: -webkit-linear-gradient(top, #ffffff, #f2f2f2);
-  background-image: -o-linear-gradient(top, #ffffff, #f2f2f2);
-  background-image: linear-gradient(to bottom, #ffffff, #f2f2f2);
-  background-repeat: repeat-x;
-  border: 1px solid #d4d4d4;
-  -webkit-border-radius: 4px;
-     -moz-border-radius: 4px;
-          border-radius: 4px;
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#fff2f2f2', GradientType=0);
-  *zoom: 1;
-  -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
-     -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
-          box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
-}
-
-.navbar-inner:before,
-.navbar-inner:after {
-  display: table;
-  line-height: 0;
-  content: "";
-}
-
-.navbar-inner:after {
-  clear: both;
-}
-
-.navbar .container {
-  width: auto;
-}
-
-.nav-collapse.collapse {
-  height: auto;
-  overflow: visible;
-}
-
-.navbar .brand {
-  display: block;
-  float: left;
-  padding: 10px 20px 10px;
-  margin-left: -20px;
-  font-size: 20px;
-  font-weight: 200;
-  color: #777777;
-  text-shadow: 0 1px 0 #ffffff;
-}
-
-.navbar .brand:hover,
-.navbar .brand:focus {
-  text-decoration: none;
-}
-
-.navbar-text {
-  margin-bottom: 0;
-  line-height: 40px;
-  color: #777777;
-}
-
-.navbar-link {
-  color: #777777;
-}
-
-.navbar-link:hover,
-.navbar-link:focus {
-  color: #333333;
-}
-
-.navbar .divider-vertical {
-  height: 40px;
-  margin: 0 9px;
-  border-right: 1px solid #ffffff;
-  border-left: 1px solid #f2f2f2;
-}
-
-.navbar .btn,
-.navbar .btn-group {
-  margin-top: 5px;
-}
-
-.navbar .btn-group .btn,
-.navbar .input-prepend .btn,
-.navbar .input-append .btn,
-.navbar .input-prepend .btn-group,
-.navbar .input-append .btn-group {
-  margin-top: 0;
-}
-
-.navbar-form {
-  margin-bottom: 0;
-  *zoom: 1;
-}
-
-.navbar-form:before,
-.navbar-form:after {
-  display: table;
-  line-height: 0;
-  content: "";
-}
-
-.navbar-form:after {
-  clear: both;
-}
-
-.navbar-form input,
-.navbar-form select,
-.navbar-form .radio,
-.navbar-form .checkbox {
-  margin-top: 5px;
-}
-
-.navbar-form input,
-.navbar-form select,
-.navbar-form .btn {
-  display: inline-block;
-  margin-bottom: 0;
-}
-
-.navbar-form input[type="image"],
-.navbar-form input[type="checkbox"],
-.navbar-form input[type="radio"] {
-  margin-top: 3px;
-}
-
-.navbar-form .input-append,
-.navbar-form .input-prepend {
-  margin-top: 5px;
-  white-space: nowrap;
-}
-
-.navbar-form .input-append input,
-.navbar-form .input-prepend input {
-  margin-top: 0;
-}
-
-.navbar-search {
-  position: relative;
-  float: left;
-  margin-top: 5px;
-  margin-bottom: 0;
-}
-
-.navbar-search .search-query {
-  padding: 4px 14px;
-  margin-bottom: 0;
-  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-  font-size: 13px;
-  font-weight: normal;
-  line-height: 1;
-  -webkit-border-radius: 15px;
-     -moz-border-radius: 15px;
-          border-radius: 15px;
-}
-
-.navbar-static-top {
-  position: static;
-  margin-bottom: 0;
-}
-
-.navbar-static-top .navbar-inner {
-  -webkit-border-radius: 0;
-     -moz-border-radius: 0;
-          border-radius: 0;
-}
-
-.navbar-fixed-top,
-.navbar-fixed-bottom {
-  position: fixed;
-  right: 0;
-  left: 0;
-  z-index: 1030;
-  margin-bottom: 0;
-}
-
-.navbar-fixed-top .navbar-inner,
-.navbar-static-top .navbar-inner {
-  border-width: 0 0 1px;
-}
-
-.navbar-fixed-bottom .navbar-inner {
-  border-width: 1px 0 0;
-}
-
-.navbar-fixed-top .navbar-inner,
-.navbar-fixed-bottom .navbar-inner {
-  padding-right: 0;
-  padding-left: 0;
-  -webkit-border-radius: 0;
-     -moz-border-radius: 0;
-          border-radius: 0;
-}
-
-.navbar-static-top .container,
-.navbar-fixed-top .container,
-.navbar-fixed-bottom .container {
-  width: 940px;
-}
-
-.navbar-fixed-top {
-  top: 0;
-}
-
-.navbar-fixed-top .navbar-inner,
-.navbar-static-top .navbar-inner {
-  -webkit-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
-     -moz-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
-          box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
-}
-
-.navbar-fixed-bottom {
-  bottom: 0;
-}
-
-.navbar-fixed-bottom .navbar-inner {
-  -webkit-box-shadow: 0 -1px 10px rgba(0, 0, 0, 0.1);
-     -moz-box-shadow: 0 -1px 10px rgba(0, 0, 0, 0.1);
-          box-shadow: 0 -1px 10px rgba(0, 0, 0, 0.1);
-}
-
-.navbar .nav {
-  position: relative;
-  left: 0;
-  display: block;
-  float: left;
-  margin: 0 10px 0 0;
-}
-
-.navbar .nav.pull-right {
-  float: right;
-  margin-right: 0;
-}
-
-.navbar .nav > li {
-  float: left;
-}
-
-.navbar .nav > li > a {
-  float: none;
-  padding: 10px 15px 10px;
-  color: #777777;
-  text-decoration: none;
-  text-shadow: 0 1px 0 #ffffff;
-}
-
-.navbar .nav .dropdown-toggle .caret {
-  margin-top: 8px;
-}
-
-.navbar .nav > li > a:focus,
-.navbar .nav > li > a:hover {
-  color: #333333;
-  text-decoration: none;
-  background-color: transparent;
-}
-
-.navbar .nav > .active > a,
-.navbar .nav > .active > a:hover,
-.navbar .nav > .active > a:focus {
-  color: #555555;
-  text-decoration: none;
-  background-color: #e5e5e5;
-  -webkit-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
-     -moz-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
-          box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
-}
-
-.navbar .btn-navbar {
-  display: none;
-  float: right;
-  padding: 7px 10px;
-  margin-right: 5px;
-  margin-left: 5px;
-  color: #ffffff;
-  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
-  background-color: #ededed;
-  *background-color: #e5e5e5;
-  background-image: -moz-linear-gradient(top, #f2f2f2, #e5e5e5);
-  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f2f2f2), to(#e5e5e5));
-  background-image: -webkit-linear-gradient(top, #f2f2f2, #e5e5e5);
-  background-image: -o-linear-gradient(top, #f2f2f2, #e5e5e5);
-  background-image: linear-gradient(to bottom, #f2f2f2, #e5e5e5);
-  background-repeat: repeat-x;
-  border-color: #e5e5e5 #e5e5e5 #bfbfbf;
-  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff2f2f2', endColorstr='#ffe5e5e5', GradientType=0);
-  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
-  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.075);
-     -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.075);
-          box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.075);
-}
-
-.navbar .btn-navbar:hover,
-.navbar .btn-navbar:focus,
-.navbar .btn-navbar:active,
-.navbar .btn-navbar.active,
-.navbar .btn-navbar.disabled,
-.navbar .btn-navbar[disabled] {
-  color: #ffffff;
-  background-color: #e5e5e5;
-  *background-color: #d9d9d9;
-}
-
-.navbar .btn-navbar:active,
-.navbar .btn-navbar.active {
-  background-color: #cccccc \9;
-}
-
-.navbar .btn-navbar .icon-bar {
-  display: block;
-  width: 18px;
-  height: 2px;
-  background-color: #f5f5f5;
-  -webkit-border-radius: 1px;
-     -moz-border-radius: 1px;
-          border-radius: 1px;
-  -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
-     -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
-          box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
-}
-
-.btn-navbar .icon-bar + .icon-bar {
-  margin-top: 3px;
-}
-
-.navbar .nav > li > .dropdown-menu:before {
-  position: absolute;
-  top: -7px;
-  left: 9px;
-  display: inline-block;
-  border-right: 7px solid transparent;
-  border-bottom: 7px solid #ccc;
-  border-left: 7px solid transparent;
-  border-bottom-color: rgba(0, 0, 0, 0.2);
-  content: '';
-}
-
-.navbar .nav > li > .dropdown-menu:after {
-  position: absolute;
-  top: -6px;
-  left: 10px;
-  display: inline-block;
-  border-right: 6px solid transparent;
-  border-bottom: 6px solid #ffffff;
-  border-left: 6px solid transparent;
-  content: '';
-}
-
-.navbar-fixed-bottom .nav > li > .dropdown-menu:before {
-  top: auto;
-  bottom: -7px;
-  border-top: 7px solid #ccc;
-  border-bottom: 0;
-  border-top-color: rgba(0, 0, 0, 0.2);
-}
-
-.navbar-fixed-bottom .nav > li > .dropdown-menu:after {
-  top: auto;
-  bottom: -6px;
-  border-top: 6px solid #ffffff;
-  border-bottom: 0;
-}
-
-.navbar .nav li.dropdown > a:hover .caret,
-.navbar .nav li.dropdown > a:focus .caret {
-  border-top-color: #333333;
-  border-bottom-color: #333333;
-}
-
-.navbar .nav li.dropdown.open > .dropdown-toggle,
-.navbar .nav li.dropdown.active > .dropdown-toggle,
-.navbar .nav li.dropdown.open.active > .dropdown-toggle {
-  color: #555555;
-  background-color: #e5e5e5;
-}
-
-.navbar .nav li.dropdown > .dropdown-toggle .caret {
-  border-top-color: #777777;
-  border-bottom-color: #777777;
-}
-
-.navbar .nav li.dropdown.open > .dropdown-toggle .caret,
-.navbar .nav li.dropdown.active > .dropdown-toggle .caret,
-.navbar .nav li.dropdown.open.active > .dropdown-toggle .caret {
-  border-top-color: #555555;
-  border-bottom-color: #555555;
-}
-
-.navbar .pull-right > li > .dropdown-menu,
-.navbar .nav > li > .dropdown-menu.pull-right {
-  right: 0;
-  left: auto;
-}
-
-.navbar .pull-right > li > .dropdown-menu:before,
-.navbar .nav > li > .dropdown-menu.pull-right:before {
-  right: 12px;
-  left: auto;
-}
-
-.navbar .pull-right > li > .dropdown-menu:after,
-.navbar .nav > li > .dropdown-menu.pull-right:after {
-  right: 13px;
-  left: auto;
-}
-
-.navbar .pull-right > li > .dropdown-menu .dropdown-menu,
-.navbar .nav > li > .dropdown-menu.pull-right .dropdown-menu {
-  right: 100%;
-  left: auto;
-  margin-right: -1px;
-  margin-left: 0;
-  -webkit-border-radius: 6px 0 6px 6px;
-     -moz-border-radius: 6px 0 6px 6px;
-          border-radius: 6px 0 6px 6px;
-}
-
-.navbar-inverse .navbar-inner {
-  background-color: #1b1b1b;
-  background-image: -moz-linear-gradient(top, #222222, #111111);
-  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#222222), to(#111111));
-  background-image: -webkit-linear-gradient(top, #222222, #111111);
-  background-image: -o-linear-gradient(top, #222222, #111111);
-  background-image: linear-gradient(to bottom, #222222, #111111);
-  background-repeat: repeat-x;
-  border-color: #252525;
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff222222', endColorstr='#ff111111', GradientType=0);
-}
-
-.navbar-inverse .brand,
-.navbar-inverse .nav > li > a {
-  color: #999999;
-  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
-}
-
-.navbar-inverse .brand:hover,
-.navbar-inverse .nav > li > a:hover,
-.navbar-inverse .brand:focus,
-.navbar-inverse .nav > li > a:focus {
-  color: #ffffff;
-}
-
-.navbar-inverse .brand {
-  color: #999999;
-}
-
-.navbar-inverse .navbar-text {
-  color: #999999;
-}
-
-.navbar-inverse .nav > li > a:focus,
-.navbar-inverse .nav > li > a:hover {
-  color: #ffffff;
-  background-color: transparent;
-}
-
-.navbar-inverse .nav .active > a,
-.navbar-inverse .nav .active > a:hover,
-.navbar-inverse .nav .active > a:focus {
-  color: #ffffff;
-  background-color: #111111;
-}
-
-.navbar-inverse .navbar-link {
-  color: #999999;
-}
-
-.navbar-inverse .navbar-link:hover,
-.navbar-inverse .navbar-link:focus {
-  color: #ffffff;
-}
-
-.navbar-inverse .divider-vertical {
-  border-right-color: #222222;
-  border-left-color: #111111;
-}
-
-.navbar-inverse .nav li.dropdown.open > .dropdown-toggle,
-.navbar-inverse .nav li.dropdown.active > .dropdown-toggle,
-.navbar-inverse .nav li.dropdown.open.active > .dropdown-toggle {
-  color: #ffffff;
-  background-color: #111111;
-}
-
-.navbar-inverse .nav li.dropdown > a:hover .caret,
-.navbar-inverse .nav li.dropdown > a:focus .caret {
-  border-top-color: #ffffff;
-  border-bottom-color: #ffffff;
-}
-
-.navbar-inverse .nav li.dropdown > .dropdown-toggle .caret {
-  border-top-color: #999999;
-  border-bottom-color: #999999;
-}
-
-.navbar-inverse .nav li.dropdown.open > .dropdown-toggle .caret,
-.navbar-inverse .nav li.dropdown.active > .dropdown-toggle .caret,
-.navbar-inverse .nav li.dropdown.open.active > .dropdown-toggle .caret {
-  border-top-color: #ffffff;
-  border-bottom-color: #ffffff;
-}
-
-.navbar-inverse .navbar-search .search-query {
-  color: #ffffff;
-  background-color: #515151;
-  border-color: #111111;
-  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.15);
-     -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.15);
-          box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.15);
-  -webkit-transition: none;
-     -moz-transition: none;
-       -o-transition: none;
-          transition: none;
-}
-
-.navbar-inverse .navbar-search .search-query:-moz-placeholder {
-  color: #cccccc;
-}
-
-.navbar-inverse .navbar-search .search-query:-ms-input-placeholder {
-  color: #cccccc;
-}
-
-.navbar-inverse .navbar-search .search-query::-webkit-input-placeholder {
-  color: #cccccc;
-}
-
-.navbar-inverse .navbar-search .search-query:focus,
-.navbar-inverse .navbar-search .search-query.focused {
-  padding: 5px 15px;
-  color: #333333;
-  text-shadow: 0 1px 0 #ffffff;
-  background-color: #ffffff;
-  border: 0;
-  outline: 0;
-  -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
-     -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
-          box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
-}
-
-.navbar-inverse .btn-navbar {
-  color: #ffffff;
-  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
-  background-color: #0e0e0e;
-  *background-color: #040404;
-  background-image: -moz-linear-gradient(top, #151515, #040404);
-  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#151515), to(#040404));
-  background-image: -webkit-linear-gradient(top, #151515, #040404);
-  background-image: -o-linear-gradient(top, #151515, #040404);
-  background-image: linear-gradient(to bottom, #151515, #040404);
-  background-repeat: repeat-x;
-  border-color: #040404 #040404 #000000;
-  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff151515', endColorstr='#ff040404', GradientType=0);
-  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
-}
-
-.navbar-inverse .btn-navbar:hover,
-.navbar-inverse .btn-navbar:focus,
-.navbar-inverse .btn-navbar:active,
-.navbar-inverse .btn-navbar.active,
-.navbar-inverse .btn-navbar.disabled,
-.navbar-inverse .btn-navbar[disabled] {
-  color: #ffffff;
-  background-color: #040404;
-  *background-color: #000000;
-}
-
-.navbar-inverse .btn-navbar:active,
-.navbar-inverse .btn-navbar.active {
-  background-color: #000000 \9;
-}
-
-.breadcrumb {
-  padding: 8px 15px;
-  margin: 0 0 20px;
-  list-style: none;
-  background-color: #f5f5f5;
-  -webkit-border-radius: 4px;
-     -moz-border-radius: 4px;
-          border-radius: 4px;
-}
-
-.breadcrumb > li {
-  display: inline-block;
-  *display: inline;
-  text-shadow: 0 1px 0 #ffffff;
-  *zoom: 1;
-}
-
-.breadcrumb > li > .divider {
-  padding: 0 5px;
-  color: #ccc;
-}
-
-.breadcrumb > .active {
-  color: #999999;
-}
-
-.pagination {
-  margin: 20px 0;
-}
-
-.pagination ul {
-  display: inline-block;
-  *display: inline;
-  margin-bottom: 0;
-  margin-left: 0;
-  -webkit-border-radius: 4px;
-     -moz-border-radius: 4px;
-          border-radius: 4px;
-  *zoom: 1;
-  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
-     -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
-          box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
-}
-
-.pagination ul > li {
-  display: inline;
-}
-
-.pagination ul > li > a,
-.pagination ul > li > span {
-  float: left;
-  padding: 4px 12px;
-  line-height: 20px;
-  text-decoration: none;
-  background-color: #ffffff;
-  border: 1px solid #dddddd;
-  border-left-width: 0;
-}
-
-.pagination ul > li > a:hover,
-.pagination ul > li > a:focus,
-.pagination ul > .active > a,
-.pagination ul > .active > span {
-  background-color: #f5f5f5;
-}
-
-.pagination ul > .active > a,
-.pagination ul > .active > span {
-  color: #999999;
-  cursor: default;
-}
-
-.pagination ul > .disabled > span,
-.pagination ul > .disabled > a,
-.pagination ul > .disabled > a:hover,
-.pagination ul > .disabled > a:focus {
-  color: #999999;
-  cursor: default;
-  background-color: transparent;
-}
-
-.pagination ul > li:first-child > a,
-.pagination ul > li:first-child > span {
-  border-left-width: 1px;
-  -webkit-border-bottom-left-radius: 4px;
-          border-bottom-left-radius: 4px;
-  -webkit-border-top-left-radius: 4px;
-          border-top-left-radius: 4px;
-  -moz-border-radius-bottomleft: 4px;
-  -moz-border-radius-topleft: 4px;
-}
-
-.pagination ul > li:last-child > a,
-.pagination ul > li:last-child > span {
-  -webkit-border-top-right-radius: 4px;
-          border-top-right-radius: 4px;
-  -webkit-border-bottom-right-radius: 4px;
-          border-bottom-right-radius: 4px;
-  -moz-border-radius-topright: 4px;
-  -moz-border-radius-bottomright: 4px;
-}
-
-.pagination-centered {
-  text-align: center;
-}
-
-.pagination-right {
-  text-align: right;
-}
-
-.pagination-large ul > li > a,
-.pagination-large ul > li > span {
-  padding: 11px 19px;
-  font-size: 17.5px;
-}
-
-.pagination-large ul > li:first-child > a,
-.pagination-large ul > li:first-child > span {
-  -webkit-border-bottom-left-radius: 6px;
-          border-bottom-left-radius: 6px;
-  -webkit-border-top-left-radius: 6px;
-          border-top-left-radius: 6px;
-  -moz-border-radius-bottomleft: 6px;
-  -moz-border-radius-topleft: 6px;
-}
-
-.pagination-large ul > li:last-child > a,
-.pagination-large ul > li:last-child > span {
-  -webkit-border-top-right-radius: 6px;
-          border-top-right-radius: 6px;
-  -webkit-border-bottom-right-radius: 6px;
-          border-bottom-right-radius: 6px;
-  -moz-border-radius-topright: 6px;
-  -moz-border-radius-bottomright: 6px;
-}
-
-.pagination-mini ul > li:first-child > a,
-.pagination-small ul > li:first-child > a,
-.pagination-mini ul > li:first-child > span,
-.pagination-small ul > li:first-child > span {
-  -webkit-border-bottom-left-radius: 3px;
-          border-bottom-left-radius: 3px;
-  -webkit-border-top-left-radius: 3px;
-          border-top-left-radius: 3px;
-  -moz-border-radius-bottomleft: 3px;
-  -moz-border-radius-topleft: 3px;
-}
-
-.pagination-mini ul > li:last-child > a,
-.pagination-small ul > li:last-child > a,
-.pagination-mini ul > li:last-child > span,
-.pagination-small ul > li:last-child > span {
-  -webkit-border-top-right-radius: 3px;
-          border-top-right-radius: 3px;
-  -webkit-border-bottom-right-radius: 3px;
-          border-bottom-right-radius: 3px;
-  -moz-border-radius-topright: 3px;
-  -moz-border-radius-bottomright: 3px;
-}
-
-.pagination-small ul > li > a,
-.pagination-small ul > li > span {
-  padding: 2px 10px;
-  font-size: 11.9px;
-}
-
-.pagination-mini ul > li > a,
-.pagination-mini ul > li > span {
-  padding: 0 6px;
-  font-size: 10.5px;
-}
-
-.pager {
-  margin: 20px 0;
-  text-align: center;
-  list-style: none;
-  *zoom: 1;
-}
-
-.pager:before,
-.pager:after {
-  display: table;
-  line-height: 0;
-  content: "";
-}
-
-.pager:after {
-  clear: both;
-}
-
-.pager li {
-  display: inline;
-}
-
-.pager li > a,
-.pager li > span {
-  display: inline-block;
-  padding: 5px 14px;
-  background-color: #fff;
-  border: 1px solid #ddd;
-  -webkit-border-radius: 15px;
-     -moz-border-radius: 15px;
-          border-radius: 15px;
-}
-
-.pager li > a:hover,
-.pager li > a:focus {
-  text-decoration: none;
-  background-color: #f5f5f5;
-}
-
-.pager .next > a,
-.pager .next > span {
-  float: right;
-}
-
-.pager .previous > a,
-.pager .previous > span {
-  float: left;
-}
-
-.pager .disabled > a,
-.pager .disabled > a:hover,
-.pager .disabled > a:focus,
-.pager .disabled > span {
-  color: #999999;
-  cursor: default;
-  background-color: #fff;
-}
-
-.modal-backdrop {
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: 1040;
-  background-color: #000000;
-}
-
-.modal-backdrop.fade {
-  opacity: 0;
-}
-
-.modal-backdrop,
-.modal-backdrop.fade.in {
-  opacity: 0.8;
-  filter: alpha(opacity=80);
-}
-
-.modal {
-  position: fixed;
-  top: 10%;
-  left: 50%;
-  z-index: 1050;
-  width: 560px;
-  margin-left: -280px;
-  background-color: #ffffff;
-  border: 1px solid #999;
-  border: 1px solid rgba(0, 0, 0, 0.3);
-  *border: 1px solid #999;
-  -webkit-border-radius: 6px;
-     -moz-border-radius: 6px;
-          border-radius: 6px;
-  outline: none;
-  -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
-     -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
-          box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
-  -webkit-background-clip: padding-box;
-     -moz-background-clip: padding-box;
-          background-clip: padding-box;
-}
-
-.modal.fade {
-  top: -25%;
-  -webkit-transition: opacity 0.3s linear, top 0.3s ease-out;
-     -moz-transition: opacity 0.3s linear, top 0.3s ease-out;
-       -o-transition: opacity 0.3s linear, top 0.3s ease-out;
-          transition: opacity 0.3s linear, top 0.3s ease-out;
-}
-
-.modal.fade.in {
-  top: 10%;
-}
-
-.modal-header {
-  padding: 9px 15px;
-  border-bottom: 1px solid #eee;
-}
-
-.modal-header .close {
-  margin-top: 2px;
-}
-
-.modal-header h3 {
-  margin: 0;
-  line-height: 30px;
-}
-
-.modal-body {
-  position: relative;
-  max-height: 400px;
-  padding: 15px;
-  overflow-y: auto;
-}
-
-.modal-form {
-  margin-bottom: 0;
-}
-
-.modal-footer {
-  padding: 14px 15px 15px;
-  margin-bottom: 0;
-  text-align: right;
-  background-color: #f5f5f5;
-  border-top: 1px solid #ddd;
-  -webkit-border-radius: 0 0 6px 6px;
-     -moz-border-radius: 0 0 6px 6px;
-          border-radius: 0 0 6px 6px;
-  *zoom: 1;
-  -webkit-box-shadow: inset 0 1px 0 #ffffff;
-     -moz-box-shadow: inset 0 1px 0 #ffffff;
-          box-shadow: inset 0 1px 0 #ffffff;
-}
-
-.modal-footer:before,
-.modal-footer:after {
-  display: table;
-  line-height: 0;
-  content: "";
-}
-
-.modal-footer:after {
-  clear: both;
-}
-
-.modal-footer .btn + .btn {
-  margin-bottom: 0;
-  margin-left: 5px;
-}
-
-.modal-footer .btn-group .btn + .btn {
-  margin-left: -1px;
-}
-
-.modal-footer .btn-block + .btn-block {
-  margin-left: 0;
-}
-
-.tooltip {
-  position: absolute;
-  z-index: 1030;
-  display: block;
-  font-size: 11px;
-  line-height: 1.4;
-  opacity: 0;
-  filter: alpha(opacity=0);
-  visibility: visible;
-}
-
-.tooltip.in {
-  opacity: 0.8;
-  filter: alpha(opacity=80);
-}
-
-.tooltip.top {
-  padding: 5px 0;
-  margin-top: -3px;
-}
-
-.tooltip.right {
-  padding: 0 5px;
-  margin-left: 3px;
-}
-
-.tooltip.bottom {
-  padding: 5px 0;
-  margin-top: 3px;
-}
-
-.tooltip.left {
-  padding: 0 5px;
-  margin-left: -3px;
-}
-
-.tooltip-inner {
-  max-width: 200px;
-  padding: 8px;
-  color: #ffffff;
-  text-align: center;
-  text-decoration: none;
-  background-color: #000000;
-  -webkit-border-radius: 4px;
-     -moz-border-radius: 4px;
-          border-radius: 4px;
-}
-
-.tooltip-arrow {
-  position: absolute;
-  width: 0;
-  height: 0;
-  border-color: transparent;
-  border-style: solid;
-}
-
-.tooltip.top .tooltip-arrow {
-  bottom: 0;
-  left: 50%;
-  margin-left: -5px;
-  border-top-color: #000000;
-  border-width: 5px 5px 0;
-}
-
-.tooltip.right .tooltip-arrow {
-  top: 50%;
-  left: 0;
-  margin-top: -5px;
-  border-right-color: #000000;
-  border-width: 5px 5px 5px 0;
-}
-
-.tooltip.left .tooltip-arrow {
-  top: 50%;
-  right: 0;
-  margin-top: -5px;
-  border-left-color: #000000;
-  border-width: 5px 0 5px 5px;
-}
-
-.tooltip.bottom .tooltip-arrow {
-  top: 0;
-  left: 50%;
-  margin-left: -5px;
-  border-bottom-color: #000000;
-  border-width: 0 5px 5px;
-}
-
-.popover {
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: 1010;
-  display: none;
-  max-width: 276px;
-  padding: 1px;
-  text-align: left;
-  white-space: normal;
-  background-color: #ffffff;
-  border: 1px solid #ccc;
-  border: 1px solid rgba(0, 0, 0, 0.2);
-  -webkit-border-radius: 6px;
-     -moz-border-radius: 6px;
-          border-radius: 6px;
-  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-     -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-  -webkit-background-clip: padding-box;
-     -moz-background-clip: padding;
-          background-clip: padding-box;
-}
-
-.popover.top {
-  margin-top: -10px;
-}
-
-.popover.right {
-  margin-left: 10px;
-}
-
-.popover.bottom {
-  margin-top: 10px;
-}
-
-.popover.left {
-  margin-left: -10px;
-}
-
-.popover-title {
-  padding: 8px 14px;
-  margin: 0;
-  font-size: 14px;
-  font-weight: normal;
-  line-height: 18px;
-  background-color: #f7f7f7;
-  border-bottom: 1px solid #ebebeb;
-  -webkit-border-radius: 5px 5px 0 0;
-     -moz-border-radius: 5px 5px 0 0;
-          border-radius: 5px 5px 0 0;
-}
-
-.popover-title:empty {
-  display: none;
-}
-
-.popover-content {
-  padding: 9px 14px;
-}
-
-.popover .arrow,
-.popover .arrow:after {
-  position: absolute;
-  display: block;
-  width: 0;
-  height: 0;
-  border-color: transparent;
-  border-style: solid;
-}
-
-.popover .arrow {
-  border-width: 11px;
-}
-
-.popover .arrow:after {
-  border-width: 10px;
-  content: "";
-}
-
-.popover.top .arrow {
-  bottom: -11px;
-  left: 50%;
-  margin-left: -11px;
-  border-top-color: #999;
-  border-top-color: rgba(0, 0, 0, 0.25);
-  border-bottom-width: 0;
-}
-
-.popover.top .arrow:after {
-  bottom: 1px;
-  margin-left: -10px;
-  border-top-color: #ffffff;
-  border-bottom-width: 0;
-}
-
-.popover.right .arrow {
-  top: 50%;
-  left: -11px;
-  margin-top: -11px;
-  border-right-color: #999;
-  border-right-color: rgba(0, 0, 0, 0.25);
-  border-left-width: 0;
-}
-
-.popover.right .arrow:after {
-  bottom: -10px;
-  left: 1px;
-  border-right-color: #ffffff;
-  border-left-width: 0;
-}
-
-.popover.bottom .arrow {
-  top: -11px;
-  left: 50%;
-  margin-left: -11px;
-  border-bottom-color: #999;
-  border-bottom-color: rgba(0, 0, 0, 0.25);
-  border-top-width: 0;
-}
-
-.popover.bottom .arrow:after {
-  top: 1px;
-  margin-left: -10px;
-  border-bottom-color: #ffffff;
-  border-top-width: 0;
-}
-
-.popover.left .arrow {
-  top: 50%;
-  right: -11px;
-  margin-top: -11px;
-  border-left-color: #999;
-  border-left-color: rgba(0, 0, 0, 0.25);
-  border-right-width: 0;
-}
-
-.popover.left .arrow:after {
-  right: 1px;
-  bottom: -10px;
-  border-left-color: #ffffff;
-  border-right-width: 0;
-}
-
-.thumbnails {
-  margin-left: -20px;
-  list-style: none;
-  *zoom: 1;
-}
-
-.thumbnails:before,
-.thumbnails:after {
-  display: table;
-  line-height: 0;
-  content: "";
-}
-
-.thumbnails:after {
-  clear: both;
-}
-
-.row-fluid .thumbnails {
-  margin-left: 0;
-}
-
-.thumbnails > li {
-  float: left;
-  margin-bottom: 20px;
-  margin-left: 20px;
-}
-
-.thumbnail {
-  display: block;
-  padding: 4px;
-  line-height: 20px;
-  border: 1px solid #ddd;
-  -webkit-border-radius: 4px;
-     -moz-border-radius: 4px;
-          border-radius: 4px;
-  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.055);
-     -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.055);
-          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.055);
-  -webkit-transition: all 0.2s ease-in-out;
-     -moz-transition: all 0.2s ease-in-out;
-       -o-transition: all 0.2s ease-in-out;
-          transition: all 0.2s ease-in-out;
-}
-
-a.thumbnail:hover,
-a.thumbnail:focus {
-  border-color: #0088cc;
-  -webkit-box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25);
-     -moz-box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25);
-          box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25);
-}
-
-.thumbnail > img {
-  display: block;
-  max-width: 100%;
-  margin-right: auto;
-  margin-left: auto;
-}
-
-.thumbnail .caption {
-  padding: 9px;
-  color: #555555;
-}
-
-.media,
-.media-body {
-  overflow: hidden;
-  *overflow: visible;
-  zoom: 1;
-}
-
-.media,
-.media .media {
-  margin-top: 15px;
-}
-
-.media:first-child {
-  margin-top: 0;
-}
-
-.media-object {
-  display: block;
-}
-
-.media-heading {
-  margin: 0 0 5px;
-}
-
-.media > .pull-left {
-  margin-right: 10px;
-}
-
-.media > .pull-right {
-  margin-left: 10px;
-}
-
-.media-list {
-  margin-left: 0;
-  list-style: none;
-}
-
-.label,
-.badge {
-  display: inline-block;
-  padding: 2px 4px;
-  font-size: 11.844px;
-  font-weight: bold;
-  line-height: 14px;
-  color: #ffffff;
-  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
-  white-space: nowrap;
-  vertical-align: baseline;
-  background-color: #999999;
-}
-
-.label {
-  -webkit-border-radius: 3px;
-     -moz-border-radius: 3px;
-          border-radius: 3px;
-}
-
-.badge {
-  padding-right: 9px;
-  padding-left: 9px;
-  -webkit-border-radius: 9px;
-     -moz-border-radius: 9px;
-          border-radius: 9px;
-}
-
-.label:empty,
-.badge:empty {
-  display: none;
-}
-
-a.label:hover,
-a.label:focus,
-a.badge:hover,
-a.badge:focus {
-  color: #ffffff;
-  text-decoration: none;
-  cursor: pointer;
-}
-
-.label-important,
-.badge-important {
-  background-color: #b94a48;
-}
-
-.label-important[href],
-.badge-important[href] {
-  background-color: #953b39;
-}
-
-.label-warning,
-.badge-warning {
-  background-color: #f89406;
-}
-
-.label-warning[href],
-.badge-warning[href] {
-  background-color: #c67605;
-}
-
-.label-success,
-.badge-success {
-  background-color: #468847;
-}
-
-.label-success[href],
-.badge-success[href] {
-  background-color: #356635;
-}
-
-.label-info,
-.badge-info {
-  background-color: #3a87ad;
-}
-
-.label-info[href],
-.badge-info[href] {
-  background-color: #2d6987;
-}
-
-.label-inverse,
-.badge-inverse {
-  background-color: #333333;
-}
-
-.label-inverse[href],
-.badge-inverse[href] {
-  background-color: #1a1a1a;
-}
-
-.btn .label,
-.btn .badge {
-  position: relative;
-  top: -1px;
-}
-
-.btn-mini .label,
-.btn-mini .badge {
-  top: 0;
-}
-
-@-webkit-keyframes progress-bar-stripes {
-  from {
-    background-position: 40px 0;
-  }
-  to {
-    background-position: 0 0;
-  }
-}
-
-@-moz-keyframes progress-bar-stripes {
-  from {
-    background-position: 40px 0;
-  }
-  to {
-    background-position: 0 0;
-  }
-}
-
-@-ms-keyframes progress-bar-stripes {
-  from {
-    background-position: 40px 0;
-  }
-  to {
-    background-position: 0 0;
-  }
-}
-
-@-o-keyframes progress-bar-stripes {
-  from {
-    background-position: 0 0;
-  }
-  to {
-    background-position: 40px 0;
-  }
-}
-
-@keyframes progress-bar-stripes {
-  from {
-    background-position: 40px 0;
-  }
-  to {
-    background-position: 0 0;
-  }
-}
-
-.progress {
-  height: 20px;
-  margin-bottom: 20px;
-  overflow: hidden;
-  background-color: #f7f7f7;
-  background-image: -moz-linear-gradient(top, #f5f5f5, #f9f9f9);
-  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f5f5f5), to(#f9f9f9));
-  background-image: -webkit-linear-gradient(top, #f5f5f5, #f9f9f9);
-  background-image: -o-linear-gradient(top, #f5f5f5, #f9f9f9);
-  background-image: linear-gradient(to bottom, #f5f5f5, #f9f9f9);
-  background-repeat: repeat-x;
-  -webkit-border-radius: 4px;
-     -moz-border-radius: 4px;
-          border-radius: 4px;
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#fff9f9f9', GradientType=0);
-  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
-     -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
-          box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
-}
-
-.progress .bar {
-  float: left;
-  width: 0;
-  height: 100%;
-  font-size: 12px;
-  color: #ffffff;
-  text-align: center;
-  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
-  background-color: #0e90d2;
-  background-image: -moz-linear-gradient(top, #149bdf, #0480be);
-  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#149bdf), to(#0480be));
-  background-image: -webkit-linear-gradient(top, #149bdf, #0480be);
-  background-image: -o-linear-gradient(top, #149bdf, #0480be);
-  background-image: linear-gradient(to bottom, #149bdf, #0480be);
-  background-repeat: repeat-x;
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff149bdf', endColorstr='#ff0480be', GradientType=0);
-  -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
-     -moz-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
-          box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
-  -webkit-box-sizing: border-box;
-     -moz-box-sizing: border-box;
-          box-sizing: border-box;
-  -webkit-transition: width 0.6s ease;
-     -moz-transition: width 0.6s ease;
-       -o-transition: width 0.6s ease;
-          transition: width 0.6s ease;
-}
-
-.progress .bar + .bar {
-  -webkit-box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.15), inset 0 -1px 0 rgba(0, 0, 0, 0.15);
-     -moz-box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.15), inset 0 -1px 0 rgba(0, 0, 0, 0.15);
-          box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.15), inset 0 -1px 0 rgba(0, 0, 0, 0.15);
-}
-
-.progress-striped .bar {
-  background-color: #149bdf;
-  background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
-  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: -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);
-  -webkit-background-size: 40px 40px;
-     -moz-background-size: 40px 40px;
-       -o-background-size: 40px 40px;
-          background-size: 40px 40px;
-}
-
-.progress.active .bar {
-  -webkit-animation: progress-bar-stripes 2s linear infinite;
-     -moz-animation: progress-bar-stripes 2s linear infinite;
-      -ms-animation: progress-bar-stripes 2s linear infinite;
-       -o-animation: progress-bar-stripes 2s linear infinite;
-          animation: progress-bar-stripes 2s linear infinite;
-}
-
-.progress-danger .bar,
-.progress .bar-danger {
-  background-color: #dd514c;
-  background-image: -moz-linear-gradient(top, #ee5f5b, #c43c35);
-  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ee5f5b), to(#c43c35));
-  background-image: -webkit-linear-gradient(top, #ee5f5b, #c43c35);
-  background-image: -o-linear-gradient(top, #ee5f5b, #c43c35);
-  background-image: linear-gradient(to bottom, #ee5f5b, #c43c35);
-  background-repeat: repeat-x;
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffee5f5b', endColorstr='#ffc43c35', GradientType=0);
-}
-
-.progress-danger.progress-striped .bar,
-.progress-striped .bar-danger {
-  background-color: #ee5f5b;
-  background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
-  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: -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);
-}
-
-.progress-success .bar,
-.progress .bar-success {
-  background-color: #5eb95e;
-  background-image: -moz-linear-gradient(top, #62c462, #57a957);
-  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#62c462), to(#57a957));
-  background-image: -webkit-linear-gradient(top, #62c462, #57a957);
-  background-image: -o-linear-gradient(top, #62c462, #57a957);
-  background-image: linear-gradient(to bottom, #62c462, #57a957);
-  background-repeat: repeat-x;
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff62c462', endColorstr='#ff57a957', GradientType=0);
-}
-
-.progress-success.progress-striped .bar,
-.progress-striped .bar-success {
-  background-color: #62c462;
-  background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
-  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: -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);
-}
-
-.progress-info .bar,
-.progress .bar-info {
-  background-color: #4bb1cf;
-  background-image: -moz-linear-gradient(top, #5bc0de, #339bb9);
-  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#5bc0de), to(#339bb9));
-  background-image: -webkit-linear-gradient(top, #5bc0de, #339bb9);
-  background-image: -o-linear-gradient(top, #5bc0de, #339bb9);
-  background-image: linear-gradient(to bottom, #5bc0de, #339bb9);
-  background-repeat: repeat-x;
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff339bb9', GradientType=0);
-}
-
-.progress-info.progress-striped .bar,
-.progress-striped .bar-info {
-  background-color: #5bc0de;
-  background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
-  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: -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);
-}
-
-.progress-warning .bar,
-.progress .bar-warning {
-  background-color: #faa732;
-  background-image: -moz-linear-gradient(top, #fbb450, #f89406);
-  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fbb450), to(#f89406));
-  background-image: -webkit-linear-gradient(top, #fbb450, #f89406);
-  background-image: -o-linear-gradient(top, #fbb450, #f89406);
-  background-image: linear-gradient(to bottom, #fbb450, #f89406);
-  background-repeat: repeat-x;
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffbb450', endColorstr='#fff89406', GradientType=0);
-}
-
-.progress-warning.progress-striped .bar,
-.progress-striped .bar-warning {
-  background-color: #fbb450;
-  background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
-  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: -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);
-}
-
-.accordion {
-  margin-bottom: 20px;
-}
-
-.accordion-group {
-  margin-bottom: 2px;
-  border: 1px solid #e5e5e5;
-  -webkit-border-radius: 4px;
-     -moz-border-radius: 4px;
-          border-radius: 4px;
-}
-
-.accordion-heading {
-  border-bottom: 0;
-}
-
-.accordion-heading .accordion-toggle {
-  display: block;
-  padding: 8px 15px;
-}
-
-.accordion-toggle {
-  cursor: pointer;
-}
-
-.accordion-inner {
-  padding: 9px 15px;
-  border-top: 1px solid #e5e5e5;
-}
-
-.carousel {
-  position: relative;
-  margin-bottom: 20px;
-  line-height: 1;
-}
-
-.carousel-inner {
-  position: relative;
-  width: 100%;
-  overflow: hidden;
-}
-
-.carousel-inner > .item {
-  position: relative;
-  display: none;
-  -webkit-transition: 0.6s ease-in-out left;
-     -moz-transition: 0.6s ease-in-out left;
-       -o-transition: 0.6s ease-in-out left;
-          transition: 0.6s ease-in-out left;
-}
-
-.carousel-inner > .item > img,
-.carousel-inner > .item > a > img {
-  display: block;
-  line-height: 1;
-}
-
-.carousel-inner > .active,
-.carousel-inner > .next,
-.carousel-inner > .prev {
-  display: block;
-}
-
-.carousel-inner > .active {
-  left: 0;
-}
-
-.carousel-inner > .next,
-.carousel-inner > .prev {
-  position: absolute;
-  top: 0;
-  width: 100%;
-}
-
-.carousel-inner > .next {
-  left: 100%;
-}
-
-.carousel-inner > .prev {
-  left: -100%;
-}
-
-.carousel-inner > .next.left,
-.carousel-inner > .prev.right {
-  left: 0;
-}
-
-.carousel-inner > .active.left {
-  left: -100%;
-}
-
-.carousel-inner > .active.right {
-  left: 100%;
-}
-
-.carousel-control {
-  position: absolute;
-  top: 40%;
-  left: 15px;
-  width: 40px;
-  height: 40px;
-  margin-top: -20px;
-  font-size: 60px;
-  font-weight: 100;
-  line-height: 30px;
-  color: #ffffff;
-  text-align: center;
-  background: #222222;
-  border: 3px solid #ffffff;
-  -webkit-border-radius: 23px;
-     -moz-border-radius: 23px;
-          border-radius: 23px;
-  opacity: 0.5;
-  filter: alpha(opacity=50);
-}
-
-.carousel-control.right {
-  right: 15px;
-  left: auto;
-}
-
-.carousel-control:hover,
-.carousel-control:focus {
-  color: #ffffff;
-  text-decoration: none;
-  opacity: 0.9;
-  filter: alpha(opacity=90);
-}
-
-.carousel-indicators {
-  position: absolute;
-  top: 15px;
-  right: 15px;
-  z-index: 5;
-  margin: 0;
-  list-style: none;
-}
-
-.carousel-indicators li {
-  display: block;
-  float: left;
-  width: 10px;
-  height: 10px;
-  margin-left: 5px;
-  text-indent: -999px;
-  background-color: #ccc;
-  background-color: rgba(255, 255, 255, 0.25);
-  border-radius: 5px;
-}
-
-.carousel-indicators .active {
-  background-color: #fff;
-}
-
-.carousel-caption {
-  position: absolute;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  padding: 15px;
-  background: #333333;
-  background: rgba(0, 0, 0, 0.75);
-}
-
-.carousel-caption h4,
-.carousel-caption p {
-  line-height: 20px;
-  color: #ffffff;
-}
-
-.carousel-caption h4 {
-  margin: 0 0 5px;
-}
-
-.carousel-caption p {
-  margin-bottom: 0;
-}
-
-.hero-unit {
-  padding: 60px;
-  margin-bottom: 30px;
-  font-size: 18px;
-  font-weight: 200;
-  line-height: 30px;
-  color: inherit;
-  background-color: #eeeeee;
-  -webkit-border-radius: 6px;
-     -moz-border-radius: 6px;
-          border-radius: 6px;
-}
-
-.hero-unit h1 {
-  margin-bottom: 0;
-  font-size: 60px;
-  line-height: 1;
-  letter-spacing: -1px;
-  color: inherit;
-}
-
-.hero-unit li {
-  line-height: 30px;
-}
-
-.pull-right {
-  float: right;
-}
-
-.pull-left {
-  float: left;
-}
-
-.hide {
-  display: none;
-}
-
-.show {
-  display: block;
-}
-
-.invisible {
-  visibility: hidden;
-}
-
-.affix {
-  position: fixed;
-}
diff --git a/packages/node_modules/@node-red/editor-client/src/vendor/bootstrap/css/bootstrap.min.css b/packages/node_modules/@node-red/editor-client/src/vendor/bootstrap/css/bootstrap.min.css
deleted file mode 100644
index df96c8648..000000000
--- a/packages/node_modules/@node-red/editor-client/src/vendor/bootstrap/css/bootstrap.min.css
+++ /dev/null
@@ -1,9 +0,0 @@
-/*!
- * Bootstrap v2.3.2
- *
- * Copyright 2013 Twitter, Inc
- * Licensed under the Apache License v2.0
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Designed and built with all the love in the world by @mdo and @fat.
- */.clearfix{*zoom:1}.clearfix:before,.clearfix:after{display:table;line-height:0;content:""}.clearfix:after{clear:both}.hide-text{font:0/0 a;color:transparent;text-shadow:none;background-color:transparent;border:0}.input-block-level{display:block;width:100%;min-height:30px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{display:block}audio,canvas,video{display:inline-block;*display:inline;*zoom:1}audio:not([controls]){display:none}html{font-size:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}a:focus{outline:thin dotted #333;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px}a:hover,a:active{outline:0}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{width:auto\9;height:auto;max-width:100%;vertical-align:middle;border:0;-ms-interpolation-mode:bicubic}#map_canvas img,.google-maps img{max-width:none}button,input,select,textarea{margin:0;font-size:100%;vertical-align:middle}button,input{*overflow:visible;line-height:normal}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0}button,html input[type="button"],input[type="reset"],input[type="submit"]{cursor:pointer;-webkit-appearance:button}label,select,button,input[type="button"],input[type="reset"],input[type="submit"],input[type="radio"],input[type="checkbox"]{cursor:pointer}input[type="search"]{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;-webkit-appearance:textfield}input[type="search"]::-webkit-search-decoration,input[type="search"]::-webkit-search-cancel-button{-webkit-appearance:none}textarea{overflow:auto;vertical-align:top}@media print{*{color:#000!important;text-shadow:none!important;background:transparent!important;box-shadow:none!important}a,a:visited{text-decoration:underline}a[href]:after{content:" (" attr(href) ")"}abbr[title]:after{content:" (" attr(title) ")"}.ir a:after,a[href^="javascript:"]:after,a[href^="#"]:after{content:""}pre,blockquote{border:1px solid #999;page-break-inside:avoid}thead{display:table-header-group}tr,img{page-break-inside:avoid}img{max-width:100%!important}@page{margin:.5cm}p,h2,h3{orphans:3;widows:3}h2,h3{page-break-after:avoid}}body{margin:0;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:14px;line-height:20px;color:#333;background-color:#fff}a{color:#08c;text-decoration:none}a:hover,a:focus{color:#005580;text-decoration:underline}.img-rounded{-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px}.img-polaroid{padding:4px;background-color:#fff;border:1px solid #ccc;border:1px solid rgba(0,0,0,0.2);-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.1);-moz-box-shadow:0 1px 3px rgba(0,0,0,0.1);box-shadow:0 1px 3px rgba(0,0,0,0.1)}.img-circle{-webkit-border-radius:500px;-moz-border-radius:500px;border-radius:500px}.row{margin-left:-20px;*zoom:1}.row:before,.row:after{display:table;line-height:0;content:""}.row:after{clear:both}[class*="span"]{float:left;min-height:1px;margin-left:20px}.container,.navbar-static-top .container,.navbar-fixed-top .container,.navbar-fixed-bottom .container{width:940px}.span12{width:940px}.span11{width:860px}.span10{width:780px}.span9{width:700px}.span8{width:620px}.span7{width:540px}.span6{width:460px}.span5{width:380px}.span4{width:300px}.span3{width:220px}.span2{width:140px}.span1{width:60px}.offset12{margin-left:980px}.offset11{margin-left:900px}.offset10{margin-left:820px}.offset9{margin-left:740px}.offset8{margin-left:660px}.offset7{margin-left:580px}.offset6{margin-left:500px}.offset5{margin-left:420px}.offset4{margin-left:340px}.offset3{margin-left:260px}.offset2{margin-left:180px}.offset1{margin-left:100px}.row-fluid{width:100%;*zoom:1}.row-fluid:before,.row-fluid:after{display:table;line-height:0;content:""}.row-fluid:after{clear:both}.row-fluid [class*="span"]{display:block;float:left;width:100%;min-height:30px;margin-left:2.127659574468085%;*margin-left:2.074468085106383%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.row-fluid [class*="span"]:first-child{margin-left:0}.row-fluid .controls-row [class*="span"]+[class*="span"]{margin-left:2.127659574468085%}.row-fluid .span12{width:100%;*width:99.94680851063829%}.row-fluid .span11{width:91.48936170212765%;*width:91.43617021276594%}.row-fluid .span10{width:82.97872340425532%;*width:82.92553191489361%}.row-fluid .span9{width:74.46808510638297%;*width:74.41489361702126%}.row-fluid .span8{width:65.95744680851064%;*width:65.90425531914893%}.row-fluid .span7{width:57.44680851063829%;*width:57.39361702127659%}.row-fluid .span6{width:48.93617021276595%;*width:48.88297872340425%}.row-fluid .span5{width:40.42553191489362%;*width:40.37234042553192%}.row-fluid .span4{width:31.914893617021278%;*width:31.861702127659576%}.row-fluid .span3{width:23.404255319148934%;*width:23.351063829787233%}.row-fluid .span2{width:14.893617021276595%;*width:14.840425531914894%}.row-fluid .span1{width:6.382978723404255%;*width:6.329787234042553%}.row-fluid .offset12{margin-left:104.25531914893617%;*margin-left:104.14893617021275%}.row-fluid .offset12:first-child{margin-left:102.12765957446808%;*margin-left:102.02127659574467%}.row-fluid .offset11{margin-left:95.74468085106382%;*margin-left:95.6382978723404%}.row-fluid .offset11:first-child{margin-left:93.61702127659574%;*margin-left:93.51063829787232%}.row-fluid .offset10{margin-left:87.23404255319149%;*margin-left:87.12765957446807%}.row-fluid .offset10:first-child{margin-left:85.1063829787234%;*margin-left:84.99999999999999%}.row-fluid .offset9{margin-left:78.72340425531914%;*margin-left:78.61702127659572%}.row-fluid .offset9:first-child{margin-left:76.59574468085106%;*margin-left:76.48936170212764%}.row-fluid .offset8{margin-left:70.2127659574468%;*margin-left:70.10638297872339%}.row-fluid .offset8:first-child{margin-left:68.08510638297872%;*margin-left:67.9787234042553%}.row-fluid .offset7{margin-left:61.70212765957446%;*margin-left:61.59574468085106%}.row-fluid .offset7:first-child{margin-left:59.574468085106375%;*margin-left:59.46808510638297%}.row-fluid .offset6{margin-left:53.191489361702125%;*margin-left:53.085106382978715%}.row-fluid .offset6:first-child{margin-left:51.063829787234035%;*margin-left:50.95744680851063%}.row-fluid .offset5{margin-left:44.68085106382979%;*margin-left:44.57446808510638%}.row-fluid .offset5:first-child{margin-left:42.5531914893617%;*margin-left:42.4468085106383%}.row-fluid .offset4{margin-left:36.170212765957444%;*margin-left:36.06382978723405%}.row-fluid .offset4:first-child{margin-left:34.04255319148936%;*margin-left:33.93617021276596%}.row-fluid .offset3{margin-left:27.659574468085104%;*margin-left:27.5531914893617%}.row-fluid .offset3:first-child{margin-left:25.53191489361702%;*margin-left:25.425531914893618%}.row-fluid .offset2{margin-left:19.148936170212764%;*margin-left:19.04255319148936%}.row-fluid .offset2:first-child{margin-left:17.02127659574468%;*margin-left:16.914893617021278%}.row-fluid .offset1{margin-left:10.638297872340425%;*margin-left:10.53191489361702%}.row-fluid .offset1:first-child{margin-left:8.51063829787234%;*margin-left:8.404255319148938%}[class*="span"].hide,.row-fluid [class*="span"].hide{display:none}[class*="span"].pull-right,.row-fluid [class*="span"].pull-right{float:right}.container{margin-right:auto;margin-left:auto;*zoom:1}.container:before,.container:after{display:table;line-height:0;content:""}.container:after{clear:both}.container-fluid{padding-right:20px;padding-left:20px;*zoom:1}.container-fluid:before,.container-fluid:after{display:table;line-height:0;content:""}.container-fluid:after{clear:both}p{margin:0 0 10px}.lead{margin-bottom:20px;font-size:21px;font-weight:200;line-height:30px}small{font-size:85%}strong{font-weight:bold}em{font-style:italic}cite{font-style:normal}.muted{color:#999}a.muted:hover,a.muted:focus{color:#808080}.text-warning{color:#c09853}a.text-warning:hover,a.text-warning:focus{color:#a47e3c}.text-error{color:#b94a48}a.text-error:hover,a.text-error:focus{color:#953b39}.text-info{color:#3a87ad}a.text-info:hover,a.text-info:focus{color:#2d6987}.text-success{color:#468847}a.text-success:hover,a.text-success:focus{color:#356635}.text-left{text-align:left}.text-right{text-align:right}.text-center{text-align:center}h1,h2,h3,h4,h5,h6{margin:10px 0;font-family:inherit;font-weight:bold;line-height:20px;color:inherit;text-rendering:optimizelegibility}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{font-weight:normal;line-height:1;color:#999}h1,h2,h3{line-height:40px}h1{font-size:38.5px}h2{font-size:31.5px}h3{font-size:24.5px}h4{font-size:17.5px}h5{font-size:14px}h6{font-size:11.9px}h1 small{font-size:24.5px}h2 small{font-size:17.5px}h3 small{font-size:14px}h4 small{font-size:14px}.page-header{padding-bottom:9px;margin:20px 0 30px;border-bottom:1px solid #eee}ul,ol{padding:0;margin:0 0 10px 25px}ul ul,ul ol,ol ol,ol ul{margin-bottom:0}li{line-height:20px}ul.unstyled,ol.unstyled{margin-left:0;list-style:none}ul.inline,ol.inline{margin-left:0;list-style:none}ul.inline>li,ol.inline>li{display:inline-block;*display:inline;padding-right:5px;padding-left:5px;*zoom:1}dl{margin-bottom:20px}dt,dd{line-height:20px}dt{font-weight:bold}dd{margin-left:10px}.dl-horizontal{*zoom:1}.dl-horizontal:before,.dl-horizontal:after{display:table;line-height:0;content:""}.dl-horizontal:after{clear:both}.dl-horizontal dt{float:left;width:160px;overflow:hidden;clear:left;text-align:right;text-overflow:ellipsis;white-space:nowrap}.dl-horizontal dd{margin-left:180px}hr{margin:20px 0;border:0;border-top:1px solid #eee;border-bottom:1px solid #fff}abbr[title],abbr[data-original-title]{cursor:help;border-bottom:1px dotted #999}abbr.initialism{font-size:90%;text-transform:uppercase}blockquote{padding:0 0 0 15px;margin:0 0 20px;border-left:5px solid #eee}blockquote p{margin-bottom:0;font-size:17.5px;font-weight:300;line-height:1.25}blockquote small{display:block;line-height:20px;color:#999}blockquote small:before{content:'\2014 \00A0'}blockquote.pull-right{float:right;padding-right:15px;padding-left:0;border-right:5px solid #eee;border-left:0}blockquote.pull-right p,blockquote.pull-right small{text-align:right}blockquote.pull-right small:before{content:''}blockquote.pull-right small:after{content:'\00A0 \2014'}q:before,q:after,blockquote:before,blockquote:after{content:""}address{display:block;margin-bottom:20px;font-style:normal;line-height:20px}code,pre{padding:0 3px 2px;font-family:Monaco,Menlo,Consolas,"Courier New",monospace;font-size:12px;color:#333;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px}code{padding:2px 4px;color:#d14;white-space:nowrap;background-color:#f7f7f9;border:1px solid #e1e1e8}pre{display:block;padding:9.5px;margin:0 0 10px;font-size:13px;line-height:20px;word-break:break-all;word-wrap:break-word;white-space:pre;white-space:pre-wrap;background-color:#f5f5f5;border:1px solid #ccc;border:1px solid rgba(0,0,0,0.15);-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px}pre.prettyprint{margin-bottom:20px}pre code{padding:0;color:inherit;white-space:pre;white-space:pre-wrap;background-color:transparent;border:0}.pre-scrollable{max-height:340px;overflow-y:scroll}form{margin:0 0 20px}fieldset{padding:0;margin:0;border:0}legend{display:block;width:100%;padding:0;margin-bottom:20px;font-size:21px;line-height:40px;color:#333;border:0;border-bottom:1px solid #e5e5e5}legend small{font-size:15px;color:#999}label,input,button,select,textarea{font-size:14px;font-weight:normal;line-height:20px}input,button,select,textarea{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif}label{display:block;margin-bottom:5px}select,textarea,input[type="text"],input[type="password"],input[type="datetime"],input[type="datetime-local"],input[type="date"],input[type="month"],input[type="time"],input[type="week"],input[type="number"],input[type="email"],input[type="url"],input[type="search"],input[type="tel"],input[type="color"],.uneditable-input{display:inline-block;height:20px;padding:4px 6px;margin-bottom:10px;font-size:14px;line-height:20px;color:#555;vertical-align:middle;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px}input,textarea,.uneditable-input{width:206px}textarea{height:auto}textarea,input[type="text"],input[type="password"],input[type="datetime"],input[type="datetime-local"],input[type="date"],input[type="month"],input[type="time"],input[type="week"],input[type="number"],input[type="email"],input[type="url"],input[type="search"],input[type="tel"],input[type="color"],.uneditable-input{background-color:#fff;border:1px solid #ccc;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);-moz-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);-webkit-transition:border linear .2s,box-shadow linear .2s;-moz-transition:border linear .2s,box-shadow linear .2s;-o-transition:border linear .2s,box-shadow linear .2s;transition:border linear .2s,box-shadow linear .2s}textarea:focus,input[type="text"]:focus,input[type="password"]:focus,input[type="datetime"]:focus,input[type="datetime-local"]:focus,input[type="date"]:focus,input[type="month"]:focus,input[type="time"]:focus,input[type="week"]:focus,input[type="number"]:focus,input[type="email"]:focus,input[type="url"]:focus,input[type="search"]:focus,input[type="tel"]:focus,input[type="color"]:focus,.uneditable-input:focus{border-color:rgba(82,168,236,0.8);outline:0;outline:thin dotted \9;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(82,168,236,0.6);-moz-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(82,168,236,0.6);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(82,168,236,0.6)}input[type="radio"],input[type="checkbox"]{margin:4px 0 0;margin-top:1px \9;*margin-top:0;line-height:normal}input[type="file"],input[type="image"],input[type="submit"],input[type="reset"],input[type="button"],input[type="radio"],input[type="checkbox"]{width:auto}select,input[type="file"]{height:30px;*margin-top:4px;line-height:30px}select{width:220px;background-color:#fff;border:1px solid #ccc}select[multiple],select[size]{height:auto}select:focus,input[type="file"]:focus,input[type="radio"]:focus,input[type="checkbox"]:focus{outline:thin dotted #333;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px}.uneditable-input,.uneditable-textarea{color:#999;cursor:not-allowed;background-color:#fcfcfc;border-color:#ccc;-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,0.025);-moz-box-shadow:inset 0 1px 2px rgba(0,0,0,0.025);box-shadow:inset 0 1px 2px rgba(0,0,0,0.025)}.uneditable-input{overflow:hidden;white-space:nowrap}.uneditable-textarea{width:auto;height:auto}input:-moz-placeholder,textarea:-moz-placeholder{color:#999}input:-ms-input-placeholder,textarea:-ms-input-placeholder{color:#999}input::-webkit-input-placeholder,textarea::-webkit-input-placeholder{color:#999}.radio,.checkbox{min-height:20px;padding-left:20px}.radio input[type="radio"],.checkbox input[type="checkbox"]{float:left;margin-left:-20px}.controls>.radio:first-child,.controls>.checkbox:first-child{padding-top:5px}.radio.inline,.checkbox.inline{display:inline-block;padding-top:5px;margin-bottom:0;vertical-align:middle}.radio.inline+.radio.inline,.checkbox.inline+.checkbox.inline{margin-left:10px}.input-mini{width:60px}.input-small{width:90px}.input-medium{width:150px}.input-large{width:210px}.input-xlarge{width:270px}.input-xxlarge{width:530px}input[class*="span"],select[class*="span"],textarea[class*="span"],.uneditable-input[class*="span"],.row-fluid input[class*="span"],.row-fluid select[class*="span"],.row-fluid textarea[class*="span"],.row-fluid .uneditable-input[class*="span"]{float:none;margin-left:0}.input-append input[class*="span"],.input-append .uneditable-input[class*="span"],.input-prepend input[class*="span"],.input-prepend .uneditable-input[class*="span"],.row-fluid input[class*="span"],.row-fluid select[class*="span"],.row-fluid textarea[class*="span"],.row-fluid .uneditable-input[class*="span"],.row-fluid .input-prepend [class*="span"],.row-fluid .input-append [class*="span"]{display:inline-block}input,textarea,.uneditable-input{margin-left:0}.controls-row [class*="span"]+[class*="span"]{margin-left:20px}input.span12,textarea.span12,.uneditable-input.span12{width:926px}input.span11,textarea.span11,.uneditable-input.span11{width:846px}input.span10,textarea.span10,.uneditable-input.span10{width:766px}input.span9,textarea.span9,.uneditable-input.span9{width:686px}input.span8,textarea.span8,.uneditable-input.span8{width:606px}input.span7,textarea.span7,.uneditable-input.span7{width:526px}input.span6,textarea.span6,.uneditable-input.span6{width:446px}input.span5,textarea.span5,.uneditable-input.span5{width:366px}input.span4,textarea.span4,.uneditable-input.span4{width:286px}input.span3,textarea.span3,.uneditable-input.span3{width:206px}input.span2,textarea.span2,.uneditable-input.span2{width:126px}input.span1,textarea.span1,.uneditable-input.span1{width:46px}.controls-row{*zoom:1}.controls-row:before,.controls-row:after{display:table;line-height:0;content:""}.controls-row:after{clear:both}.controls-row [class*="span"],.row-fluid .controls-row [class*="span"]{float:left}.controls-row .checkbox[class*="span"],.controls-row .radio[class*="span"]{padding-top:5px}input[disabled],select[disabled],textarea[disabled],input[readonly],select[readonly],textarea[readonly]{cursor:not-allowed;background-color:#eee}input[type="radio"][disabled],input[type="checkbox"][disabled],input[type="radio"][readonly],input[type="checkbox"][readonly]{background-color:transparent}.control-group.warning .control-label,.control-group.warning .help-block,.control-group.warning .help-inline{color:#c09853}.control-group.warning .checkbox,.control-group.warning .radio,.control-group.warning input,.control-group.warning select,.control-group.warning textarea{color:#c09853}.control-group.warning input,.control-group.warning select,.control-group.warning textarea{border-color:#c09853;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);-moz-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075)}.control-group.warning input:focus,.control-group.warning select:focus,.control-group.warning textarea:focus{border-color:#a47e3c;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075),0 0 6px #dbc59e;-moz-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075),0 0 6px #dbc59e;box-shadow:inset 0 1px 1px rgba(0,0,0,0.075),0 0 6px #dbc59e}.control-group.warning .input-prepend .add-on,.control-group.warning .input-append .add-on{color:#c09853;background-color:#fcf8e3;border-color:#c09853}.control-group.error .control-label,.control-group.error .help-block,.control-group.error .help-inline{color:#b94a48}.control-group.error .checkbox,.control-group.error .radio,.control-group.error input,.control-group.error select,.control-group.error textarea{color:#b94a48}.control-group.error input,.control-group.error select,.control-group.error textarea{border-color:#b94a48;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);-moz-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075)}.control-group.error input:focus,.control-group.error select:focus,.control-group.error textarea:focus{border-color:#953b39;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075),0 0 6px #d59392;-moz-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075),0 0 6px #d59392;box-shadow:inset 0 1px 1px rgba(0,0,0,0.075),0 0 6px #d59392}.control-group.error .input-prepend .add-on,.control-group.error .input-append .add-on{color:#b94a48;background-color:#f2dede;border-color:#b94a48}.control-group.success .control-label,.control-group.success .help-block,.control-group.success .help-inline{color:#468847}.control-group.success .checkbox,.control-group.success .radio,.control-group.success input,.control-group.success select,.control-group.success textarea{color:#468847}.control-group.success input,.control-group.success select,.control-group.success textarea{border-color:#468847;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);-moz-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075)}.control-group.success input:focus,.control-group.success select:focus,.control-group.success textarea:focus{border-color:#356635;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075),0 0 6px #7aba7b;-moz-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075),0 0 6px #7aba7b;box-shadow:inset 0 1px 1px rgba(0,0,0,0.075),0 0 6px #7aba7b}.control-group.success .input-prepend .add-on,.control-group.success .input-append .add-on{color:#468847;background-color:#dff0d8;border-color:#468847}.control-group.info .control-label,.control-group.info .help-block,.control-group.info .help-inline{color:#3a87ad}.control-group.info .checkbox,.control-group.info .radio,.control-group.info input,.control-group.info select,.control-group.info textarea{color:#3a87ad}.control-group.info input,.control-group.info select,.control-group.info textarea{border-color:#3a87ad;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);-moz-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075)}.control-group.info input:focus,.control-group.info select:focus,.control-group.info textarea:focus{border-color:#2d6987;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075),0 0 6px #7ab5d3;-moz-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075),0 0 6px #7ab5d3;box-shadow:inset 0 1px 1px rgba(0,0,0,0.075),0 0 6px #7ab5d3}.control-group.info .input-prepend .add-on,.control-group.info .input-append .add-on{color:#3a87ad;background-color:#d9edf7;border-color:#3a87ad}input:focus:invalid,textarea:focus:invalid,select:focus:invalid{color:#b94a48;border-color:#ee5f5b}input:focus:invalid:focus,textarea:focus:invalid:focus,select:focus:invalid:focus{border-color:#e9322d;-webkit-box-shadow:0 0 6px #f8b9b7;-moz-box-shadow:0 0 6px #f8b9b7;box-shadow:0 0 6px #f8b9b7}.form-actions{padding:19px 20px 20px;margin-top:20px;margin-bottom:20px;background-color:#f5f5f5;border-top:1px solid #e5e5e5;*zoom:1}.form-actions:before,.form-actions:after{display:table;line-height:0;content:""}.form-actions:after{clear:both}.help-block,.help-inline{color:#595959}.help-block{display:block;margin-bottom:10px}.help-inline{display:inline-block;*display:inline;padding-left:5px;vertical-align:middle;*zoom:1}.input-append,.input-prepend{display:inline-block;margin-bottom:10px;font-size:0;white-space:nowrap;vertical-align:middle}.input-append input,.input-prepend input,.input-append select,.input-prepend select,.input-append .uneditable-input,.input-prepend .uneditable-input,.input-append .dropdown-menu,.input-prepend .dropdown-menu,.input-append .popover,.input-prepend .popover{font-size:14px}.input-append input,.input-prepend input,.input-append select,.input-prepend select,.input-append .uneditable-input,.input-prepend .uneditable-input{position:relative;margin-bottom:0;*margin-left:0;vertical-align:top;-webkit-border-radius:0 4px 4px 0;-moz-border-radius:0 4px 4px 0;border-radius:0 4px 4px 0}.input-append input:focus,.input-prepend input:focus,.input-append select:focus,.input-prepend select:focus,.input-append .uneditable-input:focus,.input-prepend .uneditable-input:focus{z-index:2}.input-append .add-on,.input-prepend .add-on{display:inline-block;width:auto;height:20px;min-width:16px;padding:4px 5px;font-size:14px;font-weight:normal;line-height:20px;text-align:center;text-shadow:0 1px 0 #fff;background-color:#eee;border:1px solid #ccc}.input-append .add-on,.input-prepend .add-on,.input-append .btn,.input-prepend .btn,.input-append .btn-group>.dropdown-toggle,.input-prepend .btn-group>.dropdown-toggle{vertical-align:top;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0}.input-append .active,.input-prepend .active{background-color:#a9dba9;border-color:#46a546}.input-prepend .add-on,.input-prepend .btn{margin-right:-1px}.input-prepend .add-on:first-child,.input-prepend .btn:first-child{-webkit-border-radius:4px 0 0 4px;-moz-border-radius:4px 0 0 4px;border-radius:4px 0 0 4px}.input-append input,.input-append select,.input-append .uneditable-input{-webkit-border-radius:4px 0 0 4px;-moz-border-radius:4px 0 0 4px;border-radius:4px 0 0 4px}.input-append input+.btn-group .btn:last-child,.input-append select+.btn-group .btn:last-child,.input-append .uneditable-input+.btn-group .btn:last-child{-webkit-border-radius:0 4px 4px 0;-moz-border-radius:0 4px 4px 0;border-radius:0 4px 4px 0}.input-append .add-on,.input-append .btn,.input-append .btn-group{margin-left:-1px}.input-append .add-on:last-child,.input-append .btn:last-child,.input-append .btn-group:last-child>.dropdown-toggle{-webkit-border-radius:0 4px 4px 0;-moz-border-radius:0 4px 4px 0;border-radius:0 4px 4px 0}.input-prepend.input-append input,.input-prepend.input-append select,.input-prepend.input-append .uneditable-input{-webkit-border-radius:0;-moz-border-radius:0;border-radius:0}.input-prepend.input-append input+.btn-group .btn,.input-prepend.input-append select+.btn-group .btn,.input-prepend.input-append .uneditable-input+.btn-group .btn{-webkit-border-radius:0 4px 4px 0;-moz-border-radius:0 4px 4px 0;border-radius:0 4px 4px 0}.input-prepend.input-append .add-on:first-child,.input-prepend.input-append .btn:first-child{margin-right:-1px;-webkit-border-radius:4px 0 0 4px;-moz-border-radius:4px 0 0 4px;border-radius:4px 0 0 4px}.input-prepend.input-append .add-on:last-child,.input-prepend.input-append .btn:last-child{margin-left:-1px;-webkit-border-radius:0 4px 4px 0;-moz-border-radius:0 4px 4px 0;border-radius:0 4px 4px 0}.input-prepend.input-append .btn-group:first-child{margin-left:0}input.search-query{padding-right:14px;padding-right:4px \9;padding-left:14px;padding-left:4px \9;margin-bottom:0;-webkit-border-radius:15px;-moz-border-radius:15px;border-radius:15px}.form-search .input-append .search-query,.form-search .input-prepend .search-query{-webkit-border-radius:0;-moz-border-radius:0;border-radius:0}.form-search .input-append .search-query{-webkit-border-radius:14px 0 0 14px;-moz-border-radius:14px 0 0 14px;border-radius:14px 0 0 14px}.form-search .input-append .btn{-webkit-border-radius:0 14px 14px 0;-moz-border-radius:0 14px 14px 0;border-radius:0 14px 14px 0}.form-search .input-prepend .search-query{-webkit-border-radius:0 14px 14px 0;-moz-border-radius:0 14px 14px 0;border-radius:0 14px 14px 0}.form-search .input-prepend .btn{-webkit-border-radius:14px 0 0 14px;-moz-border-radius:14px 0 0 14px;border-radius:14px 0 0 14px}.form-search input,.form-inline input,.form-horizontal input,.form-search textarea,.form-inline textarea,.form-horizontal textarea,.form-search select,.form-inline select,.form-horizontal select,.form-search .help-inline,.form-inline .help-inline,.form-horizontal .help-inline,.form-search .uneditable-input,.form-inline .uneditable-input,.form-horizontal .uneditable-input,.form-search .input-prepend,.form-inline .input-prepend,.form-horizontal .input-prepend,.form-search .input-append,.form-inline .input-append,.form-horizontal .input-append{display:inline-block;*display:inline;margin-bottom:0;vertical-align:middle;*zoom:1}.form-search .hide,.form-inline .hide,.form-horizontal .hide{display:none}.form-search label,.form-inline label,.form-search .btn-group,.form-inline .btn-group{display:inline-block}.form-search .input-append,.form-inline .input-append,.form-search .input-prepend,.form-inline .input-prepend{margin-bottom:0}.form-search .radio,.form-search .checkbox,.form-inline .radio,.form-inline .checkbox{padding-left:0;margin-bottom:0;vertical-align:middle}.form-search .radio input[type="radio"],.form-search .checkbox input[type="checkbox"],.form-inline .radio input[type="radio"],.form-inline .checkbox input[type="checkbox"]{float:left;margin-right:3px;margin-left:0}.control-group{margin-bottom:10px}legend+.control-group{margin-top:20px;-webkit-margin-top-collapse:separate}.form-horizontal .control-group{margin-bottom:20px;*zoom:1}.form-horizontal .control-group:before,.form-horizontal .control-group:after{display:table;line-height:0;content:""}.form-horizontal .control-group:after{clear:both}.form-horizontal .control-label{float:left;width:160px;padding-top:5px;text-align:right}.form-horizontal .controls{*display:inline-block;*padding-left:20px;margin-left:180px;*margin-left:0}.form-horizontal .controls:first-child{*padding-left:180px}.form-horizontal .help-block{margin-bottom:0}.form-horizontal input+.help-block,.form-horizontal select+.help-block,.form-horizontal textarea+.help-block,.form-horizontal .uneditable-input+.help-block,.form-horizontal .input-prepend+.help-block,.form-horizontal .input-append+.help-block{margin-top:10px}.form-horizontal .form-actions{padding-left:180px}table{max-width:100%;background-color:transparent;border-collapse:collapse;border-spacing:0}.table{width:100%;margin-bottom:20px}.table th,.table td{padding:8px;line-height:20px;text-align:left;vertical-align:top;border-top:1px solid #ddd}.table th{font-weight:bold}.table thead th{vertical-align:bottom}.table caption+thead tr:first-child th,.table caption+thead tr:first-child td,.table colgroup+thead tr:first-child th,.table colgroup+thead tr:first-child td,.table thead:first-child tr:first-child th,.table thead:first-child tr:first-child td{border-top:0}.table tbody+tbody{border-top:2px solid #ddd}.table .table{background-color:#fff}.table-condensed th,.table-condensed td{padding:4px 5px}.table-bordered{border:1px solid #ddd;border-collapse:separate;*border-collapse:collapse;border-left:0;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px}.table-bordered th,.table-bordered td{border-left:1px solid #ddd}.table-bordered caption+thead tr:first-child th,.table-bordered caption+tbody tr:first-child th,.table-bordered caption+tbody tr:first-child td,.table-bordered colgroup+thead tr:first-child th,.table-bordered colgroup+tbody tr:first-child th,.table-bordered colgroup+tbody tr:first-child td,.table-bordered thead:first-child tr:first-child th,.table-bordered tbody:first-child tr:first-child th,.table-bordered tbody:first-child tr:first-child td{border-top:0}.table-bordered thead:first-child tr:first-child>th:first-child,.table-bordered tbody:first-child tr:first-child>td:first-child,.table-bordered tbody:first-child tr:first-child>th:first-child{-webkit-border-top-left-radius:4px;border-top-left-radius:4px;-moz-border-radius-topleft:4px}.table-bordered thead:first-child tr:first-child>th:last-child,.table-bordered tbody:first-child tr:first-child>td:last-child,.table-bordered tbody:first-child tr:first-child>th:last-child{-webkit-border-top-right-radius:4px;border-top-right-radius:4px;-moz-border-radius-topright:4px}.table-bordered thead:last-child tr:last-child>th:first-child,.table-bordered tbody:last-child tr:last-child>td:first-child,.table-bordered tbody:last-child tr:last-child>th:first-child,.table-bordered tfoot:last-child tr:last-child>td:first-child,.table-bordered tfoot:last-child tr:last-child>th:first-child{-webkit-border-bottom-left-radius:4px;border-bottom-left-radius:4px;-moz-border-radius-bottomleft:4px}.table-bordered thead:last-child tr:last-child>th:last-child,.table-bordered tbody:last-child tr:last-child>td:last-child,.table-bordered tbody:last-child tr:last-child>th:last-child,.table-bordered tfoot:last-child tr:last-child>td:last-child,.table-bordered tfoot:last-child tr:last-child>th:last-child{-webkit-border-bottom-right-radius:4px;border-bottom-right-radius:4px;-moz-border-radius-bottomright:4px}.table-bordered tfoot+tbody:last-child tr:last-child td:first-child{-webkit-border-bottom-left-radius:0;border-bottom-left-radius:0;-moz-border-radius-bottomleft:0}.table-bordered tfoot+tbody:last-child tr:last-child td:last-child{-webkit-border-bottom-right-radius:0;border-bottom-right-radius:0;-moz-border-radius-bottomright:0}.table-bordered caption+thead tr:first-child th:first-child,.table-bordered caption+tbody tr:first-child td:first-child,.table-bordered colgroup+thead tr:first-child th:first-child,.table-bordered colgroup+tbody tr:first-child td:first-child{-webkit-border-top-left-radius:4px;border-top-left-radius:4px;-moz-border-radius-topleft:4px}.table-bordered caption+thead tr:first-child th:last-child,.table-bordered caption+tbody tr:first-child td:last-child,.table-bordered colgroup+thead tr:first-child th:last-child,.table-bordered colgroup+tbody tr:first-child td:last-child{-webkit-border-top-right-radius:4px;border-top-right-radius:4px;-moz-border-radius-topright:4px}.table-striped tbody>tr:nth-child(odd)>td,.table-striped tbody>tr:nth-child(odd)>th{background-color:#f9f9f9}.table-hover tbody tr:hover>td,.table-hover tbody tr:hover>th{background-color:#f5f5f5}table td[class*="span"],table th[class*="span"],.row-fluid table td[class*="span"],.row-fluid table th[class*="span"]{display:table-cell;float:none;margin-left:0}.table td.span1,.table th.span1{float:none;width:44px;margin-left:0}.table td.span2,.table th.span2{float:none;width:124px;margin-left:0}.table td.span3,.table th.span3{float:none;width:204px;margin-left:0}.table td.span4,.table th.span4{float:none;width:284px;margin-left:0}.table td.span5,.table th.span5{float:none;width:364px;margin-left:0}.table td.span6,.table th.span6{float:none;width:444px;margin-left:0}.table td.span7,.table th.span7{float:none;width:524px;margin-left:0}.table td.span8,.table th.span8{float:none;width:604px;margin-left:0}.table td.span9,.table th.span9{float:none;width:684px;margin-left:0}.table td.span10,.table th.span10{float:none;width:764px;margin-left:0}.table td.span11,.table th.span11{float:none;width:844px;margin-left:0}.table td.span12,.table th.span12{float:none;width:924px;margin-left:0}.table tbody tr.success>td{background-color:#dff0d8}.table tbody tr.error>td{background-color:#f2dede}.table tbody tr.warning>td{background-color:#fcf8e3}.table tbody tr.info>td{background-color:#d9edf7}.table-hover tbody tr.success:hover>td{background-color:#d0e9c6}.table-hover tbody tr.error:hover>td{background-color:#ebcccc}.table-hover tbody tr.warning:hover>td{background-color:#faf2cc}.table-hover tbody tr.info:hover>td{background-color:#c4e3f3}[class^="icon-"],[class*=" icon-"]{display:inline-block;width:14px;height:14px;margin-top:1px;*margin-right:.3em;line-height:14px;vertical-align:text-top;background-image:url("../img/glyphicons-halflings.png");background-position:14px 14px;background-repeat:no-repeat}.icon-white,.nav-pills>.active>a>[class^="icon-"],.nav-pills>.active>a>[class*=" icon-"],.nav-list>.active>a>[class^="icon-"],.nav-list>.active>a>[class*=" icon-"],.navbar-inverse .nav>.active>a>[class^="icon-"],.navbar-inverse .nav>.active>a>[class*=" icon-"],.dropdown-menu>li>a:hover>[class^="icon-"],.dropdown-menu>li>a:focus>[class^="icon-"],.dropdown-menu>li>a:hover>[class*=" icon-"],.dropdown-menu>li>a:focus>[class*=" icon-"],.dropdown-menu>.active>a>[class^="icon-"],.dropdown-menu>.active>a>[class*=" icon-"],.dropdown-submenu:hover>a>[class^="icon-"],.dropdown-submenu:focus>a>[class^="icon-"],.dropdown-submenu:hover>a>[class*=" icon-"],.dropdown-submenu:focus>a>[class*=" icon-"]{background-image:url("../img/glyphicons-halflings-white.png")}.icon-glass{background-position:0 0}.icon-music{background-position:-24px 0}.icon-search{background-position:-48px 0}.icon-envelope{background-position:-72px 0}.icon-heart{background-position:-96px 0}.icon-star{background-position:-120px 0}.icon-star-empty{background-position:-144px 0}.icon-user{background-position:-168px 0}.icon-film{background-position:-192px 0}.icon-th-large{background-position:-216px 0}.icon-th{background-position:-240px 0}.icon-th-list{background-position:-264px 0}.icon-ok{background-position:-288px 0}.icon-remove{background-position:-312px 0}.icon-zoom-in{background-position:-336px 0}.icon-zoom-out{background-position:-360px 0}.icon-off{background-position:-384px 0}.icon-signal{background-position:-408px 0}.icon-cog{background-position:-432px 0}.icon-trash{background-position:-456px 0}.icon-home{background-position:0 -24px}.icon-file{background-position:-24px -24px}.icon-time{background-position:-48px -24px}.icon-road{background-position:-72px -24px}.icon-download-alt{background-position:-96px -24px}.icon-download{background-position:-120px -24px}.icon-upload{background-position:-144px -24px}.icon-inbox{background-position:-168px -24px}.icon-play-circle{background-position:-192px -24px}.icon-repeat{background-position:-216px -24px}.icon-refresh{background-position:-240px -24px}.icon-list-alt{background-position:-264px -24px}.icon-lock{background-position:-287px -24px}.icon-flag{background-position:-312px -24px}.icon-headphones{background-position:-336px -24px}.icon-volume-off{background-position:-360px -24px}.icon-volume-down{background-position:-384px -24px}.icon-volume-up{background-position:-408px -24px}.icon-qrcode{background-position:-432px -24px}.icon-barcode{background-position:-456px -24px}.icon-tag{background-position:0 -48px}.icon-tags{background-position:-25px -48px}.icon-book{background-position:-48px -48px}.icon-bookmark{background-position:-72px -48px}.icon-print{background-position:-96px -48px}.icon-camera{background-position:-120px -48px}.icon-font{background-position:-144px -48px}.icon-bold{background-position:-167px -48px}.icon-italic{background-position:-192px -48px}.icon-text-height{background-position:-216px -48px}.icon-text-width{background-position:-240px -48px}.icon-align-left{background-position:-264px -48px}.icon-align-center{background-position:-288px -48px}.icon-align-right{background-position:-312px -48px}.icon-align-justify{background-position:-336px -48px}.icon-list{background-position:-360px -48px}.icon-indent-left{background-position:-384px -48px}.icon-indent-right{background-position:-408px -48px}.icon-facetime-video{background-position:-432px -48px}.icon-picture{background-position:-456px -48px}.icon-pencil{background-position:0 -72px}.icon-map-marker{background-position:-24px -72px}.icon-adjust{background-position:-48px -72px}.icon-tint{background-position:-72px -72px}.icon-edit{background-position:-96px -72px}.icon-share{background-position:-120px -72px}.icon-check{background-position:-144px -72px}.icon-move{background-position:-168px -72px}.icon-step-backward{background-position:-192px -72px}.icon-fast-backward{background-position:-216px -72px}.icon-backward{background-position:-240px -72px}.icon-play{background-position:-264px -72px}.icon-pause{background-position:-288px -72px}.icon-stop{background-position:-312px -72px}.icon-forward{background-position:-336px -72px}.icon-fast-forward{background-position:-360px -72px}.icon-step-forward{background-position:-384px -72px}.icon-eject{background-position:-408px -72px}.icon-chevron-left{background-position:-432px -72px}.icon-chevron-right{background-position:-456px -72px}.icon-plus-sign{background-position:0 -96px}.icon-minus-sign{background-position:-24px -96px}.icon-remove-sign{background-position:-48px -96px}.icon-ok-sign{background-position:-72px -96px}.icon-question-sign{background-position:-96px -96px}.icon-info-sign{background-position:-120px -96px}.icon-screenshot{background-position:-144px -96px}.icon-remove-circle{background-position:-168px -96px}.icon-ok-circle{background-position:-192px -96px}.icon-ban-circle{background-position:-216px -96px}.icon-arrow-left{background-position:-240px -96px}.icon-arrow-right{background-position:-264px -96px}.icon-arrow-up{background-position:-289px -96px}.icon-arrow-down{background-position:-312px -96px}.icon-share-alt{background-position:-336px -96px}.icon-resize-full{background-position:-360px -96px}.icon-resize-small{background-position:-384px -96px}.icon-plus{background-position:-408px -96px}.icon-minus{background-position:-433px -96px}.icon-asterisk{background-position:-456px -96px}.icon-exclamation-sign{background-position:0 -120px}.icon-gift{background-position:-24px -120px}.icon-leaf{background-position:-48px -120px}.icon-fire{background-position:-72px -120px}.icon-eye-open{background-position:-96px -120px}.icon-eye-close{background-position:-120px -120px}.icon-warning-sign{background-position:-144px -120px}.icon-plane{background-position:-168px -120px}.icon-calendar{background-position:-192px -120px}.icon-random{width:16px;background-position:-216px -120px}.icon-comment{background-position:-240px -120px}.icon-magnet{background-position:-264px -120px}.icon-chevron-up{background-position:-288px -120px}.icon-chevron-down{background-position:-313px -119px}.icon-retweet{background-position:-336px -120px}.icon-shopping-cart{background-position:-360px -120px}.icon-folder-close{width:16px;background-position:-384px -120px}.icon-folder-open{width:16px;background-position:-408px -120px}.icon-resize-vertical{background-position:-432px -119px}.icon-resize-horizontal{background-position:-456px -118px}.icon-hdd{background-position:0 -144px}.icon-bullhorn{background-position:-24px -144px}.icon-bell{background-position:-48px -144px}.icon-certificate{background-position:-72px -144px}.icon-thumbs-up{background-position:-96px -144px}.icon-thumbs-down{background-position:-120px -144px}.icon-hand-right{background-position:-144px -144px}.icon-hand-left{background-position:-168px -144px}.icon-hand-up{background-position:-192px -144px}.icon-hand-down{background-position:-216px -144px}.icon-circle-arrow-right{background-position:-240px -144px}.icon-circle-arrow-left{background-position:-264px -144px}.icon-circle-arrow-up{background-position:-288px -144px}.icon-circle-arrow-down{background-position:-312px -144px}.icon-globe{background-position:-336px -144px}.icon-wrench{background-position:-360px -144px}.icon-tasks{background-position:-384px -144px}.icon-filter{background-position:-408px -144px}.icon-briefcase{background-position:-432px -144px}.icon-fullscreen{background-position:-456px -144px}.dropup,.dropdown{position:relative}.dropdown-toggle{*margin-bottom:-3px}.dropdown-toggle:active,.open .dropdown-toggle{outline:0}.caret{display:inline-block;width:0;height:0;vertical-align:top;border-top:4px solid #000;border-right:4px solid transparent;border-left:4px solid transparent;content:""}.dropdown .caret{margin-top:8px;margin-left:2px}.dropdown-menu{position:absolute;top:100%;left:0;z-index:1000;display:none;float:left;min-width:160px;padding:5px 0;margin:2px 0 0;list-style:none;background-color:#fff;border:1px solid #ccc;border:1px solid rgba(0,0,0,0.2);*border-right-width:2px;*border-bottom-width:2px;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-shadow:0 5px 10px rgba(0,0,0,0.2);-moz-box-shadow:0 5px 10px rgba(0,0,0,0.2);box-shadow:0 5px 10px rgba(0,0,0,0.2);-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box}.dropdown-menu.pull-right{right:0;left:auto}.dropdown-menu .divider{*width:100%;height:1px;margin:9px 1px;*margin:-5px 0 5px;overflow:hidden;background-color:#e5e5e5;border-bottom:1px solid #fff}.dropdown-menu>li>a{display:block;padding:3px 20px;clear:both;font-weight:normal;line-height:20px;color:#333;white-space:nowrap}.dropdown-menu>li>a:hover,.dropdown-menu>li>a:focus,.dropdown-submenu:hover>a,.dropdown-submenu:focus>a{color:#fff;text-decoration:none;background-color:#0081c2;background-image:-moz-linear-gradient(top,#08c,#0077b3);background-image:-webkit-gradient(linear,0 0,0 100%,from(#08c),to(#0077b3));background-image:-webkit-linear-gradient(top,#08c,#0077b3);background-image:-o-linear-gradient(top,#08c,#0077b3);background-image:linear-gradient(to bottom,#08c,#0077b3);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc',endColorstr='#ff0077b3',GradientType=0)}.dropdown-menu>.active>a,.dropdown-menu>.active>a:hover,.dropdown-menu>.active>a:focus{color:#fff;text-decoration:none;background-color:#0081c2;background-image:-moz-linear-gradient(top,#08c,#0077b3);background-image:-webkit-gradient(linear,0 0,0 100%,from(#08c),to(#0077b3));background-image:-webkit-linear-gradient(top,#08c,#0077b3);background-image:-o-linear-gradient(top,#08c,#0077b3);background-image:linear-gradient(to bottom,#08c,#0077b3);background-repeat:repeat-x;outline:0;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc',endColorstr='#ff0077b3',GradientType=0)}.dropdown-menu>.disabled>a,.dropdown-menu>.disabled>a:hover,.dropdown-menu>.disabled>a:focus{color:#999}.dropdown-menu>.disabled>a:hover,.dropdown-menu>.disabled>a:focus{text-decoration:none;cursor:default;background-color:transparent;background-image:none;filter:progid:DXImageTransform.Microsoft.gradient(enabled=false)}.open{*z-index:1000}.open>.dropdown-menu{display:block}.dropdown-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:990}.pull-right>.dropdown-menu{right:0;left:auto}.dropup .caret,.navbar-fixed-bottom .dropdown .caret{border-top:0;border-bottom:4px solid #000;content:""}.dropup .dropdown-menu,.navbar-fixed-bottom .dropdown .dropdown-menu{top:auto;bottom:100%;margin-bottom:1px}.dropdown-submenu{position:relative}.dropdown-submenu>.dropdown-menu{top:0;left:100%;margin-top:-6px;margin-left:-1px;-webkit-border-radius:0 6px 6px 6px;-moz-border-radius:0 6px 6px 6px;border-radius:0 6px 6px 6px}.dropdown-submenu:hover>.dropdown-menu{display:block}.dropup .dropdown-submenu>.dropdown-menu{top:auto;bottom:0;margin-top:0;margin-bottom:-2px;-webkit-border-radius:5px 5px 5px 0;-moz-border-radius:5px 5px 5px 0;border-radius:5px 5px 5px 0}.dropdown-submenu>a:after{display:block;float:right;width:0;height:0;margin-top:5px;margin-right:-10px;border-color:transparent;border-left-color:#ccc;border-style:solid;border-width:5px 0 5px 5px;content:" "}.dropdown-submenu:hover>a:after{border-left-color:#fff}.dropdown-submenu.pull-left{float:none}.dropdown-submenu.pull-left>.dropdown-menu{left:-100%;margin-left:10px;-webkit-border-radius:6px 0 6px 6px;-moz-border-radius:6px 0 6px 6px;border-radius:6px 0 6px 6px}.dropdown .dropdown-menu .nav-header{padding-right:20px;padding-left:20px}.typeahead{z-index:1051;margin-top:2px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px}.well{min-height:20px;padding:19px;margin-bottom:20px;background-color:#f5f5f5;border:1px solid #e3e3e3;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.05);-moz-box-shadow:inset 0 1px 1px rgba(0,0,0,0.05);box-shadow:inset 0 1px 1px rgba(0,0,0,0.05)}.well blockquote{border-color:#ddd;border-color:rgba(0,0,0,0.15)}.well-large{padding:24px;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px}.well-small{padding:9px;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px}.fade{opacity:0;-webkit-transition:opacity .15s linear;-moz-transition:opacity .15s linear;-o-transition:opacity .15s linear;transition:opacity .15s linear}.fade.in{opacity:1}.collapse{position:relative;height:0;overflow:hidden;-webkit-transition:height .35s ease;-moz-transition:height .35s ease;-o-transition:height .35s ease;transition:height .35s ease}.collapse.in{height:auto}.close{float:right;font-size:20px;font-weight:bold;line-height:20px;color:#000;text-shadow:0 1px 0 #fff;opacity:.2;filter:alpha(opacity=20)}.close:hover,.close:focus{color:#000;text-decoration:none;cursor:pointer;opacity:.4;filter:alpha(opacity=40)}button.close{padding:0;cursor:pointer;background:transparent;border:0;-webkit-appearance:none}.btn{display:inline-block;*display:inline;padding:4px 12px;margin-bottom:0;*margin-left:.3em;font-size:14px;line-height:20px;color:#333;text-align:center;text-shadow:0 1px 1px rgba(255,255,255,0.75);vertical-align:middle;cursor:pointer;background-color:#f5f5f5;*background-color:#e6e6e6;background-image:-moz-linear-gradient(top,#fff,#e6e6e6);background-image:-webkit-gradient(linear,0 0,0 100%,from(#fff),to(#e6e6e6));background-image:-webkit-linear-gradient(top,#fff,#e6e6e6);background-image:-o-linear-gradient(top,#fff,#e6e6e6);background-image:linear-gradient(to bottom,#fff,#e6e6e6);background-repeat:repeat-x;border:1px solid #ccc;*border:0;border-color:#e6e6e6 #e6e6e6 #bfbfbf;border-color:rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);border-bottom-color:#b3b3b3;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff',endColorstr='#ffe6e6e6',GradientType=0);filter:progid:DXImageTransform.Microsoft.gradient(enabled=false);*zoom:1;-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);-moz-box-shadow:inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);box-shadow:inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05)}.btn:hover,.btn:focus,.btn:active,.btn.active,.btn.disabled,.btn[disabled]{color:#333;background-color:#e6e6e6;*background-color:#d9d9d9}.btn:active,.btn.active{background-color:#ccc \9}.btn:first-child{*margin-left:0}.btn:hover,.btn:focus{color:#333;text-decoration:none;background-position:0 -15px;-webkit-transition:background-position .1s linear;-moz-transition:background-position .1s linear;-o-transition:background-position .1s linear;transition:background-position .1s linear}.btn:focus{outline:thin dotted #333;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px}.btn.active,.btn:active{background-image:none;outline:0;-webkit-box-shadow:inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);-moz-box-shadow:inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);box-shadow:inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05)}.btn.disabled,.btn[disabled]{cursor:default;background-image:none;opacity:.65;filter:alpha(opacity=65);-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.btn-large{padding:11px 19px;font-size:17.5px;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px}.btn-large [class^="icon-"],.btn-large [class*=" icon-"]{margin-top:4px}.btn-small{padding:2px 10px;font-size:11.9px;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px}.btn-small [class^="icon-"],.btn-small [class*=" icon-"]{margin-top:0}.btn-mini [class^="icon-"],.btn-mini [class*=" icon-"]{margin-top:-1px}.btn-mini{padding:0 6px;font-size:10.5px;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px}.btn-block{display:block;width:100%;padding-right:0;padding-left:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.btn-block+.btn-block{margin-top:5px}input[type="submit"].btn-block,input[type="reset"].btn-block,input[type="button"].btn-block{width:100%}.btn-primary.active,.btn-warning.active,.btn-danger.active,.btn-success.active,.btn-info.active,.btn-inverse.active{color:rgba(255,255,255,0.75)}.btn-primary{color:#fff;text-shadow:0 -1px 0 rgba(0,0,0,0.25);background-color:#006dcc;*background-color:#04c;background-image:-moz-linear-gradient(top,#08c,#04c);background-image:-webkit-gradient(linear,0 0,0 100%,from(#08c),to(#04c));background-image:-webkit-linear-gradient(top,#08c,#04c);background-image:-o-linear-gradient(top,#08c,#04c);background-image:linear-gradient(to bottom,#08c,#04c);background-repeat:repeat-x;border-color:#04c #04c #002a80;border-color:rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc',endColorstr='#ff0044cc',GradientType=0);filter:progid:DXImageTransform.Microsoft.gradient(enabled=false)}.btn-primary:hover,.btn-primary:focus,.btn-primary:active,.btn-primary.active,.btn-primary.disabled,.btn-primary[disabled]{color:#fff;background-color:#04c;*background-color:#003bb3}.btn-primary:active,.btn-primary.active{background-color:#039 \9}.btn-warning{color:#fff;text-shadow:0 -1px 0 rgba(0,0,0,0.25);background-color:#faa732;*background-color:#f89406;background-image:-moz-linear-gradient(top,#fbb450,#f89406);background-image:-webkit-gradient(linear,0 0,0 100%,from(#fbb450),to(#f89406));background-image:-webkit-linear-gradient(top,#fbb450,#f89406);background-image:-o-linear-gradient(top,#fbb450,#f89406);background-image:linear-gradient(to bottom,#fbb450,#f89406);background-repeat:repeat-x;border-color:#f89406 #f89406 #ad6704;border-color:rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffbb450',endColorstr='#fff89406',GradientType=0);filter:progid:DXImageTransform.Microsoft.gradient(enabled=false)}.btn-warning:hover,.btn-warning:focus,.btn-warning:active,.btn-warning.active,.btn-warning.disabled,.btn-warning[disabled]{color:#fff;background-color:#f89406;*background-color:#df8505}.btn-warning:active,.btn-warning.active{background-color:#c67605 \9}.btn-danger{color:#fff;text-shadow:0 -1px 0 rgba(0,0,0,0.25);background-color:#da4f49;*background-color:#bd362f;background-image:-moz-linear-gradient(top,#ee5f5b,#bd362f);background-image:-webkit-gradient(linear,0 0,0 100%,from(#ee5f5b),to(#bd362f));background-image:-webkit-linear-gradient(top,#ee5f5b,#bd362f);background-image:-o-linear-gradient(top,#ee5f5b,#bd362f);background-image:linear-gradient(to bottom,#ee5f5b,#bd362f);background-repeat:repeat-x;border-color:#bd362f #bd362f #802420;border-color:rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffee5f5b',endColorstr='#ffbd362f',GradientType=0);filter:progid:DXImageTransform.Microsoft.gradient(enabled=false)}.btn-danger:hover,.btn-danger:focus,.btn-danger:active,.btn-danger.active,.btn-danger.disabled,.btn-danger[disabled]{color:#fff;background-color:#bd362f;*background-color:#a9302a}.btn-danger:active,.btn-danger.active{background-color:#942a25 \9}.btn-success{color:#fff;text-shadow:0 -1px 0 rgba(0,0,0,0.25);background-color:#5bb75b;*background-color:#51a351;background-image:-moz-linear-gradient(top,#62c462,#51a351);background-image:-webkit-gradient(linear,0 0,0 100%,from(#62c462),to(#51a351));background-image:-webkit-linear-gradient(top,#62c462,#51a351);background-image:-o-linear-gradient(top,#62c462,#51a351);background-image:linear-gradient(to bottom,#62c462,#51a351);background-repeat:repeat-x;border-color:#51a351 #51a351 #387038;border-color:rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff62c462',endColorstr='#ff51a351',GradientType=0);filter:progid:DXImageTransform.Microsoft.gradient(enabled=false)}.btn-success:hover,.btn-success:focus,.btn-success:active,.btn-success.active,.btn-success.disabled,.btn-success[disabled]{color:#fff;background-color:#51a351;*background-color:#499249}.btn-success:active,.btn-success.active{background-color:#408140 \9}.btn-info{color:#fff;text-shadow:0 -1px 0 rgba(0,0,0,0.25);background-color:#49afcd;*background-color:#2f96b4;background-image:-moz-linear-gradient(top,#5bc0de,#2f96b4);background-image:-webkit-gradient(linear,0 0,0 100%,from(#5bc0de),to(#2f96b4));background-image:-webkit-linear-gradient(top,#5bc0de,#2f96b4);background-image:-o-linear-gradient(top,#5bc0de,#2f96b4);background-image:linear-gradient(to bottom,#5bc0de,#2f96b4);background-repeat:repeat-x;border-color:#2f96b4 #2f96b4 #1f6377;border-color:rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de',endColorstr='#ff2f96b4',GradientType=0);filter:progid:DXImageTransform.Microsoft.gradient(enabled=false)}.btn-info:hover,.btn-info:focus,.btn-info:active,.btn-info.active,.btn-info.disabled,.btn-info[disabled]{color:#fff;background-color:#2f96b4;*background-color:#2a85a0}.btn-info:active,.btn-info.active{background-color:#24748c \9}.btn-inverse{color:#fff;text-shadow:0 -1px 0 rgba(0,0,0,0.25);background-color:#363636;*background-color:#222;background-image:-moz-linear-gradient(top,#444,#222);background-image:-webkit-gradient(linear,0 0,0 100%,from(#444),to(#222));background-image:-webkit-linear-gradient(top,#444,#222);background-image:-o-linear-gradient(top,#444,#222);background-image:linear-gradient(to bottom,#444,#222);background-repeat:repeat-x;border-color:#222 #222 #000;border-color:rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff444444',endColorstr='#ff222222',GradientType=0);filter:progid:DXImageTransform.Microsoft.gradient(enabled=false)}.btn-inverse:hover,.btn-inverse:focus,.btn-inverse:active,.btn-inverse.active,.btn-inverse.disabled,.btn-inverse[disabled]{color:#fff;background-color:#222;*background-color:#151515}.btn-inverse:active,.btn-inverse.active{background-color:#080808 \9}button.btn,input[type="submit"].btn{*padding-top:3px;*padding-bottom:3px}button.btn::-moz-focus-inner,input[type="submit"].btn::-moz-focus-inner{padding:0;border:0}button.btn.btn-large,input[type="submit"].btn.btn-large{*padding-top:7px;*padding-bottom:7px}button.btn.btn-small,input[type="submit"].btn.btn-small{*padding-top:3px;*padding-bottom:3px}button.btn.btn-mini,input[type="submit"].btn.btn-mini{*padding-top:1px;*padding-bottom:1px}.btn-link,.btn-link:active,.btn-link[disabled]{background-color:transparent;background-image:none;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.btn-link{color:#08c;cursor:pointer;border-color:transparent;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0}.btn-link:hover,.btn-link:focus{color:#005580;text-decoration:underline;background-color:transparent}.btn-link[disabled]:hover,.btn-link[disabled]:focus{color:#333;text-decoration:none}.btn-group{position:relative;display:inline-block;*display:inline;*margin-left:.3em;font-size:0;white-space:nowrap;vertical-align:middle;*zoom:1}.btn-group:first-child{*margin-left:0}.btn-group+.btn-group{margin-left:5px}.btn-toolbar{margin-top:10px;margin-bottom:10px;font-size:0}.btn-toolbar>.btn+.btn,.btn-toolbar>.btn-group+.btn,.btn-toolbar>.btn+.btn-group{margin-left:5px}.btn-group>.btn{position:relative;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0}.btn-group>.btn+.btn{margin-left:-1px}.btn-group>.btn,.btn-group>.dropdown-menu,.btn-group>.popover{font-size:14px}.btn-group>.btn-mini{font-size:10.5px}.btn-group>.btn-small{font-size:11.9px}.btn-group>.btn-large{font-size:17.5px}.btn-group>.btn:first-child{margin-left:0;-webkit-border-bottom-left-radius:4px;border-bottom-left-radius:4px;-webkit-border-top-left-radius:4px;border-top-left-radius:4px;-moz-border-radius-bottomleft:4px;-moz-border-radius-topleft:4px}.btn-group>.btn:last-child,.btn-group>.dropdown-toggle{-webkit-border-top-right-radius:4px;border-top-right-radius:4px;-webkit-border-bottom-right-radius:4px;border-bottom-right-radius:4px;-moz-border-radius-topright:4px;-moz-border-radius-bottomright:4px}.btn-group>.btn.large:first-child{margin-left:0;-webkit-border-bottom-left-radius:6px;border-bottom-left-radius:6px;-webkit-border-top-left-radius:6px;border-top-left-radius:6px;-moz-border-radius-bottomleft:6px;-moz-border-radius-topleft:6px}.btn-group>.btn.large:last-child,.btn-group>.large.dropdown-toggle{-webkit-border-top-right-radius:6px;border-top-right-radius:6px;-webkit-border-bottom-right-radius:6px;border-bottom-right-radius:6px;-moz-border-radius-topright:6px;-moz-border-radius-bottomright:6px}.btn-group>.btn:hover,.btn-group>.btn:focus,.btn-group>.btn:active,.btn-group>.btn.active{z-index:2}.btn-group .dropdown-toggle:active,.btn-group.open .dropdown-toggle{outline:0}.btn-group>.btn+.dropdown-toggle{*padding-top:5px;padding-right:8px;*padding-bottom:5px;padding-left:8px;-webkit-box-shadow:inset 1px 0 0 rgba(255,255,255,0.125),inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);-moz-box-shadow:inset 1px 0 0 rgba(255,255,255,0.125),inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);box-shadow:inset 1px 0 0 rgba(255,255,255,0.125),inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05)}.btn-group>.btn-mini+.dropdown-toggle{*padding-top:2px;padding-right:5px;*padding-bottom:2px;padding-left:5px}.btn-group>.btn-small+.dropdown-toggle{*padding-top:5px;*padding-bottom:4px}.btn-group>.btn-large+.dropdown-toggle{*padding-top:7px;padding-right:12px;*padding-bottom:7px;padding-left:12px}.btn-group.open .dropdown-toggle{background-image:none;-webkit-box-shadow:inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);-moz-box-shadow:inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);box-shadow:inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05)}.btn-group.open .btn.dropdown-toggle{background-color:#e6e6e6}.btn-group.open .btn-primary.dropdown-toggle{background-color:#04c}.btn-group.open .btn-warning.dropdown-toggle{background-color:#f89406}.btn-group.open .btn-danger.dropdown-toggle{background-color:#bd362f}.btn-group.open .btn-success.dropdown-toggle{background-color:#51a351}.btn-group.open .btn-info.dropdown-toggle{background-color:#2f96b4}.btn-group.open .btn-inverse.dropdown-toggle{background-color:#222}.btn .caret{margin-top:8px;margin-left:0}.btn-large .caret{margin-top:6px}.btn-large .caret{border-top-width:5px;border-right-width:5px;border-left-width:5px}.btn-mini .caret,.btn-small .caret{margin-top:8px}.dropup .btn-large .caret{border-bottom-width:5px}.btn-primary .caret,.btn-warning .caret,.btn-danger .caret,.btn-info .caret,.btn-success .caret,.btn-inverse .caret{border-top-color:#fff;border-bottom-color:#fff}.btn-group-vertical{display:inline-block;*display:inline;*zoom:1}.btn-group-vertical>.btn{display:block;float:none;max-width:100%;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0}.btn-group-vertical>.btn+.btn{margin-top:-1px;margin-left:0}.btn-group-vertical>.btn:first-child{-webkit-border-radius:4px 4px 0 0;-moz-border-radius:4px 4px 0 0;border-radius:4px 4px 0 0}.btn-group-vertical>.btn:last-child{-webkit-border-radius:0 0 4px 4px;-moz-border-radius:0 0 4px 4px;border-radius:0 0 4px 4px}.btn-group-vertical>.btn-large:first-child{-webkit-border-radius:6px 6px 0 0;-moz-border-radius:6px 6px 0 0;border-radius:6px 6px 0 0}.btn-group-vertical>.btn-large:last-child{-webkit-border-radius:0 0 6px 6px;-moz-border-radius:0 0 6px 6px;border-radius:0 0 6px 6px}.alert{padding:8px 35px 8px 14px;margin-bottom:20px;text-shadow:0 1px 0 rgba(255,255,255,0.5);background-color:#fcf8e3;border:1px solid #fbeed5;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px}.alert,.alert h4{color:#c09853}.alert h4{margin:0}.alert .close{position:relative;top:-2px;right:-21px;line-height:20px}.alert-success{color:#468847;background-color:#dff0d8;border-color:#d6e9c6}.alert-success h4{color:#468847}.alert-danger,.alert-error{color:#b94a48;background-color:#f2dede;border-color:#eed3d7}.alert-danger h4,.alert-error h4{color:#b94a48}.alert-info{color:#3a87ad;background-color:#d9edf7;border-color:#bce8f1}.alert-info h4{color:#3a87ad}.alert-block{padding-top:14px;padding-bottom:14px}.alert-block>p,.alert-block>ul{margin-bottom:0}.alert-block p+p{margin-top:5px}.nav{margin-bottom:20px;margin-left:0;list-style:none}.nav>li>a{display:block}.nav>li>a:hover,.nav>li>a:focus{text-decoration:none;background-color:#eee}.nav>li>a>img{max-width:none}.nav>.pull-right{float:right}.nav-header{display:block;padding:3px 15px;font-size:11px;font-weight:bold;line-height:20px;color:#999;text-shadow:0 1px 0 rgba(255,255,255,0.5);text-transform:uppercase}.nav li+.nav-header{margin-top:9px}.nav-list{padding-right:15px;padding-left:15px;margin-bottom:0}.nav-list>li>a,.nav-list .nav-header{margin-right:-15px;margin-left:-15px;text-shadow:0 1px 0 rgba(255,255,255,0.5)}.nav-list>li>a{padding:3px 15px}.nav-list>.active>a,.nav-list>.active>a:hover,.nav-list>.active>a:focus{color:#fff;text-shadow:0 -1px 0 rgba(0,0,0,0.2);background-color:#08c}.nav-list [class^="icon-"],.nav-list [class*=" icon-"]{margin-right:2px}.nav-list .divider{*width:100%;height:1px;margin:9px 1px;*margin:-5px 0 5px;overflow:hidden;background-color:#e5e5e5;border-bottom:1px solid #fff}.nav-tabs,.nav-pills{*zoom:1}.nav-tabs:before,.nav-pills:before,.nav-tabs:after,.nav-pills:after{display:table;line-height:0;content:""}.nav-tabs:after,.nav-pills:after{clear:both}.nav-tabs>li,.nav-pills>li{float:left}.nav-tabs>li>a,.nav-pills>li>a{padding-right:12px;padding-left:12px;margin-right:2px;line-height:14px}.nav-tabs{border-bottom:1px solid #ddd}.nav-tabs>li{margin-bottom:-1px}.nav-tabs>li>a{padding-top:8px;padding-bottom:8px;line-height:20px;border:1px solid transparent;-webkit-border-radius:4px 4px 0 0;-moz-border-radius:4px 4px 0 0;border-radius:4px 4px 0 0}.nav-tabs>li>a:hover,.nav-tabs>li>a:focus{border-color:#eee #eee #ddd}.nav-tabs>.active>a,.nav-tabs>.active>a:hover,.nav-tabs>.active>a:focus{color:#555;cursor:default;background-color:#fff;border:1px solid #ddd;border-bottom-color:transparent}.nav-pills>li>a{padding-top:8px;padding-bottom:8px;margin-top:2px;margin-bottom:2px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px}.nav-pills>.active>a,.nav-pills>.active>a:hover,.nav-pills>.active>a:focus{color:#fff;background-color:#08c}.nav-stacked>li{float:none}.nav-stacked>li>a{margin-right:0}.nav-tabs.nav-stacked{border-bottom:0}.nav-tabs.nav-stacked>li>a{border:1px solid #ddd;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0}.nav-tabs.nav-stacked>li:first-child>a{-webkit-border-top-right-radius:4px;border-top-right-radius:4px;-webkit-border-top-left-radius:4px;border-top-left-radius:4px;-moz-border-radius-topright:4px;-moz-border-radius-topleft:4px}.nav-tabs.nav-stacked>li:last-child>a{-webkit-border-bottom-right-radius:4px;border-bottom-right-radius:4px;-webkit-border-bottom-left-radius:4px;border-bottom-left-radius:4px;-moz-border-radius-bottomright:4px;-moz-border-radius-bottomleft:4px}.nav-tabs.nav-stacked>li>a:hover,.nav-tabs.nav-stacked>li>a:focus{z-index:2;border-color:#ddd}.nav-pills.nav-stacked>li>a{margin-bottom:3px}.nav-pills.nav-stacked>li:last-child>a{margin-bottom:1px}.nav-tabs .dropdown-menu{-webkit-border-radius:0 0 6px 6px;-moz-border-radius:0 0 6px 6px;border-radius:0 0 6px 6px}.nav-pills .dropdown-menu{-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px}.nav .dropdown-toggle .caret{margin-top:6px;border-top-color:#08c;border-bottom-color:#08c}.nav .dropdown-toggle:hover .caret,.nav .dropdown-toggle:focus .caret{border-top-color:#005580;border-bottom-color:#005580}.nav-tabs .dropdown-toggle .caret{margin-top:8px}.nav .active .dropdown-toggle .caret{border-top-color:#fff;border-bottom-color:#fff}.nav-tabs .active .dropdown-toggle .caret{border-top-color:#555;border-bottom-color:#555}.nav>.dropdown.active>a:hover,.nav>.dropdown.active>a:focus{cursor:pointer}.nav-tabs .open .dropdown-toggle,.nav-pills .open .dropdown-toggle,.nav>li.dropdown.open.active>a:hover,.nav>li.dropdown.open.active>a:focus{color:#fff;background-color:#999;border-color:#999}.nav li.dropdown.open .caret,.nav li.dropdown.open.active .caret,.nav li.dropdown.open a:hover .caret,.nav li.dropdown.open a:focus .caret{border-top-color:#fff;border-bottom-color:#fff;opacity:1;filter:alpha(opacity=100)}.tabs-stacked .open>a:hover,.tabs-stacked .open>a:focus{border-color:#999}.tabbable{*zoom:1}.tabbable:before,.tabbable:after{display:table;line-height:0;content:""}.tabbable:after{clear:both}.tab-content{overflow:auto}.tabs-below>.nav-tabs,.tabs-right>.nav-tabs,.tabs-left>.nav-tabs{border-bottom:0}.tab-content>.tab-pane,.pill-content>.pill-pane{display:none}.tab-content>.active,.pill-content>.active{display:block}.tabs-below>.nav-tabs{border-top:1px solid #ddd}.tabs-below>.nav-tabs>li{margin-top:-1px;margin-bottom:0}.tabs-below>.nav-tabs>li>a{-webkit-border-radius:0 0 4px 4px;-moz-border-radius:0 0 4px 4px;border-radius:0 0 4px 4px}.tabs-below>.nav-tabs>li>a:hover,.tabs-below>.nav-tabs>li>a:focus{border-top-color:#ddd;border-bottom-color:transparent}.tabs-below>.nav-tabs>.active>a,.tabs-below>.nav-tabs>.active>a:hover,.tabs-below>.nav-tabs>.active>a:focus{border-color:transparent #ddd #ddd #ddd}.tabs-left>.nav-tabs>li,.tabs-right>.nav-tabs>li{float:none}.tabs-left>.nav-tabs>li>a,.tabs-right>.nav-tabs>li>a{min-width:74px;margin-right:0;margin-bottom:3px}.tabs-left>.nav-tabs{float:left;margin-right:19px;border-right:1px solid #ddd}.tabs-left>.nav-tabs>li>a{margin-right:-1px;-webkit-border-radius:4px 0 0 4px;-moz-border-radius:4px 0 0 4px;border-radius:4px 0 0 4px}.tabs-left>.nav-tabs>li>a:hover,.tabs-left>.nav-tabs>li>a:focus{border-color:#eee #ddd #eee #eee}.tabs-left>.nav-tabs .active>a,.tabs-left>.nav-tabs .active>a:hover,.tabs-left>.nav-tabs .active>a:focus{border-color:#ddd transparent #ddd #ddd;*border-right-color:#fff}.tabs-right>.nav-tabs{float:right;margin-left:19px;border-left:1px solid #ddd}.tabs-right>.nav-tabs>li>a{margin-left:-1px;-webkit-border-radius:0 4px 4px 0;-moz-border-radius:0 4px 4px 0;border-radius:0 4px 4px 0}.tabs-right>.nav-tabs>li>a:hover,.tabs-right>.nav-tabs>li>a:focus{border-color:#eee #eee #eee #ddd}.tabs-right>.nav-tabs .active>a,.tabs-right>.nav-tabs .active>a:hover,.tabs-right>.nav-tabs .active>a:focus{border-color:#ddd #ddd #ddd transparent;*border-left-color:#fff}.nav>.disabled>a{color:#999}.nav>.disabled>a:hover,.nav>.disabled>a:focus{text-decoration:none;cursor:default;background-color:transparent}.navbar{*position:relative;*z-index:2;margin-bottom:20px;overflow:visible}.navbar-inner{min-height:40px;padding-right:20px;padding-left:20px;background-color:#fafafa;background-image:-moz-linear-gradient(top,#fff,#f2f2f2);background-image:-webkit-gradient(linear,0 0,0 100%,from(#fff),to(#f2f2f2));background-image:-webkit-linear-gradient(top,#fff,#f2f2f2);background-image:-o-linear-gradient(top,#fff,#f2f2f2);background-image:linear-gradient(to bottom,#fff,#f2f2f2);background-repeat:repeat-x;border:1px solid #d4d4d4;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff',endColorstr='#fff2f2f2',GradientType=0);*zoom:1;-webkit-box-shadow:0 1px 4px rgba(0,0,0,0.065);-moz-box-shadow:0 1px 4px rgba(0,0,0,0.065);box-shadow:0 1px 4px rgba(0,0,0,0.065)}.navbar-inner:before,.navbar-inner:after{display:table;line-height:0;content:""}.navbar-inner:after{clear:both}.navbar .container{width:auto}.nav-collapse.collapse{height:auto;overflow:visible}.navbar .brand{display:block;float:left;padding:10px 20px 10px;margin-left:-20px;font-size:20px;font-weight:200;color:#777;text-shadow:0 1px 0 #fff}.navbar .brand:hover,.navbar .brand:focus{text-decoration:none}.navbar-text{margin-bottom:0;line-height:40px;color:#777}.navbar-link{color:#777}.navbar-link:hover,.navbar-link:focus{color:#333}.navbar .divider-vertical{height:40px;margin:0 9px;border-right:1px solid #fff;border-left:1px solid #f2f2f2}.navbar .btn,.navbar .btn-group{margin-top:5px}.navbar .btn-group .btn,.navbar .input-prepend .btn,.navbar .input-append .btn,.navbar .input-prepend .btn-group,.navbar .input-append .btn-group{margin-top:0}.navbar-form{margin-bottom:0;*zoom:1}.navbar-form:before,.navbar-form:after{display:table;line-height:0;content:""}.navbar-form:after{clear:both}.navbar-form input,.navbar-form select,.navbar-form .radio,.navbar-form .checkbox{margin-top:5px}.navbar-form input,.navbar-form select,.navbar-form .btn{display:inline-block;margin-bottom:0}.navbar-form input[type="image"],.navbar-form input[type="checkbox"],.navbar-form input[type="radio"]{margin-top:3px}.navbar-form .input-append,.navbar-form .input-prepend{margin-top:5px;white-space:nowrap}.navbar-form .input-append input,.navbar-form .input-prepend input{margin-top:0}.navbar-search{position:relative;float:left;margin-top:5px;margin-bottom:0}.navbar-search .search-query{padding:4px 14px;margin-bottom:0;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:13px;font-weight:normal;line-height:1;-webkit-border-radius:15px;-moz-border-radius:15px;border-radius:15px}.navbar-static-top{position:static;margin-bottom:0}.navbar-static-top .navbar-inner{-webkit-border-radius:0;-moz-border-radius:0;border-radius:0}.navbar-fixed-top,.navbar-fixed-bottom{position:fixed;right:0;left:0;z-index:1030;margin-bottom:0}.navbar-fixed-top .navbar-inner,.navbar-static-top .navbar-inner{border-width:0 0 1px}.navbar-fixed-bottom .navbar-inner{border-width:1px 0 0}.navbar-fixed-top .navbar-inner,.navbar-fixed-bottom .navbar-inner{padding-right:0;padding-left:0;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0}.navbar-static-top .container,.navbar-fixed-top .container,.navbar-fixed-bottom .container{width:940px}.navbar-fixed-top{top:0}.navbar-fixed-top .navbar-inner,.navbar-static-top .navbar-inner{-webkit-box-shadow:0 1px 10px rgba(0,0,0,0.1);-moz-box-shadow:0 1px 10px rgba(0,0,0,0.1);box-shadow:0 1px 10px rgba(0,0,0,0.1)}.navbar-fixed-bottom{bottom:0}.navbar-fixed-bottom .navbar-inner{-webkit-box-shadow:0 -1px 10px rgba(0,0,0,0.1);-moz-box-shadow:0 -1px 10px rgba(0,0,0,0.1);box-shadow:0 -1px 10px rgba(0,0,0,0.1)}.navbar .nav{position:relative;left:0;display:block;float:left;margin:0 10px 0 0}.navbar .nav.pull-right{float:right;margin-right:0}.navbar .nav>li{float:left}.navbar .nav>li>a{float:none;padding:10px 15px 10px;color:#777;text-decoration:none;text-shadow:0 1px 0 #fff}.navbar .nav .dropdown-toggle .caret{margin-top:8px}.navbar .nav>li>a:focus,.navbar .nav>li>a:hover{color:#333;text-decoration:none;background-color:transparent}.navbar .nav>.active>a,.navbar .nav>.active>a:hover,.navbar .nav>.active>a:focus{color:#555;text-decoration:none;background-color:#e5e5e5;-webkit-box-shadow:inset 0 3px 8px rgba(0,0,0,0.125);-moz-box-shadow:inset 0 3px 8px rgba(0,0,0,0.125);box-shadow:inset 0 3px 8px rgba(0,0,0,0.125)}.navbar .btn-navbar{display:none;float:right;padding:7px 10px;margin-right:5px;margin-left:5px;color:#fff;text-shadow:0 -1px 0 rgba(0,0,0,0.25);background-color:#ededed;*background-color:#e5e5e5;background-image:-moz-linear-gradient(top,#f2f2f2,#e5e5e5);background-image:-webkit-gradient(linear,0 0,0 100%,from(#f2f2f2),to(#e5e5e5));background-image:-webkit-linear-gradient(top,#f2f2f2,#e5e5e5);background-image:-o-linear-gradient(top,#f2f2f2,#e5e5e5);background-image:linear-gradient(to bottom,#f2f2f2,#e5e5e5);background-repeat:repeat-x;border-color:#e5e5e5 #e5e5e5 #bfbfbf;border-color:rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff2f2f2',endColorstr='#ffe5e5e5',GradientType=0);filter:progid:DXImageTransform.Microsoft.gradient(enabled=false);-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,0.1),0 1px 0 rgba(255,255,255,0.075);-moz-box-shadow:inset 0 1px 0 rgba(255,255,255,0.1),0 1px 0 rgba(255,255,255,0.075);box-shadow:inset 0 1px 0 rgba(255,255,255,0.1),0 1px 0 rgba(255,255,255,0.075)}.navbar .btn-navbar:hover,.navbar .btn-navbar:focus,.navbar .btn-navbar:active,.navbar .btn-navbar.active,.navbar .btn-navbar.disabled,.navbar .btn-navbar[disabled]{color:#fff;background-color:#e5e5e5;*background-color:#d9d9d9}.navbar .btn-navbar:active,.navbar .btn-navbar.active{background-color:#ccc \9}.navbar .btn-navbar .icon-bar{display:block;width:18px;height:2px;background-color:#f5f5f5;-webkit-border-radius:1px;-moz-border-radius:1px;border-radius:1px;-webkit-box-shadow:0 1px 0 rgba(0,0,0,0.25);-moz-box-shadow:0 1px 0 rgba(0,0,0,0.25);box-shadow:0 1px 0 rgba(0,0,0,0.25)}.btn-navbar .icon-bar+.icon-bar{margin-top:3px}.navbar .nav>li>.dropdown-menu:before{position:absolute;top:-7px;left:9px;display:inline-block;border-right:7px solid transparent;border-bottom:7px solid #ccc;border-left:7px solid transparent;border-bottom-color:rgba(0,0,0,0.2);content:''}.navbar .nav>li>.dropdown-menu:after{position:absolute;top:-6px;left:10px;display:inline-block;border-right:6px solid transparent;border-bottom:6px solid #fff;border-left:6px solid transparent;content:''}.navbar-fixed-bottom .nav>li>.dropdown-menu:before{top:auto;bottom:-7px;border-top:7px solid #ccc;border-bottom:0;border-top-color:rgba(0,0,0,0.2)}.navbar-fixed-bottom .nav>li>.dropdown-menu:after{top:auto;bottom:-6px;border-top:6px solid #fff;border-bottom:0}.navbar .nav li.dropdown>a:hover .caret,.navbar .nav li.dropdown>a:focus .caret{border-top-color:#333;border-bottom-color:#333}.navbar .nav li.dropdown.open>.dropdown-toggle,.navbar .nav li.dropdown.active>.dropdown-toggle,.navbar .nav li.dropdown.open.active>.dropdown-toggle{color:#555;background-color:#e5e5e5}.navbar .nav li.dropdown>.dropdown-toggle .caret{border-top-color:#777;border-bottom-color:#777}.navbar .nav li.dropdown.open>.dropdown-toggle .caret,.navbar .nav li.dropdown.active>.dropdown-toggle .caret,.navbar .nav li.dropdown.open.active>.dropdown-toggle .caret{border-top-color:#555;border-bottom-color:#555}.navbar .pull-right>li>.dropdown-menu,.navbar .nav>li>.dropdown-menu.pull-right{right:0;left:auto}.navbar .pull-right>li>.dropdown-menu:before,.navbar .nav>li>.dropdown-menu.pull-right:before{right:12px;left:auto}.navbar .pull-right>li>.dropdown-menu:after,.navbar .nav>li>.dropdown-menu.pull-right:after{right:13px;left:auto}.navbar .pull-right>li>.dropdown-menu .dropdown-menu,.navbar .nav>li>.dropdown-menu.pull-right .dropdown-menu{right:100%;left:auto;margin-right:-1px;margin-left:0;-webkit-border-radius:6px 0 6px 6px;-moz-border-radius:6px 0 6px 6px;border-radius:6px 0 6px 6px}.navbar-inverse .navbar-inner{background-color:#1b1b1b;background-image:-moz-linear-gradient(top,#222,#111);background-image:-webkit-gradient(linear,0 0,0 100%,from(#222),to(#111));background-image:-webkit-linear-gradient(top,#222,#111);background-image:-o-linear-gradient(top,#222,#111);background-image:linear-gradient(to bottom,#222,#111);background-repeat:repeat-x;border-color:#252525;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff222222',endColorstr='#ff111111',GradientType=0)}.navbar-inverse .brand,.navbar-inverse .nav>li>a{color:#999;text-shadow:0 -1px 0 rgba(0,0,0,0.25)}.navbar-inverse .brand:hover,.navbar-inverse .nav>li>a:hover,.navbar-inverse .brand:focus,.navbar-inverse .nav>li>a:focus{color:#fff}.navbar-inverse .brand{color:#999}.navbar-inverse .navbar-text{color:#999}.navbar-inverse .nav>li>a:focus,.navbar-inverse .nav>li>a:hover{color:#fff;background-color:transparent}.navbar-inverse .nav .active>a,.navbar-inverse .nav .active>a:hover,.navbar-inverse .nav .active>a:focus{color:#fff;background-color:#111}.navbar-inverse .navbar-link{color:#999}.navbar-inverse .navbar-link:hover,.navbar-inverse .navbar-link:focus{color:#fff}.navbar-inverse .divider-vertical{border-right-color:#222;border-left-color:#111}.navbar-inverse .nav li.dropdown.open>.dropdown-toggle,.navbar-inverse .nav li.dropdown.active>.dropdown-toggle,.navbar-inverse .nav li.dropdown.open.active>.dropdown-toggle{color:#fff;background-color:#111}.navbar-inverse .nav li.dropdown>a:hover .caret,.navbar-inverse .nav li.dropdown>a:focus .caret{border-top-color:#fff;border-bottom-color:#fff}.navbar-inverse .nav li.dropdown>.dropdown-toggle .caret{border-top-color:#999;border-bottom-color:#999}.navbar-inverse .nav li.dropdown.open>.dropdown-toggle .caret,.navbar-inverse .nav li.dropdown.active>.dropdown-toggle .caret,.navbar-inverse .nav li.dropdown.open.active>.dropdown-toggle .caret{border-top-color:#fff;border-bottom-color:#fff}.navbar-inverse .navbar-search .search-query{color:#fff;background-color:#515151;border-color:#111;-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,0.1),0 1px 0 rgba(255,255,255,0.15);-moz-box-shadow:inset 0 1px 2px rgba(0,0,0,0.1),0 1px 0 rgba(255,255,255,0.15);box-shadow:inset 0 1px 2px rgba(0,0,0,0.1),0 1px 0 rgba(255,255,255,0.15);-webkit-transition:none;-moz-transition:none;-o-transition:none;transition:none}.navbar-inverse .navbar-search .search-query:-moz-placeholder{color:#ccc}.navbar-inverse .navbar-search .search-query:-ms-input-placeholder{color:#ccc}.navbar-inverse .navbar-search .search-query::-webkit-input-placeholder{color:#ccc}.navbar-inverse .navbar-search .search-query:focus,.navbar-inverse .navbar-search .search-query.focused{padding:5px 15px;color:#333;text-shadow:0 1px 0 #fff;background-color:#fff;border:0;outline:0;-webkit-box-shadow:0 0 3px rgba(0,0,0,0.15);-moz-box-shadow:0 0 3px rgba(0,0,0,0.15);box-shadow:0 0 3px rgba(0,0,0,0.15)}.navbar-inverse .btn-navbar{color:#fff;text-shadow:0 -1px 0 rgba(0,0,0,0.25);background-color:#0e0e0e;*background-color:#040404;background-image:-moz-linear-gradient(top,#151515,#040404);background-image:-webkit-gradient(linear,0 0,0 100%,from(#151515),to(#040404));background-image:-webkit-linear-gradient(top,#151515,#040404);background-image:-o-linear-gradient(top,#151515,#040404);background-image:linear-gradient(to bottom,#151515,#040404);background-repeat:repeat-x;border-color:#040404 #040404 #000;border-color:rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff151515',endColorstr='#ff040404',GradientType=0);filter:progid:DXImageTransform.Microsoft.gradient(enabled=false)}.navbar-inverse .btn-navbar:hover,.navbar-inverse .btn-navbar:focus,.navbar-inverse .btn-navbar:active,.navbar-inverse .btn-navbar.active,.navbar-inverse .btn-navbar.disabled,.navbar-inverse .btn-navbar[disabled]{color:#fff;background-color:#040404;*background-color:#000}.navbar-inverse .btn-navbar:active,.navbar-inverse .btn-navbar.active{background-color:#000 \9}.breadcrumb{padding:8px 15px;margin:0 0 20px;list-style:none;background-color:#f5f5f5;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px}.breadcrumb>li{display:inline-block;*display:inline;text-shadow:0 1px 0 #fff;*zoom:1}.breadcrumb>li>.divider{padding:0 5px;color:#ccc}.breadcrumb>.active{color:#999}.pagination{margin:20px 0}.pagination ul{display:inline-block;*display:inline;margin-bottom:0;margin-left:0;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;*zoom:1;-webkit-box-shadow:0 1px 2px rgba(0,0,0,0.05);-moz-box-shadow:0 1px 2px rgba(0,0,0,0.05);box-shadow:0 1px 2px rgba(0,0,0,0.05)}.pagination ul>li{display:inline}.pagination ul>li>a,.pagination ul>li>span{float:left;padding:4px 12px;line-height:20px;text-decoration:none;background-color:#fff;border:1px solid #ddd;border-left-width:0}.pagination ul>li>a:hover,.pagination ul>li>a:focus,.pagination ul>.active>a,.pagination ul>.active>span{background-color:#f5f5f5}.pagination ul>.active>a,.pagination ul>.active>span{color:#999;cursor:default}.pagination ul>.disabled>span,.pagination ul>.disabled>a,.pagination ul>.disabled>a:hover,.pagination ul>.disabled>a:focus{color:#999;cursor:default;background-color:transparent}.pagination ul>li:first-child>a,.pagination ul>li:first-child>span{border-left-width:1px;-webkit-border-bottom-left-radius:4px;border-bottom-left-radius:4px;-webkit-border-top-left-radius:4px;border-top-left-radius:4px;-moz-border-radius-bottomleft:4px;-moz-border-radius-topleft:4px}.pagination ul>li:last-child>a,.pagination ul>li:last-child>span{-webkit-border-top-right-radius:4px;border-top-right-radius:4px;-webkit-border-bottom-right-radius:4px;border-bottom-right-radius:4px;-moz-border-radius-topright:4px;-moz-border-radius-bottomright:4px}.pagination-centered{text-align:center}.pagination-right{text-align:right}.pagination-large ul>li>a,.pagination-large ul>li>span{padding:11px 19px;font-size:17.5px}.pagination-large ul>li:first-child>a,.pagination-large ul>li:first-child>span{-webkit-border-bottom-left-radius:6px;border-bottom-left-radius:6px;-webkit-border-top-left-radius:6px;border-top-left-radius:6px;-moz-border-radius-bottomleft:6px;-moz-border-radius-topleft:6px}.pagination-large ul>li:last-child>a,.pagination-large ul>li:last-child>span{-webkit-border-top-right-radius:6px;border-top-right-radius:6px;-webkit-border-bottom-right-radius:6px;border-bottom-right-radius:6px;-moz-border-radius-topright:6px;-moz-border-radius-bottomright:6px}.pagination-mini ul>li:first-child>a,.pagination-small ul>li:first-child>a,.pagination-mini ul>li:first-child>span,.pagination-small ul>li:first-child>span{-webkit-border-bottom-left-radius:3px;border-bottom-left-radius:3px;-webkit-border-top-left-radius:3px;border-top-left-radius:3px;-moz-border-radius-bottomleft:3px;-moz-border-radius-topleft:3px}.pagination-mini ul>li:last-child>a,.pagination-small ul>li:last-child>a,.pagination-mini ul>li:last-child>span,.pagination-small ul>li:last-child>span{-webkit-border-top-right-radius:3px;border-top-right-radius:3px;-webkit-border-bottom-right-radius:3px;border-bottom-right-radius:3px;-moz-border-radius-topright:3px;-moz-border-radius-bottomright:3px}.pagination-small ul>li>a,.pagination-small ul>li>span{padding:2px 10px;font-size:11.9px}.pagination-mini ul>li>a,.pagination-mini ul>li>span{padding:0 6px;font-size:10.5px}.pager{margin:20px 0;text-align:center;list-style:none;*zoom:1}.pager:before,.pager:after{display:table;line-height:0;content:""}.pager:after{clear:both}.pager li{display:inline}.pager li>a,.pager li>span{display:inline-block;padding:5px 14px;background-color:#fff;border:1px solid #ddd;-webkit-border-radius:15px;-moz-border-radius:15px;border-radius:15px}.pager li>a:hover,.pager li>a:focus{text-decoration:none;background-color:#f5f5f5}.pager .next>a,.pager .next>span{float:right}.pager .previous>a,.pager .previous>span{float:left}.pager .disabled>a,.pager .disabled>a:hover,.pager .disabled>a:focus,.pager .disabled>span{color:#999;cursor:default;background-color:#fff}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1040;background-color:#000}.modal-backdrop.fade{opacity:0}.modal-backdrop,.modal-backdrop.fade.in{opacity:.8;filter:alpha(opacity=80)}.modal{position:fixed;top:10%;left:50%;z-index:1050;width:560px;margin-left:-280px;background-color:#fff;border:1px solid #999;border:1px solid rgba(0,0,0,0.3);*border:1px solid #999;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;outline:0;-webkit-box-shadow:0 3px 7px rgba(0,0,0,0.3);-moz-box-shadow:0 3px 7px rgba(0,0,0,0.3);box-shadow:0 3px 7px rgba(0,0,0,0.3);-webkit-background-clip:padding-box;-moz-background-clip:padding-box;background-clip:padding-box}.modal.fade{top:-25%;-webkit-transition:opacity .3s linear,top .3s ease-out;-moz-transition:opacity .3s linear,top .3s ease-out;-o-transition:opacity .3s linear,top .3s ease-out;transition:opacity .3s linear,top .3s ease-out}.modal.fade.in{top:10%}.modal-header{padding:9px 15px;border-bottom:1px solid #eee}.modal-header .close{margin-top:2px}.modal-header h3{margin:0;line-height:30px}.modal-body{position:relative;max-height:400px;padding:15px;overflow-y:auto}.modal-form{margin-bottom:0}.modal-footer{padding:14px 15px 15px;margin-bottom:0;text-align:right;background-color:#f5f5f5;border-top:1px solid #ddd;-webkit-border-radius:0 0 6px 6px;-moz-border-radius:0 0 6px 6px;border-radius:0 0 6px 6px;*zoom:1;-webkit-box-shadow:inset 0 1px 0 #fff;-moz-box-shadow:inset 0 1px 0 #fff;box-shadow:inset 0 1px 0 #fff}.modal-footer:before,.modal-footer:after{display:table;line-height:0;content:""}.modal-footer:after{clear:both}.modal-footer .btn+.btn{margin-bottom:0;margin-left:5px}.modal-footer .btn-group .btn+.btn{margin-left:-1px}.modal-footer .btn-block+.btn-block{margin-left:0}.tooltip{position:absolute;z-index:1030;display:block;font-size:11px;line-height:1.4;opacity:0;filter:alpha(opacity=0);visibility:visible}.tooltip.in{opacity:.8;filter:alpha(opacity=80)}.tooltip.top{padding:5px 0;margin-top:-3px}.tooltip.right{padding:0 5px;margin-left:3px}.tooltip.bottom{padding:5px 0;margin-top:3px}.tooltip.left{padding:0 5px;margin-left:-3px}.tooltip-inner{max-width:200px;padding:8px;color:#fff;text-align:center;text-decoration:none;background-color:#000;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px}.tooltip-arrow{position:absolute;width:0;height:0;border-color:transparent;border-style:solid}.tooltip.top .tooltip-arrow{bottom:0;left:50%;margin-left:-5px;border-top-color:#000;border-width:5px 5px 0}.tooltip.right .tooltip-arrow{top:50%;left:0;margin-top:-5px;border-right-color:#000;border-width:5px 5px 5px 0}.tooltip.left .tooltip-arrow{top:50%;right:0;margin-top:-5px;border-left-color:#000;border-width:5px 0 5px 5px}.tooltip.bottom .tooltip-arrow{top:0;left:50%;margin-left:-5px;border-bottom-color:#000;border-width:0 5px 5px}.popover{position:absolute;top:0;left:0;z-index:1010;display:none;max-width:276px;padding:1px;text-align:left;white-space:normal;background-color:#fff;border:1px solid #ccc;border:1px solid rgba(0,0,0,0.2);-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-shadow:0 5px 10px rgba(0,0,0,0.2);-moz-box-shadow:0 5px 10px rgba(0,0,0,0.2);box-shadow:0 5px 10px rgba(0,0,0,0.2);-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box}.popover.top{margin-top:-10px}.popover.right{margin-left:10px}.popover.bottom{margin-top:10px}.popover.left{margin-left:-10px}.popover-title{padding:8px 14px;margin:0;font-size:14px;font-weight:normal;line-height:18px;background-color:#f7f7f7;border-bottom:1px solid #ebebeb;-webkit-border-radius:5px 5px 0 0;-moz-border-radius:5px 5px 0 0;border-radius:5px 5px 0 0}.popover-title:empty{display:none}.popover-content{padding:9px 14px}.popover .arrow,.popover .arrow:after{position:absolute;display:block;width:0;height:0;border-color:transparent;border-style:solid}.popover .arrow{border-width:11px}.popover .arrow:after{border-width:10px;content:""}.popover.top .arrow{bottom:-11px;left:50%;margin-left:-11px;border-top-color:#999;border-top-color:rgba(0,0,0,0.25);border-bottom-width:0}.popover.top .arrow:after{bottom:1px;margin-left:-10px;border-top-color:#fff;border-bottom-width:0}.popover.right .arrow{top:50%;left:-11px;margin-top:-11px;border-right-color:#999;border-right-color:rgba(0,0,0,0.25);border-left-width:0}.popover.right .arrow:after{bottom:-10px;left:1px;border-right-color:#fff;border-left-width:0}.popover.bottom .arrow{top:-11px;left:50%;margin-left:-11px;border-bottom-color:#999;border-bottom-color:rgba(0,0,0,0.25);border-top-width:0}.popover.bottom .arrow:after{top:1px;margin-left:-10px;border-bottom-color:#fff;border-top-width:0}.popover.left .arrow{top:50%;right:-11px;margin-top:-11px;border-left-color:#999;border-left-color:rgba(0,0,0,0.25);border-right-width:0}.popover.left .arrow:after{right:1px;bottom:-10px;border-left-color:#fff;border-right-width:0}.thumbnails{margin-left:-20px;list-style:none;*zoom:1}.thumbnails:before,.thumbnails:after{display:table;line-height:0;content:""}.thumbnails:after{clear:both}.row-fluid .thumbnails{margin-left:0}.thumbnails>li{float:left;margin-bottom:20px;margin-left:20px}.thumbnail{display:block;padding:4px;line-height:20px;border:1px solid #ddd;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.055);-moz-box-shadow:0 1px 3px rgba(0,0,0,0.055);box-shadow:0 1px 3px rgba(0,0,0,0.055);-webkit-transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;transition:all .2s ease-in-out}a.thumbnail:hover,a.thumbnail:focus{border-color:#08c;-webkit-box-shadow:0 1px 4px rgba(0,105,214,0.25);-moz-box-shadow:0 1px 4px rgba(0,105,214,0.25);box-shadow:0 1px 4px rgba(0,105,214,0.25)}.thumbnail>img{display:block;max-width:100%;margin-right:auto;margin-left:auto}.thumbnail .caption{padding:9px;color:#555}.media,.media-body{overflow:hidden;*overflow:visible;zoom:1}.media,.media .media{margin-top:15px}.media:first-child{margin-top:0}.media-object{display:block}.media-heading{margin:0 0 5px}.media>.pull-left{margin-right:10px}.media>.pull-right{margin-left:10px}.media-list{margin-left:0;list-style:none}.label,.badge{display:inline-block;padding:2px 4px;font-size:11.844px;font-weight:bold;line-height:14px;color:#fff;text-shadow:0 -1px 0 rgba(0,0,0,0.25);white-space:nowrap;vertical-align:baseline;background-color:#999}.label{-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px}.badge{padding-right:9px;padding-left:9px;-webkit-border-radius:9px;-moz-border-radius:9px;border-radius:9px}.label:empty,.badge:empty{display:none}a.label:hover,a.label:focus,a.badge:hover,a.badge:focus{color:#fff;text-decoration:none;cursor:pointer}.label-important,.badge-important{background-color:#b94a48}.label-important[href],.badge-important[href]{background-color:#953b39}.label-warning,.badge-warning{background-color:#f89406}.label-warning[href],.badge-warning[href]{background-color:#c67605}.label-success,.badge-success{background-color:#468847}.label-success[href],.badge-success[href]{background-color:#356635}.label-info,.badge-info{background-color:#3a87ad}.label-info[href],.badge-info[href]{background-color:#2d6987}.label-inverse,.badge-inverse{background-color:#333}.label-inverse[href],.badge-inverse[href]{background-color:#1a1a1a}.btn .label,.btn .badge{position:relative;top:-1px}.btn-mini .label,.btn-mini .badge{top:0}@-webkit-keyframes progress-bar-stripes{from{background-position:40px 0}to{background-position:0 0}}@-moz-keyframes progress-bar-stripes{from{background-position:40px 0}to{background-position:0 0}}@-ms-keyframes progress-bar-stripes{from{background-position:40px 0}to{background-position:0 0}}@-o-keyframes progress-bar-stripes{from{background-position:0 0}to{background-position:40px 0}}@keyframes progress-bar-stripes{from{background-position:40px 0}to{background-position:0 0}}.progress{height:20px;margin-bottom:20px;overflow:hidden;background-color:#f7f7f7;background-image:-moz-linear-gradient(top,#f5f5f5,#f9f9f9);background-image:-webkit-gradient(linear,0 0,0 100%,from(#f5f5f5),to(#f9f9f9));background-image:-webkit-linear-gradient(top,#f5f5f5,#f9f9f9);background-image:-o-linear-gradient(top,#f5f5f5,#f9f9f9);background-image:linear-gradient(to bottom,#f5f5f5,#f9f9f9);background-repeat:repeat-x;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5',endColorstr='#fff9f9f9',GradientType=0);-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,0.1);-moz-box-shadow:inset 0 1px 2px rgba(0,0,0,0.1);box-shadow:inset 0 1px 2px rgba(0,0,0,0.1)}.progress .bar{float:left;width:0;height:100%;font-size:12px;color:#fff;text-align:center;text-shadow:0 -1px 0 rgba(0,0,0,0.25);background-color:#0e90d2;background-image:-moz-linear-gradient(top,#149bdf,#0480be);background-image:-webkit-gradient(linear,0 0,0 100%,from(#149bdf),to(#0480be));background-image:-webkit-linear-gradient(top,#149bdf,#0480be);background-image:-o-linear-gradient(top,#149bdf,#0480be);background-image:linear-gradient(to bottom,#149bdf,#0480be);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff149bdf',endColorstr='#ff0480be',GradientType=0);-webkit-box-shadow:inset 0 -1px 0 rgba(0,0,0,0.15);-moz-box-shadow:inset 0 -1px 0 rgba(0,0,0,0.15);box-shadow:inset 0 -1px 0 rgba(0,0,0,0.15);-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-transition:width .6s ease;-moz-transition:width .6s ease;-o-transition:width .6s ease;transition:width .6s ease}.progress .bar+.bar{-webkit-box-shadow:inset 1px 0 0 rgba(0,0,0,0.15),inset 0 -1px 0 rgba(0,0,0,0.15);-moz-box-shadow:inset 1px 0 0 rgba(0,0,0,0.15),inset 0 -1px 0 rgba(0,0,0,0.15);box-shadow:inset 1px 0 0 rgba(0,0,0,0.15),inset 0 -1px 0 rgba(0,0,0,0.15)}.progress-striped .bar{background-color:#149bdf;background-image:-webkit-gradient(linear,0 100%,100% 0,color-stop(0.25,rgba(255,255,255,0.15)),color-stop(0.25,transparent),color-stop(0.5,transparent),color-stop(0.5,rgba(255,255,255,0.15)),color-stop(0.75,rgba(255,255,255,0.15)),color-stop(0.75,transparent),to(transparent));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:-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);-webkit-background-size:40px 40px;-moz-background-size:40px 40px;-o-background-size:40px 40px;background-size:40px 40px}.progress.active .bar{-webkit-animation:progress-bar-stripes 2s linear infinite;-moz-animation:progress-bar-stripes 2s linear infinite;-ms-animation:progress-bar-stripes 2s linear infinite;-o-animation:progress-bar-stripes 2s linear infinite;animation:progress-bar-stripes 2s linear infinite}.progress-danger .bar,.progress .bar-danger{background-color:#dd514c;background-image:-moz-linear-gradient(top,#ee5f5b,#c43c35);background-image:-webkit-gradient(linear,0 0,0 100%,from(#ee5f5b),to(#c43c35));background-image:-webkit-linear-gradient(top,#ee5f5b,#c43c35);background-image:-o-linear-gradient(top,#ee5f5b,#c43c35);background-image:linear-gradient(to bottom,#ee5f5b,#c43c35);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffee5f5b',endColorstr='#ffc43c35',GradientType=0)}.progress-danger.progress-striped .bar,.progress-striped .bar-danger{background-color:#ee5f5b;background-image:-webkit-gradient(linear,0 100%,100% 0,color-stop(0.25,rgba(255,255,255,0.15)),color-stop(0.25,transparent),color-stop(0.5,transparent),color-stop(0.5,rgba(255,255,255,0.15)),color-stop(0.75,rgba(255,255,255,0.15)),color-stop(0.75,transparent),to(transparent));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:-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)}.progress-success .bar,.progress .bar-success{background-color:#5eb95e;background-image:-moz-linear-gradient(top,#62c462,#57a957);background-image:-webkit-gradient(linear,0 0,0 100%,from(#62c462),to(#57a957));background-image:-webkit-linear-gradient(top,#62c462,#57a957);background-image:-o-linear-gradient(top,#62c462,#57a957);background-image:linear-gradient(to bottom,#62c462,#57a957);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff62c462',endColorstr='#ff57a957',GradientType=0)}.progress-success.progress-striped .bar,.progress-striped .bar-success{background-color:#62c462;background-image:-webkit-gradient(linear,0 100%,100% 0,color-stop(0.25,rgba(255,255,255,0.15)),color-stop(0.25,transparent),color-stop(0.5,transparent),color-stop(0.5,rgba(255,255,255,0.15)),color-stop(0.75,rgba(255,255,255,0.15)),color-stop(0.75,transparent),to(transparent));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:-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)}.progress-info .bar,.progress .bar-info{background-color:#4bb1cf;background-image:-moz-linear-gradient(top,#5bc0de,#339bb9);background-image:-webkit-gradient(linear,0 0,0 100%,from(#5bc0de),to(#339bb9));background-image:-webkit-linear-gradient(top,#5bc0de,#339bb9);background-image:-o-linear-gradient(top,#5bc0de,#339bb9);background-image:linear-gradient(to bottom,#5bc0de,#339bb9);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de',endColorstr='#ff339bb9',GradientType=0)}.progress-info.progress-striped .bar,.progress-striped .bar-info{background-color:#5bc0de;background-image:-webkit-gradient(linear,0 100%,100% 0,color-stop(0.25,rgba(255,255,255,0.15)),color-stop(0.25,transparent),color-stop(0.5,transparent),color-stop(0.5,rgba(255,255,255,0.15)),color-stop(0.75,rgba(255,255,255,0.15)),color-stop(0.75,transparent),to(transparent));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:-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)}.progress-warning .bar,.progress .bar-warning{background-color:#faa732;background-image:-moz-linear-gradient(top,#fbb450,#f89406);background-image:-webkit-gradient(linear,0 0,0 100%,from(#fbb450),to(#f89406));background-image:-webkit-linear-gradient(top,#fbb450,#f89406);background-image:-o-linear-gradient(top,#fbb450,#f89406);background-image:linear-gradient(to bottom,#fbb450,#f89406);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffbb450',endColorstr='#fff89406',GradientType=0)}.progress-warning.progress-striped .bar,.progress-striped .bar-warning{background-color:#fbb450;background-image:-webkit-gradient(linear,0 100%,100% 0,color-stop(0.25,rgba(255,255,255,0.15)),color-stop(0.25,transparent),color-stop(0.5,transparent),color-stop(0.5,rgba(255,255,255,0.15)),color-stop(0.75,rgba(255,255,255,0.15)),color-stop(0.75,transparent),to(transparent));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:-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)}.accordion{margin-bottom:20px}.accordion-group{margin-bottom:2px;border:1px solid #e5e5e5;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px}.accordion-heading{border-bottom:0}.accordion-heading .accordion-toggle{display:block;padding:8px 15px}.accordion-toggle{cursor:pointer}.accordion-inner{padding:9px 15px;border-top:1px solid #e5e5e5}.carousel{position:relative;margin-bottom:20px;line-height:1}.carousel-inner{position:relative;width:100%;overflow:hidden}.carousel-inner>.item{position:relative;display:none;-webkit-transition:.6s ease-in-out left;-moz-transition:.6s ease-in-out left;-o-transition:.6s ease-in-out left;transition:.6s ease-in-out left}.carousel-inner>.item>img,.carousel-inner>.item>a>img{display:block;line-height:1}.carousel-inner>.active,.carousel-inner>.next,.carousel-inner>.prev{display:block}.carousel-inner>.active{left:0}.carousel-inner>.next,.carousel-inner>.prev{position:absolute;top:0;width:100%}.carousel-inner>.next{left:100%}.carousel-inner>.prev{left:-100%}.carousel-inner>.next.left,.carousel-inner>.prev.right{left:0}.carousel-inner>.active.left{left:-100%}.carousel-inner>.active.right{left:100%}.carousel-control{position:absolute;top:40%;left:15px;width:40px;height:40px;margin-top:-20px;font-size:60px;font-weight:100;line-height:30px;color:#fff;text-align:center;background:#222;border:3px solid #fff;-webkit-border-radius:23px;-moz-border-radius:23px;border-radius:23px;opacity:.5;filter:alpha(opacity=50)}.carousel-control.right{right:15px;left:auto}.carousel-control:hover,.carousel-control:focus{color:#fff;text-decoration:none;opacity:.9;filter:alpha(opacity=90)}.carousel-indicators{position:absolute;top:15px;right:15px;z-index:5;margin:0;list-style:none}.carousel-indicators li{display:block;float:left;width:10px;height:10px;margin-left:5px;text-indent:-999px;background-color:#ccc;background-color:rgba(255,255,255,0.25);border-radius:5px}.carousel-indicators .active{background-color:#fff}.carousel-caption{position:absolute;right:0;bottom:0;left:0;padding:15px;background:#333;background:rgba(0,0,0,0.75)}.carousel-caption h4,.carousel-caption p{line-height:20px;color:#fff}.carousel-caption h4{margin:0 0 5px}.carousel-caption p{margin-bottom:0}.hero-unit{padding:60px;margin-bottom:30px;font-size:18px;font-weight:200;line-height:30px;color:inherit;background-color:#eee;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px}.hero-unit h1{margin-bottom:0;font-size:60px;line-height:1;letter-spacing:-1px;color:inherit}.hero-unit li{line-height:30px}.pull-right{float:right}.pull-left{float:left}.hide{display:none}.show{display:block}.invisible{visibility:hidden}.affix{position:fixed}
diff --git a/packages/node_modules/@node-red/editor-client/src/vendor/bootstrap/img/glyphicons-halflings-white.png b/packages/node_modules/@node-red/editor-client/src/vendor/bootstrap/img/glyphicons-halflings-white.png
deleted file mode 100644
index 3bf6484a2..000000000
Binary files a/packages/node_modules/@node-red/editor-client/src/vendor/bootstrap/img/glyphicons-halflings-white.png and /dev/null differ
diff --git a/packages/node_modules/@node-red/editor-client/src/vendor/bootstrap/img/glyphicons-halflings.png b/packages/node_modules/@node-red/editor-client/src/vendor/bootstrap/img/glyphicons-halflings.png
deleted file mode 100644
index a99699932..000000000
Binary files a/packages/node_modules/@node-red/editor-client/src/vendor/bootstrap/img/glyphicons-halflings.png and /dev/null differ
diff --git a/packages/node_modules/@node-red/editor-client/src/vendor/bootstrap/js/bootstrap.min.js b/packages/node_modules/@node-red/editor-client/src/vendor/bootstrap/js/bootstrap.min.js
deleted file mode 100644
index 848258d38..000000000
--- a/packages/node_modules/@node-red/editor-client/src/vendor/bootstrap/js/bootstrap.min.js
+++ /dev/null
@@ -1,6 +0,0 @@
-/*!
-* Bootstrap.js by @fat & @mdo
-* Copyright 2013 Twitter, Inc.
-* http://www.apache.org/licenses/LICENSE-2.0.txt
-*/
-!function(e){"use strict";e(function(){e.support.transition=function(){var e=function(){var e=document.createElement("bootstrap"),t={WebkitTransition:"webkitTransitionEnd",MozTransition:"transitionend",OTransition:"oTransitionEnd otransitionend",transition:"transitionend"},n;for(n in t)if(e.style[n]!==undefined)return t[n]}();return e&&{end:e}}()})}(window.jQuery),!function(e){"use strict";var t='[data-dismiss="alert"]',n=function(n){e(n).on("click",t,this.close)};n.prototype.close=function(t){function s(){i.trigger("closed").remove()}var n=e(this),r=n.attr("data-target"),i;r||(r=n.attr("href"),r=r&&r.replace(/.*(?=#[^\s]*$)/,"")),i=e(r),t&&t.preventDefault(),i.length||(i=n.hasClass("alert")?n:n.parent()),i.trigger(t=e.Event("close"));if(t.isDefaultPrevented())return;i.removeClass("in"),e.support.transition&&i.hasClass("fade")?i.on(e.support.transition.end,s):s()};var r=e.fn.alert;e.fn.alert=function(t){return this.each(function(){var r=e(this),i=r.data("alert");i||r.data("alert",i=new n(this)),typeof t=="string"&&i[t].call(r)})},e.fn.alert.Constructor=n,e.fn.alert.noConflict=function(){return e.fn.alert=r,this},e(document).on("click.alert.data-api",t,n.prototype.close)}(window.jQuery),!function(e){"use strict";var t=function(t,n){this.$element=e(t),this.options=e.extend({},e.fn.button.defaults,n)};t.prototype.setState=function(e){var t="disabled",n=this.$element,r=n.data(),i=n.is("input")?"val":"html";e+="Text",r.resetText||n.data("resetText",n[i]()),n[i](r[e]||this.options[e]),setTimeout(function(){e=="loadingText"?n.addClass(t).attr(t,t):n.removeClass(t).removeAttr(t)},0)},t.prototype.toggle=function(){var e=this.$element.closest('[data-toggle="buttons-radio"]');e&&e.find(".active").removeClass("active"),this.$element.toggleClass("active")};var n=e.fn.button;e.fn.button=function(n){return this.each(function(){var r=e(this),i=r.data("button"),s=typeof n=="object"&&n;i||r.data("button",i=new t(this,s)),n=="toggle"?i.toggle():n&&i.setState(n)})},e.fn.button.defaults={loadingText:"loading..."},e.fn.button.Constructor=t,e.fn.button.noConflict=function(){return e.fn.button=n,this},e(document).on("click.button.data-api","[data-toggle^=button]",function(t){var n=e(t.target);n.hasClass("btn")||(n=n.closest(".btn")),n.button("toggle")})}(window.jQuery),!function(e){"use strict";var t=function(t,n){this.$element=e(t),this.$indicators=this.$element.find(".carousel-indicators"),this.options=n,this.options.pause=="hover"&&this.$element.on("mouseenter",e.proxy(this.pause,this)).on("mouseleave",e.proxy(this.cycle,this))};t.prototype={cycle:function(t){return t||(this.paused=!1),this.interval&&clearInterval(this.interval),this.options.interval&&!this.paused&&(this.interval=setInterval(e.proxy(this.next,this),this.options.interval)),this},getActiveIndex:function(){return this.$active=this.$element.find(".item.active"),this.$items=this.$active.parent().children(),this.$items.index(this.$active)},to:function(t){var n=this.getActiveIndex(),r=this;if(t>this.$items.length-1||t<0)return;return this.sliding?this.$element.one("slid",function(){r.to(t)}):n==t?this.pause().cycle():this.slide(t>n?"next":"prev",e(this.$items[t]))},pause:function(t){return t||(this.paused=!0),this.$element.find(".next, .prev").length&&e.support.transition.end&&(this.$element.trigger(e.support.transition.end),this.cycle(!0)),clearInterval(this.interval),this.interval=null,this},next:function(){if(this.sliding)return;return this.slide("next")},prev:function(){if(this.sliding)return;return this.slide("prev")},slide:function(t,n){var r=this.$element.find(".item.active"),i=n||r[t](),s=this.interval,o=t=="next"?"left":"right",u=t=="next"?"first":"last",a=this,f;this.sliding=!0,s&&this.pause(),i=i.length?i:this.$element.find(".item")[u](),f=e.Event("slide",{relatedTarget:i[0],direction:o});if(i.hasClass("active"))return;this.$indicators.length&&(this.$indicators.find(".active").removeClass("active"),this.$element.one("slid",function(){var t=e(a.$indicators.children()[a.getActiveIndex()]);t&&t.addClass("active")}));if(e.support.transition&&this.$element.hasClass("slide")){this.$element.trigger(f);if(f.isDefaultPrevented())return;i.addClass(t),i[0].offsetWidth,r.addClass(o),i.addClass(o),this.$element.one(e.support.transition.end,function(){i.removeClass([t,o].join(" ")).addClass("active"),r.removeClass(["active",o].join(" ")),a.sliding=!1,setTimeout(function(){a.$element.trigger("slid")},0)})}else{this.$element.trigger(f);if(f.isDefaultPrevented())return;r.removeClass("active"),i.addClass("active"),this.sliding=!1,this.$element.trigger("slid")}return s&&this.cycle(),this}};var n=e.fn.carousel;e.fn.carousel=function(n){return this.each(function(){var r=e(this),i=r.data("carousel"),s=e.extend({},e.fn.carousel.defaults,typeof n=="object"&&n),o=typeof n=="string"?n:s.slide;i||r.data("carousel",i=new t(this,s)),typeof n=="number"?i.to(n):o?i[o]():s.interval&&i.pause().cycle()})},e.fn.carousel.defaults={interval:5e3,pause:"hover"},e.fn.carousel.Constructor=t,e.fn.carousel.noConflict=function(){return e.fn.carousel=n,this},e(document).on("click.carousel.data-api","[data-slide], [data-slide-to]",function(t){var n=e(this),r,i=e(n.attr("data-target")||(r=n.attr("href"))&&r.replace(/.*(?=#[^\s]+$)/,"")),s=e.extend({},i.data(),n.data()),o;i.carousel(s),(o=n.attr("data-slide-to"))&&i.data("carousel").pause().to(o).cycle(),t.preventDefault()})}(window.jQuery),!function(e){"use strict";var t=function(t,n){this.$element=e(t),this.options=e.extend({},e.fn.collapse.defaults,n),this.options.parent&&(this.$parent=e(this.options.parent)),this.options.toggle&&this.toggle()};t.prototype={constructor:t,dimension:function(){var e=this.$element.hasClass("width");return e?"width":"height"},show:function(){var t,n,r,i;if(this.transitioning||this.$element.hasClass("in"))return;t=this.dimension(),n=e.camelCase(["scroll",t].join("-")),r=this.$parent&&this.$parent.find("> .accordion-group > .in");if(r&&r.length){i=r.data("collapse");if(i&&i.transitioning)return;r.collapse("hide"),i||r.data("collapse",null)}this.$element[t](0),this.transition("addClass",e.Event("show"),"shown"),e.support.transition&&this.$element[t](this.$element[0][n])},hide:function(){var t;if(this.transitioning||!this.$element.hasClass("in"))return;t=this.dimension(),this.reset(this.$element[t]()),this.transition("removeClass",e.Event("hide"),"hidden"),this.$element[t](0)},reset:function(e){var t=this.dimension();return this.$element.removeClass("collapse")[t](e||"auto")[0].offsetWidth,this.$element[e!==null?"addClass":"removeClass"]("collapse"),this},transition:function(t,n,r){var i=this,s=function(){n.type=="show"&&i.reset(),i.transitioning=0,i.$element.trigger(r)};this.$element.trigger(n);if(n.isDefaultPrevented())return;this.transitioning=1,this.$element[t]("in"),e.support.transition&&this.$element.hasClass("collapse")?this.$element.one(e.support.transition.end,s):s()},toggle:function(){this[this.$element.hasClass("in")?"hide":"show"]()}};var n=e.fn.collapse;e.fn.collapse=function(n){return this.each(function(){var r=e(this),i=r.data("collapse"),s=e.extend({},e.fn.collapse.defaults,r.data(),typeof n=="object"&&n);i||r.data("collapse",i=new t(this,s)),typeof n=="string"&&i[n]()})},e.fn.collapse.defaults={toggle:!0},e.fn.collapse.Constructor=t,e.fn.collapse.noConflict=function(){return e.fn.collapse=n,this},e(document).on("click.collapse.data-api","[data-toggle=collapse]",function(t){var n=e(this),r,i=n.attr("data-target")||t.preventDefault()||(r=n.attr("href"))&&r.replace(/.*(?=#[^\s]+$)/,""),s=e(i).data("collapse")?"toggle":n.data();n[e(i).hasClass("in")?"addClass":"removeClass"]("collapsed"),e(i).collapse(s)})}(window.jQuery),!function(e){"use strict";function r(){e(".dropdown-backdrop").remove(),e(t).each(function(){i(e(this)).removeClass("open")})}function i(t){var n=t.attr("data-target"),r;n||(n=t.attr("href"),n=n&&/#/.test(n)&&n.replace(/.*(?=#[^\s]*$)/,"")),r=n&&e(n);if(!r||!r.length)r=t.parent();return r}var t="[data-toggle=dropdown]",n=function(t){var n=e(t).on("click.dropdown.data-api",this.toggle);e("html").on("click.dropdown.data-api",function(){n.parent().removeClass("open")})};n.prototype={constructor:n,toggle:function(t){var n=e(this),s,o;if(n.is(".disabled, :disabled"))return;return s=i(n),o=s.hasClass("open"),r(),o||("ontouchstart"in document.documentElement&&e('
                                    ').insertBefore(e(this)).on("click",r),s.toggleClass("open")),n.focus(),!1},keydown:function(n){var r,s,o,u,a,f;if(!/(38|40|27)/.test(n.keyCode))return;r=e(this),n.preventDefault(),n.stopPropagation();if(r.is(".disabled, :disabled"))return;u=i(r),a=u.hasClass("open");if(!a||a&&n.keyCode==27)return n.which==27&&u.find(t).focus(),r.click();s=e("[role=menu] li:not(.divider):visible a",u);if(!s.length)return;f=s.index(s.filter(":focus")),n.keyCode==38&&f>0&&f--,n.keyCode==40&&f').appendTo(document.body),this.$backdrop.click(this.options.backdrop=="static"?e.proxy(this.$element[0].focus,this.$element[0]):e.proxy(this.hide,this)),i&&this.$backdrop[0].offsetWidth,this.$backdrop.addClass("in");if(!t)return;i?this.$backdrop.one(e.support.transition.end,t):t()}else!this.isShown&&this.$backdrop?(this.$backdrop.removeClass("in"),e.support.transition&&this.$element.hasClass("fade")?this.$backdrop.one(e.support.transition.end,t):t()):t&&t()}};var n=e.fn.modal;e.fn.modal=function(n){return this.each(function(){var r=e(this),i=r.data("modal"),s=e.extend({},e.fn.modal.defaults,r.data(),typeof n=="object"&&n);i||r.data("modal",i=new t(this,s)),typeof n=="string"?i[n]():s.show&&i.show()})},e.fn.modal.defaults={backdrop:!0,keyboard:!0,show:!0},e.fn.modal.Constructor=t,e.fn.modal.noConflict=function(){return e.fn.modal=n,this},e(document).on("click.modal.data-api",'[data-toggle="modal"]',function(t){var n=e(this),r=n.attr("href"),i=e(n.attr("data-target")||r&&r.replace(/.*(?=#[^\s]+$)/,"")),s=i.data("modal")?"toggle":e.extend({remote:!/#/.test(r)&&r},i.data(),n.data());t.preventDefault(),i.modal(s).one("hide",function(){n.focus()})})}(window.jQuery),!function(e){"use strict";var t=function(e,t){this.init("tooltip",e,t)};t.prototype={constructor:t,init:function(t,n,r){var i,s,o,u,a;this.type=t,this.$element=e(n),this.options=this.getOptions(r),this.enabled=!0,o=this.options.trigger.split(" ");for(a=o.length;a--;)u=o[a],u=="click"?this.$element.on("click."+this.type,this.options.selector,e.proxy(this.toggle,this)):u!="manual"&&(i=u=="hover"?"mouseenter":"focus",s=u=="hover"?"mouseleave":"blur",this.$element.on(i+"."+this.type,this.options.selector,e.proxy(this.enter,this)),this.$element.on(s+"."+this.type,this.options.selector,e.proxy(this.leave,this)));this.options.selector?this._options=e.extend({},this.options,{trigger:"manual",selector:""}):this.fixTitle()},getOptions:function(t){return t=e.extend({},e.fn[this.type].defaults,this.$element.data(),t),t.delay&&typeof t.delay=="number"&&(t.delay={show:t.delay,hide:t.delay}),t},enter:function(t){var n=e.fn[this.type].defaults,r={},i;this._options&&e.each(this._options,function(e,t){n[e]!=t&&(r[e]=t)},this),i=e(t.currentTarget)[this.type](r).data(this.type);if(!i.options.delay||!i.options.delay.show)return i.show();clearTimeout(this.timeout),i.hoverState="in",this.timeout=setTimeout(function(){i.hoverState=="in"&&i.show()},i.options.delay.show)},leave:function(t){var n=e(t.currentTarget)[this.type](this._options).data(this.type);this.timeout&&clearTimeout(this.timeout);if(!n.options.delay||!n.options.delay.hide)return n.hide();n.hoverState="out",this.timeout=setTimeout(function(){n.hoverState=="out"&&n.hide()},n.options.delay.hide)},show:function(){var t,n,r,i,s,o,u=e.Event("show");if(this.hasContent()&&this.enabled){this.$element.trigger(u);if(u.isDefaultPrevented())return;t=this.tip(),this.setContent(),this.options.animation&&t.addClass("fade"),s=typeof this.options.placement=="function"?this.options.placement.call(this,t[0],this.$element[0]):this.options.placement,t.detach().css({top:0,left:0,display:"block"}),this.options.container?t.appendTo(this.options.container):t.insertAfter(this.$element),n=this.getPosition(),r=t[0].offsetWidth,i=t[0].offsetHeight;switch(s){case"bottom":o={top:n.top+n.height,left:n.left+n.width/2-r/2};break;case"top":o={top:n.top-i,left:n.left+n.width/2-r/2};break;case"left":o={top:n.top+n.height/2-i/2,left:n.left-r};break;case"right":o={top:n.top+n.height/2-i/2,left:n.left+n.width}}this.applyPlacement(o,s),this.$element.trigger("shown")}},applyPlacement:function(e,t){var n=this.tip(),r=n[0].offsetWidth,i=n[0].offsetHeight,s,o,u,a;n.offset(e).addClass(t).addClass("in"),s=n[0].offsetWidth,o=n[0].offsetHeight,t=="top"&&o!=i&&(e.top=e.top+i-o,a=!0),t=="bottom"||t=="top"?(u=0,e.left<0&&(u=e.left*-2,e.left=0,n.offset(e),s=n[0].offsetWidth,o=n[0].offsetHeight),this.replaceArrow(u-r+s,s,"left")):this.replaceArrow(o-i,o,"top"),a&&n.offset(e)},replaceArrow:function(e,t,n){this.arrow().css(n,e?50*(1-e/t)+"%":"")},setContent:function(){var e=this.tip(),t=this.getTitle();e.find(".tooltip-inner")[this.options.html?"html":"text"](t),e.removeClass("fade in top bottom left right")},hide:function(){function i(){var t=setTimeout(function(){n.off(e.support.transition.end).detach()},500);n.one(e.support.transition.end,function(){clearTimeout(t),n.detach()})}var t=this,n=this.tip(),r=e.Event("hide");this.$element.trigger(r);if(r.isDefaultPrevented())return;return n.removeClass("in"),e.support.transition&&this.$tip.hasClass("fade")?i():n.detach(),this.$element.trigger("hidden"),this},fixTitle:function(){var e=this.$element;(e.attr("title")||typeof e.attr("data-original-title")!="string")&&e.attr("data-original-title",e.attr("title")||"").attr("title","")},hasContent:function(){return this.getTitle()},getPosition:function(){var t=this.$element[0];return e.extend({},typeof t.getBoundingClientRect=="function"?t.getBoundingClientRect():{width:t.offsetWidth,height:t.offsetHeight},this.$element.offset())},getTitle:function(){var e,t=this.$element,n=this.options;return e=t.attr("data-original-title")||(typeof n.title=="function"?n.title.call(t[0]):n.title),e},tip:function(){return this.$tip=this.$tip||e(this.options.template)},arrow:function(){return this.$arrow=this.$arrow||this.tip().find(".tooltip-arrow")},validate:function(){this.$element[0].parentNode||(this.hide(),this.$element=null,this.options=null)},enable:function(){this.enabled=!0},disable:function(){this.enabled=!1},toggleEnabled:function(){this.enabled=!this.enabled},toggle:function(t){var n=t?e(t.currentTarget)[this.type](this._options).data(this.type):this;n.tip().hasClass("in")?n.hide():n.show()},destroy:function(){this.hide().$element.off("."+this.type).removeData(this.type)}};var n=e.fn.tooltip;e.fn.tooltip=function(n){return this.each(function(){var r=e(this),i=r.data("tooltip"),s=typeof n=="object"&&n;i||r.data("tooltip",i=new t(this,s)),typeof n=="string"&&i[n]()})},e.fn.tooltip.Constructor=t,e.fn.tooltip.defaults={animation:!0,placement:"top",selector:!1,template:'
                                    ',trigger:"hover focus",title:"",delay:0,html:!1,container:!1},e.fn.tooltip.noConflict=function(){return e.fn.tooltip=n,this}}(window.jQuery),!function(e){"use strict";var t=function(e,t){this.init("popover",e,t)};t.prototype=e.extend({},e.fn.tooltip.Constructor.prototype,{constructor:t,setContent:function(){var e=this.tip(),t=this.getTitle(),n=this.getContent();e.find(".popover-title")[this.options.html?"html":"text"](t),e.find(".popover-content")[this.options.html?"html":"text"](n),e.removeClass("fade top bottom left right in")},hasContent:function(){return this.getTitle()||this.getContent()},getContent:function(){var e,t=this.$element,n=this.options;return e=(typeof n.content=="function"?n.content.call(t[0]):n.content)||t.attr("data-content"),e},tip:function(){return this.$tip||(this.$tip=e(this.options.template)),this.$tip},destroy:function(){this.hide().$element.off("."+this.type).removeData(this.type)}});var n=e.fn.popover;e.fn.popover=function(n){return this.each(function(){var r=e(this),i=r.data("popover"),s=typeof n=="object"&&n;i||r.data("popover",i=new t(this,s)),typeof n=="string"&&i[n]()})},e.fn.popover.Constructor=t,e.fn.popover.defaults=e.extend({},e.fn.tooltip.defaults,{placement:"right",trigger:"click",content:"",template:'
                                    '}),e.fn.popover.noConflict=function(){return e.fn.popover=n,this}}(window.jQuery),!function(e){"use strict";function t(t,n){var r=e.proxy(this.process,this),i=e(t).is("body")?e(window):e(t),s;this.options=e.extend({},e.fn.scrollspy.defaults,n),this.$scrollElement=i.on("scroll.scroll-spy.data-api",r),this.selector=(this.options.target||(s=e(t).attr("href"))&&s.replace(/.*(?=#[^\s]+$)/,"")||"")+" .nav li > a",this.$body=e("body"),this.refresh(),this.process()}t.prototype={constructor:t,refresh:function(){var t=this,n;this.offsets=e([]),this.targets=e([]),n=this.$body.find(this.selector).map(function(){var n=e(this),r=n.data("target")||n.attr("href"),i=/^#\w/.test(r)&&e(r);return i&&i.length&&[[i.position().top+(!e.isWindow(t.$scrollElement.get(0))&&t.$scrollElement.scrollTop()),r]]||null}).sort(function(e,t){return e[0]-t[0]}).each(function(){t.offsets.push(this[0]),t.targets.push(this[1])})},process:function(){var e=this.$scrollElement.scrollTop()+this.options.offset,t=this.$scrollElement[0].scrollHeight||this.$body[0].scrollHeight,n=t-this.$scrollElement.height(),r=this.offsets,i=this.targets,s=this.activeTarget,o;if(e>=n)return s!=(o=i.last()[0])&&this.activate(o);for(o=r.length;o--;)s!=i[o]&&e>=r[o]&&(!r[o+1]||e<=r[o+1])&&this.activate(i[o])},activate:function(t){var n,r;this.activeTarget=t,e(this.selector).parent(".active").removeClass("active"),r=this.selector+'[data-target="'+t+'"],'+this.selector+'[href="'+t+'"]',n=e(r).parent("li").addClass("active"),n.parent(".dropdown-menu").length&&(n=n.closest("li.dropdown").addClass("active")),n.trigger("activate")}};var n=e.fn.scrollspy;e.fn.scrollspy=function(n){return this.each(function(){var r=e(this),i=r.data("scrollspy"),s=typeof n=="object"&&n;i||r.data("scrollspy",i=new t(this,s)),typeof n=="string"&&i[n]()})},e.fn.scrollspy.Constructor=t,e.fn.scrollspy.defaults={offset:10},e.fn.scrollspy.noConflict=function(){return e.fn.scrollspy=n,this},e(window).on("load",function(){e('[data-spy="scroll"]').each(function(){var t=e(this);t.scrollspy(t.data())})})}(window.jQuery),!function(e){"use strict";var t=function(t){this.element=e(t)};t.prototype={constructor:t,show:function(){var t=this.element,n=t.closest("ul:not(.dropdown-menu)"),r=t.attr("data-target"),i,s,o;r||(r=t.attr("href"),r=r&&r.replace(/.*(?=#[^\s]*$)/,""));if(t.parent("li").hasClass("active"))return;i=n.find(".active:last a")[0],o=e.Event("show",{relatedTarget:i}),t.trigger(o);if(o.isDefaultPrevented())return;s=e(r),this.activate(t.parent("li"),n),this.activate(s,s.parent(),function(){t.trigger({type:"shown",relatedTarget:i})})},activate:function(t,n,r){function o(){i.removeClass("active").find("> .dropdown-menu > .active").removeClass("active"),t.addClass("active"),s?(t[0].offsetWidth,t.addClass("in")):t.removeClass("fade"),t.parent(".dropdown-menu")&&t.closest("li.dropdown").addClass("active"),r&&r()}var i=n.find("> .active"),s=r&&e.support.transition&&i.hasClass("fade");s?i.one(e.support.transition.end,o):o(),i.removeClass("in")}};var n=e.fn.tab;e.fn.tab=function(n){return this.each(function(){var r=e(this),i=r.data("tab");i||r.data("tab",i=new t(this)),typeof n=="string"&&i[n]()})},e.fn.tab.Constructor=t,e.fn.tab.noConflict=function(){return e.fn.tab=n,this},e(document).on("click.tab.data-api",'[data-toggle="tab"], [data-toggle="pill"]',function(t){t.preventDefault(),e(this).tab("show")})}(window.jQuery),!function(e){"use strict";var t=function(t,n){this.$element=e(t),this.options=e.extend({},e.fn.typeahead.defaults,n),this.matcher=this.options.matcher||this.matcher,this.sorter=this.options.sorter||this.sorter,this.highlighter=this.options.highlighter||this.highlighter,this.updater=this.options.updater||this.updater,this.source=this.options.source,this.$menu=e(this.options.menu),this.shown=!1,this.listen()};t.prototype={constructor:t,select:function(){var e=this.$menu.find(".active").attr("data-value");return this.$element.val(this.updater(e)).change(),this.hide()},updater:function(e){return e},show:function(){var t=e.extend({},this.$element.position(),{height:this.$element[0].offsetHeight});return this.$menu.insertAfter(this.$element).css({top:t.top+t.height,left:t.left}).show(),this.shown=!0,this},hide:function(){return this.$menu.hide(),this.shown=!1,this},lookup:function(t){var n;return this.query=this.$element.val(),!this.query||this.query.length"+t+""})},render:function(t){var n=this;return t=e(t).map(function(t,r){return t=e(n.options.item).attr("data-value",r),t.find("a").html(n.highlighter(r)),t[0]}),t.first().addClass("active"),this.$menu.html(t),this},next:function(t){var n=this.$menu.find(".active").removeClass("active"),r=n.next();r.length||(r=e(this.$menu.find("li")[0])),r.addClass("active")},prev:function(e){var t=this.$menu.find(".active").removeClass("active"),n=t.prev();n.length||(n=this.$menu.find("li").last()),n.addClass("active")},listen:function(){this.$element.on("focus",e.proxy(this.focus,this)).on("blur",e.proxy(this.blur,this)).on("keypress",e.proxy(this.keypress,this)).on("keyup",e.proxy(this.keyup,this)),this.eventSupported("keydown")&&this.$element.on("keydown",e.proxy(this.keydown,this)),this.$menu.on("click",e.proxy(this.click,this)).on("mouseenter","li",e.proxy(this.mouseenter,this)).on("mouseleave","li",e.proxy(this.mouseleave,this))},eventSupported:function(e){var t=e in this.$element;return t||(this.$element.setAttribute(e,"return;"),t=typeof this.$element[e]=="function"),t},move:function(e){if(!this.shown)return;switch(e.keyCode){case 9:case 13:case 27:e.preventDefault();break;case 38:e.preventDefault(),this.prev();break;case 40:e.preventDefault(),this.next()}e.stopPropagation()},keydown:function(t){this.suppressKeyPressRepeat=~e.inArray(t.keyCode,[40,38,9,13,27]),this.move(t)},keypress:function(e){if(this.suppressKeyPressRepeat)return;this.move(e)},keyup:function(e){switch(e.keyCode){case 40:case 38:case 16:case 17:case 18:break;case 9:case 13:if(!this.shown)return;this.select();break;case 27:if(!this.shown)return;this.hide();break;default:this.lookup()}e.stopPropagation(),e.preventDefault()},focus:function(e){this.focused=!0},blur:function(e){this.focused=!1,!this.mousedover&&this.shown&&this.hide()},click:function(e){e.stopPropagation(),e.preventDefault(),this.select(),this.$element.focus()},mouseenter:function(t){this.mousedover=!0,this.$menu.find(".active").removeClass("active"),e(t.currentTarget).addClass("active")},mouseleave:function(e){this.mousedover=!1,!this.focused&&this.shown&&this.hide()}};var n=e.fn.typeahead;e.fn.typeahead=function(n){return this.each(function(){var r=e(this),i=r.data("typeahead"),s=typeof n=="object"&&n;i||r.data("typeahead",i=new t(this,s)),typeof n=="string"&&i[n]()})},e.fn.typeahead.defaults={source:[],items:8,menu:'
                                      ',item:'
                                      • ',minLength:1},e.fn.typeahead.Constructor=t,e.fn.typeahead.noConflict=function(){return e.fn.typeahead=n,this},e(document).on("focus.typeahead.data-api",'[data-provide="typeahead"]',function(t){var n=e(this);if(n.data("typeahead"))return;n.typeahead(n.data())})}(window.jQuery),!function(e){"use strict";var t=function(t,n){this.options=e.extend({},e.fn.affix.defaults,n),this.$window=e(window).on("scroll.affix.data-api",e.proxy(this.checkPosition,this)).on("click.affix.data-api",e.proxy(function(){setTimeout(e.proxy(this.checkPosition,this),1)},this)),this.$element=e(t),this.checkPosition()};t.prototype.checkPosition=function(){if(!this.$element.is(":visible"))return;var t=e(document).height(),n=this.$window.scrollTop(),r=this.$element.offset(),i=this.options.offset,s=i.bottom,o=i.top,u="affix affix-top affix-bottom",a;typeof i!="object"&&(s=o=i),typeof o=="function"&&(o=i.top()),typeof s=="function"&&(s=i.bottom()),a=this.unpin!=null&&n+this.unpin<=r.top?!1:s!=null&&r.top+this.$element.height()>=t-s?"bottom":o!=null&&n<=o?"top":!1;if(this.affixed===a)return;this.affixed=a,this.unpin=a=="bottom"?r.top-n:null,this.$element.removeClass(u).addClass("affix"+(a?"-"+a:""))};var n=e.fn.affix;e.fn.affix=function(n){return this.each(function(){var r=e(this),i=r.data("affix"),s=typeof n=="object"&&n;i||r.data("affix",i=new t(this,s)),typeof n=="string"&&i[n]()})},e.fn.affix.Constructor=t,e.fn.affix.defaults={offset:0},e.fn.affix.noConflict=function(){return e.fn.affix=n,this},e(window).on("load",function(){e('[data-spy="affix"]').each(function(){var t=e(this),n=t.data();n.offset=n.offset||{},n.offsetBottom&&(n.offset.bottom=n.offsetBottom),n.offsetTop&&(n.offset.top=n.offsetTop),t.affix(n)})})}(window.jQuery);
\ No newline at end of file
diff --git a/packages/node_modules/@node-red/editor-client/templates/index.mst b/packages/node_modules/@node-red/editor-client/templates/index.mst
index e69e04264..f13564577 100644
--- a/packages/node_modules/@node-red/editor-client/templates/index.mst
+++ b/packages/node_modules/@node-red/editor-client/templates/index.mst
@@ -24,69 +24,16 @@
 {{ page.title }}
 
 
-
-
+
 
-
 
 {{#page.css}}
 
 {{/page.css}}
-
 
 
-
-
-
                                      
-
-
                                      
-

                                      
-
+
                                      
 
-
-
-
 
 
 {{# page.scripts }}
diff --git a/packages/node_modules/@node-red/nodes/core/core/58-debug.html b/packages/node_modules/@node-red/nodes/core/core/58-debug.html
index a9aec6b41..bcc33ee4f 100644
--- a/packages/node_modules/@node-red/nodes/core/core/58-debug.html
+++ b/packages/node_modules/@node-red/nodes/core/core/58-debug.html
@@ -206,14 +206,14 @@
             };
             RED.events.on("project:change", this.clearMessageList);
 
-            $("#debug-tab-open").on("click", function(e) {
+            $("#red-ui-sidebar-debug-open").on("click", function(e) {
                 e.preventDefault();
                 subWindow = window.open(document.location.toString().replace(/[?#].*$/,"")+"debug/view/view.html"+document.location.search,"nodeREDDebugView","menubar=no,location=no,toolbar=no,chrome,height=500,width=600");
                 subWindow.onload = function() {
                     subWindow.postMessage({event:"workspaceChange",activeWorkspace:RED.workspaces.active()},"*");
                 };
             });
-            RED.popover.tooltip($("#debug-tab-open"),RED._('node-red:debug.sidebar.openWindow'));
+            RED.popover.tooltip($("#red-ui-sidebar-debug-open"),RED._('node-red:debug.sidebar.openWindow'));
 
 
 
diff --git a/packages/node_modules/@node-red/nodes/core/core/60-link.html b/packages/node_modules/@node-red/nodes/core/core/60-link.html
index efdc5012b..958abacb9 100644
--- a/packages/node_modules/@node-red/nodes/core/core/60-link.html
+++ b/packages/node_modules/@node-red/nodes/core/core/60-link.html
@@ -53,7 +53,7 @@
         if (activeSubflow) {
             flowMap[activeSubflow.id] = {
                 id: activeSubflow.id,
-                class: 'palette-header',
+                class: 'red-ui-palette-header',
                 label:  "Subflow : "+(activeSubflow.name || activeSubflow.id),
                 expanded: true,
                 children: []
@@ -63,7 +63,7 @@
             RED.nodes.eachWorkspace(function(ws) {
                 flowMap[ws.id] = {
                     id: ws.id,
-                    class: 'palette-header',
+                    class: 'red-ui-palette-header',
                     label: (ws.label || ws.id)+(node.z===ws.id ? " *":""),
                     expanded: true,
                     children: []
diff --git a/packages/node_modules/@node-red/nodes/core/core/80-function.html b/packages/node_modules/@node-red/nodes/core/core/80-function.html
index 4281230fe..30654c493 100644
--- a/packages/node_modules/@node-red/nodes/core/core/80-function.html
+++ b/packages/node_modules/@node-red/nodes/core/core/80-function.html
@@ -10,7 +10,7 @@
         
     
                                      
     
                                      
-        
                                      
+        
                                      
         
                                      
     
                                      
     
                                      
diff --git a/packages/node_modules/@node-red/nodes/core/core/lib/debug/debug-utils.js b/packages/node_modules/@node-red/nodes/core/core/lib/debug/debug-utils.js
index 2a6a0ed72..e03e95e7c 100644
--- a/packages/node_modules/@node-red/nodes/core/core/lib/debug/debug-utils.js
+++ b/packages/node_modules/@node-red/nodes/core/core/lib/debug/debug-utils.js
@@ -40,36 +40,36 @@ RED.debug = (function() {
         config = _config;
 
         var content = $("
                                      ").css({"position":"relative","height":"100%"});
-        var toolbar = $('
                                      '+
-            ' '+
-            '
                                      ').appendTo(content);
+        var toolbar = $('
                                      '+
+            ' '+
+            '
                                      ').appendTo(content);
 
         var footerToolbar = $('
                                      '+
             // ''+
-            //     'list'+
-            //     'table '+
+            //     'list'+
+            //     'table '+
             // ''+
-            ' ' +
+            ' ' +
             '
                                      ');
 
-        messageList = $('
                                      ').appendTo(content);
+        messageList = $('
                                      ').appendTo(content);
         sbc = messageList[0];
-        messageTable = $('
                                      ').appendTo(content);
+        messageTable = $('
                                      ').appendTo(content);
 
-        var filterDialog = $('
                                      '+
-            '
                                      '+
+        var filterDialog = $('
                                      '+
+            '
                                      '+
             ''+
-                ''+
-                ''+
-                ' '+
+                ''+
+                ''+
+                ' '+
             ''+
             '
                                      '+
         '
                                      ').appendTo(toolbar);//content);
 
-        // var filterTypeRow = $('
                                      ').appendTo(filterDialog);
+        // var filterTypeRow = $('
                                      ').appendTo(filterDialog);
         // $('').appendTo(filterTypeRow);
 
-        var debugNodeListRow = $('
                                      ').appendTo(filterDialog);
+        var debugNodeListRow = $('
                                      ').appendTo(filterDialog);
         var flowCheckboxes = {};
         var debugNodeListHeader = $('
                                      ');
         var headerCheckbox = $('').appendTo(debugNodeListHeader.find("span")[1]).checkboxSet();
@@ -118,7 +118,7 @@ RED.debug = (function() {
                         parent: flowCheckboxes[node.z]
                     }).on("change", function(e) {
                         filteredNodes[node.id] = !$(this).prop('checked');
-                        $(".debug-message-node-"+node.id.replace(/\./g,"_")).toggleClass('hide',filteredNodes[node.id]);
+                        $(".red-ui-debug-msg-node-"+node.id.replace(/\./g,"_")).toggleClass('hide',filteredNodes[node.id]);
                     });
                     if (!node.active || RED.nodes.workspace(node.z).disabled) {
                         container.addClass('disabled');
@@ -142,13 +142,13 @@ RED.debug = (function() {
             console.log("TODO: i18n library support");
         }
 
-        toolbar.find('#debug-tab-filter span').text(RED._('node-red:debug.sidebar.filterAll'));
+        toolbar.find('#red-ui-sidebar-debug-filter span').text(RED._('node-red:debug.sidebar.filterAll'));
 
         var filterButtonHandler = function(type) {
             return function(e) {
                 e.preventDefault();
                 if (filterType !== type) {
-                    $('.debug-tab-filter-option').removeClass('selected');
+                    $('.red-ui-sidebar-debug-filter-option').removeClass('selected');
                     $(this).addClass('selected');
                     if (filterType === 'filterSelected') {
                         debugNodeListRow.slideUp();
@@ -158,29 +158,29 @@ RED.debug = (function() {
                         debugNodeListRow.slideDown();
                     }
 
-                    $('#debug-tab-filter span').text(RED._('node-red:debug.sidebar.'+filterType));
+                    $('#red-ui-sidebar-debug-filter span').text(RED._('node-red:debug.sidebar.'+filterType));
                     refreshMessageList();
                 }
             }
         }
-        filterDialog.find('#debug-tab-filterAll').on("click",filterButtonHandler('filterAll'));
-        filterDialog.find('#debug-tab-filterSelected').on("click",filterButtonHandler('filterSelected'));
-        filterDialog.find('#debug-tab-filterCurrent').on("click",filterButtonHandler('filterCurrent'));
+        filterDialog.find('#red-ui-sidebar-debug-filterAll').on("click",filterButtonHandler('filterAll'));
+        filterDialog.find('#red-ui-sidebar-debug-filterSelected').on("click",filterButtonHandler('filterSelected'));
+        filterDialog.find('#red-ui-sidebar-debug-filterCurrent').on("click",filterButtonHandler('filterCurrent'));
 
 
-        // $('#debug-tab-view-list').on("click",function(e) {
+        // $('#red-ui-sidebar-debug-view-list').on("click",function(e) {
         //     e.preventDefault();
         //     if (!$(this).hasClass('selected')) {
         //         $(this).addClass('selected');
-        //         $('#debug-tab-view-table').removeClass('selected');
+        //         $('#red-ui-sidebar-debug-view-table').removeClass('selected');
         //         showMessageList();
         //     }
         // });
-        // $('#debug-tab-view-table').on("click",function(e) {
+        // $('#red-ui-sidebar-debug-view-table').on("click",function(e) {
         //     e.preventDefault();
         //     if (!$(this).hasClass('selected')) {
         //         $(this).addClass('selected');
-        //         $('#debug-tab-view-list').removeClass('selected');
+        //         $('#red-ui-sidebar-debug-view-list').removeClass('selected');
         //         showMessageTable();
         //     }
         // });
@@ -188,21 +188,21 @@ RED.debug = (function() {
 
         var hideFilterTimeout;
         toolbar.on('mouseleave',function() {
-            if ($('#debug-tab-filter').hasClass('selected')) {
+            if ($('#red-ui-sidebar-debug-filter').hasClass('selected')) {
                 clearTimeout(hideFilterTimeout);
                 hideFilterTimeout = setTimeout(function() {
                     filterVisible = false;
-                    $('#debug-tab-filter').removeClass('selected');
+                    $('#red-ui-sidebar-debug-filter').removeClass('selected');
                     filterDialog.slideUp(200);
                 },300);
             }
         });
         toolbar.on('mouseenter',function() {
-            if ($('#debug-tab-filter').hasClass('selected')) {
+            if ($('#red-ui-sidebar-debug-filter').hasClass('selected')) {
                 clearTimeout(hideFilterTimeout);
             }
         })
-        toolbar.find('#debug-tab-filter').on("click",function(e) {
+        toolbar.find('#red-ui-sidebar-debug-filter').on("click",function(e) {
             e.preventDefault();
             if ($(this).hasClass('selected')) {
                 filterVisible = false;
@@ -216,13 +216,13 @@ RED.debug = (function() {
                 filterDialog.slideDown(200);
             }
         });
-        RED.popover.tooltip(toolbar.find('#debug-tab-filter'),RED._('node-red:debug.sidebar.filterLog'));
+        RED.popover.tooltip(toolbar.find('#red-ui-sidebar-debug-filter'),RED._('node-red:debug.sidebar.filterLog'));
 
-        toolbar.find("#debug-tab-clear").on("click", function(e) {
+        toolbar.find("#red-ui-sidebar-debug-clear").on("click", function(e) {
             e.preventDefault();
             clearMessageList(false);
         });
-        RED.popover.tooltip(toolbar.find("#debug-tab-clear"),RED._('node-red:debug.sidebar.clearLog'));
+        RED.popover.tooltip(toolbar.find("#red-ui-sidebar-debug-clear"),RED._('node-red:debug.sidebar.clearLog'));
 
 
 
@@ -282,11 +282,11 @@ RED.debug = (function() {
             activeWorkspace = _activeWorkspace.replace(/\./g,"_");
         }
         if (filterType === "filterAll") {
-            $(".debug-message").removeClass("hide");
+            $(".red-ui-debug-msg").removeClass("hide");
         } else {
-            $(".debug-message").each(function() {
+            $(".red-ui-debug-msg").each(function() {
                 if (filterType === 'filterCurrent') {
-                    $(this).toggleClass('hide',!$(this).hasClass('debug-message-flow-'+activeWorkspace));
+                    $(this).toggleClass('hide',!$(this).hasClass('red-ui-debug-msg-flow-'+activeWorkspace));
                 } else if (filterType === 'filterSelected') {
                     var id = $(this).data('source');
                     if (id) {
@@ -320,7 +320,7 @@ RED.debug = (function() {
             var msg = m.el;
             var sourceNode = m.source;
             if (sourceNode) {
-                var wrapper = $("
                                      ",{id:"debug-message-source-"+sourceNode.id.replace(/\./g,"_")}).appendTo(messageTable);
+                var wrapper = $("
                                      ",{id:"red-ui-debug-msg-source-"+sourceNode.id.replace(/\./g,"_")}).appendTo(messageTable);
                 wrapper.append(msg);
             }
         });
@@ -336,26 +336,26 @@ RED.debug = (function() {
     function showMessageMenu(button,dbgMessage,sourceId) {
         activeMenuMessage = dbgMessage;
         if (!menuOptionMenu) {
-            menuOptionMenu = RED.menu.init({id:"debug-message-option-menu",
+            menuOptionMenu = RED.menu.init({id:"red-ui-debug-msg-option-menu",
                 options: [
-                    {id:"debug-message-menu-item-collapse",label:RED._("node-red:debug.messageMenu.collapseAll"),onselect:function(){
+                    {id:"red-ui-debug-msg-menu-item-collapse",label:RED._("node-red:debug.messageMenu.collapseAll"),onselect:function(){
                         activeMenuMessage.collapse();
                     }},
-                    {id:"debug-message-menu-item-clear-pins",label:RED._("node-red:debug.messageMenu.clearPinned"),onselect:function(){
+                    {id:"red-ui-debug-msg-menu-item-clear-pins",label:RED._("node-red:debug.messageMenu.clearPinned"),onselect:function(){
                         activeMenuMessage.clearPinned();
                     }},
                     null,
-                    {id:"debug-message-menu-item-filter", label:RED._("node-red:debug.messageMenu.filterNode"),onselect:function(){
+                    {id:"red-ui-debug-msg-menu-item-filter", label:RED._("node-red:debug.messageMenu.filterNode"),onselect:function(){
                         var candidateNodes = RED.nodes.filterNodes({type:'debug'});
                         candidateNodes.forEach(function(n) {
                             filteredNodes[n.id] = true;
                         });
                         delete filteredNodes[sourceId];
-                        $("#debug-tab-filterSelected").trigger("click");
+                        $("#red-ui-sidebar-debug-filterSelected").trigger("click");
                         refreshMessageList();
                     }},
-                    {id:"debug-message-menu-item-clear-filter",label:RED._("node-red:debug.messageMenu.clearFilter"),onselect:function(){
-                        $("#debug-tab-filterAll").trigger("click");
+                    {id:"red-ui-debug-msg-menu-item-clear-filter",label:RED._("node-red:debug.messageMenu.clearFilter"),onselect:function(){
+                        $("#red-ui-sidebar-debug-filterAll").trigger("click");
                         refreshMessageList();
                     }}
                 ]
@@ -373,8 +373,8 @@ RED.debug = (function() {
         if (sourceNode && sourceNode.type !== 'debug') {
             filterOptionDisabled = true;
         }
-        RED.menu.setDisabled('debug-message-menu-item-filter',filterOptionDisabled);
-        RED.menu.setDisabled('debug-message-menu-item-clear-filter',filterOptionDisabled);
+        RED.menu.setDisabled('red-ui-debug-msg-menu-item-filter',filterOptionDisabled);
+        RED.menu.setDisabled('red-ui-debug-msg-menu-item-clear-filter',filterOptionDisabled);
 
         var elementPos = button.offset();
         menuOptionMenu.css({
@@ -404,7 +404,7 @@ RED.debug = (function() {
         var sourceNode = o._source;
 
         msg.onmouseenter = function() {
-            $(msg).addClass('debug-message-hover');
+            $(msg).addClass('red-ui-debug-msg-hover');
             if (o._source) {
                 config.messageMouseEnter(o._source.id);
                 if (o._source._alias) {
@@ -414,7 +414,7 @@ RED.debug = (function() {
 
         };
         msg.onmouseleave = function() {
-            $(msg).removeClass('debug-message-hover');
+            $(msg).removeClass('red-ui-debug-msg-hover');
             if (o._source) {
                 config.messageMouseLeave(o._source.id);
                 if (o._source._alias) {
@@ -427,10 +427,10 @@ RED.debug = (function() {
         var property = sanitize(o.property?o.property:'');
         var payload = o.msg;
         var format = sanitize((o.format||"").toString());
-        msg.className = 'debug-message'+(o.level?(' debug-message-level-'+o.level):'')+
+        msg.className = 'red-ui-debug-msg'+(o.level?(' red-ui-debug-msg-level-'+o.level):'')+
             (sourceNode?(
-                " debug-message-node-"+sourceNode.id.replace(/\./g,"_")+
-                (sourceNode.z?" debug-message-flow-"+sourceNode.z.replace(/\./g,"_"):"")
+                " red-ui-debug-msg-node-"+sourceNode.id.replace(/\./g,"_")+
+                (sourceNode.z?" red-ui-debug-msg-flow-"+sourceNode.z.replace(/\./g,"_"):"")
             ):"");
 
         if (sourceNode) {
@@ -446,22 +446,22 @@ RED.debug = (function() {
             }
         }
 
-        var metaRow = $('
                                      ').appendTo(msg);
-        $(''+ getTimestamp()+'').appendTo(metaRow);
+        var metaRow = $('
                                      ').appendTo(msg);
+        $(''+ getTimestamp()+'').appendTo(metaRow);
         if (sourceNode) {
-            $('',{href:"#",class:"debug-message-name"}).text('node: '+(sourceNode.name||sourceNode.id))
+            $('',{href:"#",class:"red-ui-debug-msg-name"}).text('node: '+(sourceNode.name||sourceNode.id))
             .appendTo(metaRow)
             .on("click", function(evt) {
                 evt.preventDefault();
                 config.messageSourceClick(sourceNode.id);
             });
         } else if (name) {
-            $(''+name+'').appendTo(metaRow);
+            $(''+name+'').appendTo(metaRow);
         }
 
         payload = RED.utils.decodeObject(payload,format);
 
-        var el = $('').appendTo(msg);
+        var el = $('').appendTo(msg);
         var path = o.property||'';
         var debugMessage = RED.utils.createObjectElement(payload, {
             key: /*true*/null,
@@ -481,17 +481,17 @@ RED.debug = (function() {
                 errorLvl = 30;
                 errorLvlType = 'warn';
             }
-            $(msg).addClass('debug-message-level-' + errorLvl);
-            $('function : (' + errorLvlType + ')').appendTo(metaRow);
+            $(msg).addClass('red-ui-debug-msg-level-' + errorLvl);
+            $('function : (' + errorLvlType + ')').appendTo(metaRow);
         } else {
-            var tools = $('').appendTo(metaRow);
-            var filterMessage = $('').appendTo(tools);
+            var tools = $('').appendTo(metaRow);
+            var filterMessage = $('').appendTo(tools);
             filterMessage.on("click", function(e) {
                 e.preventDefault();
                 e.stopPropagation();
                 showMessageMenu(filterMessage,debugMessage,sourceNode&&sourceNode.id);
             });
-            $(''+
+            $(''+
                 (o.topic?topic+' : ':'')+
                 (o.property?'msg.'+property:'msg')+" : "+format+
                 '').appendTo(metaRow);
@@ -510,9 +510,9 @@ RED.debug = (function() {
             messageList.append(msg);
         } else {
             if (sourceNode) {
-                var wrapper = $("#debug-message-source-"+sourceNode.id.replace(/\./g,"_"));
+                var wrapper = $("#red-ui-debug-msg-source-"+sourceNode.id.replace(/\./g,"_"));
                 if (wrapper.length === 0 ) {
-                    wrapper = $("
                                      ",{id:"debug-message-source-"+sourceNode.id.replace(/\./g,"_")}).appendTo(messageTable);
+                    wrapper = $("
                                      ",{id:"red-ui-debug-msg-source-"+sourceNode.id.replace(/\./g,"_")}).appendTo(messageTable);
                 }
                 wrapper.empty();
                 wrapper.append(msg);
@@ -531,7 +531,7 @@ RED.debug = (function() {
     }
 
     function clearMessageList(clearFilter) {
-        $(".debug-message").remove();
+        $(".red-ui-debug-msg").remove();
         config.clear();
         if (!!clearFilter) {
             clearFilterSettings();
@@ -542,10 +542,10 @@ RED.debug = (function() {
     function clearFilterSettings() {
         filteredNodes = {};
         filterType = 'filterAll';
-        $('.debug-tab-filter-option').removeClass('selected');
-        $('#debug-tab-filterAll').addClass('selected');
-        $('#debug-tab-filter span').text(RED._('node-red:debug.sidebar.filterAll'));
-        $('#debug-filter-node-list-row').slideUp();
+        $('.red-ui-sidebar-debug-filter-option').removeClass('selected');
+        $('#red-ui-sidebar-debug-filterAll').addClass('selected');
+        $('#red-ui-sidebar-debug-filter span').text(RED._('node-red:debug.sidebar.filterAll'));
+        $('#red-ui-sidebar-debug-filter-node-list-row').slideUp();
     }
 
     return {
diff --git a/packages/node_modules/@node-red/nodes/core/core/lib/debug/debug.js b/packages/node_modules/@node-red/nodes/core/core/lib/debug/debug.js
index 7abf5565e..97f6cc8a7 100644
--- a/packages/node_modules/@node-red/nodes/core/core/lib/debug/debug.js
+++ b/packages/node_modules/@node-red/nodes/core/core/lib/debug/debug.js
@@ -17,7 +17,7 @@ $(function() {
 
         var uiComponents = RED.debug.init(options);
 
-        $(".debug-window").append(uiComponents.content);
+        $(".red-ui-debug-window").append(uiComponents.content);
 
         window.addEventListener('message',function(evt) {
             if (evt.data.event === "message") {
diff --git a/packages/node_modules/@node-red/nodes/core/core/lib/debug/view.html b/packages/node_modules/@node-red/nodes/core/core/lib/debug/view.html
index 35ec21921..bd9016744 100644
--- a/packages/node_modules/@node-red/nodes/core/core/lib/debug/view.html
+++ b/packages/node_modules/@node-red/nodes/core/core/lib/debug/view.html
@@ -1,11 +1,10 @@
 
 
-    
     
     
     Node-RED Debug Tools
 
-
+
 
 
 
diff --git a/packages/node_modules/@node-red/nodes/core/io/05-tls.html b/packages/node_modules/@node-red/nodes/core/io/05-tls.html
index 2c2fc5f00..281324211 100644
--- a/packages/node_modules/@node-red/nodes/core/io/05-tls.html
+++ b/packages/node_modules/@node-red/nodes/core/io/05-tls.html
@@ -22,10 +22,10 @@
     
                                      
         
         
-            
+            
             
              
-            
+            
         
         
         
@@ -34,10 +34,10 @@
     
                                      
         
         
-            
+            
             
              
-            
+            
         
         
         
@@ -50,10 +50,10 @@
     
                                      
         
         
-            
+            
             
              
-            
+            
         
         
         
diff --git a/packages/node_modules/@node-red/nodes/core/io/10-mqtt.html b/packages/node_modules/@node-red/nodes/core/io/10-mqtt.html
index 79e05f2e3..ccceca0af 100644
--- a/packages/node_modules/@node-red/nodes/core/io/10-mqtt.html
+++ b/packages/node_modules/@node-red/nodes/core/io/10-mqtt.html
@@ -135,13 +135,13 @@
         
     
                                      
     
                                      
-        
                                        
+