diff --git a/client/data/index.js b/client/data/index.js
index 2d14b4ac..8b381f97 100644
--- a/client/data/index.js
+++ b/client/data/index.js
@@ -3,4 +3,3 @@ export { Session } from './api';
 export { invalidate } from './tools';
 export { opener } from './mimetype';
 export { EventEmitter, EventReceiver } from './events';
-export { password } from './password';
diff --git a/client/data/password.js b/client/data/password.js
deleted file mode 100644
index 54bf5fff..00000000
--- a/client/data/password.js
+++ /dev/null
@@ -1,14 +0,0 @@
-function keyManager(){
-    let key = null;
-    return {
-        get: function(){
-            return key;
-        },
-        set: function(_key){
-            key = _key || null
-        }
-    }
-}
-
-
-export const password = keyManager();
diff --git a/client/pages/connectpage.js b/client/pages/connectpage.js
index 03289df1..8a714f41 100644
--- a/client/pages/connectpage.js
+++ b/client/pages/connectpage.js
@@ -1,26 +1,26 @@
 import React from 'react';
-import { Container, Card, NgIf, Input, Button, Textarea, Loader, Notification, encrypt, decrypt, theme } from '../utilities';
-import { Session, invalidate, password } from '../data';
-import { Uploader } from '../utilities';
+import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
+
+import config from '../../config.js';
+import { Container, NgIf, Loader, Notification, theme } from '../utilities/';
+import { Session, invalidate } from '../data';
+import { ForkMe, RememberMe, Credentials, Form } from './connectpage/';
+
+import './connectpage.scss';
+
 
 export class ConnectPage extends React.Component {
     constructor(props){
         super(props);
         this.state = {
-            type: 'webdav',
+            credentials: {},
+            remember_me: window.localStorage.hasOwnProperty('credentials') ? true : false,
             loading: false,
             error: null,
-            advanced_ftp: false, // state of checkbox in the UI
-            advanced_sftp: false, // state of checkbox in the UI
-            advanced_webdav: false,
-            advanced_s3: false,
-            advanced_git: false,
-            credentials: {},
-            password: password.get() || null,
             marginTop: this._marginTop()
-        }
+        };
 
-        // adapt from: https://stackoverflow.com/questions/901115/how-can-i-get-query-string-values-in-javascript
+        // adapted from: https://stackoverflow.com/questions/901115/how-can-i-get-query-string-values-in-javascript
         function getParam(name) {
             const regex = new RegExp("[?&#]" + name.replace(/[\[\]]/g, "\\$&") + "(=([^&#]*)|&|#|$)");
             const results = regex.exec(window.location.href);
@@ -32,101 +32,60 @@ export class ConnectPage extends React.Component {
         // dropbox login
         if(getParam('state') === 'dropbox'){
             this.state.loading = true;
-            this.authenticate({bearer: getParam('access_token'), type: 'dropbox'})
-        }               
+            this.authenticate({bearer: getParam('access_token'), type: 'dropbox'});
+        }
         // google drive login
         if(getParam('code')){
             this.state.loading = true;
-            this.authenticate({code: getParam('code'), type: 'gdrive'})
+            this.authenticate({code: getParam('code'), type: 'gdrive'});
         }
     }
 
-
+    componentWillMount(){
+        window.onresize = () => {
+            this.setState({marginTop: this._marginTop()});
+        };
+    }
     _marginTop(){
         let size = Math.round(Math.abs((document.body.offsetHeight - 300) / 2));
         return size > 150? 150 : size;
     }
 
+    authenticate(params){
+        if(params.type === 'dropbox') return this.login_dropbox();
+        else if(params.type === 'gdrive') return this.login_google();
 
-    componentWillMount(){
-        window.onresize = () => {
-            this.setState({marginTop: this._marginTop()})
-        }
-        let raw = window.localStorage.getItem('store');
-
-        if(!this.state.loading && raw){
-            if(this.state.password === null){
-                let key = prompt("Your password: ");
-                if(key){
-                    password.set(key);
-                    let credentials = decrypt(raw, key);
-                    this.setState({password: password, credentials: credentials}, setAdvanced.bind(this));
-                }               
-            }else{
-                let credentials = decrypt(raw, this.state.password);
-                this.setState({credentials: credentials}, setAdvanced.bind(this));
-            }
-
-            function setAdvanced(){
-                if(this.state.credentials['ftp'] && (this.state.credentials['ftp']['path'] || this.state.credentials['ftp']['port']) ){
-                    this.setState({advanced_ftp: true})
-                }
-                if(this.state.credentials['sftp'] && (this.state.credentials['sftp']['path'] || this.state.credentials['sftp']['port'] || this.state.credentials['sftp']['private_key'])){
-                    this.setState({advanced_sftp: true})
-                }
-                if(this.state.credentials['webdav'] && this.state.credentials['webdav']['path']){
-                    this.setState({advanced_webdav: true})
-                }
-                if(this.state.credentials['s3'] && this.state.credentials['s3']['path']){
-                    this.setState({advanced_s3: true})
-                }
-                if(this.state.credentials['git'] && (this.state.credentials['git']['username'] || this.state.credentials['git']['commit'] || this.state.credentials['git']['branch']  || this.state.credentials['git']['passphrase'] || this.state.credentials['git']['author_name'] || this.state.credentials['git']['author_email'] || this.state.credentials['git']['committer_name'] || this.state.credentials['git']['committer_email'])){
-                    this.setState({advanced_git: true})
-                }
-            }
-        }
-    }
-
-    getDefault(type, key){
-        if(this.state.credentials[type]){
-            return this.state.credentials[type][key]
-        }else{
-            return null;
-        }
-    }
-    onRememberMe(e){
-        let value = e.target.checked;
-        if(value === true){
-            let key = prompt("password that will serve to encrypt your credentials:");
-            password.set(key);
-            this.setState({password: key});
-        }else if(value === false){
-            window.localStorage.clear();
-            password.set();
-            this.setState({credentials: {}, password: null});
-        }
-    }
-
-    onChange(type){
-        this.setState({type: type});
+        this.setState({loading: true});
+        Session.authenticate(params)
+            .then((ok) => {
+                this.setState({loading: false});
+                invalidate();
+                const path = params.path && /^\//.test(params.path)? /\/$/.test(params.path) ? params.path : params.path+'/' :  '/';
+                this.props.history.push('/files'+path);
+            })
+            .catch(err => {
+                if(err && err.code === 'CANCELLED'){ return; }
+                this.setState({loading: false, error: err});
+                window.setTimeout(() => {
+                    this.setState({error: null});
+                }, 1000);
+            });
     }
 
     login_dropbox(e){
-        e.preventDefault();
         this.setState({loading: true});
         Session.url('dropbox').then((url) => {
             window.location.href = url;
         }).catch((err) => {
-            if(err && err.code === 'CANCELLED'){ return }
+            if(err && err.code === 'CANCELLED'){ return; }
             this.setState({loading: false, error: err});
             window.setTimeout(() => {
-                this.setState({error: null})
+                this.setState({error: null});
             }, 1000);
         });
     }
 
-    login_google(e){        
-        e.preventDefault();
+    login_google(e){
         this.setState({loading: true});
         Session.url('gdrive').then((url) => {
             window.location.href = url;
@@ -134,190 +93,55 @@ export class ConnectPage extends React.Component {
             if(err && err.code === 'CANCELLED'){ return }
             this.setState({loading: false, error: err});
             window.setTimeout(() => {
-                this.setState({error: null})
+                this.setState({error: null});
             }, 1000);
-        })
+        });
     }
 
-    authenticate(params){
-        if(password.get()){
-            this.state.credentials[params['type']] = params;
-            window.localStorage.setItem('store', encrypt(this.state.credentials, password.get()));
-        }
-        
-        Session.authenticate(params)
-            .then((ok) => {                
-                this.setState({loading: false});
-                invalidate();
-                const path = params.path && /^\//.test(params.path)? /\/$/.test(params.path) ? params.path : params.path+'/' :  '/';
-                this.props.history.push('/files'+path);
-            })
-            .catch(err => {                
-                if(err && err.code === 'CANCELLED'){ return }
-                this.setState({loading: false, error: err});
-                window.setTimeout(() => {
-                    this.setState({error: null})
-                }, 1000);
-            });        
-    }
-
-    onSubmit(e){
-        e.preventDefault();
-        this.setState({loading: true});
-
-        // yes it's dirty but at least it's supported nearly everywhere and build won't push Megabytes or polyfill
-        // to support the entries method of formData which would have made things much cleaner
-        const serialize = function($form){
-            if(!$form) return {};
-            var obj = {};
-            var elements = $form.querySelectorAll( "input, select, textarea" );
-            for( var i = 0; i < elements.length; ++i ) {
-                var element = elements[i];
-                var name = element.name;
-                var value = element.value;                
-                if(name){
-                    obj[name] = value;
-                }
-            }
-            return obj;
-        }
-        const data = serialize(document.querySelector('form'));        
+    onFormSubmit(data, credentials){
+        this.setState({credentials: credentials});
         this.authenticate(data);
     }
-    
+
+    setRemember(state){
+        this.setState({remember_me: state});
+    }
+
+    setCredentials(creds){
+        this.setState({credentials: creds});
+    }
+
     render() {
-        let labelStyle = {color: 'rgba(0,0,0,0.4)', fontStyle: 'italic', fontSize: '0.9em'}
-        let style = {
-            top: {minWidth: '80px', borderTopLeftRadius: 0, borderTopRightRadius: 0, padding: '8px 5px'}
-        }
         return (
-            <div style={{background: theme.colors.primary}}>
-            <ForkMe repo="https://github.com/mickael-kerjean/nuage" />  
-            <Container maxWidth="565px">
-              <NgIf cond={this.state.loading === true}>
-                <Loader/>
+            <div className="component_page_connect">
+              <NgIf cond={config.fork_button}>
+                <ForkMe repo="https://github.com/mickael-kerjean/nuage" />
               </NgIf>
-              <NgIf cond={this.state.loading === false}>
-                <Card style={{marginTop: this.state.marginTop+'px', whiteSpace: '', borderRadius: '3px', boxShadow: 'none'}}>
-                  <div style={{display: 'flex', margin: '-10px -11px 20px', padding: '0px 0px 6px 0'}} className={window.innerWidth < 600 ? 'scroll-x' : ''}>
-                    <Button theme={this.state.type === 'webdav'? 'primary' : null} style={{...style.top, borderBottomLeftRadius: 0}} onClick={this.onChange.bind(this, 'webdav')}>WebDav</Button>
-                    <Button theme={this.state.type === 'ftp'? 'primary' : null} style={style.top} onClick={this.onChange.bind(this, 'ftp')}>FTP</Button>
-                    <Button theme={this.state.type === 'sftp'? 'primary' : null} style={style.top} onClick={this.onChange.bind(this, 'sftp')}>SFTP</Button>
-                    <Button theme={this.state.type === 'git'? 'primary' : null} style={{...style.top, borderBottomRightRadius: 0}} onClick={this.onChange.bind(this, 'git')}>Git</Button>
-                    <Button theme={this.state.type === 's3'? 'primary' : null} style={style.top} onClick={this.onChange.bind(this, 's3')}>S3</Button>
-                    <Button theme={this.state.type === 'dropbox'? 'primary' : null} style={style.top} onClick={this.onChange.bind(this, 'dropbox')}>Dropbox</Button>
-                    <Button theme={this.state.type === 'gdrive'? 'primary' : null} style={{...style.top, borderBottomRightRadius: 0}} onClick={this.onChange.bind(this, 'gdrive')}>Drive</Button>
-                  </div>
-                  <div>
-                    <form onSubmit={this.onSubmit.bind(this)} autoComplete="off" autoCapitalize="off" spellCheck="false" autoCorrect="off">
-                      <NgIf cond={this.state.type === 'webdav'}>
-                        <Input type="text" name="url" placeholder="Address*" defaultValue={this.getDefault('webdav', 'url')} autoComplete="off" />
-                        <Input type="text" name="username" placeholder="Username" defaultValue={this.getDefault('webdav', 'username')} autoComplete="off" />
-                        <Input type="password" name="password" placeholder="Password" defaultValue={this.getDefault('webdav', 'password')} autoComplete="off" />
-                        <label style={labelStyle}>
-                          <input checked={this.state.advanced_webdav} onChange={e => { this.setState({advanced_webdav: e.target.checked})}} type="checkbox" autoComplete="off"/> Advanced
-                        </label>
-                        <NgIf cond={this.state.advanced_webdav === true} style={{marginTop: '2px'}}>
-                          <Input type="text" name="path" placeholder="Path" defaultValue={this.getDefault('webdav', 'path')} autoComplete="off" />
-                        </NgIf>
-                        <Input type="hidden" name="type" value="webdav"/>
-                        <Button style={{marginTop: '15px', color: 'white'}} theme="emphasis">CONNECT</Button>
-                      </NgIf>
-                      <NgIf cond={this.state.type === 'ftp'}>
-                        <Input type="text" name="hostname" placeholder="Hostname*" defaultValue={this.getDefault('ftp', 'hostname')} autoComplete="off" />
-                        <Input type="text" name="username" placeholder="Username" defaultValue={this.getDefault('ftp', 'username')} autoComplete="off" />                        
-                        <Input type="password" name="password" placeholder="Password" defaultValue={this.getDefault('ftp', 'password')} autoComplete="off" />
-                        <Input type="hidden" name="type" value="ftp"/>
-                        <label style={labelStyle}>
-                          <input checked={this.state.advanced_ftp} onChange={e => { this.setState({advanced_ftp: e.target.checked})}} type="checkbox" autoComplete="off"/> Advanced
-                        </label>
-                        <NgIf cond={this.state.advanced_ftp === true} style={{marginTop: '2px'}}>
-                          <Input type="text" name="path" placeholder="Path" defaultValue={this.getDefault('ftp', 'path')} autoComplete="off" />
-                          <Input type="text" name="port" placeholder="Port" defaultValue={this.getDefault('ftp', 'port')} autoComplete="off" />
-                        </NgIf>
-                        <Button style={{marginTop: '15px', color: 'white'}} theme="emphasis">CONNECT</Button>
-                      </NgIf>
-                      <NgIf cond={this.state.type === 'sftp'}>
-                        <Input type="text" name="host" placeholder="Hostname*" defaultValue={this.getDefault('sftp', 'host')} autoComplete="off" />
-                        <Input type="text" name="username" placeholder="Username" defaultValue={this.getDefault('sftp', 'username')} autoComplete="off" />
-                        <Input type="password" name="password" placeholder="Password" defaultValue={this.getDefault('sftp', 'password')} autoComplete="off" />
-                        <Input type="hidden" name="type" value="sftp"/>
-                        <label style={labelStyle}>
-                          <input checked={this.state.advanced_sftp} onChange={e => { this.setState({advanced_sftp: JSON.parse(e.target.checked)})}} type="checkbox" autoComplete="off"/> Advanced
-                        </label>
-                        <NgIf cond={this.state.advanced_sftp === true} style={{marginTop: '2px'}}>
-                          <Input type="text" name="path" placeholder="Path" defaultValue={this.getDefault('sftp', 'path')} autoComplete="off" />
-                          <Input type="text" name="port" placeholder="Port" defaultValue={this.getDefault('sftp', 'port')} autoComplete="off" />
-                          <Textarea type="text" name="private_key" placeholder="Private Key" defaultValue={this.getDefault('sftp', 'private_key')} autoComplete="off" />
-                        </NgIf>
-                        <Button style={{marginTop: '15px', color: 'white'}} theme="emphasis">CONNECT</Button>
-                      </NgIf>
-                      <NgIf cond={this.state.type === 'git'}>
-                        <Input type="text" name="repo" placeholder="Repository*" defaultValue={this.getDefault('git', 'repo')} autoComplete="off" />
-                        <Textarea type="password" name="password" placeholder="Password" defaultValue={this.getDefault('git', 'password')} autoComplete="off" />
-                        <Input type="hidden" name="type" value="git"/>
-                        <label style={labelStyle}>
-                          <input checked={this.state.advanced_git} onChange={e => { this.setState({advanced_git: JSON.parse(e.target.checked)})}} type="checkbox" autoComplete="off"/> Advanced
-                        </label>
-                        <NgIf cond={this.state.advanced_git === true} style={{marginTop: '2px'}}>
-                          <Input type="text" name="username" placeholder="Username" defaultValue={this.getDefault('git', 'username')} autoComplete="off" />
-                          <Input type="text" name="passphrase" placeholder="Passphrase" defaultValue={this.getDefault('git', 'passphrase')} autoComplete="off" />
-                          <Input type="text" name="commit" placeholder="Commit Format: default to '{action}({filename}): {path}'" defaultValue={this.getDefault('git', 'format')} autoComplete="off" />
-                          <Input type="text" name="branch" placeholder="Branch: default to 'master'" defaultValue={this.getDefault('git', 'branch')} autoComplete="off" />
-                          <Input type="text" name="author_email" placeholder="Author email" defaultValue={this.getDefault('git', 'author_email')} autoComplete="off" />
-                          <Input type="text" name="author_name" placeholder="Author name" defaultValue={this.getDefault('git', 'author_name')} autoComplete="off" />
-                          <Input type="text" name="committer_email" placeholder="Committer email" defaultValue={this.getDefault('git', 'committer_email')} autoComplete="off" />
-                          <Input type="text" name="committer_name" placeholder="Committer name" defaultValue={this.getDefault('git', 'committer_name')} autoComplete="off" />
-                        </NgIf>
-                        <Button style={{marginTop: '15px', color: 'white'}} theme="emphasis">CONNECT</Button>
-                      </NgIf>
-                      <NgIf cond={this.state.type === 's3'}>
-                        <Input type="text" name="access_key_id" placeholder="Access Key ID*" defaultValue={this.getDefault('s3', 'access_key_id')} autoComplete="off" />
-                        <Input type="password" name="secret_access_key" placeholder="Secret Access Key*" defaultValue={this.getDefault('s3', 'secret_access_key')} autoComplete="off" />
-                        <Input type="hidden" name="type" value="s3"/>
-                        <label style={labelStyle}>
-                          <input checked={this.state.advanced_s3} onChange={e => { this.setState({advanced_s3: JSON.parse(e.target.checked)})}} type="checkbox" autoComplete="off"/> Advanced
-                        </label>
-                        <NgIf cond={this.state.advanced_s3 === true} style={{marginTop: '2px'}}>
-                          <Input type="text" name="path" placeholder="Path" defaultValue={this.getDefault('s3', 'path')} autoComplete="off" />
-                        </NgIf>
-                        <Button style={{marginTop: '15px', color: 'white'}} theme="emphasis">CONNECT</Button>
-                      </NgIf>
-                      <NgIf cond={this.state.type === 'dropbox'}>
-                        <a target="_blank" href={this.state.dropbox_url}>
-                          <div style={{textAlign: 'center'}} onClick={this.login_dropbox.bind(this)}>
-                            <img src="/img/dropbox.png" style={{height: '115px', margin: '10px 0'}}/>
-                          </div>
-                          <Input type="hidden" name="type" value="dropbox"/>
-                          <Button onClick={this.login_dropbox.bind(this)} style={{color: 'white'}} theme="emphasis">LOGIN WITH DROPBOX</Button>
-                        </a>
-                      </NgIf>
-                      <NgIf cond={this.state.type === 'gdrive'}>
-                        <div style={{textAlign: 'center'}} onClick={this.login_google.bind(this)}>
-                          <img src="/img/google-drive.png" style={{height: '115px', margin: '10px 0'}}/>
-                          </div>
-                        <Input type="hidden" name="type" value="gdrive"/>
-                        <Button onClick={this.login_google.bind(this)} style={{color: 'white'}} theme="emphasis">LOGIN WITH GOOGLE</Button>
-                      </NgIf>
-                    </form>
-                  </div>
-                </Card>
-                <label style={{ ...labelStyle, display: 'inline-block', width: '100%', textAlign: 'right'}}>
-                <input checked={this.state.password !== null} onChange={this.onRememberMe.bind(this)} type="checkbox"/> Remember me
-                </label>
-              </NgIf>
-              <Notification error={this.state.error && this.state.error.message} />
-            </Container>
+              <Container maxWidth="565px">
+                <NgIf cond={this.state.loading === true}>
+                  <Loader/>
+                </NgIf>
+
+                <ReactCSSTransitionGroup
+                  transitionName="form"
+                  transitionLeave={false}
+                  transitionEnter={false}
+                  transitionAppear={true} transitionAppearTimeout={500}
+                  >
+                  <NgIf key={"form"+this.state.loading} cond={this.state.loading === false}>
+                    <Form
+                      credentials={this.state.credentials}
+                      onSubmit={this.onFormSubmit.bind(this)} />
+                    <RememberMe state={this.state.remember_me} onChange={this.setRemember.bind(this)}/>
+                  </NgIf>
+                </ReactCSSTransitionGroup>
+                <Credentials remember_me={this.state.remember_me}
+                          onRememberMeChange={this.setRemember.bind(this)}
+                          onCredentialsFound={this.setCredentials.bind(this)}
+                          credentials={this.state.credentials} />
+                <Notification error={this.state.error && this.state.error.message} />
+              </Container>
             </div>
         );
     }
 }
-
-
-const ForkMe = (props) => {
-    return (
-        <a href={props.repo} target="_blank">
-          <img style={{position: 'absolute', top: 0, right: 0, border: 0}} src="https://camo.githubusercontent.com/52760788cde945287fbb584134c4cbc2bc36f904/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f77686974655f6666666666662e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_white_ffffff.png" />
-        </a>
-    );
-}
diff --git a/client/pages/connectpage.scss b/client/pages/connectpage.scss
new file mode 100644
index 00000000..83c569a3
--- /dev/null
+++ b/client/pages/connectpage.scss
@@ -0,0 +1,3 @@
+.component_page_connect{
+    background: var(--primary);
+}
diff --git a/client/pages/connectpage/credentials.js b/client/pages/connectpage/credentials.js
new file mode 100644
index 00000000..88da5067
--- /dev/null
+++ b/client/pages/connectpage/credentials.js
@@ -0,0 +1,122 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
+
+import { Input, Button, Modal, NgIf } from '../../utilities';
+import { encrypt, decrypt, memory } from '../../utilities';
+import './credentials.scss';
+
+export class Credentials extends React.Component {
+    constructor(props){
+        super(props);
+        const key = memory.get('credentials_key') || '';
+        this.state = {
+            modal_appear: key ? false : this.props.remember_me,
+            key: key || '',
+            message: null,
+            error: null
+        };
+        // we use a clojure for the "key" because we want to persist it in memory
+        // not just in the state which is kill whenever react decide
+    }
+
+    componentWillReceiveProps(new_props){
+        if(new_props.remember_me === false){
+            window.localStorage.clear();
+        }else if(new_props.remember_me === true){
+            this.saveCreds(new_props.credentials);
+        }
+
+        if(new_props.remember_me === true && this.props.remember_me === false){
+            this.setState({modal_appear: true});
+            this.init();
+        }else if(new_props.remember_me === false && this.props.remember_me === true){
+            memory.set('credentials_key', '');
+            this.setState({modal_appear: false, key: ''});
+        }
+    }
+
+    componentWillMount(){
+        this.init();
+        if(this.state.key) this.onSubmit();
+    }
+
+    init(){
+        let raw = window.localStorage.hasOwnProperty('credentials');
+        if(raw){
+            this.setState({message: "Your Master Password:"});
+        }else{
+            this.setState({message: "Pick a Master Password:"});
+        }
+    }
+
+    saveCreds(creds){
+        const key = memory.get('credentials_key');
+        if(key){
+            window.localStorage.setItem('credentials', encrypt(creds, key));
+        }
+    }
+
+    onKeyChange(e){
+        this.setState({key: e.target.value});
+        memory.set('credentials_key', e.target.value);
+    }
+
+    onCancel(should_clear){
+        memory.set('credentials_key', '');
+        this.setState({modal_appear: false, key: ''});
+    }
+
+    onSubmit(e){
+        e && e.preventDefault();
+        /*
+         * 2 differents use cases:
+         * - a user is creating a new master password
+         * - a user want to unlock existing credentials
+         */
+        const key = memory.get('credentials_key');
+        if(key !== ''){
+            let raw = window.localStorage.getItem('credentials');
+            if(raw){
+                try{
+                    let credentials = decrypt(raw, key);
+                    this.setState({modal_appear: false});
+                    this.props.onCredentialsFound(credentials);
+                }catch(e){
+                    this.setState({error: 'Incorrect password'});
+                }
+            }else{
+                this.saveCreds(this.props.credentials);
+                this.setState({modal_appear: false});
+            }
+        }else{
+            this.setState({error: 'Password can\'t be empty'});
+        }
+        window.setTimeout(() => this.setState({error: null}), 1500);
+    }
+
+    render() {
+        return (
+            <Modal isActive={this.state.modal_appear} onQuit={this.onCancel.bind(this)}>
+              <div className="component_password">
+                <p>
+                  {this.state.message}
+                </p>
+                <form id="key_manager" onSubmit={this.onSubmit.bind(this)}>
+                  <Input autoFocus={true} value={this.state.key} type="password" onChange={this.onKeyChange.bind(this)} autoComplete="new-password" />
+
+                  <div key={this.state.error} className="error">{this.state.error}&nbsp;</div>
+
+                  <div className="buttons">
+                    <Button type="button" onClick={this.onCancel.bind(this)}>CANCEL</Button>
+                    <Button type="submit" theme="secondary">OK</Button>
+                  </div>
+                </form>
+              </div>
+            </Modal>
+        );
+    }
+}
+
+Credentials.propTypes = {
+};
diff --git a/client/pages/connectpage/credentials.scss b/client/pages/connectpage/credentials.scss
new file mode 100644
index 00000000..be3f53fd
--- /dev/null
+++ b/client/pages/connectpage/credentials.scss
@@ -0,0 +1,43 @@
+.component_password{
+    > p{
+        text-align: center;
+        font-size: 1.1em;
+        margin: 0 0 10px 0;
+    }
+    .error{
+        color: var(--error);
+    }
+    .buttons{
+        display: flex;
+        margin: 15px -20px;
+        [type="submit"]{
+            border-radius: 10px 0 0;
+        }
+    }
+}
+
+
+/***********************/
+/* APPEAR TRANSITION */
+.form-appear{ opacity: 0;}
+.form-appear.form-appear-active{
+    opacity: 1;
+    transition: opacity 0.1s ease;
+}
+
+/***********************/
+/* ENTER TRANSITION */
+.form-enter{ opacity: 0;}
+.form-enter.form-enter-active{
+    opacity: 1;
+    transition: opacity 0.1s ease;
+}
+
+
+/***********************/
+/* LEAVE TRANSITION */
+.form-leave{ opacity: 1;}
+.form-leave.form-enter-active{
+    opacity: 0;
+    transition: opacity 0.5s ease-out;
+}
diff --git a/client/pages/connectpage/forkme.js b/client/pages/connectpage/forkme.js
new file mode 100644
index 00000000..4204e4b2
--- /dev/null
+++ b/client/pages/connectpage/forkme.js
@@ -0,0 +1,10 @@
+import React from 'react';
+import './forkme.scss';
+
+export const ForkMe = (props) => {
+    return (
+        <a href={props.repo} target="_blank" className="component-forkme">
+          <img src="https://camo.githubusercontent.com/52760788cde945287fbb584134c4cbc2bc36f904/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f77686974655f6666666666662e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_white_ffffff.png" />
+        </a>
+    );
+};
diff --git a/client/pages/connectpage/forkme.scss b/client/pages/connectpage/forkme.scss
new file mode 100644
index 00000000..59771e8a
--- /dev/null
+++ b/client/pages/connectpage/forkme.scss
@@ -0,0 +1,8 @@
+.component-forkme{
+    img{
+        position: absolute;
+        top: 0;
+        right: 0;
+        border: 0;
+    }
+}
diff --git a/client/pages/connectpage/form.js b/client/pages/connectpage/form.js
new file mode 100644
index 00000000..95ce831a
--- /dev/null
+++ b/client/pages/connectpage/form.js
@@ -0,0 +1,218 @@
+import React from 'react';
+import { Container, Card, NgIf, Input, Button, Textarea, Loader, Notification, encrypt, decrypt, theme, Prompt } from '../../utilities';
+import { Session, invalidate, password } from '../../data';
+
+import './form.scss';
+
+export class Form extends React.Component {
+    constructor(props){
+        super(props);
+        this.state = {
+            refs: {},
+            type: 'sftp',
+            advanced_ftp: false,
+            advanced_sftp: false,
+            advanced_webdav: false,
+            advanced_s3: false,
+            advanced_git: false
+        };
+    }
+
+
+    _marginTop(){
+        let size = 300;
+        const $screen = document.querySelector('.login-form');
+        if($screen) size = $screen.offsetHeight;
+
+        size = Math.round((document.body.offsetHeight - size) / 2);
+        if(size < 0) return 0;
+        if(size > 150) return 150;
+        return size;
+    }
+
+    componentDidMount(){
+        this.publishState(this.props.credentials);
+    }
+
+    componentWillReceiveProps(props){
+        if(JSON.stringify(props.credentials) !== JSON.stringify(this.props.credentials)){
+            this.publishState(props.credentials);
+        }
+    }
+
+
+    publishState(_credentials){
+        const pushDOM = (credentials) => {
+            for(let key in credentials){
+                let names = credentials[key];
+                for(let name in names){
+                    const ref_name = [key,name].join("_");
+                    if(this.state.refs[ref_name]){
+                        this.state.refs[ref_name].ref.value = credentials[key][name];
+                    }
+                }
+            }
+        };
+
+        const setAdvancedCheckbox = (credentials) => {
+            if(credentials['ftp'] && (credentials['ftp']['path'] || credentials['ftp']['port']) ){
+                this.setState({advanced_ftp: true});
+            }
+            if(credentials['sftp'] && (
+                credentials['sftp']['path'] || credentials['sftp']['port']
+                    || credentials['sftp']['private_key'])
+              ){
+                this.setState({advanced_sftp: true});
+            }
+            if(credentials['webdav'] && credentials['webdav']['path']){
+                this.setState({advanced_webdav: true});
+            }
+            if(credentials['s3'] && credentials['s3']['path']){
+                this.setState({advanced_s3: true});
+            }
+            if(credentials['git'] && (
+                credentials['git']['username'] || credentials['git']['commit']
+                    || credentials['git']['branch']  || credentials['git']['passphrase']
+                    || credentials['git']['author_name'] || credentials['git']['author_email']
+                    || credentials['git']['committer_name'] || credentials['git']['committer_email'])
+              ){
+                this.setState({advanced_git: true});
+            }
+        };
+
+        setAdvancedCheckbox(_credentials);
+        window.setTimeout(() => pushDOM(_credentials));
+        // we made this async as DOM needs to be all set before we can insert the new state
+    }
+
+
+    onSubmit(e){
+        e.preventDefault();
+        // update the credentials object with data coming from the dom (aka "ref" in react language)
+        let credentials = Object.assign({}, this.props.credentials);
+        for(let key in this.state.refs){
+            if(this.state.refs[key]){
+                let [type, name] = key.split('_');
+                if(!credentials[type]) credentials[type] = {};
+                credentials[type][name] = this.state.refs[key].ref.value;
+            }
+        }
+        // create the object we need to authenticate a user against a backend
+        const auth_data = Object.assign({type: this.state.type}, credentials[this.state.type]);
+        this.props.onSubmit(auth_data, credentials);
+    }
+
+    onTypeChange(type){
+        this.setState({type: type}, () => this.publishState(this.props.credentials));
+    }
+
+    render() {
+        let className = (window.innerWidth < 600) ? 'scroll-x' : '';
+        return (
+            <Card style={{marginTop: this._marginTop()+'px'}} className="no-select component_page_connection_form">
+              <div className={"buttons "+className}>
+                <Button className={this.state.type === 'webdav'? 'active primary' : ''} onClick={this.onTypeChange.bind(this, 'webdav')} style={{borderBottomLeftRadius: 0}}>WebDav</Button>
+                <Button className={this.state.type === 'ftp'? 'active primary' : ''} onClick={this.onTypeChange.bind(this, 'ftp')}>FTP</Button>
+                <Button className={this.state.type === 'sftp'? 'active primary' : ''} onClick={this.onTypeChange.bind(this, 'sftp')}>SFTP</Button>
+                <Button className={this.state.type === 'git'? 'active primary' : ''} onClick={this.onTypeChange.bind(this, 'git')}>Git</Button>
+                <Button className={this.state.type === 's3'? 'active primary' : ''} onClick={this.onTypeChange.bind(this, 's3')}>S3</Button>
+                <Button className={this.state.type === 'dropbox'? 'active primary' : ''} onClick={this.onTypeChange.bind(this, 'dropbox')}>Dropbox</Button>
+                <Button className={this.state.type === 'gdrive'? 'active primary' : ''} onClick={this.onTypeChange.bind(this, 'gdrive')} style={{borderBottomRightRadius: 0}}>Drive</Button>
+              </div>
+              <div>
+                <form onSubmit={this.onSubmit.bind(this)} autoComplete="off" autoCapitalize="off" spellCheck="false" autoCorrect="off">
+                  <NgIf cond={this.state.type === 'webdav'}>
+                    <Input type="text" name="url" placeholder="Address*" ref={(input) => {this.state.refs.webdav_url = input; }} autoComplete="new-password" />
+                    <Input type="text" name="username" placeholder="Username" ref={(input) => {this.state.refs.webdav_username = input; }} autoComplete="new-password" />
+                    <Input type="password" name="password" placeholder="Password" ref={(input) => {this.state.refs.webdav_password = input; }} autoComplete="new-password" />
+                    <label>
+                      <input checked={this.state.advanced_webdav} onChange={e => { this.setState({advanced_webdav: e.target.checked}); }} type="checkbox" autoComplete="new-password"/> Advanced
+                        </label>
+                        <NgIf cond={this.state.advanced_webdav === true} className="advanced_form">
+                          <Input type="text" name="path" placeholder="Path" ref={(input) => {this.state.refs.webdav_path = input; }} autoComplete="new-password" />
+                        </NgIf>
+                        <Input type="hidden" name="type" value="webdav"/>
+                        <Button theme="emphasis">CONNECT</Button>
+                      </NgIf>
+                      <NgIf cond={this.state.type === 'ftp'}>
+                        <Input type="text" name="hostname" placeholder="Hostname*" ref={(input) => {this.state.refs.ftp_hostname = input; }} autoComplete="new-password" />
+                        <Input type="text" name="username" placeholder="Username" ref={(input) => {this.state.refs.ftp_username = input; }} autoComplete="new-password" />
+                        <Input type="password" name="password" placeholder="Password" ref={(input) => {this.state.refs.ftp_password = input; }} autoComplete="new-password" />
+                        <Input type="hidden" name="type" value="ftp"/>
+                        <label>
+                          <input checked={this.state.advanced_ftp} onChange={e => { this.setState({advanced_ftp: e.target.checked}); }} type="checkbox" autoComplete="new-password"/> Advanced
+                        </label>
+                        <NgIf cond={this.state.advanced_ftp === true} className="advanced_form">
+                          <Input type="text" name="path" placeholder="Path" ref={(input) => {this.state.refs.ftp_path = input; }} autoComplete="new-password" />
+                          <Input type="text" name="port" placeholder="Port" ref={(input) => {this.state.refs.ftp_port = input; }} autoComplete="new-password" />
+                        </NgIf>
+                        <Button type="submit" theme="emphasis">CONNECT</Button>
+                      </NgIf>
+                      <NgIf cond={this.state.type === 'sftp'}>
+                        <Input type="text" name="host" placeholder="Hostname*" ref={(input) => {this.state.refs.sftp_host = input; }} autoComplete="new-password" />
+                        <Input type="text" name="username" placeholder="Username" ref={(input) => {this.state.refs.sftp_username = input; }} autoComplete="new-password" />
+                        <Input type="password" name="password" placeholder="Password" ref={(input) => {this.state.refs.sftp_password = input; }} autoComplete="new-password" />
+                        <Input type="hidden" name="type" value="sftp"/>
+                        <label>
+                          <input checked={this.state.advanced_sftp} onChange={e => { this.setState({advanced_sftp: JSON.parse(e.target.checked)}); }} type="checkbox" autoComplete="new-password"/> Advanced
+                        </label>
+                        <NgIf cond={this.state.advanced_sftp === true} className="advanced_form">
+                          <Input type="text" name="path" placeholder="Path" ref={(input) => {this.state.refs.sftp_path = input; }} autoComplete="new-password" />
+                          <Input type="text" name="port" placeholder="Port" ref={(input) => {this.state.refs.sftp_port = input; }} autoComplete="new-password" />
+                          <Textarea type="text" rows="1" name="private_key" placeholder="Private Key" ref={(input) => {this.state.refs.sftp_private_key = input; }} autoComplete="new-password" />
+                        </NgIf>
+                        <Button type="submit" theme="emphasis">CONNECT</Button>
+                      </NgIf>
+                      <NgIf cond={this.state.type === 'git'}>
+                        <Input type="text" name="repo" placeholder="Repository*" ref={(input) => {this.state.refs.git_repo = input; }} autoComplete="new-password" />
+                        <Textarea type="password" rows="1" name="password" placeholder="Password" ref={(input) => {this.state.refs.git_password = input; }} autoComplete="new-password" />
+                        <Input type="hidden" name="type" value="git"/>
+                        <label>
+                          <input checked={this.state.advanced_git} onChange={e => { this.setState({advanced_git: JSON.parse(e.target.checked)}); }} type="checkbox" autoComplete="new-password"/> Advanced
+                        </label>
+                        <NgIf cond={this.state.advanced_git === true} className="advanced_form">
+                          <Input type="text" name="username" placeholder="Username" ref={(input) => {this.state.refs.git_username = input; }} autoComplete="new-password" />
+                          <Input type="text" name="passphrase" placeholder="Passphrase" ref={(input) => {this.state.refs.git_passphrase = input; }} autoComplete="new-password" />
+                          <Input type="text" name="commit" placeholder="Commit Format: default to '{action}({filename}): {path}'" ref={(input) => {this.state.refs.git_commit = input; }} autoComplete="new-password" />
+                          <Input type="text" name="branch" placeholder="Branch: default to 'master'" ref={(input) => {this.state.refs.git_branch = input; }} autoComplete="new-password" />
+                          <Input type="text" name="author_email" placeholder="Author email" ref={(input) => {this.state.refs.git_author_email = input; }} autoComplete="new-password" />
+                          <Input type="text" name="author_name" placeholder="Author name" ref={(input) => {this.state.refs.git_author_name = input; }} autoComplete="new-password" />
+                          <Input type="text" name="committer_email" placeholder="Committer email" ref={(input) => {this.state.refs.git_committer_email = input; }} autoComplete="new-password" />
+                          <Input type="text" name="committer_name" placeholder="Committer name" ref={(input) => {this.state.refs.git_committer_name = input; }} autoComplete="new-password" />
+                        </NgIf>
+                        <Button type="submit" theme="emphasis">CONNECT</Button>
+                      </NgIf>
+                      <NgIf cond={this.state.type === 's3'}>
+                        <Input type="text" name="access_key_id" placeholder="Access Key ID*" ref={(input) => {this.state.refs.s3_access_key_id = input; }} autoComplete="new-password" />
+                        <Input type="password" name="secret_access_key" placeholder="Secret Access Key*" ref={(input) => {this.state.refs.s3_secret_access_key = input; }} autoComplete="new-password" />
+                        <Input type="hidden" name="type" value="s3"/>
+                        <label>
+                          <input checked={this.state.advanced_s3} onChange={e => { this.setState({advanced_s3: JSON.parse(e.target.checked)}); }} type="checkbox" autoComplete="new-password"/> Advanced
+                        </label>
+                        <NgIf cond={this.state.advanced_s3 === true} className="advanced_form">
+                          <Input type="text" name="path" placeholder="Path" ref={(input) => {this.state.refs.s3_path = input; }} autoComplete="new-password" />
+                        </NgIf>
+                        <Button type="submit" theme="emphasis">CONNECT</Button>
+                      </NgIf>
+                      <NgIf cond={this.state.type === 'dropbox'} className="third-party">
+                        <a target="_blank" href={this.state.dropbox_url}>
+                          <div onClick={this.onSubmit.bind(this)}>
+                            <img src="/img/dropbox.png"/>
+                          </div>
+                          <Input type="hidden" name="type" value="dropbox"/>
+                          <Button type="submit" theme="emphasis">LOGIN WITH DROPBOX</Button>
+                        </a>
+                      </NgIf>
+                      <NgIf cond={this.state.type === 'gdrive'} className="third-party">
+                        <div onClick={this.onSubmit.bind(this)}>
+                          <img src="/img/google-drive.png"/>
+                        </div>
+                        <Input type="hidden" name="type" value="gdrive"/>
+                        <Button type="submit" theme="emphasis">LOGIN WITH GOOGLE</Button>
+                      </NgIf>
+                    </form>
+                  </div>
+                </Card>
+        );
+    }
+}
diff --git a/client/pages/connectpage/form.scss b/client/pages/connectpage/form.scss
new file mode 100644
index 00000000..99cbb5b3
--- /dev/null
+++ b/client/pages/connectpage/form.scss
@@ -0,0 +1,44 @@
+.component_page_connection_form{
+    border-radius: 3px;
+    box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
+    div.buttons{
+        display: flex;
+        margin: -10px -11px 20px;
+        padding: 0px 0px 6px 0;
+        button{
+            min-width: 80px;
+            border-top-left-radius: 0;
+            border-top-right-radius: 0;
+            padding: 8px 5px;
+            box-shadow: 0px 0px 0px rgba(0,0,0,0.2);
+            &.active{
+                transition: box-shadow 0.2s;
+                box-shadow: 0px 2px 20px rgba(0,0,0,0.2);
+            }
+        }
+    }
+    form{
+        label{
+            color: rgba(0,0,0,0.4);
+            font-style: italic;
+            font-size: 0.9em;
+            display: block;
+        }
+        .advanced_form{
+            max-height: 156px;
+            overflow-y: auto;
+            margin-top: 5px
+        }
+        button.emphasis{
+            margin-top: 15px;
+            color: white;
+        }
+        .third-party{
+            text-align: center;
+            img{
+                height: 115px;
+                margin: 0;
+            }
+        }
+    }
+}
diff --git a/client/pages/connectpage/index.js b/client/pages/connectpage/index.js
new file mode 100644
index 00000000..52d5a32e
--- /dev/null
+++ b/client/pages/connectpage/index.js
@@ -0,0 +1,4 @@
+export { ForkMe } from './forkme';
+export { RememberMe } from './rememberme';
+export { Form } from './form';
+export { Credentials } from './credentials';
diff --git a/client/pages/connectpage/rememberme.js b/client/pages/connectpage/rememberme.js
new file mode 100644
index 00000000..c0b30c2d
--- /dev/null
+++ b/client/pages/connectpage/rememberme.js
@@ -0,0 +1,10 @@
+import React from 'react';
+import './rememberme.scss';
+
+export const RememberMe = (props) => {
+    return (
+        <label className="no-select component_rememberme">
+            <input checked={props.state} onChange={(e) => props.onChange(e.target.checked)} type="checkbox"/> Remember me
+        </label>
+    );
+};
diff --git a/client/pages/connectpage/rememberme.scss b/client/pages/connectpage/rememberme.scss
new file mode 100644
index 00000000..973417f4
--- /dev/null
+++ b/client/pages/connectpage/rememberme.scss
@@ -0,0 +1,8 @@
+.component_rememberme{
+    color: rgba(0,0,0,0.4);
+    font-style: italic;
+    font-size: 0.9em;
+    display: inline-block;
+    width: 100%;
+    text-align: right;
+}
diff --git a/client/pages/logout.js b/client/pages/logout.js
index 6b627b01..419fc0dd 100644
--- a/client/pages/logout.js
+++ b/client/pages/logout.js
@@ -15,7 +15,7 @@ export class LogoutPage extends React.Component {
             })
             .catch((res) => {
                 console.warn(res)
-            })
+            });
     }
     render() {
         return (
diff --git a/client/utilities/button.js b/client/utilities/button.js
index a86b4724..a30760b5 100644
--- a/client/utilities/button.js
+++ b/client/utilities/button.js
@@ -1,38 +1,24 @@
-import React from 'react'
+import React from 'react';
 import PropTypes from 'prop-types';
 import { theme } from './theme';
 
+import './buttons.scss';
+
 export class Button extends React.Component {
     constructor(props){
         super(props);
     }
 
-    style(){
-        let style = {};
-        style.border = 'none';
-        style.margin = '0';
-        style.padding = '5px';
-        style.width = '100%';
-        style.display = 'inline-block';
-        style.outline = 'none';
-        style.cursor = 'pointer';
-        style.fontSize = 'inherit';
-        style.borderRadius = '2px';
-        style.color = 'inherit';
-        if(this.props.theme === 'primary'){ style.background = theme.colors.primary; style.color = 'white'}
-        else if(this.props.theme === 'secondary'){ style.background = theme.colors.secondary; style.color = 'white'}
-        else if(this.props.theme === 'emphasis'){ style.background = theme.colors.emphasis; style.color = 'white'}
-        else{style.background = 'inherit'}        
-        return Object.assign(style, this.props.style);
-    }
-    
     render() {
+        let props = Object.assign({}, this.props);
+        delete props.theme;
         return (
-                <button onClick={this.props.onClick} style={this.style()}>{this.props.children}</button>
+            <button {...props} className={this.props.theme || '' +" "+this.props.className || ''}>
+              {this.props.children}
+            </button>
         );
     }
 }
 
 Button.propTypes = {
-    theme: PropTypes.string
 };
diff --git a/client/utilities/buttons.scss b/client/utilities/buttons.scss
new file mode 100644
index 00000000..18c981af
--- /dev/null
+++ b/client/utilities/buttons.scss
@@ -0,0 +1,26 @@
+button{
+    border: none;
+    margin: 0;
+    padding: 5px;
+    width: 100%;
+    display: inline-block;
+    outline: none;
+    cursor: pointer;
+    font-size: inherit;
+    border-radius: 2px;
+    color: inherit;
+    background: inherit;
+
+    &.primary{
+        background: var(--primary);
+        color: white;
+    }
+    &.secondary{
+        background: var(--secondary);
+        color: white;
+    }
+    &.emphasis{
+        background: var(--emphasis);
+        color: white
+    }
+}
diff --git a/client/utilities/card.js b/client/utilities/card.js
index 9afc3c2d..e3167511 100644
--- a/client/utilities/card.js
+++ b/client/utilities/card.js
@@ -1,12 +1,14 @@
 import React from 'react';
 import {theme} from './theme';
 
+import './card.scss';
+
 export class Card extends React.Component {
     constructor(props){
         super(props);
         this.state = {
             dragging: false
-        }
+        };
     }
 
     onClick(){
@@ -28,20 +30,8 @@ export class Card extends React.Component {
     }
 
     render() {
-        let style = {};
-        style.padding = '10px';
-        style.color = '#474747';
-        style.cursor = 'pointer';
-        style.margin = '2px 0';
-        style.background = 'white'; style.boxShadow = theme.effects.shadow_large;
-        style.overflow = 'hidden';
-        style.position = 'relative';
-        for(let key in this.props.style){
-            style[key] = this.props.style[key];
-        }
-
         return (
-            <div onClick={this.onClick.bind(this)} onMouseEnter={this.onMouseEnter.bind(this)} onMouseLeave={this.onMouseLeave.bind(this)} style={style}>
+            <div {...this.props} className={this.props.className+" box"}>
               {this.props.children}
             </div>
         );
diff --git a/client/utilities/card.scss b/client/utilities/card.scss
new file mode 100644
index 00000000..b5dfd6f0
--- /dev/null
+++ b/client/utilities/card.scss
@@ -0,0 +1,9 @@
+.box{
+    padding: 10px;
+    cursor: pointer;
+    margin: 2px 0;
+    background: white;
+    box-shadow: rgba(158, 163, 172, 0.3) 0px 19px 60px, rgba(158, 163, 172, 0.22) 0px 15px 20px;
+    overflow: hidden;
+    position: relative;
+}
diff --git a/client/utilities/container.js b/client/utilities/container.js
index e513504d..89206968 100644
--- a/client/utilities/container.js
+++ b/client/utilities/container.js
@@ -1,14 +1,16 @@
-import React from 'react'
+import React from 'react';
 import PropTypes from 'prop-types';
 
+import './container.scss';
+
 export class Container extends React.Component {
     constructor(props){
         super(props);
     }
     render() {
-        const style = Object.assign({width: '95%', maxWidth: this.props.maxWidth || '800px', margin: '0 auto', padding: '10px'}, this.props.style || {});
+        const style = this.props.maxWidth ? {maxWidth: this.props.maxWidth} : {};
         return (
-            <div style={style}>
+            <div className="component_container" style={style}>
               {this.props.children}
             </div>
         );
diff --git a/client/utilities/container.scss b/client/utilities/container.scss
new file mode 100644
index 00000000..87374a5d
--- /dev/null
+++ b/client/utilities/container.scss
@@ -0,0 +1,6 @@
+.component_container{
+    width: 95%;
+    max-width: 800px;
+    margin: 0 auto;
+    padding: 10px;
+}
diff --git a/client/utilities/crypto.js b/client/utilities/crypto.js
index d7bfec60..ea492ab8 100644
--- a/client/utilities/crypto.js
+++ b/client/utilities/crypto.js
@@ -3,15 +3,11 @@ const algorithm = 'aes-256-ctr';
 
 export function encrypt(obj, key){
     const cipher = crypto.createCipher(algorithm, key);
-    return cipher.update(JSON.stringify(obj), 'utf8', 'hex') + cipher.final('hex');
+    return cipher.update(JSON.stringify(obj), 'utf8', 'base64') + cipher.final('base64');
 }
 
 
 export function decrypt(text, key){
     var decipher = crypto.createDecipher(algorithm, key)
-    try{
-        return JSON.parse(decipher.update(text,'hex','utf8') + decipher.final('utf8'));
-    }catch(err){
-        return {}
-    }
+    return JSON.parse(decipher.update(text,'base64','utf8') + decipher.final('utf8'));
 }
diff --git a/client/utilities/fab.js b/client/utilities/fab.js
index 4ad82bc0..fd216b53 100644
--- a/client/utilities/fab.js
+++ b/client/utilities/fab.js
@@ -1,22 +1,10 @@
 import React from 'react';
-import { theme } from './theme';
+import './fab.scss';
 
 export const Fab = (props) => {
-    let style = {};
-    style.height = '25px';
-    style.width = '25px';
-    style.padding = '13px';
-    style.position = 'fixed';
-    style.bottom = '20px';
-    style.right = '20px';
-    style.borderRadius = '50%';
-    style.background = theme.colors.text;
-    style.boxShadow = theme.effects.shadow; 
-    style.zIndex = '1000';
-    style.cursor = 'pointer';
     return (
-        <div onClick={props.onClick} style={style}>
+        <div className="component_fab" onClick={props.onClick}>
           {props.children}
         </div>
-    )
+    );
 }
diff --git a/client/utilities/fab.scss b/client/utilities/fab.scss
new file mode 100644
index 00000000..ef590a91
--- /dev/null
+++ b/client/utilities/fab.scss
@@ -0,0 +1,13 @@
+.component_fab{
+    height: 25px;
+    width: 25px;
+    padding: 13px;
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    border-radius: 50%;
+    background: var(--color);
+    box-shadow: rgba(0, 0, 0, 0.14) 0px 4px 5px 0px, rgba(0, 0, 0, 0.12) 0px 1px 10px 0px, rgba(0, 0, 0, 0.2) 0px 2px 4px -1px;
+    z-index: 1000;
+    cursor: pointer;
+}
diff --git a/client/utilities/icon.js b/client/utilities/icon.js
index 6511b251..7e174a78 100644
--- a/client/utilities/icon.js
+++ b/client/utilities/icon.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import './icon.scss';
 
 export const Icon = (props) => {
     let url;
@@ -35,10 +36,8 @@ export const Icon = (props) => {
     }else{
         throw('unknown icon');
     }
-    let style = props.style || {};
-    style.verticalAlign = 'bottom';
-    style.maxHeight = '100%';
+
     return (
-        <img onClick={props.onClick} src={url} alt={props.name} style={style}/>
+        <img className="component_icon" style={props.style} onClick={props.onClick} src={url} alt={props.name}/>
     );
 }
diff --git a/client/utilities/icon.scss b/client/utilities/icon.scss
new file mode 100644
index 00000000..578b769f
--- /dev/null
+++ b/client/utilities/icon.scss
@@ -0,0 +1,4 @@
+.component_icon{
+    vertical-align: bottom;
+    max-height: 100%;
+}
diff --git a/client/utilities/index.js b/client/utilities/index.js
index b34cde5d..c3da7596 100644
--- a/client/utilities/index.js
+++ b/client/utilities/index.js
@@ -1,8 +1,8 @@
 export { Input } from './input';
 export { Textarea } from './textarea';
 export { Button } from './button';
+export { Modal } from './modal';
 export { Container } from './container';
-export { LoremIpsum } from './loremipsum';
 export { NgIf } from './ngif';
 export { Card } from './card';
 export { URL_HOME, goToHome, URL_FILES, goToFiles, URL_VIEWER, goToViewer, URL_LOGIN, goToLogin, URL_LOGOUT, goToLogout } from './navigate';
@@ -17,3 +17,4 @@ export { theme, to_rgba }  from './theme';
 export { encrypt, decrypt } from './crypto'
 export { pathBuilder } from './path';
 export { Bundle } from './bundle';
+export { memory } from './memory';
diff --git a/client/utilities/input.js b/client/utilities/input.js
index e479b2e9..984da5a4 100644
--- a/client/utilities/input.js
+++ b/client/utilities/input.js
@@ -1,38 +1,18 @@
-import React from 'react'
+import React from 'react';
 import PropTypes from 'prop-types';
-import { theme } from './theme';
+import './input.scss';
 
 export class Input extends React.Component {
     constructor(props){
         super(props);
     }
 
-    style(){
-        let style = this.props.style || {};
-        style.background = 'inherit';
-        style.border = 'none';
-        style.borderRadius = '0';
-        style.borderBottom = '2px solid rgba(70, 99, 114, 0.1)'
-        style.width = '100%';
-        style.display = 'inline-block';
-        style.fontSize = 'inherit';
-        style.padding = '5px 0px 5px 0px';
-        style.margin = '0 0 8px 0';
-        style.outline = 'none';
-        style.boxSizing = 'border-box';
-        style.color = 'inherit';
-        return style;
-    }
-    
     render() {
         return (
             <input
-              style={this.style()}
-              name={this.props.name}
-              type={this.props.type}
-              value={this.props.value}
-              defaultValue={this.props.defaultValue}
-              placeholder={this.props.placeholder || ''}
+              className="component_input"
+              {...this.props}
+              ref={(comp) => { this.ref = comp; }}
               />
         );
     }
diff --git a/client/utilities/input.scss b/client/utilities/input.scss
new file mode 100644
index 00000000..7bd2a52d
--- /dev/null
+++ b/client/utilities/input.scss
@@ -0,0 +1,14 @@
+.component_input{
+    background: inherit;
+    border: none;
+    border-radius: 0;
+    border-bottom: 2px solid rgba(70, 99, 114, 0.1);
+    width: 100%;
+    display: inline-block;
+    font-size: inherit;
+    padding: 5px 0px 5px 0px;
+    margin: 0 0 8px 0;
+    outline: none;
+    box-sizing: border-box;
+    color: inherit;
+}
diff --git a/client/utilities/loader.js b/client/utilities/loader.js
index da731f35..a7536265 100644
--- a/client/utilities/loader.js
+++ b/client/utilities/loader.js
@@ -1,11 +1,9 @@
 import React from 'react';
+import './loader.scss';
 
 export const Loader = (props) => {
-    let style = props.style || {};
-    style.textAlign = 'center';
-    style.marginTop = '50px';
     return (
-        <div style={style}>
+        <div className="component_loader">
           <svg width="120px" height="120px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
             <rect x="0" y="0" width="100" height="100" fill="none"></rect>
             <circle cx="50" cy="50" r="40" stroke="rgba(100%,100%,100%,0.679)" fill="none" strokeWidth="10" strokeLinecap="round"></circle>
@@ -16,4 +14,4 @@ export const Loader = (props) => {
           </svg>
         </div>
     );
-}
+};
diff --git a/client/utilities/loader.scss b/client/utilities/loader.scss
new file mode 100644
index 00000000..142a6e95
--- /dev/null
+++ b/client/utilities/loader.scss
@@ -0,0 +1,4 @@
+.component_loader{
+    text-align: center;
+    margin-top: 50px;
+}
diff --git a/client/utilities/loremipsum b/client/utilities/loremipsum
deleted file mode 100644
index 0dbd50f2..00000000
--- a/client/utilities/loremipsum
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types';
-
-export class LoremIpsum extends React.Component {
-    constructor(props){
-        super(props);
-    }
-    render() {
-        return (
-            <div>
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-              Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
-            </div>
-        );
-    }
-}
diff --git a/client/utilities/memory.js b/client/utilities/memory.js
new file mode 100644
index 00000000..1ef9b2eb
--- /dev/null
+++ b/client/utilities/memory.js
@@ -0,0 +1,17 @@
+function Memory(){
+    let data = {};
+
+    return {
+        get: function(key){
+            if(!data[key]) return null;
+            return data[key];
+        },
+        set: function(key, value){
+            if(!data[key]) data[key] = {};
+            data[key] = value;
+        }
+    }
+}
+
+
+export const memory = new Memory();
diff --git a/client/utilities/modal.js b/client/utilities/modal.js
new file mode 100644
index 00000000..6384b19c
--- /dev/null
+++ b/client/utilities/modal.js
@@ -0,0 +1,62 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { theme } from './theme';
+import { Input } from './input';
+import { Button } from './button';
+import { NgIf } from './ngif';
+import './modal.scss';
+import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
+
+export class Modal extends React.Component {
+    constructor(props){
+        super(props);
+        this.state = {
+            marginTop: this._marginTop()
+        };
+    }
+
+    onClick(e){
+        if(e.target.getAttribute('id') === 'modal-box'){
+            this.props.onQuit && this.props.onQuit();
+        }
+    }
+
+    componentDidMount(){
+        this.setState({marginTop: this._marginTop()});
+    }
+
+    _marginTop(){
+        let size = 300;
+        const $box = document.querySelector('#modal-box > div');
+        if($box) size = $box.offsetHeight;
+
+        size = Math.round((document.body.offsetHeight - size) / 2);
+        if(size < 0) return 0;
+        if(size > 250) return 250;
+        return size;
+    }
+
+    render() {
+
+        return (
+            <ReactCSSTransitionGroup transitionName="modal"
+              transitionLeaveTimeout={300}
+              transitionEnterTimeout={300}
+              transitionAppear={true} transitionAppearTimeout={300}
+              >
+              <NgIf key={"modal-"+this.props.isActive} cond={this.props.isActive}>
+                <div className="component_modal" onClick={this.onClick.bind(this)} id="modal-box">
+                  <div key="random" style={{margin: this.state.marginTop+'px auto 0 auto'}}>
+                    {this.props.children}
+                  </div>
+                </div>
+              </NgIf>
+            </ReactCSSTransitionGroup>
+        );
+    }
+}
+
+Modal.propTypes = {
+    isActive: PropTypes.bool.isRequired,
+    onQuit: PropTypes.func
+};
diff --git a/client/utilities/modal.scss b/client/utilities/modal.scss
new file mode 100644
index 00000000..7c6dfce0
--- /dev/null
+++ b/client/utilities/modal.scss
@@ -0,0 +1,55 @@
+.component_modal{
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background: rgba(0,0,0,0.7);
+    box-shadow: 1px 2px 10px rgba(0,0,0,0.2);
+
+    > div{
+        background: white;
+        width: 65%;
+        max-width: 300px;
+        padding: 40px 20px 0 20px;
+        border-radius: 2px;
+    }
+}
+
+/***********************/
+/* ENTERING TRANSITION */
+// background
+.modal-appear > div, .modal-enter > div{ opacity: 0;}
+.modal-appear.modal-appear-active > div, .modal-enter.modal-enter-active > div{
+    opacity: 1;
+    transition: opacity 0.2s ease;
+}
+// box
+.modal-appear > div > div, .modal-enter > div > div{
+    opacity: 0;
+    transform: translateY(10px);
+}
+.modal-appear.modal-appear-active > div > div, .modal-enter.modal-enter-active > div > div{
+    opacity: 1;
+    transform: translateY(0);
+    transition: all 0.2s ease-out;
+    transition-delay: 0.1s;
+}
+
+
+
+/***********************/
+/* LEAVING TRANSITION */
+// background
+.modal-leave > div{ opacity: 1; }
+.modal-leave.modal-leave-active > div{
+    opacity: 0;
+    transition: opacity 0.2s ease-out;
+    transition-delay: 0.1s;
+}
+// box
+.modal-leave > div > div { opacity: 1; }
+.modal-leave.modal-leave-active > div > div{
+    opacity: 0;
+    transition: all 0.3s ease;
+}
diff --git a/client/utilities/ngif.js b/client/utilities/ngif.js
index 619bf0f9..220ef3be 100644
--- a/client/utilities/ngif.js
+++ b/client/utilities/ngif.js
@@ -5,10 +5,13 @@ export class NgIf extends React.Component {
     constructor(props){
         super(props);
     }
-    
+
     render() {
+        let clean_prop = Object.assign({}, this.props);
+        delete clean_prop.cond;
+        delete clean_prop.children;
         if(this.props.cond){
-            return <div onClick={this.props.onClick} style={this.props.style}>{this.props.children}</div>;
+            return <div {...clean_prop}>{this.props.children}</div>;
         }else{
             return null;
         }
diff --git a/client/utilities/notification.js b/client/utilities/notification.js
index c076697a..f2503971 100644
--- a/client/utilities/notification.js
+++ b/client/utilities/notification.js
@@ -1,7 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { NgIf } from './';
-import { theme } from './theme'; 
+import { theme } from './theme';
+
+import './notification.scss';
 
 export class Notification extends React.Component {
     constructor(props){
@@ -10,7 +12,7 @@ export class Notification extends React.Component {
             visible: null,
             error: null,
             timeout: null
-        }
+        };
     }
 
     componentWillMount(){
@@ -38,26 +40,27 @@ export class Notification extends React.Component {
     formatError(err){
         if(typeof err === 'object'){
             if(err && err.message){
-                return err.message
+                return err.message;
             }else{
                 return JSON.stringify(err);
             }
         }else if(typeof err === 'string'){
             return err;
         }else{
-            throw('unrecognized notification')
+            throw('unrecognized notification');
         }
     }
-    
 
     render(){
         return (
-            <NgIf cond={this.state.visible === true} style={{position: 'fixed', bottom: 0, left: 0, right: 0, textAlign: 'center'}}>
-              <div onClick={this.toggleVisibility.bind(this)}  style={{display: 'inline-block', background: '#637d8b', minWidth: '200px', maxWidth: '400px', margin: '0 auto', padding: '10px 15px', borderTopLeftRadius: '3px', borderTopRightRadius: '3px', color: 'white', textAlign: 'left', cursor: 'pointer', boxShadow: theme.effects.shadow}}>
-                {this.formatError(this.state.error)}
+            <NgIf cond={this.state.visible === true}>
+              <div className="component_notification">
+                <div onClick={this.toggleVisibility.bind(this)}>
+                  {this.formatError(this.state.error)}
+                </div>
               </div>
             </NgIf>
-        )
+        );
     }
 }
 
diff --git a/client/utilities/notification.scss b/client/utilities/notification.scss
new file mode 100644
index 00000000..37c9eb72
--- /dev/null
+++ b/client/utilities/notification.scss
@@ -0,0 +1,22 @@
+.component_notification{
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    text-align: center;
+
+    > div{
+        display: inline-block;
+        background: #637d8b;
+        min-width: 200px;
+        max-width: 400px;
+        margin: 0 auto;
+        padding: 10px 15px;
+        border-top-left-radius: 3px;
+        border-top-right-radius: 3px;
+        color: white;
+        text-align: left;
+        cursor: pointer;
+        box-shadow: rgba(0, 0, 0, 0.14) 0px 4px 5px 0px, rgba(0, 0, 0, 0.12) 0px 1px 10px 0px, rgba(0, 0, 0, 0.2) 0px 2px 4px -1px;
+    }
+}
diff --git a/client/utilities/textarea.js b/client/utilities/textarea.js
index 22ccb71f..77056271 100644
--- a/client/utilities/textarea.js
+++ b/client/utilities/textarea.js
@@ -1,38 +1,20 @@
-import React from 'react'
+import React from 'react';
 import PropTypes from 'prop-types';
 import { theme } from './theme';
 
+import './textarea.scss';
+
 export class Textarea extends React.Component {
     constructor(props){
         super(props);
     }
 
-    style(){
-        let style = this.props.style || {};
-        style.background = 'inherit';
-        style.border = 'none';
-        style.borderRadius = '0';
-        style.borderBottom = '2px solid rgba(70, 99, 114, 0.1)'
-        style.width = '100%';
-        style.display = 'inline-block';
-        style.fontSize = 'inherit';
-        style.padding = '5px 0px 5px 0px';
-        style.margin = '0 0 8px 0';
-        style.outline = 'none';
-        style.boxSizing = 'border-box';
-        style.color = 'inherit';
-        return style;
-    }
-    
     render() {
         return (
             <textarea
-              style={this.style()}
-              name={this.props.name}
-              type={this.props.type}
-              value={this.props.value}
-              defaultValue={this.props.defaultValue}
-              placeholder={this.props.placeholder || ''}
+              {...this.props}
+              className='component_textarea'
+              ref={(comp) => { this.ref = comp; }}
               ></textarea>
         );
     }
diff --git a/client/utilities/textarea.scss b/client/utilities/textarea.scss
new file mode 100644
index 00000000..57e80b59
--- /dev/null
+++ b/client/utilities/textarea.scss
@@ -0,0 +1,15 @@
+.component_textarea{
+    background: inherit;
+    border: none;
+    border-radius: 0;
+    border-bottom: 2px solid rgba(70, 99, 114, 0.1);
+    width: 100%;
+    display: inline-block;
+    font-size: inherit;
+    font-family: inherit;
+    padding: 5px 0px 5px 0px;
+    margin: 0 0 8px 0;
+    outline: none;
+    box-sizing: border-box;
+    color: inherit;
+}
diff --git a/client/utilities/uploader.js b/client/utilities/uploader.js
index 815b9f0c..4c802fdc 100644
--- a/client/utilities/uploader.js
+++ b/client/utilities/uploader.js
@@ -3,6 +3,8 @@ import PropTypes from 'prop-types';
 import { DropTarget, DragSource } from 'react-dnd';
 import { NgIf } from './';
 
+import './uploader.scss';
+
 const FileTarget = {
     drop(props, monitor) {
         props.onUpload(props.path, monitor.getItem().files);
@@ -24,18 +26,12 @@ export class Uploader extends React.Component {
     }
 
     render(){
-        const style = {
-            position: 'absolute', top: 0, bottom: 0, left: 0, right: 0,
-            background: 'rgba(0,0,0,0.2)',
-            padding: '50% 0',
-            textAlign: 'center'
-        }
         return this.props.connectDropTarget(
             <div>
-              <NgIf cond={this.props.isOver && this.props.canDrop} style={style}>
+              <NgIf cond={this.props.isOver && this.props.canDrop}>
                 DRAG FILE HERE
               </NgIf>
-              <div>
+              <div className="component_uploader">
                 {this.props.children}
               </div>
             </div>
diff --git a/client/utilities/uploader.scss b/client/utilities/uploader.scss
new file mode 100644
index 00000000..6c619811
--- /dev/null
+++ b/client/utilities/uploader.scss
@@ -0,0 +1,12 @@
+/*
+.component_uploader{
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background: rgba(0,0,0,0.2);
+    padding: 50% 0;
+    text-align: center;
+}
+*/
diff --git a/config.js b/config.js
index 730faee7..62a1f264 100644
--- a/config.js
+++ b/config.js
@@ -5,9 +5,10 @@
 // DROPBOX
 // 1) create an third party app: https://www.dropbox.com/developers/apps/create
 //    -> dropbox api -> Full Dropbox -> whatever name you want ->
-//    -> set redirect URI to https://example.com/login ->  
+//    -> set redirect URI to https://example.com/login ->
 
 module.exports = {
+    // SERVER CONFIG
     info: {
         host: "application_url",
         usage_stats: true
@@ -20,5 +21,7 @@ module.exports = {
     dropbox: {
         clientID: "dropbox_client_id",
         redirectURI: "application_url/login"
-    }
+    },
+    // APPLICATION CONFIG
+    fork_button: true
 }
diff --git a/package-lock.json b/package-lock.json
index b7715dc3..b3cb7fc7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -72,6 +72,18 @@
         "repeat-string": "1.6.1"
       }
     },
+    "alphanum-sort": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/alphanum-sort/-/alphanum-sort-1.0.2.tgz",
+      "integrity": "sha1-l6ERlkmyEa0zaR2fn0hqjsn74KM=",
+      "dev": true
+    },
+    "amdefine": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/amdefine/-/amdefine-1.0.1.tgz",
+      "integrity": "sha1-SlKCrBZHKek2Gbz9OtFR+BfOkfU=",
+      "dev": true
+    },
     "ansi-align": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/ansi-align/-/ansi-align-2.0.0.tgz",
@@ -153,6 +165,15 @@
         "readable-stream": "2.3.4"
       }
     },
+    "argparse": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
+      "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==",
+      "dev": true,
+      "requires": {
+        "sprintf-js": "1.0.3"
+      }
+    },
     "arr-diff": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/arr-diff/-/arr-diff-2.0.0.tgz",
@@ -270,6 +291,12 @@
       "resolved": "https://registry.npmjs.org/async-each/-/async-each-1.0.1.tgz",
       "integrity": "sha1-GdOGodntxufByF04iu28xW0zYC0="
     },
+    "async-foreach": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/async-foreach/-/async-foreach-0.1.3.tgz",
+      "integrity": "sha1-NhIfhFwFeBct5Bmpfb6x0W7DRUI=",
+      "dev": true
+    },
     "async-limiter": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/async-limiter/-/async-limiter-1.0.0.tgz",
@@ -287,6 +314,20 @@
       "integrity": "sha1-GcenYEc3dEaPILLS0DNyrX1Mv10=",
       "dev": true
     },
+    "autoprefixer": {
+      "version": "6.7.7",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-6.7.7.tgz",
+      "integrity": "sha1-Hb0cg1ZY41zj+ZhAmdsAWFx4IBQ=",
+      "dev": true,
+      "requires": {
+        "browserslist": "1.7.7",
+        "caniuse-db": "1.0.30000810",
+        "normalize-range": "0.1.2",
+        "num2fraction": "1.2.2",
+        "postcss": "5.2.18",
+        "postcss-value-parser": "3.3.0"
+      }
+    },
     "aws-sdk": {
       "version": "2.203.0",
       "resolved": "https://registry.npmjs.org/aws-sdk/-/aws-sdk-2.203.0.tgz",
@@ -1612,6 +1653,16 @@
         "pako": "1.0.6"
       }
     },
+    "browserslist": {
+      "version": "1.7.7",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-1.7.7.tgz",
+      "integrity": "sha1-C9dnBCWL6CmyOYu1Dkti0aFmsLk=",
+      "dev": true,
+      "requires": {
+        "caniuse-db": "1.0.30000810",
+        "electron-to-chromium": "1.3.34"
+      }
+    },
     "buffer": {
       "version": "4.9.1",
       "resolved": "https://registry.npmjs.org/buffer/-/buffer-4.9.1.tgz",
@@ -1711,6 +1762,24 @@
         }
       }
     },
+    "caniuse-api": {
+      "version": "1.6.1",
+      "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-1.6.1.tgz",
+      "integrity": "sha1-tTTnxzTE+B7F++isoq0kNUuWLGw=",
+      "dev": true,
+      "requires": {
+        "browserslist": "1.7.7",
+        "caniuse-db": "1.0.30000810",
+        "lodash.memoize": "4.1.2",
+        "lodash.uniq": "4.5.0"
+      }
+    },
+    "caniuse-db": {
+      "version": "1.0.30000810",
+      "resolved": "https://registry.npmjs.org/caniuse-db/-/caniuse-db-1.0.30000810.tgz",
+      "integrity": "sha1-vSWDDEHvq2Qzmi44H0lnc0PIRQk=",
+      "dev": true
+    },
     "capture-stack-trace": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/capture-stack-trace/-/capture-stack-trace-1.0.0.tgz",
@@ -1731,6 +1800,11 @@
         "lazy-cache": "1.0.4"
       }
     },
