split up css classes using sass

2017-12-01 15:36:26 +01:00 · 2017-12-01 15:36:26 +01:00 · cc75452691
commit cc75452691
parent e067866ff2
53 changed files with 3135 additions and 2696 deletions
--- a/gulpfile.js
+++ b/gulpfile.js
@ -22,6 +22,8 @@ var argv = require('yargs').argv,
    jshint = require('gulp-jshint'),
    mainBowerFiles = require('main-bower-files'),
    path = require('path'),
+    rename = require('gulp-rename'),
+    sass = require('gulp-sass'),
    sourcemaps = require('gulp-sourcemaps'),
    templateCache = require('gulp-angular-templatecache'),
    through = require('through2'),
@ -102,6 +104,30 @@ gulp.task('templates', function () {
        .pipe(gulp.dest(path.join(output_directory, 'js')));
 });

+// Build the openslides-site.css file from the main file core/static/css/site.scss.
+// Minimizes the outputfile if the production flag is given.
+gulp.task('css-site', function () {
+    return gulp.src([
+            path.join('openslides', 'core', 'static', 'css', 'site.scss')
+        ])
+        .pipe(sass().on('error', sass.logError))
+        .pipe(gulpif(argv.production, cssnano({safe: true})))
+        .pipe(rename('openslides-site.css'))
+        .pipe(gulp.dest(path.join(output_directory, 'css')));
+});
+
+// Build the openslides-projector.css file from the main file core/static/css/projector.scss.
+// Minimizes the outputfile if the production flag is given.
+gulp.task('css-projector', function () {
+    return gulp.src([
+            path.join('openslides', 'core', 'static', 'css', 'projector.scss')
+        ])
+        .pipe(sass().on('error', sass.logError))
+        .pipe(gulpif(argv.production, cssnano({safe: true})))
+        .pipe(rename('openslides-projector.css'))
+        .pipe(gulp.dest(path.join(output_directory, 'css')));
+});
+
 // Catches all CSS files from all bower components and concats them to one file
 // css/openslides-libs.css. In production mode the file is uglified.
 gulp.task('css-libs', function () {
@ -210,6 +236,8 @@ gulp.task('default', [
        'pdf-worker',
        'pdf-worker-libs',
        'templates',
+        'css-site',
+        'css-projector',
        'css-libs',
        'fonts-libs',
        'ckeditor',
@ -223,13 +251,16 @@ gulp.task('default', [
 */

 // Watches changes in JavaScript and templates.
-gulp.task('watch', ['js', 'templates', 'pdf-worker'], function () {
+gulp.task('watch', ['js', 'templates', 'pdf-worker', 'css-site', 'css-projector'], function () {
    gulp.watch([
        path.join('openslides', '*', 'static', 'js', '**', '*.js'),
        '!' + path.join('openslides', 'core', 'static', 'js', 'core', 'pdf-worker.js')
    ], ['js']);
    gulp.watch(path.join('openslides', '*', 'static', 'templates', '**', '*.html'), ['templates']);
    gulp.watch(path.join('openslides', 'core', 'static', 'js', 'core', 'pdf-worker.js'), ['pdf-worker']);
+    // We cannot differentiate between all scss files which belong to each realm. So if
+    // one scss file changes the site and projector css is rebuild.
+    gulp.watch(path.join('openslides', '*', 'static', 'css', '**', '*.scss'), ['css-site', 'css-projector']);
 });

 // Extracts translatable strings using angular-gettext and saves them in file
--- a/openslides/agenda/static/css/agenda/_list_of_speakers.scss
+++ b/openslides/agenda/static/css/agenda/_list_of_speakers.scss
@ -0,0 +1,21 @@
+/* List of speakers */
+.lastSpeakers {
+    color: #9a9898;
+    margin-left: 27px;
+}
+
+.currentSpeaker {
+    font-weight: bold;
+
+    i {
+        padding-right: 5px;
+    }
+}
+
+.nextSpeakers {
+    margin-left: 13px;
+
+    li {
+        line-height: 150%;
+    }
+}
--- a/openslides/agenda/static/css/agenda/_projector.scss
+++ b/openslides/agenda/static/css/agenda/_projector.scss
@ -0,0 +1,34 @@
+@import 'list_of_speakers';
+
+/* Agenda list */
+.agendalist {
+    line-height: 1.5em;
+
+    p {
+        font-size: 140%;
+
+        &.done {
+            color: #9a9898;
+        }
+    }
+
+    .mainitem {
+        margin-top: 25px;
+    }
+
+    .subitem {
+        font-size: 100%;
+        margin-bottom: 4px;
+    }
+}
+.agendalist-table {
+    td {
+        vertical-align: top;
+        padding-left: 5px;
+    }
+
+    .number {
+        padding: 0;
+        white-space: nowrap;
+    }
+}
--- a/openslides/agenda/static/css/agenda/_site.scss
+++ b/openslides/agenda/static/css/agenda/_site.scss
@ -0,0 +1,28 @@
+@import 'list_of_speakers';
+
+#agenda-table {
+    .icon-column {
+        width: 5%;
+    }
+
+    .title-column {
+        padding: 0px 10px;
+        width: 95%;
+    }
+}
+
+.agenda-sort {
+    .internal {
+        padding: 7px;
+        opacity: 0.6;
+    }
+    .angular-ui-tree-node {
+        min-height: 0;
+    }
+}
+
+.speakers-toolbar {
+    margin: -20px -20px 30px -20px;
+    padding: 12px 15px 10px 15px;
+
+}
--- a/openslides/assignments/static/css/assignments/_projector.scss
+++ b/openslides/assignments/static/css/assignments/_projector.scss
@ -0,0 +1,19 @@
+.electionresults table {
+    width: calc(100% - 230px);
+}
+
+#speakerbox {
+    width: 40%;
+    float: right;
+    margin: 20px;
+    right: 0;
+    bottom: 0;
+    position: absolute;
+    background: #d3d3d3;
+    border-radius: 7px;
+    border: 1px solid #999;
+    padding: 0px 7px 10px 19px;
+    z-index: 99;
+    box-shadow: 3px 3px 10px 1px rgba(0,0,0,0.5);
+    overflow: hidden;
+}
--- a/openslides/assignments/static/css/assignments/_site.scss
+++ b/openslides/assignments/static/css/assignments/_site.scss
@ -0,0 +1,14 @@
+#content .col1 .ballot-tabs {
+    ul {
+        margin-left: 0px;
+    }
+    li.active a {
+        background-color: #f5f5f5 !important;
+    }
+    .tab-content {
+        background-color: #f5f5f5;
+        border: 1px solid #ddd;
+        border-width: 0px 1px 1px 1px;
+        padding: 15px;
+    }
+}
--- a/openslides/core/static/css/_fonts.scss
+++ b/openslides/core/static/css/_fonts.scss
@ -0,0 +1,28 @@
+/*
+ * Font definitions for OpenSlides site
+ */
+
+@font-face {
+  font-family: $font;
+  src: $font-src;
+  font-weight: 400;
+  font-style: normal;
+}
+@font-face {
+  font-family: $font-medium;
+  src: $font-medium-src;
+  font-weight: 400;
+  font-style: normal;
+}
+@font-face {
+  font-family: $font-condensed;
+  src: $font-condensed-src;
+  font-weight: 100;
+  font-style: normal;
+}
+@font-face {
+    font-family: $font-condensed-light;
+    src: $font-condensed-light-src;
+    font-weight: 100;
+    font-style: normal;
+}
--- a/openslides/core/static/css/_helper.scss
+++ b/openslides/core/static/css/_helper.scss
@ -0,0 +1,228 @@
+/** General helper classes **/
+.disabled {
+    color: #555;
+    cursor: not-allowed !important;
+}
+
+.bold {
+    font-weight: bold;
+}
+
+.dropdown-menu {
+    margin-left: 0px !important;
+}
+
+.slimDropDown {
+    padding-left: 4px !important;
+    padding-right: 4px !important;
+}
+
+.btn-primary {
+    background-color: #317796;
+}
+
+.btn-slim {
+    padding-left: 6px;
+    padding-right: 6px;
+}
+
+.spacer, .spacer-top {
+    margin-top: 7px;
+}
+
+.spacer-top-lg {
+    margin-top: 25px;
+}
+
+.spacer-bottom {
+    margin-bottom: 7px;
+}
+
+.spacer-right {
+    margin-right: 5px;
+}
+
+.spacer-left {
+    margin-left: 5px;
+}
+
+.spacer-left-lg {
+    margin-left: 10px;
+}
+
+.no-padding {
+    padding: 0px;
+}
+
+.lead-div {
+    margin-bottom: 20px;
+
+    .lead {
+        margin-bottom: 0;
+    }
+}
+
+.italic {
+    font-style: italic;
+}
+
+.hoverActions {
+    font-size: 85%;
+}
+
+.hiddenDiv {
+    visibility: hidden;
+}
+
+.vcenter {
+    vertical-align: middle;
+}
+
+.white-space-pre-line {
+    white-space: pre-line;
+}
+
+.slimlabel.label {
+    padding: 0px 10px;
+}
+
+.indentation, .indentation20 {
+    margin-left: 20px !important;
+}
+
+.indentation-lg {
+    margin-left: 35px !important;
+}
+
+.halfWidth {
+    width: 50%;
+}
+
+.badge-info {
+    background-color: #f0ad4e;
+}
+
+.badge-success {
+    background-color: #5bb85b;
+}
+
+.smallhr {
+    margin-top: 5px;
+    margin-bottom: 5px;
+    border-color: #cccccc;
+}
+
+.nobr {
+    white-space: nowrap;
+}
+
+.rotate-45-deg-right {
+    filter: "progid: DXImageTransform.Microsoft.BasicImage(rotation=0.5)";
+    -webkit-transform: rotate(45deg);
+    -moz-transform: rotate(45deg);
+    -ms-transform: rotate(45deg);
+    -o-transform: rotate(45deg);
+    transform: rotate(45deg);
+}
+
+.optional { /* show optional column */
+    display: auto;
+}
+
+.login-logo {
+    width: 250px;
+}
+
+.loginForm .input-group-addon i {
+    width: 15px;
+}
+
+.modal-header {
+    padding: 5px;
+}
+
+.no-padding {
+    padding: 0 !important;
+}
+
+.no-padding-left {
+    padding-left: 0 !important;
+}
+
+.no-padding-right {
+    padding-right: 0 !important;
+}
+
+.scroll-x-container {
+    overflow-x: auto;
+}
+
+.btn-group > label > input[type=radio] {
+    display: none;
+}
+
+/* tables */
+.minimum {
+    width: 1px;
+}
+
+.minimumTable {
+    width: auto;
+}
+
+.deleteColumn {
+    text-align: center;
+    background-color: #ff9999 !important;
+}
+
+th.sortable:hover, tr.pointer:hover, .pointer {
+    cursor: pointer;
+}
+
+/** background colors for table rows **/
+tr.hiddenrow td {
+    background-color: #F5DCDC;
+}
+
+tr.activeline td, li.activeline, .projected {
+    background-color: #bed4de !important;
+}
+
+.related-projected {
+    background-color: #e1ecfe !important;
+}
+
+tr.selected td {
+    background-color: #ff9999;
+}
+
+.help-block {
+    font-size: 85%;
+    margin-top: 2px;
+    margin-left: 2px;
+}
+
+.grey {
+    color: #9a9898;
+}
+
+.info {
+    color: #222;
+    background-color: #bed4de;
+    border-color: #46b8da;
+}
+.error {
+    color: #a94442;
+    background-color: #f2dede;
+    border-color: #ebccd1;
+}
+.success {
+    color: #3c763d;
+    background-color: #dff0d8;
+    border-color: #d6e9c6;
+}
+.warning {
+    color: #725523;
+    background-color: #fcf8e3;
+    border-color: #faebcc;
+}
--- a/openslides/core/static/css/_mediaqueries.scss
+++ b/openslides/core/static/css/_mediaqueries.scss
@ -0,0 +1,109 @@
+/*////////////////////////////////////////
+    =MEDIA QUERIES (RESPONSIVE DESIGN)
+////////////////////////////////////////*/
+
+/* display for 900 to 1200px resolutions */
+@media only screen and (max-width: 1200px) {
+
+    body { font-size: 12px; }
+
+    h1 { font-size: 30px; padding-bottom: 6px; }
+
+    h2 { font-size: 22px; padding-bottom: 10px; }
+
+    h3 { font-size: 18px; padding-bottom: 10px; }
+
+    .col-md-4 {
+        float: left;
+        width: 50%;
+    }
+
+    .motion-text.line-numbers-outside .os-line-number:after {
+        font-size: 10px;
+        top: 9px;
+    }
+}
+
+
+/* display for resolutions smaller that 900px */
+@media only screen and (max-width: 900px) {
+
+    #nav .navbar li a { padding: 24px 5px; }
+
+    #groups-table .perm-head {
+        width: 200px;
+    }
+
+    /* hide text in groups-table earlier */
+    #groups-table .optional { display: none; }
+
+    /* show replacement elements, if any */
+    #groups-table .optional-show { display: block !important; }
+
+    /* hide searchbar input */
+    #nav .searchbar input { display: none !important; }
+    #nav .searchbar .btn {
+        border-top-left-radius: 4px !important;
+        border-bottom-left-radius: 4px !important;
+    }
+}
+
+
+/* display for resolutions smaller that 760px */
+@media only screen and (max-width: 760px) {
+
+    h1 { font-size: 22px; padding-bottom: 4px; }
+
+    h2 { font-size: 16px; padding-bottom: 4px; }
+
+    h3 { font-size: 14px; padding-bottom: 4px; }
+
+    .user i { font-size: 16px;  padding: 3px; }
+
+    #nav .navbar { box-shadow: none; padding-right: 60px !important; }
+    #nav .navbar ul li a { padding: 10px 15px; }
+    #nav .searchbar { margin: 15px -53px 0 0 !important; }
+
+    #chatbox { width: 100%; top: 40px; }
+
+    .badge { font-size: 10px; }
+
+    /* show replacement elements, if any */
+    .optional-show { display: block !important; }
+
+    /* hide marked element / column */
+    .optional, .hide-sm { display: none !important; }
+}
+
+/* display for resolutions smaller that 560px */
+@media only screen and (max-width: 560px) {
+    #content .containerOS { padding: 0; }
+
+    #content .col2 { width: 100%; }
+
+    #content .col2.sidebar-max, #content .col2.sidebar-min,
+    #content .col1.sidebar-min, #content .col1.sidebar-max  {
+        width: 100%;
+    }
+
+    #sidebar {
+        display: none !important;
+    }
+
+    #sidebar-xs {
+        display: block !important;
+    }
+
+    #sidebar-xs .projector_full {
+        margin-left: 0 !important;
+        width: 100%;
+    }
+
+    #groups-table .perm-head {
+        width: 150px;
+    }
+
+    .personalNoteFixed {
+        width: 100%;
+    }
+}
--- a/openslides/core/static/css/_startup-spinner.scss
+++ b/openslides/core/static/css/_startup-spinner.scss
@ -0,0 +1,34 @@
+#wrapper {
+    float: left;
+    width: 100%;
+    margin: 0 auto 0 auto;
+}
+
+#startup-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    background-color: #fff;
+    z-index: 900;
+}
+
+#spinner-container {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    max-height: 340px;
+    z-index: 1000;
+
+    div {
+        width: 100%;
+        position: absolute;
+        bottom: 0;
+        font-size: 56px;
+        text-align: center;
+        color: #317796;
+    }
+}
--- a/openslides/core/static/css/_ui-override.scss
+++ b/openslides/core/static/css/_ui-override.scss
@ -0,0 +1,170 @@
+/* override booststrap's label class to fix linebreak and add spacing */
+.label {
+    display: inline-block;
+    padding: .4em .6em;
+    margin-right: .2em;
+    white-space: normal;
+}
+
+/* Custom OpenSlides slider classes */
+.os-slider {
+    margin-top: 40px;
+    margin-bottom: 20px;
+
+    &.rzslider {
+        .rz-bar {
+            background: #317796;
+            opacity: 0.3;
+            height: 2px;
+        }
+
+        .rz-selection {
+            background: #317796;
+        }
+
+        .rz-pointer {
+            width: 14px;
+            height: 14px;
+            top: -7px;
+            bottom: 0;
+            background-color: #317796;
+            border-radius: 7px;
+
+            &:after {
+                display: none;
+            }
+        }
+    }
+}
+
+/* ngDialog: override ngdialog-theme-default */
+.ngdialog.ngdialog-theme-default {
+    padding-top: 40px;
+
+    .ngdialog-content {
+        font-family: $font, sans-serif !important;
+    }
+
+    h2 {
+        margin-top: 5px;
+    }
+
+    label {
+        font-family: $font-medium;
+        font-family: $font-medium, sans-serif;
+        font-weight: normal;
+    }
+
+    .row:after, .row:before {
+        display: table-cell !important;
+    }
+}
+
+.ngdialog.ngdialog-theme-default.wide-form .ngdialog-content {
+    width: 750px;
+    line-height: 1em;
+}
+
+/* Bootbox: override z-index, that bootboxes are higher than ngDialogs */
+.bootbox {
+    z-index: 100000;
+}
+
+/* angular-chosen: override default width of select fields in quickmode */
+.chosen-container {
+    width: 100% !important;
+    font-size: 14px;
+
+    .chosen-choices {
+        border: 1px solid #ccc;
+        border-radius: 4px;
+
+        li.search-choice {
+            margin: 6px 5px 0 0 !important;
+        }
+    }
+
+    input {
+        margin: 4px 0 !important;
+    }
+}
+
+.chosen-container-active .chosen-choices {
+    border-color: rgba(82,168,236,.8);
+    box-shadow: 0 0 8px rgba(82,168,236,.6);
+}
+
+/* angular-ui-tree style */
+.angular-ui-tree-handle {
+    background: none repeat scroll 0 0 #f8faff;
+    border: 1px solid #dae2ea;
+    color: #7c9eb2;
+    padding: 10px;
+
+    &:hover {
+        background: none repeat scroll 0 0 #f4f6f7;
+        border-color: #dce2e8;
+        color: #438eb9;
+    }
+}
+
+.angular-ui-tree-placeholder {
+    background: none repeat scroll 0 0 #f0f9ff;
+    border: 2px dashed #bed2db;
+    box-sizing: border-box;
+}
+
+/* ngAnimate classes */
+.animate-item.ng-enter {
+    -webkit-animation: fade-in 0.5s linear;
+    animation: fade-in 0.5s linear;
+}
+
+.animate-item.ng-leave {
+    -webkit-animation: fade-out 0.25s linear;
+    animation: fade-out 0.25s linear;
+}
+
+/* xeditable */
+.editable-click {
+    border: none;
+    cursor: pointer;
+    color: #555;
+
+    &:hover {
+        color: #555;
+    }
+}
+
+.popover-wrapper {
+    .editable-hide {
+        display: inline !important;
+    }
+
+    .small-form {
+        input{
+            width: 100px;
+            height: 30px;
+        }
+
+        button{
+            padding: 5px 10px;
+            font-size: 12px;
+            line-height: 1.5;
+        }
+    }
+}
+
+@keyframes fade-out {
+    0% { opacity: 1; background: none; }
+    100% { opacity: 0; background: none; }
+}
+@keyframes fade-in {
+    0% { opacity: 0; background: none; }
+    100% { opacity: 1; background: none; }
+}
+
+/* Angular formly */
+.checkbox label {
+    padding-left: 0;
+}
--- a/openslides/core/static/css/_variables.scss
+++ b/openslides/core/static/css/_variables.scss
@ -0,0 +1,9 @@
+/** Fonts **/
+$font: 'Roboto';
+$font-src: url('../fonts/Roboto-Regular.woff') format('woff');
+$font-medium: 'Roboto Medium';
+$font-medium-src: url('../fonts/Roboto-Medium.woff') format('woff');
+$font-condensed: 'Roboto Condensed';
+$font-condensed-src: url('../fonts/Roboto-Condensed-Regular.woff') format('woff');
+$font-condensed-light: 'Roboto Condensed Light';
+$font-condensed-light-src: url('../fonts/Roboto-Condensed-Light.woff') format('woff');
--- a/openslides/core/static/css/app.css
+++ b/openslides/core/static/css/app.css
--- a/openslides/core/static/css/core/_chatbox.scss
+++ b/openslides/core/static/css/core/_chatbox.scss
@ -0,0 +1,19 @@
+/* Chatbox */
+#chatbox {
+    position: fixed;
+    top: 40px;
+    right: 0;
+    width: 40%;
+    border-color: #dddddd;
+    border-width: 1px;
+    box-shadow: -5px 5px 5px rgba(0, 0, 0, 0.2);
+    height: 234px;
+    padding: 0 10px 10px 10px;
+    z-index: 5;
+}
+
+#chatbox-text {
+    overflow-y: scroll;
+    height: 190px;
+    color: #222;
+}
--- a/openslides/core/static/css/core/_config.scss
+++ b/openslides/core/static/css/core/_config.scss
@ -0,0 +1,28 @@
+/** Config **/
+#content .col1 #config {
+    .comments > div {
+        margin-bottom: 5px;
+    }
+    .config-checkbox {
+        padding: 6px 12px;
+    }
+    .custom-translations {
+        > div {
+            margin-bottom: 5px;
+            padding-right: 15px;
+            width: 100%;
+        }
+
+        .inputs {
+            input {
+                width: 47%;
+            }
+
+            .arrow {
+                width: 6%;
+                float: left;
+                text-align: center;
+            }
+        }
+    }
+}
--- a/openslides/core/static/css/core/_countdown.scss
+++ b/openslides/core/static/css/core/_countdown.scss
@ -0,0 +1,32 @@
+/** Countdown fullscreen mode **/
+#countdownWrapper {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 1000;
+    background-color: white;
+}
+#countdownWrapper > div {
+    text-align: center;
+    margin-top: 50px;
+}
+#countdown {
+    display: inline-block;
+    padding: 20px 50px;
+    border-radius: 8px;
+    font-size: 30vw;
+    line-height: 1;
+    font-weight: bold;
+}
+#countdown .description {
+    font-weight: normal;
+    font-size: 5vw;
+}
+#countdown.warning {
+    color: #ed940d;
+}
+#countdown.negative {
+    color: #CC0000;
+}
--- a/openslides/core/static/css/core/_csv-import.scss
+++ b/openslides/core/static/css/core/_csv-import.scss
@ -0,0 +1,28 @@
+/* for csv import form */
+#content .col1 #csv-import {
+    margin-left: 15px;
+    width: 35%;
+
+    .file-select {
+        input {
+            display: none;
+        }
+
+        label {
+            font-weight: normal;
+            cursor: pointer;
+        }
+    }
+
+    .clear-file {
+        color: #555;
+    }
+
+    .help-block {
+        padding-bottom: 0;
+    }
+
+    .help-block-big {
+        font-size: 100%;
+    }
+}
--- a/openslides/core/static/css/core/_goto-top.scss
+++ b/openslides/core/static/css/core/_goto-top.scss
@ -0,0 +1,20 @@
+/** Goto top link **/
+#goto-top {
+    position: fixed;
+    bottom: 15px;
+    right: 30px;
+    padding: 10px 30px;
+    background: white;
+    opacity: 0.6;
+    transition: opacity 250ms ease-out;
+    z-index: 100;
+
+    &:hover {
+        opacity: 1;
+        transition: opacity 250ms ease-in;
+    }
+
+    a:hover {
+        text-decoration: none;
+    }
+}
--- a/openslides/core/static/css/core/_manage-projectors.scss
+++ b/openslides/core/static/css/core/_manage-projectors.scss
@ -0,0 +1,41 @@
+/** manage-projectors **/
+#manage-projectors {
+    > div {
+        display: inline-table;
+        width: 256px;
+        margin: 10px 20px 35px 10px;
+
+        > div {
+            margin-bottom: 10px;
+        }
+    }
+
+    .middle {
+        width: 100%;
+
+        > div {
+            margin-left: auto;
+            margin-right: auto;
+            display: table;
+        }
+    }
+
+    .dropdown {
+        width: 65%;
+        padding-right: 5px;
+        float: left;
+
+        button {
+            width: 100%;
+        }
+    }
+
+    .btn-danger {
+        width: 35%;
+    }
+
+    .resolution {
+        display: inline-block;
+        width: 120px;
+    }
+}
--- a/openslides/core/static/css/core/_messaging.scss
+++ b/openslides/core/static/css/core/_messaging.scss
@ -0,0 +1,20 @@
+/** Messaging status bar **/
+#messaging {
+    position: fixed;
+    bottom: 0;
+    width: 100%;
+    z-index: 100000;
+}
+
+#messaging-container {
+    margin: 0 auto 0 auto;
+    padding: 0px 20px;
+    max-width: 1400px;
+
+    > div {
+        margin-bottom: 10px;
+        padding: 10px 20px;
+        border-radius: 6px;
+        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+    }
+}
--- a/openslides/core/static/css/core/_os-table.scss
+++ b/openslides/core/static/css/core/_os-table.scss
@ -0,0 +1,103 @@
+/** OS-Table **/
+#content .col1 .os-table {
+    font-weight: normal;
+
+    small {
+        color: #555;
+    }
+
+    .row {
+        border: 1px solid #ddd;
+        border-top: 0px;
+
+        .col-xs-1 {
+            width: 50px;
+        }
+
+        .col-xs-4 {
+            padding-right: 10px;
+        }
+
+        // TODO: Isn't this defined in the _helper.scss?
+        .centered {
+            text-align: center;
+        }
+    }
+
+    .data-row:hover {
+        background-color: #f5f5f5;
+    }
+
+    .data-row > div {
+        padding: 10px 0px 10px 0px;
+    }
+
+    .id-col {
+        width: 50px;
+        min-height: 1px;
+        word-wrap: break-word;
+    }
+
+    .id-col-space {
+        width: calc(100% - 50px);
+    }
+
+    .no-projector-spacer {
+        margin-right: 20px;
+        float: left;
+    }
+
+    .header-row {
+        border-top: 1px solid #ddd;
+        background-color: #f5f5f5;
+    }
+
+    .header-row > div {
+        padding: 10px;
+    }
+
+    .main-header {
+        width: calc(100% - 50px);
+        float: right;
+
+        .form-inline {
+            margin-left: 15px;
+        }
+    }
+
+    .content > div { /* horizontal blocks */
+        display: inline-block;
+        float: left;
+    }
+
+    .content > div > div { /* vertival blocks */
+        margin-bottom: 3px;
+    }
+
+    .content > div > div:last-child {
+        margin-bottom: 0px;
+    }
+
+    .projector {
+        width: 70px !important;
+    }
+
+
+    .header-row .dropdown > span, .sort-spacer {
+        padding: 5px 10px 5px 10px;
+    }
+
+    .title {
+        font-family: $font-medium;
+        font-family: $font-medium, sans-serif;
+        font-weight: normal;
+        font-size: 120%;
+        margin-right: 3px;
+        padding: 0;
+        background-color: transparent;
+    }
+
+    .dropdown-hover-space {
+        padding: 5px 5px 5px 0;
+    }
+}
--- a/openslides/core/static/css/core/_projector-container.scss
+++ b/openslides/core/static/css/core/_projector-container.scss
@ -0,0 +1,43 @@
+/* ProjectorContainer */
+.pContainer {
+    background-color: #222;
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: table;
+
+    & > div {
+        display: table-cell;
+        vertical-align: middle;
+    }
+
+    #iframe {
+        -moz-transform-origin: 0 0;
+        -webkit-transform-origin: 0 0;
+        -o-transform-origin: 0 0;
+        transform-origin: 0 0 0;
+    }
+
+    #iframewrapper, .error {
+        position: relative;
+        overflow: hidden;
+        margin-left: auto;
+        margin-right: auto;
+    }
+
+    .error > p {
+        color: #f00;
+        font-size: 150%;
+        text-align: center;
+    }
+
+    #iframeoverlay {
+        position: absolute;
+        top: 0px;
+        left: 0px;
+        display: block;
+        z-index: 1;
+    }
+}
--- a/openslides/core/static/css/core/_projector-sidebar.scss
+++ b/openslides/core/static/css/core/_projector-sidebar.scss
@ -0,0 +1,30 @@
+/* Pojector sidebar */
+.col2 .projectorSelector {
+    margin-top: 10px;
+    margin-bottom: 10px;
+
+    & > div {
+        margin-bottom: 10px;
+
+        & > div {
+            width: 65%;
+            padding-right: 5px;
+            float: left;
+            margin-bottom: 10px;
+
+            & > button {
+                width: 100%;
+            }
+        }
+    }
+
+    .manageBtn {
+        width: 35%;
+    }
+
+    .btn-group {
+        margin-left: auto;
+        margin-right: auto;
+        display: table;
+    }
+}
--- a/openslides/core/static/css/core/_projector.scss
+++ b/openslides/core/static/css/core/_projector.scss
@ -0,0 +1,280 @@
+@import "projector-container";
+
+/* Template styles for OpenSlides projector */
+html, body {
+    height: 100%;
+}
+
+body {
+    font-family: $font, sans-serif;
+    font-size: 20px !important;
+    line-height: 24px !important;
+    overflow: hidden;
+    color: #222;
+}
+
+h1, h2, h3, h4, h5, h6 {
+    font-size: inherit;
+    font-family: $font-condensed, sans-serif;
+    font-weight: normal;
+}
+
+h1 {
+    font-size: 2.25em;
+    line-height: 1.1em;
+}
+
+h2 {
+    font-size: 28px;
+    margin-top: 15px;
+    display: block;
+    color: #9a9898;
+}
+
+h3 {
+    color: #222;
+    margin-bottom: 10px
+}
+
+ul, ol {
+    margin: 0 0 10px 2em;
+}
+
+li {
+    line-height: normal;
+}
+
+hr {
+    margin: 10px 0;
+}
+
+#header {
+    font-family: $font-condensed-light;
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    box-shadow: 0 0 7px rgba(0,0,0,0.6);
+    height: 70px;
+    margin-bottom: 20px;
+}
+
+#logo {
+    position: relative;
+    left: 50px;
+    top: 10px;
+    height: 50px;
+    margin-right: 25px;
+    float: left;
+}
+
+#eventdata {
+    position: relative;
+    left: 50px;
+    top: 12px;
+    height: 50px;
+    overflow: hidden;
+
+    .title {
+        font-size: 26px;
+        font-weight: bold;
+
+        &.titleonly {
+            position: relative;
+            top: 12px;
+        }
+    }
+
+    .description {
+        font-size: 18px;
+        opacity: 0.8;
+    }
+}
+
+#currentTime {
+    font-family: $font-condensed-light;
+    border: 0 solid #000000;
+    font-size: 24px;
+    position: absolute;
+    text-align: right;
+    top: 23px;
+    right: 50px;
+    padding-left: 30px;
+}
+
+#footer {
+    font-family: $font-condensed-light;
+    position: fixed;
+    bottom: 0;
+    height: 35px;
+    width: 100%;
+    font-size: 16px;
+    padding-left: 50px;
+    padding-right: 50px;
+    padding-top: 5px;
+    overflow: hidden;
+    text-align: right;
+
+    span {
+        opacity: 0.8;
+    }
+}
+
+/* Content */
+.content {
+    position: absolute;
+    left: 50px;
+    right: 50px;
+    z-index: -1;
+    line-height: 1.5em;
+
+    img {
+        max-width: 65%;
+        height: auto;
+    }
+}
+
+.scrollcontent {
+    transition-property: margin;
+    transition-duration: 1s;
+}
+
+.zoomcontent {
+    transition-property: font-size;
+    transition-duration: 1s;
+}
+
+.fullscreen {
+    position: fixed;
+    top: 0 !important;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 100;
+    background-color: black;
+
+    canvas {
+        margin: auto;
+        display: block !important;
+    }
+}
+
+#title {
+    border-bottom: 5px solid #d3d3d3;
+    margin-bottom: 40px;
+
+    h1 {
+        margin-bottom: 0;
+        padding-bottom: 0;
+    }
+
+    h2 {
+        margin-top: 10px;
+        margin-bottom: 5px;
+    }
+}
+
+/* Overlays: countdown and message */
+.countdown {
+    min-width: 260px;
+    position: relative;
+    margin: 0 0 10px 10px;
+    top: 0px;
+    right: 0px;
+    padding: 26px 45px 7px 19px;
+    min-height: 72px;
+    font-family: $font-condensed, sans-serif;
+    font-size: 3.7em;
+    font-weight: bold;
+    text-align: right;
+    border-radius: 7px 7px 7px 7px;
+    z-index: 320;
+
+    .description {
+        font-weight: normal;
+        font-size: 18px;
+        margin-top: 20px;
+        padding-right: 6px;
+    }
+
+    &.warning {
+        color: #ed940d;
+    }
+
+    &.negative {
+        color: #CC0000;
+    }
+}
+
+.message_background {
+    background-color: #777777;
+    opacity: 0.8;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 300;
+}
+.message {
+    font-family: $font-condensed, sans-serif;
+    font-weight: normal;
+    position: fixed;
+    top: 35%;
+    left: 10%;
+    width: 80%;
+    text-align: center;
+    border-radius: 0.2em;
+    background: #FFFFFF;
+    font-size: 2.75em;
+    padding: 0.2em 0;
+    line-height: normal !important;
+    z-index: 350;
+}
+.identify {
+    background-color: #D9F8C4;
+    z-index: 400;
+}
+
+/* Table style */
+.table {
+    border-collapse:collapse;
+    border-color:#CCCCCC -moz-use-text-color #CCCCCC #CCCCCC;
+    border-style:solid none solid solid;
+    border-width:1px medium 1px 1px;
+    margin:0;
+    border-spacing:0px;
+
+    th {
+        border-right:1px solid #CCCCCC;
+        color:#333333;
+        font-weight:normal;
+        padding:10px 10px 10px 10px;
+        text-align:left;
+        text-transform:uppercase;
+    }
+
+    tr.odd td {
+        background:none repeat scroll 0 0 #F1F1F1;
+    }
+
+    td {
+        background:none repeat scroll 0 0 #F7F7F7;
+        border-right:1px solid #CCCCCC;
+        line-height:120%;
+        padding: 10px 10px;
+        vertical-align:middle;
+    }
+
+    tr.total td {
+        border-top: 1px solid #333333;
+        background-color: #e3e3e3;
+    }
+
+    tr.elected td {
+        background-color: #BED4DE !important;
+    }
+}
+
+.transparentTable td {
+    background-color: transparent;
+    padding-right: 10px;
+}
--- a/openslides/core/static/css/core/_search.scss
+++ b/openslides/core/static/css/core/_search.scss
@ -0,0 +1,13 @@
+/* search results */
+.searchresults li {
+    margin-bottom: 12px;
+}
+.searchresults h3 {
+    margin-bottom: 3px;
+    padding-bottom: 0;
+}
+.searchresults .hits {
+    margin-bottom: 10px;
+    color: #999999;
+    font-size: 85%;
+}
--- a/openslides/core/static/css/core/_site.scss
+++ b/openslides/core/static/css/core/_site.scss
@ -0,0 +1,599 @@
+/** Template styles for OpenSlides site **/
+
+@import "config";
+@import "search";
+@import "os-table";
+@import "csv-import";
+@import "chatbox";
+@import "countdown";
+@import "goto-top";
+@import "messaging";
+
+@import "projector-sidebar";
+@import "manage-projectors";
+
+* { /* set margin/padding for all (block) elements to null */
+    margin: 0;
+    padding: 0;
+}
+
+body {
+    font-size: 14px;
+    line-height: 1.5;
+    color: #222;
+    text-align: center;
+    background: #e8eaed;
+    font-family: $font, sans-serif !important;
+}
+
+div {
+    text-align: left;
+}
+
+img {
+    border: none;
+}
+
+a {
+    text-decoration: none;
+    color: #2b6883;
+    
+    &:hover {
+        text-decoration: underline;
+    }
+}
+
+blockquote {
+    font-size: inherit;
+}
+
+h1, h2, h3, h4, h5, h6 {
+    line-height: 1.1;
+    font-family: $font-condensed, sans-serif;
+    font-weight: 400;
+}
+
+h1 {
+    font-size: 36px;
+    color: #317796;
+    padding-bottom: 8px;
+}
+
+h2 {
+    font-size: 22px;
+    color: #9a9898;
+    padding-bottom: 14px;
+}
+
+h3 {
+    font-size: 22px;
+    color: #222;
+    padding-bottom: 14px;
+}
+
+h4 {
+    font-size: 18px;
+    color: #222;
+}
+
+strong, b, th {
+    font-family: $font-medium;
+    font-family: $font-medium, sans-serif;
+    font-weight: normal;
+}
+
+.heading {
+    a {
+        color: #444;
+
+        &:hover {
+            color: #2b6883;
+            text-decoration: none;
+        }
+    }
+
+}
+
+/** Header **/
+#header {
+    float: left;
+    width: 100%;
+    height: 40px;
+    background: #002c42;
+    color: #999;
+
+    a.headerlink {
+        text-decoration: none;
+        color: #999;
+    }
+
+    a.headerlink:hover, a.headerlink:active, a.headerlink.active {
+        color: #e8eaed;
+    }
+
+    .title {
+        float: left;
+        margin: 2px 0 0 -5px;
+        color: #fff;
+        font-family: $font-condensed, sans-serif;
+        font-weight: 400;
+    }
+
+    .user {
+        float: right;
+        margin: 5px 0 0 0;
+        height: 100%;
+
+        .inline {
+           display: inline;
+        }
+    }
+}
+
+#nav {
+    float: left;
+    width: 100%;
+    height: auto;
+    background: #317796;
+    color: #fff;
+    overflow-y: hidden;
+
+    .navbar {
+        width: 100%;
+        border: none;
+        margin: 0;
+    }
+
+    .navbar-toggle {
+        padding: 5px 0;
+        z-index: 2;
+
+        i {
+            font-size: 28px;
+            color: #fff;
+            opacity: 0.5;
+        }
+
+        &:hover i {
+            opacity: 1;
+        }
+    }
+
+    .navbar-collapse {
+        padding: 0;
+    }
+
+    .navbar ul {
+        list-style: none;
+        margin: 0;
+
+        li {
+            float: left;
+            text-align: center;
+
+            a {
+                display: block;
+                color: #fff;
+                padding: 22px 15px;
+                text-decoration: none;
+
+                &:hover {
+                    background: url('/static/img/nav_dark-bg.png');
+                    text-decoration: none;
+                }
+            }
+
+            i {
+                font-size: 28px;
+                display: block;
+                margin-bottom: 6px;
+                margin-right: 0;
+                opacity: 0.5;
+            }
+        }
+
+        li.active {
+            background: url('/static/img/nav_dark-bg.png');
+
+            a {
+                background: url('/static/img/nav_active.png') no-repeat bottom;
+            }
+
+            i {
+                opacity: 1;
+            }
+        }
+    }
+
+    .searchbar {
+        float: right;
+        margin-top: 33px;
+        margin-bottom: 32px;
+        display: inline-table;
+
+        input {
+            width: 150px;
+        }
+
+        .btn {
+            background: #e8eaed;
+            color: #555;
+        }
+    }
+}
+
+#header .containerOS, #nav .containerOS, #content .containerOS {
+    max-width: 1300px;
+    height: 100%;
+    margin: 0 auto 0 auto;
+    padding: 0 30px;
+}
+
+
+/** Content **/
+#content {
+    float: left;
+    width: 100%;
+    margin-top: 20px;
+
+    .containerOS {
+        height: 30px;
+    }
+}
+
+
+/** Main column **/
+#content .col1 {
+    float: left;
+
+    &.sidebar-max { /*with maximized sidebar*/
+        width: calc(100% - 325px);
+    }
+
+    &.sidebar-min { /*with minimized sidebar*/
+        width: calc(100% - 70px);
+    }
+
+    &.sidebar-none { /*without sidebar*/
+        width: 100%;
+    }
+
+    .header {
+        background: #fff;
+        border: 1px solid #d3d3d3;
+
+        .submenu {
+            float: right;
+        }
+    }
+
+    .title {
+        padding: 0 20px;
+        width: auto;
+    }
+
+
+    .meta {
+        h3 {
+            font-family: $font-condensed-light;
+        }
+
+        .heading, h3 {
+            font-size: 22px;
+            line-height: 24px;
+            font-weight: 300;
+            color: #444;
+            padding-bottom: 0;
+            margin-top: 20px;
+            margin-bottom: 5px;
+        }
+
+        .title {
+            width: 100%;
+            cursor: pointer;
+            height: 30px;
+            color: #fff;
+            background: #317796;
+            padding: 5px 20px 0 20px;
+
+            &:hover {
+                color: #d3d3d3;
+            }
+
+            .name {
+                float: left;
+                font-size: 14px;
+            }
+
+            .icon {
+                float: right;
+            }
+        }
+
+        .detail {
+            padding: 0 20px 10px 20px;
+            width: 100%;
+            min-height: 30px;
+            background: #d3d3d3;
+            color: #444;
+        }
+
+        .heading .drop-down-name {
+            font-family: $font-condensed-light;
+        }
+    }
+
+    .details {
+        padding: 20px;
+        width: auto;
+        margin-top: 20px;
+        background: #fff;
+        border: 1px solid #d3d3d3;
+
+        img {
+            max-width: 100%;
+            height: auto;
+        }
+    }
+
+    ol, ul {
+        margin-left: 15px;
+    }
+}
+
+/** Projector sidebar column **/
+#sidebar-xs {
+    display: none !important;
+}
+
+#content .col2 {
+    float: right;
+    position: relative;
+    display: inline-flex;
+    z-index: 3;
+    margin-bottom: 20px;
+
+    &.sidebar-max {
+        width: 325px;
+    }
+
+    &.sidebar-min {
+        width: 70px;
+    }
+
+    &.sidebar-none {
+        width: 0px;
+    }
+
+    h4 {
+        font-size: 20px;
+        line-height: 24px;
+        color: #444;
+        font-family: $font-condensed-light;
+        font-weight: 300;
+    }
+
+    a:hover h4 {
+        text-decoration: none;
+    }
+
+    .projector_min {
+        background: url('/static/img/nav_projector_sidebar_min.png') no-repeat left 17px;
+        width: 50px;
+        margin-left: 20px;
+        padding-left: 8px;
+        float: right;
+
+        .icon {
+            float: left;
+            color: #fff;
+            font-size: 24px;
+            width: 50px;
+            text-align: center;
+            padding: 7px 0;
+            background: #317796;
+
+            a {
+                color: #fff;
+                display: block;
+
+                i {
+                    opacity: 0.5;
+                }
+
+                &:hover i {
+                    opacity: 1;
+                }
+            }
+        }
+    }
+
+    .projector_full {
+        margin-left: 30px;
+        width: auto;
+
+        .title {
+            width: 100%;
+            color: #fff;
+            height: 50px;
+            background: #317796;
+            cursor: pointer;
+
+            &:hover {
+                color: #d3d3d3;
+            }
+
+            a, a:hover {
+                color: #fff;
+                text-decoration: none;
+                display: block;
+            }
+
+            i {
+                margin-right: 10px;
+            }
+
+            .name {
+                float: left;
+                padding: 8px 0 0 20px;
+                font-size: 22px;
+                font-weight: 400;
+            }
+
+            .icon {
+                float: right;
+                width: 50px;
+                text-align: center;
+                padding-top: 7px;
+                font-size: 24px;
+            }
+
+        }
+
+        .details {
+            clear: both;
+            width: 100%;
+            background: #d3d3d3;
+
+            .section {
+                padding: 1px 20px;
+                width: auto;
+                border-bottom: 1px solid #c2c2c2;
+
+                a:hover {
+                    text-decoration: none;
+                }
+
+                div.in.collapse {
+                    padding-bottom: 15px;
+                }
+            }
+        }
+
+        .toggle-icon {
+            font-size: 20px;
+            float: right;
+            margin-top: 10px;
+        }
+    }
+
+    /* countdown and message controls */
+    .countdown {
+        &.panel {
+            margin-bottom: 7px;
+        }
+
+        .panel-heading {
+            padding: 3px 15px;
+        }
+
+        .panel-body {
+            padding: 5px 15px;
+        }
+
+        .icons {
+            padding-right: 10px;
+        }
+    }
+
+    .message {
+        &.panel {
+            margin-bottom: 7px;
+        }
+
+        .panel-heading {
+            padding: 3px 15px;
+        }
+
+        .panel-body {
+            padding: 10px 15px;
+        }
+
+        projector-button {
+            float: left;
+            width: auto;
+            margin: 5px 10px 5px 0px;
+        }
+
+        .innermessage {
+            float: left;
+            width: 180px;
+            max-width: 170px;
+            overflow: hidden;
+        }
+
+        .panel-input {
+            width: 228px;
+            float: left;
+            margin-top: 10px;
+        }
+
+        .editicon {
+            padding-right: 10px;
+        }
+    }
+
+    .countdown_timer {
+        font-size: 2.2em;
+        font-weight: bold;
+
+        &.warning {
+            color: #ed940d;
+        }
+
+        &.negative {
+            color: #CC0000;
+        }
+    }
+
+    .notNull {
+        color: red;
+        font-weight: bold;
+    }
+}
+
+/* iframe for live view */
+.iframe {
+    -moz-transform-origin: 0 0;
+    -webkit-transform-origin: 0 0;
+    -o-transform-origin: 0 0;
+    transform-origin: 0 0 0;
+}
+
+.iframewrapper {
+    width: 256px;
+    position: relative;
+    overflow: hidden;
+    border: 1px solid #D5D5D5;
+    margin-bottom: 10px;
+}
+
+.iframeoverlay {
+    width: 256px;
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    display: block;
+    z-index: 1;
+}
+
+/** Footer **/
+#footer {
+    float: left;
+    height: 50px;
+    padding-top: 15px;
+    font-size: 90%;
+}
+
+.details h1 {
+    font-size: 20px;
+    color: #000;
+}
+.details h2 {
+    font-size: 18px;
+    color: #000;
+}
+.details h3 {
+    font-size: 16px;
+    color: #000;
+}
--- a/openslides/core/static/css/projector.css
+++ b/openslides/core/static/css/projector.css
@ -1,636 +0,0 @@
-/*
- * Font definitions for OpenSlides projector
- */
-
-@font-face {
-  font-family: 'Roboto Condensed';
-  src: url('../fonts/Roboto-Condensed-Regular.woff') format('woff');
-  font-weight: 100;
-  font-style: normal;
-}
-@font-face {
-    font-family: 'Roboto Condensed Light';
-    src: url('../fonts/Roboto-Condensed-Light.woff') format('woff');
-    font-weight: 100;
-    font-style: normal;
-}
-@font-face {
-  font-family: 'Roboto';
-  src: url('../fonts/Roboto-Regular.woff') format('woff');
-  font-weight: 400;
-  font-style: normal;
-}
-
-body {
-    font-family: "Roboto", sans-serif;
-}
-h1, h2, h3, h4, h5, h6 {
-    font-size: inherit;
-}
-h1, h2, h3, h4, h5, h6, .countdown, .message {
-    font-family: "Roboto Condensed", sans-serif;
-    font-weight: normal;
-}
-#header, #currentTime, #footer {
-    font-family: 'Roboto Condensed Light';
-}
-
-/*
- * Template styles for OpenSlides projector
- *
- */
-
-html, body {
-    height: 100%;
-}
-
-body {
-    font-size: 20px !important;
-    line-height: 24px !important;
-    overflow: hidden;
-    color: #222;
-}
-
-/* override booststrap's label class to fix linebreak and add spacing */
-.label {
-    display: inline-block;
-    padding: .4em .6em;
-    margin-right: .2em;
-    white-space: normal;
-}
-
-/*** ProjectorContainer ***/
-.pContainer {
-    background-color: #222;
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    top: 0;
-    left: 0;
-    display: table;
-}
-
-.pContainer > div {
-    display: table-cell;
-    vertical-align: middle;
-}
-
-.pContainer #iframe {
-    -moz-transform-origin: 0 0;
-    -webkit-transform-origin: 0 0;
-    -o-transform-origin: 0 0;
-    transform-origin: 0 0 0;
-}
-
-.pContainer #iframewrapper, .pContainer .error {
-    position: relative;
-    overflow: hidden;
-    margin-left: auto;
-    margin-right: auto;
-}
-
-.pContainer #iframeoverlay {
-    position: absolute;
-    top: 0px;
-    left: 0px;
-    display: block;
-    z-index: 1;
-}
-
-.pContainer .error > p {
-    color: #f00;
-    font-size: 150%;
-    text-align: center;
-}
-
-/*** HEADER ***/
-#header {
-    background-repeat: no-repeat;
-    background-size: 100% 100%;
-    box-shadow: 0 0 7px rgba(0,0,0,0.6);
-    height: 70px;
-    margin-bottom: 20px;
-}
-#logo {
-    position: relative;
-    left: 50px;
-    top: 10px;
-    height: 50px;
-    margin-right: 25px;
-    float: left;
-}
-#eventdata {
-    position: relative;
-    left: 50px;
-    top: 12px;
-    height: 50px;
-    overflow: hidden;
-}
-#eventdata .title {
-    font-size: 26px;
-    font-weight: bold;
- }
-#eventdata .title.titleonly {
-    position: relative;
-    top: 12px;
-}
-#eventdata .description {
-    font-size: 18px;
-    opacity: 0.8;
-}
-#currentTime {
-    border: 0 solid #000000;
-    font-size: 24px;
-    position: absolute;
-    text-align: right;
-    top: 23px;
-    right: 50px;
-    padding-left: 30px;
-}
-#footer {
-    position: fixed;
-    bottom: 0;
-    height: 35px;
-    width: 100%;
-    font-size: 16px;
-    padding-left: 50px;
-    padding-right: 50px;
-    padding-top: 5px;
-    overflow: hidden;
-    text-align: right;
-}
-#footer span {
-    opacity: 0.8;
-}
-
-/*** CONTENT with base style elements ***/
-.content {
-    position: absolute;
-    left: 50px;
-    right: 50px;
-    z-index: -1;
-    line-height: 1.5em;
-}
-.content img {
-    max-width: 65%;
-    height: auto;
-}
-.scrollcontent {
-    transition-property: margin;
-    transition-duration: 1s;
-}
-.zoomcontent {
-    transition-property: font-size;
-    transition-duration: 1s;
-}
-.fullscreen {
-    position: fixed;
-    top: 0 !important;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    z-index: 100;
-    background-color: black;
-}
-.fullscreen canvas {
-    margin: auto;
-    display: block !important;
-}
-
-h1 {
-    font-size: 2.25em;
-    line-height: 1.1em;
-}
-h2 {
-    font-size: 28px;
-    margin-top: 15px;
-    display: block;
-    color: #9a9898;
-}
-h3 {
-    color: #222;
-    margin-bottom: 10px
-}
-#title {
-    border-bottom: 5px solid #d3d3d3;
-    margin-bottom: 40px;
-}
-#title h1 {
-    margin-bottom: 0;
-    padding-bottom: 0;
-}
-#title h2 {
-    margin-top: 10px;
-    margin-bottom: 5px;
-}
-#motioncontent {
-    width: calc(100% - 230px);
-}
-#sidebox {
-    width: 260px;
-    right: 0;
-    margin-top: 75px;
-    background: #d3d3d3;
-    border-radius: 7px 0 0 7px;
-    padding: 3px 7px 10px 19px;
-    position: fixed;
-    z-index: 5;
-}
-#sidebox h3 {
-    margin-top: 10px;
-    margin-bottom: 0px;
-}
-#speakerbox {
-    width: 40%;
-    float: right;
-    margin: 20px;
-    right: 0;
-    bottom: 0;
-    position: absolute;
-    background: #d3d3d3;
-    border-radius: 7px;
-    border: 1px solid #999;
-    padding: 0px 7px 10px 19px;
-    z-index: 99;
-    box-shadow: 3px 3px 10px 1px rgba(0,0,0,0.5);
-    overflow: hidden;
-}
-ul, ol {
-    margin: 0 0 10px 2em;
-}
-li {
-    line-height: normal;
-}
-.result {
-    line-height: 30px;
-}
-.result hr {
-    border-top: 1px solid;
-    margin: 5px 0;
-    width: 10em;
-}
-.result.big {
-    font-size: 120%;
-    line-height: 40px;
-}
-.result .bold, .electionresults .bold {
-    font-weight: bold;
-}
-.electionresults table {
-    width: calc(100% - 230px);
-}
-.electionresults .progress {
-    margin-bottom: 0;
-}
-hr {
-    margin: 10px 0;
-}
-.nobr {
-    white-space: nowrap;
-}
-.white-space-pre-line {
-    white-space: pre-line;
-}
-
-
-/*** Overlay ***/
-.countdown {
-    min-width: 260px;
-    position: relative;
-    margin: 0 0 10px 10px;
-    top: 0px;
-    right: 0px;
-    padding: 26px 45px 7px 19px;
-    min-height: 72px;
-    font-size: 3.7em;
-    font-weight: bold;
-    text-align: right;
-    border-radius: 7px 7px 7px 7px;
-    z-index: 320;
-}
-.countdown .description {
-    font-weight: normal;
-    font-size: 18px;
-    margin-top: 20px;
-    padding-right: 6px;
-}
-.countdown.warning {
-    color: #ed940d;
-}
-.countdown.negative {
-    color: #CC0000;
-}
-
-.message_background {
-    background-color: #777777;
-    opacity: 0.8;
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    z-index: 300;
-}
-.message {
-    font-weight: normal;
-    position: fixed;
-    top: 35%;
-    left: 10%;
-    width: 80%;
-    text-align: center;
-    border-radius: 0.2em;
-    background: #FFFFFF;
-    font-size: 2.75em;
-    padding: 0.2em 0;
-    line-height: normal !important;
-    z-index: 350;
-}
-.identify {
-    background-color: #D9F8C4;
-    z-index: 400;
-}
-
-/*** PDF presentation ***/
-.rotate0 {
-    transform: rotate(0deg);
-}
-.rotate90 {
-    transform: rotate(90deg);
-}
-.rotate180 {
-    transform: rotate(180deg);
-}
-.rotate270 {
-    transform: rotate(270deg);
-}
-
-/*** Table style ***/
-.table {
-    border-collapse:collapse;
-    border-color:#CCCCCC -moz-use-text-color #CCCCCC #CCCCCC;
-    border-style:solid none solid solid;
-    border-width:1px medium 1px 1px;
-    margin:0;
-    border-spacing:0px;
-}
-.table th {
-    border-right:1px solid #CCCCCC;
-    color:#333333;
-    font-weight:normal;
-    padding:10px 10px 10px 10px;
-    text-align:left;
-    text-transform:uppercase;
-}
-.table tr.odd td {
-    background:none repeat scroll 0 0 #F1F1F1;
-}
-.table td {
-    background:none repeat scroll 0 0 #F7F7F7;
-    border-right:1px solid #CCCCCC;
-    line-height:120%;
-    padding: 10px 10px;
-    vertical-align:middle;
-}
-tr.total td {
-    border-top: 1px solid #333333;
-    background-color: #e3e3e3;
-}
-tr.elected td {
-    background-color: #BED4DE !important;
-}
-.transparentTable td {
-    background-color: transparent;
-    padding-right: 10px;
-}
-.pollresults table .icon {
-    color: #636363;
-    height: 45px;
-}
-
-/*** Agenda list ***/
-.agendalist {
-    line-height: 1.5em;
-}
-.agendalist p {
-    font-size: 140%;
-}
-.agendalist p.done {
-    color: #9a9898;
-}
-.agendalist .mainitem {
-    margin-top: 25px;
-}
-.agendalist .subitem {
-    font-size: 100%;
-    margin-bottom: 4px;
-}
-.spacer {
-    margin-top: 10px;
-}
-.spacer-left-lg {
-    margin-left: 20px;
-}
-
-.agendalist-table td {
-    vertical-align: top;
-    padding-left: 5px;
-}
-
-.agendalist-table .number {
-    padding: 0;
-    white-space: nowrap;
-}
-
-
-/*** List of speakers ***/
-.slimlabel.label {
-    padding: 0px 10px;
-}
-
-.lastSpeakers {
-    color: #9a9898;
-    margin-left: 27px;
-}
-.currentSpeaker {
-    font-weight: bold;
-    margin-left: 0px;
-}
-.currentSpeaker i {
-    padding-right: 5px;
-}
-.nextSpeakers {
-    margin-left: 13px;
-}
-.nextSpeakers li {
-    line-height: 150%;
-}
-
-
-/*** Line numbers ***/
-.motion-text .highlight {
-    background-color: #ff0;
-}
-.motion-text ins {
-    color: green;
-    text-decoration: underline;
-}
-.motion-text del {
-    color: red;
-    text-decoration: line-through;
-}
-.motion-text.line-numbers-outside {
-    padding-left: 0;
-    margin-left: 25px;
-    position: relative;
-}
-
-.motion-text.line-numbers-outside .os-line-number {
-    display: inline-block;
-    font-size: 0;
-    line-height: 0;
-    width: 22px;
-    height: 22px;
-    position: absolute;
-    left: -25px;
-}
-.motion-text.line-numbers-outside .os-line-number:after {
-    content: attr(data-line-number);
-    position: absolute;
-    top: 17px;
-    vertical-align: top;
-    color: gray;
-    font-size: 14px;
-    font-weight: normal;
-}
-
-.motion-text.line-numbers-inline .os-line-break {
-    display: none;
-}
-.motion-text.line-numbers-inline .os-line-number {
-    display: inline-block;
-}
-.motion-text.line-numbers-inline .os-line-number:after {
-    display: inline-block;
-    content: attr(data-line-number);
-    vertical-align: top;
-    font-size: 0.75em;
-    font-weight: normal;
-    color: gray;
-    margin-top: -5px;
-    margin-left: 0;
-}
-
-.motion-text.line-numbers-none .os-line-break {
-    display: none;
-}
-.motion-text.line-numbers-none .os-line-number {
-    visibility: hidden;
-}
-
-/** Diff view */
-p.os-split-after {
-    margin-bottom: 0;
-}
-p.os-split-before {
-    margin-top: 0;
-}
-ul.os-split-after, ol.os-split-after {
-    margin-bottom: 0;
-}
-
-.motion-text-holder li.os-split-before {
-    list-style-type: none;
-}
-
-.diff-box {
-    padding-top: 0;
-}
-.motion-text-with-diffs li.os-split-before {
-    list-style-type: none;
-}
-.motion-text-with-diffs .original-text ul:last-child, .motion-text-with-diffs .original-text ol:last-child {
-    padding-bottom: 16px;
-}
-.motion-text-with-diffs .original-text ul.os-split-after:last-child, .motion-text-with-diffs .original-text ol.os-split-after:last-child {
-    padding-bottom: 0;
-}
-ol.os-split-after, ul.os-split-after {
-    margin-bottom: 0;
-    padding-bottom: 0;
-}
-p.os-split-after {
-    margin-bottom: 0;
-}
-.diff-box:hover {
-    background-color: #f0f0f0;
-}
-.motion-text-diff .delete {
-    color: red;
-    text-decoration: line-through;
-}
-.motion-text-diff .insert {
-    color: green;
-    text-decoration: underline;
-}
-.motion-text-diff p.os-split-before {
-    padding-top: 0;
-    margin-top: 0;
-}
-.motion-text-diff p.os-split-after {
-    margin-top: 0;
-    margin-bottom: 0;
-}
-.motion-text-diff.line-numbers-outside .insert .os-line-number {
-    display: none;
-}
-.motion-text-diff.line-numbers-inline .insert .os-line-number {
-    display: none;
-}
-
-/*** Motion blocks ***/
-.motion-block {
-    display: flex;
-    flex-wrap: wrap;
-}
-.motion-block > div {
-    width: 50%;
-    font-size: 1.1em;
-    margin-bottom: 15px;
-    padding-right: 15px;
-    line-height: 1em;
-}
-.motion-block .label {
-    text-align: left;
-    padding: 5px 10px;
-    margin-top: 3px;
-}
-
-/*** Video and Image projection ***/
-img.projector-image {
-    width: 100%;
-}
-
-div.projector-image {
-    width: 100%;
-    height: 100%;
-    background-size: contain;
-    background-repeat: no-repeat;
-    background-position: 50% 50%;
-    background-color: #fff;
-}
-
-.video-container {
-    width: 100%;
-    height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.video-container > * {
-    flex: 1 1 auto;
-    max-width: 100%;
-    max-height: 100%;
-    width: 100%;
-    height: 100%;
-}
--- a/openslides/core/static/css/projector.scss
+++ b/openslides/core/static/css/projector.scss
@ -0,0 +1,14 @@
+/* Main projector CSS file. Just import all files needed for the site here. */
+
+/* General */
+@import "variables";
+@import "fonts";
+@import "helper";
+@import "ui-override";
+
+/* Apps */
+@import "core/projector";
+@import "../../../agenda/static/css/agenda/projector";
+@import "../../../assignments/static/css/assignments/projector";
+@import "../../../motions/static/css/motions/projector";
+@import "../../../mediafiles/static/css/mediafiles/projector";
--- a/openslides/core/static/css/site.scss
+++ b/openslides/core/static/css/site.scss
@ -0,0 +1,18 @@
+/* Main site CSS file. Just import all files needed for the site here. */
+
+/* General */
+@import "variables"; // TODO: Add colors, ...
+@import "fonts";
+@import "helper";
+@import "mediaqueries";
+@import "ui-override";
+@import "startup-spinner";
+
+/* Apps */
+@import "core/site";
+@import "../../../agenda/static/css/agenda/site";
+@import "../../../assignments/static/css/assignments/site";
+@import "../../../motions/static/css/motions/site";
+@import "../../../users/static/css/users/site";
+@import "../../../mediafiles/static/css/mediafiles/site";
+
--- a/openslides/core/static/templates/config-form-field.html
+++ b/openslides/core/static/templates/config-form-field.html
@ -19,7 +19,7 @@
    </div>

    <!-- comments -->
-    <div class="input-comments" ng-if="type === 'comments'">
+    <div class="comments" ng-if="type === 'comments'">
      <div ng-repeat="(id, field) in ($parent.value
        | excludeSpecialCommentsFields
        | excludeDeletedAndForbiddenCommentsFields)"
