moving files around after repository merger

24 files changed, 1827 insertions, 0 deletions

diff --git a/res/client/css/Typography.css b/res/client/css/Typography.css
new file mode 100644
index 00000000..d859c76e
--- /dev/null
+++ b/res/client/css/Typography.css
@@ -0,0 +1,24 @@
+/*
+Errno::ENOENT: No such file or directory @ rb_sysopen - Typography.scss
+
+Backtrace:
+/Users/dorgarbash/.rvm/gems/ruby-2.1.2/gems/sass-3.4.9/lib/sass/plugin/compiler.rb:482:in `read'
+/Users/dorgarbash/.rvm/gems/ruby-2.1.2/gems/sass-3.4.9/lib/sass/plugin/compiler.rb:482:in `update_stylesheet'
+/Users/dorgarbash/.rvm/gems/ruby-2.1.2/gems/sass-3.4.9/lib/sass/plugin/compiler.rb:215:in `block in update_stylesheets'
+/Users/dorgarbash/.rvm/gems/ruby-2.1.2/gems/sass-3.4.9/lib/sass/plugin/compiler.rb:209:in `each'
+/Users/dorgarbash/.rvm/gems/ruby-2.1.2/gems/sass-3.4.9/lib/sass/plugin/compiler.rb:209:in `update_stylesheets'
+/Users/dorgarbash/.rvm/gems/ruby-2.1.2/gems/sass-3.4.9/lib/sass/plugin.rb:82:in `update_stylesheets'
+/Users/dorgarbash/.rvm/gems/ruby-2.1.2/gems/sass-3.4.9/lib/sass/exec/sass_scss.rb:350:in `watch_or_update'
+/Users/dorgarbash/.rvm/gems/ruby-2.1.2/gems/sass-3.4.9/lib/sass/exec/sass_scss.rb:50:in `process_result'
+/Users/dorgarbash/.rvm/gems/ruby-2.1.2/gems/sass-3.4.9/lib/sass/exec/base.rb:52:in `parse'
+/Users/dorgarbash/.rvm/gems/ruby-2.1.2/gems/sass-3.4.9/lib/sass/exec/base.rb:19:in `parse!'
+/Users/dorgarbash/.rvm/gems/ruby-2.1.2/gems/sass-3.4.9/bin/scss:13:in `<top (required)>'
+/Users/dorgarbash/.rvm/gems/ruby-2.1.2/bin/scss:23:in `load'
+/Users/dorgarbash/.rvm/gems/ruby-2.1.2/bin/scss:23:in `<main>'
+/Users/dorgarbash/.rvm/gems/ruby-2.1.2/bin/ruby_executable_hooks:15:in `eval'
+/Users/dorgarbash/.rvm/gems/ruby-2.1.2/bin/ruby_executable_hooks:15:in `<main>'
+*/
+body:before {
+  white-space: pre;
+  font-family: monospace;
+  content: "Errno::ENOENT: No such file or directory @ rb_sysopen - Typography.scss"; }
diff --git a/res/client/css/modules/colors.scss b/res/client/css/modules/colors.scss
new file mode 100644
index 00000000..905d239d
--- /dev/null
+++ b/res/client/css/modules/colors.scss
@@ -0,0 +1,15 @@
+$light-grey: #f5f5fa;
+$mid-light-grey: #d4d4d9;
+$mid-grey: #919095;
+$dark-grey: #363636;
+$magenta: #ee3654;
+$dark-magenta: #d10a40;
+$cyan: #33c2e0;
+$blue: #004681;
+$purple: #8b3ab0;
+$orange: #ff8b11;
+$yellow: #fad900;
+$green: #40C200;
+$light-cyan: #D3F2F8;
+$dark-cyan: #8eb6bf;
+$darker-cyan: #1D6E7F;
\ No newline at end of file
diff --git a/res/client/css/modules/mixins.scss b/res/client/css/modules/mixins.scss
new file mode 100644
index 00000000..3c431be0
--- /dev/null
+++ b/res/client/css/modules/mixins.scss
@@ -0,0 +1,17 @@
+@mixin rz-box-shadow($offset-x, $offset-y, $blur, $spread, $color) {
+	-webkit-box-shadow: $offset-x $offset-y $blur $spread $color;
+	   -moz-box-shadow: $offset-x $offset-y $blur $spread $color;
+	        box-shadow: $offset-x $offset-y $blur $spread $color;	
+}
+
+@mixin rz-box-sizing-border() {
+	-webkit-box-sizing: border-box;
+	   -moz-box-sizing: border-box;
+	        box-sizing: border-box;
+}
+
+@mixin rz-box-sizing-padding() {
+	-webkit-box-sizing: padding-box;
+	   -moz-box-sizing: padding-box;
+	        box-sizing: padding-box;
+}
\ No newline at end of file
diff --git a/res/client/css/modules/positions.scss b/res/client/css/modules/positions.scss
new file mode 100644
index 00000000..8af9546f
--- /dev/null
+++ b/res/client/css/modules/positions.scss
@@ -0,0 +1,11 @@
+/* Vertical spacing */
+$one-baseline: 12px;
+$two-baselines: 24px;
+$three-baselines: 36px;
+$four-baselines: 48px;
+
+$icon-height: 20px;
+
+/* Horizontal spacing */
+$doc-margin: 70px;
+
diff --git a/res/client/css/modules/typography.scss b/res/client/css/modules/typography.scss
new file mode 100644
index 00000000..6a8c1102
--- /dev/null
+++ b/res/client/css/modules/typography.scss
@@ -0,0 +1,55 @@
+// Font font-family:
+
+@font-face {
+	font-family: 'Source_Regular';
+	src: url('../font/sourcesanspro_regular/SourceSansPro-Regular-webfont.eot'); /* IE9 Compat Modes */
+	src: url('../font/sourcesanspro_regular/SourceSansPro-Regular-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+       url('../font/sourcesanspro_regular/SourceSansPro-Regular-webfont.woff') format('woff'), /* Modern Browsers */
+       url('../font/sourcesanspro_regular/SourceSansPro-Regular-webfont.ttf')  format('truetype'); /* Safari, Android, iOS */
+}
+
+@font-face {
+	font-family: 'Source_Semibold';
+	src: url('../font/sourcesanspro_semibold/SourceSansPro-Semibold-webfont.eot'); /* IE9 Compat Modes */
+	src: url('../font/sourcesanspro_semibold/SourceSansPro-Semibold-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+       url('../font/sourcesanspro_semibold/SourceSansPro-Semibold-webfont.woff') format('woff'), /* Modern Browsers */
+       url('../font/sourcesanspro_semibold/SourceSansPro-Semibold-webfont.ttf')  format('truetype'); /* Safari, Android, iOS */
+}
+
+@font-face {
+	font-family: 'Source_Bold';
+	src: url('../font/sourcesanspro_bold/SourceSansPro-Bold-webfont.eot'); /* IE9 Compat Modes */
+	src: url('../font/sourcesanspro_bold/SourceSansPro-Bold-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+       url('../font/sourcesanspro_bold/SourceSansPro-Bold-webfont.woff') format('woff'), /* Modern Browsers */
+       url('../font/sourcesanspro_bold/SourceSansPro-Bold-webfont.ttf')  format('truetype'); /* Safari, Android, iOS */
+}
+
+//Font size
+$h1-size: 30px;
+$h2-size: 24px;
+$h3-size: 18px;
+$h4-size: 14px;
+$h5-size: 12px;
+
+//Font weights
+$light: 100;
+$regular: 400;
+$bold: 600;
+
+// Base font
+$base-font-family: 'Source_Regular', sans-serif;
+$semibold-font-family: 'Source_Semibold', sans-serif;
+$bold-font-family: 'Source_Bold', sans-serif;
+
+$base-font-weight: $regular;
+$base-font-size: 12px;
+$base-line-height: 1.4;
+
+
+// Fixed Font
+$fixed-font-family: monospace;
+$fixed-font-size: 85%;
+$fixed-line-height: $base-line-height;
+
+// Headings
+$header-font-weight: $bold;
\ No newline at end of file
diff --git a/res/client/css/partials/base.scss b/res/client/css/partials/base.scss
new file mode 100644
index 00000000..bd9eba9e
--- /dev/null
+++ b/res/client/css/partials/base.scss
@@ -0,0 +1,79 @@
+@import "../modules/colors";
+@import "../modules/mixins";
+@import "../modules/typography";
+@import "../modules/positions";
+
+//Globals
+html, body {
+  height: 100%;
+  font-family: $base-font-family;
+  overflow-y: hidden;
+}
+
+body {
+  overflow-y: hidden;
+  overflow-x:auto;
+  margin: 0;
+  min-width: 980px;
+  padding: 0;
+  color: #FFF;
+  font-size: 12px;
+  background-color:#f5f5fa;
+}
+
+a{
+  text-decoration: none;
+  color: $mid-grey;
+}
+
+a:link {
+  color: $mid-grey;
+}
+
+a:visited {
+  color: $mid-grey;
+}
+
+a:hover {
+  color: $dark-grey;
+}
+
+a:active {
+  color: $mid-grey;
+}
+
+//input box stuff
+input{
+  background-color: white;
+  color: $dark-grey;
+  border: 0;
+  &:focus {
+    border: 0;
+    outline: 0;
+    background-color: white;
+  }
+  font-size: $h3-size;
+}
+
+::-webkit-input-placeholder { /* WebKit browsers */
+  color:    $mid-grey;
+}
+:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
+  color:    $mid-grey;
+  opacity:  1;
+}
+::-moz-placeholder { /* Mozilla Firefox 19+ */
+  color:    $mid-grey;
+  opacity:  1;
+}
+:-ms-input-placeholder { /* Internet Explorer 10+ */
+  color:    $mid-grey;
+}
+
+.rhizi-logo{
+  position:fixed;
+  color: $dark-grey;
+  bottom:10px;
+  right:10px;
+  vertical-align: middle;
+}
diff --git a/res/client/css/partials/buttons.scss b/res/client/css/partials/buttons.scss
new file mode 100644
index 00000000..379157c4
--- /dev/null
+++ b/res/client/css/partials/buttons.scss
@@ -0,0 +1,24 @@
+.btn-regular {
+	cursor: pointer;
+	background-color: white;
+	font-family: $base-font-family;
+	font-size: $h4-size;
+	color: $blue;
+	padding: $one-baseline $two-baselines $one-baseline $two-baselines;
+	margin-right: 6px;	
+	border-radius: 4px;
+	border: none;
+}
+
+.btn-regular:hover {
+	color: $dark-cyan;
+	border-color: $dark-cyan;
+}
+
+.btn-regular:focus {
+	outline: none;
+}
+
+.btn-regular-outline {
+	border: 1px solid $blue;
+}
\ No newline at end of file
diff --git a/res/client/css/partials/dev-area.scss b/res/client/css/partials/dev-area.scss
new file mode 100644
index 00000000..fa1cfbf3
--- /dev/null
+++ b/res/client/css/partials/dev-area.scss
@@ -0,0 +1,32 @@
+.debug-ui {
+  display: none;
+}
+
+body.debug {
+    .debug-ui {
+      display: inline;
+      position:fixed;
+      bottom:70px;
+      left:10px;
+      text-decoration: none;
+    }
+
+    .debug-ui-row {
+      float: left;
+      width: 100%;
+    }
+
+    .debug-ui-left {
+      float: left;
+      width: 50%;
+    }
+
+    .debug-ui-right {
+      float: right;
+      width: 50%;
+    }
+
+    .debug{
+
+    }
+}
diff --git a/res/client/css/partials/graph-view.scss b/res/client/css/partials/graph-view.scss
new file mode 100644
index 00000000..e5d3f1c1
--- /dev/null
+++ b/res/client/css/partials/graph-view.scss
@@ -0,0 +1,206 @@
+.graph-view {
+  width:100%;
+  background-color: #f5f5fa; //$light-grey
+  position: relative;
+}
+
+.node {
+  stroke-width: 1px;
+  font-size: $h3-size;
+  z-index:100;
+}
+
+.ghostnode{
+
+}
+
+.circle {
+  z-index: 100;
+  pointer-events:all;
+}
+
+.nodetext {
+  fill: $dark-grey;
+  font-size: $h3-size;
+  z-index:3;
+}
+
+// editor for node text
+.svg-input-fo-node {
+  fill: $dark-grey;
+  z-index:3;
+}
+
+.svg-input-fo-node input {
+  font-size: $h3-size;
+  background-color: transparent;
+}
+
+.linklabel{
+  stroke: $dark-grey;
+  font-size: $h4-size;
+  background-color: transparent;
+}
+
+// editor for link text
+.svg-input-fo-link {
+    stroke: $dark-grey;
+}
+
+.svg-input-fo-link input {
+  font-size: $h4-size;;
+  background-color: transparent;
+}
+
+.link {
+  fill: none;
+  stroke: $mid-grey;
+  stroke-width: 1px;
+  stroke-opacity: 0.5;
+  z-index:1;
+}
+
+.ghostlink {
+  opacity: 0.0;
+  fill: none;
+  stroke-width: 15px;
+  z-index:2; /* higher than link, lower than node */
+}
+
+.circle.chosen {
+  stroke: $cyan;
+  stroke-opacity: 0.5;
+}
+.circle.enter {
+  stroke: $cyan;
+  stroke-opacity: 0.5;
+}
+
+.circle.bubble {
+  fill: rgba(255,255,255,0.9);
+  pointer-events:none;
+}
+.circle.exit {
+  stroke: $cyan;
+  stroke-opacity: 0.5;
+}
+.circle.chainlink {
+  stroke: #AAA;
+}
+
+.circle.temp {
+  box-shadow: 0 0 40px #FFFF8F;
+}
+
+.circle.temp, .circle.chosen {
+  stroke-width: 3px;
+}
+
+.circle.temp.empty {
+  stroke-width: 1.5px;
+}
+
+/* Per node and edge type (type is a property of nodes and links) styling
+ * note that this should be automatically generated somehow for user settings.
+ */
+
+.circle.person {
+  fill: $blue;
+}
+
+.circle.club {
+  fill: $magenta;
+}
+
+.circle.skill {
+  fill: $yellow;
+}
+
+.circle.interest {
+  fill: $purple;
+}
+
+.circle.project {
+  fill: $green;
+}
+
+.circle.third-internship-proposal {
+  fill: $cyan;
+}
+
+.circle.internship {
+  fill: $orange;
+}
+
+.circle.empty {
+  fill: $mid-grey;
+}
+
+.circle.chainlink {
+  fill: $dark-grey;
+}
+
+
+/* Selected parts of the graph, right now by clicking, later with search. */
+
+.notselected {
+  opacity: 0.2;
+}
+
+.graph.link.temp_and {
+  stroke-dasharray: 3,3;
+}
+
+.highlightlink {
+  fill: none;
+  stroke: $cyan;
+  stroke-opacity: 0.5;
+  stroke-width: 2px;
+  z-index:1;
+}
+
+.link.enter, .link.exit, .link.selected {
+  fill: none;
+  stroke: $cyan;
+  stroke-opacity: 0.5;
+  stroke-width: 2px;
+  z-index:1;
+}
+
+#editbox input{
+  width:130px;
+}
+
+.overlay {
+  fill:none;
+  pointer-events: all;
+  z-index:0;
+
+}
+
+.editinfo{
+  position: fixed;
+  top:-40px;
+  z-index:5;
+}
+
+.editlinkinfo{
+  position: fixed;
+  top:-40px;
+  z-index:5;
+}
+
+#editlinkname{
+  width:inherit;
+  height:inherit;
+  font-size: $h3-size;
+
+}
+
+#editname{
+  width:inherit;
+  height:inherit;
+  font-size: $h3-size;
+
+}
+
diff --git a/res/client/css/partials/grid.scss b/res/client/css/partials/grid.scss
new file mode 100644
index 00000000..e69de29b
--- /dev/null
+++ b/res/client/css/partials/grid.scss
diff --git a/res/client/css/partials/info-card.scss b/res/client/css/partials/info-card.scss
new file mode 100644
index 00000000..2b8efe20
--- /dev/null
+++ b/res/client/css/partials/info-card.scss
@@ -0,0 +1,130 @@
+@import '../modules/mixins'; // For box-shadow and box-sizing
+
+.info-container {
+  position: absolute;
+  right: $doc-margin;
+  top: $two-baselines;
+}
+
+.subtitle{
+  font-style:italic;
+  color: #bbb;
+  font-size: 12px;
+  float:right;
+}
+
+.edge_info, .info {
+  color: $dark-grey;
+  background-color: white;
+  @include rz-box-shadow(0px, 1px, 6px, 0px, rgba(0,0,0,0.3) );
+  position: relative;
+  width:250px;
+  padding: 24px;
+  @include rz-box-sizing-border;
+  border-top: 6px solid $dark-grey;
+}
+
+// change card top border color by node type
+.info.type-person {
+  border-top: 6px solid $blue;
+}
+
+.info.type-club {
+  border-top: 6px solid $magenta;
+}
+
+.info.type-skill {
+  border-top: 6px solid $yellow;
+}
+
+.info.type-third-internship-proposal {
+  border-top: 6px solid $cyan;
+}
+
+.info.type-internship {
+  border-top: 6px solid $orange;
+}
+
+.info.type-interest {
+  border-top: 6px solid $purple;
+}
+
+.info.type-empty {
+  border-top: 6px solid $mid-grey;
+}
+
+.info.type-chainlink {
+  border-top: 6px solid $dark-grey;
+}
+
+.info.type-project {
+  border-top: 6px solid $green;
+}
+
+// card elements styles
+
+.info .info-card-attr {
+  display: block;
+  text-transform: capitalize;
+  font-size: $h4-size;
+  font-family: $bold-font-family;
+}
+
+.info .info-card-attr-val {
+  display: block;
+  text-transform: capitalize;
+  font-size: $h2-size;
+  margin: 12px 0px 24px 0px;
+}
+
+.info-card-attr-val input{
+  width: 100%;
+  font-size: $h2-size;
+}
+
+.info-card-url input{
+    font-size: $h4-size;
+    margin-left: 20px;
+}
+
+.info-card-url:before { //url icon before the url line
+  position: absolute;
+  margin-top: 7px;
+  content: "";
+  background: url(../img/url-icon.png);
+  min-width: 14px;
+  min-height: 14px;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+.select-dropdown {
+  border: none;
+  font-family: $base-font-family;
+  background-color: white;
+  font-size: $h3-size;
+  color: $dark-grey;
+  width: 100%;
+  padding: 0;
+  margin: 12px 0px 24px 0px;
+}
+
+.select-dropdown:focus {
+  outline: none;
+}
+
+.select-dropdown option{
+  font-size: $h3-size;
+  color: $dark-grey;
+  border: 1px solid $dark-grey;
+}
+
+.info hr {
+  width: 250px;
+  position: relative;
+  left: -24px;
+  border: none;
+  background-color: $mid-light-grey;
+  height: 2px;
+  margin: $two-baselines 0px $two-baselines 0px;
+}
\ No newline at end of file
diff --git a/res/client/css/partials/input-bar.scss b/res/client/css/partials/input-bar.scss
new file mode 100644
index 00000000..589731ee
--- /dev/null
+++ b/res/client/css/partials/input-bar.scss
@@ -0,0 +1,101 @@
+@import '../modules/mixins'; // For box-shadow
+
+.input-container {
+  position: fixed;
+  margin: $two-baselines 0 0 $doc-margin;
+
+  form {
+    display: inline;
+  }
+}
+
+
+.input-bar {
+  font-family: $base-font-family;
+  color: $mid-grey;
+  max-height: $three-baselines;
+  width: 280px;
+  padding: 6px 8px 5px 8px;
+  border: 1px solid $mid-grey;
+  @include rz-box-sizing-border;
+  background: white;
+  transition-property: width;
+  transition-duration: 200ms;
+  transition-timing-function: ease-in;
+  &:focus {
+    border: 1px solid $mid-grey;
+    width: 520px;
+    @include rz-box-shadow(0px, 1px, 6px, 0px, rgba(0,0,0,0.3) );
+  }  
+}
+
+#textanalyser.ui-autocomplete-input {
+  font-family: $base-font-family;
+  color: $mid-grey;
+}
+
+.add-button {
+  float: right;
+  background: url(../img/plus-button.png);
+  background-position: center;
+  background-repeat: no-repeat;
+  background-color: $magenta;
+  position:relative;
+  height: 36px;
+  width: 36px;
+  left: -36px;
+  border: 0;
+}
+
+.add-button:hover {
+  background-color: $dark-magenta;
+}
+
+.add-button:focus {
+  outline: none;
+}
+
+.suggestion{
+  position: relative;
+  color: $dark-grey;
+  max-height: 580px;
+  overflow-y: scroll;
+  font-size: $h3-size;
+  list-style-type: none;
+  width: inherit;
+  margin-top: 6px;
+  border: 1px solid $mid-grey;
+  @include rz-box-sizing-border;
+  background: white;
+  z-index: 100;
+  @include rz-box-shadow(0px, 3px, 6px, 0px, rgba(0,0,0,0.3) );
+}
+
+.suggestion-item {
+  padding: 6px 0px 6px 18px;
+  cursor: pointer;
+}
+
+.suggestion-item.selected, .suggestion-item:hover {
+  padding-left: 16px;
+  background-color: $light-grey;
+  border-left: 2px solid $cyan;
+  @include rz-box-sizing-border;
+}
+
+.suggestion td{
+  position:fixed;
+
+}
+
+.ui-helper-hidden-accessible{
+  position:fixed;
+  top: $three-baselines+$four-baselines+$four-baselines+35px+$three-baselines;
+  left:$doc-margin+8px;
+  text-shadow: -1px 1px 8px #E DE275, 1px -1px 8px #EDE275;
+  font-size:16px;
+}
+
+.ui-helper-hidden-accessible > div {
+    color: $dark-grey;
+}
diff --git a/res/client/css/partials/input-bubble.scss b/res/client/css/partials/input-bubble.scss
new file mode 100644
index 00000000..657e95de
--- /dev/null
+++ b/res/client/css/partials/input-bubble.scss
@@ -0,0 +1,15 @@
+.typeselection{
+	color: $dark-grey;
+	font-size: $h2-size;
+  position:fixed;
+  left:0;
+  top:-300px;
+  pointer-events:none;
+}
+
+.typeselection td{
+}
+
+#keys{
+  opacity: 0.5;
+}
diff --git a/res/client/css/partials/metro-view.scss b/res/client/css/partials/metro-view.scss
new file mode 100644
index 00000000..e69de29b
--- /dev/null
+++ b/res/client/css/partials/metro-view.scss
diff --git a/res/client/css/partials/reset.scss b/res/client/css/partials/reset.scss
new file mode 100644
index 00000000..1a2e6b39
--- /dev/null
+++ b/res/client/css/partials/reset.scss
@@ -0,0 +1,49 @@
+/* http://meyerweb.com/eric/tools/css/reset/
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  /*font: inherit; */
+  font-family: $base-font-family;
+  vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+  display: block;
+}
+body {
+  line-height: 1;
+}
+ol, ul {
+  list-style: none;
+}
+blockquote, q {
+  quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+  content: '';
+  content: none;
+}
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
diff --git a/res/client/css/partials/search-bar.scss b/res/client/css/partials/search-bar.scss
new file mode 100644
index 00000000..b9f0de7d
--- /dev/null
+++ b/res/client/css/partials/search-bar.scss
@@ -0,0 +1,66 @@
+@import '../modules/mixins'; // For box-shadow
+
+.search-bar{
+  position: relative;
+  width:100%;
+  height:$four-baselines;
+  background: white;
+  @include rz-box-shadow(0px, 1px, 6px, 0px, rgba(0,0,0,0.3) );
+  z-index: 100;
+}
+
+.search-input{
+  width: 70%;
+  height:$icon-height;
+  float: left;
+  margin: 8px 12px 12px $doc-margin;
+}
+
+.search-input:before {
+  content: "";
+  background: url(../img/search-icon.png);
+  padding: 0px 10px 0px 10px;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+#search {
+  font-family: $base-font-family;
+  font-size: $h3-size;
+  width: 80%;
+}
+
+#search-suggestion {
+  position: absolute;
+  width: 70%;
+  margin-left: $doc-margin;
+  top: $three-baselines + 6px;
+}
+
+#search-suggestion .suggestion-item {
+  padding: $one-baseline 0px $one-baseline $two-baselines;
+}
+
+#search-suggestion .suggestion-item.selected, #search-suggestion .suggestion-item:hover {
+  padding: $one-baseline 0px $one-baseline 22px;
+}
+
+
+
+.export {
+  cursor: pointer;
+  text-align: right;
+  width: 60px;
+  float: right;
+  color: $dark-grey;
+  font-size: $h5-size;
+  margin: 14px $doc-margin 12px 12px ;
+}
+
+.export:before {
+  content: "";
+  background: url(../img/export.png);
+  padding: 0px 9px 0px 9px;
+  background-position: center;
+  background-repeat: no-repeat;
+}
\ No newline at end of file
diff --git a/res/client/css/partials/task-alert.scss b/res/client/css/partials/task-alert.scss
new file mode 100644
index 00000000..504f008b
--- /dev/null
+++ b/res/client/css/partials/task-alert.scss
@@ -0,0 +1,37 @@
+.task-alert{
+  position:relative;
+  width: 100%;
+  min-height:$four-baselines;
+  text-align: center;
+  background-color: $light-cyan;
+  color: $darker-cyan;
+  border-top: 1px solid $dark-cyan;
+  border-bottom: 1px solid $dark-cyan;
+}
+
+.task-desc{
+  display: inline-block;
+  width:70%;
+  text-align: center;
+  font-size: $h3-size;
+  margin: 12px $doc-margin 12px $doc-margin;
+}
+
+.task-close-button {
+  cursor: pointer;
+  font-size: $h4-size;
+  margin: 15px $doc-margin 15px 15px;
+  float: right;
+  width: $doc-margin;
+  text-align: right;
+} 
+
+.task-close-button:after {
+  content: " ";
+  min-height: $icon-height;
+  padding-right: $icon-height;
+  margin-left: 4px;
+  background: url(../img/close-alert-button.png);
+  background-position: center;
+  background-repeat: no-repeat;
+}
diff --git a/res/client/css/partials/top-bar.scss b/res/client/css/partials/top-bar.scss
new file mode 100644
index 00000000..cffd200a
--- /dev/null
+++ b/res/client/css/partials/top-bar.scss
@@ -0,0 +1,60 @@
+.top-bar{
+  position:relative;
+  top:0;
+  left:0;
+  width:100%;
+  min-height:$three-baselines;
+  background-color:$dark-grey;
+}
+
+.doc-title{
+  float: left;
+  font-family: $semibold-font-family;
+  color: $light-grey;
+  margin: 10px $doc-margin 10px $doc-margin;
+  font-size: $h3-size;
+}
+
+.user-area {
+  float: right;
+  margin: 3px $doc-margin 3px $doc-margin;
+}
+
+.username {
+  display: inline-block;
+  text-align: right;
+}
+
+.profile-circle{
+  border-radius: 50%;
+  width: 30px;
+  height: 30px;
+  background: $cyan;
+  display: inline-block;
+}
+
+.profile-initials {
+  display: inline-block;
+  color: $light-grey;
+  font-size: $h4-size;
+  position: relative;
+  left: -27px;
+  top: -10px;
+}
+
+.profile-username {
+  display: inline-block;
+  top:12px;
+  color: $light-grey;
+  position: relative;
+  left: -20px;
+  top: -10px;
+}
+
+.organization-logo {
+  display: inline-block;
+  margin-left: 12px;
+  background: url(../img/CRI-logo.png);
+  min-height: 30px;
+  min-width: 30px;
+}
\ No newline at end of file
diff --git a/res/client/css/partials/typography.scss b/res/client/css/partials/typography.scss
new file mode 100644
index 00000000..388afef5
--- /dev/null
+++ b/res/client/css/partials/typography.scss
@@ -0,0 +1,21 @@
+/* Headings */
+
+h1 {
+  font-size: $h1-size;
+}
+
+h2 {
+  font-size: $h2-size;
+}
+
+h1 {
+  font-size: $h3-size;
+}
+
+h2 {
+  font-size: $h4-size;
+}
+
+h1 {
+  font-size: $h5-size;
+}
diff --git a/res/client/css/positions.css b/res/client/css/positions.css
new file mode 100644
index 00000000..e5fd07bf
--- /dev/null
+++ b/res/client/css/positions.css
@@ -0,0 +1,24 @@
+/*
+Errno::ENOENT: No such file or directory @ rb_sysopen - positions.scss
+
+Backtrace:
+/Users/dorgarbash/.rvm/gems/ruby-2.1.2/gems/sass-3.4.9/lib/sass/plugin/compiler.rb:482:in `read'
+/Users/dorgarbash/.rvm/gems/ruby-2.1.2/gems/sass-3.4.9/lib/sass/plugin/compiler.rb:482:in `update_stylesheet'
+/Users/dorgarbash/.rvm/gems/ruby-2.1.2/gems/sass-3.4.9/lib/sass/plugin/compiler.rb:215:in `block in update_stylesheets'
+/Users/dorgarbash/.rvm/gems/ruby-2.1.2/gems/sass-3.4.9/lib/sass/plugin/compiler.rb:209:in `each'
+/Users/dorgarbash/.rvm/gems/ruby-2.1.2/gems/sass-3.4.9/lib/sass/plugin/compiler.rb:209:in `update_stylesheets'
+/Users/dorgarbash/.rvm/gems/ruby-2.1.2/gems/sass-3.4.9/lib/sass/plugin.rb:82:in `update_stylesheets'
+/Users/dorgarbash/.rvm/gems/ruby-2.1.2/gems/sass-3.4.9/lib/sass/exec/sass_scss.rb:350:in `watch_or_update'
+/Users/dorgarbash/.rvm/gems/ruby-2.1.2/gems/sass-3.4.9/lib/sass/exec/sass_scss.rb:50:in `process_result'
+/Users/dorgarbash/.rvm/gems/ruby-2.1.2/gems/sass-3.4.9/lib/sass/exec/base.rb:52:in `parse'
+/Users/dorgarbash/.rvm/gems/ruby-2.1.2/gems/sass-3.4.9/lib/sass/exec/base.rb:19:in `parse!'
+/Users/dorgarbash/.rvm/gems/ruby-2.1.2/gems/sass-3.4.9/bin/scss:13:in `<top (required)>'
+/Users/dorgarbash/.rvm/gems/ruby-2.1.2/bin/scss:23:in `load'
+/Users/dorgarbash/.rvm/gems/ruby-2.1.2/bin/scss:23:in `<main>'
+/Users/dorgarbash/.rvm/gems/ruby-2.1.2/bin/ruby_executable_hooks:15:in `eval'
+/Users/dorgarbash/.rvm/gems/ruby-2.1.2/bin/ruby_executable_hooks:15:in `<main>'
+*/
+body:before {
+  white-space: pre;
+  font-family: monospace;
+  content: "Errno::ENOENT: No such file or directory @ rb_sysopen - positions.scss"; }
diff --git a/res/client/css/style.css b/res/client/css/style.css
new file mode 100644
index 00000000..ef0de1a7
--- /dev/null
+++ b/res/client/css/style.css
@@ -0,0 +1,709 @@
+@import url(vendor/ui.css);
+@font-face {
+  font-family: 'Source_Regular';
+  src: url("../font/sourcesanspro_regular/SourceSansPro-Regular-webfont.eot");
+  /* IE9 Compat Modes */
+  src: url("../font/sourcesanspro_regular/SourceSansPro-Regular-webfont.eot?#iefix") format("embedded-opentype"), url("../font/sourcesanspro_regular/SourceSansPro-Regular-webfont.woff") format("woff"), url("../font/sourcesanspro_regular/SourceSansPro-Regular-webfont.ttf") format("truetype");
+  /* Safari, Android, iOS */ }
+@font-face {
+  font-family: 'Source_Semibold';
+  src: url("../font/sourcesanspro_semibold/SourceSansPro-Semibold-webfont.eot");
+  /* IE9 Compat Modes */
+  src: url("../font/sourcesanspro_semibold/SourceSansPro-Semibold-webfont.eot?#iefix") format("embedded-opentype"), url("../font/sourcesanspro_semibold/SourceSansPro-Semibold-webfont.woff") format("woff"), url("../font/sourcesanspro_semibold/SourceSansPro-Semibold-webfont.ttf") format("truetype");
+  /* Safari, Android, iOS */ }
+@font-face {
+  font-family: 'Source_Bold';
+  src: url("../font/sourcesanspro_bold/SourceSansPro-Bold-webfont.eot");
+  /* IE9 Compat Modes */
+  src: url("../font/sourcesanspro_bold/SourceSansPro-Bold-webfont.eot?#iefix") format("embedded-opentype"), url("../font/sourcesanspro_bold/SourceSansPro-Bold-webfont.woff") format("woff"), url("../font/sourcesanspro_bold/SourceSansPro-Bold-webfont.ttf") format("truetype");
+  /* Safari, Android, iOS */ }
+/* Vertical spacing */
+/* Horizontal spacing */
+html, body {
+  height: 100%;
+  font-family: "Source_Regular", sans-serif;
+  overflow-y: hidden; }
+
+body {
+  overflow-y: hidden;
+  overflow-x: auto;
+  margin: 0;
+  min-width: 980px;
+  padding: 0;
+  color: #FFF;
+  font-size: 12px;
+  background-color: #f5f5fa; }
+
+a {
+  text-decoration: none;
+  color: #919095; }
+
+a:link {
+  color: #919095; }
+
+a:visited {
+  color: #919095; }
+
+a:hover {
+  color: #363636; }
+
+a:active {
+  color: #919095; }
+
+input {
+  background-color: white;
+  color: #363636;
+  border: 0;
+  font-size: 18px; }
+  input:focus {
+    border: 0;
+    outline: 0;
+    background-color: white; }
+
+::-webkit-input-placeholder {
+  /* WebKit browsers */
+  color: #919095; }
+
+:-moz-placeholder {
+  /* Mozilla Firefox 4 to 18 */
+  color: #919095;
+  opacity: 1; }
+
+::-moz-placeholder {
+  /* Mozilla Firefox 19+ */
+  color: #919095;
+  opacity: 1; }
+
+:-ms-input-placeholder {
+  /* Internet Explorer 10+ */
+  color: #919095; }
+
+.rhizi-logo {
+  position: fixed;
+  color: #363636;
+  bottom: 10px;
+  right: 10px;
+  vertical-align: middle; }
+
+/* http://meyerweb.com/eric/tools/css/reset/
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  /*font: inherit; */
+  font-family: "Source_Regular", sans-serif;
+  vertical-align: baseline; }
+
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+  display: block; }
+
+body {
+  line-height: 1; }
+
+ol, ul {
+  list-style: none; }
+
+blockquote, q {
+  quotes: none; }
+
+blockquote:before, blockquote:after,
+q:before, q:after {
+  content: '';
+  content: none; }
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0; }
+
+.btn-regular {
+  cursor: pointer;
+  background-color: white;
+  font-family: "Source_Regular", sans-serif;
+  font-size: 14px;
+  color: #004681;
+  padding: 12px 24px 12px 24px;
+  margin-right: 6px;
+  border-radius: 4px;
+  border: none; }
+
+.btn-regular:hover {
+  color: #8eb6bf;
+  border-color: #8eb6bf; }
+
+.btn-regular:focus {
+  outline: none; }
+
+.btn-regular-outline {
+  border: 1px solid #004681; }
+
+.debug-ui {
+  display: none; }
+
+body.debug .debug-ui {
+  display: inline;
+  position: fixed;
+  bottom: 70px;
+  left: 10px;
+  text-decoration: none; }
+body.debug .debug-ui-row {
+  float: left;
+  width: 100%; }
+body.debug .debug-ui-left {
+  float: left;
+  width: 50%; }
+body.debug .debug-ui-right {
+  float: right;
+  width: 50%; }
+
+.graph-view {
+  width: 100%;
+  background-color: #f5f5fa;
+  position: relative; }
+
+.node {
+  stroke-width: 1px;
+  font-size: 18px;
+  z-index: 100; }
+
+.circle {
+  z-index: 100;
+  pointer-events: all; }
+
+.nodetext {
+  fill: #363636;
+  font-size: 18px;
+  z-index: 3; }
+
+.svg-input-fo-node {
+  fill: #363636;
+  z-index: 3; }
+
+.svg-input-fo-node input {
+  font-size: 18px;
+  background-color: transparent; }
+
+.linklabel {
+  stroke: #363636;
+  font-size: 14px;
+  background-color: transparent; }
+
+.svg-input-fo-link {
+  stroke: #363636; }
+
+.svg-input-fo-link input {
+  font-size: 14px;
+  background-color: transparent; }
+
+.link {
+  fill: none;
+  stroke: #919095;
+  stroke-width: 1px;
+  stroke-opacity: 0.5;
+  z-index: 1; }
+
+.ghostlink {
+  opacity: 0.0;
+  fill: none;
+  stroke-width: 15px;
+  z-index: 2;
+  /* higher than link, lower than node */ }
+
+.circle.chosen {
+  stroke: #33c2e0;
+  stroke-opacity: 0.5; }
+
+.circle.enter {
+  stroke: #33c2e0;
+  stroke-opacity: 0.5; }
+
+.circle.bubble {
+  fill: rgba(255, 255, 255, 0.9);
+  pointer-events: none; }
+
+.circle.exit {
+  stroke: #33c2e0;
+  stroke-opacity: 0.5; }
+
+.circle.chainlink {
+  stroke: #AAA; }
+
+.circle.temp {
+  box-shadow: 0 0 40px #FFFF8F; }
+
+.circle.temp, .circle.chosen {
+  stroke-width: 3px; }
+
+.circle.temp.empty {
+  stroke-width: 1.5px; }
+
+/* Per node and edge type (type is a property of nodes and links) styling
+ * note that this should be automatically generated somehow for user settings.
+ */
+.circle.person {
+  fill: #004681; }
+
+.circle.club {
+  fill: #ee3654; }
+
+.circle.skill {
+  fill: #fad900; }
+
+.circle.interest {
+  fill: #8b3ab0; }
+
+.circle.project {
+  fill: #40c200; }
+
+.circle.third-internship-proposal {
+  fill: #33c2e0; }
+
+.circle.internship {
+  fill: #ff8b11; }
+
+.circle.empty {
+  fill: #919095; }
+
+.circle.chainlink {
+  fill: #363636; }
+
+/* Selected parts of the graph, right now by clicking, later with search. */
+.notselected {
+  opacity: 0.2; }
+
+.graph.link.temp_and {
+  stroke-dasharray: 3,3; }
+
+.highlightlink {
+  fill: none;
+  stroke: #33c2e0;
+  stroke-opacity: 0.5;
+  stroke-width: 2px;
+  z-index: 1; }
+
+.link.enter, .link.exit, .link.selected {
+  fill: none;
+  stroke: #33c2e0;
+  stroke-opacity: 0.5;
+  stroke-width: 2px;
+  z-index: 1; }
+
+#editbox input {
+  width: 130px; }
+
+.overlay {
+  fill: none;
+  pointer-events: all;
+  z-index: 0; }
+
+.editinfo {
+  position: fixed;
+  top: -40px;
+  z-index: 5; }
+
+.editlinkinfo {
+  position: fixed;
+  top: -40px;
+  z-index: 5; }
+
+#editlinkname {
+  width: inherit;
+  height: inherit;
+  font-size: 18px; }
+
+#editname {
+  width: inherit;
+  height: inherit;
+  font-size: 18px; }
+
+.input-container {
+  position: fixed;
+  margin: 24px 0 0 70px; }
+  .input-container form {
+    display: inline; }
+
+.input-bar {
+  font-family: "Source_Regular", sans-serif;
+  color: #919095;
+  max-height: 36px;
+  width: 280px;
+  padding: 6px 8px 5px 8px;
+  border: 1px solid #919095;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  background: white;
+  transition-property: width;
+  transition-duration: 200ms;
+  transition-timing-function: ease-in; }
+  .input-bar:focus {
+    border: 1px solid #919095;
+    width: 520px;
+    -webkit-box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.3);
+    -moz-box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.3);
+    box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.3); }
+
+#textanalyser.ui-autocomplete-input {
+  font-family: "Source_Regular", sans-serif;
+  color: #919095; }
+
+.add-button {
+  float: right;
+  background: url(../img/plus-button.png);
+  background-position: center;
+  background-repeat: no-repeat;
+  background-color: #ee3654;
+  position: relative;
+  height: 36px;
+  width: 36px;
+  left: -36px;
+  border: 0; }
+
+.add-button:hover {
+  background-color: #d10a40; }
+
+.add-button:focus {
+  outline: none; }
+
+.suggestion {
+  position: relative;
+  color: #363636;
+  max-height: 580px;
+  overflow-y: scroll;
+  font-size: 18px;
+  list-style-type: none;
+  width: inherit;
+  margin-top: 6px;
+  border: 1px solid #919095;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  background: white;
+  z-index: 100;
+  -webkit-box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.3);
+  -moz-box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.3);
+  box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.3); }
+
+.suggestion-item {
+  padding: 6px 0px 6px 18px;
+  cursor: pointer; }
+
+.suggestion-item.selected, .suggestion-item:hover {
+  padding-left: 16px;
+  background-color: #f5f5fa;
+  border-left: 2px solid #33c2e0;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box; }
+
+.suggestion td {
+  position: fixed; }
+
+.ui-helper-hidden-accessible {
+  position: fixed;
+  top: 203px;
+  left: 78px;
+  text-shadow: -1px 1px 8px #E DE275, 1px -1px 8px #EDE275;
+  font-size: 16px; }
+
+.ui-helper-hidden-accessible > div {
+  color: #363636; }
+
+.typeselection {
+  color: #363636;
+  font-size: 24px;
+  position: fixed;
+  left: 0;
+  top: -300px;
+  pointer-events: none; }
+
+#keys {
+  opacity: 0.5; }
+
+.info-container {
+  position: absolute;
+  right: 70px;
+  top: 24px; }
+
+.subtitle {
+  font-style: italic;
+  color: #bbb;
+  font-size: 12px;
+  float: right; }
+
+.edge_info, .info {
+  color: #363636;
+  background-color: white;
+  -webkit-box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.3);
+  -moz-box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.3);
+  box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.3);
+  position: relative;
+  width: 250px;
+  padding: 24px;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  border-top: 6px solid #363636; }
+
+.info.type-person {
+  border-top: 6px solid #004681; }
+
+.info.type-club {
+  border-top: 6px solid #ee3654; }
+
+.info.type-skill {
+  border-top: 6px solid #fad900; }
+
+.info.type-third-internship-proposal {
+  border-top: 6px solid #33c2e0; }
+
+.info.type-internship {
+  border-top: 6px solid #ff8b11; }
+
+.info.type-interest {
+  border-top: 6px solid #8b3ab0; }
+
+.info.type-empty {
+  border-top: 6px solid #919095; }
+
+.info.type-chainlink {
+  border-top: 6px solid #363636; }
+
+.info.type-project {
+  border-top: 6px solid #40c200; }
+
+.info .info-card-attr {
+  display: block;
+  text-transform: capitalize;
+  font-size: 14px;
+  font-family: "Source_Bold", sans-serif; }
+
+.info .info-card-attr-val {
+  display: block;
+  text-transform: capitalize;
+  font-size: 24px;
+  margin: 12px 0px 24px 0px; }
+
+.info-card-attr-val input {
+  width: 100%;
+  font-size: 24px; }
+
+.info-card-url input {
+  font-size: 14px;
+  margin-left: 20px; }
+
+.info-card-url:before {
+  position: absolute;
+  margin-top: 7px;
+  content: "";
+  background: url(../img/url-icon.png);
+  min-width: 14px;
+  min-height: 14px;
+  background-position: center;
+  background-repeat: no-repeat; }
+
+.select-dropdown {
+  border: none;
+  font-family: "Source_Regular", sans-serif;
+  background-color: white;
+  font-size: 18px;
+  color: #363636;
+  width: 100%;
+  padding: 0;
+  margin: 12px 0px 24px 0px; }
+
+.select-dropdown:focus {
+  outline: none; }
+
+.select-dropdown option {
+  font-size: 18px;
+  color: #363636;
+  border: 1px solid #363636; }
+
+.info hr {
+  width: 250px;
+  position: relative;
+  left: -24px;
+  border: none;
+  background-color: #d4d4d9;
+  height: 2px;
+  margin: 24px 0px 24px 0px; }
+
+.search-bar {
+  position: relative;
+  width: 100%;
+  height: 48px;
+  background: white;
+  -webkit-box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.3);
+  -moz-box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.3);
+  box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.3);
+  z-index: 100; }
+
+.search-input {
+  width: 70%;
+  height: 20px;
+  float: left;
+  margin: 8px 12px 12px 70px; }
+
+.search-input:before {
+  content: "";
+  background: url(../img/search-icon.png);
+  padding: 0px 10px 0px 10px;
+  background-position: center;
+  background-repeat: no-repeat; }
+
+#search {
+  font-family: "Source_Regular", sans-serif;
+  font-size: 18px;
+  width: 80%; }
+
+#search-suggestion {
+  position: absolute;
+  width: 70%;
+  margin-left: 70px;
+  top: 42px; }
+
+#search-suggestion .suggestion-item {
+  padding: 12px 0px 12px 24px; }
+
+#search-suggestion .suggestion-item.selected, #search-suggestion .suggestion-item:hover {
+  padding: 12px 0px 12px 22px; }
+
+.export {
+  cursor: pointer;
+  text-align: right;
+  width: 60px;
+  float: right;
+  color: #363636;
+  font-size: 12px;
+  margin: 14px 70px 12px 12px; }
+
+.export:before {
+  content: "";
+  background: url(../img/export.png);
+  padding: 0px 9px 0px 9px;
+  background-position: center;
+  background-repeat: no-repeat; }
+
+.task-alert {
+  position: relative;
+  width: 100%;
+  min-height: 48px;
+  text-align: center;
+  background-color: #d3f2f8;
+  color: #1d6e7f;
+  border-top: 1px solid #8eb6bf;
+  border-bottom: 1px solid #8eb6bf; }
+
+.task-desc {
+  display: inline-block;
+  width: 70%;
+  text-align: center;
+  font-size: 18px;
+  margin: 12px 70px 12px 70px; }
+
+.task-close-button {
+  cursor: pointer;
+  font-size: 14px;
+  margin: 15px 70px 15px 15px;
+  float: right;
+  width: 70px;
+  text-align: right; }
+
+.task-close-button:after {
+  content: " ";
+  min-height: 20px;
+  padding-right: 20px;
+  margin-left: 4px;
+  background: url(../img/close-alert-button.png);
+  background-position: center;
+  background-repeat: no-repeat; }
+
+.top-bar {
+  position: relative;
+  top: 0;
+  left: 0;
+  width: 100%;
+  min-height: 36px;
+  background-color: #363636; }
+
+.doc-title {
+  float: left;
+  font-family: "Source_Semibold", sans-serif;
+  color: #f5f5fa;
+  margin: 10px 70px 10px 70px;
+  font-size: 18px; }
+
+.user-area {
+  float: right;
+  margin: 3px 70px 3px 70px; }
+
+.username {
+  display: inline-block;
+  text-align: right; }
+
+.profile-circle {
+  border-radius: 50%;
+  width: 30px;
+  height: 30px;
+  background: #33c2e0;
+  display: inline-block; }
+
+.profile-initials {
+  display: inline-block;
+  color: #f5f5fa;
+  font-size: 14px;
+  position: relative;
+  left: -27px;
+  top: -10px; }
+
+.profile-username {
+  display: inline-block;
+  top: 12px;
+  color: #f5f5fa;
+  position: relative;
+  left: -20px;
+  top: -10px; }
+
+.organization-logo {
+  display: inline-block;
+  margin-left: 12px;
+  background: url(../img/CRI-logo.png);
+  min-height: 30px;
+  min-width: 30px; }
+
+/* Headings */
+h1 {
+  font-size: 30px; }
+
+h2 {
+  font-size: 24px; }
+
+h1 {
+  font-size: 18px; }
+
+h2 {
+  font-size: 14px; }
+
+h1 {
+  font-size: 12px; }
+
+svg text::selection {
+  background: none; }
diff --git a/res/client/css/style.css.map b/res/client/css/style.css.map
new file mode 100644
index 00000000..a5a211c1
--- /dev/null
+++ b/res/client/css/style.css.map
@@ -0,0 +1,7 @@
+{
+"version": 3,
+"mappings": "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",
+"sources": ["style.scss","modules/typography.scss","partials/base.scss","modules/colors.scss","partials/reset.scss","partials/dev-area.scss","partials/graph-view.scss","partials/input-bar.scss","modules/positions.scss","partials/input-bubble.scss","partials/info-box.scss","partials/search-bar.scss","partials/task-alert.scss","partials/top-bar.scss","partials/typography.scss"],
+"names": [],
+"file": "style.css"
+}
\ No newline at end of file
diff --git a/res/client/css/style.scss b/res/client/css/style.scss
new file mode 100644
index 00000000..9e6ab2d2
--- /dev/null
+++ b/res/client/css/style.scss
@@ -0,0 +1,31 @@
+// Modules and Variables
+@import "partials/base";
+
+//Reset CSS
+@import "partials/reset";
+
+// Partials
+@import "partials/buttons";
+@import "partials/dev-area";
+@import "partials/graph-view";
+@import "partials/grid";
+@import "partials/input-bar";
+@import "partials/input-bubble";
+@import "partials/info-card";
+@import "partials/metro-view";
+@import "partials/search-bar";
+@import "partials/task-alert";
+@import "partials/top-bar";
+@import "partials/typography";
+
+// Third-party
+@import "vendor/ui.css";
+
+// Hacks
+
+// Not sure this bug is the problem, but we don't want svg selection, and since
+// editing svg nodes inline is done with an input foreign element, this doesn't
+// affect selecting there!
+// See http://stackoverflow.com/questions/18124820/html5-svg-text-selection-bug-in-chrome
+svg text::selection { background: none; }
+
diff --git a/res/client/css/vendor/ui.css b/res/client/css/vendor/ui.css
new file mode 100644
index 00000000..8d0b2248
--- /dev/null
+++ b/res/client/css/vendor/ui.css
@@ -0,0 +1,114 @@
+.ui-autocomplete { position: absolute; cursor: default; }
+
+/* workarounds */
+* html .ui-autocomplete { width:1px; } /* without this, the menu expands to 100% in IE6 */
+
+/*
+ * jQuery UI Menu 1.8.7
+ *
+ * Copyright 2010, AUTHORS.txt (http://jqueryui.com/about)
+ * Dual licensed under the MIT or GPL Version 2 licenses.
+ * http://jquery.org/license
+ *
+ * http://docs.jquery.com/UI/Menu#theming
+ */
+.ui-menu {
+	list-style:none;
+	padding: 2px;
+	margin: 0;
+	display:block;
+	float: left;
+	font-size: 14px;
+	padding-top:30px;
+	border-left: 1px solid #222;
+
+	max-width: 400px;
+	line-height:1.5;
+}
+.ui-menu .ui-menu {
+	margin-top: -3px;
+}
+.ui-menu .ui-menu-item {
+	margin:0;
+	padding: 0;
+	zoom: 1;
+	float: left;
+	clear: left;
+}
+.ui-menu .ui-menu-item a {
+	text-decoration:none;
+	display:block;
+	padding:.2em .4em;
+	line-height:1.5;
+	zoom:1;
+}
+
+.ui-menu .ui-menu-item ,
+.ui-menu .ui-menu-item a.ui-state-active {
+	font-weight: normal;
+	margin: -1px;
+	white-space: nowrap;
+}
+
+.ui-helper-hidden-accessible{
+	position:fixed;
+	top:65px;
+	left:20px;
+	text-shadow: -1px 1px 8px #EDE275, 1px -1px 8px #EDE275;
+	font-size:16px;
+}
+
+.ui-datepicker {
+    background-color: rgb(17,17,17);
+	background-color: rgba(17,17,17,0.9);
+    width: 217px;
+    height: auto;
+    margin: 5px auto 0;
+    font-size: 9pt;
+    border: 1px solid;
+
+    -webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, .5);
+    -moz-box-shadow: 0 0 10px 0 rgba(0, 0, 0, .5);
+    box-shadow: 0 0 10px 0 rgba(0, 0, 0, .5);
+}
+
+
+
+.ui-datepicker-title {
+    text-align: center;
+}
+
+.ui-datepicker-prev {
+    float: left;
+    background-position: center -30px;
+}
+.ui-datepicker-next {
+    float: right;
+    background-position: center 0;
+}
+
+.ui-datepicker-header {
+    color: #e0e0e0;
+    font-weight: bold;
+    -webkit-box-shadow: inset 0 1px 1px 0 rgba(250, 250, 250, 2);
+    -moz-box-shadow: inset 0 1px 1px 0 rgba(250, 250, 250, .2);
+    box-shadow: inset 0 1px 1px 0 rgba(250, 250, 250, .2);
+    text-shadow: 1px -1px 0 #000;
+    filter: dropshadow(color=#000, offx=1, offy=-1);
+    line-height: 30px;
+    border-width: 1px 0 0 0;
+    border-style: solid;
+    border-color: #111;
+}
+
+.ui-datepicker a {
+    text-decoration: none;
+    color: #fff;
+}
+.ui-datepicker a:hover {
+    color: #E03A3E;
+}
+
+.ui-datepicker table {
+    width: 100%;
+}