A:hover {color: 3366ff}  A:link {color: #ccffff} 

a:link { 
	text-decoration: none; 
	color: #ccffff;
}
a:active { 
	text-decoration: none; 
	color: #3366ff;
}
a:visited { 
	text-decoration: none; 
	color: #ccffff;
}
a:hover { text-decoration: none; }
body {
	font: 14px verdana;
	margin:0px;
	padding:0px;
	overflow:hidden;
	color: white;
	background-color: #002010;
}
/* resets */
input {
	margin: 0px;
	padding: 0px 3px 0px; 
	border-radius: 4px;
}
input:focus {
	outline: 0px;
}
select:focus {
	outline: 0px;
}

select {
	margin: 0px;
	padding: 0px 3px 0px; 
}

/* main board defs */
#idplayarea
{
	color: silver;
	//background-color: #006033;
	background-image: radial-gradient(#002010, #007040);
	position: absolute;
}

/* control bar */
#idcontrols {
	position: absolute;
	background-color: #999933;
	box-sizing: border-box;
	padding-left: 5px;
}
#idctlcell_1 {
	text-align: left;
	vertical-align: middle;
	padding: 0px;
	box-sizing: border-box;
}
#idctlcell_2 {
	text-align: right;
	vertical-align: middle;
	padding: 0px;
	box-sizing: border-box;
}
#idctlcell_3 {
	width: 3%;
	vertical-align: middle;
}

/* locate bar */
#idlocate {
	position: absolute;
	background-color: #999933;
	box-sizing: border-box;
}
#idcrcell {
	width: 5%;
	color: black;
}
#idloccell {
	text-align: center;
	vertical-align: bottom;
	width: 88%;
	height: 100%;
	padding: 5px;
	position: absolute;
	box-sizing: border-box;
}
#idpeek {
	width: 5%;
	text-align: right;
	margin-right: 5px;
}

#idcardsize {
	color: gray;
	text-align: center;
}

#iddivaces
{
	position: absolute;
}
#iddivcells
{
	position: absolute;
}
#iddivcols
{
	position: absolute;
}

/* the main card pile defs are prefixed with 'nrm' for 'normal' dating back to when we also had a spreadsheet version */
/* aces */
.nrmAces {
	border:1px solid #009960; 
	text-align:center; 
	background-color: #005830;
	width: 69px;
	height: 96px;
	float: left;
}

/* freecells */
.nrmFreecell { 
	border:1px solid #009960; 
	background-color: #005830;
	text-align:center; 
	width: 69px;
	height: 96px;
	float: left;
}

/* columns */
.nrmCell     { 	
	border:1px solid #009960; 
	text-align:center; 
	width: 69px;
	height: 96px;
	float: left;
}

.ctl { 
	font-family:arial,sans-serif; 
	box-sizing: border-box;
	background-color: #bbbb00; 
	color: #000000;
	padding: 0px;
	border: 2px solid gray;
	-webkit-appearance: none;
}
/* single char control (undo, redo) */
.sctl {
    font-family:arial,sans-serif;
    box-sizing: border-box;
    background-color: #bbbb00;
    color: #000000;
	padding: 0px;
    border: 2px solid black;
    -webkit-appearance: none;
}
.selctl { 
	font-family:arial,sans-serif; 
	box-sizing: border-box;
	color: #000000;
	border: 2px solid black;
	/*-webkit-appearance: none;*/
}
.sellbl { 
	font-family:arial,sans-serif; 
	box-sizing: border-box;
	color: #000000;
	/*border-radius: 4px;*/
	/*-webkit-appearance: none;*/
}
.btnloc {
	font-family:arial,sans-serif; 
	box-sizing: border-box;
	background-color: #bbbb00; 
	color: #000000;
	border: 2px solid black;
	text-align: center;
	border-radius: 4px;
	-webkit-appearance: none;
}
.cardfont {
	font-family: sans-serif
	font-weight: bold;
}

/* funny little class to allow controls to flow vertically or horizontally */
.spacer {
	display: block;
	color: black;
	padding: 0px;
	border: 0px;
	margin: 0px;
	font-size: 10px;
}
.hugefont {}
.medfont {}
.smallfont {}