@ -99,7 +99,7 @@
    </select>

    <!-- custom trnaslations -->
-    <div class="config-translations" ng-if="type === 'translations'">
+    <div class="custom-translations" ng-if="type === 'translations'">
      <div ng-repeat="entry in $parent.value" class="input-group">
        <div class="inputs">
          <input ng-model="entry.original"
--- a/openslides/core/static/templates/config.html
+++ b/openslides/core/static/templates/config.html
@ -4,7 +4,7 @@
  </div>
 </div>

-<div class="details">
+<div id="config" class="details">
  <div os-perms="core.can_manage_config" class="panel-group" id="accordion"
      role="tablist" aria-multiselectable="true">
    <!-- generate config groups -->
--- a/openslides/core/static/templates/core/manage-projectors.html
+++ b/openslides/core/static/templates/core/manage-projectors.html
@ -37,7 +37,7 @@
 </div>

 <div class="details" os-perms="core.can_manage_projector">
-  <div class="projectorContainer">
+    <div id="manage-projectors">

    <div ng-repeat="projector in projectors | orderBy: 'id'">
      <div>
--- a/openslides/core/static/templates/csv-import.html
+++ b/openslides/core/static/templates/csv-import.html
@ -1,4 +1,4 @@
-<form class="import">
+<form id="csv-import">
  <label for="fileInput" translate>CSV file</label>
  <div id="fileInput" class="file-select">
    <div class="form-control">
