/******************************************************************************
* Styles for page and game areas.                                             *
******************************************************************************/


.playingField {
  background-color: #40a040;
  border-color:  #208020 #60c060 #60c060 #208020;
  border-style: solid;
  border-width: 1px;
  color: #000000;
  margin-bottom: 6px;
  padding: 4px;
  text-align: left;
  width: 40em;
}

.activeField {
  background-color: #60c060;
  border-color:  #006000 #90f090 #90f090 #006000;
}

.cardArea {
  font-size: 20pt;
  height: 4.25em;
  position: relative;
}

.textBox {
  background-color: #ffffc0;
  border-color:  #006000 #90f090 #90f090 #006000;
  border-style: solid;
  border-width: 1px;
  clear: left;
  color: #000000;
  float: left;
  font-family: "Times New Roman", serif;
  font-size: 10pt;
  font-weight: bold;
  margin-bottom: .5em;
  padding: .1em;
  text-align: center;
  width: 11em;
}

.name {
  background-color: #208020;
  border-color: #60c060 #006000 #006000 #60c060;
  color: #ffffc0;
}

.result { color: #c00000; }

.dollars { color: #006000; }

.lost { color: #80b060; }

#controlsArea {
  margin-top: 0.5em;
  text-align: left;
  width: 30em;
}

#rulesBox {
  background-color: #60c060;
  border-color:  #006000 #90f090 #90f090 #006000;
  border-style: solid;
  border-width: 1px;
  display: none;
  margin: 1em auto 1em auto;
  padding: 0.5em 1em 0.5em 1em;
  text-align: left;
  width: 40em;
}

.mainButtons {
  text-align: right;
}

input.button {
  background-color: #c0c0c0;
  border-color: #f0f0f0 #808080 #606060 #d0d0d0;
  border-style: solid;
  border-width: 2px;
  font-size: 8pt;
  margin-top: .25em;
  padding: 2px .5em;
  text-align: center;
  width: 8em;
}

/******************************************************************************
* Playing card styles.                                                        *
******************************************************************************/

.card {
  background-image: url("cardback.gif");
  border-color: #808080 #000000 #000000 #808080;
  border-width: 1px;
  border-style: solid;
  font-size: 20pt;
  position: absolute;
  width:  3.00em;
  height: 4.00em;
}

.front {
  background-color: #ffffff;
  color: #000000;
  position: absolute;
  width: 100%;
  height: 100%;
}

.red { color: #ff0000; }

.index {
  font-size: 50%;
  font-weight: bold;
  text-align: center;
  position: absolute;
  left: 0.25em;
  top:  0.1em;
}

.ace {
  font-size: 250%;
  position: absolute;
  left: 0.3em;
  top:  0.15em;
}

.face {
  border: 1px solid #000000;
  position: absolute;
  left: 0.5em;
  top:  0.45em;
  width:  2.08em;
  height: 3.2em;
}

.spotA1 { position: absolute; left: 0.5em; top: 0.2em; }
.spotA2 { position: absolute; left: 0.5em; top: 0.9em; }
.spotA3 { position: absolute; left: 0.5em; top: 1.4em; }
.spotA4 { position: absolute; left: 0.5em; top: 1.7em; }
.spotA5 { position: absolute; left: 0.5em; top: 2.6em; }

.spotB1 { position: absolute; left: 1.25em; top: 0.2em; }
.spotB2 { position: absolute; left: 1.25em; top: 0.8em; }
.spotB3 { position: absolute; left: 1.25em; top: 1.35em; }
.spotB4 { position: absolute; left: 1.25em; top: 2.1em; }
.spotB5 { position: absolute; left: 1.25em; top: 2.5em; }

.spotC1 { position: absolute; left: 1.95em; top: 0.2em; }
.spotC2 { position: absolute; left: 1.95em; top: 0.9em; }
.spotC3 { position: absolute; left: 1.95em; top: 1.4em; }
.spotC4 { position: absolute; left: 1.95em; top: 1.7em; }
.spotC5 { position: absolute; left: 1.95em; top: 2.6em; }