/* Styles for the initial layout of the question. */

/* Ensure container covers the draggable items. */
.que.ordering div.answer.ordering {
    overflow: auto;
}

.que.ordering .sortablelist {
    float            : left;
    list-style-type  : none;
    margin           : 0 0 0 8px;
}
.que.ordering .sortablelist.active {
    border           : 1px dotted #333;
    border-radius    : 4px;
}

.que.ordering .sortablelist li {
    background-color : #ffffff;
    border           : 1px solid #000;
    border-radius    : 4px;
    list-style-type  : none;
    margin           : 4px;
    padding          : 6px 12px;
}

.que.ordering .sortablelist li.sortableitem {
    position         : relative;
    cursor           : move;
    margin-left      : 26px; /* The margin is needed for the list-style-type in numberingxxx classes */
}
.que.ordering .sortablelist li.sortableitem:focus {
    border-color: #0a0;
    box-shadow: 0 0 5px 5px rgba(255, 255, 150, 1);
}

.que.ordering .sortablelist.numbering123 li,
.que.ordering .sortablelist.numberingabc li,
.que.ordering .sortablelist.numberingABCD li,
.que.ordering .sortablelist.numberingiii li,
.que.ordering .sortablelist.numberingIIII li {
    margin-left: 26px; /* The margin is needed for the list-style-type in numberingxxx classes */
}

.que.ordering .sortablelist.numberingnone li {
    list-style-type  : none;
    margin-left: 0px;
}
.que.ordering .sortablelist.numbering123 li {
    list-style-type  : decimal;
}
.que.ordering .sortablelist.numberingabc li {
    list-style-type  : lower-alpha;
}
.que.ordering .sortablelist.numberingABCD li {
    list-style-type  : upper-alpha;
}
.que.ordering .sortablelist.numberingiii li {
    list-style-type  : lower-roman;
}
.que.ordering .sortablelist.numberingIIII li {
    list-style-type  : upper-roman;
}

.que.ordering .sortablelist.horizontal li {
    float            : left;
}
.que.ordering .sortablelist.vertical li {
    min-height       : 18px;
}

/* Styles for when things are being dragged. */
.que.ordering.dragproxy {
    margin: 0;
    padding: 0;
    border: 0 none;
}
.que.ordering.dragproxy .sortablelist {
    margin: 0;
    padding: 0;
    float: none;
}
.que.ordering.dragproxy .sortablelist li {
    margin: 0;
    padding: 6px 0 6px 12px;
    width: 100%;
}
.que.ordering.dragproxy .sortablelist li.horizontal {
    float: none;
}
.item-moving {
    box-shadow: 3px 3px 4px #000;
}
.current-drop {
    visibility: hidden;
}


/* Styles for feedback. */
.que.ordering .sortablelist.notactive li.correct {
    background-color : #dff4d8; /* light green */
    border-color     : #99ff66; /* gentle green */
}
.que.ordering .sortablelist.notactive li.partial66 {
    background-color : #dff4d8; /* light green */
    border-color     : #ff9900; /* dark  orange */
}
.que.ordering .sortablelist.notactive li.partial33 {
    background-color : #ffebcc; /* light orange */
    border-color     : #ff9900; /* dark orange */
}
.que.ordering .sortablelist.notactive li.partial00 {
    background-color : #ffdddd; /* light red */
    border-color     : #ff9900; /* dark orange */
}
.que.ordering .sortablelist.notactive li.incorrect {
    background-color : #ffdddd; /* light red */
    border-color     : #ff7373; /* gentle red */
}
/*
    Force containing DIV to cover the floating LI elements
    Note: if you add "overflow:auto;  to "ol.correctorder"
    then the numbers for the <LI> elements disappear !!
*/
.que.ordering div.rightanswer {
    overflow: auto;
}
.que.ordering div.rightanswer ol.correctorder li.horizontal {
    float            : left;
    margin-left      : 24px;
    margin-right     : 24px;
}
.que.ordering div.rightanswer ol.correctorder li.horizontal:first-child {
    margin-left      : 0;
}
.que.ordering div.rightanswer ol.correctorder li.vertical {
}

/* the width restriction can be limited to editors for draggable items
   by inserting "fieldset:nth-child(n+4)" before "div.feditor" */
#page-question-type-ordering form.mform fieldset:nth-child(n+4) div.feditor {
    max-width: 480px;
}