--- a/openslides/core/static/templates/index.html
+++ b/openslides/core/static/templates/index.html
@ -8,7 +8,7 @@
 <meta name="description" content="">
 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
 <link rel="stylesheet" href="static/css/openslides-libs.css">
-<link rel="stylesheet" href="static/css/app.css">
+<link rel="stylesheet" href="static/css/openslides-site.css">
 <link rel="icon" href="/static/img/favicon.png">

 <script src="static/js/openslides-libs.js"></script>
--- a/openslides/core/static/templates/projector-container.html
+++ b/openslides/core/static/templates/projector-container.html
@ -7,7 +7,7 @@
 <title ng-if="projectorId!==undefined">OpenSlides &ndash; {{ 'Projector' | translate }} {{ projectorId }}</title>
 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
 <link rel="stylesheet" href="static/css/openslides-libs.css">
-<link rel="stylesheet" href="static/css/projector.css">
+<link rel="stylesheet" href="static/css/openslides-projector.css">
 <link rel="icon" href="/static/img/favicon.png">
 <script src="static/js/openslides-libs.js"></script>
 <script src="static/js/openslides.js"></script>
--- a/openslides/core/static/templates/projector.html
+++ b/openslides/core/static/templates/projector.html
@ -5,7 +5,7 @@
 <base href="/">
 <title>OpenSlides &ndash; Projector</title>
 <link rel="stylesheet" href="static/css/openslides-libs.css">
