.completed_matches {
  white-space: nowrap;
  cursor: default;
  color:var(--color_bright);
  position:absolute; 
  left:4%;
  }


H1, td {
  text-transform: uppercase;
  }

H2 {
  color: var(--color_primary);
  }

.nav_bg {
  background-color: var(--color_dark);
  }


div.CONCURRT {
  text-align: left;
  color: var(--color_primary);
  z-index:99;
  }



.zoom:hover {
z-index:99;
-ms-transform: scale(1.81); /* IE 9 */
-webkit-transform: scale(1.81); /* Safari 3-8 */
transform: scale(1.81);
transform-origin:left;
transition: transform 1000ms;

border-style: none;
border-color:  var(--color_primary);

}



div.STATMENU {
  color: var(--color_bright); 
  text-align:left; 
  font-weight:900;
  padding-left: 5px;
  display:block;
  border-color: var(--color_dark);
  border-style: solid;
  border-width: thin;
  border-radius:13px;
  background-color: var(--linear_fallback);
  background-image: var(--linear_bg);
  padding:3px;
  }





@media (orientation:landscape) {


.black_box {
  position:absolute;
  left:5%;

  }


  Body {
    margin: 0px;
    border: 0px; 
    background-color: var(--color_dark);
    background-image: url('img/racgrad8.jpg');
    background-attachment: fixed;
    }


  img.png_wl {
    height: calc(0.9 * 5.0vh);
    width: 80%;
    }


  img.svg_rev {
    height: 0.8vh;
    width: 0.8vh;
    vertical-align:middle;
    margin-top:1px;
    float: left;
    }

  } /* end media query orientation landscape */

@media (orientation:portrait) {

  Body {
    margin: 0px;
    border: 0px; 
    background-color: var(--color_dark);
    background-image: url('img/racgrad8.jpg');
    background-attachment: fixed;

    }


  img.png_wl {
    height: calc(0.9 * 5vh);
    width: 80%;
    }


  } /* end media query orientation portrait */


.cell_action {
  color: var(--color_primary_bright);
  float:left;
  }

a.in_play, a.in_play2, a.on_deck, a.on_deck2 {
  font-weight:300;
  color: var(--color_dark);
  vertical-align: middle;
  text-decoration: none;
  }

a.cell_clr001, a.cell_clr002 {

  white-space: nowrap;
  color: var(--color_bright);
  font-weight:300; 
  vertical-align: middle;
  text-decoration: none;
  }

span.cell_clr001_waiting, span.cell_clr002_waiting {
  color: var(--color_primary_bright);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  }



div.cell_clr001 {
  text-align: center;
  border-color: var(--color_dark);
  border-style: solid solid none none;
  border-radius: 0 7.1px 0 0;
  background-color: var(--color_primary_bright);
  text-overflow:ellipsis;
  white-space: nowrap;
  overflow: hidden;
  }


div.cell_clr002 {
  text-align: center;
  border-color: var(--color_dark);
  border-style: none solid solid none;
  border-radius: 0 0 7.1px 0;
  background-color: #fdfefc;
  text-overflow:ellipsis;
  white-space: nowrap;
  overflow: hidden;
  }





/* CENTER COLUMN - INITIAL MATCHUP */

div.SCAX {
  font-size: var(--medium_font);
  justify-content: center;
  text-align: center;
  border-color: var(--color_primary_bright);
  border-width: thin;
  border-style: solid solid none solid;
  border-radius: 7.1px 7.1px 0 0;
  background-color: var(--linear_fallback); /* For browsers that do not support gradients */
  background-image: var(--linear_bg);
  text-overflow:ellipsis;
  white-space: nowrap;
  overflow: hidden;
  }

div.SCAX1 {
  font-size: var(--small_font);
  justify-content: center;
  text-align: center;
  border-color: var(--color_primary_bright);
  border-width: thin;
  border-style: solid solid none solid;
  border-radius: 7.1px 7.1px 0 0;
  background-color: var(--linear_fallback); /* For browsers that do not support gradients */
  background-image: var(--linear_bg);
  text-overflow:ellipsis;
  white-space: nowrap;
  overflow: hidden;
  }

div.SCBX {
  font-size: var(--medium_font);
  text-align: center;
  border-color:#fefea9;
  border-width: thin;
  border-style: none solid solid solid;
  border-radius: 0 0 7.1px 7.1px;
  background-color: var(--linear_fallback); /* For browsers that do not support gradients */
  background-image: var(--linear_bg);
  text-overflow:ellipsis;
  white-space: nowrap;
  overflow: hidden;
  }

div.SCBX1 {
  font-size: var(--small_font);
  text-align: center;
  border-color: var(--color_primary_bright);
  border-width: thin;
  border-style: none solid solid solid;
  border-radius: 0 0 7.1px 7.1px;
  background-color: var(--linear_fallback); /* For browsers that do not support gradients */
  background-image: var(--linear_bg);
  text-overflow:ellipsis;
  white-space: nowrap;
  overflow: hidden;
  }

/* LOSERS SIDE A THRU H */


div.SCBL {                  /* D SFX:B */
  font-size: var(--medium_font);
  border-color: var(--color_primary);
  border-width: thin;
  border-style: none none solid solid;
  border-radius: 0 0 0 7.1px;
  background-color: var(--linear_fallback);
  background-image: var(--linear_bg);
  text-overflow:ellipsis;
  overflow: hidden;
  }

