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