/* --- Page background (wallpaper) --- */
body{
  background: url('Hero-Dog-Galaxy_2-3-4-5-P-Motorola.png') no-repeat center top fixed;
  background-size: contain;
}

/* Page background color (gutters) */
html, body{
  background-color:#000 !important;
}

/* --- Hub tables: width + translucent cells --- */
.gridtable{
  width:95% !important;
  margin:0 auto;
  border-radius:10px;
  overflow:hidden;
  table-layout:fixed !important;
  border-collapse:collapse !important;
}

/* Table cell base */
.gridtable th,
.gridtable td{
  background:rgba(0,0,0,.30) !important;
  color:#EDEDED !important;
  padding:6px;
  text-align:center;
  font-weight:600;
  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);
  border-color:rgba(0,229,255,.45) !important;
}

/* --- Row state colors --- */
.gColor td{ background:rgba(0,0,0,.30) !important; }
.tColor td{ background:rgba(255,0,0,.45) !important; }
.lColor td{ background:rgba(255,255,0,.45) !important; color:#000 !important; }
.bColor td{ background:rgba(0,0,255,.35) !important; }
.rColor td{ background:rgba(0,255,102,.45) !important; }
.cColor td{ background:rgba(0,180,255,.35) !important; }

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

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

#header{
  position:relative !important;
  background-repeat:no-repeat !important;
  background-size:cover !important;
  background-position:center 300px !important;
  background-color:transparent !important;
}

/* Header title + CLOCK (THIS IS THE REAL ONE) */
#headerTitle{
  display:inline-block !important;
  position:absolute !important;
  top:-20px !important;
  left:50% !important;
  transform:translate(-50%,0) !important;
  margin:0 !important;
  z-index:2;

  /* clock pill */
  background:rgba(0,0,0,.60) !important;
  padding:6px 18px !important;
  border-radius:12px !important;

  color:#FFFFFF !important;
  font-size:32px !important;
  font-weight:900 !important;

  -webkit-text-stroke:2px #000 !important;
  text-shadow:
    0 0 8px rgba(0,0,0,1),
    2px 2px 10px rgba(0,0,0,.95) !important;
}

/* Header title links/icons (if any) */
#headerTitle a,
#headerTitle i{
  color:#FFFFFF !important;
  text-decoration:none !important;
}

/* Hide header junk */
#headerImg,
#headerTag,
#header2Tag,
#mytilepic,
#mytilepic2{
  display:none !important;
}

/* Kill nav bars */
#menu,
.menu,
#menubar,
.menubar,
#menuBar,
#nav{
  display:none !important;
}

/* ================= CONNECT FORM ================= */

#connect_form{
  width:100%;
  text-align:center;
  margin:8px auto 14px;
}

#connect_form input,
#connect_form select{
  display:inline-block;
  margin:4px 6px;
  vertical-align:middle;
}

/* ================= COLUMN WIDTH LOCK ================= */

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

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

.gridtable th:nth-child(3),
.gridtable td:nth-child(3),
.gridtable th:nth-child(4),
.gridtable td:nth-child(4),
.gridtable th:nth-child(5),
.gridtable td:nth-child(5),
.gridtable th:nth-child(6),
.gridtable td:nth-child(6),
.gridtable th:nth-child(7),
.gridtable td:nth-child(7){
  width:12% !important;
}

/* Prevent text blowout */
.gridtable th,
.gridtable td{
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}

/* Remove translucent green bands */
.gridtable tr:not(.tColor):not(.lColor):not(.bColor):not(.rColor):not(.cColor) td{
  background:rgba(0,0,0,.30) !important;
}