/* There are default padding and borders set by browsers to different elements
   This will ensure there are no default padding or margins on any element
   I used this, but it caused a lot of changes in different pages, so for now
   I will not use it. But when I start from scratch (.net), I will use it */
/**       { padding: 0; margin: 0; }*/

body	{ font-family: Verdana, Arial, Helvetica; font-size: .67em; color: black; margin: 0; }
table	{ font-size: 1em }
form    { margin: 0; } /*if I do not use this, there is a space between fastlogin form and left sidebar menu*/

/* Form: http://stackoverflow.com/questions/16906252/css-box-sizing-inherit-cross-browsers
   The box-sizing property is not inherited (by default) - in fact, text <input> elements have a computed box-sizing value of content-box
   (not specifying a type attribute will default to text), like most elements
   the exception is buttons and certain replaced elements like <meter>, <textarea>, <progress> etc. all have a computed box-sizing value of border-box
   If the above is accurate, and I want to change the input text and password type elements to border-box:
*/
/*
input[type="text"], input[type="password"] {
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit 
	-moz-box-sizing: border-box;    /* Firefox, other Gecko 
	box-sizing: border-box;         /* Opera/IE 8+ 
}
*/

A				{text-decoration: underline;}
A:link			{color: blue;}
A:visited		{color: maroon;}
A:hover			{text-decoration: none;}
A:active		{color: red;}

TABLE.master    {width: 100%; padding: 0px; border-collapse: collapse; border-spacing: 0px;} /*width: 100%; is used  to fill-in the space to the right with the top and bottom rows*/
                                                                                             /*HTML Table Attribute cellspacing="0" is no longer supported in HTML5*/
                                                                                             /*should be replaced with css = table { border-collapse: collapse; border-spacing: 0; }*/
                                                                                             /*If one wants to have some cellspacing="n" where n is a number in px, then*/
                                                                                             /*should be replaced with css = table { border-collapse: separate; border-spacing: npx; }*/

                                                                                             /*HTML Table Attribute cellpadding="0" is no longer supported in HTML5*/
                                                                                             /*should be replaced with css = table { padding: 0px; }*/
                                                                                             /*the above sets the padding between table border and table cells and also the padding for each cell*/
                                                                                             /*when I took out cellpadding="0" from Table in HTML and replaced with 'padding: 0px;' in CSS*/
                                                                                             /*there was still a padding in each TD.*/
                                                                                             /*This is because each cell has its own padding*/
                                                                                             /*so this needs to be added with css = th, td { padding: 0px; }*/
                                                                                             /*hence, 'padding: 0px;' has to be added to each TD master (top, left, right, bottom)*/

                                                                                             /*HTML Table Attribute align="center" is no longer supported in HTML5*/
                                                                                             /*should be replaced with css = table { margin: 0 auto; } */
