Quiz
1html {2height: 100%;3}
4
5* {6margin: 0;7padding: 0;8}
9
10body {11font: normal .80em 'trebuchet ms', arial, sans-serif;12background: #F0EFE2;13}
14
15p {16padding: 0 0 20px 0;17line-height: 1.7em;18}
19
20img {21border: 0;22}
23
24h1, h2, h3, h4, h5, h6 {25font: normal 175% 'century gothic', arial, sans-serif;26color: #43423F;27margin: 0 0 15px 0;28padding: 15px 0 5px 0;29}
30
31h2 {32font: normal 175% 'century gothic', arial, sans-serif;33color: #1293EE;34}
35
36h4, h5, h6 {37margin: 0;38padding: 0 0 5px 0;39font: normal 120% arial, sans-serif;40color: #1293EE;41}
42
43h4 {44margin-top: -5%;45}
46
47h5, h6 {48font: italic 95% arial, sans-serif;49padding: 0 0 15px 0;50color: #000;51}
52
53h6 {54color: #362C20;55}
56
57a, a:hover {58outline: none;59text-decoration: none;60color: #F05A00;61}
62
63.left {64float: left;65width: auto;66margin-right: 10px;67}
68
69.right {70float: right;71width: auto;72margin-left: 10px;73}
74
75.center {76display: block;77text-align: center;78margin: 20px auto;79}
80
81blockquote {82margin: 20px 0;83padding: 10px 20px 0 20px;84border: 1px solid #E5E5DB;85background: #FFF;86}
87
88ul {89margin: 2px 0 22px 17px;90}
91
92ul li {93list-style-type: circle;94margin: 0 0 6px 0;95padding: 0 0 4px 5px;96}
97
98ol {99margin: 8px 0 22px 20px;100}
101
102ol li {103margin: 0 0 11px 0;104}
105
106#main,
107#logo,
108#menubar,
109#delimiter,
110#site_content,
111#footer
112{
113margin-left: auto;114margin-right: auto;115}
116
117#header { background: #F79F00;118height: 240px;119}
120
121#logo { width: 825px;122position: relative;123height: 168px;124background: #F79F00 url('/static/img/logo.png') no-repeat;125}
126
127#logo #logo_text { position: absolute;128top: 20px;129left: 0;130}
131
132#logo h1, #logo h2 { font: normal 300% 'century gothic', arial, sans-serif;133border-bottom: 0;134text-transform: none;135margin: 0;136}
137
138#logo_text h1,
139#logo_text h1 a,
140#logo_text h1 a:hover {141padding: 22px 0 0 0;142color: #FFF;143letter-spacing: 0.1em;144text-decoration: none;145}
146
147#logo_text h1 a .logo_colour {148color: #F05A00;149}
150
151#logo_text h2 {152font-size: 100%;153padding: 4px 0 0 0;154color: #FFF;155}
156
157#menubar {158width: 898px;159height: 72px;160padding: 0;161background: #F05A00 url(https://www.html5webtemplates.co.uk/wp-content/uploads/2020/templates/colour_orange/style/menu.png) repeat-x;162}
163
164#delimiter {165width: 898px;166font: normal 100% 'lucida sans unicode', arial, sans-serif;167height: 33px;168padding: 33px 0 5px 0;169text-align: center;170background: #F05A00 url(https://www.html5webtemplates.co.uk/wp-content/uploads/2020/templates/colour_orange/style/menu.png) repeat-x;171color: #FFF;172text-transform: uppercase;173letter-spacing: 0.1em;174display: flex;175justify-content: space-around;176position: relative;177}
178
179#delimiter > a {180color: #FFF;181}
182
183ul#menu, ul#menu li {184float: left;185margin: 0;186padding: 0;187}
188
189ul#menu li {190list-style: none;191}
192
193ul#menu li a {194letter-spacing: 0.1em;195font: normal 100% 'lucida sans unicode', arial, sans-serif;196display: block;197float: left;198height: 37px;199padding: 29px 26px 6px 26px;200text-align: center;201color: #FFF;202text-transform: uppercase;203text-decoration: none;204background: transparent;205}
206
207ul#menu li a:hover,
208ul#menu li.selected a,
209ul#menu li.selected a:hover {210color: #FFF;211background: #F05A00 url('/static/img/menu_select.png') repeat-x;212}
213
214#site_content {215width: 837px;216overflow: hidden;217margin: 0 auto 0 auto;218padding: 20px 24px 20px 37px;219background: #FFF url('/static/img/content.png') repeat-y;220}
221
222.sidebar {223float: right;224width: 190px;225padding: 0 15px 20px 15px;226}
227
228.sidebar ul {229width: 178px;230padding: 4px 0 0 0;231margin: 4px 0 30px 0;232}
233
234.sidebar li {235list-style: none;236padding: 0 0 7px 0;237}
238
239.sidebar li a,
240.sidebar li a:hover {241padding: 0 0 0 40px;242display: block;243background: transparent url('/static/img/link.png') no-repeat left center;244}
245
246.sidebar li a.selected {247color: #444;248text-decoration: none;249}
250
251.sidebar a {252text-decoration: none;253color: #1293EE;254}
255
256.sidebar a:hover {257text-decoration: underline;258color: #1293EE;259}
260
261#index-content {262text-align: left;263width: 595px;264padding: 0;265}
266
267#index-content ul {268margin: 2px 0 22px 0px;269}
270
271#index-content ul li {272list-style-type: none;273background: url('/static/img/bullet.png') no-repeat;274margin: 0 0 6px 0;275padding: 0 0 4px 25px;276line-height: 1.5em;277}
278
279#index-content a:hover {280text-decoration: none;281}
282
283#footer {284width: 898px;285font: normal 100% 'lucida sans unicode', arial, sans-serif;286height: 33px;287padding: 24px 0 5px 0;288text-align: center;289background: #29425E url(https://www.html5webtemplates.co.uk/wp-content/uploads/2020/templates/colour_orange/style/footer.png) repeat-x;290color: #FFF;291text-transform: uppercase;292letter-spacing: 0.1em;293}
294
295#footer a {296color: #FFF;297text-decoration: none;298}
299
300#footer a:hover {301color: #FFF;302text-decoration: underline;303}
304
305.search {306color: #5D5D5D;307border: 1px solid #BBB;308width: 134px;309padding: 4px;310font: 100% arial, sans-serif;311}
312
313#colours {314height: 0px;315text-align: right;316padding: 66px 16px 0px 300px;317}
318
319.form_settings {320margin: 15px 0 0 0;321}
322
323.form_settings p {324padding: 0 0 4px 0;325}
326
327.form_settings span {328float: left;329width: 200px;330text-align: left;331}
332
333.form_settings input,
334.form_settings textarea {335padding: 5px;336width: 299px;337font: 100% arial;338border: 1px solid #E5E5DB;339background: #FFF;340color: #47433F;341}
342
343.form_settings .submit {344font: 100% arial;345border: 1px solid;346width: 99px;347height: 33px;348text-decoration: none;349display: flex;350justify-content: center;351align-items: center;352cursor: pointer;353background: #F05A00;354color: #FFF;355box-sizing: border-box;356}
357
358.form_settings textarea,
359.form_settings select {360font: 100% arial;361width: 299px;362}
363
364.form_settings select {365width: 310px;366}
367
368.form_settings .checkbox {369margin: 4px 0;370padding: 0;371width: 14px;372border: 0;373background: none;374}
375
376.separator {377width: 100%;378height: 0;379border-top: 1px solid #D9D5CF;380border-bottom: 1px solid #FFF;381margin: 0 0 20px 0;382}
383
384table {385margin: 10px 0 30px 0;386}
387
388table tr th,
389table tr td {390background: #3B3B3B;391color: #FFF;392padding: 7px 4px;393text-align: left;394}
395
396table tr td {397background: #F0EFE2;398color: #47433F;399border-top: 1px solid #FFF;400}
401
402.container-buttons {403margin-top: 20px;404display: flex;405width: 311px;406margin-left: 200px;407justify-content: space-between;408}
409
410.lobby_invitation_block {411display: none;412position: absolute;413bottom: 100%;414right: 0;415width: 100%;416box-sizing: border-box;417justify-content: space-around;418padding: 5px 0;419background-color: white;420color: black;421}
422
423.lobby_invitation_accept, .lobby_invitation_reject {424cursor: pointer;425}
426
427.header_friends_button {428position: relative;429cursor: pointer;430}
431
432.header_friends_block {433display: none;434flex-direction: column;435width: 150px;436position: absolute;437top: 100%;438left: -50px;439color: white;440background-color: #F79F00;441text-transform: none;442cursor: default;443z-index: 2;444}
445
446.header_friends_add {447padding: 5px;448color: white;449}
450
451.header_friend {452display: flex;453align-items: center;454justify-content: space-between;455padding: 5px;456border-top: 1px solid gray;457}
458
459.header_friend_icons {460display: flex;461align-items: center;462}
463
464.header_friend_icon {465width: 15px;466margin-left: 5px;467cursor: pointer;468}
469
470.header_friend_invite {471display: none;472}
473
474.friend_chat_block {475position: fixed;476bottom: 5px;477right: 5px;478width: 300px;479display: none;480flex-direction: column;481background-color: white;482border: 1px solid #F79F00;483}
484
485.friend_chat_top {486padding: 3px;487display: flex;488justify-content: space-between;489align-items: center;490width: 100%;491box-sizing: border-box;492border-bottom: 1px solid #F79F00;493}
494
495.friend_chat_messages {496height: 170px;497display: flex;498flex-direction: column-reverse;499align-items: center;500overflow-y: auto;501width: 100%;502}
503
504.friend_chat_textarea {505width: 100%;506height: 30px;507border: none;508border-top: 1px solid #F79F00;509box-sizing: border-box;510}
511
512.friend_chat_close {513cursor: pointer;514}
515
516.chat_date {517margin: 5px 0;518}
519
520.chat_sent, .chat_received {521display: flex;522flex-direction: column;523width: 100%;524box-sizing: border-box;525padding: 0 5px 5px;526}
527
528.chat_sent {529align-items: flex-end;530}
531
532.chat_received {533align-items: flex-start;534}
535
536.chat_message_sender {537margin: 5px 0 3px;538}
539
540.chat_message_text {541border: 1px solid #F79F00;542border-radius: 5px;543padding: 2px 5px;544max-width: 60%;545position: relative;546}
547
548.chat_message_time {549position: absolute;550bottom: 0;551font-size: 12px;552}
553
554.chat_sent > .chat_message_text > .chat_message_time {555right: calc(100% + 5px);556}
557
558.chat_received > .chat_message_text > .chat_message_time {559left: calc(100% + 5px);560}