@charset "utf-8";

body                        {color: black; background-color: rgb(229,229,229); margin: 0; padding: 0;
                             font-family: "Trebuchet MS", sans-serif;}

body.NOETTV                 {color: black; background-color: white; padding-left: 12px; padding-right: 8px; padding-top: 12px;
                             padding-bottom: 8px;}

h1                          {font-weight: bold; color: rgb(102,51,153); background-color: white; font-size: 1.44em; margin-top: 0;
                             font-family: inherit;}

h1.CenteredHeading          {color: rgb(36,155,181); background-color: white; font-size: 1.2em; text-align: center;}

h2                          {font-weight: bold; color: rgb(102,51,153); background-color: white; font-size: 1.2em;
                             font-family: inherit;}

main a:not(.ImageLink):link                  {color: rgb(0,0,238); background-color: white; text-decoration: underline;}
main a:not(.ImageLink):not(.NoVisit):visited {color: rgb(85,26,139); background-color: white;}
main a:not(.ImageLink):hover                 {color: red; background-color: white;}

table                       {border: 0; padding: 0; border-collapse: collapse; text-align: left; empty-cells: show;}
table th                    {color: rgb(36,155,181); background-color: white; font-weight: bold; text-align: center;}
img                         {border: 0; padding: 0; vertical-align: bottom; max-width: 100%; height: auto;}
form                        {margin: 0; padding: 0;}
label                       {font-weight: bold;}
dfn                         {font-style: italic; font-weight: normal;}
strong                      {color: rgb(36,155,181); background-color: white; font-weight: bold; font-size: 1.1em;}
input                       {font-family: inherit;}
textarea                    {font-family: inherit;}
button                      {font-family: inherit;}
select                      {font-family: inherit;}
main ul                     {margin-top: 0; margin-bottom: 1em; margin-left: 2.5em; margin-right: 0; padding: 0; clear: left;}
main ol                     {margin-top: 0; margin-bottom: 1em; margin-left: 2.5em; margin-right: 0; padding: 0; clear: left;}
u                           {text-decoration: underline; text-decoration-skip-ink: none;}

hr                          {border-top: 1px dotted rgb(102,51,153); border-bottom: 1px dotted rgb(102,51,153); border-left: 0;
                             border-right: 0;}

.Left                       {text-align: left;}
.Center                     {text-align: center;}
.Right                      {text-align: right;}
.Top                        {vertical-align: top;}
.NoBottomMargin             {margin-bottom: 0;}
.Italic                     {font-style: italic;}

.Chinese                    {font-family: "Microsoft YaHei New", "Microsoft Yahei", "微软雅黑", "宋体", SimSun, STXihei, "华文细黑",
                             sans-serif;}

.Japanese                   {font-family: "Hiragino Kaku Gothic ProN", Meiryo, "Yu Gothic", "MS PGothic", "MS Gothic", sans-serif;}

span.Red                    {color: red; background-color: white;}
span.Blue                   {color: blue; background-color: white;}
ul.ParagraphItems > li      {margin-top: 1em; margin-bottom: 1em;}
img.Banner                  {vertical-align: middle; margin: 3px;}
p.Annotation                {border: solid 1px lightgray; padding: 4px; background-color: rgb(248,248,248); color: black;}

table.Centered              {margin-left: auto; margin-right: auto;}

table.Centered > caption    {margin-left: auto; margin-right: auto; margin-bottom: 1px; color: rgb(36,155,181);
                             background-color: white;}

table.Bordered              {text-align: center;}
table.Bordered th           {border: 1px solid black; padding: 3px;}
table.Bordered td           {border: 1px solid black; padding: 3px;}

table.PointChange th        {color: black; background-color: white; font-weight: normal;}
table.PointChange > caption {font-weight: bold;}

li input.Payment            {margin-top: 5px; margin-bottom: 3px;}
tr.BottomBordered           {border-bottom: 1px dotted rgb(102,51,153);}

div.TopBar                  {color: black; background-color: rgb(229,229,229); border-bottom: rgb(153,153,153) 1px solid;
                             padding-left: 4px; text-align: center;}

div.TopBar a:link           {color: rgb(0,0,238);   background-color: rgb(229,229,229);}
div.TopBar a:visited        {color: rgb(85,26,139); background-color: rgb(229,229,229);}
div.TopBar a:hover          {color: red;            background-color: rgb(229,229,229);}

ul.Header                   {display: flex; flex-flow: row wrap; list-style: none; margin: 0; padding: 0;
                             border-bottom: rgb(153,153,153) 1px solid; color: black; background-color: white;}

