#ArchiveContainer {
    display: none;
    position: relative; /* important */
    /*height: 400px;*/ /* can be anything */
    height: calc(100% - 0px);
    min-width: 375px;
    max-width: 100%; /* can be anything */
    padding-bottom:40px;
    /*background-color: #242424;*/
    background-color: black;
    background-image: url(/images/overlay_archive.png);
	background-position: center center;
	background-repeat: no-repeat;
    /* Safari 4-5, Chrome 1-9 */
    /* Can't specify a percentage size? Laaaaaame. */
    /*background: -webkit-gradient(radial, center center, 0, center center, 200, from(#242424), to(#242424));*/
    /* Safari 5.1+, Chrome 10+ */
    /*background: -webkit-radial-gradient(circle, #242424, #000000);*/
    /* Firefox 3.6+ */
    /*background: -moz-radial-gradient(circle, #242424, #000000);*/
    /* IE 10 */
    /*background: -ms-radial-gradient(circle, #242424, #000000);*/
}
@media (min-width: 769px) {
    #ArchiveContainer {
        min-width: 375px;
    }
}

@media (max-width: 768px) {
    #ArchiveContainer {
        min-width: 500px;
    }

}




#ArchiveListContainer {
    position: absolute; /* important */
    bottom: 0px; /* important */
    width: 100%;
    height: 40px; /* important */
    overflow: hidden; /* important */
    background: white; /* not important */
    transition: max-height 250ms ease-in; /* important */
}



#ArchiveCurrentlyPlaying {
    height: 40px;
    line-height: 40px;
    font-weight: bold;
    margin-left: 10px;
}

#ArchiveFileList {
    width: 100%;
    height: 90%;
    min-height: 200px;
    background-color: #aeaeae;
    margin-top: 40px;
    border-top: 1px solid black;
    padding: 0px;
    overflow: scroll;
}

    #ArchiveFileList table {
        border-collapse: collapse;
    }

    #ArchiveFileList tr {
        margin-top: 10px;
        /*background-color: #808080;*/
    }

        #ArchiveFileList tr:hover {
            background-color: #aeaeae;
            -webkit-filter: brightness(90%);
            -webkit-transition: all .5s ease;
            -moz-transition: all .5s ease;
            -o-transition: all .5s ease;
            -ms-transition: all .5s ease;
            transition: all .5s ease;
        }

    #ArchiveFileList td {
        height: 35px;
        padding: 0px 10px;
        border-bottom: 1px solid #808080;
    }


.archivefilelistheader {
    background-color: #ffffff;
    color: #000000;
}

    .archivefilelistheader:hover {
        background-color: #ffffff;
        color: #000000;
        -webkit-filter: brightness(100%);
        -webkit-transition: none;
        -moz-transition: none;
        -o-transition: color 0 ease-in;
        transition: none;
    }

    .archivefilelistheader a {
        /*color: white;*/
        margin: 0px 7px;
        text-decoration: none;
    }

        .archivefilelistheader a:hover {
            text-decoration: none;
        }



.archivetaglink {
    font-weight: bold;
    display: inline-block;
    background-color: #26a2d7;
    color: #ffffff;
    text-decoration: none;
    text-align: center;
    font-size: 13px;
    border-radius: 5px;
    cursor: pointer;
}



.archivetaglinkactive {
    font-weight: bold;
    display: inline-block;
    background-color: #ffffff;
    color: #26a2d7;
    text-decoration: none;
    text-align: center;
    font-size: 13px;
    border-radius: 5px;
    border: 2px solid #26a2d7;
    cursor: pointer;
}



#ArchivePlayerContainer {
    float: left;
    width: 640px;
    /*height: 360px;*/
    height: 100%;
    padding: 0px;
    margin: 0px;
}




.spinner {
    display: block;
    position: inherit;
    top: 50%;
    left: 50%;
    margin-left: -50px; /* half width of the spinner gif */
    margin-top: -50px; /* half height of the spinner gif */
    text-align: center;
    z-index: 1234;
    overflow: hidden;
    width: 100px; /* width of the spinner gif */
    height: 102px; /*hight of the spinner gif +2px to fix IE8 issue */
}