+    "chain-function": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/chain-function/-/chain-function-1.0.0.tgz",
+      "integrity": "sha1-DUqzfn4Y6tC9xHuSB2QRjOWHM9w="
+    },
     "chalk": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-0.4.0.tgz",
@@ -1772,6 +1846,51 @@
         "safe-buffer": "5.1.1"
       }
     },
+    "clap": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/clap/-/clap-1.2.3.tgz",
+      "integrity": "sha512-4CoL/A3hf90V3VIEjeuhSvlGFEHKzOz+Wfc2IVZc+FaUgU0ZQafJTP49fvnULipOPcAfqhyI2duwQyns6xqjYA==",
+      "dev": true,
+      "requires": {
+        "chalk": "1.1.3"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "2.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
+          "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=",
+          "dev": true
+        },
+        "chalk": {
+          "version": "1.1.3",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
+          "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "2.2.1",
+            "escape-string-regexp": "1.0.5",
+            "has-ansi": "2.0.0",
+            "strip-ansi": "3.0.1",
+            "supports-color": "2.0.0"
+          }
+        },
+        "strip-ansi": {
+          "version": "3.0.1",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
+          "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
+          "dev": true,
+          "requires": {
+            "ansi-regex": "2.1.1"
+          }
+        },
+        "supports-color": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
+          "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=",
+          "dev": true
+        }
+      }
+    },
     "class-utils": {
       "version": "0.3.6",
       "resolved": "https://registry.npmjs.org/class-utils/-/class-utils-0.3.6.tgz",
@@ -1903,11 +2022,49 @@
         }
       }
     },
