footer.css

@@ -3,8 +3,6 @@
 */
 
 .footer {
-    grid-row:5;
-    margin-top:10px;    
     text-align:center;
     display:grid;
     grid-template-columns: repeat(3,1fr);
@@ -15,7 +13,7 @@
     align-items: center;
     align-content: center;
     text-transform: capitalize;
-    /* background-color: rgba(255,255,255,0.8);
-    
+    /* background-color: rgba(255,255,255,0.8); */
     
+    grid-column: 1 /span 2;
 }

header.css

@@ -1,7 +1,3 @@
-.main .header {display:grid; grid-template-columns:64px auto; gap:4px; width:100%; align-items:center;}
-.main .header .icon {width:64px; height:64px;}
-.main .header .icon img {width:64px; height:64px;}
-
-.main .header .title { font-size:32px; text-transform: uppercase; font-weight:bold}
-.main .header .subtitle {font-style:italic;font-size:14px; color:gray; text-transform: capitalize;}
-
+.main .header { display:grid; grid-template-columns:64px auto; gap:4px}
+.main .header .title {font-size:28px; font-weight:bold}
+.main .header img {width:55px; height:55px;}

layout.css

@@ -1,43 +1,15 @@
-/**
-* This file implements theme Open Source Software, the expectation is just a pager that presents a tool/software
-*/
-body, ul, p, select {
-    font-size: 16px;
-    font-weight:lighter;
-    font-family:sans-serif;
-    line-height:1.5;
 
-}
+
 .main {
-    display:grid;
-    grid-template-columns: 100%;;
-    margin:1%;
-    margin-left:10%;
-    margin-right:10%;
-    gap:4px;
-    height:90%;
-    width:80%;
+    height:98vh; display:grid; grid-template-columns:70% auto; gap:4px;
+    grid-template-rows:70px 40px auto 32px;
+    padding-left:2%; padding-right:2%;
+    line-height: 1.5; font-size:16px; font-family: sans-serif; font-weight:lighter;
 }
 .main .content{
-    
-    grid-row:4;
     align-self:center;
-    height:100%;
-    width:100%;
 }
-
-.main .content .banner {
-    background-repeat: no-repeat;
-    background-size: cover;
-    background-position: center;
-    height:200px;
-    align-items: center;
-    align-content: center;
-    display: grid;
-
-}
-
-/* .main .pane {border-left:1px solid #CAD5E0; height:100%; padding:8px;} */
+.main .pane {border-left:1px solid #CAD5E0; height:100%; padding:8px;}
 .bold {font-weight:bold}
 .small-text {font-size:12px; font-weight:lighter; color :#000000;}
 .active {cursor:pointer; padding:2px; margin:2px; border-bottom:2px solid transparent}

menu.css

@@ -1,8 +1,30 @@
+.menu {
+    padding:8px;
+    border:1px solid #CAD5E0 ;
     
-.menu .icon {padding:4px; align-items:center; display:grid;}
+    display:grid;
+    grid-column: 1 / span 2;
+    grid-template-columns: 92px repeat(7,auto);
+    gap:4px;
+    text-transform: capitalize;
+    align-items: center;
+    
+}
+.menu .icon {padding:4px;}
 .menu .icon img {width:30px; height:30px;}
+.menu .item {
+    font-weight:bold;
+    cursor:pointer;
+    padding:4px;
+    text-align: left;
+   
+    
+   
+    
+    
+}
 
-.main .menu .sub-menu {
+.menu .sub-menu {
     
     display:none;
     position:absolute;
@@ -17,38 +39,12 @@
     background-color: rgba(255,255,255,0.8);
     
 }
-.main .menu .item {
-    font-weight:bold;
-    cursor:pointer;
-    padding:4px;
-    text-align: left;
-}
 
-.main .menu .item:hover .sub-menu{
+.menu .item:hover .sub-menu{
     
     display:block;
     height:auto;    
 }
-
-.main .menu {
-    padding:8px;
-    grid-row:2;
-    width:100%;
-    display:none;
-    
-    /* grid-row:2; grid-column:1 ; */
-    grid-template-columns: 92px repeat(7,auto);
-    gap:4px;
-    text-transform: capitalize;
-    border:0;  height:48px; padding:0px;
-    display:grid; grid-template:64px repeat(6,1fr); gap:4px; 
-    /* background-color: #f3f3f3; */
-    align-items: center;
-}
-.main .menu .icon .button {
-    border:1px solid #CAD5E0; border-radius:8px; padding:2px;
-    ;
-}
 /**
 * TAB SPECIFICATIONS WITH RADIO BUTTONS AND LABELS
 */