#idlogo { 
	font-family:verdana,sans-serif;
	color:#bbbb00;
	visibility:visible; 
	position: absolute;
	width: 100%;
	text-align: center;
}
#idmovestbl { 
	position: absolute;
	font-family:arial;
	color:#bbbb00; 
}
#idlinks { 
	font-family:arial;
	color:#bbbb00; 
}
.busycell { 
	width:20px; 
	height:14px; 
	border:1px 
	solid black; 
}
#idbusytbl { 
	background-color: #ffffff;
}
#idplaybtn {
	cursor: pointer;
	border: 4px solid black;
	display: none;
	position: absolute;
	width: 360px;
	height: 100px;
	background-color: #bbbb00;
	color: black;
	text-align: center;
	/*-webkit-appearance: none;*/
	animation: pulse 1s alternate infinite;
}

@keyframes pulse {
  from {
	box-shadow: 0 0 40px 20px rgba(255,255,128,1.0);
  }
  to {
	box-shadow: 0 0 40px 20px rgba(255,255,64,0.5);
  }
}
#idgameselect {
	border: 2px solid black;
}
#idmodeselect {
	border: 2px solid black;
}
#idnojavascript
{
	width:640px;
	border:1px solid yellow;
	padding:4px;
}
#idsrchilite
{
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	position:absolute;
	position:absolute;
	display:none;
	z-index:1000;
	border:4px solid #80cfff;
	border-radius: 4px;
}
#iddesthilite
{
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	position:absolute;
	position:absolute;
	display:none;
	z-index:1000;
	border:4px solid #ff6060;
	border-radius: 4px;
}
#idwait
{
	background-color:#e0e0e0;
	color:black;
	font-family:verdana, sans-serif;
	font-size:12px;
	display:none;
	position:absolute;
	border:1px solid #666666;
	border-radius: 12px;
	padding:10px;
}
#idwaitanim
{
	text-align:center;
	font-size:16px;
	font-weight:bold;
}
#idpatience
{
	text-align: center;
}
.cardspan
{
	position:absolute;
	display:none;
	overflow:hidden;
}
.cardimg
{
	position: absolute;
	display: block;
}

#idmovesleft {
	width: 25%;
	text-align: left;
}
#idfastwin {
	width: 50px;
}
#idmovescenter {
	width: 50%;
	text-align: center;
}
#idviewinfo {
	width: 25%;
	text-align: right;
}

/* 
	funny element created dynamically which just contains the various UI elements, cards, busy meter, 
	hilites, dialog, play button, etc.
*/
#idui {
	position: absolute;
	top: 0px;
	left: 0px:
	width: 5000px;
	height: 5000px;
}

/* various defs for dialogs */
#iddlg
{
	display:none;
	position:absolute;
	z-index:10000;
	border:6px solid #666666;
	border-radius: 20px;
	background-color: #c0ffff;
	box-shadow: 7px 7px 7px #002200;
	box-sizing: border-box;
}
#dlgtitle {
    background-color: #666666;
    text-align: center;
    font-size: larger;
    font-weight: bold;
    padding: 4px;
	color: white;
}
#dlgcontent {
	color: black;
	padding: 4px;
	width: 99%;
	text-align: center;
	font-size: 1em;
}
#dlgerror {
	color: red;
	text-align: left;
	padding: 6px;
}
.ldnote {
	font-size: 11px;
	font-style: italic;
	color: gray;
}
.dlgbutton {
	font-size: large;
	background-color: #6486fc;
	color: white;
	border: 0px;
	padding: 12px;
}
.dlglink:link {
	text-decoration: none;
	color: #4466cc;
}
.dlglink:active {
	text-decoration: none;
	color: #6688ee;
}
.dlglink:visited {
	text-decoration: none;
	color: #2244aa;
}
.dlglink:hover {
	text-decoration: none;
	color: #6688ee;
}
#idresults {
	margin-left: auto;
	margin-right: auto;
	font-size: 1.2em;
}
.dlglabel {
	text-align: right;
	font-weight: bold;
}
.dlgdata {
	text-align: left;
	font-weight: bold;
}
#iddlgerror {
	display: none;
	color: #aa5500;
	font-weight: bold;
	font-size: larger;
	margin-bottom: 20px;
	margin-top: 15px;
}



/* MOTF */
#motfpubdate {
    color: gray;
    font-size: x-small;
    font-style: italic;
}
#motfcaption {
	margin-top: 3%;
	margin-bottom: 3%;
    color: black;
    font-size: x-large; 
    font-weight: bold;
	text-align: center;
}
#motfcontinue {
	margin-top: 4%;
	margin-left: auto;
	margin-right: auto;
	padding: 6px;
	display: block;
	font-size: large;
}
#motfcontent {
	text-align: left;
	padding: 10px;
}
#motfcontent a:link { 
	text-decoration: none; 
	color: blue;
}
#motfcontent a:active { 
	text-decoration: none; 
	color: blue;
}
#motfcontent a:visited { 
	text-decoration: none; 
	color: blue;
}
#motfcontent a:hover { text-decoration: none; }


