h1 {
    margin-bottom:5px;
}

#roster-table {
    margin:30px 0 0 0;
    text-align:center;
}

.roster-container{
    width:15%;
    text-align:center;
    float:left;
    padding-left:20px;
    padding-right: 20px;
}

#roster-visitor {
    float:right;
}

.roster-container h3 {
    margin:0 0 10px 0;
}

.roster-wrapper {
    border: 1px solid #333;
}

.match-container{
    margin:0 auto;
    text-align:center;
}

.match-wrapper {
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    align-items: start;
}

.team-wrapper {
    flex-basis:49%; /* 2% left for gutter */
}

.court_heading {
    text-align:center;
    position:relative;
    margin:0 0 10px 0;
    height:20px;
}

.home_court_players {
    float:left;
    width:75%;
    border-collapse:collapse;
}

.visiting_court_players {
    float:right;
    width:75%;
    border-collapse:collapse;
}

.home_score_container {
    float:right;
    width:20%;
    border-collapse:collapse;
}

.visiting_score_container {
    float:left;
    width:20%;
    border-collapse:collapse;
}

.bb { border:1px solid black; }

.court_label{
    width:100%;
    border-bottom:2px solid gray;
    background-color:#80B2FF;
}

.player {
    display: block;
    margin:0;
    min-height: 20px;
    padding:2px;
    font-size: 13px;
    line-height: 1.3;
    cursor:  move;
    border-bottom: 1px solid #333;
    background-color: #dfe2fe;
    color:  black;
    clear:both;
    box-sizing:border-box;
}

.player .player {
    border:none;
    padding:0;
    min-height:1px;
    border:none;
}

.court_label select {
    float:right;
    margin:0 auto;
    padding:1px 4px;
}

.score_input {
    margin:0 auto 1px auto;
    padding:0 2px;
    height:19px;
    text-align:center;
    display: block;
    border-radius:0;
    border-width:1px;
    -webkit-appearance:none;
}

.button-bar {
    clear:both;
    margin:20px auto;
}

.js-button {
    display:inline-block;
    background-color:#CDA155; /* Gold */;
    border-radius:20px;
    color:#ffffff!important;
    text-transform:uppercase;
    cursor:pointer !important;
    text-decoration:none!important;
    font-weight:bold;
    padding:10px 20px;
    border:0;
    -webkit-appearance: none;
}

.js-button:hover {
    background-color:#CDA155; /* Gold */;
    opacity:0.8;
}

#server-reply {
    margin:20px 0;
    font-weight:bold;
    text-align:center;
    color:#243973; /* Blue */
}

@media all and (max-width: 800px) {

    #main-frame {
        padding: 30px 10px!important;
    }

    fieldset {
        padding:0;
    }

    .roster-container{
        margin-bottom:30px;
        padding:0;
        width:48%!important;
    }

    .match-container {
        clear:both;
        font-size:12px;
    }

    .court_heading div {
        font-size:10px;
        font-weight:normal;
        overflow:hidden;
    }

    .court_label select {
        float:none;
        margin:0 auto;
        padding:1px 4px;
    }

    .player {
        padding:10px 0;
        min-height: 20px;
        font-size: 11px;
        line-height: 1.3;
        overflow:hidden;
    }

    .home_court_players, .visiting_court_players {
        width:70%;
    }

    .home_score_container, .visiting_score_container {
        width:26%;
    }

    .score_input {
        padding: 0;
        width:90%;
    }


}

/* Print Version */

@media print {

    #server-reply {
        margin:0px 0 20px 0!important;;
    }

    .roster-container{
        width:15%!important;
        padding-left:0!important;
        padding-right:0!important;
    }

    .match-container {
        clear:none!important;
    }

    .match-wrapper { margin:0 16%!important; }

    .court_heading {
        margin-top:10px!important;
        height:14px!important;
    }

    .player { font-size:9px!important; height:24px!important; line-height:24px!important; padding:0 2px!important; text-decoration:none!important; }

    .court_label select { padding: 0!important; font-size:8px!important; }

    .button-bar { display:none!important; }

    .court_label {
        font-size:10px!important;
        height:24px!important;
        line-height:24px!important;
    }

    .score_input {
        height: 22px!important;
    }

}

/* Print Version */

.print-notes {
    clear:both;
    margin:20px auto;
    max-width:600px;
    font-size:12px;
}



/* Not Used? ------------------------ */
.select-list
{
    cursor:  pointer;
    height:90%;
    overflow-y: scroll;
    text-align: left;
    border-collapse:collapse;
}

.select-list p {
    margin-left:  10px;
}

.select-list ul li {
    text-align:  left;
    margin: 10px;
}

.color_dkBlue{ background-color:#80B2FF; }
.color_ltBlue{ background-color:#EBF5FF; }
.color_ltGray{ background-color:#DDDDDD; }
.color_mdGray{ background-color:#B8B8B8; }

.select-list li:hover{
    background-color: #DDD;
}

span.team{
    display: table-cell;
    width: 175px;
}

.left{ text-align:left;}
.right{ text-align:right;}
.center{ text-align:center;}
.tall{ height:80px; }
.short{ height:30px; }
.bdr_bottom{ border-bottom:2px solid black;}
.blue{ background-color:#80B2FF; }
.data-label { text-align: right; }
.user-input { text-align: left; }