
.demo-layoutReorderer-container {
    background-color: #ccd3ff;
    margin-top: 3em;
    overflow: auto;
    padding: 5px;
    width: 95%;
}

.demo-layoutReorderer-container h2 {
    margin-top: 0;
}

.demo-layoutReorderer-container ul li {
    padding-bottom: 0.5em;
}

.demo-layoutReorderer-module,
.demo-layoutReorderer-locked {
    background-color: #fff;
    border: 1px solid #808285;
    margin: 6px;
}

.demo-layoutReorderer-module-dragbar {
    background-color: #a5cfef;
    background-image: url("../images/move.png");
    background-position: right 1px center;
    background-repeat: no-repeat;

    /* dragbar is the bar on top of each module */
    cursor: move;
    padding: 4px;
}

.demo-layoutReorderer-locked .demo-layoutReorderer-module-dragbar {
    background-color: #fff;
    background-image: url("../images/locked.png");
    background-position: right 1px center;

    /* Locked module */
    cursor: default;
}

.demo-layoutReorderer-leftColumn,
.demo-layoutReorderer-rightColumn {
    width: 25%;
}

.demo-layoutReorderer-centerColumn {
    width: 50%;
}

/*
 * demo-module-content is the box below the dragbar, which contains the
 * actual content of the module
 */
.demo-layoutReorderer-module-content {
    overflow: auto;
    padding: 6px;
    width: 95%;
}

.demo-layoutReorderer-module-content img {
    border: 1px solid #afafaf;
    float: left;
    margin-right: 10px;
    width: 30%;
}

.demo-layoutReorderer-movable-hover,
.demo-layoutReorderer-movable-selected {
    outline: 2px solid #000;
}

.demo-layoutReorderer-list-emphasis {
    font-weight: bold;
}

/**
 * Interaction styling.
 */

.demo-layoutReorderer-avatar {
    background-color: #9fff9f;
    filter: alpha(opacity=50); /* ie opacity fix */
    opacity: 0.5;
    outline: 2px solid #000;
}

.demo-layoutReorderer-avatar .demo-layoutReorderer-module-dragbar,
.demo-layoutReorderer-avatar .demo-layoutReorderer-module-content {
    /* hide contents of the module's avatar, while dragging. */
    visibility: hidden;
}

.demo-layoutReorderer-movable-dragging {
    margin: 6px 2px 6px 12px;
}

.demo-layoutReorderer-movable-mousedrag {
    /* hide the original module while being dragged. */
    display: none;
}

.demo-layoutReorderer-dropMarker {
    background-color: #00a651;
    height: 3px;
    margin-left: 1em;
    margin-right: 1em;
    padding: 0 0 0 0;
}

.demo-layoutReorderer-dropWarning {
    background-color: #fff;
    background-image: url('../images/info.png');
    background-position: left center;
    background-repeat: no-repeat;
    border: 3px solid black;
    display: none;
    padding: 5px 30px;
    width: 250px;
    z-index: 10;
}