-<link rel="stylesheet" href="static/css/projector.css">
+<link rel="stylesheet" href="static/css/openslides-projector.css">
 <link rel="icon" href="/static/img/favicon.png">
 <script src="static/js/openslides-libs.js"></script>
 <script src="static/js/openslides.js"></script>
--- a/openslides/mediafiles/static/css/mediafiles/_image-browser.scss
+++ b/openslides/mediafiles/static/css/mediafiles/_image-browser.scss
@ -0,0 +1,67 @@
+/** image plugin for CKEditor **/
+#imageBrowserContainer {
+    .imageTable {
+        table-layout: fixed;
+        width: 100%;
+    }
+
+    #imagePreviewSection {
+        position: absolute;
+        margin: 0px 20px 20px 20px;
+
+        input {
+            width: 65px;
+        }
+
+        .hidden {
+            display: none;
+        }
+
+        i {
+            font-size: 130%;
+            cursor: pointer;
+        }
+
+        > div {
+            margin-bottom: 10px;
+        }
+    }
+
+    #imagePreview {
+        max-width: 400px;
+        max-height: 300px;
+        overflow: auto;
+        padding: 2px;
+        border: 3px solid #317796;
+
+        img[src=""] {
+            display: none;
+        }
+    }
+
+    #imageBrowser {
+        max-height: 500px;
+        overflow: auto;
+
+        .image {
+            position: relative;
+            float: left;
+            width: 75px;
+            height: 75px;
+            margin: 5px;
+            background-size: 125%;
+            background-repeat: no-repeat;
+            background-position: center center;
+            border: 2px solid #bed4de;
+            cursor: pointer;
+
+            &:hover {
+                border-color: #317796;
+            }
+
+            &.selected {
+                border-color: #317796;
+            }
+        }
+    }
+}
--- a/openslides/mediafiles/static/css/mediafiles/_projector.scss
+++ b/openslides/mediafiles/static/css/mediafiles/_projector.scss
@ -0,0 +1,43 @@
+/* PDF presentation */
+.rotate0 {
+    transform: rotate(0deg);
+}
+.rotate90 {
+    transform: rotate(90deg);
+}
+.rotate180 {
+    transform: rotate(180deg);
+}
+.rotate270 {
+    transform: rotate(270deg);
+}
+
+/* Video and Image projection */
+img.projector-image {
+    width: 100%;
+}
+
+div.projector-image {
+    width: 100%;
+    height: 100%;
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: 50% 50%;
+    background-color: #fff;
+}
+
+.video-container {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    & > * {
+        flex: 1 1 auto;
+        max-width: 100%;
+        max-height: 100%;
+        width: 100%;
+        height: 100%;
+    }
+}
--- a/openslides/mediafiles/static/css/mediafiles/_site.scss
+++ b/openslides/mediafiles/static/css/mediafiles/_site.scss
@ -0,0 +1,11 @@
+@import "image-browser";
+
+#mediafile-table {
+    .icon-column {
+        width: 10%;
+    }
+    .title-column {
+        padding: 0px 10px;
+        width: 90%;
+    }
+}
--- a/openslides/mediafiles/static/js/mediafiles/image-plugin.js
+++ b/openslides/mediafiles/static/js/mediafiles/image-plugin.js
@ -81,7 +81,7 @@ angular.module('OpenSlidesApp.mediafiles.image-plugin', [
                        });
                        // Set the toolbar icon to the default image icon.
                        CKEDITOR.on('instanceReady', function () {
-                            var toolbarIcon = $('span.cke_button_icon.cke_button__bildbrowser_icon');
+                            var toolbarIcon = $('span.cke_button_icon.cke_button__image.browser_icon');
                            toolbarIcon.removeClass('cke_button__image browser_icon');
                            toolbarIcon.addClass('cke_button__image_icon');
                        });
