Järjestelmäviesti:Common.css

  1 /* Tämä sivu sisältää koko sivustoa muuttavia tyylejä. */
  2 body {
  3 	cursor: default;
  4 	font-family: sans-serif;
  5 	--bg1: #d8e9fc;
  6 	--bg2: #f2f5fd;
  7 }
  8 body.theme-dark {
  9 	--bg1: #031021;
 10 	--bg2: #093977;
 11 }
 12 
 13 .sitenotice-nav { display: none; }
 14 
 15 /* Fix size issues between different platforms */
 16 code, pre { font-size: 10pt !important; }
 17 
 18 /* Class to force links to be underlined
 19 To use: <span class="underlinelink">[[link]]</span> */
 20 .underlinelink a { text-decoration: underline !important; }
 21 
 22 /* Class to force links to be not underlined - See .underlinelink for use */
 23 .nounderlinelink a { text-decoration: none !important; }
 24 .nounderlinelink a:hover { text-decoration: underline !important; }
 25 
 26 /* buttons and input boxes */
 27 input[type="submit"] {
 28 	border: 1px solid #aaa;
 29 	border-bottom: 2px solid #aaa;
 30 	border-right: 2px solid #aaa;
 31 	background: #eee;
 32 }
 33 input[type="text"], input[type="password"], textarea[name="wpTextbox1"] {
 34 	border: 1px solid #aaa;
 35 	border-top: 2px solid #aaa;
 36 	border-left: 2px solid #aaa;
 37 }
 38 
 39 /* pre style override */
 40 pre.nostyle {
 41 	padding: 0;
 42 	margin: 0;
 43 	border: none;
 44 	background: none;
 45 }
 46 
 47 pre.wrap {
 48 	word-wrap: break-word;       /* Internet Explorer 5.5+ */
 49 	white-space: pre-wrap;       /* css-3 */
 50 }
 51 
 52 /* this class can be used in the content area to make a link appear like a new page link */
 53 #bodyContent .redlink a { color: #ba0000; }
 54 #bodyContent .redlink a.new:visited { color: #a55858; }
 55 
 56 /* Infobox template styling */
 57 .infobox {
 58 	float: right;
 59 	clear: right;
 60 	margin: 0 0 .5em 1em;
 61 	width: 250px;
 62 	background: none;
 63 	border-collapse: collapse;
 64 	border-width: 0;
 65 	font-size: 0.8em;
 66 	line-height: 1.5;
 67 }
 68 .infobox table.infoboxtable {
 69 	background: #f0f0f0;
 70 	color: #222;
 71 	float: right;
 72 	margin: 0;
 73 	width: 100%;
 74 	border-collapse: collapse;
 75 	border-radius: 5px 5px 0 0;
 76 }
 77 .theme-dark .infobox table.infoboxtable {
 78 	background: #0f1f5f;
 79 	color: #ddd;
 80 }
 81 .infobox td.infoboximage {
 82 	padding: 0;
 83 	text-align: center;
 84 }
 85 .infobox th.infoboxheading {
 86 	font-weight: bold;
 87 	text-align: center;
 88 	color: #fff;
 89 	font-size: larger;
 90 }
 91 .infobox tr:first-child th.infoboxheading {
 92 	border-radius: 0.5em 0.5em 0 0;
 93 }
 94 .infobox th.infoboxsubheading {
 95 	vertical-align: top;
 96 	text-align: left;
 97 	color: #222;
 98 	font-weight: normal;
 99 }
