html,
body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    margin: 0px;
    padding: 0px;
    background: #000000;
}

div.grade {
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#040000', endColorstr='#400000');
    background-image: -webkit-gradient(linear, left top, left bottom, from(#000040), to(#400000));
    background-image: -moz-linear-gradient(top,  #000040,  #400000);

    padding: 0px;
    width: 99%;
    height: 98%;
    margin: .5% auto;

    border-radius: 80px;
    border: 4px ridge #A77A02; 
    color: #000000;
    display: flex;
}

div.inner {
    border-radius: 15px;
    border: 4px ridge #A77A02;
    background: #000000;
    width: 90%;
    height: 87%;
    margin: auto;
    overflow: hidden;

    -webkit-animation: bgfadein 8s; /* Safari, Chrome and Opera > 12.1 */
    -moz-animation: bgfadein 8s; /* Firefox < 16 */
    -ms-animation: bgfadein 8s; /* Internet Explorer */
    -o-animation: bgfadein 8s; /* Opera < 12.1 */
    animation: bgfadein 8s;
    animation-fill-mode: forwards;
}

div.content {
    position: relative;
    width: 97%;
    height: 95%;
    background: #000000;
    overflow: auto;
    margin: .25% auto 0px auto;
    padding: 1em;

    -webkit-animation: fadein 8s; /* Safari, Chrome and Opera > 12.1 */
    -moz-animation: fadein 8s; /* Firefox < 16 */
    -ms-animation: fadein 8s; /* Internet Explorer */
    -o-animation: fadein 8s; /* Opera < 12.1 */
    animation: fadein 8s;
    animation-fill-mode: forwards;
}

#menu {
    padding-top: 25px;
    padding-right: 2em;
    float: left;
    width: 8%;
}

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

.menu-li {
    padding: 8px;
    margin-bottom: 7px;
    background-color: #000048;
    border: 2px ridge #A77A02;
    color: #FFFFFF;
    font-size: 85%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.menu-li:hover {
    background-color: #0000A0;
}

#main {
    width: 78%;
    float: left;
    overflow: hidden;
}

#follow {
    padding-top: 25px;
    padding-right: 2em;
    float: right;
    width: 8%;
}

#footer {
    color: #C0C0C0;
    position: absolute;
    top: 96%;
    font-size: 70%;
    width: 100%;
}

.no-style {
    color: inherit;
    background: inherit;
    text-decoration: inherit;
}

.inline {
   float: left;
   margin-right: 1em;
}

.soft-entry-first {
    width: 100%;
    display: block;
    position: static;
    clear: both;
}

.soft-entry {
    width: 100%;
    display: block;
    position: static;
    clear: both;
    padding-top: 1em;
}

.button-spacing {
    margin: 0;
    padding: 0;
    padding-left: 6px;
    padding-top: 1em;
}

#tracks-div {
    padding: 4px;
    background-color: #B90000;
    display: inline-block;
}

.tracks-outer {
    background-color: #B90000;
}

.track-image {
}

.internal-link {
    color: #F0F0F0;
    background: #480000; 
    border: 2px ridge #A77A02;
    font-size: 80%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    text-decoration: none;
    padding: 4px;
}

#donate-button {
    visibility: hidden;
}

h2 {
    color: #000048;
}

h3 {
    color: #480000;
}

h4 {
    color: #240024;
    font-size: 85%;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
    0.0%  {background-color:black;}
    100.0%  {background-color:white;}
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
    0%     {background-color:black;}
    100.0%  {background-color:white;}
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes bgfadein {
    0.0%  {background-color:black;}
    100.0%  {background-color:white;}
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes bgfadein {
    0%     {background-color:black;}
    100.0%  {background-color:white;}
}

@media only screen and (max-width: 960px) {
    /* For low resolutions: */

    #menu {
        width: 100%;
        float: none;
    }

    .menu-li {
        display: inline-block;
    }

    #main {
        width: 100%;
        float: none;
    }

    #follow {
        width: 100%;
        float: none;
        display: block;
    }

    .button-spacing {
        display: inline;
    }
}