body {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	max-width: 80em;
	margin: 0 auto;
	text-align: center;
	background-color: white;
}


a:link { color:#BB6066; text-decoration:none; font-weight:bold; }
a:visited { color:#BB6066; text-decoration:none; font-weight:bold; }
/*a:focus { color:#749540; text-decoration:none; }*/
a:hover { color:black; text-decoration:underline; }
/*a:active { color:white; text-decoration:underline; }*/

img {
	border: none;
}

/* header def */
header {
	padding: 0.5em;
	margin: 0;
	flex: 1 100%;
	background: black;
	color: #FFFFFF;
	display: flex;
	flex-flow: row wrap;
}

header h1 {
	flex: 1 1 0%;
	align-self: center;
	text-align: center;
	font-family: Helvetica, Arial, Geneva, sans-serif;
	color: white;
}

header img#logo {
	flex: 0 0 48px;
	margin-right: 1em;
	margin-bottom: 0.5em;
}

header img#banner {
	display: none;
}

header .sprache {
		display: none;
		align-self: flex-start;
}

/* navigations def */
nav {
	flex: 1 1 100%;
	padding: 0;
	margin: 0;
	border: none;
}

nav ul {
	display: flex;
	flex-flow: row wrap;
	padding: 0;
	margin: 0;
}

nav li {
	list-style-type: none;
	margin: 0.2em;
	padding: 0;
	flex: 1 1 auto;
	text-align: center;
}

nav a {
	display: inline-block;
	box-sizing: border-box;
	width: 100%;
	background: #186cff;
	margin: 0;
	padding: 0.1em 0.5em 0.1em 0.5em;
	text-decoration: none;
	text-align: center;
	vertical-align: middle;
	color: black;
	white-space: pre;
	font-family: Helvetica, Arial, Geneva, sans-serif;
	font-variant: small-caps;
	font-weight: bold;
	font-size: 1em;
	align-self: stretch;
}

nav a:link {
	background: #186cff;
	color: black;
}

nav a:hover, nav a:visited,
nav a:focus {
	color: black;
}

nav a.selected {
	background-color: white;
	color: #186cff;
}

article {
	padding: 0;
	margin: 0em;
	flex: 1 100%;
	background: #186cff10;
}

article.login {
	padding: 0.5em;
	margin: 0.1em auto;
	flex: 1 100%;
	background: white;
}

article.stats {
	padding: 0;
	margin: 0 auto;
	flex: 1 100%;
	background: #186cff10;
	overflow-x:auto;	
}

article.ranking {
	overflow-x:auto;	
}

article.spezialtipp {
	display:flex;
	flex-flow: row wrap;
	justify-content: stretch;
	overflow-x:auto;	
}

/* logintabelle */
table#logintable {
	margin: 0 auto;
	table-layout: fixed;
}

table#logintable td {
	background-color: #DCDCDC;
	text-align: center;
	vertical-align: center;
}

input.loginput {
	width: 150px;
}

/* matches tabellen zeug */
table#matchestabelle {
	padding:0;
	margin: 0px auto;
	width: 100%;
}

tr.tippzeile_untipped {
	padding:0px; 
	text-align:center;
	background-color: #DCDCDC;
}

tr.tippzeile_tipped {
	padding:0px; 
	text-align:center;
	background-color: #186cff;
	color: black;
}

tr.tippzeile_fixed {
	padding:0px; 
	text-align:center;
	background-color: #AAAAAA;
}

tr.tippzeile_special {
	padding:0px; 
	text-align:center;
	background-color: #AAAAAA;
}

tr.tippzeile_hidden {
	background-color: #BB6066;
	padding:0px; 
	text-align:center;
}

table#matchestabelle td.errorcell {
	display: block;
	text-align: center;
	background-color: #BB6066;
}

table#matchestabelle tr.errorline {
	display: block;
	text-align: center;
}

div.small-link {
	font-size: xx-small;
}

div.team {
    font-variant: small-caps;
    font-weight: 600;
    font-size: 0.9em;
    letter-spacing: 0.1em;
}

table#matchestabelle table, table#matchestabelle tr {
	display: block;
	border-collapse: collapse;
	padding: 0;
	margin: 0 auto;
	justify-content: center;
}