--- a/openslides/motions/static/css/motions/_change-recommendation-overview.scss
+++ b/openslides/motions/static/css/motions/_change-recommendation-overview.scss
@ -0,0 +1,49 @@
+.change-recommendation-overview {
+    background-color: #eee;
+    border: solid 1px #ddd;
+    border-radius: 3px;
+    margin-bottom: 5px;
+    margin-top: -15px;
+    padding-top: 5px;
+
+    h3 {
+        margin-top: 10px;
+    }
+
+    ul {
+        list-style: none;
+        display: table;
+    }
+
+    li {
+        display: table-row;
+        cursor: pointer;
+
+        &:hover {
+            text-decoration: underline;
+        }
+
+        & > * {
+            display: table-cell;
+            padding: 1px;
+        }
+    }
+
+    .status {
+        color: gray;
+        font-style: italic;
+
+        & > *:before {
+            content: '(';
+        }
+
+        & > *:after {
+            content: ')';
+        }
+    }
+
+    .no-changes {
+        font-style: italic;
+        color: grey;
+    }
+}
--- a/openslides/motions/static/css/motions/_diff.scss
+++ b/openslides/motions/static/css/motions/_diff.scss
@ -0,0 +1,54 @@
+/* Diff view */
+p {
+    &.os-split-after {
+        margin-bottom: 0;
+    }
+
+    &.os-split-before {
+        margin-top: 0;
+    }
+}
+
+ul.os-split-after, ol.os-split-after {
+    margin-bottom: 0;
+}
+
+.motion-text-holder li.os-split-before {
+    list-style-type: none;
+}
+
+.motion-text-with-diffs {
+    li.os-split-before {
+        list-style-type: none;
+    }
+
+    .original-text {
+        ul:last-child, ol:last-child {
+            padding-bottom: 16px;
+        }
+
+        ul.os-split-after:last-child, ol.os-split-after:last-child {
+            padding-bottom: 0;
+        }
+    }
+}
+
+.motion-text-diff {
+    .delete {
+        color: red;
+        text-decoration: line-through;
+    }
+
+    .insert {
+        color: green;
+        text-decoration: underline;
+    }
+
+    &.line-numbers-outside .insert .os-line-number {
+        display: none;
+    }
+
+    &.line-numbers-inline .insert .os-line-number {
+        display: none;
+    }
+}
--- a/openslides/motions/static/css/motions/_inline-editing.scss
+++ b/openslides/motions/static/css/motions/_inline-editing.scss
@ -0,0 +1,45 @@
+/* Toolbar to save motion in inline editing mode */
+.motion-save-toolbar {
+    position: fixed;
+    bottom: 0;
+    left: 50%;
+    height: 75px;
+    width: 300px;
+    background: #d3d3d3;
+    color: black;
+    text-align: center;
+    padding: 5px;
+    z-index: 1000001;
+    display: none;
+    border: 1px solid #d3d3d3;
+    margin-left: -150px;
+    border-bottom: none;
+    -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
+    -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
+    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
+
+    &.visible {
+        display: block;
+    }
+
+    .changed-hint {
+        display: block;
+        line-height: 16px;
+        text-align: center;
+        margin-bottom: 10px;
+        font-weight: bold;
+    }
+
+    label {
+        font-weight: normal;
+        line-height: 16px;
+        text-align: left;
+        padding-left: 16px;
+        margin-top: 5px;
+        margin-left: 15px;
+
+        input {
+            margin-left: -16px;
+        }
+    }
+}
--- a/openslides/motions/static/css/motions/_line-numbering.scss
+++ b/openslides/motions/static/css/motions/_line-numbering.scss
@ -0,0 +1,73 @@
+/* Line numbers */
+.motion-text {
+    ins {
+        color: green;
+        text-decoration: underline;
+    }
+
+    del {
+        color: red;
+        text-decoration: line-through;
+    }
+
+    .highlight {
+        background-color: #ff0;
+    }
+    &.line-numbers-outside {
+        padding-left: 40px;
+        position: relative;
+
+        .os-line-number {
+            display: inline-block;
+            font-size: 0;
+            line-height: 0;
+            width: 22px;
+            height: 22px;
+            position: absolute;
+            left: -20px;
+            padding-right: 55px;
+
+            &:after {
+                content: attr(data-line-number);
+                position: absolute;
+                top: 10px;
+                vertical-align: top;
+                color: gray;
+                font-size: 12px;
+                font-weight: normal;
+            }
+        }
+    }
+
+    &.line-numbers-inline {
+        .os-line-break {
+            display: none;
+        }
+
+        .os-line-number {
+            display: inline-block;
+
+            &:after {
+                display: inline-block;
+                content: attr(data-line-number);
+                vertical-align: top;
+                font-size: 10px;
+                font-weight: normal;
+                color: gray;
+                margin-top: -3px;
+                margin-left: 0;
+                margin-right: 0;
+            }
+        }
+    }
+
+    &.line-numbers-none {
+        .os-line-break {
+            display: none;
+        }
+
+        .os-line-number {
+            display: none;
+        }
+    }
+}
--- a/openslides/motions/static/css/motions/_personal-note.scss
+++ b/openslides/motions/static/css/motions/_personal-note.scss
@ -0,0 +1,25 @@
+/* Motion personal note */
+#personalNote.pinned {
+    position: fixed;
+    z-index: 1000;
+    bottom: 0;
+    margin: 0px 20px;
+    -webkit-box-shadow: 0px 0px 10px 1px rgba(0,0,0,0.5);
+    -moz-box-shadow: 0px 0px 10px 1px rgba(0,0,0,0.5);
+    box-shadow: 0px 0px 10px 1px rgba(0,0,0,0.5);
+
+    #personal-note-inline-editor {
+        overflow-y: scroll;
+        min-height: 100px;
+        max-height: 200px;
+    }
+}
+
+#personalNoteSpacer {
+    display: none;
+    height: 220px;
+
+    &.activeSpace {
+        display: block;
+    }
+}
--- a/openslides/motions/static/css/motions/_pollresults.scss
+++ b/openslides/motions/static/css/motions/_pollresults.scss
@ -0,0 +1,28 @@
+.pollresults {
+    table {
+        margin-bottom: 0;
+
+        td {
+            border: none !important;
+            padding: 5px 2px !important;
+            vertical-align: middle !important;
+        }
+
+        .icon {
+            color: #636363;
+        }
+
+        tr.total td {
+            border-top: 1px solid #444 !important;
+        }
+    }
+
+    .result-label {
+        margin-top: 5px;
+    }
+
+    .progress {
+        height: 12px;
+        margin-bottom: 0;
+    }
+}
--- a/openslides/motions/static/css/motions/_projector.scss
+++ b/openslides/motions/static/css/motions/_projector.scss
@ -0,0 +1,63 @@
+@import "line-numbering";
+@import "diff";
+@import "pollresults";
+@import "sidebox";
+
+#motioncontent {
+    width: calc(100% - 230px);
+}
+
+/* TODO: why do the projector has these extra diff related classes?
+ * -> Unify the site and projector in the _diff.scss and _line-numbers.scss*/
+ol.os-split-after, ul.os-split-after {
+    margin-bottom: 0;
+    padding-bottom: 0;
+}
+p.os-split-after {
+    margin-bottom: 0;
+}
+.motion-text-diff p.os-split-before {
+    padding-top: 0;
+    margin-top: 0;
+}
+.motion-text-diff p.os-split-after {
+    margin-top: 0;
+    margin-bottom: 0;
+}
+.diff-box {
+    padding-top: 0;
+}
+.motion-text.line-numbers-outside {
+    padding-left: 0;
+    margin-left: 25px;
+    position: relative;
+}
+.motion-text.line-numbers-outside .os-line-number:after {
+    content: attr(data-line-number);
+    position: absolute;
+    top: 17px;
+    vertical-align: top;
+    color: gray;
+    font-size: 14px;
+    font-weight: normal;
+}
+
+/* Motion blocks */
+.motion-block {
+    display: flex;
+    flex-wrap: wrap;
+
+    & > div {
+        width: 50%;
+        font-size: 1.1em;
+        margin-bottom: 15px;
+        padding-right: 15px;
+        line-height: 1em;
+    }
+
+    .label {
+        text-align: left;
+        padding: 5px 10px;
+        margin-top: 3px;
+    }
+}
--- a/openslides/motions/static/css/motions/_sidebox.scss
+++ b/openslides/motions/static/css/motions/_sidebox.scss
@ -0,0 +1,15 @@
+#sidebox {
+    width: 260px;
+    right: 0;
+    margin-top: 75px;
+    background: #d3d3d3;
+    border-radius: 7px 0 0 7px;
+    padding: 3px 7px 10px 19px;
+    position: fixed;
+    z-index: 5;
+
+    h3 {
+        margin-top: 10px;
+        margin-bottom: 0px;
+    }
+}
--- a/openslides/motions/static/css/motions/_site.scss
+++ b/openslides/motions/static/css/motions/_site.scss
@ -0,0 +1,196 @@
+@import "diff";
+@import "change-recommendation-overview";
+@import "inline-editing";
+@import "line-numbering";
+@import "personal-note";
+@import "pollresults";
+
+/* Motion */
+.motion-toolbar, .speakers-toolbar {
+    background-color: #f5f5f5;
+    border-bottom: 1px solid #ddd;
+    padding: 12px 0 10px 0;
+    height: 54px;
+    margin: -20px -5px 50px -5px;
+}
+
+.motion-toolbar:first-child {
+    margin-bottom: 20px;
+}
+
+/* Styles for annotating the original motion text with change recommendations */
+.motion-text-holder {
+    position: relative;
+
+    .change-recommendation-list {
+        position: absolute;
+        top: 0;
+        left: -10px;
+        width: 4px;
+        list-style-type: none;
+        margin: 0;
+
+        & > li {
+            position: absolute;
+            width: 4px;
+            cursor: pointer;
+
+            & > li.insert {
+                background-color: #00aa00;
+            }
+
+            & > li.delete {
+                background-color: #aa0000;
+            }
+
+            & > li.replace {
+                background-color: #0333ff;
+            }
+
+            & > li.other {
+                background-color: #777777;
+            }
+        }
+
+        .tooltip {
+            display: none;
+        }
+    }
+}
+
+.import-preview p {
+    margin: 0;
+    padding: 0;
+}
+
+.motion-toolbar .toolbar-left {
+    margin-top: 0;
+    margin-bottom: 55px;
+    margin-left: 15px;
+
+    > * {
+        margin-right: 5px;
+        float: left;
+    }
+
+    .btn.disabled {
+        cursor: default;
+        opacity: 1;
+        background-color: #eee;
+    }
+}
+
+.inline-editing-activator {
+    margin-right: 13px;
+}
+
+/* Linenumbering specific site things */
+.os-line-number {
+    position: relative;
+    user-select: none;
+    -moz-user-select: none;
+    -khtml-user-select: none;
+    -webkit-user-select: none;
+    -o-user-select: none;
+}
+.os-line-number:after {
+    position: relative;
+    user-select: none;
+    -moz-user-select: none;
+    -khtml-user-select: none;
+    -webkit-user-select: none;
+    -o-user-select: none;
+}
+
+/* TODO: This rule should only apply to the site. Isn't this inconsistent?? */
+.motion-text.line-numbers-outside .os-line-number:after {
+    left: 20px;
+}
+
+.line-numbers-outside .os-line-number.selectable:hover:before, .line-numbers-outside .os-line-number.selected:before {
+    cursor: pointer;
+    content: "\f067";
+    display: inline-block;
+    position: absolute;
+    width: 14px;
+    height: 14px;
+    border-radius: 0.25em;
+    top: 4px;
+    left: 43px;
+    font-family: FontAwesome;
+    font-size: 12px;
+    color: white;
+    line-height: 16px;
+    text-align: center;
+    background-color: #337ab7;
+}
+
+.tt_change_recommendation_create_help {
+    display: none;
+    max-width: 150px;
+    left: -45px;
+    margin-top: -15px !important;
+    z-index: 10000;
+}
+
+/* special hack for firefox only (see issue#2967) */
+@-moz-document url-prefix() {
+    .tt_change_recommendation_create_help {
+        margin-top: -20px !important;
+    }
+}
+
+.tt_change_recommendation_create_help.opened {
+    display: inherit;
+    opacity: 0.8;
+}
+
+/* Diffbox */
+.diff-box {
+    background-color: #f9f9f9;
+    border: solid 1px #eee;
+    border-radius: 3px;
+    margin-bottom: 0;
+    padding-top: 0;
+    padding-right: 155px;
+
+    &:hover {
+        background-color: #f0f0f0;
+
+        .action-row {
+            opacity: 1;
+        }
+    }
+
+    .action-row {
+        font-size: 0.8em;
+        padding-top: 5px;
+        padding-bottom: 5px;
+        float: right;
+        width: 150px;
+        text-align: right;
+        margin-right: -150px;
+        opacity: 0.5;
+
+        .btn-delete {
+            margin-left: 5px;
+            color: red;
+        }
+
+        .btn-edit {
+            margin-left: 5px;
+        }
+    }
+    .status-row {
+        font-style: italic;
+        color: gray;
+
+        & > *:after {
+            content: ':';
+        }
+    }
+}
+
+.motion-text-with-diffs.line-numbers-inline .diff-box, .motion-text-with-diffs.line-numbers-none .diff-box {
+    margin-right: -220px;
+}
--- a/openslides/motions/static/templates/motions/motion-detail.html
+++ b/openslides/motions/static/templates/motions/motion-detail.html
@ -368,7 +368,7 @@
                    <td class="icon">
                      <i class="fa fa-thumbs-up fa-2x"></i>
                    <td ng-init="voteYes = poll.getVote(poll.yes, 'yes')">