+    "clone": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/clone/-/clone-1.0.3.tgz",
+      "integrity": "sha1-KY1+IjFmD0DAA8LtMUDezz9TCF8=",
+      "dev": true
+    },
+    "clone-deep": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/clone-deep/-/clone-deep-0.3.0.tgz",
+      "integrity": "sha1-NIxhrpzb4O3+BT2R/0zFIdeQ7eg=",
+      "dev": true,
+      "requires": {
+        "for-own": "1.0.0",
+        "is-plain-object": "2.0.4",
+        "kind-of": "3.2.2",
+        "shallow-clone": "0.1.2"
+      },
+      "dependencies": {
+        "for-own": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/for-own/-/for-own-1.0.0.tgz",
+          "integrity": "sha1-xjMy9BXO3EsE2/5wz4NklMU8tEs=",
+          "dev": true,
+          "requires": {
+            "for-in": "1.0.2"
+          }
+        }
+      }
+    },
     "co": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
       "integrity": "sha1-bqa989hTrlTMuOR7+gvz+QMfsYQ="
     },
+    "coa": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/coa/-/coa-1.0.4.tgz",
+      "integrity": "sha1-qe8VNmDWqGqL3sAomlxoTSF0Mv0=",
+      "dev": true,
+      "requires": {
+        "q": "1.5.1"
+      }
+    },
     "code-point-at": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz",
