@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; }
div.pagefooter div.buttonpanel { 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.pagecontent { padding: 90px 5px 70px 5px; }


a.choicebutton { display: inline-block; width: 300px; padding: 20px 10px 20px 10px; background-color: #fd6; margin: 20px; box-shadow: #999 2px 2px 2px;
				font-size: 20px; 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.schedulecontainer { width: 100%; }
div.schedulecontainer img { width: 100%; margin-bottom: 10px; }

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; }
div.contentpaper div.pagetopic { font-size: 24px; font-weight: bold; color: #009; margin: 8px 0px 12px 0px; }
div.contentpaper div.title { font-size: 20px; color: #f60; margin: 20px 0px 12px 0px; }
div.contentpaper div.position { display: inline-block; padding: 4px; background: #ddf; border-radius: 8px 8px; width: 160px; margin: 16px 0px 16px 0px; }
div.contentpaper div.person { padding: 0px; }
div.contentpaper span.fullname { display: inline-block; padding: 4px 12px 4px 12px; vertical-align: top; width: 49%; text-align: right; }
div.contentpaper span.teamname { display: inline-block; padding: 4px 12px 4px 12px; vertical-align: top; width: 49%; text-align: left; color: #999; }



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