n@920
|
1 /* structure.css
|
n@920
|
2 * Define the structure for classes and objects in HTML
|
n@920
|
3 */
|
n@920
|
4
|
n@920
|
5 div.title {
|
n@920
|
6 width: 100%;
|
n@920
|
7 height: 50px;
|
n@920
|
8 margin-bottom: 10px;
|
n@920
|
9 font-size: 2em;
|
n@920
|
10 }
|
n@920
|
11
|
n@920
|
12 div.indicator-box {
|
n@920
|
13 position: absolute;
|
n@920
|
14 left: 150px;
|
n@920
|
15 top: 10px;
|
n@920
|
16 width: 300px;
|
n@920
|
17 height: 60px;
|
n@920
|
18 padding: 20px;
|
n@920
|
19 border-radius: 10px;
|
n@920
|
20 background-color: rgb(100,200,200);
|
n@920
|
21 }
|
n@920
|
22
|
n@920
|
23 div.comment-div {
|
n@1178
|
24 border:1px solid #444444;
|
n@855
|
25 max-width: 600px;
|
n@854
|
26 min-width: 400px;
|
n@920
|
27 float: left;
|
n@1178
|
28 margin: 5px 10px 5px 5px;
|
n@1026
|
29 height: 90px;
|
n@1178
|
30 border-radius: 10px;
|
n@920
|
31 }
|
n@920
|
32
|
n@920
|
33 div.comment-div span {
|
n@920
|
34 margin-left: 15px;
|
n@920
|
35 }
|
n@920
|
36
|
n@920
|
37 div.popupHolder {
|
n@920
|
38 width: 500px;
|
n@856
|
39 min-height: 250px;
|
n@856
|
40 max-height: 400px;
|
n@920
|
41 background-color: #fff;
|
n@920
|
42 border-radius: 10px;
|
n@920
|
43 box-shadow: 0px 0px 50px #000;
|
n@920
|
44 z-index: 2;
|
n@1179
|
45 position: absolute;
|
n@1179
|
46 }
|
n@1179
|
47
|
n@1179
|
48 div#popupContent {
|
n@1179
|
49 margin-top: 20px;
|
n@1259
|
50 margin-bottom: 35px;
|
n@1179
|
51 }
|
n@1179
|
52
|
n@1179
|
53 div#popupTitle {
|
n@1179
|
54 width: inherit;
|
n@1179
|
55 min-height: 25px;
|
n@1179
|
56 max-height: 250px;
|
n@1179
|
57 overflow: auto;
|
n@1179
|
58 margin-bottom: 5px;
|
n@1179
|
59 }
|
n@1179
|
60
|
n@1179
|
61 div#popupResponse {
|
n@1179
|
62 width: inherit;
|
n@1179
|
63 min-height: 50px;
|
n@1179
|
64 max-height: 320px;
|
n@1179
|
65 overflow: auto;
|
n@1182
|
66 position: relative;
|
n@920
|
67 }
|
n@920
|
68
|
n@920
|
69 button.popupButton {
|
n@920
|
70 /* Button for popup window
|
n@920
|
71 */
|
n@920
|
72 width: 50px;
|
n@920
|
73 height: 25px;
|
n@1171
|
74 position: absolute;
|
n@920
|
75 border-radius: 5px;
|
n@920
|
76 border: #444;
|
n@920
|
77 border-width: 1px;
|
n@920
|
78 border-style: solid;
|
n@920
|
79 background-color: #fff;
|
n@920
|
80 }
|
n@920
|
81
|
n@1270
|
82 div.popup-option-checbox {
|
n@1270
|
83 /* Popup window checkbox */
|
n@1270
|
84 padding: 5px;
|
n@1270
|
85 width: fit-content;
|
n@1270
|
86 width: -moz-fit-content;
|
n@1270
|
87 width: -webkit-fit-content;
|
n@1270
|
88 }
|
n@1270
|
89
|
n@1270
|
90 div.popup-option-checbox input{
|
n@1270
|
91 /* Popup window checkbox */
|
n@1270
|
92 margin-right: 15px;
|
n@1270
|
93 }
|
n@1270
|
94
|
n@1171
|
95 button#popup-proceed {
|
n@1171
|
96 bottom: 10px;
|
n@1171
|
97 right: 10px;
|
n@1171
|
98 }
|
n@1171
|
99
|
n@1171
|
100 button#popup-previous {
|
n@1171
|
101 bottom: 10px;
|
n@1171
|
102 left: 10px;
|
n@1171
|
103 }
|
n@1171
|
104
|
n@749
|
105 div.testHalt {
|
n@749
|
106 /* Specify any colouring during the test halt for pre/post questions */
|
n@749
|
107 background-color: rgba(0,0,0,0.5);
|
n@749
|
108 /* Don't mess with this bit */
|
n@749
|
109 z-index: 2;
|
n@749
|
110 width: 100%;
|
n@749
|
111 height: 100%;
|
n@749
|
112 position: absolute;
|
n@749
|
113 left: 0px;
|
n@749
|
114 top: 0px;
|
n@749
|
115 }
|
n@749
|
116
|
n@1269
|
117 button.outside-reference {
|
n@1269
|
118 width:120px;
|
n@1269
|
119 height:20px;
|
n@1269
|
120 margin-bottom:5px;
|
n@1269
|
121 position: absolute;
|
n@1269
|
122 }
|
n@1269
|
123
|
n@920
|
124 textarea.trackComment {
|
n@855
|
125 max-width: 594px;
|
n@854
|
126 min-width: 350px;
|
n@855
|
127 max-height: 60px;
|
n@1178
|
128 resize: none;
|
n@920
|
129 }
|
n@894
|
130
|
n@894
|
131 div.playhead {
|
n@894
|
132 width: 500px;
|
n@894
|
133 height: 50px;
|
n@894
|
134 background-color: #eee;
|
n@894
|
135 border-radius: 10px;
|
n@894
|
136 padding: 10px;
|
n@894
|
137 }
|
n@894
|
138
|
n@894
|
139 div.playhead-scrub-track {
|
n@894
|
140 width: 100%;
|
n@894
|
141 height: 10px;
|
n@894
|
142 border-style: solid;
|
n@894
|
143 border-width: 1px;
|
n@894
|
144 }
|
n@894
|
145
|
n@894
|
146 div#playhead-scrubber {
|
n@894
|
147 width: 10px;
|
n@894
|
148 height: 10px;
|
n@894
|
149 position: relative;
|
n@894
|
150 background-color: #000;
|
n@894
|
151 }
|
n@1154
|
152
|
n@1154
|
153 div#master-volume-holder {
|
n@1154
|
154 width: 250px;
|
n@1154
|
155 float: left;
|
n@1155
|
156 border: black 1px solid;
|
n@1155
|
157 border-radius: 5px;
|
n@1155
|
158 padding: 5px;
|
n@1154
|
159 }
|
n@1154
|
160
|
n@1154
|
161 input#master-volume-control {
|
n@1154
|
162 width: 200px;
|
n@1154
|
163 height: 25px;
|
n@1154
|
164 float: left;
|
n@1154
|
165 margin: 0px;
|
n@1154
|
166 padding: 0px;
|
n@1154
|
167 }
|
n@1154
|
168
|
n@1154
|
169 span#master-volume-feedback {
|
n@1154
|
170 width: 45px;
|
n@1154
|
171 height: 25px;
|
n@1154
|
172 margin-left: 5px;
|
n@1154
|
173 float: left;
|
n@1205
|
174 }
|
n@1205
|
175
|
n@1205
|
176 div.error-colour {
|
n@1205
|
177 background-color: #FF8F8F;
|
n@1205
|
178 }
|
n@1205
|
179 button.error-colour {
|
n@1205
|
180 background-color: #FF8F8F;
|
n@1205
|
181 color: black;
|
n@1278
|
182 }
|
n@1278
|
183
|
n@1278
|
184 div.calibration-holder {
|
n@1278
|
185 text-align: center;
|
n@1278
|
186 align-content: center;
|
n@1278
|
187 height: auto;
|
n@1278
|
188 }
|
n@1278
|
189
|
n@1278
|
190 div.calibration-slider {
|
n@1278
|
191 width: 50px;
|
n@1278
|
192 margin: 2px;
|
n@1278
|
193 text-align: center;
|
n@1278
|
194 align-content: center;
|
n@1278
|
195 float: left;
|
n@1278
|
196 }
|
n@1278
|
197
|
n@1278
|
198 div.calibration-slider input[type=range][orient=vertical]
|
n@1278
|
199 {
|
n@1278
|
200 writing-mode: bt-lr; /* IE */
|
n@1278
|
201 -webkit-appearance: slider-vertical; /* WebKit */
|
n@1278
|
202 width: 8px;
|
n@1278
|
203 padding: 0 5px;
|
n@1278
|
204 color: rgb(255, 144, 144);
|
n@1154
|
205 } |