diff --git a/GeotiefExplore.code-workspace b/GeotiefExplore.code-workspace
index c501037..a1c4782 100644
--- a/GeotiefExplore.code-workspace
+++ b/GeotiefExplore.code-workspace
@@ -4,11 +4,12 @@
 			"path": "."
 		}
 	],
-	"settings": {},
+	"settings": {
+		"svg.preview.background": "custom"
+	},
 	"launch": {
 		"version": "0.2.0",
-		"configurations": [	
-			
+		"configurations": [
 			{
 				"type": "chrome",
 				"request": "launch",
@@ -16,21 +17,20 @@
 				// "port": 9222,
 				"url": "http://localhost:8080",
 				"webRoot": "${workspaceFolder}",
-				"breakOnLoad": true,		
+				"breakOnLoad": true,
 				// "sourceMapPathOverrides": {
 				// 	"webpack:///./~/*": "${workspaceFolder}/node_modules/*", 
 				// 	"webpack:///./*":   "${workspaceFolder}/*", 
 				// 	"webpack:///*":     "*",     
 				// 	"webpack:///src/*": "${workspaceFolder}/*", 
 				// },		
-				
 				// "sourceMapPathOverrides": {
 				// 	// "webpack:///src/*": "${workspaceFolder}/*", 
 				// 	"webpack:///./*": "${workspaceFolder}/*"
 				//   },
-				  "sourceMaps": true,
-				  "timeout": 15000				  
-			  }   
+				"sourceMaps": true,
+				"timeout": 15000
+			}
 		]
 	}
 }
\ No newline at end of file
diff --git a/images/egdi_logo.min.svg b/images/egdi_logo.min.svg
new file mode 100644
index 0000000..8085443
--- /dev/null
+++ b/images/egdi_logo.min.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1" width="181" height="51" viewBox="0 0 908 338"><text font-size="176.732" font-weight="700" x="-88.94" y="204.393" fill="#1772b6" style="-inkscape-font-specification:'sans-serif, Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal" font-family="sans-serif" fill-opacity=".682">EGDI</text><path d="M941.442 286.591l-150.386 54.377-150.7-54.594 149.885-54.072c44.412 15.116 111.758 38.073 151.2 54.29z" stroke-opacity="null" stroke-linecap="null" stroke-linejoin="null" stroke-width=".917" stroke="null" fill-opacity=".682" fill="#ffcf00"/><path d="M790.757 92.944l150.93 53.724-.245 139.923-151.2-54.289z" fill="#cf4922" fill-rule="evenodd" fill-opacity=".682"/><path d="M790.757 92.944l-149.822 53.144 149.222 54.968" fill="#900c07" fill-opacity=".682"/><path d="M617.46 161.775l-.695 107.832 150.952-53.617z" fill="#1772b6" fill-opacity=".682"/><path d="M466.614 75.855L617.32 130.75l-.555 138.856-151.194-54.27z" fill="#94bd22" fill-rule="evenodd" fill-opacity=".682"/><path d="M619.13 21.35L466.614 75.854l150.704 54.895 151.23-53.814C730.528 61.329 655.739 39.9 619.13 21.349z" fill="#dd0" fill-opacity=".682"/></svg>
\ No newline at end of file
diff --git a/images/egdi_logo.svg b/images/egdi_logo.svg
new file mode 100644
index 0000000..bf0fc96
--- /dev/null
+++ b/images/egdi_logo.svg
@@ -0,0 +1,101 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1"
+   width="181"
+   height="51"
+   viewBox="0 0 908 338"
+   id="svg53"
+   sodipodi:docname="egdi_logo.svg"
+   inkscape:version="1.0.1 (3bc2e813f5, 2020-09-07)">
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="2560"
+     inkscape:window-height="1537"
+     id="namedview855"
+     showgrid="true"
+     inkscape:zoom="10.617915"
+     inkscape:cx="101.42827"
+     inkscape:cy="18.327117"
+     inkscape:window-x="2552"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg53"
+     inkscape:snap-grids="false"
+     inkscape:snap-to-guides="true">
+    <inkscape:grid
+       type="xygrid"
+       id="grid871" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata59">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs57" />
+  <text
+     font-size="200"
+     font-weight="bold"
+     x="-88.939621"
+     y="204.3934"
+     fill="#000000"
+     id="text44"
+     style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:176.732px;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#1772b6;stroke:none;stroke-opacity:1;fill-opacity:0.682353;">EGDI</text>
+  <path
+     id="svg_5"
+     d="m 941.44193,286.59145 -150.38624,54.3767 -150.69914,-54.59419 149.88456,-54.07154 c 44.41157,15.11532 111.75814,38.07261 151.20082,54.28903 z"
+     stroke-opacity="null"
+     stroke-linecap="null"
+     stroke-linejoin="null"
+     stroke-width="0.917161"
+     stroke="null"
+     fill-opacity="null"
+     fill="#b91e1e"
+     sodipodi:nodetypes="ccccc"
+     style="fill:#ffcf00;fill-opacity:0.68235296" />
+  <path
+     id="rect61"
+     style="fill:#cf4922;fill-rule:evenodd;stroke-width:5.98077;fill-opacity:0.68235296"
+     d="M 790.75737,92.943673 941.68682,146.66828 941.44193,286.59145 790.24111,232.30242 Z"
+     sodipodi:nodetypes="ccccc" />
+  <path
+     style="fill:#900c07;fill-opacity:0.68235296;stroke:none;stroke-width:6.00462px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     d="M 790.75737,92.943673 640.93489,146.08834 790.15658,201.0559"
+     id="path899"
+     sodipodi:nodetypes="ccc" />
+  <path
+     style="fill:#1772b6;fill-opacity:0.68235296;stroke:none;stroke-width:6.07844px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     d="m 617.45905,161.77508 -0.6944,107.83162 150.95277,-53.61708 z"
+     id="path901"
+     sodipodi:nodetypes="cccc" />
+  <path
+     id="rect61-1"
+     style="fill:#94bd22;fill-rule:evenodd;stroke-width:6.07844;fill-opacity:0.68235296"
+     d="M 466.61374,75.854645 617.32028,130.75134 616.76465,269.6067 465.57094,215.33794 Z"
+     sodipodi:nodetypes="ccccc" />
+  <path
+     id="svg_5-9"
+     style="display:inline;stroke-width:6.62745;fill:#dddd00;fill-opacity:0.68235296"
+     d="M 619.13024,21.349472 466.61374,75.854645 617.3175,130.74977 768.54857,76.935603 C 730.52682,61.328962 655.73869,39.89961 619.13024,21.349472 Z"
+     sodipodi:nodetypes="ccccc" />
+</svg>
diff --git a/index.html b/index.html
index aa20b2a..5b1efa2 100644
--- a/index.html
+++ b/index.html
@@ -4,50 +4,121 @@
 
 <head>
 
-  <!-- Basic Page Needs
+    <!-- Basic Page Needs
   –––––––––––––––––––––––––––––––––––––––––––––––––– -->
-  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-  <title>GeotiefExplore</title>
-  <!-- <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" /> -->
-  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
-  <meta name="apple-mobile-web-app-capable" content="yes">
-  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
-  <meta name="mobile-web-app-capable" content="yes">
-  <!-- <link href="content/img/favicon.ico" rel="shortcut icon" type="image/x-icon" /> -->
-  <meta name="description" content="3D viewer Geological Survey of Austria">
-  <meta name="author" content="Arno Kaimbacher">
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+    <title>GeotiefExplore</title>
+    <!-- <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" /> -->
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+    <meta name="mobile-web-app-capable" content="yes">
+    <!-- <link href="content/img/favicon.ico" rel="shortcut icon" type="image/x-icon" /> -->
+    <meta name="description" content="3D viewer Geological Survey of Austria">
+    <meta name="author" content="Arno Kaimbacher">
 
-  <!-- Mobile Specific Metas
+    <!-- Mobile Specific Metas
   –––––––––––––––––––––––––––––––––––––––––––––––––– -->
-  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
 
-  <!-- FONT
+    <!-- FONT
 –––––––––––––––––––––––––––––––––––––––––––––––––– -->
 
-  <!-- CSS
+    <!-- CSS
   –––––––––––––––––––––––––––––––––––––––––––––––––– -->
-  <!-- <link rel="stylesheet" href="src/css/styles.css?v=1.0"> -->
-  <link rel="stylesheet" type="text/css" href="dist/main.css" />
+    <!-- <link type="text/css" rel="stylesheet" href="normalize.css" /> -->
+    <!-- <link rel="stylesheet" href="src/css/page.css?v=1.0"> -->
+    <link rel="stylesheet" type="text/css" href="dist/main.css" />
 
-  <!-- Favicon
+    <!-- Favicon
   –––––––––––––––––––––––––––––––––––––––––––––––––– -->
-  <link rel="icon" type="image/png" href="images/favicon/favicon.ico" />
-  <link rel="apple-touch-icon" sizes="180x180" href="images/favicon/apple-touch-icon.png">
-  <link rel="icon" type="image/png" sizes="32x32" href="images/favicon/favicon-32x32.png">
-  <link rel="icon" type="image/png" sizes="16x16" href="images/favicon/favicon-16x16.png">
-  <link rel="manifest" href="images/favicon/site.webmanifest">
+    <link rel="icon" type="image/png" href="images/favicon/favicon.ico" />
+    <link rel="apple-touch-icon" sizes="180x180" href="images/favicon/apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="images/favicon/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="images/favicon/favicon-16x16.png">
+    <link rel="manifest" href="images/favicon/site.webmanifest">
 
 </head>
 
 <body>
 
-  <div id="webgl" class="mapDesktop">   
-    <!-- <div id="progressArea">
-        <img id="loadingImg" alt="" src="images/map/loading.gif" style="display:none;" />
-      </div> -->
-  </div>
 
