body {
  background-color: #333;
  color: #fff;
  padding-top: 0px;
  padding-left: 0px;
  margin: 0px;
}

th { color: #FFF; font-size: 28px; }
table { border-collapse: collapse; }
table, th, td { border: 0px solid #999; padding: 0px; padding-top: 0px; padding-bottom: 0px; }

.clear { clear: both ;}


@media (min-width:400px) {
.grid-container {
  display: grid;
  grid-template-areas:
  'top-bar'
  'info-bar'
  'left'
  'right'
  'bottom';
  grid-gap: 3px;
  padding: 4px;
  padding-top: 0px;
  width: 100%;
}
}

@media (min-width:750px) {
.grid-container {
  display: grid;
  grid-template-areas:
  'top-bar top-bar'
  'info-bar info-bar'
  'left right'
  'bottom bottom';
  grid-gap: 3px;
  padding: 4px;
  padding-top: 0px;
  width: 100%;
}
}

.grid-top-bar {
  grid-area: top-bar;
  padding: 0px;
  width: 100%;
  background-color: #222;
}

.grid-info-bar {
  grid-area: info-bar;
  padding-top: 0px;
  background-color: #222;
  clear: both;
}

.grid-main {
  width: 75%;
  grid-area: right;
}

.grid-left {
  grid-area: left;
  width: 25%;
  min-width: 500px;
  border-right: 1px solid #AAA;
}

.grid-bottom {
	grid-area: bottom;
	background-color: #222;
}

.grid-clock {
}

.grid-meta {
  border: 0px solid #AAA;
  background-color: #000;
  color: lime;
  float: right;
}

.grid-nav {
}

.grid-events {
}

.main {
  width: 100%;
  min-width: 100%;
  background-color: #222;
}

.mainClock-cal {
  text-align: center;
  font-size: 20px;
  border-left: 1px solid #999;
  border-top: 1px solid #999;
  border-bottom: 1px solid #999;
  border-right: 1px solid #999;
  padding: 5px;
  float: left;
}

.mainClock-left {
  text-align: center;
  font-size: 20px;
  border-left: 1px solid #999;
  border-top: 1px solid #999;
  border-bottom: 1px solid #999;
  border-right: 0px solid #999;
  padding: 5px;
  float: left;
}

.mainClock-right {
  text-align: center;
  font-size: 20px;
  border-left: 0px solid #999;
  border-top: 1px solid #999;
  border-bottom: 1px solid #999;
  border-right: 1px solid #999;
  padding: 5px;
  float: left;
}

.events {
/*  border: 1px solid #DDD; */
  padding: 2px;
  padding-right: 10px;
}

.events-current {
  background-color: #666;
/*  border: 1px solid #DDD; */
  padding: 2px;
  padding-right: 10px;
}

th.events {
  text-align: left;
}

table.events {
}

.btn-group .button {
  background-color: #4CAF50; /* Green */
  border: 1px solid green;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  cursor: pointer;
  float: right;
  border-bottom: 2px solid #AAA;
}

.btn-group .button:not(:last-child) {
  border-right: none; /* Prevent double borders */
}

.btn-group .button:hover {
  background-color: #3e8e41;
}

.countdown { float: right; text-align: right; font-size: 60px; }
.warn { color: yellow; }
.over { color: red; }
.green { color: lime; }
.debug { background-color: #000; color: lime; border: 2px; border-color: lime; }
.notes {  min-width: 1000px; width: 100%; background-color: #000; color: #AAA; min-height: 200px; border: 1px solid #aaa;}
.notesTitle { background-color: #000; color: #AAA; font-size: 20px;}

.subject { color: #fff; font-size: 45px; }
.header { width: 100%;  background-color: #222; }