@@ -1928,6 +2085,17 @@
         "object-visit": "1.0.1"
       }
     },
+    "color": {
+      "version": "0.11.4",
+      "resolved": "https://registry.npmjs.org/color/-/color-0.11.4.tgz",
+      "integrity": "sha1-bXtcdPtl6EHNSHkq0e1eB7kE12Q=",
+      "dev": true,
+      "requires": {
+        "clone": "1.0.3",
+        "color-convert": "1.9.1",
+        "color-string": "0.3.0"
+      }
+    },
     "color-convert": {
       "version": "1.9.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.1.tgz",
@@ -1943,6 +2111,26 @@
       "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
       "dev": true
     },
+    "color-string": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/color-string/-/color-string-0.3.0.tgz",
+      "integrity": "sha1-J9RvtnAlxcL6JZk7+/V55HhBuZE=",
+      "dev": true,
+      "requires": {
+        "color-name": "1.1.3"
+      }
+    },
+    "colormin": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/colormin/-/colormin-1.1.2.tgz",
+      "integrity": "sha1-6i90IKcrlogaOKrlnsEkpvcpgTM=",
+      "dev": true,
+      "requires": {
+        "color": "0.11.4",
+        "css-color-names": "0.0.4",
+        "has": "1.0.1"
+      }
+    },
     "colors": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/colors/-/colors-1.0.3.tgz",
