magazine themes

borders.css

@@ -24,15 +24,15 @@
 
 
 .border-right{
-    border-right:1px solid #CAD5E0;
+    border-right:3px dotted #CAD5E0;
     
 }
 
 .border-left{
-    border-left:1px solid #CAD5E0;
+    border-left:3px dotted gray;
 }
 
 
-.border-bottom { border-bottom:1px solid #CAD5E0}
-.border-top { border-top:1px solid #CAD5E0}
+.border-bottom { border-bottom:1px dotted gray;}
+.border-top { border-top:3px  dotted gray;}
 

footer.css

@@ -2,6 +2,9 @@
 * This file styles the footer of the page
 */
 
+
+
+/* .main .footer { grid-column: 1 / span 2; font-size:13px; font-weight: lighter; padding:8px;} */
 .footer {
     text-align:center;
     display:grid;

header.css

@@ -1,3 +1,13 @@
-.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;}
+.main .header {
+    
+    grid-row:1;
+    grid-column: 1  / span 2;
+    display:grid;
+    grid-template-columns: 50px auto; gap:4px;
+    line-height: 1;
+    
+
+}
+.main .header .title {font-size:28px; text-transform: capitalize; font-weight:bold}
+.main .header .subtitle {font-size:14px}
+.main .header img { width:44px; height:44px;}

layout.css

@@ -1,15 +1,48 @@
+.main {
+    margin:10px;
+    padding:4px;
+    display:grid;
+    grid-template-columns: 50% 50% ; gap:4px;
+    grid-template-rows: 48px 64px auto 32px;
+    font-family: sans-serif;
+    font-weight: lighter;
+    font-size:18px;
+    line-height: 1.5;
+    justify-items: normal;
+    ;
+    height:96vh;
+}
+.main .content {
+    grid-row:3;
+    grid-column: 1 ;
+    text-wrap: wrap;
+    height:100%;
+    display:grid;
+    align-content: start;
+   
    
     
-.main {
-    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{
-    align-self:center;
+
+.main .content #index {
+    text-align: left;
+    text-wrap: wrap;
 }    
-.main .pane {border-left:1px solid #CAD5E0; height:100%; padding:8px;}
+
+p {
+    margin-top:22px;
+}
+table {
+    width:99%;
+    border: 1px solid #CAD5E0;
+}
+table td {padding:4px; margin:4px;}
+table thead {
+    
+    font-weight:bold;
+    background-color:#f3f3f3;
+}
+
 .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,6 +1,6 @@
 .menu {
     padding:8px;
-    border:1px solid #CAD5E0 ;
+    border-bottom:3px dotted  gray ;
     
     display:grid;
     grid-column: 1 / span 2;
@@ -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
 */