.fl-reorderer-instructions {
    background-color: #f5ffb0;
    border: 1px solid #ffe390;
    margin: 5px;
    padding: 10px;
}

.fl-reorderer-instructions strong {
    display: block;
}

/* Base Appearance + States */
.fl-reorderer-movable-default {
    cursor: move;
}

/* automatically applied the keyboard selected re-orderable item */
.fl-reorderer-movable-selected {
    background-color: lightyellow;
}

/* automatically applied as the mouse hovers over re-orderable item */
.fl-reorderer-movable-hover {
    background-color: lightyellow;
}

/* automatically applied the keyboard selected re-orderable item */
.fl-reorderer-movable-dragging {
    background: #ccc;
}

.fl-reorderer-avatar {
    cursor: move;
    filter: alpha(opacity=75);
    list-style-type: none;
    opacity: 0.75;
}

.fl-reorderer-dropWarning {
    background: #900 url('../images/themes/_common/exclamation.png') no-repeat 5px center;
    color: #fff;
    display: none;
    filter: alpha(opacity=100);
    opacity: 1;
    padding: 5px 25px;
}

/* DROP MARKER: different layouts might require different drop marker appearances */

/* Horizontal drop marker: designed for vertical layouts (default) */
.fl-reorderer-verticalLayout .fl-reorderer-dropMarker,
.fluid-vertical-order .fl-reorderer-dropMarker {
    background-color: #f00;
    border-width: 0;
    font-size: 0;
    height: 0;
    line-height: 0;
    list-style-type: none;
    margin: -2px 0 0 0;
    overflow: hidden;
    padding: 2px 0 0 0;
}

/* Vertical drop marker: designed for grid or horizontal layouts */
.fl-reorderer-horizontalLayout .fl-reorderer-dropMarker,
.fluid-horizontal-order .fl-reorderer-dropMarker {
    background-color: #f00;
    border-width: 0;
    list-style-type: none;
    margin: 0 -3px !important;
    overflow: hidden;
    padding: 0 3px;
    width: 0 !important;
}

/* Themed Appearance + States */