/* USAGISOFT */

BODY { margin: 0px; padding: 0px; background-color: #2B3A30; }
HTML, BODY { height: 100%; }

A:link    { text-decoration: none; color: #4EAE85; }
A:visited { text-decoration: none; color: #4EAE85; }
A:active  { text-decoration: none; color: #FFFFFF; }
A:hover   { text-decoration: none; color: #FFFFFF; }

TD { font-size: 9px; font-weight: bold; font-family: Verdana, Helvetica, Arial, sans-serif; color: #4EAE85; }
TD.small { color: #1C2620; }

/* clipped top corners on tabs: a solid cell with the corner cut off, sharp at any zoom;
   the shape overshoots the inner and bottom edges so they never get soft seams,
   and a 2px shadow tucks under the neighbouring cell so the two never show a hairline between them */
TD.cut  { background-color: #488764; clip-path: polygon(-2px 0, 0 0, 100% 10px, 100% calc(100% + 2px), -2px calc(100% + 2px)); box-shadow: -2px 0 0 #488764; }
TD.cutl { background-color: #488764; clip-path: polygon(0 10px, 100% 0, calc(100% + 2px) 0, calc(100% + 2px) calc(100% + 2px), 0 calc(100% + 2px)); box-shadow: 2px 0 0 #488764; }

/* fluid up to the classic 780px, so narrow windows don't scroll sideways */
TABLE.page { max-width: 780px; margin: 0px auto; }

/* boxes and forms (CRASHKEYS gate) */
TD.dark   { color: #1C2620; }
TD.light  { color: #4EAE85; }
TD.bright { color: #FFFFFF; }
TABLE.box { max-width: 360px; margin: 0px auto; }

FORM { margin: 0px; }
INPUT { padding: 2px 3px; border: 0px; font-size: 9px; font-weight: bold; font-family: Verdana, Helvetica, Arial, sans-serif; }
INPUT.field  { width: 160px; background-color: #1C2620; color: #FFFFFF; }
INPUT.button { background-color: #488764; color: #1C2620; cursor: pointer; }
INPUT.button:hover { background-color: #4EAE85; }
INPUT:focus-visible { outline: 1px solid #4EAE85; outline-offset: 1px; }