-  <script src="dist/main.js"></script>
+    <header class="header">
+        <nav class="navigation" role="navigation">
+            <a href="#" id="menu-icon" class="menu-icon active">
+                <i class="fa fa-bars"></i>
+            </a>
+            <div class="row">
+                <div class="logo three columns">
+                    <a class="navbar-brand" href="/">
+                        <img src="images/egdi_logo.svg" height="51">
+                    </a>
+                </div>
+                <ul class="menu main-navigation nine columns">
+                    <li><a href="#home">Home</a></li>
+                </ul>
+            </div>
+        </nav>
+    </header>
+
+
+    <section class='main u-full-width'>
+
+
+
+        <div class="canvas-area eight columns">
+            <div id="div-map">
+                <div id="webgl" class="mapDesktop">
+                    <!-- <canvas id="imgCanvas" class="img-canvas">
+                        Canvas Not supported in your browser... Sorry!
+                      </canvas> -->
+                </div>
+            </div>
+        </div>
+
+        <div class="input-area four columns">
+
+            <div class="row">
+                <div class="twelve columns">
+
+                    <ul class="tab-nav">
+                        <li class="metadata-link">
+                            <span class="remove-check button active" name="#one">GEOLOGY</span>
+                        </li>
+                        <li class="file-link">
+                            <span class="remove-check button" name="#two">ANALYSIS</span>
+                        </li>
+                    </ul>
+
+                    <!-- HTML markup for tab content: Tab panes -->
+                    <div class="tab-content">
+                        <div class="tab-pane content-metadata active" id="one">
+                            <div id="layer-control-parent-id"></div>
+                        </div>
+                        <div class="tab-pane content-file" id="two">
+                            <h5 class="section-heading">Download Map Image</h5>
+                            <!-- <label for="topText">Top Text:</label>
+                            <input type="text" id="topText" class="form-control">
+
+                            <label for="bottomText">Bottom Text:</label>
+                            <input type="text" id="bottomText" class="form-control"> -->
+
+
+                            <a class="button button-primary" type="submit" id="btnDownloadCanvasImage"
+                                download="file.png">Download</a>
+                        </div>
+                    </div>
+                </div>
+                <!-- End of HTML markup for tab content: Tab panes -->
+
+            </div>
+        </div>
+
+
+
+    </section>
+
+    <script src="dist/main.js"></script>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 1b10366..c3b06b5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,10 +1,15 @@
 {
-    "name": "GeotiefExplore",
+    "name": "geo-tief",
+    "version": "1.0.0",
     "lockfileVersion": 2,
     "requires": true,
     "packages": {
         "": {
+            "name": "geo-tief",
+            "version": "1.0.0",
+            "license": "MIT",
             "dependencies": {
+                "normalize.css": "^8.0.1",
                 "proj4": "^2.6.3",
                 "three": "^0.123.0"
             },
@@ -45,25 +50,24 @@
             "dev": true
         },
         "node_modules/@babel/core": {
-            "version": "7.12.9",
-            "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.12.9.tgz",
-            "integrity": "sha512-gTXYh3M5wb7FRXQy+FErKFAv90BnlOuNn1QkCK2lREoPAjrQCO49+HVSrFoe5uakFAF5eenS75KbO2vQiLrTMQ==",
+            "version": "7.12.10",
+            "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.12.10.tgz",
+            "integrity": "sha512-eTAlQKq65zHfkHZV0sIVODCPGVgoo1HdBlbSLi9CqOzuZanMv2ihzY+4paiKr1mH+XmYESMAmJ/dpZ68eN6d8w==",
             "dev": true,
             "dependencies": {
                 "@babel/code-frame": "^7.10.4",
-                "@babel/generator": "^7.12.5",
+                "@babel/generator": "^7.12.10",
                 "@babel/helper-module-transforms": "^7.12.1",
                 "@babel/helpers": "^7.12.5",
-                "@babel/parser": "^7.12.7",
+                "@babel/parser": "^7.12.10",
                 "@babel/template": "^7.12.7",
-                "@babel/traverse": "^7.12.9",
-                "@babel/types": "^7.12.7",
+                "@babel/traverse": "^7.12.10",
+                "@babel/types": "^7.12.10",
                 "convert-source-map": "^1.7.0",
                 "debug": "^4.1.0",
                 "gensync": "^1.0.0-beta.1",
                 "json5": "^2.1.2",
                 "lodash": "^4.17.19",
-                "resolve": "^1.3.2",
                 "semver": "^5.4.1",
                 "source-map": "^0.5.0"
             },
@@ -76,23 +80,23 @@
             }
         },
         "node_modules/@babel/generator": {
-            "version": "7.12.5",
-            "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.12.5.tgz",
-            "integrity": "sha512-m16TQQJ8hPt7E+OS/XVQg/7U184MLXtvuGbCdA7na61vha+ImkyyNM/9DDA0unYCVZn3ZOhng+qz48/KBOT96A==",
+            "version": "7.12.10",
+            "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.12.10.tgz",
+            "integrity": "sha512-6mCdfhWgmqLdtTkhXjnIz0LcdVCd26wS2JXRtj2XY0u5klDsXBREA/pG5NVOuVnF2LUrBGNFtQkIqqTbblg0ww==",
             "dev": true,
             "dependencies": {
-                "@babel/types": "^7.12.5",
+                "@babel/types": "^7.12.10",
                 "jsesc": "^2.5.1",
                 "source-map": "^0.5.0"
             }
         },
         "node_modules/@babel/helper-annotate-as-pure": {
-            "version": "7.10.4",
-            "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.10.4.tgz",
-            "integrity": "sha512-XQlqKQP4vXFB7BN8fEEerrmYvHp3fK/rBkRFz9jaJbzK0B1DSfej9Kc7ZzE8Z/OnId1jpJdNAZ3BFQjWG68rcA==",
+            "version": "7.12.10",
+            "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.12.10.tgz",
+            "integrity": "sha512-XplmVbC1n+KY6jL8/fgLVXXUauDIB+lD5+GsQEh6F6GBF1dq1qy4DP4yXWzDKcoqXB3X58t61e85Fitoww4JVQ==",
             "dev": true,
             "dependencies": {
-                "@babel/types": "^7.10.4"
+                "@babel/types": "^7.12.10"
             }
         },
         "node_modules/@babel/helper-builder-binary-assignment-operator-visitor": {
@@ -181,12 +185,12 @@
             }
         },
         "node_modules/@babel/helper-get-function-arity": {
-            "version": "7.10.4",
-            "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.10.4.tgz",
-            "integrity": "sha512-EkN3YDB+SRDgiIUnNgcmiD361ti+AVbL3f3Henf6dqqUyr5dMsorno0lJWJuLhDhkI5sYEpgj6y9kB8AOU1I2A==",
+            "version": "7.12.10",
+            "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.12.10.tgz",
+            "integrity": "sha512-mm0n5BPjR06wh9mPQaDdXWDoll/j5UpCAPl1x8fS71GHm7HA6Ua2V4ylG1Ju8lvcTOietbPNNPaSilKj+pj+Ag==",
             "dev": true,
             "dependencies": {
-                "@babel/types": "^7.10.4"
+                "@babel/types": "^7.12.10"
             }
         },
         "node_modules/@babel/helper-hoist-variables": {
@@ -234,12 +238,12 @@
             }
         },
         "node_modules/@babel/helper-optimise-call-expression": {
-            "version": "7.12.7",
-            "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.12.7.tgz",
-            "integrity": "sha512-I5xc9oSJ2h59OwyUqjv95HRyzxj53DAubUERgQMrpcCEYQyToeHA+NEcUEsVWB4j53RDeskeBJ0SgRAYHDBckw==",
+            "version": "7.12.10",
+            "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.12.10.tgz",
+            "integrity": "sha512-4tpbU0SrSTjjt65UMWSrUOPZTsgvPgGG4S8QSTNHacKzpS51IVWGDj0yCwyeZND/i+LSN2g/O63jEXEWm49sYQ==",
             "dev": true,
             "dependencies": {
-                "@babel/types": "^7.12.7"
+                "@babel/types": "^7.12.10"
             }
         },
         "node_modules/@babel/helper-plugin-utils": {
@@ -345,9 +349,9 @@
             }
         },
         "node_modules/@babel/parser": {
-            "version": "7.12.7",
-            "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.12.7.tgz",
-            "integrity": "sha512-oWR02Ubp4xTLCAqPRiNIuMVgNO5Aif/xpXtabhzW2HWUD47XJsAB4Zd/Rg30+XeQA3juXigV7hlquOTmwqLiwg==",
+            "version": "7.12.10",
+            "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.12.10.tgz",
+            "integrity": "sha512-PJdRPwyoOqFAWfLytxrWwGrAxghCgh/yTNCYciOz8QgjflA7aZhECPZAa2VUedKg2+QMWkI0L9lynh2SNmNEgA==",
             "dev": true,
             "bin": {
                 "parser": "bin/babel-parser.js"
@@ -999,14 +1003,13 @@
             }
         },
         "node_modules/@babel/plugin-transform-runtime": {
-            "version": "7.12.1",
-            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.12.1.tgz",
-            "integrity": "sha512-Ac/H6G9FEIkS2tXsZjL4RAdS3L3WHxci0usAnz7laPWUmFiGtj7tIASChqKZMHTSQTQY6xDbOq+V1/vIq3QrWg==",
+            "version": "7.12.10",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.12.10.tgz",
+            "integrity": "sha512-xOrUfzPxw7+WDm9igMgQCbO3cJKymX7dFdsgRr1eu9n3KjjyU4pptIXbXPseQDquw+W+RuJEJMHKHNsPNNm3CA==",
             "dev": true,
             "dependencies": {
-                "@babel/helper-module-imports": "^7.12.1",
+                "@babel/helper-module-imports": "^7.12.5",
                 "@babel/helper-plugin-utils": "^7.10.4",
-                "resolve": "^1.8.1",
                 "semver": "^5.5.1"
             },
             "peerDependencies": {
@@ -1063,9 +1066,9 @@
             }
         },
         "node_modules/@babel/plugin-transform-typeof-symbol": {
-            "version": "7.12.1",
-            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.12.1.tgz",
-            "integrity": "sha512-EPGgpGy+O5Kg5pJFNDKuxt9RdmTgj5sgrus2XVeMp/ZIbOESadgILUbm50SNpghOh3/6yrbsH+NB5+WJTmsA7Q==",
+            "version": "7.12.10",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.12.10.tgz",
+            "integrity": "sha512-JQ6H8Rnsogh//ijxspCjc21YPd3VLVoYtAwv3zQmqAt8YGYUtdo5usNhdl4b9/Vir2kPFZl6n1h0PfUz4hJhaA==",
             "dev": true,
             "dependencies": {
                 "@babel/helper-plugin-utils": "^7.10.4"
@@ -1100,9 +1103,9 @@
             }
         },
         "node_modules/@babel/preset-env": {
-            "version": "7.12.7",
-            "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.12.7.tgz",
-            "integrity": "sha512-OnNdfAr1FUQg7ksb7bmbKoby4qFOHw6DKWWUNB9KqnnCldxhxJlP+21dpyaWFmf2h0rTbOkXJtAGevY3XW1eew==",
+            "version": "7.12.10",
+            "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.12.10.tgz",
+            "integrity": "sha512-Gz9hnBT/tGeTE2DBNDkD7BiWRELZt+8lSysHuDwmYXUIvtwZl0zI+D6mZgXZX0u8YBlLS4tmai9ONNY9tjRgRA==",
             "dev": true,
             "dependencies": {
                 "@babel/compat-data": "^7.12.7",
@@ -1164,12 +1167,12 @@
                 "@babel/plugin-transform-spread": "^7.12.1",
                 "@babel/plugin-transform-sticky-regex": "^7.12.7",
                 "@babel/plugin-transform-template-literals": "^7.12.1",
-                "@babel/plugin-transform-typeof-symbol": "^7.12.1",
+                "@babel/plugin-transform-typeof-symbol": "^7.12.10",
                 "@babel/plugin-transform-unicode-escapes": "^7.12.1",
                 "@babel/plugin-transform-unicode-regex": "^7.12.1",
                 "@babel/preset-modules": "^0.1.3",
-                "@babel/types": "^7.12.7",
-                "core-js-compat": "^3.7.0",
+                "@babel/types": "^7.12.10",
+                "core-js-compat": "^3.8.0",
                 "semver": "^5.5.0"
             },
             "peerDependencies": {
@@ -1213,26 +1216,26 @@
             }
         },
         "node_modules/@babel/traverse": {
-            "version": "7.12.9",
-            "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.12.9.tgz",
-            "integrity": "sha512-iX9ajqnLdoU1s1nHt36JDI9KG4k+vmI8WgjK5d+aDTwQbL2fUnzedNedssA645Ede3PM2ma1n8Q4h2ohwXgMXw==",
+            "version": "7.12.10",
+            "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.12.10.tgz",
+            "integrity": "sha512-6aEtf0IeRgbYWzta29lePeYSk+YAFIC3kyqESeft8o5CkFlYIMX+EQDDWEiAQ9LHOA3d0oHdgrSsID/CKqXJlg==",
             "dev": true,
             "dependencies": {
                 "@babel/code-frame": "^7.10.4",
-                "@babel/generator": "^7.12.5",
+                "@babel/generator": "^7.12.10",
                 "@babel/helper-function-name": "^7.10.4",
                 "@babel/helper-split-export-declaration": "^7.11.0",
-                "@babel/parser": "^7.12.7",
-                "@babel/types": "^7.12.7",
+                "@babel/parser": "^7.12.10",
+                "@babel/types": "^7.12.10",
                 "debug": "^4.1.0",
                 "globals": "^11.1.0",
                 "lodash": "^4.17.19"
             }
         },
         "node_modules/@babel/types": {
-            "version": "7.12.7",
-            "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.12.7.tgz",
-            "integrity": "sha512-MNyI92qZq6jrQkXvtIiykvl4WtoRrVV9MPn+ZfsoEENjiWcBQ3ZSHrkxnJWgWtLX3XXqX5hrSQ+X69wkmesXuQ==",
+            "version": "7.12.10",
+            "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.12.10.tgz",
+            "integrity": "sha512-sf6wboJV5mGyip2hIpDSKsr80RszPinEFjsHTalMxZAZkoQ2/2yQzxlcFN52SJqsyPfLtPmenL4g2KB3KJXPDw==",
             "dev": true,
             "dependencies": {
                 "@babel/helper-validator-identifier": "^7.10.4",
@@ -1329,9 +1332,9 @@
             "peer": true
         },
         "node_modules/@types/node": {
-            "version": "14.14.10",
-            "resolved": "https://registry.npmjs.org/@types/node/-/node-14.14.10.tgz",
-            "integrity": "sha512-J32dgx2hw8vXrSbu4ZlVhn1Nm3GbeCFNw2FWL8S5QKucHGY0cyNwjdQdO+KMBZ4wpmC7KhLCiNsdk1RFRIYUQQ==",
+            "version": "14.14.11",
+            "resolved": "https://registry.npmjs.org/@types/node/-/node-14.14.11.tgz",
+            "integrity": "sha512-BJ97wAUuU3NUiUCp44xzUFquQEvnk1wu7q4CMEUYKJWjdkr0YWYDsm4RFtAvxYsNjLsKcrFt6RvK8r+mnzMbEQ==",
             "dev": true
         },
         "node_modules/@webassemblyjs/ast": {
@@ -1912,12 +1915,12 @@
             }
         },
         "node_modules/core-js-compat": {
-            "version": "3.8.0",
-            "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.8.0.tgz",
-            "integrity": "sha512-o9QKelQSxQMYWHXc/Gc4L8bx/4F7TTraE5rhuN8I7mKBt5dBIUpXpIR3omv70ebr8ST5R3PqbDQr+ZI3+Tt1FQ==",
+            "version": "3.8.1",
+            "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.8.1.tgz",
+            "integrity": "sha512-a16TLmy9NVD1rkjUGbwuyWkiDoN0FDpAwrfLONvHFQx0D9k7J9y0srwMT8QP/Z6HE3MIFaVynEeYwZwPX1o5RQ==",
             "dev": true,
             "dependencies": {
-                "browserslist": "^4.14.7",
+                "browserslist": "^4.15.0",
                 "semver": "7.0.0"
             },
             "funding": {
@@ -2120,9 +2123,9 @@
             }
         },
         "node_modules/electron-to-chromium": {
-            "version": "1.3.615",
-            "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.615.tgz",
-            "integrity": "sha512-fNYTQXoUhNc6RmHDlGN4dgcLURSBIqQCN7ls6MuQ741+NJyLNRz8DxAC+pZpOKfRs6cfY0lv2kWdy8Oxf9j4+A==",
+            "version": "1.3.621",
+            "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.621.tgz",
+            "integrity": "sha512-FeIuBzArONbAmKmZIsZIFGu/Gc9AVGlVeVbhCq+G2YIl6QkT0TDn2HKN/FMf1btXEB9kEmIuQf3/lBTVAbmFOg==",
             "dev": true
         },
         "node_modules/emoji-regex": {
@@ -3260,9 +3263,9 @@
             }
         },
         "node_modules/mini-css-extract-plugin": {
-            "version": "1.3.1",
-            "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-1.3.1.tgz",
-            "integrity": "sha512-jIOheqh9EU98rqj6ZaFTYNNDSFqdakNqaUZfkYwaXPjI9batmXVXX+K71NrqRAgtoGefELBMld1EQ7dqSAD5SQ==",
+            "version": "1.3.2",
+            "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-1.3.2.tgz",
+            "integrity": "sha512-ofYJgCZNm1TToSv02pGANe1lfb31g7ULwNV5Nt31d2dAnVLxFHoguDUAj6U0BLEO7Nrztq4mdtL1yFDaeW7J+A==",
             "dev": true,
             "dependencies": {
                 "loader-utils": "^2.0.0",
@@ -3381,6 +3384,11 @@
                 "validate-npm-package-license": "^3.0.1"
             }
         },
