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% !important;
392 border:none !important;
393 }
394 .rightFifty {
395 left: 0;
396 width:100% !important;
397 position:relative;
398 }
399 .leftSixty {
400 width:100%;
401 }
402 .rightForty {
403 left: 0;
404 width:100%;
405 position:relative;
406 }
407 .rightSixty {
408 left: 0;
409 width:100%;
410 position:relative;
411 }
412 .leftForty {
413 width:100%;
414 }
415
416 .CS_left{
417 position:relative;
418 float:none;
419 width:100%;
420 margin-top:10px;
421 }
422
423 .nodisplay{
424 display:none;
425 }
426
427
428 #map_google3_1{width:auto !important;height:200px !important;}
429
430 .headBlockBlue{height:280px;}
431 .headBlockGreen{height:280px;}
432 .headBlockRed{height:280px;}
433 .noResize{height:auto;}
434
435 }
436
437 /* ------------------------- class for citizen science project template-------------------------*/
438
439 .decorativeBlueCell{
440 width:21px;
441 border: 1px solid rgb(200,215,230);
442 text-align:center;
443 color:black;
444 font-weight:bold;
445 box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset,1px 0px 3px rgba(0,0,0,0.1);
446 padding:8px;
447 background:rgb(190, 209, 225);
448 background-image: linear-gradient(to right, rgb(190, 209, 225) 0%, rgb(219, 232, 248) 100%);
449 background-image:-webkit-linear-gradient(right, rgb(190, 209, 225) 0%, rgb(219, 232, 248) 100%);
450 }
451
452 .decorativeRedCell{
453 width:21px;
454 border: 1px solid rgb(215,195,125);
455 text-align:center;
456 color:black;
457 font-weight:bold;
458 box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset,1px 0px 3px rgba(0,0,0,0.1);
459 padding:8px;
460 background:rgb(220, 200, 130);
461 background-image: linear-gradient(to right, rgb(220, 200, 130) 0%,rgb(248, 228, 158) 100%);
462 background-image:-webkit-linear-gradient(right, rgb(220, 200, 130) 0%,rgb(248, 228, 158) 100%);
463 }
464
465 .decorativeGreenCell{
466 width:21px;
467 border: 1px solid rgb(150,180,90);
468 text-align:center;
469 color:black;
470 font-weight:bold;
471 box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset,1px 0px 3px rgba(0,0,0,0.1);
472 padding:8px;
473 background:rgb(160,190,100);
474 background-image: linear-gradient(to right, rgb(160,190,100) 0%,rgb(200,230,140) 100%);
475 background-image:-webkit-linear-gradient(right, rgb(160,190,100) 0%,rgb(200,230,140) 100%);
476 }
477 .decorativeGreyCell{
478 width:21px;
479 border: 1px solid rgb(200,200,200);
480 text-align:center;
481 color:black;
482 font-weight:bold;
483 box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset,1px 0px 3px rgba(0,0,0,0.1);
484 padding:8px;
485 background:rgb(242, 242, 242);
486 background-image: linear-gradient(to right, #d7d7d7 0%,#e6e6e6 100%);
487 background-image:-webkit-linear-gradient(right, #d7d7d7 0%,#e6e6e6 100%);
488 }
489
490 table.CS_wikitable{
491 border-collapse: collapse;
492 width:100%;
493 text-align:justify;
494 margin:0px 15px 0px 0px;
495 }
496
497 table.CS_wikitable td{
498 padding:7px;
499 }
500
501 .CStable_h2grey{
502 text-transform:uppercase;
503 color:#777777;
504 font-weight:bold;
505 font-size:120%;
506 }
507 .CStable_h2green{
508 text-transform:uppercase;
509 color:rgb(100, 170, 80);
510 font-weight:bold;
511 font-size:120%;
512 }
513 .CStable_h2red{
514 text-transform:uppercase;
515 color:rgb(200, 80, 70);
516 font-weight:bold;
517 font-size:120%;
518 }
519
520
521 .blueBlock{
522 -moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
523 -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
524 box-shadow:inset 0px 1px 0px 0px #ffffff;
525 background:rgb(190, 209, 225);
526 background-image: linear-gradient(rgb(219, 232, 248), rgb(190, 209, 225));
527 background-image: -webkit-linear-gradient(rgb(219, 232, 248), rgb(190, 209, 225));
528 -webkit-border-radius: 6px;
529 -moz-border-radius: 6px;
530 border-radius: 6px;
531 text-indent:0;
532 border:1px solid rgb(175, 194, 209);
533 display:inline-block;
534 color:#333333;
535 font-family:arial;
536 font-size:13px;
537 font-style:normal;
538 text-decoration:none;
539 margin:0px 0px 10px 1%;
540 padding:0px 8px;
541 line-height:90px;
542 width:48%;
543 -webkit-box-sizing: border-box;
544 -moz-box-sizing: border-box;
545 box-sizing: border-box;
546 }
547
548 .headBlockBlue{
549 -moz-box-shadow:1px 1px 1px rgb(90,90,90);
550 -webkit-box-shadow:inset 1px 1px 2px rgb(90,90,90);
551 box-shadow:1px 1px 2px rgb(90,90,90);
552 background:rgb(130, 160, 210);
553 background-image: linear-gradient(rgb(130, 160, 210), rgb(110, 140, 190));
554 background-image: -webkit-linear-gradient(rgb(130, 160, 210), rgb(100, 130, 180));
555 -webkit-border-radius: 1px 6px 1px 1px;
556 -moz-border-radius: 1px 6px 1px 1px;
557 border-radius: 1px 6px 1px 1px;
558 padding:15px;
559 -webkit-box-sizing: border-box;
560 -moz-box-sizing: border-box;
561 box-sizing: border-box;
562 text-align:center;
563 margin-top: 53px;
564 }
565 .headBlockGreen{
566 -moz-box-shadow:1px 1px 2px rgb(90,90,90);
567 -webkit-box-shadow:inset 1px 1px 2px rgb(90,90,90);
568 box-shadow:1px 1px 2px rgb(90,90,90);
569 background:rgb(150, 190, 110);
570 background-image: linear-gradient(rgb(150, 190, 110), rgb(120, 170, 90));
571 background-image: -webkit-linear-gradient(rgb(150, 190, 110), rgb(120, 170, 90));
572 -webkit-border-radius: 1px 6px 6px 6px;
573 -moz-border-radius: 1px 6px 6px 6px;
574 border-radius: 1px 6px 6px 6px;
575 padding:15px;
576 -webkit-box-sizing: border-box;
577 -moz-box-sizing: border-box;
578 box-sizing: border-box;
579 text-align:center;
580 margin-top:53px;
581 -webkit-box-sizing: border-box;
582 -moz-box-sizing: border-box;
583 box-sizing: border-box;
584 }
585 .headBlockRed{
586 -moz-box-shadow:1px 1px 2px rgb(90,90,90);
587 -webkit-box-shadow:inset 1px 1px 2px rgb(90,90,90);
588 box-shadow:1px 1px 2px rgb(90,90,90);
589 background:rgb(200, 110, 90);
590 background-image: linear-gradient(rgb(200, 110, 90), rgb(190, 100, 80));
591 background-image: -webkit-linear-gradient(rgb(200, 110, 90), rgb(190, 100, 80));
592 -webkit-border-radius: 1px 6px 6px 6px;
593 -moz-border-radius: 1px 6px 6px 6px;
594 border-radius: 1px 6px 6px 6px;
595 padding:15px;
596 -webkit-box-sizing: border-box;
597 -moz-box-sizing: border-box;
598 box-sizing: border-box;
599 text-align:center;
600 margin-top:53px;
601 }
602
603 .blueBlock b{
604 color:rgb(60, 84, 139) !important;
605 }
606
607 .orangeBlock{
608 -moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
609 -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
610 box-shadow:inset 0px 1px 0px 0px #ffffff;
611 background:rgb(220, 200, 130);
612 background-image: linear-gradient(rgb(248, 228, 158), rgb(220, 200, 130));
613 background-image: -webkit-linear-gradient(rgb(248, 228, 158), rgb(220, 200, 130));
614 -webkit-border-radius: 6px;
615 -moz-border-radius: 6px;
616 border-radius: 6px;
617 text-indent:0;
618 border:1px solid rgb(215, 190, 125);
619 display:inline-block;
620 color:#333333;
621 font-family:arial;
622 font-size:13px;
623 font-style:normal;
624 text-decoration:none;
625 padding:0px 8px;
626 -webkit-box-sizing: border-box;
627 -moz-box-sizing: border-box;
628 box-sizing: border-box;
629 }
630
631 .orangeBlock b{
632 color:rgb(110, 40, 40) !important;
633 }
634
635 .redBlock{
636 -moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
637 -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
638 box-shadow:inset 0px 1px 0px 0px #ffffff;
639 background:rgb(220, 30, 30);
640 background-image: linear-gradient(rgb(255, 130, 130), rgb(220, 30, 30));
641 background-image: -webkit-linear-gradient(rgb(255, 130, 130), rgb(220, 30, 30));
642 -webkit-border-radius: 6px;
643 -moz-border-radius: 6px;
644 border-radius: 6px;
645 text-indent:0;
646 border:1px solid rgb(190, 10, 10);
647 display:inline-block;
648 color:rgb(255, 230,230);
649 font-family:arial;
650 font-size:13px;
651 font-style:normal;
652 text-decoration:none;
653 padding:0px 8px;
654 -webkit-box-sizing: border-box;
655 -moz-box-sizing: border-box;
656 box-sizing: border-box;
657 }
658
659 .redBlock b{
660 color:rgb(255, 200,200) !important;
661 }
662
663
664
665
666 .greenBlock{
667 -moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
668 -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
669 box-shadow:inset 0px 1px 0px 0px #ffffff;
670 background:rgb(200, 230, 140);
671 background-image: linear-gradient(rgb(200, 230, 140), rgb(160, 190, 100));
672 background-image: -webkit-linear-gradient(rgb(200, 230, 140), rgb(160, 190, 100));
673 -webkit-border-radius: 6px;
674 -moz-border-radius: 6px;
675 border-radius: 6px;
676 text-indent:0;
677 border:1px solid rgb(155,185,95);
678 display:inline-block;
679 color:#333333;
680 font-family:arial;
681 font-size:13px;
682 font-style:normal;
683 text-decoration:none;
684 -webkit-box-sizing: border-box;
685 -moz-box-sizing: border-box;
686 box-sizing: border-box;
687 padding:0px 8px;
688 }
689
690 .greenBlock b{
691 color:rgb(70, 95, 60) !important;
692 }
693
694 .greyBlock{
695 -moz-box-shadow:1px 1px 0px 1px rgba(0, 0, 0, 0.15);
696 -webkit-box-shadow:1px 1px 0px 1px rgba(0, 0, 0, 0.15);
697 box-shadow:1px 1px 0px 1px rgba(0, 0, 0, 0.15);
698 background:rgb(230, 230, 230);
699 background-image: linear-gradient(rgb(252, 252, 252), rgb(235, 235, 235));
700 background-image: -webkit-linear-gradient(rgb(238, 238, 238), rgb(220, 220, 220));
701 -webkit-border-radius: 6px;
702 -moz-border-radius: 6px;
703 border-radius: 6px;
704 text-indent:0;
705 display:inline-block;
706 color:#333333;
707 font-family:arial;
708 font-size:12px;
709 font-style:normal;
710 text-decoration:none;
711 margin:0px 0px 10px 1%;
712 padding:0px 8px;
713 line-height:120px;
714 width:48%;
715 -webkit-box-sizing: border-box;
716 -moz-box-sizing: border-box;
717 box-sizing: border-box;
718 position:relative;
719 }
720
721 .greyBlockTitle{font-size: 14px;
722 width: 25px;
723 position: absolute;
724 height: 104%;
725 left: -2px;
726 text-align: center;
727 display: block;
728 top: -2%;
729 line-height: 15px;
730 font-weight: bold;
731 text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
732 border-radius: 6px 0px 0px 6px;
733 vertical-align: middle;
734 padding: 8px 0px;
735 -webkit-box-sizing: border-box;
736 -moz-box-sizing: border-box;
737 box-sizing: border-box;
738 -moz-box-shadow: 1px 0px 1px rgba(0,0,0,0.2);
739 -webkit-box-shadow:1px 0px 1px rgba(0,0,0,0.2);
740 box-shadow:1px 0px 1px rgba(0,0,0,0.2);
741 border:1px solid rgba(0,0,0,0.15);
742 }
743
744 /* ---------------------------------------------------------------------------------------*/
745 /* ------------------------------ Citizen Science CSS V2 ---------------------------------*/
746 /* ---------------------------------------------------------------------------------------*/
747 .CSwrapper{
748 display:table;
749 width:100%;
750 padding:20px 10px;
751 margin: 15px 0;
752 box-sizing: border-box;
753 -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
754 -moz-box-sizing: border-box; /* Firefox, other Gecko */
755 box-shadow:1px 1px 1px 1px rgb(183,183,183);
756 border: 4px solid white;
757 min-width:540px;
758 color:rgba(0, 0, 0, 0.8);
759 }
760
761 .gradient_Blue{
762 background: linear-gradient(to right, #4c71b2 0%, #2d59a6 55px, #f0f4fb 55px, #f0f4fb 100%);/* W3C */
763 background: -webkit-linear-gradient(left, #4c71b2 0%, #2d59a6 55px, #f0f4fb 55px, #f0f4fb 100%);
764 background: -moz-linear-gradient(left #4c71b2 0%, #2d59a6 55px, #f0f4fb 55px, #f0f4fb 100%);
765 background: -o-linear-gradient(left, #4c71b2 0%, #2d59a6 55px, #f0f4fb 55px, #f0f4fb 100%);
766 background: -ms-linear-gradient(right, #4c71b2 0%, #2d59a6 55px, #f0f4fb 55px, #f0f4fb 100%);
767 }
768
769 .gradient_Green {
770 background: linear-gradient(to right, #4DB285 0%, #2EA670 55px, #EDFAF4 55px, #EDFAF4 100%);/* W3C */
771 background: -webkit-linear-gradient(left, #4DB285 0%, #2EA670 55px, #EDFAF4 55px, #EDFAF4 100%);
772 background: -moz-linear-gradient(left, #4DB285 0%, #2EA670 55px, #EDFAF4 55px, #EDFAF4 100%);
773 background: -o-linear-gradient(left #4DB285 0%, #2EA670 55px, #EDFAF4 55px, #EDFAF4 100%);
774 background: -ms-linear-gradient(left, #4DB285 0%, #2EA670 55px, #EDFAF4 55px, #EDFAF4 100%);
775 }
776
777 .gradient_Yellow {
778 background: linear-gradient(to right, #E3D120 0%, #DDC301 55px, #FFFCE8 55px, #FFFCE8 100%);/* W3C */
779 background: -webkit-linear-gradient(left,#E3D120 0%, #DDC301 55px, #FFFCE8 55px, #FFFCE8 100%);
780 background: -moz-linear-gradient(left, #E3D120 0%, #DDC301 55px, #FFFCE8 55px, #FFFCE8 100%);
781 background: -o-linear-gradient(left, #E3D120 0%, #DDC301 55px, #FFFCE8 55px, #FFFCE8 100%);
782 background: -ms-linear-gradient(left, #E3D120 0%, #DDC301 55px, #FFFCE8 55px, #FFFCE8 100%);
783 }
784
785 .gradient_Red {
786 background: linear-gradient(to right, #D45049 0%, #CC3530 55px, #FBF0F0 55px, #FBF0F0 100%);/* W3C */
787 background: -webkit-linear-gradient(left, #D45049 0%, #CC3530 55px, #FBF0F0 55px, #FBF0F0 100%);
788 background: -moz-linear-gradient(left #D45049 0%, #CC3530 55px, #FBF0F0 55px, #FBF0F0 100%);
789 background: -o-linear-gradient(left, #D45049 0%, #CC3530 55px, #FBF0F0 55px, #FBF0F0 100%);
790 background: -ms-linear-gradient(left, #D45049 0%, #CC3530 55px, #FBF0F0 55px, #FBF0F0 100%);
791 }
792
793 .gradient_Purple {
794 background: linear-gradient(to right, #B24BE0 0%, #B24BE0 55px, #F9F2FC 55px, #F9F2FC 100%); /* W3C */
795 background: -webkit-linear-gradient(left, #B24BE0 0%, #B24BE0 55px, #F9F2FC 55px, #F9F2FC 100%);
796 background: -moz-linear-gradient(left, #B24BE0 0%, #B24BE0 55px, #F9F2FC 55px, #F9F2FC 100%);
797 background: -o-linear-gradient(left, #B24BE0 0%, #B24BE0 55px, #F9F2FC 55px, #F9F2FC 100%);
798 background: -ms-linear-gradient(left #B24BE0 0%, #B24BE0 55px, #F9F2FC 55px, #F9F2FC 100%);
799 }
800
801 .gradient_Grey {background: rgb(232,232,232);padding-left: 20px;}
802
803 .iconSet{
804 width:40px;
805 height:40px;
806 background:url(http://edutechwiki.unige.ch/mediawiki/images/1/1c/Mfg_labs_iconset.svg);
807 display:inline-block;
808 vertical-align:middle;
809 }
810 .iconSet_Small{
811 width:30px;
812 height:30px;
813 background:url(http://edutechwiki.unige.ch/mediawiki/images/1/1c/Mfg_labs_iconset.svg);
814 background-size:1100px;
815 display:inline-block;
816 vertical-align:middle;
817 margin-top:-5px;
818 }
819
820 .starProgress{
821 width:20px;
822 height:20px;
823 background:url(http://edutechwiki.unige.ch/mediawiki/images/4/47/Star_Pogress.svg);
824 background-size:80px;
825 display:inline-block;
826 vertical-align:middle;
827 margin-top:-5px;
828 }
829
830 .iconSet_Smallest{
831 width:20px;
832 height:20px;
833 background:url(http://edutechwiki.unige.ch/mediawiki/images/1/1c/Mfg_labs_iconset.svg);
834 background-size:750px;
835 display:inline-block;
836 vertical-align:middle;
837 margin-top:-5px;
838 }
839
840 .somewhat{
841 width:27px;
842 height:27px;
843 background:#2B2B29;
844 vertical-align:middle;
845 color:white;
846 font-size:7px;
847 font-weight:bolder;
848 line-height:8px;
849 border-radius:20px;
850 -webkit-box-sizing: border-box;
851 -moz-box-sizing: border-box;
852 box-sizing: border-box;
853 padding-top:6px;
854 padding-right:1px;
855 text-align:center;
856 }
857
858 .section_Title{
859 display: table-cell;
860 vertical-align: middle;
861 width:30px
862 }
863
864 .section_Title p{ color:white;
865 border:0px solid red;
866 -webkit-transform:rotate(-90deg);
867 -moz-transform:rotate(-90deg);
868 -o-transform: rotate(-90deg);
869 -ms-transform:rotate(-90deg);
870 white-space:nowrap;
871 display:inline-block;
872 vertical-align: middle;
873 font-family: ‘Trebuchet MS’, Helvetica, sans-serif;
874 font-size:24px;
875 font-weight:bold;
876 text-shadow: 0px 0px 1px #333;
877 }
878
879
880 .section_Content{margin:0px 10px 0px -130px; text-align: justify;}
881
882 .whiteBlock{
883 display: table-cell;
884 margin: 0px;
885 background: white;
886 box-shadow:0px 0px 1px rgba(0,0,0,0.3);
887 border-bottom: 1px solid rgba(0,0,0,0.3);
888 border-right: none;
889 border-top: 12px solid #444;
890 border-left: none;
891 text-align: left;
892 padding:7px;
893 min-width:295px;
894
895 }
896
897 .map{
898 margin: 0px 15px 0px 0px;
899 background: #4CB385;
900 box-shadow:1px 1px 1px rgba(0,0,0,0.1);
901 border-bottom: 1px solid rgba(0,0,0,0.3);
902 border-right: 1px solid rgba(0,0,0,0.3);
903 border-top: 1px solid rgba(0,0,0,0.1);
904 border-left: 1px solid rgba(0,0,0,0.1);
905 text-align: center;
906 width: 300px;
907 color: white;
908 text-shadow:1px 1px 0px #333;
909 float: left;
910 }
911
912 .bigLink{
913 text-indent: 0px;
914 display: inline-block;
915 color: rgb(51, 51, 51);
916 font-family: arial;
917 font-size: 15px;
918 font-style: normal;
919 text-decoration: none;
920 -moz-box-sizing: border-box;
921 padding: 8px;
922 text-align: left;
923 margin: 6px;
924 width:320px;
925 border-left:4px solid #555;
926 background:white;
927 box-shadow:1px 1px 1px rgba(0,0,0,0.3);
928 margin-left:15px;
929 }
930
931 .bigLink a{color:#333;}
932
933
934
935 /*----------- Completion levels --------- */
936
937 .evaluationBlock{
938 display:inline-block;
939 height:18px;
940 vertical-align:middle;
941 text-align:center;
942 width:25%;
943 box-shadow:1px 1px 1px rgba(0, 0, 0, 0.1);
944 -webkit-box-sizing: border-box;
945 -moz-box-sizing: border-box;
946 box-sizing: border-box;
947 font-size: 13px;
948 }
949
950 .grey{background:#F2F2F2;border:1px solid rgb(215,215,215);color:#333;}
951 .green{background:rgb(110,200,100);color:white;font-weight:bold;border:1px solid rgb(185,185,185);}
952 .red{background:rgb(200, 50, 50);color:white;font-weight:bold;border:1px solid rgb(185,185,185);}
953 .orange{background:rgb(220, 130, 0);color:white;font-weight:bold;border:1px solid rgb(185,185,185);}
954
955 /*----------- Small & medium screen --------- */
956
957 .showSmallScreen{display: none ! important;}
958 .showMediumScreen{display: none ! important;}
959
960 .frame{border:4px solid white;box-shadow:1px 1px 1px 1px rgb(213,213,213);}
961
962 /*----------- Smart buttons --------- */
963 .btn{
964 border:1px solid;
965 border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
966 -webkit-box-shadow:0px 1px 0px rgba(255, 255, 255, 0.3) inset, 0px 1px 2px rgba(0, 0, 0, 0.05);
967 box-shadow:0px 1px 0px rgba(255, 255, 255, 0.3) inset, 0px 1px 2px rgba(0, 0, 0, 0.05);
968 border-radius:4px;
969 display:inline-block;
970 font-size:13px;
971 font-style:normal;
972 text-decoration:none;
973 -webkit-box-sizing: border-box;
974 -moz-box-sizing: border-box;
975 box-sizing: border-box;
976 padding:0px 8px;
977 color:white;
978 text-shadow:0px -1px 0px rgba(0, 0, 0, 0.25);
979 }
980
981 .btn:hover{
982 -webkit-transform:scaleY(1.04);
983 -moz-transform:scaleY(1.04);
984 -ms-transform:scaleY(1.04);
985 -o-transform:scaleY(1.04);
986 transform:scaleY(1.04);
987 }
988 .btn a{color:white !important;text-shadow:0px -1px 0px rgba(0, 0, 0, 0.25) !important; text-decoration:none !important;display:block;}
989
990 .btnGreen{
991 background-image: -webkit-linear-gradient(top, rgb(98, 196, 98), rgb(81, 163, 81));
992 background-image: -moz-linear-gradient(top, rgb(98, 196, 98), rgb(81, 163, 81));
993 background-image: -o-linear-gradient(top, rgb(98, 196, 98), rgb(81, 163, 81));
994 background-image: -ms-linear-gradient(top, rgb(98, 196, 98), rgb(81, 163, 81));
995 background-image:linear-gradient(to bottom, rgb(98, 196, 98), rgb(81, 163, 81));
996 }
997
998 .btnRed{
999 background-image: -webkit-linear-gradient(top rgb(248, 108, 48), rgb(218, 68, 28));
1000 background-image: -moz-linear-gradient(top, rgb(248, 108, 48), rgb(218, 68, 28));
1001 background-image: -o-linear-gradient(top, rgb(248, 108, 48), rgb(218, 68, 28));
1002 background-image: -ms-linear-gradient(top, rgb(248, 108, 48), rgb(218, 68, 28));
1003 background-image:linear-gradient(to bottom, rgb(248, 108, 48), rgb(218, 68, 28));
1004 }
1005 .btnBlue{
1006 background-image: -webkit-linear-gradient(top, rgb(90,136, 204), rgb(50, 88, 204));
1007 background-image: -moz-linear-gradient(top, rgb(90,136, 204), rgb(50, 88, 204));
1008 background-image: -o-linear-gradient(top, rgb(90,136, 204), rgb(50, 88, 204));
1009 background-image: -ms-linear-gradient(top, rgb(90,136, 204), rgb(50, 88, 204));
1010 background-image:linear-gradient(to bottom, rgb(90,136, 204), rgb(50, 88, 204));
1011 }
1012
1013 /*----------- Tables --------- */
1014 .CS_semanticTable{
1015 margin: 0px auto!important;
1016 border-collapse: separate !important;
1017 border-spacing:0px 8px;
1018 width:100%;
1019 text-align:center;
1020 padding:0px 8px !important;
1021 }
1022
1023 .blue{background:lightblue !important;}
1024 .orange{background:rgb(250,210,120) !important;}
1025 .orange th{background:rgb(250,210,120) !important;}
1026 .blue th{background:lightblue !important;}
1027 .green {background:rgb(120,220,150)!important;}
1028 .green th{background:rgb(120,220,150)!important;}
1029
1030
1031 .CS_semanticTable td{
1032 border: none !important;
1033 border-right: 1px dashed lightgrey !important;
1034 padding:0px 10px !important;
1035 }
1036
1037 .CS_semanticTable tr{
1038 background: white !important;
1039 box-shadow: 1px 1px 1px #333;
1040 }
1041
1042 .CS_semanticTable th,
1043 .CS_semanticTable th{
1044 text-align: center;
1045 font-weight:bold;
1046 color:white;
1047 padding: 1px !important;
1048 font-weight:bold;
1049 font-size:150%;
1050 text-shadow:1px 1px 0px #333;
1051 border:none !important;
1052 }
1053
1054
1055 /*---------------------------CSS SHOW/HIDE------------------*/
1056 #showHide1 {opacity: 0;display:none;}
1057 #showHide1:target {opacity: 1;display:block;transition:opacity 3s ease-out;}
1058
1059 #showHide2 {opacity: 0;display:none;}
1060 #showHide2:target {opacity: 1;display:block;transition:opacity 3s ease-out;}
1061
1062 /*------------------------ MEDIUM SCREEN ----------------- */
1063 @media screen and (max-width: 1250px) {
1064
1065 .gradient_Blue{
1066 background: linear-gradient(to bottom, #4c71b2 0%, #2d59a6 55px, #f0f4fb 55px, #f0f4fb 100%);/* W3C */
1067 background: -webkit-linear-gradient(top, #4c71b2 0%, #2d59a6 55px, #f0f4fb 55px, #f0f4fb 100%);
1068 background: -moz-linear-gradient(top #4c71b2 0%, #2d59a6 55px, #f0f4fb 55px, #f0f4fb 100%);
1069 background: -o-linear-gradient(top, #4c71b2 0%, #2d59a6 55px, #f0f4fb 55px, #f0f4fb 100%);
1070 background: -ms-linear-gradient(top, #4c71b2 0%, #2d59a6 55px, #f0f4fb 55px, #f0f4fb 100%);
1071 }
1072
1073 .gradient_Green {
1074 background: linear-gradient(to bottom, #4DB285 0%, #2EA670 55px, #EDFAF4 55px, #EDFAF4 100%);/* W3C */
1075 background: -webkit-linear-gradient(top, #4DB285 0%, #2EA670 55px, #EDFAF4 55px, #EDFAF4 100%);
1076 background: -moz-linear-gradient(top, #4DB285 0%, #2EA670 55px, #EDFAF4 55px, #EDFAF4 100%);
1077 background: -o-linear-gradient(top, #4DB285 0%, #2EA670 55px, #EDFAF4 55px, #EDFAF4 100%);
1078 background: -ms-linear-gradient(left, #4DB285 0%, #2EA670 55px, #EDFAF4 55px, #EDFAF4 100%);
1079 }
1080
1081 .gradient_Yellow {
1082 background: linear-gradient(to bottom, #E3D120 0%, #DDC301 55px, #FFFCE8 55px, #FFFCE8 100%);/* W3C */
1083 background: -webkit-linear-gradient(top,#E3D120 0%, #DDC301 55px, #FFFCE8 55px, #FFFCE8 100%);
1084 background: -moz-linear-gradient(top, #E3D120 0%, #DDC301 55px, #FFFCE8 55px, #FFFCE8 100%);
1085 background: -o-linear-gradient(top, #E3D120 0%, #DDC301 55px, #FFFCE8 55px, #FFFCE8 100%);
1086 background: -ms-linear-gradient(top, #E3D120 0%, #DDC301 55px, #FFFCE8 55px, #FFFCE8 100%);
1087 }
1088
1089 .gradient_Red {
1090 background: linear-gradient(to bottom, #D45049 0%, #CC3530 55px, #FBF0F0 55px, #FBF0F0 100%);/* W3C */
1091 background: -webkit-linear-gradient(top, #D45049 0%, #CC3530 55px, #FBF0F0 55px, #FBF0F0 100%);
1092 background: -moz-linear-gradient(top, #D45049 0%, #CC3530 55px, #FBF0F0 55px, #FBF0F0 100%);
1093 background: -o-linear-gradient(top, #D45049 0%, #CC3530 55px, #FBF0F0 55px, #FBF0F0 100%);
1094 background: -ms-linear-gradient(top, #D45049 0%, #CC3530 55px, #FBF0F0 55px, #FBF0F0 100%);
1095 }
1096
1097 .gradient_Purple {
1098 background: linear-gradient(to bottom, #B24BE0 0%, #B24BE0 55px, #F9F2FC 55px, #F9F2FC 100%); /* W3C */
1099 background: -webkit-linear-gradient(top, #B24BE0 0%, #B24BE0 55px, #F9F2FC 55px, #F9F2FC 100%);
1100 background: -moz-linear-gradient(top, #B24BE0 0%, #B24BE0 55px, #F9F2FC 55px, #F9F2FC 100%);
1101 background: -o-linear-gradient(top, #B24BE0 0%, #B24BE0 55px, #F9F2FC 55px, #F9F2FC 100%);
1102 background: -ms-linear-gradient(top #B24BE0 0%, #B24BE0 55px, #F9F2FC 55px, #F9F2FC 100%);
1103 }
1104
1105 .section_Title{
1106 display: block;
1107 vertical-align: middle;
1108 text-align: center;
1109 width:auto;
1110 }
1111
1112 .section_Title p{ color:white;
1113 border:0px solid red;
1114 -webkit-transform:rotate(0deg);
1115 -moz-transform:rotate(0deg);
1116 -o-transform: rotate(0deg);
1117 display:block;
1118 vertical-align: middle;
1119 margin: auto;
1120 height: 55px ! important;
1121 }
1122
1123 .section_Content{margin:15px !important;}
1124
1125 .hideMediumScreen{display: none !important;}
1126 .showMediumScreen{display: block !important;}
1127 .bigLink{margin:2px 2px 2px 15px;font-size:14px;line-height:14px;}
1128 }
1129
1130 /*----------- SMALL SCREENS --------- */
1131 @media screen and (max-width: 950px) {
1132
1133 .map{display: block;width: 100%;height: 250px;margin-bottom:15px;}
1134
1135 .hideSmallScreen{display: none !important;}
1136 .showSmallScreen{display: block !important;}
1137
1138 .whiteBlock{
1139 display:block;
1140 width: 100%;
1141 margin:auto;
1142 height:auto;
1143 min-height: 40px;
1144 margin: 0px 0px 10px 0px;
1145 }
1146
1147 .CStable_h2blue{margin-left:0px !important;}
1148 }
1149
1150 .column2 label.checkboxLabel {
1151 display: block;
1152 width:50%;
1153 float: left;
1154 font-size:12px;
1155 }
1156
1157 .column3 label.checkboxLabel {
1158 display: block;
1159 width:33.3%;
1160 float: left;
1161 font-size:12px;
1162 }
1163
1164 .column4 label.checkboxLabel {
1165 display: block;
1166 width:25%;
1167 float: left;
1168 font-size:12px;
1169 }
1170
1171 .spacedList label.checkboxLabel {
1172 padding-right:22px !important;
1173 float:left;
1174 font-size:12px;
1175 }
1176
1177 .blueList {
1178 background:#D6F4FF;
1179 }
1180 .greenList{
1181 background:#E6FFD6;
1182 }
1183
1184 .redList {
1185 background:#FFE8DB;
1186 }
1187
1188 .yellowList {
1189 background:#FDFFD1;
1190 }
1191
1192 .selectionBox .ms-selection{
1193 width: 349px;
1194 height: auto;
1195 min-height: 25px;
1196 background:white;
1197 }
1198
1199 .selectionBox .ms-selectable{
1200 width: 349px;
1201 height: auto;
1202 border: none;
1203 background:transparent !important;
1204 font-size: 11px;
1205 border: none !important;
1206 }
1207
1208 .selectionBox .ms-container {width:350px;}
1209
1210 .selectionBox li.ms-elem-selectable {display:block;float:left;border: none !important;padding: 0px 5px !important;}
1211
1212 .selectionBox li.ms-elem-selected {display:block;float:left;border: none !important;}
1213
1214 .selectionBox .ms-container ul.ms-list {width:auto;height:auto;}
1215
1216 .selectionBox input.two-listboxes-search {display:none;}
1217
1218 .selectionBox input.createboxInput {
1219 border-width: 0px 0px 1px;
1220 border-color: #999;
1221 border-radius: 0;
1222 background: rgba(255,255,255,0.5);
1223 }
1224
1225 .selectionBox select.createboxInput.sfShowIfSelected {width:375px;}
1226
1227 input.createboxInput {
1228 padding: 4px;
1229 border-radius: 3px;
1230 border-bottom: 1px solid lightgrey;
1231 border-right: 1px solid lightgrey;
1232 border-top: 1px solid #555;
1233 border-left: 1px solid #555;
1234 }
1235
1236 #Identification input.createboxInput {width:100%;}
1237
1238 select.createboxInput.sfShowIfSelected {
1239 border-radius: 3px 2px 2px 3px;
1240 border-bottom: 1px solid #D3D3D3;
1241 border-right: 1px solid #D3D3D3;
1242 border-top: 1px solid #555;
1243 border-left: 1px solid #555;
1244 height: 27.4px;
1245 background:white;
1246 }
1247
1248 input.hasDatepicker{
1249 padding: 4px;
1250 border-radius: 3px 0px 0px 3px;
1251 border-bottom: 1px solid #D3D3D3;
1252 border-right: 1px solid #D3D3D3;
1253 border-top: 1px solid #555;
1254 border-left: 1px solid #555;
1255 }
1256
1257 button.ui-datepicker-trigger{
1258 height: 25.5px;
1259 margin-left: -1px;
1260 vertical-align: top;
1261 }
1262
1263 input.ui-autocomplete-input.ui-widget.ui-widget-content.ui-corner-left.sfComboBoxActual{
1264 padding: 4px;
1265 border-top: 1px solid #555;
1266 border-left: 1px solid #555;
1267 border-radius: 3px 0px 0px 3px;
1268 }
1269
1270 button.ui-button.ui-widget.ui-state-default.ui-button-icon-only.ui-corner-right.ui-button-icon.sfComboBoxActual{
1271 height:25.4px;
1272 }
1273
1274
1275 .sfImagePreviewWrapper img{height:30px; margin:2px; border:1px solid grey;}
1276
1277 select {vertical-align:top !important;}
1278 input {vertical-align:top !important;}