galette/webroot/themes/default/galette.css

   1 /*
   2  * == Summary
   3  *
   4  * == Global main styles
   5  * == Forms elements
   6  * == Header
   7  * == Main menu
   8  * == Footer
   9  * == Main Galette styles
  10  * == Public pages
  11  * == Mobile devices
  12  */
  13
  14 /*
  15  * == Global main styles
  16  */
  17 a {
  18     text-decoration: none;
  19     color: #0000FF;
  20 }
  21
  22 a:hover {
  23     color: #eea423;
  24 }
  25
  26 .ui-button:hover {
  27     color:inherit;
  28 }
  29
  30 form,
  31 body {
  32     margin: 0;
  33     padding: 0;
  34 }
  35
  36 body {
  37     font-family: "Liberation sans", Verdana, sans-serif;
  38     font-size:0.8em;
  39     background-color:white;
  40     color:black;
  41 }
  42
  43 img{
  44     border:none;
  45 }
  46
  47 label, input[type="button"], input[type="submit"], input[type="reset"], button {
  48     cursor: pointer;
  49 }
  50
  51 /* == Forms elements */
  52 input, button {
  53     font-size:100%;
  54 }
  55
  56 input, textarea {
  57     box-sizing: border-box;
  58     -webkit-box-sizing: border-box;
  59     -moz-box-sizing: border-box;
  60     border:1px solid #bbb;
  61     margin:0px;
  62     -webkit-transition: all 0.30s ease-in-out;
  63     -moz-transition: all 0.30s ease-in-out;
  64     -ms-transition: all 0.30s ease-in-out;
  65     -o-transition: all 0.30s ease-in-out;
  66     outline: none;
  67     vertical-align: middle;
  68 }
  69
  70 input[type="checkbox"], input[type="radio"] {
  71    display: inline-block;
  72    vertical-align: middle;
  73 }
  74
  75 .galette_form input[type="radio"] + label {
  76     vertical-align: text-top;
  77     padding: 0 1em 0 0!important;
  78 }
  79
  80 input:focus,
  81 textarea:focus {
  82     border-color: #FFB619;
  83 }
  84
  85 input:required {
  86     border:1px red solid;
  87     border-left-width: .5em;
  88 }
  89 input:required:valid {
  90     border-color:green;
  91 }
  92
  93 #galette_body .selectize-input.required {
  94     border-color:green;
  95 }
  96
  97 #galette_body .selectize-input.required.invalid {
  98     border:1px red solid;
  99 }
 100
 101 input[readonly] {
 102     color: #555;
 103     background-color: #e6e6e6;
 104     cursor: default;
 105 }
 106
 107 input[type=file] {
 108     border: none;
 109 }
 110
 111 pre, code, kbd, samp {
 112     font-family: monospace, monospace;
 113 }
 114
 115 pre {
 116     margin: 0px;
 117 }
 118
 119 img, table, td, blockquote, code, pre, textarea, input {
 120     max-width: 100%;
 121 }
 122
 123 code, pre, samp, textarea {
 124     word-wrap: break-word;
 125     white-space: pre-wrap;
 126 }
 127
 128 abbr[title] {
 129     border-bottom: 1px dotted #555;
 130     cursor: help;
 131 }
 132
 133 th, cation {
 134     text-align: left;
 135 }
 136
 137 p#required {
 138     font-size: .8em;
 139     float:left;
 140     margin:0;
 141 }
 142
 143 select:invalid {
 144   height: 0px !important;
 145   opacity: 0 !important;
 146   position: absolute !important;
 147   display: flex !important;
 148 }
 149
 150 select:invalid[multiple] {
 151   margin-top: 15px !important;
 152 }
 153
 154 select.lang option {
 155     padding-left: 30px;
 156     background-repeat: no-repeat;
 157     background-position: 0 50%;
 158 }
 159
 160 [id=back2top] {
 161     background: #DDDDFF;
 162     color: black;
 163     position: fixed;
 164     right: 0;
 165     bottom: 0;
 166     padding: .2em .5em;
 167     border-radius: 6px 0 0 0;
 168     opacity: 0.45;
 169 }
 170
 171 [id=back2top]:hover {
 172     color: black;
 173     opacity: 1;
 174 }
 175
 176 /* =/ Global main styles */
 177
 178 /*
 179  * == Header
 180  */
 181  nav {
 182      margin: .3em 0 .5em;
 183      text-align: center;
 184 }
 185
 186 nav a{
 187      display: inline-block!important;
 188 }
 189 /* =/ Header */
 190
 191 /*
 192  * == Main menu
 193  */
 194 #menu {
 195     float: left;
 196     background-color: #DDDDFF;
 197     margin:0 0 0.5em 0.4em;
 198     padding:0 .2em;
 199     width:16em;
 200     text-align: center;
 201     -moz-border-radius: 10px 10px 10px 10px;
 202     -webkit-border-radius: 10px 10px 10px 10px;
 203     border-radius: 10px 10px 10px 10px;
 204 }
 205
 206 #menu h1 {
 207     font-size:1em;
 208     cursor:pointer;
 209     text-align:left;
 210     margin:0;
 211 }
 212 /* .nojs class will be removed at runtime by a js script */
 213 #menu h1.nojs{
 214     background: #FFB619 url(jquery-ui/images/ui-bg_glass_65_ffb619_1x400.png) repeat-x scroll 50% 50%;
 215 }
 216 #menu ul.nojs{
 217     margin:0 0 .5em 0;
 218 }
 219
 220 #menu ul {
 221     list-style-type: none;
 222     padding: 0px;
 223     text-align:left;
 224     overflow:hidden; /*a:active under firefox makes a overflow*/
 225 }
 226
 227 #menu li {
 228     background-color: #fff;
 229     border-bottom:1px #DDDDFF solid;
 230 }
 231
 232 #menu li:last-child{
 233     border-bottom:none;
 234 }
 235
 236 #menu li a, #plang_selector a {
 237     padding: .1em .3em;
 238     display:block;
 239     color: #212121;
 240 }
 241 #menu li a:hover{
 242     background-color: #DDDDFF;
 243     text-decoration:underline;
 244 }
 245 #menu li.selected a{
 246     background-color: #DDDDFF;
 247 }
 248 /* =/ Main menu */
 249
 250 /*
 251  * == Desktop
 252  */
 253
 254 #desktop, #news, #share {
 255     width: 50%;
 256     min-width: 40em;
 257     margin: 0 auto;
 258 }
 259
 260 #desktop, #share {
 261     border-spacing:3em 1em;
 262     text-align: center;
 263 }
 264
 265 #share {
 266     margin-bottom: 1em;
 267 }
 268
 269 #news {
 270     margin-top: 1em;
 271 }
 272
 273 #news > div {
 274     text-align: left;
 275 }
 276
 277 #news p {
 278     margin: 0 .2em .3em;
 279     display: inline-block;
 280     width: 100%;
 281     word-wrap: break-word;
 282     -webkit-hyphens: auto;
 283     -moz-hyphens: auto;
 284     hyphens: auto;
 285     text-align: justify;
 286 }
 287
 288 .desktop, .panels {
 289     border-spacing:1em;
 290 }
 291
 292 #desktop,
 293 #news,
 294 #share,
 295 .plugin,
 296 #groups_list,
 297 #group_infos {
 298     border:1px solid #AAAAAA;
 299     -moz-border-radius: 10px;
 300     -webkit-border-radius: 10px;
 301     border-radius: 10px;
 302 }
 303
 304 .plugin,
 305 #groups_list,
 306 #group_infos {
 307     display: table-cell;
 308 }
 309
 310 .plugin {
 311     display: block;
 312     margin-bottom: 1em;
 313 }
 314
 315 .plugin article {
 316     display: inline-block;
 317     min-width: 49%;
 318 }
 319
 320 .plugin article header {
 321     border-bottom: 1px #DDDDFF solid;
 322 }
 323
 324 #desktop header,
 325 #news header,
 326 #share header,
 327 .plugin header,
 328 #groups_list header,
 329 #group_infos header {
 330     -moz-border-radius: 10px 10px 0 0;
 331     -webkit-border-radius: 10px 10px 0 0;
 332     border-radius: 10px 10px 0 0;
 333 }
 334
 335 #desktop a, #share a {
 336     border: 1px solid #d3d3d3;
 337     background-color: #e6e6e6;
 338     color: #555555;
 339     background-position: 50% .5em, 50% 50%;
 340     background-repeat: no-repeat, repeat-x;
 341     display: inline-block;
 342     width: 100px;
 343     text-align: center;
 344     vertical-align: bottom;
 345     padding: 60px .2em .2em;
 346     margin: 1em;
 347     -moz-border-radius: 10px;
 348     -webkit-border-radius: 10px;
 349     border-radius: 10px;
 350 }
 351
 352 #desktop a:hover, #share a:hover {
 353     border: 1px solid #999999;
 354     background-color: #ffb619;
 355     font-weight: normal; color: #212121;
 356 }
 357
 358 #desktop #transactions {
 359     background-image: url(images/desktop/transactions.png), url(jquery-ui/images/ui-bg_glass_75_e6e6e6_1x400.png);
 360 }
 361 #desktop #transactions:hover {
 362     background-image: url(images/desktop/transactions.png), url(jquery-ui/images/ui-bg_glass_75_ffb619_1x400.png);
 363 }
 364
 365 #desktop #members {
 366     background-image: url(images/desktop/members.png), url(jquery-ui/images/ui-bg_glass_75_e6e6e6_1x400.png);
 367 }
 368 #desktop #members:hover {
 369     background-image: url(images/desktop/members.png), url(jquery-ui/images/ui-bg_glass_75_ffb619_1x400.png);
 370 }
 371
 372 #desktop #groups {
 373     background-image: url(images/desktop/groups.png), url(jquery-ui/images/ui-bg_glass_75_e6e6e6_1x400.png);
 374 }
 375 #desktop #groups:hover {
 376     background-image: url(images/desktop/groups.png), url(jquery-ui/images/ui-bg_glass_75_ffb619_1x400.png);
 377 }
 378
 379 #desktop #contribs {
 380     background-image: url(images/desktop/contribs.png), url(jquery-ui/images/ui-bg_glass_75_e6e6e6_1x400.png);
 381 }
 382 #desktop #contribs:hover {
 383     background-image: url(images/desktop/contribs.png), url(jquery-ui/images/ui-bg_glass_75_ffb619_1x400.png);
 384 }
 385
 386 #desktop #mailings {
 387     background-image: url(images/desktop/mailing.png), url(jquery-ui/images/ui-bg_glass_75_e6e6e6_1x400.png);
 388 }
 389 #desktop #mailings:hover {
 390     background-image: url(images/desktop/mailing.png), url(jquery-ui/images/ui-bg_glass_75_ffb619_1x400.png);
 391 }
 392
 393 #desktop #reminder {
 394     background-image: url(images/desktop/reminders.png), url(jquery-ui/images/ui-bg_glass_75_e6e6e6_1x400.png);
 395 }
 396 #desktop #reminder:hover {
 397     background-image: url(images/desktop/reminders.png), url(jquery-ui/images/ui-bg_glass_75_ffb619_1x400.png);
 398 }
 399
 400 #desktop #prefs {
 401     background-image: url(images/desktop/preferences.png), url(jquery-ui/images/ui-bg_glass_75_e6e6e6_1x400.png);
 402 }
 403 #desktop #prefs:hover {
 404     background-image: url(images/desktop/preferences.png), url(jquery-ui/images/ui-bg_glass_75_ffb619_1x400.png);
 405 }
 406
 407 #desktop #plugins {
 408     background-image: url(images/desktop/plugins.png), url(jquery-ui/images/ui-bg_glass_75_e6e6e6_1x400.png);
 409 }
 410 #desktop #plugins:hover {
 411     background-image: url(images/desktop/plugins.png), url(jquery-ui/images/ui-bg_glass_75_ffb619_1x400.png);
 412 }
 413 /* =/ Desktop */
 414
 415 #share p {
 416     margin-bottom: 0;
 417 }
 418
 419 #telemetry_panel {
 420     display: none; /* Start hidden */
 421 }
 422 #telemetry_panel h3 strong {
 423     color: #ffb619;
 424 }
 425
 426 #share #telemetry {
 427     background-image: url(images/desktop/telemetry.png), url(jquery-ui/images/ui-bg_glass_75_e6e6e6_1x400.png);
 428 }
 429 #share #telemetry:hover {
 430     background-image: url(images/desktop/telemetry.png), url(jquery-ui/images/ui-bg_glass_75_ffb619_1x400.png);
 431 }
 432
 433 #share #register {
 434     background-image: url(images/desktop/register.png), url(jquery-ui/images/ui-bg_glass_75_e6e6e6_1x400.png);
 435 }
 436 #share #register:hover {
 437     background-image: url(images/desktop/register.png), url(jquery-ui/images/ui-bg_glass_75_ffb619_1x400.png);
 438 }
 439
 440 /* =/ Share */
 441
 442 /*
 443  * == Footer
 444  */
 445 footer {
 446     text-align: center;
 447     padding-top: 10px;
 448     margin-bottom: 10px;
 449 }
 450
 451 footer h4{
 452     font-size: 1em;
 453     margin: 0em 0 .2em;
 454     display:inline-block;
 455 }
 456
 457 footer ul{
 458     margin:0;
 459     padding: 0;
 460 }
 461
 462 footer li {
 463     display:inline-block;
 464     padding: .1em .2em;
 465     margin:0 .2em;
 466 }
 467
 468 footer a:hover {
 469     color: #000;
 470 }
 471 /* =/ Footer */
 472
 473 /* == Main Galette styles */
 474 #asso_name {
 475     text-align: center;
 476     margin: .5em auto 1em;
 477     font-weight: bold;
 478     font-size: 1.1em;
 479 }
 480
 481 #listfilter {
 482     text-align: center;
 483     background-color: #DDDDFF;
 484     padding: 10px;
 485     margin:0 1em 1em 1em;
 486     -moz-border-radius: 10px 10px 10px 10px;
 487     -webkit-border-radius: 10px 10px 10px 10px;
 488     border-radius: 10px 10px 10px 10px;
 489 }
 490
 491 .selectize-control {
 492     display: inline-block;
 493     min-width: 10em;
 494     text-align: left;
 495 }
 496
 497
 498 .cssform .selectize-input {
 499     margin-right: 2em;
 500     min-width: 25em;
 501 }
 502
 503 #galette_body .selectize-input, .public_page .selectize-input {
 504     padding: .1em 20px .1em 8px;
 505     overflow: unset;
 506 }
 507
 508 #galette_body .selectize-dropdown .option, .public_page .selectize-dropdown .option {
 509     cursor: pointer;
 510 }
 511
 512 #galette_body .selectize-dropdown .active, .public_page .selectize-dropdown .active  {
 513     background-color: #DDDDFF;
 514 }
 515 #galette_body .selectize-dropdown .option, #galette_body .selectize-dropdown .optgroup-header,
 516 .public_page .selectize-dropdown .option, .public_page .selectize-dropdown .optgroup-header {
 517     padding: .2em .5em;
 518 }
 519
 520 #listfilter input[type="text"]{
 521     padding:0;
 522 }
 523
 524 #listfilter > p {
 525     display: inline-block;
 526 }
 527
 528 .selection_menu{
 529     margin:0;
 530     padding:0;
 531 }
 532 .selection_menu li{
 533     margin:0.2em 0;
 534     display: inline-block;
 535 }
 536 .selection_menu input.submit{
 537     margin:0;
 538     background:none;
 539     display:inline;
 540     cursor:pointer;
 541     border:none;
 542     font-weight:normal;
 543     padding-left:20px;
 544     text-align:left;
 545 }
 546
 547 .selection_menu .exemple {
 548     font-weight: normal;
 549     font-size:0.9em;
 550 }
 551
 552 .hasPicker{
 553     display: inline;
 554 }
 555
 556 .hidden {
 557     display: none!important;
 558 }
 559 /* loading animation */
 560 #loading {
 561     position:absolute;
 562     top:0;
 563     bottom:0;
 564     left: 0;
 565     right: 0;
 566     margin: 0;
 567     text-align: center;
 568     background-color:rgba(0, 0, 0, 0.5);
 569     z-index: 100000;
 570 }
 571 #loading p {
 572     position: absolute;
 573     top:40%;
 574     width: 20%;
 575     margin-left: 40%;
 576     background-color: rgba(255,255,255,.8);
 577     -moz-border-radius: 10px;
 578     -webkit-border-radius: 10px;
 579     border-radius: 10px;
 580     padding: 1em 0;
 581     -moz-box-shadow: 1px 1px 12px rgba(255, 255, 255, 0.4);
 582     -webkitbox-shadow: 1px 1px 12px rgba(255, 255, 255, 0.4);
 583     box-shadow: 1px 1px 12px rgba(255, 255, 255, 0.4);
 584 }
 585
 586 #superadmin, #demo {
 587     color: white;
 588     font-weight: bold;
 589     margin: 0 .5em .5em;
 590     padding:.2em;
 591     background-color: rgba(255, 0, 0, 0.4);
 592     cursor: pointer;
 593     -moz-border-radius: 6px;
 594     -webkit-border-radius: 6px;
 595     border-radius: 6px;
 596     -moz-box-shadow: 1px 1px 13px rgba(255, 0, 0, 0.4);
 597     -webkit-box-shadow: 1px 1px 13px rgba(255, 0, 0, 0.4);
 598     box-shadow: 1px 1px 13px rgba(255, 0, 0, 0.4);
 599 }
 600
 601 #demo {
 602     background-color:rgba(0, 0, 0, 0.4);
 603     -moz-box-shadow: 1px 1px 13px rgba(0, 0, 0, 0.4);
 604     -webkit-box-shadow: 1px 1px 13px rgba(0, 0, 0, 0.4);
 605     box-shadow: 1px 1px 13px rgba(0, 0, 0, 0.4);
 606 }
 607
 608 .public_page #demo {
 609     position: absolute;
 610     width: 16em;
 611     top: 0;
 612     left: 0;
 613     margin:0;
 614     border-radius: 0 0 6px 0;
 615 }
 616
 617 /* == Buttons */
 618 #btnvalid, #btnadd, #btncancel, #btnsend, #btnback {
 619     padding-left: 1.4em!important;
 620     background-position: 10px 50%, 50% 50%!important;
 621     background-repeat: no-repeat, repeat!important;
 622 }
 623
 624
 625 input#btnvalid, input#btnadd, input#btncancel, input#btnsend, input#btnback {
 626     padding-left:2.4em!important;
 627 }
 628
 629 footer a, a > i {
 630     color: rgb(102, 102, 102);
 631 }
 632
 633 a:hover i {
 634     color: rgba(0, 0, 0, 1);
 635 }
 636
 637 .use > i, button.use i {
 638     color: rgba(0, 128, 0, .5);
 639 }
 640
 641
 642 .use:hover > i, button.use:hover i {
 643     color: rgba(0, 128, 0, 1);
 644 }
 645
 646 .action > i, button.action i {
 647     color: rgba(0, 0, 255, .5);
 648 }
 649
 650 .action:hover > i, button.action:hover i {
 651     color: rgba(0, 0, 255, 1);
 652 }
 653
 654 .info > i, button.info i {
 655     color: rgba(0, 0, 255, .5);
 656 }
 657
 658 .info:hover > i, button.info:hover i {
 659     color: rgba(0, 0, 255, 1);
 660 }
 661 .button i {
 662     padding-right: .3em;
 663 }
 664
 665 .delete i, #delete i, .actions_row .delete i {
 666     color: rgba(255, 0, 0, .5);
 667 }
 668
 669 .delete:hover i, #delete:hover i, .actions_row .delete:hover i {
 670     color: rgba(255, 0, 0, 1);
 671 }
 672
 673 .button.small {
 674     padding-left: inherit!important;
 675     background-repeat: repeat!important;
 676 }
 677 .button.small span {
 678     padding: 0 .5em;
 679     font-size: .7em;
 680 }
 681
 682 .button.notext {
 683     width: 1.3em;
 684     height: 2em;
 685 }
 686 .button.notext span {
 687     display: none;
 688 }
 689
 690 .group-btn {
 691     padding: 0!important;
 692     background-position: 50% 50%!important;
 693     background-repeat: repeat!important;
 694 }
 695
 696 #recup_mailing {
 697     float: right;
 698     margin-right: .5em;
 699 }
 700
 701 h1 #sendmail {
 702     display: inline-block;
 703     height: 25px;
 704     width: 35px;
 705     position: absolute;
 706     top:.1em;
 707     right: .5em;
 708     overflow: hidden;
 709     text-indent: 50px;
 710     padding:0!important;
 711 }
 712
 713 h1 #sendmail .ui-button-text {
 714     display: none;
 715 }
 716
 717 #backhome {
 718     background:url(images/home.png), url("jquery-ui/images/ui-bg_glass_75_e6e6e6_1x400.png");
 719 }
 720 #backhome.ui-state-hover {
 721     background-image:url(images/home.png), url("jquery-ui/images/ui-bg_glass_75_ffb619_1x400.png");
 722 }
 723
 724 #logout_10 i {
 725     color: rgba(255, 0, 0, 0.6);
 726 }
 727
 728 #logout {
 729     background-image:url(images/icon-quit.png), url("jquery-ui/images/ui-bg_glass_75_e6e6e6_1x400.png");
 730 }
 731 #logout.ui-state-hover {
 732     background-image:url(images/icon-quit.png), url("jquery-ui/images/ui-bg_glass_75_ffb619_1x400.png");
 733 }
 734
 735 #btnadd, #btnadd_small, .btnadd_small {
 736     background-image:url(images/icon-add.png), url("jquery-ui/images/ui-bg_glass_75_e6e6e6_1x400.png")!important;
 737 }
 738 #btnadd.ui-state-hover, #btnadd_small.ui-state-hover, .btnadd_small.ui-state-hover {
 739    background-image:url(images/icon-add.png), url("jquery-ui/images/ui-bg_glass_75_ffb619_1x400.png")!important;
 740 }
 741 .btnremove_small {
 742     background-image:url(images/delete.png), url("jquery-ui/images/ui-bg_glass_75_e6e6e6_1x400.png")!important;
 743     padding-left: 2em!important;
 744 }
 745 input.button.btnremove_small, input.button.btnadd_small {
 746     padding-left: 2em!important;
 747 }
 748 .btnremove_small.ui-state-hover{
 749    background-image:url(images/delete.png), url("jquery-ui/images/ui-bg_glass_75_ffb619_1x400.png")!important;
 750 }
 751
 752 #btninfo_small {
 753     background-image:url(images/icon-info.png), url("jquery-ui/images/ui-bg_glass_75_e6e6e6_1x400.png");
 754 }
 755 #btninfo_small.ui-state-hover{
 756    background-image:url(images/icon-info.png), url("jquery-ui/images/ui-bg_glass_75_ffb619_1x400.png");
 757 }
 758
 759 .tab-button, #btnadd_small, #btninfo_small {
 760     position: absolute!important; /* used along with .button */
 761     right: .5em;
 762 }
 763
 764 .ui-tabs .tab-button , #group .tab-button{
 765     top: .5em;
 766 }
 767
 768 legend .tab-button {
 769     right: 2.5em;
 770 }
 771
 772 #btncancel {
 773     background-image:url(images/icon-cancel.png), url("jquery-ui/images/ui-bg_glass_75_e6e6e6_1x400.png");
 774 }
 775 #btncancel.ui-state-hover {
 776     background-image:url(images/icon-cancel.png), url("jquery-ui/images/ui-bg_glass_75_ffb619_1x400.png");
 777 }
 778
 779 #btnvalid {
 780     background-image:url(images/icon-valid.png), url("jquery-ui/images/ui-bg_glass_75_e6e6e6_1x400.png");
 781 }
 782 #btnvalid.ui-state-hover {
 783     background-image:url(images/icon-valid.png), url("jquery-ui/images/ui-bg_glass_75_ffb619_1x400.png");
 784 }
 785
 786 #btnback {
 787     background-image:url(images/prev.png), url("jquery-ui/images/ui-bg_glass_75_e6e6e6_1x400.png");
 788 }
 789 #btnback.ui-state-hover {
 790     background-image:url(images/prev.png), url("jquery-ui/images/ui-bg_glass_75_ffb619_1x400.png");
 791 }
 792
 793 #btnsend {
 794     background-image:url(images/icon-mail-send.png), url("jquery-ui/images/ui-bg_glass_75_e6e6e6_1x400.png");
 795 }
 796 #btnsend.ui-state-hover {
 797     background-image:url(images/icon-mail-send.png), url("jquery-ui/images/ui-bg_glass_75_ffb619_1x400.png");
 798 }
 799
 800 #btnattach {
 801     margin-bottom: .5em;
 802 }
 803
 804 #preferences {
 805     background-image:url(images/icon-prefs.png), url("jquery-ui/images/ui-bg_glass_75_e6e6e6_1x400.png");
 806 }
 807 #preferences.ui-state-hover {
 808     background-image:url(images/icon-prefs.png), url("jquery-ui/images/ui-bg_glass_75_ffb619_1x400.png");
 809 }
 810
 811 #installpage input[type="submit"] {
 812     background-image:url(images/next.png), url("jquery-ui/images/ui-bg_glass_75_e6e6e6_1x400.png");
 813     padding-left: 0.4em!important;
 814     padding-right: 2em!important;
 815     background-position: 95% 50%, 50% 50%!important;
 816     background-repeat: no-repeat, repeat!important;
 817 }
 818 #installpage input[type="submit"]:hover {
 819     background-image:url(images/next.png), url("jquery-ui/images/ui-bg_glass_75_ffb619_1x400.png");
 820 }
 821
 822 .bigbutton, #btn_membercard, #btn_contrib {
 823     padding-top:30px!important;
 824     padding-left: 0!important;
 825     display: block;
 826     text-align: center;
 827 }
 828 .bigbutton i {
 829     display: block;
 830     width: 100%;
 831     position:absolute;
 832     top: .2em;
 833     left: 0;
 834 }
 835 #btn_membercard {
 836     background-image:url(images/member_card.png), url("jquery-ui/images/ui-bg_glass_75_e6e6e6_1x400.png");
 837 }
 838 #btn_membercard.ui-state-hover {
 839     background-image: url(images/member_card.png), url("jquery-ui/images/ui-bg_glass_75_ffb619_1x400.png");
 840 }
 841
 842 #btn_contrib {
 843     background-image:url(images/contribution.png), url("jquery-ui/images/ui-bg_glass_75_e6e6e6_1x400.png");
 844 }
 845 #btn_contrib.ui-state-hover {
 846     background-image: url(images/contribution.png), url("jquery-ui/images/ui-bg_glass_75_ffb619_1x400.png");
 847 }
 848
 849 #btntools {
 850     background-image: url(images/icon-tool.png), url(jquery-ui/images/ui-bg_glass_75_e6e6e6_1x400.png);
 851 }
 852 #btntools.ui-state-hover {
 853     background-image: url(images/icon-tool.png), url(jquery-ui/images/ui-bg_glass_75_ffb619_1x400.png);
 854 }
 855
 856 #btnregister {
 857     background-image: url(images/icon-identity.png), url(jquery-ui/images/ui-bg_glass_75_e6e6e6_1x400.png);
 858 }
 859 #btnregister.ui-state-hover {
 860     background-image: url(images/icon-identity.png), url(jquery-ui/images/ui-bg_glass_75_ffb619_1x400.png);
 861 }
 862
 863 #btntelemetry {
 864     background-image: url(images/icon-telemetry.png), url(jquery-ui/images/ui-bg_glass_75_e6e6e6_1x400.png);
 865 }
 866 #btntelemetry.ui-state-hover {
 867     background-image: url(images/icon-telemetry.png), url(jquery-ui/images/ui-bg_glass_75_ffb619_1x400.png);
 868 }
 869
 870 .left {
 871     text-align: left!important;
 872 }
 873
 874 .right {
 875     text-align: right!important;
 876 }
 877
 878 .center {
 879     text-align: center!important;
 880 }
 881
 882 .center_table {
 883     margin:0 auto;
 884 }
 885
 886 .cotis-ok {
 887     background-color: #DDFFDD!important;
 888     vertical-align: top;
 889 }
 890
 891 .cotis-never {
 892     background-color: #EEEEEE!important;
 893     vertical-align: top;
 894 }
 895
 896 .cotis-exempt {
 897     background-color: #DDFFDD!important;
 898     vertical-align: top;
 899 }
 900
 901 .cotis-soon {
 902     background-color: #FFE9AB!important;
 903     vertical-align: top;
 904 }
 905
 906 .cotis-late, .transaction-uncomplete {
 907     background-color: #FFDDDD!important;
 908     vertical-align: top;
 909 }
 910
 911 .cotis-lastday {
 912     background-color: #FFDDDD!important;
 913     vertical-align: top;
 914 }
 915
 916 .cotis-normal, .transaction-normal {
 917     background-color: #DDFFDD!important;
 918     vertical-align: top;
 919 }
 920
 921 .cotis-give {
 922     background-color: #FFDDDD!important;
 923     vertical-align: top;
 924 }
 925
 926 #transaction_detail {
 927     margin-bottom: 1em;
 928 }
 929
 930 #transaction_detail caption {
 931     font-weight: bold;
 932     padding:.2em;
 933 }
 934
 935 #transaction_detail thead td {
 936     text-align: center;
 937     font-style: italic;
 938     background-color: transparent;
 939 }
 940
 941 .debuginfos span{
 942     display: block;
 943     font-family: monospace;
 944     font-size:1.1em;
 945 }
 946
 947 /* =/ Main Galette styles */
 948
 949 /* == Groups stuff */
 950 #groups_list {
 951     border-spacing:3em 1em;
 952     min-width: 13em;
 953 }
 954
 955 #groups_tree, #group_infos > div {
 956     margin: .5em;
 957 }
 958
 959 #group_infos{
 960     width: 100%;
 961     margin-left: 1em;
 962     vertical-align: top;
 963 }
 964 /* =/ Groups stuff */
 965
 966 /* == Ajax member selection */
 967 #members_list {
 968     padding-top: 1em;
 969 }
 970
 971 .select_members {
 972     padding-right: 1em;
 973 }
 974 .select_members,
 975 #selected_members,
 976 #selected_groups {
 977     display:table-cell;
 978     vertical-align: top;
 979 }
 980
 981 .select_members.single {
 982     display: block;
 983 }
 984
 985 .select_members th.left {
 986     width:50%;
 987 }
 988
 989 #selected_members header,
 990 #selected_groups header {
 991     padding-top: 0;
 992     -moz-border-radius: 10px 10px 0 0;
 993     -webkit-border-radius: 10px 10px 0 0;
 994     border-radius: 10px 10px 0 0;
 995 }
 996
 997 #selected_members,
 998 #selected_groups {
 999     min-width: 25em!important;
