@charset "UTF-8";

* { box-sizing: border-box; }
body { margin: 0px; font-family: Tahoma; font-size: 14px; background-color: #ddd; }

div.pageheader { position: fixed; top: 0px; left: 0px; width: 100%; background-color: #339; height: 76px; overflow: hidden; }
div.pageheader div.title { padding: 10px 10px 10px 10px; font-size: 24px; 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; }
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: 100px; height: 40px; text-decoration: none;
									text-align: center; padding-top: 8px; font-size: 16px; color: #111; text-shadow: #ddd 1px 1px;
									background-image: linear-gradient(#fff, #ddd, #aaa, #ddd); cursor: pointer; }

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

div.pagefooter div.buttonpanel a.footerbackbutton-disabled { position: absolute; display: inline-block; width: 40px; height: 40px;
													background-color: #888; 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: #ddd; background-image: url("../img/refresh-button.png");
													border-radius: 50% 50%; border: 1px solid #eee; cursor: pointer; }

div.pagecontent { padding: 80px 5px 70px 5px; }
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; }

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.schedulecontainer { background: #fff; width: 100%; padding: 20px 30px 40px 10px; overflow: scroll; }
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; }

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; }



@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; }
}