-                      <span class="result_label"><translate>Yes</translate>:</span>
+                      <span class="result-label"><translate>Yes</translate>:</span>
                      <span class="result_value">
                        {{ voteYes.value }} {{ voteYes.percentStr }}
                      </span>
@ -380,7 +380,7 @@
                    <td class="icon">
                      <i class="fa fa-thumbs-down fa-2x"></i>
                    <td ng-init="voteNo = poll.getVote(poll.no, 'no')">
-                      <span class="result_label"><translate>No</translate>:</span>
+                      <span class="result-label"><translate>No</translate>:</span>
                      <span class="result_value" >
                        {{ voteNo.value }} {{ voteNo.percentStr }}
                      </span>
@ -392,7 +392,7 @@
                    <td class="icon">
                      <strong style="font-size: 26px">&empty;</strong>
                    <td ng-init="voteAbstain = poll.getVote(poll.abstain, 'abstain')">
-                      <span class="result_label"><translate>Abstain</translate>:</span>
+                      <span class="result-label"><translate>Abstain</translate>:</span>
                      <span class="result_value">
                        {{ voteAbstain.value }} {{ voteAbstain.percentStr }}
                      </span>
@ -404,7 +404,7 @@
                    <td class="icon">
                      <i class="fa fa-check fa-lg"></i>
                    <td ng-init="votesValid = poll.getVote(poll.votesvalid, 'votesvalid')">
-                      <span class="result_label"><translate>Valid votes</translate>:</span>
+                      <span class="result-label"><translate>Valid votes</translate>:</span>
                      <span class="result_value">
                        {{ votesValid.value }} {{ votesValid.percentStr }}
                      </span>
@ -413,7 +413,7 @@
                    <td class="icon">
                      <i class="fa fa-ban fa-lg"></i>
                    <td ng-init="votesInvalid = poll.getVote(poll.votesinvalid, 'votesinvalid')">
-                      <span class="result_label"><translate>Invalid votes</translate>:</span>
+                      <span class="result-label"><translate>Invalid votes</translate>:</span>
                      <span class="result_value">
                        {{ votesInvalid.value }} {{ votesInvalid.percentStr }}
                      </span>
@ -422,7 +422,7 @@
                    <td class="icon">
                      <strong style="font-size: 16px">&sum;</strong>
                    <td ng-init="votesCast = poll.getVote(poll.votescast, 'votescast')">
-                      <span class="result_label"><translate>Votes cast</translate>:</span>
+                      <span class="result-label"><translate>Votes cast</translate>:</span>
                      <span class="result_value">
                        {{ votesCast.value }} {{ votesCast.percentStr }}
                      </span>
--- a/openslides/users/static/css/users/_site.scss
+++ b/openslides/users/static/css/users/_site.scss
@ -0,0 +1,51 @@
+.user_details {
+    fieldset {
+        margin-bottom: 10px;
+    }
+    legend {
+        margin-bottom: 5px;
+    }
+    label {
+        margin: 10px 0 0 0;
+        display: block;
+        font-family: $font-medium;
+        font-family: $font-medium, sans-serif;
+        font-weight: normal;
+        &:after {
+            content: ":";
+        }
+    }
+}
+
+/* group list */
+#groups-table {
+    table-layout: fixed;
+    text-align: center;
+
+    thead tr th {
+        vertical-align: top;
+        text-align: center;
+        min-width: 40px;
+        overflow: hidden;
+    }
+
+    .perm-head {
+        width: 300px;
+    }
+
+    tbody tr:hover {
+        background-color: #f5f5f5 !important;
+    }
+
+    tbody tr:first-child {
+        background-color: #f9f9f9;
+    }
+
+    tbody tr td:first-child {
+        text-align: left;
+    }
+
+    .optional-show { /* hide optional-show column */
+        display: none;
+    }
+}
--- a/package.json
+++ b/package.json
@ -17,6 +17,8 @@
    "gulp-if": "^2.0.2",
    "gulp-inject-string": "^1.1.0",
    "gulp-jshint": "^2.0.4",
+    "gulp-rename": "^1.2.2",
+    "gulp-sass": "^3.1.0",
    "gulp-sourcemaps": "^2.6.0",
    "gulp-uglify": "^2.1.2",
    "jasmine-core": "^2.6.1",
--- a/yarn.lock
+++ b/yarn.lock
@ -49,6 +49,15 @@ ajv@^4.9.1:
    co "^4.6.0"
    json-stable-stringify "^1.0.1"

+ajv@^5.1.0:
+  version "5.5.1"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-5.5.1.tgz#b38bb8876d9e86bee994956a04e721e88b248eb2"
+  dependencies:
+    co "^4.6.0"
+    fast-deep-equal "^1.0.0"
+    fast-json-stable-stringify "^2.0.0"
+    json-schema-traverse "^0.3.0"
+
 align-text@^0.1.1, align-text@^0.1.3:
  version "0.1.4"
  resolved "https://registry.yarnpkg.com/align-text/-/align-text-0.1.4.tgz#0cd90a561093f35d0a99256c22b7069433fad117"
@ -185,6 +194,10 @@ async-each@^1.0.0:
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/async-each/-/async-each-1.0.1.tgz#19d386a1d9edc6e7c1c85d388aedbcc56d33602d"

+async-foreach@^0.1.3:
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/async-foreach/-/async-foreach-0.1.3.tgz#36121f845c0578172de419a97dbeb1d16ec34542"
+
 async@^1.2.1:
  version "1.5.2"
  resolved "https://registry.yarnpkg.com/async/-/async-1.5.2.tgz#ec6a61ae56480c0c3cb241c95618e20892f9672a"
@ -212,7 +225,11 @@ aws-sign2@~0.6.0:
  version "0.6.0"
  resolved "https://registry.yarnpkg.com/aws-sign2/-/aws-sign2-0.6.0.tgz#14342dd38dbcc94d0e5b87d763cd63612c0e794f"

-aws4@^1.2.1:
+aws-sign2@~0.7.0:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/aws-sign2/-/aws-sign2-0.7.0.tgz#b46e890934a9591f2d2f6f86d7e6a9f1b3fe76a8"
+
+aws4@^1.2.1, aws4@^1.6.0:
  version "1.6.0"
  resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.6.0.tgz#83ef5ca860b2b32e4a0deedee8c771b9db57471e"

@ -303,6 +320,18 @@ boom@2.x.x:
  dependencies:
    hoek "2.x.x"

+boom@4.x.x:
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/boom/-/boom-4.3.1.tgz#4f8a3005cb4a7e3889f749030fd25b96e01d2e31"
+  dependencies:
+    hoek "4.x.x"
+
+boom@5.x.x:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/boom/-/boom-5.2.0.tgz#5dd9da6ee3a5f302077436290cb717d3f4a54e02"
+  dependencies:
+    hoek "4.x.x"
+
 bower@^1.8.0:
  version "1.8.2"
  resolved "https://registry.yarnpkg.com/bower/-/bower-1.8.2.tgz#adf53529c8d4af02ef24fb8d5341c1419d33e2f7"
@ -379,6 +408,10 @@ caniuse-db@^1.0.30000529, caniuse-db@^1.0.30000634, caniuse-db@^1.0.30000639:
  version "1.0.30000730"
  resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30000730.tgz#c9e1919a9f586c85d79265e7a84261b8421f92bd"

+caseless@~0.11.0:
+  version "0.11.0"
+  resolved "https://registry.yarnpkg.com/caseless/-/caseless-0.11.0.tgz#715b96ea9841593cc33067923f5ec60ebda4f7d7"
+
 caseless@~0.12.0:
  version "0.12.0"
  resolved "https://registry.yarnpkg.com/caseless/-/caseless-0.12.0.tgz#1b681c21ff84033c826543090689420d187151dc"
@ -548,6 +581,10 @@ combined-stream@^1.0.5, combined-stream@~1.0.5:
  dependencies:
    delayed-stream "~1.0.0"

+commander@^2.9.0:
+  version "2.12.2"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-2.12.2.tgz#0f5946c427ed9ec0d91a46bb9def53e54650e555"
+
 component-bind@1.0.0:
  version "1.0.0"
  resolved "https://registry.yarnpkg.com/component-bind/-/component-bind-1.0.0.tgz#00c608ab7dcd93897c0009651b1d3a8e1e73bbd1"
@ -621,12 +658,25 @@ core-util-is@1.0.2, core-util-is@~1.0.0:
  version "1.0.2"
  resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"

+cross-spawn@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-3.0.1.tgz#1256037ecb9f0c5f79e3d6ef135e30770184b982"
+  dependencies:
+    lru-cache "^4.0.1"
+    which "^1.2.9"
+
 cryptiles@2.x.x:
  version "2.0.5"
  resolved "https://registry.yarnpkg.com/cryptiles/-/cryptiles-2.0.5.tgz#3bdfecdc608147c1c67202fa291e7dca59eaa3b8"
  dependencies:
    boom "2.x.x"

+cryptiles@3.x.x:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/cryptiles/-/cryptiles-3.1.2.tgz#a89fbb220f5ce25ec56e8c4aa8a4fd7b5b0d29fe"
+  dependencies:
+    boom "5.x.x"
+
 css-color-names@0.0.4:
  version "0.0.4"
  resolved "https://registry.yarnpkg.com/css-color-names/-/css-color-names-0.0.4.tgz#808adc2e79cf84738069b646cb20ec27beb629e0"
@ -1127,7 +1177,7 @@ extend@^2.0.1:
  version "2.0.1"
  resolved "https://registry.yarnpkg.com/extend/-/extend-2.0.1.tgz#1ee8010689e7395ff9448241c98652bc759a8260"

-extend@^3.0.0, extend@~3.0.0:
+extend@^3.0.0, extend@~3.0.0, extend@~3.0.1:
  version "3.0.1"
  resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.1.tgz#a755ea7bc1adfcc5a31ce7e762dbaadc5e636444"

@ -1157,6 +1207,14 @@ fancy-log@^1.1.0:
    chalk "^1.1.1"
    time-stamp "^1.0.0"

+fast-deep-equal@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-1.0.0.tgz#96256a3bc975595eb36d82e9929d060d893439ff"
+
+fast-json-stable-stringify@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.0.0.tgz#d5142c0caee6b1189f87d3a76111064f86c8bbf2"
+
 fd-slicer@~1.0.1:
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/fd-slicer/-/fd-slicer-1.0.1.tgz#8b5bcbd9ec327c5041bf9ab023fd6750f1177e65"
@ -1273,6 +1331,14 @@ form-data@~2.1.1:
    combined-stream "^1.0.5"
    mime-types "^2.1.12"

+form-data@~2.3.1:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/form-data/-/form-data-2.3.1.tgz#6fb94fbd71885306d73d15cc497fe4cc4ecd44bf"
+  dependencies:
+    asynckit "^0.4.0"
+    combined-stream "^1.0.5"
+    mime-types "^2.1.12"
+
 from@~0:
  version "0.1.7"
  resolved "https://registry.yarnpkg.com/from/-/from-0.1.7.tgz#83c60afc58b9c56997007ed1a768b3ab303a44fe"
@ -1346,6 +1412,22 @@ gaze@^0.5.1:
  dependencies:
    globule "~0.1.0"

+gaze@^1.0.0:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/gaze/-/gaze-1.1.2.tgz#847224677adb8870d679257ed3388fdb61e40105"
+  dependencies:
+    globule "^1.0.0"
+
+generate-function@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/generate-function/-/generate-function-2.0.0.tgz#6858fe7c0969b7d4e9093337647ac79f60dfbe74"
+
+generate-object-property@^1.1.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/generate-object-property/-/generate-object-property-1.2.0.tgz#9c0e1c40308ce804f4783618b937fa88f99d50d0"
+  dependencies:
+    is-property "^1.0.0"
+
 get-caller-file@^1.0.1:
  version "1.0.2"
  resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-1.0.2.tgz#f702e63127e7e231c160a80c1554acb70d5047e5"
@ -1435,7 +1517,17 @@ glob@^5.0.3:
    once "^1.3.0"
    path-is-absolute "^1.0.0"

