table {
    border: 1px solid #ccc;
    border-bottom: 0;
    width: 52.7em;
    margin-bottom: 2em;
}

body {
    font-family: MSYahei, verdana, arial, tahoma, sans-serif;
}

table th {
    text-align: center;
    background: #247eca;
    color: white;
    padding: 0em;
    border: outset 2px #eee8aa;
}

table td {
    /*border-bottom: 1px solid #DDD;*/
    padding: .0em .0em .0em .5em;
}

table tr td.rank {
    background: transparent;
    border: 2px outset #ffffff;
}

table tr.gold td.rank {
    background: #f9d923;
    border: outset 2px #ffd700;
}

table tr.silver td.rank {
    background: Silver;
    border: 2px outset sILVER;
}

table tr.bronze td.rank {
    background: #c08e55;
    border: outset 2px #c9960c;
}

table td.name {
    padding-left: 2em;
}

table th.name {
    padding-left: 3em;
}

table tr.even td {
    background: #F7F7F7;
}

table tr td.r10 {
    background: #e9d923;
    border: 2px outset #DCDCDC;
}

table tr td.r9 {
    background: #e1d963;
    border: 2px outset #DCDCDC;
}

table tr td.r8 {
    background: #DDD7AA;
    border: 2px outset #DCDCDC;
}

table tr td.r7 {
    background: #d2d2d2;
    border: 2px outset #DCDCDC;
}

table tr td.r6 {
    background: #DDCDBD;
    border: 2px outset #DCDCDC;
}

table tr td.r5 {
    background: #e6e6e6;
    border: 2px outset #DCDCDC;
}

table tr td.r4 {
    background: #eee;
    border: 2px outset #f3f3f3;
}

table tr td.r3 {
    background: #F7f7f7;
    border: 2px outset #f7f7f7;
}

div.tail {
    font-size: .8em;
    color: #888;
    width: 80%;
    border: 1px solid #ccc;
    margin-left: auto;
    margin-right: auto;
}

span.right {
    float: right;
}

/* troy additions */
table tr.odd {
    background-color: #cccccc;
    color: black;
}

table tr.even {
    background-color: #EEEEFF;
    color: black;
}

table tr td.yes {
    background-color: #00ff00;
    color: black;
    text-align: center;
}

table tr td.pending {
    background-color: #ffff00;
    color: black;
    text-align: center;
}

table tr td.no {
    background-color: #ff0000;
    color: black;
    text-align: center;
}

table tr td.center {
    text-align: center;
}

table tr td.right {
    text-align: right;
}

body {
    padding-top: 2rem;
}

main {
    padding: 1rem 3rem;
}

.nav-item {
    padding-left: 1em;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    text-align: center;
}

h1 {
    font-size: 2em;
    padding-top: 3rem;
}

h2 {
    font-size: 1.5em;
}

h3 {
    font-size: 1.17em;
}

h4 {
    font-size: 1.12em;
}

h5 {
    font-size: .83em;
}

h6 {
    font-size: .75em;
}

.submitform {
    max-width: 450px;
}

.clarificationform {
    max-width: 800px;
}

#submitbut {
    margin-right: 2rem;
}

.teamName {
    white-space: nowrap;
    overflow: visible;
    display: inline-block;
    color: #222232;
}

.teamEName {
    font-weight: normal;
    color: #111111;
    white-space: nowrap;
    overflow: visible;
    display: inline-block;
}

.teamFemale {
    color: #e7757f;
}

.starTeam {
    color: #4b0082;
}

/*loading anim*/
.loading-container {
    /*margin: 20px;*/
    width: calc(100% - 40px);
    height: auto;
}

button {
    position: absolute;
    top: 20px;
    left: 20px;
}

.loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0);
    transition: background-color .2s ease-out;
}

.loading-anim {
    position: relative;
    width: 200px;
    height: 200px;
    margin: auto;
    perspective: 800px;
    transform-style: preserve-3d;
    transform: translateZ(-100px) rotateY(-90deg) rotateX(90deg) rotateZ(90deg) scale(0.5);
    opacity: 0;
    transition: all .2s ease-out;
}

    .loading-anim .loading-circle {
        width: 100%;
        height: 100%;
        animation: spin 5s linear infinite;
    }

    .loading-anim .loading-border {
        position: absolute;
        border-radius: 50%;
        border: 3px solid #4961e3;
    }

    .loading-anim .out {
        top: 15%;
        left: 15%;
        width: 70%;
        height: 70%;
        border-left-color: transparent;
        border-right-color: transparent;
        animation: spin 2s linear reverse infinite;
    }

    .loading-anim .in {
        top: 18%;
        left: 18%;
        width: 64%;
        height: 64%;
        border-top-color: transparent;
        border-bottom-color: transparent;
        animation: spin 2s linear infinite;
    }

    .loading-anim .mid {
        top: 40%;
        left: 40%;
        width: 20%;
        height: 20%;
        border-left-color: transparent;
        border-right-color: transparent;
        animation: spin 1s linear infinite;
    }

.loading .loading-anim {
    transform: translateZ(0) rotateY(0deg) rotateX(0deg) rotateZ(0deg) scale(1);
    opacity: 1;
}

.loading .loading-overlay {
    background: rgba(255, 255, 255, 0.5);
}

.dot {
    position: absolute;
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #4993e3;
    animation: jitter 5s ease-in-out infinite, fade-in-out 5s linear infinite;
}

    .dot:nth-child(1) {
        top: 90px;
        left: 180px;
        animation-delay: 0s;
    }

    .dot:nth-child(2) {
        top: 135px;
        left: 168px;
        animation-delay: 0.41667s;
    }

    .dot:nth-child(3) {
        top: 168px;
        left: 135px;
        animation-delay: 0.83333s;
    }

    .dot:nth-child(4) {
        top: 180px;
        left: 90px;
        animation-delay: 1.25s;
    }

    .dot:nth-child(5) {
        top: 168px;
        left: 45px;
        animation-delay: 1.66667s;
    }

    .dot:nth-child(6) {
        top: 135px;
        left: 12px;
        animation-delay: 2.08333s;
    }

    .dot:nth-child(7) {
        top: 90px;
        left: 0px;
        animation-delay: 2.5s;
    }

    .dot:nth-child(8) {
        top: 45px;
        left: 12px;
        animation-delay: 2.91667s;
    }

    .dot:nth-child(9) {
        top: 12px;
        left: 45px;
        animation-delay: 3.33333s;
    }

    .dot:nth-child(10) {
        top: 0px;
        left: 90px;
        animation-delay: 3.75s;
    }

    .dot:nth-child(11) {
        top: 12px;
        left: 135px;
        animation-delay: 4.16667s;
    }

    .dot:nth-child(12) {
        top: 45px;
        left: 168px;
        animation-delay: 4.58333s;
    }

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes jitter {
    0% {
        transform: scale(1, 1);
    }

    25% {
        transform: scale(0.7, 0.7);
    }

    50% {
        transform: scale(1, 1);
    }

    75% {
        transform: scale(1.3, 1.3);
    }

    100% {
        transform: scale(1, 1);
    }
}

@keyframes fade-in-out {
    0% {
        opacity: 0.8;
    }

    25% {
        opacity: 0.2;
    }

    75% {
        opacity: 1;
    }

    100% {
        opacity: 0.8;
    }
}