Quiz

1
html {
2
      height: 100%;
3
}
4

5
* {
6
      margin: 0;
7
      padding: 0;
8
}
9

10
body {
11
      font: normal .80em 'trebuchet ms', arial, sans-serif;
12
      background: #F0EFE2;
13
}
14

15
p {
16
      padding: 0 0 20px 0;
17
      line-height: 1.7em;
18
}
19

20
img {
21
      border: 0;
22
}
23

24
h1, h2, h3, h4, h5, h6 {
25
      font: normal 175% 'century gothic', arial, sans-serif;
26
      color: #43423F;
27
      margin: 0 0 15px 0;
28
      padding: 15px 0 5px 0;
29
}
30

31
h2 {
32
      font: normal 175% 'century gothic', arial, sans-serif;
33
      color: #1293EE;
34
}
35

36
h4, h5, h6 {
37
      margin: 0;
38
      padding: 0 0 5px 0;
39
      font: normal 120% arial, sans-serif;
40
      color: #1293EE;
41
}
42

43
h4 {
44
      margin-top: -5%;
45
}
46

47
h5, h6 {
48
      font: italic 95% arial, sans-serif;
49
      padding: 0 0 15px 0;
50
      color: #000;
51
}
52

53
h6 {
54
      color: #362C20;
55
}
56

57
a, a:hover {
58
      outline: none;
59
      text-decoration: none;
60
      color: #F05A00;
61
}
62

63
.left {
64
      float: left;
65
      width: auto;
66
      margin-right: 10px;
67
}
68

69
.right {
70
      float: right;
71
      width: auto;
72
      margin-left: 10px;
73
}
74

75
.center {
76
      display: block;
77
      text-align: center;
78
      margin: 20px auto;
79
}
80

81
blockquote {
82
      margin: 20px 0;
83
      padding: 10px 20px 0 20px;
84
      border: 1px solid #E5E5DB;
85
      background: #FFF;
86
}
87

88
ul {
89
      margin: 2px 0 22px 17px;
90
}
91

92
ul li {
93
      list-style-type: circle;
94
      margin: 0 0 6px 0;
95
      padding: 0 0 4px 5px;
96
}
97

98
ol {
99
      margin: 8px 0 22px 20px;
100
}
101

102
ol li {
103
      margin: 0 0 11px 0;
104
}
105

106
#main,
107
#logo,
108
#menubar,
109
#delimiter,
110
#site_content,
111
#footer
112
{
113
      margin-left: auto;
114
      margin-right: auto;
115
}
116

117
#header { background: #F79F00;
118
      height: 240px;
119
}
120

121
#logo { width: 825px;
122
      position: relative;
123
      height: 168px;
124
      background: #F79F00 url('/static/img/logo.png') no-repeat;
125
}
126

127
#logo #logo_text { position: absolute;
128
      top: 20px;
129
      left: 0;
130
}
131

132
#logo h1, #logo h2 { font: normal 300% 'century gothic', arial, sans-serif;
133
      border-bottom: 0;
134
      text-transform: none;
135
      margin: 0;
136
}
137

138
#logo_text h1,
139
#logo_text h1 a,
140
#logo_text h1 a:hover {
141
      padding: 22px 0 0 0;
142
      color: #FFF;
143
      letter-spacing: 0.1em;
144
      text-decoration: none;
145
}
146

147
#logo_text h1 a .logo_colour {
148
      color: #F05A00;
149
}
150

151
#logo_text h2 {
152
      font-size: 100%;
153
      padding: 4px 0 0 0;
154
      color: #FFF;
155
}
156

157
#menubar {
158
      width: 898px;
159
      height: 72px;
160
      padding: 0;
161
      background: #F05A00 url(https://www.html5webtemplates.co.uk/wp-content/uploads/2020/templates/colour_orange/style/menu.png) repeat-x;
162
}
163

164
#delimiter {
165
      width: 898px;
166
      font: normal 100% 'lucida sans unicode', arial, sans-serif;
167
      height: 33px;
168
      padding: 33px 0 5px 0;
169
      text-align: center;
170
      background: #F05A00 url(https://www.html5webtemplates.co.uk/wp-content/uploads/2020/templates/colour_orange/style/menu.png) repeat-x;
171
      color: #FFF;
172
      text-transform: uppercase;
173
      letter-spacing: 0.1em;
174
      display: flex;
175
      justify-content: space-around;
176
      position: relative;
177
}
178

179
#delimiter > a {
180
      color: #FFF;
181
}
182

183
ul#menu, ul#menu li {
184
      float: left;
