body>section[id="tournament.view"]{
	display:grid;
	grid-gap:10px;
	margin:10px 0 0;
}
body>section[id="tournament.view"]>fieldset{
	border:1px solid #000;
	padding:0;
	margin:0;
}
body>section[id="tournament.view"]>fieldset>legend{
	float:left;
	clear:left;
	width:100%;
	text-align:center;
	box-sizing:border-box;
	background:rgba(255, 255, 255, 0.85);
}

#knockout>li>ol>li>.host,
#knockout>li>ol>li>.guest,
body>section>fieldset>table,
#topscorers>table,
.ranking{
	font-size:0.825rem;
	line-height:25px;
}

#knockout .emoji {
float:left;
clear:left;
margin:0 3px 0 0;
font-size: 1.9em;
}

@media only screen and (max-width:800px){
	td,
	th{
		padding:1px 3px;
	}
}
@media only screen and (min-width:800px){
	td,
	th{
		padding:1px 5px;
	}
}

@media only screen and (max-width:600px){
	.short{
		display:inline;
	}
	.long{
		display:none;
	}
}

@media only screen and (min-width:600px){
	.short{
		display:none;
	}
	.long{
		display:inline;
	}
}

table{
	width:100%;
	float:left;
	clear:left;
	border-collapse:collapse;
	border-top:1px solid #ccc;
}
table>caption{
	border-top:1px solid #ccc;
	background:rgba(255, 255, 255, 0.85);
}
table>thead>tr{
	background:rgba(255, 255, 255, 0.85);
	border-bottom:1px solid #ccc;
}
table>tbody>tr:nth-child(odd){
	background:rgba(240, 240, 240, 0.95);
	border-bottom:1px solid #ccc;
}
table>tbody>tr:nth-child(even){
	background:rgba(225, 225, 225, 0.95);
	border-bottom:1px solid #ccc;
}
table>tbody>tr:last-child{
	border-bottom:none;
}

@media only screen and (min-width:1800px){
	body>section[id="tournament.view"]:not(.groups_2){
		grid-template-columns: repeat(4, 1fr);
	}
		body>section[id="tournament.view"].groups_2{
		grid-template-columns: repeat(2, 1fr);
	}
}

@media only screen and (min-width:900px) and (max-width:1800px){
	body>section[id="tournament.view"]{
		grid-template-columns: repeat(2, 1fr);
	}
}

@media only screen and (max-width:900px){
	body>section[id="tournament.view"]{
		grid-template-columns: repeat(1, 1fr);
	}
}

