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