/* ================================== */
/*            Preview Mode            */
/* ================================== */

#preview_info span, #preview_info p, #preview_info button {
    font-size: 12px;
    padding: 6px 10px;
    float: left;
}

#preview_info {
    position: fixed;
    bottom: 0;
    left: 0;
    left: 0;
    padding: 10px;
    border-radius: 0 5px 0 0;
    color: #fff;
    background-color: rgba(0,0,0,0.5);
    z-index: 999;
}
#preview_info span { color: #000; margin-left: -8px; }
#preview_info p { margin-right: 10px; margin-left: -10px; }
#preview_info button {
    min-width: 90px;
    border-radius: 2px;
    border: 1px solid #fff;
    background-color: transparent;
    color: #fff;
    font-weight: 400;
    cursor: pointer;
    transition: 0.5s;
}
#preview_info button:hover {
    background-color: #fff;
    color: #000;
}

#preview_info span { color: #666; }
#preview_info span.color-edited { color: #ffaa33; }
#preview_info span.color-unpublished { color: #ff1824; }
#preview_info span.color-published { color: #4bd1c9; }

@media all and (max-width: 700px) {
    #preview_info p { display: none; }
}