.sheet-bg {
    position: absolute;
    bottom: 0px;
    left: 0;
    background-color: black;
    opacity: 0.8;
    width: 100%;
    height: 100%;
}

.sheet-container {
    position: fixed;
    left: -150%;
    top: 0;
    bottom: 40px;
    background-color: #323232;
    padding: 5px;
    width: 100%;
    max-height: 800px;
    z-index: 10;
	overflow-y: auto;
}
    .sheet-container-visible {
        left: 0;
        transition: left ease .25s;
    }
    .sheet-container-hidden {
        left: -150%;
        transition: left ease .25s;
    }

.sheet-container-nonfixed {
    background-color: #323232;
    padding: 5px;
    width: 100%;
    padding-bottom: 300px;
    z-index: 10;
	overflow-y: auto;
}

.sheet-panel {
    background-color: rgba(255,255,255,0.5);
    color: white;
    border-radius: 4px;
    padding: 4px;
    margin: 5px;
    margin-bottom: 5px;
    width: 300px;
    display: inline-table;
    vertical-align: top;
}

.sheet-panel-wide {
    background-color: #ce452b;
    padding: 4px;
    margin-bottom: 5px;
    width: 100%;
    height: 20%;
    display: inline-table;
    vertical-align: top;
}

.sheet-section {
    width: 100%;
    font-size: 14px;
}

.bg-dark {
    background-color: #000;
    padding: 4px;
    width: 90px;
}

.bg-dark-wide {
    background-color: #000;
    color: white;
    padding: 4px;
    width: 200px;
}

.bg-light {
    background-color: white;
}

.border-dark {
    border: 1px solid #6D4A23;
    padding: 2px;
}

.border-dark-nopadding {
    border: 1px solid #6D4A23;
}

.text-dark {
    color: black;
}

.text-center {
    text-align: center;
}

/* ANIMATION */

@keyframes sheet-move-in {
    0% {
        opacity: 0;
        bottom: -200%;
    }
    100% {
        opacity: 1;
        bottom: 0;
    }
}
    @-moz-keyframes sheet-move-in {
        0% {
            opacity: 0;
            bottom: -200%;
        }
        100% {
            opacity: 1;
            bottom: 0;
        }
    }
    @-webkit-keyframes sheet-move-in {
        0% {
            opacity: 0;
            bottom: -200%;
        }
        100% {
            opacity: 1;
            bottom: 0;
        }
    }
    @-o-keyframes sheet-move-in {
        0% {
            opacity: 0;
            bottom: -200%;
        }
        100% {
            opacity: 1;
            bottom: 0;
        }
    }

@keyframes sheet-move-out {
    0% {
        opacity: 1;
        bottom: -200%;
    }
    100% {
        opacity: 0;
        bottom: 0;
    }
}
    @-moz-keyframes sheet-move-out {
        0% {
            opacity: 1;
            bottom: -200%;
        }
        100% {
            opacity: 0;
            bottom: 0;
        }
    }
    @-webkit-keyframes sheet-move-out {
        0% {
            opacity: 1;
            bottom: 0;
        }
        100% {
            opacity: 0;
            bottom: -200%;
        }
    }
    @-o-keyframes sheet-move-out {
        0% {
            opacity: 1;
            bottom: 0;
        }
        100% {
            opacity: 0;
            bottom: -200%;
        }
    }