/* If someone knows a more convenient way of doing this, please contact me */
@media only screen and (min-width:550px) and (max-width:600px){
	.fullname{
		display:none;
	}
	.fifaCountryCode{
		display:inline;
	}
}
@media only screen and (min-width:600px) and (max-width:650px){
	.fullname{
		max-width:100px;
		display:inline;
	}
	.fifaCountryCode{
		display:none;
	}
}
@media only screen and (min-width:650px) and (max-width:700px){
	.fullname{
		max-width:125px;
		display:inline;
	}
	.fifaCountryCode{
		display:none;
	}
}
@media only screen and (min-width:700px) and (max-width:750px){
	.fullname{
		max-width:135px;
		display:inline;
	}
	.fifaCountryCode{
		display:none;
	}
}
@media only screen and (min-width:750px) and (max-width:900px){
	.fullname{
		max-width:175px;
		display:inline;
	}
	.fifaCountryCode{
		display:none;
	}
}
@media only screen and (min-width:900px) and (max-width:1000px){
	.fullname{
		display:none;
	}
	.fifaCountryCode{
		display:inline;
		text-transform:uppercase;
	}
}
@media only screen and (min-width:1000px) and (max-width:1100px){
	.fullname{
		display:none;
	}
	.fifaCountryCode{
		display:inline;
		text-transform:uppercase;
	}
}
@media only screen and (min-width:1100px) and (max-width:1200px){
	.fullname{
		max-width:80px;
		display:inline;
	}
	.fifaCountryCode{
		display:none;
	}
}
@media only screen and (min-width:1200px) and (max-width:1300px){
	.fullname{
		max-width:100px;
		display:inline;
	}
	.fifaCountryCode{
		display:none;
	}
}
@media only screen and (min-width:1300px) and (max-width:1400px){
	.fullname{
		max-width:125px;
		display:inline;
	}
	.fifaCountryCode{
		display:none;
	}
}
@media only screen and (min-width:1400px) and (max-width:1500px){
	.fullname{
		max-width:135px;
		display:inline;
	}
	.fifaCountryCode{
		display:none;
	}
}
@media only screen and (min-width:1500px) and (max-width:1600px){
	.fullname{
		max-width:145px;
		display:inline;
	}
	.fifaCountryCode{
		display:none;
	}
}
@media only screen and (min-width:1600px) and (max-width:1800px){
	.fullname{
		max-width:165px;
		display:inline;
	}
	.fifaCountryCode{
		display:none;
	}
}
@media only screen and (min-width:1800px) and (max-width:2000px){
	.fullname{
		display:none;
	}
	.fifaCountryCode{
		display:inline;
		text-transform:uppercase;
	}

	.groups_2 .fullname{
		max-width:165px;
		display:inline;
	}
	.groups_2 .fifaCountryCode{
		display:none;
	}
}
@media only screen and (min-width:2000px) and (max-width:2050px){
	.fullname{
		display:none;
	}
	.fifaCountryCode{
		display:inline;
	}
	.groups_2 .fullname{
		display:none;
	}
	.groups_2 .fifaCountryCode{
		display:inline;
	}
}
@media only screen and (min-width:2050px) and (max-width:2175px){
	.fullname{
		display:none;
	}
	.fifaCountryCode{
		display:inline;
	}
	.groups_2 .fullname{
		display:none;
	}
	.groups_2 .fifaCountryCode{
		display:inline;
	}
}
@media only screen and (min-width:2175px) and (max-width:2250px){
	.fullname{
		max-width:75px;
		display:inline;
	}
	.fifaCountryCode{
		display:none;
	}
	.groups_2 .fullname{
		max-width:195px;
		display:inline;
	}
	.groups_2 .fifaCountryCode{
		display:none;
	}
}
@media only screen and (min-width:2250px) and (max-width:2350px){
	.fullname{
		max-width:85px;
		display:inline;
	}
	.fifaCountryCode{
		display:none;
	}
	.groups_2 .fullname{
		max-width:205px;
		display:inline;
	}
	.groups_2 .fifaCountryCode{
		display:none;
	}
}
@media only screen and (min-width:2350px) and (max-width:2450px){
	.fullname{
		max-width:100px;
		display:inline;
	}
	.fifaCountryCode{
		display:none;
	}
	.groups_2 .fullname{
		max-width:215px;
		display:inline;
	}
	.groups_2 .fifaCountryCode{
		display:none;
	}
}
@media only screen and (min-width:2450px) and (max-width:2550px){
	.fullname{
		max-width:115px;
		display:inline;
	}
	.fifaCountryCode{
		display:none;
	}
	.groups_2 .fullname{
		max-width:225px;
		display:inline;
	}
	.groups_2 .fifaCountryCode{
		display:none;
	}
}
@media only screen and (min-width:2550px) and (max-width:2650px){
	.fullname{
		max-width:120px;
		display:inline;
	}
	.fifaCountryCode{
		display:none;
	}
	.groups_2 .fullname{
		max-width:235px;
		display:inline;
	}
	.groups_2 .fifaCountryCode{
		display:none;
	}
}
@media only screen and (min-width:2650px) and (max-width:2750px){
	.fullname{
		max-width:140px;
		display:inline;
	}
	.fifaCountryCode{
		display:none;
	}
	.groups_2 .fullname{
		max-width:245px;
		display:inline;
	}
	.groups_2 .fifaCountryCode{
		display:none;
	}
}
@media only screen and (min-width:2750px) and (max-width:2850px){
	.fullname{
		max-width:150px;
		display:inline;
	}
	.fifaCountryCode{
		display:none;
	}
		.groups_2 .fullname{
		max-width:255px;
		display:inline;
	}
	.groups_2 .fifaCountryCode{
		display:none;
	}
}
@media only screen and (min-width:2850px) and (max-width:2950px){
	.fullname{
		max-width:160px;
		display:inline;
	}
	.fifaCountryCode{
		display:none;
	}
	.groups_2 .fullname{
		max-width:265px;
		display:inline;
	}
	.groups_2 .fifaCountryCode{
		display:none;
	}
}
@media only screen and (min-width:2950px) and (max-width:3050px){
	.fullname{
		max-width:170px;
		display:inline;
	}
	.fifaCountryCode{
		display:none;
	}
	.groups_2 .fullname{
		max-width:275px;
		display:inline;
	}
	.groups_2 .fifaCountryCode{
		display:none;
	}
}