-glob@^7.0.5, glob@^7.1.1, glob@~7.1.2:
+glob@^6.0.4:
+  version "6.0.4"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-6.0.4.tgz#0f08860f6a155127b2fadd4f9ce24b1aab6e4d22"
+  dependencies:
+    inflight "^1.0.4"
+    inherits "2"
+    minimatch "2 || 3"
+    once "^1.3.0"
+    path-is-absolute "^1.0.0"
+
+glob@^7.0.0, glob@^7.0.3, glob@^7.0.5, glob@^7.1.1, glob@~7.1.1, glob@~7.1.2:
  version "7.1.2"
  resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.2.tgz#c19c9df9a028702d678612384a6552404c636d15"
  dependencies:
@ -1479,6 +1571,14 @@ globby@^2.0.0:
    glob "^5.0.3"
    object-assign "^3.0.0"

+globule@^1.0.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/globule/-/globule-1.2.0.tgz#1dc49c6822dd9e8a2fa00ba2a295006e8664bd09"
+  dependencies:
+    glob "~7.1.1"
+    lodash "~4.17.4"
+    minimatch "~3.0.2"
+
 globule@~0.1.0:
  version "0.1.0"
  resolved "https://registry.yarnpkg.com/globule/-/globule-0.1.0.tgz#d9c8edde1da79d125a151b79533b978676346ae5"
@ -1600,6 +1700,20 @@ gulp-match@^1.0.3:
  dependencies:
    minimatch "^3.0.3"

+gulp-rename@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/gulp-rename/-/gulp-rename-1.2.2.tgz#3ad4428763f05e2764dec1c67d868db275687817"
+
+gulp-sass@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/gulp-sass/-/gulp-sass-3.1.0.tgz#53dc4b68a1f5ddfe4424ab4c247655269a8b74b7"
+  dependencies:
+    gulp-util "^3.0"
+    lodash.clonedeep "^4.3.2"
+    node-sass "^4.2.0"
+    through2 "^2.0.0"
+    vinyl-sourcemaps-apply "^0.2.0"
+
 gulp-sourcemaps@1.6.0:
  version "1.6.0"
  resolved "https://registry.yarnpkg.com/gulp-sourcemaps/-/gulp-sourcemaps-1.6.0.tgz#b86ff349d801ceb56e1d9e7dc7bbcb4b7dee600c"
@ -1640,7 +1754,7 @@ gulp-uglify@^2.1.2:
    uglify-save-license "^0.4.1"
    vinyl-sourcemaps-apply "^0.2.0"

-gulp-util@*, gulp-util@^3.0.0, gulp-util@^3.0.1, gulp-util@^3.0.6, gulp-util@^3.0.7:
+gulp-util@*, gulp-util@^3.0, gulp-util@^3.0.0, gulp-util@^3.0.1, gulp-util@^3.0.6, gulp-util@^3.0.7:
  version "3.0.8"
  resolved "https://registry.yarnpkg.com/gulp-util/-/gulp-util-3.0.8.tgz#0054e1e744502e27c04c187c3ecc505dd54bbb4f"
  dependencies:
@ -1714,6 +1828,19 @@ har-schema@^1.0.5:
  version "1.0.5"
  resolved "https://registry.yarnpkg.com/har-schema/-/har-schema-1.0.5.tgz#d263135f43307c02c602afc8fe95970c0151369e"

+har-schema@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/har-schema/-/har-schema-2.0.0.tgz#a94c2224ebcac04782a0d9035521f24735b7ec92"
+
+har-validator@~2.0.6:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/har-validator/-/har-validator-2.0.6.tgz#cdcbc08188265ad119b6a5a7c8ab70eecfb5d27d"
+  dependencies:
+    chalk "^1.1.1"
+    commander "^2.9.0"
+    is-my-json-valid "^2.12.4"
+    pinkie-promise "^2.0.0"
+
 har-validator@~4.2.1:
  version "4.2.1"
  resolved "https://registry.yarnpkg.com/har-validator/-/har-validator-4.2.1.tgz#33481d0f1bbff600dd203d75812a6a5fba002e2a"
@ -1721,6 +1848,13 @@ har-validator@~4.2.1:
    ajv "^4.9.1"
    har-schema "^1.0.5"

+har-validator@~5.0.3:
+  version "5.0.3"
+  resolved "https://registry.yarnpkg.com/har-validator/-/har-validator-5.0.3.tgz#ba402c266194f15956ef15e0fcf242993f6a7dfd"
+  dependencies:
+    ajv "^5.1.0"
+    har-schema "^2.0.0"
+
 has-ansi@^2.0.0:
  version "2.0.0"
  resolved "https://registry.yarnpkg.com/has-ansi/-/has-ansi-2.0.0.tgz#34f5049ce1ecdf2b0649af3ef24e45ed35416d91"
@ -1773,10 +1907,23 @@ hawk@~3.1.3:
    hoek "2.x.x"
    sntp "1.x.x"

+hawk@~6.0.2:
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/hawk/-/hawk-6.0.2.tgz#af4d914eb065f9b5ce4d9d11c1cb2126eecc3038"
+  dependencies:
+    boom "4.x.x"
+    cryptiles "3.x.x"
+    hoek "4.x.x"
+    sntp "2.x.x"
+
 hoek@2.x.x:
  version "2.16.3"
  resolved "https://registry.yarnpkg.com/hoek/-/hoek-2.16.3.tgz#20bb7403d3cea398e91dc4710a8ff1b8274a25ed"

+hoek@4.x.x:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/hoek/-/hoek-4.2.0.tgz#72d9d0754f7fe25ca2d01ad8f8f9a9449a89526d"
+
 homedir-polyfill@^1.0.0, homedir-polyfill@^1.0.1:
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/homedir-polyfill/-/homedir-polyfill-1.0.1.tgz#4c2bbc8a758998feebf5ed68580f76d46768b4bc"
@ -1825,10 +1972,22 @@ http-signature@~1.1.0:
    jsprim "^1.2.2"
    sshpk "^1.7.0"

+http-signature@~1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/http-signature/-/http-signature-1.2.0.tgz#9aecd925114772f3d95b65a60abb8f7c18fbace1"
+  dependencies:
+    assert-plus "^1.0.0"
+    jsprim "^1.2.2"
+    sshpk "^1.7.0"
+
 iconv-lite@0.4.19:
  version "0.4.19"
  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.19.tgz#f7468f60135f5e5dad3399c0a81be9a1603a082b"

+in-publish@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/in-publish/-/in-publish-2.0.0.tgz#e20ff5e3a2afc2690320b6dc552682a9c7fadf51"
+
 indent-string@^2.1.0:
  version "2.1.0"
  resolved "https://registry.yarnpkg.com/indent-string/-/indent-string-2.1.0.tgz#8e2d48348742121b4a8218b7a137e9a52049dc80"
@ -1959,6 +2118,15 @@ is-glob@^3.1.0:
  dependencies:
    is-extglob "^2.1.0"

+is-my-json-valid@^2.12.4:
+  version "2.16.1"
+  resolved "https://registry.yarnpkg.com/is-my-json-valid/-/is-my-json-valid-2.16.1.tgz#5a846777e2c2620d1e69104e5d3a03b1f6088f11"
+  dependencies:
+    generate-function "^2.0.0"
+    generate-object-property "^1.1.0"
+    jsonpointer "^4.0.0"
+    xtend "^4.0.0"
+
 is-number@^0.1.1:
  version "0.1.1"
  resolved "https://registry.yarnpkg.com/is-number/-/is-number-0.1.1.tgz#69a7af116963d47206ec9bd9b48a14216f1e3806"
@ -1997,6 +2165,10 @@ is-promise@^2.1:
  version "2.1.0"
  resolved "https://registry.yarnpkg.com/is-promise/-/is-promise-2.1.0.tgz#79a2a9ece7f096e80f36d2b2f3bc16c1ff4bf3fa"

+is-property@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/is-property/-/is-property-1.0.2.tgz#57fe1c4e48474edd65b09911f26b1cd4095dda84"
+
 is-regex@^1.0.4:
  version "1.0.4"
  resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.0.4.tgz#5517489b547091b0930e095654ced25ee97e9491"
@ -2079,6 +2251,10 @@ jasmine-core@^2.6.1:
  version "2.8.0"
  resolved "https://registry.yarnpkg.com/jasmine-core/-/jasmine-core-2.8.0.tgz#bcc979ae1f9fd05701e45e52e65d3a5d63f1a24e"

+js-base64@^2.1.8:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.4.0.tgz#9e566fee624751a1d720c966cd6226d29d4025aa"
+
 js-base64@^2.1.9:
  version "2.3.2"
  resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.3.2.tgz#a79a923666372b580f8e27f51845c6f7e8fbfbaf"
@ -2111,6 +2287,10 @@ jshint@^2.9.4:
    shelljs "0.3.x"
    strip-json-comments "1.0.x"

+json-schema-traverse@^0.3.0:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/json-schema-traverse/-/json-schema-traverse-0.3.1.tgz#349a6d44c53a51de89b40805c5d5e59b417d3340"
+
 json-schema@0.2.3:
  version "0.2.3"
  resolved "https://registry.yarnpkg.com/json-schema/-/json-schema-0.2.3.tgz#b480c892e59a2f05954ce727bd3f2a4e882f9e13"
@ -2139,6 +2319,10 @@ jsonify@~0.0.0:
  version "0.0.0"
  resolved "https://registry.yarnpkg.com/jsonify/-/jsonify-0.0.0.tgz#2c74b6ee41d93ca51b7b5aaee8f503631d252a73"

+jsonpointer@^4.0.0:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/jsonpointer/-/jsonpointer-4.0.1.tgz#4fd92cb34e0e9db3c89c8622ecf51f9b978c6cb9"
+
 jsprim@^1.2.2:
  version "1.4.1"
  resolved "https://registry.yarnpkg.com/jsprim/-/jsprim-1.4.1.tgz#313e66bc1e5cc06e438bc1b7499c2e5c56acb6a2"
@ -2354,6 +2538,10 @@ lodash.merge@^4.6.0:
  version "4.6.0"
  resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.0.tgz#69884ba144ac33fe699737a6086deffadd0f89c5"

+lodash.mergewith@^4.6.0:
+  version "4.6.0"
+  resolved "https://registry.yarnpkg.com/lodash.mergewith/-/lodash.mergewith-4.6.0.tgz#150cf0a16791f5903b8891eab154609274bdea55"
+
 lodash.restparam@^3.0.0:
  version "3.6.1"
  resolved "https://registry.yarnpkg.com/lodash.restparam/-/lodash.restparam-3.6.1.tgz#936a4e309ef330a7645ed4145986c85ae5b20805"
@ -2395,7 +2583,7 @@ lodash@^3.2.0, lodash@^3.8.0:
  version "3.10.1"
  resolved "https://registry.yarnpkg.com/lodash/-/lodash-3.10.1.tgz#5bf45e8e49ba4189e17d482789dfd15bd140b7b6"

-lodash@^4.0.0, lodash@^4.0.1, lodash@^4.12.0, lodash@^4.13.1, lodash@^4.5.0:
+lodash@^4.0.0, lodash@^4.0.1, lodash@^4.12.0, lodash@^4.13.1, lodash@^4.5.0, lodash@~4.17.4:
  version "4.17.4"
  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.4.tgz#78203a4d1c328ae1d86dca6460e369b57f4055ae"

@ -2429,6 +2617,13 @@ lru-cache@2.2.x:
  version "2.2.4"
  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-2.2.4.tgz#6c658619becf14031d0d0b594b16042ce4dc063d"

+lru-cache@^4.0.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-4.1.1.tgz#622e32e82488b49279114a4f9ecf45e7cd6bba55"
+  dependencies:
+    pseudomap "^1.0.2"
+    yallist "^2.1.2"
+
 lru-queue@0.1:
  version "0.1.0"
  resolved "https://registry.yarnpkg.com/lru-queue/-/lru-queue-0.1.0.tgz#2738bd9f0d3cf4f84490c5736c48699ac632cda3"
@ -2494,7 +2689,7 @@ memoizee@^0.4.5:
    next-tick "1"
    timers-ext "^0.1.2"

-meow@^3.3.0:
+meow@^3.3.0, meow@^3.7.0:
  version "3.7.0"
  resolved "https://registry.yarnpkg.com/meow/-/meow-3.7.0.tgz#72cb668b425228290abbfa856892587308a801fb"
  dependencies:
@ -2537,7 +2732,7 @@ mime-db@~1.30.0:
  version "1.30.0"
  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.30.0.tgz#74c643da2dd9d6a45399963465b26d5ca7d71f01"

-mime-types@^2.1.12, mime-types@~2.1.11, mime-types@~2.1.15, mime-types@~2.1.7:
+mime-types@^2.1.12, mime-types@~2.1.11, mime-types@~2.1.15, mime-types@~2.1.17, mime-types@~2.1.7:
  version "2.1.17"
  resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.17.tgz#09d7a393f03e995a79f8af857b70a9e0ab16557a"
  dependencies:
@ -2621,6 +2816,10 @@ nan@^2.3.0:
  version "2.7.0"
  resolved "https://registry.yarnpkg.com/nan/-/nan-2.7.0.tgz#d95bf721ec877e08db276ed3fc6eb78f9083ad46"

+nan@^2.3.2:
+  version "2.8.0"
+  resolved "https://registry.yarnpkg.com/nan/-/nan-2.8.0.tgz#ed715f3fe9de02b57a5e6252d90a96675e1f085a"
+
 natives@^1.1.0:
  version "1.1.0"
  resolved "https://registry.yarnpkg.com/natives/-/natives-1.1.0.tgz#e9ff841418a6b2ec7a495e939984f78f163e6e31"
@ -2633,6 +2832,24 @@ next-tick@1:
  version "1.0.0"
  resolved "https://registry.yarnpkg.com/next-tick/-/next-tick-1.0.0.tgz#ca86d1fe8828169b0120208e3dc8424b9db8342c"

+node-gyp@^3.3.1:
+  version "3.6.2"
+  resolved "https://registry.yarnpkg.com/node-gyp/-/node-gyp-3.6.2.tgz#9bfbe54562286284838e750eac05295853fa1c60"
+  dependencies:
+    fstream "^1.0.0"
+    glob "^7.0.3"
+    graceful-fs "^4.1.2"
+    minimatch "^3.0.2"
+    mkdirp "^0.5.0"
+    nopt "2 || 3"
+    npmlog "0 || 1 || 2 || 3 || 4"
+    osenv "0"
+    request "2"
+    rimraf "2"
+    semver "~5.3.0"
+    tar "^2.0.0"
+    which "1"
+
 node-pre-gyp@^0.6.36:
  version "0.6.37"
  resolved "https://registry.yarnpkg.com/node-pre-gyp/-/node-pre-gyp-0.6.37.tgz#3c872b236b2e266e4140578fe1ee88f693323a05"
@ -2648,6 +2865,36 @@ node-pre-gyp@^0.6.36:
    tar "^2.2.1"
    tar-pack "^3.4.0"

+node-sass@^4.2.0:
+  version "4.7.2"
+  resolved "https://registry.yarnpkg.com/node-sass/-/node-sass-4.7.2.tgz#9366778ba1469eb01438a9e8592f4262bcb6794e"
+  dependencies:
+    async-foreach "^0.1.3"
+    chalk "^1.1.1"
+    cross-spawn "^3.0.0"
+    gaze "^1.0.0"
+    get-stdin "^4.0.1"
+    glob "^7.0.3"
+    in-publish "^2.0.0"
+    lodash.assign "^4.2.0"
+    lodash.clonedeep "^4.3.2"
+    lodash.mergewith "^4.6.0"
+    meow "^3.7.0"
+    mkdirp "^0.5.1"
+    nan "^2.3.2"
+    node-gyp "^3.3.1"
+    npmlog "^4.0.0"
+    request "~2.79.0"
+    sass-graph "^2.2.4"
+    stdout-stream "^1.4.0"
+    "true-case-path" "^1.0.2"
+
+"nopt@2 || 3":
+  version "3.0.6"
+  resolved "https://registry.yarnpkg.com/nopt/-/nopt-3.0.6.tgz#c6465dbf08abcd4db359317f79ac68a646b28ff9"
+  dependencies:
+    abbrev "1"
+
 nopt@^4.0.1:
  version "4.0.1"
  resolved "https://registry.yarnpkg.com/nopt/-/nopt-4.0.1.tgz#d0d4685afd5415193c8c7505602d0d17cd64474d"
