:root {
  --bgColor:#121314;
  --bannerColor:#8e9292;
  --tickerColor:#AF4545;
  --primaryBG:#494949;
  --secondaryBG:#232425;
  --primaryText:#aaaaaa;
  --secondaryText:#929292;
  --borderColor:#c0c0c0;
  --linkColor:#fff;
  --linkAltColor:#9ae4ef;
  --okColor:#9ae4ef;
  --nokColor:#9aef00;
  --blueish:#389aef;
  
  --contentWidth:80vw;
  --playerWidth:45vw;
  
  --tickerHeight:7vh;
  --boardHeight:50vh;
  --navHeight:5vh;
  --infoHeight:36.5vh;
  --footerHeight:1.5vh;
  
  --bRadius:25px;
  
  --mobileFix:15vh;
  
}

body {
  margin:auto 0;
  overflow:hidden;
  background-color:var(--bgColor);
  font-family:sans-serif;
}

a:link, a:visited, a:active {
  color:var(--linkColor);
  text-decoration:none;
}

a:hover {
  color:var(--tickerColor);
}

.all  {
  margin: auto 0;
  height:100vh;
  overflow:hidden;
  text-align:center;
  display:flex;
  flex-direction:row;
  justify-content:center;
  color:var(--primaryText);
}

.overlay {
  position:absolute;
  top:0;
  left:calc(100vw - 20px);
  height:20px;
  width:20px;
  background-image:radial-gradient(#F00, #F000);
  border-radius:50%;
}

.gutter {
  width:1vw;
}

.content {
  /*width:calc (100vw - var(--footerHeight));*/
  width:98vw;
  background-color:var(--bgColor);
}

.last {
  height:calc(var(--tickerHeight) - 3vh);
  background-color:var(--bgColor);
  color:var(--tickerColor);
  line-height:calc(var(--tickerHeight) - 3vh);
  font-size:calc( var(--tickerHeight) - 5vh);
}

.board {
  height:calc( var(--boardHeight) - var(--mobileFix) );
  width:calc (100vw - var(--footerHeight));
  background-color:var(--primaryBG);
  display:flex;
  flex-direction:row;
  justify-content:center;
  border-radius:var(--bRadius) var(--bRadius) 0 0;
}

.board-display {
  height:calc(var(--boardHeight) + 2vh);
  width:calc (100vw - var(--footerHeight));
  background-color:var(--primaryBG);
  display:flex;
  flex-direction:row;
  justify-content:center;
  border-radius:var(--bRadius) var(--bRadius) 0 0;
}

.image {
  width:50%;
  height:calc( var(--boardHeight) - var(--mobileFix) );
  background-position:top center;
  background-repeat:no-repeat;
  background-size:cover;
  border-radius:var(--bRadius) 0 0 0;
}

.player {
  width:50%;
  height:var(--boardHeight);
  text-align:left;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding-left:2vw;
  background-position:top;
  background-repeat:no-repeat;
  background-size:50%;
  text-align:center;
}

.player-name {
  color:var(--okColor);
  font-size:3.5vh;
  font-weight:bold;
  text-shadow:0px 3px 5px #000;
}

.player-elem {
  color:var(--primaryText);
  font-size:3vh;
}

.nav, .player-nav{
  height:var(--navHeight);
  background-color:var(--secondaryBG);
  font-size:3vh;
  display:flex;
  flex-direction:row;
  justify-content:space-around;
}

.player-nav {
  border-top:1px solid var(--secondaryText);
  width:98vw;
  position:fixed;
}

.nav-elem {
  font-size:2vh;
  line-height:var(--navHeight);
}

.info {
  height:calc((var(--infoHeight) + 3vh) + var(--mobileFix) );
  background-color:var(--primaryBG);
  border-radius:0 0 var(--bRadius) var(--bRadius);
  overflow-y:auto;
}

.overview {
  margin:auto;
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  justify-content:center;
  align-content:stretch;
  height:var(--infoHeight);
  overflow-y:auto;
}

.manager {
  margin:auto;
  padding-left:2vw;
  padding-right:2vw;
  margin-bottom:1vh;
  font-size:2vh;
  border-radius:var(--bRadius);
  font-family:monospace;
  font-weight:bold;
  white-space:pre-wrap;
  background-color:rgba(0,0,0,0);
  border-top:1px solid #000;
  border-left:1px solid #222;
  border-right:1px solid #222;
  border-bottom:1px solid #666;
  box-shadow:0px 3px 5px inset #222;
  text-shadow:0px 3px 5px #222;
}

.footer {
  height:var(--footerHeight);
  background-color:var(--bgColor);
}

.footer-display {
  height:calc(var(--footerHeight) + 1vh);
  background-color:var(--bgColor);
}

b {
  /*font-weight:normal*/;
}

table, th ,td {
  border:1px black solid;
}

table {
  border-collapse:collapse;
}

.roster-table {
  width:100%;
  font-size:2vh;
}

#color10 { color: #AAA; }
#color9  { color: #A99; }
#color8  { color: #A88; }
#color7  { color: #A77; }
#color6  { color: #A66; }
#color5  { color: #A55; }
#color4  { color: #A44; }
#color3  { color: #A33; }
#color2  { color: #A22; }
#color1  { color: #A11; }
#color0  { color: #000; }

#rColor1 { color: #AAA; }
#rColor2 { color: #A88; }
#rColor3 { color: #A55; }


@media only screen and (min-width: 768px) {
  .gutter {
    width:calc( (100 - var(--contentWidth)) / 2 );
  }
  .content {
    width:var(--contentWidth);
  }
  .last {
    height:var(--tickerHeight);
    line-height:var(--tickerHeight);
    font-size:calc( var(--tickerHeight) - 3.5vh);
  }
  .board {
    height:var(--boardHeight);
    width:var(--contentWidth);
  }
  .image {
    width:calc( var(--contentWidth) - var(--playerWidth) );
    height:var(--boardHeight);
  }
  .player {
    width:var(--playerWidth);
    background-position:85% 100%;
    background-size:33%;
    text-align:left;
  }
  .info {
    height:var(--infoHeight);
  }
  .roster-table {
    width:75%;
    font-size:2vh;
  }
  
  .player-nav{
    width:var(--contentWidth);
  }
  
  .player-name { font-size:5vh; }
  .player-elem { font-size:4vh; }
  .nav         { font-size:3vh; }
  .nav-elem    { font-size:2vh; }
  .manager     { font-size:3.5vh; font-weight:normal;}
  b            { font-weight:normal; }
}