@media only screen and (min-width:3050px){
	.fullname{
		display:inline;
	}
	.fifaCountryCode{
		display:none;
	}
	.groups_2 .fullname{
		max-width:285px;
		display:inline;
	}
	.groups_2 .fifaCountryCode{
		display:none;
	}
}

@media only screen and (max-width:550px) {
	.fullname{
		display:none;
	}
	.fifaCountryCode{
		display:inline;
		text-transform:uppercase;
	}
}

#knockout{
	float:left;
	background:rgba(0, 0, 0, 0.5);
	box-sizing:border-box;
	grid-column:1/-1;
	list-style:none;
	padding:10px;
}

@media only screen and (min-width:900px) {
	#knockout>li{
		float:left;
		width:25%;
	}
}
@media only screen and (max-width:900px) {
	#knockout>li{
		float:left;
		width:100%;
	}

}

h2{
	float:left;
	clear:left;
	margin:0;
	color:#fff;
}

@media only screen and (max-width:900px) {
	h2{
		margin:20px 0 0;
		border-bottom:2px solid #fff;
		width:85%;
	}
}

#knockout>li>ol{
	list-style:none;
	float:left;
	clear:left;
	padding:0;
	width:100%;
}

.game{
	width:85%;
	height:60px;
	border:1px solid #ccc;
	box-sizing:border-box;
	position:relative;
	background:#fff;
}

.round_1,
.round_2,
.round_3,
.round_4{
	position:relative;
	width:100%;
}

.round_1>li{
	margin:60px 0 0;
}

@media only screen and (min-width:900px){

	.round_2>li:first-child{
		margin:120px 0 0;
	}
	.round_2>li:nth-child(n+2){
		margin:180px 0 0;
	}
	.round_2:after{
		content:'';
		width:15%;
		height:100%;
		top:0;
		right:0;
		position:absolute;
		background:url(/images/brackets/round_2_white.png) 50% 0 repeat-y;
	}
	.round_3>li:first-child{
		margin:240px 0 0;
	}
	.round_3>li:nth-child(n+2){
		margin:420px 0 0;
	}

	.knockoutRounds_3>li>.round_3>li:first-child{
		margin:120px 0 0;
	}
	.knockoutRounds_3>li>.round_3>li:nth-child(n+2){
		margin:60px 0 0;
	}

	.knockoutRounds_3>li>.round_3>li:first-child:last-child{
		margin:240px 0 0;
	}

	.round_3:after{
		content:'';
		width:15%;
		height:100%;
		top:0;
		right:0;
		position:absolute;
		background:url(/images/brackets/round_3_white.png) 50% 0 repeat-y;
	}
	.knockoutRounds_4>li>.round_4>li:first-child{
		margin:350px 0 0;
	}
	.knockoutRounds_4>li>.round_4>li:nth-child(n+2){
		margin:70px 0 0;
	}

	/* If only one final (no bronze final) */
	.knockoutRounds_4>li>.round_4>li:first-child:last-child{
		margin:480px 0 0;
	}

	ol>li:last-child>ol:after{
		background:none;
	}
}
@media only screen and (max-width:900px){
	.round_2>li,
	.round_3>li,
	.round_4>li{
		margin:60px 0 0;
	}

	.round_2:after,
	.round_3:after,
	.round_4:after{
		content:'';
		width:15%;
		height:100%;
		top:0;
		right:0;
		position:absolute;
		background:url(/images/brackets/round_1_white.png) 50% 0 repeat-y;
	}

	ol>li:last-child>ol:after{
		background:none;
	}
}

