/* page structure */
body {
    font-family: "Nunito", "Helvetica Neue", Helvetica, sans-serif;
    background-color: #765;
    margin-top: 0;
    padding-top: 0;
}

#content {
    width: 1200px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    padding-top: 0;
    border: thin solid #333;
    background-color: white;
    border-top: 0;
}

header {
    background: -moz-linear-gradient(top, #acf, #768eb1);
    padding: 1em 3em 1em;
    color: #333; 
    border-bottom: thin solid #d6d6d6; 
    border-top: 0;
    margin: 0;
}

footer {
    color: #333;
    font-size: 80%;
    text-align: right;
    font-family: monospace;
    background-color: #eee;
    padding: .5em 1em;
    border-top: thin solid #a0a0a0; 
}

article {
    padding: 1em 3em 1em;
    background-color: #fff;
}

article#bracket {
    font-size: 85%;
}

menu {
    margin: 0;
    padding: 0.5em;
    background-color: #eee;
    border-top: thin solid #a0a0a0; 
    border-bottom: thin solid #a0a0a0; 
}

menu a {
    font-weight: bold;
    color: #644;
}

menu a:visited {
    text-decoration: underline;
    color: #644;
}


menu a:hover {
    color: #f6f;
}

menu ul {
    list-style: none;
    padding: 0
}

menu li {
    display: inline-block;
    padding-left: 0.5em 
}

menu li:before {
    content: "//";
    margin-right: 0.5em;
}

menu li:first-child:before {
    content: "";
    margin: 0
}

menu a {
    text-decoration: none;
}

header h1 {
    margin-bottom: 0
}

article h1 {
    text-align: center;
    font-size: 300%;
    margin-top: 0;
    margin-bottom: .5ex;
}

table {
    border-collapse: collapse;
    margin-left: auto;
    margin-right: auto;
}

td {
    border: thin solid;
    padding: 0.3em
}

tr:nth-child(even) td {
    background-color: #9d9 
}

#bracket h2 {
    margin-top: 0;
    text-align: center
}

#calendar h2 {
    text-align: left;
    margin-top: 10px
}

#calendar h3 {
    text-align: center
}

.group {
    float: left;
    padding: 1em;
    margin: 15px;
    border: thin solid;
    border-radius: .75em;
    width: 220px;
    height: 130px;
}

#groupA {
    background-color: #FFBD2E;    
}

#groupB {
    background-color: #498AF9;
}

#groupC {
    background-color: #FF474A;
}

#groupD {
    background-color: #5DFF40;
}

#listGroups {
    margin-left: auto;
    margin-right: auto;
    display: table-cell;
}

.ranking {
    float: left;
    padding: 1em;
    margin: 35px;
    border: thin solid;
    width: 180px;
    height: 130px;
}

#rankingA {
    background-color: #FFE06D;    
}

#rankingB {
    background-color: #65A8F9;
}

#rankingC {
    background-color: #FF7A7C;
}

#rankingD {
    background-color: #9BFF84;
}

.quarter {
    float: left;
    padding: 1em;
    margin: 15px;
    margin-top: 2em;
    border: thin solid;
    border-radius: .75em;
    width: 220px;
    height: 80px;
    background-color: #BB86FF;	
}

.semi {
    float: left;
    padding: 1em;
    border: thin solid;
    border-radius: .75em;
    width: 220px;
    height: 80px;
    background-color: #FFB042
}

#S1 {
    margin-right: 310px;
    margin-left: 140px;
}

#F {
    padding: 1em;
    margin-left: 430px;
    margin-top: 2em;
    border: thin solid;
    border-radius: .75em;
    width: 220px;
    height: 80px;
    background-color: #ADFF09
}

.readable {
    margin-left: auto;
    margin-right: auto;
    width: 50em;
}