body {background:#eee; padding:0; margin:0; color:#000;}

#outercase {height:100vh; width:100%; font-family: 'Open Sans', sans-serif; }

#sidebar, #ticker, #bl-square, #bar {position:absolute; display:block; box-sizing:border-box; overflow:hidden;
}

#sidebar {top:0; left:0; width:15%; height:75vh; padding:0px; background:#444; color:#fff; overflow:hidden; border-right:4px solid #555;}
#sidebar p {font-size:1.7rem; font-weight:700; text-transform: uppercase; padding:0px 10px}
#sidebar ul {padding:0px; margin:0px; height:762px !important;}
#sidebar ul li {display:inline-block; vertical-align:top; margin:0px; padding:0px;}
#sidebar table {width:100%; font-size:0.9rem; font-weight:700; border-collapse:collapse;}
#sidebar table tr td {text-align: center; padding:7px 0px; margin:0px; width:30px;}
#sidebar table tr:nth-child(odd){background:#555;}
#sidebar table tr th {font-size:1.2rem; padding:24px 0px; color:#fff; text-transform:uppercase; text-align:center;}
#sidebar table tr:nth-of-type(2) td {font-size:0.9rem; background:#222 !important; color:#fff !important;}
#sidebar table tr td:nth-of-type(1) {background:#333; color:#888; font-size:0.9rem; width:30px;}
#sidebar table tr td:nth-of-type(2) {text-align:left; padding-left:5px; width:116px; font-weight:700;}
#sidebar table tr td:nth-of-type(2) div {display:block; width:116px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
#sidebar table tr td:nth-of-type(3) {color:#fff;}
#sidebar table tr td:nth-of-type(4) {color:#fff;}
#sidebar table tr td:nth-of-type(5) {color:#bbb;}
#sidebar table tr td:nth-of-type(6) { padding-right:6px;}

#ticker {background:#bf2406; width:100%; height:54px; bottom:20vh; left:0; color:#fff; font-weight:700; font-size:1.3rem; text-transform:uppercase; text-wrap:none; white-space: nowrap; letter-spacing:1px;}
#ticker div {display:inline-block; margin:3px 100px 0px 0px; font-size:1.5rem;}

#bl-square {background:#000; width:15%; height:20vh; bottom:0; left:0; text-align:center; color:white; padding-top:28px;}
#bl-square strong {font-size:4rem; display:block; font-weight:700; line-height:2rem;}
#bl-square em {font-size:2.3rem; font-style:normal; display:block; font-weight:300; line-height:4rem; text-transform:uppercase; letter-spacing:1px;}

#viewport {width:85%; top:0px; position:absolute; left:15%; height:75vh; background:url("./festivalfun.jpg"); background-size:cover;}

#bar {background:white; width:85%; height:20vh; bottom:0; right:0; font-size:0;}
#bar #bar-ticker {width:100%; display:block; height:218px;}
#bar .match-results {font-size:0px; height:218px; position:relative; display:block;}
#bar div {display:inline-block; font-size:2rem;}
#bar .team {width:13%; height:100%; vertical-align:top; text-align:center;}
#bar .team img, #bar .team svg {width:70%; padding:9% 15% 0;}
#bar .team div {width:20px; height:20px; background:#00ad00; width:20px; height:20px; border-radius:10px; margin:5px 4px 4px; vertical-align:top;}
#bar .team div.L {background:#bf2406;}
#bar .team div.D {background:#999;}
#bar .scores {width:24%; vertical-align:top; font-size:0; margin:0%; padding:0 0%; box-sizing: border-box}
#bar .bigscore {width:50%; height:100%; text-align:center; font-size:8.7rem; line-height:9.1rem; font-weight:700; margin:0px 0%;}
#bar .bigscore strong {font-weight:700;}
#bar .bigscore #versus {font-size:3.2rem; font-weight:800; position:absolute; top:2px; left:48%; width:4%; text-align:center; color:#bf2406;}
#bar .bigscore #status {position:absolute; top:160px; left:42%; width:16%; text-align:center; font-size:1.6rem; background:#eee; border-radius:20px 20px 0px 0px; height:57px; line-height:3.2rem;}
#bar.events:nth-of-type(2) .bigscore {text-align:right;}
#bar .events {width:25%; height:100%; vertical-align:top; padding:0px; box-sizing:border-box; text-align:left;}
#bar .events .teams {background:linear-gradient(#fff, #aaa. #fff); height:60px; text-align:right; width:100%; padding:8px 0px 0px; font-weight:800; font-size:3rem; text-transform:uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
#bar .events:nth-of-type(4) .teams {text-align:left;}
#bar .events .teams div {width:100%; display:inline-block; font-size: 2.4rem; text-align:left; padding:0px 0px; vertical-align:top; box-sizing:border-box; font-weight:800; letter-spacing:-0.5px;}
#bar .events .teams div:nth-of-type(2){text-align:right;}
#bar .events .pitch {text-align:center; width:100%; text-transform:uppercase; font-weight:200; letter-spacing:1px; font-size:0; vertical-align:middle;} 
#bar .events .pitch div {width:100%; text-align:left; font-size:1.2rem; font-weight:700; padding:0px 0px; box-sizing: border-box; padding-top:0px;}
#bar .events:nth-of-type(2) .pitch div {text-align:right;}
#bar .events .score {text-align:center; width:100%; font-size:0; display:block; padding-top:0px; height:95px; margin-bottom:0px;}
#bar .events .score .ascore {width:100%; vertical-align:top; text-align:right; font-size:6.6rem; padding:0px 50px; box-sizing:border-box; line-height:5.2rem; font-weight:700; position:relative;}
#bar .events .score .ascore .goals {width:100%; position:absolute; left:0; top:0; font-size:1.4rem; text-align:left; line-height:1.5rem; padding:0px 0px 0px 0px; letter-spacing:1px;}
#bar .events .score .ascore .goals strong {font-weight:700; color:#bf2406;}
#bar .events .score .ascore .goals em {font-style:normal; font-weight:800; text-transform:uppercase;}
#bar .events:nth-of-type(2) .score .ascore .goals {text-align:right; left:auto; right:0; padding:0px 0px 0px 0px;}
#bar .events .score .ascore .goals div {font-size:1.4rem; width:100%;}
#bar .events:nth-of-type(2) .score .ascore {text-align:left;}