/* TODO some media selector to say 'tap' instead of 'click' on mobile devices */
BODY { font-family: Arial; margin: 8px; }
.header {
  clear: left; width: 100%; 
  background-color: #0013a2;
  border-radius: 5px;
  color: white;
  font-family: Verdana, Arial, sans-serif; text-weight: bold;
  height: 68px;
  margin-bottom: 10px;
}
A:link { text-decoration: none; }
A:visited { text-decoration: none; }
A:hover { text-decoration: none; }
A:active { text-decoration: none; }
.header A .large { font-size: 16pt; padding-top: 8px; color: white; text-decoration: none; /* font-weight: bold; */ }
.header .small { font-size: 8pt; padding-top: 5px; }
.action { 
   clear: left; width: 100%; 
   background-color: #ffffe7;
   border: solid 1px #c6c400;
   border-radius: 5px;
}
.actionText { 
   font-weight: bold;
}
.m { margin: 5px; }

.toggleLink { } /* pseudo-class */
.toggleTarget { display: none; } /* pseudo-class */
.toggleText { cursor: pointer; text-decoration: underline; color: #686700; font-size: 8pt; }
.toggleVisible { display: block; } 

/* a status can either be previous or current */
.status { 
  clear: left; width: 100%; 
  margin-top: 10px;
  border: solid 1px #979797;
  border-radius: 5px;
}
.previous { background-color: #cbcbcb; }
.current { background-color: #f1f1f1; }
.statusHeader { 
  width: 100%; 
  border: solid 1px #979797;
  border-radius: 5px;
}
.status.previous .statusHeader { color: white; background-color: #686868; font-weight: bold; }
.status.current .statusHeader { color: white; background-color: #686868; font-weight: bold; }