hiplab

layout.css

@@ -1,15 +1,30 @@
-
-
-.main {
-    height:98vh; display:grid; grid-template-columns:70% auto; gap:4px;
+/**
+* This is the default window and we will have to hide the pane (side)
+*/
+body {line-height: 1.5; font-weight:lighter; font-family:sans-serif;}
+.main {height:98vh; display:grid; grid-template-columns:65% 35%; 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 .header { display:grid; grid-template-columns:64px auto; gap:4px; align-items: center;}
+    .main .header .title {font-size:28px; font-weight:bold}
+    .main .header img {width:80px; height:80px;}
+    .main .index{
+        align-self:center;
+        padding:8px;
+    }
+    .main .menu {border:1px solid transparent; background-color:#f3f3f3;}
+    .main .pane {border-left:1px solid #CAD5E0; height:100%; padding:8px; line-height:1.5; font-size: 14px;}
+    
+    
+    .search-box {display:block; grid-template-columns: none;}
+
+
+
+
 .main .content{
     align-self:center;
 }
-.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

@@ -45,6 +45,38 @@
     display:block;
     height:auto;    
 }
+
+/**
+* TAB SPECIFICATIONS WITH RADIO BUTTONS AND LABELS
+*/
+.tab-content table { width:99%; border-radius: 8px; padding:8px; border:1px solid #d3d3d3;}
+.tab-content table tr:nth-child(even) {background-color: #f3f3f3;}
+/* .tab-content {width:80%;} */
+
+.tabs {display:grid; grid-template-columns: repeat(auto-fit,209px); gap:0px; align-content:center; 
+    /* background-color: #f3f3f3; */
+    padding-top:4px;
+    padding-left:4px;
+    padding-right:4px;
+}
+.tabs input[type=radio] {display:none; }
+.tabs input[type=radio] + label { font-weight:lighter;  
+    border:1px solid transparent;
+    border-bottom-color: #CAD5E0;
+    background-color: #f3f3f3;
+    padding:8px;
+    padding-right:10px; padding-left:10px;
+    
+    cursor:pointer
+}
+.tabs input[type=radio]:checked +label {
+    background-color: #ffffff;
+    border-top-right-radius: 8px; 
+    border-top-left-radius: 8px;
+    font-weight:bold;
+    border-color: #CAD5E0;
+    border-bottom-color: #FFFFFF;
+}
 /**
 * TAB SPECIFICATIONS WITH RADIO BUTTONS AND LABELS
 */