many changes

timetable.css

@@ -1,12 +1,12 @@
 html {
-    
+
     /* color: red; */
 }
 
 table {
     /* margin-top: 50px; */
     padding-top: 100px;
-    text-align:center;
+    text-align: center;
     /* table-layout : fixed; */
     /* width:150px */
     /* width: 200%; */
@@ -20,34 +20,38 @@ table {
 
 .table-div {
     /* overflow-x: auto; */
-  width: 80%;
-  overflow-x: scroll;
-  margin-left: 200px;
-  overflow-y: visible;
-  padding: 0;
+    width: 80%;
+    overflow-x: scroll;
+    margin-left: 200px;
+    overflow-y: visible;
+    padding: 0;
 }
 
 .table-div th {
-    text-align:center;
-    white-space:nowrap;
+    text-align: center;
+    white-space: nowrap;
     transform: rotate(90deg) translateX(-100px);
     position: sticky;
-    top:0;
+    top: 0;
 
 }
+
 .table-div th p {
-    margin:0 -100% ;
-    display:inline-block;
-}
-.table-div th p:before{
-    content:'';
-    width:0;
-    padding-top:110%;/* takes width as reference, + 10% for faking some extra padding */
-    display:inline-block;
-    vertical-align:middle;
+    margin: 0 -100%;
+    display: inline-block;
 }
 
-.table-div td, th {
+.table-div th p:before {
+    content: '';
+    width: 0;
+    padding-top: 110%;
+    /* takes width as reference, + 10% for faking some extra padding */
+    display: inline-block;
+    vertical-align: middle;
+}
+
+.table-div td,
+th {
     max-width: 10px;
     padding: 0px;
 }
@@ -60,7 +64,7 @@ table {
     background-color: lightblue;
 }
 
-.table-div tr:hover  .unavailable{
+.table-div tr:hover .unavailable {
 
     background-color: lightgray;
 }
@@ -89,18 +93,23 @@ table {
 .plymouth {
     color: #9169FF;
 }
+
 .exeter {
     color: #5F60E8;
 }
+
 .truro {
     color: #0074D9;
 }
+
 .torquay {
     color: #5FA8E8;
 }
+
 .unavailable {
     color: lightgray;
 }
+
 .shift-requested {
     color: green;
 }
@@ -108,41 +117,43 @@ table {
 .worker-summary {
     position: absolute;
     display: none;
-    overflow-x: visible; 
+    overflow-x: visible;
     width: 100%;
     text-align: left;
 }
+
 .site-summary {
-	display: inline-flex;
+    display: inline-flex;
 }
 
 .site-summary .site {
-	border: 1px solid black;
-	padding: 5px;
-	margin: 20px;
+    border: 1px solid black;
+    padding: 5px;
+    margin: 20px;
 }
 
 .site-name {
-	font-weight: bold;
+    font-weight: bold;
 }
 
 .worker-summary span {
-	min-width: 160px;
-	display: inline-flex;
+    min-width: 160px;
+    display: inline-flex;
 }
 
 .training-days-lost {
-	padding-top: 5px;
+    padding-top: 5px;
 }
 
 .tdl-settings {
     padding: 2px;
 }
 
-.table-div + pre {
+.table-div+pre {
     display: none;
 }
-.shift-breakdown-button + pre {
+
+.shift-breakdown-button+pre {
     display: none;
 }
 
@@ -154,20 +165,19 @@ table {
     color: brown;
 }
 
-.th {
+.th {}
 
-}
-
-.table-div th.worker, td.worker {
-  position: absolute;
-  width: 200px;
-  max-width: 200px;
-  left: 0;
-  top: auto;
-  border-top-width: 1px;
-  /*only relevant for first row*/
-  margin-top: -1px;
-  /*compensate for top border*/
+.table-div th.worker,
+td.worker {
+    position: absolute;
+    width: 200px;
+    max-width: 200px;
+    left: 0;
+    top: auto;
+    border-top-width: 1px;
+    /*only relevant for first row*/
+    margin-top: -1px;
+    /*compensate for top border*/
 }
 
 .hidden {
@@ -184,8 +194,8 @@ table {
 }
 
 [data-night-at-derriford="0"] {
-    border: 1px dotted orange ;
-  /* Attribute has this exact value */
+    border: 1px dotted orange;
+    /* Attribute has this exact value */
 }
 
 th.site-title {
@@ -194,7 +204,7 @@ th.site-title {
 
 .name {
     max-width: 90px;
-    display:inline-flex;
+    display: inline-flex;
     white-space: nowrap;
     overflow: hidden;
     /*text-overflow: ellipsis;*/
@@ -210,4 +220,8 @@ th.site-title {
 
 summary h2 {
     display: inline;
+}
+
+.derriford-night.shift-highlight {
+    background-color: yellow;
 }