commit 15f46faf5eb8181b59da326884d087fae1ac62ca
Author: Andreas Kohlbecker <a.kohlbecker@bgbm.org>
Date:   Thu Feb 23 17:15:50 2017 +0100

    ref #6169 initial design for main application

diff --git a/src/main/java/eu/etaxonomy/cdm/vaadin/design/phycobank/PhycobankApplicationDesign.java b/src/main/java/eu/etaxonomy/cdm/vaadin/design/phycobank/PhycobankApplicationDesign.java
new file mode 100644
index 00000000..dc0dd290
--- /dev/null
+++ b/src/main/java/eu/etaxonomy/cdm/vaadin/design/phycobank/PhycobankApplicationDesign.java
@@ -0,0 +1,35 @@
+package eu.etaxonomy.cdm.vaadin.design.phycobank;
+
+import com.vaadin.annotations.AutoGenerated;
+import com.vaadin.annotations.DesignRoot;
+import com.vaadin.ui.Button;
+import com.vaadin.ui.CssLayout;
+import com.vaadin.ui.HorizontalLayout;
+import com.vaadin.ui.declarative.Design;
+
+/** 
+ * !! DO NOT EDIT THIS FILE !!
+ * 
+ * This class is generated by Vaadin Designer and will be overwritten.
+ * 
+ * Please make a subclass with logic and additional interfaces as needed,
+ * e.g class LoginView extends LoginDesign implements View { }
+ */
+@DesignRoot
+@AutoGenerated
+@SuppressWarnings("serial")
+public class PhycobankApplicationDesign extends HorizontalLayout {
+    protected CssLayout menu;
+    protected Button dashboard;
+    protected Button reports;
+    protected Button customize;
+    protected Button help;
+    protected Button login;
+    protected Button userAccount;
+    protected Button messagesButton;
+    protected CssLayout content;
+
+    public PhycobankApplicationDesign() {
+        Design.read(this);
+    }
+}
diff --git a/src/main/java/eu/etaxonomy/cdm/vaadin/ui/ConceptRelationshipUI.java b/src/main/java/eu/etaxonomy/cdm/vaadin/ui/ConceptRelationshipUI.java
index c21986c3..4901a8d3 100644
--- a/src/main/java/eu/etaxonomy/cdm/vaadin/ui/ConceptRelationshipUI.java
+++ b/src/main/java/eu/etaxonomy/cdm/vaadin/ui/ConceptRelationshipUI.java
@@ -25,7 +25,7 @@ import eu.etaxonomy.cdm.vaadin.view.ConceptRelationshipView;
  * @date 9 Apr 2015
  *
  */