@@ -2243,6 +2431,34 @@
       "integrity": "sha1-ojD2T1aDEOFJgAmUB5DsmVRbyn4=",
       "dev": true
     },
+    "css-color-names": {
+      "version": "0.0.4",
+      "resolved": "https://registry.npmjs.org/css-color-names/-/css-color-names-0.0.4.tgz",
+      "integrity": "sha1-gIrcLnnPhHOAabZGyyDsJ762KeA=",
+      "dev": true
+    },
+    "css-loader": {
+      "version": "0.28.10",
+      "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-0.28.10.tgz",
+      "integrity": "sha512-X1IJteKnW9Llmrd+lJ0f7QZHh9Arf+11S7iRcoT2+riig3BK0QaCaOtubAulMK6Itbo08W6d3l8sW21r+Jhp5Q==",
+      "dev": true,
+      "requires": {
+        "babel-code-frame": "6.26.0",
+        "css-selector-tokenizer": "0.7.0",
+        "cssnano": "3.10.0",
+        "icss-utils": "2.1.0",
+        "loader-utils": "1.1.0",
+        "lodash.camelcase": "4.3.0",
+        "object-assign": "4.1.1",
+        "postcss": "5.2.18",
+        "postcss-modules-extract-imports": "1.2.0",
+        "postcss-modules-local-by-default": "1.2.0",
+        "postcss-modules-scope": "1.1.0",
+        "postcss-modules-values": "1.3.0",
+        "postcss-value-parser": "3.3.0",
+        "source-list-map": "2.0.0"
+      }
+    },
     "css-select": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/css-select/-/css-select-1.2.0.tgz",
@@ -2255,12 +2471,100 @@
         "nth-check": "1.0.1"
       }
     },
+    "css-selector-tokenizer": {
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/css-selector-tokenizer/-/css-selector-tokenizer-0.7.0.tgz",
+      "integrity": "sha1-5piEdK6MlTR3v15+/s/OzNnPTIY=",
+      "dev": true,
+      "requires": {
+        "cssesc": "0.1.0",
+        "fastparse": "1.1.1",
+        "regexpu-core": "1.0.0"
+      },
+      "dependencies": {
+        "regexpu-core": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/regexpu-core/-/regexpu-core-1.0.0.tgz",
+          "integrity": "sha1-hqdj9Y7k18L2sQLkdkBQ3n7ZDGs=",
+          "dev": true,
+          "requires": {
+            "regenerate": "1.3.3",
+            "regjsgen": "0.2.0",
+            "regjsparser": "0.1.5"
+          }
+        }
+      }
+    },
     "css-what": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/css-what/-/css-what-2.1.0.tgz",
       "integrity": "sha1-lGfQMsOM+u+58teVASUwYvh/ob0=",
       "dev": true
     },
+    "cssesc": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-0.1.0.tgz",
+      "integrity": "sha1-yBSQPkViM3GgR3tAEJqq++6t27Q=",
+      "dev": true
+    },
+    "cssnano": {
+      "version": "3.10.0",
+      "resolved": "https://registry.npmjs.org/cssnano/-/cssnano-3.10.0.tgz",
+      "integrity": "sha1-Tzj2zqK5sX+gFJDyPx3GjqZcHDg=",
+      "dev": true,
+      "requires": {
+        "autoprefixer": "6.7.7",
+        "decamelize": "1.2.0",
+        "defined": "1.0.0",
+        "has": "1.0.1",
+        "object-assign": "4.1.1",
+        "postcss": "5.2.18",
+        "postcss-calc": "5.3.1",
+        "postcss-colormin": "2.2.2",
+        "postcss-convert-values": "2.6.1",
+        "postcss-discard-comments": "2.0.4",
+        "postcss-discard-duplicates": "2.1.0",
+        "postcss-discard-empty": "2.1.0",
+        "postcss-discard-overridden": "0.1.1",
+        "postcss-discard-unused": "2.2.3",
+        "postcss-filter-plugins": "2.0.2",
+        "postcss-merge-idents": "2.1.7",
+        "postcss-merge-longhand": "2.0.2",
+        "postcss-merge-rules": "2.1.2",
+        "postcss-minify-font-values": "1.0.5",
+        "postcss-minify-gradients": "1.0.5",
+        "postcss-minify-params": "1.2.2",
+        "postcss-minify-selectors": "2.1.1",
+        "postcss-normalize-charset": "1.1.1",
+        "postcss-normalize-url": "3.0.8",
+        "postcss-ordered-values": "2.2.3",
+        "postcss-reduce-idents": "2.4.0",
+        "postcss-reduce-initial": "1.0.1",
+        "postcss-reduce-transforms": "1.0.4",
+        "postcss-svgo": "2.1.6",
+        "postcss-unique-selectors": "2.0.2",
+        "postcss-value-parser": "3.3.0",
+        "postcss-zindex": "2.2.0"
+      }
+    },
+    "csso": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/csso/-/csso-2.3.2.tgz",
+      "integrity": "sha1-3dUsWHAz9J6Utx/FVWnyUuj/X4U=",
+      "dev": true,
+      "requires": {
+        "clap": "1.2.3",
+        "source-map": "0.5.7"
+      },
+      "dependencies": {
+        "source-map": {
+          "version": "0.5.7",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
+          "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
+          "dev": true
+        }
+      }
+    },
     "currently-unhandled": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/currently-unhandled/-/currently-unhandled-0.4.1.tgz",
@@ -2361,6 +2665,12 @@
         }
       }
     },
+    "defined": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/defined/-/defined-1.0.0.tgz",
+      "integrity": "sha1-yY2bzvdWdBiOEQlpFRGZ45sfppM=",
+      "dev": true
+    },
     "degenerator": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/degenerator/-/degenerator-1.0.4.tgz",
@@ -2510,6 +2820,11 @@
         }
       }
     },
+    "dom-helpers": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-3.3.1.tgz",
+      "integrity": "sha512-2Sm+JaYn74OiTM2wHvxJOo3roiq/h25Yi69Fqk269cNUwIXsCvATB6CRSFC9Am/20G2b28hGv/+7NiWydIrPvg=="
+    },
     "dom-serializer": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.1.0.tgz",
@@ -2661,6 +2976,12 @@
       "resolved": "https://registry.npmjs.org/ejs/-/ejs-2.5.7.tgz",
       "integrity": "sha1-zIcsFoiArjxxiXYv1f/ACJbJUYo="
     },
+    "electron-to-chromium": {
+      "version": "1.3.34",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.34.tgz",
+      "integrity": "sha1-2TSY9AORuwwWpgPYJBuZUUBBV+0=",
+      "dev": true
+    },
     "elliptic": {
       "version": "6.4.0",
       "resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.4.0.tgz",
@@ -3126,6 +3447,12 @@
         "pinkie-promise": "2.0.1"
       }
     },
+    "flatten": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/flatten/-/flatten-1.0.2.tgz",
+      "integrity": "sha1-2uRqnXj74lKSJYzB54CkHZXAN4I=",
+      "dev": true
+    },
     "follow": {
       "version": "0.11.4",
       "resolved": "https://registry.npmjs.org/follow/-/follow-0.11.4.tgz",
@@ -4111,6 +4438,30 @@
         }
       }
     },
+    "gaze": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/gaze/-/gaze-1.1.2.tgz",
+      "integrity": "sha1-hHIkZ3rbiHDWeSV+0ziP22HkAQU=",
+      "dev": true,
+      "requires": {
+        "globule": "1.2.0"
+      }
+    },
+    "generate-function": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/generate-function/-/generate-function-2.0.0.tgz",
+      "integrity": "sha1-aFj+fAlpt9TpCTM3ZHrHn2DfvnQ=",
+      "dev": true
+    },
+    "generate-object-property": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/generate-object-property/-/generate-object-property-1.2.0.tgz",
+      "integrity": "sha1-nA4cQDCM6AT0eDYYuTf6iPmdUNA=",
+      "dev": true,
+      "requires": {
+        "is-property": "1.0.2"
+      }
+    },
     "get-caller-file": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-1.0.2.tgz",
@@ -4229,6 +4580,17 @@
         "pinkie-promise": "2.0.1"
       }
     },
+    "globule": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/globule/-/globule-1.2.0.tgz",
+      "integrity": "sha1-HcScaCLdnoovoAuiopUAboZkvQk=",
+      "dev": true,
+      "requires": {
+        "glob": "7.1.2",
+        "lodash": "4.17.5",
+        "minimatch": "3.0.4"
+      }
+    },
     "google-auth-library": {
       "version": "0.10.0",
       "resolved": "https://registry.npmjs.org/google-auth-library/-/google-auth-library-0.10.0.tgz",
@@ -4465,6 +4827,18 @@
       "integrity": "sha1-k0EP0hsAlzUVH4howvJx80J+I/0=",
       "dev": true
     },
+    "history": {
+      "version": "4.7.2",
+      "resolved": "https://registry.npmjs.org/history/-/history-4.7.2.tgz",
+      "integrity": "sha512-1zkBRWW6XweO0NBcjiphtVJVsIQ+SXF29z9DVkceeaSLVMFXHool+fdCZD4spDCfZJCILPILc3bm7Bc+HRi0nA==",
+      "requires": {
+        "invariant": "2.2.3",
+        "loose-envify": "1.3.1",
+        "resolve-pathname": "2.2.0",
+        "value-equal": "0.4.0",
+        "warning": "3.0.0"
+      }
+    },
     "hmac-drbg": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz",
@@ -4512,6 +4886,12 @@
         "wbuf": "1.7.2"
       }
     },
+    "html-comment-regex": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/html-comment-regex/-/html-comment-regex-1.1.1.tgz",
+      "integrity": "sha1-ZouTd26q5V696POtRkswekljYl4=",
+      "dev": true
+    },
     "html-entities": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/html-entities/-/html-entities-1.2.1.tgz",
@@ -4781,6 +5161,69 @@
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.19.tgz",
       "integrity": "sha512-oTZqweIP51xaGPI4uPa56/Pri/480R+mo7SeU+YETByQNhDG55ycFyNLIgta9vXhILrxXDmF7ZGhqZIcuN0gJQ=="
     },
+    "icss-replace-symbols": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/icss-replace-symbols/-/icss-replace-symbols-1.1.0.tgz",
+      "integrity": "sha1-Bupvg2ead0njhs/h/oEq5dsiPe0=",
+      "dev": true
+    },
+    "icss-utils": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-2.1.0.tgz",
+      "integrity": "sha1-g/Cg7DeL8yRheLbCrZE28TWxyWI=",
+      "dev": true,
+      "requires": {
+        "postcss": "6.0.19"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "3.2.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.0.tgz",
+          "integrity": "sha512-NnSOmMEYtVR2JVMIGTzynRkkaxtiq1xnFBcdQD/DnNCYPoEPsVJhM98BDyaoNOQIi7p4okdi3E27eN7GQbsUug==",
+          "dev": true,
+          "requires": {
+            "color-convert": "1.9.1"
+          }
+        },
+        "chalk": {
+          "version": "2.3.1",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.3.1.tgz",
+          "integrity": "sha512-QUU4ofkDoMIVO7hcx1iPTISs88wsO8jA92RQIm4JAwZvFGGAV2hSAA1NX7oVj2Ej2Q6NDTcRDjPTFrMCRZoJ6g==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "3.2.0",
+            "escape-string-regexp": "1.0.5",
+            "supports-color": "5.2.0"
+          }
+        },
+        "has-flag": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+          "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
+          "dev": true
+        },
+        "postcss": {
+          "version": "6.0.19",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.19.tgz",
+          "integrity": "sha512-f13HRz0HtVwVaEuW6J6cOUCBLFtymhgyLPV7t4QEk2UD3twRI9IluDcQNdzQdBpiixkXj2OmzejhhTbSbDxNTg==",
+          "dev": true,
+          "requires": {
+            "chalk": "2.3.1",
+            "source-map": "0.6.1",
+            "supports-color": "5.2.0"
+          }
+        },
+        "supports-color": {
+          "version": "5.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.2.0.tgz",
+          "integrity": "sha512-F39vS48la4YvTZUPVeTqsjsFNrvcMwrV3RLZINsmHo+7djCvuUzSIeXOnZ5hmjef4bajL1dNccN+tg5XAliO5Q==",
+          "dev": true,
+          "requires": {
+            "has-flag": "3.0.0"
+          }
+        }
+      }
+    },
     "ieee754": {
       "version": "1.1.8",
       "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.1.8.tgz",
@@ -4834,6 +5277,12 @@
       "integrity": "sha1-khi5srkoojixPcT7a21XbyMUU+o=",
       "dev": true
     },
+    "in-publish": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/in-publish/-/in-publish-2.0.0.tgz",
+      "integrity": "sha1-4g/146KvwmkDILbcVSaCqcf631E=",
+      "dev": true
+    },
     "indent-string": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-2.1.0.tgz",
@@ -4843,6 +5292,12 @@
         "repeating": "2.0.1"
       }
     },
+    "indexes-of": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/indexes-of/-/indexes-of-1.0.1.tgz",
+      "integrity": "sha1-8w9xbI4r00bHtn0985FVZqfAVgc=",
+      "dev": true
+    },
     "indexof": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/indexof/-/indexof-0.0.1.tgz",
@@ -4909,6 +5364,12 @@
       "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.6.0.tgz",
       "integrity": "sha1-4/o1e3c9phnybpXwSdBVxyeW+Gs="
     },
+    "is-absolute-url": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-absolute-url/-/is-absolute-url-2.1.0.tgz",
+      "integrity": "sha1-UFMN+4T8yap9vnhS6Do3uTufKqY=",
+      "dev": true
+    },
     "is-accessor-descriptor": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-1.0.0.tgz",
@@ -5063,6 +5524,25 @@
         "is-path-inside": "1.0.1"
       }
     },
+    "is-my-ip-valid": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-my-ip-valid/-/is-my-ip-valid-1.0.0.tgz",
+      "integrity": "sha512-gmh/eWXROncUzRnIa1Ubrt5b8ep/MGSnfAUI3aRp+sqTCs1tv1Isl8d8F6JmkN3dXKc3ehZMrtiPN9eL03NuaQ==",
+      "dev": true
+    },
+    "is-my-json-valid": {
+      "version": "2.17.2",
+      "resolved": "https://registry.npmjs.org/is-my-json-valid/-/is-my-json-valid-2.17.2.tgz",
+      "integrity": "sha512-IBhBslgngMQN8DDSppmgDv7RNrlFotuuDsKcrCP3+HbFaVivIBU7u9oiiErw8sH4ynx3+gOGQ3q2otkgiSi6kg==",
+      "dev": true,
+      "requires": {
+        "generate-function": "2.0.0",
+        "generate-object-property": "1.2.0",
+        "is-my-ip-valid": "1.0.0",
+        "jsonpointer": "4.0.1",
+        "xtend": "4.0.1"
+      }
+    },
     "is-npm": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/is-npm/-/is-npm-1.0.0.tgz",
@@ -5124,6 +5604,12 @@
         "path-is-inside": "1.0.2"
       }
     },
+    "is-plain-obj": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-1.1.0.tgz",
+      "integrity": "sha1-caUMhCnfync8kqOQpKA7OfzVHT4=",
+      "dev": true
+    },
     "is-plain-object": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-2.0.4.tgz",
@@ -5151,6 +5637,12 @@
       "resolved": "https://registry.npmjs.org/is-primitive/-/is-primitive-2.0.0.tgz",
       "integrity": "sha1-IHurkWOEmcB7Kt8kCkGochADRXU="
     },
+    "is-property": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/is-property/-/is-property-1.0.2.tgz",
+      "integrity": "sha1-V/4cTkhHTt1lsJkR8msc1Ald2oQ=",
+      "dev": true
+    },
     "is-redirect": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/is-redirect/-/is-redirect-1.0.0.tgz",
@@ -5177,6 +5669,15 @@
       "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-1.1.0.tgz",
       "integrity": "sha1-EtSj3U5o4Lec6428hBc66A2RykQ="
     },
+    "is-svg": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-svg/-/is-svg-2.1.0.tgz",
+      "integrity": "sha1-z2EJDaDZ77yrhyLeum8DIgjbsOk=",
+      "dev": true,
+      "requires": {
+        "html-comment-regex": "1.1.1"
+      }
+    },
     "is-symbol": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.0.1.tgz",
@@ -5242,11 +5743,35 @@
       "resolved": "https://registry.npmjs.org/jmespath/-/jmespath-0.15.0.tgz",
       "integrity": "sha1-o/Iiqarp+Wb10nx5ZRDigJF2Qhc="
     },
+    "js-base64": {
+      "version": "2.4.3",
+      "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.4.3.tgz",
+      "integrity": "sha512-H7ErYLM34CvDMto3GbD6xD0JLUGYXR3QTcH6B/tr4Hi/QpSThnCsIp+Sy5FRTw3B0d6py4HcNkW7nO/wdtGWEw==",
+      "dev": true
+    },
     "js-tokens": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-3.0.2.tgz",
       "integrity": "sha1-mGbfOVECEw449/mWvOtlRDIJwls="
     },
