/* ==========================================================================
   Basic
   ========================================================================== */
*, *:before, *:after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; font-family: 'Ropa Sans', sans-serif; font-size: 14px; color: white; background: #222; -webkit-text-size-adjust: none; text-size-adjust: auto; }
body { padding-top: 40px; }

main { width: 100%; min-height: 100%; background-color: #31719E; background-attachment: fixed; background-size: cover; transition: transform .4s cubic-bezier(.9,.03,.69,.22); }
.container { width: 100%; max-width: 1200px; margin: 0 auto; overflow: hidden; }

a { color: #6bf; text-decoration: none; transition: color .2s cubic-bezier(0, 0.8, 0.5, 0.5); }
a:hover { color: white; }
.muted { color: rgba(255,255,255,0.6); }

ul { margin: 5px 0; padding-left: 24px; }

.fadeContent > * { opacity: 0; transition: opacity .1s ease; }
.fadeContent.visible > * { opacity: 1; }

/* ==========================================================================
   Fonts / Headlines
   ========================================================================== */
h1, h2, h3, h4, h5, h6, h7 { font-family: 'Asap', sans-serif; padding: 0 5px; }
h1 { font-size: 1.8em; margin: 20px 0; text-transform: uppercase; }
h2 { margin-top: 30px; }

p { margin: 5px 0; padding: 0 5px; }

/* ==========================================================================
   Icons
   ========================================================================== */
/*** Navigation Menu Button ***/
.icon-menu { margin: 7px; width: 25px; height: 25px; }
.icon-menu div { position: absolute; top: 9px; width: 25px; height: 7px; text-align: center; transform: rotate(90deg); transition: all .2s .2s ease-in; }
.icon-menu .dot:before { content: ''; position: absolute; display: block; width: 7px; height: 7px; background-color: #31719E; border-radius: 4.5px; transition: all .2s .2s ease-in; }
.icon-menu .dot:nth-child(1):before { left: 0; }
.icon-menu .dot:nth-child(2):before { left: 9px; }
.icon-menu .dot:nth-child(3):before { left: 18px; }
.icon-menu .line { width: 7px; left: 9px; background-color: #31719E; border-radius: 4.5px; transform: rotate(45deg); transition: all .2s 0s ease-out; }
.icon-menu .line:last-child { transform: rotate(-45deg); }

.nav-open .icon-menu .dot { transform: rotate(-90deg); transition: all .2s 0s ease-out; }
.nav-open .icon-menu .dot:before { left: 9px; transition: all .2s 0s ease-out; }
.nav-open .icon-menu .line { width: 32px; left: -3.5px; transition: all .2s .2s ease-in; }

/*** Colored Game Points Dot ***/
[class*="gamepoints"] { display: inline-block; width: 8px; height: 8px; margin: 5px; border-radius: 50%; background-color: white; }
.gamepoints0 { background-color: #faa; }
.gamepoints1 { background-color: #fc8; width: 10px; height: 10px; margin: 4px; }
.gamepoints2 { background-color: #efa; width: 15px; height: 15px; margin: 1.5px; }
.gamepoints3 { background-color: #afa; width: 18px; height: 18px; margin: 0; }

/*** Animated Loading Icon ***/
.icon-loading { padding-top: 50px; text-align: center; }
.icon-loading div { display: inline-block; position: relative; bottom: 0; width: 7px; height: 7px; margin: 0 2px; background-color: white; border-radius: 50%; animation: jumping 0.4s infinite alternate; }
.icon-loading div:nth-child(2) { animation-delay: 0.1s; }
.icon-loading div:nth-child(3) { animation-delay: 0.2s; }
@keyframes jumping {
	0% { bottom: 0; }
	100% { bottom: 12px; }
}

/* ==========================================================================
   Header
   ========================================================================== */
header {
	position: fixed; width: 100%; top: 0; z-index: 400;
	text-align: center; text-transform: uppercase; font: bold 20px/39px 'Asap';
	color: #31719E; background-color: white; border-bottom: 1px solid #31719E;
}
header.scrolled { box-shadow: 0 0 5px rgba(0,0,0,0.6); }

header .icon-menu { position: absolute; right: 0; top: 0; }

/* ==========================================================================
   Navigation
   ========================================================================== */
nav { position: fixed; z-index: 300; bottom: 100%; height: 100%; width: 100%; padding-top: 40px; color: #31719E; background-color: rgba(255,255,255,0.85); transition: bottom .5s cubic-bezier(0.7, -0.2, 0.3, 1.2); }
nav.open { bottom: 0; }
nav ul { margin: 0; padding: 0; text-align: center; }
nav li { list-style: none; padding: 0 20px; font-size: 1.2em; line-height: 40px; }
nav li a { display: block; border-bottom: 1px solid #31719E; color: inherit; }
nav li a:hover { color: inherit; }
nav li:hover { background-color: white; }

nav.open + main { transform: scale(0.95); transition: transform .4s cubic-bezier(.17,.84,.44,1); }

/* ==========================================================================
   Layout
   ========================================================================== */
.colcontainer { width: 100%; overflow: hidden; }
.col { width: calc(50% - 60px); float: left; }
.col.scale { width: 120px; text-align: center; }
.col:first-child { text-align: right; }

/* ==========================================================================
   Table
   ========================================================================== */
table { width: 100%; margin: 10px 0 30px 0; border-collapse: collapse; }

thead { text-transform: uppercase; line-height: 1.5em; }
thead th:first-child { text-align: left; }

tbody tr:hover { background-color: rgba(255,255,255,0.2); }
tbody td:nth-child(n+2) { text-align: center; }
.standings tbody td:first-child { color: #afa; white-space: nowrap; }
.standings tbody tr:nth-child(n+9) td:first-child { color: #faa; }
.standings tbody tr:nth-child(9) td { border-top: 2px solid rgba(255,255,255,.1); }

th { padding: 0 5px 5px 5px; }
td { padding: 5px; }

.highlight { font-weight: bold; background-color: rgba(255,255,255,.1); }
.split-left { border-left: 2px solid rgba(255,255,255,.1); }
.split-right { border-right: 2px solid rgba(255,255,255,.1); }
.positive { color: #afa; }
.negative { color: #faa; }

/*** Graph Table ***/
.graphtable thead th:nth-child(n+3) { padding: 0 0 5px 0; text-align: right; }
.graphtable tbody td:nth-child(n+2) { padding: 5px 0; }

/*** Tooltips ***/
.hasTooltip { position: relative; }
.hasTooltip .tooltip {
	position: absolute;
	bottom: 110%; left: 50%;
	width: 100px;
	margin-left: -50px;
	padding: 5px;
	font-weight: normal; font-size: 0.7em; line-height: normal;
	background-color: rgba(0,0,0,0.2);
	opacity: 0;
	visibility: hidden;
	transition: opacity .2s ease-out, visibility 0s .2s;
}
.hasTooltip:hover { cursor: help; }
.hasTooltip:hover .tooltip { opacity: 1; visibility: visible; transition: opacity .2s ease-in, visibility 0s 0s; }
.tooltip:after { content: ''; display: block; position: absolute; top: 100%; left: 50%; margin-left: -5px; width: 0; height: 0; border: 5px solid transparent; border-top-color: rgba(0,0,0,0.2); }