Introduced base css files for plugins

Change-Id: Ia8f1bb671c6e770c19ce196f5161e48cf88b2b2a
diff --git a/dev/demo/plugin-client.html b/dev/demo/plugin-client.html
index 3cce6de..44333f8 100644
--- a/dev/demo/plugin-client.html
+++ b/dev/demo/plugin-client.html
@@ -3,7 +3,7 @@
   <head>
     <title>Plugin demo</title>
 
-    <link type="text/css" rel="stylesheet" href="/css/kalamar.css" />
+    <link type="text/css" rel="stylesheet" href="/css/kalamar-plugin.css" />
 
     <!-- load client javascript library -->
     <script src="/js/src/plugin/client.js" data-server="http://localhost:3003/"></script>
@@ -21,7 +21,7 @@
       }
     </style>
   </head>
-  <body style="background-color: yellow">
+  <body class="result-view">
     <h2>Example Widget!</h2>
     <script>
       function flood () {
diff --git a/dev/js/src/panel.js b/dev/js/src/panel.js
index 4ebef1e..eee7a00 100644
--- a/dev/js/src/panel.js
+++ b/dev/js/src/panel.js
@@ -83,15 +83,15 @@
       this.views.push(view);
 
       // Append or prepend element to panel element
-      if(this.prepend){
+      if (this.prepend){
         this._viewElement().prepend(
-            view.element()
-          );
-        }
+          view.element()
+        );
+      }
       else{
-      this._viewElement().appendChild(
-        view.element()
-      );
+        this._viewElement().appendChild(
+          view.element()
+        );
       }
       
       if (view.afterEmbed)
diff --git a/dev/scss/base.scss b/dev/scss/base.scss
index 2d71b4d..fe16021 100644
--- a/dev/scss/base.scss
+++ b/dev/scss/base.scss
@@ -1,9 +1,11 @@
 @charset "utf-8";
 @import "util";
+@import "base/fonts";
 @import "base/flextable";
 @import "base/fragment";
 @import "base/load";
 @import "base/form";
+@import "base/view";
 
 /**
  * Basic global CSS rules for Kalamar
@@ -22,17 +24,6 @@
   @include box-sizing-box;
 }
 
-/*
-html {
-//  @include box-sizing-box;
-  box-sizing: border-box;
-}
-
-*, *:before, *:after {
-  box-sizing: inherit;
-}
-*/
-
 g > text {
   fill: $dark-grey;
 }
diff --git a/dev/scss/fonts.scss b/dev/scss/base/fonts.scss
similarity index 96%
rename from dev/scss/fonts.scss
rename to dev/scss/base/fonts.scss
index d0349a4..81726ad 100644
--- a/dev/scss/fonts.scss
+++ b/dev/scss/base/fonts.scss
@@ -1,5 +1,5 @@
 @charset "utf-8";
-@import "util";
+@import "../util";
 
 /**
  * Load web fonts for Kalamar
diff --git a/dev/scss/base/view.scss b/dev/scss/base/view.scss
new file mode 100644
index 0000000..96162cf
--- /dev/null
+++ b/dev/scss/base/view.scss
@@ -0,0 +1,5 @@
+@import "../util.scss";
+
+.result-view {
+  background-color: $nearly-white;
+}
\ No newline at end of file
diff --git a/dev/scss/kalamar.scss b/dev/scss/kalamar.scss
index 4c4407f..084b443 100644
--- a/dev/scss/kalamar.scss
+++ b/dev/scss/kalamar.scss
@@ -5,11 +5,10 @@
  */
 
 // Global variables and mixins
-@import "fonts";           // Font families
 @import "base";            // Base styles
 @import "main/main";       // Main frame styles
 @import "header/header";   // Top frame styles
 @import "footer/footer";   // Bottom frame styles
 @import "sidebar/sidebar"; // Left frame styles
 @import "no-js";           // Script disabled
-@import "media";           // Media queries
+@import "media";           // Media queries
\ No newline at end of file
diff --git a/dev/scss/main/koralquery.scss b/dev/scss/main/koralquery.scss
index 402f477..d6d4818 100644
--- a/dev/scss/main/koralquery.scss
+++ b/dev/scss/main/koralquery.scss
@@ -6,9 +6,11 @@
 #koralquery {
   white-space: pre;
   > div {
+    // TODO:
+    //   Mark this with result-view
+    background-color: $nearly-white;
     overflow-x: auto;
     font-size: 85%;
-    background-color: $nearly-white;
     margin: {
       top: 2pt;
       right: $right-view-distance; // 3em;