/* --- Page background (wallpaper) --- */
body{
  background: url('1234ABCD.png') no-repeat center center fixed;
  background-size: contain;
  background-position: center center !important;   /* keep centered */
}

/* --- Hub tables: width + translucent cells --- */
.gridtable{
  width:95% !important;
  margin:0 auto;
  border-radius:10px;
  overflow:hidden;
}
.gridtable th,
.gridtable td{
  background:rgba(0,0,0,.25) !important;
  color:#fff;
  padding:6px;
  text-align:center;
}

/* --- Row state colors --- */
.gColor{background:rgba(0,0,0,0) !important;}     /* Idle   */
.tColor{background:rgba(255,0,0,.50) !important;}     /* PTT    */
.lColor{background:rgba(255,255,0,.50) !important;}   /* COS    */
.bColor{background:rgba(0,0,255,0) !important;}     /* Duplex */
.rColor{background:rgba(0,255,0,0) !important;}     /* Keyed  */

/* --- Clickable node hover --- */
.nodeNum:hover{ background:#00FF00 !important; color:#000 !important; cursor:pointer; }

/* --- Clock --- */
#clock{ font-size:26px !important; color:#FFEB3B !important; text-shadow:0 2px 6px rgba(0,0,0,.8); }

/* ===================== HEADER ===================== */

/* Keep the header image (other defaults); final nudge is added at bottom */
#header{
  position:relative !important;
  background-repeat:no-repeat !important;
  background-size:cover !important;
  background-position:center 180px !important;   /* baseline; overridden below */
  background-color:transparent !important;
}

/* GREEN “Welcome …” banner inside #header */
#headerTitle{
  display:block !important;
  position:absolute !important;
  top:-20px !important;                            /* smaller = closer to top */
  left:50% !important;
  transform:translate(-50%, 0) !important;
  margin:0 !important;
  z-index:2;
}
#headerTitle, #headerTitle a, #headerTitle i{
  color:#000000 !important;
  font-size:28px !important;
  font-weight:700 !important;
  text-decoration:none !important;
  text-shadow:0 2px 6px rgba(0,0,0,.85) !important;
}

/* Hide extra header decorations (keep the title) */
#headerImg, #headerTag, #header2Tag, #mytilepic, #mytilepic2{
  display:none !important;
}

/* Kill the maroon/green nav bars (Nodes / LsNodes) */
#menu, .menu, #menubar, .menubar, #menuBar, #nav{
  display:none !important;
}



/* ===== FINAL NUDGE: move the big header image down/up =====
   Increase the px value to move the image LOWER; decrease to move it higher. */
#header{
  background-position: center 300px !important;
}
/* Page background color (shows in the side/top/bottom gutters) */
html, body {
  background-color: #000 !important;   /* <- change to any color you like */
}

/* Wallpaper: show entire image and keep it centered */
body{
  background-image: url('1234ABCD.png');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center top;     /* or: center 0 */
  background-size: contain;            /* <- was cover */
}

/* Make sure no header bar paints over the color */
#header { background-color: transparent !important; }
/* Center the Supermon control buttons/fields when logged in */
#connect_form{
  width: 100%;
  text-align: center;            /* centers inline/inline-block children */
  margin: 8px auto 14px;         /* nice breathing room */
}

/* Make the controls behave like buttons and add a bit of spacing */
#connect_form .submit,
#connect_form .submit2,          /* local-only buttons */
#connect_form input[type="button"],
#connect_form input[type="text"],
#connect_form select {
  display: inline-block;
  margin: 4px 6px;
  vertical-align: middle;
}
/* Clock row styling in the first node table */
.gridtable thead .clock-row th{
  background: rgba(0,0,0,.55) !important;
  padding: 6px 0 !important;
}

/* Digital clock look */
#clock{
  display: inline-block;
  font-size: 28px !important;
  color: #00ff00 !important;
  text-shadow: rgba(0,0,0,.25);
  line-height: 1;
}

/* Make all table text readable on any background */
.gridtable th,
.gridtable td{
  color:#00FF00 !important;                 /* almost-white */
  text-shadow:
     -1px -1px 0 rgba(0,0,0,.85),
      1px -1px 0 rgba(0,0,0,.85),
     -1px  1px 0 rgba(0,0,0,.85),
      1px  1px 0 rgba(0,0,0,.85);           /* crisp black outline */
  font-weight:600;                          /* a bit bolder for clarity */
}

/* Let state rows override the per-cell tint */
.gColor td { background: rgba(0,128,0,.45) !important; }      /* Idle */
.tColor td { background: rgba(255,0,0,.45) !important; }       /* PTT */
.lColor td { background: rgba(255,255,0,.45) !important;       /* COS */
            color:#000 !important; }                           /* better contrast */
.bColor td { background: rgba(0,0,255,.45) !important; }       /* Duplex */
.rColor td { background: rgba(0,255,0,.45) !important; }       /* Keyed (row) */

/* If you also use “connecting” rows */
.cColor td { background: rgba(0,180,255,.35) !important; }     /* Connecting */
/* Color for the node number link in the title row */
.gridtable thead a{
  color:#00FF00 !important;          /* pick your color */
  text-decoration:none !important;
  text-shadow: 0 2px 6px rgba(0,0,0,.85);
}
.gridtable thead a:hover{
  color:#00FF00 !important;          /* hover color, optional */
}
/* Black outline around the #clock digits */
#clock{
  /* keep your existing size/color */
  -webkit-text-stroke: 2px #00FF00; /* Chrome/Edge/Safari */
  text-shadow:                  /* fallback for others */
    1px 0   0 #000, -1px 0   0 #000,
    0   1px 0 #000,  0  -1px 0 #000,
    1px 1px 0 #000, -1px -1px 0 #000,
    1px -1px 0 #000, -1px 1px 0 #000;
}
/* ================= LOCKED COLUMN WIDTHS ================= */

/* Stretch table full width but lock each column */
.gridtable {
  table-layout: fixed !important;
  width: 100% !important;
  border-collapse: collapse !important;
  margin: 0 auto !important;
}

/* Node */
.gridtable th:nth-child(1),
.gridtable td:nth-child(1) {
  width: 8% !important;
}

/* Node Information */
.gridtable th:nth-child(2),
.gridtable td:nth-child(2) {
  width: 32% !important;
}

/* Received */
.gridtable th:nth-child(3),
.gridtable td:nth-child(3) {
  width: 12% !important;
}

/* Link */
.gridtable th:nth-child(4),
.gridtable td:nth-child(4) {
  width: 12% !important;
}

/* Direction */
.gridtable th:nth-child(5),
.gridtable td:nth-child(5) {
  width: 12% !important;
}

/* Connected */
.gridtable th:nth-child(6),
.gridtable td:nth-child(6) {
  width: 12% !important;
}

/* Mode */
.gridtable th:nth-child(7),
.gridtable td:nth-child(7) {
  width: 12% !important;
}

/* Force cells not to stretch with long names */
.gridtable th,
.gridtable td {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}