.green {
	color: #00cc44;
}
.red {
	color: #cc0044;
}

#iddebug {
 position: absolute;
 display: none;
 height: 600px;
 border: 1px solid orange;
 background-color: white;
 color: black;
 width: 800px;
 overflow: scroll;
}

#iddailylabel { display: none; }
#idcurrentlabel { display: none; }
#idyearlylabel { display: none; }
#idalltimelabel { display: none; }
#iddaily { display: none; }
#idcurrent { display: none; }
#idyearly { display: none; }
#idalltime { display: none; }

#idmorewininfo {
	cursor: pointer;
	color: blue;
}

#idoptions {
	cursor: pointer;
	margin-right: 4px;
}

#idtouropen {
	font-size: larger;
	font-weight: bold;
}
#idtourctls {
	text-align: center;
}
#idtourbtns {
	text-align: center;
}
#idtourbtntbl {
	border-spacing: 5px;
	margin-left: auto;
	margin-right: auto;
}
.tourbtn {
    font-family: arial;
	font-size: 14px;
	font-weight: bold;
    width:70px;
	height: 35px;
	box-sizing: border-box;
	background-color: #ab98fe;
	margin: 1px;
	padding: 2px;
	border: 1px solid gray;
}
.lasttourbtn {
    font-family: arial;
	font-size: 14px;
	font-weight: bold;
	background-color: lightblue !important;
    width:70px;
	height: 35px;
	box-sizing: border-box;
	margin: 1px;
	padding: 2px;
	border: 1px solid gray;
}
.touricon {
	width: 30px;
}
#idtourflags {
	font-size: x-small;
}

#idcontent input {
    border: 1px solid #707000;
    background-color: #cccc00;
    border-radius: 10px;
    font-weight: bold;
    font-family: sans-serif;
    font-size: 120%;
    padding: 10px;
}
#idtourcancel {
	color: black;
}
#idtourresults {
	color: blue;
	font-weight: bold;
}
/* for the little popups upper left */
#idtourmsg {
	display: none;
	opacity: 1.0;
	position: absolute;
	width: 300px;
	height: 40px;
	background-color: #ab98fe;
	color: black;
	border: 3px solid slateblue;
	border-radius: 10px;
	font-weight: bold;
	padding: 10px;
	text-align: center;
	z-index: 20000;
}

#idprivatescores {
	width: 90%;
}

#idprivatescores th {
	text-align: center;
}
#idprivatescores td {
	text-align: center;
}
#idwelcome {
	width: 70%;
	margin-left: auto;
	margin-right: auto;
}
#idloading {
	color: yellow;
	font-size: xx-large;
}

/* 
	PSEUDO-ALERT 
	The following just sets the size of our pseudo-left for different screen sizes and there's one common
	style for the close button.
*/
@media (min-width: 100px)
{
	/* just the catch-all for way too small */
   #alertui {
		position: absolute;
		width: 100%;
		left: 0%;
		height: auto;
		top: 100px;
		text-align: left;
		display: block;
		background-color: #e0e0e0;
		color: black;
		font-size: large;
		font-family: sans-serif;
		border: 4px solid #404040;
		border-radius: 20px;
		z-index: 20000;
		padding: 10px;
	}
}

/* PHONE */
@media (min-width: 768px)
{
   #alertui {
		position: absolute;
		width: 80%;
		left: 10%;
		height: auto;
		top: 100px;
		text-align: left;
		display: block;
		background-color: #e0e0e0;
		color: black;
		font-size: large;
		font-family: sans-serif;
		border: 4px solid #404040;
		border-radius: 20px;
		z-index: 20000;
		padding: 10px;
	}
}

/* COMPUTER AND TABLET */
@media (min-width: 992px)
{
   #alertui {
		position: absolute;
		width: 30%;
		left: 35%;
		height: auto;
		top: 100px;
		text-align: left;
		display: block;
		background-color: #e0e0e0;
		color: black;
		font-size: large;
		font-family: sans-serif;
		border: 4px solid #404040;
		border-radius: 20px;
		z-index: 20000;
		padding: 10px;
	}
}

#closealert {
	font-size: large;
}