ul.Header > li:last-of-type {flex: 1;}
ins.BannerAd                {display: block; width: 468px; height: 60px; margin-left: auto; margin-right: auto;}

ul.MainMenu                 {display: flex; flex-flow: row wrap; list-style: none; margin: 0;  padding: 0;
                             background-color: rgb(229,229,229);}

a.MenuItem                  {text-decoration: none; color: black; background-color: rgb(229,229,229); display: block;
                             padding: 1em;}

a.CurrentPage               {text-decoration: none; color: rgb(102,51,153); background-color: white; font-weight: bold;
                             display: block; padding: 1em;}

a.MenuItem:hover            {color: black; background-color: rgb(36,155,181);}

div.MainContainer           {display: flex; flex-flow: row nowrap;}

div.Sidebar                 {flex: 0 180px; display: block; padding-top: 1em; background-color: rgb(229,229,229);
                             text-align: center;}

ins.SidebarAd               {display: block; width: 120px; height: 600px; margin-left: auto; margin-right: auto;}
div.Sticky                  {position: sticky; top: 0; margin-bottom: 1em;}

div.Sidebar a:link          {color: rgb(0,0,238); background-color: rgb(229,229,229);}
div.Sidebar a:visited       {color: rgb(0,0,238); background-color: rgb(229,229,229);}
div.Sidebar a:hover         {color: red;          background-color: rgb(229,229,229);}

a.MobileOnly                {display: none;}

main                        {flex: 1; display: block; padding-left: 12px; padding-right: 8px; padding-top: 12px;
                             padding-bottom: 8px; border-top: rgb(153,153,153) 1px solid; border-left: rgb(153,153,153) 1px solid;
                             color: black; background-color: white;}

footer                      {color: white; background-color: rgb(102,51,153); padding: 10px;}
footer a:link               {color: white; background-color: rgb(102,51,153);}
footer a:visited            {color: white; background-color: rgb(102,51,153);}
footer a:hover              {color: red;   background-color: rgb(102,51,153);}
footer p                    {margin-top: 0; margin-bottom: 10px;}
footer p:last-of-type       {margin-bottom: 0;}
ul.Copyright                {display: flex; justify-content: space-between; list-style: none; margin: 0; padding: 0}
.osano-cm-widget            {display: none;}

div.TopBar                  {font-size: 0.7em;}
.Smaller                    {font-size: 0.83em;}

ul.VerticalList        {display: flex; flex-flow: column nowrap; list-style: none; margin: 0; padding: 0; align-items: center;}
ul.VerticalList.Margin {margin-top: 1em; margin-bottom: 1em;}
ul.VerticalList.Left   {align-items: flex-start;}

@media (pointer: coarse) {
   ul.VerticalList.Margin {margin-top: calc(1em - 5px); margin-bottom: calc(1em - 5px);}
   ul.VerticalList > li   {padding-top: 5px; padding-bottom: 5px;}
}

@media (max-width: 800px) {
   div.TopBar  {font-size: 1em;}
   ul.MainMenu {justify-content: space-around;}
   .Smaller    {font-size: 1em;}
}

@media (max-width: 600px) {
   ul.Header                      {flex-flow: column nowrap;}
   .BannerAd                      {width: 300px; height: 50px;}
   ul.MainMenu                    {flex-flow: column nowrap;}

   ul.MainMenu a                  {text-align: center; padding: 10px; border-top: 1px solid rgba(255,255,255,0.3);
                                   border-bottom: 1px solid rgba(0,0,0,0.1);}

   ul.MainMenu li:first-of-type a {border-top: 0;}
   ul.MainMenu li:last-of-type a  {border-bottom: 0;}
   div.MainContainer              {flex-flow: column nowrap;}
   div.Sidebar                    {order: 2; flex: 1; border-top: rgb(153,153,153) 1px solid;}
   .SidebarAd                     {width: 300px; height: 200px;}
   a.DesktopOnly                  {display: none;}
   a.MobileOnly                   {display: inline;}
   main                           {order: 1; padding-left: 0; padding-right: 0; border-left: 0;}
   main h1                        {margin-left: 10px; margin-right: 6px;}
   main h2                        {margin-left: 10px; margin-right: 6px;}
   main h3                        {margin-left: 10px; margin-right: 6px;}
   main p                         {margin-left: 10px; margin-right: 6px;}
   main ul                        {margin-right: 6px;}
   main ol                        {margin-right: 6px;}
   footer                         {padding-left: 8px; padding-right: 6px;}
}

