First attempt to create a panel based windows system

Change-Id: I2b6fb4cb147518d661dbccb3bd5f8e093b63bf55
diff --git a/dev/scss/main/buttongroup.scss b/dev/scss/main/buttongroup.scss
index dea337d..acd3094 100644
--- a/dev/scss/main/buttongroup.scss
+++ b/dev/scss/main/buttongroup.scss
@@ -7,31 +7,6 @@
 .button-group {
   > span {
     cursor: pointer;
-    box-shadow: $choose-box-shadow;
-    font-size: 9pt;
-    line-height: 1.5em;
-    padding: 0 4px;
-    display: inline-block;
-    @include choose-item;
-    border-style: solid;
-    border-width: $border-size 0;
-    &:hover {
-	    @include choose-hover;
-    }
-    &:first-child {
-	    border: {
-	      left-width: $border-size;
-	      top-left-radius: $standard-border-radius;
-	      bottom-left-radius: $standard-border-radius;
-	    }
-    }
-    &:last-child {
-	    border: {
-	      right-width: $border-size;
-	      top-right-radius: $standard-border-radius;
-	      bottom-right-radius: $standard-border-radius;
-	    }
-    }
     &.button-icon {
       font-family: 'FontAwesome';
       > span {
@@ -41,6 +16,34 @@
   }
 }
 
+.button-group:not(.view) > span {
+  box-shadow: $choose-box-shadow;
+  font-size: 9pt;
+  line-height: 1.5em;
+  padding: 0 4px;
+  display: inline-block;
+  @include choose-item;
+  border-style: solid;
+  border-width: $border-size 0;
+  &:hover {
+	  @include choose-hover;
+  }
+  &:first-child {
+	  border: {
+	    left-width: $border-size;
+	    top-left-radius: $standard-border-radius;
+	    bottom-left-radius: $standard-border-radius;
+	  }
+  }
+  &:last-child {
+	  border: {
+	    right-width: $border-size;
+	    top-right-radius: $standard-border-radius;
+	    bottom-right-radius: $standard-border-radius;
+    }
+  }
+}
+ 
 ul.button-group-list {
   border-top-right-radius: 8px;
   z-index: 150;
@@ -54,3 +57,31 @@
 	  border-top-right-radius: 5px;
   }
 }
+
+
+.button-group.view {
+  display: block;
+  position: absolute;
+  right: 0;
+  top: 0;
+  z-index: 20;
+  margin: 0;
+  padding: 0;
+  width: $right-match-distance;
+  > span {
+    border-width: 0;
+    text-decoration:none;
+    text-align: center;
+    font-style: normal;
+    
+    &.download::after {
+	    font-family: 'FontAwesome';
+	    content: $fa-download;
+    }
+    
+    &.close::after {
+	    font-family: 'FontAwesome';
+	    content: $fa-close;
+    }
+  }
+}