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