MediaWiki:Common.css

  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 /*front page */
 12 /* CCFFFF = bright light blue */
 13 @media screen {
 14 #front_left {padding:3px; float:left; width:57%; border:1px solid #006699; background: #EBFFFF;}
 15 #front_right {float:left; width:40%; background: #FAF9EC; border:1px solid #996600; margin-left: 4px; padding: 3px;}
 16 div.front_title {background:#E2C4E8; font-size:large; border-bottom:1px solid #996600;border-top:1px solid #996600;}
 17 }
 18 
 19 @media print handheld {
 20 #front_left {}
 21 #front_right {}
 22 }http://edutechwiki.unige.ch/en/Zooniverse
 23 
 24 /* Space out main section titles */
 25 h2 {margin-top:3.5ex;}
 26 h3 {margin-top:2ex;}
 27 
 28 #GooglesearchBody input{ font-size: 80%; }
 29 
 30 /* wikitable/prettytable class for skinning normal tables */
 31 
 32 table.wikitable,
 33 table.prettytable {
 34   margin: 1em 1em 1em 0;
 35   background: #f9f9f9;
 36   border: 1px #aaaaaa solid;
 37   border-collapse: collapse;
 38 }
 39 
 40 table.wikitable th, table.wikitable td,
 41 table.prettytable th, table.prettytable td {
 42   border: 1px #aaaaaa solid;
 43   padding: 0.2em;
 44 }
 45 
 46 table.wikitable th,
 47 table.prettytable th {
 48   background: #f2f2f2;
 49   text-align: center;
 50 }
 51 
 52 table.wikitable caption,
 53 table.prettytable caption {
 54   margin-left: inherit;
 55   margin-right: inherit;
 56 }
 57 
 58 .allpagesredirect {
 59   font-style: italic;
 60 }
 61 
 62 /* Overrides for semantic forms tables - SemanticForms/skins/SemanticForms.css */
 63 
 64 table.formtable {
 65  width: 100%;
 66  margin: 5px 0 0;
 67  padding: 0.3em 0.2em 0.2em 0.2em;
 68  background: transparent;
 69  border: 1px dotted grey;
 70  border-radius: 2px;
 71  background: #f9f9f9;
 72 }
 73 
 74 table.formtable caption {
 75  color:blue;
 76  text-align:left;
 77  font-size:12pt;
 78 }
 79 
 80 /* Infobox template style */
 81 
 82  .infobox {
 83    border: 1px solid #aaaaaa;
 84    width:270px;
 85    background-color: #f9f9f9;
 86    color: black;
 87    margin-bottom: 0.5em;
 88    margin-left: 1em;
 89    padding: 0.2em;
 90    float: right;
 91 }
 92 .infobox td,
 93 .infobox th {
 94    border: 2px none #aaaaaa;
 95    padding: 0.2em 0.5em;
 96    border-bottom: 1px solid #f0f0f0 !important;
 97 }
 98 .infobox caption {
 99    font-size: larger;
100    margin-left: inherit;
101 }
102 .infobox.bordered {
103    border-collapse: collapse;
104 }
105 .infobox.bordered td,
106 .infobox.bordered th {
107    border: 1px solid #aaaaaa;
108 }
109 .infobox.bordered .borderless td,
110 .infobox.bordered .borderless th {
111    border: 0;
112 }
113 
114 .infobox.sisterproject {
115    width: 20em;
116    font-size: 90%;
117 }
118 
119 /* styles for bordered infobox with merged rows */
120 .infobox.bordered .mergedtoprow td,
121 .infobox.bordered .mergedtoprow th {
122    border: 0;
123    border-top: 1px solid #aaaaaa;
124    border-right: 1px solid #aaaaaa;
125 }
126 
127 .infobox.bordered .mergedrow td,
128 .infobox.bordered .mergedrow th {
129    border: 0;
130    border-right: 1px solid #aaaaaa;
131 }
132 
133 
134 /* Removes useless links from printout */
135 @media print {
136     .portlet, #privacy, #about, #disclaimer {display:none;}
137 }
138 
139 /* Banner Styles used in EduTech wiki 
140  - use class names like Banner_xxxx
141  */
142 
143 .Banner_incomplete {
144   float:right;
145   clear:right;
146   width:200px;
147   border:1px solid orange;
148   background-color:#FFFACD;
149   padding:7px; 
150   margin-bottom: 10px;
151   margin-left: 1em;
152 }
153 
154 .Banner_tutorial {
155   float:right;
156   clear:right;
157   width:200px;
158   border:1px solid blue;
159   background-color:#F8C9E4;
160   padding:7px; 
161   margin-bottom: 10px;
162   margin-left: 1em;
163 }
164 
165 .tut_goals{
166   background-color:#F8C9E4;
167   padding:7px; 
168   margin-bottom: 10px;
169   border:1px solid #AAAAAA;
170 }
171 
172 .Banner_copyright{
173   background-color:#d0f0c0;
174   padding:7px; 
175   margin-bottom: 10px;
176   border:1px solid #AAAAAA;
177 }
178 
179 /* Style for the source code tag */
180 
181 .actionscript{
182   background-color:#FFFFEE;
183   padding:7px; 
184   margin-bottom: 10px;
185   border:1px #AAAAAA solid;
186 }
187 
188 /* Tag cloud extension CSS */
189 
190 .tagcloud {
191 	width: 95%;
192 	text-align: center;
193 	background-color: #FDFDFD;
194 	border: 1px solid #EEEEEE;
195 	padding: 15px 10px 15px 10px;
196  }
197  .tagcloud a {
198 	color: #0052CB;
199 	margin-left: 10px;
200 	margin-right: 10px;
201 	font-weight: bold;
202  }
203 
204 /* See http://svn.wikimedia.org/svnroot/mediawiki/trunk/extensions/PageBy/README */
205 ul.pageby {
206     border:1px solid #60606F;
207     background-color:#E0E0EF;
208     font-size: 80%;
209     margin:1ex;
210     padding:1ex;
211     list-style-type:none;
212   }
213 
214 /* category tree - first is just for portlet - second for all trees */
215 #p-categorytree-portlet {font-size: 85% } 
216 .CategoryTreeTag {font-size: 85%; }
217 
218 /* Syntaxhighlight geshi */
219 div.mw-geshi {
220   border: 1px dotted grey;
221   padding: 2px; 
222   margin-left:1em;
223   margin-top:2px;
224   margin-right:2px;
225   margin-bottom:2px;
226   font-size: 120%
227 }
228 
229 code {
230   border: 1px solid #ddd;
231   padding: 1px 4px;
232   border-radius: 2px;
233 }
234 
235 /*
236 </pre>
237  */
238 
239 /* ------------------------- class for fluid two columns layout -------------------------*/
240 
241 .leftFifty {
242   width:50%;
243   float:left;
244 
245 }
246 .rightFifty {
247   width:50%;
248   float:right;
249 }
250 
251 .leftSixty {
252   width:60%;
253   float:left;
254 }
255 .rightForty {
256   width:40%;
257   float:right
258 }
259 
260 .CS_right{
261 width:320px;
262 float:right;
263 text-align:center;}
264 
265 .CS_left{display:block;}
266 
267 .CS_rightImg{
268 box-shadow:1px 1px 2px;
269 display:inline-block;
270 margin:0px auto 8px auto;
271 width:300px;
272 background:#ECECEC;
273 }
274 
275 .CS_semanticTableL{
276 margin: 0px auto 8px auto;
277 background: #f9f9f9;
278 border-collapse: collapse;
279 width:280px;
280 }
281 .CS_semanticTableL td,
282 .CS_semanticTableL th,
283 .CS_semanticTableR td,
284 .CS_semanticTableR th{
285   border: 1px #aaaaaa solid;
286   padding: 4px 8px 4px 8px;
287 }
288 
289 .CS_semanticTableL th,
290 .CS_semanticTableR th{
291 background: #f2f2f2;
292 text-align: center;
293 font-weight:bold;
294 color:#A0BE64;
295 padding: 8px 15px 8px 15px;
296 }
297 
298 .CS_semanticTableR{
299 margin: 0px auto 8px auto;
300 background: #f9f9f9;
301 border-collapse: collapse;
302 width:280px;
303 }
304 
305 .evaluationGreyBlock{
306 display:inline-block;
307 height:23px;
308 line-height:23px;
309 vertical-align:middle;
310 text-align:center;
311 background:#F2F2F2;
312 width:25%;
313 border:1px solid rgb(225,225,225);
314 box-shadow:0px 1px 1px rgba(255, 255, 255, 0.8) inset, 1px 0px 5px rgba(0, 0, 0, 0.1);
315 -webkit-box-sizing: border-box;
316 -moz-box-sizing: border-box;
317 box-sizing: border-box;
318 }
319 .evaluationGreenBlock{
320 display:inline-block;
321 height:23px;
322 line-height:23px;margin:1px;
323 vertical-align:middle;
324 text-align:center;
325 background:rgb(110,200,100);
326 width:25%;
327 border:1px solid rgb(225,225,225);
328 box-shadow:0px 1px 1px rgba(255, 255, 255, 0.8) inset, 1px 0px 5px rgba(0, 0, 0, 0.1);
329 color:white;
330 font-weight:bold;
331 -webkit-box-sizing: border-box;
332 -moz-box-sizing: border-box;
333 box-sizing: border-box;
334 }
335 .evaluationRedBlock{
336 display:inline-block;
337 height:23px;
338 line-height:23px;
339 vertical-align:middle;
340 text-align:center;
341 background:rgb(200, 50, 50);
342 width:25%;
343 border:1px solid rgb(225,225,225);
344 box-shadow:0px 1px 1px rgba(255, 255, 255, 0.8) inset, 1px 0px 5px rgba(0, 0, 0, 0.1);
345 color:white;
346 font-weight:bold;
347 -webkit-box-sizing: border-box;
348 -moz-box-sizing: border-box;
349 box-sizing: border-box;
350 }
351 .evaluationOrangeBlock{
352 display:inline-block;
353 height:23px;
354 line-height:23px;
355 vertical-align:middle;
356 text-align:center;
357 background:rgb(220, 130, 0);
358 width:25%;
359 border:1px solid rgb(225,225,225);
360 box-shadow:0px 1px 1px rgba(255, 255, 255, 0.8) inset, 1px 0px 5px rgba(0, 0, 0, 0.1);
361 color:white;
362 font-weight:bold;
363 -webkit-box-sizing: border-box;
364 -moz-box-sizing: border-box;
365 box-sizing: border-box;
366 }
367 
368 @media screen and (max-width: 1280px) {
369   .leftFifty {
370     width:100%;
371   }
372   .rightFifty {
373     left: 0;
374     width:100%;
375     position:relative;
376   }
377   .leftSixty {
378     width:100%;
379   }
380   .rightForty {
381     left: 0;
382     width:100%;
383     position:relative;
384   }
385 
386 .CS_left{
387 position:relative;
388 float:none;
389 width:100%;
390 margin-top:10px;
391 }
392 
393 .special{
394 line-height:216px !important;
395 }
396 
397 .CS_rightImg{
398 box-shadow:1px 1px 2px;
399 display:inline-block;
400 margin:8px auto;
401 width:auto;
402 height:230px;}
403 
404 .CS_rightImg img{width:auto;height:230px;}
405 
406 #map_google3_1{width:340px !important;height:200px !important;}
407 
408 .CS_right{
409 position:relative;
410 float:none;
411 width:100%;
412 }
413 
414 }
415 
416 /* ------------------------- class for citizen science project template-------------------------*/
417 
418 .decorativeBlueCell{
419 width:20px; 
420 border: 1px solid rgb(200,215,230); 
421 text-align:center; 
422 color:black; 
423 font-weight:bold;
424 box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset,1px 0px 3px rgba(0,0,0,0.1);
425 padding:8px;
426 background:rgb(190, 209, 225);
427 background-image: linear-gradient(to right, rgb(190, 209, 225) 0%, rgb(219, 232, 248) 100%);
428 background-image:-webkit-linear-gradient(right, rgb(190, 209, 225) 0%, rgb(219, 232, 248) 100%);
429 }
430 
431 .decorativeRedCell{
432 width:20px; 
433 border: 1px solid rgb(205,105,105); 
434 text-align:center; 
435 color:black; 
436 font-weight:bold;
437 box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset,1px 0px 3px rgba(0,0,0,0.1);
438 padding:8px;
439 background:rgb(220,120,120);
440 background-image: linear-gradient(to right, rgb(210,110,110) 0%,rgb(240,140,140) 100%);
441 background-image:-webkit-linear-gradient(right, rgb(210,110,110) 0%,rgb(240,140,140) 100%);
442 }
443 
444 .decorativeGreenCell{
445 width:20px; 
446 border: 1px solid rgb(150,180,90); 
447 text-align:center; 
448 color:black; 
449 font-weight:bold;
450 box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset,1px 0px 3px rgba(0,0,0,0.1);
451 padding:8px;
452 background:rgb(160,190,100);
453 background-image: linear-gradient(to right, rgb(160,190,100) 0%,rgb(200,230,140) 100%);
454 background-image:-webkit-linear-gradient(right, rgb(160,190,100) 0%,rgb(200,230,140) 100%);
455 }
456 .decorativeGreyCell{
457 width:20px; 
458 border: 1px solid rgb(200,200,200); 
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(242, 242, 242);
465 background-image: linear-gradient(to right, #d7d7d7 0%,#e6e6e6 100%);
466 background-image:-webkit-linear-gradient(right, #d7d7d7 0%,#e6e6e6 100%);
467 }
468 
469 table.CS_wikitable{
470 border-collapse: collapse;
471 width:98%;
472 text-align:justify;
473 margin:0px 15px 15px 0px;
474 }
475 
476 table.CS_wikitable td{
477 padding:7px;
478 border: 1px solid rgb(200,200,200);
479 }
480 
481 .CStable_h1{
482 font-weight:bold;
483 height:25px;
484 font-size:133%;
485 }
486 
487 .CStable_h2grey{
488 text-transform:uppercase;
489 color:#777777;
490 font-weight:bold;
491 font-size:113%;
492 }
493 .CStable_h2blue{
494 text-transform:uppercase;
495 color:#85A4D3;
496 font-weight:bold;
497 font-size:113%;
498 }
499 
500 
501 .blueBlock{
502 -moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
503 -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
504 box-shadow:inset 0px 1px 0px 0px #ffffff;
505 background:rgb(190, 209, 225);
506 background-image: linear-gradient(rgb(219, 232, 248), rgb(190, 209, 225));
507 background-image: -webkit-linear-gradient(rgb(219, 232, 248), rgb(190, 209, 225)));
508 -webkit-border-radius: 6px;
509 -moz-border-radius: 6px;
510 border-radius: 6px;
511 text-indent:0;
512 border:1px solid rgb(175, 194, 209);
513 display:inline-block;
514 color:#333333;
515 font-family:arial;
516 font-size:13px;
517 font-style:normal;
518 text-decoration:none;
519 margin:0px 0px 10px 1%;
520 padding:0px 8px;
521 line-height:90px;
522 width:48%;
523 -webkit-box-sizing: border-box;
524 -moz-box-sizing: border-box;
525 box-sizing: border-box;
526 }
527 
528 .blueBlock b{
529 color:rgb(60, 84, 139);
530 } 
531 
532 .redBlock{
533 -moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
534 -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
535 box-shadow:inset 0px 1px 0px 0px #ffffff;
536 background:rgb(220, 120, 120);
537 background-image: linear-gradient(rgb(240, 140, 140), rgb(210, 110, 110));
538 background-image: -webkit-linear-gradient(rgb(240, 140, 140), rgb(210, 110, 110)));
539 -webkit-border-radius: 6px;
540 -moz-border-radius: 6px;
541 border-radius: 6px;
542 text-indent:0;
543 border:1px solid rgb(205, 100, 100);
544 display:inline-block;
545 color:#333333;
546 font-family:arial;
547 font-size:13px;
548 font-style:normal;
549 text-decoration:none;
550 margin:0px 0px 10px 1%;
551 padding:0px 8px;
552 line-height:90px;
553 width:48%;
554 -webkit-box-sizing: border-box;
555 -moz-box-sizing: border-box;
556 box-sizing: border-box;
557 }
558 
559 .redBlock b{
560 color:rgb(110, 40, 40);
561 } 
562 
563 .greenBlock{
564 -moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
565 -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
566 box-shadow:inset 0px 1px 0px 0px #ffffff;
567 background:rgb(160, 190, 100);
568 background-image: linear-gradient(rgb(200, 230, 140), rgb(160, 190, 100));
569 background-image: -webkit-linear-gradient(rgb(200, 230, 140), rgb(160, 190, 100));
570 -webkit-border-radius: 6px;
571 -moz-border-radius: 6px;
572 border-radius: 6px;
573 text-indent:0;
574 border:1px solid rgb(155,185,95);
575 display:inline-block;
576 color:#333333;
577 font-family:arial;
578 font-size:12px;
579 font-style:normal;
580 text-decoration:none;
581 margin:0px 0px 10px 1%;
582 padding:0px 8px;
583 line-height:90px;
584 width:48%;
585 -webkit-box-sizing: border-box;
586 -moz-box-sizing: border-box;
587 box-sizing: border-box;
588 }
589 
590 .greenBlock b{
591 color:rgb(70, 95, 60);
592 } 
593 
594 .greyBlock{
595 -moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
596 -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
597 box-shadow:inset 0px 1px 0px 0px #ffffff;
598 background:rgb(230, 230, 230);
599 background-image: linear-gradient(rgb(238, 238, 238), rgb(220, 220, 220));
600 background-image: -webkit-linear-gradient(rgb(238, 238, 238), rgb(220, 220, 220));
601 -webkit-border-radius: 6px;
602 -moz-border-radius: 6px;
603 border-radius: 6px;
604 text-indent:0;
605 border:1px solid rgb(207,207,207);
606 display:inline-block;
607 color:#333333;
608 font-family:arial;
609 font-size:12px;
610 font-style:normal;
611 text-decoration:none;
612 margin:0px 0px 10px 1%;
613 padding:0px 8px;
614 line-height:90px;
615 width:48%;
616 -webkit-box-sizing: border-box;
617 -moz-box-sizing: border-box;
618 box-sizing: border-box;
619 }
620 
621 .whiteBlock{
622 -moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
623 -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
624 box-shadow:inset 0px 1px 0px 0px #ffffff;
625 background:rgb(244, 244, 244);
626 background-image: linear-gradient(rgb(238, 238, 238), rgb(220, 220, 220));
627 background-image: -webkit-linear-gradient(rgb(238, 238, 238), rgb(220, 220, 220));
628 -webkit-border-radius: 6px;
629 -moz-border-radius: 6px;
630 border-radius: 6px;
631 text-indent:0;
632 border:1px solid rgb(207,207,207);
633 display:inline-block;
634 color:#333333;
635 font-family:arial;
636 font-size:12px;
637 font-style:normal;
638 text-decoration:none;
639 margin:0px 0px 10px 1%;
640 padding:0px 8px;
641 height:92px;
642 width:48%;
643 -webkit-box-sizing: border-box;
644 -moz-box-sizing: border-box;
645 box-sizing: border-box;
646 }