// $base-font-size:   18px;  // was 20px
$base-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;


$dark-gray: #333333;
$azure:     #F0FFFF;     // azure (see wikipedia web colors)


body
{
  font-family: $base-font-family;
}


a {
  color: black;
  text-decoration: none;

  &:hover {
   color: black;
   background-color: aqua;
   text-decoration: underline;
  }

  &:visited { color: black; }
}


.team-count,
.city-count,
.event-count,
.country-count {
  color: $dark-gray;
  font-size: 12px;   // ~80%
}

table {
  td.event-key,
  td.team-key,
  td.round-key,
  td.city-key,
  td.country-key,
  td.region-key,
  td.league-key {
    color: $dark-gray;
    font-size: 12px;   // ~80%
    * {
      color: $dark-gray;
      font-size: 12px;  // ~80%
    }    
  }
}


table.play {
  tr.game-round,
  tr.round-week {
     background-color:  $azure; 
     
     td {
     border-top: 1px solid black;
     border-bottom: 1px solid black;
     }
  }
  
 tr.game-day {
     td {
     border-top: 1px solid black;
     border-bottom: 1px solid black;
     }
  }

 tr.game-year,
 tr.game-week,
 tr.round-year {
     background-color:  $azure;  // todo: make it darker 20%?
     font-size: 22px;   // ~10%
     
     td {
     border-top: 1px solid black;
     border-bottom: 1px solid black;
     }
  }
  
  td.game-score {
     text-align: center;
  }
  
  td.game-date,
  td.game-hour,
  td.game-round,
  td.game-debug,
  td.round-debug {
    color: $dark-gray;
    font-size: 12px;   // ~80%
    * {
      color: $dark-gray;
      font-size: 12px;  // ~80%
    }
  }
  
  td.game-team1,
  td.game-team2 {
      .game-knockout.game-team-loser
      {
         // color: red;    // not working - only changes line-through color
         text-decoration: line-through;
         
         // -moz-text-decoration-color: grey;
         // text-decoration-color:  grey;
      }
      
      .game-team-winner
      {
         font-weight: bold;
      }
  }
  
  td {
    white-space: nowrap;
  }
}



/////////////////////////
// version / powered_by

.version
{
   text-align: center;
   margin-top: 10px;
   color: grey;
   
   a, span {
     font-size: 12px;
     color: grey
   }
}