/*bracket.css: styling for the knockout stage bracket*/

/*Positioning and background of tab content*/
#Bracket {
    padding: 0px;
    max-width: 1228px;
    margin: auto;
    background-image: url('../images/2022_trophy.png');
    background-repeat: no-repeat;
    text-align: left;
}

/*The bracket itself is an HTML table. This implementation is copied from wikipedia. There, all styling is in-line; here, it's been 
 *organized into classes, for readability.*/

/*hs cells are a hack to make sure each row is the same height regardless of its contents or lack thereof. It didn't quite work on
 *wiki, but I've fixed it here.*/

.hs div {
    min-height: 15px;
    opacity: 0;
}

/*round cells give the name of a round.*/
.round {
    border: 1px solid #aaa;
    background-color: #F2F2F2;
    text-align: center;
}

/*The next few classes give the lines showing how teams progress through the bracket.*/
.line {
    border-color: black;
    border-style: solid;
}
.from-above {
    border-width: 0 0 1px 0;
}

.two-borders {
    border-width: 2px 0 1px 0;
}

.three-borders {
    border-width: 2px 3px 1px 0;
}

.from-below {
    border-width: 2px 0 0 0;
}

/*These are the cells that contain names of teams. Each Node in the model represents one of these.*/
.team-cell {
    border: 1px solid #aaa;
    background-color: #F9F9F9;
    padding-left: 4px;
    cursor: pointer;
}

/*This class is added to a cell to indicate that the team has won that match.*/
.winner {
    background-color: #ccffcc !important;
    font-weight: bold;
}

/*Match details*/
td.details {
    white-space: nowrap;
    max-width: 175px;
    vertical-align: bottom;
    color: white;
    text-shadow:
        -1px -1px 0 #000,
        1px -1px 0 #000,
        -1px 1px 0 #000,
        1px 1px 0 #000;  
    ms-filter: progid:DXImageTransform.Microsoft.Glow(color=#000000, strength=1);
}

.kolocation, .kotime {
    display: inline-block;
}

/*The champion div isn't part of the table, but it looks like it is*/
.champion {
    position: relative;
    font-family: 'Kashida';
    color: red;
    font-size: 2em;
    text-align: center;
    display: none;
    vertical-align: middle;
    border: 1px solid #aaa;
    background-color: #F9F9F9;
    width: 200px;
    height: 200px;
}

.champion .flag {
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    box-shadow: 0px 0px 10px 5px #FFD700;
    webkit-box-shadow: 0px 0px 10px 5px #FFD700;
    moz-box-shadow: 0px 0px 10px 5px #FFD700;
    ms-filter: progid:DXImageTransform.Microsoft.Glow(color=#FFD700, strength=5);
}

.champion .countryName {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

.champion p {
        text-shadow: 1px 1px 2px #FFD700, -1px 1px 2px #FFD700, 1px -1px 2px #FFD700, -1px -1px 2px #FFD700;
        ms-filter: progid:DXImageTransform.Microsoft.Glow(color=#FFD700, strength=1);
        margin: 0px;
}