MediaWiki:Common.css
Jump to navigation
Jump to search
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Press Ctrl-F5.
1 /** CSS placed here will be applied to all skins */
2
3 /*
4 <pre>
5 */
6
7 .hiddenStructure {display: none}
8 .hidden {display:none}
9 .if {display: none}
10
11 /*Collection extension */
12 .onlyinprint {display: none}
13
14
15 /*front page */
16
17 /* CCFFFF = bright light blue */
18
19 [class*="front-"] {width: 100%}
20
21 @media only screen and (min-width: 768px) {
22 .front-left {padding:3px; float:left; width:57%; border:1px solid #006699; background: #EBFFFF}
23 .front-right {float:left; width:40%; background: #FAF9EC; border:1px solid #996600; margin-left: 4px; padding: 3px}
24 div.front_title {background:#E2C4E8; border-bottom:1px solid #996600;border-top:1px solid #996600;line-height:1}
25 div.front_title h1 span.mw-headline {font-size:80%;line-height:1;}
26 }
27
28 @media print {
29 #front_left {}
30 #front_right {}
31 }
32
33 /* Space out and bold main section titles */
34 h1 {font-weight:bold;}
35 h2 {margin-top:3.5ex;font-weight:bold;}
36 h3 {margin-top:2ex;}
37
38 #GooglesearchBody input{ font-size: 80%; }
39 .noautonum .tocnumber { display: none; }
40
41 /* wikitable/prettytable class for skinning normal tables */
42
43 table.wikitable,
44 table.prettytable {
45 margin: 1em 1em 1em 0;
46 background: #f9f9f9;
47 border: 1px #aaaaaa solid;
48 border-collapse: collapse;
49 }
50
51 table.wikitable th, table.wikitable td,
52 table.prettytable th, table.prettytable td {
53 border: 1px #aaaaaa solid;
54 padding: 0.2em;
55 }
56
57 table.wikitable th,
58 table.prettytable th {
59 background: #f2f2f2;
60 text-align: center;
61 }
62
63 table.wikitable caption,
64 table.prettytable caption {
65 margin-left: inherit;
66 margin-right: inherit;
67 }
68
69 .allpagesredirect {
70 font-style: italic;
71 }
72
73 /* Overrides for semantic forms tables - SemanticForms/skins/SemanticForms.css */
74
75 table.formtable {
76 width: 100%;
77 margin: 5px 0 0;
78 padding: 0.3em 0.2em 0.2em 0.2em;
79 background: transparent;
80 border: 1px dotted grey;
81 border-radius: 2px;
82 background: #f9f9f9;
83 }
84
85 table.formtable caption {
86 color:blue;
87 text-align:left;
88 font-size:12pt;
89 }
90
91 /* Infobox template style */
92
93 .infobox {
94 border: 1px solid #aaaaaa;
95 width:270px;
96 background-color: #f9f9f9;
97 color: black;
98 margin-bottom: 0.5em;
99 margin-left: 1em;
100 padding: 0.2em;
101 float: right;
102 }
103 .infobox td,
104 .infobox th {
105 border: 2px none #aaaaaa;
106 padding: 0.2em 0.5em;
107 border-bottom: 1px solid #f0f0f0 !important;
108 }
109 .infobox caption {
110 font-size: larger;
111 margin-left: inherit;
112 }
113 .infobox.bordered {
114 border-collapse: collapse;
115 }
116 .infobox.bordered td,
117 .infobox.bordered th {
118 border: 1px solid #aaaaaa;
119 }
120 .infobox.bordered .borderless td,
121 .infobox.bordered .borderless th {
122 border: 0;
123 }
124
125 .infobox.sisterproject {
126 width: 20em;
127 font-size: 90%;
128 }
129
130 /* styles for bordered infobox with merged rows */
131 .infobox.bordered .mergedtoprow td,
132 .infobox.bordered .mergedtoprow th {
133 border: 0;
134 border-top: 1px solid #aaaaaa;
135 border-right: 1px solid #aaaaaa;
136 }
137
138 .infobox.bordered .mergedrow td,
139 .infobox.bordered .mergedrow th {
140 border: 0;
141 border-right: 1px solid #aaaaaa;
142 }
143
144
145 /* Removes useless links from printout */
146 @media print {
147 .portlet, #privacy, #about, #disclaimer {display:none;}
148 }
149
150 /* Banner Styles used in EduTech wiki
151 - use class names like Banner_xxxx
152 */
153
154 .Banner_incomplete {
155 float:right;
156 clear:right;
157 width:200px;
158 border:1px solid orange;
159 background-color:#FFFACD;
160 padding:7px;
161 margin-bottom: 10px;
162 margin-left: 1em;
163 }
164
165 .Banner_tutorial {
166 float:right;
167 clear:right;
168 width:200px;
169 border:1px solid blue;
170 background-color:#F8C9E4;
171 padding:7px;
172 margin-bottom: 10px;
173 margin-left: 1em;
174 }
175
176 .tut_goals {
177 background-color:#F8C9E4;
178 padding:7px;
179 margin-bottom: 10px;
180 border:1px solid #AAAAAA;
181 }
182
183 .Banner_copyright {
184 background-color:#d0f0c0;
185 padding:7px;
186 margin-bottom: 10px;
187 border:1px solid #AAAAAA;
188 }
189
190 /* Style for the source code tag */
191
192 .actionscript {
193 background-color:#FFFFEE;
194 padding:7px;
195 margin-bottom: 10px;
196 border:1px #AAAAAA solid;
197 }
198
199 /* Tag cloud extension CSS */
200
201 .tagcloud {
202 width: 95%;
203 text-align: center;
204 background-color: #FDFDFD;
205 border: 1px solid #EEEEEE;
206 padding: 15px 10px 15px 10px;
207 }
208 .tagcloud a {
209 color: #0052CB;
210 margin-left: 10px;
211 margin-right: 10px;
212 font-weight: bold;
213 }
214
215 /* See http://svn.wikimedia.org/svnroot/mediawiki/trunk/extensions/PageBy/README */
216 ul.pageby {
217 border:1px solid #60606F;
218 background-color:#E0E0EF;
219 font-size: 80%;
220 margin:1ex;
221 padding:1ex;
222 list-style-type:none;
223 }
224
225 /* category tree - first is just for portlet - second for all trees */
226 /*
227 #p-categorytree-portlet {font-size: 85% }
228 */
229 .CategoryTreeTag {font-size: 85%; }
230 .CategoryTreeLabel {font-size: 85%; }
231 .CategoryTreeLabelCategory {font-size: 85%; }
232
233 /* Syntaxhighlight geshi */
234 div.mw-geshi {
235
236 font-size: 100%
237 }
238
239 /* removed for MW 1.24
240 border: 1px dotted grey;
241 padding: 2px;
242 margin-left:0em;
243 margin-top:2px;
244 margin-right:0px;
245 margin-bottom:2px;
246 */
247
248 code {
249 border: 1px solid #ddd;
250 padding: 1px 4px;
251 border-radius: 2px;
252 }
253
254
255 /* ------------------------- class for fluid two columns layout -------------------------*/
256
257 .wrapper{position:relative;clear:both;}
258
259 .leftFifty {
260 width:50%;
261 float:left;
262
263 }
264 .rightFifty {
265 width:50%;
266 float:right;
267 }
268
269 .leftSixty {
270 width:60%;
271 float:left;
272 }
273 .rightForty {
274 width:40%;
275 float:right;
276 }
277 .rightSixty {
278 width:60%;
279 float:right;
280 }
281 .leftForty {
282 width:40%;
283 float:left;
284 }
285
286
287
288 .CStable_h1{
289 color: white;
290 margin-top: -5px;
291 text-transform: uppercase;
292 font-weight: bold;
293 text-align: center;
294 border-bottom: 1px solid rgb(170, 170, 170);
295 background: rgb(130, 160, 210);
296 font-size: 140%;
297 display: block;
298 vertical-align: middle;
299 line-height: 35px;
300 }
301
302 table.formtable.ProjectBlue th{
303 text-align: center;
304 vertical-align: middle;
305 background: rgb(220,230,240);
306 padding: 10px;
307 box-shadow: 1px 1px 1px 0px white inset,1px 1px 1px rgba(3,3,3,0.1);
308 border: 1px solid rgb(210,220,230);
309 font-size: 14px;
310 color: #333;
311 max-width: 220px;
312 min-width:170px;
313 }
314 table.formtable.ProjectBlue td{
315 padding-left:30px;
316 }
317
318 table.formtable.ProjectGreen th{
319 text-align: center;
320 vertical-align: middle;
321 background: rgb(200, 250, 160);
322 padding: 10px;
323 box-shadow: 1px 1px 1px 0px white inset,1px 1px 1px rgba(3,3,3,0.1);
324 border: 1px solid rgb(190,240,150);
325 font-size: 14px;
326 color: #333;
327 max-width: 180px;
328 }
329 table.formtable.ProjectGreen td{
330 padding-left:30px;
331 }
332
333 table.formtable.ProjectYellow th{
334 text-align: center;
335 vertical-align: middle;
336 background: rgb(250, 230, 84);
337 padding: 10px;
338 box-shadow: 1px 1px 1px 0px white inset,1px 1px 1px rgba(3,3,3,0.1);
339 border: 1px solid rgb(240, 220, 74);
340 font-size: 14px;
341 color: #333;
342 max-width: 180px;
343 }
344 table.formtable.ProjectYellow td{
345 padding-left:30px;
346 }
347
348
349 table.formtable.ProjectRed th{
350 text-align: center;
351 vertical-align: middle;
352 background: rgb(250, 160, 100);
353 padding: 10px;
354 box-shadow: 1px 1px 1px 0px white inset,1px 1px 1px rgba(3,3,3,0.1);
355 border: 1px solid rgb(240, 150, 90);
356 font-size: 14px;
357 color: #333;
358 max-width: 180px;
359 }
360 table.formtable.ProjectRed td{
361 padding-left:30px;
362 }
363
364 table.formtable.ProjectPurple th{
365 text-align: center;
366 vertical-align: middle;
367 background: rgb(230, 204, 230);
368 padding: 10px;
369 box-shadow: 1px 1px 1px 0px white inset,1px 1px 1px rgba(3,3,3,0.1);
370 border: 1px solid rgb(220, 195, 220);
371 font-size: 14px;
372 color: #333;
373 max-width: 180px;
374 }
375 table.formtable.ProjectPurple td{
376 padding-left:30px;
377 }
378
379
380 .CStable_h2blue{
381 text-transform: uppercase;
382 color: rgb(102, 132, 182);
383 font-weight: bold;
384 font-size: 120%;
385 border-bottom: 1px solid rgba(0, 0, 0, 0.1);
386 z-index: 1;
387 position: relative;
388 display: block;
389 width: auto;
390 min-width: 250px;
391 margin-top:10px;
392 padding:6px 0px;
393 }
394
395 @media screen and (max-width: 1200px) {
396 .leftFifty {
397 width:100% !important;
398 border:none !important;
399 }
400 .rightFifty {
401 left: 0;
402 width:100% !important;
403 position:relative;
404 }
405 .leftSixty {
406 width:100%;
407 }
408 .rightForty {
409 left: 0;
410 width:100%;
411 position:relative;
412 }
413 .rightSixty {
414 left: 0;
415 width:100%;
416 position:relative;
417 }
418 .leftForty {
419 width:100%;
420 }
421
422 .CS_left{
423 position:relative;
424 float:none;
425 width:100%;
426 margin-top:10px;
427 }
428
429 .nodisplay{
430 display:none;
431 }
432
433
434 #map_google3_1{width:auto !important;height:200px !important;}
435
436 .headBlockBlue{height:280px;}
437 .headBlockGreen{height:280px;}
438 .headBlockRed{height:280px;}
439 .noResize{height:auto;}
440
441 }
442
443 /* ------------------------- class for citizen science project template-------------------------*/
444
445 .decorativeBlueCell{
446 width:21px;
447 border: 1px solid rgb(200,215,230);
448 text-align:center;
449 color:black;
450 font-weight:bold;
451 box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset,1px 0px 3px rgba(0,0,0,0.1);
452 padding:8px;
453 background:rgb(190, 209, 225);
454 background-image: linear-gradient(to right, rgb(190, 209, 225) 0%, rgb(219, 232, 248) 100%);
455 background-image:-webkit-linear-gradient(right, rgb(190, 209, 225) 0%, rgb(219, 232, 248) 100%);
456 }
457
458 .decorativeRedCell{
459 width:21px;
460 border: 1px solid rgb(215,195,125);
461 text-align:center;
462 color:black;
463 font-weight:bold;
464 box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset,1px 0px 3px rgba(0,0,0,0.1);
465 padding:8px;
466 background:rgb(220, 200, 130);
467 background-image: linear-gradient(to right, rgb(220, 200, 130) 0%,rgb(248, 228, 158) 100%);
468 background-image:-webkit-linear-gradient(right, rgb(220, 200, 130) 0%,rgb(248, 228, 158) 100%);
469 }
470
471 .decorativeGreenCell{
472 width:21px;
473 border: 1px solid rgb(150,180,90);
474 text-align:center;
475 color:black;
476 font-weight:bold;
477 box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset,1px 0px 3px rgba(0,0,0,0.1);
478 padding:8px;
479 background:rgb(160,190,100);
480 background-image: linear-gradient(to right, rgb(160,190,100) 0%,rgb(200,230,140) 100%);
481 background-image:-webkit-linear-gradient(right, rgb(160,190,100) 0%,rgb(200,230,140) 100%);
482 }
483 .decorativeGreyCell{
484 width:21px;
485 border: 1px solid rgb(200,200,200);
486 text-align:center;
487 color:black;
488 font-weight:bold;
489 box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset,1px 0px 3px rgba(0,0,0,0.1);
490 padding:8px;
491 background:rgb(242, 242, 242);
492 background-image: linear-gradient(to right, #d7d7d7 0%,#e6e6e6 100%);
493 background-image:-webkit-linear-gradient(right, #d7d7d7 0%,#e6e6e6 100%);
494 }
495
496 table.CS_wikitable{
497 border-collapse: collapse;
498 width:100%;
499 text-align:justify;
500 margin:0px 15px 0px 0px;
501 }
502
503 table.CS_wikitable td{
504 padding:7px;
505 }
506
507 .CStable_h2grey{
508 text-transform:uppercase;
509 color:#777777;
510 font-weight:bold;
511 font-size:120%;
512 }
513 .CStable_h2green{
514 text-transform:uppercase;
515 color:rgb(100, 170, 80);
516 font-weight:bold;
517 font-size:120%;
518 }
519 .CStable_h2red{
520 text-transform:uppercase;
521 color:rgb(200, 80, 70);
522 font-weight:bold;
523 font-size:120%;
524 }
525
526
527 .blueBlock{
528 -moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
529 -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
530 box-shadow:inset 0px 1px 0px 0px #ffffff;
531 background:rgb(190, 209, 225);
532 background-image: linear-gradient(rgb(219, 232, 248), rgb(190, 209, 225));
533 background-image: -webkit-linear-gradient(rgb(219, 232, 248), rgb(190, 209, 225));
534 -webkit-border-radius: 6px;
535 -moz-border-radius: 6px;
536 border-radius: 6px;
537 text-indent:0;
538 border:1px solid rgb(175, 194, 209);
539 display:inline-block;
540 color:#333333;
541 font-family:arial;
542 font-size:13px;
543 font-style:normal;
544 text-decoration:none;
545 margin:0px 0px 10px 1%;
546 padding:0px 8px;
547 line-height:90px;
548 width:48%;
549 -webkit-box-sizing: border-box;
550 -moz-box-sizing: border-box;
551 box-sizing: border-box;
552 }
553
554 .headBlockBlue{
555 -moz-box-shadow:1px 1px 1px rgb(90,90,90);
556 -webkit-box-shadow:inset 1px 1px 2px rgb(90,90,90);
557 box-shadow:1px 1px 2px rgb(90,90,90);
558 background:rgb(130, 160, 210);
559 background-image: linear-gradient(rgb(130, 160, 210), rgb(110, 140, 190));
560 background-image: -webkit-linear-gradient(rgb(130, 160, 210), rgb(100, 130, 180));
561 -webkit-border-radius: 1px 6px 1px 1px;
562 -moz-border-radius: 1px 6px 1px 1px;
563 border-radius: 1px 6px 1px 1px;
564 padding:15px;
565 -webkit-box-sizing: border-box;
566 -moz-box-sizing: border-box;
567 box-sizing: border-box;
568 text-align:center;
569 margin-top: 53px;
570 }
571 .headBlockGreen{
572 -moz-box-shadow:1px 1px 2px rgb(90,90,90);
573 -webkit-box-shadow:inset 1px 1px 2px rgb(90,90,90);
574 box-shadow:1px 1px 2px rgb(90,90,90);
575 background:rgb(150, 190, 110);
576 background-image: linear-gradient(rgb(150, 190, 110), rgb(120, 170, 90));
577 background-image: -webkit-linear-gradient(rgb(150, 190, 110), rgb(120, 170, 90));
578 -webkit-border-radius: 1px 6px 6px 6px;
579 -moz-border-radius: 1px 6px 6px 6px;
580 border-radius: 1px 6px 6px 6px;
581 padding:15px;
582 -webkit-box-sizing: border-box;
583 -moz-box-sizing: border-box;
584 box-sizing: border-box;
585 text-align:center;
586 margin-top:53px;
587 -webkit-box-sizing: border-box;
588 -moz-box-sizing: border-box;
589 box-sizing: border-box;
590 }
591 .headBlockRed{
592 -moz-box-shadow:1px 1px 2px rgb(90,90,90);
593 -webkit-box-shadow:inset 1px 1px 2px rgb(90,90,90);
594 box-shadow:1px 1px 2px rgb(90,90,90);
595 background:rgb(200, 110, 90);
596 background-image: linear-gradient(rgb(200, 110, 90), rgb(190, 100, 80));
597 background-image: -webkit-linear-gradient(rgb(200, 110, 90), rgb(190, 100, 80));
598 -webkit-border-radius: 1px 6px 6px 6px;
599 -moz-border-radius: 1px 6px 6px 6px;
600 border-radius: 1px 6px 6px 6px;
601 padding:15px;
602 -webkit-box-sizing: border-box;
603 -moz-box-sizing: border-box;
604 box-sizing: border-box;
605 text-align:center;
606 margin-top:53px;
607 }
608
609 .blueBlock b{
610 color:rgb(60, 84, 139) !important;
611 }
612
613 .orangeBlock{
614 -moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
615 -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
616 box-shadow:inset 0px 1px 0px 0px #ffffff;
617 background:rgb(220, 200, 130);
618 background-image: linear-gradient(rgb(248, 228, 158), rgb(220, 200, 130));
619 background-image: -webkit-linear-gradient(rgb(248, 228, 158), rgb(220, 200, 130));
620 -webkit-border-radius: 6px;
621 -moz-border-radius: 6px;
622 border-radius: 6px;
623 text-indent:0;
624 border:1px solid rgb(215, 190, 125);
625 display:inline-block;
626 color:#333333;
627 font-family:arial;
628 font-size:13px;
629 font-style:normal;
630 text-decoration:none;
631 padding:0px 8px;
632 -webkit-box-sizing: border-box;
633 -moz-box-sizing: border-box;
634 box-sizing: border-box;
635 }
636
637 .orangeBlock b{
638 color:rgb(110, 40, 40) !important;
639 }
640
641 .redBlock{
642 -moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
643 -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
644 box-shadow:inset 0px 1px 0px 0px #ffffff;
645 background:rgb(220, 30, 30);
646 background-image: linear-gradient(rgb(255, 130, 130), rgb(220, 30, 30));
647 background-image: -webkit-linear-gradient(rgb(255, 130, 130), rgb(220, 30, 30));
648 -webkit-border-radius: 6px;
649 -moz-border-radius: 6px;
650 border-radius: 6px;
651 text-indent:0;
652 border:1px solid rgb(190, 10, 10);
653 display:inline-block;
654 color:rgb(255, 230,230);
655 font-family:arial;
656 font-size:13px;
657 font-style:normal;
658 text-decoration:none;
659 padding:0px 8px;
660 -webkit-box-sizing: border-box;
661 -moz-box-sizing: border-box;
662 box-sizing: border-box;
663 }
664
665 .redBlock b{
666 color:rgb(255, 200,200) !important;
667 }
668
669
670
671
672 .greenBlock{
673 -moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
674 -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
675 box-shadow:inset 0px 1px 0px 0px #ffffff;
676 background:rgb(200, 230, 140);
677 background-image: linear-gradient(rgb(200, 230, 140), rgb(160, 190, 100));
678 background-image: -webkit-linear-gradient(rgb(200, 230, 140), rgb(160, 190, 100));
679 -webkit-border-radius: 6px;
680 -moz-border-radius: 6px;
681 border-radius: 6px;
682 text-indent:0;
683 border:1px solid rgb(155,185,95);
684 display:inline-block;
685 color:#333333;
686 font-family:arial;
687 font-size:13px;
688 font-style:normal;
689 text-decoration:none;
690 -webkit-box-sizing: border-box;
691 -moz-box-sizing: border-box;
692 box-sizing: border-box;
693 padding:0px 8px;
694 }
695
696 .greenBlock b{
697 color:rgb(70, 95, 60) !important;
698 }
699
700 .greyBlock{
701 -moz-box-shadow:1px 1px 0px 1px rgba(0, 0, 0, 0.15);
702 -webkit-box-shadow:1px 1px 0px 1px rgba(0, 0, 0, 0.15);
703 box-shadow:1px 1px 0px 1px rgba(0, 0, 0, 0.15);
704 background:rgb(230, 230, 230);
705 background-image: linear-gradient(rgb(252, 252, 252), rgb(235, 235, 235));
706 background-image: -webkit-linear-gradient(rgb(238, 238, 238), rgb(220, 220, 220));
707 -webkit-border-radius: 6px;
708 -moz-border-radius: 6px;
709 border-radius: 6px;
710 text-indent:0;
711 display:inline-block;
712 color:#333333;
713 font-family:arial;
714 font-size:12px;
715 font-style:normal;
716 text-decoration:none;
717 margin:0px 0px 10px 1%;
718 padding:0px 8px;
719 line-height:120px;
720 width:48%;
721 -webkit-box-sizing: border-box;
722 -moz-box-sizing: border-box;
723 box-sizing: border-box;
724 position:relative;
725 }
726
727 .greyBlockTitle{font-size: 14px;
728 width: 25px;
729 position: absolute;
730 height: 104%;
731 left: -2px;
732 text-align: center;
733 display: block;
734 top: -2%;
735 line-height: 15px;
736 font-weight: bold;
737 text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
738 border-radius: 6px 0px 0px 6px;
739 vertical-align: middle;
740 padding: 8px 0px;
741 -webkit-box-sizing: border-box;
742 -moz-box-sizing: border-box;
743 box-sizing: border-box;
744 -moz-box-shadow: 1px 0px 1px rgba(0,0,0,0.2);
745 -webkit-box-shadow:1px 0px 1px rgba(0,0,0,0.2);
746 box-shadow:1px 0px 1px rgba(0,0,0,0.2);
747 border:1px solid rgba(0,0,0,0.15);
748 }
749
750 /* ---------------------------------------------------------------------------------------*/
751 /* ------------------------------ Citizen Science CSS V2 ---------------------------------*/
752 /* ---------------------------------------------------------------------------------------*/
753 .CSwrapper{
754 display:table;
755 width:100%;
756 padding:20px 10px;
757 margin: 15px 0;
758 box-sizing: border-box;
759 -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
760 -moz-box-sizing: border-box; /* Firefox, other Gecko */
761 box-shadow:1px 1px 1px 1px rgb(183,183,183);
762 border: 4px solid white;
763 min-width:540px;
764 color:rgba(0, 0, 0, 0.8);
765 }
766
767 .gradient_Blue{
768 background: linear-gradient(to right, #4c71b2 0%, #2d59a6 55px, #f0f4fb 55px, #f0f4fb 100%);/* W3C */
769 background: -webkit-linear-gradient(left, #4c71b2 0%, #2d59a6 55px, #f0f4fb 55px, #f0f4fb 100%);
770 background: -moz-linear-gradient(left #4c71b2 0%, #2d59a6 55px, #f0f4fb 55px, #f0f4fb 100%);
771 background: -o-linear-gradient(left, #4c71b2 0%, #2d59a6 55px, #f0f4fb 55px, #f0f4fb 100%);
772 background: -ms-linear-gradient(right, #4c71b2 0%, #2d59a6 55px, #f0f4fb 55px, #f0f4fb 100%);
773 }
774
775 .gradient_Green {
776 background: linear-gradient(to right, #4DB285 0%, #2EA670 55px, #EDFAF4 55px, #EDFAF4 100%);/* W3C */
777 background: -webkit-linear-gradient(left, #4DB285 0%, #2EA670 55px, #EDFAF4 55px, #EDFAF4 100%);
778 background: -moz-linear-gradient(left, #4DB285 0%, #2EA670 55px, #EDFAF4 55px, #EDFAF4 100%);
779 background: -o-linear-gradient(left #4DB285 0%, #2EA670 55px, #EDFAF4 55px, #EDFAF4 100%);
780 background: -ms-linear-gradient(left, #4DB285 0%, #2EA670 55px, #EDFAF4 55px, #EDFAF4 100%);
781 }
782
783 .gradient_Yellow {
784 background: linear-gradient(to right, #E3D120 0%, #DDC301 55px, #FFFCE8 55px, #FFFCE8 100%);/* W3C */
785 background: -webkit-linear-gradient(left,#E3D120 0%, #DDC301 55px, #FFFCE8 55px, #FFFCE8 100%);
786 background: -moz-linear-gradient(left, #E3D120 0%, #DDC301 55px, #FFFCE8 55px, #FFFCE8 100%);
787 background: -o-linear-gradient(left, #E3D120 0%, #DDC301 55px, #FFFCE8 55px, #FFFCE8 100%);
788 background: -ms-linear-gradient(left, #E3D120 0%, #DDC301 55px, #FFFCE8 55px, #FFFCE8 100%);
789 }
790
791 .gradient_Red {
792 background: linear-gradient(to right, #D45049 0%, #CC3530 55px, #FBF0F0 55px, #FBF0F0 100%);/* W3C */
793 background: -webkit-linear-gradient(left, #D45049 0%, #CC3530 55px, #FBF0F0 55px, #FBF0F0 100%);
794 background: -moz-linear-gradient(left #D45049 0%, #CC3530 55px, #FBF0F0 55px, #FBF0F0 100%);
795 background: -o-linear-gradient(left, #D45049 0%, #CC3530 55px, #FBF0F0 55px, #FBF0F0 100%);
796 background: -ms-linear-gradient(left, #D45049 0%, #CC3530 55px, #FBF0F0 55px, #FBF0F0 100%);
797 }
798
799 .gradient_Purple {
800 background: linear-gradient(to right, #B24BE0 0%, #B24BE0 55px, #F9F2FC 55px, #F9F2FC 100%); /* W3C */
801 background: -webkit-linear-gradient(left, #B24BE0 0%, #B24BE0 55px, #F9F2FC 55px, #F9F2FC 100%);
802 background: -moz-linear-gradient(left, #B24BE0 0%, #B24BE0 55px, #F9F2FC 55px, #F9F2FC 100%);
803 background: -o-linear-gradient(left, #B24BE0 0%, #B24BE0 55px, #F9F2FC 55px, #F9F2FC 100%);
804 background: -ms-linear-gradient(left #B24BE0 0%, #B24BE0 55px, #F9F2FC 55px, #F9F2FC 100%);
805 }
806
807 .gradient_Grey {background: rgb(232,232,232);padding-left: 20px;}
808
809 .iconSet{
810 width:40px;
811 height:40px;
812 background:url(http://edutechwiki.unige.ch/mediawiki/images/1/1c/Mfg_labs_iconset.svg);
813 display:inline-block;
814 vertical-align:middle;
815 }
816 .iconSet_Small{
817 width:30px;
818 height:30px;
819 background:url(http://edutechwiki.unige.ch/mediawiki/images/1/1c/Mfg_labs_iconset.svg);
820 background-size:1100px;
821 display:inline-block;
822 vertical-align:middle;
823 margin-top:-5px;
824 }
825
826 .starProgress{
827 width:20px;
828 height:20px;
829 background:url(http://edutechwiki.unige.ch/mediawiki/images/4/47/Star_Pogress.svg);
830 background-size:80px;
831 display:inline-block;
832 vertical-align:middle;
833 margin-top:-5px;
834 }
835
836 .iconSet_Smallest{
837 width:20px;
838 height:20px;
839 background:url(http://edutechwiki.unige.ch/mediawiki/images/1/1c/Mfg_labs_iconset.svg);
840 background-size:750px;
841 display:inline-block;
842 vertical-align:middle;
843 margin-top:-5px;
844 }
845
846 .somewhat{
847 width:27px;
848 height:27px;
849 background:#2B2B29;
850 vertical-align:middle;
851 color:white;
852 font-size:7px;
853 font-weight:bolder;
854 line-height:8px;
855 border-radius:20px;
856 -webkit-box-sizing: border-box;
857 -moz-box-sizing: border-box;
858 box-sizing: border-box;
859 padding-top:6px;
860 padding-right:1px;
861 text-align:center;
862 }
863
864 .section_Title{
865 display: table-cell;
866 vertical-align: middle;
867 width:30px
868 }
869
870 .section_Title p{ color:white;
871 border:0px solid red;
872 -webkit-transform:rotate(-90deg);
873 -moz-transform:rotate(-90deg);
874 -o-transform: rotate(-90deg);
875 -ms-transform:rotate(-90deg);
876 white-space:nowrap;
877 display:inline-block;
878 vertical-align: middle;
879 font-family: ‘Trebuchet MS’, Helvetica, sans-serif;
880 font-size:24px;
881 font-weight:bold;
882 text-shadow: 0px 0px 1px #333;
883 }
884
885
886 .section_Content{margin:0px 10px 0px -130px; text-align: justify;}
887
888 .whiteBlock{
889 display: table-cell;
890 margin: 0px;
891 background: white;
892 box-shadow:0px 0px 1px rgba(0,0,0,0.3);
893 border-bottom: 1px solid rgba(0,0,0,0.3);
894 border-right: none;
895 border-top: 12px solid #444;
896 border-left: none;
897 text-align: left;
898 padding:7px;
899 min-width:295px;
900
901 }
902
903 .map{
904 margin: 0px 15px 0px 0px;
905 background: #4CB385;
906 box-shadow:1px 1px 1px rgba(0,0,0,0.1);
907 border-bottom: 1px solid rgba(0,0,0,0.3);
908 border-right: 1px solid rgba(0,0,0,0.3);
909 border-top: 1px solid rgba(0,0,0,0.1);
910 border-left: 1px solid rgba(0,0,0,0.1);
911 text-align: center;
912 width: 300px;
913 color: white;
914 text-shadow:1px 1px 0px #333;
915 float: left;
916 }
917
918 .bigLink{
919 text-indent: 0px;
920 display: inline-block;
921 color: rgb(51, 51, 51);
922 font-family: arial;
923 font-size: 15px;
924 font-style: normal;
925 text-decoration: none;
926 -moz-box-sizing: border-box;
927 padding: 8px;
928 text-align: left;
929 margin: 6px;
930 width:320px;
931 border-left:4px solid #555;
932 background:white;
933 box-shadow:1px 1px 1px rgba(0,0,0,0.3);
934 margin-left:15px;
935 }
936
937 .bigLink a{color:#333;}
938
939
940
941 /*----------- Completion levels --------- */
942
943 .evaluationBlock{
944 display:inline-block;
945 height:18px;
946 vertical-align:middle;
947 text-align:center;
948 width:25%;
949 box-shadow:1px 1px 1px rgba(0, 0, 0, 0.1);
950 -webkit-box-sizing: border-box;
951 -moz-box-sizing: border-box;
952 box-sizing: border-box;
953 font-size: 13px;
954 }
955
956 .grey{background:#F2F2F2;border:1px solid rgb(215,215,215);color:#333;}
957 .green{background:rgb(110,200,100);color:white;font-weight:bold;border:1px solid rgb(185,185,185);}
958 .red{background:rgb(200, 50, 50);color:white;font-weight:bold;border:1px solid rgb(185,185,185);}
959 .orange{background:rgb(220, 130, 0);color:white;font-weight:bold;border:1px solid rgb(185,185,185);}
960
961 /*----------- Small & medium screen --------- */
962
963 .showSmallScreen{display: none ! important;}
964 .showMediumScreen{display: none ! important;}
965
966 .frame{border:4px solid white;box-shadow:1px 1px 1px 1px rgb(213,213,213);}
967
968 /*----------- Smart buttons --------- */
969 .btn{
970 border:1px solid;
971 border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
972 -webkit-box-shadow:0px 1px 0px rgba(255, 255, 255, 0.3) inset, 0px 1px 2px rgba(0, 0, 0, 0.05);
973 box-shadow:0px 1px 0px rgba(255, 255, 255, 0.3) inset, 0px 1px 2px rgba(0, 0, 0, 0.05);
974 border-radius:4px;
975 display:inline-block;
976 font-size:13px;
977 font-style:normal;
978 text-decoration:none;
979 -webkit-box-sizing: border-box;
980 -moz-box-sizing: border-box;
981 box-sizing: border-box;
982 padding:0px 8px;
983 color:white;
984 text-shadow:0px -1px 0px rgba(0, 0, 0, 0.25);
985 }
986
987 .btn:hover{
988 -webkit-transform:scaleY(1.04);
989 -moz-transform:scaleY(1.04);
990 -ms-transform:scaleY(1.04);
991 -o-transform:scaleY(1.04);
992 transform:scaleY(1.04);
993 }
994 .btn a{color:white !important;text-shadow:0px -1px 0px rgba(0, 0, 0, 0.25) !important; text-decoration:none !important;display:block;}
995
996 .btnGreen{
997 background-image: -webkit-linear-gradient(top, rgb(98, 196, 98), rgb(81, 163, 81));
998 background-image: -moz-linear-gradient(top, rgb(98, 196, 98), rgb(81, 163, 81));
999 background-image: -o-linear-gradient(top, rgb(98, 196, 98), rgb(81, 163, 81));
1000 background-image: -ms-linear-gradient(top, rgb(98, 196, 98), rgb(81, 163, 81));
1001 background-image:linear-gradient(to bottom, rgb(98, 196, 98), rgb(81, 163, 81));
1002 }
1003
1004 .btnRed{
1005 background-image: -webkit-linear-gradient(top rgb(248, 108, 48), rgb(218, 68, 28));
1006 background-image: -moz-linear-gradient(top, rgb(248, 108, 48), rgb(218, 68, 28));
1007 background-image: -o-linear-gradient(top, rgb(248, 108, 48), rgb(218, 68, 28));
1008 background-image: -ms-linear-gradient(top, rgb(248, 108, 48), rgb(218, 68, 28));
1009 background-image:linear-gradient(to bottom, rgb(248, 108, 48), rgb(218, 68, 28));
1010 }
1011 .btnBlue{
1012 background-image: -webkit-linear-gradient(top, rgb(90,136, 204), rgb(50, 88, 204));
1013 background-image: -moz-linear-gradient(top, rgb(90,136, 204), rgb(50, 88, 204));
1014 background-image: -o-linear-gradient(top, rgb(90,136, 204), rgb(50, 88, 204));
1015 background-image: -ms-linear-gradient(top, rgb(90,136, 204), rgb(50, 88, 204));
1016 background-image:linear-gradient(to bottom, rgb(90,136, 204), rgb(50, 88, 204));
1017 }
1018
1019 /*----------- Tables --------- */
1020 .CS_semanticTable{
1021 margin: 0px auto!important;
1022 border-collapse: separate !important;
1023 border-spacing:0px 8px;
1024 width:100%;
1025 text-align:center;
1026 padding:0px 8px !important;
1027 }
1028
1029 .blue{background:lightblue !important;}
1030 .orange{background:rgb(250,210,120) !important;}
1031 .orange th{background:rgb(250,210,120) !important;}
1032 .blue th{background:lightblue !important;}
1033 .green {background:rgb(120,220,150)!important;}
1034 .green th{background:rgb(120,220,150)!important;}
1035
1036
1037 .CS_semanticTable td{
1038 border: none !important;
1039 border-right: 1px dashed lightgrey !important;
1040 padding:0px 10px !important;
1041 }
1042
1043 .CS_semanticTable tr{
1044 background: white !important;
1045 box-shadow: 1px 1px 1px #333;
1046 }
1047
1048 .CS_semanticTable th,
1049 .CS_semanticTable th{
1050 text-align: center;
1051 font-weight:bold;
1052 color:white;
1053 padding: 1px !important;
1054 font-weight:bold;
1055 font-size:150%;
1056 text-shadow:1px 1px 0px #333;
1057 border:none !important;
1058 }
1059
1060
1061 /*---------------------------CSS SHOW/HIDE------------------*/
1062 #showHide1 {opacity: 0;display:none;}
1063 #showHide1:target {opacity: 1;display:block;transition:opacity 3s ease-out;}
1064
1065 #showHide2 {opacity: 0;display:none;}
1066 #showHide2:target {opacity: 1;display:block;transition:opacity 3s ease-out;}
1067
1068 /*------------------------ MEDIUM SCREEN ----------------- */
1069 @media screen and (max-width: 1250px) {
1070
1071 .gradient_Blue{
1072 background: linear-gradient(to bottom, #4c71b2 0%, #2d59a6 55px, #f0f4fb 55px, #f0f4fb 100%);/* W3C */
1073 background: -webkit-linear-gradient(top, #4c71b2 0%, #2d59a6 55px, #f0f4fb 55px, #f0f4fb 100%);
1074 background: -moz-linear-gradient(top #4c71b2 0%, #2d59a6 55px, #f0f4fb 55px, #f0f4fb 100%);
1075 background: -o-linear-gradient(top, #4c71b2 0%, #2d59a6 55px, #f0f4fb 55px, #f0f4fb 100%);
1076 background: -ms-linear-gradient(top, #4c71b2 0%, #2d59a6 55px, #f0f4fb 55px, #f0f4fb 100%);
1077 }
1078
1079 .gradient_Green {
1080 background: linear-gradient(to bottom, #4DB285 0%, #2EA670 55px, #EDFAF4 55px, #EDFAF4 100%);/* W3C */
1081 background: -webkit-linear-gradient(top, #4DB285 0%, #2EA670 55px, #EDFAF4 55px, #EDFAF4 100%);
1082 background: -moz-linear-gradient(top, #4DB285 0%, #2EA670 55px, #EDFAF4 55px, #EDFAF4 100%);
1083 background: -o-linear-gradient(top, #4DB285 0%, #2EA670 55px, #EDFAF4 55px, #EDFAF4 100%);
1084 background: -ms-linear-gradient(left, #4DB285 0%, #2EA670 55px, #EDFAF4 55px, #EDFAF4 100%);
1085 }
1086
1087 .gradient_Yellow {
1088 background: linear-gradient(to bottom, #E3D120 0%, #DDC301 55px, #FFFCE8 55px, #FFFCE8 100%);/* W3C */
1089 background: -webkit-linear-gradient(top,#E3D120 0%, #DDC301 55px, #FFFCE8 55px, #FFFCE8 100%);
1090 background: -moz-linear-gradient(top, #E3D120 0%, #DDC301 55px, #FFFCE8 55px, #FFFCE8 100%);
1091 background: -o-linear-gradient(top, #E3D120 0%, #DDC301 55px, #FFFCE8 55px, #FFFCE8 100%);
1092 background: -ms-linear-gradient(top, #E3D120 0%, #DDC301 55px, #FFFCE8 55px, #FFFCE8 100%);
1093 }
1094
1095 .gradient_Red {
1096 background: linear-gradient(to bottom, #D45049 0%, #CC3530 55px, #FBF0F0 55px, #FBF0F0 100%);/* W3C */
1097 background: -webkit-linear-gradient(top, #D45049 0%, #CC3530 55px, #FBF0F0 55px, #FBF0F0 100%);
1098 background: -moz-linear-gradient(top, #D45049 0%, #CC3530 55px, #FBF0F0 55px, #FBF0F0 100%);
1099 background: -o-linear-gradient(top, #D45049 0%, #CC3530 55px, #FBF0F0 55px, #FBF0F0 100%);
1100 background: -ms-linear-gradient(top, #D45049 0%, #CC3530 55px, #FBF0F0 55px, #FBF0F0 100%);
1101 }
1102
1103 .gradient_Purple {
1104 background: linear-gradient(to bottom, #B24BE0 0%, #B24BE0 55px, #F9F2FC 55px, #F9F2FC 100%); /* W3C */
1105 background: -webkit-linear-gradient(top, #B24BE0 0%, #B24BE0 55px, #F9F2FC 55px, #F9F2FC 100%);
1106 background: -moz-linear-gradient(top, #B24BE0 0%, #B24BE0 55px, #F9F2FC 55px, #F9F2FC 100%);
1107 background: -o-linear-gradient(top, #B24BE0 0%, #B24BE0 55px, #F9F2FC 55px, #F9F2FC 100%);
1108 background: -ms-linear-gradient(top #B24BE0 0%, #B24BE0 55px, #F9F2FC 55px, #F9F2FC 100%);
1109 }
1110
1111 .section_Title{
1112 display: block;
1113 vertical-align: middle;
1114 text-align: center;
1115 width:auto;
1116 }
1117
1118 .section_Title p{ color:white;
1119 border:0px solid red;
1120 -webkit-transform:rotate(0deg);
1121 -moz-transform:rotate(0deg);
1122 -o-transform: rotate(0deg);
1123 display:block;
1124 vertical-align: middle;
1125 margin: auto;
1126 height: 55px ! important;
1127 }
1128
1129 .section_Content{margin:15px !important;}
1130
1131 .hideMediumScreen{display: none !important;}
1132 .showMediumScreen{display: block !important;}
1133 .bigLink{margin:2px 2px 2px 15px;font-size:14px;line-height:14px;}
1134 }
1135
1136 /*----------- SMALL SCREENS --------- */
1137 @media screen and (max-width: 950px) {
1138
1139 .map{display: block;width: 100%;height: 250px;margin-bottom:15px;}
1140
1141 .hideSmallScreen{display: none !important;}
1142 .showSmallScreen{display: block !important;}
1143
1144 .whiteBlock{
1145 display:block;
1146 width: 100%;
1147 margin:auto;
1148 height:auto;
1149 min-height: 40px;
1150 margin: 0px 0px 10px 0px;
1151 }
1152
1153 .CStable_h2blue{margin-left:0px !important;}
1154 }
1155
1156 .column2 label.checkboxLabel {
1157 display: block;
1158 width:50%;
1159 float: left;
1160 font-size:12px;
1161 }
1162
1163 .column3 label.checkboxLabel {
1164 display: block;
1165 width:33.3%;
1166 float: left;
1167 font-size:12px;
1168 }
1169
1170 .column4 label.checkboxLabel {
1171 display: block;
1172 width:25%;
1173 float: left;
1174 font-size:12px;
1175 }
1176
1177 .spacedList label.checkboxLabel {
1178 padding-right:22px !important;
1179 float:left;
1180 font-size:12px;
1181 }
1182
1183 .blueList {
1184 background:#D6F4FF;
1185 }
1186 .greenList{
1187 background:#E6FFD6;
1188 }
1189
1190 .redList {
1191 background:#FFE8DB;
1192 }
1193
1194 .yellowList {
1195 background:#FDFFD1;
1196 }
1197
1198 .selectionBox .ms-selection{
1199 width: 349px;
1200 height: auto;
1201 min-height: 25px;
1202 background:white;
1203 }
1204
1205 .selectionBox .ms-selectable{
1206 width: 349px;
1207 height: auto;
1208 border: none;
1209 background:transparent !important;
1210 font-size: 11px;
1211 border: none !important;
1212 }
1213
1214 .selectionBox .ms-container {width:350px;}
1215
1216 .selectionBox li.ms-elem-selectable {display:block;float:left;border: none !important;padding: 0px 5px !important;}
1217
1218 .selectionBox li.ms-elem-selected {display:block;float:left;border: none !important;}
1219
1220 .selectionBox .ms-container ul.ms-list {width:auto;height:auto;}
1221
1222 .selectionBox input.two-listboxes-search {display:none;}
1223
1224 .selectionBox input.createboxInput {
1225 border-width: 0px 0px 1px;
1226 border-color: #999;
1227 border-radius: 0;
1228 background: rgba(255,255,255,0.5);
1229 }
1230
1231 .selectionBox select.createboxInput.sfShowIfSelected {width:375px;}
1232
1233 input.createboxInput {
1234 padding: 4px;
1235 border-radius: 3px;
1236 border-bottom: 1px solid lightgrey;
1237 border-right: 1px solid lightgrey;
1238 border-top: 1px solid #555;
1239 border-left: 1px solid #555;
1240 }
1241
1242 #Identification input.createboxInput {width:100%;}
1243
1244 select.createboxInput.sfShowIfSelected {
1245 border-radius: 3px 2px 2px 3px;
1246 border-bottom: 1px solid #D3D3D3;
1247 border-right: 1px solid #D3D3D3;
1248 border-top: 1px solid #555;
1249 border-left: 1px solid #555;
1250 height: 27.4px;
1251 background:white;
1252 }
1253
1254 input.hasDatepicker{
1255 padding: 4px;
1256 border-radius: 3px 0px 0px 3px;
1257 border-bottom: 1px solid #D3D3D3;
1258 border-right: 1px solid #D3D3D3;
1259 border-top: 1px solid #555;
1260 border-left: 1px solid #555;
1261 }
1262
1263 button.ui-datepicker-trigger{
1264 height: 25.5px;
1265 margin-left: -1px;
1266 vertical-align: top;
1267 }
1268
1269 input.ui-autocomplete-input.ui-widget.ui-widget-content.ui-corner-left.sfComboBoxActual{
1270 padding: 4px;
1271 border-top: 1px solid #555;
1272 border-left: 1px solid #555;
1273 border-radius: 3px 0px 0px 3px;
1274 }
1275
1276 button.ui-button.ui-widget.ui-state-default.ui-button-icon-only.ui-corner-right.ui-button-icon.sfComboBoxActual{
1277 height:25.4px;
1278 }
1279
1280
1281 .sfImagePreviewWrapper img{height:30px; margin:2px; border:1px solid grey;}
1282
1283 select {vertical-align:top !important;}
1284 input {vertical-align:top !important;}
1285
1286 ul.arrow {
1287 list-style:none;
1288 }
1289
1290 .GoBlock{
1291 -moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
1292 -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
1293 box-shadow:inset 0px 1px 0px 0px #ffffff;
1294 background:rgb(200, 230, 140);
1295 background-image: linear-gradient(rgb(200, 230, 140), rgb(160, 190, 100));
1296 background-image: -webkit-linear-gradient(rgb(200, 230, 140), rgb(160, 190, 100));
1297 -webkit-border-radius: 6px;
1298 -moz-border-radius: 6px;
1299 border-radius: 6px;
1300 text-indent:0;
1301 border:1px solid rgb(155,185,95);
1302 display:inline-block;
1303 color:#333333;
1304 font-family:arial;
1305 font-size:13px;
1306 font-style:normal;
1307 text-decoration:none;
1308 -webkit-box-sizing: border-box;
1309 -moz-box-sizing: border-box;
1310 box-sizing: border-box;
1311 padding:0px 8px;
1312 text-align:center;
1313 }
1314
1315 /*
1316 </pre>
1317 */