diff --git a/wise-webapp/src/main/webapp/css/compatibility.css b/wise-webapp/src/main/webapp/css/compatibility.css
deleted file mode 100644
index 37bf4d52..00000000
--- a/wise-webapp/src/main/webapp/css/compatibility.css
+++ /dev/null
@@ -1,191 +0,0 @@
-html {
- overflow: hidden;
-}
-
-body,
-div,
-dl,
-dt,
-dd,
-ul,
-ol,
-li,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-pre,
-form,
-fieldset,
-input,
-textarea,
-p,
-blockquote,
-th,
-td {
- margin: 0;
- padding: 0;
-}
-
-table {
- border-collapse: collapse;
- border-spacing: 0;
-}
-
-fieldset,
-img {
- border: 0;
-}
-
-address,
-caption,
-cite,
-code,
-dfn,
-em,
-strong,
-th,
-var {
- font-style: normal;
- font-weight: normal;
-}
-
-ol,
-ul {
- list-style: none;
-}
-
-caption,
-th {
- text-align: left;
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
- font-size: 100%;
- font-weight: normal;
-}
-
-q:before,
-q:after {
- content: '';
-}
-
-abbr,
-acronym {
- border: 0;
-}
-
-/**
- * Percents could work for IE, but for backCompat purposes, we are using keywords.
- * x-small is for IE6/7 quirks mode.
- *
- */
-body {
- font-size: 13px;
- font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
- font-size: small;
- font: x-small;
-}
-
-table {
- font-size: inherit;
- font-size: 100%;
-}
-
-/**
- * 99% for safari; 100% is too large
- */
-select,
-input,
-textarea {
- font: 99% arial, helvetica, clean, sans-serif;
-}
-
-/**
- * Bump up !IE to get to 13px equivalent
- */
-pre,
-code {
- font: 115% monospace;
- font-size: 100%;
-}
-
-/**
- * Default line-height based on font-size rather than "computed-value"
- * see: http://www.w3.org/TR/CSS21/visudet.html#line-height
- */
-
-body * {
- line-height: 1.22em;
-}
-
-* {
- margin: 0;
- padding: 0;
-}
-
-body {
- // font: normal 80% "Helvetica Neue",Helvetica,Arial,sans-serif;
- background-color: #fff;
-}
-
-img {
- border: 0;
-}
-
-form {
- padding: 0;
- margin: 0;
-}
-
-p {
- margin: 5px 0 5px 0;
-}
-
-ul {
- list-style-position: inside;
-}
-
-a:hover,
-a:active {
- font: bold 100%;
- text-decoration: underline;
- color: black;
-}
-
-h2 {
- font-size: 160%;
- color: #8e9181;
-}
-
-h1 {
- font-style: normal;
- font-size: 180%;
- color: white;
- padding-bottom: 2px;
-}
-
-h3 {
- /* use as subhead on main body */
- clear: left;
- font-style: normal;
- font-size: 130%;
- color: #6b6f5b;
-}
-
-h4 {
- /* use as headers in footer */
- font-weight: bold;
- font-size: 120%;
- border-bottom: 1px solid #8e9181;
- color: #e2e3dd;
- padding-bottom: 10px;
- width: 400px;
-}
\ No newline at end of file
diff --git a/wise-webapp/src/main/webapp/css/editor.css b/wise-webapp/src/main/webapp/css/editor.css
deleted file mode 100644
index 9b3a9143..00000000
--- a/wise-webapp/src/main/webapp/css/editor.css
+++ /dev/null
@@ -1,243 +0,0 @@
-@import "compatibility.css";
-
-/********************************************************************************/
-/* Header & Toolbar Styles */
-/********************************************************************************/
-@import "header.css";
-@import "../bootstrap/css/bootstrap.min.css";
-
-html {
- /* avoid bootstrap overriding font-size and breaking Mui */
- font-size: initial;
-}
-
-body {
- -webkit-touch-callout: none;
- -webkit-user-select: none;
- -khtml-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- overflow: hidden;
-}
-
-div#mindplot {
- position: relative;
- top: 50px;
- left: 0;
- width: 100%;
- height: 100%;
- border: 0;
- overflow: hidden;
- opacity: 1;
- background-color: #f2f2f2;
- background-image: linear-gradient(#ebe9e7 1px, transparent 1px), linear-gradient(to right, #ebe9e7 1px, #f2f2f2 1px);
- background-size: 50px 50px;
-}
-
-.notesTip {
- background-color: #dfcf3c;
- padding: 5px 15px;
- color: #666666;
- /*font-weight: bold;*/
- /*width: 100px;*/
- font-size: 13px;
- -moz-border-radius: 3px;
- -webkit-border-radius: 3px;
- border-radius: 3px;
- box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
-}
-
-.linkTip {
- background-color: #dfcf3c;
- padding: 5px 15px;
- color: #666666;
- /*font-weight: bold;*/
- /*width: 100px;*/
- font-size: 13px;
- -moz-border-radius: 3px;
- -webkit-border-radius: 3px;
- border-radius: 3px;
- box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
-}
-
-.keyboardShortcutTip {
- background-color: black;
- padding: 5px 15px;
- color: white;
- font-weight: bold;
- font-size: 11px;
-}
-
-/** */
-/* Modal dialogs definitions */
-
-div.modalDialog {
- position: fixed;
- top: 50%;
- left: 50%;
- z-index: 11000;
- width: 500px;
- margin: -250px 0 0 -250px;
- background-color: #ffffff;
- border: 1px solid #999;
- padding: 10px;
- overflow: auto;
- -webkit-background-clip: padding-box;
- -moz-background-clip: padding-box;
- background-clip: padding-box;
-}
-
-div.modalDialog .content {
- padding: 5px 5px;
-}
-
-div.modalDialog .title {
- font-weight: bold;
- text-shadow: 1px 1px 0 #fff;
- border-bottom: 1px solid #eee;
- padding: 5px 15px;
- font-size: 18px;
-}
-
-/*--- End Modal Dialog Form ---*/
-
-.publishModalDialog .content {
- height: 420px;
-}
-
-.exportModalDialog .content {
- height: 400px;
-}
-
-.shareModalDialog .content {
- height: 440px;
-}
-
-div.shareModalDialog {
- width: 550px;
-}
-
-.panelIcon {
- width: 20px;
- height: 20px;
- margin-left: 4px;
- margin-top: 3px;
- cursor: pointer
-}
-
-.panelIcon:hover {
- background-color: #efefef;
-}
-
-.popover {
- font-size: 13px;
- max-width: none;
-}
-
-#floating-panel {
- position: fixed;
- display: flex;
- flex-direction: column;
- align-items: flex-end;
- bottom: 20px;
- right: 20px;
- align-items: stretch;
-}
-
-div#bottom-logo {
- position: fixed;
- left: 20px;
- bottom: 10px;
- background: url(../../images/editor/logo-text-black.svg) no-repeat;
- width: 90px;
- height: 40px;
-}
-
-div#position {
- margin-top: 5px;
-}
-
-#position-button {
- cursor: pointer;
- border: solid black 1px;
- width: 40px;
- height: 40px;
- background-position: center;
- background-repeat: no-repeat;
- background-size: 40px 40px;
- background-color: #FFF;
- border-radius: 8px;
-}
-
-#zoom-button {
- width: 40px;
- border: 0;
-}
-
-#zoom-plus,
-#zoom-minus {
- border: solid black 1px;
- height: 40px;
- width: 40px;
- background-repeat: no-repeat;
- background-size: 40px 40px;
- background-position: center;
- cursor: pointer;
- background-color: #FFF;
-}
-
-#zoom-plus {
- border-radius: 8px 8px 0 0;
-}
-
-#zoom-minus {
- border-radius: 0 0 8px 8px;
-}
-
-div#shotcuts > img{
- margin: 20px 0;
- width: 40px;
- height: 40px;
-}
-
-#keyboardTable {
- font-family: Arial, verdana, serif;
- font-size: 13px;
- width: 100%;
-}
-
-#keyboardTable td {
- padding: 3px;
- white-space: nowrap;
-}
-
-#keyboardTable th {
- padding: 5px;
- white-space: nowrap;
-}
-
-#keyboardTable th {
- background-color: #000000;
- color: #ffffff;
-}
-
-div#tryInfoPanel {
- position: absolute;
- margin: auto;
- text-align: center;
- top: 80px;
- right: 20px;
- width: 200px;
- height: 300px;
- padding: 20px;
- font-size: 15px;
- border-radius: 9px;
- background-color: white;
- border: solid 2px #ffa800;
-}
-
-#tryInfoPanel > p {
- justify-content: center;
- padding-bottom: 20px;
-}
\ No newline at end of file
diff --git a/wise-webapp/src/main/webapp/css/header.css b/wise-webapp/src/main/webapp/css/header.css
deleted file mode 100644
index 699ac52a..00000000
--- a/wise-webapp/src/main/webapp/css/header.css
+++ /dev/null
@@ -1,70 +0,0 @@
-@import "toolbar.css";
-div#header {
- width: 100%;
- height:50px;
- position: absolute;
- top: 0;
- z-index:1000;
-}
-
-div#headerNotifier {
- border: 1px solid rgb(241, 163, 39);
- background-color: rgb(252, 235, 192);
- border-radius: 3px;
- position: fixed;
- padding: 5px 9px;
- color: back;
- white-space: nowrap;
- margin-top: 5px;
- display: none;
- bottom: 10px;
-}
-
-div#toolbarRight {
- float: right;
- white-space: nowrap;
- vertical-align: middle;
- justify-content: center;
- margin: 6px 10px;
- height: 100%;
-}
-
-#account {
- float: right;
- display: inline;
-}
-
-#account >img {
- width: 36x;
- height: 36px;
-}
-
-#accountSettingsPanel{
- padding:10px 10px;
-}
-
-#share {
- margin: 0 30px;
- float: right;
-}
-
-.actionButton {
- cursor: pointer;
- font-family: Arial, Helvetica, sans-serif;
- user-select: none;
- vertical-align: middle;
- justify-content: center;
- padding: 10px 25px;
- font-size: 15px;
- min-width: 64px;
- box-sizing: border-box;
- font-weight: 600;
- border-radius: 9px;
- color: white;
- background-color: #ffa800;
-}
-
-.actionButton:hover {
- transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-}
-
diff --git a/wise-webapp/src/main/webapp/css/toolbar.css b/wise-webapp/src/main/webapp/css/toolbar.css
deleted file mode 100644
index aa5abffd..00000000
--- a/wise-webapp/src/main/webapp/css/toolbar.css
+++ /dev/null
@@ -1,158 +0,0 @@
-div#toolbar {
- width: 100%;
- height: 50px;
- box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.1);
- background-color: #fff;
- min-width: 900px;
- overflow: hidden;
-}
-
-div#toolbar .buttonContainer {
- height: 50px;
- padding-top: 8px;
- padding-right: 10px;
- padding-left: 10px;
- float: left;
- border-left: 1px solid lightgray;
-}
-
-div#mapName >span {
- border-radius: 4px;
- float: left;
- padding: 8px;
- min-width: 30px;
- font-weight: bold;
-}
-
-div#backToList {
- height: 24px;
- width: 24px;
- float: left;
- margin: 13px 20px;
-}
-
-/******************************************************************************************/
-/* Buttons*/
-/******************************************************************************************/
-
-div#toolbar .buttonOn,
-div#toolbar .buttonOff,
-div#toolbar .buttonActive,
-div#toolbar .buttonOn:hover {
- width: 28px;
- height: 28px;
- float: left;
- text-align: center;
- z-index: 4;
- margin-top: 3px;
- padding-top: 2px;
- padding-left: 2px;
- margin-left: 3px;
-}
-
-div#toolbar .buttonOn:hover {
- cursor: pointer;
- opacity: 1;
-}
-
-div#toolbar .buttonOn {
- opacity: 0.8;
-}
-
-div#toolbar .buttonOff {
- opacity: 0.4;
-}
-
-div#exportAnchor {
- position: absolute;
- width: 100%;
- height: 100%;
- top: 0;
- left: 0;
-}
-
-div#toolbar .buttonExtOn,
-div#toolbar .buttonExtOff,
-div#toolbar .buttonExtActive,
-div#toolbar .buttonExtOn:hover {
- width: 40px;
- height: 28px;
- float: left;
- text-align: left;
- z-index: 4;
- margin-top: 3px;
- padding-top: 2px;
- padding-left: 5px;
- margin-left: 3px;
-}
-
-div#toolbar .buttonExtOn:hover {
- opacity: 1;
-}
-
-div#toolbar .buttonExtActive {
- opacity: 1;
-}
-
-div#toolbar .buttonExtOn {
- opacity: 0.8;
- cursor: pointer
-}
-
-div#toolbar .buttonExtOff {
- opacity: 0.4;
-}
-
-div#exportAnchor {
- position: absolute;
- width: 100%;
- height: 100%;
- top: 0;
- left: 0;
-}
-
-/***************************************************************************************************/
-/* Other toolbar styles */
-/***************************************************************************************************/
-.toolbarTip {
- background-color: #000000;
- padding: 5px 5px;
- color: #f5f5f5;
- font-size: 11px;
-}
-
-div#colorPalette {
- border: 1px solid #bbb4d6;
- display: none;
- position: absolute;
- z-index: 4;
- width: 160px;
- top: 89px;
-}
-
-div.toolbarPanelLink,
-div.toolbarPanelLinkSelectedLink {
- cursor: pointer;
- color: black;
- margin: 1px;
- cursor: pointer;
- font-size: 12px;
- padding: 5px 10px;
- font-weight: bold;
-}
-
-div.toolbarPanelLink:hover,
-div.toolbarPanelLinkSelectedLink {
- cursor: pointer;
- background-color: #efefef;
-}
-
-.toolbarPaneTip {
- background-color: rgb(228, 226, 210);
- padding: 5px 5px;
- color: #f5f5f5;
- font-size: 11px;
- border-radius: 6px;
- box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
- border: 3px double rgb(190, 190, 190);
-}
\ No newline at end of file
diff --git a/wise-webapp/src/main/webapp/css/viewonly.css b/wise-webapp/src/main/webapp/css/viewonly.css
index 5c262503..2d8363d9 100644
--- a/wise-webapp/src/main/webapp/css/viewonly.css
+++ b/wise-webapp/src/main/webapp/css/viewonly.css
@@ -1,8 +1,106 @@
-@import "editor.css";
+/********************************************************************************/
+/* Header & Toolbar Styles */
+/********************************************************************************/
+@import "../bootstrap/css/bootstrap.min.css";
-/* Overwrite some styles */
-body{
- position: inherit;
+div#mindplot {
+ position: relative;
+ top: 50px;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ border: 0;
+ overflow: hidden;
+ opacity: 1;
+ background-color: #f2f2f2;
+ background-image: linear-gradient(#ebe9e7 1px, transparent 1px), linear-gradient(to right, #ebe9e7 1px, #f2f2f2 1px);
+ background-size: 50px 50px;
+}
+
+.notesTip {
+ background-color: #dfcf3c;
+ padding: 5px 15px;
+ color: #666666;
+ font-size: 13px;
+ -moz-border-radius: 3px;
+ -webkit-border-radius: 3px;
+ border-radius: 3px;
+ box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
+}
+
+.linkTip {
+ background-color: #dfcf3c;
+ padding: 5px 15px;
+ color: #666666;
+ /*font-weight: bold;*/
+ /*width: 100px;*/
+ font-size: 13px;
+ -moz-border-radius: 3px;
+ -webkit-border-radius: 3px;
+ border-radius: 3px;
+ box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
+}
+
+
+
+#floating-panel {
+ position: fixed;
+ display: flex;
+ flex-direction: column;
+ align-items: flex-end;
+ bottom: 20px;
+ right: 20px;
+ align-items: stretch;
+}
+
+div#bottom-logo {
+ position: fixed;
+ left: 20px;
+ bottom: 10px;
+ background: url(../../images/editor/logo-text-black.svg) no-repeat;
+ width: 90px;
+ height: 40px;
+}
+
+div#position {
+ margin-top: 5px;
+}
+
+#position-button {
+ cursor: pointer;
+ border: solid black 1px;
+ width: 40px;
+ height: 40px;
+ background-position: center;
+ background-repeat: no-repeat;
+ background-size: 40px 40px;
+ background-color: #FFF;
+ border-radius: 8px;
+}
+
+#zoom-button {
+ width: 40px;
+ border: 0;
+}
+
+#zoom-plus,
+#zoom-minus {
+ border: solid black 1px;
+ height: 40px;
+ width: 40px;
+ background-repeat: no-repeat;
+ background-size: 40px 40px;
+ background-position: center;
+ cursor: pointer;
+ background-color: #FFF;
+}
+
+#zoom-plus {
+ border-radius: 8px 8px 0 0;
+}
+
+#zoom-minus {
+ border-radius: 0 0 8px 8px;
}
div#footerLogo {
diff --git a/wise-webapp/src/main/webapp/jsp/mindmapEditor.jsp b/wise-webapp/src/main/webapp/jsp/mindmapEditor.jsp
index 89cea8d6..157a7f9c 100644
--- a/wise-webapp/src/main/webapp/jsp/mindmapEditor.jsp
+++ b/wise-webapp/src/main/webapp/jsp/mindmapEditor.jsp
@@ -16,8 +16,7 @@