diff --git a/package.json b/package.json
index a1f87aab..94094989 100644
--- a/package.json
+++ b/package.json
@@ -90,6 +90,7 @@
     "caniuse-lite": "^1.0.30000745",
     "cross-env": "^5.0.2",
     "css-loader": "^0.28.7",
+    "cssnano": "^v4.0.0-rc.2",
     "deep-equal": "^1.0.1",
     "enzyme": "^3.0.0",
     "enzyme-adapter-react-15": "^1.0.0",
diff --git a/postcss.config.js b/postcss.config.js
index 62390d83..377a7b27 100644
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -12,5 +12,8 @@ module.exports = {
         },
       },
     }),
+    require('cssnano')({
+      preset: 'default',
+    }),
   ],
 };
diff --git a/src/backends/git-gateway/AuthenticationPage.css b/src/backends/git-gateway/AuthenticationPage.css
index 56400cfe..d71790be 100644
--- a/src/backends/git-gateway/AuthenticationPage.css
+++ b/src/backends/git-gateway/AuthenticationPage.css
@@ -1,31 +1,31 @@
-.root {
+.nc-gitGatewayAuthenticationPage-root {
   display: flex;
   align-items: center;
   justify-content: center;
   height: 100vh;
 }
 
-.card {
+.nc-gitGatewayAuthenticationPage-card {
   width: 350px;
   padding: 10px;
 }
 
-.card img {
+.nc-gitGatewayAuthenticationPage-card img {
   display: block;
   margin: auto;
   padding-bottom: 5px;
 }
 
-.errorMsg {
+.nc-gitGatewayAuthenticationPage-errorMsg {
   color: #dd0000;
 }
 
-.message {
+.nc-gitGatewayAuthenticationPage-message {
   font-size: 1.1em;
   margin: 20px 10px;
 }
 
-.button {
+.nc-gitGatewayAuthenticationPage-button {
   padding: .25em 1em;
   height: auto;
 }
diff --git a/src/backends/git-gateway/AuthenticationPage.js b/src/backends/git-gateway/AuthenticationPage.js
index 9962b117..c1cbc3e8 100644
--- a/src/backends/git-gateway/AuthenticationPage.js
+++ b/src/backends/git-gateway/AuthenticationPage.js
@@ -6,7 +6,6 @@ import { Notifs } from 'redux-notifications';
 import { Toast } from '../../components/UI/index';
 import { Card, Icon } from "../../components/UI";
 import logo from "./netlify_logo.svg";
-import styles from "./AuthenticationPage.css";
 
 let component = null;
 
@@ -94,24 +93,24 @@ export default class AuthenticationPage extends React.Component {
     const { error } = this.props;
 
     if (window.netlifyIdentity) {
-      return <section className={styles.root}>
+      return <section className="nc-gitGatewayAuthenticationPage-root">
         <Notifs CustomComponent={Toast} />
-        <Button className={styles.button} raised onClick={this.handleIdentity}>
+        <Button className="nc-gitGatewayAuthenticationPage-button" raised onClick={this.handleIdentity}>
           Login with Netlify Identity
         </Button>
       </section>
     }
 
     return (
-      <section className={styles.root}>
-        <Card className={styles.card}>
+      <section className="nc-gitGatewayAuthenticationPage-root">
+        <Card className="nc-gitGatewayAuthenticationPage-card">
           <form onSubmit={this.handleLogin}>
             <img src={logo} width={100} role="presentation" />
             {error && <p>
-              <span className={styles.errorMsg}>{error}</span>
+              <span className="nc-gitGatewayAuthenticationPage-errorMsg">{error}</span>
             </p>}
             {errors.server && <p>
-              <span className={styles.errorMsg}>{errors.server}</span>
+              <span className="nc-gitGatewayAuthenticationPage-errorMsg">{errors.server}</span>
             </p>}
             <Input
               type="text"
@@ -130,7 +129,7 @@ export default class AuthenticationPage extends React.Component {
               onChange={this.handleChange.bind(this, "password")} // eslint-disable-line
             />
             <Button
-              className={styles.button}
+              className="nc-gitGatewayAuthenticationPage-button"
               raised
             >
               <Icon type="login" /> Login
diff --git a/src/backends/github/AuthenticationPage.css b/src/backends/github/AuthenticationPage.css
index 949d9b7d..1465a12e 100644
--- a/src/backends/github/AuthenticationPage.css
+++ b/src/backends/github/AuthenticationPage.css
@@ -1,4 +1,4 @@
-.root {
+.nc-githubAuthenticationPage-root {
   display: flex;
   flex-flow: column nowrap;
   align-items: center;
@@ -6,7 +6,7 @@
   height: 100vh;
 }
 
-.button {
+.nc-githubAuthenticationPage-button {
   padding: .25em 1em;
   height: auto;
 }
diff --git a/src/backends/github/AuthenticationPage.js b/src/backends/github/AuthenticationPage.js
index 31ab5732..e7c1a0ac 100644
--- a/src/backends/github/AuthenticationPage.js
+++ b/src/backends/github/AuthenticationPage.js
@@ -5,7 +5,6 @@ import Authenticator from '../../lib/netlify-auth';
 import { Icon } from '../../components/UI';
 import { Notifs } from 'redux-notifications';
 import { Toast } from '../../components/UI/index';
-import styles from './AuthenticationPage.css';
 
 export default class AuthenticationPage extends React.Component {
   static propTypes = {
@@ -35,11 +34,11 @@ export default class AuthenticationPage extends React.Component {
     const { loginError } = this.state;
 
     return (
-      <section className={styles.root}>
+      <section className="nc-githubAuthenticationPage-root">
         <Notifs CustomComponent={Toast} />
         {loginError && <p>{loginError}</p>}
         <Button
-          className={styles.button}
+          className="nc-githubAuthenticationPage-button"
           raised
           onClick={this.handleLogin}
         >
diff --git a/src/backends/test-repo/AuthenticationPage.js b/src/backends/test-repo/AuthenticationPage.js
index 17b74bde..ad1aa5d0 100644
--- a/src/backends/test-repo/AuthenticationPage.js
+++ b/src/backends/test-repo/AuthenticationPage.js
@@ -4,7 +4,6 @@ import Input from "react-toolbox/lib/input";
 import Button from "react-toolbox/lib/button";
 import { Card, Icon } from "../../components/UI";
 import logo from "../git-gateway/netlify_logo.svg";
-import styles from "../git-gateway/AuthenticationPage.css";
 
 export default class AuthenticationPage extends React.Component {
   static propTypes = {
@@ -23,10 +22,10 @@ export default class AuthenticationPage extends React.Component {
   };
 
   render() {
-    return (<section className={styles.root}>
-      <Card className={styles.card}>
+    return (<section className="nc-gitGatewayAuthenticationPage-root">
+      <Card className="nc-gitGatewayAuthenticationPage-card">
         <img src={logo} width={100} role="presentation" />
-        <p className={styles.message}>This is a demo, enter your email to start</p>
+        <p className="nc-gitGatewayAuthenticationPage-message">This is a demo, enter your email to start</p>
         <Input
           type="text"
           label="Email"
@@ -35,7 +34,7 @@ export default class AuthenticationPage extends React.Component {
           onChange={this.handleEmailChange}
         />
         <Button
-          className={styles.button}
+          className="nc-gitGatewayAuthenticationPage-button"
           raised
           onClick={this.handleLogin}
         >
diff --git a/src/components/AppHeader/AppHeader.css b/src/components/AppHeader/AppHeader.css
index 2a93efb0..17062355 100644
--- a/src/components/AppHeader/AppHeader.css
+++ b/src/components/AppHeader/AppHeader.css
@@ -1,6 +1,4 @@
-@import '../UI/theme';
-
-.appBar {
+.nc-appHeader-appBar {
   padding: 8px 24px;
   height: auto;
   background-color: var(--backgroundAltColor);
@@ -9,18 +7,18 @@
 
 /* Gross stuff below, React Toolbox hacks */
 
-.homeLink,
-.iconMenu {
+.nc-appHeader-homeLink,
+.nc-appHeader-iconMenu {
   margin-left: 2%;
 }
 
-.homeLink .icon {
+.nc-appHeader-homeLink &icon {
   vertical-align: top;
 }
 
-.icon,
-.icon span,
-.leftIcon span {
+.nc-appHeader-icon,
+.nc-appHeader-icon span,
+.nc-appHeader-leftIcon span {
   /* stylelint-disable */
 
   color: var(--defaultColorLight) !important;
diff --git a/src/components/AppHeader/AppHeader.js b/src/components/AppHeader/AppHeader.js
index 4e7a14a1..38412f1d 100644
--- a/src/components/AppHeader/AppHeader.js
+++ b/src/components/AppHeader/AppHeader.js
@@ -8,7 +8,6 @@ import AppBar from "react-toolbox/lib/app_bar";
 import FontIcon from "react-toolbox/lib/font_icon";
 import FindBar from "../FindBar/FindBar";
 import { stringToRGB } from "../../lib/textHelper";
-import styles from "./AppHeader.css";
 
 export default class AppHeader extends React.Component {
 
@@ -58,19 +57,32 @@ export default class AppHeader extends React.Component {
       backgroundColor: `#${ stringToRGB(user.get("name")) }`,
     };
 
+    const theme = {
+      appBar: 'nc-appHeader-appBar',
+      homeLink: 'nc-appHeader-homeLink',
+      iconMenu: 'nc-appHeader-iconMenu',
+      icon: 'nc-appHeader-icon',
+      leftIcon: 'nc-appHeader-leftIcon',
+      base: 'nc-theme-base',
+      container: 'nc-theme-container',
+      rounded: 'nc-theme-rounded',
+      depth: 'nc-theme-depth',
+      clearfix: 'nc-theme-clearfix',
+    };
+
     return (
       <AppBar
         fixed
-        theme={styles}
+        theme={theme}
         leftIcon="menu"
         onLeftIconClick={toggleDrawer}
         onRightIconClick={this.handleRightIconClick}
       >
-        <Link to="/" className={styles.homeLink}>
-          <FontIcon value="home" className={styles.icon} />
+        <Link to="/" className="nc-appHeader-homeLink">
+          <FontIcon value="home" className="nc-appHeader-icon" />
         </Link>
         <IconMenu
-          theme={styles}
+          theme={theme}
           icon="add"
           onClick={this.handleCreateButtonClick}
           onHide={this.handleCreateMenuHide}
@@ -88,7 +100,7 @@ export default class AppHeader extends React.Component {
         </IconMenu>
         <FindBar runCommand={runCommand} />
         <Avatar style={avatarStyle} title={user.get("name")} image={user.get("avatar_url")} />
-        <IconMenu icon="settings" position="topRight" theme={styles}>
+        <IconMenu icon="settings" position="topRight" theme={theme}>
           <MenuItem onClick={onLogoutClick} value="log out" caption="Log Out" />
         </IconMenu>
       </AppBar>
diff --git a/src/components/ControlPanel/ControlPane.css b/src/components/ControlPanel/ControlPane.css
index b3c95378..7c6c11f3 100644
--- a/src/components/ControlPanel/ControlPane.css
+++ b/src/components/ControlPanel/ControlPane.css
@@ -1,42 +1,46 @@
-@import "../UI/theme";
+.nc-controlPane-root p {
+  font-size: 16px;
+}
 
-.control {
+.nc-controlPane-control {
   color: var(--textColor);
   position: relative;
   padding: 20px 0 10px 0;
   margin-top: 16px;
+}
 
-  & input,
-  & textarea,
-  & select,
-  & div[contenteditable=true] {
-    display: block;
-    width: 100%;
-    padding: 12px;
-    margin: 0;
-    border: var(--textFieldBorder);
-    border-radius: var(--borderRadius);
-    outline: 0;
-    box-shadow: none;
-    background-color: var(--controlBGColor);
-    font-size: 16px;
-    color: var(--textColor);
-    transition: border-color .3s ease;
 
-    &:focus,
-    &:active {
-      border-color: var(--primaryColor);
-    }
-  }
+.nc-controlPane-control input,
+.nc-controlPane-control textarea,
+.nc-controlPane-control select,
+.nc-controlPane-control div[contenteditable=true] {
+  display: block;
+  width: 100%;
+  padding: 12px;
+  margin: 0;
+  border: var(--textFieldBorder);
+  border-radius: var(--borderRadius);
+  outline: 0;
+  box-shadow: none;
+  background-color: var(--controlBGColor);
+  font-size: 16px;
+  color: var(--textColor);
+  transition: border-color .3s ease;
 
-  & input,
-  & textarea,
-  & select {
-    font-family: var(--fontFamilyMono);
+  &:focus,
+  &:active {
+    border-color: var(--primaryColor);
   }
 }
 
-.label {
+.nc-controlPane-control input,
+.nc-controlPane-control textarea,
+.nc-controlPane-control select {
+  font-family: var(--fontFamilyMono);
+}
+
+
+.nc-controlPane-label {
   display: block;
   color: var(--controlLabelColor);
   font-size: 12px;
@@ -44,18 +48,13 @@
   font-weight: 600;
 }
 
-.labelWithError {
-  composes: label;
+.nc-controlPane-labelWithError {
   color: #FF706F;
 }
 
-.errors {
+.nc-controlPane-errors {
   list-style-type: none;
   font-size: 10px;
   color: #FF706F;
   margin-bottom: 5px;
 }
-
-p {
-  font-size: 16px;
-}
diff --git a/src/components/ControlPanel/ControlPane.js b/src/components/ControlPanel/ControlPane.js
index 08f129e7..cbb56190 100644
--- a/src/components/ControlPanel/ControlPane.js
+++ b/src/components/ControlPanel/ControlPane.js
@@ -4,7 +4,6 @@ import { Map, fromJS } from 'immutable';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { resolveWidget } from '../Widgets';
 import ControlHOC from '../Widgets/ControlHOC';
-import styles from './ControlPane.css';
 
 function isHidden(field) {
   return field.get('widget') === 'hidden';
@@ -31,12 +30,12 @@ export default class ControlPane extends Component {
     const value = entry.getIn(['data', fieldName]);
     const metadata = fieldsMetaData.get(fieldName);
     const errors = fieldsErrors.get(fieldName);
-    const labelClass = errors ? styles.labelWithError : styles.label;
+    const labelClass = errors ? 'nc-controlPane-label nc-controlPane-labelWithError' : 'nc-controlPane-label';
     if (entry.size === 0 || entry.get('partial') === true) return null;
     return (
-      <div className={styles.control}>
+      <div className="nc-controlPane-control">
         <label className={labelClass} htmlFor={fieldName}>{field.get('label')}</label>
-        <ul className={styles.errors}>
+        <ul className="nc-controlPane-errors">
           {
             errors && errors.map(error => (
               typeof error === 'string' && <li key={error.trim().replace(/[^a-z0-9]+/gi, '-')}>{error}</li>
@@ -66,13 +65,13 @@ export default class ControlPane extends Component {
     }
 
     return (
-      <div>
+      <div className="nc-controlPane-root">
         {
           fields.map((field, i) => {
             if (isHidden(field)) {
               return null;
             }
-            return <div key={i} className={styles.widget}>{this.controlFor(field)}</div>;
+            return <div key={i} className="nc-controlPane-widget">{this.controlFor(field)}</div>;
           })
         }
       </div>
diff --git a/src/components/EntryEditor/EntryEditor.css b/src/components/EntryEditor/EntryEditor.css
index 2ff69ba5..d4d0a665 100644
--- a/src/components/EntryEditor/EntryEditor.css
+++ b/src/components/EntryEditor/EntryEditor.css
@@ -1,11 +1,9 @@
-@import '../UI/theme';
-
 /* Quick fix for preview pane not fully displaying in Safari */
-:global(.SplitPane .Pane) {
+.SplitPane .Pane {
   height: 100%;
 }
 
-.previewToggle {
+.nc-entryEditor-previewToggle {
   position: absolute;
   top: 8px;
   right: 40px;
@@ -13,11 +11,11 @@
   opacity: 0.8;
 }
 
-.previewToggleShow {
+.nc-entryEditor-previewToggleShow {
   right: 60px;
 }
 
-.controlPane {
+.nc-entryEditor-controlPane {
   overflow: auto;
   padding: 20px 20px 0;
   height: calc(100% - 55px);
@@ -25,15 +23,15 @@
   background-color: var(--backgroundColor);
 }
 
-.previewPane {
+.nc-entryEditor-previewPane {
   height: calc(100% - 55px);
 }
 
-.blocker > * {
+.nc-entryEditor-blocker > * {
   pointer-events: none;
 }
 
-.footer {
+.nc-entryEditor-footer {
   height: 55px;
   padding: 10px 20px;
   position: absolute;
@@ -46,13 +44,13 @@
   text-align: right;
 }
 
-.noPreviewEditorContainer {
+.nc-entryEditor-noPreviewEditorContainer {
   position: absolute;
   left: 0;
   right: 0;
   height: 100%;
 }
 
-.ProseMirror {
+.nc-entryEditor-ProseMirror {
   border: var(--textFieldBorder);
 }
diff --git a/src/components/EntryEditor/EntryEditor.js b/src/components/EntryEditor/EntryEditor.js
index 2b688963..0accd4f7 100644
--- a/src/components/EntryEditor/EntryEditor.js
+++ b/src/components/EntryEditor/EntryEditor.js
@@ -9,8 +9,6 @@ import ControlPane from '../ControlPanel/ControlPane';
 import PreviewPane from '../PreviewPane/PreviewPane';
 import Toolbar from './EntryEditorToolbar';
 import { StickyContext } from '../UI/Sticky/Sticky';
-import styles from './EntryEditor.css';
-import stickyStyles from '../UI/Sticky/Sticky.css';
 
 const PREVIEW_VISIBLE = 'cms.preview-visible';
 
@@ -63,7 +61,7 @@ class EntryEditor extends Component {
 
     const togglePreviewButton = (
       <Button
-        className={classnames(styles.previewToggle, { previewVisible: styles.previewToggleShow })}
+        className={classnames('nc-entryEditor-previewToggle', { previewVisible: 'nc-entryEditor-previewToggleShow' })}
         onClick={this.handleTogglePreview}
         icon={previewVisible ? 'visibility_off' : 'visibility'}
         floating
@@ -73,7 +71,7 @@ class EntryEditor extends Component {
 
     const editor = (
       <StickyContext
-        className={classnames(styles.controlPane, { [styles.blocker]: showEventBlocker })}
+        className={classnames('nc-entryEditor-controlPane', { ['nc-entryEditor-blocker']: showEventBlocker })}
         registerListener={fn => this.updateStickyContext = fn}
       >
         { collectionPreviewEnabled ? togglePreviewButton : null }
@@ -95,7 +93,7 @@ class EntryEditor extends Component {
 
     const editorWithPreview = (
       <ScrollSync>
-        <div className={styles.container}>
+        <div className="nc-entryEditor-container">
           <SplitPane
             defaultSize="50%"
             onDragStarted={this.handleSplitPaneDragStart}
@@ -103,7 +101,7 @@ class EntryEditor extends Component {
             onChange={this.updateStickyContext}
           >
             <ScrollSyncPane>{editor}</ScrollSyncPane>
-            <div className={classnames(styles.previewPane, { [styles.blocker]: showEventBlocker })}>
+            <div className={classnames('nc-entryEditor-previewPane', { ['nc-entryEditor-blocker']: showEventBlocker })}>
               <PreviewPane
                 collection={collection}
                 entry={entry}
@@ -118,15 +116,15 @@ class EntryEditor extends Component {
     );
 
     const editorWithoutPreview = (
-      <div className={styles.noPreviewEditorContainer}>
+      <div className="nc-entryEditor-noPreviewEditorContainer">
         {editor}
       </div>
     );
 
     return (
-      <div className={styles.root}>
+      <div className="nc-entryEditor-root">
         { collectionPreviewEnabled && this.state.previewVisible ? editorWithPreview : editorWithoutPreview }
-        <div className={styles.footer}>
+        <div className="nc-entryEditor-footer">
           <Toolbar
             isPersisting={entry.get('isPersisting')}
             onPersist={this.handleOnPersist}
diff --git a/src/components/EntryListing/EntryListing.css b/src/components/EntryListing/EntryListing.css
index 9a079ce3..34ff7d71 100644
--- a/src/components/EntryListing/EntryListing.css
+++ b/src/components/EntryListing/EntryListing.css
@@ -1,4 +1,4 @@
-.card {
+.nc-entryListing-card {
   flex: 0 300px;
   overflow: hidden;
   margin-bottom: 16px;
@@ -8,12 +8,12 @@
   cursor: pointer;
 }
 
-.card:hover {
+.nc-entryListing-card:hover {
   background: #f8f9fa;
   transform: translateY(-8px);
 }
 
-.cardImage {
+.nc-entryListing-cardImage {
   margin: -16px -24px 16px -24px;
   width: calc(100% + 24px + 24px);
   height: 135px;
@@ -22,17 +22,17 @@
   background-repeat: no-repeat;
 }
 
-.cardsGrid {
+.nc-entryListing-cardsGrid {
   display: flex;
   flex-flow: row wrap;
   margin-left: -16px;
 }
 
-.cardList {
+.nc-entryListing-cardList {
   margin-bottom: 1.1rem;
 }
 
-.cardListLabel {
+.nc-entryListing-cardListLabel {
   white-space: nowrap;
   font-weight: bold;
 }
diff --git a/src/components/EntryListing/EntryListing.js b/src/components/EntryListing/EntryListing.js
index 84c717ff..5009d010 100644
--- a/src/components/EntryListing/EntryListing.js
+++ b/src/components/EntryListing/EntryListing.js
@@ -7,7 +7,6 @@ import history from '../../routing/history';
 import { resolvePath } from '../../lib/pathHelper';
 import { selectFields, selectInferedField } from '../../reducers/collections';
 import { Card } from '../UI';
-import styles from './EntryListing.css';
 
 export default class EntryListing extends React.Component {
   static propTypes = {
@@ -50,17 +49,17 @@ export default class EntryListing extends React.Component {
       <Card
         key={entry.get('slug')}
         onClick={history.push.bind(this, path)} // eslint-disable-line
-        className={styles.card}
+        className="nc-entryListing-card"
       >
         { image &&
-        <header className={styles.cardImage} style={{ backgroundImage: `url(${ image })` }} />
+        <header className="nc-entryListing-cardImage" style={{ backgroundImage: `url(${ image })` }} />
         }
         <h1>{title}</h1>
         {inferedFields.descriptionField ?
           <p>{entry.getIn(['data', inferedFields.descriptionField])}</p>
           : inferedFields.remainingFields && inferedFields.remainingFields.map(f => (
-            <p key={f.get('name')} className={styles.cardList}>
-              <span className={styles.cardListLabel}>{f.get('label')}:</span>{' '}
+            <p key={f.get('name')} className="nc-entryListing-cardList">
+              <span className="nc-entryListing-cardListLabel">{f.get('label')}:</span>{' '}
               { (entry.getIn(['data', f.get('name')]) || '').toString() }
             </p>
           ))
@@ -88,7 +87,7 @@ export default class EntryListing extends React.Component {
     return (
       <div>
         <h1>{children}</h1>
-        <div className={styles.cardsGrid}>
+        <div className="nc-entryListing-cardsGrid">
           { this.renderCards() }
           <Waypoint onEnter={this.handleLoadMore} />
         </div>
diff --git a/src/components/FindBar/FindBar.css b/src/components/FindBar/FindBar.css
index 50f0a872..057a3fd5 100644
--- a/src/components/FindBar/FindBar.css
+++ b/src/components/FindBar/FindBar.css
@@ -1,11 +1,9 @@
-@import '../UI/theme';
-
-.root {
+.nc-findBar-root {
   flex: 1;
   background-color: var(--backgroundAltColor);
 }
 
-.inputField {
+.nc-findBar-inputField {
   width: 100%;
   max-width: 500px;
   display: block;
diff --git a/src/components/FindBar/FindBar.js b/src/components/FindBar/FindBar.js
index 727b6d70..eb7e6f69 100644
--- a/src/components/FindBar/FindBar.js
+++ b/src/components/FindBar/FindBar.js
@@ -1,6 +1,5 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
-import styles from './FindBar.css';
 
 export const SEARCH = 'SEARCH';
 const PLACEHOLDER = 'Search entry titles...';
@@ -38,11 +37,11 @@ class FindBar extends Component {
 
   render() {
     return (
-      <div className={styles.root}>
+      <div className="nc-findBar-root">
         <label htmlFor="searchInput" />
         <input
           id="searchInput"
-          className={styles.inputField}
+          className="nc-findBar-inputField"
           ref={c => this._input = c} // eslint-disable-line no-return-assign
           onChange={this.handleChange}
           onKeyDown={this.handleKeyDown}
diff --git a/src/components/PreviewPane/PreviewPane.css b/src/components/PreviewPane/PreviewPane.css
index 6bf62a0a..e91d1e10 100644
--- a/src/components/PreviewPane/PreviewPane.css
+++ b/src/components/PreviewPane/PreviewPane.css
@@ -1,4 +1,4 @@
-.frame {
+.nc-previewPane-frame {
   width: 100%;
   height: 100%;
   border: none;
diff --git a/src/components/PreviewPane/PreviewPane.js b/src/components/PreviewPane/PreviewPane.js
index eb868e28..e14bbe4c 100644
--- a/src/components/PreviewPane/PreviewPane.js
+++ b/src/components/PreviewPane/PreviewPane.js
@@ -10,7 +10,6 @@ import { INFERABLE_FIELDS } from '../../constants/fieldInference';
 import PreviewContent from './PreviewContent.js';
 import PreviewHOC from '../Widgets/PreviewHOC';
 import Preview from './Preview';
-import styles from './PreviewPane.css';
 
 export default class PreviewPane extends React.Component {
 
@@ -142,11 +141,11 @@ export default class PreviewPane extends React.Component {
        .map((style, i) => <link key={i} href={style} type="text/css" rel="stylesheet" />);
 
     if (!collection) {
-      return <Frame className={styles.frame} head={styleEls} />;
+      return <Frame className="nc-previewPane-frame" head={styleEls} />;
     }
 
     return (<Frame
-      className={styles.frame}
+      className="nc-previewPane-frame"
       head={styleEls}
       initialContent={`
 <!DOCTYPE html>
diff --git a/src/components/UI/Sticky/Sticky.css b/src/components/UI/Sticky/Sticky.css
index cf4efb63..16f059d6 100644
--- a/src/components/UI/Sticky/Sticky.css
+++ b/src/components/UI/Sticky/Sticky.css
@@ -1,19 +1,18 @@
-.stickyContainer {
+.nc-sticky-stickyContainer {
   position: relative !important;
 }
 
-.sticky {
+.nc-sticky-sticky {
   width: 100%;
 }
 
-.stickyActive:not(.stickyAtBottom) {
+.nc-sticky-stickyActive:not(.nc-sticky-stickyAtBottom) {
   position: fixed !important;
   top: 54px !important;
 }
 
-.stickyAtBottom {
+.nc-sticky-stickyAtBottom {
   position: absolute !important;
   top: auto !important;
   bottom: 30px !important;
 }
-
diff --git a/src/components/UI/Sticky/Sticky.js b/src/components/UI/Sticky/Sticky.js
index 766068c0..345452d3 100644
--- a/src/components/UI/Sticky/Sticky.js
+++ b/src/components/UI/Sticky/Sticky.js
@@ -2,7 +2,6 @@ import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import classnames from 'classnames';
 import { partial, without } from 'lodash';
-import styles from './Sticky.css';
 
 /**
  * Sticky is a collection of three components meant to facilitate "sticky" UI
@@ -147,7 +146,7 @@ export class StickyContainer extends Component {
     return (
       <div
         id={this.context.string}
-        className={classnames(this.props.className, styles.stickyContainer)}
+        className={classnames(this.props.className, 'nc-sticky-stickyContainer')}
         ref={(ref) => { this.ref = ref }}
       >
         {this.props.children}
@@ -206,11 +205,11 @@ export class Sticky extends Component {
         <div
           className={classnames(
             props.className,
-            styles.sticky,
+            'nc-sticky-sticky',
             {
-              [styles.stickyActive]: state.shouldStick,
+              ['nc-sticky-stickyActive']: state.shouldStick,
               [props.classNameActive]: state.shouldStick,
-              [styles.stickyAtBottom]: state.shouldStickAtBottom,
+              ['nc-sticky-stickyAtBottom']: state.shouldStickAtBottom,
             },
           )}
           style={
diff --git a/src/components/UI/card/Card.css b/src/components/UI/card/Card.css
index c63fb455..04f7a812 100644
--- a/src/components/UI/card/Card.css
+++ b/src/components/UI/card/Card.css
@@ -1,50 +1,47 @@
-@import '../theme.css';
-
-.card {
-  composes: base container rounded;
+.nc-card-card {
   overflow: hidden;
   border: var(--textFieldBorder);
   transition: all .1s ease-in-out;
   transform: translateY(0);
   padding: 16px 24px;
-}
 
-.card > iframe,
-.card > video,
-.card > img {
-  margin: -16px -24px 16px;
-  width: calc(100% + 16px + 16px);
-}
+  & > iframe,
+  & > video,
+  & > img {
+    margin: -16px -24px 16px;
+    width: calc(100% + 16px + 16px);
+  }
 
-.card h1 {
-  font-size: 16px;
-  font-weight: 600;
-  letter-spacing: 0;
-  line-height: 24px;
-  margin: 0;
-  padding: 0;
-  border: none;
-  color: var(--defaultColor);
-}
+  & h1 {
+    font-size: 16px;
+    font-weight: 600;
+    letter-spacing: 0;
+    line-height: 24px;
+    margin: 0;
+    padding: 0;
+    border: none;
+    color: var(--defaultColor);
+  }
 
-.card p {
-  font-size: 14px;
-  font-weight: 400;
-  letter-spacing: 0;
-  line-height: 24px;
-  padding: 0;
-  color: var(--textMutedColor);
-}
+  & p {
+    font-size: 14px;
+    font-weight: 400;
+    letter-spacing: 0;
+    line-height: 24px;
+    padding: 0;
+    color: var(--textMutedColor);
+  }
 
-.card > *:not(iframe, video, img, header, footer) {
-  margin-right: 10px;
-  margin-left: 10px;
-}
+  & > *:not(iframe, video, img, header, footer) {
+    margin-right: 10px;
+    margin-left: 10px;
+  }
 
-.card > *:not(iframe, video, img, header, footer):first-child {
-  margin-top: 10px;
-}
+  & > *:not(iframe, video, img, header, footer):first-child {
+    margin-top: 10px;
+  }
 
-.card > *:not(iframe, video, img, header, footer):last-child {
-  margin-bottom: 10px;
+  & > *:not(iframe, video, img, header, footer):last-child {
+    margin-bottom: 10px;
+  }
 }
diff --git a/src/components/UI/card/Card.js b/src/components/UI/card/Card.js
index cdbd0785..92fdd6c4 100644
--- a/src/components/UI/card/Card.js
+++ b/src/components/UI/card/Card.js
@@ -1,6 +1,7 @@
 import React from 'react';
-import styles from './Card.css';
+
+const themeClasses = `nc-theme-base nc-theme-container nc-theme-rounded`;
 
 export default function Card({ style, className = '', onClick, children }) {
-  return <div className={`${styles.card} ${className}`} style={style} onClick={onClick}>{children}</div>;
+  return <div className={`${ themeClasses } nc-card-card ${ className }`} style={style} onClick={onClick}>{children}</div>;
 }
diff --git a/src/components/UI/icon/Icon.css b/src/components/UI/icon/Icon.css
index af041851..eb68e3ac 100644
--- a/src/components/UI/icon/Icon.css
+++ b/src/components/UI/icon/Icon.css
@@ -4,17 +4,17 @@
 
 @font-face {
   font-family: 'icons';
-  src: url('./icons.eot');
-  src: url('./icons.eot#iefix') format('embedded-opentype'),
-       url('./icons.woff2') format('woff2'),
-       url('./icons.woff') format('woff'),
-       url('./icons.ttf') format('truetype'),
-       url('./icons.svg#icons') format('svg');
+  src: url('./components/UI/icon/icons.eot');
+  src: url('./components/UI/icon/icons.eot#iefix') format('embedded-opentype'),
+       url('./components/UI/icon/icons.woff2') format('woff2'),
+       url('./components/UI/icon/icons.woff') format('woff'),
+       url('./components/UI/icon/icons.ttf') format('truetype'),
+       url('./components/UI/icon/icons.svg#icons') format('svg');
   font-weight: normal;
   font-style: normal;
 }
 
-.root {
+.nc-icon-root {
   font-family: 'icons';
   font-style: normal;
   font-weight: normal;
@@ -32,321 +32,321 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
-.bold:before { content: '\e800'; } /* '' */
-.italic:before { content: '\e801'; } /* '' */
-.list:before { content: '\e802'; } /* '' */
-.font:before { content: '\e803'; } /* '' */
-.text-height:before { content: '\e804'; } /* '' */
-.text-width:before { content: '\e805'; } /* '' */
-.align-left:before { content: '\e806'; } /* '' */
-.align-center:before { content: '\e807'; } /* '' */
-.align-right:before { content: '\e808'; } /* '' */
-.align-justify:before { content: '\e809'; } /* '' */
-.indent-left:before { content: '\e80a'; } /* '' */
-.indent-right:before { content: '\e80b'; } /* '' */
-.note:before { content: '\e80c'; } /* '' */
-.note-beamed:before { content: '\e80d'; } /* '' */
-.music:before { content: '\e80e'; } /* '' */
-.search:before { content: '\e80f'; } /* '' */
-.flashlight:before { content: '\e810'; } /* '' */
-.mail:before { content: '\e811'; } /* '' */
-.heart:before { content: '\e812'; } /* '' */
-.heart-empty:before { content: '\e813'; } /* '' */
-.star:before { content: '\e814'; } /* '' */
-.star-empty:before { content: '\e815'; } /* '' */
-.user:before { content: '\e816'; } /* '' */
-.users:before { content: '\e817'; } /* '' */
-.user-add:before { content: '\e818'; } /* '' */
-.video-alt:before { content: '\e819'; } /* '' */
-.picture-alt:before { content: '\e81a'; } /* '' */
-.camera:before { content: '\e81b'; } /* '' */
-.layout:before { content: '\e81c'; } /* '' */
-.menu:before { content: '\e81d'; } /* '' */
-.check:before { content: '\e81e'; } /* '' */
-.cancel:before { content: '\e81f'; } /* '' */
-.leaf:before { content: '\e820'; } /* '' */
-.lifebuoy:before { content: '\e821'; } /* '' */
-.water:before { content: '\e822'; } /* '' */
-.droplet:before { content: '\e823'; } /* '' */
-.cc:before { content: '\e824'; } /* '' */
-.cc-by:before { content: '\e825'; } /* '' */
-.lamp:before { content: '\e826'; } /* '' */
-.light-down:before { content: '\e827'; } /* '' */
-.light-up:before { content: '\e828'; } /* '' */
-.adjust:before { content: '\e829'; } /* '' */
-.block:before { content: '\e82a'; } /* '' */
-.resize-full:before { content: '\e82b'; } /* '' */
-.resize-small:before { content: '\e82c'; } /* '' */
-.popup:before { content: '\e82d'; } /* '' */
-.publish:before { content: '\e82e'; } /* '' */
-.window:before { content: '\e82f'; } /* '' */
-.arrow-combo:before { content: '\e830'; } /* '' */
-.down-circled:before { content: '\e831'; } /* '' */
-.left-circled:before { content: '\e832'; } /* '' */
-.right-circled:before { content: '\e833'; } /* '' */
-.up-circled:before { content: '\e834'; } /* '' */
-.down-open:before { content: '\e835'; } /* '' */
-.left-open:before { content: '\e836'; } /* '' */
-.right-open:before { content: '\e837'; } /* '' */
-.up-open:before { content: '\e838'; } /* '' */
-.down-open-mini:before { content: '\e839'; } /* '' */
-.left-open-mini:before { content: '\e83a'; } /* '' */
-.right-open-mini:before { content: '\e83b'; } /* '' */
-.up-open-mini:before { content: '\e83c'; } /* '' */
-.down-open-big:before { content: '\e83d'; } /* '' */
-.left-open-big:before { content: '\e83e'; } /* '' */
-.right-open-big:before { content: '\e83f'; } /* '' */
-.up-open-big:before { content: '\e840'; } /* '' */
-.down:before { content: '\e841'; } /* '' */
-.left:before { content: '\e842'; } /* '' */
-.right:before { content: '\e843'; } /* '' */
-.up:before { content: '\e844'; } /* '' */
-.down-dir:before { content: '\e845'; } /* '' */
-.left-dir:before { content: '\e846'; } /* '' */
-.right-dir:before { content: '\e847'; } /* '' */
-.up-dir:before { content: '\e848'; } /* '' */
-.down-bold:before { content: '\e849'; } /* '' */
-.left-bold:before { content: '\e84a'; } /* '' */
-.right-bold:before { content: '\e84b'; } /* '' */
-.up-bold:before { content: '\e84c'; } /* '' */
-.down-thin:before { content: '\e84d'; } /* '' */
-.left-thin:before { content: '\e84e'; } /* '' */
-.right-thin:before { content: '\e84f'; } /* '' */
-.up-thin:before { content: '\e850'; } /* '' */
-.ccw:before { content: '\e851'; } /* '' */
-.cw:before { content: '\e852'; } /* '' */
-.arrows-ccw:before { content: '\e853'; } /* '' */
-.level-down:before { content: '\e854'; } /* '' */
-.level-up:before { content: '\e855'; } /* '' */
-.shuffle:before { content: '\e856'; } /* '' */
-.loop:before { content: '\e857'; } /* '' */
-.switch:before { content: '\e858'; } /* '' */
-.play:before { content: '\e859'; } /* '' */
-.stop:before { content: '\e85a'; } /* '' */
-.pause:before { content: '\e85b'; } /* '' */
-.record:before { content: '\e85c'; } /* '' */
-.to-end:before { content: '\e85d'; } /* '' */
-.to-start:before { content: '\e85e'; } /* '' */
-.fast-forward:before { content: '\e85f'; } /* '' */
-.fast-backward:before { content: '\e860'; } /* '' */
-.progress-0:before { content: '\e861'; } /* '' */
-.progress-alt:before { content: '\e862'; } /* '' */
-.progress-2:before { content: '\e863'; } /* '' */
-.progress-3:before { content: '\e864'; } /* '' */
-.target:before { content: '\e865'; } /* '' */
-.palette:before { content: '\e866'; } /* '' */
-.list-alt:before { content: '\e867'; } /* '' */
-.list-add:before { content: '\e868'; } /* '' */
-.signal:before { content: '\e869'; } /* '' */
-.trophy:before { content: '\e86a'; } /* '' */
-.battery:before { content: '\e86b'; } /* '' */
-.back-in-time:before { content: '\e86c'; } /* '' */
-.monitor:before { content: '\e86d'; } /* '' */
-.mobile:before { content: '\e86e'; } /* '' */
-.network:before { content: '\e86f'; } /* '' */
-.cd:before { content: '\e870'; } /* '' */
-.inbox:before { content: '\e871'; } /* '' */
-.install:before { content: '\e872'; } /* '' */
-.globe:before { content: '\e873'; } /* '' */
-.cloud:before { content: '\e874'; } /* '' */
-.cloud-thunder:before { content: '\e875'; } /* '' */
-.flash:before { content: '\e876'; } /* '' */
-.moon:before { content: '\e877'; } /* '' */
-.mouse:before { content: '\e878'; } /* '' */
-.briefcase:before { content: '\e879'; } /* '' */
-.suitcase:before { content: '\e87a'; } /* '' */
-.dot:before { content: '\e87b'; } /* '' */
-.dot-2:before { content: '\e87c'; } /* '' */
-.dot-3:before { content: '\e87d'; } /* '' */
-.brush:before { content: '\e87e'; } /* '' */
-.magnet:before { content: '\e87f'; } /* '' */
-.infinity:before { content: '\e880'; } /* '' */
-.erase:before { content: '\e881'; } /* '' */
-.chart-pie:before { content: '\e882'; } /* '' */
-.chart-line:before { content: '\e883'; } /* '' */
-.chart-bar:before { content: '\e884'; } /* '' */
-.chart-area:before { content: '\e885'; } /* '' */
-.tape:before { content: '\e886'; } /* '' */
-.graduation-cap:before { content: '\e887'; } /* '' */
-.air:before { content: '\e888'; } /* '' */
-.credit-card:before { content: '\e889'; } /* '' */
-.floppy:before { content: '\e88a'; } /* '' */
-.clipboard:before { content: '\e88b'; } /* '' */
-.megaphone:before { content: '\e88c'; } /* '' */
-.database:before { content: '\e88d'; } /* '' */
-.drive:before { content: '\e88e'; } /* '' */
-.bucket:before { content: '\e88f'; } /* '' */
-.thermometer:before { content: '\e890'; } /* '' */
-.key:before { content: '\e891'; } /* '' */
-.flow-cascade:before { content: '\e892'; } /* '' */
-.flow-branch:before { content: '\e893'; } /* '' */
-.flow-tree:before { content: '\e894'; } /* '' */
-.flow-line:before { content: '\e895'; } /* '' */
-.flow-parallel:before { content: '\e896'; } /* '' */
-.rocket:before { content: '\e897'; } /* '' */
-.cc-nc:before { content: '\e898'; } /* '' */
-.cc-nc-eu:before { content: '\e899'; } /* '' */
-.cc-nc-jp:before { content: '\e89a'; } /* '' */
-.cc-sa:before { content: '\e89b'; } /* '' */
-.cc-nd:before { content: '\e89c'; } /* '' */
-.cc-pd:before { content: '\e89d'; } /* '' */
-.cc-zero:before { content: '\e89e'; } /* '' */
-.cc-share:before { content: '\e89f'; } /* '' */
-.cc-remix:before { content: '\e8a0'; } /* '' */
-.flight:before { content: '\e8a1'; } /* '' */
-.paper-plane:before { content: '\e8a2'; } /* '' */
-.language:before { content: '\e8a3'; } /* '' */
-.ticket:before { content: '\e8a4'; } /* '' */
-.gauge:before { content: '\e8a5'; } /* '' */
-.traffic-cone:before { content: '\e8a6'; } /* '' */
-.cancel-circled:before { content: '\e8a7'; } /* '' */
-.cancel-squared:before { content: '\e8a8'; } /* '' */
-.plus:before { content: '\e8a9'; } /* '' */
-.plus-circled:before { content: '\e8aa'; } /* '' */
-.plus-squared:before { content: '\e8ab'; } /* '' */
-.minus:before { content: '\e8ac'; } /* '' */
-.minus-circled:before { content: '\e8ad'; } /* '' */
-.minus-squared:before { content: '\e8ae'; } /* '' */
-.help:before { content: '\e8af'; } /* '' */
-.help-circled:before { content: '\e8b0'; } /* '' */
-.info:before { content: '\e8b1'; } /* '' */
-.info-circled:before { content: '\e8b2'; } /* '' */
-.back:before { content: '\e8b3'; } /* '' */
-.home:before { content: '\e8b4'; } /* '' */
-.link:before { content: '\e8b5'; } /* '' */
-.attach:before { content: '\e8b6'; } /* '' */
-.lock:before { content: '\e8b7'; } /* '' */
-.lock-open:before { content: '\e8b8'; } /* '' */
-.eye:before { content: '\e8b9'; } /* '' */
-.tag:before { content: '\e8ba'; } /* '' */
-.bookmark:before { content: '\e8bb'; } /* '' */
-.bookmarks:before { content: '\e8bc'; } /* '' */
-.flag:before { content: '\e8bd'; } /* '' */
-.thumbs-up:before { content: '\e8be'; } /* '' */
-.thumbs-down:before { content: '\e8bf'; } /* '' */
-.download:before { content: '\e8c0'; } /* '' */
-.upload:before { content: '\e8c1'; } /* '' */
-.upload-cloud:before { content: '\e8c2'; } /* '' */
-.reply:before { content: '\e8c3'; } /* '' */
-.reply-all:before { content: '\e8c4'; } /* '' */
-.forward:before { content: '\e8c5'; } /* '' */
-.quote:before { content: '\e8c6'; } /* '' */
-.code:before { content: '\e8c7'; } /* '' */
-.export:before { content: '\e8c8'; } /* '' */
-.pencil:before { content: '\e8c9'; } /* '' */
-.feather:before { content: '\e8ca'; } /* '' */
-.print:before { content: '\e8cb'; } /* '' */
-.retweet:before { content: '\e8cc'; } /* '' */
-.keyboard:before { content: '\e8cd'; } /* '' */
-.comment:before { content: '\e8ce'; } /* '' */
-.chat:before { content: '\e8cf'; } /* '' */
-.bell:before { content: '\e8d0'; } /* '' */
-.attention:before { content: '\e8d1'; } /* '' */
-.alert:before { content: '\e8d2'; } /* '' */
-.vcard:before { content: '\e8d3'; } /* '' */
-.address:before { content: '\e8d4'; } /* '' */
-.location:before { content: '\e8d5'; } /* '' */
-.map:before { content: '\e8d6'; } /* '' */
-.direction:before { content: '\e8d7'; } /* '' */
-.compass:before { content: '\e8d8'; } /* '' */
-.cup:before { content: '\e8d9'; } /* '' */
-.trash:before { content: '\e8da'; } /* '' */
-.doc:before { content: '\e8db'; } /* '' */
-.docs:before { content: '\e8dc'; } /* '' */
-.doc-landscape:before { content: '\e8dd'; } /* '' */
-.doc-text:before { content: '\e8de'; } /* '' */
-.doc-text-inv:before { content: '\e8df'; } /* '' */
-.newspaper:before { content: '\e8e0'; } /* '' */
-.book-open:before { content: '\e8e1'; } /* '' */
-.book:before { content: '\e8e2'; } /* '' */
-.folder:before { content: '\e8e3'; } /* '' */
-.archive:before { content: '\e8e4'; } /* '' */
-.box:before { content: '\e8e5'; } /* '' */
-.rss:before { content: '\e8e6'; } /* '' */
-.phone:before { content: '\e8e7'; } /* '' */
-.cog:before { content: '\e8e8'; } /* '' */
-.tools:before { content: '\e8e9'; } /* '' */
-.share:before { content: '\e8ea'; } /* '' */
-.shareable:before { content: '\e8eb'; } /* '' */
-.basket:before { content: '\e8ec'; } /* '' */
-.bag:before { content: '\e8ed'; } /* '' */
-.calendar:before { content: '\e8ee'; } /* '' */
-.login:before { content: '\e8ef'; } /* '' */
-.logout:before { content: '\e8f0'; } /* '' */
-.mic:before { content: '\e8f1'; } /* '' */
-.mute:before { content: '\e8f2'; } /* '' */
-.sound:before { content: '\e8f3'; } /* '' */
-.volume:before { content: '\e8f4'; } /* '' */
-.clock:before { content: '\e8f5'; } /* '' */
-.hourglass:before { content: '\e8f6'; } /* '' */
-.link-alt:before { content: '\e8f7'; } /* '' */
-.video:before { content: '\e8f8'; } /* '' */
-.h1:before { content: '\e8f9'; } /* '' */
-.picture:before { content: '\e8fa'; } /* '' */
-.scissors:before { content: '\e8fb'; } /* '' */
-.h2:before { content: '\e8fc'; } /* '' */
-.list-bullet:before { content: '\f0ca'; } /* '' */
-.list-numbered:before { content: '\f0cb'; } /* '' */
-.strike:before { content: '\f0cc'; } /* '' */
-.underline:before { content: '\f0cd'; } /* '' */
-.table:before { content: '\f0ce'; } /* '' */
-.columns:before { content: '\f0db'; } /* '' */
-.paste:before { content: '\f0ea'; } /* '' */
-.quote-left:before { content: '\f10d'; } /* '' */
-.quote-right:before { content: '\f10e'; } /* '' */
-.code-alt:before { content: '\f121'; } /* '' */
-.crop:before { content: '\f125'; } /* '' */
-.unlink:before { content: '\f127'; } /* '' */
-.superscript:before { content: '\f12b'; } /* '' */
-.subscript:before { content: '\f12c'; } /* '' */
-.header:before { content: '\f1dc'; } /* '' */
-.paragraph:before { content: '\f1dd'; } /* '' */
-.github:before { content: '\f300'; } /* '' */
-.github-circled:before { content: '\f301'; } /* '' */
-.flickr:before { content: '\f303'; } /* '' */
-.flickr-circled:before { content: '\f304'; } /* '' */
-.vimeo:before { content: '\f306'; } /* '' */
-.vimeo-circled:before { content: '\f307'; } /* '' */
-.twitter:before { content: '\f309'; } /* '' */
-.twitter-circled:before { content: '\f30a'; } /* '' */
-.facebook:before { content: '\f30c'; } /* '' */
-.facebook-circled:before { content: '\f30d'; } /* '' */
-.facebook-squared:before { content: '\f30e'; } /* '' */
-.gplus:before { content: '\f30f'; } /* '' */
-.gplus-circled:before { content: '\f310'; } /* '' */
-.pinterest:before { content: '\f312'; } /* '' */
-.pinterest-circled:before { content: '\f313'; } /* '' */
-.tumblr:before { content: '\f315'; } /* '' */
-.tumblr-circled:before { content: '\f316'; } /* '' */
-.linkedin:before { content: '\f318'; } /* '' */
-.linkedin-circled:before { content: '\f319'; } /* '' */
-.dribbble:before { content: '\f31b'; } /* '' */
-.dribbble-circled:before { content: '\f31c'; } /* '' */
-.stumbleupon:before { content: '\f31e'; } /* '' */
-.stumbleupon-circled:before { content: '\f31f'; } /* '' */
-.lastfm:before { content: '\f321'; } /* '' */
-.lastfm-circled:before { content: '\f322'; } /* '' */
-.rdio:before { content: '\f324'; } /* '' */
-.rdio-circled:before { content: '\f325'; } /* '' */
-.spotify:before { content: '\f327'; } /* '' */
-.spotify-circled:before { content: '\f328'; } /* '' */
-.qq:before { content: '\f32a'; } /* '' */
-.instagram:before { content: '\f32d'; } /* '' */
-.dropbox:before { content: '\f330'; } /* '' */
-.evernote:before { content: '\f333'; } /* '' */
-.flattr:before { content: '\f336'; } /* '' */
-.skype:before { content: '\f339'; } /* '' */
-.skype-circled:before { content: '\f33a'; } /* '' */
-.renren:before { content: '\f33c'; } /* '' */
-.sina-weibo:before { content: '\f33f'; } /* '' */
-.paypal:before { content: '\f342'; } /* '' */
-.picasa:before { content: '\f345'; } /* '' */
-.soundcloud:before { content: '\f348'; } /* '' */
-.mixi:before { content: '\f34b'; } /* '' */
-.behance:before { content: '\f34e'; } /* '' */
-.google-circles:before { content: '\f351'; } /* '' */
-.vkontakte:before { content: '\f354'; } /* '' */
-.smashing:before { content: '\f357'; } /* '' */
-.db-shape:before { content: '\f600'; } /* '' */
-.sweden:before { content: '\f601'; } /* '' */
-.logo-db:before { content: '\f603'; } /* '' */
+.nc-icon-bold:before { content: '\e800'; } /* '' */
+.nc-icon-italic:before { content: '\e801'; } /* '' */
+.nc-icon-list:before { content: '\e802'; } /* '' */
+.nc-icon-font:before { content: '\e803'; } /* '' */
+.nc-icon-text-height:before { content: '\e804'; } /* '' */
+.nc-icon-text-width:before { content: '\e805'; } /* '' */
+.nc-icon-align-left:before { content: '\e806'; } /* '' */
+.nc-icon-align-center:before { content: '\e807'; } /* '' */
+.nc-icon-align-right:before { content: '\e808'; } /* '' */
+.nc-icon-align-justify:before { content: '\e809'; } /* '' */
+.nc-icon-indent-left:before { content: '\e80a'; } /* '' */
+.nc-icon-indent-right:before { content: '\e80b'; } /* '' */
+.nc-icon-note:before { content: '\e80c'; } /* '' */
+.nc-icon-note-beamed:before { content: '\e80d'; } /* '' */
+.nc-icon-music:before { content: '\e80e'; } /* '' */
+.nc-icon-search:before { content: '\e80f'; } /* '' */
+.nc-icon-flashlight:before { content: '\e810'; } /* '' */
+.nc-icon-mail:before { content: '\e811'; } /* '' */
+.nc-icon-heart:before { content: '\e812'; } /* '' */
+.nc-icon-heart-empty:before { content: '\e813'; } /* '' */
+.nc-icon-star:before { content: '\e814'; } /* '' */
+.nc-icon-star-empty:before { content: '\e815'; } /* '' */
+.nc-icon-user:before { content: '\e816'; } /* '' */
+.nc-icon-users:before { content: '\e817'; } /* '' */
+.nc-icon-user-add:before { content: '\e818'; } /* '' */
+.nc-icon-video-alt:before { content: '\e819'; } /* '' */
+.nc-icon-picture-alt:before { content: '\e81a'; } /* '' */
+.nc-icon-camera:before { content: '\e81b'; } /* '' */
+.nc-icon-layout:before { content: '\e81c'; } /* '' */
+.nc-icon-menu:before { content: '\e81d'; } /* '' */
+.nc-icon-check:before { content: '\e81e'; } /* '' */
+.nc-icon-cancel:before { content: '\e81f'; } /* '' */
+.nc-icon-leaf:before { content: '\e820'; } /* '' */
+.nc-icon-lifebuoy:before { content: '\e821'; } /* '' */
+.nc-icon-water:before { content: '\e822'; } /* '' */
+.nc-icon-droplet:before { content: '\e823'; } /* '' */
+.nc-icon-cc:before { content: '\e824'; } /* '' */
+.nc-icon-cc-by:before { content: '\e825'; } /* '' */
+.nc-icon-lamp:before { content: '\e826'; } /* '' */
+.nc-icon-light-down:before { content: '\e827'; } /* '' */
+.nc-icon-light-up:before { content: '\e828'; } /* '' */
+.nc-icon-adjust:before { content: '\e829'; } /* '' */
+.nc-icon-block:before { content: '\e82a'; } /* '' */
+.nc-icon-resize-full:before { content: '\e82b'; } /* '' */
+.nc-icon-resize-small:before { content: '\e82c'; } /* '' */
+.nc-icon-popup:before { content: '\e82d'; } /* '' */
+.nc-icon-publish:before { content: '\e82e'; } /* '' */
+.nc-icon-window:before { content: '\e82f'; } /* '' */
+.nc-icon-arrow-combo:before { content: '\e830'; } /* '' */
+.nc-icon-down-circled:before { content: '\e831'; } /* '' */
+.nc-icon-left-circled:before { content: '\e832'; } /* '' */
+.nc-icon-right-circled:before { content: '\e833'; } /* '' */
+.nc-icon-up-circled:before { content: '\e834'; } /* '' */
+.nc-icon-down-open:before { content: '\e835'; } /* '' */
+.nc-icon-left-open:before { content: '\e836'; } /* '' */
+.nc-icon-right-open:before { content: '\e837'; } /* '' */
+.nc-icon-up-open:before { content: '\e838'; } /* '' */
+.nc-icon-down-open-mini:before { content: '\e839'; } /* '' */
+.nc-icon-left-open-mini:before { content: '\e83a'; } /* '' */
+.nc-icon-right-open-mini:before { content: '\e83b'; } /* '' */
+.nc-icon-up-open-mini:before { content: '\e83c'; } /* '' */
+.nc-icon-down-open-big:before { content: '\e83d'; } /* '' */
+.nc-icon-left-open-big:before { content: '\e83e'; } /* '' */
+.nc-icon-right-open-big:before { content: '\e83f'; } /* '' */
+.nc-icon-up-open-big:before { content: '\e840'; } /* '' */
+.nc-icon-down:before { content: '\e841'; } /* '' */
+.nc-icon-left:before { content: '\e842'; } /* '' */
+.nc-icon-right:before { content: '\e843'; } /* '' */
+.nc-icon-up:before { content: '\e844'; } /* '' */
+.nc-icon-down-dir:before { content: '\e845'; } /* '' */
+.nc-icon-left-dir:before { content: '\e846'; } /* '' */
+.nc-icon-right-dir:before { content: '\e847'; } /* '' */
+.nc-icon-up-dir:before { content: '\e848'; } /* '' */
+.nc-icon-down-bold:before { content: '\e849'; } /* '' */
+.nc-icon-left-bold:before { content: '\e84a'; } /* '' */
+.nc-icon-right-bold:before { content: '\e84b'; } /* '' */
+.nc-icon-up-bold:before { content: '\e84c'; } /* '' */
+.nc-icon-down-thin:before { content: '\e84d'; } /* '' */
+.nc-icon-left-thin:before { content: '\e84e'; } /* '' */
+.nc-icon-right-thin:before { content: '\e84f'; } /* '' */
+.nc-icon-up-thin:before { content: '\e850'; } /* '' */
+.nc-icon-ccw:before { content: '\e851'; } /* '' */
+.nc-icon-cw:before { content: '\e852'; } /* '' */
+.nc-icon-arrows-ccw:before { content: '\e853'; } /* '' */
+.nc-icon-level-down:before { content: '\e854'; } /* '' */
+.nc-icon-level-up:before { content: '\e855'; } /* '' */
+.nc-icon-shuffle:before { content: '\e856'; } /* '' */
+.nc-icon-loop:before { content: '\e857'; } /* '' */
+.nc-icon-switch:before { content: '\e858'; } /* '' */
+.nc-icon-play:before { content: '\e859'; } /* '' */
+.nc-icon-stop:before { content: '\e85a'; } /* '' */
+.nc-icon-pause:before { content: '\e85b'; } /* '' */
+.nc-icon-record:before { content: '\e85c'; } /* '' */
+.nc-icon-to-end:before { content: '\e85d'; } /* '' */
+.nc-icon-to-start:before { content: '\e85e'; } /* '' */
+.nc-icon-fast-forward:before { content: '\e85f'; } /* '' */
+.nc-icon-fast-backward:before { content: '\e860'; } /* '' */
+.nc-icon-progress-0:before { content: '\e861'; } /* '' */
+.nc-icon-progress-alt:before { content: '\e862'; } /* '' */
+.nc-icon-progress-2:before { content: '\e863'; } /* '' */
+.nc-icon-progress-3:before { content: '\e864'; } /* '' */
+.nc-icon-target:before { content: '\e865'; } /* '' */
+.nc-icon-palette:before { content: '\e866'; } /* '' */
+.nc-icon-list-alt:before { content: '\e867'; } /* '' */
+.nc-icon-list-add:before { content: '\e868'; } /* '' */
+.nc-icon-signal:before { content: '\e869'; } /* '' */
+.nc-icon-trophy:before { content: '\e86a'; } /* '' */
+.nc-icon-battery:before { content: '\e86b'; } /* '' */
+.nc-icon-back-in-time:before { content: '\e86c'; } /* '' */
+.nc-icon-monitor:before { content: '\e86d'; } /* '' */
+.nc-icon-mobile:before { content: '\e86e'; } /* '' */
+.nc-icon-network:before { content: '\e86f'; } /* '' */
+.nc-icon-cd:before { content: '\e870'; } /* '' */
+.nc-icon-inbox:before { content: '\e871'; } /* '' */
+.nc-icon-install:before { content: '\e872'; } /* '' */
+.nc-icon-globe:before { content: '\e873'; } /* '' */
+.nc-icon-cloud:before { content: '\e874'; } /* '' */
+.nc-icon-cloud-thunder:before { content: '\e875'; } /* '' */
+.nc-icon-flash:before { content: '\e876'; } /* '' */
+.nc-icon-moon:before { content: '\e877'; } /* '' */
+.nc-icon-mouse:before { content: '\e878'; } /* '' */
+.nc-icon-briefcase:before { content: '\e879'; } /* '' */
+.nc-icon-suitcase:before { content: '\e87a'; } /* '' */
+.nc-icon-dot:before { content: '\e87b'; } /* '' */
+.nc-icon-dot-2:before { content: '\e87c'; } /* '' */
+.nc-icon-dot-3:before { content: '\e87d'; } /* '' */
+.nc-icon-brush:before { content: '\e87e'; } /* '' */
+.nc-icon-magnet:before { content: '\e87f'; } /* '' */
+.nc-icon-infinity:before { content: '\e880'; } /* '' */
+.nc-icon-erase:before { content: '\e881'; } /* '' */
+.nc-icon-chart-pie:before { content: '\e882'; } /* '' */
+.nc-icon-chart-line:before { content: '\e883'; } /* '' */
+.nc-icon-chart-bar:before { content: '\e884'; } /* '' */
+.nc-icon-chart-area:before { content: '\e885'; } /* '' */
+.nc-icon-tape:before { content: '\e886'; } /* '' */
+.nc-icon-graduation-cap:before { content: '\e887'; } /* '' */
+.nc-icon-air:before { content: '\e888'; } /* '' */
+.nc-icon-credit-card:before { content: '\e889'; } /* '' */
+.nc-icon-floppy:before { content: '\e88a'; } /* '' */
+.nc-icon-clipboard:before { content: '\e88b'; } /* '' */
+.nc-icon-megaphone:before { content: '\e88c'; } /* '' */
+.nc-icon-database:before { content: '\e88d'; } /* '' */
+.nc-icon-drive:before { content: '\e88e'; } /* '' */
+.nc-icon-bucket:before { content: '\e88f'; } /* '' */
+.nc-icon-thermometer:before { content: '\e890'; } /* '' */
+.nc-icon-key:before { content: '\e891'; } /* '' */
+.nc-icon-flow-cascade:before { content: '\e892'; } /* '' */
+.nc-icon-flow-branch:before { content: '\e893'; } /* '' */
+.nc-icon-flow-tree:before { content: '\e894'; } /* '' */
+.nc-icon-flow-line:before { content: '\e895'; } /* '' */
+.nc-icon-flow-parallel:before { content: '\e896'; } /* '' */
+.nc-icon-rocket:before { content: '\e897'; } /* '' */
+.nc-icon-cc-nc:before { content: '\e898'; } /* '' */
+.nc-icon-cc-nc-eu:before { content: '\e899'; } /* '' */
+.nc-icon-cc-nc-jp:before { content: '\e89a'; } /* '' */
+.nc-icon-cc-sa:before { content: '\e89b'; } /* '' */
+.nc-icon-cc-nd:before { content: '\e89c'; } /* '' */
+.nc-icon-cc-pd:before { content: '\e89d'; } /* '' */
+.nc-icon-cc-zero:before { content: '\e89e'; } /* '' */
+.nc-icon-cc-share:before { content: '\e89f'; } /* '' */
+.nc-icon-cc-remix:before { content: '\e8a0'; } /* '' */
+.nc-icon-flight:before { content: '\e8a1'; } /* '' */
+.nc-icon-paper-plane:before { content: '\e8a2'; } /* '' */
+.nc-icon-language:before { content: '\e8a3'; } /* '' */
+.nc-icon-ticket:before { content: '\e8a4'; } /* '' */
+.nc-icon-gauge:before { content: '\e8a5'; } /* '' */
+.nc-icon-traffic-cone:before { content: '\e8a6'; } /* '' */
+.nc-icon-cancel-circled:before { content: '\e8a7'; } /* '' */
+.nc-icon-cancel-squared:before { content: '\e8a8'; } /* '' */
+.nc-icon-plus:before { content: '\e8a9'; } /* '' */
+.nc-icon-plus-circled:before { content: '\e8aa'; } /* '' */
+.nc-icon-plus-squared:before { content: '\e8ab'; } /* '' */
+.nc-icon-minus:before { content: '\e8ac'; } /* '' */
+.nc-icon-minus-circled:before { content: '\e8ad'; } /* '' */
+.nc-icon-minus-squared:before { content: '\e8ae'; } /* '' */
+.nc-icon-help:before { content: '\e8af'; } /* '' */
+.nc-icon-help-circled:before { content: '\e8b0'; } /* '' */
+.nc-icon-info:before { content: '\e8b1'; } /* '' */
+.nc-icon-info-circled:before { content: '\e8b2'; } /* '' */
+.nc-icon-back:before { content: '\e8b3'; } /* '' */
+.nc-icon-home:before { content: '\e8b4'; } /* '' */
+.nc-icon-link:before { content: '\e8b5'; } /* '' */
+.nc-icon-attach:before { content: '\e8b6'; } /* '' */
+.nc-icon-lock:before { content: '\e8b7'; } /* '' */
+.nc-icon-lock-open:before { content: '\e8b8'; } /* '' */
+.nc-icon-eye:before { content: '\e8b9'; } /* '' */
+.nc-icon-tag:before { content: '\e8ba'; } /* '' */
+.nc-icon-bookmark:before { content: '\e8bb'; } /* '' */
+.nc-icon-bookmarks:before { content: '\e8bc'; } /* '' */
+.nc-icon-flag:before { content: '\e8bd'; } /* '' */
+.nc-icon-thumbs-up:before { content: '\e8be'; } /* '' */
+.nc-icon-thumbs-down:before { content: '\e8bf'; } /* '' */
+.nc-icon-download:before { content: '\e8c0'; } /* '' */
+.nc-icon-upload:before { content: '\e8c1'; } /* '' */
+.nc-icon-upload-cloud:before { content: '\e8c2'; } /* '' */
+.nc-icon-reply:before { content: '\e8c3'; } /* '' */
+.nc-icon-reply-all:before { content: '\e8c4'; } /* '' */
+.nc-icon-forward:before { content: '\e8c5'; } /* '' */
+.nc-icon-quote:before { content: '\e8c6'; } /* '' */
+.nc-icon-code:before { content: '\e8c7'; } /* '' */
+.nc-icon-export:before { content: '\e8c8'; } /* '' */
+.nc-icon-pencil:before { content: '\e8c9'; } /* '' */
+.nc-icon-feather:before { content: '\e8ca'; } /* '' */
+.nc-icon-print:before { content: '\e8cb'; } /* '' */
+.nc-icon-retweet:before { content: '\e8cc'; } /* '' */
+.nc-icon-keyboard:before { content: '\e8cd'; } /* '' */
+.nc-icon-comment:before { content: '\e8ce'; } /* '' */
+.nc-icon-chat:before { content: '\e8cf'; } /* '' */
+.nc-icon-bell:before { content: '\e8d0'; } /* '' */
+.nc-icon-attention:before { content: '\e8d1'; } /* '' */
+.nc-icon-alert:before { content: '\e8d2'; } /* '' */
+.nc-icon-vcard:before { content: '\e8d3'; } /* '' */
+.nc-icon-address:before { content: '\e8d4'; } /* '' */
+.nc-icon-location:before { content: '\e8d5'; } /* '' */
+.nc-icon-map:before { content: '\e8d6'; } /* '' */
+.nc-icon-direction:before { content: '\e8d7'; } /* '' */
+.nc-icon-compass:before { content: '\e8d8'; } /* '' */
+.nc-icon-cup:before { content: '\e8d9'; } /* '' */
+.nc-icon-trash:before { content: '\e8da'; } /* '' */
+.nc-icon-doc:before { content: '\e8db'; } /* '' */
+.nc-icon-docs:before { content: '\e8dc'; } /* '' */
+.nc-icon-doc-landscape:before { content: '\e8dd'; } /* '' */
+.nc-icon-doc-text:before { content: '\e8de'; } /* '' */
+.nc-icon-doc-text-inv:before { content: '\e8df'; } /* '' */
+.nc-icon-newspaper:before { content: '\e8e0'; } /* '' */
+.nc-icon-book-open:before { content: '\e8e1'; } /* '' */
+.nc-icon-book:before { content: '\e8e2'; } /* '' */
+.nc-icon-folder:before { content: '\e8e3'; } /* '' */
+.nc-icon-archive:before { content: '\e8e4'; } /* '' */
+.nc-icon-box:before { content: '\e8e5'; } /* '' */
+.nc-icon-rss:before { content: '\e8e6'; } /* '' */
+.nc-icon-phone:before { content: '\e8e7'; } /* '' */
+.nc-icon-cog:before { content: '\e8e8'; } /* '' */
+.nc-icon-tools:before { content: '\e8e9'; } /* '' */
+.nc-icon-share:before { content: '\e8ea'; } /* '' */
+.nc-icon-shareable:before { content: '\e8eb'; } /* '' */
+.nc-icon-basket:before { content: '\e8ec'; } /* '' */
+.nc-icon-bag:before { content: '\e8ed'; } /* '' */
+.nc-icon-calendar:before { content: '\e8ee'; } /* '' */
+.nc-icon-login:before { content: '\e8ef'; } /* '' */
+.nc-icon-logout:before { content: '\e8f0'; } /* '' */
+.nc-icon-mic:before { content: '\e8f1'; } /* '' */
+.nc-icon-mute:before { content: '\e8f2'; } /* '' */
+.nc-icon-sound:before { content: '\e8f3'; } /* '' */
+.nc-icon-volume:before { content: '\e8f4'; } /* '' */
+.nc-icon-clock:before { content: '\e8f5'; } /* '' */
+.nc-icon-hourglass:before { content: '\e8f6'; } /* '' */
+.nc-icon-link-alt:before { content: '\e8f7'; } /* '' */
+.nc-icon-video:before { content: '\e8f8'; } /* '' */
+.nc-icon-h1:before { content: '\e8f9'; } /* '' */
+.nc-icon-picture:before { content: '\e8fa'; } /* '' */
+.nc-icon-scissors:before { content: '\e8fb'; } /* '' */
+.nc-icon-h2:before { content: '\e8fc'; } /* '' */
+.nc-icon-list-bullet:before { content: '\f0ca'; } /* '' */
+.nc-icon-list-numbered:before { content: '\f0cb'; } /* '' */
+.nc-icon-strike:before { content: '\f0cc'; } /* '' */
+.nc-icon-underline:before { content: '\f0cd'; } /* '' */
+.nc-icon-table:before { content: '\f0ce'; } /* '' */
+.nc-icon-columns:before { content: '\f0db'; } /* '' */
+.nc-icon-paste:before { content: '\f0ea'; } /* '' */
+.nc-icon-quote-left:before { content: '\f10d'; } /* '' */
+.nc-icon-quote-right:before { content: '\f10e'; } /* '' */
+.nc-icon-code-alt:before { content: '\f121'; } /* '' */
+.nc-icon-crop:before { content: '\f125'; } /* '' */
+.nc-icon-unlink:before { content: '\f127'; } /* '' */
+.nc-icon-superscript:before { content: '\f12b'; } /* '' */
+.nc-icon-subscript:before { content: '\f12c'; } /* '' */
+.nc-icon-header:before { content: '\f1dc'; } /* '' */
+.nc-icon-paragraph:before { content: '\f1dd'; } /* '' */
+.nc-icon-github:before { content: '\f300'; } /* '' */
+.nc-icon-github-circled:before { content: '\f301'; } /* '' */
+.nc-icon-flickr:before { content: '\f303'; } /* '' */
+.nc-icon-flickr-circled:before { content: '\f304'; } /* '' */
+.nc-icon-vimeo:before { content: '\f306'; } /* '' */
+.nc-icon-vimeo-circled:before { content: '\f307'; } /* '' */
+.nc-icon-twitter:before { content: '\f309'; } /* '' */
+.nc-icon-twitter-circled:before { content: '\f30a'; } /* '' */
+.nc-icon-facebook:before { content: '\f30c'; } /* '' */
+.nc-icon-facebook-circled:before { content: '\f30d'; } /* '' */
+.nc-icon-facebook-squared:before { content: '\f30e'; } /* '' */
+.nc-icon-gplus:before { content: '\f30f'; } /* '' */
+.nc-icon-gplus-circled:before { content: '\f310'; } /* '' */
+.nc-icon-pinterest:before { content: '\f312'; } /* '' */
+.nc-icon-pinterest-circled:before { content: '\f313'; } /* '' */
+.nc-icon-tumblr:before { content: '\f315'; } /* '' */
+.nc-icon-tumblr-circled:before { content: '\f316'; } /* '' */
+.nc-icon-linkedin:before { content: '\f318'; } /* '' */
+.nc-icon-linkedin-circled:before { content: '\f319'; } /* '' */
+.nc-icon-dribbble:before { content: '\f31b'; } /* '' */
+.nc-icon-dribbble-circled:before { content: '\f31c'; } /* '' */
+.nc-icon-stumbleupon:before { content: '\f31e'; } /* '' */
+.nc-icon-stumbleupon-circled:before { content: '\f31f'; } /* '' */
+.nc-icon-lastfm:before { content: '\f321'; } /* '' */
+.nc-icon-lastfm-circled:before { content: '\f322'; } /* '' */
+.nc-icon-rdio:before { content: '\f324'; } /* '' */
+.nc-icon-rdio-circled:before { content: '\f325'; } /* '' */
+.nc-icon-spotify:before { content: '\f327'; } /* '' */
+.nc-icon-spotify-circled:before { content: '\f328'; } /* '' */
+.nc-icon-qq:before { content: '\f32a'; } /* '' */
+.nc-icon-instagram:before { content: '\f32d'; } /* '' */
+.nc-icon-dropbox:before { content: '\f330'; } /* '' */
+.nc-icon-evernote:before { content: '\f333'; } /* '' */
+.nc-icon-flattr:before { content: '\f336'; } /* '' */
+.nc-icon-skype:before { content: '\f339'; } /* '' */
+.nc-icon-skype-circled:before { content: '\f33a'; } /* '' */
+.nc-icon-renren:before { content: '\f33c'; } /* '' */
+.nc-icon-sina-weibo:before { content: '\f33f'; } /* '' */
+.nc-icon-paypal:before { content: '\f342'; } /* '' */
+.nc-icon-picasa:before { content: '\f345'; } /* '' */
+.nc-icon-soundcloud:before { content: '\f348'; } /* '' */
+.nc-icon-mixi:before { content: '\f34b'; } /* '' */
+.nc-icon-behance:before { content: '\f34e'; } /* '' */
+.nc-icon-google-circles:before { content: '\f351'; } /* '' */
+.nc-icon-vkontakte:before { content: '\f354'; } /* '' */
+.nc-icon-smashing:before { content: '\f357'; } /* '' */
+.nc-icon-db-shape:before { content: '\f600'; } /* '' */
+.nc-icon-sweden:before { content: '\f601'; } /* '' */
+.nc-icon-logo-db:before { content: '\f603'; } /* '' */
diff --git a/src/components/UI/icon/Icon.js b/src/components/UI/icon/Icon.js
index a93a9f89..e2a27066 100644
--- a/src/components/UI/icon/Icon.js
+++ b/src/components/UI/icon/Icon.js
@@ -1,5 +1,4 @@
 import React from 'react';
-import styles from './Icon.css';
 
 const availableIcons = [
   // Font Awesome Editor Icons
@@ -200,7 +199,7 @@ const iconPropType = (props, propName) => {
 const noop = function () {};
 
 export default function Icon({ style, className = '', type, onClick = noop }) {
-  return <span className={`${ styles.root } ${ styles[type] } ${ className }`} style={style} onClick={onClick} />;
+  return <span className={`nc-icon-root nc-icon-${ type } ${ className }`} style={style} onClick={onClick} />;
 }
 
 Icon.propTypes = {
diff --git a/src/components/UI/loader/Loader.css b/src/components/UI/loader/Loader.css
index ba018374..c88a73d3 100644
--- a/src/components/UI/loader/Loader.css
+++ b/src/components/UI/loader/Loader.css
@@ -1,47 +1,3 @@
-.loader {
-  display: none;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  margin: 0px;
-  text-align: center;
-  z-index: 1000;
-  -webkit-transform: translateX(-50%) translateY(-50%);
-  -ms-transform: translateX(-50%) translateY(-50%);
-  transform: translateX(-50%) translateY(-50%);
-}
-
-/* Static Shape */
-
-.loader:before {
-  position: absolute;
-  content: '';
-  top: 0%;
-  left: 50%;
-  width: 100%;
-  height: 100%;
-  border-radius: 500rem;
-  border: 0.2em solid rgba(0, 0, 0, 0.1);
-}
-
-/* Active Shape */
-
-.loader:after {
-  position: absolute;
-  content: '';
-  top: 0%;
-  left: 50%;
-  width: 100%;
-  height: 100%;
-  animation: loader 0.6s linear;
-  animation-iteration-count: infinite;
-  border-radius: 500rem;
-  border-color: #767676 transparent transparent;
-  border-style: solid;
-  border-width: 0.2em;
-  box-shadow: 0px 0px 0px 1px transparent;
-}
-
 /* Active Animation */
 
 @-webkit-keyframes loader {
@@ -68,15 +24,52 @@
   }
 }
 
-.loader:before,
-.loader:after {
-  width: 2.28571429rem;
-  height: 2.28571429rem;
-  margin: 0em 0em 0em -1.14285714rem;
+.nc-loader-root {
+  display: none;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  margin: 0px;
+  text-align: center;
+  z-index: 1000;
+  -webkit-transform: translateX(-50%) translateY(-50%);
+  -ms-transform: translateX(-50%) translateY(-50%);
+  transform: translateX(-50%) translateY(-50%);
+
+  &:before,
+  &:after {
+    width: 2.28571429rem;
+    height: 2.28571429rem;
+    margin: 0em 0em 0em -1.14285714rem;
+  }
+
+  /* Static Shape */
+  &:before {
+    position: absolute;
+    content: '';
+    top: 0%;
+    left: 50%;
+    border-radius: 500rem;
+    border: 0.2em solid rgba(0, 0, 0, 0.1);
+  }
+
+  /* Active Shape */
+  &:after {
+    position: absolute;
+    content: '';
+    top: 0%;
+    left: 50%;
+    animation: loader 0.6s linear;
+    animation-iteration-count: infinite;
+    border-radius: 500rem;
+    border-color: #767676 transparent transparent;
+    border-style: solid;
+    border-width: 0.2em;
+    box-shadow: 0px 0px 0px 1px transparent;
+  }
 }
 
-
-.text {
+.nc-loader-text {
   width: auto !important;
   height: auto !important;
   text-align: center;
@@ -84,32 +77,32 @@
   margin-top: 35px;
 }
 
-.active {
+.nc-loader-active {
   display: block;
 }
 
-.disabled {
+.nc-loader-disabled {
   display: none;
 }
 
 /*Animations*/
-.animateItem{
+.nc-loader-animateItem{
   position: absolute;
   white-space: nowrap;
   transform: translateX(-50%);
 }
 
-.enter {
+.nc-loader-enter {
   opacity: 0.01;
 }
-.enter.enterActive {
+.nc-loader-enter.nc-loader-enterActive {
   opacity: 1;
   transition: opacity 500ms ease-in;
 }
-.exit {
+.nc-loader-exit {
   opacity: 1;
 }
-.exit.exitActive {
+.nc-loader-exit.nc-loader-exitActive {
   opacity: 0.01;
   transition: opacity 300ms ease-in;
 }
diff --git a/src/components/UI/loader/Loader.js b/src/components/UI/loader/Loader.js
index 2100a01e..b0542d51 100644
--- a/src/components/UI/loader/Loader.js
+++ b/src/components/UI/loader/Loader.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import CSSTransition from 'react-transition-group/CSSTransition';
-import styles from './Loader.css';
+import classnames from 'classnames';
 
 export default class Loader extends React.Component {
 
@@ -30,32 +30,28 @@ export default class Loader extends React.Component {
     if (!children) {
       return null;
     } else if (typeof children == 'string') {
-      return <div className={styles.text}>{children}</div>;
+      return <div className="nc-loader-text">{children}</div>;
     } else if (Array.isArray(children)) {
       this.setAnimation();
-      return (<div className={styles.text}>
+      return (<div className="nc-loader-text">
         <CSSTransition
-          classNames={styles}
+          classNames={{
+            enter: 'nc-loader-enter',
+            enterActive: 'nc-loader-enterActive',
+            exit: 'nc-loader-exit',
+            exitActive: 'nc-loader-exitActive',
+          }}
           timeout={500}
         >
-          <div key={currentItem} className={styles.animateItem}>{children[currentItem]}</div>
+          <div key={currentItem} className="nc-loader-animateItem">{children[currentItem]}</div>
         </CSSTransition>
       </div>);
     }
   };
 
   render() {
-    const { active, style, className = '' } = this.props;
-
-    // Class names
-    let classNames = styles.loader;
-    if (active) {
-      classNames += ` ${ styles.active }`;
-    }
-    if (className.length > 0) {
-      classNames += ` ${ className }`;
-    }
-
-    return <div className={classNames} style={style}>{this.renderChild()}</div>;
+    const { active } = this.props;
+    const className = classnames('nc-loader-root', { 'nc-loader-active': active });
+    return <div className={className}>{this.renderChild()}</div>;
   }
 }
diff --git a/src/components/UI/theme.css b/src/components/UI/theme.css
index d28ee61e..fdb92207 100644
--- a/src/components/UI/theme.css
+++ b/src/components/UI/theme.css
@@ -34,24 +34,24 @@
   --textFieldBorder: var(--border);
 }
 
-.base {
+.nc-theme-base {
   box-sizing: border-box;
 }
 
-.container {
+.nc-theme-container {
   background-color: var(--backgroundColor);
   color: var(--defaultColor);
 }
 
-.rounded {
+.nc-theme-rounded {
   border-radius: var(--borderRadius);
 }
 
-.depth {
+.nc-theme-depth {
   box-shadow: var(--dropShadow);
 }
 
-.clearfix:after {
+.nc-theme-clearfix:after {
   content: '';
   display: table;
   clear: both;
diff --git a/src/components/UI/toast/Toast.css b/src/components/UI/toast/Toast.css
index 0d711c6d..d7864648 100644
--- a/src/components/UI/toast/Toast.css
+++ b/src/components/UI/toast/Toast.css
@@ -1,23 +1,20 @@
-@import '../theme.css';
+/* redux-notifications override */
+.notif__container {
+  z-index: 10000;
+}
 
 :root {
   --iconSize: 30px;
 }
 
-/* redux-notifications override */
-:global(.notif__container) {
-  z-index: 10000;
-}
-
-.root {
-  composes: base container rounded depth from '../theme.css';
+.nc-toast-root {
   overflow: hidden;
   margin: 10px;
   padding: 10px 10px 15px;
   color: var(--defaultColorLight);
 }
 
-.icon {
+.nc-toast-icon {
   position: relative;
   top: .15em;
   margin-right: .25em;
@@ -25,22 +22,18 @@
   line-height: var(--iconSize);
 }
 
-.info {
-  composes: root;
+.nc-toast-info {
   background-color: var(--infoColor);
 }
 
-.success {
-  composes: root;
+.nc-toast-success {
   background-color: var(--successColor);
 }
 
-.warning {
-  composes: root;
+.nc-toast-warning {
   background-color: var(--warningColor);
 }
 
-.danger {
-  composes: root;
+.nc-toast-danger {
   background-color: var(--errorColor);
 }
diff --git a/src/components/UI/toast/Toast.js b/src/components/UI/toast/Toast.js
index bb6034ff..bb60489c 100644
--- a/src/components/UI/toast/Toast.js
+++ b/src/components/UI/toast/Toast.js
@@ -2,7 +2,8 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { Icon } from '../index';
 import 'redux-notifications/lib/styles.css'; // Import default redux-notifications styles into global scope.
-import styles from './Toast.css';
+
+const themeClasses = `nc-theme-base nc-theme-container nc-theme-rounded nc-theme-depth`;
 
 const icons = {
   info: 'info',
@@ -13,8 +14,8 @@ const icons = {
 
 export default function Toast({ kind, message }) {
   return (
-    <div className={styles[kind]}>
-      <Icon type={icons[kind]} className={styles.icon} />
+    <div className={`${ themeClasses } nc-toast-root nc-toast-${ kind }`}>
+      <Icon type={icons[kind]} className="nc-toast-icon" />
       {message}
     </div>
   );
diff --git a/src/components/UnpublishedListing/UnpublishedListing.css b/src/components/UnpublishedListing/UnpublishedListing.css
index aaf6d5c6..cad8a41e 100644
--- a/src/components/UnpublishedListing/UnpublishedListing.css
+++ b/src/components/UnpublishedListing/UnpublishedListing.css
@@ -1,16 +1,14 @@
-@import '../UI/theme.css';
-
 :root {
   --highlightColor: #38ab9b;
   --defaultFontSize: 1em;
 }
 
-.container {
+.nc-unpublishedListing-container {
   display: flex;
   justify-content: space-between;
 }
 
-.column {
+.nc-unpublishedListing-column {
   flex: 1 33%;
   margin: -10px;
   margin-top: 24px;
@@ -19,27 +17,26 @@
   transition: background-color .5s ease;
 }
 
-.columnHovered {
-  composes: column;
+.nc-unpublishedListing-column-hovered {
   border: 2px dashed var(--highlightColor);
   border-radius: 4px;
 }
 
-.columnHeading {
+.nc-unpublishedListing-columnHeading {
   font-size: var(--defaultFontSize);
 }
 
-.draggable {
+.nc-unpublishedListing-draggable {
   cursor: move;
 }
 
-.card {
+.nc-unpublishedListing-card {
   margin-bottom: 10px;
 }
 
 /* Gross stuff below, React Toolbox hacks */
 
-.cardTitle h5 {
+.nc-unpublishedListing-cardTitle h5 {
   color: var(--backgroundAltColor) !important;
   font-weight: 500 !important;
   font-size: 21px !important;
diff --git a/src/components/UnpublishedListing/UnpublishedListing.js b/src/components/UnpublishedListing/UnpublishedListing.js
index cfec08e7..5a98a4fe 100644
--- a/src/components/UnpublishedListing/UnpublishedListing.js
+++ b/src/components/UnpublishedListing/UnpublishedListing.js
@@ -5,11 +5,11 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import { Link } from 'react-router-dom';
 import moment from 'moment';
 import { capitalize } from 'lodash'
+import classnames from 'classnames';
 import { Card, CardTitle, CardText, CardActions } from 'react-toolbox/lib/card';
 import Button from 'react-toolbox/lib/button';
 import UnpublishedListingCardMeta from './UnpublishedListingCardMeta.js';
 import { status, statusDescriptions } from '../../constants/publishModes';
-import styles from './UnpublishedListing.css';
 
 class UnpublishedListing extends React.Component {
   static propTypes = {
@@ -50,8 +50,11 @@ class UnpublishedListing extends React.Component {
           /* eslint-enable */
         >
           {isHovered => (
-            <div className={isHovered ? styles.columnHovered : styles.column}>
-              <h2 className={styles.columnHeading}>
+            <div className={classnames(
+              'nc-unpublishedListing-column',
+              { 'nc-unpublishedListing-column-hovered' : isHovered },
+            )}>
+              <h2 className="nc-unpublishedListing-columnHeading">
                 {statusDescriptions.get(currColumn)}
               </h2>
               {this.renderColumns(currEntries, currColumn)}
@@ -79,8 +82,8 @@ class UnpublishedListing extends React.Component {
                 collection={collection}
                 ownStatus={ownStatus}
               >
-                <div className={styles.draggable}>
-                  <Card className={styles.card}>
+                <div className="nc-unpublishedListing-draggable">
+                  <Card className="nc-unpublishedListing-card">
                     <UnpublishedListingCardMeta
                       meta={capitalize(collection)}
                       label={isModification ? "" : "New"}
@@ -88,7 +91,7 @@ class UnpublishedListing extends React.Component {
                     <CardTitle
                       title={entry.getIn(['data', 'title'])}
                       subtitle={`by ${ author }`}
-                      className={styles.cardTitle}
+                      className="nc-unpublishedListing-cardTitle"
                     />
                     <CardText>
                       Last updated: {timeStamp} by {entry.getIn(['metaData', 'user'])}
@@ -128,7 +131,7 @@ class UnpublishedListing extends React.Component {
     return (
       <div>
         <h5>Editorial Workflow</h5>
-        <div className={styles.container}>
+        <div className="nc-unpublishedListing-container">
           {columns}
         </div>
       </div>
diff --git a/src/components/UnpublishedListing/UnpublishedListingCardMeta.css b/src/components/UnpublishedListing/UnpublishedListingCardMeta.css
index 5e42be98..44f0baf5 100644
--- a/src/components/UnpublishedListing/UnpublishedListingCardMeta.css
+++ b/src/components/UnpublishedListing/UnpublishedListingCardMeta.css
@@ -1,6 +1,4 @@
-@import '../UI/theme.css';
-
-.cardMeta {
+.nc-unpublishedListingCardMeta-cardMeta {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -16,8 +14,7 @@
   color: #fff;
 }
 
-.meta {}
-.label {
+.nc-unpublishedListingCardMeta-label {
   padding: 5px 8px 4px 8px;
   border-radius: var(--borderRadiusLarge);
 
diff --git a/src/components/UnpublishedListing/UnpublishedListingCardMeta.js b/src/components/UnpublishedListing/UnpublishedListingCardMeta.js
index 4f42912a..bfb7e5cf 100644
--- a/src/components/UnpublishedListing/UnpublishedListingCardMeta.js
+++ b/src/components/UnpublishedListing/UnpublishedListingCardMeta.js
@@ -1,12 +1,11 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import styles from './UnpublishedListingCardMeta.css';
 
 const UnpublishedListingCardMeta = ({ meta, label }) =>
-  <div className={styles.cardMeta}>
-    <span className={styles.meta}>{meta}</span>
+  <div className="nc-unpublishedListingCardMeta-cardMeta">
+    <span className="nc-unpublishedListingCardMeta-meta">{meta}</span>
     {(label && label.length > 0)
-      ? <span className={styles.label}>{label}</span>
+      ? <span className="nc-unpublishedListingCardMeta-label">{label}</span>
       : ""}
   </div>;
 
diff --git a/src/components/Widgets/BooleanControl.css b/src/components/Widgets/BooleanControl.css
index 8ad7912b..d3ed70a1 100644
--- a/src/components/Widgets/BooleanControl.css
+++ b/src/components/Widgets/BooleanControl.css
@@ -1,3 +1,3 @@
-.switch {
+.nc-booleanControl-switch {
   display: inline-block;
 }
diff --git a/src/components/Widgets/BooleanControl.js b/src/components/Widgets/BooleanControl.js
index e870193e..771f8446 100644
--- a/src/components/Widgets/BooleanControl.js
+++ b/src/components/Widgets/BooleanControl.js
@@ -3,7 +3,6 @@ import React from 'react';
 import ImmutablePropTypes from "react-immutable-proptypes";
 import Switch from 'react-toolbox/lib/switch';
 import { isBoolean } from 'lodash';
-import styles from './BooleanControl.css';
 
 export default class BooleanControl extends React.Component {
   render() {
@@ -11,7 +10,7 @@ export default class BooleanControl extends React.Component {
     return (
       <Switch
         id={forID}
-        className={styles.switch}
+        className="nc-booleanControl-switch"
         checked={isBoolean(value) ? value : field.get('defaultValue', false)}
         onChange={onChange}
       />
diff --git a/src/components/Widgets/FileControl.css b/src/components/Widgets/FileControl.css
index ca145c18..bdaa85bb 100644
--- a/src/components/Widgets/FileControl.css
+++ b/src/components/Widgets/FileControl.css
@@ -1,16 +1,14 @@
-@import "../UI/theme.css";
-
-.input {
+.nc-fileControl-input {
   display: none !important;
 }
 
-.message {
+.nc-fileControl-message {
   padding: 20px;
   display: block;
   font-size: 12px;
 }
 
-.imageUpload {
+.nc-fileControl-imageUpload {
   background-color: #fff;
   text-align: center;
   color: #999;
diff --git a/src/components/Widgets/FileControl.js b/src/components/Widgets/FileControl.js
index 321a8d6b..1ac38c2b 100644
--- a/src/components/Widgets/FileControl.js
+++ b/src/components/Widgets/FileControl.js
@@ -3,7 +3,6 @@ import React from 'react';
 import { truncateMiddle } from '../../lib/textHelper';
 import { Loader } from '../UI';
 import AssetProxy, { createAssetProxy } from '../../valueObjects/AssetProxy';
-import styles from './FileControl.css';
 
 const MAX_DISPLAY_LENGTH = 50;
 
@@ -79,8 +78,8 @@ export default class FileControl extends React.Component {
     const fileName = this.renderFileName();
     if (processing) {
       return (
-        <div className={styles.imageUpload}>
-          <span className={styles.message}>
+        <div className="nc-fileControl-imageUpload">
+          <span className="nc-fileControl-message">
             <Loader active />
           </span>
         </div>
@@ -88,18 +87,18 @@ export default class FileControl extends React.Component {
     }
     return (
       <div
-        className={styles.imageUpload}
+        className="nc-fileControl-imageUpload"
         onDragEnter={this.handleDragEnter}
         onDragOver={this.handleDragOver}
         onDrop={this.handleChange}
       >
-        <span className={styles.message} onClick={this.handleClick}>
+        <span className="nc-fileControl-message" onClick={this.handleClick}>
           {fileName ? fileName : 'Click here to upload a file from your computer, or drag and drop a file directly into this box'}
         </span>
         <input
           type="file"
           onChange={this.handleChange}
-          className={styles.input}
+          className="nc-fileControl-input"
           ref={this.handleFileInputRef}
         />
       </div>
diff --git a/src/components/Widgets/ImageControl.js b/src/components/Widgets/ImageControl.js
index ace0c0cf..19457c38 100644
--- a/src/components/Widgets/ImageControl.js
+++ b/src/components/Widgets/ImageControl.js
@@ -3,7 +3,6 @@ import React from 'react';
 import { truncateMiddle } from '../../lib/textHelper';
 import { Loader } from '../UI';
 import AssetProxy, { createAssetProxy } from '../../valueObjects/AssetProxy';
-import styles from './FileControl.css';
 
 const MAX_DISPLAY_LENGTH = 50;
 
@@ -83,8 +82,8 @@ export default class ImageControl extends React.Component {
     const imageName = this.renderImageName();
     if (processing) {
       return (
-        <div className={styles.imageUpload}>
-          <span className={styles.message}>
+        <div className="nc-fileControl-imageUpload">
+          <span className="nc-fileControl-message">
             <Loader active />
           </span>
         </div>
@@ -92,19 +91,19 @@ export default class ImageControl extends React.Component {
     }
     return (
       <div
-        className={styles.imageUpload}
+        className="nc-fileControl-imageUpload"
         onDragEnter={this.handleDragEnter}
         onDragOver={this.handleDragOver}
         onDrop={this.handleChange}
       >
-        <span className={styles.message} onClick={this.handleClick}>
+        <span className="nc-fileControl-message" onClick={this.handleClick}>
           {imageName ? imageName : 'Click here to upload an image from your computer, or drag and drop a file directly into this box'}
         </span>
         <input
           type="file"
           accept="image/*"
           onChange={this.handleChange}
-          className={styles.input}
+          className="nc-fileControl-input"
           ref={this.handleFileInputRef}
         />
       </div>
diff --git a/src/components/Widgets/ListControl.css b/src/components/Widgets/ListControl.css
index 3c265c14..72aaa7dc 100644
--- a/src/components/Widgets/ListControl.css
+++ b/src/components/Widgets/ListControl.css
@@ -1,10 +1,8 @@
-@import "../UI/theme";
-
-:global(.list-item-dragging) {
+.list-item-dragging {
   opacity: 0.5;
 }
 
-.addButton {
+.nc-listControl-addButton {
   display: flex;
   justify-content: center;
   align-items: center;
@@ -16,16 +14,16 @@
   background-color: var(--controlBGColor);
 }
 
-.addButtonIcon {
+.nc-listControl-addButtonIcon {
   font-size: 18px;
 }
 
-.addButtonText {
+.nc-listControl-addButtonText {
   margin-left: 4px;
   text-transform: lowercase;
 }
 
-.removeButton {
+.nc-listControl-removeButton {
   position: absolute;
   top: 2px;
   right: 2px;
@@ -38,7 +36,7 @@
   z-index: 1;
 }
 
-.toggleButton {
+.nc-listControl-toggleButton {
   position: absolute;
   top: 0;
   left: 0;
@@ -51,13 +49,13 @@
   background: rgba(0,0,0,0.1);
 }
 
-.item {
+.nc-listControl-item {
   position: relative;
   padding-left: 24px;
   cursor: move;
 }
 
-.objectLabel {
+.nc-listControl-objectLabel {
   border: 2px solid rgba(0,0,0,0.1);
   border-top-width: 28px;
   border-radius: var(--borderRadius);
@@ -67,25 +65,24 @@
   display: none;
 }
 
-.objectControl {
+.nc-listControl-objectControl {
   display: block;
   border-top: 28px solid rgba(0,0,0,0.1);
   border-top-left-radius: 0;
 }
 
-.expanded {
-}
+.nc-listControl-expanded {}
 
-.collapsed {
-  & .objectLabel {
+.nc-listControl-collapsed {
+  & .nc-listControl-objectLabel {
     display: block;
   }
-  & .objectControl {
+  & .nc-listControl-objectControl {
     display: none;
   }
 }
 
-.dragIcon {
+.nc-listControl-dragIcon {
   position: absolute;
   top: 2px;
   display: block;
diff --git a/src/components/Widgets/ListControl.js b/src/components/Widgets/ListControl.js
index a9b9ad3b..ddf6ece6 100644
--- a/src/components/Widgets/ListControl.js
+++ b/src/components/Widgets/ListControl.js
@@ -4,7 +4,6 @@ import { List, Map, fromJS } from 'immutable';
 import { sortable } from 'react-sortable';
 import FontIcon from 'react-toolbox/lib/font_icon';
 import ObjectControl from './ObjectControl';
-import styles from './ListControl.css';
 
 function ListItem(props) {
   return <div {...props} className={`list-item ${ props.className }`}>{props.children}</div>;
@@ -138,7 +137,7 @@ export default class ListControl extends Component {
     const { value, field, getAsset, onAddAsset, onRemoveAsset } = this.props;
     const { itemStates } = this.state;
     const collapsed = itemStates.getIn([index, 'collapsed']);
-    const classNames = [styles.item, collapsed ? styles.collapsed : styles.expanded];
+    const classNames = ['nc-listControl-item', collapsed ? 'nc-listControl-collapsed' : 'nc-listControl-expanded'];
 
     return (<SortableListItem
       key={index}
@@ -149,18 +148,18 @@ export default class ListControl extends Component {
       outline="list"
     >
       <div className={classNames.join(' ')}>
-        <button className={styles.toggleButton} onClick={this.handleToggle(index)}>
+        <button className="nc-listControl-toggleButton" onClick={this.handleToggle(index)}>
           <FontIcon value={collapsed ? 'expand_more' : 'expand_less'} />
         </button>
-        <FontIcon value="drag_handle" className={styles.dragIcon} />
-        <button className={styles.removeButton} onClick={this.handleRemove(index)}>
+        <FontIcon value="drag_handle" className="nc-listControl-dragIcon" />
+        <button className="nc-listControl-removeButton" onClick={this.handleRemove(index)}>
           <FontIcon value="close" />
         </button>
-        <div className={styles.objectLabel}>{this.objectLabel(item)}</div>
+        <div className="nc-listControl-objectLabel">{this.objectLabel(item)}</div>
         <ObjectControl
           value={item}
           field={field}
-          className={styles.objectControl}
+          className="nc-listControl-objectControl"
           onChange={this.handleChangeFor(index)}
           getAsset={getAsset}
           onAddAsset={onAddAsset}
@@ -176,9 +175,9 @@ export default class ListControl extends Component {
 
     return (<div id={forID}>
       {value && value.map((item, index) => this.renderItem(item, index))}
-      <button className={styles.addButton} onClick={this.handleAdd}>
-        <FontIcon value="add" className={styles.addButtonIcon} />
-        <span className={styles.addButtonText}>new {listLabel}</span>
+      <button className="nc-listControl-addButton" onClick={this.handleAdd}>
+        <FontIcon value="add" className="nc-listControl-addButtonIcon" />
+        <span className="nc-listControl-addButtonText">new {listLabel}</span>
       </button>
     </div>);
   }
diff --git a/src/components/Widgets/Markdown/MarkdownControl/RawEditor/index.css b/src/components/Widgets/Markdown/MarkdownControl/RawEditor/index.css
index 30b75f9c..7783ab5b 100644
--- a/src/components/Widgets/Markdown/MarkdownControl/RawEditor/index.css
+++ b/src/components/Widgets/Markdown/MarkdownControl/RawEditor/index.css
@@ -1,18 +1,8 @@
-@import "../../../../UI/theme";
-
-.rawWrapper {
+.nc-rawEditor-rawWrapper {
   position: relative;
 }
 
-.editorControlBar {
-  composes: editorControlBar from "../VisualEditor/index.css";
-}
-
-.editorControlBarSticky {
-  composes: editorControlBarSticky from "../VisualEditor/index.css";
-}
-
-.rawEditor {
+.nc-rawEditor-rawEditor {
   position: relative;
   overflow: hidden;
   overflow-x: auto;
diff --git a/src/components/Widgets/Markdown/MarkdownControl/RawEditor/index.js b/src/components/Widgets/Markdown/MarkdownControl/RawEditor/index.js
index e4738b56..b3d4cbe5 100644
--- a/src/components/Widgets/Markdown/MarkdownControl/RawEditor/index.js
+++ b/src/components/Widgets/Markdown/MarkdownControl/RawEditor/index.js
@@ -5,7 +5,6 @@ import Plain from 'slate-plain-serializer';
 import { debounce } from 'lodash';
 import Toolbar from '../Toolbar/Toolbar';
 import { Sticky } from '../../../../UI/Sticky/Sticky';
-import styles from './index.css';
 
 export default class RawEditor extends React.Component {
   constructor(props) {
@@ -53,16 +52,16 @@ export default class RawEditor extends React.Component {
 
   render() {
     return (
-      <div className={styles.rawWrapper}>
+      <div className="nc-rawEditor-rawWrapper">
         <Sticky
-          className={styles.editorControlBar}
-          classNameActive={styles.editorControlBarSticky}
+          className="nc-visualEditor-editorControlBar"
+          classNameActive="nc-visualEditor-editorControlBarSticky"
           fillContainerWidth
         >
           <Toolbar onToggleMode={this.handleToggleMode} disabled rawMode />
         </Sticky>
         <Slate
-          className={styles.rawEditor}
+          className="nc-rawEditor-rawEditor"
           state={this.state.editorState}
           onChange={this.handleChange}
           onPaste={this.handlePaste}
diff --git a/src/components/Widgets/Markdown/MarkdownControl/Toolbar/Toolbar.css b/src/components/Widgets/Markdown/MarkdownControl/Toolbar/Toolbar.css
index 4db58bd8..7c554a32 100644
--- a/src/components/Widgets/Markdown/MarkdownControl/Toolbar/Toolbar.css
+++ b/src/components/Widgets/Markdown/MarkdownControl/Toolbar/Toolbar.css
@@ -1,11 +1,8 @@
-@import "../../../../UI/theme";
-
-.Toolbar {
-  composes: clearfix;
+.nc-toolbar-Toolbar {
   z-index: 1000;
 }
 
-.Toggle {
+.nc-toolbar-Toggle {
   float: right;
   margin-bottom: 0;
   padding-top: 4px;
diff --git a/src/components/Widgets/Markdown/MarkdownControl/Toolbar/Toolbar.js b/src/components/Widgets/Markdown/MarkdownControl/Toolbar/Toolbar.js
index ce2ad6c1..23b7a7b2 100644
--- a/src/components/Widgets/Markdown/MarkdownControl/Toolbar/Toolbar.js
+++ b/src/components/Widgets/Markdown/MarkdownControl/Toolbar/Toolbar.js
@@ -7,7 +7,6 @@ import ToolbarButton from './ToolbarButton';
 import ToolbarComponentsMenu from './ToolbarComponentsMenu';
 import ToolbarPluginForm from './ToolbarPluginForm';
 import { Icon } from '../../../../UI';
-import styles from './Toolbar.css';
 
 export default class Toolbar extends React.Component {
   static propTypes = {
@@ -71,7 +70,7 @@ export default class Toolbar extends React.Component {
     ];
 
     return (
-      <div className={styles.Toolbar}>
+      <div className="nc-toolbar-Toolbar nc-theme-clearfix">
         { buttonsConfig.map((btn, i) => (
           <ToolbarButton
             key={i}
@@ -96,7 +95,7 @@ export default class Toolbar extends React.Component {
             getAsset={getAsset}
           />
         }
-        <Switch label="Markdown" onChange={onToggleMode} checked={rawMode} className={styles.Toggle}/>
+        <Switch label="Markdown" onChange={onToggleMode} checked={rawMode} className="nc-toolbar-Toggle"/>
       </div>
     );
   }
diff --git a/src/components/Widgets/Markdown/MarkdownControl/Toolbar/ToolbarButton.css b/src/components/Widgets/Markdown/MarkdownControl/Toolbar/ToolbarButton.css
index 201c0ee8..dc853c5b 100644
--- a/src/components/Widgets/Markdown/MarkdownControl/Toolbar/ToolbarButton.css
+++ b/src/components/Widgets/Markdown/MarkdownControl/Toolbar/ToolbarButton.css
@@ -1,6 +1,4 @@
-@import "../../../../UI/theme";
-
-.button {
+.nc-toolbarButton-button {
   display: inline-block;
   padding: 6px;
   border: none;
@@ -11,6 +9,6 @@
   }
 }
 
-.active {
+.nc-toolbarButton-active {
   background-color: var(--highlightFGAltColor);
 }
diff --git a/src/components/Widgets/Markdown/MarkdownControl/Toolbar/ToolbarButton.js b/src/components/Widgets/Markdown/MarkdownControl/Toolbar/ToolbarButton.js
index cc5d1d7f..2fdac53a 100644
--- a/src/components/Widgets/Markdown/MarkdownControl/Toolbar/ToolbarButton.js
+++ b/src/components/Widgets/Markdown/MarkdownControl/Toolbar/ToolbarButton.js
@@ -2,11 +2,10 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import classnames from 'classnames';
 import { Icon } from '../../../../UI';
-import styles from './ToolbarButton.css';
 
 const ToolbarButton = ({ label, icon, action, active, disabled }) => (
   <button
-    className={classnames(styles.button, { [styles.active]: active })}
+    className={classnames('nc-toolbarButton-button', { ['nc-toolbarButton-active']: active })}
     onClick={action}
     title={label}
     disabled={disabled}
diff --git a/src/components/Widgets/Markdown/MarkdownControl/Toolbar/ToolbarComponentsMenu.css b/src/components/Widgets/Markdown/MarkdownControl/Toolbar/ToolbarComponentsMenu.css
index 14605874..d610b76c 100644
--- a/src/components/Widgets/Markdown/MarkdownControl/Toolbar/ToolbarComponentsMenu.css
+++ b/src/components/Widgets/Markdown/MarkdownControl/Toolbar/ToolbarComponentsMenu.css
@@ -1,9 +1,9 @@
-.root {
+.nc-toolbarComponentsMenu-root {
   display: inline-block;
   position: relative;
 }
 
-.menuItem {
+.nc-toolbarComponentsMenu-menuItem {
   height: auto;
   padding-top: 6px;
   padding-bottom: 6px;
diff --git a/src/components/Widgets/Markdown/MarkdownControl/Toolbar/ToolbarComponentsMenu.js b/src/components/Widgets/Markdown/MarkdownControl/Toolbar/ToolbarComponentsMenu.js
index e4b0ab79..2866f005 100644
--- a/src/components/Widgets/Markdown/MarkdownControl/Toolbar/ToolbarComponentsMenu.js
+++ b/src/components/Widgets/Markdown/MarkdownControl/Toolbar/ToolbarComponentsMenu.js
@@ -3,7 +3,6 @@ import React from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { Menu, MenuItem } from 'react-toolbox/lib/menu';
 import ToolbarButton from './ToolbarButton';
-import styles from './ToolbarComponentsMenu.css';
 
 export default class ToolbarComponentsMenu extends React.Component {
   static PropTypes = {
@@ -29,7 +28,7 @@ export default class ToolbarComponentsMenu extends React.Component {
   render() {
     const { plugins, onComponentMenuItemClick, disabled } = this.props;
     return (
-      <div className={styles.root}>
+      <div className="nc-toolbarComponentsMenu-root">
         <ToolbarButton
           label="Add Component"
           icon="plus"
@@ -48,7 +47,7 @@ export default class ToolbarComponentsMenu extends React.Component {
               value={plugin.get('id')}
               caption={plugin.get('label')}
               onClick={() => onComponentMenuItemClick(plugin)}
-              className={styles.menuItem}
+              className="nc-toolbarComponentsMenu-menuItem"
             />
           ))}
         </Menu>
diff --git a/src/components/Widgets/Markdown/MarkdownControl/Toolbar/ToolbarPluginForm.css b/src/components/Widgets/Markdown/MarkdownControl/Toolbar/ToolbarPluginForm.css
index 6852a7c9..5421c399 100644
--- a/src/components/Widgets/Markdown/MarkdownControl/Toolbar/ToolbarPluginForm.css
+++ b/src/components/Widgets/Markdown/MarkdownControl/Toolbar/ToolbarPluginForm.css
@@ -1,6 +1,4 @@
-@import "../../../../UI/theme";
-
-.pluginForm {
+.nc-toolbarPluginForm-pluginForm {
   position: absolute;
   background-color: var(--backgroundColor);
   margin-top: -20px;
@@ -12,20 +10,21 @@
   overflow: hidden;
   z-index: 1;
 
-  /* Nested to override high specificity React Toolbox styles */
-  & .header {
-    padding: 12px;
-    margin: 0;
-    color: var(--textColor);
-    background-color: var(--backgroundColor);
-  }
 }
 
-.body {
+/* Nested to override high specificity React Toolbox styles */
+.nc-toolbarPluginForm-pluginForm .nc-toolbarPluginForm-header {
+  padding: 12px;
+  margin: 0;
+  color: var(--textColor);
+  background-color: var(--backgroundColor);
+}
+
+.nc-toolbarPluginForm-body {
   padding: 0 12px 16px;
 }
 
-.footer {
+.nc-toolbarPluginForm-footer {
   background-color: var(--backgroundColor);
   padding: 10px 20px;
   text-align: right;
diff --git a/src/components/Widgets/Markdown/MarkdownControl/Toolbar/ToolbarPluginForm.js b/src/components/Widgets/Markdown/MarkdownControl/Toolbar/ToolbarPluginForm.js
index 2cb6c4da..cb356a3a 100644
--- a/src/components/Widgets/Markdown/MarkdownControl/Toolbar/ToolbarPluginForm.js
+++ b/src/components/Widgets/Markdown/MarkdownControl/Toolbar/ToolbarPluginForm.js
@@ -3,7 +3,6 @@ import React from 'react';
 import { Map } from 'immutable';
 import { Button } from 'react-toolbox/lib/button';
 import ToolbarPluginFormControl from './ToolbarPluginFormControl';
-import styles from './ToolbarPluginForm.css';
 
 export default class ToolbarPluginForm extends React.Component {
   static propTypes = {
@@ -41,9 +40,9 @@ export default class ToolbarPluginForm extends React.Component {
     } = this.props;
 
     return (
-      <form className={styles.pluginForm} onSubmit={this.handleSubmit}>
-        <h3 className={styles.header}>Insert {plugin.get('label')}</h3>
-        <div className={styles.body}>
+      <form className="nc-toolbarPluginForm-pluginForm" onSubmit={this.handleSubmit}>
+        <h3 className="nc-toolbarPluginForm-header">Insert {plugin.get('label')}</h3>
+        <div className="nc-toolbarPluginForm-body">
           {plugin.get('fields').map((field, index) => (
             <ToolbarPluginFormControl
               key={index}
@@ -58,7 +57,7 @@ export default class ToolbarPluginForm extends React.Component {
             />
           ))}
         </div>
-        <div className={styles.footer}>
+        <div className="nc-toolbarPluginForm-footer">
           <Button raised onClick={this.handleSubmit}>Insert</Button>
           {' '}
           <Button onClick={onCancel}>Cancel</Button>
diff --git a/src/components/Widgets/Markdown/MarkdownControl/Toolbar/ToolbarPluginFormControl.css b/src/components/Widgets/Markdown/MarkdownControl/Toolbar/ToolbarPluginFormControl.css
deleted file mode 100644
index a9e6c0ba..00000000
--- a/src/components/Widgets/Markdown/MarkdownControl/Toolbar/ToolbarPluginFormControl.css
+++ /dev/null
@@ -1,7 +0,0 @@
-.control {
-  composes: control from "../../../../ControlPanel/ControlPane.css"
-}
-
-.label {
-  composes: label from "../../../../ControlPanel/ControlPane.css";
-}
diff --git a/src/components/Widgets/Markdown/MarkdownControl/Toolbar/ToolbarPluginFormControl.js b/src/components/Widgets/Markdown/MarkdownControl/Toolbar/ToolbarPluginFormControl.js
index ebd58c2d..082ea7e4 100644
--- a/src/components/Widgets/Markdown/MarkdownControl/Toolbar/ToolbarPluginFormControl.js
+++ b/src/components/Widgets/Markdown/MarkdownControl/Toolbar/ToolbarPluginFormControl.js
@@ -1,7 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { resolveWidget } from '../../../../Widgets';
-import styles from './ToolbarPluginFormControl.css';
 
 const ToolbarPluginFormControl = ({
   field,
@@ -18,8 +17,8 @@ const ToolbarPluginFormControl = ({
   const controlProps = { field, value, onAddAsset, onRemoveAsset, getAsset, onChange };
 
   return (
-    <div className={styles.control} key={key}>
-      <label className={styles.label} htmlFor={key}>{field.get('label')}</label>
+    <div className="nc-controlPane-control" key={key}>
+      <label className="nc-controlPane-label" htmlFor={key}>{field.get('label')}</label>
       <Control {...controlProps}/>
     </div>
   );
diff --git a/src/components/Widgets/Markdown/MarkdownControl/VisualEditor/components.js b/src/components/Widgets/Markdown/MarkdownControl/VisualEditor/components.js
index 21c6421e..cdae5ee2 100644
--- a/src/components/Widgets/Markdown/MarkdownControl/VisualEditor/components.js
+++ b/src/components/Widgets/Markdown/MarkdownControl/VisualEditor/components.js
@@ -1,7 +1,6 @@
 import React from 'react';
 import { List } from 'immutable';
 import cn from 'classnames';
-import styles from './index.css';
 
 /**
  * Slate uses React components to render each type of node that it receives.
@@ -62,7 +61,7 @@ export const NODE_COMPONENTS = {
   'shortcode': props => {
     const { attributes, node, state: editorState } = props;
     const isSelected = editorState.selection.hasFocusIn(node);
-    const className = cn(styles.shortcode, { [styles.shortcodeSelected]: isSelected });
+    const className = cn('nc-visualEditor-shortcode', { ['nc-visualEditor-shortcodeSelected']: isSelected });
     return <div {...attributes} className={className} draggable >{node.data.get('shortcode')}</div>;
   },
 };
diff --git a/src/components/Widgets/Markdown/MarkdownControl/VisualEditor/index.css b/src/components/Widgets/Markdown/MarkdownControl/VisualEditor/index.css
index 69b85d6c..c0e4ccf8 100644
--- a/src/components/Widgets/Markdown/MarkdownControl/VisualEditor/index.css
+++ b/src/components/Widgets/Markdown/MarkdownControl/VisualEditor/index.css
@@ -1,133 +1,136 @@
-@import "../../../../UI/theme";
-
-.editorControlBar {
+.nc-visualEditor-editorControlBar {
   z-index: 1;
   border: 2px solid transparent;
   border-top: 0;
   background-color: var(--controlBGColor);
 }
 
-.editorControlBarSticky {
+.nc-visualEditor-editorControlBarSticky {
   border-color: var(--textFieldBorderColor);
 }
 
-.wrapper {
+.nc-visualEditor-wrapper {
   position: relative;
 }
 
-.editor {
+.nc-visualEditor-editor {
   position: relative;
   overflow: hidden;
   overflow-x: auto;
   min-height: var(--richTextEditorMinHeight);
   font-family: var(--fontFamily);
-
-  & h1 {
-    font-size: 32px;
-    margin-top: 16px;
-  }
-
-  & h2 {
-    font-size: 24px;
-    margin-top: 12px;
-  }
-
-  & h3 {
-    font-size: 20px;
-    margin-top: 8px;
-  }
-
-  & h4 {
-    font-size: 18px;
-    margin-top: 8px;
-  }
-
-  & h5,
-  & h6 {
-    font-size: 16px;
-    margin-top: 8px;
-  }
-
-  & h1, & h2, & h3, & h4, & h5, & h6 {
-    font-weight: 700;
-    line-height: 1;
-  }
-
-  & p,
-  & pre,
-  & blockquote,
-  & ul,
-  & ol {
-    margin-top: 16px;
-    margin-bottom: 16px;
-  }
-
-  & a {
-    text-decoration: underline;
-  }
-
-  & hr {
-    border: 1px solid;
-    margin-bottom: 16px;
-  }
-
-  & li > p {
-    margin: 0;
-  }
-
-  & ul,
-  & ol {
-    padding-left: 30px;
-  }
-
-  & pre {
-    white-space: pre-wrap;
-  }
-
-  & pre > code {
-    display: block;
-    width: 100%;
-    overflow-y: auto;
-    background-color: #000;
-    color: #ccc;
-    border-radius: var(--borderRadius);
-    padding: 10px;
-  }
-
-  & code {
-    background-color: var(--backgroundColorShaded);
-    border-radius: var(--borderRadius);
-    padding: 0 2px;
-    font-size: 85%;
-  }
-
-  & blockquote {
-    padding-left: 16px;
-    border-left: 3px solid var(--backgroundColorShaded);
-    margin-left: 0;
-    margin-right: 0;
-  }
-
-  & table {
-    border-collapse: collapse;
-  }
-
-  & td,
-  & th {
-    border: 2px solid black;
-    padding: 8px;
-    text-align: left;
-  }
 }
 
-.shortcode {
+.nc-visualEditor-editor h1 {
+  font-size: 32px;
+  margin-top: 16px;
+}
+
+.nc-visualEditor-editor h2 {
+  font-size: 24px;
+  margin-top: 12px;
+}
+
+.nc-visualEditor-editor h3 {
+  font-size: 20px;
+  margin-top: 8px;
+}
+
+.nc-visualEditor-editor h4 {
+  font-size: 18px;
+  margin-top: 8px;
+}
+
+.nc-visualEditor-editor h5,
+.nc-visualEditor-editor h6 {
+  font-size: 16px;
+  margin-top: 8px;
+}
+
+.nc-visualEditor-editor h1,
+.nc-visualEditor-editor h2,
+.nc-visualEditor-editor h3,
+.nc-visualEditor-editor h4,
+.nc-visualEditor-editor h5,
+.nc-visualEditor-editor h6 {
+  font-weight: 700;
+  line-height: 1;
+}
+
+.nc-visualEditor-editor p,
+.nc-visualEditor-editor pre,
+.nc-visualEditor-editor blockquote,
+.nc-visualEditor-editor ul,
+.nc-visualEditor-editor ol {
+  margin-top: 16px;
+  margin-bottom: 16px;
+}
+
+.nc-visualEditor-editor a {
+  text-decoration: underline;
+}
+
+.nc-visualEditor-editor hr {
+  border: 1px solid;
+  margin-bottom: 16px;
+}
+
+.nc-visualEditor-editor li > p {
+  margin: 0;
+}
+
+.nc-visualEditor-editor ul,
+.nc-visualEditor-editor ol {
+  padding-left: 30px;
+}
+
+.nc-visualEditor-editor pre {
+  white-space: pre-wrap;
+}
+
+.nc-visualEditor-editor pre > code {
+  display: block;
+  width: 100%;
+  overflow-y: auto;
+  background-color: #000;
+  color: #ccc;
+  border-radius: var(--borderRadius);
+  padding: 10px;
+}
+
+.nc-visualEditor-editor code {
+  background-color: var(--backgroundColorShaded);
+  border-radius: var(--borderRadius);
+  padding: 0 2px;
+  font-size: 85%;
+}
+
+.nc-visualEditor-editor blockquote {
+  padding-left: 16px;
+  border-left: 3px solid var(--backgroundColorShaded);
+  margin-left: 0;
+  margin-right: 0;
+}
+
+.nc-visualEditor-editor table {
+  border-collapse: collapse;
+}
+
+.nc-visualEditor-editor td,
+.nc-visualEditor-editor th {
+  border: 2px solid black;
+  padding: 8px;
+  text-align: left;
+}
+
+.nc-visualEditor-shortcode {
   border: 2px solid black;
   padding: 8px;
   margin: 2px 0;
   cursor: pointer;
 }
 
-.shortcodeSelected {
+.nc-visualEditor-shortcodeSelected {
   border-color: var(--primaryColor);
   color: var(--primaryColor);
 }
diff --git a/src/components/Widgets/Markdown/MarkdownControl/VisualEditor/index.js b/src/components/Widgets/Markdown/MarkdownControl/VisualEditor/index.js
index f50b8077..0b4220cb 100644
--- a/src/components/Widgets/Markdown/MarkdownControl/VisualEditor/index.js
+++ b/src/components/Widgets/Markdown/MarkdownControl/VisualEditor/index.js
@@ -11,7 +11,6 @@ import { MARK_COMPONENTS, NODE_COMPONENTS } from './components';
 import RULES from './rules';
 import plugins, { EditListConfigured } from './plugins';
 import onKeyDown from './keys';
-import styles from './index.css';
 
 export default class Editor extends Component {
   constructor(props) {
@@ -179,10 +178,10 @@ export default class Editor extends Component {
     const { onAddAsset, onRemoveAsset, getAsset } = this.props;
 
     return (
-      <div className={styles.wrapper}>
+      <div className="nc-visualEditor-wrapper">
         <Sticky
-          className={styles.editorControlBar}
-          classNameActive={styles.editorControlBarSticky}
+          className="nc-visualEditor-editorControlBar"
+          classNameActive="nc-visualEditor-editorControlBarSticky"
           fillContainerWidth
         >
           <Toolbar
@@ -207,7 +206,7 @@ export default class Editor extends Component {
           />
         </Sticky>
         <Slate
-          className={styles.editor}
+          className="nc-visualEditor-editor"
           state={this.state.editorState}
           schema={this.state.schema}
           plugins={plugins}
diff --git a/src/components/Widgets/ObjectControl.css b/src/components/Widgets/ObjectControl.css
index 8c49e1cd..47eb3931 100644
--- a/src/components/Widgets/ObjectControl.css
+++ b/src/components/Widgets/ObjectControl.css
@@ -1,6 +1,4 @@
-@import "../UI/theme";
-
-.root {
+.nc-objectControl-root {
   position: relative;
   border: 2px solid rgba(0,0,0,0.1);
   border-radius: var(--borderRadius);
diff --git a/src/components/Widgets/ObjectControl.js b/src/components/Widgets/ObjectControl.js
index fea66f01..ca1fffc2 100644
--- a/src/components/Widgets/ObjectControl.js
+++ b/src/components/Widgets/ObjectControl.js
@@ -2,8 +2,6 @@ import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { Map } from 'immutable';
 import { resolveWidget } from '../Widgets';
-import controlStyles from '../ControlPanel/ControlPane.css';
-import styles from './ObjectControl.css';
 
 export default class ObjectControl extends Component {
   static propTypes = {
@@ -36,9 +34,9 @@ export default class ObjectControl extends Component {
     const widget = resolveWidget(field.get('widget') || 'string');
     const fieldValue = value && Map.isMap(value) ? value.get(field.get('name')) : value;
 
-    return (<div className={controlStyles.widget} key={field.get('name')}>
-      <div className={controlStyles.control} key={field.get('name')}>
-        <label className={controlStyles.label} htmlFor={field.get('name')}>{field.get('label')}</label>
+    return (<div className="nc-controlPane-widget" key={field.get('name')}>
+      <div className="nc-controlPane-control" key={field.get('name')}>
+        <label className="nc-controlPane-label" htmlFor={field.get('name')}>{field.get('label')}</label>
         {
           React.createElement(widget.control, {
             id: field.get('name'),
@@ -64,7 +62,7 @@ export default class ObjectControl extends Component {
     const className = this.props.className || '';
 
     if (multiFields) {
-      return (<div id={forID} className={`${ className } ${ styles.root }`}>
+      return (<div id={forID} className={`${ className } nc-objectControl-root`}>
         {multiFields.map(f => this.controlFor(f))}
       </div>);
     } else if (singleField) {
diff --git a/src/components/stories/Card.js b/src/components/stories/Card.js
index 368a85cf..e1ded550 100644
--- a/src/components/stories/Card.js
+++ b/src/components/stories/Card.js
@@ -8,8 +8,8 @@ const styles = {
     backgroundColor: '#555',
     textAlign: 'center',
     marginTop: 5,
-    padding: 10
-  }
+    padding: 10,
+  },
 };
 
 storiesOf('Card', module)
diff --git a/src/containers/App.css b/src/containers/App.css
index 16eb8b8c..9c3d7fa8 100644
--- a/src/containers/App.css
+++ b/src/containers/App.css
@@ -1,4 +1,4 @@
-.entriesPanel {
+.nc-app-entriesPanel {
   padding: 0 40px;
 }
 
diff --git a/src/containers/App.js b/src/containers/App.js
index eaa1b04a..0c2080f5 100644
--- a/src/containers/App.js
+++ b/src/containers/App.js
@@ -26,8 +26,6 @@ import CollectionPage from './CollectionPage';
 import EntryPage from './EntryPage';
 import SearchPage from './SearchPage';
 import NotFoundPage from './NotFoundPage';
-import styles from './App.css';
-import sidebarStyles from './Sidebar.css';
 
 TopBarProgress.config({
   barColors: {
@@ -137,26 +135,26 @@ class App extends React.Component {
 
     const sidebarContent = (
       <div>
-        <Navigation type="vertical" className={sidebarStyles.nav}>
+        <Navigation type="vertical" className="nc-sidebar-nav">
           {
             publishMode === SIMPLE ? null :
             <section>
-              <h1 className={sidebarStyles.heading}>Publishing</h1>
-              <div className={sidebarStyles.linkWrapper}>
-                <Link to="/" className={sidebarStyles.viewEntriesLink}>Editorial Workflow</Link>
+              <h1 className="nc-sidebar-heading">Publishing</h1>
+              <div className="nc-sidebar-linkWrapper">
+                <Link to="/" className="nc-sidebar-viewEntriesLink">Editorial Workflow</Link>
               </div>
             </section>
           }
           <section>
-            <h1 className={sidebarStyles.heading}>Collections</h1>
+            <h1 className="nc-sidebar-heading">Collections</h1>
             {
               collections.valueSeq().map((collection) => {
                 const collectionName = collection.get('name');
                 return (
-                  <div key={collectionName} className={sidebarStyles.linkWrapper}>
+                  <div key={collectionName} className="nc-sidebar-linkWrapper">
                     <a
                       href={getCollectionUrl(collectionName, true)}
-                      className={sidebarStyles.viewEntriesLink}
+                      className="nc-sidebar-viewEntriesLink"
                       onClick={e => this.handleLinkClick(e, navigateToCollection, collectionName)}
                     >
                       {collection.get('label')}
@@ -165,7 +163,7 @@ class App extends React.Component {
                       collection.get('create') ? (
                         <a
                           href={getNewEntryUrl(collectionName, true)}
-                          className={sidebarStyles.createEntryLink}
+                          className="nc-sidebar-createEntryLink"
                           onClick={e => this.handleLinkClick(e, createNewEntryInCollection, collectionName)}
                         >
                           <FontIcon value="add_circle_outline" />
@@ -193,7 +191,7 @@ class App extends React.Component {
             onLogoutClick={logoutUser}
             toggleDrawer={toggleSidebar}
           />
-          <div className={styles.entriesPanel}>
+          <div className="nc-app-entriesPanel">
             { isFetching && <TopBarProgress /> }
             <div>
               <Switch>
diff --git a/src/containers/CollectionPage.css b/src/containers/CollectionPage.css
index e410953f..349676e2 100644
--- a/src/containers/CollectionPage.css
+++ b/src/containers/CollectionPage.css
@@ -1,4 +1,4 @@
-.noEntries {
+.nc-collectionPage-noEntries {
   position: absolute;
   top: 50%;
   left: 50%;
@@ -7,4 +7,4 @@
   z-index: 1000;
   transform: translateX(-50%) translateY(-50%);
   margin-top: 28px;
-}
\ No newline at end of file
+}
diff --git a/src/containers/CollectionPage.js b/src/containers/CollectionPage.js
index e1762bd8..cd625c1b 100644
--- a/src/containers/CollectionPage.js
+++ b/src/containers/CollectionPage.js
@@ -6,7 +6,6 @@ import { loadEntries } from '../actions/entries';
 import { selectEntries } from '../reducers';
 import { Loader } from '../components/UI';
 import EntryListing from '../components/EntryListing/EntryListing';
-import styles from "./CollectionPage.css";
 
 class CollectionPage extends React.Component {
 
@@ -58,7 +57,7 @@ class CollectionPage extends React.Component {
     const fetchingEntriesContent = (<Loader active>
         {['Loading Entries', 'Caching Entries', 'This might take several minutes']}
     </Loader>);
-    const noEntriesContent = <div className={styles.noEntries}>No Entries</div>;
+    const noEntriesContent = <div className="nc-collectionPage-noEntries">No Entries</div>;
     const fallbackContent = isFetching ? fetchingEntriesContent : noEntriesContent;
 
     return (<div>{entries ? entriesContent : fallbackContent}</div>);
diff --git a/src/containers/Sidebar.css b/src/containers/Sidebar.css
index 2f9f270a..4591ffc2 100644
--- a/src/containers/Sidebar.css
+++ b/src/containers/Sidebar.css
@@ -1,26 +1,24 @@
-@import '../components/UI/theme';
-
-.root {
+.nc-sidebar-root {
   margin-top: 54px;
 }
 
-.sidebar {
+.nc-sidebar-sidebar {
   padding: 0 16px;
   width: 220px;
   background-color: var(--backgroundAltColor);
   color: var(--defaultColorLight);
 }
 
-.heading {
+.nc-sidebar-heading {
   margin-bottom: 8px;
   color: var(--defaultColorLight);
 }
 
-.nav {
+.nc-sidebar-nav {
   padding: 0;
 }
 
-.linkWrapper {
+.nc-sidebar-linkWrapper {
   color: #fff;
   border-radius: var(--borderRadius);
   display: flex;
@@ -32,7 +30,7 @@
   }
 }
 
-.viewEntriesLink {
+.nc-sidebar-viewEntriesLink {
   font-size: 18px;
   color: inherit;
   padding: 10px 6px;
@@ -40,7 +38,7 @@
   width: 100%;
 }
 
-.createEntryLink {
+.nc-sidebar-createEntryLink {
   color: inherit;
   padding: 0 6px;
   display: block;
diff --git a/src/containers/Sidebar.js b/src/containers/Sidebar.js
index 8bb59447..b437d598 100644
--- a/src/containers/Sidebar.js
+++ b/src/containers/Sidebar.js
@@ -4,7 +4,6 @@ import { connect } from 'react-redux';
 import ReactSidebar from 'react-sidebar';
 import _ from 'lodash';
 import { openSidebar } from '../actions/globalUI';
-import styles from './Sidebar.css';
 
 class Sidebar extends React.Component {
 
@@ -43,8 +42,8 @@ class Sidebar extends React.Component {
     return (
       <ReactSidebar
         sidebar={content}
-        rootClassName={styles.root}
-        sidebarClassName={styles.sidebar}
+        rootClassName="nc-sidebar-root"
+        sidebarClassName="nc-sidebar-sidebar"
         docked={sidebarIsOpen && this.state.sidebarDocked} // ALWAYS can hide sidebar
         open={sidebarIsOpen}
         onSetOpen={openSidebar}
diff --git a/src/index.css b/src/index.css
index 578b784b..7e1a31eb 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,6 +1,37 @@
 @import "react-toolbox-global.css";
-@import "material-icons.css";
-@import "components/UI/theme.css";
+@import "./material-icons.css";
+@import "./components/UI/theme.css";
+
+@import "./backends/git-gateway/AuthenticationPage.css";
+@import "./backends/github/AuthenticationPage.css";
+
+@import "./components/AppHeader/AppHeader.css";
+@import "./components/ControlPanel/ControlPane.css";
+@import "./components/EntryEditor/EntryEditor.css";
+@import "./components/EntryListing/EntryListing.css";
+@import "./components/FindBar/FindBar.css";
+@import "./components/PreviewPane/PreviewPane.css";
+@import "./components/UI/Sticky/Sticky.css";
+@import "./components/UI/card/Card.css";
+@import "./components/UI/icon/Icon.css";
+@import "./components/UI/loader/Loader.css";
+@import "./components/UI/toast/Toast.css";
+@import "./components/UnpublishedListing/UnpublishedListing.css";
+@import "./components/UnpublishedListing/UnpublishedListingCardMeta.css";
+@import "./components/Widgets/BooleanControl.css";
+@import "./components/Widgets/FileControl.css";
+@import "./components/Widgets/ListControl.css";
+@import "./components/Widgets/Markdown/MarkdownControl/RawEditor/index.css";
+@import "./components/Widgets/Markdown/MarkdownControl/Toolbar/Toolbar.css";
+@import "./components/Widgets/Markdown/MarkdownControl/Toolbar/ToolbarButton.css";
+@import "./components/Widgets/Markdown/MarkdownControl/Toolbar/ToolbarComponentsMenu.css";
+@import "./components/Widgets/Markdown/MarkdownControl/Toolbar/ToolbarPluginForm.css";
+@import "./components/Widgets/Markdown/MarkdownControl/VisualEditor/index.css";
+@import "./components/Widgets/ObjectControl.css";
+
+@import "./containers/App.css";
+@import "./containers/CollectionPage.css";
+@import "./containers/Sidebar.css";
 
 html {
   box-sizing: border-box;
@@ -40,307 +71,304 @@ img {
   max-width: 100%;
 }
 
-:global {
-
-  & .react-autosuggest__container {
-    position: relative;
-  }
-
-  & .react-autosuggest__input {
-    width: 240px;
-    height: 30px;
-    padding: 10px 20px;
-    font-family: Helvetica, sans-serif;
-    font-weight: 300;
-    font-size: 16px;
-    border: 1px solid #aaa;
-    border-radius: 4px;
-  }
-
-  & .react-autosuggest__input:focus {
-    outline: none;
-  }
-
-  & .react-autosuggest__container--open .react-autosuggest__input {
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0;
-  }
-
-  & .react-autosuggest__suggestions-container {
-    display: none;
-  }
-
-  & .react-autosuggest__container--open .react-autosuggest__suggestions-container {
-    display: block;
-    position: absolute;
-    top: 51px;
-    width: 100%;
-    border: 1px solid #aaa;
-    background-color: #fff;
-    font-family: Helvetica, sans-serif;
-    font-weight: 300;
-    font-size: 16px;
-    border-bottom-left-radius: 4px;
-    border-bottom-right-radius: 4px;
-    z-index: 2;
-  }
-
-  & .react-autosuggest__suggestions-list {
-    margin: 0;
-    padding: 0;
-    list-style-type: none;
-  }
-
-  & .react-autosuggest__suggestion {
-    cursor: pointer;
-    padding: 10px 20px;
-  }
-
-  & .react-autosuggest__suggestion--focused {
-    background-color: #ddd;
-  }
-
-  & .Resizer {
-    background: #000;
-    opacity: .2;
-    z-index: 1;
-    box-sizing: border-box;
-    background-clip: padding-box;
-  }
-
-  & .Resizer:hover {
-    -webkit-transition: all 2s ease;
-    transition: all 2s ease;
-  }
-
-  & .Resizer.vertical {
-    width: 11px;
-    margin: 0 -5px;
-    border-left: 5px solid rgba(255, 255, 255, 0);
-    border-right: 5px solid rgba(255, 255, 255, 0);
-    cursor: col-resize;
-  }
-
-  & .Resizer.vertical:hover {
-    border-left: 5px solid rgba(0, 0, 0, 0.5);
-    border-right: 5px solid rgba(0, 0, 0, 0.5);
-  }
-  & .Resizer.disabled {
-    cursor: not-allowed;
-  }
-  & .Resizer.disabled:hover {
-    border-color: transparent;
-  }
-
-
-  & .rdt {
-    position: relative;
-  }
-  & .rdtPicker {
-    display: none;
-    position: absolute;
-    width: 250px;
-    padding: 4px;
-    margin-top: 1px;
-    z-index: 99999 !important;
-    background: #fff;
-    border: 2px solid var(--secondaryColor);
-    border-radius: 2px;
-    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, .16);
-  }
-  & .rdtOpen .rdtPicker {
-    display: block;
-  }
-  & .rdtStatic .rdtPicker {
-    box-shadow: none;
-    position: static;
-  }
-
-  & .rdtPicker .rdtTimeToggle {
-    text-align: center;
-  }
-
-  & .rdtPicker table {
-    width: 100%;
-    margin: 0;
-  }
-  & .rdtPicker td,
-  & .rdtPicker th {
-    text-align: center;
-    height: 28px;
-  }
-  & .rdtPicker td {
-    cursor: pointer;
-  }
-  & .rdtPicker td.rdtDay:hover,
-  & .rdtPicker td.rdtHour:hover,
-  & .rdtPicker td.rdtMinute:hover,
-  & .rdtPicker td.rdtSecond:hover,
-  & .rdtPicker .rdtTimeToggle:hover {
-    background: #eeeeee;
-    cursor: pointer;
-  }
-  & .rdtPicker td.rdtOld,
-  & .rdtPicker td.rdtNew {
-    color: #999999;
-  }
-  & .rdtPicker td.rdtToday {
-    position: relative;
-  }
-  & .rdtPicker td.rdtToday:before {
-    content: '';
-    display: inline-block;
-    border-left: 7px solid transparent;
-    border-bottom: 7px solid #428bca;
-    border-top-color: rgba(0, 0, 0, 0.2);
-    position: absolute;
-    bottom: 4px;
-    right: 4px;
-  }
-  & .rdtPicker td.rdtActive,
-  & .rdtPicker td.rdtActive:hover {
-    background-color: #428bca;
-    color: #fff;
-    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
-  }
-  & .rdtPicker td.rdtActive.rdtToday:before {
-    border-bottom-color: #fff;
-  }
-  & .rdtPicker td.rdtDisabled,
-  & .rdtPicker td.rdtDisabled:hover {
-    background: none;
-    color: #999999;
-    cursor: not-allowed;
-  }
-
-  & .rdtPicker td span.rdtOld {
-    color: #999999;
-  }
-  & .rdtPicker td span.rdtDisabled,
-  & .rdtPicker td span.rdtDisabled:hover {
-    background: none;
-    color: #999999;
-    cursor: not-allowed;
-  }
-  & .rdtPicker th {
-    border-bottom: 1px solid #f9f9f9;
-  }
-  & .rdtPicker .dow {
-    width: 14.2857%;
-    border-bottom: none;
-  }
-  & .rdtPicker th.rdtSwitch {
-    width: 100px;
-  }
-  & .rdtPicker th.rdtNext,
-  & .rdtPicker th.rdtPrev {
-    font-size: 21px;
-    vertical-align: top;
-  }
-
-  & .rdtPrev span,
-  & .rdtNext span {
-    display: block;
-    -webkit-touch-callout: none; /* iOS Safari */
-    -webkit-user-select: none; /* Chrome/Safari/Opera */
-    -khtml-user-select: none; /* Konqueror */
-    -moz-user-select: none; /* Firefox */
-    -ms-user-select: none; /* Internet Explorer/Edge */
-    user-select: none;
-  }
-
-  & .rdtPicker th.rdtDisabled,
-  & .rdtPicker th.rdtDisabled:hover {
-    background: none;
-    color: #999999;
-    cursor: not-allowed;
-  }
-  & .rdtPicker thead tr:first-child th {
-    cursor: pointer;
-  }
-  & .rdtPicker thead tr:first-child th:hover {
-    background: #eeeeee;
-  }
-
-  & .rdtPicker tfoot {
-    border-top: 1px solid #f9f9f9;
-  }
-
-  & .rdtPicker button {
-    border: none;
-    background: none;
-    cursor: pointer;
-  }
-  & .rdtPicker button:hover {
-    background-color: #eee;
-  }
-
-  & .rdtPicker thead button {
-    width: 100%;
-    height: 100%;
-  }
-
-  & td.rdtMonth,
-  & td.rdtYear {
-    height: 50px;
-    width: 25%;
-    cursor: pointer;
-  }
-  & td.rdtMonth:hover,
-  & td.rdtYear:hover {
-    background: #eee;
-  }
-
-  & .rdtCounters {
-    display: inline-block;
-  }
-
-  & .rdtCounters > div {
-    float: left;
-  }
-
-  & .rdtCounter {
-    height: 100px;
-  }
-
-  & .rdtCounter {
-    width: 40px;
-  }
-
-  & .rdtCounterSeparator {
-    line-height: 100px;
-  }
-
-  & .rdtCounter .rdtBtn {
-    height: 40%;
-    line-height: 40px;
-    cursor: pointer;
-    display: block;
-
-    -webkit-touch-callout: none; /* iOS Safari */
-    -webkit-user-select: none; /* Chrome/Safari/Opera */
-    -khtml-user-select: none; /* Konqueror */
-    -moz-user-select: none; /* Firefox */
-    -ms-user-select: none; /* Internet Explorer/Edge */
-    user-select: none;
-  }
-  & .rdtCounter .rdtBtn:hover {
-    background: #eee;
-  }
-  & .rdtCounter .rdtCount {
-    height: 20%;
-    font-size: 1.2em;
-  }
-
-  & .rdtMilli {
-    vertical-align: middle;
-    padding-left: 8px;
-    width: 48px;
-  }
-
-  & .rdtMilli input {
-    width: 100%;
-    font-size: 1.2em;
-    margin-top: 37px;
-  }
+.react-autosuggest__container {
+  position: relative;
+}
+
+.react-autosuggest__input {
+  width: 240px;
+  height: 30px;
+  padding: 10px 20px;
+  font-family: Helvetica, sans-serif;
+  font-weight: 300;
+  font-size: 16px;
+  border: 1px solid #aaa;
+  border-radius: 4px;
+}
+
+.react-autosuggest__input:focus {
+  outline: none;
+}
+
+.react-autosuggest__container--open .react-autosuggest__input {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.react-autosuggest__suggestions-container {
+  display: none;
+}
+
+.react-autosuggest__container--open .react-autosuggest__suggestions-container {
+  display: block;
+  position: absolute;
+  top: 51px;
+  width: 100%;
+  border: 1px solid #aaa;
+  background-color: #fff;
+  font-family: Helvetica, sans-serif;
+  font-weight: 300;
+  font-size: 16px;
+  border-bottom-left-radius: 4px;
+  border-bottom-right-radius: 4px;
+  z-index: 2;
+}
+
+.react-autosuggest__suggestions-list {
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+}
+
+.react-autosuggest__suggestion {
+  cursor: pointer;
+  padding: 10px 20px;
+}
+
+.react-autosuggest__suggestion--focused {
+  background-color: #ddd;
+}
+
+.Resizer {
+  background: #000;
+  opacity: .2;
+  z-index: 1;
+  box-sizing: border-box;
+  background-clip: padding-box;
+}
+
+.Resizer:hover {
+  -webkit-transition: all 2s ease;
+  transition: all 2s ease;
+}
+
+.Resizer.vertical {
+  width: 11px;
+  margin: 0 -5px;
+  border-left: 5px solid rgba(255, 255, 255, 0);
+  border-right: 5px solid rgba(255, 255, 255, 0);
+  cursor: col-resize;
+}
+
+.Resizer.vertical:hover {
+  border-left: 5px solid rgba(0, 0, 0, 0.5);
+  border-right: 5px solid rgba(0, 0, 0, 0.5);
+}
+.Resizer.disabled {
+  cursor: not-allowed;
+}
+.Resizer.disabled:hover {
+  border-color: transparent;
+}
+
+
+.rdt {
+  position: relative;
+}
+.rdtPicker {
+  display: none;
+  position: absolute;
+  width: 250px;
+  padding: 4px;
+  margin-top: 1px;
+  z-index: 99999 !important;
+  background: #fff;
+  border: 2px solid var(--secondaryColor);
+  border-radius: 2px;
+  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, .16);
+}
+.rdtOpen .rdtPicker {
+  display: block;
+}
+.rdtStatic .rdtPicker {
+  box-shadow: none;
+  position: static;
+}
+
+.rdtPicker .rdtTimeToggle {
+  text-align: center;
+}
+
+.rdtPicker table {
+  width: 100%;
+  margin: 0;
+}
+.rdtPicker td,
+.rdtPicker th {
+  text-align: center;
+  height: 28px;
+}
+.rdtPicker td {
+  cursor: pointer;
+}
+.rdtPicker td.rdtDay:hover,
+.rdtPicker td.rdtHour:hover,
+.rdtPicker td.rdtMinute:hover,
+.rdtPicker td.rdtSecond:hover,
+.rdtPicker .rdtTimeToggle:hover {
+  background: #eeeeee;
+  cursor: pointer;
+}
+.rdtPicker td.rdtOld,
+.rdtPicker td.rdtNew {
+  color: #999999;
+}
+.rdtPicker td.rdtToday {
+  position: relative;
+}
+.rdtPicker td.rdtToday:before {
+  content: '';
+  display: inline-block;
+  border-left: 7px solid transparent;
+  border-bottom: 7px solid #428bca;
+  border-top-color: rgba(0, 0, 0, 0.2);
+  position: absolute;
+  bottom: 4px;
+  right: 4px;
+}
+.rdtPicker td.rdtActive,
+.rdtPicker td.rdtActive:hover {
+  background-color: #428bca;
+  color: #fff;
+  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
+}
+.rdtPicker td.rdtActive.rdtToday:before {
+  border-bottom-color: #fff;
+}
+.rdtPicker td.rdtDisabled,
+.rdtPicker td.rdtDisabled:hover {
+  background: none;
+  color: #999999;
+  cursor: not-allowed;
+}
+
+.rdtPicker td span.rdtOld {
+  color: #999999;
+}
+.rdtPicker td span.rdtDisabled,
+.rdtPicker td span.rdtDisabled:hover {
+  background: none;
+  color: #999999;
+  cursor: not-allowed;
+}
+.rdtPicker th {
+  border-bottom: 1px solid #f9f9f9;
+}
+.rdtPicker .dow {
+  width: 14.2857%;
+  border-bottom: none;
+}
+.rdtPicker th.rdtSwitch {
+  width: 100px;
+}
+.rdtPicker th.rdtNext,
+.rdtPicker th.rdtPrev {
+  font-size: 21px;
+  vertical-align: top;
+}
+
+.rdtPrev span,
+.rdtNext span {
+  display: block;
+  -webkit-touch-callout: none; /* iOS Safari */
+  -webkit-user-select: none; /* Chrome/Safari/Opera */
+  -khtml-user-select: none; /* Konqueror */
+  -moz-user-select: none; /* Firefox */
+  -ms-user-select: none; /* Internet Explorer/Edge */
+  user-select: none;
+}
+
+.rdtPicker th.rdtDisabled,
+.rdtPicker th.rdtDisabled:hover {
+  background: none;
+  color: #999999;
+  cursor: not-allowed;
+}
+.rdtPicker thead tr:first-child th {
+  cursor: pointer;
+}
+.rdtPicker thead tr:first-child th:hover {
+  background: #eeeeee;
+}
+
+.rdtPicker tfoot {
+  border-top: 1px solid #f9f9f9;
+}
+
+.rdtPicker button {
+  border: none;
+  background: none;
+  cursor: pointer;
+}
+.rdtPicker button:hover {
+  background-color: #eee;
+}
+
+.rdtPicker thead button {
+  width: 100%;
+  height: 100%;
+}
+
+td.rdtMonth,
+td.rdtYear {
+  height: 50px;
+  width: 25%;
+  cursor: pointer;
+}
+td.rdtMonth:hover,
+td.rdtYear:hover {
+  background: #eee;
+}
+
+.rdtCounters {
+  display: inline-block;
+}
+
+.rdtCounters > div {
+  float: left;
+}
+
+.rdtCounter {
+  height: 100px;
+}
+
+.rdtCounter {
+  width: 40px;
+}
+
+.rdtCounterSeparator {
+  line-height: 100px;
+}
+
+.rdtCounter .rdtBtn {
+  height: 40%;
+  line-height: 40px;
+  cursor: pointer;
+  display: block;
+
+  -webkit-touch-callout: none; /* iOS Safari */
+  -webkit-user-select: none; /* Chrome/Safari/Opera */
+  -khtml-user-select: none; /* Konqueror */
+  -moz-user-select: none; /* Firefox */
+  -ms-user-select: none; /* Internet Explorer/Edge */
+  user-select: none;
+}
+.rdtCounter .rdtBtn:hover {
+  background: #eee;
+}
+.rdtCounter .rdtCount {
+  height: 20%;
+  font-size: 1.2em;
+}
+
+.rdtMilli {
+  vertical-align: middle;
+  padding-left: 8px;
+  width: 48px;
+}
+
+.rdtMilli input {
+  width: 100%;
+  font-size: 1.2em;
+  margin-top: 37px;
 }
diff --git a/src/material-icons.css b/src/material-icons.css
index a2807ad5..ca09b2d0 100644
--- a/src/material-icons.css
+++ b/src/material-icons.css
@@ -4,12 +4,13 @@
   font-weight: 400;
   src: local('Material Icons'),
   local('MaterialIcons-Regular'),
-  url('material-design-icons/iconfont/MaterialIcons-Regular.woff2') format('woff2'),
-  url('material-design-icons/iconfont/MaterialIcons-Regular.woff') format('woff'),
-  url('material-design-icons/iconfont/MaterialIcons-Regular.ttf') format('truetype');
+
+  url('~material-design-icons/iconfont/MaterialIcons-Regular.woff2') format('woff2'),
+  url('~material-design-icons/iconfont/MaterialIcons-Regular.woff') format('woff'),
+  url('~material-design-icons/iconfont/MaterialIcons-Regular.ttf') format('truetype');
 }
 
-:global .material-icons {
+.material-icons {
   font-family: 'Material Icons';
   font-weight: normal;
   font-style: normal;
diff --git a/src/utils.css b/src/utils.css
index 85da4449..ceb2c8a1 100644
--- a/src/utils.css
+++ b/src/utils.css
@@ -1,25 +1,23 @@
 /* stylelint-disable */
 /* This is an utility file that should not be included in production build */
-:global {
-  & .undefined {
-    position: fixed !important;
-    top: 0 !important;
-    right: 0 !important;
-    bottom: 0 !important;
-    left: 0 !important;
-    display: flex !important;
-    align-items: center !important;
-    justify-content: center !important;
-    background: red !important;
-    color: white !important;
-    font-weight: bold !important;
-    font-size: 30px !important;
-  }
+.undefined {
+  position: fixed !important;
+  top: 0 !important;
+  right: 0 !important;
+  bottom: 0 !important;
+  left: 0 !important;
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  background: red !important;
+  color: white !important;
+  font-weight: bold !important;
+  font-size: 30px !important;
+}
 
-  & .undefined::after {
-    display: block !important;
-    padding: 15px 30px !important;
-    content: 'ERROR! You are missing a class definition in your css module! Inspect me to find out where.' !important;
-  }
+.undefined::after {
+  display: block !important;
+  padding: 15px 30px !important;
+  content: 'ERROR! You are missing a class definition in your css module! Inspect me to find out where.' !important;
 }
 /* stylelint-enable */
diff --git a/webpack.base.js b/webpack.base.js
index 79bdfc59..07a3e74b 100644
--- a/webpack.base.js
+++ b/webpack.base.js
@@ -43,7 +43,7 @@ module.exports = {
         }),
       },
       {
-        /* We use CSS-modules and PostCSS for CMS styles */
+        /* We use PostCSS for CMS styles */
         test: /\.css$/,
         exclude: [/node_modules/],
         use: ExtractTextPlugin.extract({
@@ -52,9 +52,7 @@ module.exports = {
             {
               loader: 'css-loader',
               options: {
-                modules: true,
                 importLoaders: 1,
-                localIdentName: "cms__[name]__[local]"
               },
             },
             { loader: 'postcss-loader' },
diff --git a/yarn.lock b/yarn.lock
index 4c5a154d..27735f10 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -170,7 +170,7 @@ all-contributors-cli@^4.4.0:
     request "^2.72.0"
     yargs "^4.7.0"
 
-alphanum-sort@^1.0.1, alphanum-sort@^1.0.2:
+alphanum-sort@^1.0.0, alphanum-sort@^1.0.1, alphanum-sort@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/alphanum-sort/-/alphanum-sort-1.0.2.tgz#97a1119649b211ad33691d9f9f486a8ec9fbe0a3"
 
@@ -242,6 +242,10 @@ are-we-there-yet@~1.1.2:
     delegates "^1.0.0"
     readable-stream "^2.0.6"
 
+argh@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/argh/-/argh-0.1.4.tgz#3eb4d612973fc6b6dc6ef338f56f759f2ac5c3a6"
+
 argparse@^1.0.7:
   version "1.0.9"
   resolved "https://registry.yarnpkg.com/argparse/-/argparse-1.0.9.tgz#73d83bc263f86e97f8cc4f6bae1b0e90a7d22c86"
@@ -1740,7 +1744,7 @@ color@^0.11.0:
     color-convert "^1.3.0"
     color-string "^0.3.0"
 
-color@^1.0.3:
+color@^1.0.0, color@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/color/-/color-1.0.3.tgz#e48e832d85f14ef694fb468811c2d5cfe729b55d"
   dependencies:
@@ -1914,7 +1918,7 @@ cosmiconfig@^1.1.0:
     pinkie-promise "^2.0.0"
     require-from-string "^1.1.0"
 
-cosmiconfig@^2.1.0, cosmiconfig@^2.1.1:
+cosmiconfig@^2.0.0, cosmiconfig@^2.1.0, cosmiconfig@^2.1.1:
   version "2.2.2"
   resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-2.2.2.tgz#6173cebd56fac042c1f4390edf7af6c07c7cb892"
   dependencies:
@@ -2052,10 +2056,20 @@ css-color-names@0.0.3:
   version "0.0.3"
   resolved "https://registry.yarnpkg.com/css-color-names/-/css-color-names-0.0.3.tgz#de0cef16f4d8aa8222a320d5b6d7e9bbada7b9f6"
 
-css-color-names@0.0.4:
+css-color-names@0.0.4, css-color-names@^0.0.4:
   version "0.0.4"
   resolved "https://registry.yarnpkg.com/css-color-names/-/css-color-names-0.0.4.tgz#808adc2e79cf84738069b646cb20ec27beb629e0"
 
+css-declaration-sorter@^2.0.1:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/css-declaration-sorter/-/css-declaration-sorter-2.1.0.tgz#ac342d22883467cab81271d8427ae2699688855d"
+  dependencies:
+    argh "^0.1.4"
+    postcss "^6.0.0"
+    read-file-stdin "^0.2.0"
+    timsort "^0.3.0"
+    write-file-stdout "0.0.2"
+
 css-in-js-utils@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/css-in-js-utils/-/css-in-js-utils-2.0.0.tgz#5af1dd70f4b06b331f48d22a3d86e0786c0b9435"
@@ -2126,6 +2140,59 @@ cssesc@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-0.1.0.tgz#c814903e45623371a0477b40109aaafbeeaddbb4"
 
+cssnano-preset-default@^4.0.0-rc.2:
+  version "4.0.0-rc.2"
+  resolved "https://registry.yarnpkg.com/cssnano-preset-default/-/cssnano-preset-default-4.0.0-rc.2.tgz#c5f38cdf858fa6e00e52186f77a96c6be48bbced"
+  dependencies:
+    css-declaration-sorter "^2.0.1"
+    cssnano-util-raw-cache "^4.0.0-rc.2"
+    postcss "^6.0.0"
+    postcss-calc "^6.0.0"
+    postcss-colormin "^4.0.0-rc.2"
+    postcss-convert-values "^4.0.0-rc.2"
+    postcss-discard-comments "^4.0.0-rc.2"
+    postcss-discard-duplicates "^4.0.0-rc.2"
+    postcss-discard-empty "^4.0.0-rc.2"
+    postcss-discard-overridden "^4.0.0-rc.2"
+    postcss-merge-longhand "^4.0.0-rc.2"
+    postcss-merge-rules "^4.0.0-rc.2"
+    postcss-minify-font-values "^4.0.0-rc.2"
+    postcss-minify-gradients "^4.0.0-rc.2"
+    postcss-minify-params "^4.0.0-rc.2"
+    postcss-minify-selectors "^4.0.0-rc.2"
+    postcss-normalize-charset "^4.0.0-rc.2"
+    postcss-normalize-display-values "^4.0.0-rc.2"
+    postcss-normalize-positions "^4.0.0-rc.2"
+    postcss-normalize-repeat-style "^4.0.0-rc.2"
+    postcss-normalize-string "^4.0.0-rc.2"
+    postcss-normalize-timing-functions "^4.0.0-rc.2"
+    postcss-normalize-unicode "^4.0.0-rc.2"
+    postcss-normalize-url "^4.0.0-rc.2"
+    postcss-normalize-whitespace "^4.0.0-rc.2"
+    postcss-ordered-values "^4.0.0-rc.2"
+    postcss-reduce-initial "^4.0.0-rc.2"
+    postcss-reduce-transforms "^4.0.0-rc.2"
+    postcss-svgo "^4.0.0-rc.2"
+    postcss-unique-selectors "^4.0.0-rc.2"
+
+cssnano-util-get-arguments@^4.0.0-rc.2:
+  version "4.0.0-rc.2"
+  resolved "https://registry.yarnpkg.com/cssnano-util-get-arguments/-/cssnano-util-get-arguments-4.0.0-rc.2.tgz#39d5cf9caee9e9027066c37954655c14419c06d4"
+
+cssnano-util-get-match@^4.0.0-rc.2:
+  version "4.0.0-rc.2"
+  resolved "https://registry.yarnpkg.com/cssnano-util-get-match/-/cssnano-util-get-match-4.0.0-rc.2.tgz#e48fad41c5d14875f7401fa7c87c5f0ae6d6ff9b"
+
+cssnano-util-raw-cache@^4.0.0-rc.2:
+  version "4.0.0-rc.2"
+  resolved "https://registry.yarnpkg.com/cssnano-util-raw-cache/-/cssnano-util-raw-cache-4.0.0-rc.2.tgz#8b33cec7ba839bfc6a59a2c90fbd80dd404bef75"
+  dependencies:
+    postcss "^6.0.0"
+
+cssnano-util-same-parent@^4.0.0-rc.2:
+  version "4.0.0-rc.2"
+  resolved "https://registry.yarnpkg.com/cssnano-util-same-parent/-/cssnano-util-same-parent-4.0.0-rc.2.tgz#b036b89f0d7c7516aafd1dc9e70f0ed05768834a"
+
 "cssnano@>=2.6.1 <4":
   version "3.10.0"
   resolved "https://registry.yarnpkg.com/cssnano/-/cssnano-3.10.0.tgz#4f38f6cea2b9b17fa01490f23f1dc68ea65c1c38"
@@ -2163,6 +2230,15 @@ cssesc@^0.1.0:
     postcss-value-parser "^3.2.3"
     postcss-zindex "^2.0.1"
 
+cssnano@^v4.0.0-rc.2:
+  version "4.0.0-rc.2"
+  resolved "https://registry.yarnpkg.com/cssnano/-/cssnano-4.0.0-rc.2.tgz#bcc06fe303d4f0f14070e59c121667c1727e2feb"
+  dependencies:
+    cosmiconfig "^2.0.0"
+    cssnano-preset-default "^4.0.0-rc.2"
+    is-resolvable "^1.0.0"
+    postcss "^6.0.0"
+
 csso@~2.3.1:
   version "2.3.2"
   resolved "https://registry.yarnpkg.com/csso/-/csso-2.3.2.tgz#ddd52c587033f49e94b71fc55569f252e8ff5f85"
@@ -2391,20 +2467,13 @@ dns-txt@^2.0.2:
   dependencies:
     buffer-indexof "^1.0.0"
 
-doctrine@1.3.x:
+doctrine@1.3.x, doctrine@^1.2.2:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-1.3.0.tgz#13e75682b55518424276f7c173783456ef913d26"
   dependencies:
     esutils "^2.0.2"
     isarray "^1.0.0"
 
-doctrine@^1.2.2:
-  version "1.5.0"
-  resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-1.5.0.tgz#379dce730f6166f76cefa4e6707a159b02c5a6fa"
-  dependencies:
-    esutils "^2.0.2"
-    isarray "^1.0.0"
-
 doctrine@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-2.0.0.tgz#c73d8d2909d22291e1a007a395804da8b665fe63"
@@ -2462,21 +2531,14 @@ domhandler@^2.3.0:
   dependencies:
     domelementtype "1"
 
-domutils@1.5.1:
+domutils@1.5.1, domutils@^1.5.1:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/domutils/-/domutils-1.5.1.tgz#dcd8488a26f563d61079e48c9f7b7e32373682cf"
   dependencies:
     dom-serializer "0"
     domelementtype "1"
 
-domutils@^1.5.1:
-  version "1.6.2"
-  resolved "https://registry.yarnpkg.com/domutils/-/domutils-1.6.2.tgz#1958cc0b4c9426e9ed367fb1c8e854891b0fa3ff"
-  dependencies:
-    dom-serializer "0"
-    domelementtype "1"
-
-dot-prop@^4.1.0:
+dot-prop@^4.1.0, dot-prop@^4.1.1:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/dot-prop/-/dot-prop-4.2.0.tgz#1f19e0c2e1aa0e32797c49799f2837ac6af69c57"
   dependencies:
@@ -3642,7 +3704,7 @@ has-unicode@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/has-unicode/-/has-unicode-2.0.1.tgz#e0e6fe6a28cf51138855e086d1691e771de2a8b9"
 
-has@^1.0.1, has@~1.0.1:
+has@^1.0.0, has@^1.0.1, has@~1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/has/-/has-1.0.1.tgz#8461733f538b0837c9361e39a9ab9e9704dc2f28"
   dependencies:
@@ -3767,6 +3829,10 @@ hawk@~6.0.2:
     hoek "4.x.x"
     sntp "2.x.x"
 
+hex-color-regex@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/hex-color-regex/-/hex-color-regex-1.1.0.tgz#4c06fccb4602fe2602b3c93df82d7e7dbf1a8a8e"
+
 highlight-es@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/highlight-es/-/highlight-es-1.0.1.tgz#3bb01eb1f2062ddaab72f8b23766a3bf8c1a771f"
@@ -3835,6 +3901,14 @@ hpack.js@^2.1.6:
     readable-stream "^2.0.1"
     wbuf "^1.1.0"
 
+hsl-regex@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/hsl-regex/-/hsl-regex-1.0.0.tgz#d49330c789ed819e276a4c0d272dffa30b18fe6e"
+
+hsla-regex@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/hsla-regex/-/hsla-regex-1.0.0.tgz#c1ce7a3168c8c6614033a4b5f7877f3b225f9c38"
+
 html-comment-regex@^1.1.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/html-comment-regex/-/html-comment-regex-1.1.1.tgz#668b93776eaae55ebde8f3ad464b307a4963625e"
@@ -4172,6 +4246,17 @@ is-ci@^1.0.10, is-ci@^1.0.8:
   dependencies:
     ci-info "^1.0.0"
 
+is-color-stop@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/is-color-stop/-/is-color-stop-1.1.0.tgz#cfff471aee4dd5c9e158598fbe12967b5cdad345"
+  dependencies:
+    css-color-names "^0.0.4"
+    hex-color-regex "^1.1.0"
+    hsl-regex "^1.0.0"
+    hsla-regex "^1.0.0"
+    rgb-regex "^1.0.1"
+    rgba-regex "^1.0.0"
+
 is-date-object@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/is-date-object/-/is-date-object-1.0.1.tgz#9aa20eb6aeebbff77fbd33e74ca01b33581d3a16"
@@ -5438,11 +5523,11 @@ mime-types@^2.1.12, mime-types@~2.1.15, mime-types@~2.1.16, mime-types@~2.1.17,
   dependencies:
     mime-db "~1.30.0"
 
-mime@1.3.x:
+mime@1.3.x, mime@^1.3.4:
   version "1.3.6"
   resolved "https://registry.yarnpkg.com/mime/-/mime-1.3.6.tgz#591d84d3653a6b0b4a3b9df8de5aa8108e72e5e0"
 
-mime@1.4.1, mime@^1.3.4:
+mime@1.4.1:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/mime/-/mime-1.4.1.tgz#121f9ebc49e3766f311a76e1fa1c8003c4b03aa6"
 
@@ -5476,7 +5561,7 @@ minimatch@3.0.3:
   dependencies:
     brace-expansion "^1.0.0"
 
-minimist@0.0.8:
+minimist@0.0.8, minimist@~0.0.1:
   version "0.0.8"
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.8.tgz#857fcabfc3397d2625b8228262e86aa7a011b05d"
 
@@ -5484,10 +5569,6 @@ minimist@^1.1.0, minimist@^1.1.1, minimist@^1.1.3, minimist@^1.2.0, minimist@~1.
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.0.tgz#a35008b20f41383eec1fb914f4cd5df79a264284"
 
-minimist@~0.0.1:
-  version "0.0.10"
-  resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.10.tgz#de3f98543dbf96082be48ad1a0c7cda836301dcf"
-
 mkdirp@0.5.x, "mkdirp@>=0.5 0", mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@~0.5.0, mkdirp@~0.5.1:
   version "0.5.1"
   resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.1.tgz#30057438eac6cf7f8c4767f38648d6697d75c903"
@@ -5720,7 +5801,7 @@ normalize-selector@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/normalize-selector/-/normalize-selector-0.2.0.tgz#d0b145eb691189c63a78d201dc4fdb1293ef0c03"
 
-normalize-url@^1.4.0:
+normalize-url@^1.0.0, normalize-url@^1.4.0:
   version "1.9.1"
   resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-1.9.1.tgz#2cc0d66b31ea23036458436e3620d85954c66c3c"
   dependencies:
@@ -6354,6 +6435,16 @@ postcss-colormin@^2.1.8:
     postcss "^5.0.13"
     postcss-value-parser "^3.2.3"
 
+postcss-colormin@^4.0.0-rc.2:
+  version "4.0.0-rc.2"
+  resolved "https://registry.yarnpkg.com/postcss-colormin/-/postcss-colormin-4.0.0-rc.2.tgz#978e17b77552cdde52e5e15503062b5cb7579272"
+  dependencies:
+    browserslist "^2.0.0"
+    color "^1.0.0"
+    has "^1.0.0"
+    postcss "^6.0.0"
+    postcss-value-parser "^3.0.0"
+
 postcss-convert-values@^2.3.4:
   version "2.6.1"
   resolved "https://registry.yarnpkg.com/postcss-convert-values/-/postcss-convert-values-2.6.1.tgz#bbd8593c5c1fd2e3d1c322bb925dcae8dae4d62d"
@@ -6361,6 +6452,13 @@ postcss-convert-values@^2.3.4:
     postcss "^5.0.11"
     postcss-value-parser "^3.1.2"
 
+postcss-convert-values@^4.0.0-rc.2:
+  version "4.0.0-rc.2"
+  resolved "https://registry.yarnpkg.com/postcss-convert-values/-/postcss-convert-values-4.0.0-rc.2.tgz#6255e099cfc064212ace00fa68bca74ecf6b4b7d"
+  dependencies:
+    postcss "^6.0.0"
+    postcss-value-parser "^3.0.0"
+
 postcss-cssnext@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/postcss-cssnext/-/postcss-cssnext-3.0.2.tgz#63b77adb0b8a4c1d5ec32cd345539535a3417d48"
@@ -6423,24 +6521,48 @@ postcss-discard-comments@^2.0.4:
   dependencies:
     postcss "^5.0.14"
 
+postcss-discard-comments@^4.0.0-rc.2:
+  version "4.0.0-rc.2"
+  resolved "https://registry.yarnpkg.com/postcss-discard-comments/-/postcss-discard-comments-4.0.0-rc.2.tgz#9874d406414f554d017e1a1c8938d9b1ff0f2aa9"
+  dependencies:
+    postcss "^6.0.0"
+
 postcss-discard-duplicates@^2.0.1:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/postcss-discard-duplicates/-/postcss-discard-duplicates-2.1.0.tgz#b9abf27b88ac188158a5eb12abcae20263b91932"
   dependencies:
     postcss "^5.0.4"
 
+postcss-discard-duplicates@^4.0.0-rc.2:
+  version "4.0.0-rc.2"
+  resolved "https://registry.yarnpkg.com/postcss-discard-duplicates/-/postcss-discard-duplicates-4.0.0-rc.2.tgz#6218b98f65862dfc1dd35525ab954fc4bb78188d"
+  dependencies:
+    postcss "^6.0.0"
+
 postcss-discard-empty@^2.0.1:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/postcss-discard-empty/-/postcss-discard-empty-2.1.0.tgz#d2b4bd9d5ced5ebd8dcade7640c7d7cd7f4f92b5"
   dependencies:
     postcss "^5.0.14"
 
+postcss-discard-empty@^4.0.0-rc.2:
+  version "4.0.0-rc.2"
+  resolved "https://registry.yarnpkg.com/postcss-discard-empty/-/postcss-discard-empty-4.0.0-rc.2.tgz#3791106c7711d4468fe08bf0bf644a477788c880"
+  dependencies:
+    postcss "^6.0.0"
+
 postcss-discard-overridden@^0.1.1:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/postcss-discard-overridden/-/postcss-discard-overridden-0.1.1.tgz#8b1eaf554f686fb288cd874c55667b0aa3668d58"
   dependencies:
     postcss "^5.0.16"
 
+postcss-discard-overridden@^4.0.0-rc.2:
+  version "4.0.0-rc.2"
+  resolved "https://registry.yarnpkg.com/postcss-discard-overridden/-/postcss-discard-overridden-4.0.0-rc.2.tgz#88507319a505afaa58acb93d3ef760270053388b"
+  dependencies:
+    postcss "^6.0.0"
+
 postcss-discard-unused@^2.2.1:
   version "2.2.3"
   resolved "https://registry.yarnpkg.com/postcss-discard-unused/-/postcss-discard-unused-2.2.3.tgz#bce30b2cc591ffc634322b5fb3464b6d934f4433"
@@ -6554,6 +6676,14 @@ postcss-merge-longhand@^2.0.1:
   dependencies:
     postcss "^5.0.4"
 
+postcss-merge-longhand@^4.0.0-rc.2:
+  version "4.0.0-rc.2"
+  resolved "https://registry.yarnpkg.com/postcss-merge-longhand/-/postcss-merge-longhand-4.0.0-rc.2.tgz#5aae5b86750d9a16e7bef6482dab65a9d4b3c03a"
+  dependencies:
+    postcss "^6.0.0"
+    postcss-value-parser "^3.0.0"
+    stylehacks "^4.0.0-rc.2"
+
 postcss-merge-rules@^2.0.3:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/postcss-merge-rules/-/postcss-merge-rules-2.1.2.tgz#d1df5dfaa7b1acc3be553f0e9e10e87c61b5f721"
@@ -6564,6 +6694,17 @@ postcss-merge-rules@^2.0.3:
     postcss-selector-parser "^2.2.2"
     vendors "^1.0.0"
 
+postcss-merge-rules@^4.0.0-rc.2:
+  version "4.0.0-rc.2"
+  resolved "https://registry.yarnpkg.com/postcss-merge-rules/-/postcss-merge-rules-4.0.0-rc.2.tgz#18d89d1a6ddcf91c7288775bfbefb881367ab944"
+  dependencies:
+    browserslist "^2.0.0"
+    caniuse-api "^2.0.0"
+    cssnano-util-same-parent "^4.0.0-rc.2"
+    postcss "^6.0.0"
+    postcss-selector-parser "^3.0.0-rc.0"
+    vendors "^1.0.0"
+
 postcss-message-helpers@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/postcss-message-helpers/-/postcss-message-helpers-2.0.0.tgz#a4f2f4fab6e4fe002f0aed000478cdf52f9ba60e"
@@ -6576,6 +6717,13 @@ postcss-minify-font-values@^1.0.2:
     postcss "^5.0.4"
     postcss-value-parser "^3.0.2"
 
+postcss-minify-font-values@^4.0.0-rc.2:
+  version "4.0.0-rc.2"
+  resolved "https://registry.yarnpkg.com/postcss-minify-font-values/-/postcss-minify-font-values-4.0.0-rc.2.tgz#e5fd79c97525e79421ea736d857baedce65a5ea9"
+  dependencies:
+    postcss "^6.0.0"
+    postcss-value-parser "^3.0.0"
+
 postcss-minify-gradients@^1.0.1:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/postcss-minify-gradients/-/postcss-minify-gradients-1.0.5.tgz#5dbda11373703f83cfb4a3ea3881d8d75ff5e6e1"
@@ -6583,6 +6731,15 @@ postcss-minify-gradients@^1.0.1:
     postcss "^5.0.12"
     postcss-value-parser "^3.3.0"
 
+postcss-minify-gradients@^4.0.0-rc.2:
+  version "4.0.0-rc.2"
+  resolved "https://registry.yarnpkg.com/postcss-minify-gradients/-/postcss-minify-gradients-4.0.0-rc.2.tgz#c07e95a4f4f9f8a056e59ac0817e72e891bc62dc"
+  dependencies:
+    cssnano-util-get-arguments "^4.0.0-rc.2"
+    is-color-stop "^1.1.0"
+    postcss "^6.0.0"
+    postcss-value-parser "^3.0.0"
+
 postcss-minify-params@^1.0.4:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/postcss-minify-params/-/postcss-minify-params-1.2.2.tgz#ad2ce071373b943b3d930a3fa59a358c28d6f1f3"
@@ -6592,6 +6749,16 @@ postcss-minify-params@^1.0.4:
     postcss-value-parser "^3.0.2"
     uniqs "^2.0.0"
 
+postcss-minify-params@^4.0.0-rc.2:
+  version "4.0.0-rc.2"
+  resolved "https://registry.yarnpkg.com/postcss-minify-params/-/postcss-minify-params-4.0.0-rc.2.tgz#4bd747f4ba7fd5b1f31ecc8823aa9a589e7f8980"
+  dependencies:
+    alphanum-sort "^1.0.0"
+    cssnano-util-get-arguments "^4.0.0-rc.2"
+    postcss "^6.0.0"
+    postcss-value-parser "^3.0.0"
+    uniqs "^2.0.0"
+
 postcss-minify-selectors@^2.0.4:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/postcss-minify-selectors/-/postcss-minify-selectors-2.1.1.tgz#b2c6a98c0072cf91b932d1a496508114311735bf"
@@ -6601,6 +6768,15 @@ postcss-minify-selectors@^2.0.4:
     postcss "^5.0.14"
     postcss-selector-parser "^2.0.0"
 
+postcss-minify-selectors@^4.0.0-rc.2:
+  version "4.0.0-rc.2"
+  resolved "https://registry.yarnpkg.com/postcss-minify-selectors/-/postcss-minify-selectors-4.0.0-rc.2.tgz#86089c9d8a6a9166815f19bfa2d01b7da5d173f6"
+  dependencies:
+    alphanum-sort "^1.0.0"
+    has "^1.0.0"
+    postcss "^6.0.0"
+    postcss-selector-parser "^3.0.0-rc.0"
+
 postcss-modules-extract-imports@^1.0.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/postcss-modules-extract-imports/-/postcss-modules-extract-imports-1.2.0.tgz#66140ecece38ef06bf0d3e355d69bf59d141ea85"
@@ -6640,6 +6816,61 @@ postcss-normalize-charset@^1.1.0:
   dependencies:
     postcss "^5.0.5"
 
+postcss-normalize-charset@^4.0.0-rc.2:
+  version "4.0.0-rc.2"
+  resolved "https://registry.yarnpkg.com/postcss-normalize-charset/-/postcss-normalize-charset-4.0.0-rc.2.tgz#898b67c77bea2ff7c318cf56b427bce10bc35db6"
+  dependencies:
+    postcss "^6.0.0"
+
+postcss-normalize-display-values@^4.0.0-rc.2:
+  version "4.0.0-rc.2"
+  resolved "https://registry.yarnpkg.com/postcss-normalize-display-values/-/postcss-normalize-display-values-4.0.0-rc.2.tgz#d802d77dc7fba66f72a201e94804029b24acd271"
+  dependencies:
+    cssnano-util-get-match "^4.0.0-rc.2"
+    postcss "^6.0.0"
+    postcss-value-parser "^3.0.0"
+
+postcss-normalize-positions@^4.0.0-rc.2:
+  version "4.0.0-rc.2"
+  resolved "https://registry.yarnpkg.com/postcss-normalize-positions/-/postcss-normalize-positions-4.0.0-rc.2.tgz#f12cb691438e8cb91abe914052ac2381e563da32"
+  dependencies:
+    cssnano-util-get-arguments "^4.0.0-rc.2"
+    has "^1.0.0"
+    postcss "^6.0.0"
+    postcss-value-parser "^3.0.0"
+
+postcss-normalize-repeat-style@^4.0.0-rc.2:
+  version "4.0.0-rc.2"
+  resolved "https://registry.yarnpkg.com/postcss-normalize-repeat-style/-/postcss-normalize-repeat-style-4.0.0-rc.2.tgz#c949358201116a20d01975c6e471611a5ddc9083"
+  dependencies:
+    cssnano-util-get-arguments "^4.0.0-rc.2"
+    cssnano-util-get-match "^4.0.0-rc.2"
+    postcss "^6.0.0"
+    postcss-value-parser "^3.0.0"
+
+postcss-normalize-string@^4.0.0-rc.2:
+  version "4.0.0-rc.2"
+  resolved "https://registry.yarnpkg.com/postcss-normalize-string/-/postcss-normalize-string-4.0.0-rc.2.tgz#924f2a98bf9b44d40591434acf8f31b71a977606"
+  dependencies:
+    has "^1.0.0"
+    postcss "^6.0.0"
+    postcss-value-parser "^3.0.0"
+
+postcss-normalize-timing-functions@^4.0.0-rc.2:
+  version "4.0.0-rc.2"
+  resolved "https://registry.yarnpkg.com/postcss-normalize-timing-functions/-/postcss-normalize-timing-functions-4.0.0-rc.2.tgz#a03474b4ddc4a1278ec276557105cf552fa501f0"
+  dependencies:
+    cssnano-util-get-match "^4.0.0-rc.2"
+    postcss "^6.0.0"
+    postcss-value-parser "^3.0.0"
+
+postcss-normalize-unicode@^4.0.0-rc.2:
+  version "4.0.0-rc.2"
+  resolved "https://registry.yarnpkg.com/postcss-normalize-unicode/-/postcss-normalize-unicode-4.0.0-rc.2.tgz#953650b1449ec23da462fa45570435c43bed9dd6"
+  dependencies:
+    postcss "^6.0.0"
+    postcss-value-parser "^3.0.0"
+
 postcss-normalize-url@^3.0.7:
   version "3.0.8"
   resolved "https://registry.yarnpkg.com/postcss-normalize-url/-/postcss-normalize-url-3.0.8.tgz#108f74b3f2fcdaf891a2ffa3ea4592279fc78222"
@@ -6649,6 +6880,22 @@ postcss-normalize-url@^3.0.7:
     postcss "^5.0.14"
     postcss-value-parser "^3.2.3"
 
+postcss-normalize-url@^4.0.0-rc.2:
+  version "4.0.0-rc.2"
+  resolved "https://registry.yarnpkg.com/postcss-normalize-url/-/postcss-normalize-url-4.0.0-rc.2.tgz#3ccad023b8e30ff434546a6e4b7baab1fa112c42"
+  dependencies:
+    is-absolute-url "^2.0.0"
+    normalize-url "^1.0.0"
+    postcss "^6.0.0"
+    postcss-value-parser "^3.0.0"
+
+postcss-normalize-whitespace@^4.0.0-rc.2:
+  version "4.0.0-rc.2"
+  resolved "https://registry.yarnpkg.com/postcss-normalize-whitespace/-/postcss-normalize-whitespace-4.0.0-rc.2.tgz#d8df79a51bab0003d009226be0cb1af87f308f43"
+  dependencies:
+    postcss "^6.0.0"
+    postcss-value-parser "^3.0.0"
+
 postcss-ordered-values@^2.1.0:
   version "2.2.3"
   resolved "https://registry.yarnpkg.com/postcss-ordered-values/-/postcss-ordered-values-2.2.3.tgz#eec6c2a67b6c412a8db2042e77fe8da43f95c11d"
@@ -6656,6 +6903,14 @@ postcss-ordered-values@^2.1.0:
     postcss "^5.0.4"
     postcss-value-parser "^3.0.1"
 
+postcss-ordered-values@^4.0.0-rc.2:
+  version "4.0.0-rc.2"
+  resolved "https://registry.yarnpkg.com/postcss-ordered-values/-/postcss-ordered-values-4.0.0-rc.2.tgz#7894a80b65be50c9361128087b48ea6e7a1db8bf"
+  dependencies:
+    cssnano-util-get-arguments "^4.0.0-rc.2"
+    postcss "^6.0.0"
+    postcss-value-parser "^3.0.0"
+
 postcss-pseudo-class-any-link@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/postcss-pseudo-class-any-link/-/postcss-pseudo-class-any-link-4.0.0.tgz#9152a0613d3450720513e8892854bae42d0ee68e"
@@ -6682,6 +6937,15 @@ postcss-reduce-initial@^1.0.0:
   dependencies:
     postcss "^5.0.4"
 
+postcss-reduce-initial@^4.0.0-rc.2:
+  version "4.0.0-rc.2"
+  resolved "https://registry.yarnpkg.com/postcss-reduce-initial/-/postcss-reduce-initial-4.0.0-rc.2.tgz#ab2e1cca7903745a77b99630445c939152e0cd62"
+  dependencies:
+    browserslist "^2.0.0"
+    caniuse-api "^2.0.0"
+    has "^1.0.0"
+    postcss "^6.0.0"
+
 postcss-reduce-transforms@^1.0.3:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/postcss-reduce-transforms/-/postcss-reduce-transforms-1.0.4.tgz#ff76f4d8212437b31c298a42d2e1444025771ae1"
@@ -6690,6 +6954,15 @@ postcss-reduce-transforms@^1.0.3:
     postcss "^5.0.8"
     postcss-value-parser "^3.0.1"
 
+postcss-reduce-transforms@^4.0.0-rc.2:
+  version "4.0.0-rc.2"
+  resolved "https://registry.yarnpkg.com/postcss-reduce-transforms/-/postcss-reduce-transforms-4.0.0-rc.2.tgz#1c92610e9c595edd367a0988d64f59c371fe66d1"
+  dependencies:
+    cssnano-util-get-match "^4.0.0-rc.2"
+    has "^1.0.0"
+    postcss "^6.0.0"
+    postcss-value-parser "^3.0.0"
+
 postcss-replace-overflow-wrap@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/postcss-replace-overflow-wrap/-/postcss-replace-overflow-wrap-2.0.0.tgz#794db6faa54f8db100854392a93af45768b4e25b"
@@ -6752,6 +7025,14 @@ postcss-selector-parser@^2.0.0, postcss-selector-parser@^2.1.1, postcss-selector
     indexes-of "^1.0.1"
     uniq "^1.0.1"
 
+postcss-selector-parser@^3.0.0-rc.0:
+  version "3.0.0-rc.0"
+  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-3.0.0-rc.0.tgz#dfb74f1cf3bc043d5692e37203170ac2da40a150"
+  dependencies:
+    dot-prop "^4.1.1"
+    indexes-of "^1.0.1"
+    uniq "^1.0.1"
+
 postcss-sorting@^1.7.0:
   version "1.7.0"
   resolved "https://registry.yarnpkg.com/postcss-sorting/-/postcss-sorting-1.7.0.tgz#69b92db051ed4181c5b8c585ee8b8c5f40915a82"
@@ -6768,6 +7049,15 @@ postcss-svgo@^2.1.1:
     postcss-value-parser "^3.2.3"
     svgo "^0.7.0"
 
+postcss-svgo@^4.0.0-rc.2:
+  version "4.0.0-rc.2"
+  resolved "https://registry.yarnpkg.com/postcss-svgo/-/postcss-svgo-4.0.0-rc.2.tgz#c9a650e895bf6fcf517612d26331190ad696f30f"
+  dependencies:
+    is-svg "^2.0.0"
+    postcss "^6.0.0"
+    postcss-value-parser "^3.0.0"
+    svgo "^0.7.0"
+
 postcss-unique-selectors@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/postcss-unique-selectors/-/postcss-unique-selectors-2.0.2.tgz#981d57d29ddcb33e7b1dfe1fd43b8649f933ca1d"
@@ -6776,7 +7066,15 @@ postcss-unique-selectors@^2.0.2:
     postcss "^5.0.4"
     uniqs "^2.0.0"
 
-postcss-value-parser@^3.0.1, postcss-value-parser@^3.0.2, postcss-value-parser@^3.1.1, postcss-value-parser@^3.1.2, postcss-value-parser@^3.2.3, postcss-value-parser@^3.3.0:
+postcss-unique-selectors@^4.0.0-rc.2:
+  version "4.0.0-rc.2"
+  resolved "https://registry.yarnpkg.com/postcss-unique-selectors/-/postcss-unique-selectors-4.0.0-rc.2.tgz#bb7773d522748bd87595248739ee045bed6f280b"
+  dependencies:
+    alphanum-sort "^1.0.0"
+    postcss "^6.0.0"
+    uniqs "^2.0.0"
+
+postcss-value-parser@^3.0.0, postcss-value-parser@^3.0.1, postcss-value-parser@^3.0.2, postcss-value-parser@^3.1.1, postcss-value-parser@^3.1.2, postcss-value-parser@^3.2.3, postcss-value-parser@^3.3.0:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-3.3.0.tgz#87f38f9f18f774a4ab4c8a232f5c5ce8872a9d15"
 
@@ -7302,7 +7600,7 @@ read-cache@^1.0.0:
   dependencies:
     pify "^2.3.0"
 
-read-file-stdin@^0.2.1:
+read-file-stdin@^0.2.0, read-file-stdin@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/read-file-stdin/-/read-file-stdin-0.2.1.tgz#25eccff3a153b6809afacb23ee15387db9e0ee61"
   dependencies:
@@ -7771,10 +8069,18 @@ rgb-hex@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/rgb-hex/-/rgb-hex-2.1.0.tgz#c773c5fe2268a25578d92539a82a7a5ce53beda6"
 
+rgb-regex@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/rgb-regex/-/rgb-regex-1.0.1.tgz#c0e0d6882df0e23be254a475e8edd41915feaeb1"
+
 rgb@~0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/rgb/-/rgb-0.1.0.tgz#be27b291e8feffeac1bd99729721bfa40fc037b5"
 
+rgba-regex@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/rgba-regex/-/rgba-regex-1.0.0.tgz#43374e2e2ca0968b0ef1523460b7d730ff22eeb3"
+
 right-align@^0.1.1:
   version "0.1.3"
   resolved "https://registry.yarnpkg.com/right-align/-/right-align-0.1.3.tgz#61339b722fe6a3515689210d24e14c96148613ef"
@@ -8472,6 +8778,14 @@ stylehacks@^2.3.0, stylehacks@^2.3.2:
     text-table "^0.2.0"
     write-file-stdout "0.0.2"
 
+stylehacks@^4.0.0-rc.2:
+  version "4.0.0-rc.2"
+  resolved "https://registry.yarnpkg.com/stylehacks/-/stylehacks-4.0.0-rc.2.tgz#6626611341fd09fcdf0d87042306483f22949a2f"
+  dependencies:
+    browserslist "^2.0.0"
+    postcss "^6.0.0"
+    postcss-selector-parser "^3.0.0-rc.0"
+
 stylelint-config-css-modules@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/stylelint-config-css-modules/-/stylelint-config-css-modules-0.1.0.tgz#6fc47c31836caad878e8daabde2b675899c2f4b6"
@@ -8771,6 +9085,10 @@ timers-browserify@^2.0.2:
   dependencies:
     setimmediate "^1.0.4"
 
+timsort@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/timsort/-/timsort-0.3.0.tgz#405411a8e7e6339fe64db9a234de11dc31e02bd4"
+
 tmp@0.0.30:
   version "0.0.30"
   resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.30.tgz#72419d4a8be7d6ce75148fd8b324e593a711c2ed"