+    "js-yaml": {
+      "version": "3.7.0",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.7.0.tgz",
+      "integrity": "sha1-XJZ93YN6m/3KXy3oQlOr6KHAO4A=",
+      "dev": true,
+      "requires": {
+        "argparse": "1.0.10",
+        "esprima": "2.7.3"
+      },
+      "dependencies": {
+        "esprima": {
+          "version": "2.7.3",
+          "resolved": "https://registry.npmjs.org/esprima/-/esprima-2.7.3.tgz",
+          "integrity": "sha1-luO3DVd59q1JzQMmc9HDEnZ7pYE=",
+          "dev": true
+        }
+      }
+    },
     "jsbn": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/jsbn/-/jsbn-0.1.1.tgz",
@@ -5311,6 +5836,12 @@
       "resolved": "https://registry.npmjs.org/jsonify/-/jsonify-0.0.0.tgz",
       "integrity": "sha1-LHS27kHZPKUbe1qu6PUDYx0lKnM="
     },
+    "jsonpointer": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/jsonpointer/-/jsonpointer-4.0.1.tgz",
+      "integrity": "sha1-T9kss04OnbPInIYi7PUfm5eMbLk=",
+      "dev": true
+    },
     "jsprim": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/jsprim/-/jsprim-1.4.1.tgz",
@@ -5387,6 +5918,31 @@
         "invert-kv": "1.0.0"
       }
     },
+    "less-loader": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/less-loader/-/less-loader-4.0.6.tgz",
+      "integrity": "sha512-WPFY3NMJGJna8kIxtgSu6AVG7K6uRPdfE2J7vpQqFWMN/RkOosV09rOVUt3wghNClWH2Pg7YumD1dHiv1Thfug==",
+      "dev": true,
+      "requires": {
+        "clone": "2.1.1",
+        "loader-utils": "1.1.0",
+        "pify": "3.0.0"
+      },
+      "dependencies": {
+        "clone": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/clone/-/clone-2.1.1.tgz",
+          "integrity": "sha1-0hfR6WERjjrJpLi7oyhVU79kfNs=",
+          "dev": true
+        },
+        "pify": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz",
+          "integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=",
+          "dev": true
+        }
+      }
+    },
     "levn": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/levn/-/levn-0.3.0.tgz",
@@ -5451,11 +6007,53 @@
       "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.5.tgz",
       "integrity": "sha512-Ez3ONp3TK9gX1HYKp6IhetcVybD+2F+Yp6GS9dfH8ue6EOCEzQtQEh4K0FYWBP9qLv+lzeQAYXw+3ySfxyZqkw=="
     },
+    "lodash.assign": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/lodash.assign/-/lodash.assign-4.2.0.tgz",
+      "integrity": "sha1-DZnzzNem0mHRm9rrkkUAXShYCOc=",
+      "dev": true
+    },
+    "lodash.camelcase": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz",
+      "integrity": "sha1-soqmKIorn8ZRA1x3EfZathkDMaY=",
+      "dev": true
+    },
+    "lodash.clonedeep": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz",
+      "integrity": "sha1-4j8/nE+Pvd6HJSnBBxhXoIblzO8=",
+      "dev": true
+    },
+    "lodash.memoize": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
+      "integrity": "sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4=",
+      "dev": true
+    },
+    "lodash.mergewith": {
+      "version": "4.6.1",
+      "resolved": "https://registry.npmjs.org/lodash.mergewith/-/lodash.mergewith-4.6.1.tgz",
+      "integrity": "sha512-eWw5r+PYICtEBgrBE5hhlT6aAa75f411bgDz/ZL2KZqYV03USvucsxcHUIlGTDTECs1eunpI7HOV7U+WLDvNdQ==",
+      "dev": true
+    },
     "lodash.noop": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/lodash.noop/-/lodash.noop-3.0.1.tgz",
       "integrity": "sha1-OBiPTWUKOkdCWEObluxFsyYXEzw="
     },
+    "lodash.tail": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/lodash.tail/-/lodash.tail-4.1.1.tgz",
+      "integrity": "sha1-0jM6NtnncXyK0vfKyv7HwytERmQ=",
+      "dev": true
+    },
+    "lodash.uniq": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz",
+      "integrity": "sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=",
+      "dev": true
+    },
     "loglevel": {
       "version": "1.6.1",
       "resolved": "https://registry.npmjs.org/loglevel/-/loglevel-1.6.1.tgz",
@@ -5502,6 +6100,12 @@
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-2.7.3.tgz",
       "integrity": "sha1-bUUk6LlV+V1PW1iFHOId1y+06VI="
     },
+    "macaddress": {
+      "version": "0.2.8",
+      "resolved": "https://registry.npmjs.org/macaddress/-/macaddress-0.2.8.tgz",
+      "integrity": "sha1-WQTcU3w57G2+/q6QIycTX6hRHxI=",
+      "dev": true
+    },
     "make-dir": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-1.2.0.tgz",
@@ -5546,6 +6150,12 @@
         "object-visit": "1.0.1"
       }
     },
+    "math-expression-evaluator": {
+      "version": "1.2.17",
+      "resolved": "https://registry.npmjs.org/math-expression-evaluator/-/math-expression-evaluator-1.2.17.tgz",
+      "integrity": "sha1-3oGf282E3M2PrlnGrreWFbnSZqw=",
+      "dev": true
+    },
     "md5.js": {
       "version": "1.3.4",
       "resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.4.tgz",
@@ -5715,6 +6325,24 @@
         }
       }
     },
+    "mixin-object": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/mixin-object/-/mixin-object-2.0.1.tgz",
+      "integrity": "sha1-T7lJRB2rGCVA8f4DW6YOGUel5X4=",
+      "dev": true,
+      "requires": {
+        "for-in": "0.1.8",
+        "is-extendable": "0.1.1"
+      },
+      "dependencies": {
+        "for-in": {
+          "version": "0.1.8",
+          "resolved": "https://registry.npmjs.org/for-in/-/for-in-0.1.8.tgz",
+          "integrity": "sha1-2Hc5COMSVhCZUrH9ubP6hn0ndeE=",
+          "dev": true
+        }
+      }
+    },
     "mkdirp": {
       "version": "0.5.1",
       "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
@@ -6078,6 +6706,226 @@
         }
       }
     },
+    "node-sass": {
+      "version": "4.7.2",
+      "resolved": "https://registry.npmjs.org/node-sass/-/node-sass-4.7.2.tgz",
+      "integrity": "sha512-CaV+wLqZ7//Jdom5aUFCpGNoECd7BbNhjuwdsX/LkXBrHl8eb1Wjw4HvWqcFvhr5KuNgAk8i/myf/MQ1YYeroA==",
+      "dev": true,
+      "requires": {
+        "async-foreach": "0.1.3",
+        "chalk": "1.1.3",
+        "cross-spawn": "3.0.1",
+        "gaze": "1.1.2",
+        "get-stdin": "4.0.1",
+        "glob": "7.1.2",
+        "in-publish": "2.0.0",
+        "lodash.assign": "4.2.0",
+        "lodash.clonedeep": "4.5.0",
+        "lodash.mergewith": "4.6.1",
+        "meow": "3.7.0",
+        "mkdirp": "0.5.1",
+        "nan": "2.9.2",
+        "node-gyp": "3.6.2",
+        "npmlog": "4.1.2",
+        "request": "2.79.0",
+        "sass-graph": "2.2.4",
+        "stdout-stream": "1.4.0",
+        "true-case-path": "1.0.2"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "2.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
+          "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=",
+          "dev": true
+        },
+        "assert-plus": {
+          "version": "0.2.0",
+          "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-0.2.0.tgz",
+          "integrity": "sha1-104bh+ev/A24qttwIfP+SBAasjQ=",
+          "dev": true
+        },
+        "aws-sign2": {
+          "version": "0.6.0",
+          "resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.6.0.tgz",
+          "integrity": "sha1-FDQt0428yU0OW4fXY81jYSwOeU8=",
+          "dev": true
+        },
+        "boom": {
+          "version": "2.10.1",
+          "resolved": "https://registry.npmjs.org/boom/-/boom-2.10.1.tgz",
+          "integrity": "sha1-OciRjO/1eZ+D+UkqhI9iWt0Mdm8=",
+          "dev": true,
+          "requires": {
+            "hoek": "2.16.3"
+          }
+        },
+        "caseless": {
+          "version": "0.11.0",
+          "resolved": "https://registry.npmjs.org/caseless/-/caseless-0.11.0.tgz",
+          "integrity": "sha1-cVuW6phBWTzDMGeSP17GDr2k99c=",
+          "dev": true
+        },
+        "chalk": {
+          "version": "1.1.3",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
+          "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "2.2.1",
+            "escape-string-regexp": "1.0.5",
+            "has-ansi": "2.0.0",
+            "strip-ansi": "3.0.1",
+            "supports-color": "2.0.0"
+          }
+        },
+        "cross-spawn": {
+          "version": "3.0.1",
+          "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-3.0.1.tgz",
+          "integrity": "sha1-ElYDfsufDF9549bvE14wdwGEuYI=",
+          "dev": true,
+          "requires": {
+            "lru-cache": "4.1.1",
+            "which": "1.3.0"
+          }
+        },
+        "cryptiles": {
+          "version": "2.0.5",
+          "resolved": "https://registry.npmjs.org/cryptiles/-/cryptiles-2.0.5.tgz",
+          "integrity": "sha1-O9/s3GCBR8HGcgL6KR59ylnqo7g=",
+          "dev": true,
+          "requires": {
+            "boom": "2.10.1"
+          }
+        },
+        "form-data": {
+          "version": "2.1.4",
+          "resolved": "https://registry.npmjs.org/form-data/-/form-data-2.1.4.tgz",
+          "integrity": "sha1-M8GDrPGTJ27KqYFDpp6Uv+4XUNE=",
+          "dev": true,
+          "requires": {
+            "asynckit": "0.4.0",
+            "combined-stream": "1.0.6",
+            "mime-types": "2.1.18"
+          }
+        },
+        "har-validator": {
+          "version": "2.0.6",
+          "resolved": "https://registry.npmjs.org/har-validator/-/har-validator-2.0.6.tgz",
+          "integrity": "sha1-zcvAgYgmWtEZtqWnyKtw7s+10n0=",
+          "dev": true,
+          "requires": {
+            "chalk": "1.1.3",
+            "commander": "2.14.1",
+            "is-my-json-valid": "2.17.2",
+            "pinkie-promise": "2.0.1"
+          }
+        },
+        "hawk": {
+          "version": "3.1.3",
+          "resolved": "https://registry.npmjs.org/hawk/-/hawk-3.1.3.tgz",
+          "integrity": "sha1-B4REvXwWQLD+VA0sm3PVlnjo4cQ=",
+          "dev": true,
+          "requires": {
+            "boom": "2.10.1",
+            "cryptiles": "2.0.5",
+            "hoek": "2.16.3",
+            "sntp": "1.0.9"
+          }
+        },
+        "hoek": {
+          "version": "2.16.3",
+          "resolved": "https://registry.npmjs.org/hoek/-/hoek-2.16.3.tgz",
+          "integrity": "sha1-ILt0A9POo5jpHcRxCo/xuCdKJe0=",
+          "dev": true
+        },
+        "http-signature": {
+          "version": "1.1.1",
+          "resolved": "https://registry.npmjs.org/http-signature/-/http-signature-1.1.1.tgz",
+          "integrity": "sha1-33LiZwZs0Kxn+3at+OE0qPvPkb8=",
+          "dev": true,
+          "requires": {
+            "assert-plus": "0.2.0",
+            "jsprim": "1.4.1",
+            "sshpk": "1.13.1"
+          }
+        },
+        "lru-cache": {
+          "version": "4.1.1",
+          "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-4.1.1.tgz",
+          "integrity": "sha512-q4spe4KTfsAS1SUHLO0wz8Qiyf1+vMIAgpRYioFYDMNqKfHQbg+AVDH3i4fvpl71/P1L0dBl+fQi+P37UYf0ew==",
+          "dev": true,
+          "requires": {
+            "pseudomap": "1.0.2",
+            "yallist": "2.1.2"
+          }
+        },
+        "qs": {
+          "version": "6.3.2",
+          "resolved": "https://registry.npmjs.org/qs/-/qs-6.3.2.tgz",
+          "integrity": "sha1-51vV9uJoEioqDgvaYwslUMFmUCw=",
+          "dev": true
+        },
+        "request": {
+          "version": "2.79.0",
+          "resolved": "https://registry.npmjs.org/request/-/request-2.79.0.tgz",
+          "integrity": "sha1-Tf5b9r6LjNw3/Pk+BLZVd3InEN4=",
+          "dev": true,
+          "requires": {
+            "aws-sign2": "0.6.0",
+            "aws4": "1.6.0",
+            "caseless": "0.11.0",
+            "combined-stream": "1.0.6",
+            "extend": "3.0.1",
+            "forever-agent": "0.6.1",
+            "form-data": "2.1.4",
+            "har-validator": "2.0.6",
+            "hawk": "3.1.3",
+            "http-signature": "1.1.1",
+            "is-typedarray": "1.0.0",
+            "isstream": "0.1.2",
+            "json-stringify-safe": "5.0.1",
+            "mime-types": "2.1.18",
+            "oauth-sign": "0.8.2",
+            "qs": "6.3.2",
+            "stringstream": "0.0.5",
+            "tough-cookie": "2.3.4",
+            "tunnel-agent": "0.4.3",
+            "uuid": "3.1.0"
+          }
+        },
+        "sntp": {
+          "version": "1.0.9",
+          "resolved": "https://registry.npmjs.org/sntp/-/sntp-1.0.9.tgz",
+          "integrity": "sha1-ZUEYTMkK7qbG57NeJlkIJEPGYZg=",
+          "dev": true,
+          "requires": {
+            "hoek": "2.16.3"
+          }
+        },
+        "strip-ansi": {
+          "version": "3.0.1",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
+          "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
+          "dev": true,
+          "requires": {
+            "ansi-regex": "2.1.1"
+          }
+        },
+        "supports-color": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
+          "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=",
+          "dev": true
+        },
+        "tunnel-agent": {
+          "version": "0.4.3",
+          "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.4.3.tgz",
+          "integrity": "sha1-Y3PbdpCf5XDgjXNYM2Xtgop07us=",
+          "dev": true
+        }
+      }
+    },
     "node-ssh": {
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/node-ssh/-/node-ssh-4.2.3.tgz",
@@ -6502,6 +7350,24 @@
         "remove-trailing-separator": "1.1.0"
       }
     },
+    "normalize-range": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
+      "integrity": "sha1-LRDAa9/TEuqXd2laTShDlFa3WUI=",
+      "dev": true
+    },
+    "normalize-url": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-1.9.1.tgz",
+      "integrity": "sha1-LMDWazHqIwNkWENuNiDYWVTGbDw=",
+      "dev": true,
+      "requires": {
+        "object-assign": "4.1.1",
+        "prepend-http": "1.0.4",
+        "query-string": "4.3.4",
+        "sort-keys": "1.1.2"
+      }
+    },
     "npm-run-path": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-2.0.2.tgz",
@@ -6531,6 +7397,12 @@
         "boolbase": "1.0.0"
       }
     },
+    "num2fraction": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/num2fraction/-/num2fraction-1.2.2.tgz",
+      "integrity": "sha1-b2gragJ6Tp3fpFZM0lidHU5mnt4=",
+      "dev": true
+    },
     "number-is-nan": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz",
@@ -7108,6 +7980,577 @@
       "integrity": "sha1-AerA/jta9xoqbAL+q7jB/vfgDqs=",
       "dev": true
     },