@ -2683,7 +2930,7 @@ normalize-url@^1.4.0:
    query-string "^4.1.0"
    sort-keys "^1.0.0"

-npmlog@^4.0.2:
+"npmlog@0 || 1 || 2 || 3 || 4", npmlog@^4.0.0, npmlog@^4.0.2:
  version "4.1.2"
  resolved "https://registry.yarnpkg.com/npmlog/-/npmlog-4.1.2.tgz#08a7f2a8bf734604779a9efa4ad5cc717abb954b"
  dependencies:
@ -2710,7 +2957,7 @@ number-is-nan@^1.0.0:
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/number-is-nan/-/number-is-nan-1.0.1.tgz#097b602b53422a522c1afb8790318336941a011d"

-oauth-sign@~0.8.1:
+oauth-sign@~0.8.1, oauth-sign@~0.8.2:
  version "0.8.2"
  resolved "https://registry.yarnpkg.com/oauth-sign/-/oauth-sign-0.8.2.tgz#46a6ab7f0aead8deae9ec0565780b7d4efeb9d43"

@ -2822,7 +3069,7 @@ os-tmpdir@^1.0.0, os-tmpdir@~1.0.1, os-tmpdir@~1.0.2:
  version "1.0.2"
  resolved "https://registry.yarnpkg.com/os-tmpdir/-/os-tmpdir-1.0.2.tgz#bbe67406c79aa85c5cfec766fe5734555dfa1274"

-osenv@^0.1.4:
+osenv@0, osenv@^0.1.4:
  version "0.1.4"
  resolved "https://registry.yarnpkg.com/osenv/-/osenv-0.1.4.tgz#42fe6d5953df06c8064be6f176c3d05aaaa34644"
  dependencies:
@ -2932,6 +3179,10 @@ performance-now@^0.2.0:
  version "0.2.0"
  resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-0.2.0.tgz#33ef30c5c77d4ea21c5a53869d91b56d8f2555e5"

+performance-now@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b"
+
 phantomjs-prebuilt@^2.1.7:
  version "2.1.15"
  resolved "https://registry.yarnpkg.com/phantomjs-prebuilt/-/phantomjs-prebuilt-2.1.15.tgz#20f86e82d3349c505917527745b7a411e08b3903"
@ -3195,6 +3446,10 @@ progress@~1.1.8:
  version "1.1.8"
  resolved "https://registry.yarnpkg.com/progress/-/progress-1.1.8.tgz#e260c78f6161cdd9b0e56cc3e0a85de17c7a57be"

+pseudomap@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/pseudomap/-/pseudomap-1.0.2.tgz#f052a28da70e618917ef0a8ac34c1ae5a68286b3"
+
 punycode@^1.4.1:
  version "1.4.1"
  resolved "https://registry.yarnpkg.com/punycode/-/punycode-1.4.1.tgz#c0d5a63b2718800ad8e1eb0fa5269c84dd41845e"
@ -3207,10 +3462,14 @@ qjobs@^1.1.4:
  version "1.1.5"
  resolved "https://registry.yarnpkg.com/qjobs/-/qjobs-1.1.5.tgz#659de9f2cf8dcc27a1481276f205377272382e73"

-qs@6.5.1:
+qs@6.5.1, qs@~6.5.1:
  version "6.5.1"
  resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.1.tgz#349cdf6eef89ec45c12d7d5eb3fc0c870343a6d8"

+qs@~6.3.0:
+  version "6.3.2"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-6.3.2.tgz#e75bd5f6e268122a2a0e0bda630b2550c166502c"
+
 qs@~6.4.0:
  version "6.4.0"
  resolved "https://registry.yarnpkg.com/qs/-/qs-6.4.0.tgz#13e26d28ad6b0ffaa91312cd3bf708ed351e7233"
@ -3398,6 +3657,33 @@ request-progress@~2.0.1:
  dependencies:
    throttleit "^1.0.0"

+request@2:
+  version "2.83.0"
+  resolved "https://registry.yarnpkg.com/request/-/request-2.83.0.tgz#ca0b65da02ed62935887808e6f510381034e3356"
+  dependencies:
+    aws-sign2 "~0.7.0"
+    aws4 "^1.6.0"
+    caseless "~0.12.0"
+    combined-stream "~1.0.5"
+    extend "~3.0.1"
+    forever-agent "~0.6.1"
+    form-data "~2.3.1"
+    har-validator "~5.0.3"
+    hawk "~6.0.2"
+    http-signature "~1.2.0"
+    is-typedarray "~1.0.0"
+    isstream "~0.1.2"
+    json-stringify-safe "~5.0.1"
+    mime-types "~2.1.17"
+    oauth-sign "~0.8.2"
+    performance-now "^2.1.0"
+    qs "~6.5.1"
+    safe-buffer "^5.1.1"
+    stringstream "~0.0.5"
+    tough-cookie "~2.3.3"
+    tunnel-agent "^0.6.0"
+    uuid "^3.1.0"
+
 request@^2.81.0, request@~2.81.0:
  version "2.81.0"
  resolved "https://registry.yarnpkg.com/request/-/request-2.81.0.tgz#c6928946a0e06c5f8d6f8a9333469ffda46298a0"
@ -3425,6 +3711,31 @@ request@^2.81.0, request@~2.81.0:
    tunnel-agent "^0.6.0"
    uuid "^3.0.0"

+request@~2.79.0:
+  version "2.79.0"
+  resolved "https://registry.yarnpkg.com/request/-/request-2.79.0.tgz#4dfe5bf6be8b8cdc37fcf93e04b65577722710de"
+  dependencies:
+    aws-sign2 "~0.6.0"
+    aws4 "^1.2.1"
+    caseless "~0.11.0"
+    combined-stream "~1.0.5"
+    extend "~3.0.0"
+    forever-agent "~0.6.1"
+    form-data "~2.1.1"
+    har-validator "~2.0.6"
+    hawk "~3.1.3"
+    http-signature "~1.1.0"
+    is-typedarray "~1.0.0"
+    isstream "~0.1.2"
+    json-stringify-safe "~5.0.1"
+    mime-types "~2.1.7"
+    oauth-sign "~0.8.1"
+    qs "~6.3.0"
+    stringstream "~0.0.4"
+    tough-cookie "~2.3.0"
+    tunnel-agent "~0.4.1"
+    uuid "^3.0.0"
+
 require-directory@^2.1.1:
  version "2.1.1"
  resolved "https://registry.yarnpkg.com/require-directory/-/require-directory-2.1.1.tgz#8c64ad5fd30dab1c976e2344ffe7f792a6a6df42"
@ -3472,19 +3783,35 @@ rimraf@2, rimraf@^2.5.1, rimraf@^2.6.0, rimraf@^2.6.1:
  dependencies:
    glob "^7.0.5"

-safe-buffer@^5.0.1, safe-buffer@~5.1.0, safe-buffer@~5.1.1:
+safe-buffer@^5.0.1, safe-buffer@^5.1.1, safe-buffer@~5.1.0, safe-buffer@~5.1.1:
  version "5.1.1"
  resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.1.tgz#893312af69b2123def71f57889001671eeb2c853"

+sass-graph@^2.2.4:
+  version "2.2.4"
+  resolved "https://registry.yarnpkg.com/sass-graph/-/sass-graph-2.2.4.tgz#13fbd63cd1caf0908b9fd93476ad43a51d1e0b49"
+  dependencies:
+    glob "^7.0.0"
+    lodash "^4.0.0"
+    scss-tokenizer "^0.2.3"
+    yargs "^7.0.0"
+
 sax@~1.2.1:
  version "1.2.4"
  resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"

+scss-tokenizer@^0.2.3:
+  version "0.2.3"
+  resolved "https://registry.yarnpkg.com/scss-tokenizer/-/scss-tokenizer-0.2.3.tgz#8eb06db9a9723333824d3f5530641149847ce5d1"
+  dependencies:
+    js-base64 "^2.1.8"
+    source-map "^0.4.2"
+
 "semver@2 || 3 || 4 || 5", semver@^5.3.0:
  version "5.4.1"
  resolved "https://registry.yarnpkg.com/semver/-/semver-5.4.1.tgz#e059c09d8571f0540823733433505d3a2f00b18e"

-semver@5.3.0:
+semver@5.3.0, semver@~5.3.0:
  version "5.3.0"
  resolved "https://registry.yarnpkg.com/semver/-/semver-5.3.0.tgz#9b2ce5d3de02d17c6012ad326aa6b4d0cf54f94f"

@ -3526,6 +3853,12 @@ sntp@1.x.x:
  dependencies:
    hoek "2.x.x"

+sntp@2.x.x:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/sntp/-/sntp-2.1.0.tgz#2c6cec14fedc2222739caf9b5c3d85d1cc5a2cc8"
+  dependencies:
+    hoek "4.x.x"
+
 socket.io-adapter@0.5.0:
  version "0.5.0"
  resolved "https://registry.yarnpkg.com/socket.io-adapter/-/socket.io-adapter-0.5.0.tgz#cb6d4bb8bec81e1078b99677f9ced0046066bb8b"
@ -3599,6 +3932,12 @@ source-map@^0.1.38:
  dependencies:
    amdefine ">=0.0.4"

+source-map@^0.4.2:
+  version "0.4.4"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.4.4.tgz#eba4f5da9c0dc999de68032d8b4f76173652036b"
+  dependencies:
+    amdefine ">=0.0.4"
+
 sparkles@^1.0.0:
  version "1.0.0"
  resolved "https://registry.yarnpkg.com/sparkles/-/sparkles-1.0.0.tgz#1acbbfb592436d10bbe8f785b7cc6f82815012c3"
@ -3649,6 +3988,12 @@ sshpk@^1.7.0:
  version "1.3.1"
  resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.3.1.tgz#faf51b9eb74aaef3b3acf4ad5f61abf24cb7b93e"

+stdout-stream@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/stdout-stream/-/stdout-stream-1.4.0.tgz#a2c7c8587e54d9427ea9edb3ac3f2cd522df378b"
+  dependencies:
+    readable-stream "^2.0.1"
+
 stream-combiner@~0.0.4:
  version "0.0.4"
  resolved "https://registry.yarnpkg.com/stream-combiner/-/stream-combiner-0.0.4.tgz#4d5e433c185261dde623ca3f44c586bcf5c4ad14"
@ -3693,7 +4038,7 @@ string_decoder@~1.0.3:
  dependencies:
    safe-buffer "~5.1.0"

-stringstream@~0.0.4:
+stringstream@~0.0.4, stringstream@~0.0.5:
  version "0.0.5"
  resolved "https://registry.yarnpkg.com/stringstream/-/stringstream-0.0.5.tgz#4e484cd4de5a0bbbee18e46307710a8a81621878"

@ -3794,7 +4139,7 @@ tar-pack@^3.4.0:
    tar "^2.2.1"
    uid-number "^0.0.6"

-tar@^2.2.1:
+tar@^2.0.0, tar@^2.2.1:
  version "2.2.1"
  resolved "https://registry.yarnpkg.com/tar/-/tar-2.2.1.tgz#8e4d2a256c0e2185c6b18ad694aec968b83cb1d1"
  dependencies:
@ -3885,16 +4230,32 @@ tough-cookie@~2.3.0:
  dependencies:
    punycode "^1.4.1"

+tough-cookie@~2.3.3:
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-2.3.3.tgz#0b618a5565b6dea90bf3425d04d55edc475a7561"
+  dependencies:
+    punycode "^1.4.1"
+
 trim-newlines@^1.0.0:
  version "1.0.0"
  resolved "https://registry.yarnpkg.com/trim-newlines/-/trim-newlines-1.0.0.tgz#5887966bb582a4503a41eb524f7d35011815a613"

+"true-case-path@^1.0.2":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/true-case-path/-/true-case-path-1.0.2.tgz#7ec91130924766c7f573be3020c34f8fdfd00d62"
+  dependencies:
+    glob "^6.0.4"
+
 tunnel-agent@^0.6.0:
  version "0.6.0"
  resolved "https://registry.yarnpkg.com/tunnel-agent/-/tunnel-agent-0.6.0.tgz#27a5dea06b36b04a0a9966774b290868f0fc40fd"
  dependencies:
    safe-buffer "^5.0.1"

+tunnel-agent@~0.4.1:
+  version "0.4.3"
+  resolved "https://registry.yarnpkg.com/tunnel-agent/-/tunnel-agent-0.4.3.tgz#6373db76909fe570e08d73583365ed828a74eeeb"
+
 tweetnacl@^0.14.3, tweetnacl@~0.14.0:
  version "0.14.5"
  resolved "https://registry.yarnpkg.com/tweetnacl/-/tweetnacl-0.14.5.tgz#5ae68177f192d4456269d108afa93ff8743f4f64"
@ -4002,7 +4363,7 @@ utils-merge@1.0.0:
  version "1.0.0"
  resolved "https://registry.yarnpkg.com/utils-merge/-/utils-merge-1.0.0.tgz#0294fb922bb9375153541c4f7096231f287c8af8"

-uuid@^3.0.0:
+uuid@^3.0.0, uuid@^3.1.0:
  version "3.1.0"
  resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.1.0.tgz#3dd3d3e790abc24d7b0d3a034ffababe28ebbc04"

@ -4122,7 +4483,7 @@ which-module@^1.0.0:
  version "1.0.0"
  resolved "https://registry.yarnpkg.com/which-module/-/which-module-1.0.0.tgz#bba63ca861948994ff307736089e3b96026c2a4f"

-which@^1.2.1, which@^1.2.12:
+which@1, which@^1.2.1, which@^1.2.12, which@^1.2.9:
  version "1.3.0"
  resolved "https://registry.yarnpkg.com/which/-/which-1.3.0.tgz#ff04bdfc010ee547d780bec38e1ac1c2777d253a"
  dependencies:
@ -4178,7 +4539,7 @@ xmlhttprequest-ssl@1.5.3:
  version "1.5.3"
  resolved "https://registry.yarnpkg.com/xmlhttprequest-ssl/-/xmlhttprequest-ssl-1.5.3.tgz#185a888c04eca46c3e4070d99f7b49de3528992d"

-"xtend@>=4.0.0 <4.1.0-0", xtend@~4.0.0, xtend@~4.0.1:
+"xtend@>=4.0.0 <4.1.0-0", xtend@^4.0.0, xtend@~4.0.0, xtend@~4.0.1:
  version "4.0.1"
  resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.1.tgz#a5c6d532be656e23db820efb943a1f04998d63af"

@ -4186,13 +4547,17 @@ y18n@^3.2.1:
  version "3.2.1"
  resolved "https://registry.yarnpkg.com/y18n/-/y18n-3.2.1.tgz#6d15fba884c08679c0d77e88e7759e811e07fa41"

+yallist@^2.1.2:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/yallist/-/yallist-2.1.2.tgz#1c11f9218f076089a47dd512f93c6699a6a81d52"
+
 yargs-parser@^5.0.0:
  version "5.0.0"
  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-5.0.0.tgz#275ecf0d7ffe05c77e64e7c86e4cd94bf0e1228a"
  dependencies:
    camelcase "^3.0.0"

-yargs@^7.1.0:
+yargs@^7.0.0, yargs@^7.1.0:
  version "7.1.0"
  resolved "https://registry.yarnpkg.com/yargs/-/yargs-7.1.0.tgz#6ba318eb16961727f5d284f8ea003e8d6154d0c8"
  dependencies: