@charset "utf-8";
/* CSS Document */

td,th, body {
		font-family: Tahoma; 
		color: #666666; 
		font-size: 14px;
		line-height: 22px;
}

body {
		margin-left: 0px; 
		margin-top: 0px; 
		margin-right: 0px; 
		margin-bottom: 0px; 
		background: url(http://ptcdn.info/motherday57/background.gif) repeat #FFFFFF;
}

form {
		margin: 0px; 
		padding: 0px;
}

h1 {
		font-size: 22px;
		font-weight: bold;
		color: #000000;
		line-height: 30px;
		padding: 0px;
		margin: 15px 0 0 0;
}

.clearspace {
		clear: both; 
		height: 0px; 
		padding: 0px; 
		margin: 0px; 
		width: 0px;
}

.mg10 {
		margin-bottom: 10px;
}

.pad10{
		padding: 10px 25px;
}

a:link {color: #408ae4; text-decoration: none;}
a:visited {color: #408ae4; text-decoration: none;}
a:hover {color: #408ae4; text-decoration: underline;}
a:active {color: #408ae4; text-decoration: none;}

#container {
		width: 960px; 
		margin: auto; 
}

#header {
		width: 960px; 
		height: 420px; 
		background: url(http://ptcdn.info/motherday57/bg_momday2.png); 
		background-position: center ; 
		background-position: 0px 50px;
		background-repeat: no-repeat;		
		position: relative;
}

#header h1 {
		text-indent: -9999px;
		width: 485px;
		height: 265px;
		background-image: url(http://ptcdn.info/motherday57/logo_momday_2014.png);
		background-repeat: no-repeat;
		position: absolute;
		top: 20px;
		left: 20px;
		margin: 0px;
		padding: 0px;
}

#header h2 {
		text-indent: -9999px;
		width: 195px;
		height: 61px;
		background-image: url(http://ptcdn.info/motherday57/lbl_momday_2013.png);
		background-repeat: no-repeat;
		position: absolute;
		top: 20px;
		right: 0px;
		margin: 0px;
		padding: 0px;
}

#letshare {
		position: absolute;
		top: 280px;
		left: -7px;
}

#letshare a img {
		padding-left: 7px;
		border: 0px;
}

#maincontent {
		width: 960px; 
		min-height: 400px;
}

#maincontent650 {
		width: 650px; 
		min-height: 400px;
		float: left;
}

#sidecontent300{
		width: 300px; 
		min-height: 400px;
		margin-left: 10px;
		float: right;
}

#footer {
		width: 960px;
		height: 70px;
		text-align: center;
		padding-top: 30px;
		margin-top: 20px;
		background: url(http://ptcdn.info/motherday57/bg_footer.png);
		background-position: center top;
		background-repeat: no-repeat;
}

#footer img {
		padding: 0 10px;
		border: 0px;
}

#mainmenu {
		width: 960px;
		height: 80px;
		padding: 0 20px;
		text-align: left;
		position: absolute;
		left: -20px;
		bottom: 0px;
		background: url(http://ptcdn.info/motherday57/bg_menu.png);
}

#cardbattle {
		width: 960px;
		height: 630px;
		background-image: url(http://ptcdn.info/motherday57/bg_cardbattle.png);
		background-repeat: no-repeat;
		position: relative;
}

#cardbattle h1 {
		display: block;
		width: 100%;
		line-height: 36px;
		font-size: 18px;
		color: #000;
		position: absolute;
		top: 80px;
		text-align: center;
		font-weight: bold;
}

#cardbattle .card {
		width: 350px;
		position: absolute;
		top: 140px;
		display: block;
		text-align: center;	
		background-color: #FCFCF3;
		border: #ece9d8 solid 1px;
}

#cardbattle a:hover .card {
		border: #fc7c07 dashed 1px;
}

#cardbattle .carddisplay {
		width: 295px;
		height: 295px;
		line-height: 295px;
		display: table-cell;
		vertical-align: middle;
		text-align: center;
		padding: 26px;
		clear: both;
}

#cardbattle .card span {
		text-align: center;
		width: 350px;
		line-height: 26px;
		color: #000000;
		margin-top: -26px;
		font-size: 18px;
		font-weight: bold;
		overflow: hidden;
		padding-bottom: 5px;
		display: block;  /* none ไม่แสดงคะแนน, block แสดงคะแนน */		
}

#cardbattle .left {
		left: 50px;
}

#cardbattle .right {
		left: 560px;
}