+    "postcss": {
+      "version": "5.2.18",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-5.2.18.tgz",
+      "integrity": "sha512-zrUjRRe1bpXKsX1qAJNJjqZViErVuyEkMTRrwu4ud4sbTtIBRmtaYDrHmcGgmrbsW3MHfmtIf+vJumgQn+PrXg==",
+      "dev": true,
+      "requires": {
+        "chalk": "1.1.3",
+        "js-base64": "2.4.3",
+        "source-map": "0.5.7",
+        "supports-color": "3.2.3"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "2.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
+          "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=",
+          "dev": true
+        },
+        "chalk": {
+          "version": "1.1.3",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
+          "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "2.2.1",
+            "escape-string-regexp": "1.0.5",
+            "has-ansi": "2.0.0",
+            "strip-ansi": "3.0.1",
+            "supports-color": "2.0.0"
+          },
+          "dependencies": {
+            "supports-color": {
+              "version": "2.0.0",
+              "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
+              "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=",
+              "dev": true
+            }
+          }
+        },
+        "source-map": {
+          "version": "0.5.7",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
+          "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
+          "dev": true
+        },
+        "strip-ansi": {
+          "version": "3.0.1",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
+          "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
+          "dev": true,
+          "requires": {
+            "ansi-regex": "2.1.1"
+          }
+        }
+      }
+    },
+    "postcss-calc": {
+      "version": "5.3.1",
+      "resolved": "https://registry.npmjs.org/postcss-calc/-/postcss-calc-5.3.1.tgz",
+      "integrity": "sha1-d7rnypKK2FcW4v2kLyYb98HWW14=",
+      "dev": true,
+      "requires": {
+        "postcss": "5.2.18",
+        "postcss-message-helpers": "2.0.0",
+        "reduce-css-calc": "1.3.0"
+      }
+    },
+    "postcss-colormin": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/postcss-colormin/-/postcss-colormin-2.2.2.tgz",
+      "integrity": "sha1-ZjFBfV8OkJo9fsJrJMio0eT5bks=",
+      "dev": true,
+      "requires": {
+        "colormin": "1.1.2",
+        "postcss": "5.2.18",
+        "postcss-value-parser": "3.3.0"
+      }
+    },
+    "postcss-convert-values": {
+      "version": "2.6.1",
+      "resolved": "https://registry.npmjs.org/postcss-convert-values/-/postcss-convert-values-2.6.1.tgz",
+      "integrity": "sha1-u9hZPFwf0uPRwyK7kl3K6Nrk1i0=",
+      "dev": true,
+      "requires": {
+        "postcss": "5.2.18",
+        "postcss-value-parser": "3.3.0"
+      }
+    },
+    "postcss-discard-comments": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/postcss-discard-comments/-/postcss-discard-comments-2.0.4.tgz",
+      "integrity": "sha1-vv6J+v1bPazlzM5Rt2uBUUvgDj0=",
+      "dev": true,
+      "requires": {
+        "postcss": "5.2.18"
+      }
+    },
+    "postcss-discard-duplicates": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-discard-duplicates/-/postcss-discard-duplicates-2.1.0.tgz",
+      "integrity": "sha1-uavye4isGIFYpesSq8riAmO5GTI=",
+      "dev": true,
+      "requires": {
+        "postcss": "5.2.18"
+      }
+    },
+    "postcss-discard-empty": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-discard-empty/-/postcss-discard-empty-2.1.0.tgz",
+      "integrity": "sha1-0rS9nVztXr2Nyt52QMfXzX9PkrU=",
+      "dev": true,
+      "requires": {
+        "postcss": "5.2.18"
+      }
+    },
+    "postcss-discard-overridden": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/postcss-discard-overridden/-/postcss-discard-overridden-0.1.1.tgz",
+      "integrity": "sha1-ix6vVU9ob7KIzYdMVWZ7CqNmjVg=",
+      "dev": true,
+      "requires": {
+        "postcss": "5.2.18"
+      }
+    },
+    "postcss-discard-unused": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/postcss-discard-unused/-/postcss-discard-unused-2.2.3.tgz",
+      "integrity": "sha1-vOMLLMWR/8Y0Mitfs0ZLbZNPRDM=",
+      "dev": true,
+      "requires": {
+        "postcss": "5.2.18",
+        "uniqs": "2.0.0"
+      }
+    },
+    "postcss-filter-plugins": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-filter-plugins/-/postcss-filter-plugins-2.0.2.tgz",
+      "integrity": "sha1-bYWGJTTXNaxCDkqFgG4fXUKG2Ew=",
+      "dev": true,
+      "requires": {
+        "postcss": "5.2.18",
+        "uniqid": "4.1.1"
+      }
+    },
+    "postcss-merge-idents": {
+      "version": "2.1.7",
+      "resolved": "https://registry.npmjs.org/postcss-merge-idents/-/postcss-merge-idents-2.1.7.tgz",
+      "integrity": "sha1-TFUwMTwI4dWzu/PSu8dH4njuonA=",
+      "dev": true,
+      "requires": {
+        "has": "1.0.1",
+        "postcss": "5.2.18",
+        "postcss-value-parser": "3.3.0"
+      }
+    },
+    "postcss-merge-longhand": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-merge-longhand/-/postcss-merge-longhand-2.0.2.tgz",
+      "integrity": "sha1-I9kM0Sewp3mUkVMyc5A0oaTz1lg=",
+      "dev": true,
+      "requires": {
+        "postcss": "5.2.18"
+      }
+    },
+    "postcss-merge-rules": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/postcss-merge-rules/-/postcss-merge-rules-2.1.2.tgz",
+      "integrity": "sha1-0d9d+qexrMO+VT8OnhDofGG19yE=",
+      "dev": true,
+      "requires": {
+        "browserslist": "1.7.7",
+        "caniuse-api": "1.6.1",
+        "postcss": "5.2.18",
+        "postcss-selector-parser": "2.2.3",
+        "vendors": "1.0.1"
+      }
+    },
+    "postcss-message-helpers": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-message-helpers/-/postcss-message-helpers-2.0.0.tgz",
+      "integrity": "sha1-pPL0+rbk/gAvCu0ABHjN9S+bpg4=",
+      "dev": true
+    },
+    "postcss-minify-font-values": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/postcss-minify-font-values/-/postcss-minify-font-values-1.0.5.tgz",
+      "integrity": "sha1-S1jttWZB66fIR0qzUmyv17vey2k=",
+      "dev": true,
+      "requires": {
+        "object-assign": "4.1.1",
+        "postcss": "5.2.18",
+        "postcss-value-parser": "3.3.0"
+      }
+    },
+    "postcss-minify-gradients": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/postcss-minify-gradients/-/postcss-minify-gradients-1.0.5.tgz",
+      "integrity": "sha1-Xb2hE3NwP4PPtKPqOIHY11/15uE=",
+      "dev": true,
+      "requires": {
+        "postcss": "5.2.18",
+        "postcss-value-parser": "3.3.0"
+      }
+    },
+    "postcss-minify-params": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/postcss-minify-params/-/postcss-minify-params-1.2.2.tgz",
+      "integrity": "sha1-rSzgcTc7lDs9kwo/pZo1jCjW8fM=",
+      "dev": true,
+      "requires": {
+        "alphanum-sort": "1.0.2",
+        "postcss": "5.2.18",
+        "postcss-value-parser": "3.3.0",
+        "uniqs": "2.0.0"
+      }
+    },
+    "postcss-minify-selectors": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/postcss-minify-selectors/-/postcss-minify-selectors-2.1.1.tgz",
+      "integrity": "sha1-ssapjAByz5G5MtGkllCBFDEXNb8=",
+      "dev": true,
+      "requires": {
+        "alphanum-sort": "1.0.2",
+        "has": "1.0.1",
+        "postcss": "5.2.18",
+        "postcss-selector-parser": "2.2.3"
+      }
+    },
+    "postcss-modules-extract-imports": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-1.2.0.tgz",
+      "integrity": "sha1-ZhQOzs447wa/DT41XWm/WdFB6oU=",
+      "dev": true,
+      "requires": {
+        "postcss": "6.0.19"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "3.2.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.0.tgz",
+          "integrity": "sha512-NnSOmMEYtVR2JVMIGTzynRkkaxtiq1xnFBcdQD/DnNCYPoEPsVJhM98BDyaoNOQIi7p4okdi3E27eN7GQbsUug==",
+          "dev": true,
+          "requires": {
+            "color-convert": "1.9.1"
+          }
+        },
+        "chalk": {
+          "version": "2.3.1",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.3.1.tgz",
+          "integrity": "sha512-QUU4ofkDoMIVO7hcx1iPTISs88wsO8jA92RQIm4JAwZvFGGAV2hSAA1NX7oVj2Ej2Q6NDTcRDjPTFrMCRZoJ6g==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "3.2.0",
+            "escape-string-regexp": "1.0.5",
+            "supports-color": "5.2.0"
+          }
+        },
+        "has-flag": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+          "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
+          "dev": true
+        },
+        "postcss": {
+          "version": "6.0.19",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.19.tgz",
+          "integrity": "sha512-f13HRz0HtVwVaEuW6J6cOUCBLFtymhgyLPV7t4QEk2UD3twRI9IluDcQNdzQdBpiixkXj2OmzejhhTbSbDxNTg==",
+          "dev": true,
+          "requires": {
+            "chalk": "2.3.1",
+            "source-map": "0.6.1",
+            "supports-color": "5.2.0"
+          }
+        },
+        "supports-color": {
+          "version": "5.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.2.0.tgz",
+          "integrity": "sha512-F39vS48la4YvTZUPVeTqsjsFNrvcMwrV3RLZINsmHo+7djCvuUzSIeXOnZ5hmjef4bajL1dNccN+tg5XAliO5Q==",
+          "dev": true,
+          "requires": {
+            "has-flag": "3.0.0"
+          }
+        }
+      }
+    },
+    "postcss-modules-local-by-default": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-modules-local-by-default/-/postcss-modules-local-by-default-1.2.0.tgz",
+      "integrity": "sha1-99gMOYxaOT+nlkRmvRlQCn1hwGk=",
+      "dev": true,
+      "requires": {
+        "css-selector-tokenizer": "0.7.0",
+        "postcss": "6.0.19"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "3.2.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.0.tgz",
+          "integrity": "sha512-NnSOmMEYtVR2JVMIGTzynRkkaxtiq1xnFBcdQD/DnNCYPoEPsVJhM98BDyaoNOQIi7p4okdi3E27eN7GQbsUug==",
+          "dev": true,
+          "requires": {
+            "color-convert": "1.9.1"
+          }
+        },
+        "chalk": {
+          "version": "2.3.1",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.3.1.tgz",
+          "integrity": "sha512-QUU4ofkDoMIVO7hcx1iPTISs88wsO8jA92RQIm4JAwZvFGGAV2hSAA1NX7oVj2Ej2Q6NDTcRDjPTFrMCRZoJ6g==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "3.2.0",
+            "escape-string-regexp": "1.0.5",
+            "supports-color": "5.2.0"
+          }
+        },
+        "has-flag": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+          "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
+          "dev": true
+        },
+        "postcss": {
+          "version": "6.0.19",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.19.tgz",
+          "integrity": "sha512-f13HRz0HtVwVaEuW6J6cOUCBLFtymhgyLPV7t4QEk2UD3twRI9IluDcQNdzQdBpiixkXj2OmzejhhTbSbDxNTg==",
+          "dev": true,
+          "requires": {
+            "chalk": "2.3.1",
+            "source-map": "0.6.1",
+            "supports-color": "5.2.0"
+          }
+        },
+        "supports-color": {
+          "version": "5.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.2.0.tgz",
+          "integrity": "sha512-F39vS48la4YvTZUPVeTqsjsFNrvcMwrV3RLZINsmHo+7djCvuUzSIeXOnZ5hmjef4bajL1dNccN+tg5XAliO5Q==",
+          "dev": true,
+          "requires": {
+            "has-flag": "3.0.0"
+          }
+        }
+      }
+    },
+    "postcss-modules-scope": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-modules-scope/-/postcss-modules-scope-1.1.0.tgz",
+      "integrity": "sha1-1upkmUx5+XtipytCb75gVqGUu5A=",
+      "dev": true,
+      "requires": {
+        "css-selector-tokenizer": "0.7.0",
+        "postcss": "6.0.19"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "3.2.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.0.tgz",
+          "integrity": "sha512-NnSOmMEYtVR2JVMIGTzynRkkaxtiq1xnFBcdQD/DnNCYPoEPsVJhM98BDyaoNOQIi7p4okdi3E27eN7GQbsUug==",
+          "dev": true,
+          "requires": {
+            "color-convert": "1.9.1"
+          }
+        },
+        "chalk": {
+          "version": "2.3.1",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.3.1.tgz",
+          "integrity": "sha512-QUU4ofkDoMIVO7hcx1iPTISs88wsO8jA92RQIm4JAwZvFGGAV2hSAA1NX7oVj2Ej2Q6NDTcRDjPTFrMCRZoJ6g==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "3.2.0",
+            "escape-string-regexp": "1.0.5",
+            "supports-color": "5.2.0"
+          }
+        },
+        "has-flag": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+          "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
+          "dev": true
+        },
+        "postcss": {
+          "version": "6.0.19",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.19.tgz",
+          "integrity": "sha512-f13HRz0HtVwVaEuW6J6cOUCBLFtymhgyLPV7t4QEk2UD3twRI9IluDcQNdzQdBpiixkXj2OmzejhhTbSbDxNTg==",
+          "dev": true,
+          "requires": {
+            "chalk": "2.3.1",
+            "source-map": "0.6.1",
+            "supports-color": "5.2.0"
+          }
+        },
+        "supports-color": {
+          "version": "5.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.2.0.tgz",
+          "integrity": "sha512-F39vS48la4YvTZUPVeTqsjsFNrvcMwrV3RLZINsmHo+7djCvuUzSIeXOnZ5hmjef4bajL1dNccN+tg5XAliO5Q==",
+          "dev": true,
+          "requires": {
+            "has-flag": "3.0.0"
+          }
+        }
+      }
+    },
+    "postcss-modules-values": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/postcss-modules-values/-/postcss-modules-values-1.3.0.tgz",
+      "integrity": "sha1-7P+p1+GSUYOJ9CrQ6D9yrsRW6iA=",
+      "dev": true,
+      "requires": {
+        "icss-replace-symbols": "1.1.0",
+        "postcss": "6.0.19"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "3.2.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.0.tgz",
+          "integrity": "sha512-NnSOmMEYtVR2JVMIGTzynRkkaxtiq1xnFBcdQD/DnNCYPoEPsVJhM98BDyaoNOQIi7p4okdi3E27eN7GQbsUug==",
+          "dev": true,
+          "requires": {
+            "color-convert": "1.9.1"
+          }
+        },
+        "chalk": {
+          "version": "2.3.1",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.3.1.tgz",
+          "integrity": "sha512-QUU4ofkDoMIVO7hcx1iPTISs88wsO8jA92RQIm4JAwZvFGGAV2hSAA1NX7oVj2Ej2Q6NDTcRDjPTFrMCRZoJ6g==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "3.2.0",
+            "escape-string-regexp": "1.0.5",
+            "supports-color": "5.2.0"
+          }
+        },
+        "has-flag": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+          "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
+          "dev": true
+        },
+        "postcss": {
+          "version": "6.0.19",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.19.tgz",
+          "integrity": "sha512-f13HRz0HtVwVaEuW6J6cOUCBLFtymhgyLPV7t4QEk2UD3twRI9IluDcQNdzQdBpiixkXj2OmzejhhTbSbDxNTg==",
+          "dev": true,
+          "requires": {
+            "chalk": "2.3.1",
+            "source-map": "0.6.1",
+            "supports-color": "5.2.0"
+          }
+        },
+        "supports-color": {
+          "version": "5.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.2.0.tgz",
+          "integrity": "sha512-F39vS48la4YvTZUPVeTqsjsFNrvcMwrV3RLZINsmHo+7djCvuUzSIeXOnZ5hmjef4bajL1dNccN+tg5XAliO5Q==",
+          "dev": true,
+          "requires": {
+            "has-flag": "3.0.0"
+          }
+        }
+      }
+    },
+    "postcss-normalize-charset": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-charset/-/postcss-normalize-charset-1.1.1.tgz",
+      "integrity": "sha1-757nEhLX/nWceO0WL2HtYrXLk/E=",
+      "dev": true,
+      "requires": {
+        "postcss": "5.2.18"
+      }
+    },
+    "postcss-normalize-url": {
+      "version": "3.0.8",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-url/-/postcss-normalize-url-3.0.8.tgz",
+      "integrity": "sha1-EI90s/L82viRov+j6kWSJ5/HgiI=",
+      "dev": true,
+      "requires": {
+        "is-absolute-url": "2.1.0",
+        "normalize-url": "1.9.1",
+        "postcss": "5.2.18",
+        "postcss-value-parser": "3.3.0"
+      }
+    },
+    "postcss-ordered-values": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/postcss-ordered-values/-/postcss-ordered-values-2.2.3.tgz",
+      "integrity": "sha1-7sbCpntsQSqNsgQud/6NpD+VwR0=",
+      "dev": true,
+      "requires": {
+        "postcss": "5.2.18",
+        "postcss-value-parser": "3.3.0"
+      }
+    },
+    "postcss-reduce-idents": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/postcss-reduce-idents/-/postcss-reduce-idents-2.4.0.tgz",
+      "integrity": "sha1-wsbSDMlYKE9qv75j92Cb9AkFmtM=",
+      "dev": true,
+      "requires": {
+        "postcss": "5.2.18",
+        "postcss-value-parser": "3.3.0"
+      }
+    },
+    "postcss-reduce-initial": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-reduce-initial/-/postcss-reduce-initial-1.0.1.tgz",
+      "integrity": "sha1-aPgGlfBF0IJjqHmtJA343WT2ROo=",
+      "dev": true,
+      "requires": {
+        "postcss": "5.2.18"
+      }
+    },
+    "postcss-reduce-transforms": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/postcss-reduce-transforms/-/postcss-reduce-transforms-1.0.4.tgz",
+      "integrity": "sha1-/3b02CEkN7McKYpC0uFEQCV3GuE=",
+      "dev": true,
+      "requires": {
+        "has": "1.0.1",
+        "postcss": "5.2.18",
+        "postcss-value-parser": "3.3.0"
+      }
+    },
+    "postcss-selector-parser": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-2.2.3.tgz",
+      "integrity": "sha1-+UN3iGBsPJrO4W/+jYsWKX8nu5A=",
+      "dev": true,
+      "requires": {
+        "flatten": "1.0.2",
+        "indexes-of": "1.0.1",
+        "uniq": "1.0.1"
+      }
+    },
+    "postcss-svgo": {
+      "version": "2.1.6",
+      "resolved": "https://registry.npmjs.org/postcss-svgo/-/postcss-svgo-2.1.6.tgz",
+      "integrity": "sha1-tt8YqmE7Zm4TPwittSGcJoSsEI0=",
+      "dev": true,
+      "requires": {
+        "is-svg": "2.1.0",
+        "postcss": "5.2.18",
+        "postcss-value-parser": "3.3.0",
+        "svgo": "0.7.2"
+      }
+    },
+    "postcss-unique-selectors": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-unique-selectors/-/postcss-unique-selectors-2.0.2.tgz",
+      "integrity": "sha1-mB1X0p3csz57Hf4f1DuGSfkzyh0=",
+      "dev": true,
+      "requires": {
+        "alphanum-sort": "1.0.2",
+        "postcss": "5.2.18",
+        "uniqs": "2.0.0"
+      }
+    },
+    "postcss-value-parser": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.0.tgz",
+      "integrity": "sha1-h/OPnxj3dKSrTIojL1xc6IcqnRU=",
+      "dev": true
+    },
+    "postcss-zindex": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-zindex/-/postcss-zindex-2.2.0.tgz",
+      "integrity": "sha1-0hCd3AVbka9n/EyzsCWUZjnSryI=",
+      "dev": true,
+      "requires": {
+        "has": "1.0.1",
+        "postcss": "5.2.18",
+        "uniqs": "2.0.0"
+      }
+    },
     "prelude-ls": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.1.2.tgz",
@@ -7250,11 +8693,27 @@
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.3.2.tgz",
       "integrity": "sha1-llOgNvt8HuQjQvIyXM7v6jkmxI0="
     },
+    "q": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/q/-/q-1.5.1.tgz",
+      "integrity": "sha1-fjL3W0E4EpHQRhHxvxQQmsAGUdc=",
+      "dev": true
+    },
     "qs": {
       "version": "6.5.1",
       "resolved": "https://registry.npmjs.org/qs/-/qs-6.5.1.tgz",
       "integrity": "sha512-eRzhrN1WSINYCDCbrz796z37LOe3m5tmW7RQf6oBntukAG1nmovJvhnwHHRMAfeoItc1m2Hk02WER2aQ/iqs+A=="
     },
+    "query-string": {
+      "version": "4.3.4",
+      "resolved": "https://registry.npmjs.org/query-string/-/query-string-4.3.4.tgz",
+      "integrity": "sha1-u7aTucqRXCMlFbIosaArYJBD2+s=",
+      "dev": true,
+      "requires": {
+        "object-assign": "4.1.1",
+        "strict-uri-encode": "1.1.0"
+      }
+    },
     "querystring": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/querystring/-/querystring-0.2.0.tgz",
@@ -7370,6 +8829,14 @@
         "prop-types": "15.6.1"
       }
     },
+    "react-addons-css-transition-group": {
+      "version": "15.6.2",
+      "resolved": "https://registry.npmjs.org/react-addons-css-transition-group/-/react-addons-css-transition-group-15.6.2.tgz",
+      "integrity": "sha1-nkN2vPQLUhfRTsaFUwgc7ksIptY=",
+      "requires": {
+        "react-transition-group": "1.2.1"
+      }
+    },
     "react-dnd": {
       "version": "2.5.4",
       "resolved": "https://registry.npmjs.org/react-dnd/-/react-dnd-2.5.4.tgz",
@@ -7461,6 +8928,18 @@
         "warning": "3.0.0"
       }
     },
