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 .starProgress{
820 width:20px;
821 height:20px;
822 background:url(http://edutechwiki.unige.ch/mediawiki/images/4/47/Star_Pogress.svg);
823 background-size:80px;
824 display:inline-block;
825 vertical-align:middle;
826 margin-top:-5px;
827 }
828
829 .iconSet_Smallest{
830 width:20px;
831 height:20px;
832 background:url(http://edutechwiki.unige.ch/mediawiki/images/1/1c/Mfg_labs_iconset.svg);
833 background-size:750px;
834 display:inline-block;
835 vertical-align:middle;
836 margin-top:-5px;
837 }
838
839 .somewhat{
840 width:27px;
841 height:27px;
842 background:#2B2B29;
843 vertical-align:middle;
844 color:white;
845 font-size:7px;
846 font-weight:bolder;
847 line-height:8px;
848 border-radius:20px;
849 -webkit-box-sizing: border-box;
850 -moz-box-sizing: border-box;
851 box-sizing: border-box;
852 padding-top:6px;
853 padding-right:1px;
854 text-align:center;
855 }
856
857 .section_Title{
858 display: table-cell;
859 vertical-align: middle;
860 width:30px
861 }
862
863 .section_Title p{ color:white;
864 border:0px solid red;
865 -webkit-transform:rotate(-90deg);
866 -moz-transform:rotate(-90deg);
867 -o-transform: rotate(-90deg);
868 -ms-transform:rotate(-90deg);
869 white-space:nowrap;
870 display:inline-block;
871 vertical-align: middle;
872 font-family: ‘Trebuchet MS’, Helvetica, sans-serif;
873 font-size:24px;
874 font-weight:bold;
875 text-shadow: 0px 0px 1px #333;
876 }
877
878
879 .section_Content{margin:0px 10px 0px -130px; text-align: justify;}
880
881 .whiteBlock{
882 display: table-cell;
883 margin: 0px;
884 background: white;
885 box-shadow:0px 0px 1px rgba(0,0,0,0.3);
886 border-bottom: 1px solid rgba(0,0,0,0.3);
887 border-right: none;
888 border-top: 12px solid #444;
889 border-left: none;
890 text-align: left;
891 padding:7px;
892 min-width:295px;
893
894 }
895
896 .map{
897 margin: 0px 15px 0px 0px;
898 background: #4CB385;
899 box-shadow:1px 1px 1px rgba(0,0,0,0.1);
900 border-bottom: 1px solid rgba(0,0,0,0.3);
901 border-right: 1px solid rgba(0,0,0,0.3);
902 border-top: 1px solid rgba(0,0,0,0.1);
903 border-left: 1px solid rgba(0,0,0,0.1);
904 text-align: center;
905 width: 300px;
906 color: white;
907 text-shadow:1px 1px 0px #333;
908 float: left;
909 }
910
911 .bigLink{
912 text-indent: 0px;
913 display: inline-block;
914 color: rgb(51, 51, 51);
915 font-family: arial;
916 font-size: 15px;
917 font-style: normal;
918 text-decoration: none;
919 -moz-box-sizing: border-box;
920 padding: 8px;
921 text-align: left;
922 margin: 6px;
923 width:320px;
924 border-left:4px solid #555;
925 background:white;
926 box-shadow:1px 1px 1px rgba(0,0,0,0.3);
927 margin-left:15px;
928 }
929
930 .bigLink a{color:#333;}
931
932
933
934 /*----------- Completion levels --------- */
935
936 .evaluationBlock{
937 display:inline-block;
938 height:18px;
939 vertical-align:middle;
940 text-align:center;
941 width:25%;
942 box-shadow:1px 1px 1px rgba(0, 0, 0, 0.1);
943 -webkit-box-sizing: border-box;
944 -moz-box-sizing: border-box;
945 box-sizing: border-box;
946 font-size: 13px;
947 }
948
949 .grey{background:#F2F2F2;border:1px solid rgb(215,215,215);color:#333;}
950 .green{background:rgb(110,200,100);color:white;font-weight:bold;border:1px solid rgb(185,185,185);}
951 .red{background:rgb(200, 50, 50);color:white;font-weight:bold;border:1px solid rgb(185,185,185);}
952 .orange{background:rgb(220, 130, 0);color:white;font-weight:bold;border:1px solid rgb(185,185,185);}
953
954 /*----------- Small & medium screen --------- */
955
956 .showSmallScreen{display: none ! important;}
957 .showMediumScreen{display: none ! important;}
958
959 .frame{border:4px solid white;box-shadow:1px 1px 1px 1px rgb(213,213,213);}
960
961 /*----------- Smart buttons --------- */
962 .btn{
963 border:1px solid;
964 border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
965 -webkit-box-shadow:0px 1px 0px rgba(255, 255, 255, 0.3) inset, 0px 1px 2px rgba(0, 0, 0, 0.05);
966 box-shadow:0px 1px 0px rgba(255, 255, 255, 0.3) inset, 0px 1px 2px rgba(0, 0, 0, 0.05);
967 border-radius:4px;
968 display:inline-block;
969 font-size:13px;
970 font-style:normal;
971 text-decoration:none;
972 -webkit-box-sizing: border-box;
973 -moz-box-sizing: border-box;
974 box-sizing: border-box;
975 padding:0px 8px;
976 color:white;
977 text-shadow:0px -1px 0px rgba(0, 0, 0, 0.25);
978 }
979
980 .btn:hover{
981 -webkit-transform:scaleY(1.04);
982 -moz-transform:scaleY(1.04);
983 -ms-transform:scaleY(1.04);
984 -o-transform:scaleY(1.04);
985 transform:scaleY(1.04);
986 }
987 .btn a{color:white !important;text-shadow:0px -1px 0px rgba(0, 0, 0, 0.25) !important; text-decoration:none !important;display:block;}
988
989 .btnGreen{
990 background-image: -webkit-linear-gradient(top, rgb(98, 196, 98), rgb(81, 163, 81));
991 background-image: -moz-linear-gradient(top, rgb(98, 196, 98), rgb(81, 163, 81));
992 background-image: -o-linear-gradient(top, rgb(98, 196, 98), rgb(81, 163, 81));
993 background-image: -ms-linear-gradient(top, rgb(98, 196, 98), rgb(81, 163, 81));
994 background-image:linear-gradient(to bottom, rgb(98, 196, 98), rgb(81, 163, 81));
995 }
996
997 .btnRed{
998 background-image: -webkit-linear-gradient(top rgb(248, 108, 48), rgb(218, 68, 28));
999 background-image: -moz-linear-gradient(top, rgb(248, 108, 48), rgb(218, 68, 28));
1000 background-image: -o-linear-gradient(top, rgb(248, 108, 48), rgb(218, 68, 28));
1001 background-image: -ms-linear-gradient(top, rgb(248, 108, 48), rgb(218, 68, 28));
1002 background-image:linear-gradient(to bottom, rgb(248, 108, 48), rgb(218, 68, 28));
1003 }
1004 .btnBlue{
1005 background-image: -webkit-linear-gradient(top, rgb(90,136, 204), rgb(50, 88, 204));
1006 background-image: -moz-linear-gradient(top, rgb(90,136, 204), rgb(50, 88, 204));
1007 background-image: -o-linear-gradient(top, rgb(90,136, 204), rgb(50, 88, 204));
1008 background-image: -ms-linear-gradient(top, rgb(90,136, 204), rgb(50, 88, 204));
1009 background-image:linear-gradient(to bottom, rgb(90,136, 204), rgb(50, 88, 204));
1010 }
1011
1012 /*----------- Tables --------- */
1013 .CS_semanticTable{
1014 margin: 0px auto!important;
1015 border-collapse: separate !important;
1016 border-spacing:0px 8px;
1017 width:100%;
1018 text-align:center;
1019 padding:0px 8px !important;
1020 }
1021
1022 .blue{background:lightblue !important;}
1023 .orange{background:rgb(250,210,120) !important;}
1024 .orange th{background:rgb(250,210,120) !important;}
1025 .blue th{background:lightblue !important;}
1026 .green {background:rgb(120,220,150)!important;}
1027 .green th{background:rgb(120,220,150)!important;}
1028
1029
1030 .CS_semanticTable td{
1031 border: none !important;
1032 border-right: 1px dashed lightgrey !important;
1033 padding:0px 10px !important;
1034 }
1035
1036 .CS_semanticTable tr{
1037 background: white !important;
1038 box-shadow: 1px 1px 1px #333;
1039 }
1040
1041 .CS_semanticTable th,
1042 .CS_semanticTable th{
1043 text-align: center;
1044 font-weight:bold;
1045 color:white;
1046 padding: 1px !important;
1047 font-weight:bold;
1048 font-size:150%;
1049 text-shadow:1px 1px 0px #333;
1050 border:none !important;
1051 }
1052
1053
1054 /*---------------------------CSS SHOW/HIDE------------------*/
1055 #showHide1 {opacity: 0;display:none;}
1056 #showHide1:target {opacity: 1;display:block;transition:opacity 3s ease-out;}
1057
1058 #showHide2 {opacity: 0;display:none;}
1059 #showHide2:target {opacity: 1;display:block;transition:opacity 3s ease-out;}
1060
1061 /*------------------------ MEDIUM SCREEN ----------------- */
1062 @media screen and (max-width: 1250px) {
1063
1064 .gradient_Blue{
1065 background: linear-gradient(to bottom, #4c71b2 0%, #2d59a6 55px, #f0f4fb 55px, #f0f4fb 100%);/* W3C */
1066 background: -webkit-linear-gradient(top, #4c71b2 0%, #2d59a6 55px, #f0f4fb 55px, #f0f4fb 100%);
1067 background: -moz-linear-gradient(top #4c71b2 0%, #2d59a6 55px, #f0f4fb 55px, #f0f4fb 100%);
1068 background: -o-linear-gradient(top, #4c71b2 0%, #2d59a6 55px, #f0f4fb 55px, #f0f4fb 100%);
1069 background: -ms-linear-gradient(top, #4c71b2 0%, #2d59a6 55px, #f0f4fb 55px, #f0f4fb 100%);
1070 }
1071
1072 .gradient_Green {
1073 background: linear-gradient(to bottom, #4DB285 0%, #2EA670 55px, #EDFAF4 55px, #EDFAF4 100%);/* W3C */
1074 background: -webkit-linear-gradient(top, #4DB285 0%, #2EA670 55px, #EDFAF4 55px, #EDFAF4 100%);
1075 background: -moz-linear-gradient(top, #4DB285 0%, #2EA670 55px, #EDFAF4 55px, #EDFAF4 100%);
1076 background: -o-linear-gradient(top, #4DB285 0%, #2EA670 55px, #EDFAF4 55px, #EDFAF4 100%);
1077 background: -ms-linear-gradient(left, #4DB285 0%, #2EA670 55px, #EDFAF4 55px, #EDFAF4 100%);
1078 }
1079
1080 .gradient_Yellow {
1081 background: linear-gradient(to bottom, #E3D120 0%, #DDC301 55px, #FFFCE8 55px, #FFFCE8 100%);/* W3C */
1082 background: -webkit-linear-gradient(top,#E3D120 0%, #DDC301 55px, #FFFCE8 55px, #FFFCE8 100%);
1083 background: -moz-linear-gradient(top, #E3D120 0%, #DDC301 55px, #FFFCE8 55px, #FFFCE8 100%);
1084 background: -o-linear-gradient(top, #E3D120 0%, #DDC301 55px, #FFFCE8 55px, #FFFCE8 100%);
1085 background: -ms-linear-gradient(top, #E3D120 0%, #DDC301 55px, #FFFCE8 55px, #FFFCE8 100%);
1086 }
1087
1088 .gradient_Red {
1089 background: linear-gradient(to bottom, #D45049 0%, #CC3530 55px, #FBF0F0 55px, #FBF0F0 100%);/* W3C */
1090 background: -webkit-linear-gradient(top, #D45049 0%, #CC3530 55px, #FBF0F0 55px, #FBF0F0 100%);
1091 background: -moz-linear-gradient(top, #D45049 0%, #CC3530 55px, #FBF0F0 55px, #FBF0F0 100%);
1092 background: -o-linear-gradient(top, #D45049 0%, #CC3530 55px, #FBF0F0 55px, #FBF0F0 100%);
1093 background: -ms-linear-gradient(top, #D45049 0%, #CC3530 55px, #FBF0F0 55px, #FBF0F0 100%);
1094 }
1095
1096 .gradient_Purple {
1097 background: linear-gradient(to bottom, #B24BE0 0%, #B24BE0 55px, #F9F2FC 55px, #F9F2FC 100%); /* W3C */
1098 background: -webkit-linear-gradient(top, #B24BE0 0%, #B24BE0 55px, #F9F2FC 55px, #F9F2FC 100%);
1099 background: -moz-linear-gradient(top, #B24BE0 0%, #B24BE0 55px, #F9F2FC 55px, #F9F2FC 100%);
1100 background: -o-linear-gradient(top, #B24BE0 0%, #B24BE0 55px, #F9F2FC 55px, #F9F2FC 100%);
1101 background: -ms-linear-gradient(top #B24BE0 0%, #B24BE0 55px, #F9F2FC 55px, #F9F2FC 100%);
1102 }
1103
1104 .section_Title{
1105 display: block;
1106 vertical-align: middle;
1107 text-align: center;
1108 width:auto;
1109 }
1110
1111 .section_Title p{ color:white;
1112 border:0px solid red;
1113 -webkit-transform:rotate(0deg);
1114 -moz-transform:rotate(0deg);
1115 -o-transform: rotate(0deg);
1116 display:block;
1117 vertical-align: middle;
1118 margin: auto;
1119 height: 55px ! important;
1120 }
1121
1122 .section_Content{margin:15px !important;}
1123
1124 .hideMediumScreen{display: none !important;}
1125 .showMediumScreen{display: block !important;}
1126 .bigLink{margin:2px 2px 2px 15px;font-size:14px;line-height:14px;}
1127 }
1128
1129 /*----------- SMALL SCREENS --------- */
1130 @media screen and (max-width: 950px) {
1131
1132 .map{display: block;width: 100%;height: 250px;margin-bottom:15px;}
1133
1134 .hideSmallScreen{display: none !important;}
1135 .showSmallScreen{display: block !important;}
1136
1137 .whiteBlock{
1138 display:block;
1139 width: 100%;
1140 margin:auto;
1141 height:auto;
1142 min-height: 40px;
1143 margin: 0px 0px 10px 0px;
1144 }
1145
1146 .CStable_h2blue{margin-left:0px !important;}
1147 }
1148
1149 .column2 label.checkboxLabel {
1150 display: block;
1151 width:50%;
1152 float: left;
1153 font-size:12px;
1154 }
1155
1156 .column3 label.checkboxLabel {
1157 display: block;
1158 width:33.3%;
1159 float: left;
1160 font-size:12px;
1161 }
1162
1163 .column4 label.checkboxLabel {
1164 display: block;
1165 width:25%;
1166 float: left;
1167 font-size:12px;
1168 }
1169
1170 .spacedList label.checkboxLabel {
1171 padding-right:22px !important;
1172 float:left;
1173 font-size:12px;
1174 }
1175
1176 .blueList {
1177 background:#D6F4FF;
1178 }
1179 .greenList{
1180 background:#E6FFD6;
1181 }
1182
1183 .redList {
1184 background:#FFE8DB;
1185 }
1186
1187 .yellowList {
1188 background:#FDFFD1;
1189 }
1190
1191 .selectionBox .ms-selection{
1192 width: 349px;
1193 height: auto;
1194 min-height: 25px;
1195 background:white;
1196 }
1197
1198 .selectionBox .ms-selectable{
1199 width: 349px;
1200 height: auto;
1201 border: none;
1202 background:transparent !important;
1203 font-size: 11px;
1204 border: none !important;
1205 }
1206
1207 .selectionBox .ms-container {width:350px;}
1208
1209 .selectionBox li.ms-elem-selectable {display:block;float:left;border: none !important;padding: 0px 5px !important;}
1210
1211 .selectionBox li.ms-elem-selected {display:block;float:left;border: none !important;}
1212
1213 .selectionBox .ms-container ul.ms-list {width:auto;height:auto;}
1214
1215 .selectionBox input.two-listboxes-search {display:none;}
1216
1217 .selectionBox input.createboxInput {
1218 border-width: 0px 0px 1px;
1219 border-color: #999;
1220 border-radius: 0;
1221 background: rgba(255,255,255,0.5);
1222 }
1223
1224 .selectionBox select.createboxInput.sfShowIfSelected {width:375px;}
1225
1226 input.createboxInput {
1227 padding: 4px;
1228 border-radius: 3px;
1229 border-bottom: 1px solid lightgrey;
1230 border-right: 1px solid lightgrey;
1231 border-top: 1px solid #555;
1232 border-left: 1px solid #555;
1233 }
1234
1235 #Identification input.createboxInput {width:100%;}
1236
1237 select.createboxInput.sfShowIfSelected {
1238 border-radius: 3px 2px 2px 3px;
1239 border-bottom: 1px solid #D3D3D3;
1240 border-right: 1px solid #D3D3D3;
1241 border-top: 1px solid #555;
1242 border-left: 1px solid #555;
1243 height: 27.4px;
1244 background:white;
1245 }
1246
1247 input.hasDatepicker{
1248 padding: 4px;
1249 border-radius: 3px 0px 0px 3px;
1250 border-bottom: 1px solid #D3D3D3;
1251 border-right: 1px solid #D3D3D3;
1252 border-top: 1px solid #555;
1253 border-left: 1px solid #555;
1254 }
1255
1256 button.ui-datepicker-trigger{
1257 height: 25.5px;
1258 margin-left: -1px;
1259 vertical-align: top;
1260 }
1261
1262 input.ui-autocomplete-input.ui-widget.ui-widget-content.ui-corner-left.sfComboBoxActual{
1263 padding: 4px;
1264 border-top: 1px solid #555;
1265 border-left: 1px solid #555;
1266 border-radius: 3px 0px 0px 3px;
1267 }
1268
1269 button.ui-button.ui-widget.ui-state-default.ui-button-icon-only.ui-corner-right.ui-button-icon.sfComboBoxActual{
1270 height:25.4px;
1271 }
1272
1273
1274 .sfImagePreviewWrapper img{height:30px; margin:2px; border:1px solid grey;}
1275
1276 select {vertical-align:top !important;}
1277 input {vertical-align:top !important;}