1.que.ddmarker .qtext {
2    margin-bottom: 0.5em;
3    display: block;
4}
5
6.que.ddmarker .droparea {
7    display: inline-block;
8    position: relative;
9}
10
11.que.ddmarker .droparea .dropzones,
12.que.ddmarker .droparea .markertexts {
13    position: absolute;
14    top: 0;
15    left: 0;
16}
17
18.que.ddmarker .draghomes .marker,
19.que.ddmarker .droparea .marker {
20    vertical-align: top;
21    cursor: move;
22}
23
24.que.ddmarker .draghomes.readonly .marker,
25.que.ddmarker .droparea.readonly .marker {
26    cursor: auto;
27}
28
29.que.ddmarker .droparea .marker {
30    position: absolute;
31}
32
33.que.ddmarker .draghomes .marker {
34    position: relative;
35    display: inline-block;
36    margin: 10px;
37}
38
39.que.ddmarker .draghomes .marker.dragplaceholder {
40    display: none;
41}
42
43.que.ddmarker .draghomes .marker.dragplaceholder.active {
44    visibility: hidden;
45    display: inline-block;
46}
47
48.que.ddmarker div.ddarea,
49form.mform fieldset#id_previewareaheader div.ddarea {
50    text-align: center;
51}
52
53form.mform fieldset#id_previewareaheader div.ddarea .markertexts {
54    min-height: 80px;
55}
56
57.que.ddmarker .dropbackground,
58form.mform fieldset#id_previewareaheader .dropbackground {
59    margin: 0 auto;
60    border: 1px solid black;
61}
62
63form.mform fieldset#id_previewareaheader .dropbackground {
64    max-width: none;
65}
66
67.que.ddmarker div.dragitems div.draghome,
68.que.ddmarker div.dragitems div.dragitem,
69form.mform fieldset#id_previewareaheader div.draghome,
70form.mform fieldset#id_previewareaheader div.drag {
71    font: 13px/1.231 arial, helvetica, clean, sans-serif;
72}
73
74.que.ddmarker .droparea .marker span.markertext,
75.que.ddmarker .draghomes .marker span.markertext,
76.que.ddmarker div.markertexts span.markertext,
77form.mform fieldset#id_previewareaheader div.markertexts span.markertext {
78    margin: 0 5px;
79    z-index: 3;
80    background-color: white;
81    border: 2px solid black;
82    padding: 5px;
83    display: inline-block;
84    zoom: 1;
85    border-radius: 10px;
86    color: black;
87    opacity: 0.6;
88}
89
90.que.ddmarker .droparea .marker span.markertext,
91.que.ddmarker .draghomes .marker span.markertext {
92    white-space: nowrap;
93}
94
95.que.ddmarker div.markertexts span.markertext {
96    z-index: 2;
97    background-color: yellow;
98    border: 2px solid khaki;
99    position: absolute;
100    white-space: nowrap;
101}
102
103.que.ddmarker span.wrongpart {
104    background-color: yellow;
105    border: 2px solid khaki;
106    padding: 5px;
107    border-radius: 10px;
108    opacity: 0.6;
109    margin: 5px;
110    display: inline-block;
111}
112
113.que.ddmarker .droparea .marker img.target,
114.que.ddmarker .draghomes .marker img.target {
115    position: absolute;
116    left: -7px; /* This must be half the size of the target image, minus 0.5. */
117    top: -7px;  /* In other words, this works for a 15x15 cross-hair. */
118}
119
120.que.ddmarker div.dragitems div.draghome img.target {
121    display: none;
122}
123
124.que.ddmarker .marker.beingdragged {
125    position: absolute;
126}
127
128.que.ddmarker .marker.beingdragged span.markertext {
129    z-index: 3;
130    box-shadow: 3px 3px 4px #000;
131}
132
133/* Styles for the preview on the editing form. */
134.que.ddmarker .dropzone .shape {
135    fill: #fff;
136    fill-opacity: 0.5;
137    stroke: black;
138    stroke-width: 1;
139}
140.que.ddmarker .dropzone.active .shape {
141    stroke-width: 2;
142}
143.que.ddmarker .dropzone.color0 .shape {
144    fill: #fff;
145}
146.que.ddmarker .dropzone.color1 .shape {
147    fill: #b0c4de;
148}
149.que.ddmarker .dropzone.color2 .shape {
150    fill: #dcdcdc;
151}
152.que.ddmarker .dropzone.color3 .shape {
153    fill: #d8bfd8;
154}
155.que.ddmarker .dropzone.color4 .shape {
156    fill: #87cefa;
157}
158.que.ddmarker .dropzone.color5 .shape {
159    fill: #daa520;
160}
161.que.ddmarker .dropzone.color6 .shape {
162    fill: #ffd700;
163}
164.que.ddmarker .dropzone.color7 .shape {
165    fill: #f0e68c;
166}
167
168.que.ddmarker .dropzone .shapeLabel {
169    text-anchor: middle;
170}
171
172.que.ddmarker .dropzone .handle {
173    fill: #fff;
174    fill-opacity: 0.1; /* Need a small amount of opacity of the handle can't be grabbed. */
175    stroke-width: 1;
176    display: none;
177    cursor: move;
178}
179.que.ddmarker .dropzone .handle.move {
180    stroke: #800;
181}
182.que.ddmarker .dropzone .handle.edit {
183    stroke: #008;
184}
185.que.ddmarker .dropzone.active .handle {
186    display: inherit;
187}
188
189/* Editing form. Style repeated elements*/
190/*Top*/
191body#page-question-type-ddmarker div[id^=fitem_id_][id*=hint_] {
192    background: #eee;
193    margin-top: 0;
194    margin-bottom: 0;
195    padding-bottom: 5px;
196    padding-top: 5px;
197    border: 1px solid #bbb;
198    border-bottom: 0;
199}
200
201body#page-question-type-ddmarker div[id^=fitem_id_][id*=hint_] .fitemtitle {
202    font-weight: bold;
203}
204/* Middle */
205body#page-question-type-ddmarker div[id^=fitem_id_][id*=hintoptions_],
206body#page-question-type-ddmarker div[id^=fitem_id_][id*=hintshownumcorrect_] {
207    background: #eee;
208    margin-bottom: 0;
209    margin-top: 0;
210    padding-bottom: 5px;
211    padding-top: 5px;
212    border: 1px solid #bbb;
213    border-top: 0;
214    border-bottom: 0;
215}
216/* Bottom */
217body#page-question-type-ddmarker div[id^=fitem_id_][id*=hintclearwrong_] {
218    background: #eee;
219    margin-bottom: 2em;
220    margin-top: 0;
221    padding-bottom: 5px;
222    padding-top: 5px;
223    border: 1px solid #bbb;
224    border-top: 0;
225}
226
227body#page-question-type-ddmarker #fitem_id_penalty {
228    margin-bottom: 2em;
229}
230
231body#page-question-type-ddmarker .ddarea.que.ddmarker {
232    overflow-y: scroll;
233}
234