/* screen.css */
html {margin:0;padding:0;border:0}
body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption, tbody, tfoot, thead, tr, th, td, article, aside, dialog, figure, footer, header, hgroup, nav, section, th.left,td.left,th.right,td.right {margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}
iframe {margin-left:auto;margin-right:auto}
table {font-size:100%;width:100%}
article, aside, details, figcaption, figure, dialog, footer, header, hgroup, menu, nav, section {display:block;}
body {line-height:1.5;background:white;}
caption, th, td, th.left, td.left, th.right, td.right {text-align:left;font-weight:normal;float:none !important;}
th, td, th.left, th.right, td.left, td.right {vertical-align:middle;}
th, td {border:none}
a img {border:none;}
A:link, A:visited, A:active, A:hover {text-decoration: none}
:focus {outline:0;}
.hidden {display:none;}
.wrapper {margin:20px;}
.wrapper2 {position:relative;overflow-x:auto}
body::-webkit-scrollbar{
    display: none;
}
.narrow {margin:20px 25%;}
.wide {margin:20px 15%;}
/* more screen.css */
.day1 {color: #994F00;}
.day2 {color: #0C7BDC;}

body {font-size:90%;color:#000;background:#FFFFFF;font-family:"Helvetica Neue", Arial, Helvetica, sans-serif;}

.mobile body {font-size:105%;}
div.center{text-align:center;}
h1, h2, h3, h4, h5, h6, div.title {font-weight:normal;color:#1c2156;}
h1 {font-size:3em;line-height:1;margin-bottom:0.3em;}
h2 {font-size:2em;margin-bottom:0.2em;text-align:center}
h5 {font-size:2em;text-align:center;font-weight:normal;color:#484848;margin:0;padding:0;text-align:center;}
h3, div.title {font-size:1.5em;line-height:1;margin-bottom:1em;margin-top:.5em;text-align:center}
div.entries {color:#484848;font-size:1.0em;line-height:1;margin-bottom:0.5em;margin-top:1em;text-align:center}
h4 {font-size:1.2em;line-height:1.25;margin-bottom:0.75em;margin-top:-1em;text-align:center;color:#484848}
h4 a:link, h4 a:visited, h4 A:active {text-decoration:none;color:#1c2156}
h4 a:hover {text-decoration:none;color:#8be}
h6 {font-size:0.8em;font-weight:bold;}
h1 img, h2 img, h3 img, h4 img, h5 img, h6 img {margin:0;}

span.bigrank {font-size:90%;color:#484848;font-weight:bold}
span.big {font-size:120%;color:#484848 !important;font-weight:normal !important}
a.big { font-size:120% }

p {margin:0 0 0.75em;}
.left {float:left !important;}
p .left {margin:1.5em 1.5em 1.5em 0;padding:0;}
.right {float:right !important;}
p .right {margin:1.5em 0 1.5em 1.5em;padding:0;}

a:focus, a:hover {color:#8be;}
a {color:#000;text-decoration:underline;}

div.footbar, div.navbar {text-align:center;color:#FFF;margin-bottom:0.5em;background:#1c2156;margin-right:auto;margin-left:auto;white-space:nowrap}
div.footbar {font-size:90%;margin-top:1em;}
div.navbar A:link, div.navbar A:visited, div.navbar A:active, div.footbar A:link, div.footbar A:visited, div.footbar A:active {text-decoration: none;color:#adb0aa;}
div.navbar A:hover, div.footbar A:hover {text-decoration:none;color:#aac9e8}
div.current, div.foot {text-align:center;color:#484848;margin:0.5em}

/* blog */
div.blog {width:600px;max-width:90%;margin-left:auto;margin-right:auto;text-align:left}
div.blog A:link, div.blog A:visited, div.blog A:active {text-decoration: none;color:#1c2156}
div.blog A:hover {text-decoration:none;color:#35d}

[class^="autocomplete"] { border: 1px solid black; }

/* standings table */
table { 
    border-collapse: separate;
    border-left: 0;
    border-radius: 10px;
    border-spacing: 0px;
    background:#f5f8fa;
    color:#000;
}
thead {
    display: table-header-group;
    vertical-align: middle;
    border-color: inherit;
    border-collapse: separate;
    background: #aac9e8;
}
tr {
    display: table-row;
    vertical-align: inherit;
    border-color: inherit;
}
th { font-weight: bold; }
th, td {
    padding: 5px 4px 6px 4px; 
    text-align: left;
    vertical-align: top;
    border-left: 1px solid #ddd;    
}
td {
    border-top: 1px solid #ddd;
    vertical-align: middle;
}
th:first-of-type {
  border-top-left-radius: 10px;
}
th:last-of-type {
  border-top-right-radius: 10px;
}
tr:last-of-type td:not(.admin):first-of-type, [rowspan="3"]{
  border-bottom-left-radius: 10px;
}
tr:last-of-type td:last-of-type {
  border-bottom-right-radius: 10px;
}

table.standings tr:nth-child(even), table.standings tr.even {background:#ccd6dd;}
/* admin table */
.admin th, .admin td {padding:4x 10px 4x 5px;white-space:nowrap;font-size:110%;text-align:center}
tr.divider  {border-bottom: thin dashed;}
tr.even{background:#f5f8fa;}
tr.odd {background:#ccd6dd;}
.standings th, .standings td, caption {padding:4px 10px 4px 5px;text-align:center;white-space:nowrap;font-size:110%;}
td.rank{font-size:75%;color:#484848;font-weight:bold;}
td.points{}
td.name{}
td.total{font-weight:bold;}
td A:link, td A:visited, td A:active {text-decoration: none;color:#35d}
td A:hover {text-decoration: none;color:#55ACEE}
tr.self {background:#BB7 !important;}
tr.selfn {background:#EEB !important;}
td.region{color:#484848;font-weight:bold;text-align:center;}
/* login and register */
div.small{width:280px}
div.med{width:666px}
div.login{margin-left:auto;margin-right:auto;margin-top:10px;}
div.login p{text-align:center;}
p.header{width:100%;background:#8be;color:black;font-size:1.5em;}
p.error{color:red;text-align:center;font-size:1.2em;}
td.error{color:red;}
p.center{text-align:center;}
p A:link, p A:visited, p A:active {text-decoration: none;color:#35d}
p A:hover {text-decoration:none;color:#229}

/* bracket */
.bracket th {
    font-size:100%;text-align:center;border:0px;
}
table.bracket {
    min-width:1350px;
    width:100%;
    border-collapse: collapse;
}
table.bracket td { border: 0px; }

.bracket td.b {
    border-bottom: 2px solid SlateGrey;
}
.bracket td.l {
    border-left: 2px solid SlateGrey;
}
.bracket td.r {
    border-right: 2px solid SlateGrey;
}
.bracket td {
    vertical-align: bottom;
    font-size:100%;
    margin: 0;
    padding: 0px;
    max-width: 100px;
}
div.cell {
    max-height:18px;
    max-width: 100px;
    white-space:nowrap;
}
td:hover {
    cursor:default;
}
span.rank {
    float:left;
    font-size:85%;
    color:#484848;
    font-weight:bold;
    width:10px;
    padding:2px 2px 0px 0px;
    text-align:right;
}
span.team {
    font-size:100%;
    padding:0px 3px;
    width:84px;
    text-overflow:ellipsis;
}
span.score {
    background: grey;
    width:10px;
    text-align:center;
}
td.champion, td.tiebreaker, td.input {
    text-align:center;
}
td.tiebreaker {
    font-family:Verdana, Geneva, sans-serif;
    font-size:100%;
}
td.champion span {
    float:none !important;
}
#submit {
    font:10px Verdana;
    border:1px solid gray;
}
input[type="button"] {
    font:10px Verdana;
    border:1px solid gray;
}
input[type="number"] {
   width:100%;
   height:15px;
   border:none;
   text-align: center; 
}
div.outer {
    display:inline-block; position:relative;
}
div.inner {
    position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px; cursor: pointer; display: block;
    width:200%;
}
td.incorrect span.team {color:red;text-decoration:line-through;}
td.correct span.team {color:#090;}
span.bold {font-weight:bold}
span.correct {color:#090;}
span.incorrect {color:red;text-decoration:line-through; }
td.truechamp {background:#071;}

@media screen and (max-width: 1000px) {
	table {
		font-size:125% !important;
		overflow-x: auto;
		/* display: block;
		width: 100% !important; */
	}
    .narrow {
        margin: 20px 10% !important;
    }
}

/* idk idk */
[data-tooltip] {
    display: inline-block;
    position: relative;
    cursor: help;
    padding: 4px;
}
/* Tooltip styling */
[data-tooltip]:before {
    content: attr(data-tooltip);
    display: none;
    position: absolute;
    background: #1c2156;
    color: #fff;
    padding: 4px 8px;
    font-size: 14px;
    line-height: 1.4;
    min-width: 225px;
    text-align: center;
    border-radius: 4px;
}
/* Dynamic horizontal centering */
[data-tooltip-position="top"]:before,
[data-tooltip-position="bottom"]:before {
    left: 50%;
    -ms-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}
/* Dynamic vertical centering */
[data-tooltip-position="right"]:before,
[data-tooltip-position="left"]:before {
    top: 50%;
    -ms-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}
[data-tooltip-position="top"]:before {
    bottom: 100%;
    margin-bottom: 6px;
}
[data-tooltip-position="right"]:before {
    left: 100%;
    margin-left: 6px;
}
[data-tooltip-position="bottom"]:before {
    top: 100%;
    margin-top: 6px;
}
[data-tooltip-position="left"]:before {
    right: 100%;
    margin-right: 6px;
}

/* Tooltip arrow styling/placement */
[data-tooltip]:after {
    content: '';
    display: none;
    position: absolute;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
}
/* Dynamic horizontal centering for the tooltip */
[data-tooltip-position="top"]:after,
[data-tooltip-position="bottom"]:after {
    left: 50%;
    margin-left: -6px;
}
/* Dynamic vertical centering for the tooltip */
[data-tooltip-position="right"]:after,
[data-tooltip-position="left"]:after {
    top: 50%;
    margin-top: -6px;
}
[data-tooltip-position="top"]:after {
    bottom: 100%;
    border-width: 6px 6px 0;
    border-top-color: #000;
}
[data-tooltip-position="right"]:after {
    left: 100%;
    border-width: 6px 6px 6px 0;
    border-right-color: #000;
}
[data-tooltip-position="bottom"]:after {
    top: 100%;
    border-width: 0 6px 6px;
    border-bottom-color: #000;
}
[data-tooltip-position="left"]:after {
    right: 100%;
    border-width: 6px 0 6px 6px;
    border-left-color: #000;
}
/* Show the tooltip when hovering */
[data-tooltip]:hover:before,
[data-tooltip]:hover:after {
    display: block;
    z-index: 50;
}
span.dt { text-decoration: underline #000 dashed; }
table.login th, table.login td {text-align: center !important; border:0px;}