1000     margin-left:.5em!important;
1001     text-align: center;
1002 }
1003
1004 #selected_members ul,
1005 #selected_groups ul {
1006     text-align: left;
1007     list-style-type: none;
1008     cursor: pointer;
1009     overflow: auto;
1010 }
1011
1012 #selected_members ul i,
1013 #selected_groups ul i {
1014     margin-right: .2em;
1015 }
1016
1017 #selected_members ul #none_selected,
1018 #selected_groups ul #none_selected {
1019     cursor: auto;
1020 }
1021
1022 #selected_members .unreachables {
1023     text-decoration: line-through;
1024     color: red;
1025 }
1026
1027 #selected_members h3,
1028 #selected_groups h3 {
1029     margin:0;
1030     font-size: 1em;
1031 }
1032
1033 .texts_legend .back > span {
1034     font-size: .9em;
1035     text-align: right;
1036     display: block;
1037     color:#666;
1038 }
1039
1040 .help {
1041     background:url(images/help.png) 100% 50% no-repeat;
1042     padding-right: 25px;
1043     min-height: 25px;
1044     display: inline-block;
1045 }
1046
1047 /*
1048  * == Public pages
1049  */
1050  .public_page footer{
1051     clear:both;
1052 }
1053
1054 .public_page header {
1055      text-align: center;
1056      margin-top:1em;
1057 }
1058
1059 .public_page table.listing,
1060 .public_page table.infoline,
1061 .public_page body > p {
1062     margin: 0 auto;
1063     width: 95%;
1064 }
1065
1066 .public_page p {
1067     margin: 1em auto .5em;
1068 }
1069
1070 .public_page section {
1071     text-align: center;
1072 }
1073
1074 .public_page table {
1075     margin:1em auto;
1076 }
1077
1078 .public_page form {
1079     text-align: center;
1080 }
1081
1082 .public_page .exemple {
1083     margin-top:0;
1084 }
1085
1086 .public_page #user {
1087     position: absolute;
1088     top:.4em;
1089     right:.4em;
1090     display:inline-block;
1091
1092 }
1093 .public_page #userlink {
1094     color: #666666;
1095     background: url(images/icon-user.png) 7px 50% no-repeat;
1096     padding: .2em .2em .2em 25px;
1097     display: inline-block;
1098 }
1099
1100 .public_page #user a:hover {
1101     color: #eea423;
1102 }
1103
1104 .public_page #logout_10 {
1105     margin: 0 0 .2em;
1106 }
1107
1108 nav#plang_selector {
1109     background: #fff;
1110     text-align: left;
1111     z-index: 100;
1112 }
1113
1114 nav#plang_selector > ul {
1115     margin: 0;
1116     padding: 0;
1117     background: white;
1118 }
1119
1120 #plang_selector li {
1121     margin:0.5em 0;
1122     list-style-type:none;
1123 }
1124
1125 #plang_selector li a:hover{
1126     background-color: #DDDDFF;
1127     text-decoration:underline;
1128 }
1129
1130 nav#plang_selector a {
1131     color: #666666;
1132     display: block!important;
1133 }
1134 nav#plang_selector > a {
1135     padding: .1em .3em;
1136 }
1137 #menu nav#plang_selector > a {
1138     border-bottom:1px #DDDDFF solid;
1139 }
1140
1141 nav#plang_selector.onhover > ul {
1142     display: none;
1143 }
1144
1145 nav#plang_selector.onhover:hover > ul {
1146     display: block;
1147 }
1148
1149 .public_page #plang_selector {
1150     position: absolute;
1151     left: .4em;
1152     top: .4em;
1153 }
1154
1155 /* =/ Public pages */
1156
1157 /*
1158  * == Plugins installation
1159  */
1160
1161 #plugin_install {
1162     background: #DDDDFF;
1163     border-radius: 6px;
1164     padding: 1em;
1165 }
1166
1167 #plugin_install footer {
1168     margin:.5em 0 0;
1169     padding: .1em .5em;
1170     text-align: center;
1171     font-size: 0.85em;
1172     border: 1px rgba(255, 255, 255, 0.5) solid;
1173     -moz-border-radius: 10px 10px 10px 10px;
1174     -webkit-border-radius: 10px 10px 10px 10px;
1175     border-radius: 10px 10px 10px 10px;
1176 }
1177
1178 #plugin_install footer p{
1179     margin:.5em .5em 0;
1180     color: #666666;
1181     font-size: 1.2em;
1182     font-weight:bold;
1183 }
1184
1185 #plugin_install footer ol{
1186     color:#999;
1187     padding:0;
1188     margin:0 0.5em 0.5em 0.5em;
1189     list-style-type:none;
1190 }
1191 #plugin_install footer li{
1192     line-height:1.7em;
1193     display:inline;
1194     margin: .1em;
1195     padding: 0;
1196 }
1197
1198 #plugin_install footer .current{
1199     color:black;
1200     font-weight:bold;
1201 }
1202
1203 #btn_box{
1204     text-align: right;
1205     margin:0;
1206 }
1207
1208 #plugin_install > div {
1209     padding: .2em;
1210     background-color: white;
1211     border-radius: 6px;
1212 }
1213
1214 #plugin_install h2{
1215     margin: .5em 0 0;
1216     font-size:1.2em;
1217     text-align: center;
1218 }
1219
1220 #installation_mode {
1221     display: table;
1222     table-layout: fixed;
1223     border-spacing: .5em;
1224     border-collapse: separate;
1225 }
1226
1227 .installation_mode {
1228     display: table-cell;
1229     width: 10%;
1230     border-radius: 6px;
1231     -moz-box-shadow: 0px 1px 2px #555;
1232     -webkitbox-shadow: 0px 1px 2px #555;
1233     box-shadow: 0px 1px 2px #555;
1234 }
1235
1236 #plugin_install h3 {
1237     font-size: 1.1em;
1238     margin: .2em 0 0;
1239     color: #666666;
1240     text-align: center;
1241 }
1242
1243 #plugin_install ul {
1244     margin: 0 auto .7em!important;
1245 }
1246
1247 ul.leaders {
1248     display: block!important;
1249     max-width: 40em;
1250     padding: 0;
1251     overflow-x: hidden;
1252     list-style: none;
1253     overflow: hidden;
1254 }
1255
1256 ul.leaders li {
1257     position: relative;
1258 }
1259
1260 ul.leaders li:before {
1261     float: left;
1262     width: 0;
1263     white-space: nowrap;
1264     content:
1265  ". . . . . . . . . . . . . . . . . . . . "
1266  ". . . . . . . . . . . . . . . . . . . . "
1267  ". . . . . . . . . . . . . . . . . . . . "
1268  ". . . . . . . . . . . . . . . . . . . . "
1269 }
1270
1271 ul.leaders span:first-child {
1272     padding-right: 0.33em;
1273     background: white
1274 }
1275
1276 ul.leaders span + span {
1277     padding-left: 0.33em;
1278     position: absolute;
1279     background: white;
1280     right: 0;
1281 }
1282
1283 /* =/ Plugins installation */
1284
1285 /*
1286  * == End
1287  */
1288
1289 /** OLD STYLES */
1290 input.submit
1291 {
1292     display:block;
1293     background-color: #FBFBFB;
1294     font-weight: bold;
1295     color: #666666;
1296     border: 1px solid #BBBBBB;
1297     margin: 0.5em auto 0 auto;
1298 }
1299
1300 input.submit:hover
1301 {
1302     color: #FF0000;
1303 }
1304
1305 .pagelink {
1306     font-weight: bold;
1307 }
1308
1309 #titre, #plugin_install h1{
1310     font-size:1.3em;
1311     line-height:1.7em;
1312     background-color:#DDDDFF;
1313     margin:0 1em 0em 1em;
1314     color: #666;
1315     text-align:center;
1316     position:relative;
1317     -moz-border-radius: 10px 10px 10px 10px;
1318     -webkit-border-radius: 10px 10px 10px 10px;
1319     border-radius: 10px 10px 10px 10px;
1320 }
1321 .self_subscribe{
1322     margin-top:0.5em!important;
1323 }
1324
1325 .titre {
1326     font-size:1.3em;
1327     text-align: center;
1328     font-weight: bold;
1329     border-style: solid;
1330     border-width: 1px;
1331     background-color: #FBFBFB;
1332     border-color: #BBBBBB;
1333     margin-top: 0.5em;
1334     margin-bottom: 1em;
1335     color: #000000;
1336     width: 100%;
1337 }
1338
1339 .soustitre {
1340     font-size:1.2em;
1341     text-align: left;
1342     font-weight: bold;
1343     border-style: solid;
1344     border-width: 1px;
1345     background-color: #FBFBFB;
1346     border-color: #BBBBBB;
1347     margin-top: 1em;
1348     margin-bottom: 0.5em;
1349     color: #000000;
1350     width: 100%;
1351 }
1352
1353 table.listing th, li.listing {
1354     background: #FFB619 url(jquery-ui/images/ui-bg_glass_65_ffb619_1x400.png) repeat-x scroll 50% 50%;
1355     color: #212121;
1356     white-space: nowrap;
1357     font-weight: normal;
1358     font-weight: bold;
1359     margin-top: .3em;
1360     padding: .1em .2em;
1361     vertical-align: middle;
1362 }
1363
1364 table.listing .row-title {
1365     display: none;
1366 }
1367
1368 .bgfree {
1369     background: none!important;
1370 }
1371
1372 .id_row,
1373 th.small_head{
1374     width:1%;
1375 }
1376 .username_row{
1377     width:25%;
1378 }
1379 .actions_row{
1380     width:1%;
1381     white-space: nowrap;
1382 }
1383
1384 .date_row{
1385     width:6em;
1386 }
1387
1388 table.listing th a,
1389 a.listing {
1390     color: #212121;
1391     vertical-align: middle;
1392 }
1393
1394 table.listing td {
1395     line-height:1.5em;
1396     margin-top:.3em;
1397     padding:.1em .2em;
1398     vertical-align: middle;
1399 }
1400
1401 table.listing th a:hover,
1402 a.listing:hover {
1403     color: #666!important;
1404 }
1405
1406 .emptylist {
1407     background-color: #EEEEEE;
1408     text-align: center;
1409     font-style: italic;
1410 }
1411
1412 .actif {
1413 }
1414
1415 .inactif, .inactive {
1416     color: #777777;
1417     font-style: italic;
1418 }
1419
1420 .acronyme {
1421     color: #AAAAAA;
1422     font-style: italic;
1423 }
1424
1425 .note {
1426     margin:0;
1427 }
1428
1429 .exemple, .disabled, .disabled a {
1430     color: #999999;
1431 }
1432
1433 #logo {
1434     text-align: center;
1435     font-weight: bold;
1436     margin: 0.5em 0;
1437 }
1438
1439 #main_logo{
1440     text-align: center;
1441     margin-top:0.5em;
1442 }
1443
1444 .nav1 {
1445     width: 13em;
1446     margin-left:0.3em;
1447     border-color: #7777FF;
1448     border-width: 1px;
1449     border-style: solid;
1450     margin-bottom: 0.5em;
1451     padding:0;
1452 }
1453
1454 .nav1 h1 {
1455     margin: 2px;
1456     font-size:1em;
1457     background-color: #CDCDFF;
1458     padding-left: 0.2em;
1459 }
1460
1461 .nav1 ul {
1462     list-style-type: none;
1463     margin: 2px;
1464     padding: 0px;
1465     border: none;
1466 }
1467
1468 .nav1 li {
1469     background-color: #EEEEEE;
1470     margin-bottom: 2px;
1471     padding-left: 2px;
1472 }
1473
1474 #logout {
1475     text-align: center;
1476     margin:0 0 .7em;
1477 }
1478
1479 #legende {
1480     border: 1px #7777FF solid;
1481     width:40%;
1482     margin-left:0.3em;
1483     margin-bottom:0.7em;
1484 }
1485
1486 #legende table {
1487     width: 100%;
1488 }
1489
1490 #legende h1 {
1491     margin: 2px;
1492     font-size:1em;
1493     background-color: #CDCDFF;
1494     padding-left: 0.2em;
1495     text-align: left;
1496 }
1497
1498 #legende th{
1499     text-align:center;
1500     width:18px;
1501 }
1502 #legende td, #legende th {
1503     padding-left: 2px;
1504 }
1505
1506 .ui-dialog > #legende {
1507     border:none;
1508     margin:0;
1509 }
1510
1511 .color-sample {
1512     border-color: #AAAAAA;
1513     border-width: 1px;
1514     border-style: solid;
1515 }
1516
1517 #content {
1518     margin-left:17em;
1519     margin-top: .4em;
1520     padding: 0 .5em .5em;
1521     position: relative;
1522     min-height: 100vh;
1523 }
1524
1525 #full_content {
1526     padding:0 0.5em;
1527 }
1528
1529 #listing,
1530 table.listing {
1531     width: 100%;
1532 }
1533
1534 #listing.single,
1535 table.listing.single {
1536     display: table;
1537 }
1538
1539 #listfilter form {
1540     margin-bottom: 0px;
1541 }
1542
1543 .infoline{
1544     vertical-align: top;
1545     width: 100%;
1546     margin-bottom: 1em;
1547 }
1548
1549 .infoline td {
1550     vertical-align: bottom;
1551     width: 33%;
1552 }
1553
1554 .infoline ul {
1555     margin: 0px;
1556     list-style-type: none;
1557 }
1558
1559 .infoline2 {
1560     margin-top: 2px;
1561 }
1562
1563 .mailing,
1564 #selected_members,
1565 #selected_groups {
1566     width: 60%;
1567     margin:0 auto;
1568     min-width: 60em;
1569     background-image: url(images/mailing_bg.jpg);
1570     background-repeat: no-repeat;
1571     background-position: center 1.5em;
1572     padding-bottom: .3em;
1573     -moz-border-radius: 10px 10px 0px 0px;
1574     -webkit-border-radius: 10px 10px 0px 0px;
1575     border-radius: 10px 10px 10px 10px;
1576     -moz-box-shadow: 1px 1px 12px #555;
1577     -webkitbox-shadow: 1px 1px 12px #555;
1578     box-shadow: 1px 1px 12px #555;
1579 }
1580
1581 #desktop header,
1582 #news header,
1583 #share header,
1584 .plugin header,
1585 .mailing header,
1586 #selected_members header,
1587 #selected_groups header,
1588 #groups_list header,
1589 #group_infos header {
1590     padding: .2em 0;
1591     text-align: center;
1592     font-weight: bold;
1593     border: 0;
1594 }
1595
1596 .mailing section {
1597     padding-top:1em;
1598 }
1599 .mailing section:first-child {
1600     padding-top:0em;
1601 }
1602
1603 .mailing_write > div,
1604 .mailing_preview,
1605 .mailing_attachments div{
1606     margin:.5em 1em;
1607 }
1608
1609 .mailing_infos header{
1610     -moz-border-radius: 10px 10px 0px 0px;
1611     -webkit-border-radius: 10px 10px 0px 0px;
1612     border-radius: 10px 10px 0px 0px;
1613 }
1614
1615 .mailing_infos p{
1616     width: 50%;
1617     display: table-cell;
1618     padding: .5em;
1619     vertical-align: middle;
1620     text-align: right;
1621 }
1622
1623 .mailing_infos p:nth-child(2){
1624     text-align: left;
1625 }
1626
1627 #mailing_objet, #mailing_corps{
1628     width:99%;
1629 }
1630
1631 .ajax_mailing_preview header {
1632     padding:.2em 0;
1633     font-weight: bold!important;
1634     text-align: center;
1635 }
1636
1637 #mailing_header dt,
1638 #mailing_header dd {
1639     display: inline-block;
1640     padding:0;
1641     margin:0;
1642 }
1643 #mailing_header dt {
1644     font-weight: bold;
1645     width: 18%;
1646 }
1647 #mailing_header dd {
1648     width: 80%;
1649 }
1650
1651 .attached {
1652     background: url(images/attached.png) 0 50% no-repeat;
1653     padding: .2em 0 .2em 16px;
1654     display: inline-block;
1655 }
1656
1657 .membercount {
1658     cursor: pointer;
1659     background: url(images/icon-user.png) 99% 50% no-repeat;
1660     padding-right: 20px;
1661 }
1662
1663 #errorbox, .errorbox {
1664     text-align:center;
1665     color:black;
1666     border : 2px solid #c00;
1667     padding : 0.5em 0.5em 0.5em 40px;
1668     background : white url(images/error.png) no-repeat 5px 50%;
1669     width: 80%;
1670     margin:0 auto 0.8em auto;
1671 }
1672
1673 #errorbox h1 {
1674     font-size:1em;
1675     font-weight: bold;
1676     margin: 0;
1677 }
1678
1679 #errorbox ul {
1680     list-style-type: none;
1681     margin: 2px;
1682     padding: 0px;
1683     border: none;
1684 }
1685
1686 #warningbox, .warningbox {
1687     text-align:center;
1688     color:black;
1689     padding : 0.5em 0.5em 0.5em 40px;
1690     background : white url(images/warning.png) no-repeat 5px 50%;
1691     width: 80%;
1692     margin:0 auto 0.8em auto;
1693     display:block;
1694     border:2px solid #FFB619;
1695 }
1696
1697 #warningbox h1 {
1698     font-size: 1em;
1699     font-weight: bold;
1700     margin: 0;
1701 }
1702
1703 #warningbox ul {
1704     list-style-type: none;
1705     margin: 2px;
1706     padding: 0px;
1707     border: none;
1708 }
1709
1710 #infobox, #successbox, #renewbox {
1711     text-align:center;
1712     color:black;
1713     border : 2px solid #04CC65;
1714     padding : 0.5em 0.5em 0.5em 40px;
1715     background : white url(images/ok.png) no-repeat 5px 50%;
1716     width: 80%;
1717     margin:0 auto 0.8em auto;
1718 }
1719
1720 #renewbox {
1721     width: 40em;
1722     position: absolute;
1723     top: 0;
1724     right: 10px;
1725     background : white url(images/desktop/telemetry.png) no-repeat 5px 50%;
1726     padding-left: 50px;
1727 }
1728
1729 #infobox h1 {
1730     font-size:1em;
1731     font-weight: bold;
1732     margin: 0;
1733 }
1734
1735 #infobox ul,
1736 #successbox ul {
1737     list-style-type: none;
1738     margin: 2px;
1739     padding: 0px;
1740     border: none;
1741 }
1742
1743 #input-table{
1744     margin:0.5em 1em;
1745     background-color:white;
1746 }
1747
1748 #input-table .libelle {
1749     font-size: 11px;
1750     text-align: left;
1751     background-color: #DDDDFF;
1752     font-weight: normal;
1753 }
1754
1755 #input-table .header {
1756     text-align: left;
1757     font-weight: bold;
1758 }
1759
1760 #input-table tr:hover {
1761     background-color: #EEEEEE;
1762 }
1763
1764 #tables_list{
1765     width:25em;
1766     margin-left:auto;
1767     margin-right:auto;
1768 }
1769
1770 #listing td,
1771 table.listing td,
1772 #listing input,
1773 table.listing input{
1774     vertical-align: middle;
1775 }
1776
1777 td img, a img {
1778     vertical-align: middle;
1779     max-width: none;
1780 }
1781
1782 .sql_log {
1783     border:1px dashed;
1784     display:block;
1785     margin:.2em .5em .5em;
1786     padding:.2em .3em;
1787     font-family: monospace;
1788     font-size:1.2em;
1789     background-color: rgba(221,221,255,0.5);
1790 }
1791
1792 .mail_preview {
1793     height: 230px;
1794     vertical-align: top;
1795     padding: 5px;
1796 }
1797
1798 .mailing_write p {
1799     display:block!important;
1800 }
1801
1802 #mail_preview div:nth-child(2) {
1803     max-height: 20em;
1804     overflow: auto;
1805 }
1806
1807 .button-container
1808 {
1809     text-align: center;
1810 }
1811
1812 .bigtable
1813 {
1814     text-align: center;
1815 }
1816 .bigtable table
1817 {
1818     margin-left: auto;
1819     margin-right: auto;
1820     border: 1px solid #BBBBBB;
1821 }
1822 .bigtable th
1823 {
1824     font-weight: normal;
1825     text-align: left;
1826     vertical-align: top;
1827     background-color: #DDDDFF;
1828     padding: 0px 5px 0px 5px;
1829 }
1830 .bigtable td
1831 {
1832     background-color: #EEEEEE;
1833     padding: 0px 5px 0px 5px;
1834     text-align: left;
1835 }
1836 .bigtable .separator
1837 {
1838     padding:.3em 0 .1em;
1839     background-color: #FFFFFF;
1840     font-weight: bold;
1841     text-align: center;
1842 }
1843 .bigtable .subtitle
1844 {
1845     color:#0C0CC0;
1846     padding: 1em 5px 0.5em 5px;
1847     font-weight:bold;
1848     border-top:1px solid;
1849 }
1850
1851 :not(.selectize-input).required{
1852     color:#FF0000;
1853     font-weight:bold;
1854 }
1855
1856 /** Accessibility **/
1857 fieldset{
1858     border: 1px solid #BBBBBB;
1859     margin:0 1em 1em;
1860     text-align:left;
1861     position:relative;
1862     padding:.5em;
1863 }
1864 fieldset.large{
1865     margin:0 1% 1em 1%;
1866     clear:right;
1867 }
1868 fieldset ul{
1869     list-style-type:none;
1870     margin:0;
1871     padding:0;
1872 }
1873 fieldset li{
1874     margin:0.1em 0;
1875     clear:left;
1876 }
1877
1878 legend {
1879     border: 1px solid #BBBBBB;
1880     font-weight:bold;
1881     padding:0.3em;
1882     width:97%;
1883     margin-left:1%;
1884     margin-bottom: 1em;
1885     background-color:white;
1886 }
1887
1888 .cssform, .galette_form { background-color:white; }
1889 .cssform ul, .galette_form ul {
1890     /*display: inline-block;*/
1891     padding:0;
1892 }
1893 .cssform li, .galette_form li {
1894     clear:none;
1895 }
1896 .cssform p, .cssform div.p,
1897 .galette_form p, .galette_form div.p {
1898     clear: left;
1899     margin: 0;
1900     padding: 5px 0;
1901     padding-left: 22em; /*width of left column containing the label elements plus 1*/
1902     border-top: 1px dashed gray;
1903     height: 1%;
1904 }
1905
1906 /* no border on the first 'p' child */
1907 .cssform p:nth-child(2), #addfield p:first-child, .cssform legend+p/*, .cssform div.p:nth-child(2), .cssform div p:nth-child(1)*/
1908 .galette_form p:nth-child(2), .galette_form+p, .galette_form legend+p {
1909     border-top:none;
1910 }
1911 /* If there is a div, the preceding rules does not apply to the correct element :( */
1912 .cssform div p:nth-child(2),
1913 .galette_form div p:nth-child(2) {
1914     border-top:1px dashed gray;
1915 }
1916 /* But w do not whant border on the first element thought :) */
1917 .cssform div p:nth-child(1),
1918 .galette_form div p:nth-child(1) {
1919     border-top:none;
1920 }
1921
1922 .cssform p.exemple {
1923     border: none!important;
1924 }
1925
1926 .cssform p.notform{
1927     padding-left:0;
1928     border:none;
1929     height:auto;
1930 }
1931
1932 .galette_form legend {
1933     border-top-right-radius: 4px;
1934     border-top-left-radius: 4px;
1935     background: url("jquery-ui/images/ui-bg_glass_65_ffb619_1x400.png") repeat-x scroll 50% 50% #FFB619;
1936     border: 1px solid #AAAAAA;
1937     color: #212121;
1938     font-weight: normal;
1939 }
1940
1941 .bline,
1942 .galette_form label {
1943     font-weight: bold;
1944     background-color: #DDDDFF;
1945     padding:0.1em 0.3em;
1946     margin-bottom:1em;
1947     display:block;
1948     vertical-align:top;
1949     padding:3px;
1950 }
1951
1952 th.bline, td.bline{
1953     font-weight: bold;
1954     background-color: #DDDDFF;
1955     padding:0.1em 0.3em;
1956     margin-bottom:0;
1957     display:block;
1958     text-align:left;
1959 }
1960
1961 .cssform .bline, .galette_form label, .galette_form .bline {
1962     vertical-align: middle;
1963     display: inline-block;
1964     margin: 0 0 0 -22em;
1965     width: 19.9em;
1966 }
1967
1968 .galette_form .radios label,
1969 .galette_form label.labelalign {
1970     width: auto;
1971     background: none;
1972     margin: 0;
1973     padding: 0;
1974     font-weight: normal;
1975 }
1976
1977 label.simplelabel {
1978     margin: 0;
1979     display: inline;
1980     width: auto;
1981     vertical-align: baseline;
1982     background: inherit;
1983     font-weight: inherit;
1984 }
1985
1986 .galette_form textarea,
1987 .cssform textarea{
1988     width:90%;
1989     height: 150px;
1990     padding-right: 8px;
1991 }
1992
1993 .cssform .ui-button-text-only .ui-button-text {
1994     padding: .1em 1em;
1995 }
1996
1997 .galette_form img.mdp_img {
1998     vertical-align: top;
1999 }
2000
2001 .logo{
2002     margin:0.3em 0;
2003 }
2004
2005 .menu{
2006     margin:0.7em 0 0 0;
2007     padding:0;
2008     text-align:right;
2009     font-weight:bold;
2010 }
2011 .menu li{
2012     margin:0.5em 0;
2013     list-style-type:none;
2014 }
2015 .menu a{
2016     color: #666666;
2017     padding:0.3em 20px 0.3em 0;
2018 }
2019
2020 .inline{ display:inline!important; }
2021
2022 .nowrap{ white-space:nowrap; }
2023
2024 .m_subscribe{
2025     position:absolute;
2026     right:.5em;
2027     top:.5em;
2028     margin:0;
2029 }
2030
2031 .fleft{float:left;}
2032 .fright{float:right;}
2033 .clear{clear: both;}
2034 .cright{clear: right;}
2035
2036 input.large, span.large {
2037     width:90%!important;
2038 }
2039
2040 .picker{
2041     padding:0 1em;
2042 }
2043
2044 /*** Voir adhérent ***/
2045 .details{
2046     width:85%;
2047     margin-bottom:1em;
2048     border-top: none!important;
2049 }
2050
2051 .details caption{
2052     font-weight:bold;
2053     font-size:1.1em;
2054     padding:.3em;
2055 }
2056 .details th{
2057     width:15em;
2058     font-weight:bold;
2059     vertical-align:middle;
2060     padding:0.2em 0.1em;
2061 }
2062
2063 td.photo img{
2064     border: 1px solid black;
2065     margin-top: 5px;
2066     margin-bottom: 5px;
2067 }
2068
2069 .dndhover {
2070     opacity:0.4;
2071 }
2072
2073 #details_menu{
2074     padding:0;
2075     text-align:center;
2076     list-style-type: none;
2077     width: 85%;
2078     margin: 0 auto;
2079     display: -webkit-box;
2080     display: -moz-box;
2081     display: -ms-flexbox;
2082     display: -webkit-flex;
2083     display: flex;
2084     -webkit-flex-flow: row wrap;
2085     flex-flow: row wrap;
2086     justify-content: space-around;
2087 }
2088 #details_menu li {
2089     width: 10em;
2090     margin-bottom:.5em;
2091 }
2092
2093 #details_menu li a {
2094     height: calc(100% - 32px);
2095     width: 100%;
2096 }
2097
2098 /*** /Voir adhérent ***/
2099
2100 /*** Onglets ***/
2101 .tabbed {
2102     display: inline-block;
2103     width: 100%;
2104 }
2105
2106 .tabbed > div {
2107     margin-bottom: 1em;
2108 }
2109
2110 .tabbed fieldset {
2111     margin: 0;
2112     padding: 0!important;
2113     border: none;
2114 }
2115
2116 .tabbed legend, .tabbed h3 {
2117     border: none;
2118     margin: 0;
2119     text-align: center;
2120     font-size: 1.2em;
2121 }
2122
2123 #tabs > div {
2124     margin: 0;
2125     padding: 0;
2126 }
2127 /*** /Onglets ***/
2128
2129 /*** Tooltips ***/
2130 #tooltip {
2131     position: absolute;
2132     z-index: 3000;
2133     background-color: white;
2134     padding: 5px;
2135     opacity: 0.95;
2136     -moz-border-radius: 6px;
2137     -webkit-border-radius: 6px;
2138     border-radius: 6px;
2139     -moz-box-shadow: 1px 1px 12px #555;
2140     -webkitbox-shadow: 1px 1px 12px #555;
2141     box-shadow: 1px 1px 12px #555;
2142
2143 }
2144 #tooltip h3, #tooltip div { margin: 0; }
2145
2146 .tt{
2147     width:20em;
2148 }
2149
2150 .galette_form label > i, label.bline > i, span.bline > i {
2151     float: right;
2152     font-size: 1.1em;
2153     color: rgba(0, 0, 255, .5);
2154 }
2155
2156 label:hover > i, span.bline:hover > i {
2157     color: rgba(0, 0, 255, 1);
2158 }
2159
2160 /*** /Tooltips ***/
2161
2162 .trombino{
2163     margin:.5em 0 0 .5em;
2164     background-color: #DDDDFF;
2165     padding-bottom:.2em;
2166     display: inline-block;
2167     vertical-align: top;
2168     text-align:center;
2169     width:240px;
2170     height:240px;
2171     -moz-border-radius: 10px 10px 10px 10px;
2172     -webkit-border-radius: 10px 10px 10px 10px;
2173     border-radius: 10px 10px 10px 10px;
2174 }
2175
2176 .trombino img{
2177     margin:.5em .5em 0 .5em;
2178 }
2179
2180 .trombinoscope {
2181     text-align: center;
2182 }
2183
2184 .tbl_line_even,
2185 .even > td {
2186     background-color: #EEEEEE!important;
2187     vertical-align: top;
2188 }
2189
2190 .tbl_line_odd,
2191 .odd > td {
2192     background-color: #E2E5EE!important;
2193     vertical-align: top;
2194 }
2195
2196 .cssform > .fields_list {
2197     display: block;
2198 }
2199 .fields_list li{
2200     line-height:1.5em;
2201     margin-top:.3em;
2202     padding:.1em .2em;
2203     vertical-align: middle;
2204     cursor: move;
2205 }
2206
2207 .yesno > input, .yesnoadmin > input {
2208     margin: 0.2em;
2209     vertical-align: bottom;
2210 }
2211
2212 .fields_list label {
2213     padding:0 .5em 0 .1em;
2214 }
2215
2216 .listing tr:hover td,
2217 .fields_list li:hover,
2218 .odd:hover > td,
2219 .even:hover > td {
2220     background-color: #DDDDFF!important;
2221 }
2222
2223 .listing tfoot tr:hover td, tr.checkboxes:hover td {
2224     background-color: transparent!important;
2225 }
2226
2227 .fields_list span.label{
2228     display:inline-block;
2229     width: 33%;
2230 }
2231
2232 .fields_list span.yesno{
2233     margin-right:.2em;
2234     display:inline-block;
2235     text-align:center;
2236     width: 18%;
2237 }
2238 .fields_list span.access{
2239     margin-right:.2em;
2240     min-width:25em;
2241     width:33%;
2242     display:inline-block;
2243     text-align:center;
2244 }
2245
2246 .fields_list .selectize-input {
2247     min-width: auto;
2248 }
2249
2250 #add_category{
2251     float:right;
2252 }
2253
2254 #expand, #collapse{
2255     padding: 0.4em 1em;
2256     position:relative;
2257 }
2258
2259 #expand span.ui-icon, #collapse span.ui-icon{
2260     float:left;
2261     margin-right: .2em;
2262 }
2263
2264 .collapsible{
2265     float:left;
2266 }
2267
2268 .ui-datepicker-trigger{
2269     cursor:pointer;
2270     vertical-align: middle;
2271     border:none;
2272     background:none;
2273 }
2274
2275 /** PAGINATION */
2276 .pages .current a{
2277     color:#FFB619;
2278     font-weight:bold;
2279 }
2280 .pages{
2281     text-align:center;
2282     margin:.2em 0 0 0;
2283     padding:0;
2284 }
2285 .pages a{
2286     padding:0 3px;
2287 }
2288 .pages a:hover{
2289     background-color:#EEEEEE;
2290     color:black;
2291 }
2292 .pages li{
2293     display:inline;
2294     padding:0;
2295     margin:0;
2296 }
2297 /** /PAGINATION*/
2298
2299 .notup2date {
2300     margin-top: 5em;
2301 }
2302
2303 .notup2date #errorbox {
2304     width: 30em;
2305 }
2306
2307 #oldie {
2308     /*position: absolute;
2309     top: 0;*/
2310     background-color: red;
2311     text-align: center;
2312     font-weight: bold;
2313 }
2314
2315 #oldie p {
2316     margin: 0;
2317 }
2318
2319 #member_stateofdue {
2320     margin: 0 auto .5em;
2321     width: 85%;
2322     padding: .1em 0;
2323     border-radius: 6px;
2324     text-align: center;
2325 }
2326
2327 .warnings {
2328     background-image: url(images/icon-warning.png);
2329     background-repeat: no-repeat;
2330     background-position: center right;
2331 }
2332
2333 .jqplot-target {
2334     display: inline-block;
2335 }
2336
2337 #ContribsAllTime {
2338     width: 800px;
2339 }
2340
2341 .error {
2342     max-width: 100em;
2343     margin: 0 auto;
2344 }
2345
2346 .vtop {
2347     vertical-align: top!important;
2348 }
2349
2350 .selectize-control.single .selectize-input::after {
2351     right: 10px!important;
2352 }
2353
2354 /** Mobile devices */
2355 @media (max-width: 767px) {
2356
2357     /* passer tous les éléments de largeur fixe en largeur automatique */
2358     body {
2359         width: auto !important;
2360         margin: auto !important;
2361         padding: .4em 0 0;
2362     }
2363
2364     #details_menu, #member_stateofdue, .details {
2365         width: 100%;
2366     }
2367
2368     /* fixer une largeur maximale  de 100 % aux éléments potentiellement problématiques */
2369     table, td, blockquote, code, pre, textarea, input, object, embed, video {
2370         max-width: 100% !important;
2371     }
2372
2373     /* gestion des mots longs */
2374     textarea, code, pre, samp {
2375         word-wrap: break-word; /* césure forcée */
2376         white-space: pre-line; /* passage à la ligne spécifique pour les éléments à châsse fixe */
2377     }
2378
2379     .menu {
2380       text-align:center;
2381     }
2382
2383     #main_logo {
2384         position:relative;
2385         top:0;
2386         right:0;
2387     }
2388
2389     #titre, #listfilter {
2390         margin-left: 0;
2391         margin-right: 0;
2392     }
2393
2394     /** Responsive menu */
2395     #menu {
2396         float: none;
2397         position: absolute;
2398         min-height: 100vh;
2399     }
2400
2401     #content {
2402         padding-top: 0;
2403         margin: 0;
2404         background-color: white;
2405         transform: translateX(0) translateZ(0);
2406         transition: transform .2s;
2407         will-change: transform;
2408         min-height: 100vh;
2409     }
2410
2411     /* Button deco */
2412     [class^="nav-button"] {
2413         display: block;
2414         z-index: 1;
2415         height: 1.5rem;
2416         width: 1.5rem;
2417         background-color: transparent;
2418         background-image: linear-gradient(to right, #333, #333),
2419         linear-gradient(to right, #333, #333),
2420         linear-gradient(to right, #333, #333);
2421         background-position: center top, center, center bottom;
2422         background-repeat: no-repeat;
2423         background-size: 1.5rem .3rem;
2424         padding: 0;
2425         outline: 0;
2426         border: 0;
2427         cursor: pointer;
2428         -webkit-tap-highlight-color:rgba(0,0,0,0);
2429         float:left;
2430         margin-top: .2em;
2431         margin-left: .3em;
2432     }
2433
2434     /* here's goes the push left effect */
2435     body:target #content {
2436         /* same as #content margin-left */
2437         transform: translateX(17em);
2438     }
2439     .nav-button-close,
2440     body:target .nav-button-open {
2441         display: none;
2442     }
2443     .nav-button-open,
2444     body:target .nav-button-close {
2445         display: block;
2446     }
2447
2448     /** Dashboard */
2449     #desktop, #news, #share {
2450         width: 100%;
2451         min-width: inherit;
2452     }
2453
2454     /** Forms */
2455     .cssform p, .cssform div.p,
2456     .galette_form p, .galette_form div.p {
2457         padding-left: 0;
2458     }
2459
2460     .cssform .bline, .galette_form label, .galette_form .bline {
2461         margin-left: 0;
2462         margin-bottom: .2em;
2463         padding-right: 0;
2464         display: block;
2465         width: auto;
2466     }
2467
2468     fieldset, fieldset.large {
2469         margin-left: 0;
2470         margin-right: 0;
2471     }
2472
2473     .galette_form textarea,
2474     .cssform textarea{
2475         width: 100%;
2476         height: 5em;
2477     }
2478
2479     /** Tables */
2480     table.listing {
2481         width: 100%;
2482     }
2483
2484     table.listing thead {
2485         /* Accessibly hide <thead> on narrow viewports */
2486         position: absolute;
2487         clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
2488         clip: rect(1px, 1px, 1px, 1px);
2489         padding: 0;
2490         border: 0;
2491         height: 1px;
2492         width: 1px;
2493         overflow: hidden;
2494     }
2495
2496      /* Set these items to display: block for narrow viewports */
2497     table.listing tbody,
2498     table.listing tr,
2499     table.listing th,
2500     table.listing td {
2501         display: block;
2502         padding: 0;
2503         text-align: left;
2504         white-space: normal;
2505     }
2506
2507     table.listing.same tr, tr.same {
2508         display: table-row;
2509     }
2510
2511     table.listing.same td, tr.same td {
2512         display: table-cell;
2513         width: 100%;
2514     }
2515
2516     table.listing td {
2517         margin: 0;
2518     }
2519
2520     table.listing tr {
2521         margin-bottom: .5em;
2522     }
2523
2524     table.listing td[data-scope="id"] {
2525         float: left;
2526         background: none!important;
2527         color: #212121;
2528         margin: .5em .2em 0 .2em;
2529     }
2530
2531     table.listing td[data-scope="row"] {
2532         background: #FFB619 url(jquery-ui/images/ui-bg_glass_65_ffb619_1x400.png) repeat-x scroll 50% 50%;
2533         color: #212121;
2534         font-weight: bold;
2535         margin-top: .3em;
2536         padding: .5em .2em;
2537         vertical-align: middle;
2538         text-align: left;
2539     }
2540
2541     table.listing td[data-scope="row"] a {
2542         color: #212121;
2543         vertical-align: middle;
2544     }
2545
2546
2547     table.listing td[data-scope="row"] a:hover {
2548         color: #666!important;
2549     }
2550
2551     table.listing td[data-scope="row"] input[type=checkbox],
2552     table.listing td[data-scope="row"] img {
2553         float: right;
2554     }
2555
2556     table.listing td.center {
2557         text-align: left!important;
2558     }
2559
2560     span[data-title]:before,
2561     td[data-title]:before {
2562       content: attr(data-title);
2563       display: inline-block;
2564       width: 10em;
2565       font-weight: bold;
2566     }
2567
2568     table.listing img[src$="icon-empty.png"] {
2569         display: none;
2570     }
2571
2572     table.listing .actions_row,
2573     table.listing .username_row {
2574         width: auto;
2575     }
2576
2577     table.listing td.actions_row {
2578         text-align: center!important;
2579     }
2580
2581     table.listing .row-title {
2582         display: inline;
2583     }
2584
2585     li.listing {
2586         display: none;
2587     }
2588
2589     .tbl_line_even span.label,
2590     .tbl_line_odd span.label,
2591     .tbl_line_even span.yesno,
2592     .tbl_line_odd span.yesno,
2593     .tbl_line_even span.yesnoadmin,
2594     .tbl_line_odd span.yesnoadmin {
2595         display: block;
2596         width: auto;
2597         text-align: left;
2598     }
2599
2600     #renewbox {
2601         width: auto;
2602         position: initial;
2603     }
2604
2605     #details_menu li {
2606         width: 8em;
2607     }
2608 }
2609 @media screen and (max-width:767px) and (orientation: landscape) {
2610     body {
2611         -webkit-text-size-adjust: 70%;
2612     }
2613 }