.gameinfo{
	width:100%;
	box-sizing:border-box;
	font-size:12px;
	line-height:16px;
	position:absolute;
	top:-34px;
	left:0;
	color:#fff;
}
.gameinfo:hover>.gamenumber,
.gameinfo:hover>.time,
.gameinfo:hover>.location{
	text-decoration:underline;
}
.gamenumber, .time {
	float:left;
}
.gamenumber:after{
		content:' - ';
}
.time {
	margin:0 0 0 4px;
}
.location {
	float:left;
	clear:left;
}
.host{
	border-bottom:1px solid #ccc;
}
.host,
.guest{
	float:left;
	clear:left;
	display:block;
	height:30px;
	line-height:30px;
	box-sizing: border-box;
	width:100%;
}
.name{
	float:left;
	clear:left;
	display:block;
	width:75%;
	padding:2px 0 0 3px;
	box-sizing: border-box;
	height:100%;
	
}
.prediction{
	float:left;
	width:10%;
	height:30px;
	line-height:30px;
	box-sizing: border-box;
}

.round_1:after{
	content:'';
	width:15%;
	height:100%;
	top:0;
	right:0;
	position:absolute;
	background:url(/images/brackets/round_1_white.png) 50% 0 repeat-y;
}

#topscorers>a{
	float:left;
	clear:left;
	color:#fff;
	margin:0 0 2px 0;
}

#topscorers>span{
	float:left;
	color:#fff;
	margin:0 0 0 5px;
}

#tiebreaker>label,
#tiebreaker>input,
#tiebreaker>p{
	float:left;
	clear:left;
	margin:0 0 10px;
}
#tiebreaker>label,
#tiebreaker>p{
	color:#fff;
	width:100%;
}
#tiebreaker>ul{
	float:left;
	clear:left;
	margin:0;
	padding:0;
	width:100%;
	list-style:none;
}
.card_yellow{
	width:32px;
	height:32px;
	float:left;
	background-image:url(/images/icons/card_yellow.svg);
	background-repeat:no-repeat;
}

#ranking{
	float:left;
	background:rgba(0, 0, 0, 0.5);
	box-sizing:border-box;
	grid-column:1/-1;
	list-style:none;
	font-size:0.825rem;
	line-height:25px;
}

#ranking>table{
	margin:10px 0 0;
}

th,
td{
	text-align:left;
}

#ranking>table>tbody>tr.currentUser{
	background:rgba(200, 255, 200, 88);
	border-top:2px solid #999;
	border-bottom:2px solid #999;
}

.flag_cell{
	padding:0;
	font-size:1.9em;
	text-shadow: #000 0 0 3px;
}

#timezone{
	grid-row:1;
	grid-column:1/-1;
	width:100%;
	background:rgba(0, 0, 0, 0.75);
	color:#fff;
	padding:5px;
	box-sizing:border-box;
	text-align:center;
}

.standings>tbody>tr>td:first-child{
	font-size:1.9em;
	text-shadow: 0 0 3px #000;
}