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