.staging-toggle {
    background: #0e48c0;
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzgyYTlmOSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzBlNDhjMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
    background-size: 100%;
    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #82a9f9),color-stop(100%, #0e48c0));
    background-image: -moz-linear-gradient(#82a9f9,#0e48c0);
    background-image: -webkit-linear-gradient(#82a9f9,#0e48c0);
    background-image: linear-gradient(#82a9f9,#0e48c0);
    border: solid 3px #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.5);
    padding: 0 7px;
    border-radius: 7px;
    position: relative;
    display: inline-block
}

    .staging-toggle .staging-toggle-link {
        font-size: 12px;
        color: #fff;
        font-weight: bold;
        text-shadow: 0 -1px 0 rgba(0,0,0,0.3)
    }

    .staging-toggle .staging-toggle-body {
        display: none;
        position: absolute;
        padding: 5px 10px;
        top: auto;
        left: auto;
        width: 250px;
        background: #f9f7e8;
        border: solid 1px #dfd483;
        border-radius: 3px;
        box-shadow: 0 0 3px rgba(0,0,0,0.2)
    }

    .staging-toggle.open {
        z-index: 9999
    }

        .staging-toggle.open .staging-toggle-body {
            display: block
        }

.hide-staging-toggles .staging-toggle {
    display: none !important
}

button.toggle-staging-toggles {
    position: fixed;
    outline: none;
    left: 0;
    bottom: 0;
    z-index: 2000;
    background: #5bb75b;
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzYyYzQ2MiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzUxYTM1MSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
    background-size: 100%;
    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #62c462),color-stop(100%, #51a351));
    background-image: -moz-linear-gradient(#62c462,#51a351);
    background-image: -webkit-linear-gradient(#62c462,#51a351);
    background-image: linear-gradient(#62c462,#51a351);
    border: solid 1px #387038;
    border-bottom: none;
    border-left: none;
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
    padding: 3px 7px;
    border-radius: 0 3px 0 0;
    display: inline-block;
    font-size: 12px;
    color: #fff;
    font-weight: normal;
    text-shadow: 0 -1px 0 rgba(0,0,0,0.3)
}

.hide-staging-toggles button.toggle-staging-toggles {
    background: #bbb;
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2NjY2NjYyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2JiYmJiYiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
    background-size: 100%;
    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #cccccc),color-stop(100%, #bbbbbb));
    background-image: -moz-linear-gradient(#cccccc,#bbbbbb);
    background-image: -webkit-linear-gradient(#cccccc,#bbbbbb);
    background-image: linear-gradient(#cccccc,#bbbbbb);
    border-color: #aaa
}

.staging-alert {
    background: #5bc0de;
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzViYzBkZSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzJmOTZiNCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
    background-size: 100%;
    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #5bc0de),color-stop(100%, #2f96b4));
    background-image: -moz-linear-gradient(#5bc0de,#2f96b4);
    background-image: -webkit-linear-gradient(#5bc0de,#2f96b4);
    background-image: linear-gradient(#5bc0de,#2f96b4);
    border-bottom: solid 1px #2f96b4;
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
    padding: 3px 7px;
    font-size: 12px;
    color: #fff;
    font-weight: normal;
    text-shadow: 0 -1px 0 rgba(0,0,0,0.3);
    text-align: center;
    position: relative;
    z-index: 1337
}

ul.edit-mode li {
    border: 1px solid #ccc
}

    ul.edit-mode li span {
        display: inline-block;
        min-height: 23px
    }

.hide-staging-toggles ul.edit-mode li {
    border: 1px solid #fff
}