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

body {
  background-color: #40a040;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10pt;
  margin-top: 1em;
}

.playingField {
  border-color:  #208020 #60c060 #60c060 #208020;
  border-style: solid;
  border-width: 1px;
  color: #000000;
  margin-bottom: 8px;
  padding: 4px;
}

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

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

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

.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;
}

#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;
}

input.button {
  background-color: #c0c0c0;
  border-color: #f0f0f0 #808080 #606060 #d0d0d0;
  border-style: solid;
  border-width: 2px;
  font-size: 8pt;
  margin-top: .5em;
  padding: 0px;
  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.75em;
  height: 5.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.25em;
}

.ace {
  font-size: 300%;
  position: absolute;
  left: 0.325em;
  top:  0.250em;
}

.face {
  border: 1px solid #000000;
  position: absolute;
  left: 0.50em;
  top:  0.45em;
  width:  2.6em;
  height: 4.0em;
}

.spotA1 { position: absolute; left: 0.60em; top: 0.5em; }
.spotA2 { position: absolute; left: 0.60em; top: 1.5em; }
.spotA3 { position: absolute; left: 0.60em; top: 2.0em; }
.spotA4 { position: absolute; left: 0.60em; top: 2.5em; }
.spotA5 { position: absolute; left: 0.60em; top: 3.5em; }

.spotB1 { position: absolute; left: 1.55em; top: 0.5em; }
.spotB2 { position: absolute; left: 1.55em; top: 1.0em; }
.spotB3 { position: absolute; left: 1.55em; top: 2.0em; }
.spotB4 { position: absolute; left: 1.55em; top: 3.0em; }
.spotB5 { position: absolute; left: 1.55em; top: 3.5em; }

.spotC1 { position: absolute; left: 2.50em; top: 0.5em; }
.spotC2 { position: absolute; left: 2.50em; top: 1.5em; }
.spotC3 { position: absolute; left: 2.50em; top: 2.0em; }
.spotC4 { position: absolute; left: 2.50em; top: 2.5em; }
.spotC5 { position: absolute; left: 2.50em; top: 3.5em; }