-@Theme("edit")
+@Theme("valo")
 @SpringUI(path="concept")
 @Widgetset("eu.etaxonomy.cdm.vaadin.AppWidgetSet")
 public class ConceptRelationshipUI extends AbstractAuthenticatedUI {
diff --git a/src/main/resources/eu/etaxonomy/cdm/vaadin/design/phycobank/PhycobankApplicationDesign.html b/src/main/resources/eu/etaxonomy/cdm/vaadin/design/phycobank/PhycobankApplicationDesign.html
new file mode 100644
index 00000000..bf12f447
--- /dev/null
+++ b/src/main/resources/eu/etaxonomy/cdm/vaadin/design/phycobank/PhycobankApplicationDesign.html
@@ -0,0 +1,53 @@
+<!doctype html>
+<html>
+ <head>
+  <meta charset="UTF-8">
+  <meta name="design-properties" content="{&quot;RULERS_VISIBLE&quot;:true,&quot;GUIDELINES_VISIBLE&quot;:false,&quot;SNAP_TO_OBJECTS&quot;:true,&quot;SNAP_TO_GRID&quot;:true,&quot;SNAPPING_DISTANCE&quot;:10,&quot;JAVA_SOURCES_ROOT&quot;:&quot;src/main/java&quot;,&quot;THEME&quot;:&quot;edit-valo&quot;}">
+  <meta name="vaadin-version" content="7.7.0">
+ </head>
+ <body>
+  <vaadin-horizontal-layout style-name="app-shell v-menu-responsive" responsive size-full>
+   <vaadin-css-layout style-name="navigation-bar-container" width="200px" height-full>
+    <vaadin-css-layout style-name="navigation-bar" size-full>
+     <vaadin-label primary-style-name="v-label logo" style-name="logo" plain-text>
+       PhycoBank 
+     </vaadin-label>
+     <vaadin-css-layout style-name="navigation" width-full _id="menu">
+      <vaadin-button icon="fonticon://FontAwesome/f044" style-name="borderless huge" width-full plain-text _id="dashboard">
+        New 
+      </vaadin-button>
+      <vaadin-button icon="fonticon://FontAwesome/f061" style-name="borderless huge" width-full plain-text _id="reports">
+        Continue 
+      </vaadin-button>
+      <vaadin-button icon="fonticon://FontAwesome/f03a" style-name="borderless huge" width-full plain-text _id="customize">
+        List 
+      </vaadin-button>
+     </vaadin-css-layout>
+    </vaadin-css-layout>
+   </vaadin-css-layout>
+   <vaadin-vertical-layout style-name="content-container" size-full :expand>
+    <vaadin-horizontal-layout style-name="banner" width-full :bottom :right>
+     <vaadin-css-layout :bottom :right>
+      <vaadin-button style-name="borderless small" plain-text _id="help">
+        Help 
+      </vaadin-button>
+      <vaadin-button style-name="borderless small" plain-text _id="login">
+        Login 
+      </vaadin-button>
+      <vaadin-button icon="fonticon://FontAwesome/f007" style-name="borderless small" plain-text _id="userAccount">
+        User Name 
+      </vaadin-button>
+      <vaadin-button icon="fonticon://FontAwesome/f0e0" style-name="borderless small" _id="messagesButton">
+       <span class="valo-menu-badge">123</span>
+      </vaadin-button>
+     </vaadin-css-layout>
+    </vaadin-horizontal-layout>
+    <vaadin-css-layout size-full _id="content" :expand>
+     <vaadin-css-layout size-full>
+      <vaadin-css-layout style-name="content-section padding" size-full></vaadin-css-layout>
+     </vaadin-css-layout>
+    </vaadin-css-layout>
+   </vaadin-vertical-layout>
+  </vaadin-horizontal-layout>
+ </body>
+</html>
\ No newline at end of file
diff --git a/src/main/webapp/VAADIN/themes/edit-valo/designs.scss b/src/main/webapp/VAADIN/themes/edit-valo/designs.scss
new file mode 100644
index 00000000..b2603164
--- /dev/null
+++ b/src/main/webapp/VAADIN/themes/edit-valo/designs.scss
@@ -0,0 +1,195 @@
+// Styles imported from Application_Menu.html
+// App shell
+  .app-shell {
+
+    // Navigation bar background color
+    $navigation-bar-bg-color: $v-background-color; /* $v-focus-color; */
+
+    .custom-menubar {
+      .v-menubar-menuitem {
+        position: relative;
+        :before {
+          content: "";
+          display: block;
+          position: absolute;
+          width: 100%;
+          height: 1px;
+          background: $v-focus-color;
+          bottom: -20px;
+          left: 0;
+        }
+      }
+    }
+
+    .navigation-bar {
+      background: $navigation-bar-bg-color;
+      z-index: 10000;
+    }
+
+    .logo {
+      color: lighten($navigation-bar-bg-color, 40%);
+      text-align: center;
+      padding: $v-unit-size / 2 $v-unit-size / 4;
+      font-size: $v-font-size * 1.1;
+    }
+
+    .view-title {
+      font-size: $v-font-size * 1.1;
+      color: lighten($v-font-color, 10%);
+      padding: $v-unit-size / 2 $v-unit-size / 3;
+    }
+
+    .padding {
+      padding: $v-unit-size / 3;
+    }
+
+    .padding-top {
+      padding-top: $v-unit-size / 3;
+    }
+
+    .padding-right {
+      padding-right: $v-unit-size / 3;
+    }
+
+    .padding-bottom {
+      padding-bottom: $v-unit-size / 3;
+    }
+
+    .padding-left {
+      padding-left: $v-unit-size / 3;
+    }
+
+    .content-section {
+      background: lighten($v-background-color, 20%);
+      border: valo-border($border: $v-border, $strength: 0.2);
+      font-size: $v-font-size * .9;
+      overflow-y: auto;
+      overflow-x: hidden;
+    }
+
+    .menu {
+      float: right;
+      padding: 0 10px;
+      line-height: $v-unit-size;
+      color: lighten($navigation-bar-bg-color, 40%);
+      display: none;
+
+      .v-icon {
+        line-height: 1;
+        color: lighten($navigation-bar-bg-color, 60%);
+        font-size: 16px;
+      }
+    }
+
+    .navigation {
+      border-top: 1px solid lighten($navigation-bar-bg-color, 7%);
+      border-bottom: 1px solid lighten($navigation-bar-bg-color, 7%);
+      background: darken($navigation-bar-bg-color, 4%);
+
+      .v-icon {
+        color: lighten($navigation-bar-bg-color, 25%);
+      }
+
+      .v-button {
+        text-align: left;
+        font-size: $v-font-size * .9;
+        text-overflow: ellipsis;
+        color: lighten($navigation-bar-bg-color, 40%);
+
+        &.active, &:focus {
+          color: lighten($navigation-bar-bg-color, 70%);
+
+          .v-icon {
+            color: lighten($navigation-bar-bg-color, 45%);
+          }
+        }
+
+        // Removes the default focus border
+        &:focus:after {
+          content: none;
+        }
+
+        &.borderless:hover {
+          background: darken($navigation-bar-bg-color, 7%);
+        }
+      }
+    }
+
+    // Responsive styles
+    &[width-range~="601px-1000px"] {
+      .navigation-bar-container {
+        width: 80px !important;
+
+        .logo {
+          font-size: $v-font-size * .75;
+        }
+
+        .navigation .v-button {
+          font-size: 26px;
+          height: 60px;
+          padding: 10px 6px;
+          box-sizing: border-box;
+          line-height: 1;
+
+          &:before {
+            content: none;
+          }
+
+          .v-button-wrap {
+            width: 100%
+          }
+
+          .v-button-caption {
+            font-size: $v-font-size * 0.6;
+            margin: 0;
+            width: 100%;
+            float: left;
+            margin-top: 3px;
+            text-align: center;
+          }
+
+          .v-icon {
+            width: 100%;
+            float: left;
+          }
+        }
+      }
+    }
+
+    &[width-range~="-600px"] {
+      .navigation-bar-container {
+        width: 0px !important;
+      }
+
+      .menu {
+        display: block;
+      }
+
+      .navigation {
+        display: none;
+      }
+
+      .navigation:hover, .navigation:active, .menu:focus + .navigation {
+        display: inline-block;
+      }
+
+      .navigation-bar {
+        position: fixed;
+        width: 100%;
+        height: $v-unit-size !important;
+      }
+
+      .logo {
+        line-height: $v-unit-size;
+        width: auto !important;
+        float: left;
+        padding: 0 $v-unit-size / 2.5;
+        font-size: $v-font-size;
+      }
+
+      .content-container {
+        padding-top: $v-unit-size;
+      }
+    }
+  }
+
diff --git a/src/main/webapp/VAADIN/themes/edit-valo/edit-valo.scss b/src/main/webapp/VAADIN/themes/edit-valo/edit-valo.scss
index 32d4c7b7..71290551 100644
--- a/src/main/webapp/VAADIN/themes/edit-valo/edit-valo.scss
+++ b/src/main/webapp/VAADIN/themes/edit-valo/edit-valo.scss
@@ -3,7 +3,7 @@
 // Defines the plaintext font size, weight and family. Font size affects general component sizing.
 //$v-font-size: 16px;
 //$v-font-weight: 300;
-//$v-font-family: "Open Sans", sans-serif;
+$v-font-family: "Open Sans", sans-serif;
 
 // Defines the border used by all components.
 //$v-border: 1px solid (v-shade 0.7);
@@ -14,7 +14,7 @@
 // Affects the color of content areas, e.g  Panel and Window content, TextField input etc
 //$v-app-background-color: $v-background-color;
 
-// Affects the visual appearance of all components
+// Affects the visual appearance of all component
 //$v-gradient: v-linear 8%;
 //$v-bevel-depth: 30%;
 //$v-shadow-opacity: 5%;
@@ -53,4 +53,20 @@ $v-component-group-spacing: 6px;
   @include valo;
 
   // Insert your own theme rules here
+  
+  // ----- Banner and Logo  ------
+  $banner-height:  60px;
+  
+  .logo {
+    font-weight: bold;
+    font-size: 1.5em;
+    color: #0E9B06;
+    height: $banner-height;
+  }
+  
+  .banner {
+    height: $banner-height;
+  }
+  
+
 }
diff --git a/src/main/webapp/VAADIN/themes/edit-valo/styles.scss b/src/main/webapp/VAADIN/themes/edit-valo/styles.scss
index d0858c63..c8bfc5c9 100644
--- a/src/main/webapp/VAADIN/themes/edit-valo/styles.scss
+++ b/src/main/webapp/VAADIN/themes/edit-valo/styles.scss
@@ -1,5 +1,6 @@
 @import "addons.scss";
 @import "edit-valo.scss";
+@import "designs.scss";
 
 /* This file prefixes all rules with the theme name to avoid causing conflicts with other themes. */
 /* The actual styles should be defined in edit-valo.scss */
