html: add classes to fret tds and trs, rejigger

1 files changed, 25 insertions, 5 deletions

diff --git a/main.css b/main.css
index 8706203..f716cf5 100644
--- a/main.css
+++ b/main.css
@@ -3,18 +3,38 @@ body {
     background-color: white;
 }
 
-thead {
-    display: none;
 }
 
-#fretboard .open {
+#fretboard table {
+    border-collapse: collapse;
+}
+
+#fretboard thead {
+    text-align: center;
+}
+#fretboard thead .fret3,
+#fretboard thead .fret5,
+#fretboard thead .fret7 {
+    font-weight: bold;
+}
+
+#fretboard tbody .open {
     font-weight: bold;
 }
 
-#fretboard p {
+#fretboard td:not(:last-child) {
+    border-right: 1px solid black;
+}
+
+#fretboard tbody tr {
+    border-top: 1px solid black;
+}
+
+#fretboard tbody .selected {
     font-style: italic;
+    text-align: center;
 }
 
-tr.muted {
+#fretboard .muted {
     color: grey;
 }