1.que.ddimageortext .qtext {
2    margin-bottom: 0.5em;
3    display: block;
4}
5
6.que.ddimageortext div.ddarea,
7form.mform fieldset#id_previewareaheader div.ddarea {
8    text-align: center;
9}
10
11.que.ddimageortext div.droparea,
12form.mform fieldset#id_previewareaheader div.ddarea {
13    position: relative;
14}
15
16.que.ddimageortext div.droparea {
17    display: inline-block;
18}
19
20.que.ddimageortext div.droparea .draghome {
21    position: absolute;
22    cursor: move;
23    white-space: nowrap;
24}
25
26.que.ddimageortext div.droparea .dropzones {
27    position: absolute;
28    top: 0;
29    /*rtl:ignore*/
30    left: 0;
31}
32
33.que.ddimageortext .dropbackground,
34form.mform fieldset#id_previewareaheader .dropbackground {
35    border: 1px solid #000;
36    margin: 0 auto;
37}
38
39form.mform fieldset#id_previewareaheader .dropbackground {
40    max-width: none;
41}
42
43.que.ddimageortext .dropzone {
44    display: none;
45    position: absolute;
46    opacity: 0.5;
47    border: 1px solid black;
48}
49
50.que.ddimageortext .dropzone.active {
51    display: block;
52}
53
54.que.ddimageortext .dropzone:focus,
55.que.ddimageortext .droparea .draghome:focus,
56.que.ddimageortext .dropzone.valid-drag-over-drop,
57.que.ddimageortext .draghome.placed.valid-drag-over-drop {
58    border-color: #0a0;
59    box-shadow: 0 0 5px 5px rgba(255, 255, 150, 1);
60    outline: 0;
61}
62
63.que.ddimageortext .draghome,
64.que.ddimageortext .drag,
65form.mform fieldset#id_previewareaheader .droppreview {
66    border: 1px solid black;
67    display: inline-block;
68    font: 13px/1.231 arial, helvetica, clean, sans-serif;
69}
70
71.que.ddimageortext .draghomes .draghome {
72    vertical-align: top;
73    margin: 5px;
74    height: auto;
75    width: auto;
76    cursor: move;
77}
78
79.que.ddimageortext .draghomes.readonly .draghome,
80.que.ddimageortext .droparea.readonly .draghome {
81    cursor: auto;
82}
83
84.que.ddimageortext .draghomes .draghome.dragplaceholder {
85    display: none;
86}
87
88.que.ddimageortext .draghomes .draghome.dragplaceholder.active {
89    visibility: hidden;
90    display: inline-block;
91}
92
93.que.ddimageortext .dragitems,
94form.mform fieldset#id_previewareaheader .dragitems {
95    height: 0;
96}
97
98.que.ddimageortext .drag,
99form.mform fieldset#id_previewareaheader .droppreview {
100    position: absolute;
101    cursor: move;
102    white-space: nowrap;
103}
104
105.que.ddimageortext .dragitems.readonly .drag {
106    cursor: auto;
107}
108
109form.mform fieldset#id_previewareaheader .drag.beingdragged,
110.que.ddimageortext .drag.beingdragged,
111.que.ddimageortext .draghomes .draghome.beingdragged,
112.que.ddimageortext .droparea .draghome.beingdragged {
113    box-shadow: 3px 3px 4px #000;
114}
115
116.que.ddimageortext .draghomes .draghome.beingdragged,
117.que.ddimageortext .droparea .draghome.beingdragged {
118    position: absolute;
119}
120
121.que.ddimageortext .group1,
122form.mform fieldset#id_previewareaheader .group1 {
123    background-color: #fff;
124}
125
126.que.ddimageortext .group2,
127form.mform fieldset#id_previewareaheader .group2 {
128    background-color: #b0c4de;
129    border-radius: 10px 0 0 0;
130}
131
132.que.ddimageortext .group3,
133form.mform fieldset#id_previewareaheader .group3 {
134    background-color: #dcdcdc;
135    border-radius: 0 10px 0 0;
136}
137
138.que.ddimageortext .group4,
139form.mform fieldset#id_previewareaheader .group4 {
140    background-color: #d8bfd8;
141    border-radius: 0 0 10px 0;
142}
143
144.que.ddimageortext .group5,
145form.mform fieldset#id_previewareaheader .group5 {
146    background-color: #87cefa;
147    border-radius: 0 0 0 10px;
148}
149
150.que.ddimageortext .group6,
151form.mform fieldset#id_previewareaheader .group6 {
152    background-color: #daa520;
153    border-radius: 0 10px 10px 0;
154}
155
156.que.ddimageortext .group7,
157form.mform fieldset#id_previewareaheader .group7 {
158    background-color: #ffd700;
159    border-radius: 10px 0 0 10px;
160}
161
162.que.ddimageortext .group8,
163form.mform fieldset#id_previewareaheader .group8 {
164    background-color: #f0e68c;
165    border-radius: 10px 10px 10px 10px;
166}
167
168/* Editing form. Style repeated elements*/
169/*Top*/
170body#page-question-type-ddimageortext div[id^=fgroup_id_][id*=drags_] {
171    background: #eee;
172    margin-top: 0;
173    margin-bottom: 0;
174    padding-bottom: 5px;
175    padding-top: 5px;
176    border: 1px solid #bbb;
177    border-bottom: 0;
178}
179
180body#page-question-type-ddimageortext div[id^=fgroup_id_][id*=drags_] .fgrouplabel label {
181    font-weight: bold;
182}
183/* Middle */
184body#page-question-type-ddimageortext div[id^=fitem_id_][id*=dragitem_] {
185    background: #eee;
186    margin-bottom: 0;
187    margin-top: 0;
188    padding-bottom: 5px;
189    padding-top: 5px;
190    border: 1px solid #bbb;
191    border-top: 0;
192    border-bottom: 0;
193}
194/* Bottom */
195body#page-question-type-ddimageortext div[id^=fitem_id_][id*=draglabel_] {
196    background: #eee;
197    margin-bottom: 2em;
198    margin-top: 0;
199    padding-bottom: 5px;
200    padding-top: 5px;
201    border: 1px solid #bbb;
202    border-top: 0;
203}
204