table#matchestabelle th, table#matchestabelle tr.kopfzeile {
	display: none;
}

table#matchestabelle tr {
	border-bottom: 2px solid black;
	padding: .5em 2em 1em;
}

table#matchestabelle td::before {
	content: attr(class) ": ";
	font-weight: bold;
}

table#matchestabelle td.Team1::before, table#matchestabelle td.Team2::before, table#matchestabelle td.Zeit::before {
	content: none;
	font-weight: bold;
}

table#matchestabelle td {
	display: inline-block;
	padding: .2em .2em;
	text-align: center;
}

table#matchestabelle th.ueberzeile2 {
	display: block;
	padding: .2em .2em;
	text-align: center;
}

table#matchestabelle tr[class^="tippzeile"] td:nth-child(1), table#matchestabelle tr[class^="tippzeile"] td:nth-child(3), table#matchestabelle tr[class^="tippzeile"] td:nth-child(5) {
	display: none;
}

table#matchestabelle tr[class^="tippzeile"] td:nth-child(2), table#matchestabelle tr[class^="tippzeile"] td:nth-child(4) {
	width: 40%;
}

table#matchestabelle tr[class^="tippzeile"] td:nth-child(6), table#matchestabelle tr[class^="tippzeile"] td:nth-child(7), table#matchestabelle tr[class^="tippzeile"] td:nth-child(8) {
	width: 30%;
}

table#matchestabelle tr[class^="tippzeile"] td:nth-child(9), table#matchestabelle tr[class^="tippzeile"] td:nth-child(10), table#matchestabelle tr[class^="tippzeile"] td:nth-child(11) {
	width: 30%;
}

table#matchestabelle tr.errorline td::before {
	content: none;
	font-weight: normal;
}

.kopfzeile {
    background-color: #646464;
    font-weight:bold;
	color: #DCDCDC;
}

.kopfzeile td, .kopfzeile th {
    padding: 3px;
}

a.arrowup {
	position: relative;
	top: -11px;
	right: 2px;
	float: right;
}

a.arrowdown {
	position: relative;
	bottom: -11px;
	left: 5px;
	float: right;
}

a.krlink {
	position: relative;
	top: 7px;
	right: 25px;
	float: right;
}

/* rulestabelle */
table#rulestabelle {
	padding: 0px;
	table-layout: fixed;
	margin: 0 auto;
}

table#rulestabelle th {
	font-weight: bold;	
	padding:5px;
	text-align:left;
	background-color: #646464; 
	color: #DCDCDC;
}

table#rulestabelle td {
	padding:5px;
	text-align:left;
	background-color: #EDEDED;
}

table#rulestabelle td.nr {
	text-align:center;
}

/*rankingtabelle */
table#rankingtabelle {
	padding: 0px;
	table-layout: fixed;
	margin: 0 auto;
}

.ranking_bot {
	background-color: #646464; 
	color: #DCDCDC;
}

.ranking_self {
	background-color: #BB6066; 
/*	color: #DCDCDC;*/
}	
	
.ranking_1, .ranking_2, .ranking_3, .ranking_spezial, .stats_top {
	background-color: #186cff; 
	color: black;
}

.ranking_normal, .stats_normal {
	background-color: #DCDCDC; 
/*	color: #DCDCDC;*/
}

table#rankingtabelle tr.ranking_self a:link, table#rankingtabelle tr.ranking_self a:visited { 
	color:#186cff}

/*statstabelle*/
table.statstabelle {
	padding: 0px;
	margin: 0 auto;
	table-layout: auto;
}

/*spezialtipptabelle */
table.wmtipptabelle {
	padding: 3px;
	table-layout: fixed;
	margin: 1em auto;
}

table.wmtipptabelle tr {
	margin: 1em;
}

table.wmtipptabelle_single {
	padding: 3px;
	flex: 0 0 auto;
	margin: auto;
}

table.wmtipptabelle_summary {
	padding: 3px;
	flex: 0 0 auto;
	margin: auto;
}

table.wmtipptabelle_single_s {
	padding: 3px;
	flex: 0 0 auto;
	margin: auto;
}

table.wmtipptabelle_summary_s {
	padding: 3px;
	flex: 0 0 auto;
	margin: auto;
}