185
      margin: 0;
186
      padding: 0;
187
}
188

189
ul#menu li {
190
      list-style: none;
191
}
192

193
ul#menu li a {
194
      letter-spacing: 0.1em;
195
      font: normal 100% 'lucida sans unicode', arial, sans-serif;
196
      display: block;
197
      float: left;
198
      height: 37px;
199
      padding: 29px 26px 6px 26px;
200
      text-align: center;
201
      color: #FFF;
202
      text-transform: uppercase;
203
      text-decoration: none;
204
      background: transparent;
205
}
206

207
ul#menu li a:hover,
208
ul#menu li.selected a,
209
ul#menu li.selected a:hover {
210
      color: #FFF;
211
      background: #F05A00 url('/static/img/menu_select.png') repeat-x;
212
}
213

214
#site_content {
215
      width: 837px;
216
      overflow: hidden;
217
      margin: 0 auto 0 auto;
218
      padding: 20px 24px 20px 37px;
219
      background: #FFF url('/static/img/content.png') repeat-y;
220
}
221

222
.sidebar {
223
      float: right;
224
      width: 190px;
225
      padding: 0 15px 20px 15px;
226
}
227

228
.sidebar ul {
229
      width: 178px;
230
      padding: 4px 0 0 0;
231
      margin: 4px 0 30px 0;
232
}
233

234
.sidebar li {
235
      list-style: none;
236
      padding: 0 0 7px 0;
237
}
238

239
.sidebar li a,
240
.sidebar li a:hover {
241
      padding: 0 0 0 40px;
242
      display: block;
243
      background: transparent url('/static/img/link.png') no-repeat left center;
244
}
245

246
.sidebar li a.selected {
247
      color: #444;
248
      text-decoration: none;
249
}
250

251
.sidebar a {
252
      text-decoration: none;
253
      color: #1293EE;
254
}
255

256
.sidebar a:hover {
257
      text-decoration: underline;
258
      color: #1293EE;
259
}
260

261
#index-content {
262
      text-align: left;
263
      width: 595px;
264
      padding: 0;
265
}
266

267
#index-content ul {
268
      margin: 2px 0 22px 0px;
269
}
270

271
#index-content ul li {
272
      list-style-type: none;
273
      background: url('/static/img/bullet.png') no-repeat;
274
      margin: 0 0 6px 0;
275
      padding: 0 0 4px 25px;
276
      line-height: 1.5em;
277
}
278

279
#index-content a:hover {
280
      text-decoration: none;
281
}
282

283
#footer {
284
      width: 898px;
285
      font: normal 100% 'lucida sans unicode', arial, sans-serif;
286
      height: 33px;
287
      padding: 24px 0 5px 0;
288
      text-align: center;
289
      background: #29425E url(https://www.html5webtemplates.co.uk/wp-content/uploads/2020/templates/colour_orange/style/footer.png) repeat-x;
290
      color: #FFF;
291
      text-transform: uppercase;
292
      letter-spacing: 0.1em;
293
}
294

295
#footer a {
296
      color: #FFF;
297
      text-decoration: none;
298
}
299

300
#footer a:hover {
301
      color: #FFF;
302
      text-decoration: underline;
303
}
304

305
.search {
306
      color: #5D5D5D;
307
      border: 1px solid #BBB;
308
      width: 134px;
309
      padding: 4px;
310
      font: 100% arial, sans-serif;
311
}
312

313
#colours {
314
      height: 0px;
315
      text-align: right;
316
      padding: 66px 16px 0px 300px;
317
}
318

319
.form_settings {
320
      margin: 15px 0 0 0;
321
}
322

323
.form_settings p {
324
      padding: 0 0 4px 0;
325
}
326

327
.form_settings span {
328
      float: left;
329
      width: 200px;
330
      text-align: left;
331
}
332

333
.form_settings input,
334
.form_settings textarea {
335
      padding: 5px;
336
      width: 299px;
337
      font: 100% arial;
338
      border: 1px solid #E5E5DB;
339
      background: #FFF;
340
      color: #47433F;
341
}
342

343
.form_settings .submit {
344
      font: 100% arial;
345
      border: 1px solid;
346
      width: 99px;
347
      height: 33px;
348
      text-decoration: none;
349
      display: flex;
350
      justify-content: center;
351
      align-items: center;
352
      cursor: pointer;
353
      background: #F05A00;
354
      color: #FFF;
355
      box-sizing: border-box;
356
}
357

358
.form_settings textarea,
359
.form_settings select {
360
      font: 100% arial;
361
      width: 299px;
362
}
363