+    "react-transition-group": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-1.2.1.tgz",
+      "integrity": "sha512-CWaL3laCmgAFdxdKbhhps+c0HRGF4c+hdM4H23+FI1QBNUyx/AMeIJGWorehPNSaKnQNOAxL7PQmqMu78CDj3Q==",
+      "requires": {
+        "chain-function": "1.0.0",
+        "dom-helpers": "3.3.1",
+        "loose-envify": "1.3.1",
+        "prop-types": "15.6.1",
+        "warning": "3.0.0"
+      }
+    },
     "read-pkg": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-1.1.0.tgz",
@@ -7541,6 +9020,42 @@
         "strip-indent": "1.0.1"
       }
     },
+    "reduce-css-calc": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/reduce-css-calc/-/reduce-css-calc-1.3.0.tgz",
+      "integrity": "sha1-dHyRTgSWFKTJz7umKYca0dKSdxY=",
+      "dev": true,
+      "requires": {
+        "balanced-match": "0.4.2",
+        "math-expression-evaluator": "1.2.17",
+        "reduce-function-call": "1.0.2"
+      },
+      "dependencies": {
+        "balanced-match": {
+          "version": "0.4.2",
+          "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-0.4.2.tgz",
+          "integrity": "sha1-yz8+PHMtwPAe5wtAPzAuYddwmDg=",
+          "dev": true
+        }
+      }
+    },
+    "reduce-function-call": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/reduce-function-call/-/reduce-function-call-1.0.2.tgz",
+      "integrity": "sha1-WiAL+S4ON3UXUv5FsKszD9S2vpk=",
+      "dev": true,
+      "requires": {
+        "balanced-match": "0.4.2"
+      },
+      "dependencies": {
+        "balanced-match": {
+          "version": "0.4.2",
+          "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-0.4.2.tgz",
+          "integrity": "sha1-yz8+PHMtwPAe5wtAPzAuYddwmDg=",
+          "dev": true
+        }
+      }
+    },
     "redux": {
       "version": "3.7.2",
       "resolved": "https://registry.npmjs.org/redux/-/redux-3.7.2.tgz",
@@ -7870,6 +9385,109 @@
         "ret": "0.1.15"
       }
     },
+    "sass-graph": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/sass-graph/-/sass-graph-2.2.4.tgz",
+      "integrity": "sha1-E/vWPNHK8JCLn9k0dq1DpR0eC0k=",
+      "dev": true,
+      "requires": {
+        "glob": "7.1.2",
+        "lodash": "4.17.5",
+        "scss-tokenizer": "0.2.3",
+        "yargs": "7.1.0"
+      },
+      "dependencies": {
+        "camelcase": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-3.0.0.tgz",
+          "integrity": "sha1-MvxLn82vhF/N9+c7uXysImHwqwo=",
+          "dev": true
+        },
+        "cliui": {
+          "version": "3.2.0",
+          "resolved": "https://registry.npmjs.org/cliui/-/cliui-3.2.0.tgz",
+          "integrity": "sha1-EgYBU3qRbSmUD5NNo7SNWFo5IT0=",
+          "dev": true,
+          "requires": {
+            "string-width": "1.0.2",
+            "strip-ansi": "3.0.1",
+            "wrap-ansi": "2.1.0"
+          }
+        },
+        "strip-ansi": {
+          "version": "3.0.1",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
+          "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
+          "dev": true,
+          "requires": {
+            "ansi-regex": "2.1.1"
+          }
+        },
+        "yargs": {
+          "version": "7.1.0",
+          "resolved": "https://registry.npmjs.org/yargs/-/yargs-7.1.0.tgz",
+          "integrity": "sha1-a6MY6xaWFyf10oT46gA+jWFU0Mg=",
+          "dev": true,
+          "requires": {
+            "camelcase": "3.0.0",
+            "cliui": "3.2.0",
+            "decamelize": "1.2.0",
+            "get-caller-file": "1.0.2",
+            "os-locale": "1.4.0",
+            "read-pkg-up": "1.0.1",
+            "require-directory": "2.1.1",
+            "require-main-filename": "1.0.1",
+            "set-blocking": "2.0.0",
+            "string-width": "1.0.2",
+            "which-module": "1.0.0",
+            "y18n": "3.2.1",
+            "yargs-parser": "5.0.0"
+          }
+        },
+        "yargs-parser": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-5.0.0.tgz",
+          "integrity": "sha1-J17PDX/+Bcd+ZOfIbkzZS/DhIoo=",
+          "dev": true,
+          "requires": {
+            "camelcase": "3.0.0"
+          }
+        }
+      }
+    },
+    "sass-loader": {
+      "version": "6.0.6",
+      "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-6.0.6.tgz",
+      "integrity": "sha512-c3/Zc+iW+qqDip6kXPYLEgsAu2lf4xz0EZDplB7EmSUMda12U1sGJPetH55B/j9eu0bTtKzKlNPWWyYC7wFNyQ==",
+      "dev": true,
+      "requires": {
+        "async": "2.3.0",
+        "clone-deep": "0.3.0",
+        "loader-utils": "1.1.0",
+        "lodash.tail": "4.1.1",
+        "pify": "3.0.0"
+      },
+      "dependencies": {
+        "pify": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz",
+          "integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=",
+          "dev": true
+        }
+      }
+    },
+    "sass-variable-loader": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/sass-variable-loader/-/sass-variable-loader-0.1.2.tgz",
+      "integrity": "sha1-+kFVEvLmvPEgnipfBrWO0ZFqDdY=",
+      "dev": true,
+      "requires": {
+        "loader-utils": "1.1.0",
+        "lodash.camelcase": "4.3.0",
+        "node-sass": "4.7.2",
+        "strip-json-comments": "2.0.1"
+      }
+    },
     "sax": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.1.tgz",
@@ -7992,6 +9610,27 @@
         }
       }
     },
+    "scss-tokenizer": {
+      "version": "0.2.3",
+      "resolved": "https://registry.npmjs.org/scss-tokenizer/-/scss-tokenizer-0.2.3.tgz",
+      "integrity": "sha1-jrBtualyMzOCTT9VMGQRSYR85dE=",
+      "dev": true,
+      "requires": {
+        "js-base64": "2.4.3",
+        "source-map": "0.4.4"
+      },
+      "dependencies": {
+        "source-map": {
+          "version": "0.4.4",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.4.4.tgz",
+          "integrity": "sha1-66T12pwNyZneaAMti092FzZSA2s=",
+          "dev": true,
+          "requires": {
+            "amdefine": "1.0.1"
+          }
+        }
+      }
+    },
     "select-hose": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz",
@@ -8140,6 +9779,35 @@
         "safe-buffer": "5.1.1"
       }
     },
+    "shallow-clone": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/shallow-clone/-/shallow-clone-0.1.2.tgz",
+      "integrity": "sha1-WQnodLp3EG1zrEFM/sH/yofZcGA=",
+      "dev": true,
+      "requires": {
+        "is-extendable": "0.1.1",
+        "kind-of": "2.0.1",
+        "lazy-cache": "0.2.7",
+        "mixin-object": "2.0.1"
+      },
+      "dependencies": {
+        "kind-of": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-2.0.1.tgz",
+          "integrity": "sha1-AY7HpM5+OobLkUG+UZ0kyPqpgbU=",
+          "dev": true,
+          "requires": {
+            "is-buffer": "1.1.6"
+          }
+        },
+        "lazy-cache": {
+          "version": "0.2.7",
+          "resolved": "https://registry.npmjs.org/lazy-cache/-/lazy-cache-0.2.7.tgz",
+          "integrity": "sha1-f+3fLctu23fRHvHRF6tf/fCrG2U=",
+          "dev": true
+        }
+      }
+    },
     "shebang-command": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz",
@@ -8373,6 +10041,15 @@
         "socks": "1.1.10"
       }
     },
+    "sort-keys": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/sort-keys/-/sort-keys-1.1.2.tgz",
+      "integrity": "sha1-RBttTTRnmPG05J6JIK37oOVD+a0=",
+      "dev": true,
+      "requires": {
+        "is-plain-obj": "1.1.0"
+      }
+    },
     "source-list-map": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/source-list-map/-/source-list-map-2.0.0.tgz",
@@ -8512,6 +10189,12 @@
         "extend-shallow": "3.0.2"
       }
     },
+    "sprintf-js": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
+      "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=",
+      "dev": true
+    },
     "ssh2": {
       "version": "0.5.5",
       "resolved": "https://registry.npmjs.org/ssh2/-/ssh2-0.5.5.tgz",
@@ -8690,6 +10373,15 @@
       "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.4.0.tgz",
       "integrity": "sha512-zhSCtt8v2NDrRlPQpCNtw/heZLtfUDqxBM1udqikb/Hbk52LK4nQSwr10u77iopCW5LsyHpuXS0GnEc48mLeew=="
     },
+    "stdout-stream": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/stdout-stream/-/stdout-stream-1.4.0.tgz",
+      "integrity": "sha1-osfIWH5U2UJ+qe2zrD8s1SLfN4s=",
+      "dev": true,
+      "requires": {
+        "readable-stream": "2.3.4"
+      }
+    },
     "stealthy-require": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/stealthy-require/-/stealthy-require-1.1.1.tgz",
@@ -8738,6 +10430,12 @@
       "resolved": "https://registry.npmjs.org/streamsearch/-/streamsearch-0.1.2.tgz",
       "integrity": "sha1-gIudDlb8Jz2Am6VzOOkpkZoanxo="
     },
+    "strict-uri-encode": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz",
+      "integrity": "sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM=",
+      "dev": true
+    },
     "string-template": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/string-template/-/string-template-1.0.0.tgz",
@@ -8818,6 +10516,16 @@
       "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz",
       "integrity": "sha1-PFMZQukIwml8DsNEhYwobHygpgo="
     },
+    "style-loader": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-0.20.2.tgz",
+      "integrity": "sha512-FrLMGaOLVhS5pvoez3eJyc0ktchT1inEZziBSjBq1hHQBK3GFkF57Qd825DcrUhjaAWQk70MKrIl5bfjadR/Dg==",
+      "dev": true,
+      "requires": {
+        "loader-utils": "1.1.0",
+        "schema-utils": "0.4.5"
+      }
+    },
     "superagent": {
       "version": "3.8.2",
       "resolved": "https://registry.npmjs.org/superagent/-/superagent-3.8.2.tgz",
@@ -8877,6 +10585,29 @@
         "has-flag": "1.0.0"
       }
     },
+    "svgo": {
+      "version": "0.7.2",
+      "resolved": "https://registry.npmjs.org/svgo/-/svgo-0.7.2.tgz",
+      "integrity": "sha1-n1dyQTlSE1xv779Ar+ak+qiLS7U=",
+      "dev": true,
+      "requires": {
+        "coa": "1.0.4",
+        "colors": "1.1.2",
+        "csso": "2.3.2",
+        "js-yaml": "3.7.0",
+        "mkdirp": "0.5.1",
+        "sax": "1.2.1",
+        "whet.extend": "0.9.9"
+      },
+      "dependencies": {
+        "colors": {
+          "version": "1.1.2",
+          "resolved": "https://registry.npmjs.org/colors/-/colors-1.1.2.tgz",
+          "integrity": "sha1-FopHAXVran9RoSzgyXv6KMCE7WM=",
+          "dev": true
+        }
+      }
+    },
     "symbol-observable": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.2.0.tgz",
@@ -9069,6 +10800,30 @@
       "integrity": "sha1-yy4SAwZ+DI3h9hQJS5/kVwTqYAM=",
       "dev": true
     },
+    "true-case-path": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/true-case-path/-/true-case-path-1.0.2.tgz",
+      "integrity": "sha1-fskRMJJHZsf1c74wIMNPj9/QDWI=",
+      "dev": true,
+      "requires": {
+        "glob": "6.0.4"
+      },
+      "dependencies": {
+        "glob": {
+          "version": "6.0.4",
+          "resolved": "https://registry.npmjs.org/glob/-/glob-6.0.4.tgz",
+          "integrity": "sha1-DwiGD2oVUSey+t1PnOJLGqtuTSI=",
+          "dev": true,
+          "requires": {
+            "inflight": "1.0.6",
+            "inherits": "2.0.3",
+            "minimatch": "3.0.4",
+            "once": "1.4.0",
+            "path-is-absolute": "1.0.1"
+          }
+        }
+      }
+    },
     "tryer": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/tryer/-/tryer-1.0.0.tgz",
@@ -9221,6 +10976,27 @@
         }
       }
     },
+    "uniq": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/uniq/-/uniq-1.0.1.tgz",
+      "integrity": "sha1-sxxa6CVIRKOoKBVBzisEuGWnNP8=",
+      "dev": true
+    },
+    "uniqid": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/uniqid/-/uniqid-4.1.1.tgz",
+      "integrity": "sha1-iSIN32t1GuUrX3JISGNShZa7hME=",
+      "dev": true,
+      "requires": {
+        "macaddress": "0.2.8"
+      }
+    },
+    "uniqs": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/uniqs/-/uniqs-2.0.0.tgz",
+      "integrity": "sha1-/+3ks2slKQaW5uFl1KWe25mOawI=",
+      "dev": true
+    },
     "unique-string": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/unique-string/-/unique-string-1.0.0.tgz",
@@ -9560,6 +11336,12 @@
       "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
       "integrity": "sha1-IpnwLG3tMNSllhsLn3RSShj2NPw="
     },
+    "vendors": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/vendors/-/vendors-1.0.1.tgz",
+      "integrity": "sha1-N61zyO5Bf7PVgOeFMSMH0nSEfyI=",
+      "dev": true
+    },
     "verror": {
       "version": "1.10.0",
       "resolved": "https://registry.npmjs.org/verror/-/verror-1.10.0.tgz",
@@ -10292,6 +12074,12 @@
       "resolved": "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-2.0.3.tgz",
       "integrity": "sha1-nITsLc9oGH/wC8ZOEnS0QhduHIQ="
     },
+    "whet.extend": {
+      "version": "0.9.9",
+      "resolved": "https://registry.npmjs.org/whet.extend/-/whet.extend-0.9.9.tgz",
+      "integrity": "sha1-+HfVv2SMl+WqVC+twW1qJZucEaE=",
+      "dev": true
+    },
     "which": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/which/-/which-1.3.0.tgz",
diff --git a/package.json b/package.json
index 0f4e2dc0..182a4703 100644
--- a/package.json
+++ b/package.json
@@ -38,6 +38,7 @@
     "pdfjs-dist": "^1.8.426",
     "prop-types": "^15.5.10",
     "react": "^15.3.2",
+    "react-addons-css-transition-group": "^15.6.2",
     "react-dnd": "^2.4.0",
     "react-dnd-html5-backend": "^2.4.1",
     "react-dnd-touch-backend": "^0.3.11",
@@ -68,10 +69,16 @@
     "babel-preset-es2015": "^6.13.2",
     "babel-preset-react": "^6.11.1",
     "babel-preset-stage-2": "^6.24.1",
+    "css-loader": "^0.28.10",
     "html-loader": "^0.4.5",
     "html-webpack-plugin": "^2.28.0",
     "http-server": "^0.9.0",
+    "less-loader": "^4.0.6",
+    "node-sass": "^4.7.2",
     "nodemon": "^1.11.0",
+    "sass-loader": "^6.0.6",
+    "sass-variable-loader": "^0.1.2",
+    "style-loader": "^0.20.2",
     "webpack-bundle-analyzer": "^2.8.2",
     "webpack-dev-server": "^2.4.5"
   }
diff --git a/server/public/css/style.css b/server/public/css/style.css
index 3686eaa0..3e4793ad 100644
--- a/server/public/css/style.css
+++ b/server/public/css/style.css
@@ -1,14 +1,30 @@
+:root {
+    --bg-color: #f2f2f2;
+    --color: #626469;
+    --emphasis: #375160;
+
+    --primary: #9AD1ED;
+    --emphasis-primary: #2b71bc;
+
+    --secondary: #466372;
+    --emphasis-secondary: #466372;
+
+    --super-light:  #ecf1f6;
+    --error: #f26d6d;
+    --success: #63d9b1;
+}
+
+
 html {
     font-family:"San Francisco","Roboto","Arial",sans-serif;
     -webkit-text-size-adjust:100%;
-    background: #f2f2f2;
-    color: #6f6f6f;
+    background: var(--bg-color);
+    color: var(--color);
 }
 body, html{
     height: 100%;
     margin: 0;
 }
-
 a{color: inherit; text-decoration: none;}
 
 .scroll-y{
@@ -32,6 +48,16 @@ select::-ms-expand {
     display: none;
 }
 
+button::-moz-focus-inner {
+  border: 0;
+}
+
+
+input, textarea{
+    transition: border 0.2s;
+}
+input[type="checkbox"]{position: relative; top: 1px; margin: 0; padding: 0;}
+
 .no-select {
     -webkit-touch-callout: none;
     -webkit-user-select: none;
@@ -42,6 +68,19 @@ select::-ms-expand {
 }
 
 
+
+
+
+
+
+
+.connect-form input:hover, .connect-form textarea:hover,
+.connect-form input:focus, .connect-form textarea:focus{
+    border-color: rgb(154, 209, 237)!important;
+}
+
+
+
 .drag-drop{
     z-index: 2;
 }
@@ -52,5 +91,43 @@ select::-ms-expand {
 
 
 
+
+
+
+
+/* I know this looks weird but at least it doesn't rely on javascript to dynamically set element size */
 body {overflow: hidden;}
 body, body > div, body > div > div, body > div > div > div{ height: 100%;}
+
+
+
+
+
+
+/* CONNECTION FORM */
+.login-form button.active{
+    box-shadow: 0px 1px 5px rgba(0,0,0,0.20);
+}
+
+
+
+
+
+/* ANIMATION */
+.example-enter {
+  opacity: 0.01;
+}
+
+.example-enter.example-enter-active {
+  opacity: 1;
+  transition: opacity 500ms ease-in;
+}
+
+.example-leave {
+  opacity: 1;
+}
+
+.example-leave.example-leave-active {
+  opacity: 0.01;
+  transition: opacity 300ms ease-in;
+}
diff --git a/webpack.config.js b/webpack.config.js
index 7f95242e..bb157374 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -15,15 +15,19 @@ let config = {
         chunkFilename: "js/chunk.[name].[id].js"
     },
     module: {
-        loaders: [
+        rules: [
             {
                 test: path.join(__dirname, 'client'),
-                loader: ['babel-loader'],
+                use: ['babel-loader'],
                 exclude: /node_modules/
             },
             {
                 test: /\.html$/,
                 loader: 'html-loader'
+            },
+            {
+                test: /\.scss$/,
+                loaders: ['style-loader', 'css-loader', 'sass-loader']
             }
         ]
     },
@@ -59,10 +63,6 @@ if(process.env.NODE_ENV === 'production'){
             }
         }
     };
-    //config.entry.push('webpack/hot/only-dev-server');
 }
 
-
-//config.plugins.push(new BundleAnalyzerPlugin())
-
 module.exports = config;