/* 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, #7f9fcf);
    background: -webkit-gradient(linear, left top, left bottom, from(#acf), to(#7f9fcf));
    padding: 1em 3em 1em;
    color: #333; 
    border-bottom: thin solid #d6d6d6; 
    border-top: 0;
    margin: 0;
}

header h1 {
    font-size: 350%;
    margin-bottom: 0
}

header p {
    font-size: 110%;
    margin-top: .5ex;
}

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;
}

article h1 {
    text-align: center;
    font-size: 300%;
    margin: 1ex auto;
}

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

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

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

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

#calendar h2 {
    text-align: center;
}

#calendar table {
    margin-bottom: 2ex;
}

.shadow {
    -moz-box-shadow: .1em .1em .1em .1em #aaa;
    -webkit-box-shadow: .1em .1em .1em .1em #aaa;
    box-shadow: .1em .1em .1em .1em #aaa;
}

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

#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;
    margin-bottom: 7ex;
    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: 7ex 15px .75em;
    border: thin solid;
    border-radius: .75em;
    width: 220px;
    height: 80px;
    background-color: #BB86FF;	
}

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

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

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

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

table#teams {
    width: 80%;
}

#teams td {
    text-align: center;
}

#teams tr:nth-child(even){
    background-color: transparent
}

td.team-name {
    font-weight: bold;
    font-size: 200%;
    text-shadow: .1em .1em .2em #424242;
}

#teams tr:hover {
    background-color: #d0f0ff;
}

#teams td.members {
    font-size: 150%;
    line-height: 5ex;
    font-variant: small-caps;
/*    text-shadow: .1em .1em .3em #666; */
}

#teams img {
    border: medium solid #666;
    background: white;
    border-radius: 1ex
}

#teams tr:hover img {
    border-color: #444;
}

.cred { color: #900; }
.cgreen { color: #090; }
.cblue { color: #009; }
.cpink { color: #909; }
.cyellow { color: #a60; }

.center {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

#beaver {
    opacity: 0.25;
    margin-top: 5ex;
}

#beaver:hover {
    opacity: 1.0;
}

.spacer {
    clear: both;
}

.hline {
    border-top: thin solid #aaa;
    margin: 0;
    height: 0;
    padding: 0;
    width: 100%;
}