html {
    width: 80%;
    height: 100%;
    margin: 0 auto;
    background: url(../img/bg.jpg) no-repeat center center fixed;
    background-size: cover;
}

body {
    height: 100%;
    background-color: rgb(255, 255, 255, 0.5)
}

nav {
    background-color: gainsboro;
}

footer {
    background-color: gainsboro;
}

div.content-box {
    position: relative;
    top: 30%;
    width: 500px;
    margin: 0 auto;
    padding: 20px;
    box-shadow: 0px 0px 12px 3px #ffffff;
    background-color: rgba(255,255,255,0.7);
    border-radius: 6px;
    border: 2px solid #dcdcdc;
    color: #666666;
    text-decoration: none;
    text-shadow: 0px 1px 0px #ffffff;
}

div.record-content-box {
    position: relative;
    top: 20%;
    width: 800px;
    margin: 0 auto;
    padding: 20px;
    box-shadow: 0px 0px 12px 3px #ffffff;
    background-color: rgba(255,255,255,0.9);
    border-radius: 6px;
    border: 2px solid #dcdcdc;
    color: #484848;
    text-decoration: none;
    text-shadow: 0px 1px 0px #ffffff;
}

div.record-content {
    background-color: gainsboro;
}

tbody.hidden {
    display: none;
}

.record-col-1{
    width: 25%;
}

.record-col-2 {
    width: 25%;
}

.record-col-3 {
    width: 40%;
}

.record-col-4 {
    width: 10%;
}

table.record-table{
    width: 100%;
}

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

    body {
        background-color: rgb(255, 255, 255, 0.5)
    }

    div.content-box {

    }

    div.record-content-box {
        top: 20%;
        width: 100%;
    }
}