364
.form_settings select {
365
      width: 310px;
366
}
367

368
.form_settings .checkbox {
369
      margin: 4px 0;
370
      padding: 0;
371
      width: 14px;
372
      border: 0;
373
      background: none;
374
}
375

376
.separator {
377
      width: 100%;
378
      height: 0;
379
      border-top: 1px solid #D9D5CF;
380
      border-bottom: 1px solid #FFF;
381
      margin: 0 0 20px 0;
382
}
383

384
table {
385
      margin: 10px 0 30px 0;
386
}
387

388
table tr th,
389
table tr td {
390
      background: #3B3B3B;
391
      color: #FFF;
392
      padding: 7px 4px;
393
      text-align: left;
394
}
395

396
table tr td {
397
      background: #F0EFE2;
398
      color: #47433F;
399
      border-top: 1px solid #FFF;
400
}
401

402
.container-buttons {
403
      margin-top: 20px;
404
      display: flex;
405
      width: 311px;
406
      margin-left: 200px;
407
      justify-content: space-between;
408
}
409

410
.lobby_invitation_block {
411
      display: none;
412
      position: absolute;
413
      bottom: 100%;
414
      right: 0;
415
      width: 100%;
416
      box-sizing: border-box;
417
      justify-content: space-around;
418
      padding: 5px 0;
419
      background-color: white;
420
      color: black;
421
}
422

423
.lobby_invitation_accept, .lobby_invitation_reject {
424
      cursor: pointer;
425
}
426

427
.header_friends_button {
428
      position: relative;
429
      cursor: pointer;
430
}
431

432
.header_friends_block {
433
      display: none;
434
      flex-direction: column;
435
      width: 150px;
436
      position: absolute;
437
      top: 100%;
438
      left: -50px;
439
      color: white;
440
      background-color: #F79F00;
441
      text-transform: none;
442
      cursor: default;
443
      z-index: 2;
444
}
445

446
.header_friends_add {
447
      padding: 5px;
448
      color: white;
449
}
450

451
.header_friend {
452
      display: flex;
453
      align-items: center;
454
      justify-content: space-between;
455
      padding: 5px;
456
      border-top: 1px solid gray;
457
}
458

459
.header_friend_icons {
460
      display: flex;
461
      align-items: center;
462
}
463

464
.header_friend_icon {
465
      width: 15px;
466
      margin-left: 5px;
467
      cursor: pointer;
468
}
469

470
.header_friend_invite {
471
      display: none;
472
}
473

474
.friend_chat_block {
475
      position: fixed;
476
      bottom: 5px;
477
      right: 5px;
478
      width: 300px;
479
      display: none;
480
      flex-direction: column;
481
      background-color: white;
482
      border: 1px solid #F79F00;
483
}
484

485
.friend_chat_top {
486
      padding: 3px;
487
      display: flex;
488
      justify-content: space-between;
489
      align-items: center;
490
      width: 100%;
491
      box-sizing: border-box;
492
      border-bottom: 1px solid #F79F00;
493
}
494

495
.friend_chat_messages {
496
      height: 170px;
497
      display: flex;
498
      flex-direction: column-reverse;
499
      align-items: center;
500
      overflow-y: auto;
501
      width: 100%;
502
}
503

504
.friend_chat_textarea {
505
      width: 100%;
506
      height: 30px;
507
      border: none;
508
      border-top: 1px solid #F79F00;
509
      box-sizing: border-box;
510
}
511

512
.friend_chat_close {
513
      cursor: pointer;
514
}
515

516
.chat_date {
517
      margin: 5px 0;
518
}
519

520
.chat_sent, .chat_received {
521
      display: flex;
522
      flex-direction: column;
523
      width: 100%;
524
      box-sizing: border-box;
525
      padding: 0 5px 5px;
526
}
527

528
.chat_sent {
529
      align-items: flex-end;
530
}
531

532
.chat_received {
533
      align-items: flex-start;
534
}
535

536
.chat_message_sender {
537
      margin: 5px 0 3px;
538
}
539

540
.chat_message_text {
541
      border: 1px solid #F79F00;
542
      border-radius: 5px;
543
      padding: 2px 5px;
544
      max-width: 60%;
545
      position: relative;
546
}
547

548
.chat_message_time {
549
      position: absolute;
550
      bottom: 0;
551
      font-size: 12px;
552
}
553

554
.chat_sent > .chat_message_text > .chat_message_time {
555
      right: calc(100% + 5px);
556
}
557

558
.chat_received > .chat_message_text > .chat_message_time {
559
      left: calc(100% + 5px);
560
}