/******************************************************************************
 * Javascript Tarot                                                        *
 * by C. David Dent (c) 2008                                                  *
 * http://wildandbad.com:8181/tarot                                           *
 *                                                                            *
 * Partially based on the css Playing Card Javascript Card Objects            *
 * copyright 2001 Mike Hall                                                   *
 * Mike Hall http://www.brainjar.com for terms of use.                        *
 * Do not remove this notice.                                                 *
 ******************************************************************************/


.card {
  border-color: #808080 #000000 #000000 #808080;
  border-width: 1px;
  border-style: solid;
  font-size: 1em;
  width:  2.85em;
  height: 5.00em;
  position: absolute;
}

.front {
  background-color: #ffffff;
  color: #000000;
  position: relative;
  width: 100%;
  height: 100%;
  visibility:hidden;
}
.plain {color: #0194EE; }

.index, .reversed {
  font-size: 45%;
  line-height: 1.2em;
  font-weight: bold;
  width: 1em;
  position: absolute;
}
.index.top{
  left: 0em;
  top:  0em;
  text-align: center;
}
.black>.index.top{
  text-align: left;
  padding-left: 0.2em;
  top: -.1em;
  width: 2.75em;
}
.black>.index.bottom{
  text-align: right;
  top: 8.8em;
  left: 3em;
  width: 2.85em;
}
.reversed.top{
  width:100%;
  left: 0em;
  top:  0em;
  text-align: right;
}
.reversed.bottom{
  width:100%;
  right: 0em;
  top: 10em;
  text-align: left;
}

.face, 
.arcana {
  border: 1px solid #000000;
  position: absolute;
  left: 0.15em;
  top:  0.45em;
  width:  2.45em;
  height: 4.0em;
  padding: 0;
}
/* for face cards */
.spotA1 { position: absolute; left: 0.55em; top: 0.45em; height: 1em; vertical-align: top; z-index: 10}
.spotC5 { position: absolute; left: 2.45em; top: 3.45em; height: 1em; vertical-align: top; z-index: 10}
.face>div {
	position: absolute; 
	height: 		1em; 
	width: 		1em; 
	line-height: 1em;
	vertical-align: top;
  	text-align: center;
}
.face>.spotA1 {left: 0em; top: 0.0em;}
.spotA2 { left: 0em; top: 1.0em;}
.spotA3 { left: 0em; top: 1.5em;}
.spotA4 { left: 0em; top: 2.0em;}
.spotA5 { left: 0em; top: 3.0em;}

.spotB1 { left: 0.8em; top: 0.0em;}
.spotB2 { left: 0.8em; top: 0.5em;}
.spotB3 { left: 0.8em; top: 1.5em;}
.spotB4 { left: 0.8em; top: 2.5em;}
.spotB5 { left: 0.8em; top: 3.0em;}

.spotC1 { left: 1.6em; top: 0.0em;}
.spotC2 { left: 1.6em; top: 1.0em;}
.spotC3 { left: 1.6em; top: 1.5em;}
.spotC4 { left: 1.6em; top: 2.0em;}
.face>.spotC5 { left: 1.6em; top: 3.0em; }

.red>.face>div, 
.green>.face>div {
	margin-top: -0.1em;
}
.red>.face>div.ace, 
.green>.face>div.ace {
	margin-top: 0.33em;
}
.ace {
	top: 0;
	left: 0;
	font-size: 250%;
	width: 1em;
	margin-top: 0.33em;
	line-height: 1.6em;
	vertical-align: middle;
	text-align: middle;
}