:root{
	--lad-width: 184px;
	--lads: 4;
}

html, body{
	margin:0;
	padding:0;
}
#masterContainer{
	background-image:url(../../Images/bg-diag-d.png),linear-gradient(135deg,royalblue,deeppink,black);
	background-image:url(../../Images/bg-diag-d.png),linear-gradient(135deg,royalblue,black);
	background-repeat:repeat;
	position:absolute;
}
.maincontent{font-size:0;min-width:1200px;}
.canvas{min-height: 750px;}
.contentContainer{    
	position: relative;
	z-index: 1000;
}

.navbar-brand {
    --logo-img: url(../../media/imgs/balsamic_wall_wht.png);
}

#foot{
	font-size:0;
	margin-top:0px;
	width:100%}
#foot svg {
	fill: navy;
	padding: 0;
	height: 80px;
	display:none;
}
#footer{
	font-family: arial;
	font-size: 11px;
	padding: 30px 20px 20px;
	background-color: navy;
	height: 30px;
	border-top:1px solid skyblue;
	box-shadow:#000 -20px -1px 20px;
}
#footer p{color:#fff;padding:0;margin:0;}

	
	/*****************************************************************************************/
	.fatables {width: 300px;display:inline-block;vertical-align: top;}
	.fatables table {border:0 !important;padding:0 !important;}

	[class^="chart"]{
		padding: 10px 0 10px 10px;
		width: calc(var(--lads)* var(--lad-width) + 22px);
	}
	.chart {border:1px solid rgba(255,255,255,0.3);border-radius:10px;}
	.chart-1 {--lads:1;min-width: calc(var(--lads) * var(--lad-width) + calc(var(--lads)*2px));}
	.chart-2 {--lads:2;min-width: calc(var(--lads) * var(--lad-width) + calc(var(--lads)*2px));}
	.chart-3 {--lads:3;min-width: calc(var(--lads) * var(--lad-width) + calc(var(--lads)*2px));}
	.chart-4 {--lads:4;min-width: calc(var(--lads) * var(--lad-width) + calc(var(--lads)*2px));}

	.ladder, .xladder {
		display: inline-block;
		font-family: arial;
		font-size: 11px;
		padding: 4px;
		vertical-align: top;
		max-width: 180px;
		box-sizing:border-box;
		position:relative;
	}
	.ladder tbody, 
	.xladder tbody, 
	.round tbody  {
		margin:0 auto;
		display:table;
	}

	div[data-tour]{
		margin-bottom:5px;
	}
	.tourDiv{
		display: inline-block;
		width:180px;  /*286px;*/
		padding: 0 5px;
		vertical-align:top;
	}
	.tourDiv td.won,
	.tourDiv td.draw,
	.tourDiv td.lost,
	.tourDiv td.for,
	.tourDiv td.against,
	.tourDiv td.diff
	{display:none;}
	
	[class^="nameBox"]{
	    width: 100%;
		height: 30px;
		background-color: #000;
		color: #fff;
		margin: 0 auto 3px;
		padding: 10px;
		box-sizing: border-box;
		font-size: 13px;
		font-weight: bold;
		text-align: center;
		line-height: 0.9;
		border-radius: 4px;
		display:inline-block;
		font-family:arial,san-serif;
	}
	.nameBox-sm{
		height: 22px;
		font-size: 12px;
		line-height: 0.4;
	}
	.bgTransBlk{background-color: rgba(0,0,0,0.25);}
	.bgTransWht{background-color: rgba(255,255,255,0.2);}
	[data-cal='wint'] .nameBox, .txtY{color: yellow;}
	
	.offs .nameBox{color: grey;}
	.offs table {opacity: 0.8;}
	.offs .tab {opacity: 0.5;}
	
	.ladderSpacer{width:calc(0.4 * var(--lad-width));display:inline-block;height:20px;}
	
	table {display:block;width:100%;border-collapse:collapse;margin-bottom:4px;color:#000;}
	table tr {background-color:#fff;display:inline-block;}
	table tr td {
		border: 1px solid #444;
		border-bottom-width:2px;
		box-sizing: border-box;
		padding: 3px;
		text-align: center;
		min-width:20px;
	}
	table tr td.name {
		text-align: left;
		padding: 0px;
		background-color: #fff;
		height: calc(calc(calc(var(--map-unitsize-y) + var(--tab-offset-y))* var(--ratio)) - 1px);
		min-width: calc(calc(calc(var(--map-unitsize-x) + calc(var(--tab-offset-x)*2))* var(--ratio)) - 2px);
		width: calc(calc(calc(var(--map-unitsize-x) + calc(var(--tab-offset-x)*2))* var(--ratio)));
		position: relative;
	}
	
	
	table tr.resigning.confirmed {background-color:#000;color:#fff;}
	table tr.tabbed.confirmed {font-weight:bold;background-color:#00DD00;}
	
	td.pld,
	td.pts{display:none;}
	table tr td:first-child,
	table tr td.pts {font-weight:bold;}
	table tr.prom 			{background-color:#8ce68c;}
	table tr.possprom 		{background-color:#dcf991;}
	table tr.playoff 		{background-color:#fdfe94;}
	table tr.possplayoff 	{background-color:#fdf6b5;}
	table tr.possrel	 	{background-color:#fbcb9a;}
	table tr.rel 			{background-color:#f797ac;}
	table tr.prom.confirmed		{background-color:#00DD00;}
	table tr.possprom.confirmed 	{background-color:#b1f10a;}
	table tr.playoff.confirmed 		{background-color:#fafd12;}
	table tr.possplayoff.confirmed 	{background-color:#fbea5b;}
	table tr.possrel.confirmed	 	{background-color:#f68b1e;}
	table tr.rel.confirmed 			{background-color:#ed1848;}

	.tier1 table tr.prom 		{background-color:#eea9e2;}
	.tier1 table tr.possprom 	{background-color:#fec3fb;}
	.tier1 table tr.playoff 	{background-color:#a6e2f9;}
	.tier1 table tr.possplayoff	{background-color:#d4fcff;}
	.tier1 table tr.prom.confirmed,
	.key span.prom			{background-color:#cd08ac;}
	.tier1 table tr.possprom.confirmed 		{background-color:#fd54f3;}
	.tier1 table tr.playoff.confirmed,
	.key span.playoff 		{background-color:#00adef;}
	.tier1 table tr.possplayoff.confirmed,
	.key span.possplayoff	{background-color:#04d5e5;}
	
	.tier1 table tr.qf.confirmed,
	.key span.qf	{background-color:#f7c107;}
	.tier1 table tr.sf.confirmed,
	.key span.sf	{background-color:#dbf408;}
	.tier1 table tr.f.confirmed,
	.key span.f	{background-color:#18ff00;}
	.tier1 table tr.winner.confirmed,
	.key span.winner	{background-color:#3ec913;}
	
	table tr.champ td.name, table tr.champ {background-color:#239530 !important;color:#fff;font-weight:bold;}
	.tier1 table tr.champ td.name, .tier1 table tr.champ {background-color:gold !important;color:#000;}
	
	table tr.resigning.confirmed {background-color:#000;color:#fff;}
	table tr.tabbed.confirmed {background-color:#00DD00;}

	.ws {--ratio:0.38;}
	.ws td.pld,
	.ws td.pts{display:table-cell;}
	.ws .tab{line-height:2.3;}
	
	.key {
		background: rgba(255, 255, 255, 0.5);
		border-radius: 8px;
		padding: 8px;
		margin: 0 8px 0 0;
	}
	.key > * {
		display: inline-block;
		vertical-align: top;
	}	
	.key span {
		height: 15px;
		width: 15px;
		border: 1px solid #000;
		margin: 2px 5px 0 8px;
	}
	.key label {
		font-size: 0.75em;
	}



/********************************************************************/
	.bracket,
	.xbracket	{--ratio:0.4;
	width:720px;
	display:inline-block;
	margin:4px;
	font-family:Arial;
	font-size:11px;
	}
	
	.bracket table tr,
	.xbracket table tr {
    background-color: transparent;
	}
	
	.bracket .tab,
	.xbracket .tab{line-height:2.5;font-weight:normal;}
	td.score{background-color:#fff;}
	.round {
		display: inline-block;
		padding: 4px 0;
		vertical-align: top;
		position:relative;
		max-width: calc(316px * var(--ratio));
		margin-left:4px;
	}
	.round.F {
		/*max-width:0px;*/
		--ratio: 0.5;
	}
	#EUROS .round.F {
		left: calc(-250px * var(--ratio));
		max-width:0px;
	}
	.L24 tr td, .L16-16 tr td	{}
	
	.L24 tr td:first-child,
	.L16-16 tr td:first-child	{background-color: #04d5e5;min-width:7px;}
	
	.L24 tr:nth-child(odd) td:first-child{background-color: #00adef;}
	.L16-16 tr:nth-child(odd) td:first-child {background-color: #cd08ac;}
	.L16-16 tr {background-color:transparent;}
	.L16-16 tr:nth-child(even) td:first-child {border:0; border-right: 1px solid #444;background-color:transparent;}
	.round.L16-16 {margin-right:6px;}
	
	.L24 tr:nth-child(odd)  {margin-top: calc(20px * var(--ratio));}
	.L24 tr:first-child {margin-top: 15px;}
	.L16-16 tr:nth-child(odd)  {margin-top: calc(20px * var(--ratio));}
	.L16-16 tr:first-child {margin-top: 0;}
	.QF-16 tr:nth-child(odd) {margin-top:calc(200px * var(--ratio));}
	.QF-16 tr:first-child {margin-top: calc(89px * var(--ratio));}
	.SF-16 tr:nth-child(odd) {margin-top:calc(552px * var(--ratio));}
	.SF-16 tr:first-child  {margin-top:calc(270px * var(--ratio));}
	
	.L32-32 tr:nth-child(odd)  {margin-top: calc(20px * var(--ratio));}
	.L32-32 tr:first-child {margin-top: 0;}
	.L16-32 tr:nth-child(odd) {margin-top:calc(200px * var(--ratio));}
	.L16-32 tr:first-child {margin-top: calc(89px * var(--ratio));}
	.QF-32 tr:nth-child(odd) {margin-top:calc(552px * var(--ratio));}
	.QF-32 tr:first-child  {margin-top:calc(270px * var(--ratio));}
	.SF-32 tr:nth-child(odd) {margin-top:calc(552px * var(--ratio));}
	.SF-32 tr:first-child  {margin-top:calc(630px * var(--ratio));}
	
	
	.F-16 tr:first-child {margin-top:calc(500px * var(--ratio));}		/* 627 if ratio=0.4*/
	.F-32 tr:first-child {margin-top:calc(1360px * var(--ratio));}		/* 627 if ratio=0.4*/
	#EUROS .F-16 tr:first-child {margin-top:calc(404px * var(--ratio));}   
		
	tr.out span,
	tr.ny span,
	.guess span	{opacity:0.25;}
	
	.bracket tr[data-type="empty"] td,
	.xbracket tr[data-type="empty"] td {
		background-color:transparent !important;
		border:1px solid transparent !important;
	}
	.bracket tr[data-type="empty"]  {
		background-color:transparent !important;
		border:0px solid transparent !important;
	}
	
/********************************************************************/	
	.list {
		display: inline-block;
		max-width: 280px;
	}
	td.label {width:128px !important;text-align:right;}
	
	
.goChart {
    display: inline-block;
    height: 30px;
    width: 30px;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    margin: 5px auto 0;
    text-align: center;
    font-size: 1.5em;
    text-decoration: none;
    color: #000;
    line-height: 1.8;
    cursor: pointer;
}
.goChart:hover {
	color:#fff;
	background-color:#000;
}