+        "node_modules/normalize.css": {
+            "version": "8.0.1",
+            "resolved": "https://registry.npmjs.org/normalize.css/-/normalize.css-8.0.1.tgz",
+            "integrity": "sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg=="
+        },
         "node_modules/npm-run-path": {
             "version": "4.0.1",
             "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
@@ -3585,9 +3593,9 @@
             }
         },
         "node_modules/postcss": {
-            "version": "8.1.14",
-            "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.1.14.tgz",
-            "integrity": "sha512-KatkyVPBKfENS+c3dpXJoDXnDD5UZs5exAnDksLqaRJPKwYphEPZt4N0m0i049v2/BtWVQibAhxW4ilXXcolpA==",
+            "version": "8.2.1",
+            "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.2.1.tgz",
+            "integrity": "sha512-RhsqOOAQzTgh1UB/IZdca7F9WDb7SUCR2Vnv1x7DbvuuggQIpoDwjK+q0rzoPffhYvWNKX5JSwS4so4K3UC6vA==",
             "dev": true,
             "dependencies": {
                 "colorette": "^1.2.1",
@@ -4235,9 +4243,9 @@
             }
         },
         "node_modules/tapable": {
-            "version": "2.1.1",
-            "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.1.1.tgz",
-            "integrity": "sha512-Wib1S8m2wdpLbmQz0RBEVosIyvb/ykfKXf3ZIDqvWoMg/zTNm6G/tDSuUM61J1kNCDXWJrLHGSFeMhAG+gAGpQ==",
+            "version": "2.2.0",
+            "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.0.tgz",
+            "integrity": "sha512-FBk4IesMV1rBxX2tfiK8RAmogtWn53puLOQlvO8XuwlgxcYbP4mVPS9Ph4aeamSyyVjOl24aYWAuc8U5kCVwMw==",
             "dev": true,
             "engines": {
                 "node": ">=6"
@@ -4523,9 +4531,9 @@
             }
         },
         "node_modules/watchpack": {
-            "version": "2.0.1",
-            "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.0.1.tgz",
-            "integrity": "sha512-vO8AKGX22ZRo6PiOFM9dC0re8IcKh8Kd/aH2zeqUc6w4/jBGlTy2P7fTC6ekT0NjVeGjgU2dGC5rNstKkeLEQg==",
+            "version": "2.1.0",
+            "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.1.0.tgz",
+            "integrity": "sha512-UjgD1mqjkG99+3lgG36at4wPnUXNvis2v1utwTgQ43C22c4LD71LsYMExdWXh4HZ+RmW+B0t1Vrg2GpXAkTOQw==",
             "dev": true,
             "dependencies": {
                 "glob-to-regexp": "^0.4.1",
@@ -4536,9 +4544,9 @@
             }
         },
         "node_modules/webpack": {
-            "version": "5.9.0",
-            "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.9.0.tgz",
-            "integrity": "sha512-YnnqIV/uAS5ZrNpctSv378qV7HmbJ74DL+XfvMxzbX1bV9e7eeT6eEWU4wuUw33CNr/HspBh7R/xQlVjTEyAeA==",
+            "version": "5.10.0",
+            "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.10.0.tgz",
+            "integrity": "sha512-P0bHAXmIz0zsNcHNLqFmLY1ZtrT+jtBr7FqpuDtA2o7GiHC+zBsfhgK7SmJ1HG7BAEb3G9JoMdSVi7mEDvG3Zg==",
             "dev": true,
             "dependencies": {
                 "@types/eslint-scope": "^3.7.0",
@@ -4559,7 +4567,7 @@
                 "loader-runner": "^4.1.0",
                 "mime-types": "^2.1.27",
                 "neo-async": "^2.6.2",
-                "pkg-dir": "^4.2.0",
+                "pkg-dir": "^5.0.0",
                 "schema-utils": "^3.0.0",
                 "tapable": "^2.1.1",
                 "terser-webpack-plugin": "^5.0.3",
@@ -4646,17 +4654,15 @@
             "resolved": "https://registry.npmjs.org/webpack-merge/-/webpack-merge-4.2.2.tgz",
             "integrity": "sha512-TUE1UGoTX2Cd42j3krGYqObZbOD+xF7u28WB7tfUordytSjbWTIjK/8V0amkBfTYN4/pB/GIDlJZZ657BGG19g==",
             "dev": true,
-            "license": "MIT",
             "dependencies": {
                 "lodash": "^4.17.15"
             }
         },
         "node_modules/webpack-merge": {
-            "version": "5.4.0",
-            "resolved": "https://registry.npmjs.org/webpack-merge/-/webpack-merge-5.4.0.tgz",
-            "integrity": "sha512-/scBgu8LVPlHDgqH95Aw1xS+L+PHrpHKOwYVGFaNOQl4Q4wwwWDarwB1WdZAbLQ24SKhY3Awe7VZGYAdp+N+gQ==",
+            "version": "5.4.1",
+            "resolved": "https://registry.npmjs.org/webpack-merge/-/webpack-merge-5.4.1.tgz",
+            "integrity": "sha512-ubwNFcKJjm5BwPH1U8ZHTMaq2+XJqyvcfWXXU6yv4IIWWPWAFvgicok8VK1OiA7iYhl33aJxL5hvwTuZuNBIHw==",
             "dev": true,
-            "license": "MIT",
             "dependencies": {
                 "clone-deep": "^4.0.1",
                 "wildcard": "^2.0.0"
@@ -4684,6 +4690,79 @@
                 "node": ">=0.10.0"
             }
         },
+        "node_modules/webpack/node_modules/find-up": {
+            "version": "5.0.0",
+            "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
+            "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
+            "dev": true,
+            "dependencies": {
+                "locate-path": "^6.0.0",
+                "path-exists": "^4.0.0"
+            },
+            "engines": {
+                "node": ">=10"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
+        "node_modules/webpack/node_modules/locate-path": {
+            "version": "6.0.0",
+            "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
+            "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
+            "dev": true,
+            "dependencies": {
+                "p-locate": "^5.0.0"
+            },
+            "engines": {
+                "node": ">=10"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
+        "node_modules/webpack/node_modules/p-limit": {
+            "version": "3.1.0",
+            "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
+            "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
+            "dev": true,
+            "dependencies": {
+                "yocto-queue": "^0.1.0"
+            },
+            "engines": {
+                "node": ">=10"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
+        "node_modules/webpack/node_modules/p-locate": {
+            "version": "5.0.0",
+            "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz",
+            "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
+            "dev": true,
+            "dependencies": {
+                "p-limit": "^3.0.2"
+            },
+            "engines": {
+                "node": ">=10"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
+        "node_modules/webpack/node_modules/pkg-dir": {
+            "version": "5.0.0",
+            "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-5.0.0.tgz",
+            "integrity": "sha512-NPE8TDbzl/3YQYY7CSS228s3g2ollTFnc+Qi3tqmqJp9Vg2ovUpixcJEo2HJScN2Ez+kEaal6y70c0ehqJBJeA==",
+            "dev": true,
+            "dependencies": {
+                "find-up": "^5.0.0"
+            },
+            "engines": {
+                "node": ">=10"
+            }
+        },
         "node_modules/webpack/node_modules/schema-utils": {
             "version": "3.0.0",
             "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.0.0.tgz",
@@ -4914,47 +4993,46 @@
             "dev": true
         },
         "@babel/core": {
-            "version": "7.12.9",
-            "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.12.9.tgz",
-            "integrity": "sha512-gTXYh3M5wb7FRXQy+FErKFAv90BnlOuNn1QkCK2lREoPAjrQCO49+HVSrFoe5uakFAF5eenS75KbO2vQiLrTMQ==",
+            "version": "7.12.10",
+            "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.12.10.tgz",
+            "integrity": "sha512-eTAlQKq65zHfkHZV0sIVODCPGVgoo1HdBlbSLi9CqOzuZanMv2ihzY+4paiKr1mH+XmYESMAmJ/dpZ68eN6d8w==",
             "dev": true,
             "requires": {
                 "@babel/code-frame": "^7.10.4",
-                "@babel/generator": "^7.12.5",
+                "@babel/generator": "^7.12.10",
                 "@babel/helper-module-transforms": "^7.12.1",
                 "@babel/helpers": "^7.12.5",
-                "@babel/parser": "^7.12.7",
+                "@babel/parser": "^7.12.10",
                 "@babel/template": "^7.12.7",
-                "@babel/traverse": "^7.12.9",
-                "@babel/types": "^7.12.7",
+                "@babel/traverse": "^7.12.10",
+                "@babel/types": "^7.12.10",
                 "convert-source-map": "^1.7.0",
                 "debug": "^4.1.0",
                 "gensync": "^1.0.0-beta.1",
                 "json5": "^2.1.2",
                 "lodash": "^4.17.19",
-                "resolve": "^1.3.2",
                 "semver": "^5.4.1",
                 "source-map": "^0.5.0"
             }
         },
         "@babel/generator": {
-            "version": "7.12.5",
-            "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.12.5.tgz",
-            "integrity": "sha512-m16TQQJ8hPt7E+OS/XVQg/7U184MLXtvuGbCdA7na61vha+ImkyyNM/9DDA0unYCVZn3ZOhng+qz48/KBOT96A==",
+            "version": "7.12.10",
+            "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.12.10.tgz",
+            "integrity": "sha512-6mCdfhWgmqLdtTkhXjnIz0LcdVCd26wS2JXRtj2XY0u5klDsXBREA/pG5NVOuVnF2LUrBGNFtQkIqqTbblg0ww==",
             "dev": true,
             "requires": {
-                "@babel/types": "^7.12.5",
+                "@babel/types": "^7.12.10",
                 "jsesc": "^2.5.1",
                 "source-map": "^0.5.0"
             }
         },
         "@babel/helper-annotate-as-pure": {
-            "version": "7.10.4",
-            "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.10.4.tgz",
-            "integrity": "sha512-XQlqKQP4vXFB7BN8fEEerrmYvHp3fK/rBkRFz9jaJbzK0B1DSfej9Kc7ZzE8Z/OnId1jpJdNAZ3BFQjWG68rcA==",
+            "version": "7.12.10",
+            "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.12.10.tgz",
+            "integrity": "sha512-XplmVbC1n+KY6jL8/fgLVXXUauDIB+lD5+GsQEh6F6GBF1dq1qy4DP4yXWzDKcoqXB3X58t61e85Fitoww4JVQ==",
             "dev": true,
             "requires": {
-                "@babel/types": "^7.10.4"
+                "@babel/types": "^7.12.10"
             }
         },
         "@babel/helper-builder-binary-assignment-operator-visitor": {
@@ -5034,12 +5112,12 @@
             }
         },
         "@babel/helper-get-function-arity": {
-            "version": "7.10.4",
-            "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.10.4.tgz",
-            "integrity": "sha512-EkN3YDB+SRDgiIUnNgcmiD361ti+AVbL3f3Henf6dqqUyr5dMsorno0lJWJuLhDhkI5sYEpgj6y9kB8AOU1I2A==",
+            "version": "7.12.10",
+            "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.12.10.tgz",
+            "integrity": "sha512-mm0n5BPjR06wh9mPQaDdXWDoll/j5UpCAPl1x8fS71GHm7HA6Ua2V4ylG1Ju8lvcTOietbPNNPaSilKj+pj+Ag==",
             "dev": true,
             "requires": {
-                "@babel/types": "^7.10.4"
+                "@babel/types": "^7.12.10"
             }
         },
         "@babel/helper-hoist-variables": {
@@ -5087,12 +5165,12 @@
             }
         },
         "@babel/helper-optimise-call-expression": {
-            "version": "7.12.7",
-            "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.12.7.tgz",
-            "integrity": "sha512-I5xc9oSJ2h59OwyUqjv95HRyzxj53DAubUERgQMrpcCEYQyToeHA+NEcUEsVWB4j53RDeskeBJ0SgRAYHDBckw==",
+            "version": "7.12.10",
+            "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.12.10.tgz",
+            "integrity": "sha512-4tpbU0SrSTjjt65UMWSrUOPZTsgvPgGG4S8QSTNHacKzpS51IVWGDj0yCwyeZND/i+LSN2g/O63jEXEWm49sYQ==",
             "dev": true,
             "requires": {
-                "@babel/types": "^7.12.7"
+                "@babel/types": "^7.12.10"
             }
         },
         "@babel/helper-plugin-utils": {
@@ -5198,9 +5276,9 @@
             }
         },
         "@babel/parser": {
-            "version": "7.12.7",
-            "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.12.7.tgz",
-            "integrity": "sha512-oWR02Ubp4xTLCAqPRiNIuMVgNO5Aif/xpXtabhzW2HWUD47XJsAB4Zd/Rg30+XeQA3juXigV7hlquOTmwqLiwg==",
+            "version": "7.12.10",
+            "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.12.10.tgz",
+            "integrity": "sha512-PJdRPwyoOqFAWfLytxrWwGrAxghCgh/yTNCYciOz8QgjflA7aZhECPZAa2VUedKg2+QMWkI0L9lynh2SNmNEgA==",
             "dev": true
         },
         "@babel/plugin-proposal-async-generator-functions": {
@@ -5693,14 +5771,13 @@
             }
         },
         "@babel/plugin-transform-runtime": {
-            "version": "7.12.1",
-            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.12.1.tgz",
-            "integrity": "sha512-Ac/H6G9FEIkS2tXsZjL4RAdS3L3WHxci0usAnz7laPWUmFiGtj7tIASChqKZMHTSQTQY6xDbOq+V1/vIq3QrWg==",
+            "version": "7.12.10",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.12.10.tgz",
+            "integrity": "sha512-xOrUfzPxw7+WDm9igMgQCbO3cJKymX7dFdsgRr1eu9n3KjjyU4pptIXbXPseQDquw+W+RuJEJMHKHNsPNNm3CA==",
             "dev": true,
             "requires": {
-                "@babel/helper-module-imports": "^7.12.1",
+                "@babel/helper-module-imports": "^7.12.5",
                 "@babel/helper-plugin-utils": "^7.10.4",
-                "resolve": "^1.8.1",
                 "semver": "^5.5.1"
             }
         },
@@ -5742,9 +5819,9 @@
             }
         },
         "@babel/plugin-transform-typeof-symbol": {
-            "version": "7.12.1",
-            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.12.1.tgz",
-            "integrity": "sha512-EPGgpGy+O5Kg5pJFNDKuxt9RdmTgj5sgrus2XVeMp/ZIbOESadgILUbm50SNpghOh3/6yrbsH+NB5+WJTmsA7Q==",
+            "version": "7.12.10",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.12.10.tgz",
+            "integrity": "sha512-JQ6H8Rnsogh//ijxspCjc21YPd3VLVoYtAwv3zQmqAt8YGYUtdo5usNhdl4b9/Vir2kPFZl6n1h0PfUz4hJhaA==",
             "dev": true,
             "requires": {
                 "@babel/helper-plugin-utils": "^7.10.4"
@@ -5770,9 +5847,9 @@
             }
         },
         "@babel/preset-env": {
-            "version": "7.12.7",
-            "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.12.7.tgz",
-            "integrity": "sha512-OnNdfAr1FUQg7ksb7bmbKoby4qFOHw6DKWWUNB9KqnnCldxhxJlP+21dpyaWFmf2h0rTbOkXJtAGevY3XW1eew==",
+            "version": "7.12.10",
+            "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.12.10.tgz",
+            "integrity": "sha512-Gz9hnBT/tGeTE2DBNDkD7BiWRELZt+8lSysHuDwmYXUIvtwZl0zI+D6mZgXZX0u8YBlLS4tmai9ONNY9tjRgRA==",
             "dev": true,
             "requires": {
                 "@babel/compat-data": "^7.12.7",
@@ -5834,12 +5911,12 @@
                 "@babel/plugin-transform-spread": "^7.12.1",
                 "@babel/plugin-transform-sticky-regex": "^7.12.7",
                 "@babel/plugin-transform-template-literals": "^7.12.1",
-                "@babel/plugin-transform-typeof-symbol": "^7.12.1",
+                "@babel/plugin-transform-typeof-symbol": "^7.12.10",
                 "@babel/plugin-transform-unicode-escapes": "^7.12.1",
                 "@babel/plugin-transform-unicode-regex": "^7.12.1",
                 "@babel/preset-modules": "^0.1.3",
-                "@babel/types": "^7.12.7",
-                "core-js-compat": "^3.7.0",
+                "@babel/types": "^7.12.10",
+                "core-js-compat": "^3.8.0",
                 "semver": "^5.5.0"
             }
         },
@@ -5877,26 +5954,26 @@
             }
         },
         "@babel/traverse": {
-            "version": "7.12.9",
-            "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.12.9.tgz",
-            "integrity": "sha512-iX9ajqnLdoU1s1nHt36JDI9KG4k+vmI8WgjK5d+aDTwQbL2fUnzedNedssA645Ede3PM2ma1n8Q4h2ohwXgMXw==",
+            "version": "7.12.10",
+            "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.12.10.tgz",
+            "integrity": "sha512-6aEtf0IeRgbYWzta29lePeYSk+YAFIC3kyqESeft8o5CkFlYIMX+EQDDWEiAQ9LHOA3d0oHdgrSsID/CKqXJlg==",
             "dev": true,
             "requires": {
                 "@babel/code-frame": "^7.10.4",
-                "@babel/generator": "^7.12.5",
+                "@babel/generator": "^7.12.10",
                 "@babel/helper-function-name": "^7.10.4",
                 "@babel/helper-split-export-declaration": "^7.11.0",
-                "@babel/parser": "^7.12.7",
-                "@babel/types": "^7.12.7",
+                "@babel/parser": "^7.12.10",
+                "@babel/types": "^7.12.10",
                 "debug": "^4.1.0",
                 "globals": "^11.1.0",
                 "lodash": "^4.17.19"
             }
         },
         "@babel/types": {
-            "version": "7.12.7",
-            "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.12.7.tgz",
-            "integrity": "sha512-MNyI92qZq6jrQkXvtIiykvl4WtoRrVV9MPn+ZfsoEENjiWcBQ3ZSHrkxnJWgWtLX3XXqX5hrSQ+X69wkmesXuQ==",
+            "version": "7.12.10",
+            "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.12.10.tgz",
+            "integrity": "sha512-sf6wboJV5mGyip2hIpDSKsr80RszPinEFjsHTalMxZAZkoQ2/2yQzxlcFN52SJqsyPfLtPmenL4g2KB3KJXPDw==",
             "dev": true,
             "requires": {
                 "@babel/helper-validator-identifier": "^7.10.4",
@@ -5984,9 +6061,9 @@
             "peer": true
         },
         "@types/node": {
-            "version": "14.14.10",
-            "resolved": "https://registry.npmjs.org/@types/node/-/node-14.14.10.tgz",
-            "integrity": "sha512-J32dgx2hw8vXrSbu4ZlVhn1Nm3GbeCFNw2FWL8S5QKucHGY0cyNwjdQdO+KMBZ4wpmC7KhLCiNsdk1RFRIYUQQ==",
+            "version": "14.14.11",
+            "resolved": "https://registry.npmjs.org/@types/node/-/node-14.14.11.tgz",
+            "integrity": "sha512-BJ97wAUuU3NUiUCp44xzUFquQEvnk1wu7q4CMEUYKJWjdkr0YWYDsm4RFtAvxYsNjLsKcrFt6RvK8r+mnzMbEQ==",
             "dev": true
         },
         "@webassemblyjs/ast": {
@@ -6479,12 +6556,12 @@
             }
         },
         "core-js-compat": {
-            "version": "3.8.0",
-            "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.8.0.tgz",
-            "integrity": "sha512-o9QKelQSxQMYWHXc/Gc4L8bx/4F7TTraE5rhuN8I7mKBt5dBIUpXpIR3omv70ebr8ST5R3PqbDQr+ZI3+Tt1FQ==",
+            "version": "3.8.1",
+            "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.8.1.tgz",
+            "integrity": "sha512-a16TLmy9NVD1rkjUGbwuyWkiDoN0FDpAwrfLONvHFQx0D9k7J9y0srwMT8QP/Z6HE3MIFaVynEeYwZwPX1o5RQ==",
             "dev": true,
             "requires": {
-                "browserslist": "^4.14.7",
+                "browserslist": "^4.15.0",
                 "semver": "7.0.0"
             },
             "dependencies": {
@@ -6619,9 +6696,9 @@
             "dev": true
         },
         "electron-to-chromium": {
-            "version": "1.3.615",
-            "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.615.tgz",
-            "integrity": "sha512-fNYTQXoUhNc6RmHDlGN4dgcLURSBIqQCN7ls6MuQ741+NJyLNRz8DxAC+pZpOKfRs6cfY0lv2kWdy8Oxf9j4+A==",
+            "version": "1.3.621",
+            "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.621.tgz",
+            "integrity": "sha512-FeIuBzArONbAmKmZIsZIFGu/Gc9AVGlVeVbhCq+G2YIl6QkT0TDn2HKN/FMf1btXEB9kEmIuQf3/lBTVAbmFOg==",
             "dev": true
         },
         "emoji-regex": {
@@ -7466,9 +7543,9 @@
             "dev": true
         },
         "mini-css-extract-plugin": {
-            "version": "1.3.1",
-            "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-1.3.1.tgz",
-            "integrity": "sha512-jIOheqh9EU98rqj6ZaFTYNNDSFqdakNqaUZfkYwaXPjI9batmXVXX+K71NrqRAgtoGefELBMld1EQ7dqSAD5SQ==",
+            "version": "1.3.2",
+            "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-1.3.2.tgz",
+            "integrity": "sha512-ofYJgCZNm1TToSv02pGANe1lfb31g7ULwNV5Nt31d2dAnVLxFHoguDUAj6U0BLEO7Nrztq4mdtL1yFDaeW7J+A==",
             "dev": true,
             "requires": {
                 "loader-utils": "^2.0.0",
@@ -7560,6 +7637,11 @@
                 "validate-npm-package-license": "^3.0.1"
             }
         },
+        "normalize.css": {
+            "version": "8.0.1",
+            "resolved": "https://registry.npmjs.org/normalize.css/-/normalize.css-8.0.1.tgz",
+            "integrity": "sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg=="
+        },
         "npm-run-path": {
             "version": "4.0.1",
             "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
@@ -7701,9 +7783,9 @@
             }
         },
         "postcss": {
-            "version": "8.1.14",
-            "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.1.14.tgz",
-            "integrity": "sha512-KatkyVPBKfENS+c3dpXJoDXnDD5UZs5exAnDksLqaRJPKwYphEPZt4N0m0i049v2/BtWVQibAhxW4ilXXcolpA==",
+            "version": "8.2.1",
+            "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.2.1.tgz",
+            "integrity": "sha512-RhsqOOAQzTgh1UB/IZdca7F9WDb7SUCR2Vnv1x7DbvuuggQIpoDwjK+q0rzoPffhYvWNKX5JSwS4so4K3UC6vA==",
             "dev": true,
             "requires": {
                 "colorette": "^1.2.1",
@@ -8200,9 +8282,9 @@
             }
         },
         "tapable": {
-            "version": "2.1.1",
-            "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.1.1.tgz",
-            "integrity": "sha512-Wib1S8m2wdpLbmQz0RBEVosIyvb/ykfKXf3ZIDqvWoMg/zTNm6G/tDSuUM61J1kNCDXWJrLHGSFeMhAG+gAGpQ==",
+            "version": "2.2.0",
+            "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.0.tgz",
+            "integrity": "sha512-FBk4IesMV1rBxX2tfiK8RAmogtWn53puLOQlvO8XuwlgxcYbP4mVPS9Ph4aeamSyyVjOl24aYWAuc8U5kCVwMw==",
             "dev": true
         },
         "terser": {
@@ -8406,9 +8488,9 @@
             }
         },
         "watchpack": {
-            "version": "2.0.1",
-            "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.0.1.tgz",
-            "integrity": "sha512-vO8AKGX22ZRo6PiOFM9dC0re8IcKh8Kd/aH2zeqUc6w4/jBGlTy2P7fTC6ekT0NjVeGjgU2dGC5rNstKkeLEQg==",
+            "version": "2.1.0",
+            "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.1.0.tgz",
+            "integrity": "sha512-UjgD1mqjkG99+3lgG36at4wPnUXNvis2v1utwTgQ43C22c4LD71LsYMExdWXh4HZ+RmW+B0t1Vrg2GpXAkTOQw==",
             "dev": true,
             "requires": {
                 "glob-to-regexp": "^0.4.1",
@@ -8416,9 +8498,9 @@
             }
         },
         "webpack": {
-            "version": "5.9.0",
-            "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.9.0.tgz",
-            "integrity": "sha512-YnnqIV/uAS5ZrNpctSv378qV7HmbJ74DL+XfvMxzbX1bV9e7eeT6eEWU4wuUw33CNr/HspBh7R/xQlVjTEyAeA==",
+            "version": "5.10.0",
+            "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.10.0.tgz",
+            "integrity": "sha512-P0bHAXmIz0zsNcHNLqFmLY1ZtrT+jtBr7FqpuDtA2o7GiHC+zBsfhgK7SmJ1HG7BAEb3G9JoMdSVi7mEDvG3Zg==",
             "dev": true,
             "requires": {
                 "@types/eslint-scope": "^3.7.0",
@@ -8439,7 +8521,7 @@
                 "loader-runner": "^4.1.0",
                 "mime-types": "^2.1.27",
                 "neo-async": "^2.6.2",
-                "pkg-dir": "^4.2.0",
+                "pkg-dir": "^5.0.0",
                 "schema-utils": "^3.0.0",
                 "tapable": "^2.1.1",
                 "terser-webpack-plugin": "^5.0.3",
@@ -8447,6 +8529,52 @@
                 "webpack-sources": "^2.1.1"
             },
             "dependencies": {
+                "find-up": {
+                    "version": "5.0.0",
+                    "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
+                    "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
+                    "dev": true,
+                    "requires": {
+                        "locate-path": "^6.0.0",
+                        "path-exists": "^4.0.0"
+                    }
+                },
+                "locate-path": {
+                    "version": "6.0.0",
+                    "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
+                    "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
+                    "dev": true,
+                    "requires": {
+                        "p-locate": "^5.0.0"
+                    }
+                },
+                "p-limit": {
+                    "version": "3.1.0",
+                    "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
+                    "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
+                    "dev": true,
+                    "requires": {
+                        "yocto-queue": "^0.1.0"
+                    }
+                },
+                "p-locate": {
+                    "version": "5.0.0",
+                    "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz",
+                    "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
+                    "dev": true,
+                    "requires": {
+                        "p-limit": "^3.0.2"
+                    }
+                },
+                "pkg-dir": {
+                    "version": "5.0.0",
+                    "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-5.0.0.tgz",
+                    "integrity": "sha512-NPE8TDbzl/3YQYY7CSS228s3g2ollTFnc+Qi3tqmqJp9Vg2ovUpixcJEo2HJScN2Ez+kEaal6y70c0ehqJBJeA==",
+                    "dev": true,
+                    "requires": {
+                        "find-up": "^5.0.0"
+                    }
+                },
                 "schema-utils": {
                     "version": "3.0.0",
                     "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.0.0.tgz",
@@ -8515,9 +8643,9 @@
             }
         },
         "webpack-merge": {
-            "version": "5.4.0",
-            "resolved": "https://registry.npmjs.org/webpack-merge/-/webpack-merge-5.4.0.tgz",
-            "integrity": "sha512-/scBgu8LVPlHDgqH95Aw1xS+L+PHrpHKOwYVGFaNOQl4Q4wwwWDarwB1WdZAbLQ24SKhY3Awe7VZGYAdp+N+gQ==",
+            "version": "5.4.1",
+            "resolved": "https://registry.npmjs.org/webpack-merge/-/webpack-merge-5.4.1.tgz",
+            "integrity": "sha512-ubwNFcKJjm5BwPH1U8ZHTMaq2+XJqyvcfWXXU6yv4IIWWPWAFvgicok8VK1OiA7iYhl33aJxL5hvwTuZuNBIHw==",
             "dev": true,
             "requires": {
                 "clone-deep": "^4.0.1",
diff --git a/package.json b/package.json
index 1372329..36856dd 100644
--- a/package.json
+++ b/package.json
@@ -1,8 +1,15 @@
 {
+    "name": "geo-tief",
+    "version": "1.0.0",
+    "description": "3D geology viewer",
+    "main": "dist/main.js",
     "dependencies": {
+        "normalize.css": "^8.0.1",
         "proj4": "^2.6.3",
         "three": "^0.123.0"
     },
+    "author": "Arno Kaimbacher",
+    "license": "MIT",
     "devDependencies": {
         "@babel/core": "^7.12.9",
         "@babel/plugin-proposal-class-properties": "^7.12.1",
@@ -28,5 +35,10 @@
         "serve": "http-server",
         "prod": "rm -rf dist && webpack --progress --mode=production",
         "watch": "concurrently \"npm run serve\" \"npx webpack --progress --mode=development --watch\" "
-    }
+    },
+    "keywords": [
+        "3D",
+        "geology",
+        "GeoTief"
+    ]
 }
diff --git a/src/css/page.css b/src/css/page.css
index 9cb222c..ff3bf33 100644
--- a/src/css/page.css
+++ b/src/css/page.css
@@ -1,4 +1,86 @@
-/*@charset "UTF-8";*/
+@import "../../node_modules/normalize.css/normalize.css";
+
+/* html, body
+{ 
+    height: 100%;
+    width: 100%;
+    overflow: hidden;
+    text-size-adjust: 100%;  
+      font-family: 'Open Sans', sans-serif;
+} */
+
+
+
+html, body {
+  height: 100%;
+  width: 100%;
+  
+  line-height: 1.6;
+  font-weight: 400;
+  font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  color: #222; }
+
+
+
+
+/* body {
+    padding-top: 65px;
+  } */
+
+  section {
+    text-align: left;
+    padding: 60px 0 0 0;
+  }
+  .main {
+    padding-top: 51px;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: space-around;
+/* height: 100%; */
+position: absolute;
+overflow: hidden;
+left: 0;
+right: 0;
+top: 0;
+bottom: 0;
+overflow-y: scroll
+  }
+  .canvas-area {
+    /* flex: 2;
+    display: flex;
+    align-items: center;
+    justify-content: center; */
+    height: 100%;
+    /* margin: 10px; */
+  }
+
+  .input-area {
+    /* flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center; */
+    /* margin: 10px; */
+  }
+
+  .btnDownloadMeme {
+    margin-top: 10px;
+  }
+
+  #div-map {
+    position: relative;
+    height: 100%;
+    width: 100%;
+}
+
+#webgl {
+    height: auto;
+    width: auto;   
+}
+
+
+
 
 .mapDesktop {
     overflow: hidden;
@@ -74,11 +156,9 @@
 }
 
 
-.gba-control-home span {
-    /*padding: 2px;*/
+.gba-control-home span {  
     width: 30px;
-    height: 30px;
-    /*background-color: rgba(102,102,102,0.80);*/
+    height: 30px;   
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
@@ -86,11 +166,584 @@
     cursor: pointer;
     border-radius: 5px;
     background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAMAAAAM7l6QAAABDlBMVEWZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmXl5f///+VlZWZmZmWlpaUlJSYmJiSkpKampqzs7O3t7fMzMyTk5O2trarq6uysrLR0dHY2Njb29v8/PyMjIy4uLi5ubm6urq1tbSbm5uhoaGmpqanp6eoqKi7u7u+vr7BwcHFxcXGxsbHx8fIyMjJycmpqanNzc3Ozs7Pz8/Q0NCNjY3S0tLT09PV1dXW1tavr6/Z2dmxsbHc3Nzd3d3i4uLn5+fv7+/w8PD39/f5+fn7+/uPj4/9/f3+/v6QkJA5Pja9AAAAGnRSTlMABUdVVmxucX6MtLvHycrN2Nzi4+vs7e/3+OshyJcAAAECSURBVHherdLFcsQwEEXRDjLDJOkWGYcnzMzM/P8/Eo8V18i4yl091alSaSGAgclSdnMTPQB9vKBumCriYZg3j0qKGI9DyVRxVPVNHjVZyTN6u/VzGFmNiN4di3NmWWiw1itq9+Faoux5WxhjFNeka660grkkTUZxQ1Ff7glR2WTEO+rUfI0zqgbFM1moB0rm+BEL+5FS1XzUjOvPlFHdViELx3tKa8M7xr/LW7tpvr/A6Gn+HlHGy/+Xv8Ny+XCzUtmo5/LyD2Ofp7m8LYN9nuZ9gy/1djssd17CVlmwD/Susjbrj2yvhdnJPQbTPEjpeHKPwCAvqBe6hmYXs1uY6YdfRkdtRcSvwdgAAAAASUVORK5CYII=') /*img/home.png*/;
-    /*opacity : 0.8;*/
     background-position: 50% 50%;
     background-repeat: no-repeat;
     display: block;
 }
 
 
+/* Typography
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+h1, h2, h3, h4, h5, h6 {
+  margin-top: 0;
+  margin-bottom: 2rem;
+  font-weight: 300; }
+h1 { font-size: 4.0rem; line-height: 1.2;  letter-spacing: -.1rem;}
+h2 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; }
+h3 { font-size: 3.0rem; line-height: 1.3;  letter-spacing: -.1rem; }
+h4 { font-size: 2.4rem; line-height: 1.35; letter-spacing: -.08rem; }
+h5 { font-size: 1.8rem; line-height: 1.5;  letter-spacing: -.05rem; }
+h6 { font-size: 1.5rem; line-height: 1.6;  letter-spacing: 0; }
 
+/* Larger than phablet */
+@media (min-width: 550px) {
+  h1 { font-size: 5.0rem; }
+  h2 { font-size: 4.2rem; }
+  h3 { font-size: 3.6rem; }
+  h4 { font-size: 3.0rem; }
+  h5 { font-size: 2.4rem; }
+  h6 { font-size: 1.5rem; }
+}
+
+p {
+  margin-top: 0; }
+
+
+/* Links
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+a {
+  color: #1EAEDB; }
+a:hover {
+  color: #0FA0CE; }
+
+
+
+/* Grid
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+.container {
+    position: relative;
+    width: 100%;
+    max-width: 960px;
+    margin: 0 auto;
+    padding: 0 20px;
+    box-sizing: border-box; }
+  .column,
+  .columns {
+    width: 100%;
+    float: left;
+    box-sizing: border-box; }
+  
+  /* For devices larger than 400px */
+  @media (min-width: 400px) {
+    .container {
+      width: 85%;
+      padding: 0; }
+  }
+
+/* For devices larger than 550px */
+@media (min-width: 550px) {
+    .container {
+      width: 80%; }
+    .column,
+    .columns {
+      margin-left: 4%; }
+    .column:first-child,
+    .columns:first-child {
+      margin-left: 0; }
+  
+    .one.column,
+    .one.columns                    { width: 4.66666666667%; }
+    .two.columns                    { width: 13.3333333333%; }
+    .three.columns                  { width: 22%;            }
+    .four.columns                   { width: 30.6666666667%; }
+    .five.columns                   { width: 39.3333333333%; }
+    .six.columns                    { width: 48%;            }
+    .seven.columns                  { width: 56.6666666667%; }
+    .eight.columns                  { width: 65.3333333333%; }
+    .nine.columns                   { width: 74.0%;          }
+    .ten.columns                    { width: 82.6666666667%; }
+    .eleven.columns                 { width: 91.3333333333%; }
+    .twelve.columns                 { width: 100%; margin-left: 0; }
+  
+    .one-third.column               { width: 30.6666666667%; }
+    .two-thirds.column              { width: 65.3333333333%; }
+  
+    .one-half.column                { width: 48%; }
+  
+    /* Offsets */
+    .offset-by-one.column,
+    .offset-by-one.columns          { margin-left: 8.66666666667%; }
+    .offset-by-two.column,
+    .offset-by-two.columns          { margin-left: 17.3333333333%; }
+    .offset-by-three.column,
+    .offset-by-three.columns        { margin-left: 26%;            }
+    .offset-by-four.column,
+    .offset-by-four.columns         { margin-left: 34.6666666667%; }
+    .offset-by-five.column,
+    .offset-by-five.columns         { margin-left: 43.3333333333%; }
+    .offset-by-six.column,
+    .offset-by-six.columns          { margin-left: 52%;            }
+    .offset-by-seven.column,
+    .offset-by-seven.columns        { margin-left: 60.6666666667%; }
+    .offset-by-eight.column,
+    .offset-by-eight.columns        { margin-left: 69.3333333333%; }
+    .offset-by-nine.column,
+    .offset-by-nine.columns         { margin-left: 78.0%;          }
+    .offset-by-ten.column,
+    .offset-by-ten.columns          { margin-left: 86.6666666667%; }
+    .offset-by-eleven.column,
+    .offset-by-eleven.columns       { margin-left: 95.3333333333%; }
+  
+    .offset-by-one-third.column,
+    .offset-by-one-third.columns    { margin-left: 34.6666666667%; }
+    .offset-by-two-thirds.column,
+    .offset-by-two-thirds.columns   { margin-left: 69.3333333333%; }
+  
+    .offset-by-one-half.column,
+    .offset-by-one-half.columns     { margin-left: 52%; }
+  
+  }
+
+
+  /* Clearing
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+
+/* Self Clearing Goodness */
+.container:after,
+.row:after,
+.u-cf {
+  content: "";
+  display: table;
+  clear: both; }
+
+
+
+/* Buttons
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+.button,
+button,
+input[type="submit"],
+input[type="reset"],
+input[type="button"] {
+  display: inline-block;
+  height: 38px;
+  padding: 0 30px;
+  color: #555;
+  text-align: center;
+  font-size: 11px;
+  font-weight: 600;
+  line-height: 38px;
+  letter-spacing: .1rem;
+  text-transform: uppercase;
+  text-decoration: none;
+  white-space: nowrap;
+  background-color: transparent;
+  border-radius: 4px;
+  border: 1px solid #bbb;
+  cursor: pointer;
+  box-sizing: border-box; }
+.button:hover,
+button:hover,
+input[type="submit"]:hover,
+input[type="reset"]:hover,
+input[type="button"]:hover,
+.button:focus,
+button:focus,
+input[type="submit"]:focus,
+input[type="reset"]:focus,
+input[type="button"]:focus {
+  color: #333;
+  border-color: #888;
+  outline: 0; }
+.button.button-primary,
+button.button-primary,
+input[type="submit"].button-primary,
+input[type="reset"].button-primary,
+input[type="button"].button-primary {
+  color: #FFF;
+  background-color: #33C3F0;
+  border-color: #33C3F0; }
+.button.button-primary:hover,
+button.button-primary:hover,
+input[type="submit"].button-primary:hover,
+input[type="reset"].button-primary:hover,
+input[type="button"].button-primary:hover,
+.button.button-primary:focus,
+button.button-primary:focus,
+input[type="submit"].button-primary:focus,
+input[type="reset"].button-primary:focus,
+input[type="button"].button-primary:focus {
+  color: #FFF;
+  background-color: #1EAEDB;
+  border-color: #1EAEDB; }
+  
+
+/* Forms
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+input[type="email"],
+input[type="number"],
+input[type="search"],
+input[type="text"],
+input[type="tel"],
+input[type="url"],
+input[type="password"],
+textarea,
+select {
+  height: 38px;
+  padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
+  background-color: #fff;
+  border: 1px solid #D1D1D1;
+  border-radius: 4px;
+  box-shadow: none;
+  box-sizing: border-box; }
+/* Removes awkward default styles on some inputs for iOS */
+input[type="email"],
+input[type="number"],
+input[type="search"],
+input[type="text"],
+input[type="tel"],
+input[type="url"],
+input[type="password"],
+textarea {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none; }
+textarea {
+  min-height: 65px;
+  padding-top: 6px;
+  padding-bottom: 6px; }
+input[type="email"]:focus,
+input[type="number"]:focus,
+input[type="search"]:focus,
+input[type="text"]:focus,
+input[type="tel"]:focus,
+input[type="url"]:focus,
+input[type="password"]:focus,
+textarea:focus,
+select:focus {
+  border: 1px solid #33C3F0;
+  outline: 0; }
+label,
+legend {
+  display: block;
+  margin-bottom: .5rem;
+  font-weight: 600; }
+fieldset {
+  padding: 0;
+  border-width: 0; }
+input[type="checkbox"],
+input[type="radio"] {
+  display: inline; }
+label > .label-body {
+  display: inline-block;
+  margin-left: .5rem;
+  font-weight: normal; }
+
+  /* =Navigation
+-------- */
+/* .header {
+  background-color: #fff;
+  box-shadow: 1px 1px 4px 0 rgba(0,0,0,.1);
+  position: fixed;
+  width: 100%;
+  z-index: 3;
+} */
+/* .header .menu {
+  clear: both;
+  max-height: 0;
+  transition: max-height .2s ease-out;
+} */
+.header .menu-icon {
+  color: white;
+  font-size: 30px;
+  line-height: 1em;
+
+  position: absolute;
+  left: 100%;
+  padding: 20px;
+
+  -webkit-transition: all .15s ease-in-out;
+  -moz-transition: all .15s ease-in-out;
+  -ms-transition: all .15s ease-in-out;
+  -o-transition: all .15s ease-in-out;
+  transition: all .15s ease-in-out;
+  user-select: none;
+}
+
+.header .menu-icon.active {
+  background-color: rgba(0,0,0, .3);
+}
+.header .menu-icon:hover {
+  color: #222;
+  background-color: transparent;
+}
+
+.header .logo {  
+  line-height: 1em;
+  /* position: absolute;  
+  padding: 22px;
+  color: black; */
+  -webkit-transition: all .15s ease-in-out;
+  -moz-transition: all .15s ease-in-out;
+  -ms-transition: all .15s ease-in-out;
+  -o-transition: all .15s ease-in-out;
+  transition: all .15s ease-in-out;
+  user-select: none;
+}
+
+
+
+.navigation.active {
+  /* make visible visible */
+  -webkit-transform: translateX(0);
+  -moz-transform: translateX(0);
+  -ms-transform: translateX(0);
+  -o-transform: translateX(0);
+  transform: translateX(0);
+}
+
+.navigation {
+  position: fixed;
+ 
+  top: 0; left: 0; bottom: none;
+ 
+  z-index: 3;
+  width: 100%;
+ 
+  -webkit-transform: translateX(-100%);
+  -moz-transform: translateX(-100%);
+  -ms-transform: translateX(-100%);
+  -o-transform: translateX(-100%);
+  transform: translateX(-100%);
+
+  -webkit-transition: all .5s ease-in-out;
+  -moz-transition: all .5s ease-in-out;
+  -ms-transition: all .5s ease-in-out;
+  -o-transition: all .5s ease-in-out;
+  transition: all .5s ease-in-out;
+  /* background:#3ad29f; */
+  color: #757575;
+  background-color: white;
+  border-bottom: 1px solid #dcdcdc;
+  /* border-bottom: 1px solid #dcdcdc; */
+}
+
+.navigation ul {
+  /* display:none; */
+    width:100%;
+    list-style:none;
+  margin: 0;
+  padding:0;
+  
+  /* background-color: #fff; */
+}
+.header ul li {
+  display: block;
+  float: left;
+  text-align: center;
+  margin: 0;
+}
+
+.navigation ul li a {
+  color: #757575;
+  background-color: white;
+}
+
+.navigation ul li a {
+  display: block;
+  padding:1em;
+  text-decoration: none;	
+
+}
+
+nav ul li a.current,
+nav ul li a:hover {
+  background-color: #eee; 
+	color: #757575;
+} 
+
+/* nav ul li a.current,
+nav ul li a:hover {
+  background: #2dc592;
+} */
+
+/* Float right the list item that should be right aligned */
+.navigation ul li.right { float: right; }
+
+
+
+
+
+/* Code
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+code {
+  padding: .2rem .5rem;
+  margin: 0 .2rem;
+  font-size: 90%;
+  white-space: nowrap;
+  background: #F1F1F1;
+  border: 1px solid #E1E1E1;
+  border-radius: 4px; }
+pre > code {
+  display: block;
+  padding: 1rem 1.5rem;
+  white-space: pre; }
+
+
+/* Tables
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+th,
+td {
+  padding: 12px 15px;
+  text-align: left;
+  border-bottom: 1px solid #E1E1E1; }
+th:first-child,
+td:first-child {
+  padding-left: 0; }
+th:last-child,
+td:last-child {
+  padding-right: 0; }
+
+
+/* Spacing
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+button,
+.button {
+  margin-bottom: 1rem; }
+input,
+textarea,
+select,
+fieldset {
+  margin-bottom: 1.5rem; }
+pre,
+blockquote,
+dl,
+figure,
+table,
+p,
+ul,
+ol,
+form {
+  margin-bottom: 2.5rem; }
+
+
+/* Utilities
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+.u-full-width {
+  width: 100%;
+  box-sizing: border-box; }
+.u-max-full-width {
+  max-width: 100%;
+  box-sizing: border-box; }
+.u-pull-right {
+  float: right; }
+.u-pull-left {
+  float: left; }
+
+
+
+
+  /* Media Queries
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+/*
+Note: The best way to structure the use of media queries is to create the queries
+near the relevant code. For example, if you wanted to change the styles for buttons
+on small devices, paste the mobile query code up in the buttons section and style it
+there.
+*/
+
+
+/* Larger than mobile */
+@media (min-width: 400px) {}
+
+/* Larger than phablet (also point when grid becomes active) */
+@media (min-width: 550px) {}
+
+/* Larger than tablet */
+@media (min-width: 750px) {
+
+  .header .navigation {
+    /* clear: none;
+    float: right;
+    max-height: none; */
+      /* always visible */
+    -webkit-transform: translateX(0);
+  -moz-transform: translateX(0);
+  -ms-transform: translateX(0);
+  -o-transform: translateX(0);
+  transform: translateX(0);
+  }
+
+}
+/* smaller than tablet */
+@media (max-width: 750px) {
+  .header ul li {
+    display: list-item;
+    float: none;
+    text-align: left;
+	
+  }
+  .header li a {
+    /* padding: 20px 30px; */
+    display: block;
+		text-align: left;
+  }
+  .header .logo { 
+    /* display: inline;  */
+    display: none;
+    position: unset;
+  }
+  .navigation a.menu-icon {
+    display: inline;
+  }
+  .header .navigation {
+    width: 320px;
+    height: 100%;
+   
+ 
+  }
+  .navigation ul li:hover ul {
+		border: none;
+	}
+	.navigation ul li.right {
+		float: none;
+  } 
+}
+
+/* Larger than desktop */
+@media (min-width: 1000px) {}
+
+/* Larger than Desktop HD */
+@media (min-width: 1200px) {}
+
+.tab-content {
+  min-height: 390px;
+}
+
+ul.tab-nav {
+  list-style: none;
+  border-bottom: 1px solid #bbb;
+  padding-left: 5px;
+}
+
+ul.tab-nav li {
+  display: inline;
+}
+
+ul.tab-nav li span.button {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  margin-bottom: -1px;
+  border-bottom: none;
+}
+
+ul.tab-nav li span.active.button {
+  border-bottom: 0.175em solid #fff;
+  border-bottom-color: #00bfffcc;
+  color: #00bfffcc;
+  /* background-color: #6c6e6b; */
+}
+
+.tab-nav {
+  z-index: 2;
+}
+
+.tab-content .tab-pane {
+  display: none;
+  /* visibility: hidden; */
+}
+
+.tab-content .tab-pane.active {
+  display: block;
+  /* visibility: visible; */
+}
\ No newline at end of file
diff --git a/src/js/controls/LayerControl.css b/src/js/controls/LayerControl.css
index 6cc48d4..03d4297 100644
--- a/src/js/controls/LayerControl.css
+++ b/src/js/controls/LayerControl.css
@@ -39,6 +39,14 @@
    background: #eaeaea;
 }
 
+.gba-controllayers-parent-expanded .gba-controllayers-container {
+   display: block;
+   position: relative;
+}
+.gba-controllayers-parent-expanded {  
+   color: #333;  
+}
+
 .gba-controllayers-selector {
    margin-top: 2px;
    position: relative;
@@ -58,25 +66,20 @@
 
 
 
-.gbaLegendServiceLabel {
-   font-weight: bold;
-}
-
-.gbaLegendLayerLabel {
-   padding-top: 5px;
-}
-
 
 .checkboxFive {
 position: relative;
 width:35px;
+height: 31py;
+
+vertical-align: super;
 }
 input[type=checkbox] {
      position: absolute; 
    overflow: hidden; 
    clip: rect(0 0 0 0); 
-   height:1px; 
-   width:1px;   
+   /* height:1px; 
+   width:1px;    */
    padding:0;
    border:0;
 }
@@ -86,12 +89,15 @@ input[type=checkbox] {
 .checkboxFive label {
    cursor: pointer;
    position: absolute;
-   width: 16px;
-   height: 16px;
-   top: 0;
-   left: 0;
+   width: 20px;
+   height: 20px;
+   margin-left: auto;
+margin-right: auto;
+left: 0;
+right: 0;
+text-align: center;
    background: #eee;
-   border: 1px solid #ddd;
+   /* border: 1px solid #ddd; */
 }
 /* Display the tick inside the checkbox */
 .checkboxFive label:after {
@@ -101,7 +107,7 @@ input[type=checkbox] {
    width: 8px;
    height: 5px;
    background: transparent;
-   top: 3px;
+   top: 5px;
    left: 3px;
    border: 3px solid #333;
    border-top: none;
diff --git a/src/js/controls/LayerControl.js b/src/js/controls/LayerControl.js
index c782458..28e9533 100644
--- a/src/js/controls/LayerControl.js
+++ b/src/js/controls/LayerControl.js
@@ -16,6 +16,7 @@ export class LayerControl extends Control {
     };
 
     //private class fileds:
+    _container;
     _mainMap;
     _scene;
     _objectGroup;
@@ -42,13 +43,28 @@ export class LayerControl extends Control {
     onAdd(map) {
         this._mainMap = map;
 
-        let className = "gba-controllayers"
-        let container = this._container = dom.createDom("div", { "class": className });
+        let className = "gba-controllayers";
+        let container;
+        let toggleable = false;
+
+        if (this.options.parentDiv) {
+            container = this._container = document.getElementById(this.options.parentDiv);
+            dom.addClass(container, className);
+            toggleable  = false;
+        } else {
+            container = this._container = dom.createDom("div", { "class": className });
+            toggleable = true;
+        }
+
+       
+
+
+
         domEvent.on(container, 'click', domEvent.stopPropagation);
 
         let layerContainer = this._layerContainer =  dom.createDom('div', { "class": className + '-container' }, container);
 
-        if (this.options.collapsed) {
+        if (this.options.collapsed && toggleable == true) {
             domEvent.on(container, 'mouseenter', this._expand, this);
             domEvent.on(container, 'mouseleave', this._collapse, this);
 
@@ -58,17 +74,20 @@ export class LayerControl extends Control {
             domEvent.on(this._layersLink, 'focus', this._expand, this);
         }
         else {
-            this._expand();
+            // this._expand();
+            this._container.classList.add("gba-controllayers-parent-expanded");
         }
         this._baseLayersList = dom.createDom('div', { "class": className + '-base' }, layerContainer);
         this._separator = dom.createDom('div', { "class": className + '-separator' }, layerContainer);
         //this._overlaysList = dom.createDom('div', { "class": className + '-overlays' }, layerContainer);
-        var overlayTable = dom.createDom("table", { cellpadding: 0, cellspacing: 0, width: "95%", "class": className + '-overlays' }, layerContainer);
+        var overlayTable = dom.createDom("table", { cellpadding: 0, cellspacing: 0, width: "95%", "class": className + '-overlays u-full-width' }, layerContainer);
         this._overlaysList = dom.createDom("tbody", {}, overlayTable);
 
         this._updateLayerList();
 
-        return container;
+        if (toggleable == true) {
+            return container;
+        }
     }
 
     _addLayer(layer, name, overlay) {
@@ -112,21 +131,26 @@ export class LayerControl extends Control {
         var legendEntryRow = dom.createDom("tr", { style: "display: row-table; height: 20px;" }, container);
         //domStyle.set(legendEntryRow, 'display', rowVisibility);
         //dom.setProperties(legendEntryRow, { style: "display: row-table;" });
+        
+        var legendDataCell = dom.createDom("td", { "style": "width:25px;vertical-align: top;"}, legendEntryRow);
+        let legendDiv = dom.createDom("div", { "style": "width:20px; height:20px;"}, legendDataCell);
+        legendDiv.style.backgroundColor = "#" + obj.layer.color;
+
         var chkDataCell = dom.createDom("td", { "class": "checkboxFive" }, legendEntryRow);
-        var lblDataCell = dom.createDom("td", {}, legendEntryRow);
+        var lblDataCell = dom.createDom("td", {"style": "vertical-align: top;"}, legendEntryRow);
 
 
         var input = dom.createDom("input", { type: 'checkbox', checked: checked, id: util.stamp(obj.layer) }, chkDataCell);
         input.layerId = util.stamp(obj.layer);
         domEvent.on(input, 'click', function () { this._onInputClick(util.stamp(obj.layer)); }, this);
-        var chkLabel = dom.createDom("label", { for: util.stamp(obj.layer) }, chkDataCell);
+        dom.createDom("label", { for: util.stamp(obj.layer) }, chkDataCell);
 
-        //var span = dom.createDom("span", { innerHTML: " " + obj.name }, lblDataCell);
+        dom.createDom("span", { innerHTML: " " + obj.name }, lblDataCell);
         //legend entry label
-        var _table = dom.createDom("table", { width: "95%", dir: "ltr" }, lblDataCell);
-        var _tbody = dom.createDom("tbody", {}, _table);
-        var _tr = dom.createDom("tr", {}, _tbody);
-        var _td = dom.createDom("td", { innerHTML: obj.name, align: this.alignRight ? "right" : "left" }, _tr);
+        // var _table = dom.createDom("table", { width: "95%", dir: "ltr" }, lblDataCell);
+        // var _tbody = dom.createDom("tbody", {}, _table);
+        // var _tr = dom.createDom("tr", {}, _tbody);
+        // var _td = dom.createDom("td", { innerHTML: obj.name, align: this.alignRight ? "right" : "left" }, _tr);
 
 
 
diff --git a/src/js/core/domUtil.js b/src/js/core/domUtil.js
index 3c4d40b..b73c7e0 100644
--- a/src/js/core/domUtil.js
+++ b/src/js/core/domUtil.js
@@ -86,6 +86,43 @@ export function setProperties(element, properties) {
     }
 }
 
+// @function addClass(el: HTMLElement, name: String)
+// Adds `name` to the element's class attribute.
+export function addClass(el, name) {
+	if (el.classList !== undefined) {
+		var classes = util.trim(name).split(/\s+/);
+		for (var i = 0, len = classes.length; i < len; i++) {
+			el.classList.add(classes[i]);
+		}
+	} else if (!hasClass(el, name)) {
+		var className = getClass(el);
+		setClass(el, (className ? className + ' ' : '') + name);
+	}
+}
+
+
+// @function setClass(el: HTMLElement, name: String)
+// Sets the element's class.
+export function setClass(el, name) {
+	if (el.className.baseVal === undefined) {
+		el.className = name;
+	} else {
+		// in case of SVG element
+		el.className.baseVal = name;
+	}
+}
+
+// @function getClass(el: HTMLElement): String
+// Returns the element's class.
+export function getClass(el) {
+	// Check if the element is an SVGElementInstance and use the correspondingElement instead
+	// (Required for linked SVG elements in IE11.)
+	if (el.correspondingElement) {
+		el = el.correspondingElement;
+	}
+	return el.className.baseVal === undefined ? el.className : el.className.baseVal;
+}
+
 let ATTRIBUTE_MAP = {
     'cellpadding': 'cellPadding',
     'cellspacing': 'cellSpacing',
diff --git a/src/js/core/utilities.js b/src/js/core/utilities.js
index 86517ac..494c2de 100644
--- a/src/js/core/utilities.js
+++ b/src/js/core/utilities.js
@@ -166,3 +166,9 @@ export function hasTouch () {
 		|| window.navigator.msMaxTouchPoints;
 	return isTouchDevice;
 }
+
+// @function trim(str: String): String
+// Compatibility polyfill for [String.prototype.trim](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String/Trim)
+export function trim(str) {
+	return str.trim ? str.trim() : str.replace(/^\s+|\s+$/g, '');
+}
\ No newline at end of file
diff --git a/src/js/main.js b/src/js/main.js
index 5d975b9..b9a47d9 100644
--- a/src/js/main.js
+++ b/src/js/main.js
@@ -13,6 +13,7 @@ import { LayerControl } from './controls/LayerControl';
 import { Mesh } from 'three/src/objects/Mesh';
 import { SphereGeometry } from 'three/src/geometries/SphereGeometry';
 import { MeshLambertMaterial } from 'three/src/materials/MeshLambertMaterial';
+import * as util from './core/utilities';
 
 import '../css/page.css'; /* style loader will import it */
 
@@ -22,6 +23,9 @@ class Application {
         this.container = container;
         this.running = false;
         this.wireframeMode = false;
+        this.canvas;
+        this._canvasImageUrl;
+        this.downloadButton
 
         this.objects = [];
 
@@ -35,7 +39,17 @@ class Application {
             this._fullWindow = true;
         }
 
+        // this.canvas = document.querySelector('#imgCanvas');
+        // this.$topTextInput = document.querySelector('#topText');
+        // this.$bottomTextInput = document.querySelector('#bottomText');
+        // this.$imageInput = document.querySelector('#image');
+        this.downloadButton = document.querySelector('#btnDownloadCanvasImage');
+        this.menuIcon = document.querySelector('#menu-icon');
+        this.navigation = document.getElementsByClassName('navigation')[0];
+        // this.addEventListeners();
+
         this.createScene();
+        this.addEventListeners();
     }
 
     createScene() {
@@ -49,7 +63,7 @@ class Application {
         /* Renderer */
         // var bgcolor = 0xfdfdfd;
         let bgcolor = 0xfdfdfd;
-        this.renderer = new WebGLRenderer({ alpha: true, antialias: true });
+        this.renderer = new WebGLRenderer({ alpha: true, antialias: true, preserveDrawingBuffer: true });
         this.renderer.setPixelRatio(window.devicePixelRatio);
         // this.renderer.setSize(window.innerWidth, window.innerHeight);
         // document.body.appendChild(this.renderer.domElement);
@@ -106,12 +120,14 @@ class Application {
         // this.map.maxDistance = size*15;
 
         //add map controls:
-        let coordinates = new Coordinates({ camera: this.camera, crs: "EPSG:3034" }).addTo(this.map);
-        // coordinates.addListener('onPoint', (vector) => {           
-        //     this.queryMarker.position.set(vector.x, vector.y, vector.z);       
-        //     // this.queryMarker.updateMatrixWorld();
-        //     this.animate();
-        // }, this);
+        if (!util.hasTouch) {
+            let coordinates = new Coordinates({ camera: this.camera, crs: "EPSG:3034" }).addTo(this.map);
+            // coordinates.addListener('onPoint', (vector) => {           
+            //     this.queryMarker.position.set(vector.x, vector.y, vector.z);       
+            //     // this.queryMarker.updateMatrixWorld();
+            //     this.animate();
+            // }, this);
+        }
         this.northArrow = new NortArrow({ headLength: 1, headWidth: 1 }).addTo(this.map);
 
         let dxf134Layer = new TinLayer({
@@ -145,12 +161,13 @@ class Application {
         this.map.addLayer(dxf140Layer);
 
         new LayerControl(this.map.layers, {
-            collapsed: true
+            collapsed: true,
+            parentDiv: 'layer-control-parent-id'
         }).addTo(this.map);
 
 
-        domEvent.on(window, 'resize', this.onWindowResize, this);
-        domEvent.on(window, 'keydown', this.keydown, this);
+        // domEvent.on(window, 'resize', this.onWindowResize, this);
+        // domEvent.on(window, 'keydown', this.keydown, this);
         this.start();
     }
 
@@ -237,6 +254,130 @@ class Application {
         this.renderer.render(this.scene, this.camera);
         this.northArrow.animate();
     }
+
+    addEventListeners() {
+
+        domEvent.on(window, 'resize', this.onWindowResize, this);
+        domEvent.on(window, 'keydown', this.keydown, this);
+
+        // let inputNodes = [this.$topTextInput, this.$bottomTextInput, this.$imageInput];
+        // inputNodes.forEach(element => domEvent.on(element, 'keyup', this.createMeme, this));
+        // //if image is changed
+        // inputNodes.forEach(element => domEvent.on(element, 'change', this.createMeme, this));
+
+        domEvent.on(this.downloadButton, 'click', this.downloadMapImage, this);
+
+        domEvent.on(this.menuIcon, 'click', function (e) {
+            e.preventDefault();
+            this.navigation.classList.toggle("active");
+        }, this);
+
+        var tabButtons = [].slice.call(document.querySelectorAll('ul.tab-nav li span.button'));
+
+        tabButtons.map(function (button) {
+            button.addEventListener('click', function () {
+                document.querySelector('li span.active.button').classList.remove('active');
+                button.classList.add('active');
+
+                document.querySelector('.tab-pane.active').classList.remove('active');
+                document.querySelector(button.getAttribute('name')).classList.add('active');
+            })
+        })
+
+    }
+
+    downloadMapImage() {
+        // if(!this.$imageInput.files[0]) {
+        //   this.$imageInput.parentElement.classList.add('has-error');
+        //   return;
+        // }
+        // if(this.$bottomTextInput.value === '') {
+        //   this.$imageInput.parentElement.classList.remove('has-error');
+        //   this.$bottomTextInput.parentElement.classList.add('has-error');
+        //   return;
+        // }
+        // this.$imageInput.parentElement.classList.remove('has-error');
+        // this.$bottomTextInput.parentElement.classList.remove('has-error');
+
+        // const imageSource = this.renderer.domElement.toDataURL('image/png');
+        // const att = document.createAttribute('href');
+        // att.value = imageSource.replace(/^data:image\/[^;]/, 'data:application/octet-stream');
+        // this.downloadButton.setAttributeNode(att);
+        // this.renderer.preserveDrawingBuffer = true;
+        // this.renderer.render(this.scene, this.camera);
+        this.saveCanvasImage(this.renderer.domElement);
+    }
+
+    saveCanvasImage(canvas) {
+        // !HTMLCanvasElement.prototype.toBlob
+        // https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement.toBlob
+        // decode the String
+        var binStr = atob(canvas.toDataURL("image/png").split(',')[1]);
+        var len = binStr.length;
+        var arr = new Uint8Array(len);
+
+        for (var i = 0; i < len; i++) {
+            arr[i] = binStr.charCodeAt(i);
+        }
+
+        this.saveBlob(new Blob([arr], { type: "image/png" }));
+
+
+    }
+
+    saveBlob(blob) {
+        // ie
+        if (window.navigator.msSaveBlob !== undefined) {
+            window.navigator.msSaveBlob(blob, filename);
+            //app.popup.hide();
+        }
+        else {
+            // create object url
+            if (this._canvasImageUrl) {
+                URL.revokeObjectURL(this._canvasImageUrl);
+            }
+            this._canvasImageUrl = URL.createObjectURL(blob);
+            // display a link to save the image
+            var e = this.downloadButton;//document.createElement("a");           
+            e.href = this._canvasImageUrl;
+
+        }
+    }
+
+    createMeme() {
+        let context = this.$canvas.getContext('2d');
+
+        // font size of top and bottom text
+        let fontSize = ((this.canvas.width + this.canvas.height) / 2) * 4 / 100;
+        context.font = `${fontSize}pt sans-serif`;
+        context.textAlign = 'center';
+        context.textBaseline = 'top';
+
+        /**
+         * Stroke Text Style
+         */
+        context.lineWidth = fontSize / 5;
+        context.strokeStyle = 'black';
+        /**
+         * Fill Text Style
+         */
+        context.fillStyle = 'white';
+        // Fix lines over M
+        context.lineJoin = 'round';
+
+        // get he value of the top text an dbottom text from the input fields
+        let topText = this.$topTextInput.value.toUpperCase();
+        let bottomText = this.$bottomTextInput.value.toUpperCase();
+
+        // Top Text: first parameter text, second and thir parameters contain location where the text should start rendering
+        context.strokeText(topText, this.canvas.width / 2, this.canvas.height * (5 / 100));
+        context.fillText(topText, this.canvas.width / 2, this.canvas.height * (5 / 100));
+
+        // Bottom Text
+        context.strokeText(bottomText, this.canvas.width / 2, this.canvas.height * (90 / 100));
+        context.fillText(bottomText, this.canvas.width / 2, this.canvas.height * (90 / 100));
+    }
+
 }
 
 var container = document.getElementById("webgl");