MediaWiki:Common.css

The educational technology and digital learning wiki
Revision as of 10:22, 18 March 2014 by Dacostj7 (talk | contribs)
Jump to navigation Jump to search

Note: After publishing, you may have to bypass your browser's cache to see the changes.

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