td.spez_in {
	background-color: #186cff; 
	color: black;
}

td.spez_out {
	background-color: #BB6066;
}

td.spez_std {
	background-color: #EDEDED;
}

article.spezialtipp h3 {
	flex: 0 0 100%;
}

/*einstellungtabelle */
table.settingstabelle {
	padding: 3px;
	table-layout: fixed;
	margin: 2em auto 0;
}

.hellezeile {
    padding:5px;
    text-align:left;
    background-color: #EDEDED;
}

.buttonzelle {
	text-align:center;
	padding:5px;
	margin-top:1em;
}

td.errorcell, table#logintable td.errorcell {
	text-align: center;
	background-color: #BB6066;
}

.subheader {
	font-size: 0.8em; 
	font-style: italic;
}

/* Anpassung an groessere Aufloesungen */
@media all and (min-width: 60em) {
	header {
		padding: 0.5em 0.5em 0 0.5em;
	}
	
		header img#banner {
		display: inline-block;
		flex: 0 0 auto;
		height: fit-content;
		align-self: center;
				margin-right: 1em;
			}
	
		
	nav li {
		margin: 0.2em 1px 0 1px;
		border: none;
	}

	nav a {
		border: none;
		padding: 1em 0.5em 1em 0.5em;
		border-radius: 0.5em 0.5em 0 0;
	}
	
	nav a:hover,
	nav a:focus{
		background-color: white;
		color: #186cff;
	}

	article.main, article.ranking {
		padding: 0.5em;
		margin: 0em auto;
		flex: 1 100%;
		border-color: #df6c20;
		min-height:500px;
	}

	article.login {
		padding: 0.5em;
		margin: 0.1em auto;
		flex: 1 0 100%;
		background: white;
		border-color: #df6c20;
	}

	article.stats {
		padding: 0.5em;
		margin: 0 auto;
		flex: 1 1 40%;
		text-align: center;
	}
	
	/* reset des tabellen zeugs */
	table#matchestabelle {
		display: table;
		border-collapse: separate;
		padding: 0;
		border: 0;
		margin: 10px auto;
		width: 	auto;
		table-layout: fixed;
	} 

	table#matchestabelle tr, table#matchestabelle tr.errorline {
		display: table-row;
		border-collapse: separate;
		border: 0;
		text-align: center;
		width: auto;
	}

	table#matchestabelle tr.kopfzeile {
		background-color: #646464;
		font-weight: bold;
		color: #DCDCDC;
		display: table-row;
		border-collapse: separate;
		border: 0;
		width: auto;
		height: 45px;
	}
	
	table#matchestabelle tr.kopfzeile th {
		display: table-cell;
		width: auto;
	}
	
	table#matchestabelle td, table#matchestabelle td.errorcell {
		display: table-cell;
		min-width: auto;
		text-align: center;
		width: auto;
	}

	table#matchestabelle td::before {
		content: none;
		font-weight: bold;
	}
	
	table#matchestabelle tr[class^="tippzeile"] td:nth-child(1), table#matchestabelle tr[class^="tippzeile"] td:nth-child(3), table#matchestabelle tr[class^="tippzeile"] td:nth-child(5), 
	table#matchestabelle tr[class^="tippzeile"] td:nth-child(2), table#matchestabelle tr[class^="tippzeile"] td:nth-child(4), 
	table#matchestabelle tr[class^="tippzeile"] td:nth-child(6), table#matchestabelle tr[class^="tippzeile"] td:nth-child(7), table#matchestabelle tr[class^="tippzeile"] td:nth-child(8), 
	table#matchestabelle tr[class^="tippzeile"] td:nth-child(9), table#matchestabelle tr[class^="tippzeile"] td:nth-child(10), table#matchestabelle tr[class^="tippzeile"] td:nth-child(11) {
		display: table-cell;
		min-width: auto;
		width: auto;
	}
	
	table#matchestabelle th.ueberzeile2 {
		text-align: center;
		display: table-cell;
		margin: 0 auto;
		width: auto;
	}
	
	table.wmtipptabelle_single {
		margin-top: 1em;
	}

	table.wmtipptabelle_summary {
		margin-top: 1em;
		flex: 0 0 20%;
	}
}