/******************************************************************************
 * 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:  3.75em;
  height: 5.00em;
  position: absolute;
}

.front {
  background-color: #ffffff;
  color: #000000;
  position: relative;
  width: 100%;
  height: 100%;
  visibility:hidden;
}
.black {color: #000; }
.red { color: #C00; }
.gold { color: #F90; }
.green { color:#390; }
.blue { color: #03C; }

.index, .reversed {
  font-size: 50%;
  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: 1.875%;
  top: -.1em;
  width: 57%;
}
.index.bottom{
  left: 88%;
  top: 76%;
  text-align: center;
}
.black>.index.bottom{
  text-align: right;
  top: 78%;
  left: 22%;
  width: 76%;
}
.reversed.top{
  width:100%;
  left: 0em;
  top:  0em;
  text-align: right;
}
.reversed.bottom{
  width:100%;
  right: 0em;
  top: 90%;
  text-align: left;
}

.face,
.arcana {
  border: 1px solid #000000;
  position: absolute;
  left: 14.25%;
  top:  10%;
  width:  71.5%;
  height: 80%;
  padding: 0;
}
/* for face cards */
.spotA1 { position: absolute; left: 15%; top: 7%; height: 1em; vertical-align: top; z-index: 10}
.spotC5 { position: absolute; left: 70%; top: 68%; 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: 25%;}
.spotA3 { left: 0em; top: 37.5%;}
.spotA4 { left: 0em; top: 50%;}
.spotA5 { left: 0em; top: 75%;}

.spotB1 { left: 30.75%; top: 0.0em;}
.spotB2 { left: 30.75%; top: 20%;}
.spotB3 { left: 30.75%; top: 37.5%;}
.spotB4 { left: 30.75%; top: 60%;}
.spotB5 { left: 30.75%; top: 75%;}

.spotC1 { left: 61.5%; top: 0.0em;}
.spotC2 { left: 61.5%; top: 25%;}
.spotC3 { left: 61.5%; top: 37.5%;}
.spotC4 { left: 61.5%; top: 50%;}
.face>.spotC5 { left: 61.5%; top: 75%; }

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