TD.mastertop    {padding: 0px;}
TD.masterleft   {width: 187px; vertical-align: top; white-space: nowrap; background-color: #EEEEEE;
                 border-right-style: solid; border-right-width: 1px; border-right-color: #808080; padding: 0px;} /* width is 25% of template1 (750px) */
TD.mastercenter {padding: 1em; width: 562px; vertical-align: top;} /* width is 75% of template1 (750px) */
TD.masterright  {vertical-align: top; padding: 1em 1em 1em 0em;}
TD.masterbottom {padding: 0px;}

TABLE.template	{width: 100%;}
TD.template1	{width: 750px; vertical-align: top;}
TD.template2	{padding: 1em 1em 1em 0em; vertical-align: top;}

TABLE.top       {width: 100%; background-color: #333333; }
TD.top			{color: white; font-weight: bold; padding: .5em; white-space: nowrap;}
TD.toplogin   	{vertical-align: bottom; text-align: right; color: #FFFF00;}
A.top			{text-decoration: none;}
A.top:link		{color: #99CCFF;}
A.top:visited	{color: #99CCFF;} /*white --> had it before*/
A.top:hover		{color: red; text-decoration: none;}
A.top:active	{color: yellow;}

TABLE.left		{width: 100%;}
TD.left1		{width: 25%; vertical-align: top; background-color: #EEEEEE; border-right: 1px solid gray; white-space: nowrap}
TD.left2		{width: 75%; padding: 1em; vertical-align: top;}

TABLE.fastlogin		{width: 100%; background-color: #6699FF; color: white;
					 border-top: 1px solid white; border-bottom: 1px solid gray;} /* width is 25% of template1, as left1*/
TD.fastloginsignin	{white-space: nowrap; vertical-align: middle; padding: 0.5em}
TD.fastloginsignout	{white-space: nowrap; vertical-align: middle; }
INPUT.fastlogintop  {margin: 0.25em 0.25em 0.125em 0.25em;  /*order: top right bottom left*/
                     width: 90px; }  /*  I used to have the 'size' attribute of the <input> HTML element defined as 10 in the HTML page,
                                          but this attribute specifies the visible width, in characters. And it turns out, character
                                          width can vay from browser to browser. So that is why these elements were bigger in Chrome
                                          than in IE, for example. So I replaced it with this CSS style*/
INPUT.fastlogindown {margin: 0.125em 0.25em 0.25em 0.25em;  /*order: top right bottom left*/
                     width: 90px;}
INPUT.frmbutton     {margin: 0.125em 0.25em 0.25em 0em;}
A.fastlogin			{text-decoration: none;}
A.fastlogin:link	{color: white;}
A.fastlogin:visited	{color: white;}
A.fastlogin:hover	{color: yellow; text-decoration: underline;}
A.fastlogin:active	{color: yellow;}


TABLE.menu			{width: 100%; background-color: #EEEEEE; color: black; border-top: 1px solid white; border-bottom: 1px solid gray;}
TABLE.menuleft		{padding: .5em;}
TD.menu				{padding: .5em; white-space: nowrap;}
TD.menutitle		{padding: .5em; white-space: nowrap; font-weight: bold;}
TD.menusubtitle		{text-indent: .5em; padding: .5em; white-space: nowrap;}
TD.menusubtitleinactive	{text-indent: .5em; padding: .5em; white-space: nowrap; color: GrayText;}
A.menu				{text-decoration: none;} /* padding: .2em; --> para poner padding*/
A.menuadmin		    {text-decoration: none; color: red}
A.menuadmin:hover	{color: orange; text-decoration: none;}
A.menu:link			{color: black;}
A.menu:visited		{color: black;}
A.menu:hover		{color: orange; text-decoration: none;}		/*border: .1em solid gray --> para poner bordes*/

TABLE.home {
    width: 100%;
    border: 1px solid gray;
    margin-bottom: .8em;
    padding: 0px;
    border-collapse: collapse;
    border-spacing: 0px;
}
TD.homer1		{font-weight: bold; padding: .5em; background-color: #99CCFF; border-bottom: 1px solid gray;}
TD.homer1b		{font-weight: bold; padding: .5em; background-color: #99CCFF; border-bottom: 1px solid gray; border-right: 1px solid gray;}
TD.homer2		{padding: .5em;}
TD.homer2c		{padding: .5em; text-align: center;}
TD.homer2b		{padding: .5em; border-right: 1px solid gray;}

TABLE.login		{width: 100%; border: 1px solid gray;}
TD.loginr1		{font-weight: bold; color: white; background-color: #6699FF; padding: .25em; border-bottom: 1px solid gray;}
TD.loginr2		{padding: .5em;}

TABLE.profile	{width: 100%; border: 1px solid gray;}
TD.profiler1	{font-weight: bold; padding: .25em; background-color:#C0C0C0; border-bottom: 1px solid gray;}
TD.profiler2	{padding: .5em;}
TD.profiler2B	{border-right: 1px solid gray;}

TABLE.news		{width: 100%; border-collapse: collapse; white-space: nowrap; border: 1px solid gray; margin-bottom: .8em}
.news th, .news td    {border: 1px solid #ddd; padding: 8px;}
.news th         {padding-top: 12px; padding-bottom: 12px;  text-align: left;  background-color: #04AA6D; color: white;}
.news tr:nth-child(even) { background-color: #f2f2f2;}
.news tr:hover { background-color: #ddd;}
TD.newsr1		{font-weight: bold; padding: .5em; background-color: #CCFFCC; border-bottom: 1px solid gray;}
TD.newsr2		{padding: .5em;}

TABLE.comp {
    width: 100%;
    border: 1px solid gray;
    margin-bottom: .8em;
    padding: 0;
    border-collapse: collapse;
    border-spacing: 0;
}
TD.compr1 {
    height: 32px;
    font-weight: bold;
    padding: .25em;
    background-color: hsl(36, 100%, 57%); /*LightSalmon;*//*what I used before*/
    border-bottom: 1px solid gray;
}			
TD.compr1b	    {font-weight: bold; padding: .25em; background-color: coral; border-bottom: 1px solid gray; border-right: 1px solid gray;}
TD.comprlast    {padding: .25em; border-top: 1px solid gray;}
td.compr2 {
    padding: 1em 1em 2em 1em;
}

td.compr3 {
    white-space: nowrap;
    text-align: center;
    padding: 2em 4em 2em 4em;
}
td.compr3left {
    text-align: center;
}
td.compr3right {
    padding: 0em 0em 0em 1em;
}
td.compclast {
    width: 100%;
}

TABLE.opinion {
    width: 100%;
    border: 1px solid gray;
    margin-bottom: .8em;
    padding: 0px;
    border-collapse: collapse;
    border-spacing: 0px;
}
TD.opinionr1 {
    color: white;
    font-size: 1.2em;
    height: 64px;
    font-weight: bold;
    padding: .25em;
    background-color: saddlebrown;
    border-bottom: 1px solid gray;
    white-space: nowrap;
}
TD.opinionr1-light {
    color: black;
    font-size: 1.2em;
    height: 64px;
    font-weight: bold;
    padding: .25em;
    background-color: rgba(139,69,19,0.2);
    border-bottom: 1px solid gray;
    white-space: nowrap;
} /*saddlebrown = rgb(139,69,19)*/
TD.opinionr2    {padding: 1em; white-space: nowrap;}
TD.opinionr3    {padding: 1em; font-size: 1.2em;}
img.opinion {
    height: 64px;
    vertical-align: middle;
    padding-right: 1em;
}
}

TABLE.result	{width: 100%;}
TH.resultr1, TD.resultr1 {
    background-color: gainsboro;
    font-weight: bold;
    padding: .2em;
    border-bottom: 1px solid gray;
}
TD.resultr2 {
    padding: .3em;
    vertical-align: middle; /*does not do what I want it to do - in Matches page*/
}
TD.resultr2guest    {padding: .3em; background-color:aliceblue; color: gray;}
.resultr2guest a    {text-decoration : none; color: gray;}
TD.resultr2-op	{padding: 0em 3em 0em 3em;}
TD.resultr2bg {
    padding: .3em;
    background-color: #E1E1E1;
}
TD.result2c	{padding: .5em; }

TABLE.right {
    border-spacing: 0;
    border-collapse: separate; /*with border-collapse: collapse; border-radius does not work*/
    width: 140px;
    border: 1px solid gray;
    border-radius: 6px;
}
    table.right td {
        padding: 0em;
        /*border: 1px solid gray;*/ /*for troubleshooting*/
        text-align: center; /*this does not center a table inside a td*/
    }
    table.right > tbody > tr > td:nth-of-type(1) {
        /*border-radius: 5px;*/ /*1px less than for the table, if not it does not match the curvature - I think it should be the same*/
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
    }

    TABLE.right > tbody > tr:nth-of-type(1) { /*does not work without the >, and without the tbody*/
        color: white;
        background-color: #008080;
        text-align: center;
    }
    table.right > tbody > tr > td:nth-of-type(1) {
        padding: 0.5em;
    }
TD.rightr1-op { /*probably not being used any more*/
    background-color: #800000;
    padding: .5em;
}
.bottom {
    border-bottom: 1px solid gray;
}

TABLE.resultslatest { /*these 2 and the padding for TD below, replaces cellspacing='0' cellpadding='0' in the HTML TABLE element*/
    border-spacing: 0;
    border-collapse: collapse;
}
    TABLE.resultslatest tbody td {
        padding: 0;
        position: relative;
        z-index: 200;
    }
div.ontop {
    position: absolute;
    top: -18px; /*4px*//*center*/
    right: -50px; /*15px*//*center*/
    z-index: 500;
    background-color: Gainsboro;
    text-align: center;
    padding: 0.5em;
    border-radius: 6px;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s, opacity 0s; /*add 0.5s to opacity for it to appear slowly after 0.5 seconds*/
}
TABLE.resultslatest TBODY:hover div.ontop {
    visibility: visible;
    opacity: 0.75;
}
div.fctmn {
    position: absolute;
    top: -18px; /*4px;*/
    right: -50px; /*-25px;-51px;*/
}
div.playmn {
    position: absolute;
    top: -18px;
    right: -26px;
}
TABLE.resultslatest TBODY:hover {
    background-color: lavender;
    cursor: pointer;
}

TABLE.teams {
    border-collapse: collapse;
    border-spacing: 0; /*default is 2px; this property works only when border-collapse is separate.*/
    width: 100%;
}
    TABLE.teams TD {
        padding: .5em;
        text-align: center;
        width: 25%;
    }

input#filter-matches {
    width: 20em;
    font-size: 1.2em;
    margin-bottom: 0.15em;
}
TABLE.matches {
    border-spacing: 0;
    border-collapse: collapse;
    width: 100%;
}
    TABLE.matches TD {
        padding: .5em;
        white-space: nowrap;
        /*border: 1px solid gray;*/ /*to troubleshoot*/
    }
    TABLE.matches TH { /*By default, table headers are bold and centered.*/
        text-align: center;
        width: 4em;
        background-color: gainsboro;
        font-weight: bold;
        padding: .2em;
        border-bottom: 1px solid gray;
    }
        table.matches th.lastcolumn { /*this manages left/right spacing for all the table, no need to do it in TDs*/
            width: 100%; /*this will wrap TDs (it pushes them to the left - so either all TDs need nowrap, or each TD can have nowrap as needed*/
        }
    TABLE.matches TBODY TR.brand-fcst {
        background-color: hsl(0, 0%, 96%); /*whitesmoke;*/ /*this hsl is same as whitesmoke*/
    }
    TABLE.matches TBODY TR.brand-fcstlive-odd {
        background-color: hsl(55, 100%, 96%);
    }
    TABLE.matches TBODY TR.brand-fcstlive-even {
        background-color: hsl(55, 100%, 98%);
    }
    TABLE.matches TBODY TR.brand-play-odd {
        background-color: hsl(88, 52%, 96%);
    }
    TABLE.matches TBODY TR.brand-play-even {
        background-color: hsl(88, 52%, 98%);
    }
    TABLE.matches TBODY TR.match:hover { /*without tbody, does not work for rows with zebra background*/
        background-color: lavender;
    }
    TABLE.matches TBODY TR.roundgrouping {
        font-size: 1em;
        color: #800000;
        background-color: hsl(204, 70%, 95%);
        text-align: center;
        font-weight: bold;
        border: 1px solid gray;
    }
        TABLE.matches TBODY TR.roundgrouping td {
            margin-top: 10em; /*TRs cannot have margins, it is a td property*/
        }
    TABLE.matches TBODY TR.dategrouping {
        color: #800000;
        font-weight: bold;
        /*border: 1px solid gray;*//*for troubleshooting*/
    }
    TABLE.matches TD.teamA {
        text-align: right;
    }
    TABLE.matches TD.teamB {
        text-align: left;
    }
    TABLE.matches TD.center {
        text-align: center;
    }
    TABLE.matches span.scores {
        font-size: 1.5em;
        font-weight: bold;
        color: blue;
        border: 2px solid #F79646;
        padding: .15em;
    }
    TABLE.matches span.penal {
        font-size: 0.75em;
        font-weight: normal;
        color: black;
    }
    TABLE.matches TBODY span.filterclick:hover {
        cursor: pointer;
    }
    TABLE.matches TD.time {
        padding: 0em 2em 0em 2em;
    }

input.btnForecast {
    padding: 0.25em 0.5em;
    background-color: #f0f0f0; /*hsl(0, 0%, 94%)*/ /*rgb(240, 240, 240)*/ /*default button bg color for Win*/
    color: black; /*#000000;*/ /*hsl(0, 0%, 0%)*/ /*rgb(0, 0, 0)*/ /*default button font color for Win*/
    border: 1px solid gray;
    border-radius: 6px;
}
    input.btnForecast:hover {
        background-color: lightgray;
    }
input.btnPlay {
    padding: 0.25em 0.5em;
    background-color: #007AFF; /*hsl(211, 100%, 50%);*/ /*rgb(0, 122, 255);*/ /*default button bg color for iOS*/
    color: white; /*default button font color for iOS*/
    /*width: 62px;*/ /*instad of using a fixed width to match the Forecast button, I am putting spaces in the value '   play   '*/
    border: 1px solid gray;
    border-radius: 6px;
}
    input.btnPlay:hover {
        background-color: #0867D2;
    }

TABLE.play {
    border-spacing: 0;
    border-collapse: collapse;
    width: 100%;
}
    TABLE.play TD {
        padding: 1em;
        white-space: nowrap;
        /*border: 1px solid gray;*/ /*to troubleshoot*/
    }
        TABLE.play TD.data {
            text-align: center;
        }
    TABLE.play tbody TD.data-right {
        text-align: right;
        white-space: nowrap;
    }
    TABLE.play tbody TD.data-left {
        text-align: left;
        white-space: nowrap;
    }
    table.play tbody td.bold {
        font-weight: bold;
    }
    TABLE.play TH {
        text-align: center;
        background-color: gainsboro;
        font-weight: bold;
        padding: 0.5em 1em; /*top&bottom left&right*/
        border-bottom: 1px solid gray;
        /*border: 1px solid gray;*/ /*to troubleshoot*/
    }
        table.play th.lastcolumn { /*this manages spacing for all the table, no need to do it in TDs*/
            width: 100%; /*this will wrap TDs (it pushes them to the left - so either all TDs need nowrap, or each TD can have nowrap as needed*/
        }
    TABLE.play TBODY TR.play-yes {
        background-color: Beige;
        border-top: 1px solid gray;
        border-left: 1px solid gray;
        border-right: 1px solid gray;
    }
    TABLE.play tbody TR.play-no {
        background-color: MistyRose;
        border-top: 1px solid gray;
        border-left: 1px solid gray;
        border-right: 1px solid gray;
    }
    TABLE.play TR.play-yes:hover {
        background-color: lavender;
    }
    TABLE.play TBODY TR.bet-yes {
        background-color: Beige;
        border-bottom: 1px solid gray;
        border-left: 1px solid gray;
        border-right: 1px solid gray;
    }
    TABLE.play TBODY TR.bet-no {
        background-color: MistyRose;
        border-bottom: 1px solid gray;
        border-left: 1px solid gray;
        border-right: 1px solid gray;
    }

TABLE.forecasts {
    border-spacing: 0;
    border-collapse: collapse;
    width: 100%;
}
    TABLE.forecasts TD {
        padding: .5em;
        white-space: nowrap;
        /*border: 1px solid gray;*/ /*to troubleshoot*/
    }
    TABLE.forecasts TH {
        text-align: center;
        width: 4em;
        background-color: gainsboro;
        font-weight: bold;
        padding: .2em;
        border-bottom: 1px solid gray;
    }
        table.forecasts th.lastcolumn { /*this manages spacing for all the table, no need to do it in TDs*/
            width: 100%; /*this will wrap TDs (it pushes them to the left - so either all TDs need nowrap, or each TD can have nowrap as needed*/
        }
    TABLE.forecasts TH.left {
        text-align: left;
    }
    /*TABLE.forecasts TR.match:nth-of-type(odd) {*/ /*parent is TBODY*/
        /*background-color: whitesmoke;
    }*/
        /*I thought this would work like this: every odd TR.match child of TBODY should be painted, but it does not*/
        /*From what I see, it works like this: every odd TR child of TBODY will be painted if TR has class match*/
        /*TR.match:nth-of-type and TR.match:nth-child behave in the same way for this case*/
        /*Of course, TABLE.forecasts TR:nth-of-type(odd) works: odd TRs child of TBODY are painted*/
        /*but it considers all rows child of TBODY (as it should), including rows with dategrouping class, and I do not want that*/
        /*Another option would be TABLE.forecasts TR:nth-of-type(odd):not(:TR.dategrouping) {* was missing the last :, need to try it again/
        /*but it does not work either, it has the same behavior as TABLE.forecasts TR.match:nth-of-type(odd)*/
    TABLE.forecasts TBODY TR.brand {
        background-color: whitesmoke;
        /*this replaces the previous css instruction, but it needs to define a class=brand in asp*/
    }
    TABLE.forecasts TBODY TR.match:hover {/*without tbody, does not work for rows with zebra background*/
        background-color: lavender;
        cursor: pointer;
    }
    TABLE.forecasts TBODY TR.dategrouping {
        color: #800000;
        font-weight: bold;
        /*border-bottom: 1px solid gray;*/
    }
    TABLE.forecasts TD.teamA {
        text-align: right;
    }
    TABLE.forecasts TD.teamB {
        text-align: left;
    }
    TABLE.forecasts TD.vs {
        text-align: center;
    }
    TABLE.forecasts TD.time {
        padding: 0em 2em 0em 2em;
    }

TABLE.forecasts2 {
    border-spacing: 0;
    border-collapse: collapse;
    width: 100%;
}
    TABLE.forecasts2 TD {
        padding: .5em;
    }
    TABLE.forecasts2 TH {
        text-align: center;
        width: 4em;
        background-color: gainsboro;
        font-weight: bold;
        padding: .2em;
        border-bottom: 1px solid gray;
    }
    TABLE.forecasts2 TH.left {
        text-align: left;
        }
    TABLE.forecasts2 TBODY TR:nth-of-type(even) { /*TR:nth-child(even)*/
        background-color: whitesmoke; /*#E1E1E1*/
    }
    TABLE.forecasts2 TBODY TR.logged { /*does not work without the TBODY, it should I think*/
        background-color: AntiqueWhite;
    }
    TABLE.forecasts2 TBODY TR.guest { /*does not work without the TBODY, it should I think*/
        background-color: aliceblue; /*HoneyDew;*/
        /*the order is important, last wins. So this background color wins over say TR:nth-child(even) above*/
    }
    TABLE.forecasts2 TBODY TR:hover { /*does not work without the TBODY, it should I think*/
        background-color: lavender; /*this hover wins over logged and guest backgrounds above*/
    }
    TABLE.forecasts2 TD.teamA {
        white-space: nowrap;
        text-align: right;
    }
    TABLE.forecasts2 TD.teamB {
        white-space: nowrap;
        text-align: left;
    }
    TABLE.forecasts2 TD.data {
        text-align: center;
    }
    TABLE.forecasts2 TD.win {
        text-align: center;
        color: blue;
        font-weight: bold;
    }
    TABLE.forecasts2 TD.logged {
        background-color: AntiqueWhite;
        border: 2px solid #F79646;
    }

TABLE.forecasts2caption {
    font-size: 0.8em;
}
    TABLE.forecasts2caption TD {
        padding: .5em;
    }
        TABLE.forecasts2caption TD.logged {
            white-space: nowrap;
            background-color: AntiqueWhite;
            border: 2px solid #F79646;
            font-style: italic;
        }
        TABLE.forecasts2caption TD.guest {
            white-space: nowrap;
            background-color: aliceblue;
            border: 1px solid lightgray;
            color: gray;
            font-style: italic;
        }
            TABLE.forecasts2caption TD.guest a {
                text-decoration: none;
            }

div#filter-row {
    white-space: nowrap;
}
label#filter-label {
    font-size: 0.67em;
    font-weight: bold;
    color: red;
    margin-bottom: 0.15em;
}
input#filter-standings {
    width: 19em;
    font-size: 1em;
    margin-bottom: 0.15em;
}
input#player-collection {
    width: 22em;
    font-size: 1em;
    margin-bottom: 0.15em;
}
#arrow {
    cursor: pointer;
    font-size: 1.5em;
    /*color: red;*/
}
TABLE.standings {
    border-spacing: 0;
    border-collapse: collapse;
    width: 100%;
}
    TABLE.standings TD {
        padding: .4em;
    }
    TABLE.standings TH {
        text-align: center;
        width: 4em;
        background-color: gainsboro;
        font-weight: bold;
        padding: .2em;
        border-bottom: 1px solid gray;
    }
    TABLE.standings TH.left {
        text-align: left;
    }
    TABLE.standings TR:nth-child(even of :not([style*="display: none"])) {
        /*no way to select nth-of-type of a class, since nth-of-class doesn’t exist
        so this does not work: TR.chosen:nth-child(even)
        but new in CSS Selectors Level 4 is the ability to optionally pass a selector list into :nth-child() and :nth-last-child().
        :nth-child(An+B [of S]?)
        :nth-last-child(An+B [of S]?)*/
        background-color: whitesmoke;
    }
    TABLE.standings TR.logged {
        background-color: AntiqueWhite;
    }
    TABLE.standings TR.guest {
        background-color: aliceblue; /*HoneyDew;*/
        /*the order is important, last wins. So this background color wins over say TR:nth-child(even) above*/
    }
    TABLE.standings TR:hover {
        background-color: lavender !important;
        /*in theory, this hover wins over TR:nth-child, logged and guest backgrounds because it is last*/
        /*but it does not. It wins with the !important*/
    }
    TABLE.standings TBODY span.filterclick:hover {
        cursor: pointer;
    }
    TABLE.standings TD.numbers {
        text-align: right;
        padding-right: 1.5em;
    }
    TABLE.standings TD.pts {
        text-align: right;
        padding-right: 1.5em;
        color: blue; /*0000FF*/
    }
    TABLE.standings TD.premio {
        text-align: right;
        padding-right: 1em;
    }
    TABLE.standings TD.logged {
        background-color: AntiqueWhite;
        border: 2px solid #F79646;
    }

.standingscaption {
    font-size: 0.8em;
}
    TABLE.standingscaption TD {
        padding: .3em;
    }
        TABLE.standingscaption TD.logged {
            white-space: nowrap;
            background-color: AntiqueWhite;
            border: 2px solid #F79646;
            font-style: italic;
        }
        TABLE.standingscaption TD.guest {
            white-space: nowrap;
            background-color: aliceblue;
            border: 1px solid lightgray;
            color: gray;
            font-style: italic;
        }
            TABLE.standingscaption TD.guest a {
                text-decoration: none;
            }
        TABLE.standingscaption TD.refline {
            white-space: nowrap;
            border: 1px solid lightgray;
        }
            TABLE.standingscaption TD.refline hr.pt1 {
                width: 35px;
                background-color: blue;
                color: blue;
                border-color: blue
                /*it seems all the color lines are needed to ensure browser support:
                    border-color works in Chrome and Safari.
                    background-color works in Firefox and Opera.
                    color works in IE7+.*/
            }
            TABLE.standingscaption TD.refline hr.prize {
                width: 35px;
                background-color: red;
                color: red;
                border-color: red
            }

.benchmark {
    /* 1 point per game */
    border-top: 2px solid blue;
}
.gameoverTop {
    /* User mathematically disqualified */
    border-top: 2px solid red;
}
.gameoverBottom {
    /* User mathematically disqualified */
    border-bottom: 2px solid red;
}

TABLE.comment {
    width: 100%;
    border: 1px solid gray;
}
TABLE.comment2	{border: 1px solid gray;}
TD.commentr1	{color: white; font-weight: bold; padding: .25em; background-color:#6600CC; border-bottom: 1px solid gray;}
TD.commentr2	{padding: .5em;}

TABLE.down	{width: 100%; border: 1px solid gray;}
TD.downr1	{font-weight: bold; padding: .25em; background-color: lightblue; border-bottom: 1px solid gray;}
TD.downr2	{padding: .5em; border-bottom: 1px solid gray;}

TABLE.admin	{width: 100%; border: 1px solid gray;}
TD.adminr1	{color: white; font-weight: bold; padding: .25em; background-color:#FF0000; border-bottom: 1px solid gray;}
TD.adminr2	{padding: .5em;}

SPAN.current    {font-weight: bold; color: #0000FF; font-size: 1.2em;}

INPUT.gameover	{border: 1px solid red;}

/* Fixes Firefox input button padding issue */
button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner {
 padding: 0px 0px 0px 0px !important;
 border: 0 none !important;
}
/* since still after the above, buttons are still larger than IE, then with the below,
   the button gets even smaller. But I cannot leave this one and delete the above, it needs both */
INPUT.frmbutton	{ padding: 0px 0px 0px 0px !important;}

.imgFlag16 {margin:0px 0px -4px 0px;} /*when placing a 16 flag next to text*/
.imgFlag24 {margin: 0px 0px -5px 0px;} /*when placing a 24 flag next to text inside a table (bracketnew.css)*/
.imgFlag32 {margin:0px 0px -12px 0px;} /*when placing a 32 flag as Champion in Event Standings bracket*/