/*
 * Author: Charles McGarvey
 *   Site: http://www.brokenzipper.com/
 */

/* The visual experience should be akin to the customary green felt;
 * excellent material for playing cards on. */
body {
    background: #171;
    font: 300 .9em 'Helvetica Neue', Helvetica, 'Arial Unicode MS', Arial;
	margin: 0;
	/* Here are some hacks to prevent text from being selected, which makes
	 * clicking the game table a little nicer. */
	-webkit-user-select: none;
	-moz-user-select: none;
	cursor: default;		/* This also overrides sub-node defaults. */
}

/* If the user-select hacks above don't work, at least try to make the
 * selection invisible with some more non-standard junk. */
::selection {
	background: transparent;
}
::-moz-selection {
	background: transparent;
}

h1 {
	text-align: center;
}
a {
	color: black;
}

/* The game table is centered and sized based on the dimensions of the card
 * images, which are 71x96.
 * Width:  (71 + 4) * 5 + 28
 * Height: (96 + 4) * 4 + 14
 * The extra added room accounts for the cell borders and other space. */
table {
	height: 450px;
	width: 446px;
	left: 50%;
	top: 50%;
	position: absolute;
	margin: -225px 0 0 -223px;
}

/* The default appearance of a cell of the grid is defined here.  Other,
 * more specialized definitions follow.  The game script changes the
 * appearance (and mouse behavior) of each cell by setting the class.  Each
 * cell has three main attributes:
 *  - Enabled or disabled.
 *  - Selected or not.
 *  - Has the cursor or not. */
td {
	height: 25%;
	width: 19%;
	text-align: center;
    color: #ff6;
	border: 1px solid transparent;
	padding: 0;
	background-color: #282;
/* The game code will modify the background-image to show which card is
 * occupying the cell. */
	background-repeat: no-repeat;
	background-position: center;
}

/* Cell is enabled (can act as a button). */
td.enable {
	cursor: pointer;
}
td.enable:hover {
	background-color: #393;
}
td.enable:active {
	background-color: #09f;
}

/* Cell has the cursor, which is just represented by a dashed border. */
td.cursor {
	border: 1px dashed #ff6;
}

/* Cell is enabled and has the cursor. */
td.enablecursor {
	cursor: pointer;
	border: 1px dashed #ff6;
}
td.enablecursor:hover {
	background-color: #393;
}
td.enablecursor:active {
	background-color: #09f;
}

/* Cell is enabled and selected (represented by a solid border). */
td.enableselect {
	cursor: pointer;
	border: 1px solid #ff6;
}
td.enableselect:hover {
	background-color: #393;
}
td.enableselect:active {
	background-color: #09f;
}

/* Cell is selected and has the cursor. */
td.selectcursor {
	border: 1px dotted #ff6;
}

/* Cell is enabled, selected, and has the cursor. */
td.enableselectcursor {
	cursor: pointer;
	border: 1px dotted #ff6;
}
td.enableselectcursor:hover {
	background-color: #393;
}
td.enableselectcursor:active {
	background-color: #09f;
}


/* This is the space between the matrix proper and the draw pile. */
td.spacer {
	width: 4%;
	background-color: transparent;
}

/* The fake window for displaying the help text. */
#help {
	height: 478px;
	width: 578px;
	top: 50%;
	left: 50%;
	position: absolute;
	margin: -250px 0 0 -300px;
/* Note about the rgba construct: First three values are 8-bit base ten,
 * and the alpha value is decimal.  Don't forget... */
	background: rgba(255, 255, 255, 0.9);
	padding: 10px 10px 10px 10px;
	color: black;
	border: 1px solid black;
	overflow-y: scroll;
	visibility: hidden;			/* Invisible by default. */
}

/* The anchor element for displaying the help window. */
#help\:link {
	cursor: help;
}

/* The close button on the help window. */
#help\:close {
	float: right;
	width: 20px;
	text-align: center;
	vertical-align: middle;
	font-weight: bold;
	border: 1px solid black;
	cursor: pointer;
}
#help\:close:hover {
	background-color: gray;
}
#help\:close:active {
	color: white;
	background-color: red;
}

/* The text at the top-left corner for displaying game instructions and
 * whatnot. */
#status {
    position: absolute;
    left: 1em;
    top: 1em;
	font-size: 16pt;
}

/* This is the short line of text at the bottom-right corner. */
#description {
    position: absolute;
    right: 1em;
    bottom: 1em;
    text-align: right;
	font-size: 12pt;
}