body, table	{font-family:sans-serif; font-size:100%;}
body	{margin:0; padding:0; border:0; position:relative;}

.cf:before, .cf:after	{content:' '; display:table;}
.cf:after	{clear:both;}

.cf>.fl	{float:left;}
.cf>.fr	{float:right;}

.l	{text-align:left;}
.c	{text-align:center;}
.r	{text-align:right;}
.j	{text-align:justify;}

#hdr	{background:#e0e0e0;}

#ftr	{font-size:70%; text-align:center;}

.tt-board	{margin:0 auto; width:480px; min-height:272px; background:url(tt/board.png) center center no-repeat;}
.tt-board table	{margin:0 auto; font-size:6pt; border-collapse:collapse; border-spacing:0;}
.tt-board td	{height:120px; width:93px; border:0; padding:0; position:relative; overflow:hidden;}
.tt-board td img	{height:120px; width:93px; border:0; padding:0; position:relative;}
.tt-board td.pid:after	{display:inline-block; width:16px; height:16px; position:absolute; bottom:0; right:0; content:' ';}
.tt-board td.pid-0:after	{background:#00f;}
.tt-board td.pid-1:after	{background:#f00;}
.tt-board td span	{display:block;}

#tt-play #tt-log	{margin-left:15em; margin-right:15em;}
#tt-play.cf>#tt-p1	{float:left;}
#tt-play.cf>#tt-p2	{float:right;}
.tt-screen ul	{margin:0 auto; padding:0; list-style:none; position:relative;}
.tt-screen ul:before	{display:block; border-bottom:1px dotted #888; content:attr(title); font-weight:bold;}
.tt-screen li	{position:relative; display:block;}
.tt-screen .player ul li+li.none	{display:none;}
.tt-screen .player ul li:before	{display:inline-block; width:25px; height:30px; vertical-align:middle; line-height:30px; content:" ";}
.tt-screen .player ul li[data-element="1"]:before	{content:url(tt/element-earth.png);}
.tt-screen .player ul li[data-element="2"]:before	{content:url(tt/element-fire.png);}
.tt-screen .player ul li[data-element="3"]:before	{content:url(tt/element-wind.png);}
.tt-screen .player ul li[data-element="4"]:before	{content:url(tt/element-water.png);}
.tt-screen .player ul li[data-element="5"]:before	{content:url(tt/element-holy.png);}
.tt-screen .player ul li[data-element="6"]:before	{content:url(tt/element-ice.png);}
.tt-screen .player ul li[data-element="7"]:before	{content:url(tt/element-poison.png);}
.tt-screen .player ul li[data-element="8"]:before	{content:url(tt/element-thunder.png);}
#tt-play .tt-hand	{}
#tt-play .tt-hand li img	{position:absolute; right:0; width:93px; height:120px; display:none; z-index:99;}
#tt-play .tt-hand li:hover img	{display:inline-block;}
/*#tt-play .tt-hand li[data-img]:after	{position:absolute; right:0; height:120px; width:93px; display:none; content:url( "tt/" attr(data-img) ) ;}
#tt-play .tt-hand li[data-img]:hover:after	{display:inline-block;}*/