.hole-xs { height: 5px; }
.hole-sm { height: 20px; }
.hole-md { height: 40px; }
.hole-lg { height: 80px; }
.hole-half-team-wd { height: 35px; }

.round { 
    width: 154px;
    /*outline: 1px solid green;*/
    height: 100%; 
    float: left;
}

.round-final h2 {
    margin-bottom: 3px;
    font-size: 20px;
}

.connect-to-right, .connect-to-left {
    width: 10px;
    /*outline: 1px solid blue;*/
    height: 100%; 
    float: left;
}

.connect-to-top .wrap {
    height: 5px;
}

.connect-to-right .wrap, .connect-to-left .wrap {
    margin-top: 45px; /* margin-top duel + 1/2 round */
    height: 90px; /* 1/2 round * 2 + round-top margin */
}
.connect-to-right .wrap-round2, .connect-to-left .wrap-round2 {
    margin-top: 90px; /* margin-top duel + 1/2 round */
    height: 195px; /* 1/2 round * 2 + round-top margin */
}
.connect-to-right .wrap-round3, .connect-to-left .wrap-round3 {
    margin-top: 185px; /* margin-top duel + 1/2 round */
    height: 405px; /* 1/2 round * 2 + round-top margin */
}

.connect-to-right .left {
    width: 50%;
    height: 100%;
    float: left;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    border-right: 1px solid black;
}
.connect-to-right .right {
    width: 50%;
    height: 50%;
    float: left;
    border-bottom: 1px solid black;
}
.connect-to-left .left {
    width: 50%;
    height: 50%;
    float: left;
    border-bottom: 1px solid black;
}
.connect-to-left .right {
    width: 50%;
    height: 100%;
    float: left;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    border-left: 1px solid black;
}
.connect-to-top .right, .connect-to-top .left {
    width: 50%;
    height: 100%;
    float: left;
}
.connect-to-top .left {
    border-right: 1px solid black;
}

.duel {
    margin-top: 10px;
}
.duel-round2 {
    margin-top: 55px;
}
.duel-round3 {
    margin-top: 150px;
}

.duel:hover, .duel-round2:hover, .duel-round3:hover, .duel-final:hover {
    background-color: #dadada;
    cursor: pointer;
}

.round-top, .round-bottom {
    height: 70px;
    border: 1px solid grey;
    text-align: center;
}
.round-top .team-pic, .round-bottom .team-pic {
    height: 65%;
}
.round-top img, .round-bottom img {
    margin-top: 5px;
    max-height: 40px; 
}
.round-top .team-name, .round-bottom .team-name { 
    height: 35%;
    overflow: hidden;
}


.duel .round-top {
    margin-bottom: 20px;
}
.duel-round2 .round-top {
    margin-bottom: 120px;
}
.duel-round3 .round-top {
    margin-bottom: 330px;
}

.results { 
    text-align: center;
    height: 20px; 
    line-height: 20px;
}
.duel .round-top { margin-bottom: 0; }

.duel-round2 .results { margin: 50px 0; }
.duel-round2 .round-top { margin-bottom: 0; }

.duel-round3 .results { margin: 155px 0; }
.duel-round3 .round-top { margin-bottom: 0; }

.hovered-team {
    border: 1px solid rgb(40,182,98);
    box-shadow: 0 0 4px 1px rgba(40,182,98,.75), inset 0 0 4px 1px rgba(40,182,98,.75);
}
.first-team {
    border: 1px solid rgba(248,181,74);
    box-shadow: 0 0 4px 1px rgba(248,181,74,.75), inset 0 0 4px 1px rgba(248,181,74,.75);
}