/*
------------
BRACKET.CSS
PURPOSE - STYLES FOR TOURNAMENT STYLE BRACKET
------------
*/
.mod-bracket { position: relative; height: 400px; }

.mod-bracket .stage h2 { text-align: center; margin-bottom: 25px; }

.mod-bracket > .stage > .match { margin-bottom: 60px; line-height: 13px; font-size: 10px; }

.mod-bracket > .stage > .match > .date { line-height: 22px; display: block; }

.mod-bracket > .stage.alt > .match > .date { text-align: right; }

.mod-bracket .match > a { display: block; background: #f0f0f0; padding: 5px; }

.mod-bracket .match > a:hover { background: #373232; color: #fff; text-decoration: none; }

.mod-bracket .match > a > div { overflow: hidden; }

.mod-bracket .match > a > div > .time, .mod-bracket .match > a > div > .match, .mod-bracket .match > a > div.teams > ul > li.winner { font-weight: 700; }

.mod-bracket .match > a > div.teams > ul > li { margin: 5px 0px; line-height: 13px; }

.mod-bracket .match > a:hover > div.teams > ul > li { color: #fff; }

.mod-bracket .match > a > div > .time { float: left; }

.mod-bracket .match > a > div > .match { float: right; }

.mod-bracket .match > a > .progress { height: 3px; line-height: 3px; background: #373232; margin: 6px -5px 3px; }

.mod-bracket .match.live > a > .progress > span { display: block; background: #eb000b; width: 0%; }

.mod-bracket .match.live > a > div > .time { color: #eb000b; }

.mod-bracket .match > a:hover > .progress, .mod-bracket > .stage.finals > .match > a:hover > .progress { background: #878787; }

.mod-bracket .quarterfinals, .mod-bracket .semifinals { width: 165px; position: absolute; top: 50px; }

.mod-bracket .finals { top: 50px; }

.mod-bracket .quarterfinals.standard { left: 0; }

.mod-bracket .quarterfinals.alt { right: 0; }

.mod-bracket .semifinals.standard { left: 200px; }

.mod-bracket .semifinals.alt { right: 200px; }

.mod-bracket > .stage.semifinals > .match { margin: 100px 0 0 0; }

.mod-bracket .finals { width: 200px; position: absolute; }

.mod-bracket .finals.standard { left: 385px; }

.mod-bracket > .stage.finals > .match { margin: 75px 0 0 0; font-size: 11px; }

.mod-bracket > .stage.finals > .match > .date { text-align: center; font-size: 10px; }

.mod-bracket > .stage.finals > .match > a > div.teams > ul { margin-bottom: 5px; }

.mod-bracket > .stage.finals > .match > a > div.teams > ul > li { line-height: 23px; margin: 12px 0; }

.mod-bracket > .stage.finals > .match > a > div.teams > ul > li.last { margin-bottom: 0; }

.mod-bracket > .stage.finals > .match > a { padding: 10px; }

.mod-bracket > .stage.finals > .match > a > .progress { height: 3px; line-height: 3px; background: #373232; margin: 6px -10px 3px; }

.mod-bracket > .bracket { display: block; position: absolute; height: 160px; width: 18px; border: 1px solid #b4b4b4; }

.mod-bracket > .bracket.quarterfinals { top: 130px; }

.mod-bracket > .bracket.quarterfinals.standard { left: 165px; border-left: 0; }

.mod-bracket > .bracket.quarterfinals.alt { right: 165px; border-right: 0; }

.mod-bracket > .straight { display: block; width: 17px; height: 1px; background: #b4b4b4; position: absolute; top: 210px; }

.mod-bracket > .straight.quarterfinals.standard { left: 183px; }

.mod-bracket > .straight.quarterfinals.alt { right: 183px; }

.mod-bracket > .straight.semifinals { width: 20px; }

.mod-bracket > .straight.semifinals.standard { left: 365px; }

.mod-bracket > .straight.semifinals.alt { right: 365px; }