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