ul.Form        {display: grid; justify-content: start; list-style: none; margin: 0; padding: 0; text-align: left;}

ul.Form.Wide   {grid-template-columns: [Row-start] minmax(min-content,max-content) [WideField-start]
                                       repeat(3,minmax(min-content,max-content)) [WideField-end Row-end];}

ul.Form.Narrow {grid-template-columns: [Row-start] repeat(2,minmax(min-content,max-content)) [Row-end];}
ul.Form > li                         {padding: 3px;}
ul.Form > li.Field.Wide              {grid-column: WideField;}
ul.Form > li.Button                  {padding-top: 0.75em; text-align: center; grid-column: Row;}
ul.Form > li.DesktopBottomBordered   {border-bottom: 1px dotted rgb(102,51,153);}
ul.Form > li.BottomBordered          {border-bottom: 1px dotted rgb(102,51,153);}
ul.Form :is(input, select, textarea) {max-width: calc(100vw - 14px);}

@media (max-width: 600px) {
   ul.Form.Wide   {grid-template-columns: [Row-start WideField-start] minmax(min-content,max-content) [WideField-end Row-end];}
   ul.Form.Narrow {grid-template-columns: [Row-start] minmax(min-content,max-content) [Row-end];}
   ul.Form > li.Label                 {padding-bottom: 0;}
   ul.Form > li.Field                 {padding-top: 0;}
   ul.Form > li.Label.Right           {text-align: left;}
   ul.Form > li.DesktopBottomBordered {border-bottom: 0;}
}

ul.Detailed {display: grid;
             grid-template-columns: [Row-start Win-start] repeat(4,minmax(min-content,max-content)) [Win-end Loss-start]
                                                          repeat(4,minmax(min-content,max-content)) [Loss-end Row-end];
             justify-content: center; list-style: none; margin: 0; padding: 0; text-align: center;}

ul.Detailed > li                      {padding: 3px; border-width: 0px 1px 1px 0px; border-style: solid; border-color: black;}

ul.Detailed > li.Header               {color: rgb(36,155,181); background-color: white; font-weight: bold;
                                       display: flex; align-items: center; justify-content: center;}

ul.Detailed > li.Subheader            {display: flex; align-items: center; justify-content: center;}
ul.Detailed > li.WinHalf              {grid-column: Win;}
ul.Detailed > li.LossHalf             {grid-column: Loss;}
ul.Detailed > li.Gap                  {grid-column: Row; border-width: 0;}
ul.Detailed > li.PlayerBorder         {border-top-width: 2px; border-left-width: 2px;}
ul.Detailed > li.RatingBorder         {border-top-width: 2px; border-right-width: 2px;}
ul.Detailed > li.WinBorder            {border-left-width: 2px;}
ul.Detailed > li.LossBorder           {border-right-width: 2px;}
ul.Detailed > li.WinPointChangeBorder {border-left-width: 2px;}
ul.Detailed > li.LossScoreBorder      {border-right-width: 2px;}
ul.Detailed > li.NoBottomBorder       {border-bottom-width: 0;}
ul.Detailed > li.LastRowBorder        {border-bottom-width: 2px;}

@media (max-width: 800px) {
   ul.Detailed {grid-template-columns: [Row-start Win-start Loss-start]
                                       repeat(4,minmax(min-content,max-content)) [Win-end Loss-end Row-end];}

   ul.Detailed > li.NotNeeded                             {display: none;}
   ul.Detailed > li.PlayerBorder                          {border-right-width: 2px; border-bottom-width: 0;}
   ul.Detailed > li.RatingBorder                          {border-top-width: 0; border-left-width: 2px;
                                                           border-bottom-width: 2px;}
   ul.Detailed > li.WinBorder                             {border-right-width: 2px;}
   ul.Detailed > li.LossBorder                            {border-left-width: 2px;}
   ul.Detailed > li.WinScoreBorder                        {border-right-width: 2px;}
   ul.Detailed > li.LossPointChangeBorder                 {border-left-width: 2px;}
   ul.Detailed > li.LastOutcomeBorder                     {border-bottom-width: 2px;}
   ul.Detailed > li.LastRowBorder:not(.LastOutcomeBorder) {border-bottom-width: 1px;}
}

@media (pointer: coarse) {
   ul.Detailed > li.Opponent {padding-bottom: 7px;}
}

@media screen and (max-width: 728px) {
   #ratingscentral_com_top_responsive {min-height: 100px;}
}

@media screen and (max-width: 600px) {
   #ratingscentral_com_sidebar_container_mobile {min-height: 336px;}
}