@charset "UTF-8";

@font-face {
  font-family: notosans;
  src: url(NotoSansThai-Regular.ttf);
}

* { box-sizing: border-box; }
body { margin: 0px; font-family: notosans; font-size: 14px; background-color: #002; }
body.print { background-color: #fff; }

/*div.pageheader { position: fixed; top: 0px; left: 0px; width: 100%; background-color: #339; height: 76px; overflow: hidden; }*/
div.pageheader { position: fixed; top: 0px; left: 0px; width: 100%; height: 76px; overflow: hidden;
					background-color: #991b1e; background-image:url("../img/header.png"); background-repeat: no-repeat; }

div.pageheader div.title { padding: 10px 10px 10px 10px; font-size: 20px; color: #fff; text-shadow: #003 2px 2px 2px; }
div.pageheader div.subtitle { padding: 0px 10px 10px 10px; font-size: 14px; color: #ccf; }

div.pagefooter { position: fixed; bottom: 0px; left: 0px; width: 100%; background-color: #333; height: 76px;
					background-image: linear-gradient(#fff, #ddd, #aaa, #ddd); border-top: 1px solid #999; }
div.pagefooter div.buttonpanel { position: relative; text-align: center; }

/*div.pagefooter div.buttonpanel a.footerbutton { display: inline-block; width: 120px; height: 60px; text-decoration: none; margin: 0px 4px 0px 4px;
									text-align: center; padding-top: 20px; font-size: 18px; color: #111; text-shadow: #ddd 1px 1px;
									background-image: linear-gradient(#fff, #ddd, #aaa, #ddd); vertical-align: top; }*/

div.pagefooter div.buttonpanel a.footerbutton { position: absolute; display: inline-block; width: 80px; height: 76px; text-decoration: none;
									text-align: center; padding-top: 12px; font-size: 14px; color: #111; text-shadow: #ddd 1px 1px;
									background-image: linear-gradient(#fff, #ddd, #aaa, #ddd); cursor: pointer; border-left: 1px solid #999; }
div.pagefooter div.buttonpanel a.footerbutton:hover { border-top: 4px solid #e93; padding-top: 8px; }

div.pagefooter div.buttonpanel a.footerbackbutton { position: absolute; display: inline-block; width: 40px; height: 40px;
													background-color: #eee; background-image: url("../img/back-button.png");
													border-radius: 50% 50%; border: 1px solid #888; cursor: pointer; }

div.pagefooter div.buttonpanel a.footerbackbutton-disabled { position: absolute; display: inline-block; width: 40px; height: 40px;
													background-color: #999; background-image: url("../img/back-button.png");
													border-radius: 50% 50%; border: 1px solid #888; }

div.pagefooter div.buttonpanel a.footerrefreshbutton { position: absolute; display: inline-block; width: 40px; height: 40px;
													background-color: #eee; background-image: url("../img/refresh-button.png");
													border-radius: 50% 50%; border: 1px solid #888; cursor: pointer; }

/*div.pagecontent { padding: 80px 5px 70px 5px; }*/
div.pagecontent { padding: 76px 0px 65px 0px; }
div.pagecontent.print { padding: 0px; }

div.pagecontent div.pagetopic { width: 100%; font-size: 28px; padding: 10px 0px 15px 0px; margin-bottom: 10px; background: #fff; color: #333; }


/*a.choicebutton { display: inline-block; width: 300px; padding: 10px 10px 10px 10px; background-color: #fd6; margin: 10px; box-shadow: #999 2px 2px 2px;
				font-size: 18px; color: #620; text-decoration: none; border-radius: 10px 10px; text-align: center; }
a.choicebutton:hover { background-color: #fa3; cursor: pointer; }
a.choicebutton.yellow { background-color: #ffa; color: #620; }
a.choicebutton.yellow:hover { background-color: #ee7; cursor: pointer; }
a.choicebutton.red { background-color: #f99; color: #310; }
a.choicebutton.red:hover { background-color: #c66; cursor: pointer; }*/

a.choicebutton { display: inline-block; width: 300px; padding: 10px 10px 10px 10px; background-image: linear-gradient(#333, #444);
				margin: 10px; font-size: 18px; color: #eee; text-decoration: none; text-align: center;
				border-bottom: 1px solid #999; border-left: 4px solid #ea1; border-radius: 2px 2px; text-shadow: #000 1px 1px; }
a.choicebutton:hover { background-image: linear-gradient(#666, #999); cursor: pointer; }

div.navdiv { position: fixed; width: 100%; height: 56px; background-color: #003; top: 76px; left: 0px; padding: 8px; }
div.navdiv div.navcontainer { position: relative; width: 100%; }


div.navdiv div.linktab a { display: inline-block; padding: 4px; text-align: center; text-decoration: none; border-radius: 2px 2px;
							background-color: #999; margin: 0px 4px 0px 4px; }
div.navdiv div.linktab a:hover { background-color: #ddd; }

div.navdiv div.linktab a.selected { background-color: #fff; }

div.navdiv div.linktab a span.main { display: block; font-weight: bold; color: #000; }
div.navdiv div.linktab a span.sub { display: block; color: #000; font-size: 12px; }

div.navdiv div.filter { position: absolute; top: 8px; right: 8px; }
div.navdiv div.filter select { padding: 2px; }

div.matchcontainer { position: relative; width: 100%; background-color: #fff; box-shadow: #888 3px 3px 3px; margin-bottom: 10px; }
div.matchcontainer div.matchtime { position: absolute; top: 6px; right: 4px; font-size: 12px; color: #000; padding: 4px; background-color: #ddd;
									border-radius: 8px 8px; }

table.matchtable { width: 100%; border-collapse: collapse; }
table.matchtable td { border-collapse: collapse; vertical-align: top; }

table.matchtable td.matchnumber { background-color: #fa3; vertical-align: middle; }
table.matchtable td.matchnumber div.number { font-size: 20px; text-align: center; padding: 5px 0px 5px 0px; }
table.matchtable td.matchnumber div.day { font-size: 12px; text-align: center; color: #963; }
table.matchtable td.matchnumber div.time { font-size: 12px; text-align: center; color: #963; }

table.matchtable td.matchdetail { background-color: #bbb; padding: 8px; font-size: 13px; color: #000; text-align: left; }

table.matchtable td.p1name { text-align: right; border-bottom: 1px solid #999; border-right: 1px solid #999; padding: 4px 10px 4px 4px; }
table.matchtable td.p1name div.name { font-size: 13px; padding-bottom: 4px; }
table.matchtable td.p1name div.team { font-size: 11px; color: #999; font-style: italic; }

table.matchtable td.p1score { text-align: center; border-bottom: 1px solid #999; border-right: 1px solid #999; width: 40px; vertical-align: middle;
								background-color: #eee; }

table.matchtable td.p2name { text-align: right; border-right: 1px solid #999; padding: 4px 10px 4px 4px; }
table.matchtable td.p2name div.name { font-size: 13px; padding-bottom: 4px; }
table.matchtable td.p2name div.team { font-size: 11px; color: #999; font-style: italic; }

table.matchtable td span.winnertag { display: inline-block; font-size: 10px; color: #fff; font-weight: bold; vertical-align: middle; text-align: center;
										background-color: #060; border-radius: 50% 50%; width: 16px; height: 16px; padding-top: 2px; }

table.matchtable td.p2score { text-align: center; border-right: 1px solid #999; width: 40px; vertical-align: middle; background-color: #eee; }

table.matchtable td.matchnote { color: #666; font-size: 12px; padding: 5px; }


/*--------------------------------------*/
div.contentpaper { background: #fff; width: 100%; padding: 20px 20px 60px 20px; }
div.contentpaper div.papertopic { font-size: 24px; font-weight: bold; color: #009; margin: 8px 0px 12px 0px; }

div.contentpaper div.resulttopic { text-align: center; padding: 10px; background: #eef; font-size: 18px; margin: 20px 0px 10px 0px; }
div.contentpaper div.resulttablediv { padding: 10px 0px 20px 0px; }

div.contentpaper div.resulttablediv table.resulttable { width: 100%; }
div.contentpaper div.resulttablediv table.resulttable td { padding: 10px; vertical-align: top; line-height: 20px; }
div.contentpaper div.resulttablediv table.resulttable td.resultposition { text-align: center; font-weight: bold; font-size: 12px; padding-bottom: 5px; }
div.contentpaper div.resulttablediv table.resulttable td.resultname { width: 50%; font-size: 12px; text-align: right; }
div.contentpaper div.resulttablediv table.resulttable td.resultteam { width: 50%; font-size: 12px; text-align: left; color: #888; font-style: italic; }


/*--------------------------------------*/

div.scheduletab { background-image: linear-gradient(#fff, #ddd); width: 100%; padding: 4px; height: 40px; text-align: right;
					border-bottom: 1px solid #ccc; border-top: 1px solid #ccc; position: relative; }

div.scheduletabtopic { position: absolute; font-size: 24px; left: 0px; top: 0px; background-image: linear-gradient(#eb3, #a70);
						padding: 2px 8px 2px 8px; height: 40px; color: #fff; text-shadow: 1px 1px #333; }

div.scheduletab a.scheduletablink { display: inline-block; padding: 4px 8px 4px 8px; font-size: 14px; color: #444;text-decoration: none;
									border-radius: 4px 4px; vertical-align: bottom; height: 30px; }
div.scheduletab a.scheduletablink:hover { background: #ccc; color: #222; }
div.scheduletab a.scheduletablink.selected { background: #fff; border: 1px solid #999; color: #333; }

div.schedulecontainer { background: #fff; width: 100%; padding: 20px 10px 40px 10px; overflow: scroll; }
div.schedulecontainer.print { padding: 20px 30px 40px 10px; overflow: auto; }
div.schedulecontainer div.schedule-header { font-size: 24px; padding: 10px 5px 20px 5px; text-align: left; }

table.schedule-ko { white-space: nowrap; }
table.schedule-ko td { padding: 5px; font-size: 12px; }

table.schedule-ko td.namecol { text-align: left; border-bottom: 1px solid #000; }
table.schedule-ko td.namecol span { display: inline-block; vertical-align: bottom; }
table.schedule-ko td.namecol span.playernamegroup { width: 180px; }
table.schedule-ko td.namecol span.ordernumber { line-height: 16px; padding: 0px 10px 0px 0px; color: #888; }
table.schedule-ko td.namecol span.playername { line-height: 16px; padding: 0px 5px 0px 5px; }
table.schedule-ko td.namecol span.playername span.seed { padding: 0px 5px 0px 5px; }
table.schedule-ko td.namecol span.teamname { line-height: 16px; padding: 0px 0px 0px 5px; color: #888; }

table.schedule-ko td.matchcol { padding: 5px; text-align: right; font-weight: bold; }
table.schedule-ko td.datecol { padding: 5px; text-align: center; vertical-align: bottom; }
table.schedule-ko td.timecol { padding: 5px; text-align: center; vertical-align: top; }
table.schedule-ko td.winnercol { padding: 5px; text-align: center; vertical-align: bottom; }
table.schedule-ko td.scorecol { padding: 5px; text-align: center; color: #888; vertical-align: top; font-size: 10px; }
table.schedule-ko td.round-label { padding: 5px; text-align: center; font-weight: bold; }

table.schedule-ko td.border-right { border-right: 1px solid #000; }
table.schedule-ko td.border-bottom { border-bottom: 1px solid #000 }

div.schedule-group-box { width: 400px; border: 1px solid #999; padding: 8px; overflow-x: scroll; overflow-y: hidden; white-space: nowrap; }

div.schedule-group-container { display: inline-block; border: 1px solid #aac; padding: 4px; margin: 0px 8px 0px 0px; font-size: 12px; width: 380px;
								vertical-align: top; }

table.schedule-group-player { border-collapse: collapse; width: 100%; }
table.schedule-group-player td.groupname { padding: 5px; font-size: 18px; background: #ddf; }
table.schedule-group-player td.teamname { padding: 5px; color: #888; }

table.schedule-group-match { border-collapse: collapse; width: 100%; }
table.schedule-group-match td { border-top: 2px solid #fff; padding: 4px 0px 4px 0px;; background: #eee; }
table.schedule-group-match td.result { font-size: 10px; color: #666; text-align: center; }

table.schedule-group { white-space: nowrap; border-collapse: collapse; margin: 10px 0px 10px 0px; }
table.schedule-group td { padding: 5px; font-size: 12px; border: 1px solid #333; }
table.schedule-group td.groupname { font-size: 18px; background: #ddf; }
table.schedule-group td.teamname { font-style: italic; color: #666; }


/*--------------------------------------*/

div.ordercontainer { background: #fff; width: 100%; padding: 20px 10px 40px 10px; text-align: center; }

table.order-table { border-collapse: collapse; font-size: 12px; margin-bottom: 16px; border: 1px solid #ccc; max-width: 700px; }
table.order-table td.order-table-header { border: 0px; background: #eee; text-align: left; }
table.order-table td.order-table-header span.matchnumber { display: inline-block; background: #fd0; padding: 4px; font-weight: bold;
															width: 50px; text-align: center; }
table.order-table td.order-table-header span.time { display: inline-block; background: #ddd; padding: 4px; width: 50px; text-align: center; }
table.order-table td.order-table-header span.type { display: inline-block; padding: 4px; font-style: italic; }
table.order-table td.order-table-header span.playing { display: inline-block; padding: 2px 4px 2px 4px; border-radius: 2px 2px; background: #393;
														font-size: 10px; color: #fff; margin-left: 8px; }
table.order-table td.order-table-header span.playing-icon { display: inline-block; border-radius: 50% 50%;
															  width: 8px;
															  height: 8px;
															  background-color: yellow;
															  animation-name: matchplaying;
															  animation-duration: 1s;
															  animation-iteration-count: infinite;
															}


/*--------------------------------------*/

div.grouping-table-topic { background-image: linear-gradient(#aac, #669); padding: 4px 4px 4px 4px; font-size: 20px;
							color: #fff; text-shadow: 1px 1px #006; width: 100%; max-width: 700px; }

table.grouping-table { border-collapse: collapse; font-size: 12px; border: 1px solid #ccc; width: 100%; max-width: 700px; }
table.grouping-table th { font-size: 10px; text-align: center; border-bottom: 2px solid #ccc; background: #eef; padding: 4px 0px 4px 0px; }
table.grouping-table td { font-size: 12px; text-align: center; border-bottom: 1px solid #ccc; padding: 4px; }

table.grouping-table td.ranknumber { color: #c33; font-weight: bold; }
table.grouping-table td.teamname { color: #666; font-style: italic; }
table.grouping-table td.point { color: #393; font-size: 14px; font-weight: bold; background: #eee; }
table.grouping-table td.gray { color: #666; }



/*--------------------------------------*/

div.rule { border: 1px solid #faa; border-radius: 4px 4px; font-size: 12px; width: 100%; max-width: 700px; margin-bottom: 24px; padding-bottom: 4px; }
div.rule-topic { width: 100%; padding: 4px; background: #fcc; font-weight: bold; color: #600; text-align: center; }
div.rule-list { width: 100%; padding: 4px; color: #333; text-align: left; }
div.rule-list.tab { padding-left: 16px; }





@keyframes matchplaying {
  0%   { background-color:yellow; }
  50%  { background-color:black; }
}

table.order-table td.order-table-player { padding: 4px; color: #666; }
table.order-table td.order-table-player div.order-table-player-team { color: #339; font-weight: bold; }

table.order-table span.order-table-point { display: inline-block; width: 20px; font-size: 11px; }
table.order-table span.order-table-vs { display: inline-block; width: 20px; height: 20px; border-radius: 50% 50%; background: #ffc; margin: 4px; }

div.datepanel { position: fixed; width: 100%; height: 40px; top: 76px; left: 0px; padding: 4px; background: #333; }
div.datepanel a.datelink { display: inline-block; width: 32px; height: 32px; background-color: #ccc; text-decoration: none; padding: 2px;
							border-radius: 2px 2px; }
div.datepanel a.datelink:hover { background-color: #999; }
div.datepanel a.datelink.current { background-color: #fff; }
div.datepanel a.datelink span.daynumber { display: block; width: 100%; text-align: center; color: #333; font-weight: bold; font-size: 12px; height:12px; }
div.datepanel a.datelink span.monthstr { display: block; width: 100%; text-align: center; color: #444; font-size: 12px; }


/*--------------------------------------*/



@media only screen and (min-width: 800px) {

  div.matchcontainer { display: inline-block; width: 700px; background-color: #fff; box-shadow: #888 3px 3px 3px; margin-bottom: 10px; }
}