common.css

/* CSS Document */
* {margin: 0; padding: 0;}

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,
center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td
/*HTML5*/
header,footer,article,section,nav,menu,hgroup{margin:0;padding:0;border:0;outline:0;/*background:transparent;*/}
header,footer,article,section,nav,menu,hgroup{display: block;}
/** header{margin:0;}*/

@font-face {
    font-family: 'CenturyGothicRegular';
    src: url('fonts/gothic.eot');
    src: url('fonts/gothic.eot?#iefix') format('embedded-opentype'),
         url('fonts/gothic.woff') format('woff'),
         url('fonts/gothic.ttf') format('truetype'),
         url('fonts/gothic.svg#CenturyGothicRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'intro_regular';
    src: url('fonts/intro.eot');
    src: url('fonts/intro.eot?#iefix') format('embedded-opentype'),
         url('fonts/intro.woff') format('woff'),
         url('fonts/intro.ttf') format('truetype'),
         url('fonts/intro.svg#intro_regular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'archiveregular';
    src: url('fonts/archive.eot');
    src: url('fonts/archive.eot?#iefix') format('embedded-opentype'),
         url('fonts/archive.woff') format('woff'),
         url('fonts/archive.ttf') format('truetype'),
         url('fonts/archive.svg#archiveregular') format('svg');
    font-weight: normal;
    font-style: normal;
}



html {height: 100%; font-size:100%;}
* html body {height: 100%;}
body{min-height: 100%;height:100%;position:relative;}

a:link, a:visited{outline:none;	text-decoration:underline;}
a:hover{text-decoration:none;}

h1,h2,h3{margin:0;padding:0;font-weight:normal;}
h1 a, h2 a, h3 a{font-weight:inherit;}
ul{list-style: none;padding: 0;margin: 0;}
ul ul{list-style: none;}
a img, img{border:0px;}
table{width:100%;border:0;text-align:center;vertical-align:top;}



/* Clearfix */
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix { display: inline-block; }
* html .clearfix { height: 1%; }
.clearfix { display: block; clear: both; }


body{
	background:#aaa;
}


.main-wrapper{
	position:relative;
	width:900px;
	height:650px;
	margin:0 auto;
	background:#ccc;
	/*outline:1px solid red;*/
}

#table{
	position:absolute;
	width:550px;
	height:330px;
	top:160px;
	left:200px;
	background:#bbb;
	outline:1px solid #333;
}

#table ul{
	display:block;
	position:absolute;
	width:550px;
	height:150px;
	left:0px;
	padding:5px 0;
	/*outline:1px solid yellow;*/
}

#table #table-enemy-cards{
	top:0px;
}
#table #table-my-cards{
	bottom:0px;
}

#table .card-slot{
	display:block;
	float:left;
	width:100px;
	height:150px;
	margin:0 5px;
	background:#ccc;
	outline:1px solid #333;
}



.player-frame{
	display:block;
	position:absolute;
	width:150px;
	height:200px;
	left:0;
	text-align:center;
	outline:1px solid blue;
}
#enemy-frame{
	top:0;
}
#my-frame{
	bottom:0;
}
.player-title{
	padding:60px 0;
	font-size:20px;
	line-height:30px;	
}
.player-health{
	position:absolute;
	width:40px;
	height:40px;
	bottom:0;
	right:0;
	text-align:center;
	font-size:30px;
}




.hand-cards{
	display:block;
	position:absolute;
	width:550px;
	height:150px;
	left:200px;
	/*outline:1px solid green;*/	
}
#hand-enemy-cards{
	top:0px;
}
#hand-my-cards{
	bottom:0px;
}
.hand-cards .hand-card{
	display:block;
	float:left;
	width:100px;
	height:150px;
	margin:0 5px;
	/*outline:1px solid red;*/
}



.card{
	position:relative;
	width:100px;
	height:150px;
	background:#D49D1D;
	cursor:pointer;
}
.card-title{
	font-size:20px;
	line-height:30px;
	text-align:center;
	padding: 35px 0;
}
.card-attack,
.card-health{
	position:absolute;
	width:40px;
	height:40px;
	bottom:0;
	text-align:center;
	font-size:30px;
}
.card-attack{
	left:0;
}
.card-health{
	right:0;
}
#hand-enemy-cards .card{
	background:#C77014;
}
#hand-enemy-cards .card-title,
#hand-enemy-cards .card-attack,
#hand-enemy-cards .card-health{
	display:none;
}



#b-turn{
	position:absolute;
	height:20px;
	top:50%;
	right:0;
	margin-top:-10px;
	font-size:16px;
	line-height:20px;
	cursor:pointer;
	outline:1px solid red;
}