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;
+    }
+  }
+}
diff --git a/dev/scss/main/main.scss b/dev/scss/main/main.scss
index 40ef483..cfb3791 100644
--- a/dev/scss/main/main.scss
+++ b/dev/scss/main/main.scss
@@ -12,6 +12,7 @@
 @import "alertify";    // Styling alerts
 @import "intro";       // Intro page
 @import "buttongroup"; // Button groups
+@import "panel";       // Base panel system
 
 main {
   margin: {
diff --git a/dev/scss/main/matchinfo.scss b/dev/scss/main/matchinfo.scss
index f2ed006..334ac74 100644
--- a/dev/scss/main/matchinfo.scss
+++ b/dev/scss/main/matchinfo.scss
@@ -235,6 +235,8 @@
   }
 }
 
+// TODO:
+//   Probably obsolete now, as it will become part of the panel system
 div.matchinfo ul.action.image {
   display: block;
   position: absolute;
diff --git a/dev/scss/main/panel.scss b/dev/scss/main/panel.scss
new file mode 100644
index 0000000..25d541b
--- /dev/null
+++ b/dev/scss/main/panel.scss
@@ -0,0 +1,26 @@
+@charset "utf-8";
+@import "../util";
+
+div.panel {
+  position: relative;
+  width: 100%;
+  display: block;
+  padding-top: $border-size;
+  background-color: $dark-orange;
+  border: {
+    style: solid;
+    color: $dark-orange;
+    width: 0;
+  }
+}
+
+div.view {
+  position: relative;
+  display: block;
+  min-height: 40px;
+  background-color: $middle-green;
+  width: 100%;
+  .button-group {
+    color: white;
+  }
+}