@charset "UTF-8"; /* -*- coding: utf-8 -*- */
/* Styling for my ECMAScript implementation of Conway's game of Life.
 * See weblife.html for content, weblife.js for behaviour.
 */
@import "../scripted.css";
@import "../tabbed.css";

/* Customize particular entities, by id: */
#portal table { border: 1px solid black; width: 100%; /* border-collapse:collapse; */ }
#portal td { border-width: 0px; padding: 0px; cursor: pointer; }
/* #portal td.void { cursor: stop; } /* No such cursor-style :-( */
#status, #Time { font-weight: bold; }
#Reflector tr:first-child th { border: 1px solid black; }
#Reflector th + td { text-align: center; }
#Reflector table { border-spacing: 1ex; }
#screen-shots img { width: 242px; height: 172px; }
/* In particular, the configuration area: */
#config {
  height: 16em; /* Brute force: size of tabs isn't taken into account automatically :-( */
}
#config ul, #config ul li { margin: 0; border: 0; }
#config ul p { margin: 0; }
#config ul.tabbed li:first-child { margin-top: 0; }
#config ul li:first-child { margin-top: 1ex; }
#config form { border: inset; }
#config form li { margin-left: 1ex; }

/* Special-purpose classes: */
.illustrate table, map table { display: inline-table; border: 1px solid black; vertical-align: middle; }
.illustrate td, map td { width: 1ex; height: 1ex; }
dl.key dd { display: inline; margin-left: 0pt; }
dl.key dt { display: inline; }
dl.key { display: inline; } /* but it still comes out as a block :-( */
/* no better with inline-{block,table}, run-in */
dl.key dt:after { content: " = "; }
/* separate template maps a little: */
map + map { padding-left: 1em; }
.scatter dd table { border-spacing: 1ex; border: 1px solid black; }
.scatter dd td { text-align: center; }
.scatter dt { margin-bottom: 1ex; } /* Prevent the illustration abutting the first dd */
.scatter .mid { background-color: yellow; }
/* The .miss cells exist to make the glider depictions have sensible sized cells: */
.scatter dd td.miss { visibility: hidden; }

/* The possible states of a cell: */
.live { background-color: green;	}
.born { background-color: lime;		}
.dies { background-color: purple; color: lime; }
.dead { background-color: silver;	}
.void { background-color: grey;		}

/* Used by Cell's hasLived(); class which names the number i is used for cells
   which have been live after at least 1<<(i-1) update()s but, if some class
   names i+1, after less than 1<<i update()s.  (For these purposes, 1<<(-1) is
   taken to be 1>>1 = 0.)  When adding more, also add to Cell's busyness. */
.zero	{ background-color: silver;	}
.one	{ background-color: navy;	}
.two	{ background-color: blue;	}
.three	{ background-color: teal;	}
.four	{ background-color: olive;	}
.five	{ background-color: green;	}
.six	{ background-color: lime;	}
.seven	{ background-color: yellow;	}
.eight	{ background-color: orange;	}
.nine	{ background-color: fuchsia;	}
.ten	{ background-color: aqua;	}

/* Various sizes for the display table's cells; presently, simply the length
   units supported by CSS 2.1. */
table.sizein td { width: 1in; height: 1in; }
table.sizecm td { width: 1cm; height: 1cm; }
table.sizeem td { width: 1em; height: 1em; }
table.sizepc td { width: 1pc; height: 1pc; }
table.sizeex td { width: 1ex; height: 1ex; }
table.sizemm td { width: 1mm; height: 1mm; }
table.sizept td { width: 1pt; height: 1pt; }
table.sizepx td { width: 1px; height: 1px; }

/* Leave only small spaces between cells, especially for tiny cells: */
table.sizein { border-spacing: 3px; }
table.sizecm { border-spacing: 2px; }
table.sizeem { border-spacing: 2px; }
table.sizepc { border-spacing: 2px; }
table.sizeex { border-spacing: 1px; }
table.sizemm { border-spacing: 1px; }
table.sizept { border-spacing: 0px; }
table.sizepx { border-spacing: 0px; }