Partial division of global stylesheet

new_css/r11tables.css

@@ -0,0 +1,51 @@
+.table-map {
+    width: 60%;
+}
+
+.table-map input{
+    font-size: 16px;
+    padding: 7px;
+    border: 1px solid rgba(145, 146, 146, 0.849);
+    border-radius: 5px;
+}
+
+.table-map input.key {
+    background: #f0f0f0;
+}
+
+.table-default {
+    width: 80%;
+    border-collapse: collapse;
+    border-spacing: 0;
+}
+
+.table-default tr {
+    background: #f0f0f02d;
+}
+
+.table-default tr.bottom-border {
+    border-bottom: 1px solid black;
+}
+
+.table-default th {
+    background: #ffffff;
+}
+
+.table-default tr.even {
+    background: #f0f0f0;
+}
+
+.table-doc td, .table-doc th{
+    border-spacing: 0px;
+    padding: 0px 10px;
+}
+
+.table-doc td {
+    background-color: rgba(155, 165, 160, 0.342);
+}
+
+.table-doc th {
+    background-color: #3bc4f1;
+    text-align: left;
+    color: white;
+}

new_css/r11tool.css

@@ -1,8 +1,4 @@
 @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;700&display=swap');
-@import url('https://necolas.github.io/normalize.css/8.0.1/normalize.css');
-@import url('fontello.css');
-
-
 .hyperlink, .hyperlink:visited, .hyperlink:active {
     color: rgb(47, 125, 146);
     cursor: pointer;
@@ -12,22 +8,6 @@
     filter: brightness(120%);
 }
 
-.tooltip-window {
-    position: fixed;
-    right: 0;
-    filter: drop-shadow(-2px 0px 2px darkgray);
-    background: #e8f3f7;
-    padding: 15px 30px;
-    font-family: 'Nunito', sans-serif;
-    width: 40%;
-    height: 100%;
-    overflow: scroll;
-}
-
-.tooltip-window.lite {
-    width: 30%;
-}
-
 .bordered-field {
     border: 2px solid rgba(93, 99, 96, 0.705);
     border-radius: 5px;
@@ -218,7 +198,6 @@ body {
     padding: 0;
 }
 
-
 .float-left {
     display: flex;
     justify-content: left;
@@ -352,50 +331,6 @@ body {
     justify-content: center;
 }
 
-.table-map {
-    width: 60%;
-}
-
-.table-map input{
-    font-size: 16px;
-    padding: 7px;
-    border: 1px solid rgba(145, 146, 146, 0.849);
-    border-radius: 5px;
-}
-
-.table-map input.key {
-    background: #f0f0f0;
-}
-
-.table-default {
-    width: 80%;
-    border-collapse: collapse;
-    border-spacing: 0;
-}
-
-.table-default tr {
-    background: #f0f0f02d;
-}
-
-.table-default tr.bottom-border {
-    border-bottom: 1px solid black;
-}
-
-.table-default th {
-    background: #ffffff;
-}
-
-.table-default tr.even {
-    background: #f0f0f0;
-}
-
-.tip {
-    display: none;
-}
-
-.tip.active {
-    display: block;
-}
 
 .tabcontent {
     display: none;
@@ -406,53 +341,6 @@ body {
     justify-content: center;
 }
 
-.section-button {
-    width: 100%;
-    padding: 15px 0;
-    font-size: 18px;
-    background: #b4b4b4c5;
-    cursor: pointer;
-    border-bottom: darkgray 2px solid !important;
-}
-
-.section-button:hover {
-    backdrop-filter: brightness(110%); 
-}
-
-.section-button .active {
-    background: #00000030;
-}
-
-.List .collapsibleContent {
-    border-left: #bdc5c9 2px solid;
-    overflow: hidden;
-    background: #ffffff50;
-}
-
-.section{
-    padding: 10px 0px 20px 0px ;
-}
-
-/* TODO: content subclass already in use. Creating content class overrides the subclass.
-Make .content a subclass of .content */
-/* .content {
-    padding: 0px 15px 0px 15px ;
-    text-align: justify;
-    overflow: hidden;
-    transition: max-height .2s ease-out;
-    max-height: 0px;
-    border-left: #c0c2c3 2px solid;
-    
-} */
-
-.collapsibleMini::before{
-    content: "►";
-}
-
-.collapsibleMini.active::before{
-    content: "▼";
-}
-
 .hiddable {
     display: none;
 }
@@ -466,26 +354,6 @@ Make .content a subclass of .content */
     display: none;
 }
 
-/* TODO: Add proper class */
-/* button:hover{
-    filter: brightness(110%);
-} */
-
-.table-doc td, .table-doc th{
-    border-spacing: 0px;
-    padding: 0px 10px;
-}
-
-.table-doc td {
-    background-color: rgba(155, 165, 160, 0.342);
-}
-
-.table-doc th {
-    background-color: #3bc4f1;
-    text-align: left;
-    color: white;
-}
-
 /* TODO: Add proper class */
 /* textarea {
 	-webkit-box-sizing: border-box;

new_css/r11tooltip.css

@@ -0,0 +1,77 @@
+.tooltip-window {
+    position: fixed;
+    right: 0;
+    filter: drop-shadow(-2px 0px 2px darkgray);
+    background: #e8f3f7;
+    padding: 15px 30px;
+    font-family: 'Nunito', sans-serif;
+    width: 40%;
+    height: 100%;
+    overflow: scroll;
+}
+
+.tooltip-window.lite {
+    width: 30%;
+}
+
+.tip {
+    display: none;
+}
+
+.tip.active {
+    display: block;
+}
+
+/* TODO: Remove !important. It's bad practice and it can cause errors in future */
+.section-button {
+    width: 100%;
+    padding: 15px 0;
+    font-size: 18px;
+    background: #b4b4b4c5;
+    cursor: pointer;
+    border-bottom: darkgray 2px solid !important;
+}
+
+.section-button:hover {
+    backdrop-filter: brightness(110%); 
+}
+
+.section-button .active {
+    background: #00000030;
+}
+
+.List .collapsibleContent {
+    border-left: #bdc5c9 2px solid;
+    overflow: hidden;
+    background: #ffffff50;
+}
+
+/* TODO: .section class is to generic. It should be renamed */
+.section{
+    padding: 10px 0px 20px 0px ;
+}
+
+/* TODO: content subclass already in use. Creating content class overrides the subclass.
+Make .content a subclass of .content */
+/* .content {
+    padding: 0px 15px 0px 15px ;
+    text-align: justify;
+    overflow: hidden;
+    transition: max-height .2s ease-out;
+    max-height: 0px;
+    border-left: #c0c2c3 2px solid;
+    
+} */
+
+.collapsibleMini::before{
+    content: "►";
+}
+
+.collapsibleMini.active::before{
+    content: "▼";
+}
+
+/* TODO: Add proper class */
+/* button:hover{
+    filter: brightness(110%);
+} */