Initial commit

6 files changed, 2344 insertions, 0 deletions

diff --git a/src/styles/404.less b/src/styles/404.less
new file mode 100644
index 00000000..8842b621
--- /dev/null
+++ b/src/styles/404.less
@@ -0,0 +1,147 @@
+html, body {
+  padding: 0;
+  margin: 0;
+  width: 100%;
+  height: 100%;
+
+  background-image: linear-gradient(135deg, #00678a, #008fbf, #00A6D6);
+}
+
+.terminal-window {
+  width: 600px;
+  height: 400px;
+  display: block;
+
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+
+  margin: auto;
+
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  cursor: default;
+
+  overflow: hidden;
+
+  box-shadow: 5px 5px 20px #444444;
+}
+
+.terminal-header {
+  font-family: monospace;
+  background: #cccccc;
+  color: #444444;
+  height: 30px;
+  line-height: 30px;
+  padding-left: 10px;
+
+  border-top-left-radius: 7px;
+  border-top-right-radius: 7px;
+}
+
+.terminal-body {
+  font-family: monospace;
+  text-align: center;
+  background-color: #333333;
+  color: #eeeeee;
+  padding: 10px;
+
+  height: 100%;
+}
+
+.segfault {
+  text-align: left;
+}
+
+.cursor {
+  -webkit-animation: 1s blink step-end infinite;
+  -moz-animation: 1s blink step-end infinite;
+  -ms-animation: 1s blink step-end infinite;
+  -o-animation: 1s blink step-end infinite;
+  animation: 1s blink step-end infinite;
+}
+
+.code-block {
+  white-space: pre-wrap;
+
+  margin-top: 60px;
+}
+
+.sub-title {
+  margin-top: 20px;
+}
+
+.home-btn {
+  margin-top: 10px;
+  padding: 5px;
+  display: inline-block;
+  border: 1px solid #eeeeee;
+  color: #eeeeee;
+  text-decoration: none;
+  cursor: pointer;
+
+  -webkit-transition: all 200ms;
+  -moz-transition: all 200ms;
+  -ms-transition: all 200ms;
+  -o-transition: all 200ms;
+  transition: all 200ms;
+}
+
+.home-btn:hover {
+  background: #eeeeee;
+  color: #333333;
+}
+
+.home-btn:active {
+  background: #333333;
+  color: #eeeeee;
+}
+
+@keyframes blink {
+  from, to {
+    color: #eeeeee;
+  }
+  50% {
+    color: #333333;
+  }
+}
+
+@-moz-keyframes blink {
+  from, to {
+    color: #eeeeee;
+  }
+  50% {
+    color: #333333;
+  }
+}
+
+@-webkit-keyframes blink {
+  from, to {
+    color: #eeeeee;
+  }
+  50% {
+    color: #333333;
+  }
+}
+
+@-ms-keyframes blink {
+  from, to {
+    color: #eeeeee;
+  }
+  50% {
+    color: #333333;
+  }
+}
+
+@-o-keyframes blink {
+  from, to {
+    color: #eeeeee;
+  }
+  50% {
+    color: #333333;
+  }
+}
\ No newline at end of file
diff --git a/src/styles/main.less b/src/styles/main.less
new file mode 100644
index 00000000..bb560c5b
--- /dev/null
+++ b/src/styles/main.less
@@ -0,0 +1,1190 @@
+/* Colors */
+@gray-dark: #aaa;
+@gray-semi-dark: #bbb;
+@gray-semi-light: #ccc;
+@gray-light: #ddd;
+@gray-very-light: #eee;
+@blue: #00A6D6;
+@blue-dark: #0087b5;
+@blue-very-dark: #006182;
+@blue-light: #deebf7;
+
+/* Sizes, Margins and Paddings*/
+@document-padding: 20px;
+@inter-element-margin: 5px;
+@standard-border-radius: 5px;
+@side-menu-width: 350px;
+@color-indicator-width: 140px;
+
+@global-padding: 30px;
+@transition-length: 150ms;
+@side-bar-width: 250px;
+@navbar-height: 50px;
+
+html, body {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+
+  font-family: Helvetica, Verdana, sans-serif;
+
+  overflow: hidden;
+
+  background: #eee;
+}
+
+a:hover {
+  text-decoration: none;
+}
+
+#main-canvas {
+  float: left;
+}
+
+.app-content {
+  position: relative;
+  width: 100%;
+  height: 100%;
+
+  z-index: 1;
+}
+
+/* Mixin for cross-platform prevention of user-text-selection */
+.user-select-def {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+/* Mixin for cross-platform transitions */
+.transition-def(@property, @time) {
+  -webkit-transition: @property @time;
+  -moz-transition: @property @time;
+  -ms-transition: @property @time;
+  -o-transition: @property @time;
+  transition: @property @time;
+}
+
+/* Mixin for cross-platform border-radius properties */
+.border-radius-def(@length) {
+  -webkit-border-radius: @length;
+  -moz-border-radius: @length;
+  border-radius: @length;
+}
+
+/* General Button Abstractions */
+.clickable {
+  cursor: pointer;
+  .user-select-def;
+}
+
+.button {
+  text-align: center;
+  padding: 5px;
+
+  background-color: @gray-semi-dark;
+
+  .border-radius-def(@standard-border-radius);
+  .clickable;
+
+  .transition-def(all, 200ms);
+}
+
+.button:hover {
+  background-color: @gray-semi-light;
+}
+
+.button:active {
+  background-color: @gray-dark;
+}
+
+/* Container for menu panels */
+.side-menu-container {
+  display: inline-block;
+  position: absolute;
+  top: @document-padding;
+  width: @side-menu-width;
+  height: calc(100% - @document-padding);
+  margin-top: 10px;
+
+  pointer-events: none;
+}
+
+.left-side {
+  left: @document-padding;
+}
+
+.right-side {
+  right: @document-padding;
+}
+
+.right-middle-side {
+  right: @document-padding * 2 + @side-menu-width;
+}
+
+/* Collapsible menu panel */
+.menu-container {
+  margin-bottom: 10px;
+  border: 1px solid @gray-dark;
+
+  -webkit-border-radius: @standard-border-radius;
+  -moz-border-radius: @standard-border-radius;
+  border-radius: @standard-border-radius;
+
+  overflow: hidden;
+  pointer-events: all;
+}
+
+.menu-header-bar {
+  display: block;
+  padding: 5px;
+
+  font-weight: bold;
+
+  background-color: @gray-semi-light;
+  border-bottom-width: 0;
+}
+
+.menu-body {
+  display: block;
+  padding: 10px 5px;
+
+  background-color: @gray-very-light;
+
+  .dropdown {
+    margin: @inter-element-margin 0;
+    display: inline-block;
+  }
+
+  .dropdown-label {
+    display: inline-block;
+    margin-right: 10px;
+  }
+}
+
+.menu-body.simulation {
+  display: none;
+}
+
+.side-menu-container .menu-collapse, .side-menu-container .menu-exit {
+  display: inline-block;
+  float: right;
+  width: 20px;
+  height: 20px;
+
+  text-align: center;
+  line-height: 20px;
+  padding: 0;
+  font-size: 9pt;
+
+  color: #777;
+}
+
+#room-menu {
+  .input-group {
+    margin-bottom: 5px;
+  }
+
+  label {
+    margin-top: 10px;
+  }
+}
+
+#room-construction-cancel {
+  display: none;
+}
+
+/* DC components */
+.dc-component-container {
+  .border-radius-def(@standard-border-radius);
+
+  margin-bottom: @inter-element-margin;
+  padding: 10px;
+
+  cursor: pointer;
+
+  .transition-def(background-color, 150ms);
+
+  .dc-component {
+    display: inline-block;
+    width: 50px;
+    height: 50px;
+    float: left;
+
+    border: 4px solid #000;
+  }
+
+  .dc-component-label {
+    display: inline-block;
+    padding-left: 20px;
+    line-height: 50px;
+    font-size: 1.3em;
+  }
+}
+
+.dc-component-container:hover {
+  background-color: @gray-semi-dark;
+}
+
+.dc-component-container:active {
+  background-color: @blue-dark;
+}
+
+.dc-component-container[data-active="true"] {
+  background-color: @blue;
+}
+
+/* DC Object colors */
+.dc-rack {
+  background-color: rgb(170, 170, 170);
+}
+
+.dc-psu {
+  background-color: rgb(230, 50, 60);
+}
+
+.dc-cooling-item {
+  background-color: rgb(40, 50, 230);
+}
+
+/* Rack menu */
+.node-list-container {
+  border: 2px solid #000000;
+  overflow: auto;
+  max-height: 300px;
+
+  margin: @inter-element-margin 0;
+  padding: 0;
+  @node-height: 50px;
+
+  .node-element {
+    position: relative;
+
+    @img-size: 34px;
+    height: @node-height;
+    cursor: hand;
+
+    background-color: @gray-semi-light;
+
+    .node-element-btn {
+      display: inline-block;
+      float: left;
+      width: 40px;
+      height: @node-height - 1px;
+
+      color: #000;
+
+      line-height: @node-height - 1px;
+      text-align: center;
+    }
+
+    .node-element-btn:hover {
+      text-decoration: none;
+    }
+
+    .node-element-content {
+      @element-padding-top: 2px;
+      @element-padding-left: 12px;
+      @img-margin: 7px;
+
+      position: relative;
+
+      display: inline-flex;
+      overflow: hidden;
+      margin: 5px;
+      padding: @element-padding-top @element-padding-left;
+
+      border: 1px solid #000;
+      background: #eeeeee;
+
+      img {
+        width: @img-size;
+        height: @img-size;
+      }
+
+      img:not(:last-of-type) {
+        margin-right: @img-margin;
+      }
+
+      .icon-overlay {
+        position: absolute;
+        top: @element-padding-top;
+        width: @img-size;
+        height: @img-size;
+
+        background: #eeeeee;
+        opacity: 0.6;
+      }
+
+      .overlay-cpu {
+        left: @element-padding-left;
+      }
+
+      .overlay-gpu {
+        left: @element-padding-left + @img-size + @img-margin;
+      }
+
+      .overlay-memory {
+        left: @element-padding-left + (@img-size + @img-margin) * 2;
+      }
+
+      .overlay-storage {
+        left: @element-padding-left + (@img-size + @img-margin) * 3;
+      }
+
+      .overlay-network {
+        left: @element-padding-left + (@img-size + @img-margin) * 4;
+      }
+    }
+
+    .node-element-number {
+      display: inline-block;
+      float: right;
+      width: 30px;
+      height: 100%;
+
+      line-height: 50px;
+      text-align: right;
+      padding-right: 10px;
+    }
+  }
+
+  .node-element:not(:last-of-type) {
+    border-bottom: 1px solid #666;
+  }
+
+  .node-element:last-of-type .node-element-content {
+    margin-bottom: 0;
+  }
+
+  .node-element-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+
+    width: 100%;
+    height: @node-height;
+
+    background: #eeeeee;
+    opacity: 0.6;
+
+    z-index: 100;
+  }
+}
+
+#node-menu {
+  .nav-tabs {
+    li.active, li.active a {
+      background-color: @gray-very-light;
+    }
+
+    img {
+      width: 30px;
+      height: 30px;
+    }
+  }
+
+  .tab-content {
+    overflow: hidden;
+
+    .panel-heading .accordion-toggle:after {
+      //noinspection CssNoGenericFontName
+      font-family: 'Glyphicons Halflings';
+      content: "\e114";
+      float: right;
+      color: grey;
+    }
+
+    .panel-heading .accordion-toggle.collapsed:after {
+      content: "\e080";
+    }
+  }
+
+  .remove-unit:hover {
+    text-decoration: none;
+  }
+
+  .unit-add-input {
+    margin-bottom: 10px;
+  }
+
+  .spec-table td {
+    height: 40px;
+    line-height: 40px;
+    padding: 0 10px;
+  }
+
+  .spec-table tr td:first-child {
+    width: 50px;
+    text-align: right;
+  }
+
+  .spec-table tr td:nth-child(2) {
+    width: 200px;
+  }
+
+  .spec-table tr td:nth-child(3) {
+    width: 50px;
+  }
+}
+
+/* Tasks menu */
+#tasks-menu .menu-body {
+  overflow-y: auto;
+  max-height: 350px;
+}
+
+#tasks-menu .menu-body .task-element {
+  height: 70px;
+
+  .task-icon {
+    @icon-size: 35px;
+
+    display: inline-block;
+    position: relative;
+    float: left;
+
+    top: 13px;
+    left: 10px;
+
+    width: @icon-size;
+    height: @icon-size;
+    font-size: @icon-size;
+
+  }
+
+  .task-info {
+    display: inline-block;
+    width: 270px;
+    float: right;
+
+    .task-time {
+      display: block;
+    }
+
+    .progress {
+      margin-bottom: 0;
+    }
+
+    .task-flops {
+      display: block;
+    }
+  }
+
+  &:not(:last-child) {
+    border-bottom: 1px solid #bbb;
+    margin-bottom: 10px;
+  }
+}
+
+#statistics-chart, #machine-statistics-chart {
+  display: block;
+  height: 200px;
+  margin-right: 15px;
+}
+
+/* Container for Zooming buttons */
+.tool-panel {
+  display: inline-block;
+  position: absolute;
+  bottom: @document-padding;
+  left: @document-padding;
+
+  z-index: 1000;
+}
+
+.btn-circle {
+  width: 30px;
+  height: 30px;
+  text-align: center;
+  padding: 6px 0;
+  font-size: 12px;
+  line-height: 1.428571429;
+  border-radius: 15px;
+
+  border-color: @gray-dark;
+}
+
+/* Indicators*/
+.indicators {
+  display: inline-block;
+  position: absolute;
+  bottom: @document-padding;
+  right: @document-padding;
+}
+
+/* Scale indicator */
+.scale-indicator {
+  display: inline-block;
+  width: 100px;
+  height: 18px;
+  line-height: 18px;
+
+  text-align: right;
+
+  border-top-width: 0;
+  border-right-width: 0;
+  border-bottom: 2px solid #000;
+  border-left: 2px solid #000;
+
+  .user-select-def;
+}
+
+/* Color indicator */
+.color-indicator {
+  @color-indicator-padding: 7px;
+  @element-width: (@color-indicator-width - @color-indicator-padding * 2) / 4;
+
+  display: inline-block;
+  position: relative;
+  top: 5px;
+  margin-left: 15px;
+  cursor: pointer;
+  padding: @color-indicator-padding;
+  .border-radius-def(@standard-border-radius);
+  .transition-def(background, @transition-length);
+  z-index: 100;
+
+  width: @color-indicator-width;
+
+  &:hover {
+    background: rgba(127, 127, 127, 0.5);
+  }
+
+  .intensity-labels {
+    height: 20px;
+    line-height: 20px;
+
+    font-size: 8pt;
+
+    div {
+      display: inline-block;
+      width: @element-width;
+      margin-right: -3px;
+
+      text-align: center;
+    }
+
+    div:first-of-type {
+      width: @element-width / 2;
+      text-align: left;
+    }
+
+    div:last-of-type {
+      width: @element-width / 2;
+      text-align: right;
+    }
+  }
+
+  .intensity-colors {
+    height: 15px;
+
+    div {
+      display: inline-block;
+      width: @element-width + 1;
+      height: 100%;
+      margin-right: -5px;
+      border: 1px solid #444;
+    }
+
+    .intensity-low {
+      border-top-left-radius: 4px;
+      border-bottom-left-radius: 4px;
+      background: rgba(197, 224, 180, 1);
+    }
+
+    .intensity-mid-low {
+      background: rgba(255, 230, 153, 1);
+    }
+
+    .intensity-mid-high {
+      background: rgba(248, 203, 173, 1);
+    }
+
+    .intensity-high {
+      border-top-right-radius: 4px;
+      border-bottom-right-radius: 4px;
+      background: rgba(249, 165, 165, 1);
+    }
+  }
+}
+
+@global-control-height: 40px;
+
+/* Mode switch */
+.mode-switch {
+  display: block;
+  width: 100%;
+  height: @global-control-height;
+  line-height: @global-control-height;
+
+  margin-bottom: 10px;
+  pointer-events: all;
+
+  background-color: #fff;
+  border: 1px solid @gray-dark;
+  .border-radius-def(@standard-border-radius);
+  overflow: hidden;
+
+  div {
+    display: inline-block;
+    width: 50%;
+    height: 100%;
+    text-align: center;
+
+    font-size: 1.2em;
+    .clickable;
+  }
+
+  div:first-child {
+    float: left;
+  }
+
+  div:last-child {
+    float: right;
+  }
+}
+
+#save-version-btn {
+  width: 50%;
+  height: @global-control-height;
+  line-height: @global-control-height;
+  text-align: center;
+  margin-bottom: 10px;
+  font-size: 1.2em;
+  color: #fff;
+
+  .clickable;
+  pointer-events: all;
+  .border-radius-def(@standard-border-radius);
+}
+
+#save-version-btn[data-saved="true"] {
+  background-color: #4dba31;
+
+  &:hover {
+    background: #3b8e25;
+  }
+}
+
+#save-version-btn[data-saved="false"] {
+  background-color: #d69931;
+
+  &:hover {
+    background: #af7b2d;
+  }
+}
+
+.mode-switch[data-selected="construction"] {
+  #construction-mode-switch {
+    background: @blue;
+    color: #fff;
+  }
+
+  #construction-mode-switch:hover {
+    background: @blue-dark;
+  }
+
+  #simulation-mode-switch {
+    background: #fff;
+    color: #000;
+  }
+
+  #simulation-mode-switch:hover {
+    background: #eee;
+  }
+}
+
+.mode-switch[data-selected="simulation"] {
+  #construction-mode-switch {
+    background: #fff;
+    color: #000;
+  }
+
+  #construction-mode-switch:hover {
+    background: #eee;
+  }
+
+  #simulation-mode-switch {
+    background: @blue;
+    color: #fff;
+  }
+
+  #simulation-mode-switch:hover {
+    background: @blue-dark;
+  }
+}
+
+#experiment-menu h2 {
+  margin-top: 0;
+  font-size: 12pt;
+}
+
+/* Timeline controls */
+.timeline-bar {
+  display: block;
+  position: absolute;
+  left: 0;
+  bottom: @document-padding;
+  width: 100%;
+  text-align: center;
+}
+
+.timeline-container {
+  @container-size: 500px;
+  @play-btn-size: 40px;
+  @border-width: 1px;
+  @timeline-border: @border-width solid @gray-semi-dark;
+
+  display: inline-block;
+  margin: 0 auto;
+  text-align: left;
+
+  width: @container-size;
+
+  .labels {
+    display: block;
+    height: 25px;
+    line-height: 25px;
+
+    div {
+      display: inline-block;
+    }
+
+    .start-time-label {
+      margin-left: @play-btn-size - @border-width;
+      padding-left: 4px;
+    }
+
+    .end-time-label {
+      padding-right: 4px;
+      float: right;
+    }
+  }
+
+  .controls {
+    display: flex;
+    border: @timeline-border;
+    overflow: hidden;
+
+    // Fix for border-radius overflow in Chrome/Webkit
+    -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
+
+    .border-radius-def(@standard-border-radius);
+
+    .play-btn {
+      width: @play-btn-size;
+      height: @play-btn-size + @border-width;
+      line-height: @play-btn-size + @border-width;
+      text-align: center;
+      float: left;
+
+      margin-top: -@border-width;
+
+      font-size: 16pt;
+      background: #333;
+      color: #eee;
+
+      .transition-def(background, @transition-length);
+
+      .user-select-def;
+      .clickable;
+
+      // Loading icon
+      img {
+        display: none;
+        position: relative;
+        width: 70%;
+        height: 70%;
+        margin-top: -10px;
+      }
+    }
+
+    .play-btn::before {
+      position: relative;
+      top: -1px;
+      left: 1px;
+    }
+
+    .play-btn:hover {
+      background: #656565;
+    }
+
+    .play-btn:active {
+      background: #000;
+    }
+
+    .timeline {
+      position: relative;
+      flex: 1;
+      height: @play-btn-size;
+      line-height: @play-btn-size;
+      float: right;
+
+      background: @blue-light;
+
+      z-index: 500;
+
+      div {
+        .transition-def(all, @transition-length);
+      }
+
+      .time-marker {
+        position: absolute;
+        top: 0;
+        left: 0;
+
+        width: 6px;
+        height: 100%;
+
+        background: @blue-very-dark;
+
+        .border-radius-def(2px);
+
+        z-index: 503;
+      }
+
+      .section-marker {
+        position: absolute;
+        top: 0;
+        left: 0;
+
+        width: 3px;
+        height: 100%;
+
+        background: #222222;
+
+        z-index: 504;
+      }
+
+      .cache-section {
+        position: absolute;
+        top: 0;
+        left: 0;
+
+        width: 0;
+        height: 100%;
+
+        background: @blue;
+
+        z-index: 501;
+      }
+
+      .task-indicator {
+        display: inline-block;
+        position: absolute;
+        bottom: 0;
+        width: 10px;
+        height: 10px;
+
+        border: 1px solid #000;
+
+        z-index: 502;
+      }
+
+      .task-queued {
+        background: #fff340;
+      }
+
+      .task-started {
+        background: #ff72a0;
+      }
+
+      .task-finished {
+        background: #c036ff;
+      }
+    }
+  }
+}
+
+/* Informational message container, for communicating events to the user */
+.info-balloon {
+  display: none;
+  position: absolute;
+  bottom: @document-padding;
+  right: @document-padding;
+
+  padding-left: 15px;
+  padding-right: 15px;
+
+  height: 30px;
+  line-height: 30px;
+
+  background: @blue;
+  color: #fff;
+
+  .border-radius-def(15px);
+
+  span {
+    line-height: 30px;
+    margin-right: 10px;
+  }
+}
+
+/* Loading overlay, shown during setup */
+.loading-overlay {
+  z-index: 1000;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+
+  background: rgba(0, 124, 159, 0.7);
+
+  .loading-overlay-content {
+    text-align: center;
+    display: inline-block;
+
+    width: 300px;
+    height: 200px;
+
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+
+    margin: auto;
+
+    img {
+      position: relative;
+      bottom: -10px;
+
+      animation: bounce 3s ease infinite;
+    }
+
+    .loading-text {
+      padding: 3px 10px;
+      background-color: #eeeeee;
+      .border-radius-def(@standard-border-radius);
+    }
+  }
+}
+
+@keyframes bounce {
+  0% {
+    bottom: -10px;
+  }
+  50% {
+    bottom: 40px;
+  }
+  100% {
+    bottom: -10px;
+  }
+}
+
+/* Experiments */
+.experiment-list {
+  display: block;
+  font-size: 12pt;
+  border: 0;
+
+  .list-head, .list-body .experiment-row {
+    display: block;
+    position: relative;
+  }
+
+  .list-head div, .list-body .project-row div {
+    padding: 0 10px;
+    display: inline-block;
+  }
+
+  .list-head {
+    font-weight: bold;
+  }
+
+  .experiment-row {
+    background: #f8f8f8;
+    border: 1px solid #b6b6b6;
+    height: 40px;
+    line-height: 40px;
+    clear: both;
+
+    .transition-def(background, @transition-length);
+    .clickable;
+  }
+
+  .experiment-row:hover {
+    background: #fff;
+  }
+
+  .experiment-row:active {
+    background: #cccccc;
+  }
+
+  .experiment-row:not(:first-of-type) {
+    margin-top: -1px;
+  }
+
+  // Sizing of table columns
+  .experiment-row, .list-head {
+    div {
+      display: inline-block;
+      width: 20%;
+
+      padding-left: 5px;
+      margin-right: -4px; // Address default margin between inline-blocks
+    }
+
+    div:last-of-type {
+      text-align: right;
+      padding-right: 10px;
+    }
+  }
+}
+
+.no-experiments-alert {
+  display: none;
+  position: relative;
+  padding-left: 50px;
+  span {
+    position: absolute;
+    top: 11px;
+    left: 10px;
+    bottom: 10px;
+    font-size: 20pt;
+  }
+}
+
+.window-overlay {
+  display: none;
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+
+  background: rgba(0, 0, 0, 0.5);
+
+  z-index: 5000;
+}
+
+.experiments-window {
+  width: 80%;
+  height: 80%;
+
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  margin: auto;
+
+  overflow: hidden;
+
+  .window-body {
+    width: 100%;
+    height: 340px;
+
+    padding: 10px;
+
+    background: rgba(230, 230, 230, 0.9);
+
+    .border-radius-def(5px);
+
+    .window-heading {
+      font-size: 20pt;
+      color: #000000;
+
+      .user-select-def;
+
+      font-weight: bold;
+
+      padding-left: 5px;
+    }
+
+    .experiment-add-form {
+      margin: 20px;
+
+      input, select {
+        width: 200px;
+      }
+
+      label {
+        width: 80px;
+        text-align: right;
+
+        .user-select-def;
+      }
+    }
+
+    .experiments-table-label {
+      display: block;
+      padding-left: 20px;
+      margin-bottom: 5px;
+
+      font-size: 18px;
+
+      .user-select-def;
+    }
+
+    .experiment-name-alert {
+      position: absolute;
+      bottom: 0;
+      left: 20px;
+      display: none;
+    }
+  }
+
+  .window-footer {
+    width: 100%;
+    height: 60px;
+
+    background: rgba(56, 56, 56, 0.9);
+
+    padding: 12px 10px;
+
+    .btn.pull-left {
+      margin-right: 5px;
+    }
+
+    .btn.pull-right {
+      margin-left: 5px;
+    }
+  }
+}
+
+.window-close {
+  display: inline-block;
+  font-size: 16pt;
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  cursor: pointer;
+  color: #888888;
+}
+
+/* Internal page */
+/* Main content body (side-menu and main-body) */
+.content {
+  position: relative;
+  top: -@navbar-height;
+  width: 100%;
+  height: 100%;
+  padding-top: @navbar-height;
+  z-index: 1;
+}
+
+/* Content body */
+.main-body {
+  position: relative;
+  display: block;
+  margin: auto;
+  width: 900px;
+  max-width: 900px;
+  height: 100%;
+  padding: 40px;
+
+  border-left: 1px solid #bbb;
+  border-right: 1px solid #bbb;
+  background: #f7f7f7;
+
+  h2 {
+    font-weight: bold;
+    margin: 10px 0 20px 0;
+  }
+}
+
+.modal {
+  z-index: 10000;
+}
diff --git a/src/styles/navbar.less b/src/styles/navbar.less
new file mode 100644
index 00000000..3eba0982
--- /dev/null
+++ b/src/styles/navbar.less
@@ -0,0 +1,158 @@
+@import "main.less";
+
+/* Navbar */
+.top-navbar {
+  @navbar-padding: 10px;
+
+  position: relative;
+  display: block;
+  width: 100%;
+  height: @navbar-height;
+
+  color: #eee;
+  background: #343434;
+
+  z-index: 100;
+
+  -webkit-box-shadow: -10px 8px 3px 12px #000;
+  -moz-box-shadow: -10px 8px 3px 12px #000;
+  box-shadow: -10px -10px 3px 12px #000;
+
+  .opendc-brand {
+    display: inline-block;
+    float: left;
+    margin-left: @global-padding;
+
+    padding: 0 10px;
+
+    cursor: pointer;
+    color: #eee;
+    height: 100%;
+
+    .transition-def(background, @transition-length);
+
+    img {
+      display: inline-block;
+      float: left;
+      margin: @navbar-padding 0;
+
+      width: @navbar-height - @navbar-padding * 2;
+      height: @navbar-height - @navbar-padding * 2;
+      vertical-align: middle;
+    }
+
+    .opendc-title {
+      display: inline-block;
+      float: right;
+      margin-left: 20px;
+
+      font-size: 16pt;
+      line-height: @navbar-height;
+    }
+  }
+
+  .opendc-brand:hover {
+    background: @blue;
+  }
+
+  .opendc-brand:active {
+    background: @blue-dark;
+  }
+
+  .navbar-button-group {
+    display: inline-block;
+    height: 100%;
+
+    a {
+      display: inline-block;
+      line-height: @navbar-height;
+      text-align: center;
+      color: #eee;
+
+      border-left: 1px solid #464646;
+
+      .clickable;
+      .transition-def(background, @transition-length);
+    }
+
+    a:last-of-type {
+      border-right: 1px solid #464646;
+    }
+  }
+
+  .navigation {
+    margin-left: 30px;
+
+    .projects {
+      float: left;
+      padding: 0 20px;
+
+      font-size: 12pt;
+    }
+
+    .projects:hover {
+      background: #606060;
+    }
+
+    .projects:active {
+      background: #161616;
+    }
+  }
+
+  .user {
+    float: right;
+    margin-right: @global-padding;
+
+    .support {
+      float: left;
+      margin-top: -1px;
+
+      width: @navbar-height;
+
+      font-size: 14pt;
+    }
+
+    .support:hover {
+      background: #41a0cd;
+    }
+
+    .support:active {
+      background: #307798;
+    }
+
+    .username {
+      float: left;
+      padding: 0 20px;
+
+      font-size: 12pt;
+    }
+
+    .username:hover {
+      background: #4eae44;
+    }
+
+    .username:active {
+      background: #2d6527;
+    }
+
+    .sign-out {
+      float: right;
+      margin-top: -1px;
+      width: @navbar-height;
+
+      font-size: 14pt;
+    }
+
+    .sign-out:hover {
+      background: #e3474d;
+    }
+
+    .sign-out:active {
+      background: #a73438;
+    }
+  }
+}
+
+#google-signin {
+  display: none;
+}
diff --git a/src/styles/profile.less b/src/styles/profile.less
new file mode 100644
index 00000000..40bf49f8
--- /dev/null
+++ b/src/styles/profile.less
@@ -0,0 +1,22 @@
+@import "main.less";
+
+.main-body.profile-page {
+  text-align: center;
+
+  :not(.btn) {
+    text-align: left;
+  }
+}
+
+#delete-account {
+  margin: 10px 0;
+}
+
+.delete-info {
+  color: #999999;
+  padding: 0 80px;
+}
+
+.account-delete-alert {
+  display: none;
+}
\ No newline at end of file
diff --git a/src/styles/projects.less b/src/styles/projects.less
new file mode 100644
index 00000000..926ea8ec
--- /dev/null
+++ b/src/styles/projects.less
@@ -0,0 +1,391 @@
+@import "main.less";
+
+/* Buttons */
+.new-project-btn {
+  @button-height: 35px;
+
+  display: inline-block;
+  position: absolute;
+  bottom: 40px;
+  right: 40px;
+  padding: 0 20px;
+  height: @button-height;
+  line-height: @button-height;
+  font-size: 12pt;
+
+  background: #679436;
+  color: #eee;
+  border: 1px solid #507830;
+
+  .border-radius-def(@standard-border-radius);
+  .clickable;
+  .transition-def(all, @transition-length);
+}
+
+.new-project-btn:hover {
+  background: #73ac45;
+}
+
+.new-project-btn:active {
+  background: #5c8835;
+}
+
+/* Side menu */
+.filter-menu {
+  display: block;
+
+  background: #0761b1;
+  border: 1px solid #06326b;
+  color: #eee;
+
+  text-align: center;
+
+  .border-radius-def(@standard-border-radius);
+  overflow: hidden;
+
+  margin-bottom: 20px;
+
+  .project-filters {
+    display: block;
+    overflow: hidden;
+    margin-left: -2px;
+
+    div {
+      display: inline-block;
+      width: 33.3%;
+      margin-right: -4px;
+      padding: 10px @global-padding;
+
+      font-size: 12pt;
+      border-right: 1px solid #06326b;
+
+      .clickable;
+      .transition-def(background, @transition-length);
+    }
+
+    div:last-of-type {
+      border: 0;
+    }
+
+    div:hover {
+      background: #0c60bf;
+    }
+
+    div:active, div.active {
+      background: #073d7d;
+    }
+  }
+}
+
+/* Message shown when no projects present */
+.no-projects-alert {
+  display: none;
+  position: relative;
+  padding-left: 50px;
+  span {
+    position: absolute;
+    top: 11px;
+    left: 10px;
+    bottom: 10px;
+    font-size: 20pt;
+  }
+}
+
+/* List of simulation projects */
+.project-list {
+  display: block;
+  font-size: 12pt;
+  border: 0;
+
+  .list-head, .list-body .project-row {
+    display: block;
+    position: relative;
+  }
+
+  .list-head div, .list-body .project-row div {
+    padding: 0 10px;
+    display: inline-block;
+  }
+
+  .list-head {
+    font-weight: bold;
+
+    div {
+      margin-right: -4px; // Address default margin between inline-blocks
+    }
+  }
+
+  .project-row {
+    background: #f8f8f8;
+    border: 1px solid #b6b6b6;
+    height: 40px;
+    line-height: 40px;
+    clear: both;
+
+    .transition-def(background, @transition-length);
+    .clickable;
+  }
+
+  .project-row:hover {
+    background: #fff;
+  }
+
+  .project-row:active {
+    background: #cccccc;
+  }
+
+  .project-row:not(:first-of-type) {
+    margin-top: -1px;
+  }
+
+  // Sizing of table columns
+  .project-row, .list-head {
+    div:first-of-type {
+      width: 50%;
+    }
+
+    div:nth-of-type(2) {
+      width: 30%;
+    }
+
+    div:last-of-type {
+      width: 20%;
+
+      span {
+        margin-right: 10px;
+      }
+    }
+  }
+
+  .project-row.active {
+    border-bottom: 0;
+    background: #3442b1;
+    color: #eee;
+  }
+
+  .project-row.active::before {
+    //noinspection CssNoGenericFontName
+    font-family: 'Glyphicons Halflings';
+    content: "\2212";
+    font-size: 14pt;
+    position: absolute;
+    top: 0;
+    right: 10px;
+  }
+
+  .project-view {
+    padding: 10px;
+    overflow: hidden;
+    border: 1px solid #b6b6b6;
+    border-top: 0;
+
+    background: #3442b1;
+    color: #eee;
+
+    .participants {
+      display: inline-block;
+      float: left;
+    }
+
+    .access-buttons {
+      display: inline-block;
+      float: right;
+
+      .inline-btn {
+        margin-left: 10px;
+      }
+
+      .open {
+        background: #e38829;
+      }
+
+      .open:hover {
+        background: #ff992e;
+      }
+
+      .open:active {
+        background: #ba6f21;
+      }
+
+      .edit {
+        background: #2c3897;
+      }
+
+      .edit:hover {
+        background: #3a4ac8;
+      }
+
+      .edit:active {
+        background: #242d7a;
+      }
+    }
+  }
+}
+
+.inline-btn {
+  display: inline-block;
+  height: 30px;
+  line-height: 30px;
+  font-size: 10pt;
+  width: 70px;
+
+  text-transform: uppercase;
+  text-align: center;
+
+  color: #eee;
+
+  .clickable;
+  .transition-def(background, @transition-length);
+}
+
+.projects-window {
+  width: 600px;
+  height: 400px;
+
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  margin: auto;
+
+  .border-radius-def(5px);
+  overflow: hidden;
+
+  .window-body {
+    width: 100%;
+    height: 340px;
+
+    padding: 10px;
+
+    background: rgba(230, 230, 230, 0.9);
+
+    .window-heading {
+      font-size: 20pt;
+      color: #000000;
+
+      .user-select-def;
+
+      font-weight: bold;
+
+      padding-left: 5px;
+    }
+
+    .project-name-form, .participant-add-form {
+      margin: 20px;
+
+      input {
+        width: 300px;
+      }
+
+      label {
+        padding-right: 5px;
+        width: 40px;
+        text-align: right;
+
+        .user-select-def;
+      }
+    }
+
+    .participants-table-label {
+      display: block;
+      padding-left: 20px;
+      margin-bottom: 5px;
+
+      .user-select-def;
+    }
+
+    .participants-table {
+      background: #ffffff;
+      .border-radius-def(5px);
+
+      margin: 0 20px;
+
+      max-height: 135px;
+      overflow: auto;
+
+      .participant-row {
+        height: 40px;
+        line-height: 40px;
+
+        div {
+          display: inline-block;
+          margin-right: -4px; // Address default margin between inline-blocks
+        }
+
+        .participant-name {
+          padding-left: 10px;
+          width: 60%;
+        }
+
+        .participant-level {
+          width: 30%;
+
+          .user-select-def;
+
+          div {
+            display: inline-block;
+
+            width: 25px;
+            height: 25px;
+
+            padding: 5px;
+
+            margin-right: 3px;
+
+            cursor: pointer;
+
+            .border-radius-def(5px);
+            .transition-def(all, @transition-length);
+          }
+
+          div.active, div:hover {
+            background-color: #415973;
+            color: #eeeeee;
+          }
+        }
+
+        .participant-remove {
+          position: relative;
+          width: 10%;
+          text-align: right;
+          padding-right: 10px;
+        }
+
+        .participant-remove div {
+          top: 2px;
+          right: 5px;
+          cursor: pointer;
+        }
+      }
+    }
+
+    .participant-add-form {
+      margin-top: 10px;
+    }
+
+    .participant-email-alert, .project-name-alert {
+      position: absolute;
+      bottom: 0;
+      left: 20px;
+      display: none;
+    }
+  }
+
+  .window-footer {
+    width: 100%;
+    height: 60px;
+
+    background: rgba(56, 56, 56, 0.9);
+
+    padding: 12px 10px;
+
+    .btn.pull-left {
+      margin-right: 5px;
+    }
+
+    .btn.pull-right {
+      margin-left: 5px;
+    }
+  }
+}
diff --git a/src/styles/splash.less b/src/styles/splash.less
new file mode 100644
index 00000000..7a88dd33
--- /dev/null
+++ b/src/styles/splash.less
@@ -0,0 +1,436 @@
+@screen-sm: 768px;
+@screen-md: 992px;
+@screen-lg: 1200px;
+
+html, body {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+}
+
+/* Fix for the white space appearing otherwise on the right of the page, on mobile */
+.body-wrapper {
+  overflow-x: hidden;
+  overflow-y: hidden;
+}
+
+/* NAVBAR */
+@media screen and (min-width: @screen-sm) {
+  .navbar {
+    padding: 20px 0;
+    -webkit-transition: background 200ms ease-in-out, padding 200ms ease-in-out;
+    -moz-transition: background 200ms ease-in-out, padding 200ms ease-in-out;
+    transition: background 200ms ease-in-out, padding 200ms ease-in-out;
+  }
+
+  .top-nav-collapse {
+    padding: 0;
+  }
+}
+
+.navbar {
+  text-transform: uppercase;
+}
+
+.navbar-transparent {
+  background: transparent;
+  border: none;
+
+  .collapse li a, .projects-btn {
+    color: #eee;
+  }
+}
+
+.navbar-toggle {
+  margin-right: 30px;
+}
+
+.navbar-fixed-top {
+  padding: 0;
+}
+
+.navbar .logged-in {
+  display: none;
+}
+
+.sign-out {
+  padding: 10px;
+  width: 40px;
+  margin-top: 5px;
+  margin-left: 5px;
+
+  font-size: 14pt;
+  color: #eeeeee;
+
+  -webkit-border-radius: 25px;
+  -moz-border-radius: 25px;
+  border-radius: 25px;
+
+  -webkit-transition: background 200ms;
+  -moz-transition: background 200ms;
+  -ms-transition: background 200ms;
+  -o-transition: background 200ms;
+  transition: background 200ms;
+}
+
+.sign-out:hover {
+  background: #e3474d;
+  color: #eeeeee;
+}
+
+.sign-out:active {
+  background: #a73438;
+}
+
+.projects-btn {
+  position: relative;
+  top: -4px;
+  color: #eee;
+}
+
+.projects-btn:hover {
+  color: #fff;
+}
+
+a.navbar-brand {
+  width: 40px;
+  height: 40px;
+  padding: 0;
+  margin-right: 5px;
+  margin-top: 5px;
+
+  -webkit-border-radius: 20px;
+  -moz-border-radius: 20px;
+  border-radius: 20px;
+
+  -webkit-transition: background-color 200ms ease-in-out;
+  -moz-transition: background-color 200ms ease-in-out;
+  -ms-transition: background-color 200ms ease-in-out;
+  -o-transition: background-color 200ms ease-in-out;
+  transition: background-color 200ms ease-in-out;
+}
+
+a.navbar-brand:hover {
+  background: #eee !important;
+}
+
+a.navbar-brand:active, a.navbar-brand:visited, .active a.navbar-brand {
+  background: #ccc !important;
+}
+
+.navbar-brand > img {
+  padding: 5px;
+  margin: 0;
+  width: auto;
+  height: 100%;
+}
+
+@media screen and (max-width: @screen-sm) {
+  .navbar-brand {
+    margin-left: 15px;
+  }
+}
+
+#google-signin {
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+
+/* GENERAL CONTENT RULES */
+a {
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: none;
+}
+
+.content-section {
+  padding-top: 50px;
+  padding-bottom: 150px;
+  text-align: center;
+}
+
+.img-caption {
+  margin-top: 10px;
+  color: #666;
+}
+
+@media screen and (min-width: @screen-sm) and (max-width: @screen-md) {
+  .content-section h1 {
+    font-size: 2em;
+    margin-bottom: 40px;
+  }
+
+  .content-section h3 {
+    font-size: 1.5em;
+  }
+}
+
+@media screen and (min-width: @screen-md) and (max-width: @screen-lg) {
+  .content-section h1 {
+    font-size: 3em;
+    margin-bottom: 40px;
+  }
+
+  .content-section h3 {
+    font-size: 1.8em;
+  }
+}
+
+@media screen and (min-width: @screen-lg) {
+  .content-section h1 {
+    font-size: 3em;
+    margin-bottom: 40px;
+  }
+}
+
+.info-points {
+  font-size: 1.2em;
+}
+
+@media screen and (min-width: @screen-sm) and (max-width: @screen-md) {
+  .info-points {
+    font-size: 1em;
+  }
+}
+
+@media screen and (min-width: @screen-md) and (max-width: @screen-lg) {
+  .info-points {
+    font-size: 1.1em;
+  }
+}
+
+.pitch-column {
+  text-align: left;
+}
+
+.jumbotron ul, .content-section ul {
+  list-style: none;
+  padding-left: 25px;
+}
+
+.jumbotron ul li, .content-section ul li {
+  display: block;
+}
+
+.jumbotron ul li:before, .content-section ul li:before {
+  content: "\e080";
+  font-family: 'Glyphicons Halflings', monospace;
+  font-size: 10px;
+  float: left;
+  margin-top: 6px;
+  margin-left: -17px;
+  color: #aaa;
+}
+
+/* CONTENT SECTION COLORS */
+.intro-section {
+  background-color: #fff;
+}
+
+.stakeholder-section {
+  background-color: #f2f2f2;
+}
+
+.modeling-section {
+  background-color: #fff;
+}
+
+.simulation-section {
+  background-color: #f2f2f2;
+}
+
+.technologies-section {
+  background-color: #fff;
+}
+
+.team-section {
+  background-color: #f2f2f2;
+}
+
+.contact-section {
+  background-color: #444;
+}
+
+/* HEADING SECTION */
+.header-section {
+  background-image: linear-gradient(135deg, #1c2e48, #005bbf, #00c5d6);
+}
+
+.jumbotron {
+  margin: 140px 0 120px 0;
+  background-color: inherit;
+}
+
+.jumbotron h1 {
+  color: #eee;
+}
+
+.jumbotron h1 .dc {
+  color: #eee;
+  font-weight: bold;
+}
+
+.jumbotron h2 {
+  margin-top: 50px;
+  color: #eee;
+
+}
+
+/* INTRO SECTION*/
+.intro-section {
+  padding-top: 0;
+  padding-bottom: 50px;
+  text-align: center;
+}
+
+.pitch-container {
+  margin-top: 50px;
+}
+
+p.img-source {
+  font-size: 0.6em;
+  position: relative;
+  top: 20px;
+}
+
+@media screen and (max-width: @screen-sm) {
+  p.img-source {
+    top: 0;
+  }
+}
+
+/* STAKEHOLDERS */
+@media screen and (max-width: @screen-sm) {
+  .stakeholder-section img {
+    position: relative;
+    top: 15px;
+  }
+}
+
+@media screen and (min-width: @screen-sm) and (max-width: @screen-md) {
+  .stakeholder-section img {
+    position: relative;
+    top: 5px;
+  }
+
+  .stakeholder-section h3 {
+    font-size: 1.5em;
+  }
+}
+
+@media screen and (min-width: @screen-md) and (max-width: @screen-lg) {
+  .stakeholder-section img {
+    position: relative;
+    top: 15px;
+  }
+
+  .stakeholder-section h3 {
+    font-size: 1.7em;
+  }
+}
+
+.stakeholder-container div {
+  text-align: left;
+}
+
+/* MOCKUPS */
+.construction-container {
+  margin-top: 20px;
+  margin-bottom: 60px;
+}
+
+.simulation-container > div:first-child {
+  margin-bottom: 30px;
+}
+
+.img-construction-building {
+  margin-top: 10px;
+}
+
+.modeling-section img, .simulation-section img {
+  outline: 2px solid #3f3f3f;
+  padding-right: 0;
+  padding-left: 0;
+}
+
+.simulation-building-row {
+  margin-bottom: 40px;
+}
+
+.key-points {
+  padding-right: 50px;
+}
+
+/* TECHNOLOGIES */
+.web-flow {
+  font-size: 4em;
+}
+
+.technologies-section {
+  h3 {
+    margin-top: 0;
+  }
+
+  .tech-row {
+    padding: 15px;
+
+    -webkit-border-radius: 10px;
+    -moz-border-radius: 10px;
+    border-radius: 10px;
+
+    margin-bottom: 10px;
+  }
+
+  .browser-tech {
+    background-color: #82d0e7;
+  }
+
+  .server-tech {
+    background-color: #edd667;
+  }
+
+  .database-tech {
+    background-color: #ed9c67;
+  }
+
+  .simulator-tech {
+    background-color: #49d65f;
+  }
+}
+
+.technology-arrow {
+  margin-bottom: 20px;
+  margin-top: 15px;
+}
+
+/* TEAM */
+.team-member-description {
+  margin-bottom: 30px;
+}
+
+/* CONTACT */
+.contact-section {
+  margin-bottom: -5px; // Fixes an unwanted margin that appeared when adding the sign-in button to the nav
+
+  h1 {
+    color: #ddd;
+  }
+
+  .names {
+    color: #ddd;
+  }
+
+  a {
+    color: #ddd;
+  }
+
+  a:hover {
+    color: #fff;
+  }
+}
+
+.tudelft-icon {
+  margin-bottom: 10px;
+}
\ No newline at end of file