#cardbattle .sponsor {
		width: 100%;
		height: 115px;
		text-align: center;
		position: absolute;
		top: 500px;
		line-height: 36px;
		font-size: 14px;
		color: #000;
		font-weight: bold;
}

#cardbattle .sponsor img{
		padding: 0 10px;
		border: 0px;
}

#sponsor {
		width: 100%;
		height: 115px;
		text-align: center;
		line-height: 36px;
		font-size: 14px;
		color: #000;
		font-weight: bold;
}

#sponsor img {
		padding: 0 10px;
		border: 0px;
}

#listcard ul {
		padding: 15px 0px;
		margin: 0px;
		list-style: none;
}

#listcard li {		
		width: 170px;
		height: 230px;
		text-align: center;
		float: left;		
		display: block;
		margin: 0px 35px;
		cursor: crosshair;
}

#listcard div {
		width: 168px;
		height: 168px;
		line-height: 168px;
		display: table-cell;
		vertical-align: middle;
		text-align: center;
		clear: both;
		background-color: #FFFFFF;
		border: #ece9d8 solid 1px;
}

#listcard a:hover div {
		border: #CCCCCC solid 1px;
}

#listcard img {
		border: 0px;
}

#listcard b {
		display: block;
		width: 100%;
		padding-top: 4px;
		font-size: 12px;
		font-weight: normal;
		line-height: 16px;
		overflow: hidden;
		color: #000000;
		text-align: center;
}

#listcard i {
		display: block;
		width: 100%;
		font-size: 11px;
		font-style: normal;
		line-height: 16px;
		overflow: hidden;
		text-align: center;
}

.tri {
		list-style: none;
		padding: 0px;
		margin: 5px 0 12px 20px;
}

.tri li {
		display: block;
		width: 100%;
		clear: both;
}

.tri li b {
		display: block;
		float: left;
		font-weight: bold;
}

.tri li i, u {
		display: block;
		width: 90px;
		font-style: normal;
		font-weight: normal;
		text-decoration: none;
		float: left;
		text-align: right;
}

.tri li span {
		display: block;
		width: auto;
		float: left;
		text-align: left;
		padding-left: 5px;
}

.txtred {
		color: #CC3300;
}

#bestcard ul {
		padding: 15px 0px;
		margin: 0px;
		list-style: none;
}

#bestcard li {		
		width: 170px;
		height: 230px;
		text-align: center;
		float: left;		
		display: block;
		margin: 0px 75px;
		cursor: crosshair;
}

#bestcard div {
		width: 168px;
		height: 168px;
		line-height: 168px;
		display: table-cell;
		vertical-align: middle;
		text-align: center;
		clear: both;
		background-color: #FFFFFF;
		border: #ece9d8 solid 1px;
}

#bestcard a:hover div {
		border: #CCCCCC solid 1px;
}

#bestcard img {
		border: 0px;
}

#bestcard b {
		display: block;
		width: 100%;
		padding-top: 4px;
		font-size: 12px;
		line-height: 16px;
		overflow: hidden;
		color: #000000;
		text-align: center;
}

#bestcard i {
		display: block;
		width: 100%;
		font-size: 11px;
		font-style: normal;
		line-height: 16px;
		overflow: hidden;
		text-align: center;
}

#bestone {
		text-align: center;
		width: 170px;
		margin: auto;
		position: relative;
		padding-top: 57px;
		margin-bottom: 10px;
}

.bestmark {
		position:  absolute;
		top: 0px;
		left: 50%;
		margin-left: -250px;

}

#bestone div {
		width: 168px;
		height: 168px;
		line-height: 168px;
		display: table-cell;
		vertical-align: middle;
		text-align: center;
		clear: both;
		background-color: #FFFFFF;
		border: #ece9d8 solid 1px;
}

#bestone a:hover div {
		border: #CCCCCC solid 1px;
}

#bestone img {
		border: 0px;
}

#bestone b {
		display: block;
		width: 100%;
		padding-top: 4px;
		font-size: 12px;
		line-height: 16px;
		overflow: hidden;
		color: #000000;
		text-align: center;
		margin-top: 55px;
}

#bestone i {
		display: block;
		width: 100%;
		font-size: 11px;
		font-style: normal;
		line-height: 16px;
		overflow: hidden;
		text-align: center;
}

/* battle card */
#cardbattle .highlight-card {
	background-color: #FDEEF2;
} 

.hilight-row {
	background-color: #C1DBFC;
}