table{
    width: 80%;
    margin: 10% 10%;
    height: 60%;
    border-spacing: 0;
    
}


/*  Month Year  */
.table_title{
    padding: 3%;
    background-color: #000;
    font-family: 'Tangerine', cursive;
    color: white;
    font-size: 3em;
}

/*  M - F   */
.date_heading{
    width: auto;
    background-color: #663399;
    color: white;
    font-style: italic;
    padding: 1%;
    margin:0;
}

.today{
    background-color: rgba(255,255,186,0.75);
}

td{
    padding: 1% 1% 10% 1%;
    overflow: hidden;
    /*background-color: rgba(255,255,255,0.75);*/
    width: 10%;
    max-height: 10%;
}

tbody{
    vertical-align: top;
    background-color: rgba(255,255,255,0);
}

.normal{
    background-color: rgba(66,33,99,0.75);
    color: white;
}

.legend{
    padding:2%;
}

.special{
    background-color: rgba(204,255,229,0.75);
}

.canceled{
    background-color: rgba(205,102,102,0.75);
    color: white;
}

#announcements{
    margin: 10% auto;
    line-height: 2em;
    font-size: 1.25em;
    width: 90%;
}

#upcoming{
    margin: 10% auto;
    line-height: 2em;
    font-size: 1.25em;
    width: 90%;
}

#legend{
    margin: 10% 3%;
}

p{
    margin: 5% 0;
}

h2{
    margin-top: 15%;
    font-family: 'Tangerine', cursive;
    text-shadow: 2px 2px 2px #aaa;
    font-size: 3em;
}


@media screen and (max-width: 600px) {
    table{
        width: 95%;
    }
}

@media screen and (max-width: 450px) {
    table, .legend{
        display: none;
    }

    h2{
        font-size: 2em;
    }

    #upcoming, #announcements{
        text-align: center;
    }
}

.canceled_text{
    color: red;
}

.blank{
    background-color: rgba(0,0,0,0.25);
}

.any{
    background-color: rgba(255,255,255,0.8);
}