main {
  font-family:sans-serif;
  font-size:11px;
  padding:10px;
  line-height:1.4em;
}

main, ul.generator {
  display:-webkit-flex;
  display:flex;
}

ul.generator {
  -webkit-flex-direction:column;
  flex-direction:column;
  width: 215px;
  list-style:none;
  padding:0;
}

.bye{
-webkit-flex-grow:1;
  flex-grow:1;
  height:118px;
}

.game + li {
  -webkit-flex-grow:1;
  flex-grow:1;
  height:50px;
  
}

li:first-child,li:last-child {
  -webkit-flex-grow:.5;
  flex-grow:.5;
}

.game {
  padding-left:1px;
}

.game-top, .game-lone,  .game-bottom {
  border-bottom:1px solid #000000;
}
.game-lone{width:80%; margin-left:14px;}


.game-bottom, .game-top + li {
  border-right:1px solid #000000; 
}

.game-top + li {
  display: flex;
  align-items: center;
  justify-content: center;
}


.game-top + li, .finaltext {
  color: #555;
  font-weight: normal;
}


.right .game {
  text-align: right;
  padding-right: 4px;
  padding-left: 0;
}

.right .game-bottom, .right .game-top + li {
  border-left:1px solid #000000; 
  border-right: 0;
}


input[type=text] {
width:94%;
border:none;
}

input[id='seedtext'] {
width:86%;
}

input[name='time[]'] {
font-size:10px;
border: #EAEAEA solid 1px;
padding-top:2px;
text-align:center;
}
 input[name='champion']{
text-align:center;

}
.finaltext {
  width: 12%;
  text-align: center;
  margin: 20px 0 0 45px;
  position: absolute;
}
.champions {
  margin-left:43px;
  width: 13%;
  text-align: center;
  margin-top: 100px;
  position: absolute;
  border-bottom:solid #000000 1px;
 
}
.winner {
font-size:15px;
 width: 100%;
  text-align: center;
  padding-top: 4px;
  position: absolute; 
}
.right-align{
text-align:right;}

.center-align{
text-align:center;
}

.bracket-title{
font-size:30px;
font-weight:bold;
padding-top:15px;

}
.gen-border{
border-top:#efefef thin solid;
border-bottom:#efefef thin solid;
}

span{
font-size:9px;
padding-right:3px;
}

.right-pad{
padding-left:3px;
padding-right:0px;

}
@media only screen and (max-width:767px){body{width:auto;}
.winner{
  font-size:8px;

}
.champions {
  margin-left:5px;
  width: 13%;
}
.finaltext {
  width: 15%;
  text-align: center;
 margin: 2px 0 0 3px;
  position: absolute;
}
}