div.SCAL {                  /* E SFX:A */
  font-size: var(--medium_font);
  border-color: var(--color_primary);
  border-width: thin;
  border-style: solid none none solid;
  border-radius: 7.1px 0 0 0;
  background-color: var(--linear_fallback);
  background-image: var(--linear_bg);
  text-overflow:ellipsis;
  overflow: hidden;
  }



div.SCBL1 {                  /* D SFX:B */
  font-size: var(--small_font);
  text-align: center; 
  border-color: var(--color_primary);
  border-width: thin;
  border-style: none none solid solid;
  border-radius: 0 0 0 7.1px;
  background-color: var(--linear_fallback);
  background-image: var(--linear_bg);
  text-overflow:ellipsis;
  white-space: nowrap;
  overflow: hidden;
  }

div.SCAL1 {                  /* E SFX:A */
  font-size: var(--small_font);
  text-align: center;
  border-color: var(--color_primary);
  border-width: thin;
  border-style: solid none none solid;
  border-radius: 7.1px 0 0 0;
  background-color: var(--linear_fallback);
  background-image: var(--linear_bg);
  text-overflow:ellipsis;
  white-space: nowrap;
  overflow: hidden;
  }



/* WINNERS SIDE 1 THRU 8 */


div.SCAW {
  font-size: var(--medium_font);
  text-align: center;
  border-color: var(--color_primary);
  border-width: thin;
  border-style: solid solid none none;
  border-radius: 0 7.1px 0 0;
  background-color: var(--linear_fallback);
  background-image: var(--linear_bg);
  text-overflow:ellipsis;
  white-space: nowrap;
  overflow: hidden;
  }

div.SCAW1 {
  font-size: var(--small_font);
  text-align: center;
  border-color: var(--color_primary);
  border-width: thin;
  border-style: solid solid none none;
  border-radius: 0 7.1px 0 0;
  background-color: var(--linear_fallback);
  background-image: var(--linear_bg);
  text-overflow:ellipsis;
  white-space: nowrap;
  overflow: hidden;
  }



div.SCBW {
  font-size: var(--medium_font);
  text-align: center;
  border-color: var(--color_primary);
  border-width: thin;
  border-style: none solid solid none;
  border-radius: 0 0 7.1px 0;
  background-color: var(--linear_fallback);
  background-image: var(--linear_bg);
  text-overflow:ellipsis;
  white-space: nowrap;
  overflow: hidden;
  }

div.SCBW1 {
  font-size: var(--small_font);
  text-align: center;
  border-color: var(--color_primary);
  border-width: thin;
  border-style: none solid solid none;
  border-radius: 0 0 7.1px 0;
  background-color: var(--linear_fallback);
  background-image: var(--linear_bg);
  text-overflow:ellipsis;
  white-space: nowrap;
  overflow: hidden;
  }


div.SCRDL,
div.cell_border_left {
  border-color: var(--color_primary);
  border-width: thin;
  border-style: none none none solid;
  border-radius: 0 0 0 0;
  }

div.SCRDR,
div.cell_border_right {
  border-color: var(--color_primary);
  border-width: thin;
  border-style: none solid none none;
  border-radius: 0 0 0 0;
  }








/*---------------------------------------------------*/
/*--- Everything below this has highest authority ---*/
/*---------------------------------------------------*/
div.in_play {
  position:relative;
  border-color: var(--color_primary);
  border-width:1px;
  background-color: var(--color_dark);
  background-image: linear-gradient(to right, rgba(50, 50, 50, 1) 20%, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0)),
  linear-gradient(#999900, #eeee00, #999900);
  text-overflow:ellipsis;
  white-space: nowrap;
  overflow: hidden;
  }

div.in_play2 {

  text-align: center;
  border-color: var(--color_primary);
  border-width:1px;
  background-color: #000000;
  /* No black sqaure on left, normal bracket gradient on the the cell */
  background-image: linear-gradient(#999900, #eeee00, #999900);
  color: var(--color_dark);
  text-overflow:ellipsis;
  white-space: nowrap;
  overflow: hidden;
  }

a.in_play {
  color: var(--color_dark);
  }

a.in_play2 {
  color: var(--color_dark);
  }


div.on_deck {
  position:relative;
  text-align: center;
  border-width:1px;
  border-style: dotted;
  border-color: #ffff99;
  background-color: #555555;

 /* Little black sqaure on left, normal bracket gradient on the rest of the cell */
  background-image: linear-gradient(to right, rgba(50, 50, 50, 1) 20%, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0)),
  linear-gradient(#555500, #999900, #555500);


  /* background-image: linear-gradient(to right, #555555 21px, #666600 21px, #666600); */
  color: var(--color_primary_bright);
  text-overflow:ellipsis;
  white-space: nowrap;
  overflow: hidden;
  }


div.on_deck2 {

  text-align: center;
  border-width:1px;
  border-style: dotted;
  border-color: var(--color_primary_bright);
  background-color: #555555;

 /* no black sqaure on left, normal bracket gradient on the cell */
  background-image: linear-gradient(#555500, #999900, #555500);

  color: var(--color_primary_bright);
  text-overflow:ellipsis;
  white-space: nowrap;
  overflow: hidden;
  }



a.on_deck {
  color:#dddd77;
  }

a.on_deck2 {
  color:#dddd77;
  }