100 .infobox td.infoboxlabel, .infobox td.infoboxcell {
101 	vertical-align: middle;
102 }
103 
104 /* ugly hack to force normal height for infobox cells */
105 .infoboxcell p {
106 	margin-top: 0;
107 	margin-bottom: 0;
108 }
109 /* .infoboxcell ul { list-style-type: disc; } */
110 
111 .infoboxcell ul {
112 	padding-left: 10px;
113 	margin-left: 10px;
114 }
115 
116 .infoboxcell ul li {
117 	padding-left: 0;
118 	margin-left: 0;
119 	list-style-type: square;
120 }
121 
122 /* Fix to hide random extra lines in infobox subheaders. */
123 .infoboxsubheading p {
124 	display: none;
125 }
126 
127 .infoboxtable tr:nth-child(even) { background-color: #F9F9F9 }
128 .theme-dark .infoboxtable tr:nth-child(even) { background-color: #071757 }
129 
130 /* Tietolaatikon alaosa, eli se, joka sisältää [lähde]-linkin */
131 .infoboxfooter {
132 	color: #fff;
133 	border-radius: 0.5em;
134 }
135 
136 .infobox .infoboxfooter a,
137 .infobox .infoboxfooter a:visited {
138 	color: #f0f0f0;
139 }
140 
141 /* toistaiseksi koekäytössä tapahtumamallineissa, katsotaan toimivatko tavutukset oikein //--miki-- 26.7.2024 */
142 .infoboxtable .infoboxtable {
143 	-webkit-hyphens: auto;
144 	hyphens: auto; 
145 }
146 
147 /* class for stub template styling */
148 /* only applies to table and div elements - avoids conflicts with preexisting a.stub */
149 table.stub, div.stub {
150 	background: var(--bg1);
151 	margin: 0 0 0.5em 0.5em;
152 	text-align: center;
153 	padding: 5px;
154 	border-radius: 5px;
155 	clear: center;
156 	width: calc(100% - 350px - 1.5em);
157 }
158 
159 /* class for article disambiguation templates */
160 .disambig {
161 	background: var(--bg2);
162 	font-size: 0.85em;
163 	text-align: center;
164 	width: 85%;
165 	margin: 0 auto 3px auto;
166 	padding: 5px 0 5px 0;
167 	border-radius: 5px;
168 }
169 
170 /* styling for MediaWiki:Edittools */
171 #edittools, #editpage-specialchars {
172 	border: 2px solid #F0F0F0;
173 	background: #F9F9F9;
174 }
175 .theme-dark #edittools, .theme-dark #editpage-specialchars {
176 	background: #093977;
177 }
178 
179 /* Sivukohtainen CSS */
180 body.page-Etusivu #lastmod,
181 body.page-Etusivu #siteSub,
182 body.page-Etusivu #contentSub,
183 body.page-Etusivu h1.firstHeading,
184 body.page-Etusivu h1.pagetitle,
185 body.page-Etusivu p.subtitle {
186 	display: none !important;
187 }
188 
189 /* Allow limiting of which header levels are shown in a TOC; <div class="toclimit-3">, for
190    instance, will limit to showing ==headings== and ===headings=== but no further (as long as
191    there are no =headings= on the page, which there shouldn't be according to the MoS). */
192 .toclimit-2 ul ul {display:none;}
193 .toclimit-3 ul ul ul {display:none;}
194 .toclimit-4 ul ul ul ul {display:none;}
195 .toclimit-5 ul ul ul ul ul {display:none;}
196 .toclimit-6 ul ul ul ul ul ul {display:none;}
197 .toclimit-7 ul ul ul ul ul ul ul {display:none;}
198 
199 /* Drop-down box functionality */
200 #dropd { text-align:center; }
201 #dropd ul {
202 	background: var(--bg1);
203 	padding: 0 10px;
204 	border-radius: 15px;
205 	margin: 0 5px;
206 	list-style: none;
207 	position: relative;
208 	display: inline-block;
209 }
210 #dropd ul li:hover {
211 	background: #FFFFFF;
212 	border-radius: 5px;
213 }
214 #dropd ul li:hover > ul { display: block; }
215 #dropd ul li a { text-decoration: none; }
216 #dropd ul ul {
217 	display: none;
218 	background: #bababa;
219 	border-radius: 15px;
220 	padding: 7px 7px;
221 	position: absolute;
222 	z-index: 100;
223 	max-width: 600px;
224 }
225 #dropd ul ul li:hover { background: #FFFFFF; }
226 
227 li.topmenu {
228 	display: inline-block;
229 	padding: 3px 5px;
230 }
231 .imglist {
232 	display: inline-block;
233 	font-size: 0;
234 	padding: 7px 0;
235 }
236 .reglist {
237 	font-size: 10pt;
238 	text-align: left;
239 	padding: 2px 2px;
240 	list-style: none;
241 }
242 .imglistreg {
243 	font-size: 10pt;
244 	padding: 7px 0;
245 	margin: 10px;
246 }
247 .imglist {
248 	display: inline-block;
249 	font-size: 0;
250 	padding: 7px 0;
251 }
252 .reglist a { padding: 2px 5px; }
253 .imglist-w a { padding: 2px 0; }
254 .imglist-h a { padding: 2px 0; }
255 
256 /* Alignment tweaks for the classes used on the Main Page dropdowns */
257 .alignleft { left: 0; }
258 .alignright { right: 0; }
259 
260 /* Formatting for the Characters dropdown on the Main Page */
261 #icongallery {
262 	padding: 0 5px;
263 	border-radius: 12px;
264 	list-style: none;
265 	position: relative;
266 }
267 #icongallery > li {
268 	display: inline-block;
269 	padding: 3px 1px;
270 }
271 
272 /* limits max width of infobox and Main Page dropdown images to the template's defined max width */
273 .infoboximage img {
274 	max-width: 100%;
275 	height: auto;
276 }
277 .imglist-h img {
278 	max-height: 100%;
279 	width: auto;
280 }
281 .imglist-w img {
282 	max-width: 100%;
283 	height: auto;
284 }
285 
286 /* Lähdeviittausten lista pienemmäksi */
287 .references-small { font-size: 0.85em; }
288 
289 #mp3-global {
290 	padding: 8px;
291 	margin-top: 1em;
292 	font-size: 10pt;
293 	display: flex;
294 }
295 
296 #mp3-global ul {
297 	padding-left: 10px;
298 	margin-left: 10px;
299 }
300 
301 #mp3-global ul li {
302 	padding-left: 0;
303 	margin-left: 0;
304 	list-style-type: square;
305 }
306 
307 #mp3-navlink #mp3-nav { display: none; }
308 
309 #mp3-navlink {
310 	font-size: 1.1em;
311 	margin: auto;
312 	max-width: 600px;
313 }
314 
315 #mp-leftcol {
316 	width: 70%;
317 }
318 
319 #mp-rightcol {
320 	width: 30%;
321 }
322 
323 .hoverable .hoverable-inner {
324 	display: none;
325 	position: absolute;
326 	top: auto;
327 	text-align: left;
328 }
329 
330 .hoverable:hover .hoverable-inner {
331 	display: inline;
332 }
333 
334 /* class for message box template styling */
335 .messagebox {
336 	clear: both;
337 	width: 85%;
338 	margin: 0 auto 3px auto;
339 	padding: 3px;
340 	font-size: 95%;
341 	border: none;
342 }
343 
344 /* in-universe and out-of-universe message boxes */
345 .iumb, .ooumb {
346 	border-width: 0;
347 	text-align:left;
348 	padding: 0;
349 	border-radius: 0.5em;
350 }
351 
352 .iumb table, .ooumb table {
353 	padding: 5px 10px 5px 10px;
354 	background: transparent;
355 	/*color: inherit;*/
356 }
357 
358 .iumb table.hidable-content, .ooumb table.hidable-content {
359 	padding: 0;
360 }
361 
362 .iumb-icon, .ooumb-icon {
363 	vertical-align: middle;
364 	padding: 0;
365 }
366 
367 .iumb-main, .ooumb-main {
368 	padding: 0 0 0 10px;
369 }
370 
371 .iumb-caption {
372 	font-size: 1.3em;
373 	font-weight: bold;
374 }
375 
376 .ooumb-caption {
377 	font-size: 1em;
378 	font-weight: bold;
379 }
380 
381 .iumb-comment {
382 	font-size: 0.8em;
383 }
384 
385 .iumb-hidable-button, .ooumb-hidable-button {
386 	text-align: right;
387 	margin: 0;
388 	padding: 0 5px 0 0;
389 	font-size: 0.8em;
390 	vertical-align: bottom;
391 }
392 
393 .iumb-table-container, .ooumb-table-container {
394 	width: 100%;
395 }
396 
397 .iumb p {
398 	margin-top: 0;
399 	margin-bottom: 0;
400 }
401 
402 /* userboxes */
403 .userbox {
404 	float: left;
405 	border-width: 1px;
406 	border-style: solid;
407 	margin: 1px;
408 	width: 238px;
409 	padding: 0;
410 }
411 
412 .ubx-icon {
413 	width: 45px;
414 	height: 45px;
415 	text-align: center;
416 	font-size: 14pt;
417 	font-weight: bold;
418 }
419 
420 .ubx-main {
421 	font-size: 8pt;
422 	padding: 4pt;
423 	line-height: 1.25em;
424 }
425 
426 #toc, .toc {
427 	border-width: 0;
428 }
429 
430 .spoiler {
431 	background-color: #fff8f8;
432 	color: #000000;
433 	border-color: black;
434 	border-style: solid;
435 	border-width: 1px 0 1px 0;
436 	text-align: center;
437 }
438 .theme-dark .spoiler {
439 	background-color: #975d5d;
440 	color: #d2d2d2;
441 }
442 
443 .ahtable {
444 	padding: 0;
445 	width: 85%;
446 }
447 
448 .ahtable th, .ahtable td {
449 	padding: 3px;
450 }
451 
452 .ahth {
453 	text-align: left;
454 }
455 
456 .ahtable .ahrt, .ahtable .ahrb {
457 	padding: 0;
458 }
459 
460 .ahf {
461 	text-align: left;
462 	font-weight: normal;
463 }
464 
465 .ahfstatus {
466 	font-weight: bold;
467 }
468 
469 .hidable-button {
470 	color: #088;
471 	cursor: pointer;
472 }
473 
474 .infobox .hidable-button {
475 	color: #f0f0f0;
476 }
477 
478 #p-navigation .pBody, #p-interaction .pBody, #p-search .pBody, #p-tb .pBody, #p-search input {
479 	text-transform: lowercase;
480 }
481 
482 #p-search #searchInput {
483 	text-transform: none;
484 }
485 
486 /* new navboxes */
487 .nb2-wrapper {
488 	text-align: center;
489 }
490 
491 .nb2 {
492 /*	margin: auto;*/
493 	border: 0;
494 }
495 
496 .nb2-firstheading {
497 	color: black;
498 	font-size: 1.1em;
499 	font-weight: bold;
500 	padding: 3px;
501 	border-radius: 0.5em 0.5em 0 0;
502 }
503 .theme-dark .nb2-firstheading {
504 	color: #d2d2d2;
505 }
506 
507 .nb2-inner {
508 	width: 100%;
509 }
510 
511 .nb2-inner th {
512 	font-weight: bold;
513 }
514 
515 .nb2-inner td {
516 	font-size: 0.9em;
517 	text-align: center;
518 }
519 
520 .theme-dark .nb2-inner td a:not(.mw-selflink) {
521 	color:#0645ad;
522 }
523 .theme-dark .nb2-inner td a:visited {
524 	color:#0b0080
525 }
526 
527 .nb2-end td {
528 	font-size: 0.85em;
529 	text-align: center;
530 }
531 
532 .nb-edi {
533 	font-size: 0.85em;
534 }
535 
536 .nb2 .nb-edi {
537 	font-size: inherit;
538 }
539 
540 .nb2-end a, .nb2-end .hidable-button {
541 	color: black;
542 	text-transform: lowercase;
543 	text-decoration: none;
544 }
545 .theme-dark .nb2-end .hidable-button {
546 	color: #F4F26B;
547 }
548 
549 /* === Redirects in Special:AllPages and Special:Watchlist === */
550 .allpagesredirect, .watchlistredir {
551 	font-style: italic;
552 }
553 
554 /* === Hilighting admin/staff by Splarka === */
555 ul.special li a.mw-userlink[title="Käyttäjä:--miki--"],
556 table.mw-enhanced-rc td a.mw-userlink[title="Käyttäjä:--miki--"],
557 ul.special li a.mw-userlink[title="Käyttäjä:Dionne Jinn"],
558 table.mw-enhanced-rc td a.mw-userlink[title="Käyttäjä:Dionne Jinn"],
559 ul.special li a.mw-userlink[title="Käyttäjä:Jack Phoenix"],
560 table.mw-enhanced-rc td a.mw-userlink[title="Käyttäjä:Jack Phoenix"] {
561 	font-weight: bold;
562 	color: #009900;
563 }
564 ul.special li a.mw-userlink[title="Käyttäjä:Väärinkäyttösuodatin"],
565 table.mw-enhanced-rc td a.mw-userlink[title="Käyttäjä:Väärinkäyttösuodatin"] {
566 	font-weight: bold;
567 	color: #AA0000;
568 }
569 
570 /* === Forum formatting -Algorithm & -Splarka === */
571 /* class for forum navigation templates */
572 .forumheader {
573 	background: var(--bg2);
574 	border: none; 
575 	padding: 5px;
576 	border-radius: 0.5em;
577 }
578 .forumlist td.forum_edited a {
579 	color: black;
580 	text-decoration: none;
581 }
582 .forumlist td.forum_title a {
583 	padding-left: 20px;
584 }
585 .forumlist td.forum_title a.forum_new {
586 	font-weight: bold;
587 	background: url(https://images.shoutwiki.com/fi.starwars/4/4e/Forum_new.gif) center left no-repeat;
588 	padding-left: 20px;
589 }
590 .forumlist td.forum_title a.forum_new:visited {
591 	font-weight: normal;
592 	background: none;
593 	padding-left: 20px;
594 }
595 .forumlist th.forum_title {
596 	padding-left: 20px;
597 }
598 .forum_title a.forum_new {
599 	font-weight: bold;
600 }
601 .forum_title a.forum_new:visited {
602 	font-weight: normal;
603 }
604 
605 /* forum table */
606 .forumlist {
607 	width: 100%;
608 	background: var(--bg2);
609 	border-radius: 5px;
610 }
611 
612 .forumlist-header th {
613 	text-align: left;
614 	background: var(--bg1);
615 }
616 
617 .forumlist th, .forumlist td {
618 	padding: 3px;
619 }
620 
621 /* Lisättyjen/poistettujen merkkien määrän värit esim. tuoreissa muutoksissa, tarkkailulistalla yms. */
622 /*.mw-plusminus-pos { color: #006400; }*/
623 .mw-plusminus-neg { color: #FF0000; }
624 
625 /* Jedipedian kunniamitali (Malline:KunniamitaliK) */
626 .medal-of-honor {
627 	border: 2px solid #733306;
628 	background: #FFEFAF;
629 	width: auto;
630 	text-align: left;
631 	margin: 0 auto;
632 	padding: 3px;
633 	margin-bottom: 3px;
634 	font-size: 95%;
635 }
636 .theme-dark .medal-of-honor {
637 	background: #002060;
638 }
639 
640 /* Poista-nappulan poistaminen sivuilta pitkillä muokkaushistorioilla. By [[User:Grunny]] */
641 .page-Etusivu #control_delete,
642 .page-Etusivu #ca-delete {
643 	display: none;
644 }
645 
646 /* Highlight clicked reference in blue to help navigation */
647 ol.references > li:target { background-color: var(--bg1); }
648 sup.reference:target { background-color: var(--bg1); }
649 
650 /* [[Malline:Esiintymislista]] */
651 table.appearances {
652 	padding: 5px;
653 	width: 100%;
654 	border: 1px solid #D6F0F5;
655 	border-radius: 6px;
656 	margin-bottom: 4px;
657 	text-align: left;
658 	clear: left;
659 }
660 
661 table.appearances tr td {
662 	vertical-align: top;
663 }
664 
665 /* lisenssimallineet */
666 .fairuse {
667 	border: 2px solid #BB7C77;
668 	background: #FFF7F7;
669 	text-align: left;
670 }
671 .theme-dark .fairuse {
672 	border-color: #ff5050;
673 	background: #441010;
674 	color: #d2d2d2;
675 }
676 
677 /* Pyöreät kulmat sivun lopussa olevaan luokkalaatikkoon */
678 .catlinks {
679 	border-radius: 0.5em;
680 }
681 /* Adjust size of references in infoboxes and succession boxes - deprecates Template:Ref */
682 div.infobox .reference,          /* infoboxes */
683 .refadjust .reference {          /* succession boxes, anything else which has class="refadjust" */
684 	font-size: 7.5px;
685 	font-style: none;
686 	font-weight: normal;
687 }
688 
689 /* Link FA/GA/CA */
690 
691 #p-lang li.FA {
692 	list-style-image: url("https://images.shoutwiki.com/fi.starwars/1/10/InterwikiFA.png");
693 	overflow: visible !important;
694 	display: list-item !important;
695 }
696 
697 #p-lang li.GA {
698 	list-style-image: url("https://images.shoutwiki.com/fi.starwars/d/df/InterwikiGA.png");
699 	overflow: visible !important;
700 	display: list-item !important;
701 }
702 
703 #p-lang li.CA {
704 	list-style-image: url("https://images.shoutwiki.com/fi.starwars/d/dc/InterwikiCA.png");
705 	overflow: visible !important;
706 	display: list-item !important;
707 }
708 
709 /* Make italics work in Template:Main -- from Wikipedia */
710 .rellink { font-style: italic; }
711 .rellink i { font-style: normal; }
712 
713 /* Kaksinkertainen lihavointi eräissä navigaatiolaatikoissa pois */
714 strong.selflink {
715 	font-weight: bold;
716 }
717 
718 /* Hover Box for switching the visibility of the selected item */
719 .hoverbox { display:inline-block; padding:0; }
720 .hoverbox .hoveritem { display:none; margin:0; padding:0; }
721 .hoverbox .hoveritem.selected { display:inline-block; }
722 .hoverbox:hover .hoveritem { display:inline-block; }
723 .hoverbox:hover .hoveritem.selected { display:none; }
724 
725 /* Eras-kuvakkeet oikealle korkeudelle */
726 #title-eraicons {
727 	font-size: 0;
728 }
729 
730 /* Ei ole mitään hyvää syytä, miksi joku ehdoin tahdoin haluaisi kopioida eras-kuvakkeiden vaihtoehtoisen tekstin (alt) tai linkin otsikon (title). Todennäköisemmin käyttäjä haluaa "maalaamalla" kopioida vain ja ainoastaan sivun nimen, ei em. asioita. Tämä pitää huolen siitä, että kyseiset kaksi elementtiä eivät ole "maalattavissa".
731 
732 Ks. lisätietoja sivulta https://developer.mozilla.org/en-US/docs/Web/CSS/user-select
733 */
734 #title-eraicons a, #title-eraicons a img,
735 #mw-indicator-eras a, #mw-indicator-eras a img {
736 	-moz-user-select: none;
737 	-ms-user-select: none;
738 	-webkit-user-select: none;
739 	user-select: none;
740 }
741 
742 a.mw-selflink:hover {
743 	color: inherit;
744 }
745 
746 .scrollbox {
747 	margin-bottom: 3px;
748 	margin-top: 3px;
749 }
750 .scrollbox tr > td {
751 	background: transparent;
752 }
753 .scrollbox tr > td > div {
754 	overflow: auto; 
755 	border: 1px solid #AAAAAA;
756 	padding-left: 0.5em;
757 	background: transparent;
758 }
759 
760 #WookAttribution {
761 	font-size: smaller;
762 	font-style: italic;
763 }
764 
765 /* Keskustelusivu-nappula pois foorumikeskusteluista, mutta ei foorumialueilta */
766 .ns-110:not(.page-Foorumi_Senaatin_halli, .page-Foorumi_Yhteisöasiat, .page-Foorumi_Ylläpidolle_suunnatut_asiat) #control_talk,
767 .ns-110:not(.page-Foorumi_Senaatin_halli, .page-Foorumi_Yhteisöasiat, .page-Foorumi_Ylläpidolle_suunnatut_asiat) #ca-talk {
768 	display: none !important;
769 }
770 
771 /* Arkistoidut keskustelut */
772 .notice {
773 	background-color: #F3F9FF;
774 }
775 .theme-dark .notice {
776 	background-color: #193148;
777 }
778 
779 /* värinkääntöfiltteri tietyille kuville */
780 .theme-dark .invert-images img {
781 	filter: invert(1);
782 }
783 
784 /* CardGameSet styling */
785 .cardgame {
786 	width: max-content;
787 }
788 
789 .cardgame > ul {
790     margin-top: 0;
791     margin-bottom: 0;
792     margin-right: 5em;
793 }
794 
795 .cardgame .mw-collapsible-toggle {
796 	font-size: 12px;
797 }
798 
799 .cardgame-cards > ul {
800     margin-top: 0;
801     margin-bottom: 0;
802 }
803 
804 .cardgame-cards li {
805     margin-left: 24px;
806     font-size: 12px;
807 }
808 
809 div.cardgame+ul {
810 	margin-top: 0;
811 }
812 
813 /* kaikille huomautusmallineille tummempi väri, kunnes keksin paremman ratkaisun */
814 .theme-dark div.ooumb {
815 	background-color: var(--bg1) !important;
816 }
817 
818 /* yleiset taustaväriluokat */
819 .jedipedia-bg1 {
820 	background-color: var(--bg1);
821 }
822 .jedipedia-bg2 {
823 	background-color: var(--bg2);
824 }
825 
826 /* teemariippuvaiset piilotusluokat */
827 body:not(.theme-dark) .dark-only {
828 	display: none !important;
829 }
830 .theme-dark .light-only {
831 	display: none !important;
832 }
833 
834 /* Vain yli 551px leveitä näyttöjä koskevat tyylit */
835 @media screen and (min-width: 551px) {
836 
837 .desktop-hide {
838 	display: none !important;
839 }
840 
841 #mp-rightcol table {
842 	border:1px solid #cedff2;
843 	background-color: var(--bg2);
844 }
845 
846 }
847 
848 /* Vain alle 550px leveitä näyttöjä koskevat tyylit */
849 @media screen and (max-width: 550px) {
850 
851 .mobile-hide {
852 	display: none !important;
853 }
854 
855 #mp3-global {
856 	flex-direction: column;
857 }
858 
859 #mp-leftcol, #mp-rightcol {
860 	width: 100%;
861 }
862 
863 table.stub, div.stub {
864 	width: 100%;
865 }
866 
867 }